rearrange color configs

daisyui.themes.ts

@@ -1,55 +1,60 @@
 /* eslint-env node */
-import * as convert from 'color-convert'
+// import * as convert from 'color-convert'
 
 // @ts-expect-error got nothing
 import themes from 'daisyui/src/theming/themes'
-import type { HSL } from 'color-convert/conversions'
-import { convertSingle, palette } from './src/palette'
 
-const cupcake = convertSingle(
-  themes['[data-theme=cupcake]'],
-  convert.hex.hsl,
-  ([h, s, l]: HSL) => `hsl(${h} ${s}% ${l}%)` as const,
-)
+// import type { HSL } from 'color-convert/conversions'
+// import { convertSingle } from './src/utils/color'
+import { hex as colors } from './src/palette'
+
+
+// const cupcake = convertSingle(
+//   themes['[data-theme=cupcake]'],
+//   convert.hex.hsl,
+//   ([h, s, l]: HSL) => `hsl(${h} ${s}% ${l}%)` as const,
+// )
+const cupcake = themes['[data-theme=cupcake]']
 // const valentine = convertSingle(themes['[data-theme=valentine]'], convert.hex.hsl, ([h, s, l]: [string, string, string]) => `hsl(${h} ${s}% ${l}%)`) as Record<keyof typeof themes['[data-theme=cupcake]'], string>
-const dracula = convertSingle(
-  themes['[data-theme=dracula]'],
-  convert.hex.hsl,
-  ([h, s, l]: HSL) => `hsl(${h} ${s}% ${l}%)` as const,
-)
+// const dracula = convertSingle(
+//   themes['[data-theme=dracula]'],
+//   convert.hex.hsl,
+//   ([h, s, l]: HSL) => `hsl(${h} ${s}% ${l}%)` as const,
+// )
+const dracula = themes['[data-theme=dracula]']
 const base = {
   '--rounded-btn': '1rem',
   '--btn-text-case': 'normal',
   '--tab-border': '2px',
   '--tab-radius': '.5rem',
   '--tw-border-opacity': '0.2',
 }
