@4399ywkf/cli 0.0.22 → 1.0.2

package/dist/templates/customStylish.ts

@@ -0,0 +1,189 @@
+import { GetCustomStylish, keyframes } from 'antd-style';
+
+import { LobeCustomStylish } from '@/types/customStylish';
+
+export const generateCustomStylish: GetCustomStylish<LobeCustomStylish> = ({
+  css,
+  token,
+  isDarkMode,
+}) => {
+  const gradient = keyframes`
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  `;
+
+  return {
+    active: css`
+      color: ${token.colorText};
+      background: ${token.colorFillSecondary};
+
+      &:hover {
+        color: ${token.colorText};
+        background: ${token.colorFill};
+      }
+
+      &:active {
+        color: ${token.colorText};
+        background: ${isDarkMode ? token.colorFillSecondary : token.colorFill};
+      }
+    `,
+    blur: css`
+      backdrop-filter: saturate(150%) blur(10px);
+    `,
+    blurStrong: css`
+      backdrop-filter: saturate(150%) blur(36px);
+    `,
+    bottomScrollbar: css`
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 4px;
+        background-color: transparent;
+
+        &-thumb {
+          background-color: ${token.colorFill};
+          border-radius: 4px;
+          transition: background-color 500ms ${token.motionEaseOut};
+        }
+
+        &-corner {
+          display: none;
+          width: 0;
+          height: 0;
+        }
+      }
+    `,
+    disabled: css`
+      cursor: not-allowed;
+      opacity: 0.5;
+    `,
+    gradientAnimation: css`
+      background-image: linear-gradient(
+        -45deg,
+        ${token.gold},
+        ${token.magenta},
+        ${token.geekblue},
+        ${token.cyan}
+      );
+      background-size: 400% 400%;
+      border-radius: inherit;
+      animation: 5s ${gradient} 5s ease infinite;
+    `,
+    noScrollbar: css`
+      ::-webkit-scrollbar {
+        display: none;
+        width: 0;
+        height: 0;
+        background-color: transparent;
+      }
+    `,
+    resetLinkColor: css`
+      cursor: pointer;
+      color: ${token.colorTextSecondary};
+
+      &:hover {
+        color: ${token.colorText};
+      }
+    `,
+    shadow: css`
+      box-shadow:
+        0 1px 0 -1px ${isDarkMode ? token.colorBgLayout : token.colorBorder},
+        0 1px 2px -0.5px ${isDarkMode ? token.colorBgLayout : token.colorBorder},
+        0 2px 2px -1px ${isDarkMode ? token.colorBgLayout : token.colorBorderSecondary},
+        0 3px 6px -4px ${isDarkMode ? token.colorBgLayout : token.colorBorderSecondary};
+    `,
+    variantBorderless: css`
+      background: none;
+      border: none;
+      box-shadow: none;
+
+      &:hover {
+        background: ${token.colorFillTertiary};
+      }
+
+      &:active {
+        background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary};
+      }
+    `,
+    variantBorderlessDanger: css`
+      background: none;
+      border: none;
+      box-shadow: none;
+
+      &:hover {
+        background: ${token.colorErrorBgHover};
+
+      }
+
+      &:active {
+        background: ${token.colorErrorBgActive};
+      }
+    `,
+    variantBorderlessWithoutHover: css`
+      background: none;
+      border: none;
+      box-shadow: none;
+    `,
+    variantFilled: css`
+      background: ${token.colorFillTertiary};
+
+      &:hover {
+        background: ${token.colorFillSecondary};
+      }
+
+      &:active {
+        background: ${isDarkMode ? token.colorFillTertiary : token.colorFill};
+      }
+    `,
+    variantFilledDanger: css`
+      background: ${token.colorErrorBg};
+
+      &:hover {
+        background: ${token.colorErrorBgHover};
+      }
+
+      &:active {
+        background: ${token.colorErrorBgActive};
+      }
+    `,
+    variantFilledWithoutHover: css`
+      background: ${token.colorFillTertiary};
+    `,
+    variantOutlined: css`
+      background: ${token.colorBgContainer};
+      border: 1px solid ${token.colorBorderSecondary};
+
+      &:hover {
+        background: ${token.colorBgContainer};
+        border: 1px solid ${token.colorBorder};
+      }
+
+      &:active {
+        background: ${token.colorBgContainer};
+        border: 1px solid ${token.colorBorder};
+      }
+    `,
+
+    variantOutlinedDanger: css`
+      border: 1px solid ${token.colorErrorBorder};
+
+      &:hover {
+        border: 1px solid ${token.colorErrorBorder};
+      }
+
+      &:active {
+        border: 1px solid ${token.colorErrorBorder};
+      }
+    `,
+    variantOutlinedWithoutHover: css`
+      background: ${token.colorBgContainer};
+      border: 1px solid ${token.colorBorderSecondary};
+    `,
+  };
+};

