feat: add dark theme (IDuxFE#1751)

* feat: add dark theme * build: update eslint and prettier dependencies
sallerli1 · Nov 28, 2023 · 411ed2b · 411ed2b
1 parent ee11d29
commit 411ed2b
Show file tree

Hide file tree

Showing 224 changed files with 5,034 additions and 1,534 deletions.
diff --git a/package.json b/package.json
@@ -97,13 +97,13 @@
     "codecov": "^3.8.3",
     "cz-git": "^1.7.1",
     "esbuild": "^0.15.18",
-    "eslint": "^8.48.0",
+    "eslint": "^8.54.0",
     "eslint-import-resolver-custom-alias": "^1.3.2",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsdoc": "^46.5.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsdoc": "^46.9.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-vue": "^9.18.1",
     "fast-glob": "^3.3.1",
     "figlet": "^1.6.0",
     "fs-extra": "^10.1.0",
@@ -124,7 +124,7 @@
     "parse5": "^7.1.2",
     "postcss": "^8.4.29",
     "postcss-less": "^6.0.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "prismjs": "^1.29.0",
     "resolve-bin": "^1.0.1",
     "rimraf": "^4.4.1",

diff --git a/packages/cdk/utils/src/props.ts b/packages/cdk/utils/src/props.ts
@@ -32,22 +32,22 @@ type InnerOptionalKeys<T> = Exclude<keyof T, InnerRequiredKeys<T>>
 type InferPropType<T> = [T] extends [null]
   ? any // null & true would fail to infer
   : [T] extends [{ type: null | true }]
-  ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
-  : [T] extends [ObjectConstructor | { type: ObjectConstructor }]
-  ? Record<string, any>
-  : [T] extends [BooleanConstructor | { type: BooleanConstructor }]
-  ? boolean
-  : [T] extends [DateConstructor | { type: DateConstructor }]
-  ? Date
-  : [T] extends [(infer U)[] | { type: (infer U)[] }]
-  ? U extends DateConstructor
-    ? Date | InferPropType<U>
-    : InferPropType<U>
-  : [T] extends [Prop<infer V, infer D>]
-  ? unknown extends V
-    ? IfAny<V, V, D>
-    : V
-  : T
+    ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
+    : [T] extends [ObjectConstructor | { type: ObjectConstructor }]
+      ? Record<string, any>
+      : [T] extends [BooleanConstructor | { type: BooleanConstructor }]
+        ? boolean
+        : [T] extends [DateConstructor | { type: DateConstructor }]
+          ? Date
+          : [T] extends [(infer U)[] | { type: (infer U)[] }]
+            ? U extends DateConstructor
+              ? Date | InferPropType<U>
+              : InferPropType<U>
+            : [T] extends [Prop<infer V, infer D>]
+              ? unknown extends V
+                ? IfAny<V, V, D>
+                : V
+              : T
 
 export type ExtractPublicPropTypes<O> = {
   -readonly [K in keyof Pick<O, PublicRequiredKeys<O>>]: InferPropType<O[K]>

diff --git a/packages/components/_private/selector/style/index.less b/packages/components/_private/selector/style/index.less
@@ -122,9 +122,11 @@
 
   &-searchable &-content,
   &-allow-input &-content {
+    color: var(--ix-color-text);
     cursor: text;
 
     .@{selector-prefix}-input-inner {
+      color: var(--ix-color-text);
       cursor: auto;
     }
   }
@@ -135,6 +137,7 @@
     cursor: not-allowed;
 
     .@{selector-prefix}-input-inner {
+      color: var(--ix-color-text-disabled);
       cursor: not-allowed;
     }
   }

diff --git a/packages/components/_private/selector/style/multiple.less b/packages/components/_private/selector/style/multiple.less
@@ -99,7 +99,7 @@
   }
   &.@{selector-prefix}-disabled .@{selector-prefix}-item-disabled {
     color: var(--ix-color-text-disabled);
-    border-color: var(--ix-color-border-secondary);
+    border-color: var(--ix-color-border);
     cursor: not-allowed;
   }
 

