diff --git a/apps/stage-tamagotchi/uno.config.ts b/apps/stage-tamagotchi/uno.config.ts index fdba79540..ac0e80c06 100644 --- a/apps/stage-tamagotchi/uno.config.ts +++ b/apps/stage-tamagotchi/uno.config.ts @@ -1,109 +1,3 @@ -import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg' -import { colorToString } from '@unocss/preset-mini/utils' -import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local' -import { - defineConfig, - presetAttributify, - presetIcons, - presetTypography, - presetWebFonts, - presetWind3, - transformerDirectives, - transformerVariantGroup, -} from 'unocss' -import { presetScrollbar } from 'unocss-preset-scrollbar' -import { parseColor } from 'unocss/preset-mini' +import { sharedUnoConfig } from '../../uno.config' -function createColorSchemeConfig(hueOffset = 0) { - return { - DEFAULT: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset})) 30%, oklch(100% 0 360))`, - 100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset})) 80%, oklch(100% 0 360))`, - 200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}))`, - } -} - -export default defineConfig({ - presets: [ - presetWind3(), - presetAttributify(), - presetTypography(), - presetWebFonts({ - fonts: { - sans: 'DM Sans', - serif: 'DM Serif Display', - mono: 'DM Mono', - cute: 'Kiwi Maru', - cuteen: 'Sniglet', - jura: 'Jura', - }, - // Web fonts preset - // https://unocss.dev/presets/web-fonts#serve-fonts-locally - processors: createLocalFontProcessor(), - timeouts: { - warning: 5000, - failure: 10000, - }, - }), - presetIcons({ - scale: 1.2, - collections: { - ...createExternalPackageIconLoader('@proj-airi/lobe-icons'), - }, - }), - presetScrollbar(), - ], - transformers: [ - transformerDirectives({ - applyVariable: ['--at-apply'], - }), - transformerVariantGroup(), - ], - safelist: 'prose prose-sm m-auto text-left'.split(' '), - // hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS - // https://github.com/hyoban/unocss-preset-shadcn - // - // Thanks to - // https://github.com/unovue/shadcn-vue/issues/34#issuecomment-2467318118 - // https://github.com/hyoban-template/shadcn-vue-unocss-starter - // - // By default, `.ts` and `.js` files are NOT extracted. - // If you want to extract them, use the following configuration. - // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte. - content: { - pipeline: { - include: [ - // the default - /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/, - // include js/ts files - '(components|src)/**/*.{js,ts}', - '**/stage-ui/**/*.{js,ts}', - ], - }, - }, - rules: [ - [/^mask-\[(.*)\]$/, ([, suffix]) => ({ '-webkit-mask-image': suffix.replace(/_/g, ' ') })], - [/^bg-dotted-\[(.*)\]$/, ([, color], { theme }) => { - const parsedColor = parseColor(color, theme) - // Util usage: https://github.com/unocss/unocss/blob/f57ef6ae50006a92f444738e50f3601c0d1121f2/packages-presets/preset-mini/src/_utils/utilities.ts#L186 - return { - 'background-image': `radial-gradient(circle at 1px 1px, ${colorToString(parsedColor?.cssColor ?? parsedColor?.color ?? color, 'var(--un-background-opacity)')} 1px, transparent 0)`, - '--un-background-opacity': parsedColor?.cssColor?.alpha ?? parsedColor?.alpha ?? 1, - } - }], - ], - theme: { - colors: { - primary: createColorSchemeConfig(), - complementary: createColorSchemeConfig(180), - }, - }, -}) +export default sharedUnoConfig() diff --git a/apps/stage-web/package.json b/apps/stage-web/package.json index 3706b6bb6..9b61551eb 100644 --- a/apps/stage-web/package.json +++ b/apps/stage-web/package.json @@ -90,7 +90,6 @@ "@iconify-json/solar": "^1.2.2", "@iconify-json/svg-spinners": "^1.2.2", "@iconify-json/vscode-icons": "^1.2.19", - "@iconify/utils": "^2.3.0", "@intlify/unplugin-vue-i18n": "^6.0.8", "@proj-airi/lobe-icons": "^1.0.5", "@proj-airi/unplugin-fetch": "^0.1.4", diff --git a/apps/stage-web/uno.config.ts b/apps/stage-web/uno.config.ts index 952cfe3e4..861a460f0 100644 --- a/apps/stage-web/uno.config.ts +++ b/apps/stage-web/uno.config.ts @@ -1,107 +1,16 @@ -import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg' -import { colorToString } from '@unocss/preset-mini/utils' -import { - defineConfig, - presetAttributify, - presetIcons, - presetTypography, - presetWebFonts, - presetWind3, - transformerDirectives, - transformerVariantGroup, -} from 'unocss' -import { parseColor } from 'unocss/preset-mini' +import { mergeConfigs } from 'unocss' -function createColorSchemeConfig(hueOffset = 0) { - return { - DEFAULT: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset})) 30%, oklch(100% 0 360))`, - 100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset})) 80%, oklch(100% 0 360))`, - 200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}))`, - 950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}))`, - } -} +import { histoireUnoConfig, sharedUnoConfig } from '../../uno.config' -export default defineConfig({ - presets: [ - presetWind3(), - presetAttributify(), - presetTypography(), - presetWebFonts({ - fonts: { - sans: 'DM Sans', - serif: 'DM Serif Display', - mono: 'DM Mono', - cute: 'Kiwi Maru', - cuteen: 'Sniglet', - gugi: 'Gugi', - }, - timeouts: { - warning: 5000, - failure: 10000, - }, - }), - presetIcons({ - scale: 1.2, - collections: { - ...createExternalPackageIconLoader('@proj-airi/lobe-icons'), - }, - }), - ], - transformers: [ - transformerDirectives({ - applyVariable: ['--at-apply'], - }), - transformerVariantGroup(), - ], - safelist: 'prose prose-sm m-auto text-left'.split(' '), - // hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS - // https://github.com/hyoban/unocss-preset-shadcn - // - // Thanks to - // https://github.com/unovue/shadcn-vue/issues/34#issuecomment-2467318118 - // https://github.com/hyoban-template/shadcn-vue-unocss-starter - // - // By default, `.ts` and `.js` files are NOT extracted. - // If you want to extract them, use the following configuration. - // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte. - content: { - pipeline: { - include: [ - // the default - /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/, - // include js/ts files - '(components|src)/**/*.{js,ts}', - '**/stage-ui/**/*.{js,ts}', - ], - }, +export default mergeConfigs([ + sharedUnoConfig(), + histoireUnoConfig(), + { + rules: [ + ['transition-colors-none', { + 'transition-property': 'color, background-color, border-color, text-color', + 'transition-duration': '0s', + }], + ], }, - rules: [ - [/^mask-\[(.*)\]$/, ([, suffix]) => ({ '-webkit-mask-image': suffix.replace(/_/g, ' ') })], - [/^bg-dotted-\[(.*)\]$/, ([, color], { theme }) => { - const parsedColor = parseColor(color, theme) - // Util usage: https://github.com/unocss/unocss/blob/f57ef6ae50006a92f444738e50f3601c0d1121f2/packages-presets/preset-mini/src/_utils/utilities.ts#L186 - return { - 'background-image': `radial-gradient(circle at 1px 1px, ${colorToString(parsedColor?.cssColor ?? parsedColor?.color ?? color, 'var(--un-background-opacity)')} 1px, transparent 0)`, - '--un-background-opacity': parsedColor?.cssColor?.alpha ?? parsedColor?.alpha ?? 1, - } - }], - ['transition-colors-none', { - 'transition-property': 'color, background-color, border-color, text-color', - 'transition-duration': '0s', - }], - ], - theme: { - colors: { - primary: createColorSchemeConfig(), - complementary: createColorSchemeConfig(180), - }, - }, -}) +]) diff --git a/cspell.config.yaml b/cspell.config.yaml index 5e8c6ee53..9fdfdecce 100644 --- a/cspell.config.yaml +++ b/cspell.config.yaml @@ -67,6 +67,7 @@ words: - gpuu - grammyjs - groq + - gugi - guiiai - hfspaceup - hfsup @@ -138,6 +139,7 @@ words: - pthread - qwen - rehype + - reka - rushstack - Saccade - saccades diff --git a/package.json b/package.json index 038b46bc8..c849a0152 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "devDependencies": { "@antfu/eslint-config": "^4.12.0", "@antfu/ni": "^24.3.0", + "@iconify/utils": "^2.3.0", "@types/node": "^22.14.1", "@unocss/eslint-config": "^66.1.0-beta.12", "@unocss/eslint-plugin": "^66.1.0-beta.12", @@ -51,6 +52,7 @@ "typescript": "~5.8.3", "unbuild": "^3.5.0", "unocss": "^66.1.0-beta.12", + "unocss-preset-scrollbar": "^3.2.0", "vite": "^6.3.3", "vite-plugin-inspect": "^11.0.1", "vitest": "^3.1.2" diff --git a/packages/stage-ui/package.json b/packages/stage-ui/package.json index f34992431..3ed4df0c9 100644 --- a/packages/stage-ui/package.json +++ b/packages/stage-ui/package.json @@ -10,33 +10,49 @@ }, "license": "MIT", "exports": { - "./constants": { - "types": "./dist/constants/index.d.ts", - "import": "./dist/constants/index.mjs" + ".": { + "types": "./dist/components/index.d.ts", + "import": "./dist/components/index.mjs" }, "./components": { "types": "./dist/components/index.d.ts", "import": "./dist/components/index.mjs" }, - "./stores": { - "types": "./dist/stores/index.d.ts", - "import": "./dist/stores/index.mjs" - }, - ".": { - "types": "./dist/components/index.d.ts", - "import": "./dist/components/index.mjs" + "./composables/*": { + "types": "./dist/composables/*.d.ts", + "import": "./dist/composables/*.mjs" }, "./composables": { "types": "./dist/composables/index.d.ts", "import": "./dist/composables/index.mjs" }, - "./utils": { - "types": "./dist/utils/index.d.ts", - "import": "./dist/utils/index.mjs" + "./constants/*": { + "types": "./dist/constants/*.d.ts", + "import": "./dist/constants/*.mjs" + }, + "./constants": { + "types": "./dist/constants/index.d.ts", + "import": "./dist/constants/index.mjs" + }, + "./libs/*": { + "types": "./dist/libs/*.d.ts", + "import": "./dist/libs/*.mjs" }, "./libs": { "types": "./dist/libs/index.d.ts", "import": "./dist/libs/index.mjs" + }, + "./stores/*": { + "types": "./dist/stores/*.d.ts", + "import": "./dist/stores/*.mjs" + }, + "./stores": { + "types": "./dist/stores/index.d.ts", + "import": "./dist/stores/index.mjs" + }, + "./utils": { + "types": "./dist/utils/index.d.ts", + "import": "./dist/utils/index.mjs" } }, "module": "./dist/components/index.mjs", @@ -94,7 +110,6 @@ "@vitejs/plugin-vue": "^5.2.3", "histoire": "1.0.0-alpha.2", "unocss": "^66.1.0-beta.12", - "vite": "^6.3.3", - "vue-sfc-transformer": "^0.1.14" + "vite": "^6.3.3" } } diff --git a/packages/stage-ui/src/components/Menu/RadioCardManySelect.vue b/packages/stage-ui/src/components/Menu/RadioCardManySelect.vue index 704c00418..4b271c57d 100644 --- a/packages/stage-ui/src/components/Menu/RadioCardManySelect.vue +++ b/packages/stage-ui/src/components/Menu/RadioCardManySelect.vue @@ -106,7 +106,7 @@ function updateCustomValue(value: string) {
{ - if (!matcher.includes('hover')) { - return matcher - } - - return { - matcher, - selector: (s) => { - return `${s}, ${s.replace(/:hover$/, '')}._hover` - }, - } - }, - ], - }, - ], - transformers: [ - transformerDirectives({ - applyVariable: ['--at-apply'], - }), - transformerVariantGroup(), - ], - safelist: [ - ...'prose prose-sm m-auto text-left'.split(' '), - ...[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => [`bg-primary-${shade}`, ...[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map(opacity => `bg-primary-${shade}/${opacity}`)]).flat(), - ], - // hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS - // https://github.com/hyoban/unocss-preset-shadcn - // - // Thanks to - // https://github.com/unovue/shadcn-vue/issues/34#issuecomment-2467318118 - // https://github.com/hyoban-template/shadcn-vue-unocss-starter - // - // By default, `.ts` and `.js` files are NOT extracted. - // If you want to extract them, use the following configuration. - // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte. - content: { - pipeline: { - include: [ - // the default - /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/, - // include js/ts files - '(components|src)/**/*.{js,ts}', - ], - }, - }, - rules: [ - [/^mask-\[(.*)\]$/, ([, suffix]) => ({ '-webkit-mask-image': suffix.replace(/_/g, ' ') })], - [/^bg-dotted-\[(.*)\]$/, ([, color], { theme }) => { - const parsedColor = parseColor(color, theme) - // Util usage: https://github.com/unocss/unocss/blob/f57ef6ae50006a92f444738e50f3601c0d1121f2/packages-presets/preset-mini/src/_utils/utilities.ts#L186 - return { - 'background-image': `radial-gradient(circle at 1px 1px, ${colorToString(parsedColor?.cssColor ?? parsedColor?.color ?? color, 'var(--un-background-opacity)')} 1px, transparent 0)`, - '--un-background-opacity': parsedColor?.cssColor?.alpha ?? parsedColor?.alpha ?? 1, - } - }], - ], - theme: { - colors: { - primary: createColorSchemeConfig(), - complementary: createColorSchemeConfig(180), - }, - }, -}) +export default mergeConfigs([ + sharedUnoConfig(), + histoireUnoConfig(), +]) diff --git a/packages/ui/uno.config.ts b/packages/ui/uno.config.ts new file mode 100644 index 000000000..9a9a1de1d --- /dev/null +++ b/packages/ui/uno.config.ts @@ -0,0 +1,8 @@ +import { mergeConfigs } from 'unocss' + +import { histoireUnoConfig, sharedUnoConfig } from '../../uno.config' + +export default mergeConfigs([ + sharedUnoConfig(), + histoireUnoConfig(), +]) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1efdf7c2..3793d2a79 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -69,6 +69,9 @@ importers: '@antfu/ni': specifier: ^24.3.0 version: 24.3.0 + '@iconify/utils': + specifier: ^2.3.0 + version: 2.3.0 '@types/node': specifier: ^22.14.1 version: 22.14.1 @@ -114,6 +117,9 @@ importers: unocss: specifier: ^66.1.0-beta.12 version: 66.1.0-beta.12(postcss@8.5.3)(vite@6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.3)) + unocss-preset-scrollbar: + specifier: ^3.2.0 + version: 3.2.0(unocss@66.1.0-beta.12(postcss@8.5.3)(vite@6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.3))) vite: specifier: ^6.3.3 version: 6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0) @@ -712,9 +718,6 @@ importers: '@iconify-json/vscode-icons': specifier: ^1.2.19 version: 1.2.19 - '@iconify/utils': - specifier: ^2.3.0 - version: 2.3.0 '@intlify/unplugin-vue-i18n': specifier: ^6.0.8 version: 6.0.8(@vue/compiler-dom@3.5.13)(eslint@9.25.1(jiti@2.4.2))(rollup@4.40.0)(typescript@5.8.3)(vue-i18n@11.1.3(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) @@ -1018,9 +1021,6 @@ importers: vite: specifier: ^6.3.3 version: 6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0) - vue-sfc-transformer: - specifier: ^0.1.14 - version: 0.1.14(@vue/compiler-core@3.5.13)(esbuild@0.25.2)(vue@3.5.13(typescript@5.8.3)) packages/ui: dependencies: @@ -11966,7 +11966,7 @@ snapshots: '@babel/helper-builder-binary-assignment-operator-visitor@7.25.9': dependencies: '@babel/traverse': 7.25.9 - '@babel/types': 7.26.10 + '@babel/types': 7.27.0 transitivePeerDependencies: - supports-color @@ -12059,7 +12059,7 @@ snapshots: '@babel/helper-simple-access@7.25.9': dependencies: '@babel/traverse': 7.25.9 - '@babel/types': 7.26.10 + '@babel/types': 7.27.0 transitivePeerDependencies: - supports-color @@ -12084,7 +12084,7 @@ snapshots: dependencies: '@babel/template': 7.25.9 '@babel/traverse': 7.25.9 - '@babel/types': 7.26.10 + '@babel/types': 7.27.0 transitivePeerDependencies: - supports-color @@ -12100,6 +12100,7 @@ snapshots: '@babel/parser@7.27.0': dependencies: '@babel/types': 7.27.0 + optional: true '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.26.0)': dependencies: @@ -12599,7 +12600,7 @@ snapshots: dependencies: '@babel/core': 7.26.0 '@babel/helper-plugin-utils': 7.25.9 - '@babel/types': 7.26.10 + '@babel/types': 7.27.0 esutils: 2.0.3 '@babel/runtime@7.26.7': @@ -15055,7 +15056,7 @@ snapshots: '@types/babel__core@7.20.5': dependencies: '@babel/parser': 7.27.0 - '@babel/types': 7.26.10 + '@babel/types': 7.27.0 '@types/babel__generator': 7.6.8 '@types/babel__template': 7.4.4 '@types/babel__traverse': 7.20.6 @@ -15063,18 +15064,18 @@ snapshots: '@types/babel__generator@7.6.8': dependencies: - '@babel/types': 7.26.10 + '@babel/types': 7.27.0 optional: true '@types/babel__template@7.4.4': dependencies: '@babel/parser': 7.27.0 - '@babel/types': 7.26.10 + '@babel/types': 7.27.0 optional: true '@types/babel__traverse@7.20.6': dependencies: - '@babel/types': 7.26.10 + '@babel/types': 7.27.0 optional: true '@types/cacheable-request@6.0.3': @@ -24087,6 +24088,7 @@ snapshots: '@vue/compiler-core': 3.5.13 esbuild: 0.25.2 vue: 3.5.13(typescript@5.8.3) + optional: true vue-tsc@2.2.10(typescript@5.8.3): dependencies: diff --git a/uno.config.ts b/uno.config.ts index a0d5791fd..f3699c8ad 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -1,35 +1,151 @@ -import { - defineConfig, - presetAttributify, - presetIcons, - presetTypography, - presetWebFonts, - presetWind3, - transformerDirectives, - transformerVariantGroup, -} from 'unocss' +import type { PresetOrFactoryAwaitable } from 'unocss' -export default defineConfig({ - presets: [ - presetWind3(), - presetAttributify(), - presetTypography(), - presetWebFonts({ - fonts: { - sans: 'DM Sans', - serif: 'DM Serif Display', - mono: 'DM Mono', - cute: 'Kiwi Maru', - cuteen: 'Sniglet', +import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg' +import { colorToString } from '@unocss/preset-mini/utils' +import { defineConfig, mergeConfigs, presetAttributify, presetIcons, presetTypography, presetWebFonts, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss' +import { presetScrollbar } from 'unocss-preset-scrollbar' +import { parseColor } from 'unocss/preset-mini' + +function createColorSchemeConfig(hueOffset = 0) { + return { + DEFAULT: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset})) 30%, oklch(100% 0 360))`, + 100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset})) 80%, oklch(100% 0 360))`, + 200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}))`, + 950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}))`, + } +} + +export function presetStoryMockHover(): PresetOrFactoryAwaitable { + return { + name: 'story-mock-hover', + variants: [ + (matcher) => { + if (!matcher.includes('hover')) { + return matcher + } + + return { + matcher, + selector: (s) => { + return `${s}, ${s.replace(/:hover$/, '')}._hover` + }, + } }, - }), - presetIcons({ - scale: 1.2, - }), - ], - transformers: [ - transformerDirectives(), - transformerVariantGroup(), - ], - safelist: 'prose prose-sm m-auto text-left'.split(' '), -}) + ], + } +} + +export function safelistAllPrimaryBackgrounds(): string[] { + return [ + ...[undefined, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => { + const prefix = shade ? `bg-primary-${shade}` : `bg-primary` + return [ + prefix, + ...[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map(opacity => `${prefix}/${opacity}`), + ] + }).flat(), + ] +} + +export function sharedUnoConfig() { + return defineConfig({ + presets: [ + presetWind3(), + presetAttributify(), + presetTypography(), + presetWebFonts({ + fonts: { + sans: 'DM Sans', + serif: 'DM Serif Display', + mono: 'DM Mono', + cute: 'Kiwi Maru', + cuteen: 'Sniglet', + jura: 'Jura', + gugi: 'Gugi', + quicksand: 'Quicksand', + }, + timeouts: { + warning: 5000, + failure: 10000, + }, + }), + presetIcons({ + scale: 1.2, + collections: { + ...createExternalPackageIconLoader('@proj-airi/lobe-icons'), + }, + }), + presetScrollbar(), + ], + transformers: [ + transformerDirectives({ + applyVariable: ['--at-apply'], + }), + transformerVariantGroup(), + ], + safelist: [ + ...'prose prose-sm m-auto text-left'.split(' '), + ], + // hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS + // https://github.com/hyoban/unocss-preset-shadcn + // + // Thanks to + // https://github.com/unovue/shadcn-vue/issues/34#issuecomment-2467318118 + // https://github.com/hyoban-template/shadcn-vue-unocss-starter + // + // By default, `.ts` and `.js` files are NOT extracted. + // If you want to extract them, use the following configuration. + // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte. + content: { + pipeline: { + include: [ + // the default + /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/, + // include js/ts files + '(components|src)/**/*.{js,ts,vue}', + ], + }, + }, + rules: [ + [/^mask-\[(.*)\]$/, ([, suffix]) => ({ '-webkit-mask-image': suffix.replace(/_/g, ' ') })], + [/^bg-dotted-\[(.*)\]$/, ([, color], { theme }) => { + const parsedColor = parseColor(color, theme) + // Util usage: https://github.com/unocss/unocss/blob/f57ef6ae50006a92f444738e50f3601c0d1121f2/packages-presets/preset-mini/src/_utils/utilities.ts#L186 + return { + 'background-image': `radial-gradient(circle at 1px 1px, ${colorToString(parsedColor?.cssColor ?? parsedColor?.color ?? color, 'var(--un-background-opacity)')} 1px, transparent 0)`, + '--un-background-opacity': parsedColor?.cssColor?.alpha ?? parsedColor?.alpha ?? 1, + } + }], + ], + theme: { + colors: { + primary: createColorSchemeConfig(), + complementary: createColorSchemeConfig(180), + }, + }, + }) +} + +export function histoireUnoConfig() { + return defineConfig({ + presets: [ + presetStoryMockHover(), + ], + safelist: [ + ...safelistAllPrimaryBackgrounds(), + ], + }) +} + +export default mergeConfigs([ + sharedUnoConfig(), + histoireUnoConfig(), +])