fix:global css isnt the same in component-test and website

JerryWu1234 · Oct 8, 2024 · 346e941 · 346e941
1 parent 35c923e
commit 346e941
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 16 deletions.
diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css
@@ -1240,11 +1240,19 @@
 
   *::-webkit-scrollbar-thumb {
     /* Thumb color */
-    background-color: var(--qwikui-slate-500);
+    background-color: hsla(var(--foreground) / 0.25);
     border-radius: 0.5rem;
     background-clip: padding-box;
-    border-left: 0.3rem solid transparent;
-    border-right: 0.3rem solid transparent;
+    border-left: 0.15rem solid transparent;
+    border-right: 0.15rem solid transparent;
+  }
+
+  .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.1);
+  }
+
+  .dark .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.2);
   }
 
   *::-webkit-scrollbar-corner {
@@ -1256,8 +1264,17 @@
     border-left: 1px solid var(--qwikui-slate-300);
   }
 
-  .dark *::-webkit-scrollbar-thumb {
-    background-color: var(--qwikui-slate-500);
+  .toc-scrollbar::-webkit-scrollbar-track,
+  .dark .toc-scrollbar::-webkit-scrollbar-track {
+    border-color: transparent;
+  }
+
+  .toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.15);
   }
 
   .dark *::-webkit-scrollbar-track {
@@ -1272,7 +1289,7 @@
   }
 
   .code-example *::-webkit-scrollbar-thumb {
-    background: var(--qwikui-slate-500);
+    background-color: var(--qwikui-slate-600);
     border-radius: 0.5rem;
     background-clip: padding-box;
   }
@@ -1290,6 +1307,10 @@
   .dark .note-link a {
     border-bottom: 1px solid white !important;
   }
+
+  .gif-container {
+    border-radius: var(--border-radius);
+  }
 }
 
 :root {
@@ -1342,7 +1363,7 @@ body {
   min-height: 100%;
 }
 
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
+/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
   It would make more sense to supply the user with the animation declaration in the docs.
 */
 @layer utilities {

diff --git a/apps/component-tests/src/root.tsx b/apps/component-tests/src/root.tsx
@@ -1,13 +1,25 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
 import {
-  QwikCityProvider,
-  RouterOutlet,
-  ServiceWorkerRegister,
-} from '@builder.io/qwik-city';
-import { RouterHead } from './components/router-head/router-head';
+  component$, useStyles$,
+  PrefetchGraph,
+  PrefetchServiceWorker
+} from '@builder.io/qwik';
+import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
 
+import { RouterHead } from './components/router-head/router-head';
 import globalStyles from './global.css?inline';
 
+import { ThemeProvider } from '@qwik-ui/themes';
+
+import '@fontsource-variable/inter';
+import {
+  ThemeBaseColors,
+  ThemeBorderRadiuses,
+  ThemeFonts,
+  ThemeModes,
+  ThemePrimaryColors,
+  ThemeStyles,
+} from '@qwik-ui/utils';
+
 export default component$(() => {
   /**
    * The root of a QwikCity site always start with the <QwikCityProvider> component,
@@ -17,16 +29,31 @@ export default component$(() => {
    */
   useStyles$(globalStyles);
 
+
   return (
     <QwikCityProvider>
       <head>
-        <meta charSet="utf-8" />
+        <meta charset="utf-8" />
         <link rel="manifest" href="/manifest.json" />
         <RouterHead />
       </head>
       <body lang="en">
-        <RouterOutlet />
-        <ServiceWorkerRegister />
+        <PrefetchGraph />
+        <PrefetchServiceWorker />
+        <ThemeProvider
+          attribute="class"
+          enableSystem={false}
+          themes={[
+            ...Object.values(ThemeFonts),
+            ...Object.values(ThemeModes),
+            ...Object.values(ThemeStyles),
+            ...Object.values(ThemeBaseColors),
+            ...Object.values(ThemePrimaryColors),
+            ...Object.values(ThemeBorderRadiuses),
+          ]}
+        >
+          <RouterOutlet />
+        </ThemeProvider>
       </body>
     </QwikCityProvider>
   );