diff --git a/packages/components/_private/trigger/style/index.less b/packages/components/_private/trigger/style/index.less
@@ -76,7 +76,7 @@
   }
 
   &-suffix {
-    color: var(--ix-color-icon);
+    color: var(--ix-color-icon-info);
   }
 
   &-clear-icon {

diff --git a/packages/components/alert/theme/dark.css b/packages/components/alert/theme/dark.css
@@ -0,0 +1,10 @@
+/* ------ alert css variables ------ */
+:root {
+  --ix-alert-height: 32px;
+  --ix-alert-border-radius: 2px;
+  --ix-alert-success-bg-color: rgba(64, 198, 149, 0.2);
+  --ix-alert-info-bg-color: rgba(64, 131, 232, 0.2);
+  --ix-alert-warning-bg-color: rgba(253, 170, 29, 0.2);
+  --ix-alert-error-bg-color: rgba(232, 81, 76, 0.2);
+  --ix-alert-offline-bg-color: rgba(128, 137, 153, 0.2);
+}
diff --git a/packages/components/anchor/theme/dark.css b/packages/components/anchor/theme/dark.css
@@ -0,0 +1,5 @@
+/* ------ anchor css variables ------ */
+:root {
+  --ix-anchor-ink-ball-width: 2px;
+  --ix-anchor-ink-ball-height: 16px;
+}
diff --git a/packages/components/avatar/theme/dark.css b/packages/components/avatar/theme/dark.css
@@ -0,0 +1,7 @@
+/* ------ avatar css variables ------ */
+:root {
+  --ix-avatar-size-sm: 24px;
+  --ix-avatar-size-md: 32px;
+  --ix-avatar-size-lg: 40px;
+  --ix-avatar-border-radius-square: 2px;
+}
diff --git a/packages/components/back-top/style/index.less b/packages/components/back-top/style/index.less
@@ -12,6 +12,7 @@
   z-index: 10;
   border-radius: 50%;
   box-shadow: var(--ix-back-top-box-shadow);
+  border: var(--ix-back-top-border-width) var(--ix-back-top-border-type) var(--ix-back-top-border-color);
   text-align: center;
   cursor: pointer;
   transition: all var(--ix-motion-duration-fast);

diff --git a/packages/components/back-top/theme/dark.css b/packages/components/back-top/theme/dark.css
@@ -0,0 +1,13 @@
+/* ------ back-top css variables ------ */
+:root {
+  --ix-back-top-size-lg: 64px;
+  --ix-back-top-size-md: 48px;
+  --ix-back-top-size-sm: 40px;
+  --ix-back-top-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
+  --ix-back-top-color: #173b7a;
+  --ix-back-top-color-hover: #4083e8;
+  --ix-back-top-bg-color: #0a0c0f;
+  --ix-back-top-border-width: 1px;
+  --ix-back-top-border-type: solid;
+  --ix-back-top-border-color: #1f2329;
+}
diff --git a/packages/components/back-top/theme/default.css b/packages/components/back-top/theme/default.css
@@ -7,4 +7,7 @@
   --ix-back-top-color: #96c7ff;
   --ix-back-top-color-hover: #1c6eff;
   --ix-back-top-bg-color: #ffffff;
+  --ix-back-top-border-width: 0;
+  --ix-back-top-border-type: solid;
+  --ix-back-top-border-color: none;
 }
diff --git a/packages/components/back-top/theme/default.ts b/packages/components/back-top/theme/default.ts
@@ -5,9 +5,13 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type CertainThemeTokens, type GlobalThemeTokens, getColorPalette } from '@idux/components/theme'
-export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'backTop'> {
-  const { colorPrimary, colorContainerBg } = tokens
+import type { CertainThemeTokens, GlobalThemeTokens, ThemeTokenAlgorithms } from '@idux/components/theme'
+export function getDefaultThemeTokens(
+  tokens: GlobalThemeTokens,
+  algorithms: ThemeTokenAlgorithms,
+): CertainThemeTokens<'backTop'> {
+  const { getColorPalette } = algorithms
+  const { overlayBorderWidth, overlayBorderType, overlayBorderColor, colorPrimary, colorContainerBg } = tokens
 
   const primaryColorPalette = getColorPalette(colorPrimary)
 
@@ -19,5 +23,8 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     color: primaryColorPalette.l30,
     colorHover: colorPrimary,
     bgColor: colorContainerBg,
+    borderWidth: overlayBorderWidth,
+    borderType: overlayBorderType,
+    borderColor: overlayBorderColor,
   }
 }
diff --git a/packages/components/back-top/theme/index.ts b/packages/components/back-top/theme/index.ts
@@ -9,8 +9,10 @@ import type { TokenGetter } from '@idux/components/theme'
 
 import { getDefaultThemeTokens } from './default'
 
-export const getThemeTokens: TokenGetter<'backTop'> = (tokens, presetTheme) => {
-  return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens)
+export const getThemeTokens: TokenGetter<'backTop'> = (tokens, presetTheme, algorithms) => {
+  return presetTheme === 'default'
+    ? getDefaultThemeTokens(tokens, algorithms)
+    : getDefaultThemeTokens(tokens, algorithms)
 }
 
 export type { BackTopThemeTokens } from './tokens'
