diff --git a/packages/core/src/client/webcomponents/components/LogItemConstants.ts b/packages/core/src/client/webcomponents/components/LogItemConstants.ts index 90b529d3..c4b4d7fa 100644 --- a/packages/core/src/client/webcomponents/components/LogItemConstants.ts +++ b/packages/core/src/client/webcomponents/components/LogItemConstants.ts @@ -28,6 +28,9 @@ export const formEntries: Record = { browser: { icon: 'i-ph:globe-simple-duotone', color: 'text-amber-800 dark:text-amber-200', label: 'Browser' }, } +// Intentionally uses fixed saturation/lightness (unlike @vitejs/devtools-ui/utils/color which +// is dark-mode-aware via Vue reactivity). Webcomponents run in shadow DOM with media-based dark +// mode, so they can't access the isDark composable. export function getHashColorFromString(name: string, opacity: number = 1): string { let hash = 0 for (let i = 0; i < name.length; i++) diff --git a/packages/core/src/client/webcomponents/uno.config.ts b/packages/core/src/client/webcomponents/uno.config.ts index 030d564e..85d6e6c5 100644 --- a/packages/core/src/client/webcomponents/uno.config.ts +++ b/packages/core/src/client/webcomponents/uno.config.ts @@ -1,3 +1,5 @@ +import { sharedShortcuts } from '@vitejs/devtools-ui/unocss/shared-shortcuts' +import { theme } from '@vitejs/devtools-ui/unocss/theme' import { defineConfig, presetIcons, @@ -7,42 +9,21 @@ import { export default defineConfig({ shortcuts: [ + ...sharedShortcuts, { - 'color-base': 'color-neutral-800 dark:color-neutral-200', - 'bg-base': 'bg-white dark:bg-#111', - 'bg-active': 'bg-#8881', - 'bg-secondary': 'bg-#eee dark:bg-#222', - 'border-base': 'border-#8882', - 'ring-base': 'ring-#8882', - + // webcomponent-specific z-index 'z-viewframe': 'z-20', 'z-viewframe-resizer': 'z-30', 'z-floating-dock': 'z-50', 'z-floating-anchor': 'z-[2147483644]', 'z-floating-tooltip': 'z-[2147483645]', }, - [/^bg-glass(:\d+)?$/, ([, opacity = ':50']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-7`], ], transformers: [ transformerDirectives(), ], theme: { - colors: { - primary: { - 50: '#fcf4ff', - 100: '#f7e5ff', - 200: '#f0d0ff', - 300: '#e5acff', - 400: '#d577ff', - DEFAULT: '#d577ff', - 500: '#c543ff', - 600: '#bd34fe', - 700: '#9f0fe1', - 800: '#8512b7', - 900: '#6d1093', - 950: '#4d006e', - }, - }, + colors: theme.colors, }, presets: [ presetWind3({ diff --git a/packages/rolldown/src/app/styles/global.css b/packages/rolldown/src/app/styles/global.css index 977ff5dd..9adbb432 100644 --- a/packages/rolldown/src/app/styles/global.css +++ b/packages/rolldown/src/app/styles/global.css @@ -1,35 +1,4 @@ -html, body , #__nuxt{ - height: 100vh; - margin: 0; - padding: 0; -} - -:root { - --app-scrollbar-size: 6px; - --app-scrollbar-radius: 1px; - --app-scrollbar-thumb: #8884; - --app-scrollbar-thumb-hover: #8885; -} - -.bg-dots { - background-image: url('/dot-grid-light.png'); - background-size: 50px; - background-repeat: repeat; -} - -.dark .bg-dots, -.bg-dots.dark { - color-scheme: dark; - background-color: black; - background-image: url('/dot-grid-dark.png'); -} - -html { - --uno: bg-base font-sans; -} -body { - --uno: color-base; -} +@import '@vitejs/devtools-ui/styles/global.css'; summary::-webkit-details-marker { display: none; @@ -96,34 +65,7 @@ summary::-webkit-details-marker { overflow: visible !important; } -/* For Scrollbar */ -::-webkit-scrollbar { - width: var(--app-scrollbar-size); -} - -::-webkit-scrollbar:horizontal { - height: var(--app-scrollbar-size); -} - -::-webkit-scrollbar-corner { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background-color: var(--app-scrollbar-thumb); - transition: background 0.2s ease; - border-radius: var(--app-scrollbar-radius); -} - -::-webkit-scrollbar-thumb:hover { - background-color: var(--app-scrollbar-thumb-hover); -} - -::-webkit-scrollbar-track { - border-radius: var(--app-scrollbar-radius); - background: transparent; -} - +/* Monaco */ .monaco-scrollable-element > .scrollbar { background: transparent !important; } diff --git a/packages/self-inspect/src/app/styles/global.css b/packages/self-inspect/src/app/styles/global.css index 11ccea94..6581149b 100644 --- a/packages/self-inspect/src/app/styles/global.css +++ b/packages/self-inspect/src/app/styles/global.css @@ -1,52 +1,9 @@ -html, body , #__nuxt{ - height: 100vh; - margin: 0; - padding: 0; -} - -:root { - --app-scrollbar-size: 6px; - --app-scrollbar-radius: 1px; - --app-scrollbar-thumb: #8884; - --app-scrollbar-thumb-hover: #8885; -} +@import '@vitejs/devtools-ui/styles/global.css'; html { - --uno: bg-base font-sans; color-scheme: light; } html.dark { color-scheme: dark; background-color: #121212; } -body { - --uno: color-base; -} - -/* For Scrollbar */ -::-webkit-scrollbar { - width: var(--app-scrollbar-size); -} - -::-webkit-scrollbar:horizontal { - height: var(--app-scrollbar-size); -} - -::-webkit-scrollbar-corner { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background-color: var(--app-scrollbar-thumb); - transition: background 0.2s ease; - border-radius: var(--app-scrollbar-radius); -} - -::-webkit-scrollbar-thumb:hover { - background-color: var(--app-scrollbar-thumb-hover); -} - -::-webkit-scrollbar-track { - border-radius: var(--app-scrollbar-radius); - background: transparent; -} diff --git a/packages/ui/package.json b/packages/ui/package.json index c311c9fd..96f08a4a 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -28,6 +28,15 @@ "types": "./src/unocss/index.ts", "import": "./src/unocss/index.ts" }, + "./unocss/theme": { + "types": "./src/unocss/theme.ts", + "import": "./src/unocss/theme.ts" + }, + "./unocss/shared-shortcuts": { + "types": "./src/unocss/shared-shortcuts.ts", + "import": "./src/unocss/shared-shortcuts.ts" + }, + "./styles/global.css": "./src/styles/global.css", "./components/*": { "types": "./src/components/*.vue", "import": "./src/components/*.vue" diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css new file mode 100644 index 00000000..57654875 --- /dev/null +++ b/packages/ui/src/styles/global.css @@ -0,0 +1,60 @@ +html, body, #__nuxt { + height: 100vh; + margin: 0; + padding: 0; +} + +:root { + --app-scrollbar-size: 6px; + --app-scrollbar-radius: 1px; + --app-scrollbar-thumb: #8884; + --app-scrollbar-thumb-hover: #8885; +} + +html { + --uno: bg-base font-sans; +} +body { + --uno: color-base; +} + +.bg-dots { + background-image: url('/dot-grid-light.png'); + background-size: 50px; + background-repeat: repeat; +} + +.dark .bg-dots, +.bg-dots.dark { + color-scheme: dark; + background-color: black; + background-image: url('/dot-grid-dark.png'); +} + +/* Scrollbar */ +::-webkit-scrollbar { + width: var(--app-scrollbar-size); +} + +::-webkit-scrollbar:horizontal { + height: var(--app-scrollbar-size); +} + +::-webkit-scrollbar-corner { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: var(--app-scrollbar-thumb); + transition: background 0.2s ease; + border-radius: var(--app-scrollbar-radius); +} + +::-webkit-scrollbar-thumb:hover { + background-color: var(--app-scrollbar-thumb-hover); +} + +::-webkit-scrollbar-track { + border-radius: var(--app-scrollbar-radius); + background: transparent; +} diff --git a/packages/ui/src/unocss/shared-shortcuts.ts b/packages/ui/src/unocss/shared-shortcuts.ts new file mode 100644 index 00000000..a6758f52 --- /dev/null +++ b/packages/ui/src/unocss/shared-shortcuts.ts @@ -0,0 +1,19 @@ +import type { DynamicShortcut, StaticShortcutMap } from '@unocss/core' + +/** + * Base semantic shortcuts shared between Wind3 (webcomponents) and Wind4 (Nuxt UIs). + * These define the core visual identity tokens that must stay consistent across all surfaces. + */ +export const sharedShortcuts: (StaticShortcutMap | DynamicShortcut)[] = [ + { + 'color-base': 'color-neutral-800 dark:color-neutral-200', + 'bg-base': 'bg-white dark:bg-#111', + 'bg-active': 'bg-#8881', + 'bg-secondary': 'bg-#eee dark:bg-#222', + 'border-base': 'border-#8882', + 'ring-base': 'ring-#8882', + 'color-active': 'color-primary-600 dark:color-primary-300', + 'border-active': 'border-primary-600/25 dark:border-primary-400/25', + }, + [/^bg-glass(:\d+)?$/, ([, opacity = ':50']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-7`], +] diff --git a/packages/ui/src/unocss/shortcuts.ts b/packages/ui/src/unocss/shortcuts.ts index d2f9a83e..5f91e2f3 100644 --- a/packages/ui/src/unocss/shortcuts.ts +++ b/packages/ui/src/unocss/shortcuts.ts @@ -1,13 +1,10 @@ import type { UserShortcuts } from '@unocss/core' import type { Theme } from '@unocss/preset-wind4' +import { sharedShortcuts } from './shared-shortcuts' export const shortcuts: UserShortcuts = [ + ...sharedShortcuts, { - 'color-base': 'color-neutral-800 dark:color-neutral-300', - 'bg-base': 'bg-white dark:bg-#111', - 'bg-secondary': 'bg-#eee dark:bg-#222', - 'border-base': 'border-#8884', - 'border-flow': 'border-#8885', 'border-flow-line': 'border-#ccc dark:border-#222', 'border-flow-active': 'border-primary-700/50 dark:border-primary-300/50', @@ -21,10 +18,6 @@ export const shortcuts: UserShortcuts = [ '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', - 'color-active': 'color-primary-600 dark:color-primary-300', - 'border-active': 'border-primary-600/25 dark:border-primary-400/25', - 'bg-active': 'bg-#8881', - '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!', 'btn-action-sm': 'btn-action text-sm', 'btn-action-active': 'color-active border-active! bg-active op100!', @@ -58,5 +51,4 @@ export const shortcuts: UserShortcuts = [ 'page-padding-collapsed': 'pt-24 pl-14 pr-8 pb-8', }, [/^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`], - [/^bg-glass(:\d+)?$/, ([, opacity = ':75']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-5`], ] diff --git a/packages/vite/src/app/styles/global.css b/packages/vite/src/app/styles/global.css index 68654bbf..f2b2ff40 100644 --- a/packages/vite/src/app/styles/global.css +++ b/packages/vite/src/app/styles/global.css @@ -1,53 +1 @@ -html, body , #__nuxt{ - height: 100vh; - margin: 0; - padding: 0; -} - -.bg-dots { - background-image: url('/dot-grid-light.png'); - background-size: 50px; - background-repeat: repeat; -} - -.dark .bg-dots, -.bg-dots.dark { - color-scheme: dark; - background-color: black; - background-image: url('/dot-grid-dark.png'); -} - -html { - --uno: bg-base font-sans; -} -body { - --uno: color-base; -} - -/* For Scrollbar */ -::-webkit-scrollbar { - width: 6px; -} - -::-webkit-scrollbar:horizontal { - height: 6px; -} - -::-webkit-scrollbar-corner { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background-color: #8884; - transition: background 0.2s ease; - border-radius: 1px; -} - -::-webkit-scrollbar-thumb:hover { - background-color: #8885; -} - -::-webkit-scrollbar-track { - border-radius: 1px; - background: transparent; -} +@import '@vitejs/devtools-ui/styles/global.css';