Skip to content

Commit bf37171

Browse files
nekomeowwwnekomeowww
authored
feat(playground): demonstrate manipulation for hue (#4)
1 parent 6c1f0af commit bf37171

File tree

8 files changed

+378
-526
lines changed

8 files changed

+378
-526
lines changed

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"packageManager": "[email protected]",
77
"scripts": {
88
"postinstall": "pnpm run build:packages",
9-
"dev": "pnpm -F chromatic dev",
9+
"dev": "pnpm -F @proj-airi/chromatic-playground dev",
1010
"build": "pnpm -r -F=\"./packages/*\" -F=\"./playground\" run build",
1111
"build:packages": "pnpm -F=\"./packages/*\" run build",
1212
"test": "vitest --coverage",
@@ -21,23 +21,23 @@
2121
"packages/*"
2222
],
2323
"devDependencies": {
24-
"@antfu/eslint-config": "^4.14.1",
24+
"@antfu/eslint-config": "^4.15.0",
2525
"@antfu/ni": "^25.0.0",
26-
"@types/node": "^22.15.32",
27-
"@unocss/eslint-config": "^66.2.1",
28-
"@unocss/eslint-plugin": "^66.2.1",
29-
"@unocss/preset-web-fonts": "^66.2.1",
26+
"@types/node": "^24.0.3",
27+
"@unocss/eslint-config": "^66.2.3",
28+
"@unocss/eslint-plugin": "^66.2.3",
29+
"@unocss/preset-web-fonts": "^66.2.3",
3030
"bumpp": "^10.2.0",
3131
"changelogithub": "^13.16.0",
3232
"eslint": "^9.29.0",
3333
"taze": "^19.1.0",
3434
"tsdown": "^0.12.8",
3535
"tsx": "^4.20.3",
3636
"typescript": "~5.8.3",
37-
"unocss": "^66.2.1",
37+
"unocss": "^66.2.3",
3838
"unplugin-unused": "^0.5.1",
3939
"vite": "^6.3.5",
4040
"vite-plugin-inspect": "^11.2.0",
41-
"vitest": "^3.2.3"
41+
"vitest": "^3.2.4"
4242
}
4343
}

‎packages/preset/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646
"build": "tsdown"
4747
},
4848
"devDependencies": {
49-
"@unocss/core": "^66.2.3",
50-
"@unocss/preset-mini": "^66.2.3"
49+
"@unocss/core": "^66.2.3"
5150
}
5251
}

‎playground/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,18 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"vue": "^3.5.13"
12+
"vue": "^3.5.17"
1313
},
1414
"devDependencies": {
1515
"@proj-airi/unocss-preset-chromatic": "workspace:^",
1616
"@unocss/core": "^66.2.3",
1717
"@unocss/preset-mini": "^66.2.3",
18-
"@vitejs/plugin-vue": "^5.2.3",
18+
"@unocss/reset": "^66.2.3",
19+
"@vitejs/plugin-vue": "^5.2.4",
1920
"@vue/tsconfig": "^0.7.0",
2021
"typescript": "~5.8.3",
2122
"unocss": "^66.2.3",
2223
"vite": "^6.3.5",
23-
"vue-tsc": "^2.2.8"
24+
"vue-tsc": "^2.2.10"
2425
}
2526
}

‎playground/src/App.vue‎

