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

refactor(ui,stage-ui,stage-app,stage-tamagotchi): migrate to use @proj-airi/unocss-preset-chromatic (#219)

Browse Source
This commit is contained in:
Neko
2025-06-19 17:16:00 +08:00
committed by GitHub
parent 33c9157a4e
commit bd497051fe
21 changed files with 61 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/playground-prompt-engineering/src/components/Form/Range/Range.vue
+12 -9
View File
@@ -46,6 +46,11 @@ function updateTrackColor() {
sliderRef.value.style.setProperty('--min', !sliderRef.value.min ? props.min.toString() : sliderRef.value.min)
sliderRef.value.style.setProperty('--max', !sliderRef.value.max ? props.max.toString() : sliderRef.value.max)
}
function handleInput(e: Event) {
const target = e.target as HTMLInputElement
target.style.setProperty('--value', target.value)
}
</script>
<template>
@@ -57,9 +62,7 @@ function updateTrackColor() {
:max="scaledMax"
:step="scaledStep"
class="slider-progress form_input-range"
@input="(e) => {
(e.target as HTMLInputElement).style.setProperty('--value', (e.target as HTMLInputElement).value)
}"
@input="handleInput"
>
</template>
@@ -80,9 +83,9 @@ https://toughengineer.github.io/demo/slider-styler*/
--thumb-box-shadow: 0 0 0px #e6e6e6;
--thumb-border: none;
--thumb-border-radius: 999px;
--thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--thumb-background-active: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--track-height: calc(var(--height) - var(--track-value-padding) * 2);
--track-box-shadow: none;
@@ -99,9 +102,9 @@ https://toughengineer.github.io/demo/slider-styler*/
}
.dark .form_input-range {
--thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--thumb-background-active: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--track-border: solid 2px rgb(44, 44, 44);
--track-background: rgb(44, 44, 44);
apps/playground-prompt-engineering/src/styles/main.css
-1
View File
@@ -1,4 +1,3 @@
@import './themes.css';
@import './transitions.css';
html,
apps/playground-prompt-engineering/src/styles/themes.css
-14
View File
@@ -1,14 +0,0 @@
:root {
--theme-colors-hue: 220.31;
--theme-colors-chroma: calc(0.18 + (cos(var(--theme-colors-hue) * 3.14159265 / 180) * 0.04));
--theme-colors-chroma-50: calc(var(--theme-colors-chroma) * 0.3);
--theme-colors-chroma-100: calc(var(--theme-colors-chroma) * 0.5);
--theme-colors-chroma-200: calc(var(--theme-colors-chroma) * 0.6);
--theme-colors-chroma-300: calc(var(--theme-colors-chroma) * 0.75);
--theme-colors-chroma-400: var(--theme-colors-chroma);
--theme-colors-chroma-600: calc(var(--theme-colors-chroma) * 1.15);
--theme-colors-chroma-700: calc(var(--theme-colors-chroma) * 1.1);
--theme-colors-chroma-800: calc(var(--theme-colors-chroma) * 0.85);
--theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
--theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
}
apps/stage-tamagotchi/src/App.vue
+4 -4
View File
@@ -28,7 +28,7 @@ onMounted(() => {
})
watch(themeColorsHue, () => {
document.documentElement.style.setProperty('--theme-colors-hue', themeColorsHue.value.toString())
document.documentElement.style.setProperty('--chromatic-hue', themeColorsHue.value.toString())
}, { immediate: true })
watch(themeColorsHueDynamic, () => {
@@ -46,7 +46,7 @@ listen('mcp_plugin_destroyed', () => {
<style>
/* We need this to properly animate the CSS variable */
@property --theme-colors-hue {
@property --chromatic-hue {
syntax: '<number>';
initial-value: 0;
inherits: true;
@@ -54,10 +54,10 @@ listen('mcp_plugin_destroyed', () => {
@keyframes hue-anim {
from {
--theme-colors-hue: 0;
--chromatic-hue: 0;
}
to {
--theme-colors-hue: 360;
--chromatic-hue: 360;
}
}
apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue
+1 -1
View File
@@ -21,7 +21,7 @@ const settings = useSettings()
<TooltipTrigger
transition="all ease-in-out duration-250"
size-6 cursor-pointer rounded-full bg-primary-500
:style="hex ? { background: hex } : { '--theme-colors-hue': DEFAULT_THEME_COLORS_HUE }"
:style="hex ? { background: hex } : { '--chromatic-hue': DEFAULT_THEME_COLORS_HUE }"
:class="settings.isColorSelectedForPrimary(hex) ? 'scale-150 mx-1' : 'hover:scale-110'"
@click="settings.applyPrimaryColorFrom(hex)"
/>
apps/stage-tamagotchi/src/styles/main.css
-1
View File
@@ -1,4 +1,3 @@
@import './themes.css';
@import './transitions.css';
:root {
apps/stage-tamagotchi/src/styles/themes.css
-14
View File
@@ -1,14 +0,0 @@
:root {
--theme-colors-hue: 220.44;
--theme-colors-chroma: calc(0.18 + (cos(var(--theme-colors-hue) * 3.14159265 / 180) * 0.04));
--theme-colors-chroma-50: calc(var(--theme-colors-chroma) * 0.3);
--theme-colors-chroma-100: calc(var(--theme-colors-chroma) * 0.5);
--theme-colors-chroma-200: calc(var(--theme-colors-chroma) * 0.6);
--theme-colors-chroma-300: calc(var(--theme-colors-chroma) * 0.75);
--theme-colors-chroma-400: var(--theme-colors-chroma);
--theme-colors-chroma-600: calc(var(--theme-colors-chroma) * 1.15);
--theme-colors-chroma-700: calc(var(--theme-colors-chroma) * 1.1);
--theme-colors-chroma-800: calc(var(--theme-colors-chroma) * 0.85);
--theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
--theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
}
apps/stage-web/src/App.vue
+10 -10
View File
@@ -13,20 +13,20 @@ const isDark = useDark()
const primaryColor = computed(() => {
return isDark.value
? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${0})) 70%, oklch(50% 0 360))`
: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${0})) 90%, oklch(90% 0 360))`
? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${0})) 70%, oklch(50% 0 360))`
: `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${0})) 90%, oklch(90% 0 360))`
})
const secondaryColor = computed(() => {
return isDark.value
? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${180})) 70%, oklch(50% 0 360))`
: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${180})) 90%, oklch(90% 0 360))`
? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${180})) 70%, oklch(50% 0 360))`
: `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${180})) 90%, oklch(90% 0 360))`
})
const tertiaryColor = computed(() => {
return isDark.value
? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${60})) 70%, oklch(50% 0 360))`
: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${60})) 90%, oklch(90% 0 360))`
? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${60})) 70%, oklch(50% 0 360))`
: `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${60})) 90%, oklch(90% 0 360))`
})
const colors = computed(() => {
@@ -38,7 +38,7 @@ watch(settings.language, () => {
})
watch(settings.themeColorsHue, () => {
document.documentElement.style.setProperty('--theme-colors-hue', settings.themeColorsHue.value.toString())
document.documentElement.style.setProperty('--chromatic-hue', settings.themeColorsHue.value.toString())
}, { immediate: true })
watch(settings.themeColorsHueDynamic, () => {
@@ -62,7 +62,7 @@ watch(settings.themeColorsHueDynamic, () => {
<style>
/* We need this to properly animate the CSS variable */
@property --theme-colors-hue {
@property --chromatic-hue {
syntax: '<number>';
initial-value: 0;
inherits: true;
@@ -70,10 +70,10 @@ watch(settings.themeColorsHueDynamic, () => {
@keyframes hue-anim {
from {
--theme-colors-hue: 0;
--chromatic-hue: 0;
}
to {
--theme-colors-hue: 360;
--chromatic-hue: 360;
}
}
apps/stage-web/src/components/Backgrounds/Cross.vue
+2 -2
View File
@@ -11,7 +11,7 @@ https://www.magicpattern.design/tools/css-backgrounds
*/
.cross-background-container {
background-color: #ffffff;
--cross-color: oklch(0.85 calc(var(--theme-colors-chroma) * 0.3) var(--theme-colors-hue) / 0.2);
--cross-color: oklch(0.85 calc(var(--chromatic-chroma) * 0.3) var(--chromatic-hue) / 0.2);
background:
radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 25px 25px,
@@ -26,7 +26,7 @@ https://www.magicpattern.design/tools/css-backgrounds
.dark .cross-background-container {
background-color: #121212;
--cross-color: oklch(0.2 calc(var(--theme-colors-chroma) * 0.3) var(--theme-colors-hue));
--cross-color: oklch(0.2 calc(var(--chromatic-chroma) * 0.3) var(--chromatic-hue));
background:
radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent) 25px 25px,
apps/stage-web/src/components/Layouts/HeaderLink.vue
+1 -1
View File
@@ -27,6 +27,6 @@ const dark = useDark()
<style scoped>
.theme-colored {
filter: hue-rotate(calc(var(--theme-colors-hue, 0) * 1deg));
filter: hue-rotate(calc(var(--chromatic-hue, 0) * 1deg));
}
</style>
apps/stage-web/src/components/Settings/ColorPalette.vue
+1 -1
View File
@@ -21,7 +21,7 @@ const settings = useSettings()
<TooltipTrigger
transition="all ease-in-out duration-250"
size-6 cursor-pointer rounded-full bg-primary-500
:style="hex ? { background: hex } : { '--theme-colors-hue': DEFAULT_THEME_COLORS_HUE }"
:style="hex ? { background: hex } : { '--chromatic-hue': DEFAULT_THEME_COLORS_HUE }"
:class="settings.isColorSelectedForPrimary(hex) ? 'scale-150 mx-1' : 'hover:scale-110'"
@click="settings.applyPrimaryColorFrom(hex)"
/>
apps/stage-web/src/components/Widgets/AnimatedWave.vue
+1 -1
View File
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<WaveProps>(), {
height: 40,
amplitude: 14,
waveLength: 250,
fillColor: 'oklch(95% 0.10 var(--theme-colors-hue))',
fillColor: 'oklch(95% 0.10 var(--chromatic-hue))',
direction: 'down',
movementDirection: 'left',
animationSpeed: 50,
apps/stage-web/src/pages/index.vue
+2 -2
View File
@@ -23,8 +23,8 @@ const positionCursor = useMouse()
<Cross>
<AnimatedWave
:fill-color="dark
? 'oklch(35% calc(var(--theme-colors-chroma) * 0.6) var(--theme-colors-hue))'
: 'color-mix(in srgb, oklch(95% calc(var(--theme-colors-chroma-50) * 0.5) var(--theme-colors-hue)) 80%, oklch(100% 0 360))'"
? 'oklch(35% calc(var(--chromatic-chroma) * 0.6) var(--chromatic-hue))'
: 'color-mix(in srgb, oklch(95% calc(var(--chromatic-chroma-50) * 0.5) var(--chromatic-hue)) 80%, oklch(100% 0 360))'"
>
<div relative flex="~ col" z-2 h-100dvh w-100vw of-hidden>
<!-- header -->
apps/stage-web/src/styles/main.css
-1
View File
@@ -1,4 +1,3 @@
@import './themes.css';
@import './transitions.css';
:root {
apps/stage-web/src/styles/themes.css
-14
View File
@@ -1,14 +0,0 @@
:root {
--theme-colors-hue: 220.44;
--theme-colors-chroma: calc(0.18 + (cos(var(--theme-colors-hue) * 3.14159265 / 180) * 0.04));
--theme-colors-chroma-50: calc(var(--theme-colors-chroma) * 0.3);
--theme-colors-chroma-100: calc(var(--theme-colors-chroma) * 0.5);
--theme-colors-chroma-200: calc(var(--theme-colors-chroma) * 0.6);
--theme-colors-chroma-300: calc(var(--theme-colors-chroma) * 0.75);
--theme-colors-chroma-400: var(--theme-colors-chroma);
--theme-colors-chroma-600: calc(var(--theme-colors-chroma) * 1.15);
--theme-colors-chroma-700: calc(var(--theme-colors-chroma) * 1.1);
--theme-colors-chroma-800: calc(var(--theme-colors-chroma) * 0.85);
--theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
--theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
}
package.json
+1
View File
@@ -41,6 +41,7 @@
"@antfu/ni": "^25.0.0",
"@arethetypeswrong/core": "^0.18.2",
"@iconify/utils": "^2.3.0",
"@proj-airi/unocss-preset-chromatic": "^0.0.3",
"@types/node": "^24.0.1",
"@unocss/eslint-config": "^66.2.0",
"@unocss/eslint-plugin": "^66.2.0",
packages/stage-ui/stories/ThemeColorsHueControl.vue
+4 -3
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { VAR_HUE } from '@proj-airi/unocss-preset-chromatic'
import { onMounted, ref, watch } from 'vue'
const DEFAULT_THEME_COLORS_HUE = 220.44
@@ -10,14 +11,14 @@ function resetToDefault() {
}
onMounted(() => {
const hue = document.documentElement.style.getPropertyValue('--theme-colors-hue')
const hue = document.documentElement.style.getPropertyValue(VAR_HUE)
const hueF = Number.parseFloat(hue)
themeColorsHue.value = hueF >= 0 && hueF <= 360 ? hueF : DEFAULT_THEME_COLORS_HUE
document.documentElement.style.setProperty('--theme-colors-hue', themeColorsHue.value.toString())
document.documentElement.style.setProperty(VAR_HUE, themeColorsHue.value.toString())
})
watch(themeColorsHue, () => {
document.documentElement.style.setProperty('--theme-colors-hue', themeColorsHue.value.toString())
document.documentElement.style.setProperty(VAR_HUE, themeColorsHue.value.toString())
})
</script>
packages/stage-ui/stories/themes.css
-15
View File
@@ -1,18 +1,3 @@
:root {
--theme-colors-hue: 220.44;
--theme-colors-chroma: calc(0.18 + (cos(var(--theme-colors-hue) * 3.14159265 / 180) * 0.04));
--theme-colors-chroma-50: calc(var(--theme-colors-chroma) * 0.3);
--theme-colors-chroma-100: calc(var(--theme-colors-chroma) * 0.5);
--theme-colors-chroma-200: calc(var(--theme-colors-chroma) * 0.6);
--theme-colors-chroma-300: calc(var(--theme-colors-chroma) * 0.75);
--theme-colors-chroma-400: var(--theme-colors-chroma);
--theme-colors-chroma-600: calc(var(--theme-colors-chroma) * 1.15);
--theme-colors-chroma-700: calc(var(--theme-colors-chroma) * 1.1);
--theme-colors-chroma-800: calc(var(--theme-colors-chroma) * 0.85);
--theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
--theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
}
*,
::before,
::after {
packages/ui/src/components/Form/Range/Range.vue
+6 -6
View File
@@ -83,9 +83,9 @@ https://toughengineer.github.io/demo/slider-styler*/
--thumb-box-shadow: 0 0 0px #e6e6e6;
--thumb-border: none;
--thumb-border-radius: 999px;
--thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--thumb-background-active: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--track-height: calc(var(--height) - var(--track-value-padding) * 2);
--track-box-shadow: none;
@@ -102,9 +102,9 @@ https://toughengineer.github.io/demo/slider-styler*/
}
.dark .form_input-range {
--thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
--thumb-background: oklch(70% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--thumb-background-hover: oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--thumb-background-active: oklch(80% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0));
--track-border: solid 2px rgb(44, 44, 44);
--track-background: rgb(44, 44, 44);
pnpm-lock.yaml
Generated
+8
View File
@@ -78,6 +78,9 @@ importers:
'@iconify/utils':
specifier: ^2.3.0
version: 2.3.0
'@proj-airi/unocss-preset-chromatic':
specifier: ^0.0.3
version: 0.0.3
'@types/node':
specifier: ^24.0.1
version: 24.0.1
@@ -4217,6 +4220,9 @@ packages:
'@proj-airi/server-shared@0.6.0':
resolution: {integrity: sha512-2CLQc7BufGvQGmLrtFYy5XWGw0jdeteXAht/5QvvhlWW8GhJ5edLqPZsETE5R+goa0OFWcLJgPUki3xdJAvfVQ==}
'@proj-airi/unocss-preset-chromatic@0.0.3':
resolution: {integrity: sha512-IPUQRaguvVNQemifVEAVem2yAJi9GxNb1M2Izl0P3Z9ObGk4BPMdh86Gkb52NTwcOmEWjy5eEKgTbXasP0Ekhg==}
'@proj-airi/unplugin-fetch@0.1.6':
resolution: {integrity: sha512-p/7qK+MeXyzTEdvXANQmQy0PzW0/EsSApOFln0Sl5JWmPAdFPkTr1+kNAMuS/7rLRLgZYKmbbSVCM3ZPrWj8pg==}
@@ -14718,6 +14724,8 @@ snapshots:
transitivePeerDependencies:
- srvx
'@proj-airi/unocss-preset-chromatic@0.0.3': {}
'@proj-airi/unplugin-fetch@0.1.6(@types/node@24.0.1)(jiti@2.4.2)(less@4.3.0)(lightningcss@1.30.1)(terser@5.17.6)(tsx@4.20.3)(yaml@2.8.0)':
dependencies:
ofetch: 1.4.1
uno.config.ts
+8 -23
View File
@@ -1,28 +1,12 @@
import type { PresetOrFactoryAwaitable } from 'unocss'
import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'
import { presetChromatic } from '@proj-airi/unocss-preset-chromatic'
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}) / %alpha)`,
50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha) 30%, oklch(100% 0 360 / %alpha))`,
100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha) 80%, oklch(100% 0 360 / %alpha))`,
200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}) / %alpha)`,
}
}
export function presetStoryMockHover(): PresetOrFactoryAwaitable {
return {
name: 'story-mock-hover',
@@ -94,6 +78,13 @@ export function sharedUnoConfig() {
},
}),
presetScrollbar(),
presetChromatic({
baseHue: 220.44,
colors: {
primary: 0,
complementary: 180,
},
}),
],
transformers: [
transformerDirectives({
@@ -138,12 +129,6 @@ export function sharedUnoConfig() {
}
}],
],
theme: {
colors: {
primary: createColorSchemeConfig(),
complementary: createColorSchemeConfig(180),
},
},
})
}