-export const guweb = [
+export const guccho = [
   {
-    'guweb-light': {
+    'guccho-light': {
       ...cupcake,
       ...base,
       'primary': cupcake.secondary,
       'secondary': cupcake.primary,
-      'neutral': palette.gbase[200],
-      'base-50': palette.gbase[50],
-      'base-100': palette.gbase[100],
-      'base-200': palette.gbase[200],
-      'base-300': palette.gbase[300],
-      'base-content': palette.gbase[900],
+      'neutral': colors.gbase[200],
+      'base-50': colors.gbase[50],
+      'base-100': colors.gbase[100],
+      'base-200': colors.gbase[200],
+      'base-300': colors.gbase[300],
+      'base-content': colors.gbase[900],
     },
   },
   {
-    'guweb-dark': {
+    'guccho-dark': {
       ...dracula,
       ...base,
-      'primary': palette.wewak[500],
-      'neutral': palette.gbase[500],
-      'base-50': palette.gbase[950],
-      'base-100': palette.gbase[900],
-      'base-200': palette.gbase[800],
-      'base-300': palette.gbase[700],
-      'base-content': palette.gbase[100],
+      'primary': colors.wewak[500],
+      'neutral': colors.gbase[500],
+      'base-50': colors.gbase[950],
+      'base-100': colors.gbase[900],
+      'base-200': colors.gbase[800],
+      'base-300': colors.gbase[700],
+      'base-content': colors.gbase[100],
     },
   },
 ]

src/assets/styles/main.scss

@@ -6,7 +6,7 @@ html {
   @apply max-w-7xl lg:px-4;
 }
 
-.guweb-legacy {
+.guccho-legacy {
   .v-popper {
     width: -webkit-max-content;
     width: -moz-max-content;

src/assets/styles/popper.scss

@@ -1,4 +1,4 @@
-.v-popper--theme-guweb-dropdown-b {
+.v-popper--theme-guccho-dropdown-b {
   &[data-popper-placement^="bottom"] {
     .v-popper__inner {
       @apply rounded-b-box;
@@ -22,7 +22,7 @@
   }
 }
 
-.v-popper--theme-guweb-dropdown {
+.v-popper--theme-guccho-dropdown {
   .v-popper__arrow-outer {
     visibility: hidden;
   }

src/components/T/menu/index.vue

@@ -4,7 +4,7 @@
 
 <template>
   <v-dropdown
-    theme="guweb-dropdown"
+    theme="guccho-dropdown"
     placement="auto"
     :distance="6"
     v-bind="$attrs"

src/components/content/editor/bubble-menu.client.vue

@@ -47,7 +47,7 @@ function setLink() {
     :editor="editor"
   >
     <v-dropdown
-      theme="guweb-dropdown"
+      theme="guccho-dropdown"
       :distance="10"
       strategy="absolute"
     >

src/palette.ts

@@ -1,6 +1,8 @@
 import convert from 'color-convert'
+import colors from 'tailwindcss/colors'
+import { convertSingle } from './utils/color'
 
-export const hex = {
+const customColors = {
   'pigeon-post': {
     50: '#EEEEF6',
     100: '#D7D7EA',
@@ -40,7 +42,7 @@ export const hex = {
     900: '#340919',
     950: '#0D0206',
   },
-  'gbase': {
+  'dark-horizon': {
     50: '#F0F0F5',
     100: '#E0E1EB',
     200: '#C1C4D7',
@@ -54,27 +56,22 @@ export const hex = {
     950: '#0A0B0F',
   },
 } as const
-export function convertSingle<TI, TR>(colors: Record<string, any>,
-  converter: (...any: any) => TI,
-  transform: (input: TI) => TR) {
-  return Object.entries(colors).reduce<Record<string, ReturnType<typeof transform>>>(
-    (acc, [key, value]) => {
-      acc[key] = transform(converter(value))
-      return acc
-    },
-    {},
-  )
-}
 
-function to<TConverterReturn extends TReturn, TReturn = TConverterReturn>(converter: (...any: any) => TConverterReturn,
-  transform: (input: TConverterReturn) => TReturn = a => a) {
-  return Object.entries(hex).reduce((acc, [key, colors]: [string, Record<string, unknown>]) => {
-    acc[key as keyof typeof hex] = convertSingle(colors, converter, transform)
-    return acc
-  }, {} as Record<any, any>) as Record<keyof typeof hex, Record<keyof typeof hex[keyof typeof hex], TReturn>>
+export const hex = {
+  ...customColors,
+  gbase: colors.slate,
 }
+
 export const palette = to(
   convert.hex.hsl,
   ([h, s, l]) => `hsl(${h} ${s}% ${l}%)` as const,
 )
 export const hsvRaw = to(convert.hex.hsl)
+
+export function to<TConverterReturn extends TReturn, TReturn = TConverterReturn>(converter: (...any: any) => TConverterReturn,
+  transform: (input: TConverterReturn) => TReturn = a => a) {
+  return Object.entries(hex).reduce((acc, [key, colors]: [string, Record<string, unknown>]) => {
+    acc[key as keyof typeof hex] = convertSingle(colors, converter, transform)
+    return acc
+  }, {} as Record<any, any>) as Record<keyof typeof hex, Record<keyof (typeof hex)[keyof typeof hex], TReturn>>
+}

src/plugins/floating-vue-themes.ts

@@ -2,12 +2,12 @@ import floatingVue from 'floating-vue'
 
 const { options } = floatingVue
 
-options.themes['guweb-dropdown'] = {
+options.themes['guccho-dropdown'] = {
   $extend: 'dropdown',
   $resetCss: true,
   autoHide: true,
 }
-options.themes['guweb-dropdown-b'] = {
+options.themes['guccho-dropdown-b'] = {
   $extend: 'dropdown',
   $resetCss: true,
   autoHide: true,

src/utils/color.ts

@@ -0,0 +1,11 @@
+export function convertSingle<TI, TR>(colors: Record<string, any>,
+  converter: (...any: any) => TI,
+  transform: (input: TI) => TR) {
+  return Object.entries(colors).reduce<Record<string, ReturnType<typeof transform>>>(
+    (acc, [key, value]) => {
+      acc[key] = transform(converter(value))
+      return acc
+    },
+    {},
+  )
+}

tailwind.config.ts

@@ -2,8 +2,8 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 /* eslint-env node */
 
-import { guweb } from './daisyui.themes'
-import { palette } from './src/palette'
+import { guccho } from './daisyui.themes'
+import { hex as colors } from './src/palette'
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -31,7 +31,7 @@ module.exports = {
   ],
   theme: {
     extend: {
-      colors: palette,
+      colors,
       animation: {
         'role-text': 'text 7s ease infinite',
       },
@@ -59,7 +59,7 @@ module.exports = {
     require('@tailwindcss/container-queries'),
   ],
   daisyui: {
-    darkTheme: 'guweb-dark',
-    themes: guweb,
+    darkTheme: 'guccho-dark',
+    themes: guccho,
   },
 }