@akinon/ui-theme 0.5.0 → 0.7.0

package/dist/esm/theme.js

@@ -49,6 +49,91 @@ export const theme = {
         fontSize: fontSize * 0.875
     },
     components: {
+        Button: {
+            // type: primary
+            colorPrimary: colors.azure['500'],
+            colorPrimaryHover: colors.azure['600'],
+            colorPrimaryActive: colors.azure['700'],
+            colorPrimaryText: colors.neutral['50'],
+            primaryShadow: 'unset',
+            // type: default (secondary)
+            defaultBg: colors.neutral['50'],
+            defaultColor: colors.azure['500'],
+            defaultHoverBg: colors.neutral['100'],
+            defaultHoverColor: colors.azure['500'],
+            defaultActiveBg: colors.neutral['50'],
+            defaultActiveColor: colors.azure['500'],
+            defaultBorderColor: colors.azure['500'],
+            defaultShadow: 'unset',
+            defaultBgSm: colors.gray['750'],
+            defaultBgSmHover: colors.gray['800'],
+            // prop: danger
+            colorError: colors.red['450'],
+            colorErrorHover: colors.red['500'],
+            colorErrorActive: colors.red['600'],
+            colorErrorBorder: colors.red['500'],
+            dangerShadow: 'unset',
+            colorErrorBgSM: colors.red['425'],
+            colorErrorBgSMHover: colors.red['450'],
+            colorErrorSMHover: colors.neutral['50'],
+            // type: success
+            colorSuccessBg: colors.green['500'],
+            colorSuccessBorder: colors.green['500'],
+            colorSuccessHover: colors.green['600'],
+            colorSuccessActive: colors.green['700'],
+            // type: warning
+            colorWarningBg: colors.neutral['50'],
+            colorWarningBorder: colors.neutral['50'],
+            colorWarningHover: colors.neutral['100'],
+            colorWarningActive: colors.neutral['50'],
+            colorWarningText: colors.orange['450'],
+            // prop: disabled
+            colorBgContainerDisabled: colors.neutral['100'],
+            colorTextDisabled: colors.neutral['350'],
+            borderColorDisabled: colors.neutral['350'],
+            // prop: ghost
+            defaultGhostBorderColor: 'transparent',
+            defaultGhostColor: colors.azure['500'],
+            // all buttons
+            contentFontSizeSM: fontSize * 0.75,
+            borderRadiusSM: 11,
+            paddingBlockSM: 1,
+            paddingInlineSM: 20,
+            colorText: colors.neutral['50'],
+            colorTextHover: colors.neutral['50'],
+            contentLineHeightSM: 1,
+            controlHeight: 40,
+            borderRadius: 5,
+            paddingBlock: 10,
+            paddingInline: 45,
+            contentLineHeight: 1,
+            fontWeight: 600
+        },
+        Checkbox: {
+            colorPrimary: colors.ebonyClay['25'],
+            colorBgContainer: colors.gray['150'],
+            colorText: colors.neutral['350'],
+            colorChecked: colors.neutral['50'],
+            controlInteractiveSize: 20
+        },
+        Badge: {
+            colorText: colors.neutral['50']
+        },
+        Radio: {
+            radioSize: 14,
+            dotSize: 5,
+            colorPrimary: colors.azure['500'],
+            colorBgContainer: colors.gray['150'],
+            colorText: colors.neutral['350'],
+            colorChecked: colors.neutral['50'],
+            colorBorder: colors.neutral['550'],
+            buttonBg: colors.ebonyClay['600'],
+            buttonColor: colors.neutral['50'],
+            buttonSolidCheckedBg: colors.ebonyClay['600'],
+            buttonSolidCheckedColor: colors.neutral['50'],
+            buttonSolidCheckedBorder: colors.azure['500'],
+            borderRadiusSM: 100
+        },
         Layout: {
             headerBg: colors.ebonyClay['500'],
             siderBg: colors.ebonyClay['500']
@@ -69,13 +154,82 @@ export const theme = {
         },
         Breadcrumb: {
             fontSize: fontSize * 0.625,
-            lastItemColor: colors.azure['500']
+            itemColor: colors.azure['500'],
+            lastItemColor: colors.gray['500'],
+            paddingBottom: fontSize * 0.5,
+            borderBottom: '1px solid var(--color-gray-900)',
+            paddingLeft: 20,
+            paddingRight: 20,
+            marginLeft: 8,
+            marginRight: 8,
+            fontWeight: 600,
+            lineHeight: 1.5,
+            separatorColor: colors.azure['500'],
+            letterSpacing: fontSize * 0.03,
+            marginInline: 0,
+            height: 'auto'
+        },
+        Tag: {
+            defaultColorSuccess: colors.green['951'],
+            defaultBorderColorSuccess: colors.green['952'],
+            defaultBgSuccess: colors.green['953'],
+            defaultColorWaiting1: colors.orange['951'],
+            defaultBorderColorWaiting1: colors.orange['952'],
+            defaultBgWaiting1: colors.orange['953'],
+            defaultColorWaiting2: colors.blue['951'],
+            defaultBorderColorWaiting2: colors.blue['952'],
+            defaultBgWaiting2: colors.blue['953'],
+            defaultColorWaiting3: colors.purple['951'],
+            defaultBorderColorWaiting3: colors.purple['952'],
+            defaultBgWaiting3: colors.purple['953'],
+            defaultColorFailed: colors.red['951'],
+            defaultBorderColorFailed: colors.red['450'],
+            defaultBgFailed: colors.red['952'],
+            borderRadius: 5,
+            fontSize: fontSize * 0.8125,
+            paddingLeft: 15,
+            paddingRight: 15,
+            fontSizeClose: fontSize * 0.6875,
+            fontWeight: 500
+        },
+        Tooltip: {
+            bgColor: colors.ebonyClay['951']
+        },
+        Flex: {},
+        Spin: {},
+        Alert: {
+            defaultColorSuccess: colors.green['951'],
+            defaultBorderColorSuccess: colors.green['952'],
+            defaultBgSuccess: colors.green['953'],
+            defaultColorWaiting1: colors.orange['951'],
+            defaultBorderColorWaiting1: colors.orange['952'],
+            defaultBgWaiting1: colors.orange['953'],
+            defaultColorWaiting2: colors.blue['951'],
+            defaultBorderColorWaiting2: colors.blue['952'],
+            defaultBgWaiting2: colors.blue['953'],
+            defaultColorWaiting3: colors.purple['951'],
+            defaultBorderColorWaiting3: colors.purple['952'],
+            defaultBgWaiting3: colors.purple['953'],
+            defaultColorFailed: colors.red['951'],
+            defaultBorderColorFailed: colors.red['450'],
+            defaultBgFailed: colors.red['952']
+        },
+        Grid: {
+            rowMaxWidth: 1368,
+            gutter: 24
         },
         Card: {
             colorBgContainer: colors.ebonyClay['450'],
             colorTextDescription: colors.neutral['100'],
             headerFontSize: fontSize * 1.25,
-            fontSize: fontSize * 0.875
+            fontSize: fontSize * 0.875,
+            borderRadiusLG: 10,
+            paddingLG: 40,
+            padding: 24,
+            headerHeight: fontSize * 1.25,
+            lineHeight: 1,
+            colorBorderSecondary: colors.ebonyClay['550'],
+            lineWidth: 2
         },
         Collapse: {
             headerPadding: '0 0 12px',
@@ -87,7 +241,12 @@ export const theme = {
         Form: {
             itemMarginBottom: 16,
             labelColor: colors.neutral['100'],
-            verticalLabelPadding: 4
+            verticalLabelPadding: '7px 0',
+            // TODO: contribute to antd to use normal and percentage
+            lineHeight: 'normal',
+            fontWeight: 600,
+            colorError: colors.red['425'],
+            verticalErrorPadding: '7px 0'
         },
         Pagination: {
             colorText: colors.ebonyClay['950'],
@@ -111,13 +270,104 @@ export const theme = {
             colorBgContainer: colors.ebonyClay['475'],
             fontSizeLG: fontSize * 0.875,
             colorBorder: colors.ebonyClay['550'],
-            lineWidth: 2
+            lineWidth: 2,
+            activeShadow: 'unset',
+            errorActiveShadow: 'unset',
+            warningActiveShadow: 'unset',
+            fontWeight: 600,
+            colorBgContainerDisabled: colors.gray['850'],
+            colorTextDisabled: colors.ebonyClay['375']
         },
         InputNumber: {
             colorBgContainer: colors.ebonyClay['475'],
             fontSizeLG: fontSize * 0.875,
             colorBorder: colors.ebonyClay['550'],
             lineWidth: 2
+        },
+        Modal: {
+            titleFontSize: fontSize * 1.25,
+            padding: '20px 35px',
+            fontWeight: 500,
+            borderBottom: `1px solid ${colors.blue['954']}`,
+            footerPadding: '0 35px 20px 35px',
+            closeIconColor: colors.neutral['100'],
+            contentPadding: 0,
+            footerMarginTop: 0,
+            closeTop: 20,
+            closeRight: 27,
+            headerMarginBottom: 0,
+            badgeColorContent: '',
+            badgeColorTop: 27,
+            badgeColorLeft: 0,
+            badgeColorWidth: 4,
+            badgeColorHeight: 16,
+            badgeColorPosition: 'absolute',
+            badgeColorBackgroundColor: colors.red['425']
+        },
+        Progress: {
+            strokeColor: colors.green['100'],
+            trailColor: colors.ebonyClay['850'],
+            borderRadius: '0',
+            height: '18px !important',
+            successBgColor: 'repeating-linear-gradient(60deg, rgba(36, 180, 19, 1) 0, rgba(36, 180, 19, 1) 5px, rgba(72, 192, 62, 1) 5px, rgba(72, 192, 62, 1) 10px) !important'
+        },
+        Steps: {
+            zero: '0 !important',
+            auto: 'auto !important',
+            none: 'none !important',
+            full: '100% !important',
+            flex: 'flex !important',
+            rowGap: '10px',
+            iconWidthHeight: '38px !important',
+            iconSize: '18px !important',
+            paddingInlineEnd: '16px',
+            tailTop: '16px',
+            tailHeight: '3px',
+            titleFontSize: '14px !important',
+            iconColor: 'white',
+            tailColor: 'linear-gradient(to right, #343639 50%, transparent 50%) !important',
+            tailLastChildColor: 'linear-gradient(to right, #4482ff 50%, transparent 50%) !important',
+            tailFirstChildColor: 'linear-gradient(to right, transparent 50%, #4482ff 50%) !important',
+            tailProcessFirstChildColor: 'linear-gradient(to right, transparent 50%, #3b404c 50%) !important',
+            tailProcessColor: 'linear-gradient(to right, #4482ff 50%, #3b404c 50%) !important',
+            tailWaitLastChildColor: 'linear-gradient(to right, #3b404c 50%, transparent 50%) !important',
+            finishIconBgColor: `${colors.green['952']} !important`,
+            finishTailColor: `${colors.azure['500']} !important`,
+            processIconBgColor: `${colors.orange['425']} !important`,
+            waitIconBgColor: `${colors.neutral['50']} !important`,
+            waitIconColor: `${colors.ebonyClay['951']} !important`,
+            waitTitleColor: `${colors.neutral['50']} !important`,
+            waitTailColor: `${colors.gray['900']} !important`,
+            manyItemsTransform: 'rotate(-40deg)',
+            manyItemsWidth: '90px',
+            manyItemsHeight: '80px',
+            manyItemsWhiteSpace: 'break-spaces',
+            manyItemsMarginInlineStart: '40px',
+            manyItemsIconWidthHeight: '22px !important',
+            manyItemsTailHeight: '4px',
+            manyItemsTailBottom: '10px'
+        },
+        Switch: {
+            colorPrimary: colors.green['952'],
+            colorPrimaryHover: colors.green['951'],
+            colorPrimaryActive: colors.green['954'],
+            trackHeight: 26,
+            trackMinWidth: 57,
+            handleSize: 22,
+            colorTextQuaternary: colors.gray['250'],
+            colorTextTertiary: colors.gray['300'],
+            handleBg: colors.neutral['80'],
+            handleShadow: '1px 1px 2px 0 rgba(156, 169, 194, 0.5)',
+            fontSizeSM: fontSize * 0.5625,
+            innerMinMargin: 0
+        },
+        Divider: {
+            colorSplit: colors.ebonyClay['175'],
+            colorText: colors.gray['500'],
+            colorTextHeading: colors.gray['500'],
+            fontWeight: 500,
+            textPaddingInline: 8,
+            margin: 48
         }
     }
 };
@@ -138,8 +388,8 @@ export const useToken = antdTheme.useToken;
  * --color-{object_key}-{object_key}: {color_value};
  */
 export const getCssVariables = () => {
-    const { colors } = theme;
-    const prefix = '--color';
+    const { colors, token } = theme;
+    let prefix = '--color';
     const result = {};
     for (const [colorType, colorObject] of Object.entries(colors)) {
         for (const [colorShade, colorValue] of Object.entries(colorObject)) {
@@ -147,5 +397,14 @@ export const getCssVariables = () => {
             result[variableName] = colorValue;
         }
     }
+    prefix = '--token';
+    if (token) {
+        for (const [key, value] of Object.entries(token)) {
+            const variableName = `${prefix}-${key}`;
+            if (typeof value === 'string' || typeof value === 'number') {
+                result[variableName] = value;
+            }
+        }
+    }
     return result;
 };

package/dist/esm/types.d.ts

@@ -0,0 +1,238 @@
+import { ComponentToken as AntdAlertToken } from 'antd/lib/alert/style';
+import { ComponentToken as AntdBadgeToken } from 'antd/lib/badge/style';
+import { ComponentToken as AntdBreadcrumbToken } from 'antd/lib/breadcrumb/style';
+import { ComponentToken as AntdButtonToken } from 'antd/lib/button/style';
+import { ComponentToken as AntdCheckboxToken } from 'antd/lib/checkbox/style';
+import { ComponentToken as AntdFlexToken } from 'antd/lib/flex/style';
+import { ComponentToken as AntdGridToken } from 'antd/lib/grid/style';
+import { ComponentToken as AntdInputToken } from 'antd/lib/input/style';
+import { ComponentToken as AntdLayoutToken } from 'antd/lib/layout/style';
+import { ComponentToken as AntdModalToken } from 'antd/lib/modal/style';
+import { ComponentToken as AntdProgressToken } from 'antd/lib/progress/style';
+import { ComponentToken as AntdRadioToken } from 'antd/lib/radio/style';
+import { ComponentToken as AntdSpinToken } from 'antd/lib/spin/style';
+import { ComponentToken as AntdStepsToken } from 'antd/lib/steps/style';
+import { ComponentToken as AntdTagToken } from 'antd/lib/tag/style';
+import { GlobalToken as AntdGlobalToken } from 'antd/lib/theme/interface';
+import { AliasToken } from 'antd/lib/theme/internal';
+import { ComponentToken as AntdTooltipToken } from 'antd/lib/tooltip/style';
+
+type PositionTypes = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+
+export type ButtonToken = AntdButtonToken &
+  AliasToken & {
+    colorText: string;
+    colorTextHover: string;
+    defaultBgSm: string;
+    defaultBgSmHover: string;
+    colorErrorBgSM: string;
+    colorErrorBgSMHover: string;
+    colorErrorSMHover: string;
+  };
+
+export type CheckboxToken = AntdCheckboxToken &
+  AliasToken & {
+    colorChecked: string;
+  };
+
+export type RadioToken = AntdRadioToken &
+  AliasToken & {
+    colorChecked: string;
+    buttonSolidCheckedBorder: string;
+  };
+
+export type BadgeToken = AntdBadgeToken &
+  AliasToken & {
+    colorText: string;
+  };
+
+export type InputToken = AntdInputToken &
+  AliasToken & {
+    fontWeight: number;
+  };
+
+export type BreadcrumbToken = AntdBreadcrumbToken &
+  AliasToken & {
+    paddingBottom: number;
+    borderBottom: string;
+    paddingLeft: number;
+    paddingRight: number;
+    marginLeft: number;
+    marginRight: number;
+    fontWeight: number;
+    letterSpacing: number;
+    borderBottom: string;
+    marginInline: number;
+    height: number | string;
+  };
+
+export type TagToken = AntdTagToken &
+  AliasToken & {
+    defaultColorSuccess: string;
+    defaultBorderColorSuccess: string;
+    defaultBgSuccess: string;
+    defaultColorWaiting1: string;
+    defaultBorderColorWaiting1: string;
+    defaultBgWaiting1: string;
+    defaultColorWaiting2: string;
+    defaultBorderColorWaiting2: string;
+    defaultBgWaiting2: string;
+    defaultColorWaiting3: string;
+    defaultBorderColorWaiting3: string;
+    defaultBgWaiting3: string;
+    defaultColorFailed: string;
+    defaultBorderColorFailed: string;
+    defaultBgFailed: string;
+    fontSize: number;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    fontSizeClose: number;
+    fontWeight: number;
+  };
+
+export type TooltipToken = AntdTooltipToken &
+  AliasToken & {
+    bgColor: string;
+  };
+
+export type FlexToken = AntdFlexToken & AliasToken;
+
+export type GridToken = AntdGridToken &
+  AliasToken & {
+    rowMaxWidth: number;
+    gutter: number;
+  };
+
+export type LayoutToken = AntdLayoutToken & AliasToken;
+
+export type SpinToken = AntdSpinToken & AliasToken;
+
+export type ModalToken = AntdModalToken &
+  AliasToken & {
+    padding: number | string;
+    fontWeight: number;
+    borderBottom: string;
+    footerPadding: string;
+    closeIconColor: string;
+    contentPadding: string;
+    footerMarginTop: string;
+    closeTop: string;
+    closeRight: string;
+    headerMarginBottom: number;
+    badgeColorContent: string;
+    badgeColorTop: number;
+    badgeColorLeft: number;
+    badgeColorWidth: number;
+    badgeColorHeight: number;
+    badgeColorPosition: PositionTypes;
+    badgeColorBackgroundColor: string;
+  };
+
+export type AlertToken = AntdAlertToken &
+  AliasToken & {
+    defaultColorSuccess: string;
+    defaultBorderColorSuccess: string;
+    defaultBgSuccess: string;
+    defaultColorWaiting1: string;
+    defaultBorderColorWaiting1: string;
+    defaultBgWaiting1: string;
+    defaultColorWaiting2: string;
+    defaultBorderColorWaiting2: string;
+    defaultBgWaiting2: string;
+    defaultColorWaiting3: string;
+    defaultBorderColorWaiting3: string;
+    defaultBgWaiting3: string;
+    defaultColorFailed: string;
+    defaultBorderColorFailed: string;
+    defaultBgFailed: string;
+  };
+
+export type ProgressToken = AntdProgressToken &
+  AliasToken & {
+    strokeColor: string;
+    trailColor: string;
+    borderRadius: string;
+    height: string;
+    successBgColor: string;
+  };
+
+export type StepsToken = AntdStepsToken &
+  AliasToken & {
+    zero?: string;
+    auto?: string;
+    none?: string;
+    full?: string;
+    flex?: string;
+    rowGap?: string;
+    iconWidthHeight?: string;
+    iconSize?: string;
+    paddingInlineEnd?: string;
+    tailTop?: string;
+    tailHeight?: string;
+    titleFontSize?: string;
+    iconColor?: string;
+    tailColor?: string;
+    tailLastChildColor?: string;
+    tailFirstChildColor?: string;
+    tailProcessFirstChildColor?: string;
+    tailProcessColor?: string;
+    tailWaitLastChildColor?: string;
+    finishIconBgColor?: string;
+    finishTailColor?: string;
+    processIconBgColor?: string;
+    waitIconBgColor?: string;
+    waitIconColor?: string;
+    waitTitleColor?: string;
+    waitTailColor?: string;
+    manyItemsTransform?: string;
+    manyItemsWidth?: string;
+    manyItemsHeight?: string;
+    manyItemsWhiteSpace?: string;
+    manyItemsMarginInlineStart?: string;
+    manyItemsIconWidthHeight?: string;
+    manyItemsTailHeight?: string;
+    manyItemsTailBottom?: string;
+  };
+
+export type FormToken = AntdFormToken &
+  AliasToken & {
+    lineHeight: number | string;
+    fontWeight: number;
+    verticalErrorPadding: string;
+  };
+
+export type GlobalToken = AntdGlobalToken & {
+  Button: ButtonToken;
+  Checkbox: CheckboxToken;
+  Radio: RadioToken;
+  Input: InputToken;
+  Breadcrumb: BreadcrumbToken;
+  Tag: TagToken;
+  Tooltip: TooltipToken;
+  Flex: FlexToken;
+  Grid: GridToken;
+  Layout: LayoutToken;
+  Spin: SpinToken;
+  Modal: ModalToken;
+  Alert: AlertToken;
+  Badge: BadgeToken;
+  Progress: ProgressToken;
+  Steps: StepsToken;
+  Form: FormToken;
+  Divider: DividerToken;
+};
+
+export type DividerToken = AntdDividerToken &
+  AliasToken & {
+    fontWeight: number;
+  };
+
+/**
+ * This is a type that is used to prevent the use of custom styles.
+ * Type name joke is stolen from React's internal props.
+ */
+export type DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE = {
+  [key: string]: never;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-theme",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "private": false,
   "description": "Akinon UI's default theme values.",
   "type": "module",
@@ -17,9 +17,7 @@
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/eslint-config": "0.1.0",
-    "@akinon/typescript-config": "0.2.0"
+    "@akinon/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -39,12 +37,8 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }