Skip to content

Commit 15371bf

Browse files
antfuclaude
antfu
and
claude
authored
refactor: unify UnoCSS config with shared tokens (#208)
Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
1 parent cd36fc7 commit 15371bf

File tree

9 files changed

+102
-191
lines changed

9 files changed

+102
-191
lines changed

‎packages/core/src/client/webcomponents/components/LogItemConstants.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ export const formEntries: Record<DevToolsLogEntryFrom, FromStyle> = {
2828
browser: { icon: 'i-ph:globe-simple-duotone', color: 'text-amber-800 dark:text-amber-200', label: 'Browser' },
2929
}
3030

31+
// Intentionally uses fixed saturation/lightness (unlike @vitejs/devtools-ui/utils/color which
32+
// is dark-mode-aware via Vue reactivity). Webcomponents run in shadow DOM with media-based dark
33+
// mode, so they can't access the isDark composable.
3134
export function getHashColorFromString(name: string, opacity: number = 1): string {
3235
let hash = 0
3336
for (let i = 0; i < name.length; i++)

‎packages/core/src/client/webcomponents/uno.config.ts‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { sharedShortcuts } from '@vitejs/devtools-ui/unocss/shared-shortcuts'
2+
import { theme } from '@vitejs/devtools-ui/unocss/theme'
13
import {
24
defineConfig,
35
presetIcons,
@@ -7,42 +9,21 @@ import {
79

810
export default defineConfig({
911
shortcuts: [
12+
...sharedShortcuts,
1013
{
11-
'color-base': 'color-neutral-800 dark:color-neutral-200',
12-
'bg-base': 'bg-white dark:bg-#111',
13-
'bg-active': 'bg-#8881',
14-
'bg-secondary': 'bg-#eee dark:bg-#222',
15-
'border-base': 'border-#8882',
16-
'ring-base': 'ring-#8882',
17-
14+
// webcomponent-specific z-index
1815
'z-viewframe': 'z-20',
1916
'z-viewframe-resizer': 'z-30',
2017
'z-floating-dock': 'z-50',
2118
'z-floating-anchor': 'z-[2147483644]',
2219
'z-floating-tooltip': 'z-[2147483645]',
2320
},
24-
[/^bg-glass(:\d+)?$/, ([, opacity = ':50']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-7`],
2521
],
2622
transformers: [
2723
transformerDirectives(),
2824
],
2925
theme: {
30-
colors: {
31-
primary: {
32-
50: '#fcf4ff',
33-
100: '#f7e5ff',
34-
200: '#f0d0ff',
35-
300: '#e5acff',
36-
400: '#d577ff',
37-
DEFAULT: '#d577ff',
38-
500: '#c543ff',
39-
600: '#bd34fe',
40-
700: '#9f0fe1',
41-
800: '#8512b7',
42-
900: '#6d1093',
43-
950: '#4d006e',
44-
},
45-
},
26+
colors: theme.colors,
4627
},
4728
presets: [
4829
presetWind3({

‎packages/rolldown/src/app/styles/global.css‎

Lines changed: 2 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
1-
html, body , #__nuxt{
2-
height: 100vh;
3-
margin: 0;
4-
padding: 0;
5-
}
6-
7-
:root {
8-
--app-scrollbar-size: 6px;
9-
--app-scrollbar-radius: 1px;
10-
--app-scrollbar-thumb: #8884;
11-
--app-scrollbar-thumb-hover: #8885;
12-
}
13-
14-
.bg-dots {
15-
background-image: url('/dot-grid-light.png');
16-
background-size: 50px;
17-
background-repeat: repeat;
18-
}
19-
20-
.dark .bg-dots,
21-
.bg-dots.dark {
22-
color-scheme: dark;
23-
background-color: black;
24-
background-image: url('/dot-grid-dark.png');
25-
}
26-
27-
html {
28-
--uno: bg-base font-sans;
29-
}
30-
body {
31-
--uno: color-base;
32-
}
1+
@import '@vitejs/devtools-ui/styles/global.css';
332

343
summary::-webkit-details-marker {
354
display: none;
@@ -96,34 +65,7 @@ summary::-webkit-details-marker {
9665
overflow: visible !important;
9766
}
9867

99-
/* For Scrollbar */
100-
::-webkit-scrollbar {
101-
width: var(--app-scrollbar-size);
102-
}
103-
104-
::-webkit-scrollbar:horizontal {
105-
height: var(--app-scrollbar-size);
106-
}
107-
108-
::-webkit-scrollbar-corner {
109-
background: transparent;
110-
}
111-
112-
::-webkit-scrollbar-thumb {
113-
background-color: var(--app-scrollbar-thumb);
114-
transition: background 0.2s ease;
115-
border-radius: var(--app-scrollbar-radius);
116-
}
117-
118-
::-webkit-scrollbar-thumb:hover {
119-
background-color: var(--app-scrollbar-thumb-hover);
120-
}
121-
122-
::-webkit-scrollbar-track {
123-
border-radius: var(--app-scrollbar-radius);
124-
background: transparent;
125-
}
126-
68+
/* Monaco */
12769
.monaco-scrollable-element > .scrollbar {
12870
background: transparent !important;
12971
}

‎packages/self-inspect/src/app/styles/global.css‎

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,9 @@
1-
html, body , #__nuxt{
2-
height: 100vh;
3-
margin: 0;
4-
padding: 0;
5-
}
6-
7-
:root {
8-
--app-scrollbar-size: 6px;
9-
--app-scrollbar-radius: 1px;
10-
--app-scrollbar-thumb: #8884;
11-
--app-scrollbar-thumb-hover: #8885;
12-
}
1+
@import '@vitejs/devtools-ui/styles/global.css';
132

143
html {
15-
--uno: bg-base font-sans;
164
color-scheme: light;
175
}
186
html.dark {
197
color-scheme: dark;
208
background-color: #121212;
219
}
22-
body {
23-
--uno: color-base;
24-
}
25-
26-
/* For Scrollbar */
27-
::-webkit-scrollbar {
28-
width: var(--app-scrollbar-size);
29-
}
30-
31-
::-webkit-scrollbar:horizontal {
32-
height: var(--app-scrollbar-size);
33-
}
34-
35-
::-webkit-scrollbar-corner {
36-
background: transparent;
37-
}
38-
39-
::-webkit-scrollbar-thumb {
40-
background-color: var(--app-scrollbar-thumb);
41-
transition: background 0.2s ease;
42-
border-radius: var(--app-scrollbar-radius);
43-
}
44-
45-
::-webkit-scrollbar-thumb:hover {
46-
background-color: var(--app-scrollbar-thumb-hover);
47-
}
48-
49-
::-webkit-scrollbar-track {
50-
border-radius: var(--app-scrollbar-radius);
51-
background: transparent;
52-
}

‎packages/ui/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,15 @@
2828
"types": "./src/unocss/index.ts",
2929
"import": "./src/unocss/index.ts"
3030
},
31+
"./unocss/theme": {
32+
"types": "./src/unocss/theme.ts",
33+
"import": "./src/unocss/theme.ts"
34+
},
35+
"./unocss/shared-shortcuts": {
36+
"types": "./src/unocss/shared-shortcuts.ts",
37+
"import": "./src/unocss/shared-shortcuts.ts"
38+
},
39+
"./styles/global.css": "./src/styles/global.css",
3140
"./components/*": {
3241
"types": "./src/components/*.vue",
3342
"import": "./src/components/*.vue"

‎packages/ui/src/styles/global.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
html, body, #__nuxt {
2+
height: 100vh;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
:root {
8+
--app-scrollbar-size: 6px;
9+
--app-scrollbar-radius: 1px;
10+
--app-scrollbar-thumb: #8884;
11+
--app-scrollbar-thumb-hover: #8885;
12+
}
13+
14+
html {
15+
--uno: bg-base font-sans;
16+
}
17+
body {
18+
--uno: color-base;
19+
}
20+
21+
.bg-dots {
22+
background-image: url('/dot-grid-light.png');
23+
background-size: 50px;
24+
background-repeat: repeat;
25+
}
26+
27+
.dark .bg-dots,
28+
.bg-dots.dark {
29+
color-scheme: dark;
30+
background-color: black;
31+
background-image: url('/dot-grid-dark.png');
32+
}
33+
34+
/* Scrollbar */
35+
::-webkit-scrollbar {
36+
width: var(--app-scrollbar-size);
37+
}
38+
39+
::-webkit-scrollbar:horizontal {
40+
height: var(--app-scrollbar-size);
41+
}
42+
43+
::-webkit-scrollbar-corner {
44+
background: transparent;
45+
}
46+
47+
::-webkit-scrollbar-thumb {
48+
background-color: var(--app-scrollbar-thumb);
49+
transition: background 0.2s ease;
50+
border-radius: var(--app-scrollbar-radius);
51+
}
52+
53+
::-webkit-scrollbar-thumb:hover {
54+
background-color: var(--app-scrollbar-thumb-hover);
55+
}
56+
57+
::-webkit-scrollbar-track {
58+
border-radius: var(--app-scrollbar-radius);
59+
background: transparent;
60+
}

‎packages/ui/src/unocss/shared-shortcuts.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { DynamicShortcut, StaticShortcutMap } from '@unocss/core'
2+
3+
/**
4+
* Base semantic shortcuts shared between Wind3 (webcomponents) and Wind4 (Nuxt UIs).
5+
* These define the core visual identity tokens that must stay consistent across all surfaces.
6+
*/
7+
export const sharedShortcuts: (StaticShortcutMap | DynamicShortcut)[] = [
8+
{
9+
'color-base': 'color-neutral-800 dark:color-neutral-200',
10+
'bg-base': 'bg-white dark:bg-#111',
11+
'bg-active': 'bg-#8881',
12+
'bg-secondary': 'bg-#eee dark:bg-#222',
13+
'border-base': 'border-#8882',
14+
'ring-base': 'ring-#8882',
15+
'color-active': 'color-primary-600 dark:color-primary-300',
16+
'border-active': 'border-primary-600/25 dark:border-primary-400/25',
17+
},
18+
[/^bg-glass(:\d+)?$/, ([, opacity = ':50']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-7`],
19+
]

‎packages/ui/src/unocss/shortcuts.ts‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import type { UserShortcuts } from '@unocss/core'
22
import type { Theme } from '@unocss/preset-wind4'
3+
import { sharedShortcuts } from './shared-shortcuts'
34

45
export const shortcuts: UserShortcuts<Theme> = [
6+
...sharedShortcuts,
57
{
6-
'color-base': 'color-neutral-800 dark:color-neutral-300',
7-
'bg-base': 'bg-white dark:bg-#111',
8-
'bg-secondary': 'bg-#eee dark:bg-#222',
9-
'border-base': 'border-#8884',
10-
118
'border-flow': 'border-#8885',
129
'border-flow-line': 'border-#ccc dark:border-#222',
1310
'border-flow-active': 'border-primary-700/50 dark:border-primary-300/50',
@@ -21,10 +18,6 @@ export const shortcuts: UserShortcuts<Theme> = [
2118

2219
'bg-gradient-more': 'bg-gradient-to-t from-white via-white:80 to-white:0 dark:from-#111 dark:via-#111:80 dark:to-#111:0',
2320

24-
'color-active': 'color-primary-600 dark:color-primary-300',
25-
'border-active': 'border-primary-600/25 dark:border-primary-400/25',
26-
'bg-active': 'bg-#8881',
27-
2821
'btn-action': 'border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
2922
'btn-action-sm': 'btn-action text-sm',
3023
'btn-action-active': 'color-active border-active! bg-active op100!',
@@ -58,5 +51,4 @@ export const shortcuts: UserShortcuts<Theme> = [
5851
'page-padding-collapsed': 'pt-24 pl-14 pr-8 pb-8',
5952
},
6053
[/^badge-color-(\w+)$/, ([, color]) => `bg-${color}-400:20 dark:bg-${color}-400:10 text-${color}-700 dark:text-${color}-300 border-${color}-600:10 dark:border-${color}-300:10`],
61-
[/^bg-glass(:\d+)?$/, ([, opacity = ':75']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-5`],
6254
]

‎packages/vite/src/app/styles/global.css‎

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1 @@
1-
html, body , #__nuxt{
2-
height: 100vh;
3-
margin: 0;
4-
padding: 0;
5-
}
6-
7-
.bg-dots {
8-
background-image: url('/dot-grid-light.png');
9-
background-size: 50px;
10-
background-repeat: repeat;
11-
}
12-
13-
.dark .bg-dots,
14-
.bg-dots.dark {
15-
color-scheme: dark;
16-
background-color: black;
17-
background-image: url('/dot-grid-dark.png');
18-
}
19-
20-
html {
21-
--uno: bg-base font-sans;
22-
}
23-
body {
24-
--uno: color-base;
25-
}
26-
27-
/* For Scrollbar */
28-
::-webkit-scrollbar {
29-
width: 6px;
30-
}
31-
32-
::-webkit-scrollbar:horizontal {
33-
height: 6px;
34-
}
35-
36-
::-webkit-scrollbar-corner {
37-
background: transparent;
38-
}
39-
40-
::-webkit-scrollbar-thumb {
41-
background-color: #8884;
42-
transition: background 0.2s ease;
43-
border-radius: 1px;
44-
}
45-
46-
::-webkit-scrollbar-thumb:hover {
47-
background-color: #8885;
48-
}
49-
50-
::-webkit-scrollbar-track {
51-
border-radius: 1px;
52-
background: transparent;
53-
}
1+
@import '@vitejs/devtools-ui/styles/global.css';

0 commit comments

Comments
 (0)