diff --git a/packages/components/back-top/theme/tokens.ts b/packages/components/back-top/theme/tokens.ts
@@ -13,4 +13,7 @@ export interface BackTopThemeTokens {
   color: string
   colorHover: string
   bgColor: string
+  borderWidth: number
+  borderType: string
+  borderColor: string
 }
diff --git a/packages/components/badge/style/index.less b/packages/components/badge/style/index.less
@@ -70,7 +70,7 @@
     color: var(--ix-color-text-inverse);
     background-color: var(--ix-badge-background-color);
     border-radius: calc(var(--ix-badge-count-size) / 2);
-    box-shadow: 0 0 0 1px var(--ix-color-text-inverse);
+    box-shadow: 0 0 0 1px var(--ix-background-color);
     text-align: center;
     white-space: nowrap;
     font-variant-numeric: tabular-nums;

diff --git a/packages/components/badge/theme/dark.css b/packages/components/badge/theme/dark.css
@@ -0,0 +1,5 @@
+/* ------ badge css variables ------ */
+:root {
+  --ix-badge-dot-size: 6px;
+  --ix-badge-count-size: 16px;
+}
diff --git a/packages/components/breadcrumb/style/index.less b/packages/components/breadcrumb/style/index.less
@@ -4,9 +4,10 @@
   margin: 0;
   padding: 0;
   list-style: none;
-  font-size: var(--ix-font-size-md);
+  font-size: var(--ix-breadcrumb-font-size);
   color: var(--ix-breadcrumb-item-color);
   white-space: nowrap;