Lines changed: 69 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,72 @@
1+
<script setup lang="ts">
2+
import { VAR_HUE } from '@proj-airi/unocss-preset-chromatic'
3+
import { onMounted, ref, watch } from 'vue'
4+
5+
import ColorHueRange from './components/ColorHueRange.vue'
6+
7+
const DEFAULT_THEME_COLORS_HUE = 220.25
8+
const themeColorsHue = ref(DEFAULT_THEME_COLORS_HUE)
9+
10+
onMounted(() => {
11+
const hue = document.documentElement.style.getPropertyValue(VAR_HUE)
12+
const hueF = Number.parseFloat(hue)
13+
themeColorsHue.value = hueF >= 0 && hueF <= 360 ? hueF : DEFAULT_THEME_COLORS_HUE
14+
document.documentElement.style.setProperty(VAR_HUE, themeColorsHue.value.toString())
15+
})
16+
17+
watch(themeColorsHue, () => {
18+
document.documentElement.style.setProperty(VAR_HUE, themeColorsHue.value.toString())
19+
})
20+
</script>
21+
122
<template>
2-
<div class="text-zero">
3-
0
4-
</div>
5-
<div class="text-thirty">
6-
30
7-
</div>
8-
<div class="text-sixty">
9-
60
10-
</div>
11-
<div class="text-ninety">
12-
90
13-
</div>
14-
<div class="text-hundred-twenty">
15-
120
16-
</div>
17-
<div class="text-hundred-fifty">
18-
150
19-
</div>
20-
<div class="text-hundred-eighty">
21-
180
22-
</div>
23-
<div class="text-two-ten">
24-
210
25-
</div>
26-
<div class="text-two-forty">
27-
240
28-
</div>
29-
<div class="text-two-seventy">
30-
270
31-
</div>
32-
<div class="text-three-hundred">
33-
300
34-
</div>
35-
<div class="text-three-thirty">
36-
330
23+
<div class="mx-auto max-w-screen-xl p-4 font-sans">
24+
<div>
25+
<ColorHueRange
26+
v-model="themeColorsHue"
27+
class="w-full"
28+
:disabled="false"
29+
/>
30+
</div>
31+
<div>
32+
<div class="flex gap-2">
33+
<div class="text-zero">
34+
0
35+
</div>
36+
<div class="text-thirty">
37+
30
38+
</div>
39+
<div class="text-sixty">
40+
60
41+
</div>
42+
<div class="text-ninety">
43+
90
44+
</div>
45+
<div class="text-hundred-twenty">
46+
120
47+
</div>
48+
<div class="text-hundred-fifty">
49+
150
50+
</div>
51+
<div class="text-hundred-eighty">
52+
180
53+
</div>
54+
<div class="text-two-ten">
55+
210
56+
</div>
57+
<div class="text-two-forty">
58+
240
59+
</div>
60+
<div class="text-two-seventy">
61+
270
62+
</div>
63+
<div class="text-three-hundred">
64+
300
65+
</div>
66+
<div class="text-three-thirty">
67+
330
68+
</div>
69+
</div>
70+
</div>
3771
</div>
3872
</template>

‎playground/src/components/ColorHueRange.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
disabled?: boolean
4+
class?: string
5+
}>()
6+
7+
const colorValue = defineModel<string>('colorValue', {
8+
type: String,
9+
default: '',
10+
})
11+
</script>
12+
13+
<template>
14+
<input
15+
v-model="colorValue"
16+
type="range" min="0" max="360" step="0.01"
17+
class="color-hue-range"
18+
transition="all ease-in-out duration-250"
19+
:disabled="props.disabled"
20+
:class="[
21+
props.disabled ? 'opacity-25 cursor-not-allowed' : 'cursor-pointer',
22+
props.class || '',
23+
]"
24+
>
25+
</template>
26+
27+
<style scoped>
28+
.color-hue-range {
29+
--at-apply: appearance-none h-10 rounded-lg;
30+
background: linear-gradient(
31+
to right,
32+
oklch(85% 0.2 0),
33+
oklch(85% 0.2 60),
34+
oklch(85% 0.2 120),
35+
oklch(85% 0.2 180),
36+
oklch(85% 0.2 240),
37+
oklch(85% 0.2 300),
38+
oklch(85% 0.2 360)
39+
);
40+
41+
&::-webkit-slider-thumb {
42+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
43+
hover: bg-neutral-800 transition-colors duration-200;
44+
}
45+
46+
.dark &::-webkit-slider-thumb {
47+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
48+
hover: bg-neutral-300 transition-colors duration-200;
49+
}
50+
51+
&::-moz-range-thumb {
52+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
53+
hover: bg-neutral-800 transition-colors duration-200;
54+
}
55+
56+
.dark &::-moz-range-thumb {
57+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
58+
hover: bg-neutral-300 transition-colors duration-200;
59+
}
60+
}
61+
</style>

‎playground/src/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
22

33
import App from './App.vue'
44

5+
import '@unocss/reset/tailwind.css'
56
import 'virtual:uno.css'
67

78
createApp(App).mount('#app')

‎playground/uno.config.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
import { presetChromatic } from '@proj-airi/unocss-preset-chromatic'
2-
import { defineConfig, presetMini } from 'unocss'
2+
import { defineConfig, presetMini, presetWebFonts, transformerDirectives, transformerVariantGroup } from 'unocss'
33

44
export default defineConfig({
55
presets: [
66
presetMini(),
7+
presetWebFonts({
8+
fonts: {
9+
sans: 'DM Sans',
10+
},
11+
timeouts: {
12+
warning: 5000,
13+
failure: 10000,
14+
},
15+
}),
716
presetChromatic({
817
baseHue: 350,
918
colors: {
@@ -22,4 +31,10 @@ export default defineConfig({
2231
},
2332
}),
2433
],
34+
transformers: [
35+
transformerDirectives({
36+
applyVariable: ['--at-apply'],
37+
}),
38+
transformerVariantGroup(),
39+
],
2540
})

0 commit comments

Comments
 (0)