package/dist/templates/customTheme.ts

@@ -0,0 +1,70 @@
+import {
+  blue,
+  cyan,
+  geekblue,
+  gold,
+  green,
+  lime,
+  magenta,
+  orange,
+  purple,
+  red,
+  volcano,
+  yellow,
+} from '@/color/colors';
+import { mauve, olive, sage, sand, slate } from '@/color/neutrals';
+
+export const primaryColors = {
+  blue: blue.dark[9],
+  cyan: cyan.dark[9],
+  geekblue: geekblue.dark[9],
+  gold: gold.dark[9],
+  green: green.dark[9],
+  lime: lime.dark[9],
+  magenta: magenta.dark[9],
+  orange: orange.dark[9],
+  purple: purple.dark[9],
+  red: red.dark[9],
+  volcano: volcano.dark[9],
+  yellow: yellow.dark[9],
+};
+
+export type PrimaryColorsObj = typeof primaryColors;
+export type PrimaryColors = keyof PrimaryColorsObj;
+export const primaryColorsSwatches = [
+  primaryColors.red,
+  primaryColors.orange,
+  primaryColors.gold,
+  primaryColors.yellow,
+  primaryColors.lime,
+  primaryColors.green,
+  primaryColors.cyan,
+  primaryColors.blue,
+  primaryColors.geekblue,
+  primaryColors.purple,
+  primaryColors.magenta,
+  primaryColors.volcano,
+];
+export const neutralColors = {
+  mauve: mauve.dark[9],
+  olive: olive.dark[9],
+  sage: sage.dark[9],
+  sand: sand.dark[9],
+  slate: slate.dark[9],
+};
+export const neutralColorsSwatches = [
+  neutralColors.mauve,
+  neutralColors.slate,
+  neutralColors.sage,
+  neutralColors.olive,
+  neutralColors.sand,
+];
+
+export type NeutralColorsObj = typeof neutralColors;
+export type NeutralColors = keyof NeutralColorsObj;
+
+export const findCustomThemeName = (type: 'primary' | 'neutral', value: string) => {
+  const res = type === 'primary' ? primaryColors : neutralColors;
+  const result = Object.entries(res).find((item) => item[1] === value);
+  return result?.[0];
+};

package/dist/templates/customToken.ts

