feat(web): 添加颜色类型

Author: YuJianghao

packages/hexon-web/.storybook/preview.js

@@ -1,6 +1,6 @@
 import { ThemeProvider } from "../src/lib/theme";
-import { blueTheme } from "../src/constants";
-import "../src/reset.less";
+import { blueTheme } from "../src/themes";
+import "../src/styles/reset.less";
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

packages/hexon-web/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import account from "./account";
 import { useAccountProvider } from "./lib/account";
-import { blueTheme } from "./constants";
+import { blueTheme } from "./themes";
 import { ThemeProvider, useThemeSwitcherProvider } from "./lib/theme";
 
 const switcher = useThemeSwitcherProvider("blue", blueTheme);
@@ -16,5 +16,5 @@ useAccountProvider(account);
 </template>
 
 <style lang="less">
-@import "./reset.less";
+@import "./styles/reset.less";
 </style>

packages/hexon-web/src/components/HButton.stories.mdx

@@ -49,7 +49,7 @@ import HIcon from "./HIcon.vue";
     {() => ({
       components: { HButton },
       template: `
-<div style="padding:20px; background-color: gray;">
+<div style="padding:20px;">
   <HButton type="primary" inverted>primary</HButton>&nbsp;
   <HButton type="success" inverted>success</HButton>&nbsp;
   <HButton type="warning" inverted>warning</HButton>&nbsp;

packages/hexon-web/src/components/HButton.vue

@@ -63,7 +63,7 @@ button {
   }
   &.primary {
     background-color: var(--color-primary-0);
-    color: var(--color-white);
+    color: var(--color-foreground-9);
     &:hover {
       background-color: var(--color-primary-l2);
     }
@@ -83,7 +83,7 @@ button {
   }
   &.success {
     background-color: var(--color-success-0);
-    color: var(--color-white);
+    color: var(--color-foreground-9);
     &:hover {
       background-color: var(--color-success-l2);
     }
@@ -103,7 +103,7 @@ button {
   }
   &.warning {
     background-color: var(--color-warning-0);
-    color: var(--color-white);
+    color: var(--color-foreground-9);
     &:hover {
       background-color: var(--color-warning-l2);
     }
@@ -123,7 +123,7 @@ button {
   }
   &.error {
     background-color: var(--color-error-0);
-    color: var(--color-white);
+    color: var(--color-foreground-9);
     &:hover {
       background-color: var(--color-error-l2);
     }

packages/hexon-web/src/components/HIcon.vue

@@ -3,7 +3,7 @@ import { computed, toRefs } from "@vue/reactivity";
 import { Icon } from "@vicons/utils";
 
 const props = withDefaults(
-  defineProps<{ size?: string | number; clickable: boolean }>(),
+  defineProps<{ size?: string | number; clickable?: boolean }>(),
   {
     size: "1em",
     clickable: false,

packages/hexon-web/src/constants.ts

@@ -0,0 +1,100 @@
+import { hex, rgb } from "color-convert";
+import { ITheme } from "./lib/theme";
+
+type modifier = "l" | "a" | "d";
+type amount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+
+type ModifiedColor = {
+  [key in `${modifier}${amount}`]: string;
+};
+
+type modifyFn = (name: string, amt: number) => string;
+type modifierFnMap = { [key in modifier]: modifyFn };
+
+const modifiers: modifierFnMap = {
+  l: (name, amt) => {
+    // 变白
+    const [r, g, b] = hex.rgb(name);
+    const go = (c: number) => c + Math.abs(255 - c) * amt;
+    return `#${rgb.hex([go(r), go(g), go(b)])}`;
+  },
+  d: (name, amt) => {
+    // 变黑
+    const [r, g, b] = hex.rgb(name);
+    const go = (c: number) => c * (1 - amt);
+    return `#${rgb.hex([go(r), go(g), go(b)])}`;
+  },
+  a: (name, amt) => {
+    // 变透明
+    const alpha = Math.round((1 - amt) * 255).toString(16);
+    return `${name}${alpha}`;
+  },
+};
+
+const createColor = (name: string) => {
+  const indexs = new Array(9).fill(0).map((v, i) => (i + 1) / 10);
+  function createModifiedColor(type: modifier) {
+    return indexs
+      .map((amt) => modifiers[type](name, amt))
+      .reduce((o, v, idx) => {
+        o[`${type}${(idx + 1) as amount}`] = v;
+        return o;
+      }, {} as ModifiedColor);
+  }
+  return {
+    0: name,
+    ...createModifiedColor("a"),
+    ...createModifiedColor("d"),
+    ...createModifiedColor("l"),
+  };
+};
+
+type ColorPack = ITheme &
+  ModifiedColor & {
+    0: string;
+  };
+
+export type HTheme = {
+  color: {
+    primary: ColorPack;
+    success: ColorPack;
+    warning: ColorPack;
+    error: ColorPack;
+    background: {
+      1: string;
+      2: string;
+      3: string;
+      9: string;
+    };
+    foreground: {
+      1: string;
+      2: string;
+      3: string;
+      6: string;
+      9: string;
+    };
+  };
+};
+
+// https://flatuicolors.com/palette/defo
+export const blueTheme: HTheme = {
+  color: {
+    primary: createColor("#3498db"),
+    success: createColor("#27ae60"),
+    warning: createColor("#f39c12"),
+    error: createColor("#e74c3c"),
+    background: {
+      1: "#ffffff",
+      2: "#f8f8f8",
+      3: "#eeeeee",
+      9: "#282828",
+    },
+    foreground: {
+      1: "#000000",
+      2: "#484848",
+      3: "#000000",
+      6: "#9e9e9e",
+      9: "#ffffff",
+    },
+  },
+};