nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

refactor: share unocss config across multiple packages (#143)

Browse Source 
Co-authored-by: Neko Ayaka <neko@ayaka.moe>
Co-authored-by: Makito <5277268+sumimakito@users.noreply.github.com>
This commit is contained in:
Makito
2025-04-27 10:46:34 +08:00
committed by GitHub
co-authored by Neko Ayaka Makito
parent 3f9335089d
commit d3cdeca126
12 changed files with 230 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-tamagotchi/uno.config.ts
+2 -108
View File
@@ -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()
apps/stage-web/package.json
-1
View File
@@ -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",
apps/stage-web/uno.config.ts
+13 -104
View File
@@ -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),
},
},
})
])
cspell.config.yaml
+2
View File
@@ -67,6 +67,7 @@ words:
- gpuu
- grammyjs
- groq
- gugi
- guiiai
- hfspaceup
- hfsup
@@ -138,6 +139,7 @@ words:
- pthread
- qwen
- rehype
- reka
- rushstack
- Saccade
- saccades
package.json
+2
View File
@@ -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"
packages/stage-ui/package.json
+30 -15
View File
@@ -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"
}
}
packages/stage-ui/src/components/Menu/RadioCardManySelect.vue
+1 -1
View File
@@ -106,7 +106,7 @@ function updateCustomValue(value: string) {
<div class="relative">
<!-- Horizontally scrollable container -->
<div
class="scrollbar-hide grid auto-cols-[350px] grid-flow-col max-h-[calc(100dvh-7lh)] gap-4 overflow-x-auto pb-4"
class="grid auto-cols-[350px] grid-flow-col max-h-[calc(100dvh-7lh)] gap-4 overflow-x-auto pb-4 scrollbar-none"
:class="[
isListExpanded ? 'grid-cols-1 md:grid-cols-2 grid-flow-row auto-cols-auto' : '',
]"
packages/stage-ui/src/components/Menu/VoiceCardManySelect.vue
+1 -1
View File
@@ -337,7 +337,7 @@ const customVoiceName = ref('')
<div class="relative">
<!-- Horizontally scrollable container -->
<div
class="scrollbar-hide grid auto-cols-[350px] grid-flow-col max-h-[calc(100dvh-7lh)] gap-4 overflow-x-auto"
class="grid auto-cols-[350px] grid-flow-col max-h-[calc(100dvh-7lh)] gap-4 overflow-x-auto scrollbar-none"
:class="[
isListExpanded ? 'grid-cols-1 md:grid-cols-2 grid-flow-row auto-cols-auto' : '',
]"
packages/stage-ui/uno.config.ts
+6 -124
View File
@@ -1,126 +1,8 @@
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 { presetScrollbar } from 'unocss-preset-scrollbar'
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',
jura: 'Jura',
gugi: 'Gugi',
quicksand: 'Quicksand',
},
timeouts: {
warning: 5000,
failure: 10000,
},
}),
presetIcons({
scale: 1.2,
collections: {
...createExternalPackageIconLoader('@proj-airi/lobe-icons'),
},
}),
presetScrollbar(),
{
name: 'story-mock-hover',
variants: [
(matcher) => {
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(),
])
packages/ui/uno.config.ts
+8
View File
@@ -0,0 +1,8 @@
import { mergeConfigs } from 'unocss'
import { histoireUnoConfig, sharedUnoConfig } from '../../uno.config'
export default mergeConfigs([
sharedUnoConfig(),
histoireUnoConfig(),
])
pnpm-lock.yaml
Generated
+16 -14
View File
@@ -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:
uno.config.ts
+149 -33
View File
@@ -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(),
])