+  line-height: calc(var(--ix-breadcrumb-font-size) + var(--ix-line-height-gutter));
 
   & ol {
     list-style: none;

diff --git a/packages/components/breadcrumb/theme/dark.css b/packages/components/breadcrumb/theme/dark.css
@@ -0,0 +1,11 @@
+/* ------ breadcrumb css variables ------ */
+:root {
+  --ix-breadcrumb-font-size: 12px;
+  --ix-breadcrumb-item-color: #808999;
+  --ix-breadcrumb-link-color: #808999;
+  --ix-breadcrumb-link-color-hover: #4083e8;
+  --ix-breadcrumb-separator-color: #687080;
+  --ix-breadcrumb-separator-font-size: 12px;
+  --ix-breadcrumb-last-item-color: #f4f8ff;
+  --ix-breadcrumb-separator-margin: 0 4px;
+}
diff --git a/packages/components/breadcrumb/theme/default.css b/packages/components/breadcrumb/theme/default.css
@@ -1,10 +1,11 @@
 /* ------ breadcrumb css variables ------ */
 :root {
-  --ix-breadcrumb-item-color: #a1a7b3;
-  --ix-breadcrumb-link-color: #a1a7b3;
+  --ix-breadcrumb-font-size: 12px;
+  --ix-breadcrumb-item-color: #6f7785;
+  --ix-breadcrumb-link-color: #6f7785;
   --ix-breadcrumb-link-color-hover: #1c6eff;
   --ix-breadcrumb-separator-color: #bec3cc;
-  --ix-breadcrumb-separator-font-size: 16px;
+  --ix-breadcrumb-separator-font-size: 12px;
   --ix-breadcrumb-last-item-color: #2f3540;
   --ix-breadcrumb-separator-margin: 0 4px;
 }
diff --git a/packages/components/breadcrumb/theme/default.ts b/packages/components/breadcrumb/theme/default.ts
@@ -7,14 +7,15 @@
 
 import type { CertainThemeTokens, GlobalThemeTokens } from '@idux/components/theme'
 export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'breadcrumb'> {
-  const { fontSizeLg, colorTextPlaceholder, colorLink, colorIconInfo, colorTextTitle, marginSizeXs } = tokens
+  const { fontSizeSm, colorTextInfo, colorLink, colorTextDisabled, colorTextTitle, marginSizeXs } = tokens
 
   return {
-    itemColor: colorTextPlaceholder,
-    linkColor: colorTextPlaceholder,
+    fontSize: fontSizeSm,
+    itemColor: colorTextInfo,
+    linkColor: colorTextInfo,
     linkColorHover: colorLink,
-    separatorColor: colorIconInfo,
-    separatorFontSize: fontSizeLg,
+    separatorColor: colorTextDisabled,
+    separatorFontSize: fontSizeSm,
     lastItemColor: colorTextTitle,
     separatorMargin: `0 ${marginSizeXs}px`,
   }

diff --git a/packages/components/breadcrumb/theme/tokens.ts b/packages/components/breadcrumb/theme/tokens.ts
@@ -6,6 +6,7 @@
  */
 
 export interface BreadcrumbThemeTokens {
+  fontSize: number
   itemColor: string
   linkColor: string
   linkColorHover: string

diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -186,17 +186,17 @@
   }
 
   &-ghost {
-    color: var(--ix-button-primary-color);
+    color: var(--ix-button-ghost-color);
     border-color: var(--ix-button-ghost-border-color);
 
     &:hover {
-      color: var(--ix-button-primary-color);
-      border-color: var(--ix-button-ghost-border-color);
+      color: var(--ix-button-ghost-color-hover);
+      border-color: var(--ix-button-ghost-border-color-hover);
     }
 
     &:active {
-      color: var(--ix-button-color);
-      border-color: var(--ix-button-ghost-border-color);
+      color: var(--ix-button-ghost-color-active);
+      border-color: var(--ix-button-ghost-border-color-active);
     }
   }
 

diff --git a/packages/components/button/theme/dark.css b/packages/components/button/theme/dark.css
@@ -0,0 +1,50 @@
+/* ------ button css variables ------ */
+:root {
+  --ix-button-font-size-xs: 12px;
+  --ix-button-font-size-sm: 12px;
+  --ix-button-font-size-md: 14px;
+  --ix-button-font-size-lg: 16px;
+  --ix-button-font-size-xl: 16px;
+  --ix-button-min-width-xs: 56px;
+  --ix-button-min-width-sm: 64px;
+  --ix-button-min-width-md: 72px;
+  --ix-button-min-width-lg: 120px;
+  --ix-button-min-width-xl: 160px;
+  --ix-button-height-xs: 24px;
+  --ix-button-height-sm: 32px;
+  --ix-button-height-md: 32px;
+  --ix-button-height-lg: 40px;
+  --ix-button-height-xl: 48px;
+  --ix-button-padding-size-horizontal-xs: 8px;
+  --ix-button-padding-size-horizontal-sm: 12px;
+  --ix-button-padding-size-horizontal-md: 16px;
+  --ix-button-padding-size-horizontal-lg: 24px;
+  --ix-button-padding-size-horizontal-xl: 32px;
+  --ix-button-color: #f4f8ff;
+  --ix-button-color-disabled: #687080;
+  --ix-button-bg-color: #0a0c0f;
+  --ix-button-bg-color-disabled: #1f2329;
+  --ix-button-border-color: #3c424d;
+  --ix-button-border-radius: 2px;
+  --ix-button-primary-color: #fff;
+  --ix-button-primary-bg-color: #4083e8;
+  --ix-button-primary-bg-color-hover: #1b61dd;
+  --ix-button-primary-bg-color-active: #6aa6f4;
+  --ix-button-danger-color: #e8514c;
+  --ix-button-danger-color-hover: #d42525;
+  --ix-button-danger-color-active: #f37e75;
+  --ix-button-danger-bg-color: #e8514c;
+  --ix-button-danger-bg-color-hover: #d42525;
+  --ix-button-danger-bg-color-active: #f37e75;
+  --ix-button-ghost-color: #fff;
+  --ix-button-ghost-color-hover: #fff;
+  --ix-button-ghost-color-active: #595959;
+  --ix-button-ghost-border-color-hover: #fff;
+  --ix-button-ghost-border-color-active: #fff;
+  --ix-button-ghost-border-color: #fff;
+  --ix-button-ghost-bg-color-hover: rgba(255, 255, 255, 0.2);
+  --ix-button-ghost-bg-color-active: #fff;
+  --ix-button-ghost-bg-color-disabled: rgba(255, 255, 255, 0.4);
+  --ix-button-icon-color: inherit;
+  --ix-button-icon-font-size: 16px;
+}
diff --git a/packages/components/button/theme/default.css b/packages/components/button/theme/default.css
@@ -36,6 +36,11 @@
   --ix-button-danger-bg-color: #ff5752;
   --ix-button-danger-bg-color-hover: #ff837a;
   --ix-button-danger-bg-color-active: #cf171d;
+  --ix-button-ghost-color: #ffffff;
+  --ix-button-ghost-color-hover: #ffffff;
+  --ix-button-ghost-color-active: #595959;
+  --ix-button-ghost-border-color-hover: #ffffff;
+  --ix-button-ghost-border-color-active: #ffffff;
   --ix-button-ghost-border-color: #ffffff;
   --ix-button-ghost-bg-color-hover: rgba(255, 255, 255, 0.2);
   --ix-button-ghost-bg-color-active: #ffffff;