refactor: theme color css variables

apps/admin/autoResolver/components.d.ts

@@ -31,6 +31,7 @@ declare module 'vue' {
     NGrid: typeof import('@celeris/ca-components')['NGrid']
     NGridItem: typeof import('@celeris/ca-components')['NGridItem']
     NInput: typeof import('@celeris/ca-components')['NInput']
+    NInputGroup: typeof import('@celeris/ca-components')['NInputGroup']
     NLayout: typeof import('@celeris/ca-components')['NLayout']
     NLayoutContent: typeof import('@celeris/ca-components')['NLayoutContent']
     NLayoutSider: typeof import('@celeris/ca-components')['NLayoutSider']

apps/admin/src/pages/directives/ripple/index.vue

@@ -10,7 +10,7 @@ const { t } = useI18n();
 
 <template>
   <div class="h-full flex flex-row space-x-2xl">
-    <NCard v-ripple class="bg-primary">
+    <NCard v-ripple content-class="bg-primary rounded-2xl">
       <div class="space-y-3xl text-white text-chinese">
         <h1 class="text-7xl">
           {{ t("page.rippleDirective.ripple") }}
@@ -25,7 +25,7 @@ const { t } = useI18n();
     </NCard>
     <img
       :src="HeroImg"
-      class="rounded-2xl object-cover min-h-[56px]"
+      class="rounded-2xl object-cover min-h-[56px] max-h-[400px] w-1/2"
       alt="Two containers that display a bounded and unbounded ripple on interaction."
       title="A bounded and unbounded ripple."
     >

apps/admin/src/store/subscribe/theme.ts

@@ -1,4 +1,4 @@
-import { colorToRgb, generateColorPalettes, setCssVariable } from "@celeris/utils";
+import { convertColorToRgbString, convertColorToRgbValues, generateColorPalettes, setCssVariable } from "@celeris/utils";
 import { effectScope, onScopeDispose, watch } from "vue";
 import type { GlobalThemeOverrides } from "naive-ui";
 import { kebabCase } from "lodash-es";
@@ -17,7 +17,8 @@ export default function subscribeThemeStore() {
       () => designStore.getNaiveUICustomTheme,
       (newTheme) => {
         if (newTheme?.common) {
-          addThemeCssVariablesToHtml(newTheme?.common);
+          addThemeColorCssVariablesToHtml(newTheme?.common);
+          addThemeRgbColorCssVariablesToHtml(newTheme?.common);
         }
       },
       { immediate: true },
@@ -40,18 +41,37 @@ type ThemeVarsKeys = keyof ThemeVars;
  * Add theme color variables to HTML
  * @param {ThemeVars} themeVars - 主题变量对象
  */
-function addThemeCssVariablesToHtml(themeVars: ThemeVars) {
+function addThemeColorCssVariablesToHtml(themeVars: ThemeVars) {
   for (const [key, color] of Object.entries(themeVars) as [ThemeVarsKeys, string][]) {
     if (color) {
-      const { r, g, b } = colorToRgb(color);
-      setCssVariable(`--${kebabCase(key)}`, `${r},${g},${b}`);
+      setCssVariable(`--${kebabCase(key)}`, convertColorToRgbString(color));
       if (key === "primaryColor") {
         const colorPalettes = generateColorPalettes(color);
 
         for (let index = 0; index < colorPalettes.length; index++) {
           const palette = colorPalettes[index];
-          const { r: pR, g: pG, b: pB } = colorToRgb(palette);
-          setCssVariable(`--${kebabCase(key)}${index + 1}`, `${pR},${pG},${pB}`);
+          setCssVariable(`--${kebabCase(key)}-${index + 1}`, convertColorToRgbString(palette));
+        }
+      }
+    }
+  }
+}
+
+/**
+ * 向 HTML 添加主题颜色变量的 RGB CSS 变量
+ * Add theme color variables as RGB CSS variables to HTML
+ * @param {ThemeVars} themeVars - 主题变量对象
+ */
+function addThemeRgbColorCssVariablesToHtml(themeVars: ThemeVars) {
+  for (const [key, color] of Object.entries(themeVars) as [ThemeVarsKeys, string][]) {
+    if (color) {
+      setCssVariable(`--${kebabCase(key)}-rgb`, convertColorToRgbValues(color));
+      if (key === "primaryColor") {
+        const colorPalettes = generateColorPalettes(color);
+
+        for (let index = 0; index < colorPalettes.length; index++) {
+          const palette = colorPalettes[index];
+          setCssVariable(`--${kebabCase(key)}-${index + 1}-rgb`, convertColorToRgbValues(palette));
         }
       }
     }

packages/node/vite/src/plugins/unocss.ts

@@ -50,36 +50,36 @@ export function createUnoCSSPluginConfig(): PluginOption {
     },
     theme: {
       colors: {
-        primary: "rgb(var(--primary-color))",
-        primary_hover: "rgb(var(--primary-color-hover))",
-        primary_suppl: "rgb(var(--primary-color-suppl))",
-        primary_pressed: "rgb(var(--primary-color-pressed))",
-        primary_1: "rgb(var(--primary-color1))",
-        primary_2: "rgb(var(--primary-color2))",
-        primary_3: "rgb(var(--primary-color3))",
-        primary_4: "rgb(var(--primary-color4))",
-        primary_5: "rgb(var(--primary-color5))",
-        primary_6: "rgb(var(--primary-color6))",
-        primary_7: "rgb(var(--primary-color7))",
-        primary_8: "rgb(var(--primary-color8))",
-        primary_9: "rgb(var(--primary-color9))",
-        primary_10: "rgb(var(--primary-color10))",
-        info: "rgb(var(--info-color))",
-        info_hover: "rgb(var(--info-color-hover))",
-        info_suppl: "rgb(var(--info-color-suppl))",
-        info_pressed: "rgb(var(--info-color-pressed))",
-        success: "rgb(var(--success-color))",
-        success_hover: "rgb(var(--success-color-hover))",
-        success_suppl: "rgb(var(--success-color-suppl))",
-        success_pressed: "rgb(var(--success-color-pressed))",
-        warning: "rgb(var(--warning-color))",
-        warning_hover: "rgb(var(--warning-color-hover))",
-        warning_suppl: "rgb(var(--warning-color-suppl))",
-        warning_pressed: "rgb(var(--warning-color-pressed))",
-        error: "rgb(var(--error-color))",
-        error_hover: "rgb(var(--error-color-hover))",
-        error_suppl: "rgb(var(--error-color-suppl))",
-        error_pressed: "rgb(var(--error-color-pressed))",
+        primary: "var(--primary-color)",
+        primary_hover: "var(--primary-color-hover)",
+        primary_suppl: "var(--primary-color-suppl)",
+        primary_pressed: "var(--primary-color-pressed)",
+        primary_1: "var(--primary-color-1)",
+        primary_2: "var(--primary-color-2)",
+        primary_3: "var(--primary-color-3)",
+        primary_4: "var(--primary-color-4)",
+        primary_5: "var(--primary-color-5)",
+        primary_6: "var(--primary-color-6)",
+        primary_7: "var(--primary-color-7)",
+        primary_8: "var(--primary-color-8)",
+        primary_9: "var(--primary-color-9)",
+        primary_10: "var(--primary-color10)",
+        info: "var(--info-color)",
+        info_hover: "var(--info-color-hover)",
+        info_suppl: "var(--info-color-suppl)",
+        info_pressed: "var(--info-color-pressed)",
+        success: "var(--success-color)",
+        success_hover: "var(--success-color-hover)",
+        success_suppl: "var(--success-color-suppl)",
+        success_pressed: "var(--success-color-pressed)",
+        warning: "var(--warning-color))",
+        warning_hover: "var(--warning-color-hover)",
+        warning_suppl: "var(--warning-color-suppl)",
+        warning_pressed: "var(--warning-color-pressed)",
+        error: "var(--error-color))",
+        error_hover: "var(--error-color-hover)",
+        error_suppl: "var(--error-color-suppl)",
+        error_pressed: "var(--error-color-pressed)",
       },
     },
     transformers: [

packages/web/styles/src/naive-override.css

@@ -3,7 +3,7 @@
 }
 .ca-modal,
 .ca-card.ca-modal[role] {
-	background-color: rgba(var(--modal-color), 0.75);
+	background-color: rgba(var(--modal-color-rgb), 0.75);
 	backdrop-filter: blur(20px);
 	max-width: 90%;
 	margin: 10vh auto;

packages/web/utils/src/color/utils.ts

@@ -13,7 +13,29 @@ export function colorToRgb(color: string): RgbaColor {
   return colord(color).toRgb();
 }
 
-export function colorToRgbString(color: string) {
+/**
+ * Converts a color string to its RGB representation as a string.
+ * 将颜色字符串转换为其 RGB 表示形式的字符串。
+ *
+ * @param {string} color - The color string to convert.
+ *                         要转换的颜色字符串。
+ * @returns {string} Returns the color represented as an RGB string.
+ *                   返回表示颜色的 RGB 字符串。
+ */
+export function convertColorToRgbString(color: string) {
+  return colord(color).toRgbString();
+}
+
+/**
+ * Converts a color string to its RGB values as an array.
+ * 将颜色字符串转换为其 RGB 值的数组。
+ *
+ * @param {string} color - The color string to convert.
+ *                         要转换的颜色字符串。
+ * @returns {number[]} Returns an array of RGB values [r, g, b].
+ *                     返回包含 RGB 值的数组 [r, g, b]。
+ */
+export function convertColorToRgbValues(color: string) {
   const rgba = colord(color).toRgb();
   return [rgba.r, rgba.g, rgba.b].join(", ");
 }