@@ -0,0 +1,93 @@
+import { GetCustomToken } from "antd-style";
+import { AliasToken } from "antd/es/theme/interface";
+import { camelCase } from "lodash-es";
+import { mix } from "polished";
+
+import { colorScales } from "@/color/colors";
+import type { ColorScaleItem } from "@/color/types";
+import type { LobeCustomToken } from "@/types/customToken";
+
+const generateColorPalette = ({
+  name,
+  scale,
+  appearance,
+}: {
+  appearance: "light" | "dark";
+  name: string;
+  scale: ColorScaleItem;
+}) => {
+  const isDarkMode = appearance === "dark";
+  return {
+    [`${name}Fill`]: scale[`${appearance}A`][isDarkMode ? 3 : 4],
+    [`${name}FillSecondary`]: scale[`${appearance}A`][isDarkMode ? 2 : 3],
+    [`${name}FillTertiary`]: scale[`${appearance}A`][isDarkMode ? 1 : 2],
+    [`${name}FillQuaternary`]: scale[`${appearance}A`][isDarkMode ? 0 : 1],
+    [`${name}Bg`]: scale[`${appearance}A`][1],
+    [`${name}BgHover`]: scale[`${appearance}A`][2],
+    [`${name}Border`]: scale[appearance][4],
+    [`${name}BorderSecondary`]: scale[appearance][3],
+    [`${name}BorderHover`]: scale[appearance][isDarkMode ? 5 : 3],
+    [`${name}Hover`]: scale[appearance][isDarkMode ? 10 : 8],
+    [`${name}`]: scale[appearance][9],
+    [`${name}Active`]: scale[appearance][isDarkMode ? 7 : 10],
+    [`${name}TextHover`]: scale[`${appearance}A`][isDarkMode ? 10 : 8],
+    [`${name}Text`]: scale[`${appearance}A`][9],
+    [`${name}TextActive`]: scale[`${appearance}A`][isDarkMode ? 7 : 10],
+  };
+};
+
+const generateCustomColorPalette = ({
+  name,
+  scale,
+  appearance,
+}: {
+  appearance: "light" | "dark";
+  name: string;
+  scale: ColorScaleItem;
+}): Partial<AliasToken> => {
+  const colorStepPalette: { [key: string]: string } = {};
+  // @ts-ignore
+  for (const [index, color] of scale[appearance].entries()) {
+    if (index === 0 || index === 12) continue;
+
+    colorStepPalette[`${name}${index}`] = color;
+  }
+  // @ts-ignore
+  for (const [index, color] of scale[`${appearance}A`].entries()) {
+    if (index === 0 || index === 12) continue;
+
+    colorStepPalette[`${name}${index}A`] = color;
+  }
+
+  return {
+    ...colorStepPalette,
+    ...generateColorPalette({ appearance, name, scale }),
+  };
+};
+
+export const generateCustomToken: GetCustomToken<LobeCustomToken> = ({
+  isDarkMode,
+  token,
+}) => {
+  let colorCustomToken: any = {};
+
+  for (const [type, scale] of Object.entries(colorScales)) {
+    colorCustomToken = {
+      ...colorCustomToken,
+      ...generateCustomColorPalette({
+        appearance: isDarkMode ? "dark" : "light",
+        name: camelCase(type),
+        scale,
+      }),
+    };
+  }
+
+  return {
+    ...colorCustomToken,
+    colorBgContainerSecondary: mix(
+      0.5,
+      token.colorBgLayout,
+      token.colorBgContainer
+    ),
+  };
+};

package/dist/templates/cyan.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const cyan: ColorScaleItem = {
+  dark: [
+    '#000503',
+    '#00221c',
+    '#003930',
+    '#005245',
+    '#006c5b',
+    '#008772',
+    '#2fa28a',
+    '#55bca4',
+    '#75d7be',
+    '#95f3d9',
+    '#bdf7e4',
+    '#dffcf0',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(0, 250, 150, 0.02)',
+    'rgba(0, 243, 200, 0.14)',
+    'rgba(0, 248, 209, 0.23)',
+    'rgba(0, 248, 209, 0.33)',
+    'rgba(0, 251, 212, 0.43)',
+    'rgba(0, 255, 215, 0.53)',
+    'rgba(73, 253, 216, 0.64)',
+    'rgba(115, 254, 222, 0.74)',
+    'rgba(138, 253, 224, 0.85)',
+    'rgba(155, 253, 226, 0.96)',
+    'rgba(195, 255, 235, 0.97)',
+    'rgba(225, 255, 242, 0.99)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#f9fffb',
+    '#effff8',
+    '#e3fff4',
+    '#d8fef0',
+    '#ccfcec',
+    '#c0fae8',
+    '#b3f8e3',
+    '#a5f6de',
+    '#95f3d9',
+    '#2fa28a',
+    '#005245',
+    '#000503',
+  ],
+  lightA: [
+    'rgba(255, 255, 255, 0.01)',
+    'rgba(55, 255, 122, 0.03)',
+    'rgba(26, 255, 155, 0.07)',
+    'rgba(0, 255, 155, 0.11)',
+    'rgba(11, 249, 161, 0.16)',
+    'rgba(0, 240, 160, 0.2)',
+    'rgba(3, 235, 163, 0.25)',
+    'rgba(2, 232, 162, 0.3)',
+    'rgba(5, 230, 163, 0.36)',
+    'rgba(3, 226, 165, 0.42)',
+    'rgba(1, 142, 112, 0.82)',
+    '#005245',
+    '#000503',
+  ],
+};
+
+export default cyan;

