feat: add dark theme

IDuxFE · Nov 28, 2023 · 38587c0 · 38587c0
1 parent ee11d29
commit 38587c0
Show file tree

Hide file tree

Showing 205 changed files with 4,923 additions and 1,423 deletions.
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;

diff --git a/packages/components/button/theme/default.ts b/packages/components/button/theme/default.ts
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { CertainThemeTokens, GlobalThemeTokens } from '@idux/components/theme'
+import { type CertainThemeTokens, type GlobalThemeTokens, getAlphaColor, getSolidColor } from '@idux/components/theme'
 
 export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'button'> {
   const {
@@ -32,8 +32,8 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     colorErrorTextHover,
     colorErrorTextActive,
     colorText,
-    colorTextDisabled,
     colorTextInverse,
+    colorTextDisabled,
     colorContainerBg,
     colorContainerBgDisabled,
     colorBorder,
@@ -86,10 +86,16 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     dangerBgColorHover: colorErrorBgHover,
     dangerBgColorActive: colorErrorBgActive,
 
-    ghostBorderColor: colorContainerBg,
-    ghostBgColorHover: 'rgba(255, 255, 255, 0.2)',
-    ghostBgColorActive: colorContainerBg,
-    ghostBgColorDisabled: 'rgba(255, 255, 255, 0.4)',
+    ghostColor: colorTextInverse,
+    ghostColorHover: colorTextInverse,
+    ghostColorActive: getSolidColor(colorTextInverse, 65),
+    ghostBorderColorHover: colorTextInverse,
+    ghostBorderColorActive: colorTextInverse,
+
+    ghostBorderColor: colorTextInverse,
+    ghostBgColorHover: getAlphaColor(colorTextInverse, 0.2),
+    ghostBgColorActive: colorTextInverse,
+    ghostBgColorDisabled: getAlphaColor(colorTextInverse, 0.4),
 
     iconColor: 'inherit',
     iconFontSize: fontSizeIcon,

diff --git a/packages/components/button/theme/tokens.ts b/packages/components/button/theme/tokens.ts
@@ -50,7 +50,12 @@ export interface ButtonThemeTokens {
   dangerBgColorHover: string
   dangerBgColorActive: string
 
+  ghostColor: string
+  ghostColorHover: string
+  ghostColorActive: string
   ghostBorderColor: string
+  ghostBorderColorHover: string
+  ghostBorderColorActive: string
   ghostBgColorHover: string
   ghostBgColorActive: string
   ghostBgColorDisabled: string

diff --git a/packages/components/card/style/index.less b/packages/components/card/style/index.less
@@ -93,9 +93,9 @@
     margin: var(--ix-card-loading-spacing) 0;
     background: linear-gradient(
       90deg,
-      var(--ix-color-emphasized-container-bg),
-      var(--ix-color-bg-disabled),
-      var(--ix-color-emphasized-container-bg)
+      var(--ix-card-loading-start-color),
+      var(--ix-card-loading-end-color),
+      var(--ix-card-loading-start-color)
     );
     background-size: var(--ix-card-loading-bg-size) var(--ix-card-loading-bg-size);
     border-radius: var(--ix-component-border-radius);

diff --git a/packages/components/card/theme/dark.css b/packages/components/card/theme/dark.css
@@ -0,0 +1,19 @@
+/* ------ card css variables ------ */
+:root {
+  --ix-card-font-size-sm: 12px;
+  --ix-card-font-size-md: 12px;
+  --ix-card-font-size-lg: 14px;
+  --ix-card-padding-size-sm: 16px;
+  --ix-card-padding-size-md: 16px;
+  --ix-card-padding-size-lg: 24px;
+  --ix-card-show-shadow-border-width: 1px;
+  --ix-card-mark-width: 20px;
+  --ix-card-mark-height: 16px;
+  --ix-card-header-padding: 8px;
+  --ix-card-loading-spacing: 4px;
+  --ix-card-loading-height: 14px;
+  --ix-card-loading-bg-size: 600%;
+  --ix-card-loading-start-color: #171a1f;
+  --ix-card-loading-end-color: #1f2329;
+  --ix-card-grid-width: 25%;
+}