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

chore(stage-web): make the buttons follow the color scheme (#67)

Browse Source 
* chore(stage-web): make the buttons follow the color scheme
* remove blank lines generated by lint
* use complementary colors
This commit is contained in:
junkwarrior87
2025-03-10 17:26:29 +08:00
committed by GitHub
parent c24b8be26f
commit 5529b9cb5d
2 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-web/src/components/Layouts/InteractiveArea.vue
+4 -4
View File
@@ -203,9 +203,9 @@ onAfterSend(async () => {
</div>
<div flex="~ row" gap-2>
<button
bg="cyan-100 hover:cyan-200 dark:cyan-800 dark:hover:cyan-700"
bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
transition="all duration-250 ease-in-out"
text="cyan-400"
text="complementary-400"
mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
@click="handleLoadWhisper"
>
@@ -248,9 +248,9 @@ onAfterSend(async () => {
</fieldset>
</TransitionVertical>
<label
bg="cyan-100 hover:cyan-200 dark:cyan-800 dark:hover:cyan-700"
bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
transition="all duration-250 ease-in-out"
text="cyan-400"
text="complementary-400"
mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
>
<input v-model="showMicrophoneSelect" type="checkbox" hidden>
apps/stage-web/uno.config.ts
+19 -14
View File
@@ -12,6 +12,23 @@ import {
} from 'unocss'
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 default defineConfig({
presets: [
presetWind3(),
@@ -73,20 +90,8 @@ export default defineConfig({
],
theme: {
colors: {
primary: {
DEFAULT: 'oklch(62% var(--theme-colors-chroma) var(--theme-colors-hue))',
50: 'color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) var(--theme-colors-hue)) 30%, oklch(100% 0 360))',
100: 'color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) var(--theme-colors-hue)) 80%, oklch(100% 0 360))',
200: 'oklch(90% var(--theme-colors-chroma-200) var(--theme-colors-hue))',
300: 'oklch(85% var(--theme-colors-chroma-300) var(--theme-colors-hue))',
400: 'oklch(74% var(--theme-colors-chroma-400) var(--theme-colors-hue))',
500: 'oklch(62% var(--theme-colors-chroma) var(--theme-colors-hue))',
600: 'oklch(54% var(--theme-colors-chroma-600) var(--theme-colors-hue))',
700: 'oklch(49% var(--theme-colors-chroma-700) var(--theme-colors-hue))',
800: 'oklch(42% var(--theme-colors-chroma-800) var(--theme-colors-hue))',
900: 'oklch(37% var(--theme-colors-chroma-900) var(--theme-colors-hue))',
950: 'oklch(29% var(--theme-colors-chroma-950) var(--theme-colors-hue))',
},
primary: createColorSchemeConfig(),
complementary: createColorSchemeConfig(180),
},
},
})