package/dist/templates/dark.ts

@@ -0,0 +1,60 @@
+import { AliasToken } from 'antd/es/theme/interface';
+
+import { blue, gold, gray, lime, primary, red } from '@/color/colors';
+
+import { generateColorNeutralPalette, generateColorPalette } from '../generateColorPalette';
+
+const primaryToken = generateColorPalette({
+  appearance: 'dark',
+  scale: primary,
+  type: 'Primary',
+});
+
+const neutralToken = generateColorNeutralPalette({
+  appearance: 'dark',
+  scale: gray,
+});
+
+const successToken = generateColorPalette({
+  appearance: 'dark',
+  scale: lime,
+  type: 'Success',
+});
+
+const warningToken = generateColorPalette({
+  appearance: 'dark',
+  scale: gold,
+  type: 'Warning',
+});
+
+const errorToken = generateColorPalette({
+  appearance: 'dark',
+  scale: red,
+  type: 'Error',
+});
+
+const infoToken = generateColorPalette({
+  appearance: 'dark',
+  scale: blue,
+  type: 'Info',
+});
+
+const darkBaseToken: Partial<AliasToken> = {
+  ...primaryToken,
+  ...neutralToken,
+  ...successToken,
+  ...warningToken,
+  ...errorToken,
+  ...infoToken,
+
+  boxShadow: '0 20px 20px -8px rgba(0, 0, 0, 0.24)',
+  boxShadowSecondary: '0 8px 16px -4px rgba(0, 0, 0, 0.2)',
+  boxShadowTertiary: '0 3px 1px -1px rgba(26, 26, 26, 0.06)',
+  colorLink: infoToken.colorInfoText,
+  colorLinkActive: infoToken.colorInfoTextActive,
+
+  colorLinkHover: infoToken.colorInfoTextHover,
+  colorTextLightSolid: neutralToken.colorBgLayout,
+};
+
+export default darkBaseToken;

package/dist/templates/darkAlgorithm.ts

@@ -0,0 +1,47 @@
+import { MappingAlgorithm } from "antd/es/theme/interface";
+
+import { colorScales } from "@/color/colors";
+import { neutralColorScales } from "@/color/neutrals";
+import type { ColorScaleItem } from "@/color/types";
+
+import { NeutralColors, PrimaryColors } from "../../customTheme";
+import {
+  generateColorNeutralPalette,
+  generateColorPalette,
+} from "../generateColorPalette";
+import darkBaseToken from "../token/dark";
+
+export const darkAlgorithm: MappingAlgorithm = (seedToken, mapToken) => {
+  const primaryColor = (seedToken as any).primaryColor as PrimaryColors;
+  const neutralColor = (seedToken as any).neutralColor as NeutralColors;
+
+  let primaryTokens = {};
+  let neutralTokens = {};
+
+  // generate primary color Token with colorPrimary
+  const primaryScale: ColorScaleItem = colorScales[primaryColor];
+
+  if (primaryScale) {
+    primaryTokens = generateColorPalette({
+      appearance: "dark",
+      scale: primaryScale,
+      type: "Primary",
+    });
+  }
+
+  // generate neutral color Token with colorBgBase
+  const neutralScale = neutralColorScales[neutralColor];
+  if (neutralScale) {
+    neutralTokens = generateColorNeutralPalette({
+      appearance: "dark",
+      scale: neutralScale,
+    });
+  }
+
+  return {
+    ...mapToken!,
+    ...darkBaseToken,
+    ...primaryTokens,
+    ...neutralTokens,
+  };
+};