Skip to content

Commit 6d48d34

Browse files
JerryWu1234JerryWu1234
authored
fix:global css isnt the same in component-test and website (#983)
* fix:global css isnt the same in component-test and website * fix:global css isnt the same in component-test and website * Delete .changeset/moody-cycles-cheat.md
1 parent f366873 commit 6d48d34

File tree

2 files changed

+64
-16
lines changed

2 files changed

+64
-16
lines changed

‎apps/component-tests/src/global.css‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1240,11 +1240,19 @@
12401240

12411241
*::-webkit-scrollbar-thumb {
12421242
/* Thumb color */
1243-
background-color: var(--qwikui-slate-500);
1243+
background-color: hsla(var(--foreground) / 0.25);
12441244
border-radius: 0.5rem;
12451245
background-clip: padding-box;
1246-
border-left: 0.3rem solid transparent;
1247-
border-right: 0.3rem solid transparent;
1246+
border-left: 0.15rem solid transparent;
1247+
border-right: 0.15rem solid transparent;
1248+
}
1249+
1250+
.navigation-docs::-webkit-scrollbar-thumb {
1251+
background-color: hsla(var(--foreground) / 0.1);
1252+
}
1253+
1254+
.dark .navigation-docs::-webkit-scrollbar-thumb {
1255+
background-color: hsla(var(--foreground) / 0.2);
12481256
}
12491257

12501258
*::-webkit-scrollbar-corner {
@@ -1256,8 +1264,17 @@
12561264
border-left: 1px solid var(--qwikui-slate-300);
12571265
}
12581266

1259-
.dark *::-webkit-scrollbar-thumb {
1260-
background-color: var(--qwikui-slate-500);
1267+
.toc-scrollbar::-webkit-scrollbar-track,
1268+
.dark .toc-scrollbar::-webkit-scrollbar-track {
1269+
border-color: transparent;
1270+
}
1271+
1272+
.toc-scrollbar::-webkit-scrollbar-thumb {
1273+
background-color: transparent;
1274+
}
1275+
1276+
.toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
1277+
background-color: hsla(var(--foreground) / 0.15);
12611278
}
12621279

12631280
.dark *::-webkit-scrollbar-track {
@@ -1272,7 +1289,7 @@
12721289
}
12731290

12741291
.code-example *::-webkit-scrollbar-thumb {
1275-
background: var(--qwikui-slate-500);
1292+
background-color: var(--qwikui-slate-600);
12761293
border-radius: 0.5rem;
12771294
background-clip: padding-box;
12781295
}
@@ -1290,6 +1307,10 @@
12901307
.dark .note-link a {
12911308
border-bottom: 1px solid white !important;
12921309
}
1310+
1311+
.gif-container {
1312+
border-radius: var(--border-radius);
1313+
}
12931314
}
12941315

12951316
:root {
@@ -1342,7 +1363,7 @@ body {
13421363
min-height: 100%;
13431364
}
13441365

1345-
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
1366+
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
13461367
It would make more sense to supply the user with the animation declaration in the docs.
13471368
*/
13481369
@layer utilities {

‎apps/component-tests/src/root.tsx‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
1-
import { component$, useStyles$ } from '@builder.io/qwik';
21
import {
3-
QwikCityProvider,
4-
RouterOutlet,
5-
ServiceWorkerRegister,
6-
} from '@builder.io/qwik-city';
7-
import { RouterHead } from './components/router-head/router-head';
2+
component$, useStyles$,
3+
PrefetchGraph,
4+
PrefetchServiceWorker
5+
} from '@builder.io/qwik';
6+
import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
87

8+
import { RouterHead } from './components/router-head/router-head';
99
import globalStyles from './global.css?inline';
1010

11+
import { ThemeProvider } from '@qwik-ui/themes';
12+
13+
import '@fontsource-variable/inter';
14+
import {
15+
ThemeBaseColors,
16+
ThemeBorderRadiuses,
17+
ThemeFonts,
18+
ThemeModes,
19+
ThemePrimaryColors,
20+
ThemeStyles,
21+
} from '@qwik-ui/utils';
22+
1123
export default component$(() => {
1224
/**
1325
* The root of a QwikCity site always start with the <QwikCityProvider> component,
@@ -17,16 +29,31 @@ export default component$(() => {
1729
*/
1830
useStyles$(globalStyles);
1931

32+
2033
return (
2134
<QwikCityProvider>
2235
<head>
23-
<meta charSet="utf-8" />
36+
<meta charset="utf-8" />
2437
<link rel="manifest" href="/manifest.json" />
2538
<RouterHead />
2639
</head>
2740
<body lang="en">
28-
<RouterOutlet />
29-
<ServiceWorkerRegister />
41+
<PrefetchGraph />
42+
<PrefetchServiceWorker />
43+
<ThemeProvider
44+
attribute="class"
45+
enableSystem={false}
46+
themes={[
47+
...Object.values(ThemeFonts),
48+
...Object.values(ThemeModes),
49+
...Object.values(ThemeStyles),
50+
...Object.values(ThemeBaseColors),
51+
...Object.values(ThemePrimaryColors),
52+
...Object.values(ThemeBorderRadiuses),
53+
]}
54+
>
55+
<RouterOutlet />
56+
</ThemeProvider>
3057
</body>
3158
</QwikCityProvider>
3259
);

0 commit comments

Comments
 (0)