diff --git a/package.json b/package.json index defdf5c28..3b459e640 100644 --- a/package.json +++ b/package.json @@ -137,6 +137,7 @@ "ts-node": "^10.9.1", "ts-toolbelt": "^9.6.0", "tslib": "^2.6.2", + "typedoc": "^0.25.4", "typescript": "^4.9.5", "unplugin-vue-components": "^0.22.12", "vite": "^4.4.9", diff --git a/packages/components/alert/docs/Index.zh.md b/packages/components/alert/docs/Index.zh.md index fcc4db557..7778c5cf1 100644 --- a/packages/components/alert/docs/Index.zh.md +++ b/packages/components/alert/docs/Index.zh.md @@ -3,7 +3,7 @@ category: components type: 反馈 title: Alert subtitle: 警告提示 -theme: true + --- 告警提示，展现需要引起用户关注的信息。 diff --git a/packages/components/alert/docs/Theme.zh.md b/packages/components/alert/docs/Theme.zh.md index eb240973e..302df9cac 100644 --- a/packages/components/alert/docs/Theme.zh.md +++ b/packages/components/alert/docs/Theme.zh.md @@ -1,17 +1,9 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@alert-height` | `var(--ix-height-md)` | - | - | -| `@alert-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@alert-icon-color` | `var(--ix-text-color-secondary)` | - | - | -| `@alert-icon-color-hover` | `var(--ix-color-primary)` | - | - | -| `@alert-banner-border-color` | `var(--ix-border-color-secondary)` | - | - | -| `@alert-success-color` | `var(--ix-color-turquoise)` | `var(--ix-color-turquoise-d10)` | - | -| `@alert-info-color` | `var(--ix-color-primary)` | - | - | -| `@alert-warning-color` | `var(--ix-color-brown)` | `#a35f40` | - | -| `@alert-error-color` | `var(--ix-color-red)` | `var(--ix-color-red-d10)` | - | -| `@alert-offline-color` | `var(--ix-text-color-info)` | - | - | -| `@alert-success-background-color` | `#f1faf7` | - | - | -| `@alert-info-background-color` | `#f2f7ff` | - | - | -| `@alert-warning-background-color` | `#fffaf2` | - | - | -| `@alert-error-background-color` | `#fff2f2` | - | - | -| `@alert-offline-background-color` | `#f7f7f8` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `borderRadius` | | `number` | `2` | `2` | +| `errorBgColor` | | `string` | `rgba(255, 87, 82, 0.1)` | `rgba(232, 81, 76, 0.2)` | +| `height` | | `number` | `32` | `32` | +| `infoBgColor` | | `string` | `rgba(28, 110, 255, 0.1)` | `rgba(64, 131, 232, 0.2)` | +| `offlineBgColor` | | `string` | `rgba(111, 119, 133, 0.1)` | `rgba(128, 137, 153, 0.2)` | +| `successBgColor` | | `string` | `rgba(18, 166, 121, 0.1)` | `rgba(64, 198, 149, 0.2)` | +| `warningBgColor` | | `string` | `rgba(253, 170, 29, 0.1)` | `rgba(253, 170, 29, 0.2)` | diff --git a/packages/components/anchor/docs/Index.zh.md b/packages/components/anchor/docs/Index.zh.md index 85b8cac0e..c4ecf8660 100644 --- a/packages/components/anchor/docs/Index.zh.md +++ b/packages/components/anchor/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 导航 title: Anchor subtitle: 锚点 -theme: true + --- diff --git a/packages/components/anchor/docs/Theme.zh.md b/packages/components/anchor/docs/Theme.zh.md index 234f232f3..a20914af0 100644 --- a/packages/components/anchor/docs/Theme.zh.md +++ b/packages/components/anchor/docs/Theme.zh.md @@ -1,5 +1,4 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@anchor-color-active` | `var(--ix-color-primary)` | - | - | -| `@anchor-ink-ball-width` | `2px` | - | - | -| `@anchor-ink-ball-height` | `16px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `inkBallHeight` | | `number` | `16` | `16` | +| `inkBallWidth` | | `number` | `2` | `2` | diff --git a/packages/components/avatar/docs/Index.zh.md b/packages/components/avatar/docs/Index.zh.md index e25456598..f1b7e2a2b 100644 --- a/packages/components/avatar/docs/Index.zh.md +++ b/packages/components/avatar/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 数据展示 title: Avatar subtitle: 头像 -theme: true + --- diff --git a/packages/components/avatar/docs/Theme.zh.md b/packages/components/avatar/docs/Theme.zh.md index a86b1fff6..1de262089 100644 --- a/packages/components/avatar/docs/Theme.zh.md +++ b/packages/components/avatar/docs/Theme.zh.md @@ -1,9 +1,6 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@avatar-size-sm` | `var(--ix-height-sm)` | - | - | -| `@avatar-size-md` | `var(--ix-height-md)` | - | - | -| `@avatar-size-lg` | `var(--ix-height-lg)` | - | - | -| `@avatar-color` | `var(--ix-text-color-inverse)` | - | - | -| `@avatar-background-color` | `var(--ix-background-color-deep)` | - | - | -| `@avatar-border-radius-circle` | `50%` | - | - | -| `@avatar-border-radius-square` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `borderRadiusSquare` | | `number` | `2` | `2` | +| `sizeLg` | | `number` | `40` | `40` | +| `sizeMd` | | `number` | `32` | `32` | +| `sizeSm` | | `number` | `24` | `24` | diff --git a/packages/components/back-top/docs/Index.zh.md b/packages/components/back-top/docs/Index.zh.md index 616ba7fab..e86a873e4 100644 --- a/packages/components/back-top/docs/Index.zh.md +++ b/packages/components/back-top/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 其他 title: BackTop subtitle: 回到顶部 -theme: true + --- diff --git a/packages/components/back-top/docs/Theme.zh.md b/packages/components/back-top/docs/Theme.zh.md index 8759396e2..7d9c3c432 100644 --- a/packages/components/back-top/docs/Theme.zh.md +++ b/packages/components/back-top/docs/Theme.zh.md @@ -1,10 +1,12 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@back-top-size-lg` | `64px` | - | - | -| `@back-top-size-md` | `48px` | - | - | -| `@back-top-size-sm` | `40px` | - | - | -| `@back-top-border-radius` | `50%` | - | - | -| `@back-top-box-shadow` | `0 2px 8px 0 rgba(0, 0, 0, 0.05)` | - | - | -| `@back-top-color` | `var(--ix-color-primary-l30)` | - | - | -| `@back-top-color-hover` | `var(--ix-color-primary)` | - | - | -| `@back-top-background-color` | `var(--ix-background-color)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bgColor` | | `string` | `#ffffff` | `#0A0C0F` | +| `borderColor` | | `string` | `none` | `#1F2329` | +| `borderType` | | `string` | `solid` | `solid` | +| `borderWidth` | | `number` | `0` | `1` | +| `boxShadow` | | `string` | `0 2px 8px 0 rgba(0, 0, 0, 0.05)` | `0 2px 8px 0 rgba(0, 0, 0, 0.05)` | +| `color` | | `string` | `#96c7ff` | `#173B7A` | +| `colorHover` | | `string` | `#1c6eff` | `#4083E8` | +| `sizeLg` | | `number` | `64` | `64` | +| `sizeMd` | | `number` | `48` | `48` | +| `sizeSm` | | `number` | `40` | `40` | diff --git a/packages/components/badge/docs/Theme.zh.md b/packages/components/badge/docs/Theme.zh.md index 4ed1e6bd3..6c85fc255 100644 --- a/packages/components/badge/docs/Theme.zh.md +++ b/packages/components/badge/docs/Theme.zh.md @@ -1,10 +1,4 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@badge-dot-size` | `6px` | - | - | -| `@badge-count-size` | `16px` | - | - | -| `@badge-font-size` | `var(--ix-font-size-sm)` | - | - | -| `@badge-color` | `var(--ix-text-color-inverse)` | - | - | -| `@badge-background-color-error` | `var(--ix-color-red)` | - | - | -| `@badge-background-color-success` | `var(--ix-color-turquoise)` | - | - | -| `@badge-background-color-info` | `var(--ix-color-primary)` | - | - | -| `@badge-background-color-warning` | `var(--ix-color-brown)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `countSize` | | `number` | `16` | `16` | +| `dotSize` | | `number` | `6` | `6` | diff --git a/packages/components/breadcrumb/docs/Theme.zh.md b/packages/components/breadcrumb/docs/Theme.zh.md index a2adeceda..e602995d2 100644 --- a/packages/components/breadcrumb/docs/Theme.zh.md +++ b/packages/components/breadcrumb/docs/Theme.zh.md @@ -1,9 +1,10 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@breadcrumb-base-color` | `@text-color-secondary` | `@color-graphite` | - | -| `@breadcrumb-link-color` | `@color-graphite` | - | - | -| `@breadcrumb-link-color-hover` | `@color-primary` | - | - | -| `@breadcrumb-separator-color` | `@text-color-secondary` | `@color-graphite-l10` | - | -| `@breadcrumb-last-item-color` | `@color-graphite-d40` | - | - | -| `@breadcrumb-font-size` | `@font-size-base` | - | - | -| `@breadcrumb-separator-margin` | `0 @margin-sm` | `0 @margin-xs` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `fontSize` | | `number` | `12` | `12` | +| `itemColor` | | `string` | `#6f7785` | `#808999` | +| `lastItemColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `linkColor` | | `string` | `#6f7785` | `#808999` | +| `linkColorHover` | | `string` | `#1c6eff` | `#4083E8` | +| `separatorColor` | | `string` | `#bec3cc` | `#687080` | +| `separatorFontSize` | | `number` | `12` | `12` | +| `separatorMargin` | | `string | number` | `0 4px` | `0 4px` | diff --git a/packages/components/button/docs/Index.zh.md b/packages/components/button/docs/Index.zh.md index e43429141..712e8511a 100644 --- a/packages/components/button/docs/Index.zh.md +++ b/packages/components/button/docs/Index.zh.md @@ -3,7 +3,7 @@ category: components type: 通用 title: Button subtitle: 按钮 -theme: true + --- 按钮用于执行一个即时操作。 diff --git a/packages/components/button/docs/Theme.zh.md b/packages/components/button/docs/Theme.zh.md index 8d6048a1e..70bfb09e7 100644 --- a/packages/components/button/docs/Theme.zh.md +++ b/packages/components/button/docs/Theme.zh.md @@ -1,41 +1,49 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@button-font-size-xs` | `var(--ix-font-size-sm)` | - | - | -| `@button-font-size-sm` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@button-font-size-md` | `var(--ix-font-size-md)` | - | - | -| `@button-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - | -| `@button-font-size-xl` | `var(--ix-font-size-xl)` | `var(--ix-font-size-lg)` | - | -| `@button-min-width-xs` | `auto` | `56px` | - | -| `@button-min-width-sm` | `auto` | `64px` | - | -| `@button-min-width-md` | `auto` | `72px` | - | -| `@button-min-width-lg` | `auto` | `120px` | - | -| `@button-min-width-xl` | `auto` | `160px` | - | -| `@button-height-xs` | `var(--ix-height-sm)` | - | - | -| `@button-height-sm` | `var(--ix-height-md)` | - | - | -| `@button-height-md` | `var(--ix-height-md)` | - | - | -| `@button-height-lg` | `var(--ix-height-lg)` | - | - | -| `@button-height-xl` | `var(--ix-height-xl)` | - | - | -| `@button-padding-horizontal-xs` | `var(--ix-spacing-sm)` | - | - | -| `@button-padding-horizontal-sm` | `var(--ix-spacing-md)` | - | - | -| `@button-padding-horizontal-md` | `var(--ix-spacing-lg)` | - | - | -| `@button-padding-horizontal-lg` | `var(--ix-spacing-xl)` | - | - | -| `@button-padding-horizontal-xl` | `var(--ix-spacing-2xl)` | - | - | -| `@button-color` | `var(--ix-text-color)` | - | - | -| `@button-color-disabled` | `var(--ix-text-color-disabled)` | - | - | -| `@button-background-color` | `var(--ix-background-color)` | - | - | -| `@button-background-color-disabled` | `var(--ix-background-color-deep)` | - | - | -| `@button-border-color` | `var(--ix-border-color)` | - | - | -| `@button-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@button-primary-color` | `var(--ix-text-color-inverse)` | - | - | -| `@button-primary-background-color` | `var(--ix-color-primary)` | - | - | -| `@button-primary-background-color-hover` | `var(--ix-color-primary-l10)` | - | - | -| `@button-primary-background-color-active` | `var(--ix-color-primary-d10)` | - | - | -| `@button-danger-color` | `var(--ix-color-red)` | - | - | -| `@button-danger-color-hover` | `var(--ix-color-red-l10)` | - | - | -| `@button-danger-color-active` | `var(--ix-color-red-d10)` | - | - | -| `@button-ghost-border-color` | `var(--ix-background-color)` | - | - | -| `@button-ghost-background-color-hover` | `rgba(255, 255, 255, 0.2)` | - | - | -| `@button-ghost-background-color-active` | `var(--ix-background-color)` | - | - | -| `@button-ghost-background-color-disabled` | `rgba(255, 255, 255, 0.4)` | - | - | -| `@button-icon-color` | `inherit` | `var(--ix-text-color-secondary)` | - | -| `@button-icon-font-size` | `var(--ix-font-size-lg)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bgColor` | | `string` | `#ffffff` | `#0A0C0F` | +| `bgColorDisabled` | | `string` | `#e1e5eb` | `#1F2329` | +| `borderColor` | | `string` | `#d3d7de` | `#3C424D` | +| `borderRadius` | | `number` | `2` | `2` | +| `color` | | `string` | `#2f3540` | `#F4F8FF` | +| `colorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `dangerBgColor` | | `string` | `#ff5752` | `#E8514C` | +| `dangerBgColorActive` | | `string` | `#cf171d` | `#F37E75` | +| `dangerBgColorHover` | | `string` | `#ff837a` | `#D42525` | +| `dangerColor` | | `string` | `#cf171d` | `#E8514C` | +| `dangerColorActive` | | `string` | `#cf171d` | `#F37E75` | +| `dangerColorHover` | | `string` | `#f52727` | `#D42525` | +| `fontSizeLg` | | `number` | `16` | `16` | +| `fontSizeMd` | | `number` | `14` | `14` | +| `fontSizeSm` | | `number` | `12` | `12` | +| `fontSizeXl` | | `number` | `16` | `16` | +| `fontSizeXs` | | `number` | `12` | `12` | +| `ghostBgColorActive` | | `string` | `#ffffff` | `#fff` | +| `ghostBgColorDisabled` | | `string` | `rgba(255, 255, 255, 0.4)` | `rgba(255, 255, 255, 0.4)` | +| `ghostBgColorHover` | | `string` | `rgba(255, 255, 255, 0.2)` | `rgba(255, 255, 255, 0.2)` | +| `ghostBorderColor` | | `string` | `#ffffff` | `#fff` | +| `ghostBorderColorActive` | | `string` | `#ffffff` | `#fff` | +| `ghostBorderColorHover` | | `string` | `#ffffff` | `#fff` | +| `ghostColor` | | `string` | `#ffffff` | `#fff` | +| `ghostColorActive` | | `string` | `#595959` | `#595959` | +| `ghostColorHover` | | `string` | `#ffffff` | `#fff` | +| `heightLg` | | `number` | `40` | `40` | +| `heightMd` | | `number` | `32` | `32` | +| `heightSm` | | `number` | `32` | `32` | +| `heightXl` | | `number` | `48` | `48` | +| `heightXs` | | `number` | `24` | `24` | +| `iconColor` | | `string` | `inherit` | `inherit` | +| `iconFontSize` | | `number` | `16` | `16` | +| `minWidthLg` | | `string | number` | `120` | `120` | +| `minWidthMd` | | `string | number` | `72` | `72` | +| `minWidthSm` | | `string | number` | `64` | `64` | +| `minWidthXl` | | `string | number` | `160` | `160` | +| `minWidthXs` | | `string | number` | `56` | `56` | +| `paddingSizeHorizontalLg` | | `number` | `24` | `24` | +| `paddingSizeHorizontalMd` | | `number` | `16` | `16` | +| `paddingSizeHorizontalSm` | | `number` | `12` | `12` | +| `paddingSizeHorizontalXl` | | `number` | `32` | `32` | +| `paddingSizeHorizontalXs` | | `number` | `8` | `8` | +| `primaryBgColor` | | `string` | `#1c6eff` | `#4083E8` | +| `primaryBgColorActive` | | `string` | `#0d51d9` | `#6AA6F4` | +| `primaryBgColorHover` | | `string` | `#458fff` | `#1B61DD` | +| `primaryColor` | | `string` | `#ffffff` | `#fff` | diff --git a/packages/components/card/docs/Theme.zh.md b/packages/components/card/docs/Theme.zh.md index ef68de5f8..6def92adf 100644 --- a/packages/components/card/docs/Theme.zh.md +++ b/packages/components/card/docs/Theme.zh.md @@ -1,28 +1,18 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@card-font-size-sm` | `@font-size-sm` | - | - | -| `@card-font-size-md` | `@font-size-md` | `@font-size-sm` | - | -| `@card-font-size-lg` | `@font-size-lg` | `@font-size-md` | - | -| `@card-padding-sm` | `@spacing-md` | `@spacing-lg` | - | -| `@card-padding-md` | `@spacing-lg` | - | - | -| `@card-padding-lg` | `@spacing-xl` | - | - | -| `@card-border-width` | `@border-width-sm` | - | - | -| `@card-border-style` | `@border-style` | - | - | -| `@card-border-color` | `@color-graphite-l30` | - | - | -| `@card-border-color-hover` | `transparent` | - | - | -| `@card-border-radius` | `@border-radius-sm` | - | - | -| `@card-border-color-selectable` | `@color-graphite-l20` | - | - | -| `@card-border-color-selectable-selected` | `@color-primary` | - | - | -| `@card-border-color-selectable-hover` | `@color-primary-l10` | - | - | -| `@card-icon-color` | `@color-graphite-l30` | - | - | -| `@card-icon-width` | `@font-size-xl` | - | - | -| `@card-icon-height` | `@font-size-lg` | - | - | -| `@card-box-shadow` | `0px 2px 8px 0px rgba(30, 35, 43, 0.12)` | - | - | -| `@card-gradient-min` | `fade(@color-grey, 20%)` | - | - | -| `@card-gradient-max` | `fade(@color-grey, 60%)` | - | - | -| `@card-header-padding` | `@spacing-sm` | - | - | -| `@card-loading-spacing` | `@spacing-xs` | - | - | -| `@card-loading-height` | `@font-size-md` | - | - | -| `@card-loading-background-size` | `600%` | - | - | -| `@card-loading-transition-duration` | `2s` | - | - | -| `@card-grid-width` | `25%` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `fontSizeLg` | | `number` | `14` | `14` | +| `fontSizeMd` | | `number` | `12` | `12` | +| `fontSizeSm` | | `number` | `12` | `12` | +| `gridWidth` | | `string | number` | `25%` | `25%` | +| `headerPadding` | | `string | number` | `8` | `8` | +| `loadingBgSize` | | `string | number` | `600%` | `600%` | +| `loadingEndColor` | | `string` | `#e1e5eb` | `#1F2329` | +| `loadingHeight` | | `number` | `14` | `14` | +| `loadingSpacing` | | `number` | `4` | `4` | +| `loadingStartColor` | | `string` | `#edf1f7` | `#171A1F` | +| `markHeight` | | `number` | `16` | `16` | +| `markWidth` | | `number` | `20` | `20` | +| `paddingSizeLg` | | `number` | `24` | `24` | +| `paddingSizeMd` | | `number` | `16` | `16` | +| `paddingSizeSm` | | `number` | `16` | `16` | +| `showShadowBorderWidth` | | `number` | `0` | `1` | diff --git a/packages/components/carousel/docs/Theme.zh.md b/packages/components/carousel/docs/Theme.zh.md index e7d4c989f..bff394c20 100644 --- a/packages/components/carousel/docs/Theme.zh.md +++ b/packages/components/carousel/docs/Theme.zh.md @@ -1,16 +1,13 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@carousel-arrow-size` | `32px` | - | - | -| `@carousel-arrow-color` | `@color-white` | - | - | -| `@carousel-arrow-spacing` | `@spacing-gutter` | - | - | -| `@carousel-dot-horizontal-width` | `32px` | - | - | -| `@carousel-dot-horizontal-height` | `2px` | - | - | -| `@carousel-dot-vertical-width` | `2px` | - | - | -| `@carousel-dot-vertical-height` | `16px` | - | - | -| `@carousel-dot-background-color` | `@color-white` | - | - | -| `@carousel-dot-gap` | `@spacing-sm` | - | - | -| `@carousel-dot-spacing` | `@spacing-sm` | - | - | -| `@carousel-dot-border-radius` | `2px` | - | - | -| `@carousel-icon-opacity` | `0.3` | - | - | -| `@carousel-icon-hover-opacity` | `0.6` | - | - | -| `@carousel-icon-active-opacity` | `0.8` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `arrowColor` | | `string` | `#ffffff` | `#fff` | +| `arrowSize` | | `number` | `32` | `32` | +| `dotBgColor` | | `string` | `#ffffff` | `#fff` | +| `dotBorderRadius` | | `number` | `2` | `2` | +| `horizontalDotHeight` | | `number` | `2` | `2` | +| `horizontalDotWidth` | | `number` | `32` | `32` | +| `iconOpacity` | | `number` | `0.3` | `0.3` | +| `iconOpacityActive` | | `number` | `0.8` | `0.8` | +| `iconOpacityHover` | | `number` | `0.6` | `0.6` | +| `verticalDotHeight` | | `number` | `16` | `16` | +| `verticalDotWidth` | | `number` | `2` | `2` | diff --git a/packages/components/cascader/docs/Theme.zh.md b/packages/components/cascader/docs/Theme.zh.md index 4c789fdd8..c4196f952 100644 --- a/packages/components/cascader/docs/Theme.zh.md +++ b/packages/components/cascader/docs/Theme.zh.md @@ -1,27 +1,11 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@cascader-option-padding` | `@spacing-xs @spacing-xs @spacing-xs @spacing-md` | - | - | -| `@cascader-option-height` | `@select-option-height` | - | - | -| `@cascader-option-color` | `@select-option-color` | - | - | -| `@cascader-option-font-size` | `@select-option-font-size` | - | - | -| `@cascader-option-disabled-color` | `@select-option-disabled-color` | - | - | -| `@cascader-option-active-background-color` | `@select-option-active-background-color` | - | - | -| `@cascader-option-selected-color` | `@select-option-selected-color` | `@cascader-option-color` | - | -| `@cascader-option-selected-background-color` | `@select-option-selected-background-color` | - | - | -| `@cascader-option-selected-font-weight` | `@select-option-selected-font-weight` | `@font-weight-lg` | - | -| `@cascader-option-expanded-color` | `@cascader-option-selected-color` | - | - | -| `@cascader-option-expanded-background-color` | `@cascader-option-selected-background-color` | - | - | -| `@cascader-option-expanded-font-weight` | `@cascader-option-selected-font-weight` | - | - | -| `@cascader-option-label-margin-left` | `@select-option-label-margin-left` | - | - | -| `@cascader-option-label-highlight-color` | `@color-primary` | - | - | -| `@cascader-option-expanded-margin-left` | `@spacing-xs` | - | - | -| `@cascader-option-expanded-icon-color` | `@text-color-secondary` | `@color-graphite-d20` | - | -| `@cascader-option-expanded-icon-font-size` | `@select-icon-font-size` | - | - | -| `@cascader-option-group-min-width` | `120px` | - | - | -| `@cascader-option-group-min-height` | `180px` | - | - | -| `@cascader-option-group-border` | `@border-width-sm solid @border-color-split` | - | - | -| `@cascader-overlay-padding` | `@select-option-container-padding` | - | - | -| `@cascader-overlay-background-color` | `@select-option-container-background-color` | - | - | -| `@cascader-overlay-border-radius` | `@select-option-container-border-radius` | - | - | -| `@cascader-overlay-box-shadow` | `@select-option-container-box-shadow` | - | - | -| `@cascader-overlay-search-wrapper-padding` | `@select-overlay-search-wrapper-padding` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `optionContainerPadding` | | `string | number` | `4px 0` | `4px 0` | +| `optionFontSize` | | `number` | `12` | `12` | +| `optionGroupMinHeight` | | `number` | `180` | `180` | +| `optionGroupMinWidth` | | `number` | `120` | `120` | +| `optionHeight` | | `number` | `32` | `32` | +| `optionLabelHighlightColor` | | `string` | `#1c6eff` | `#4083E8` | +| `optionLabelMarginLeft` | | `number` | `8` | `8` | +| `optionPadding` | | `string | number` | `8px 12px` | `8px 12px` | +| `overlaySearchWrapperPadding` | | `string | number` | `4px 12px 8px` | `4px 12px 8px` | diff --git a/packages/components/checkbox/docs/Index.zh.md b/packages/components/checkbox/docs/Index.zh.md index 3dede1782..42bf8f4e6 100644 --- a/packages/components/checkbox/docs/Index.zh.md +++ b/packages/components/checkbox/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 数据录入 title: Checkbox subtitle: 复选框 -theme: true + --- diff --git a/packages/components/checkbox/docs/Theme.zh.md b/packages/components/checkbox/docs/Theme.zh.md index 047c5f6eb..450074360 100644 --- a/packages/components/checkbox/docs/Theme.zh.md +++ b/packages/components/checkbox/docs/Theme.zh.md @@ -1,14 +1,5 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@checkbox-color` | `var(--ix-text-color)` | - | - | -| `@checkbox-color-active` | `var(--ix-color-primary)` | - | - | -| `@checkbox-color-disabled` | `var(--ix-text-color-disabled)` | - | - | -| `@checkbox-background-color` | `var(--ix-background-color)` | - | - | -| `@checkbox-background-color-disabled` | `var(--ix-background-color-deep)` | - | - | -| `@checkbox-border-color` | `var(--ix-border-color)` | - | - | -| `@checkbox-border-color-hover` | `var(--ix-color-primary)` | - | - | -| `@checkbox-border-color-focus` | `var(--ix-color-primary)` | - | - | -| `@checkbox-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@checkbox-label-padding` | `0 8px` | `0 4px` | - | -| `@checkbox-fieldset-background-color` | `var(--ix-background-color-light)` | - | - | -| `@checkbox-fieldset-border-color` | `var(--ix-border-color-secondary)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `fieldsetBgColor` | | `string` | `#f7f9fc` | `#171A1F` | +| `fieldsetBorderColor` | | `string` | `#e1e5eb` | `#1F2329` | +| `labelPadding` | | `string | number` | `0 4px` | `0 4px` | diff --git a/packages/components/collapse/docs/Index.zh.md b/packages/components/collapse/docs/Index.zh.md index b6fee7788..6571a1470 100644 --- a/packages/components/collapse/docs/Index.zh.md +++ b/packages/components/collapse/docs/Index.zh.md @@ -4,6 +4,6 @@ type: 数据展示 title: Collapse subtitle: 折叠面板 order: 0 -theme: true + --- diff --git a/packages/components/collapse/docs/Theme.zh.md b/packages/components/collapse/docs/Theme.zh.md index 49ca11a2f..0e1c87501 100644 --- a/packages/components/collapse/docs/Theme.zh.md +++ b/packages/components/collapse/docs/Theme.zh.md @@ -1,11 +1,10 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@collapse-font-size-sm` | `var(--ix-font-size-sm)` | - | - | -| `@collapse-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@collapse-expand-icon-font-size-sm` | `var(--ix-font-size-xl)` | - | - | -| `@collapse-expand-icon-font-size-md` | `var(--ix-font-size-2xl)` | - | - | -| `@collapse-padding-horizontal-sm` | `var(--ix-spacing-md)` | - | - | -| `@collapse-padding-horizontal-md` | `var(--ix-spacing-lg)` | - | - | -| `@collapse-border` | `1px solid var(--ix-border-color)` | - | - | -| `@collapse-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@collapse-content-background-color` | `var(--ix-background-color-light)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `expandIconSizeMd` | | `number` | `24` | `24` | +| `expandIconSizeSm` | | `number` | `20` | `20` | +| `fontSizeMd` | | `number` | `12` | `12` | +| `fontSizeSm` | | `number` | `12` | `12` | +| `paddingHorizontalMd` | | `number` | `16` | `16` | +| `paddingHorizontalSm` | | `number` | `12` | `12` | +| `panelContentBgColor` | | `string` | `#f7f9fc` | `#0A0C0F` | +| `panelHeaderBgColor` | | `string` | `#ffffff` | `#171A1F` | diff --git a/packages/components/comment/docs/Theme.zh.md b/packages/components/comment/docs/Theme.zh.md index 06f89cfd7..732c6e3e8 100644 --- a/packages/components/comment/docs/Theme.zh.md +++ b/packages/components/comment/docs/Theme.zh.md @@ -1,16 +1,7 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@comment-padding-md` | `@spacing-md 0` | - | - | -| `@comment-margin-right` | `@spacing-md` | - | - | -| `@comment-font-size-md` | `@font-size-md` | - | - | -| `@comment-font-size-sm` | `@font-size-sm` | - | - | -| `@comment-author-margin-bottom` | `@spacing-xs` | - | - | -| `@comment-content-padding-right` | `@spacing-sm` | - | - | -| `@comment-author-name-color` | `@text-color-secondary` | - | - | -| `@comment-author-time-color` | `#ccc` | - | - | -| `@comment-actions-margin-top` | `@margin-md` | - | - | -| `@comment-actions-margin-bottom` | `inherit` | - | - | -| `@comment-action-color` | `@text-color-secondary` | - | - | -| `@comment-action-hover-color` | `#595959` | - | - | -| `@comment-content-detail-p-margin-bottom` | `inherit` | - | - | -| `@comment-nest-indent` | `44px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `actionColor` | | `string` | `#6f7785` | `#808999` | +| `actionColorHover` | | `string` | `#2f3540` | `#F4F8FF` | +| `authorNameColor` | | `string` | `#a1a7b3` | `#525966` | +| `authorTimeColor` | | `string` | `#6f7785` | `#808999` | +| `nestIndent` | | `number` | `44` | `44` | diff --git a/packages/components/dark.full.css b/packages/components/dark.full.css index 000e6c190..4b31eca09 100644 --- a/packages/components/dark.full.css +++ b/packages/components/dark.full.css @@ -275,12 +275,15 @@ --ix-reset-scrollbar-track-box-shadow: unset; } -/* ------ avatar css variables ------ */ +/* ------ alert css variables ------ */ :root { - --ix-avatar-size-sm: 24px; - --ix-avatar-size-md: 32px; - --ix-avatar-size-lg: 40px; - --ix-avatar-border-radius-square: 2px; + --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); } /* ------ anchor css variables ------ */ @@ -289,6 +292,14 @@ --ix-anchor-ink-ball-height: 16px; } +/* ------ 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; +} + /* ------ back-top css variables ------ */ :root { --ix-back-top-size-lg: 64px; @@ -309,6 +320,89 @@ --ix-badge-count-size: 16px; } +/* ------ 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; +} + +/* ------ 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; +} + +/* ------ 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%; +} + /* ------ carousel css variables ------ */ :root { --ix-carousel-arrow-size: 32px; @@ -324,18 +418,6 @@ --ix-carousel-icon-opacity-active: 0.8; } -/* ------ 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; -} - /* ------ cascader css variables ------ */ :root { --ix-cascader-option-font-size: 12px; @@ -356,6 +438,18 @@ --ix-checkbox-fieldset-border-color: #1f2329; } +/* ------ collapse css variables ------ */ +:root { + --ix-collapse-font-size-sm: 12px; + --ix-collapse-font-size-md: 12px; + --ix-collapse-expand-icon-size-sm: 20px; + --ix-collapse-expand-icon-size-md: 24px; + --ix-collapse-padding-horizontal-sm: 12px; + --ix-collapse-padding-horizontal-md: 16px; + --ix-collapse-panel-header-bg-color: #171a1f; + --ix-collapse-panel-content-bg-color: #0a0c0f; +} + /* ------ comment css variables ------ */ :root { --ix-comment-nest-indent: 44px; @@ -365,17 +459,72 @@ --ix-comment-action-color-hover: #f4f8ff; } -/* ------ form css variables ------ */ +/* ------ date-picker css variables ------ */ :root { - --ix-form-label-color: #808999; - --ix-form-label-required-color: #e8514c; - --ix-form-label-font-size: 12px; - --ix-form-label-colon-margin-left: 2px; - --ix-form-label-colon-margin-right: 8px; - --ix-form-message-tooltip-bg-color: #e8514c; - --ix-form-item-margin-bottom: 8px; - --ix-form-vertical-item-label-padding: 0 0 8px; - --ix-form-vertical-item-label-margin: 0; + --ix-date-picker-separator-margin-horizontal: 16px; + --ix-date-picker-overlay-width: 252px; + --ix-date-picker-overlay-padding: 16px; + --ix-date-picker-overlay-footer-padding: 8px 16px; + --ix-date-picker-overlay-date-input-width: 120px; + --ix-date-picker-overlay-time-input-width: 96px; + --ix-date-picker-board-width: 220px; + --ix-date-picker-board-max-height: 260px; + --ix-date-picker-range-board-border: none; + --ix-date-picker-range-overlay-padding: 16px 16px 0 16px; + --ix-date-picker-range-overlay-footer-padding: 8px 0; + --ix-date-picker-range-overlay-separator-width: 32px; + --ix-date-picker-range-overlay-separator-font-size: 12px; + --ix-date-picker-panel-font-size: 12px; + --ix-date-picker-panel-color: #f4f8ff; + --ix-date-picker-panel-cell-width: 28px; + --ix-date-picker-panel-cell-height: 28px; + --ix-date-picker-panel-cell-width-lg: 52px; + --ix-date-picker-panel-cell-height-lg: 24px; + --ix-date-picker-panel-cell-color-active: #fff; + --ix-date-picker-panel-cell-color-hover: #1b61dd; + --ix-date-picker-panel-cell-color-disabled: #687080; + --ix-date-picker-panel-cell-bg-color-hover: #171a1f; + --ix-date-picker-panel-cell-bg-color-active: #4083e8; + --ix-date-picker-panel-cell-bg-color-in-range: #151d33; + --ix-date-picker-panel-cell-bg-color-disabled: #171a1f; + --ix-date-picker-panel-cell-trigger-width: 20px; + --ix-date-picker-panel-cell-trigger-height: 20px; + --ix-date-picker-panel-cell-trigger-width-lg: 52px; + --ix-date-picker-panel-cell-trigger-height-lg: 24px; + --ix-date-picker-panel-cell-current-color: #4083e8; + --ix-date-picker-panel-cell-current-border-color: #16274a; + --ix-date-picker-panel-cell-current-bg-color: #4083e8; + --ix-date-picker-panel-heaer-height: 32px; + --ix-date-picker-panel-header-font-size: 12px; + --ix-date-picker-panel-header-font-weight: 400; + --ix-date-picker-panel-header-spacing: 16px; + --ix-date-picker-panel-body-header-bg-color: #171a1f; +} + +/* ------ desc css variables ------ */ +:root { + --ix-desc-item-height-sm: 24px; + --ix-desc-item-height-md: 32px; + --ix-desc-item-height-lg: 40px; + --ix-desc-font-size-sm: 12px; + --ix-desc-font-size-md: 12px; + --ix-desc-font-size-lg: 12px; + --ix-desc-label-color: #808999; +} + +/* ------ divider css variables ------ */ +:root { + --ix-divider-line-width: 1px; + --ix-divider-line-color: #3c424d; + --ix-divider-font-size-sm: 12px; + --ix-divider-font-size-md: 14px; + --ix-divider-font-size-lg: 16px; + --ix-divider-margin-vertical-sm: 12px; + --ix-divider-margin-vertical-md: 16px; + --ix-divider-margin-vertical-lg: 24px; + --ix-divider-margin-horizontal-sm: 4px; + --ix-divider-margin-horizontal-md: 8px; + --ix-divider-margin-horizontal-lg: 12px; } /* ------ drawer css variables ------ */ @@ -397,21 +546,6 @@ --ix-dropdown-menu-container-padding: 4px 0; } -/* ------ divider css variables ------ */ -:root { - --ix-divider-line-width: 1px; - --ix-divider-line-color: #3c424d; - --ix-divider-font-size-sm: 12px; - --ix-divider-font-size-md: 14px; - --ix-divider-font-size-lg: 16px; - --ix-divider-margin-vertical-sm: 12px; - --ix-divider-margin-vertical-md: 16px; - --ix-divider-margin-vertical-lg: 24px; - --ix-divider-margin-horizontal-sm: 4px; - --ix-divider-margin-horizontal-md: 8px; - --ix-divider-margin-horizontal-lg: 12px; -} - /* ------ empty css variables ------ */ :root { --ix-empty-color: #525966; @@ -419,24 +553,69 @@ --ix-empty-desc-font-size: 16px; } -/* ------ desc css variables ------ */ +/* ------ form css variables ------ */ :root { - --ix-desc-item-height-sm: 24px; - --ix-desc-item-height-md: 32px; - --ix-desc-item-height-lg: 40px; - --ix-desc-font-size-sm: 12px; - --ix-desc-font-size-md: 12px; - --ix-desc-font-size-lg: 12px; - --ix-desc-label-color: #808999; + --ix-form-label-color: #808999; + --ix-form-label-required-color: #e8514c; + --ix-form-label-font-size: 12px; + --ix-form-label-colon-margin-left: 2px; + --ix-form-label-colon-margin-right: 8px; + --ix-form-message-tooltip-bg-color: #e8514c; + --ix-form-item-margin-bottom: 8px; + --ix-form-vertical-item-label-padding: 0 0 8px; + --ix-form-vertical-item-label-margin: 0; } -/* ------ layout css variables ------ */ +/* ------ header css variables ------ */ :root { - --ix-layout-sider-width: 224px; - --ix-layout-sider-collapsed-width: 44px; + --ix-header-height-sm: 40px; + --ix-header-height-md: 48px; + --ix-header-height-lg: 48px; + --ix-header-height-xl: 56px; + --ix-header-bar-width: 4px; + --ix-header-bar-bg-color: #4083e8; + --ix-header-prefix-color: #f4f8ff; + --ix-header-prefix-color-hover: #4083e8; + --ix-header-prefix-color-active: #4083e8; + --ix-header-prefix-color-disabled: #687080; + --ix-header-suffix-color: #a1a7b3; + --ix-header-suffix-color-hover: #4083e8; + --ix-header-suffix-color-active: #6aa6f4; + --ix-header-suffix-color-disabled: #687080; + --ix-header-sub-title-font-size: 14px; } -/* ------ menu css variables ------ */ +/* ------ image css variables ------ */ +:root { + --ix-image-min-width: 96px; + --ix-image-min-height: 96px; + --ix-image-object-fit: contain; + --ix-image-preview-bg-color: rgba(0, 0, 0, 0.5); + --ix-image-preview-icon-color: #fff; + --ix-image-preview-icon-size: 20px; + --ix-image-viewer-bg-color: rgba(0, 0, 0, 0.45); + --ix-image-viewer-opr-color: #fff; + --ix-image-viewer-opr-color-disabled: rgba(255, 255, 255, 0.35); + --ix-image-viewer-opr-height: 48px; + --ix-image-viewer-opr-margin-bottom: 48px; + --ix-image-viewer-opr-font-size: 20px; + --ix-image-viewer-opr-bg-color: rgba(0, 0, 0, 0.1); + --ix-image-viewer-opr-item-margin: 0 24px; +} + +/* ------ layout css variables ------ */ +:root { + --ix-layout-sider-width: 224px; + --ix-layout-sider-collapsed-width: 44px; +} + +/* ------ loading-bar css variables ------ */ +:root { + --ix-loading-bar-height: 2px; + --ix-loading-bar-loading-color: #4083e8; +} + +/* ------ menu css variables ------ */ :root { --ix-menu-border-radius: 0; --ix-menu-height: 32px; @@ -476,29 +655,21 @@ --ix-menu-dark-horizontal-item-bg-active: #c2c7d1; } -/* ------ image css variables ------ */ -:root { - --ix-image-min-width: 96px; - --ix-image-min-height: 96px; - --ix-image-object-fit: contain; - --ix-image-preview-bg-color: rgba(0, 0, 0, 0.5); - --ix-image-preview-icon-color: #fff; - --ix-image-preview-icon-size: 20px; - --ix-image-viewer-bg-color: rgba(0, 0, 0, 0.45); - --ix-image-viewer-opr-color: #fff; - --ix-image-viewer-opr-color-disabled: rgba(255, 255, 255, 0.35); - --ix-image-viewer-opr-height: 48px; - --ix-image-viewer-opr-margin-bottom: 48px; - --ix-image-viewer-opr-font-size: 20px; - --ix-image-viewer-opr-bg-color: rgba(0, 0, 0, 0.1); - --ix-image-viewer-opr-item-margin: 0 24px; -} - -/* ------ popover css variables ------ */ +/* ------ message css variables ------ */ :root { - --ix-popover-font-size: 12px; - --ix-popover-color: #808999; - --ix-popover-min-width: 240px; + --ix-message-margin: 8px; + --ix-message-font-size: 14px; + --ix-message-border-width: 1px; + --ix-message-border-type: solid; + --ix-message-border-color: #1f2329; + --ix-message-content-min-width: 128px; + --ix-message-content-max-width: 480px; + --ix-message-content-padding-vertical: 8px; + --ix-message-content-padding-horizontal: 16px; + --ix-message-bg-color: #0a0c0f; + --ix-message-border-radius: 4px; + --ix-message-icon-margin-right: 8px; + --ix-message-wrapper-top: 15%; } /* ------ modal css variables ------ */ @@ -510,115 +681,83 @@ --ix-modal-icon-size: 40px; } -/* ------ time-picker css variables ------ */ +/* ------ notification css variables ------ */ :root { - --ix-time-picker-separator-margin-horizontal: 24px; - --ix-time-picker-overlay-width: 200px; - --ix-time-picker-overlay-padding: 8px 8px 0 8px; - --ix-time-picker-overlay-footer-padding: 8px 16px; - --ix-time-picker-range-board-width: 184px; - --ix-time-picker-range-board-border: none; - --ix-time-picker-range-overlay-padding: 16px 16px 0 16px; - --ix-time-picker-range-overlay-footer-padding: 8px 0; - --ix-time-picker-range-overlay-separator-padding: 2px 10px; - --ix-time-picker-range-overlay-separator-font-size: 12px; - --ix-time-picker-panel-height: 224px; - --ix-time-picker-panel-padding-horizontal: 8px; - --ix-time-picker-panel-padding-vertical: 8px; - --ix-time-picker-panel-font-size: 12px; - --ix-time-picker-panel-cell-height: 32px; - --ix-time-picker-panel-cell-padding-horizontal: 8px; - --ix-time-picker-panel-cell-color: #808999; - --ix-time-picker-panel-cell-color-active: #f4f8ff; - --ix-time-picker-panel-cell-bg-color-hover: transparent; - --ix-time-picker-panel-cell-bg-color-active: transparent; - --ix-time-picker-panel-cell-font-weight-active: 600; - --ix-time-picker-panel-scrollbar-width: 6px; - --ix-time-picker-panel-scrollbar-thumb-bg-color: #1f2329; - --ix-time-picker-panel-scrollbar-thumb-border-radius: 10px; - --ix-time-picker-panel-scrollbar-track-bg-color: unset; + --ix-notification-padding: 8px 8px 8px 16px; + --ix-notification-margin: 0 0 8px 0; + --ix-notification-width: 384px; + --ix-notification-max-width: calc(100vw - 48px); + --ix-notification-border-width: 1px; + --ix-notification-border-type: solid; + --ix-notification-border-color: #1f2329; + --ix-notification-font-size: 14px; + --ix-notification-bg-color: #0a0c0f; + --ix-notification-border-radius: 2px; + --ix-notification-icon-margin: 4px 8px; + --ix-notification-icon-wrapper-width: 44px; + --ix-notification-title-font-size: 14px; + --ix-notification-title-line-height: 24px; + --ix-notification-title-margin: 0 24px 8px 0; + --ix-notification-content-font-size: 12px; + --ix-notification-content-color: #808999; + --ix-notification-content-margin: 0 16px 0 0; + --ix-notification-close-icon-top: 8px; + --ix-notification-close-icon-right: 8px; + --ix-notification-footer-margin: 8px 0 0 0; } -/* ------ collapse css variables ------ */ +/* ------ pagination css variables ------ */ :root { - --ix-collapse-font-size-sm: 12px; - --ix-collapse-font-size-md: 12px; - --ix-collapse-expand-icon-size-sm: 20px; - --ix-collapse-expand-icon-size-md: 24px; - --ix-collapse-padding-horizontal-sm: 12px; - --ix-collapse-padding-horizontal-md: 16px; - --ix-collapse-panel-header-bg-color: #171a1f; - --ix-collapse-panel-content-bg-color: #0a0c0f; + --ix-pagination-font-size-sm: 12px; + --ix-pagination-font-size-md: 12px; + --ix-pagination-font-size-lg: 14px; + --ix-pagination-itme-padding-sm: 0; + --ix-pagination-item-padding-md: 4px; + --ix-pagination-item-padding-lg: 4px; + --ix-pagination-item-content-size-sm: 24px; + --ix-pagination-item-content-size-md: 24px; + --ix-pagination-item-content-size-lg: 32px; + --ix-pagination-out-line-color: #1b61dd; } -/* ------ card css variables ------ */ +/* ------ popconfirm 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%; + --ix-popconfirm-font-size: 12px; + --ix-popconfirm-title-font-size: 14px; + --ix-popconfirm-color: #f4f8ff; + --ix-popconfirm-icon-color: #fdaa1d; + --ix-popconfirm-min-width: 240px; } -/* ------ skeleton css variables ------ */ +/* ------ popover css variables ------ */ :root { - --ix-skeleton-margin-bottom: 8px; - --ix-skeleton-loader-margin-bottom: 4px; - --ix-skeleton-start-color: #1f2329; - --ix-skeleton-end-color: #1f2329; + --ix-popover-font-size: 12px; + --ix-popover-color: #808999; + --ix-popover-min-width: 240px; } -/* ------ date-picker css variables ------ */ +/* ------ progress css variables ------ */ :root { - --ix-date-picker-separator-margin-horizontal: 16px; - --ix-date-picker-overlay-width: 252px; - --ix-date-picker-overlay-padding: 16px; - --ix-date-picker-overlay-footer-padding: 8px 16px; - --ix-date-picker-overlay-date-input-width: 120px; - --ix-date-picker-overlay-time-input-width: 96px; - --ix-date-picker-board-width: 220px; - --ix-date-picker-board-max-height: 260px; - --ix-date-picker-range-board-border: none; - --ix-date-picker-range-overlay-padding: 16px 16px 0 16px; - --ix-date-picker-range-overlay-footer-padding: 8px 0; - --ix-date-picker-range-overlay-separator-width: 32px; - --ix-date-picker-range-overlay-separator-font-size: 12px; - --ix-date-picker-panel-font-size: 12px; - --ix-date-picker-panel-color: #f4f8ff; - --ix-date-picker-panel-cell-width: 28px; - --ix-date-picker-panel-cell-height: 28px; - --ix-date-picker-panel-cell-width-lg: 52px; - --ix-date-picker-panel-cell-height-lg: 24px; - --ix-date-picker-panel-cell-color-active: #fff; - --ix-date-picker-panel-cell-color-hover: #1b61dd; - --ix-date-picker-panel-cell-color-disabled: #687080; - --ix-date-picker-panel-cell-bg-color-hover: #171a1f; - --ix-date-picker-panel-cell-bg-color-active: #4083e8; - --ix-date-picker-panel-cell-bg-color-in-range: #151d33; - --ix-date-picker-panel-cell-bg-color-disabled: #171a1f; - --ix-date-picker-panel-cell-trigger-width: 20px; - --ix-date-picker-panel-cell-trigger-height: 20px; - --ix-date-picker-panel-cell-trigger-width-lg: 52px; - --ix-date-picker-panel-cell-trigger-height-lg: 24px; - --ix-date-picker-panel-cell-current-color: #4083e8; - --ix-date-picker-panel-cell-current-border-color: #16274a; - --ix-date-picker-panel-cell-current-bg-color: #4083e8; - --ix-date-picker-panel-heaer-height: 32px; - --ix-date-picker-panel-header-font-size: 12px; - --ix-date-picker-panel-header-font-weight: 400; - --ix-date-picker-panel-header-spacing: 16px; - --ix-date-picker-panel-body-header-bg-color: #171a1f; + --ix-progress-trail-bg-color: #1f2329; + --ix-progress-text-width: 36px; + --ix-progress-border-radius: 100px; + --ix-progress-line-size-sm: 2px; + --ix-progress-line-size-md: 6px; + --ix-progress-line-size-lg: 8px; + --ix-progress-line-font-size-sm: 12px; + --ix-progress-line-font-size-md: 12px; + --ix-progress-line-font-size-lg: 14px; + --ix-progress-line-text-padding: 0 0 0 8px; + --ix-progress-circle-width: 120px; + --ix-progress-circle-font-size: 24px; +} + +/* ------ radio css variables ------ */ +:root { + --ix-radio-label-padding: 0 4px; + --ix-radio-fieldset-border-radius: 2px; + --ix-radio-fieldset-bg-color: #171a1f; + --ix-radio-fieldset-border-color: #1f2329; } /* ------ rate css variables ------ */ @@ -632,105 +771,93 @@ --ix-rate-item-outline-focus: 1px dashed #db941d; } -/* ------ popconfirm css variables ------ */ +/* ------ result css variables ------ */ :root { - --ix-popconfirm-font-size: 12px; - --ix-popconfirm-title-font-size: 14px; - --ix-popconfirm-color: #f4f8ff; - --ix-popconfirm-icon-color: #fdaa1d; - --ix-popconfirm-min-width: 240px; + --ix-result-padding: 48px 32px; + --ix-result-icon-size: 48px; + --ix-result-title-font-size: 20px; + --ix-result-title-line-height: 32px; + --ix-result-subtitle-font-size: 12px; + --ix-result-subtitle-line-height: 18px; + --ix-result-subtitle-margin-top: 4px; + --ix-result-extra-margin-top: 24px; + --ix-result-content-margin-top: 24px; + --ix-result-content-padding: 24px 40px; } -/* ------ timeline css variables ------ */ +/* ------ select css variables ------ */ :root { - --ix-timeline-font-size: 12px; - --ix-timeline-dot-size: 12px; - --ix-timeline-dot-border-width: 2px; - --ix-timeline-content-label-margin-top: 8px; - --ix-timeline-line-width: 2px; - --ix-timeline-line-bg-color: #1f2329; - --ix-timeline-pending-item-content-min-width: 40px; - --ix-timeline-content-margin-bottom: 20px; -} - -/* ------ tree css variables ------ */ -:root { - --ix-tree-drop-line-width: 2px; - --ix-tree-drop-line-color: #1b61dd; - --ix-tree-bg-color: #0a0c0f; - --ix-tree-node-bg-color-hover: #171a1f; - --ix-tree-node-bg-color-selected: #0a0c0f; - --ix-tree-node-color-selected: #4083e8; - --ix-tree-node-padding-vertical: 0px; - --ix-tree-node-content-height: 32px; - --ix-tree-node-content-padding: 0 8px 0 4px; - --ix-tree-node-content-label-padding: 0 4px; - --ix-tree-node-content-label-highlight-color: #4083e8; - --ix-tree-node-checkbox-margin: 0 4px 0 4px; - --ix-tree-node-icon-width: 24px; - --ix-tree-expand-icon-color: #687080; + --ix-select-option-font-size: 12px; + --ix-select-option-height: 32px; + --ix-select-option-padding: 8px 12px; + --ix-select-option-label-margin-left: 8px; + --ix-select-option-container-padding: 4px 0; + --ix-select-option-group-margin: 0 12; + --ix-select-option-group-padding-left: 0; + --ix-select-multiple-option-grouped-padding-left: 12px; + --ix-select-option-grouped-padding-left: 24px; + --ix-select-overlay-search-wrapper-padding: 4px 12px 8px; } -/* ------ pagination css variables ------ */ +/* ------ skeleton css variables ------ */ :root { - --ix-pagination-font-size-sm: 12px; - --ix-pagination-font-size-md: 12px; - --ix-pagination-font-size-lg: 14px; - --ix-pagination-itme-padding-sm: 0; - --ix-pagination-item-padding-md: 4px; - --ix-pagination-item-padding-lg: 4px; - --ix-pagination-item-content-size-sm: 24px; - --ix-pagination-item-content-size-md: 24px; - --ix-pagination-item-content-size-lg: 32px; - --ix-pagination-out-line-color: #1b61dd; + --ix-skeleton-margin-bottom: 8px; + --ix-skeleton-loader-margin-bottom: 4px; + --ix-skeleton-start-color: #1f2329; + --ix-skeleton-end-color: #1f2329; } -/* ------ tour css variables ------ */ +/* ------ slider css variables ------ */ :root { - --ix-tour-bg-color: #0a0c0f; - --ix-tour-description-color: #f4f8ff; - --ix-tour-indicators-color: #808999; - --ix-tour-border-radius: 4px; - --ix-tour-min-width: 250px; - --ix-tour-padding-top: 16px; - --ix-tour-padding-left: 16px; - --ix-tour-padding-right: 16px; - --ix-tour-padding-bottom: 16px; - --ix-tour-description-font-size: 12px; - --ix-tour-indicators-font-size: 12px; - --ix-tour-footer-btn-gap: 4px; + --ix-slider-rail-size: 2px; + --ix-slider-mark-label-color: #525966; + --ix-slider-mark-label-color-active: #f4f8ff; + --ix-slider-dot-bg-color: #1f2329; + --ix-slider-dot-bg-color-disabled: #1f2329; + --ix-slider-dot-bg-color-active: #4083e8; + --ix-slider-rail-bg-color: #1f2329; + --ix-slider-rail-bg-color-hover: #1f2329; + --ix-slider-track-bg-color: #4083e8; + --ix-slider-track-bg-color-hover: #4083e8; + --ix-slider-track-bg-color-disabled: #1f2329; + --ix-slider-thumb-bg-color: #ffffff; + --ix-slider-thumb-border-color: #4083e8; + --ix-slider-thumb-border-color-hover: #4083e8; + --ix-slider-thumb-border-color-disabled: #1f2329; + --ix-slider-thumb-border-width: 2px; + --ix-slider-thumb-border-type: solid; + --ix-slider-thumb-border-color-focus: #4083e8; + --ix-slider-thumb-box-shadow-focus: 0 0 0 5px rgba(64, 131, 232, 0.12); + --ix-slider-thumb-size: 10px; } -/* ------ transfer css variables ------ */ +/* ------ space css variables ------ */ :root { - --ix-transfer-height: 290px; - --ix-transfer-content-width: 260px; - --ix-transfer-header-height: 40px; - --ix-transfer-suffix-margin-left: 12px; - --ix-transfer-footer-height: 40px; - --ix-transfer-content-padding: 0 8px 0 12px; - --ix-transfer-opr-min-width: 4px; - --ix-transfer-opr-padding: 8px; - --ix-transfer-opr-button-width: 24px; - --ix-transfer-opr-button-height: 32px; - --ix-transfer-opr-button-gap: 8px; - --ix-transfer-search-width: 110px; - --ix-transfer-list-item-min-height: 32px; - --ix-transfer-close-icon-padding: 0 12px; + --ix-space-separator-color: #1f2329; } -/* ------ radio css variables ------ */ +/* ------ spin css variables ------ */ :root { - --ix-radio-label-padding: 0 4px; - --ix-radio-fieldset-border-radius: 2px; - --ix-radio-fieldset-bg-color: #171a1f; - --ix-radio-fieldset-border-color: #1f2329; + --ix-spin-tip-color: #4083e8; + --ix-spin-icon-color: #4083e8; + --ix-spin-font-size-sm: 12px; + --ix-spin-font-size-md: 14px; + --ix-spin-font-size-lg: 16px; + --ix-spin-icon-size-sm: 20px; + --ix-spin-icon-size-md: 28px; + --ix-spin-icon-size-lg: 48px; + --ix-spin-bg-circle-stroke: #4083e8; + --ix-spin-fst-arch-stroke: #40c695; + --ix-spin-snd-arch-stroke: #3c424d; } -/* ------ loading-bar css variables ------ */ +/* ------ statistic css variables ------ */ :root { - --ix-loading-bar-height: 2px; - --ix-loading-bar-loading-color: #4083e8; + --ix-statistic-font-size-sm: 14px; + --ix-statistic-font-size-md: 14px; + --ix-statistic-font-size-lg: 24px; + --ix-statistic-font-size-xl: 30px; + --ix-statistic-color: #f4f8ff; } /* ------ stepper css variables ------ */ @@ -752,6 +879,23 @@ --ix-stepper-line-type: dashed; } +/* ------ switch css variables ------ */ +:root { + --ix-switch-active-disabled-color: #173b7a; + --ix-switch-height-sm: 16px; + --ix-switch-height-md: 24px; + --ix-switch-height-lg: 32px; + --ix-switch-handle-size-sm: 12px; + --ix-switch-handle-size-md: 20px; + --ix-switch-handle-size-lg: 28px; + --ix-switch-icon-font-size-sm: 9px; + --ix-switch-icon-font-size-md: 14px; + --ix-switch-icon-font-size-lg: 14px; + --ix-switch-handle-padding: 2px; + --ix-switch-handle-bg-color: #fff; + --ix-switch-handle-box-shadow: none; +} + /* ------ table css variables ------ */ :root { --ix-table-font-size-sm: 12px; @@ -792,92 +936,69 @@ --ix-tabs-panel-padding-size: 16px; } -/* ------ progress css variables ------ */ -:root { - --ix-progress-trail-bg-color: #1f2329; - --ix-progress-text-width: 36px; - --ix-progress-border-radius: 100px; - --ix-progress-line-size-sm: 2px; - --ix-progress-line-size-md: 6px; - --ix-progress-line-size-lg: 8px; - --ix-progress-line-font-size-sm: 12px; - --ix-progress-line-font-size-md: 12px; - --ix-progress-line-font-size-lg: 14px; - --ix-progress-line-text-padding: 0 0 0 8px; - --ix-progress-circle-width: 120px; - --ix-progress-circle-font-size: 24px; -} - -/* ------ select css variables ------ */ -:root { - --ix-select-option-font-size: 12px; - --ix-select-option-height: 32px; - --ix-select-option-padding: 8px 12px; - --ix-select-option-label-margin-left: 8px; - --ix-select-option-container-padding: 4px 0; - --ix-select-option-group-margin: 0 12; - --ix-select-option-group-padding-left: 0; - --ix-select-multiple-option-grouped-padding-left: 12px; - --ix-select-option-grouped-padding-left: 24px; - --ix-select-overlay-search-wrapper-padding: 4px 12px 8px; -} - -/* ------ statistic css variables ------ */ -:root { - --ix-statistic-font-size-sm: 14px; - --ix-statistic-font-size-md: 14px; - --ix-statistic-font-size-lg: 24px; - --ix-statistic-font-size-xl: 30px; - --ix-statistic-color: #f4f8ff; -} - -/* ------ space css variables ------ */ +/* ------ tag css variables ------ */ :root { - --ix-space-separator-color: #1f2329; + --ix-tag-bg-color-filled: #99acd1; + --ix-tag-border-width: 1px; + --ix-tag-border-radius: 2px; + --ix-tag-min-width-rect: 40px; + --ix-tag-min-width-round: 48px; + --ix-tag-min-width-numeric: 64px; + --ix-tag-success-bg-color: rgba(64, 198, 149, 0.2); + --ix-tag-info-bg-color: rgba(64, 131, 232, 0.2); + --ix-tag-warning-bg-color: rgba(253, 170, 29, 0.2); + --ix-tag-risk-bg-color: rgba(232, 134, 65, 0.2); + --ix-tag-error-bg-color: rgba(232, 81, 76, 0.2); + --ix-tag-fatal-bg-color: rgba(143, 30, 31, 0.2); } -/* ------ tree-select css variables ------ */ +/* ------ textarea css variables ------ */ :root { - --ix-tree-select-option-font-size: 12px; - --ix-tree-select-option-height: 32px; - --ix-tree-select-option-padding: 8px 12px; - --ix-tree-select-option-margin-left: 8px; - --ix-tree-select-option-container-padding: 4px 0; - --ix-tree-select-option-container-tree-node-padding: 0 0 0 8px; - --ix-tree-select-overlay-search-wrapper-padding: 4px 12px 8px; + --ix-textarea-count-bottom: 1px; + --ix-textarea-count-right: 8px; + --ix-textarea-count-opacity: 0.9; + --ix-textarea-count-color: #525966; } -/* ------ result css variables ------ */ +/* ------ time-picker css variables ------ */ :root { - --ix-result-padding: 48px 32px; - --ix-result-icon-size: 48px; - --ix-result-title-font-size: 20px; - --ix-result-title-line-height: 32px; - --ix-result-subtitle-font-size: 12px; - --ix-result-subtitle-line-height: 18px; - --ix-result-subtitle-margin-top: 4px; - --ix-result-extra-margin-top: 24px; - --ix-result-content-margin-top: 24px; - --ix-result-content-padding: 24px 40px; + --ix-time-picker-separator-margin-horizontal: 24px; + --ix-time-picker-overlay-width: 200px; + --ix-time-picker-overlay-padding: 8px 8px 0 8px; + --ix-time-picker-overlay-footer-padding: 8px 16px; + --ix-time-picker-range-board-width: 184px; + --ix-time-picker-range-board-border: none; + --ix-time-picker-range-overlay-padding: 16px 16px 0 16px; + --ix-time-picker-range-overlay-footer-padding: 8px 0; + --ix-time-picker-range-overlay-separator-padding: 2px 10px; + --ix-time-picker-range-overlay-separator-font-size: 12px; + --ix-time-picker-panel-height: 224px; + --ix-time-picker-panel-padding-horizontal: 8px; + --ix-time-picker-panel-padding-vertical: 8px; + --ix-time-picker-panel-font-size: 12px; + --ix-time-picker-panel-cell-height: 32px; + --ix-time-picker-panel-cell-padding-horizontal: 8px; + --ix-time-picker-panel-cell-color: #808999; + --ix-time-picker-panel-cell-color-active: #f4f8ff; + --ix-time-picker-panel-cell-bg-color-hover: transparent; + --ix-time-picker-panel-cell-bg-color-active: transparent; + --ix-time-picker-panel-cell-font-weight-active: 600; + --ix-time-picker-panel-scrollbar-width: 6px; + --ix-time-picker-panel-scrollbar-thumb-bg-color: #1f2329; + --ix-time-picker-panel-scrollbar-thumb-border-radius: 10px; + --ix-time-picker-panel-scrollbar-track-bg-color: unset; } -/* ------ header css variables ------ */ +/* ------ timeline css variables ------ */ :root { - --ix-header-height-sm: 40px; - --ix-header-height-md: 48px; - --ix-header-height-lg: 48px; - --ix-header-height-xl: 56px; - --ix-header-bar-width: 4px; - --ix-header-bar-bg-color: #4083e8; - --ix-header-prefix-color: #f4f8ff; - --ix-header-prefix-color-hover: #4083e8; - --ix-header-prefix-color-active: #4083e8; - --ix-header-prefix-color-disabled: #687080; - --ix-header-suffix-color: #a1a7b3; - --ix-header-suffix-color-hover: #4083e8; - --ix-header-suffix-color-active: #6aa6f4; - --ix-header-suffix-color-disabled: #687080; - --ix-header-sub-title-font-size: 14px; + --ix-timeline-font-size: 12px; + --ix-timeline-dot-size: 12px; + --ix-timeline-dot-border-width: 2px; + --ix-timeline-content-label-margin-top: 8px; + --ix-timeline-line-width: 2px; + --ix-timeline-line-bg-color: #1f2329; + --ix-timeline-pending-item-content-min-width: 40px; + --ix-timeline-content-margin-bottom: 20px; } /* ------ tooltip css variables ------ */ @@ -888,197 +1009,76 @@ --ix-tooltip-max-width: 400px; } -/* ------ upload css variables ------ */ -:root { - --ix-upload-selector-dragable-border: 1px dashed #3c424d; - --ix-upload-selector-dragable-border-dragover: 1px dashed #4083e8; - --ix-upload-list-name-max-width: calc(100% - 74px); - --ix-upload-list-img-thumb-width: 48px; - --ix-upload-list-img-thumb-height: 48px; - --ix-upload-list-img-card-height: 96px; - --ix-upload-list-img-card-width: 96px; -} - -/* ------ switch css variables ------ */ -:root { - --ix-switch-active-disabled-color: #173b7a; - --ix-switch-height-sm: 16px; - --ix-switch-height-md: 24px; - --ix-switch-height-lg: 32px; - --ix-switch-handle-size-sm: 12px; - --ix-switch-handle-size-md: 20px; - --ix-switch-handle-size-lg: 28px; - --ix-switch-icon-font-size-sm: 9px; - --ix-switch-icon-font-size-md: 14px; - --ix-switch-icon-font-size-lg: 14px; - --ix-switch-handle-padding: 2px; - --ix-switch-handle-bg-color: #fff; - --ix-switch-handle-box-shadow: none; -} - -/* ------ spin css variables ------ */ -:root { - --ix-spin-tip-color: #4083e8; - --ix-spin-icon-color: #4083e8; - --ix-spin-font-size-sm: 12px; - --ix-spin-font-size-md: 14px; - --ix-spin-font-size-lg: 16px; - --ix-spin-icon-size-sm: 20px; - --ix-spin-icon-size-md: 28px; - --ix-spin-icon-size-lg: 48px; - --ix-spin-bg-circle-stroke: #4083e8; - --ix-spin-fst-arch-stroke: #40c695; - --ix-spin-snd-arch-stroke: #3c424d; -} - -/* ------ 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); -} - -/* ------ 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; -} - -/* ------ message css variables ------ */ +/* ------ tour css variables ------ */ :root { - --ix-message-margin: 8px; - --ix-message-font-size: 14px; - --ix-message-border-width: 1px; - --ix-message-border-type: solid; - --ix-message-border-color: #1f2329; - --ix-message-content-min-width: 128px; - --ix-message-content-max-width: 480px; - --ix-message-content-padding-vertical: 8px; - --ix-message-content-padding-horizontal: 16px; - --ix-message-bg-color: #0a0c0f; - --ix-message-border-radius: 4px; - --ix-message-icon-margin-right: 8px; - --ix-message-wrapper-top: 15%; + --ix-tour-bg-color: #0a0c0f; + --ix-tour-description-color: #f4f8ff; + --ix-tour-indicators-color: #808999; + --ix-tour-border-radius: 4px; + --ix-tour-min-width: 250px; + --ix-tour-padding-top: 16px; + --ix-tour-padding-left: 16px; + --ix-tour-padding-right: 16px; + --ix-tour-padding-bottom: 16px; + --ix-tour-description-font-size: 12px; + --ix-tour-indicators-font-size: 12px; + --ix-tour-footer-btn-gap: 4px; } -/* ------ slider css variables ------ */ +/* ------ transfer css variables ------ */ :root { - --ix-slider-rail-size: 2px; - --ix-slider-mark-label-color: #525966; - --ix-slider-mark-label-color-active: #f4f8ff; - --ix-slider-dot-bg-color: #1f2329; - --ix-slider-dot-bg-color-disabled: #1f2329; - --ix-slider-dot-bg-color-active: #4083e8; - --ix-slider-rail-bg-color: #1f2329; - --ix-slider-rail-bg-color-hover: #1f2329; - --ix-slider-track-bg-color: #4083e8; - --ix-slider-track-bg-color-hover: #4083e8; - --ix-slider-track-bg-color-disabled: #1f2329; - --ix-slider-thumb-bg-color: #ffffff; - --ix-slider-thumb-border-color: #4083e8; - --ix-slider-thumb-border-color-hover: #4083e8; - --ix-slider-thumb-border-color-disabled: #1f2329; - --ix-slider-thumb-border-width: 2px; - --ix-slider-thumb-border-type: solid; - --ix-slider-thumb-border-color-focus: #4083e8; - --ix-slider-thumb-box-shadow-focus: 0 0 0 5px rgba(64, 131, 232, 0.12); - --ix-slider-thumb-size: 10px; + --ix-transfer-height: 290px; + --ix-transfer-content-width: 260px; + --ix-transfer-header-height: 40px; + --ix-transfer-suffix-margin-left: 12px; + --ix-transfer-footer-height: 40px; + --ix-transfer-content-padding: 0 8px 0 12px; + --ix-transfer-opr-min-width: 4px; + --ix-transfer-opr-padding: 8px; + --ix-transfer-opr-button-width: 24px; + --ix-transfer-opr-button-height: 32px; + --ix-transfer-opr-button-gap: 8px; + --ix-transfer-search-width: 110px; + --ix-transfer-list-item-min-height: 32px; + --ix-transfer-close-icon-padding: 0 12px; } -/* ------ tag css variables ------ */ +/* ------ tree css variables ------ */ :root { - --ix-tag-bg-color-filled: #99acd1; - --ix-tag-border-width: 1px; - --ix-tag-border-radius: 2px; - --ix-tag-min-width-rect: 40px; - --ix-tag-min-width-round: 48px; - --ix-tag-min-width-numeric: 64px; - --ix-tag-success-bg-color: rgba(64, 198, 149, 0.2); - --ix-tag-info-bg-color: rgba(64, 131, 232, 0.2); - --ix-tag-warning-bg-color: rgba(253, 170, 29, 0.2); - --ix-tag-risk-bg-color: rgba(232, 134, 65, 0.2); - --ix-tag-error-bg-color: rgba(232, 81, 76, 0.2); - --ix-tag-fatal-bg-color: rgba(143, 30, 31, 0.2); + --ix-tree-drop-line-width: 2px; + --ix-tree-drop-line-color: #1b61dd; + --ix-tree-bg-color: #0a0c0f; + --ix-tree-node-bg-color-hover: #171a1f; + --ix-tree-node-bg-color-selected: #0a0c0f; + --ix-tree-node-color-selected: #4083e8; + --ix-tree-node-padding-vertical: 0px; + --ix-tree-node-content-height: 32px; + --ix-tree-node-content-padding: 0 8px 0 4px; + --ix-tree-node-content-label-padding: 0 4px; + --ix-tree-node-content-label-highlight-color: #4083e8; + --ix-tree-node-checkbox-margin: 0 4px 0 4px; + --ix-tree-node-icon-width: 24px; + --ix-tree-expand-icon-color: #687080; } -/* ------ notification css variables ------ */ +/* ------ tree-select css variables ------ */ :root { - --ix-notification-padding: 8px 8px 8px 16px; - --ix-notification-margin: 0 0 8px 0; - --ix-notification-width: 384px; - --ix-notification-max-width: calc(100vw - 48px); - --ix-notification-border-width: 1px; - --ix-notification-border-type: solid; - --ix-notification-border-color: #1f2329; - --ix-notification-font-size: 14px; - --ix-notification-bg-color: #0a0c0f; - --ix-notification-border-radius: 2px; - --ix-notification-icon-margin: 4px 8px; - --ix-notification-icon-wrapper-width: 44px; - --ix-notification-title-font-size: 14px; - --ix-notification-title-line-height: 24px; - --ix-notification-title-margin: 0 24px 8px 0; - --ix-notification-content-font-size: 12px; - --ix-notification-content-color: #808999; - --ix-notification-content-margin: 0 16px 0 0; - --ix-notification-close-icon-top: 8px; - --ix-notification-close-icon-right: 8px; - --ix-notification-footer-margin: 8px 0 0 0; + --ix-tree-select-option-font-size: 12px; + --ix-tree-select-option-height: 32px; + --ix-tree-select-option-padding: 8px 12px; + --ix-tree-select-option-margin-left: 8px; + --ix-tree-select-option-container-padding: 4px 0; + --ix-tree-select-option-container-tree-node-padding: 0 0 0 8px; + --ix-tree-select-overlay-search-wrapper-padding: 4px 12px 8px; } -/* ------ textarea css variables ------ */ +/* ------ upload css variables ------ */ :root { - --ix-textarea-count-bottom: 1px; - --ix-textarea-count-right: 8px; - --ix-textarea-count-opacity: 0.9; - --ix-textarea-count-color: #525966; + --ix-upload-selector-dragable-border: 1px dashed #3c424d; + --ix-upload-selector-dragable-border-dragover: 1px dashed #4083e8; + --ix-upload-list-name-max-width: calc(100% - 74px); + --ix-upload-list-img-thumb-width: 48px; + --ix-upload-list-img-thumb-height: 48px; + --ix-upload-list-img-card-height: 96px; + --ix-upload-list-img-card-width: 96px; } diff --git a/packages/components/date-picker/docs/Theme.zh.md b/packages/components/date-picker/docs/Theme.zh.md index fb2d55534..2ee75b2a0 100644 --- a/packages/components/date-picker/docs/Theme.zh.md +++ b/packages/components/date-picker/docs/Theme.zh.md @@ -1,85 +1,40 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@date-picker-line-height` | `@form-line-height` | - | - | -| `@date-picker-color` | `@form-color` | - | - | -| `@date-range-picker-trigger-separator-margin` | `@spacing-xl` | - | - | -| `@date-panel-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@date-panel-color` | `@text-color` | - | - | -| `@date-panel-color-inverse` | `@text-color-inverse` | - | - | -| `@date-panel-active-color` | `@color-primary` | - | - | -| `@date-panel-in-range-color` | `@color-blue-l50` | - | - | -| `@date-panel-disabled-color` | `@text-color-disabled` | - | - | -| `@date-panel-disabled-background-color` | `@color-graphite-l50` | - | - | -| `@date-panel-background-color` | `@background-color-component` | - | - | -| `@date-panel-border-width` | `@border-width-sm` | - | - | -| `@date-panel-border-style` | `@border-style` | - | - | -| `@date-panel-border-color` | `@border-color` | - | - | -| `@date-panel-header-padding` | `0 0 @spacing-xs 0` | - | - | -| `@date-panel-header-height` | `@height-md` | - | - | -| `@date-panel-header-item-padding` | `0 @spacing-xs` | - | - | -| `@date-panel-header-border-bottom` | `none` | - | - | -| `@date-panel-header-button-font-size` | `@font-size-lg` | - | - | -| `@date-panel-header-button-font-weight` | `@font-weight-lg` | `@font-weight-md` | - | -| `@date-panel-header-content-spacing` | `@spacing-lg` | - | - | -| `@date-panel-header-content-font-size` | `@font-size-lg` | `@font-size-sm` | - | -| `@date-panel-header-content-font-weight` | `@font-weight-lg` | - | - | -| `@date-panel-header-padding-lg` | `0 0 @spacing-2xl` | - | - | -| `@date-panel-body-padding` | `0` | - | - | -| `@date-panel-body-padding-lg` | `0` | - | - | -| `@date-panel-body-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@date-panel-body-header-margin-bottom` | `@spacing-md` | - | - | -| `@date-panel-body-header-font-weight` | `@font-weight-md` | - | - | -| `@date-panel-body-header-background-color` | `@color-graphite-l50` | - | - | -| `@date-panel-cell-width` | `28px` | - | - | -| `@date-panel-cell-height` | `28px` | - | - | -| `@date-panel-cell-width-lg` | `52px` | - | - | -| `@date-panel-cell-height-lg` | `24px` | - | - | -| `@date-panel-cell-padding` | `2px 0` | - | - | -| `@date-panel-cell-inner-padding` | `4px` | - | - | -| `@date-panel-cell-padding-lg` | `@spacing-lg 0` | - | - | -| `@date-panel-cell-inner-padding-lg` | `0` | - | - | -| `@date-panel-cell-trigger-width` | `20px` | - | - | -| `@date-panel-cell-trigger-height` | `20px` | - | - | -| `@date-panel-cell-trigger-width-lg` | `52px` | - | - | -| `@date-panel-cell-trigger-height-lg` | `24px` | - | - | -| `@date-panel-cell-border-radius` | `@border-radius-full` | - | - | -| `@date-panel-cell-border-radius-lg` | `@border-radius-sm` | - | - | -| `@date-panel-cell-hover-background-color` | `@color-graphite-l50` | - | - | -| `@date-panel-cell-hover-color` | `@color-primary` | - | - | -| `@date-panel-cell-current-border-color` | `@color-blue-l40` | - | - | -| `@date-panel-cell-current-color` | `@color-primary` | - | - | -| `@date-picker-overlay-footer-border-width` | `@form-border-width` | - | - | -| `@date-picker-overlay-footer-border-style` | `@form-border-style` | - | - | -| `@date-picker-overlay-footer-border-color` | `@form-border-color` | - | - | -| `@date-picker-overlay-footer-padding` | `@spacing-sm @spacing-lg` | - | - | -| `@date-picker-overlay-footer-button-margin-left` | `@spacing-sm` | - | - | -| `@date-picker-overlay-width` | `252px` | - | - | -| `@date-picker-overlay-border-radius` | `@border-radius-sm` | - | - | -| `@date-picker-overlay-box-shadow` | `@shadow-bottom-md` | - | - | -| `@date-picker-overlay-date-input-width` | `120px` | - | - | -| `@date-picker-overlay-time-input-width` | `96px` | - | - | -| `@date-picker-overlay-input-gap` | `@spacing-xs` | - | - | -| `@date-picker-overlay-padding` | `@spacing-lg @spacing-lg @spacing-lg @spacing-lg` | - | - | -| `@date-picker-overlay-body-padding` | `0` | - | - | -| `@date-picker-overlay-inputs-margin-bottom` | `@spacing-sm` | - | - | -| `@date-range-picker-overlay-padding` | `@spacing-lg @spacing-lg 0 @spacing-lg` | - | - | -| `@date-range-picker-overlay-body-padding` | `0 0 @spacing-sm 0` | - | - | -| `@date-range-picker-overlay-separator-width` | `@spacing-2xl` | - | - | -| `@date-range-picker-overlay-separator-padding` | `1px 0 0 0` | `4px 0 0 0` | - | -| `@date-range-picker-overlay-separator-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@date-range-picker-overlay-footer-border-width` | `@date-picker-overlay-footer-border-width` | - | - | -| `@date-range-picker-overlay-footer-border-style` | `@date-picker-overlay-footer-border-style` | - | - | -| `@date-range-picker-overlay-footer-border-color` | `@color-graphite-l30` | - | - | -| `@date-range-picker-overlay-footer-padding` | `@spacing-sm 0` | - | - | -| `@date-range-picker-overlay-footer-button-margin-left` | `@date-picker-overlay-footer-button-margin-left` | - | - | -| `@date-picker-panel-width` | `220px` | - | - | -| `@date-picker-panel-max-height` | `260px` | - | - | -| `@date-range-picker-panel-width` | `220px` | - | - | -| `@date-range-picker-panel-max-height` | `260px` | - | - | -| `@date-range-picker-panel-border-width` | `0` | - | - | -| `@date-range-picker-panel-border-style` | `none` | - | - | -| `@date-range-picker-panel-border-color` | `none` | - | - | -| `@date-range-picker-panel-border-radius` | `0` | - | - | -| `@date-range-picker-panel-separator-margin` | `0 @spacing-lg` | - | - | -| `@date-range-picker-panel-separator-width` | `0` | - | - | -| `@date-range-picker-panel-separator-color` | `none` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `boardMaxHeight` | | `number` | `260` | `260` | +| `boardWidth` | | `number` | `220` | `220` | +| `overlayDateInputWidth` | | `number` | `120` | `120` | +| `overlayFooterPadding` | | `string | number` | `8px 16px` | `8px 16px` | +| `overlayPadding` | | `string | number` | `16` | `16` | +| `overlayTimeInputWidth` | | `number` | `96` | `96` | +| `overlayWidth` | | `number` | `252` | `252` | +| `panelBodyHeaderBgColor` | | `string` | `#f7f9fc` | `#171A1F` | +| `panelCellBgColorActive` | | `string` | `#1c6eff` | `#4083E8` | +| `panelCellBgColorDisabled` | | `string` | `#f7f9fc` | `#171A1F` | +| `panelCellBgColorHover` | | `string` | `#f7f9fc` | `#171A1F` | +| `panelCellBgColorInRange` | | `string` | `#e8f4ff` | `#151D33` | +| `panelCellColorActive` | | `string` | `#ffffff` | `#fff` | +| `panelCellColorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `panelCellColorHover` | | `string` | `#458fff` | `#1B61DD` | +| `panelCellCurrentBgColor` | | `string` | `#1c6eff` | `#4083E8` | +| `panelCellCurrentBorderColor` | | `string` | `#bfdfff` | `#16274A` | +| `panelCellCurrentColor` | | `string` | `#1c6eff` | `#4083E8` | +| `panelCellHeight` | | `number` | `28` | `28` | +| `panelCellHeightLg` | | `number` | `24` | `24` | +| `panelCellTriggerHeight` | | `number` | `20` | `20` | +| `panelCellTriggerHeightLg` | | `number` | `24` | `24` | +| `panelCellTriggerWidth` | | `number` | `20` | `20` | +| `panelCellTriggerWidthLg` | | `number` | `52` | `52` | +| `panelCellWidth` | | `number` | `28` | `28` | +| `panelCellWidthLg` | | `number` | `52` | `52` | +| `panelColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `panelFontSize` | | `number` | `12` | `12` | +| `panelHeaderFontSize` | | `number` | `12` | `12` | +| `panelHeaderFontWeight` | | `number` | `400` | `400` | +| `panelHeaderSpacing` | | `number` | `16` | `16` | +| `panelHeaerHeight` | | `number` | `32` | `32` | +| `rangeBoardBorder` | | `string` | `none` | `none` | +| `rangeOverlayFooterPadding` | | `string | number` | `8px 0` | `8px 0` | +| `rangeOverlayPadding` | | `string | number` | `16px 16px 0 16px` | `16px 16px 0 16px` | +| `rangeOverlaySeparatorFontSize` | | `number` | `12` | `12` | +| `rangeOverlaySeparatorWidth` | | `string | number` | `32` | `32` | +| `separatorMarginHorizontal` | | `string | number` | `16` | `16` | diff --git a/packages/components/default.full.css b/packages/components/default.full.css index 0e71fac7b..0930ad252 100644 --- a/packages/components/default.full.css +++ b/packages/components/default.full.css @@ -275,12 +275,15 @@ --ix-reset-scrollbar-track-box-shadow: unset; } -/* ------ avatar css variables ------ */ +/* ------ alert css variables ------ */ :root { - --ix-avatar-size-sm: 24px; - --ix-avatar-size-md: 32px; - --ix-avatar-size-lg: 40px; - --ix-avatar-border-radius-square: 2px; + --ix-alert-height: 32px; + --ix-alert-border-radius: 2px; + --ix-alert-success-bg-color: rgba(18, 166, 121, 0.1); + --ix-alert-info-bg-color: rgba(28, 110, 255, 0.1); + --ix-alert-warning-bg-color: rgba(253, 170, 29, 0.1); + --ix-alert-error-bg-color: rgba(255, 87, 82, 0.1); + --ix-alert-offline-bg-color: rgba(111, 119, 133, 0.1); } /* ------ anchor css variables ------ */ @@ -289,6 +292,14 @@ --ix-anchor-ink-ball-height: 16px; } +/* ------ 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; +} + /* ------ back-top css variables ------ */ :root { --ix-back-top-size-lg: 64px; @@ -309,6 +320,89 @@ --ix-badge-count-size: 16px; } +/* ------ breadcrumb css variables ------ */ +:root { + --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: 12px; + --ix-breadcrumb-last-item-color: #2f3540; + --ix-breadcrumb-separator-margin: 0 4px; +} + +/* ------ 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: #2f3540; + --ix-button-color-disabled: #bec3cc; + --ix-button-bg-color: #ffffff; + --ix-button-bg-color-disabled: #e1e5eb; + --ix-button-border-color: #d3d7de; + --ix-button-border-radius: 2px; + --ix-button-primary-color: #ffffff; + --ix-button-primary-bg-color: #1c6eff; + --ix-button-primary-bg-color-hover: #458fff; + --ix-button-primary-bg-color-active: #0d51d9; + --ix-button-danger-color: #cf171d; + --ix-button-danger-color-hover: #f52727; + --ix-button-danger-color-active: #cf171d; + --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; + --ix-button-ghost-bg-color-disabled: rgba(255, 255, 255, 0.4); + --ix-button-icon-color: inherit; + --ix-button-icon-font-size: 16px; +} + +/* ------ 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: 0; + --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: #edf1f7; + --ix-card-loading-end-color: #e1e5eb; + --ix-card-grid-width: 25%; +} + /* ------ carousel css variables ------ */ :root { --ix-carousel-arrow-size: 32px; @@ -324,18 +418,6 @@ --ix-carousel-icon-opacity-active: 0.8; } -/* ------ breadcrumb css variables ------ */ -:root { - --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: 12px; - --ix-breadcrumb-last-item-color: #2f3540; - --ix-breadcrumb-separator-margin: 0 4px; -} - /* ------ cascader css variables ------ */ :root { --ix-cascader-option-font-size: 12px; @@ -356,6 +438,18 @@ --ix-checkbox-fieldset-border-color: #e1e5eb; } +/* ------ collapse css variables ------ */ +:root { + --ix-collapse-font-size-sm: 12px; + --ix-collapse-font-size-md: 12px; + --ix-collapse-expand-icon-size-sm: 20px; + --ix-collapse-expand-icon-size-md: 24px; + --ix-collapse-padding-horizontal-sm: 12px; + --ix-collapse-padding-horizontal-md: 16px; + --ix-collapse-panel-header-bg-color: #ffffff; + --ix-collapse-panel-content-bg-color: #f7f9fc; +} + /* ------ comment css variables ------ */ :root { --ix-comment-nest-indent: 44px; @@ -365,17 +459,72 @@ --ix-comment-action-color-hover: #2f3540; } -/* ------ form css variables ------ */ +/* ------ date-picker css variables ------ */ :root { - --ix-form-label-color: #6f7785; - --ix-form-label-required-color: #cf171d; - --ix-form-label-font-size: 12px; - --ix-form-label-colon-margin-left: 2px; - --ix-form-label-colon-margin-right: 8px; - --ix-form-message-tooltip-bg-color: #ff5752; - --ix-form-item-margin-bottom: 8px; - --ix-form-vertical-item-label-padding: 0 0 8px; - --ix-form-vertical-item-label-margin: 0; + --ix-date-picker-separator-margin-horizontal: 16px; + --ix-date-picker-overlay-width: 252px; + --ix-date-picker-overlay-padding: 16px; + --ix-date-picker-overlay-footer-padding: 8px 16px; + --ix-date-picker-overlay-date-input-width: 120px; + --ix-date-picker-overlay-time-input-width: 96px; + --ix-date-picker-board-width: 220px; + --ix-date-picker-board-max-height: 260px; + --ix-date-picker-range-board-border: none; + --ix-date-picker-range-overlay-padding: 16px 16px 0 16px; + --ix-date-picker-range-overlay-footer-padding: 8px 0; + --ix-date-picker-range-overlay-separator-width: 32px; + --ix-date-picker-range-overlay-separator-font-size: 12px; + --ix-date-picker-panel-font-size: 12px; + --ix-date-picker-panel-color: #2f3540; + --ix-date-picker-panel-cell-width: 28px; + --ix-date-picker-panel-cell-height: 28px; + --ix-date-picker-panel-cell-width-lg: 52px; + --ix-date-picker-panel-cell-height-lg: 24px; + --ix-date-picker-panel-cell-color-active: #ffffff; + --ix-date-picker-panel-cell-color-hover: #458fff; + --ix-date-picker-panel-cell-color-disabled: #bec3cc; + --ix-date-picker-panel-cell-bg-color-hover: #f7f9fc; + --ix-date-picker-panel-cell-bg-color-active: #1c6eff; + --ix-date-picker-panel-cell-bg-color-in-range: #e8f4ff; + --ix-date-picker-panel-cell-bg-color-disabled: #f7f9fc; + --ix-date-picker-panel-cell-trigger-width: 20px; + --ix-date-picker-panel-cell-trigger-height: 20px; + --ix-date-picker-panel-cell-trigger-width-lg: 52px; + --ix-date-picker-panel-cell-trigger-height-lg: 24px; + --ix-date-picker-panel-cell-current-color: #1c6eff; + --ix-date-picker-panel-cell-current-border-color: #bfdfff; + --ix-date-picker-panel-cell-current-bg-color: #1c6eff; + --ix-date-picker-panel-heaer-height: 32px; + --ix-date-picker-panel-header-font-size: 12px; + --ix-date-picker-panel-header-font-weight: 400; + --ix-date-picker-panel-header-spacing: 16px; + --ix-date-picker-panel-body-header-bg-color: #f7f9fc; +} + +/* ------ desc css variables ------ */ +:root { + --ix-desc-item-height-sm: 24px; + --ix-desc-item-height-md: 32px; + --ix-desc-item-height-lg: 40px; + --ix-desc-font-size-sm: 12px; + --ix-desc-font-size-md: 12px; + --ix-desc-font-size-lg: 12px; + --ix-desc-label-color: #6f7785; +} + +/* ------ divider css variables ------ */ +:root { + --ix-divider-line-width: 1px; + --ix-divider-line-color: #d3d7de; + --ix-divider-font-size-sm: 12px; + --ix-divider-font-size-md: 14px; + --ix-divider-font-size-lg: 16px; + --ix-divider-margin-vertical-sm: 12px; + --ix-divider-margin-vertical-md: 16px; + --ix-divider-margin-vertical-lg: 24px; + --ix-divider-margin-horizontal-sm: 4px; + --ix-divider-margin-horizontal-md: 8px; + --ix-divider-margin-horizontal-lg: 12px; } /* ------ drawer css variables ------ */ @@ -397,21 +546,6 @@ --ix-dropdown-menu-container-padding: 4px 0; } -/* ------ divider css variables ------ */ -:root { - --ix-divider-line-width: 1px; - --ix-divider-line-color: #d3d7de; - --ix-divider-font-size-sm: 12px; - --ix-divider-font-size-md: 14px; - --ix-divider-font-size-lg: 16px; - --ix-divider-margin-vertical-sm: 12px; - --ix-divider-margin-vertical-md: 16px; - --ix-divider-margin-vertical-lg: 24px; - --ix-divider-margin-horizontal-sm: 4px; - --ix-divider-margin-horizontal-md: 8px; - --ix-divider-margin-horizontal-lg: 12px; -} - /* ------ empty css variables ------ */ :root { --ix-empty-color: #a1a7b3; @@ -419,24 +553,69 @@ --ix-empty-desc-font-size: 16px; } -/* ------ desc css variables ------ */ +/* ------ form css variables ------ */ :root { - --ix-desc-item-height-sm: 24px; - --ix-desc-item-height-md: 32px; - --ix-desc-item-height-lg: 40px; - --ix-desc-font-size-sm: 12px; - --ix-desc-font-size-md: 12px; - --ix-desc-font-size-lg: 12px; - --ix-desc-label-color: #6f7785; + --ix-form-label-color: #6f7785; + --ix-form-label-required-color: #cf171d; + --ix-form-label-font-size: 12px; + --ix-form-label-colon-margin-left: 2px; + --ix-form-label-colon-margin-right: 8px; + --ix-form-message-tooltip-bg-color: #ff5752; + --ix-form-item-margin-bottom: 8px; + --ix-form-vertical-item-label-padding: 0 0 8px; + --ix-form-vertical-item-label-margin: 0; } -/* ------ layout css variables ------ */ +/* ------ header css variables ------ */ :root { - --ix-layout-sider-width: 224px; - --ix-layout-sider-collapsed-width: 44px; + --ix-header-height-sm: 40px; + --ix-header-height-md: 48px; + --ix-header-height-lg: 48px; + --ix-header-height-xl: 56px; + --ix-header-bar-width: 4px; + --ix-header-bar-bg-color: #1c6eff; + --ix-header-prefix-color: #2f3540; + --ix-header-prefix-color-hover: #1c6eff; + --ix-header-prefix-color-active: #1c6eff; + --ix-header-prefix-color-disabled: #bec3cc; + --ix-header-suffix-color: #5e6573; + --ix-header-suffix-color-hover: #1c6eff; + --ix-header-suffix-color-active: #0d51d9; + --ix-header-suffix-color-disabled: #bec3cc; + --ix-header-sub-title-font-size: 14px; } -/* ------ menu css variables ------ */ +/* ------ image css variables ------ */ +:root { + --ix-image-min-width: 96px; + --ix-image-min-height: 96px; + --ix-image-object-fit: contain; + --ix-image-preview-bg-color: rgba(0, 0, 0, 0.5); + --ix-image-preview-icon-color: #ffffff; + --ix-image-preview-icon-size: 20px; + --ix-image-viewer-bg-color: rgba(0, 0, 0, 0.45); + --ix-image-viewer-opr-color: #ffffff; + --ix-image-viewer-opr-color-disabled: rgba(255, 255, 255, 0.35); + --ix-image-viewer-opr-height: 48px; + --ix-image-viewer-opr-margin-bottom: 48px; + --ix-image-viewer-opr-font-size: 20px; + --ix-image-viewer-opr-bg-color: rgba(0, 0, 0, 0.1); + --ix-image-viewer-opr-item-margin: 0 24px; +} + +/* ------ layout css variables ------ */ +:root { + --ix-layout-sider-width: 224px; + --ix-layout-sider-collapsed-width: 44px; +} + +/* ------ loading-bar css variables ------ */ +:root { + --ix-loading-bar-height: 2px; + --ix-loading-bar-loading-color: #1c6eff; +} + +/* ------ menu css variables ------ */ :root { --ix-menu-border-radius: 0; --ix-menu-height: 32px; @@ -476,29 +655,21 @@ --ix-menu-dark-horizontal-item-bg-active: #454c59; } -/* ------ image css variables ------ */ -:root { - --ix-image-min-width: 96px; - --ix-image-min-height: 96px; - --ix-image-object-fit: contain; - --ix-image-preview-bg-color: rgba(0, 0, 0, 0.5); - --ix-image-preview-icon-color: #ffffff; - --ix-image-preview-icon-size: 20px; - --ix-image-viewer-bg-color: rgba(0, 0, 0, 0.45); - --ix-image-viewer-opr-color: #ffffff; - --ix-image-viewer-opr-color-disabled: rgba(255, 255, 255, 0.35); - --ix-image-viewer-opr-height: 48px; - --ix-image-viewer-opr-margin-bottom: 48px; - --ix-image-viewer-opr-font-size: 20px; - --ix-image-viewer-opr-bg-color: rgba(0, 0, 0, 0.1); - --ix-image-viewer-opr-item-margin: 0 24px; -} - -/* ------ popover css variables ------ */ +/* ------ message css variables ------ */ :root { - --ix-popover-font-size: 12px; - --ix-popover-color: #6f7785; - --ix-popover-min-width: 240px; + --ix-message-margin: 8px; + --ix-message-font-size: 14px; + --ix-message-border-width: 0; + --ix-message-border-type: solid; + --ix-message-border-color: none; + --ix-message-content-min-width: 128px; + --ix-message-content-max-width: 480px; + --ix-message-content-padding-vertical: 8px; + --ix-message-content-padding-horizontal: 16px; + --ix-message-bg-color: #ffffff; + --ix-message-border-radius: 4px; + --ix-message-icon-margin-right: 8px; + --ix-message-wrapper-top: 15%; } /* ------ modal css variables ------ */ @@ -510,115 +681,83 @@ --ix-modal-icon-size: 40px; } -/* ------ time-picker css variables ------ */ +/* ------ notification css variables ------ */ :root { - --ix-time-picker-separator-margin-horizontal: 24px; - --ix-time-picker-overlay-width: 200px; - --ix-time-picker-overlay-padding: 8px 8px 0 8px; - --ix-time-picker-overlay-footer-padding: 8px 16px; - --ix-time-picker-range-board-width: 184px; - --ix-time-picker-range-board-border: none; - --ix-time-picker-range-overlay-padding: 16px 16px 0 16px; - --ix-time-picker-range-overlay-footer-padding: 8px 0; - --ix-time-picker-range-overlay-separator-padding: 2px 10px; - --ix-time-picker-range-overlay-separator-font-size: 12px; - --ix-time-picker-panel-height: 224px; - --ix-time-picker-panel-padding-horizontal: 8px; - --ix-time-picker-panel-padding-vertical: 8px; - --ix-time-picker-panel-font-size: 12px; - --ix-time-picker-panel-cell-height: 32px; - --ix-time-picker-panel-cell-padding-horizontal: 8px; - --ix-time-picker-panel-cell-color: #6f7785; - --ix-time-picker-panel-cell-color-active: #2f3540; - --ix-time-picker-panel-cell-bg-color-hover: transparent; - --ix-time-picker-panel-cell-bg-color-active: transparent; - --ix-time-picker-panel-cell-font-weight-active: 600; - --ix-time-picker-panel-scrollbar-width: 6px; - --ix-time-picker-panel-scrollbar-thumb-bg-color: #e1e5eb; - --ix-time-picker-panel-scrollbar-thumb-border-radius: 10px; - --ix-time-picker-panel-scrollbar-track-bg-color: unset; + --ix-notification-padding: 8px 8px 8px 16px; + --ix-notification-margin: 0 0 8px 0; + --ix-notification-width: 384px; + --ix-notification-max-width: calc(100vw - 48px); + --ix-notification-border-width: 0; + --ix-notification-border-type: solid; + --ix-notification-border-color: none; + --ix-notification-font-size: 14px; + --ix-notification-bg-color: #ffffff; + --ix-notification-border-radius: 2px; + --ix-notification-icon-margin: 4px 8px; + --ix-notification-icon-wrapper-width: 44px; + --ix-notification-title-font-size: 14px; + --ix-notification-title-line-height: 24px; + --ix-notification-title-margin: 0 24px 8px 0; + --ix-notification-content-font-size: 12px; + --ix-notification-content-color: #6f7785; + --ix-notification-content-margin: 0 16px 0 0; + --ix-notification-close-icon-top: 8px; + --ix-notification-close-icon-right: 8px; + --ix-notification-footer-margin: 8px 0 0 0; } -/* ------ collapse css variables ------ */ +/* ------ pagination css variables ------ */ :root { - --ix-collapse-font-size-sm: 12px; - --ix-collapse-font-size-md: 12px; - --ix-collapse-expand-icon-size-sm: 20px; - --ix-collapse-expand-icon-size-md: 24px; - --ix-collapse-padding-horizontal-sm: 12px; - --ix-collapse-padding-horizontal-md: 16px; - --ix-collapse-panel-header-bg-color: #ffffff; - --ix-collapse-panel-content-bg-color: #f7f9fc; + --ix-pagination-font-size-sm: 12px; + --ix-pagination-font-size-md: 12px; + --ix-pagination-font-size-lg: 14px; + --ix-pagination-itme-padding-sm: 0; + --ix-pagination-item-padding-md: 4px; + --ix-pagination-item-padding-lg: 4px; + --ix-pagination-item-content-size-sm: 24px; + --ix-pagination-item-content-size-md: 24px; + --ix-pagination-item-content-size-lg: 32px; + --ix-pagination-out-line-color: #458fff; } -/* ------ card css variables ------ */ +/* ------ popconfirm 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: 0; - --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: #edf1f7; - --ix-card-loading-end-color: #e1e5eb; - --ix-card-grid-width: 25%; + --ix-popconfirm-font-size: 12px; + --ix-popconfirm-title-font-size: 14px; + --ix-popconfirm-color: #2f3540; + --ix-popconfirm-icon-color: #fdaa1d; + --ix-popconfirm-min-width: 240px; } -/* ------ skeleton css variables ------ */ +/* ------ popover css variables ------ */ :root { - --ix-skeleton-margin-bottom: 8px; - --ix-skeleton-loader-margin-bottom: 4px; - --ix-skeleton-start-color: #edf1f7; - --ix-skeleton-end-color: #e1e5eb; + --ix-popover-font-size: 12px; + --ix-popover-color: #6f7785; + --ix-popover-min-width: 240px; } -/* ------ date-picker css variables ------ */ +/* ------ progress css variables ------ */ :root { - --ix-date-picker-separator-margin-horizontal: 16px; - --ix-date-picker-overlay-width: 252px; - --ix-date-picker-overlay-padding: 16px; - --ix-date-picker-overlay-footer-padding: 8px 16px; - --ix-date-picker-overlay-date-input-width: 120px; - --ix-date-picker-overlay-time-input-width: 96px; - --ix-date-picker-board-width: 220px; - --ix-date-picker-board-max-height: 260px; - --ix-date-picker-range-board-border: none; - --ix-date-picker-range-overlay-padding: 16px 16px 0 16px; - --ix-date-picker-range-overlay-footer-padding: 8px 0; - --ix-date-picker-range-overlay-separator-width: 32px; - --ix-date-picker-range-overlay-separator-font-size: 12px; - --ix-date-picker-panel-font-size: 12px; - --ix-date-picker-panel-color: #2f3540; - --ix-date-picker-panel-cell-width: 28px; - --ix-date-picker-panel-cell-height: 28px; - --ix-date-picker-panel-cell-width-lg: 52px; - --ix-date-picker-panel-cell-height-lg: 24px; - --ix-date-picker-panel-cell-color-active: #ffffff; - --ix-date-picker-panel-cell-color-hover: #458fff; - --ix-date-picker-panel-cell-color-disabled: #bec3cc; - --ix-date-picker-panel-cell-bg-color-hover: #f7f9fc; - --ix-date-picker-panel-cell-bg-color-active: #1c6eff; - --ix-date-picker-panel-cell-bg-color-in-range: #e8f4ff; - --ix-date-picker-panel-cell-bg-color-disabled: #f7f9fc; - --ix-date-picker-panel-cell-trigger-width: 20px; - --ix-date-picker-panel-cell-trigger-height: 20px; - --ix-date-picker-panel-cell-trigger-width-lg: 52px; - --ix-date-picker-panel-cell-trigger-height-lg: 24px; - --ix-date-picker-panel-cell-current-color: #1c6eff; - --ix-date-picker-panel-cell-current-border-color: #bfdfff; - --ix-date-picker-panel-cell-current-bg-color: #1c6eff; - --ix-date-picker-panel-heaer-height: 32px; - --ix-date-picker-panel-header-font-size: 12px; - --ix-date-picker-panel-header-font-weight: 400; - --ix-date-picker-panel-header-spacing: 16px; - --ix-date-picker-panel-body-header-bg-color: #f7f9fc; + --ix-progress-trail-bg-color: #edf1f7; + --ix-progress-text-width: 36px; + --ix-progress-border-radius: 100px; + --ix-progress-line-size-sm: 2px; + --ix-progress-line-size-md: 6px; + --ix-progress-line-size-lg: 8px; + --ix-progress-line-font-size-sm: 12px; + --ix-progress-line-font-size-md: 12px; + --ix-progress-line-font-size-lg: 14px; + --ix-progress-line-text-padding: 0 0 0 8px; + --ix-progress-circle-width: 120px; + --ix-progress-circle-font-size: 24px; +} + +/* ------ radio css variables ------ */ +:root { + --ix-radio-label-padding: 0 4px; + --ix-radio-fieldset-border-radius: 2px; + --ix-radio-fieldset-bg-color: #f7f9fc; + --ix-radio-fieldset-border-color: #e1e5eb; } /* ------ rate css variables ------ */ @@ -632,105 +771,93 @@ --ix-rate-item-outline-focus: 1px dashed #ffc145; } -/* ------ popconfirm css variables ------ */ +/* ------ result css variables ------ */ :root { - --ix-popconfirm-font-size: 12px; - --ix-popconfirm-title-font-size: 14px; - --ix-popconfirm-color: #2f3540; - --ix-popconfirm-icon-color: #fdaa1d; - --ix-popconfirm-min-width: 240px; + --ix-result-padding: 48px 32px; + --ix-result-icon-size: 48px; + --ix-result-title-font-size: 20px; + --ix-result-title-line-height: 32px; + --ix-result-subtitle-font-size: 12px; + --ix-result-subtitle-line-height: 18px; + --ix-result-subtitle-margin-top: 4px; + --ix-result-extra-margin-top: 24px; + --ix-result-content-margin-top: 24px; + --ix-result-content-padding: 24px 40px; } -/* ------ timeline css variables ------ */ +/* ------ select css variables ------ */ :root { - --ix-timeline-font-size: 12px; - --ix-timeline-dot-size: 12px; - --ix-timeline-dot-border-width: 2px; - --ix-timeline-content-label-margin-top: 8px; - --ix-timeline-line-width: 2px; - --ix-timeline-line-bg-color: #e1e5eb; - --ix-timeline-pending-item-content-min-width: 40px; - --ix-timeline-content-margin-bottom: 20px; -} - -/* ------ tree css variables ------ */ -:root { - --ix-tree-drop-line-width: 2px; - --ix-tree-drop-line-color: #458fff; - --ix-tree-bg-color: #ffffff; - --ix-tree-node-bg-color-hover: #f7f9fc; - --ix-tree-node-bg-color-selected: #ffffff; - --ix-tree-node-color-selected: #1c6eff; - --ix-tree-node-padding-vertical: 0px; - --ix-tree-node-content-height: 32px; - --ix-tree-node-content-padding: 0 8px 0 4px; - --ix-tree-node-content-label-padding: 0 4px; - --ix-tree-node-content-label-highlight-color: #1c6eff; - --ix-tree-node-checkbox-margin: 0 4px 0 4px; - --ix-tree-node-icon-width: 24px; - --ix-tree-expand-icon-color: #bec3cc; + --ix-select-option-font-size: 12px; + --ix-select-option-height: 32px; + --ix-select-option-padding: 8px 12px; + --ix-select-option-label-margin-left: 8px; + --ix-select-option-container-padding: 4px 0; + --ix-select-option-group-margin: 0 12; + --ix-select-option-group-padding-left: 0; + --ix-select-multiple-option-grouped-padding-left: 12px; + --ix-select-option-grouped-padding-left: 24px; + --ix-select-overlay-search-wrapper-padding: 4px 12px 8px; } -/* ------ pagination css variables ------ */ +/* ------ skeleton css variables ------ */ :root { - --ix-pagination-font-size-sm: 12px; - --ix-pagination-font-size-md: 12px; - --ix-pagination-font-size-lg: 14px; - --ix-pagination-itme-padding-sm: 0; - --ix-pagination-item-padding-md: 4px; - --ix-pagination-item-padding-lg: 4px; - --ix-pagination-item-content-size-sm: 24px; - --ix-pagination-item-content-size-md: 24px; - --ix-pagination-item-content-size-lg: 32px; - --ix-pagination-out-line-color: #458fff; + --ix-skeleton-margin-bottom: 8px; + --ix-skeleton-loader-margin-bottom: 4px; + --ix-skeleton-start-color: #edf1f7; + --ix-skeleton-end-color: #e1e5eb; } -/* ------ tour css variables ------ */ +/* ------ slider css variables ------ */ :root { - --ix-tour-bg-color: #ffffff; - --ix-tour-description-color: #2f3540; - --ix-tour-indicators-color: #6f7785; - --ix-tour-border-radius: 4px; - --ix-tour-min-width: 250px; - --ix-tour-padding-top: 16px; - --ix-tour-padding-left: 16px; - --ix-tour-padding-right: 16px; - --ix-tour-padding-bottom: 16px; - --ix-tour-description-font-size: 12px; - --ix-tour-indicators-font-size: 12px; - --ix-tour-footer-btn-gap: 4px; + --ix-slider-rail-size: 2px; + --ix-slider-mark-label-color: #a1a7b3; + --ix-slider-mark-label-color-active: #2f3540; + --ix-slider-dot-bg-color: #e1e5eb; + --ix-slider-dot-bg-color-disabled: #e1e5eb; + --ix-slider-dot-bg-color-active: #1c6eff; + --ix-slider-rail-bg-color: #e1e5eb; + --ix-slider-rail-bg-color-hover: #e1e5eb; + --ix-slider-track-bg-color: #1c6eff; + --ix-slider-track-bg-color-hover: #1c6eff; + --ix-slider-track-bg-color-disabled: #e1e5eb; + --ix-slider-thumb-bg-color: #ffffff; + --ix-slider-thumb-border-color: #1c6eff; + --ix-slider-thumb-border-color-hover: #1c6eff; + --ix-slider-thumb-border-color-disabled: #e1e5eb; + --ix-slider-thumb-border-width: 2px; + --ix-slider-thumb-border-type: solid; + --ix-slider-thumb-border-color-focus: #1c6eff; + --ix-slider-thumb-box-shadow-focus: 0 0 0 5px rgba(28, 110, 255, 0.12); + --ix-slider-thumb-size: 10px; } -/* ------ transfer css variables ------ */ +/* ------ space css variables ------ */ :root { - --ix-transfer-height: 290px; - --ix-transfer-content-width: 260px; - --ix-transfer-header-height: 40px; - --ix-transfer-suffix-margin-left: 12px; - --ix-transfer-footer-height: 40px; - --ix-transfer-content-padding: 0 8px 0 12px; - --ix-transfer-opr-min-width: 4px; - --ix-transfer-opr-padding: 8px; - --ix-transfer-opr-button-width: 24px; - --ix-transfer-opr-button-height: 32px; - --ix-transfer-opr-button-gap: 8px; - --ix-transfer-search-width: 110px; - --ix-transfer-list-item-min-height: 32px; - --ix-transfer-close-icon-padding: 0 12px; + --ix-space-separator-color: #e1e5eb; } -/* ------ radio css variables ------ */ +/* ------ spin css variables ------ */ :root { - --ix-radio-label-padding: 0 4px; - --ix-radio-fieldset-border-radius: 2px; - --ix-radio-fieldset-bg-color: #f7f9fc; - --ix-radio-fieldset-border-color: #e1e5eb; + --ix-spin-tip-color: #1c6eff; + --ix-spin-icon-color: #1c6eff; + --ix-spin-font-size-sm: 12px; + --ix-spin-font-size-md: 14px; + --ix-spin-font-size-lg: 16px; + --ix-spin-icon-size-sm: 20px; + --ix-spin-icon-size-md: 28px; + --ix-spin-icon-size-lg: 48px; + --ix-spin-bg-circle-stroke: #1c6eff; + --ix-spin-fst-arch-stroke: #12a679; + --ix-spin-snd-arch-stroke: #d3d7de; } -/* ------ loading-bar css variables ------ */ +/* ------ statistic css variables ------ */ :root { - --ix-loading-bar-height: 2px; - --ix-loading-bar-loading-color: #1c6eff; + --ix-statistic-font-size-sm: 14px; + --ix-statistic-font-size-md: 14px; + --ix-statistic-font-size-lg: 24px; + --ix-statistic-font-size-xl: 30px; + --ix-statistic-color: #2f3540; } /* ------ stepper css variables ------ */ @@ -752,6 +879,23 @@ --ix-stepper-line-type: dashed; } +/* ------ switch css variables ------ */ +:root { + --ix-switch-active-disabled-color: #96c7ff; + --ix-switch-height-sm: 16px; + --ix-switch-height-md: 24px; + --ix-switch-height-lg: 32px; + --ix-switch-handle-size-sm: 12px; + --ix-switch-handle-size-md: 20px; + --ix-switch-handle-size-lg: 28px; + --ix-switch-icon-font-size-sm: 9px; + --ix-switch-icon-font-size-md: 14px; + --ix-switch-icon-font-size-lg: 14px; + --ix-switch-handle-padding: 2px; + --ix-switch-handle-bg-color: #ffffff; + --ix-switch-handle-box-shadow: none; +} + /* ------ table css variables ------ */ :root { --ix-table-font-size-sm: 12px; @@ -792,92 +936,69 @@ --ix-tabs-panel-padding-size: 16px; } -/* ------ progress css variables ------ */ -:root { - --ix-progress-trail-bg-color: #edf1f7; - --ix-progress-text-width: 36px; - --ix-progress-border-radius: 100px; - --ix-progress-line-size-sm: 2px; - --ix-progress-line-size-md: 6px; - --ix-progress-line-size-lg: 8px; - --ix-progress-line-font-size-sm: 12px; - --ix-progress-line-font-size-md: 12px; - --ix-progress-line-font-size-lg: 14px; - --ix-progress-line-text-padding: 0 0 0 8px; - --ix-progress-circle-width: 120px; - --ix-progress-circle-font-size: 24px; -} - -/* ------ select css variables ------ */ -:root { - --ix-select-option-font-size: 12px; - --ix-select-option-height: 32px; - --ix-select-option-padding: 8px 12px; - --ix-select-option-label-margin-left: 8px; - --ix-select-option-container-padding: 4px 0; - --ix-select-option-group-margin: 0 12; - --ix-select-option-group-padding-left: 0; - --ix-select-multiple-option-grouped-padding-left: 12px; - --ix-select-option-grouped-padding-left: 24px; - --ix-select-overlay-search-wrapper-padding: 4px 12px 8px; -} - -/* ------ statistic css variables ------ */ -:root { - --ix-statistic-font-size-sm: 14px; - --ix-statistic-font-size-md: 14px; - --ix-statistic-font-size-lg: 24px; - --ix-statistic-font-size-xl: 30px; - --ix-statistic-color: #2f3540; -} - -/* ------ space css variables ------ */ +/* ------ tag css variables ------ */ :root { - --ix-space-separator-color: #e1e5eb; + --ix-tag-bg-color-filled: #99acd1; + --ix-tag-border-width: 1px; + --ix-tag-border-radius: 2px; + --ix-tag-min-width-rect: 40px; + --ix-tag-min-width-round: 48px; + --ix-tag-min-width-numeric: 64px; + --ix-tag-success-bg-color: rgba(18, 166, 121, 0.1); + --ix-tag-info-bg-color: rgba(28, 110, 255, 0.1); + --ix-tag-warning-bg-color: rgba(253, 170, 29, 0.1); + --ix-tag-risk-bg-color: rgba(250, 114, 27, 0.1); + --ix-tag-error-bg-color: rgba(255, 87, 82, 0.1); + --ix-tag-fatal-bg-color: rgba(130, 1, 14, 0.1); } -/* ------ tree-select css variables ------ */ +/* ------ textarea css variables ------ */ :root { - --ix-tree-select-option-font-size: 12px; - --ix-tree-select-option-height: 32px; - --ix-tree-select-option-padding: 8px 12px; - --ix-tree-select-option-margin-left: 8px; - --ix-tree-select-option-container-padding: 4px 0; - --ix-tree-select-option-container-tree-node-padding: 0 0 0 8px; - --ix-tree-select-overlay-search-wrapper-padding: 4px 12px 8px; + --ix-textarea-count-bottom: 1px; + --ix-textarea-count-right: 8px; + --ix-textarea-count-opacity: 0.9; + --ix-textarea-count-color: #a1a7b3; } -/* ------ result css variables ------ */ +/* ------ time-picker css variables ------ */ :root { - --ix-result-padding: 48px 32px; - --ix-result-icon-size: 48px; - --ix-result-title-font-size: 20px; - --ix-result-title-line-height: 32px; - --ix-result-subtitle-font-size: 12px; - --ix-result-subtitle-line-height: 18px; - --ix-result-subtitle-margin-top: 4px; - --ix-result-extra-margin-top: 24px; - --ix-result-content-margin-top: 24px; - --ix-result-content-padding: 24px 40px; + --ix-time-picker-separator-margin-horizontal: 24px; + --ix-time-picker-overlay-width: 200px; + --ix-time-picker-overlay-padding: 8px 8px 0 8px; + --ix-time-picker-overlay-footer-padding: 8px 16px; + --ix-time-picker-range-board-width: 184px; + --ix-time-picker-range-board-border: none; + --ix-time-picker-range-overlay-padding: 16px 16px 0 16px; + --ix-time-picker-range-overlay-footer-padding: 8px 0; + --ix-time-picker-range-overlay-separator-padding: 2px 10px; + --ix-time-picker-range-overlay-separator-font-size: 12px; + --ix-time-picker-panel-height: 224px; + --ix-time-picker-panel-padding-horizontal: 8px; + --ix-time-picker-panel-padding-vertical: 8px; + --ix-time-picker-panel-font-size: 12px; + --ix-time-picker-panel-cell-height: 32px; + --ix-time-picker-panel-cell-padding-horizontal: 8px; + --ix-time-picker-panel-cell-color: #6f7785; + --ix-time-picker-panel-cell-color-active: #2f3540; + --ix-time-picker-panel-cell-bg-color-hover: transparent; + --ix-time-picker-panel-cell-bg-color-active: transparent; + --ix-time-picker-panel-cell-font-weight-active: 600; + --ix-time-picker-panel-scrollbar-width: 6px; + --ix-time-picker-panel-scrollbar-thumb-bg-color: #e1e5eb; + --ix-time-picker-panel-scrollbar-thumb-border-radius: 10px; + --ix-time-picker-panel-scrollbar-track-bg-color: unset; } -/* ------ header css variables ------ */ +/* ------ timeline css variables ------ */ :root { - --ix-header-height-sm: 40px; - --ix-header-height-md: 48px; - --ix-header-height-lg: 48px; - --ix-header-height-xl: 56px; - --ix-header-bar-width: 4px; - --ix-header-bar-bg-color: #1c6eff; - --ix-header-prefix-color: #2f3540; - --ix-header-prefix-color-hover: #1c6eff; - --ix-header-prefix-color-active: #1c6eff; - --ix-header-prefix-color-disabled: #bec3cc; - --ix-header-suffix-color: #5e6573; - --ix-header-suffix-color-hover: #1c6eff; - --ix-header-suffix-color-active: #0d51d9; - --ix-header-suffix-color-disabled: #bec3cc; - --ix-header-sub-title-font-size: 14px; + --ix-timeline-font-size: 12px; + --ix-timeline-dot-size: 12px; + --ix-timeline-dot-border-width: 2px; + --ix-timeline-content-label-margin-top: 8px; + --ix-timeline-line-width: 2px; + --ix-timeline-line-bg-color: #e1e5eb; + --ix-timeline-pending-item-content-min-width: 40px; + --ix-timeline-content-margin-bottom: 20px; } /* ------ tooltip css variables ------ */ @@ -888,197 +1009,76 @@ --ix-tooltip-max-width: 400px; } -/* ------ upload css variables ------ */ -:root { - --ix-upload-selector-dragable-border: 1px dashed #d3d7de; - --ix-upload-selector-dragable-border-dragover: 1px dashed #1c6eff; - --ix-upload-list-name-max-width: calc(100% - 74px); - --ix-upload-list-img-thumb-width: 48px; - --ix-upload-list-img-thumb-height: 48px; - --ix-upload-list-img-card-height: 96px; - --ix-upload-list-img-card-width: 96px; -} - -/* ------ switch css variables ------ */ -:root { - --ix-switch-active-disabled-color: #96c7ff; - --ix-switch-height-sm: 16px; - --ix-switch-height-md: 24px; - --ix-switch-height-lg: 32px; - --ix-switch-handle-size-sm: 12px; - --ix-switch-handle-size-md: 20px; - --ix-switch-handle-size-lg: 28px; - --ix-switch-icon-font-size-sm: 9px; - --ix-switch-icon-font-size-md: 14px; - --ix-switch-icon-font-size-lg: 14px; - --ix-switch-handle-padding: 2px; - --ix-switch-handle-bg-color: #ffffff; - --ix-switch-handle-box-shadow: none; -} - -/* ------ spin css variables ------ */ -:root { - --ix-spin-tip-color: #1c6eff; - --ix-spin-icon-color: #1c6eff; - --ix-spin-font-size-sm: 12px; - --ix-spin-font-size-md: 14px; - --ix-spin-font-size-lg: 16px; - --ix-spin-icon-size-sm: 20px; - --ix-spin-icon-size-md: 28px; - --ix-spin-icon-size-lg: 48px; - --ix-spin-bg-circle-stroke: #1c6eff; - --ix-spin-fst-arch-stroke: #12a679; - --ix-spin-snd-arch-stroke: #d3d7de; -} - -/* ------ alert css variables ------ */ -:root { - --ix-alert-height: 32px; - --ix-alert-border-radius: 2px; - --ix-alert-success-bg-color: rgba(18, 166, 121, 0.1); - --ix-alert-info-bg-color: rgba(28, 110, 255, 0.1); - --ix-alert-warning-bg-color: rgba(253, 170, 29, 0.1); - --ix-alert-error-bg-color: rgba(255, 87, 82, 0.1); - --ix-alert-offline-bg-color: rgba(111, 119, 133, 0.1); -} - -/* ------ 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: #2f3540; - --ix-button-color-disabled: #bec3cc; - --ix-button-bg-color: #ffffff; - --ix-button-bg-color-disabled: #e1e5eb; - --ix-button-border-color: #d3d7de; - --ix-button-border-radius: 2px; - --ix-button-primary-color: #ffffff; - --ix-button-primary-bg-color: #1c6eff; - --ix-button-primary-bg-color-hover: #458fff; - --ix-button-primary-bg-color-active: #0d51d9; - --ix-button-danger-color: #cf171d; - --ix-button-danger-color-hover: #f52727; - --ix-button-danger-color-active: #cf171d; - --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; - --ix-button-ghost-bg-color-disabled: rgba(255, 255, 255, 0.4); - --ix-button-icon-color: inherit; - --ix-button-icon-font-size: 16px; -} - -/* ------ message css variables ------ */ +/* ------ tour css variables ------ */ :root { - --ix-message-margin: 8px; - --ix-message-font-size: 14px; - --ix-message-border-width: 0; - --ix-message-border-type: solid; - --ix-message-border-color: none; - --ix-message-content-min-width: 128px; - --ix-message-content-max-width: 480px; - --ix-message-content-padding-vertical: 8px; - --ix-message-content-padding-horizontal: 16px; - --ix-message-bg-color: #ffffff; - --ix-message-border-radius: 4px; - --ix-message-icon-margin-right: 8px; - --ix-message-wrapper-top: 15%; + --ix-tour-bg-color: #ffffff; + --ix-tour-description-color: #2f3540; + --ix-tour-indicators-color: #6f7785; + --ix-tour-border-radius: 4px; + --ix-tour-min-width: 250px; + --ix-tour-padding-top: 16px; + --ix-tour-padding-left: 16px; + --ix-tour-padding-right: 16px; + --ix-tour-padding-bottom: 16px; + --ix-tour-description-font-size: 12px; + --ix-tour-indicators-font-size: 12px; + --ix-tour-footer-btn-gap: 4px; } -/* ------ slider css variables ------ */ +/* ------ transfer css variables ------ */ :root { - --ix-slider-rail-size: 2px; - --ix-slider-mark-label-color: #a1a7b3; - --ix-slider-mark-label-color-active: #2f3540; - --ix-slider-dot-bg-color: #e1e5eb; - --ix-slider-dot-bg-color-disabled: #e1e5eb; - --ix-slider-dot-bg-color-active: #1c6eff; - --ix-slider-rail-bg-color: #e1e5eb; - --ix-slider-rail-bg-color-hover: #e1e5eb; - --ix-slider-track-bg-color: #1c6eff; - --ix-slider-track-bg-color-hover: #1c6eff; - --ix-slider-track-bg-color-disabled: #e1e5eb; - --ix-slider-thumb-bg-color: #ffffff; - --ix-slider-thumb-border-color: #1c6eff; - --ix-slider-thumb-border-color-hover: #1c6eff; - --ix-slider-thumb-border-color-disabled: #e1e5eb; - --ix-slider-thumb-border-width: 2px; - --ix-slider-thumb-border-type: solid; - --ix-slider-thumb-border-color-focus: #1c6eff; - --ix-slider-thumb-box-shadow-focus: 0 0 0 5px rgba(28, 110, 255, 0.12); - --ix-slider-thumb-size: 10px; + --ix-transfer-height: 290px; + --ix-transfer-content-width: 260px; + --ix-transfer-header-height: 40px; + --ix-transfer-suffix-margin-left: 12px; + --ix-transfer-footer-height: 40px; + --ix-transfer-content-padding: 0 8px 0 12px; + --ix-transfer-opr-min-width: 4px; + --ix-transfer-opr-padding: 8px; + --ix-transfer-opr-button-width: 24px; + --ix-transfer-opr-button-height: 32px; + --ix-transfer-opr-button-gap: 8px; + --ix-transfer-search-width: 110px; + --ix-transfer-list-item-min-height: 32px; + --ix-transfer-close-icon-padding: 0 12px; } -/* ------ tag css variables ------ */ +/* ------ tree css variables ------ */ :root { - --ix-tag-bg-color-filled: #99acd1; - --ix-tag-border-width: 1px; - --ix-tag-border-radius: 2px; - --ix-tag-min-width-rect: 40px; - --ix-tag-min-width-round: 48px; - --ix-tag-min-width-numeric: 64px; - --ix-tag-success-bg-color: rgba(18, 166, 121, 0.1); - --ix-tag-info-bg-color: rgba(28, 110, 255, 0.1); - --ix-tag-warning-bg-color: rgba(253, 170, 29, 0.1); - --ix-tag-risk-bg-color: rgba(250, 114, 27, 0.1); - --ix-tag-error-bg-color: rgba(255, 87, 82, 0.1); - --ix-tag-fatal-bg-color: rgba(130, 1, 14, 0.1); + --ix-tree-drop-line-width: 2px; + --ix-tree-drop-line-color: #458fff; + --ix-tree-bg-color: #ffffff; + --ix-tree-node-bg-color-hover: #f7f9fc; + --ix-tree-node-bg-color-selected: #ffffff; + --ix-tree-node-color-selected: #1c6eff; + --ix-tree-node-padding-vertical: 0px; + --ix-tree-node-content-height: 32px; + --ix-tree-node-content-padding: 0 8px 0 4px; + --ix-tree-node-content-label-padding: 0 4px; + --ix-tree-node-content-label-highlight-color: #1c6eff; + --ix-tree-node-checkbox-margin: 0 4px 0 4px; + --ix-tree-node-icon-width: 24px; + --ix-tree-expand-icon-color: #bec3cc; } -/* ------ notification css variables ------ */ +/* ------ tree-select css variables ------ */ :root { - --ix-notification-padding: 8px 8px 8px 16px; - --ix-notification-margin: 0 0 8px 0; - --ix-notification-width: 384px; - --ix-notification-max-width: calc(100vw - 48px); - --ix-notification-border-width: 0; - --ix-notification-border-type: solid; - --ix-notification-border-color: none; - --ix-notification-font-size: 14px; - --ix-notification-bg-color: #ffffff; - --ix-notification-border-radius: 2px; - --ix-notification-icon-margin: 4px 8px; - --ix-notification-icon-wrapper-width: 44px; - --ix-notification-title-font-size: 14px; - --ix-notification-title-line-height: 24px; - --ix-notification-title-margin: 0 24px 8px 0; - --ix-notification-content-font-size: 12px; - --ix-notification-content-color: #6f7785; - --ix-notification-content-margin: 0 16px 0 0; - --ix-notification-close-icon-top: 8px; - --ix-notification-close-icon-right: 8px; - --ix-notification-footer-margin: 8px 0 0 0; + --ix-tree-select-option-font-size: 12px; + --ix-tree-select-option-height: 32px; + --ix-tree-select-option-padding: 8px 12px; + --ix-tree-select-option-margin-left: 8px; + --ix-tree-select-option-container-padding: 4px 0; + --ix-tree-select-option-container-tree-node-padding: 0 0 0 8px; + --ix-tree-select-overlay-search-wrapper-padding: 4px 12px 8px; } -/* ------ textarea css variables ------ */ +/* ------ upload css variables ------ */ :root { - --ix-textarea-count-bottom: 1px; - --ix-textarea-count-right: 8px; - --ix-textarea-count-opacity: 0.9; - --ix-textarea-count-color: #a1a7b3; + --ix-upload-selector-dragable-border: 1px dashed #d3d7de; + --ix-upload-selector-dragable-border-dragover: 1px dashed #1c6eff; + --ix-upload-list-name-max-width: calc(100% - 74px); + --ix-upload-list-img-thumb-width: 48px; + --ix-upload-list-img-thumb-height: 48px; + --ix-upload-list-img-card-height: 96px; + --ix-upload-list-img-card-width: 96px; } diff --git a/packages/components/desc/docs/Index.zh.md b/packages/components/desc/docs/Index.zh.md index 898f043f4..ada4cb02b 100644 --- a/packages/components/desc/docs/Index.zh.md +++ b/packages/components/desc/docs/Index.zh.md @@ -4,6 +4,6 @@ type: 数据展示 order: 0 title: Descriptions subtitle: 描述列表 -theme: true + --- diff --git a/packages/components/desc/docs/Theme.zh.md b/packages/components/desc/docs/Theme.zh.md index 098e61d31..1e8e83b46 100644 --- a/packages/components/desc/docs/Theme.zh.md +++ b/packages/components/desc/docs/Theme.zh.md @@ -1,9 +1,9 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@desc-item-height-sm` | `var(--ix-height-sm)` | - | - | -| `@desc-item-height-md` | `var(--ix-height-md)` | - | - | -| `@desc-item-height-lg` | `var(--ix-height-lg)` | - | - | -| `@desc-item-font-size-sm` | `var(--ix-font-size-sm)` | - | - | -| `@desc-item-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@desc-item-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-sm)` | - | -| `@desc-item-label-color` | `var(--ix-text-color-info)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `fontSizeLg` | | `number` | `12` | `12` | +| `fontSizeMd` | | `number` | `12` | `12` | +| `fontSizeSm` | | `number` | `12` | `12` | +| `itemHeightLg` | | `number` | `40` | `40` | +| `itemHeightMd` | | `number` | `32` | `32` | +| `itemHeightSm` | | `number` | `24` | `24` | +| `labelColor` | | `string` | `#6f7785` | `#808999` | diff --git a/packages/components/divider/docs/Theme.zh.md b/packages/components/divider/docs/Theme.zh.md index c5ed9ec7d..61ffd87c4 100644 --- a/packages/components/divider/docs/Theme.zh.md +++ b/packages/components/divider/docs/Theme.zh.md @@ -1,13 +1,13 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@divider-border-width` | `@border-width-sm` | - | - | -| `@divider-border-color` | `@border-color` | - | - | -| `@divider-font-size-sm` | `@font-size-lg` | `@font-size-sm` | - | -| `@divider-font-size-md` | `@font-size-xl` | `@font-size-md` | - | -| `@divider-font-size-lg` | `@font-size-xl` | `@font-size-lg` | - | -| `@divider-horizontal-margin-sm` | `@spacing-md 0` | - | - | -| `@divider-horizontal-margin-md` | `@spacing-lg 0` | - | - | -| `@divider-horizontal-margin-lg` | `@spacing-xl 0` | - | - | -| `@divider-vertical-margin-sm` | `0 @spacing-xs` | - | - | -| `@divider-vertical-margin-md` | `0 @spacing-sm` | - | - | -| `@divider-vertical-margin-lg` | `0 @spacing-md` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `fontSizeLg` | | `number` | `16` | `16` | +| `fontSizeMd` | | `number` | `14` | `14` | +| `fontSizeSm` | | `number` | `12` | `12` | +| `lineColor` | | `string` | `#d3d7de` | `#3C424D` | +| `lineWidth` | | `number` | `1` | `1` | +| `marginHorizontalLg` | | `number` | `12` | `12` | +| `marginHorizontalMd` | | `number` | `8` | `8` | +| `marginHorizontalSm` | | `number` | `4` | `4` | +| `marginVerticalLg` | | `number` | `24` | `24` | +| `marginVerticalMd` | | `number` | `16` | `16` | +| `marginVerticalSm` | | `number` | `12` | `12` | diff --git a/packages/components/drawer/docs/Index.zh.md b/packages/components/drawer/docs/Index.zh.md index 9fe2ecdbc..f8f4341c6 100644 --- a/packages/components/drawer/docs/Index.zh.md +++ b/packages/components/drawer/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 反馈 title: Drawer subtitle: 抽屉 -theme: true + --- diff --git a/packages/components/drawer/docs/Theme.zh.md b/packages/components/drawer/docs/Theme.zh.md index 3cda9a069..ea1a307d7 100644 --- a/packages/components/drawer/docs/Theme.zh.md +++ b/packages/components/drawer/docs/Theme.zh.md @@ -1,5 +1,8 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@drawer-box-shadow-start` | `@shadow-right-lg` | - | - | -| `@drawer-box-shadow-end` | `@shadow-left-lg` | - | - | -| `@drawer-box-shadow-top` | `@shadow-bottom-lg` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `borderColor` | | `string` | `none` | `#1F2329` | +| `borderType` | | `string` | `solid` | `solid` | +| `borderWidth` | | `number` | `0` | `1` | +| `boxShadowEnd` | | `string` | `-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)` | `-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)` | +| `boxShadowStart` | | `string` | `6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03)` | `6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03)` | +| `boxShadowTop` | | `string` | `0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03)` | `0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03)` | diff --git a/packages/components/dropdown/docs/Index.zh.md b/packages/components/dropdown/docs/Index.zh.md index af488719d..9797488a3 100644 --- a/packages/components/dropdown/docs/Index.zh.md +++ b/packages/components/dropdown/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 导航 title: Dropdown subtitle: 下拉菜单 -theme: true + --- diff --git a/packages/components/dropdown/docs/Theme.zh.md b/packages/components/dropdown/docs/Theme.zh.md index 5e7b13dce..5c44b7cee 100644 --- a/packages/components/dropdown/docs/Theme.zh.md +++ b/packages/components/dropdown/docs/Theme.zh.md @@ -1,7 +1,4 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@dropdown-background-color` | `@menu-background-color` | - | - | -| `@dropdown-border-radius` | `@menu-overlay-border-radius` | - | - | -| `@dropdown-box-shadow` | `@menu-overlay-box-shadow` | - | - | -| `@dropdown-min-width` | `@menu-overlay-min-width` | - | - | -| `@dropdown-menu-container-padding` | `@spacing-sm 0` | `@spacing-xs 0` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `menuContainerPadding` | | `string | number` | `4px 0` | `4px 0` | +| `minWidth` | | `number` | `128` | `128` | diff --git a/packages/components/empty/docs/Index.zh.md b/packages/components/empty/docs/Index.zh.md index 85fc05093..2cbd49d2f 100644 --- a/packages/components/empty/docs/Index.zh.md +++ b/packages/components/empty/docs/Index.zh.md @@ -3,7 +3,7 @@ category: components type: 数据展示 title: Empty subtitle: 空数据 -theme: true + --- 空状态通常用于当前的内容区域（页面、区块、组件、单数据）没有数据展示时，帮助用户明确当前状态，引导摆脱空状态。 diff --git a/packages/components/empty/docs/Theme.zh.md b/packages/components/empty/docs/Theme.zh.md index 75c6b6609..0f40cf070 100644 --- a/packages/components/empty/docs/Theme.zh.md +++ b/packages/components/empty/docs/Theme.zh.md @@ -1,5 +1,5 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@empty-color` | `var(--ix-text-color-disabled)` | - | - | -| `@empty-description-color` | `var(--ix-text-color-info)` | - | - | -| `@empty-description-font-size` | `var(--ix-font-size-lg)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `color` | | `string` | `#a1a7b3` | `#525966` | +| `descColor` | | `string` | `#6f7785` | `#808999` | +| `descFontSize` | | `number` | `16` | `16` | diff --git a/packages/components/form/docs/Theme.zh.md b/packages/components/form/docs/Theme.zh.md index db2259aff..b27eb4b39 100644 --- a/packages/components/form/docs/Theme.zh.md +++ b/packages/components/form/docs/Theme.zh.md @@ -1,83 +1,11 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@form-font-size-xs` | `@font-size-sm` | - | - | -| `@form-font-size-sm` | `@font-size-md` | `@font-size-sm` | - | -| `@form-font-size-md` | `@font-size-md` | `@font-size-sm` | - | -| `@form-font-size-lg` | `@font-size-lg` | `@font-size-md` | - | -| `@form-line-height` | `@line-height-base` | - | - | -| `@form-height-xs` | `@height-xs` | - | - | -| `@form-height-sm` | `@height-sm` | - | - | -| `@form-height-md` | `@height-md` | - | - | -| `@form-height-lg` | `@height-lg` | - | - | -| `@form-padding-horizontal-sm` | `7px` | `11px` | - | -| `@form-padding-horizontal-md` | `11px` | - | - | -| `@form-padding-horizontal-lg` | `11px` | - | - | -| `@form-padding-vertical-sm` | `max( (round(((@form-height-sm - @form-font-size-sm * @form-line-height) / 2) * 10) / 10) - @form-border-width, 0)` | - | - | -| `@form-padding-vertical-md` | `max( (round(((@form-height-md - @form-font-size-md * @form-line-height) / 2) * 10) / 10) - @form-border-width, 2px)` | - | - | -| `@form-padding-vertical-lg` | `(ceil(((@form-height-lg - @form-font-size-lg * @form-line-height) / 2) * 10) / 10) - @form-border-width` | - | - | -| `@form-border-width` | `@border-width-sm` | - | - | -| `@form-border-style` | `@border-style` | - | - | -| `@form-border-color` | `@border-color` | - | - | -| `@form-border-radius-sm` | `@border-radius-sm` | - | - | -| `@form-border-radius-md` | `@border-radius-md` | - | - | -| `@form-border-radius-lg` | `@border-radius-lg` | - | - | -| `@form-color` | `@text-color` | - | - | -| `@form-color-secondary` | `@text-color-secondary` | - | - | -| `@form-tooltip-color` | `@text-color-secondary` | `@color-primary-l10` | - | -| `@form-background-color` | `@background-color-component` | - | - | -| `@form-placeholder-color` | `var(--ix-text-color-disabled)` | - | - | -| `@form-hover-color` | `@color-primary-l10` | - | - | -| `@form-active-color` | `@color-primary` | - | - | -| `@form-active-box-shadow` | `0 0 0 2px fade(@form-active-color, 20%)` | - | - | -| `@form-focus-color` | `@color-primary-d10` | - | - | -| `@form-focus-box-shadow` | `0 0 0 2px fade(@form-focus-color, 20%)` | - | - | -| `@form-disabled-color` | `@text-color-disabled` | - | - | -| `@form-disabled-border-color` | `var(--ix-background-color)` | - | - | -| `@form-disabled-background-color` | `var(--ix-background-color-deep)` | - | - | -| `@form-icon-color` | `@color-graphite-d20` | - | - | -| `@form-icon-hover-color` | `@color-graphite-d20` | `@color-primary` | - | -| `@form-new-height-sm` | `var(--ix-height-sm)` | - | - | -| `@form-new-height-md` | `var(--ix-height-md)` | - | - | -| `@form-new-height-lg` | `var(--ix-height-lg)` | - | - | -| `@form-new-padding-horizontal-sm` | `7px` | `11px` | - | -| `@form-new-padding-horizontal-md` | `11px` | - | - | -| `@form-new-padding-horizontal-lg` | `11px` | - | - | -| `@form-new-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - | -| `@form-new-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@form-new-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - | -| `@form-new-border-radius-sm` | `var(--ix-border-radius-sm)` | - | - | -| `@form-new-border-radius-md` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@form-new-border-radius-lg` | `var(--ix-border-radius-lg)` | `var(--ix-border-radius-sm)` | - | -| `@form-new-placeholder-color` | `var(--ix-text-color-disabled)` | - | - | -| `@form-new-color` | `var(--ix-text-color)` | - | - | -| `@form-new-color-invalid` | `var(--ix-color-red)` | - | - | -| `@form-new-color-disabled` | `var(--ix-text-color-disabled)` | - | - | -| `@form-new-background-color` | `var(--ix-background-color)` | - | - | -| `@form-new-background-color-disabled` | `var(--ix-background-color-deep)` | - | - | -| `@form-new-border-color` | `var(--ix-border-color)` | - | - | -| `@form-new-border-color-focus` | `var(--ix-color-primary)` | - | - | -| `@form-new-box-shadow-focus` | `0 0 0 2px fade(@color-primary, 20%)` | - | - | -| `@form-new-box-shadow-invalid` | `0 0 0 2px fade(@color-red, 20%)` | - | - | -| `@form-new-icon-color` | `var(--ix-text-color-title-secondary)` | - | - | -| `@form-new-icon-color-hover` | `var(--ix-color-primary)` | - | - | -| `@form-new-icon-font-size` | `var(--ix-font-size-lg)` | - | - | -| `@form-item-valid-color` | `@color-success` | `@color-success-d10` | - | -| `@form-item-validating-color` | `@color-pending` | `@color-pending-d10` | - | -| `@form-item-invalid-color` | `@color-error` | `@color-error-d10` | - | -| `@form-item-invalid-box-shadow` | `0 0 0 2px fade(@form-item-invalid-color, 20%)` | - | - | -| `@form-item-margin-bottom` | `24px` | `@spacing-sm` | - | -| `@form-item-vertical-label-margin` | `0` | - | - | -| `@form-item-vertical-label-padding` | `0 0 8px` | - | - | -| `@form-item-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@form-item-font-height` | `ceil(@form-item-font-size * @form-line-height)` | - | - | -| `@form-item-label-required-color` | `@color-red-l10` | - | - | -| `@form-item-label-color` | `@color-black` | `@color-graphite-d10` | - | -| `@form-item-label-colon-margin-right` | `8px` | - | - | -| `@form-item-label-colon-margin-left` | `2px` | - | - | -| `@form-item-label-margin-left` | `8px` | - | - | -| `@form-item-label-before-content-left` | `-8px` | - | - | -| `@form-item-tooltip-icon-font-size` | `@font-size-lg` | - | - | -| `@form-item-tooltip-icon-color` | `@color-primary-l10` | - | - | -| `@form-item-control-tooltip-right` | `-(@form-item-tooltip-icon-font-size + 4)` | - | - | -| `@form-invalid-color` | `var(--ix-color-red)` | `var(--ix-color-red-d10)` | - | -| `@form-invalid-box-shadow` | `0 0 0 2px fade(@color-red, 20%)` | `0 0 0 2px fade(@color-red-d10, 20%)` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `itemMarginBottom` | | `number` | `8` | `8` | +| `labelColonMarginLeft` | | `number` | `2` | `2` | +| `labelColonMarginRight` | | `number` | `8` | `8` | +| `labelColor` | | `string` | `#6f7785` | `#808999` | +| `labelFontSize` | | `number` | `12` | `12` | +| `labelRequiredColor` | | `string` | `#cf171d` | `#E8514C` | +| `messageTooltipBgColor` | | `string` | `#ff5752` | `#E8514C` | +| `verticalItemLabelMargin` | | `string | number` | `0` | `0` | +| `verticalItemLabelPadding` | | `string | number` | `0 0 8px` | `0 0 8px` | diff --git a/packages/components/header/docs/Index.zh.md b/packages/components/header/docs/Index.zh.md index 80356c2d1..e0516d999 100644 --- a/packages/components/header/docs/Index.zh.md +++ b/packages/components/header/docs/Index.zh.md @@ -4,7 +4,7 @@ type: 通用 title: Header subtitle: 页头 order: 0 -theme: true + --- 页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。 diff --git a/packages/components/header/docs/Theme.zh.md b/packages/components/header/docs/Theme.zh.md index 0b3c48481..206d0d11f 100644 --- a/packages/components/header/docs/Theme.zh.md +++ b/packages/components/header/docs/Theme.zh.md @@ -1,22 +1,17 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@header-height-sm` | `var(--ix-height-lg)` | - | - | -| `@header-height-md` | `var(--ix-height-xl)` | - | - | -| `@header-height-lg` | `var(--ix-height-xl)` | - | - | -| `@header-height-xl` | `var(--ix-height-2xl)` | - | - | -| `@header-font-size-sm` | `var(--ix-font-size-md)` | - | - | -| `@header-font-size-md` | `var(--ix-font-size-lg)` | - | - | -| `@header-font-size-lg` | `var(--ix-font-size-xl)` | - | - | -| `@header-font-size-xl` | `var(--ix-font-size-2xl)` | - | - | -| `@header-color` | `var(--ix-text-color-title)` | - | - | -| `@header-color-hover` | `var(--ix-color-primary-l10)` | - | - | -| `@header-color-active` | `var(--ix-color-primary-d10)` | - | - | -| `@header-color-disabled` | `var(--ix-text-color-disabled)` | - | - | -| `@header-bar-width` | `4px` | - | - | -| `@header-bar-background-color` | `var(--ix-color-primary)` | - | - | -| `@header-title-font-weight` | `var(--ix-font-weight-xl)` | - | - | -| `@header-sub-title-color` | `var(--ix-text-color-title-secondary)` | - | - | -| `@header-sub-title-font-size` | `var(--ix-font-size-md)` | - | - | -| `@header-suffix-color` | `var(--ix-text-color-title-secondary)` | - | - | -| `@header-description-color` | `var(--ix-text-color-info)` | - | - | -| `@header-icon-font-size` | `var(--ix-font-size-lg)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `barBgColor` | | `string` | `#1c6eff` | `#4083E8` | +| `barWidth` | | `number` | `4` | `4` | +| `heightLg` | | `number` | `48` | `48` | +| `heightMd` | | `number` | `48` | `48` | +| `heightSm` | | `number` | `40` | `40` | +| `heightXl` | | `number` | `56` | `56` | +| `prefixColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `prefixColorActive` | | `string` | `#1c6eff` | `#4083E8` | +| `prefixColorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `prefixColorHover` | | `string` | `#1c6eff` | `#4083E8` | +| `subTitleFontSize` | | `number` | `14` | `14` | +| `suffixColor` | | `string` | `#5e6573` | `#A1A7B3` | +| `suffixColorActive` | | `string` | `#0d51d9` | `#6AA6F4` | +| `suffixColorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `suffixColorHover` | | `string` | `#1c6eff` | `#4083E8` | diff --git a/packages/components/image/docs/Theme.zh.md b/packages/components/image/docs/Theme.zh.md index 4b549ddef..d1d1eb787 100644 --- a/packages/components/image/docs/Theme.zh.md +++ b/packages/components/image/docs/Theme.zh.md @@ -1,19 +1,16 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@image-min-width` | `96px` | - | - | -| `@image-min-height` | `96px` | - | - | -| `@image-object-fit` | `contain` | - | - | -| `@image-preview-background-color` | `rgba(0, 0, 0, 0.5)` | - | - | -| `@image-preview-icon-color` | `@color-white` | - | - | -| `@image-preview-icon-font-size` | `@font-size-xl` | - | - | -| `@image-viewer-background-color` | `rgba(0, 0, 0, 0.45)` | - | - | -| `@image-viewer-opr-color` | `@color-white` | - | - | -| `@image-viewer-opr-disabled-color` | `rgba(255, 255, 255, 0.35)` | - | - | -| `@image-viewer-opr-height` | `48px` | - | - | -| `@image-viewer-opr-bottom` | `48px` | - | - | -| `@image-viewer-opr-font-size` | `@font-size-xl` | - | - | -| `@image-viewer-opr-background-color` | `rgba(0, 0, 0, 0.1)` | - | - | -| `@image-viewer-opr-border-radius` | `calc(@image-viewer-opr-height / 2)` | - | - | -| `@image-viewer-opr-item-margin` | `0 24px` | - | - | -| `@image-viewer-preview-img-max-width` | `100%` | - | - | -| `@image-viewer-preview-img-max-height` | `100%` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `minHeight` | | `number` | `96` | `96` | +| `minWidth` | | `number` | `96` | `96` | +| `objectFit` | | `string` | `contain` | `contain` | +| `previewBgColor` | | `string` | `rgba(0, 0, 0, 0.5)` | `rgba(0, 0, 0, 0.5)` | +| `previewIconColor` | | `string` | `#ffffff` | `#fff` | +| `previewIconSize` | | `number` | `20` | `20` | +| `viewerBgColor` | | `string` | `rgba(0, 0, 0, 0.45)` | `rgba(0, 0, 0, 0.45)` | +| `viewerOprBgColor` | | `string` | `rgba(0, 0, 0, 0.1)` | `rgba(0, 0, 0, 0.1)` | +| `viewerOprColor` | | `string` | `#ffffff` | `#fff` | +| `viewerOprColorDisabled` | | `string` | `rgba(255, 255, 255, 0.35)` | `rgba(255, 255, 255, 0.35)` | +| `viewerOprFontSize` | | `number` | `20` | `20` | +| `viewerOprHeight` | | `number` | `48` | `48` | +| `viewerOprItemMargin` | | `string | number` | `0 24px` | `0 24px` | +| `viewerOprMarginBottom` | | `number` | `48` | `48` | diff --git a/packages/components/input/docs/Index.zh.md b/packages/components/input/docs/Index.zh.md index 24bd387ba..b2526467e 100644 --- a/packages/components/input/docs/Index.zh.md +++ b/packages/components/input/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 数据录入 title: Input subtitle: 输入框 -theme: true + --- diff --git a/packages/components/layout/docs/Index.zh.md b/packages/components/layout/docs/Index.zh.md index aa4ded4d3..8a2a3c744 100644 --- a/packages/components/layout/docs/Index.zh.md +++ b/packages/components/layout/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 布局 title: Layout subtitle: 布局 -theme: true + --- diff --git a/packages/components/layout/docs/Theme.zh.md b/packages/components/layout/docs/Theme.zh.md index 71a4496fa..933f33bc7 100644 --- a/packages/components/layout/docs/Theme.zh.md +++ b/packages/components/layout/docs/Theme.zh.md @@ -1,5 +1,4 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@layout-sider-width` | `224px` | - | - | -| `@layout-sider-collapsed-width` | `@menu-collapsed-width` | `44px` | - | -| `@layout-header-height` | - | `44px` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `siderCollapsedWidth` | | `number` | `44` | `44` | +| `siderWidth` | | `number` | `224` | `224` | diff --git a/packages/components/loading-bar/docs/Theme.zh.md b/packages/components/loading-bar/docs/Theme.zh.md index f6c3072d6..07f27b6e8 100644 --- a/packages/components/loading-bar/docs/Theme.zh.md +++ b/packages/components/loading-bar/docs/Theme.zh.md @@ -1,5 +1,4 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@loading-bar-height` | `2px` | - | - | -| `@loading-bar-loading-color` | `@color-primary` | - | - | -| `@loading-bar-error-color` | `@color-error` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `height` | | `number` | `2` | `2` | +| `loadingColor` | | `string` | `#1c6eff` | `#4083E8` | diff --git a/packages/components/menu/docs/Index.zh.md b/packages/components/menu/docs/Index.zh.md index 7e48c5173..d947fbfce 100644 --- a/packages/components/menu/docs/Index.zh.md +++ b/packages/components/menu/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 导航 title: Menu subtitle: 导航菜单 -theme: true + --- diff --git a/packages/components/menu/docs/Theme.zh.md b/packages/components/menu/docs/Theme.zh.md index db7503482..594366b1a 100644 --- a/packages/components/menu/docs/Theme.zh.md +++ b/packages/components/menu/docs/Theme.zh.md @@ -1,33 +1,38 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@menu-color` | `var(--ix-text-color)` | - | - | -| `@menu-color-hover` | `var(--ix-text-color)` | - | - | -| `@menu-color-active` | `var(--ix-color-primary)` | - | - | -| `@menu-color-disabled` | `var(--ix-text-color-disabled)` | - | - | -| `@menu-background-color` | `var(--ix-background-color)` | - | - | -| `@menu-background-color-hover` | `var(--ix-background-color-light)` | - | - | -| `@menu-background-color-active` | `var(--ix-color-primary-l50)` | - | - | -| `@menu-background-color-disabled` | `var(--ix-background-color)` | - | - | -| `@menu-horizontal-background-color-active` | `var(--ix-background-color-medium)` | - | - | -| `@menu-border-color` | `var(--ix-border-color-secondary)` | - | - | -| `@menu-height` | `var(--ix-height-md)` | - | - | -| `@menu-height-level-1` | `var(--ix-height-lg)` | `40px` | - | -| `@menu-border-radius` | `var(--ix-border-radius-md)` | `0` | - | -| `@menu-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@menu-font-size-level-1` | `var(--ix-font-size-md)` | - | - | -| `@menu-icon-font-size` | `var(--ix-font-size-lg)` | - | - | -| `@menu-item-group-text-color` | `var(--ix-text-color-info)` | - | - | -| `@menu-overlay-min-width` | `128px` | - | - | -| `@menu-overlay-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@menu-overlay-box-shadow` | `@shadow-bottom-md` | - | - | -| `@menu-collapsed-width` | `48px` | `44px` | - | -| `@menu-dark-color` | `var(--ix-text-color-inverse)` | - | - | -| `@menu-dark-color-hover` | `var(--ix-text-color-inverse)` | - | - | -| `@menu-dark-color-active` | `var(--ix-text-color-inverse)` | - | - | -| `@menu-dark-color-disabled` | `var(--ix-text-color-inverse-disabled)` | - | - | -| `@menu-dark-background-color` | `var(--ix-background-color-inverse)` | - | - | -| `@menu-dark-background-color-hover` | `var(--ix-text-color-title-secondary)` | `@color-graphite-d50` | - | -| `@menu-dark-background-color-active` | `var(--ix-color-primary)` | `var(--ix-color-primary)` | - | -| `@menu-dark-background-color-disabled` | `transparent` | - | - | -| `@menu-dark-horizontal-background-color-active` | `@color-grey-d30` | `@color-graphite-d30` | - | -| `@menu-dark-item-group-text-color` | `@color-grey-d10` | `@color-graphite-d10` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `borderRadius` | | `number` | `0` | `0` | +| `collapsedWidth` | | `number` | `44` | `44` | +| `darkHorizontalItemBgActive` | | `string` | `#454c59` | `#C2C7D1` | +| `darkHorizontalItemBgHover` | | `string` | `#1e232b` | `#FFFFFF` | +| `darkHorizontalItemColorActive` | | `string` | `#ffffff` | `#fff` | +| `darkHorizontalItemColorHover` | | `string` | `#ffffff` | `#fff` | +| `darkItemBg` | | `string` | `#2f3540` | `#fff` | +| `darkItemBgActive` | | `string` | `#1c6eff` | `#4083E8` | +| `darkItemBgDisabled` | | `string` | `#2f3540` | `#fff` | +| `darkItemBgHover` | | `string` | `#1e232b` | `#FFFFFF` | +| `darkItemColor` | | `string` | `#ffffff` | `#fff` | +| `darkItemColorActive` | | `string` | `#ffffff` | `#fff` | +| `darkItemColorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `darkItemColorHover` | | `string` | `#ffffff` | `#fff` | +| `darkItemFontWeightActive` | | `number` | `600` | `600` | +| `darkItemGroupBg` | | `string` | `#2f3540` | `#fff` | +| `darkItemGroupColor` | | `string` | `#6f7785` | `#808999` | +| `fontSize` | | `number` | `12` | `12` | +| `fontSizeLevel1` | | `number` | `14` | `14` | +| `height` | | `number` | `32` | `32` | +| `heightLevel1` | | `number` | `40` | `40` | +| `horizontalItemBgActive` | | `string` | `#e8f4ff` | `#151D33` | +| `horizontalItemBgHover` | | `string` | `#f7f9fc` | `#171A1F` | +| `horizontalItemColorActive` | | `string` | `#1c6eff` | `#4083E8` | +| `horizontalItemColorHover` | | `string` | `#2f3540` | `#F4F8FF` | +| `itemBg` | | `string` | `#ffffff` | `#0A0C0F` | +| `itemBgActive` | | `string` | `#e8f4ff` | `#151D33` | +| `itemBgDisabled` | | `string` | `#ffffff` | `#0A0C0F` | +| `itemBgHover` | | `string` | `#f7f9fc` | `#171A1F` | +| `itemColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `itemColorActive` | | `string` | `#1c6eff` | `#4083E8` | +| `itemColorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `itemColorHover` | | `string` | `#2f3540` | `#F4F8FF` | +| `itemGroupBg` | | `string` | `#ffffff` | `#0A0C0F` | +| `itemGroupColor` | | `string` | `#6f7785` | `#808999` | +| `overlayMinWidth` | | `number` | `128` | `128` | diff --git a/packages/components/message/docs/Theme.zh.md b/packages/components/message/docs/Theme.zh.md index df06b6083..5da0bc595 100644 --- a/packages/components/message/docs/Theme.zh.md +++ b/packages/components/message/docs/Theme.zh.md @@ -1,20 +1,15 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@message-margin` | `@spacing-sm` | - | - | -| `@message-font-size` | `@font-size-md` | - | - | -| `@message-line-height` | `@line-height-base` | `24px` | - | -| `@message-content-min-width` | `128px` | - | - | -| `@message-content-max-width` | `480px` | - | - | -| `@message-content-padding-horizontal` | `@spacing-lg` | - | - | -| `@message-content-padding-vertical` | `(round((((@height-lg - @message-font-size * @message-line-height) / 2) * 10) / 10))` | `8px` | - | -| `@message-content-bg-color` | `@background-color-component` | - | - | -| `@message-content-border-radius` | `@border-radius-md` | - | - | -| `@message-content-box-shadow` | `@shadow-bottom-md` | - | - | -| `@message-icon-size` | `@font-size-lg` | - | - | -| `@message-icon-margin-right` | `@spacing-sm` | - | - | -| `@message-wrapper-top` | `15%` | - | - | -| `@message-icon-info-color` | `@color-info-l10` | - | - | -| `@message-icon-success-color` | `@color-success` | - | - | -| `@message-icon-warning-color` | `@color-warning-l10` | - | - | -| `@message-icon-error-color` | `@color-error-l10` | - | - | -| `@message-icon-loading-color` | `@color-primary-l10` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bgColor` | | `string` | `#ffffff` | `#0A0C0F` | +| `borderColor` | | `string` | `none` | `#1F2329` | +| `borderRadius` | | `number` | `4` | `4` | +| `borderType` | | `string` | `solid` | `solid` | +| `borderWidth` | | `number` | `0` | `1` | +| `contentMaxWidth` | | `number` | `480` | `480` | +| `contentMinWidth` | | `number` | `128` | `128` | +| `contentPaddingHorizontal` | | `number` | `16` | `16` | +| `contentPaddingVertical` | | `number` | `8` | `8` | +| `fontSize` | | `number` | `14` | `14` | +| `iconMarginRight` | | `number` | `8` | `8` | +| `margin` | | `string | number` | `8` | `8` | +| `wrapperTop` | | `string | number` | `15%` | `15%` | diff --git a/packages/components/modal/docs/Index.zh.md b/packages/components/modal/docs/Index.zh.md index c80179a97..5ef9bf759 100644 --- a/packages/components/modal/docs/Index.zh.md +++ b/packages/components/modal/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 反馈 title: Modal subtitle: 对话框 -theme: true + --- diff --git a/packages/components/modal/docs/Theme.zh.md b/packages/components/modal/docs/Theme.zh.md index 2bf55f69c..a54de9361 100644 --- a/packages/components/modal/docs/Theme.zh.md +++ b/packages/components/modal/docs/Theme.zh.md @@ -1,14 +1,7 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@modal-border-radius` | `var(--ix-border-radius-md)` | - | - | -| `@modal-box-shadow` | `@shadow-bottom-md` | - | - | -| `@modal-body-title-font-size` | `var(--ix-font-size-md)` | - | - | -| `@modal-body-title-font-weight` | `var(--ix-font-weight-lg)` | `var(--ix-font-weight-md)` | - | -| `@modal-body-title-color` | `var(--ix-text-color-title)` | - | - | -| `@modal-body-content-color` | `var(--ix-text-color)` | `var(--ix-text-color-info)` | - | -| `@modal-body-icon-font-size` | `48px` | - | - | -| `@modal-body-confirm-color` | `var(--ix-color-brown)` | `var(--ix-color-brown-l10)` | - | -| `@modal-body-info-color` | `var(--ix-color-primary)` | `var(--ix-color-primary-l10)` | - | -| `@modal-body-success-color` | `var(--ix-color-turquoise)` | - | - | -| `@modal-body-warning-color` | `var(--ix-color-brown)` | `var(--ix-color-brown-l10)` | - | -| `@modal-body-error-color` | `var(--ix-color-red)` | `var(--ix-color-red-l10)` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `contentColor` | | `string` | `#6f7785` | `#808999` | +| `iconSize` | | `number` | `40` | `40` | +| `titleColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `titleFontSize` | | `number` | `14` | `14` | +| `titleFontWeight` | | `number` | `400` | `400` | diff --git a/packages/components/notification/docs/Theme.zh.md b/packages/components/notification/docs/Theme.zh.md index 01c4c9e00..5ab71fd6b 100644 --- a/packages/components/notification/docs/Theme.zh.md +++ b/packages/components/notification/docs/Theme.zh.md @@ -1,32 +1,23 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@notification-padding` | `8px 8px 8px 16px` | `8px 8px 8px 16px` | - | -| `@notification-margin` | `0 0 16px 0` | `0 0 8px 0` | - | -| `@notification-width` | `384px` | - | - | -| `@notification-max-width` | `calc(100vw - 48px)` | - | - | -| `@notification-font-size` | `@font-size-md` | - | - | -| `@notification-line-height` | `@line-height-base` | - | - | -| `@notification-background-color` | `@background-color-component` | - | - | -| `@notification-border-radius` | `@border-radius-sm` | - | - | -| `@notification-box-shadow` | `@shadow-bottom-md` | - | - | -| `@notification-icon-font-size` | `@font-size-lg` | - | - | -| `@notification-icon-margin` | `4px 8px 0 0` | - | - | -| `@notification-icon-flex-direction` | `row` | - | - | -| `@notification-icon-wrap-width` | `44px` | - | - | -| `@notification-icon-info-color` | `@color-info-l10` | - | - | -| `@notification-icon-success-color` | `@color-success` | - | - | -| `@notification-icon-warning-color` | `@color-warning-l10` | - | - | -| `@notification-icon-error-color` | `@color-error-l10` | - | - | -| `@notification-close-width` | `14px` | - | - | -| `@notification-close-font-size` | `@font-size-sm` | `@font-size-lg` | - | -| `@notification-close-color` | `@color-graphite-d20` | - | - | -| `@notification-close-hover-color` | `@color-graphite-d20` | `@color-primary` | - | -| `@notification-close-right` | `8px` | `8px` | - | -| `@notification-close-top` | `8px` | `8px` | - | -| `@notification-title-font-size` | `@font-size-lg` | `@font-size-md` | - | -| `@notification-title-line-height` | `@line-height-base` | `24px` | - | -| `@notification-title-margin` | `0 16px 8px 0` | `0 24px 8px 0` | - | -| `@notification-content-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@notification-content-color` | `@color-graphite-d10` | - | - | -| `@notification-content-margin` | `0 16px 0 0` | - | - | -| `@notification-footer-margin` | `8px 0 0 0` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bgColor` | | `string` | `#ffffff` | `#0A0C0F` | +| `borderColor` | | `string` | `none` | `#1F2329` | +| `borderRadius` | | `number` | `2` | `2` | +| `borderType` | | `string` | `solid` | `solid` | +| `borderWidth` | | `number` | `0` | `1` | +| `closeIconRight` | | `string | number` | `8` | `8` | +| `closeIconTop` | | `string | number` | `8` | `8` | +| `contentColor` | | `string` | `#6f7785` | `#808999` | +| `contentFontSize` | | `number` | `12` | `12` | +| `contentMargin` | | `string | number` | `0 16px 0 0` | `0 16px 0 0` | +| `fontSize` | | `number` | `14` | `14` | +| `footerMargin` | | `string | number` | `8px 0 0 0` | `8px 0 0 0` | +| `iconMargin` | | `string | number` | `4px 8px` | `4px 8px` | +| `iconWrapperWidth` | | `number` | `44` | `44` | +| `margin` | | `string | number` | `0 0 8px 0` | `0 0 8px 0` | +| `maxWidth` | | `string | number` | `calc(100vw - 48px)` | `calc(100vw - 48px)` | +| `padding` | | `string | number` | `8px 8px 8px 16px` | `8px 8px 8px 16px` | +| `titleFontSize` | | `number` | `14` | `14` | +| `titleLineHeight` | | `number` | `24` | `24` | +| `titleMargin` | | `string | number` | `0 24px 8px 0` | `0 24px 8px 0` | +| `width` | | `number` | `384` | `384` | diff --git a/packages/components/pagination/docs/Index.zh.md b/packages/components/pagination/docs/Index.zh.md index fcb2a96d6..497308b26 100644 --- a/packages/components/pagination/docs/Index.zh.md +++ b/packages/components/pagination/docs/Index.zh.md @@ -4,6 +4,6 @@ type: 导航 order: 0 title: Pagination subtitle: 分页 -theme: true + --- diff --git a/packages/components/pagination/docs/Theme.zh.md b/packages/components/pagination/docs/Theme.zh.md index 83de8c1d0..5a2d58e35 100644 --- a/packages/components/pagination/docs/Theme.zh.md +++ b/packages/components/pagination/docs/Theme.zh.md @@ -1,25 +1,12 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@pagination-font-size-sm` | `var(--ix-font-size-sm)` | - | - | -| `@pagination-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@pagination-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - | -| `@pagination-item-padding-sm` | `0` | - | - | -| `@pagination-item-padding-md` | `var(--ix-spacing-xs)` | - | - | -| `@pagination-item-padding-lg` | `var(--ix-spacing-xs)` | - | - | -| `@pagination-item-content-size-sm` | `24px` | - | - | -| `@pagination-item-content-size-md` | `24px` | - | - | -| `@pagination-item-content-size-lg` | `32px` | - | - | -| `@pagination-item-content-border-radius` | `50%` | - | - | -| `@pagination-item-content-icon-font-size` | `var(--ix-font-size-lg)` | - | - | -| `@pagination-color` | `var(--ix-text-color)` | - | - | -| `@pagination-color-hover` | `var(--ix-text-color)` | `var(--ix-color-primary)` | - | -| `@pagination-color-active` | `var(--ix-text-color-inverse)` | `var(--ix-color-primary)` | - | -| `@pagination-color-disabled` | `var(--ix-text-color-disabled)` | - | - | -| `@pagination-background-color` | `var(--ix-background-color)` | - | - | -| `@pagination-background-color-hover` | `var(--ix-background-color-deep)` | `var(--ix-background-color-light)` | - | -| `@pagination-background-color-active` | `var(--ix-color-primary)` | `var(--ix-color-primary-l50)` | - | -| `@pagination-background-color-disabled` | `var(--ix-background-color-deep)` | - | - | -| `@pagination-outline-color` | `var(--ix-color-primary-l10)` | - | - | -| `@pagination-total-color` | `var(--ix-text-color)` | `var(--ix-text-color-info)` | - | -| `@pagination-sizes-color` | `var(--ix-text-color)` | `var(--ix-text-color-info)` | - | -| `@pagination-jumper-color` | `var(--ix-text-color)` | `var(--ix-text-color-info)` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `fontSizeLg` | | `number` | `14` | `14` | +| `fontSizeMd` | | `number` | `12` | `12` | +| `fontSizeSm` | | `number` | `12` | `12` | +| `itemContentSizeLg` | | `number` | `32` | `32` | +| `itemContentSizeMd` | | `number` | `24` | `24` | +| `itemContentSizeSm` | | `number` | `24` | `24` | +| `itemPaddingLg` | | `string | number` | `4` | `4` | +| `itemPaddingMd` | | `string | number` | `4` | `4` | +| `itmePaddingSm` | | `string | number` | `0` | `0` | +| `outLineColor` | | `string` | `#458fff` | `#1B61DD` | diff --git a/packages/components/popconfirm/docs/Index.zh.md b/packages/components/popconfirm/docs/Index.zh.md index 51b0c06f4..647511308 100644 --- a/packages/components/popconfirm/docs/Index.zh.md +++ b/packages/components/popconfirm/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 反馈 title: Popconfirm subtitle: 气泡确认框 -theme: true + --- diff --git a/packages/components/popconfirm/docs/Theme.zh.md b/packages/components/popconfirm/docs/Theme.zh.md index 8fa0a6760..2d99fee2c 100644 --- a/packages/components/popconfirm/docs/Theme.zh.md +++ b/packages/components/popconfirm/docs/Theme.zh.md @@ -1,13 +1,7 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@popconfirm-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@popconfirm-color` | `var(--ix-text-color)` | - | - | -| `@popconfirm-background-color` | `var(--ix-background-color)` | - | - | -| `@popconfirm-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@popconfirm-box-shadow` | `@shadow-bottom-md` | - | - | -| `@popconfirm-icon-size` | `var(--ix-font-size-lg)` | - | - | -| `@popconfirm-icon-color` | `var(--ix-color-brown)` | `var(--ix-color-brown-l10)` | - | -| `@popconfirm-title-font-size` | `var(--ix-font-size-md)` | - | - | -| `@popconfirm-title-font-weight` | `var(--ix-font-weight-xl)` | - | - | -| `@popconfirm-title-color` | `var(--ix-text-color-title)` | - | - | -| `@popconfirm-min-width` | `240px` | `320px` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `color` | | `string` | `#2f3540` | `#F4F8FF` | +| `fontSize` | | `number` | `12` | `12` | +| `iconColor` | | `string` | `#fdaa1d` | `#FDAA1D` | +| `minWidth` | | `number` | `240` | `240` | +| `titleFontSize` | | `number` | `14` | `14` | diff --git a/packages/components/popover/docs/Index.zh.md b/packages/components/popover/docs/Index.zh.md index 815038195..24e7cf66b 100644 --- a/packages/components/popover/docs/Index.zh.md +++ b/packages/components/popover/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 数据展示 title: Popover subtitle: 气泡卡片 -theme: true + --- diff --git a/packages/components/popover/docs/Theme.zh.md b/packages/components/popover/docs/Theme.zh.md index caf4bb24c..9fd4c6dd6 100644 --- a/packages/components/popover/docs/Theme.zh.md +++ b/packages/components/popover/docs/Theme.zh.md @@ -1,8 +1,5 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@popover-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@popover-color` | `var(--ix-text-color)` | `var(--ix-text-color-info)` | - | -| `@popover-background-color` | `var(--ix-background-color)` | - | - | -| `@popover-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@popover-box-shadow` | `@shadow-bottom-md` | - | - | -| `@popover-min-width` | `240px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `color` | | `string` | `#6f7785` | `#808999` | +| `fontSize` | | `number` | `12` | `12` | +| `minWidth` | | `number` | `240` | `240` | diff --git a/packages/components/progress/docs/Theme.zh.md b/packages/components/progress/docs/Theme.zh.md index 58dd877a6..fdba7f7cb 100644 --- a/packages/components/progress/docs/Theme.zh.md +++ b/packages/components/progress/docs/Theme.zh.md @@ -1,19 +1,14 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@progress-normal-background-color` | `@color-success` | - | - | -| `@progress-success-background-color` | `@color-success` | - | - | -| `@progress-exception-background-color` | `@color-error` | `@color-red-l10` | - | -| `@progress-active-background-color` | `@color-success` | - | - | -| `@progress-trail-background-color` | `@color-graphite-l40` | - | - | -| `@progress-text-width` | `36px` | - | - | -| `@progress-border-radius` | `100px` | - | - | -| `@progress-text-color` | `@text-color` | - | - | -| `@progress-line-height-lg` | `8px` | - | - | -| `@progress-line-height-md` | `6px` | - | - | -| `@progress-line-height-sm` | `2px` | - | - | -| `@progress-line-font-size-lg` | `@font-size-md` | - | - | -| `@progress-line-font-size-md` | `@font-size-md` | `@font-size-sm` | - | -| `@progress-line-font-size-sm` | `@font-size-sm` | - | - | -| `@progress-line-text-padding` | `0 0 0 @spacing-sm` | - | - | -| `@progress-circle-width` | `120px` | - | - | -| `@progress-circle-font-size-md` | `@font-size-2xl` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `borderRadius` | | `number` | `100` | `100` | +| `circleFontSize` | | `number` | `24` | `24` | +| `circleWidth` | | `number` | `120` | `120` | +| `lineFontSizeLg` | | `number` | `14` | `14` | +| `lineFontSizeMd` | | `number` | `12` | `12` | +| `lineFontSizeSm` | | `number` | `12` | `12` | +| `lineSizeLg` | | `number` | `8` | `8` | +| `lineSizeMd` | | `number` | `6` | `6` | +| `lineSizeSm` | | `number` | `2` | `2` | +| `lineTextPadding` | | `string | number` | `0 0 0 8px` | `0 0 0 8px` | +| `textWidth` | | `number` | `36` | `36` | +| `trailBgColor` | | `string` | `#edf1f7` | `#1F2329` | diff --git a/packages/components/radio/docs/Index.zh.md b/packages/components/radio/docs/Index.zh.md index 84a185152..9c90dce4b 100644 --- a/packages/components/radio/docs/Index.zh.md +++ b/packages/components/radio/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 数据录入 title: Radio subtitle: 单选框 -theme: true + --- diff --git a/packages/components/radio/docs/Theme.zh.md b/packages/components/radio/docs/Theme.zh.md index e8edfa649..1582e8ed8 100644 --- a/packages/components/radio/docs/Theme.zh.md +++ b/packages/components/radio/docs/Theme.zh.md @@ -1,14 +1,6 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@radio-color` | `var(--ix-text-color)` | - | - | -| `@radio-color-active` | `var(--ix-color-primary)` | - | - | -| `@radio-color-disabled` | `var(--ix-text-color-disabled)` | - | - | -| `@radio-background-color` | `var(--ix-background-color)` | - | - | -| `@radio-background-color-disabled` | `var(--ix-background-color-deep)` | - | - | -| `@radio-border-color` | `var(--ix-border-color)` | - | - | -| `@radio-border-color-hover` | `var(--ix-color-primary)` | - | - | -| `@radio-border-color-focus` | `var(--ix-color-primary)` | - | - | -| `@radio-label-padding` | `0 8px` | `0 4px` | - | -| `@radio-fieldset-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@radio-fieldset-background-color` | `var(--ix-background-color-light)` | - | - | -| `@radio-fieldset-border-color` | `var(--ix-border-color-secondary)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `fieldsetBgColor` | | `string` | `#f7f9fc` | `#171A1F` | +| `fieldsetBorderColor` | | `string` | `#e1e5eb` | `#1F2329` | +| `fieldsetBorderRadius` | | `number` | `2` | `2` | +| `labelPadding` | | `string | number` | `0 4px` | `0 4px` | diff --git a/packages/components/rate/docs/Theme.zh.md b/packages/components/rate/docs/Theme.zh.md index 23955a6c1..678a01802 100644 --- a/packages/components/rate/docs/Theme.zh.md +++ b/packages/components/rate/docs/Theme.zh.md @@ -1,10 +1,9 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@rate-placeholder-color` | `@form-placeholder-color` | `@color-graphite-l10` | - | -| `@rate-active-color` | `@color-yellow` | `@color-brown-l10` | - | -| `@rate-size-sm` | `14px` | - | - | -| `@rate-size-md` | `20px` | - | - | -| `@rate-size-lg` | `28px` | - | - | -| `@rate-item-margin-right` | `@spacing-sm` | - | - | -| `@rate-item-hover-scale` | `1.1` | - | - | -| `@rate-item-focus-outline` | `1px dashed @rate-active-color` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `activeColor` | | `string` | `#ffc145` | `#DB941D` | +| `itemMarginRight` | | `number` | `8` | `8` | +| `itemOutlineFocus` | | `string` | `1px dashed #ffc145` | `1px dashed #DB941D` | +| `itemScaleHover` | | `number` | `1.1` | `1.1` | +| `sizeLg` | | `number` | `28` | `28` | +| `sizeMd` | | `number` | `20` | `20` | +| `sizeSm` | | `number` | `14` | `14` | diff --git a/packages/components/result/docs/Theme.zh.md b/packages/components/result/docs/Theme.zh.md index b60a66746..d05721cdf 100644 --- a/packages/components/result/docs/Theme.zh.md +++ b/packages/components/result/docs/Theme.zh.md @@ -1,24 +1,12 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@result-padding` | `@spacing-gutter * 6 @spacing-gutter * 4` | - | - | -| `@result-text-align` | `center` | - | - | -| `@result-icon-margin` | `@spacing-lg` | - | - | -| `@result-icon-size` | `@font-size-sm * 4` | - | - | -| `@result-title-font-size` | `@font-size-2xl` | - | - | -| `@result-title-color` | `@text-color` | - | - | -| `@result-title-font-weight` | `@font-weight-md` | - | - | -| `@result-title-line-height` | `32px` | - | - | -| `@result-subtitle-font-size` | `@font-size-sm` | - | - | -| `@result-subtitle-color` | `@color-graphite-d10` | - | - | -| `@result-subtitle-font-weight` | `@font-weight-md` | - | - | -| `@result-subtitle-line-height` | `18px` | - | - | -| `@result-subtitle-margin-top` | `@spacing-xs` | - | - | -| `@result-extra-margin` | `@spacing-xl` | - | - | -| `@result-extra-children-margin` | `@spacing-sm` | - | - | -| `@result-content-margin` | `@spacing-xl` | - | - | -| `@result-content-padding` | `@spacing-xl @spacing-gutter * 5` | - | - | -| `@result-content-background-color` | `@color-grey-l50` | - | - | -| `@result-success` | `@color-success` | - | - | -| `@result-warning` | `@color-warning` | `@color-warning-l10` | - | -| `@result-error` | `@color-error` | - | - | -| `@result-info` | `@color-info` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `contentMarginTop` | | `number` | `24` | `24` | +| `contentPadding` | | `string | number` | `24px 40px` | `24px 40px` | +| `extraMarginTop` | | `number` | `24` | `24` | +| `iconSize` | | `number` | `48` | `48` | +| `padding` | | `string | number` | `48px 32px` | `48px 32px` | +| `subtitleFontSize` | | `number` | `12` | `12` | +| `subtitleLineHeight` | | `number` | `18` | `18` | +| `subtitleMarginTop` | | `number` | `4` | `4` | +| `titleFontSize` | | `number` | `20` | `20` | +| `titleLineHeight` | | `number` | `32` | `32` | diff --git a/packages/components/select/docs/Theme.zh.md b/packages/components/select/docs/Theme.zh.md index 0bc12c072..565d733f2 100644 --- a/packages/components/select/docs/Theme.zh.md +++ b/packages/components/select/docs/Theme.zh.md @@ -1,63 +1,12 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@select-font-size-sm` | `@form-font-size-sm` | - | - | -| `@select-font-size-md` | `@form-font-size-md` | `@form-font-size-sm` | - | -| `@select-font-size-lg` | `@form-font-size-lg` | `@form-font-size-md` | - | -| `@select-line-height` | `@form-line-height` | - | - | -| `@select-height-sm` | `@form-height-sm` | - | - | -| `@select-height-md` | `@form-height-md` | - | - | -| `@select-height-lg` | `@form-height-lg` | - | - | -| `@select-padding-vertical-sm` | `@form-padding-vertical-sm` | - | - | -| `@select-padding-vertical-md` | `@form-padding-vertical-md` | - | - | -| `@select-padding-vertical-lg` | `@form-padding-vertical-lg` | - | - | -| `@select-border-width` | `@form-border-width` | - | - | -| `@select-border-style` | `@form-border-style` | - | - | -| `@select-border-color` | `@form-border-color` | - | - | -| `@select-border-radius` | `@border-radius-sm` | - | - | -| `@select-color` | `@form-color` | - | - | -| `@select-color-secondary` | `@form-color-secondary` | - | - | -| `@select-background-color` | `@form-background-color` | - | - | -| `@select-placeholder-color` | `@form-placeholder-color` | - | - | -| `@select-hover-color` | `@form-hover-color` | - | - | -| `@select-active-color` | `@form-active-color` | - | - | -| `@select-active-box-shadow` | `@form-active-box-shadow` | - | - | -| `@select-disabled-color` | `@form-disabled-color` | - | - | -| `@select-disabled-background-color` | `@form-disabled-background-color` | - | - | -| `@select-option-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@select-option-height` | `@height-md` | - | - | -| `@select-option-padding` | `@spacing-sm @spacing-md` | - | - | -| `@select-option-color` | `@text-color` | - | - | -| `@select-option-disabled-color` | `@text-color-disabled` | `@color-graphite-l10` | - | -| `@select-option-active-background-color` | `@color-graphite-l50` | `@color-graphite-l50` | - | -| `@select-option-selected-color` | `@color-primary` | - | - | -| `@select-option-selected-background-color` | `@color-primary-l50` | `@color-primary-l50` | - | -| `@select-option-selected-font-weight` | `@font-weight-xl` | `@font-weight-md` | - | -| `@select-option-label-margin-left` | `@spacing-sm` | - | - | -| `@select-option-group-border` | `@border-width-sm @border-style @border-color` | - | - | -| `@select-option-group-color` | `@color-graphite` | - | - | -| `@select-option-group-margin` | `0 @spacing-md` | `0 @spacing-md` | - | -| `@select-option-group-padding-left` | `0` | `0` | - | -| `@select-option-grouped-padding-left` | `@spacing-xl` | - | - | -| `@select-option-container-padding` | `@spacing-sm 0` | `@spacing-xs 0` | - | -| `@select-option-container-background-color` | `@background-color-component` | - | - | -| `@select-option-container-border-radius` | `@border-radius-sm` | - | - | -| `@select-option-container-box-shadow` | `@shadow-bottom-md` | - | - | -| `@select-overlay-search-wrapper-padding` | `4px 12px 8px` | - | - | -| `@select-icon-font-size` | `@font-size-lg` | `@font-size-lg` | - | -| `@select-icon-margin-right` | `@spacing-xs` | `@spacing-sm` | - | -| `@select-icon-color` | `@select-placeholder-color` | `@color-graphite-l10` | - | -| `@select-icon-hover-color` | `@select-color-secondary` | `@color-primary` | - | -| `@select-icon-background-color` | `@select-background-color` | - | - | -| `@select-multiple-padding` | `@select-padding-vertical-md` | `4px` | - | -| `@select-multiple-item-padding` | `0 @spacing-xs` | `0 @spacing-sm 0 @spacing-sm` | - | -| `@select-multiple-item-background-color` | `@color-graphite-l40` | `@color-graphite-l40` | - | -| `@select-multiple-item-disabled-color` | `@select-disabled-color` | - | - | -| `@select-multiple-item-disabled-border-color` | `@select-border-color` | `@color-graphite-l30` | - | -| `@select-multiple-item-border-width` | `@border-width-sm` | - | - | -| `@select-multiple-item-border` | `@select-multiple-item-border-width @border-style @border-color-split` | - | - | -| `@select-multiple-item-border-radius` | `@select-border-radius` | `2px` | - | -| `@select-multiple-item-label-margin` | `0 -@spacing-xs 0 @spacing-xs` | - | - | -| `@select-multiple-item-remove-icon-font-size` | `@font-size-lg` | `@font-size-lg` | - | -| `@select-multiple-item-remove-icon-color` | `@color-graphite` | `@color-graphite-d20` | - | -| `@select-multiple-item-remove-icon-hover-color` | `@color-graphite-d10` | `@color-primary-l10` | - | -| `@select-multiple-item-remove-icon-margin` | `0 0 0 @spacing-xs` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `multipleOptionGroupedPaddingLeft` | | `number` | `12` | `12` | +| `optionContainerPadding` | | `string | number` | `4px 0` | `4px 0` | +| `optionFontSize` | | `number` | `12` | `12` | +| `optionGroupMargin` | | `string | number` | `0 12` | `0 12` | +| `optionGroupPaddingLeft` | | `number` | `0` | `0` | +| `optionGroupedPaddingLeft` | | `number` | `24` | `24` | +| `optionHeight` | | `number` | `32` | `32` | +| `optionLabelMarginLeft` | | `number` | `8` | `8` | +| `optionPadding` | | `string | number` | `8px 12px` | `8px 12px` | +| `overlaySearchWrapperPadding` | | `string | number` | `4px 12px 8px` | `4px 12px 8px` | diff --git a/packages/components/skeleton/docs/Theme.zh.md b/packages/components/skeleton/docs/Theme.zh.md index 232351b8d..bf4f1d37c 100644 --- a/packages/components/skeleton/docs/Theme.zh.md +++ b/packages/components/skeleton/docs/Theme.zh.md @@ -1,6 +1,6 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@skeleton-margin-bottom` | `@spacing-sm` | - | - | -| `@skeleton-loader-margin-bottom` | `@spacing-xs` | - | - | -| `@skeleton-start-color` | `@color-graphite-l40` | - | - | -| `@skeleton-end-color` | `@color-graphite-l30` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `endColor` | | `string` | `#e1e5eb` | `#1F2329` | +| `loaderMarginBottom` | | `number` | `4` | `4` | +| `marginBottom` | | `number` | `8` | `8` | +| `startColor` | | `string` | `#edf1f7` | `#1F2329` | diff --git a/packages/components/slider/docs/Theme.zh.md b/packages/components/slider/docs/Theme.zh.md index fdd7cdb10..78603f9f7 100644 --- a/packages/components/slider/docs/Theme.zh.md +++ b/packages/components/slider/docs/Theme.zh.md @@ -1,26 +1,22 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@slider-marks-label-color` | `rgba(0, 0, 0, 0.451)` | - | - | -| `@slider-rail-background-color` | `@color-graphite-l30` | - | - | -| `@slider-track-background-color` | `@color-primary` | - | - | -| `@slider-thumb-background-color` | `@color-white` | - | - | -| `@slider-dot-background-color` | `@color-graphite-l30` | `@color-graphite-l30` | - | -| `@slider-thumb-border` | `2px solid @color-primary` | - | - | -| `@slider-rail-hover-background-color` | `@color-graphite-l30` | - | - | -| `@slider-track-hover-background-color` | `@color-primary` | - | - | -| `@slider-thumb-hover-border-color` | `@color-primary` | - | - | -| `@slider-thumb-focus-border-color` | `@color-primary` | - | - | -| `@slider-thumb-focus-box-shadow` | `0 0 0 5px fade(#46a6ff, 12%)` | - | - | -| `@slider-dot-active-background-color` | `@color-primary` | - | - | -| `@slider-marks-label-active-color` | `rgba(0, 0, 0, 0.851)` | - | - | -| `@slider-track-disabled-background-color` | `rgba(0, 0, 0, 0.251)` | `@color-graphite` | - | -| `@slider-thumb-disabled-background-color` | `@color-white` | - | - | -| `@slider-thumb-disabled-border-color` | `rgba(0, 0, 0, 0.251)` | `@color-graphite` | - | -| `@slider-dot-disabled-active-background-color` | `rgba(0, 0, 0, 0.251)` | `@color-graphite` | - | -| `@slider-thumb-width` | `10px` | - | - | -| `@slider-thumb-height` | `10px` | - | - | -| `@slider-thumb-margin-top` | `-3px` | - | - | -| `@slider-thumb-vertical-margin-left` | `-4px` | - | - | -| `@slider-thumb-vertical-margin-top` | `-6px` | - | - | -| `@slider-height` | `2px` | - | - | -| `@slider-width` | `2px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `dotBgColor` | | `string` | `#e1e5eb` | `#1F2329` | +| `dotBgColorActive` | | `string` | `#1c6eff` | `#4083E8` | +| `dotBgColorDisabled` | | `string` | `#e1e5eb` | `#1F2329` | +| `markLabelColor` | | `string` | `#a1a7b3` | `#525966` | +| `markLabelColorActive` | | `string` | `#2f3540` | `#F4F8FF` | +| `railBgColor` | | `string` | `#e1e5eb` | `#1F2329` | +| `railBgColorHover` | | `string` | `#e1e5eb` | `#1F2329` | +| `railSize` | | `number` | `2` | `2` | +| `thumbBgColor` | | `string` | `#ffffff` | `#ffffff` | +| `thumbBorderColor` | | `string` | `#1c6eff` | `#4083E8` | +| `thumbBorderColorDisabled` | | `string` | `#e1e5eb` | `#1F2329` | +| `thumbBorderColorFocus` | | `string` | `#1c6eff` | `#4083E8` | +| `thumbBorderColorHover` | | `string` | `#1c6eff` | `#4083E8` | +| `thumbBorderType` | | `string` | `solid` | `solid` | +| `thumbBorderWidth` | | `number` | `2` | `2` | +| `thumbBoxShadowFocus` | | `string` | `0 0 0 5px rgba(28, 110, 255, 0.12)` | `0 0 0 5px rgba(64, 131, 232, 0.12)` | +| `thumbSize` | | `number` | `10` | `10` | +| `trackBgColor` | | `string` | `#1c6eff` | `#4083E8` | +| `trackBgColorDisabled` | | `string` | `#e1e5eb` | `#1F2329` | +| `trackBgColorHover` | | `string` | `#1c6eff` | `#4083E8` | diff --git a/packages/components/space/docs/Index.zh.md b/packages/components/space/docs/Index.zh.md index 7cec85e62..e4c9b5f26 100644 --- a/packages/components/space/docs/Index.zh.md +++ b/packages/components/space/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 布局 title: Space subtitle: 间距 -theme: true + --- diff --git a/packages/components/space/docs/Theme.zh.md b/packages/components/space/docs/Theme.zh.md index cd239f2d2..6a4895770 100644 --- a/packages/components/space/docs/Theme.zh.md +++ b/packages/components/space/docs/Theme.zh.md @@ -1,3 +1,3 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@space-separator-color` | `var(--ix-border-color-secondary)` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `separatorColor` | | `string` | `#e1e5eb` | `#1F2329` | diff --git a/packages/components/spin/docs/Theme.zh.md b/packages/components/spin/docs/Theme.zh.md index 3f27d3092..6483139db 100644 --- a/packages/components/spin/docs/Theme.zh.md +++ b/packages/components/spin/docs/Theme.zh.md @@ -1,10 +1,13 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@spin-tip-color` | `@color-primary` | - | - | -| `@spin-icon-color` | `@color-primary` | - | - | -| `@spin-font-size-sm` | `@font-size-sm` | - | - | -| `@spin-font-size-md` | `@font-size-md` | - | - | -| `@spin-font-size-lg` | `@font-size-lg` | - | - | -| `@spin-icon-size-sm` | `20px` | - | - | -| `@spin-icon-size-md` | `28px` | - | - | -| `@spin-icon-size-lg` | `48px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bgCircleStroke` | | `string` | `#1c6eff` | `#4083E8` | +| `fontSizeLg` | | `number` | `16` | `16` | +| `fontSizeMd` | | `number` | `14` | `14` | +| `fontSizeSm` | | `number` | `12` | `12` | +| `fstArchStroke` | | `string` | `#12a679` | `#40C695` | +| `iconColor` | | `string` | `#1c6eff` | `#4083E8` | +| `iconSizeLg` | | `number` | `48` | `48` | +| `iconSizeMd` | | `number` | `28` | `28` | +| `iconSizeSm` | | `number` | `20` | `20` | +| `sndArchStroke` | | `string` | `#d3d7de` | `#3C424D` | +| `tipColor` | | `string` | `#1c6eff` | `#4083E8` | diff --git a/packages/components/statistic/docs/Theme.zh.md b/packages/components/statistic/docs/Theme.zh.md index 2a1173db4..3ab97a318 100644 --- a/packages/components/statistic/docs/Theme.zh.md +++ b/packages/components/statistic/docs/Theme.zh.md @@ -1,11 +1,7 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@statistic-font-size-sm` | `@font-size-md` | - | - | -| `@statistic-font-size-md` | `@font-size-md` | - | - | -| `@statistic-font-size-lg` | `@font-size-xl` | - | - | -| `@statistic-font-size-xl` | `@font-size-2xl` | - | - | -| `@statistic-line-height` | `@line-height-base` | - | - | -| `@statistic-color` | `@color-black` | `@color-graphite-d40` | - | -| `@statistic-title-margin` | `@spacing-xl` | - | - | -| `@statistic-prefix-margin` | `@spacing-xs` | - | - | -| `@statistic-suffix-margin` | `@spacing-xs` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `color` | | `string` | `#2f3540` | `#F4F8FF` | +| `fontSizeLg` | | `number` | `24` | `24` | +| `fontSizeMd` | | `number` | `14` | `14` | +| `fontSizeSm` | | `number` | `14` | `14` | +| `fontSizeXl` | | `number` | `30` | `30` | diff --git a/packages/components/stepper/docs/Theme.zh.md b/packages/components/stepper/docs/Theme.zh.md index 0ef7badce..cadd4d958 100644 --- a/packages/components/stepper/docs/Theme.zh.md +++ b/packages/components/stepper/docs/Theme.zh.md @@ -1,35 +1,17 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@stepper-background` | `@background-color-component` | - | - | -| `@stepper-line-border` | `1px solid transparent` | `1px dashed transparent` | - | -| `@stepper-item-process-tail-color` | `@disabled-color` | - | - | -| `@stepper-item-process-icon-color` | `@color-primary` | - | - | -| `@stepper-item-process-title-color` | `@text-color` | `@color-graphite-d40` | - | -| `@stepper-item-process-description-color` | `@text-color` | `@color-graphite` | - | -| `@stepper-item-finish-tail-color` | `@color-primary` | - | - | -| `@stepper-item-finish-icon-color` | `@color-primary` | - | - | -| `@stepper-item-finish-title-color` | `@text-color` | `@color-graphite-d40` | - | -| `@stepper-item-finish-description-color` | `@text-color-secondary` | `@color-graphite` | - | -| `@stepper-item-wait-tail-color` | `@disabled-color` | - | - | -| `@stepper-item-wait-icon-color` | `@disabled-color` | - | - | -| `@stepper-item-wait-title-color` | `@text-color-secondary` | `@color-graphite` | - | -| `@stepper-item-wait-description-color` | `@text-color-secondary` | `@color-graphite` | - | -| `@stepper-item-error-tail-color` | `@stepper-item-wait-tail-color` | - | - | -| `@stepper-item-error-icon-color` | `@color-error` | `@color-error-d10` | - | -| `@stepper-item-error-title-color` | `@color-error` | `@text-color` | - | -| `@stepper-item-error-description-color` | `@color-error` | `@text-color` | - | -| `@stepper-item-spacing-md` | `@spacing-lg` | - | - | -| `@stepper-item-icon-size-md` | `32px` | - | - | -| `@stepper-item-icon-font-size-md` | `@font-size-lg` | - | - | -| `@stepper-item-icon-margin-md` | `0 8px 0 0` | - | - | -| `@stepper-item-title-font-size-md` | `@font-size-lg` | - | - | -| `@stepper-item-description-font-size-md` | `@font-size-md` | - | - | -| `@stepper-item-spacing-sm` | `@spacing-md` | - | - | -| `@stepper-item-icon-size-sm` | `24px` | - | - | -| `@stepper-item-icon-font-size-sm` | `@font-size-md` | - | - | -| `@stepper-item-icon-margin-sm` | `0 8px 0 0` | - | - | -| `@stepper-item-title-font-size-sm` | `@font-size-md` | - | - | -| `@stepper-item-font-weight` | `500` | - | - | -| `@stepper-item-description-font-size-sm` | `@font-size-sm` | - | - | -| `@stepper-item-content-min-height-md` | `80px` | - | - | -| `@stepper-item-content-min-height-sm` | `60px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `contentMinHeightMd` | | `number` | `80` | `80` | +| `contentMinHeightSm` | | `number` | `60` | `60` | +| `descriptionFontSizeMd` | | `number` | `14` | `14` | +| `descriptionFontSizeSm` | | `number` | `12` | `12` | +| `iconBorderWidthMd` | | `number` | `2` | `2` | +| `iconBorderWidthSm` | | `number` | `2` | `2` | +| `iconFontSizeMd` | | `number` | `16` | `16` | +| `iconFontSizeSm` | | `number` | `14` | `14` | +| `iconMarginMd` | | `string | number` | `0 8px 0 0` | `0 8px 0 0` | +| `iconMarginSm` | | `string | number` | `0 8px 0 0` | `0 8px 0 0` | +| `iconSizeMd` | | `number` | `32` | `32` | +| `iconSizeSm` | | `number` | `24` | `24` | +| `lineType` | | `string` | `dashed` | `dashed` | +| `titleFontSizeMd` | | `number` | `16` | `16` | +| `titleFontSizeSm` | | `number` | `14` | `14` | diff --git a/packages/components/switch/docs/Theme.zh.md b/packages/components/switch/docs/Theme.zh.md index 13f22b44d..eb4170d29 100644 --- a/packages/components/switch/docs/Theme.zh.md +++ b/packages/components/switch/docs/Theme.zh.md @@ -1,22 +1,15 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@switch-font-size` | `@form-font-size-xs` | - | - | -| `@switch-line-height` | `@form-line-height` | - | - | -| `@switch-height-sm` | `@form-height-xs` | - | - | -| `@switch-height-md` | `@form-height-sm` | - | - | -| `@switch-height-lg` | `@form-height-md` | - | - | -| `@switch-border-radius` | `@border-radius-full` | - | - | -| `@switch-color` | `@form-background-color` | - | - | -| `@switch-background-color` | `@form-placeholder-color` | `@color-graphite-l10` | - | -| `@switch-active-color` | `@form-active-color` | - | - | -| `@switch-active-disabled-color` | `@color-primary-l30` | - | - | -| `@switch-disabled-color` | `@color-graphite-l30` | - | - | -| `@switch-box-size-sm` | `12px` | - | - | -| `@switch-box-size-md` | `20px` | - | - | -| `@switch-box-size-lg` | `28px` | - | - | -| `@switch-box-size-padding` | `2px` | - | - | -| `@switch-box-background-color` | `@switch-color` | - | - | -| `@switch-box-box-shadow` | `0 2px 4px rgba(0, 0, 0, 0.25)` | `none` | - | -| `@switch-icon-font-size-sm` | `9px` | - | - | -| `@switch-icon-font-size-md` | `@font-size-md` | - | - | -| `@switch-icon-font-size-lg` | `@font-size-md` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `activeDisabledColor` | | `string` | `#96c7ff` | `#173B7A` | +| `handleBgColor` | | `string` | `#ffffff` | `#fff` | +| `handleBoxShadow` | | `string` | `none` | `none` | +| `handlePadding` | | `number` | `2` | `2` | +| `handleSizeLg` | | `number` | `28` | `28` | +| `handleSizeMd` | | `number` | `20` | `20` | +| `handleSizeSm` | | `number` | `12` | `12` | +| `heightLg` | | `number` | `32` | `32` | +| `heightMd` | | `number` | `24` | `24` | +| `heightSm` | | `number` | `16` | `16` | +| `iconFontSizeLg` | | `number` | `14` | `14` | +| `iconFontSizeMd` | | `number` | `14` | `14` | +| `iconFontSizeSm` | | `number` | `9` | `9` | diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md index 2a9d0c89d..96c7ab6b8 100644 --- a/packages/components/table/docs/Index.zh.md +++ b/packages/components/table/docs/Index.zh.md @@ -4,6 +4,6 @@ type: 数据展示 title: Table subtitle: 表格 order: 0 -theme: true + --- diff --git a/packages/components/table/docs/Theme.zh.md b/packages/components/table/docs/Theme.zh.md index f171799da..5c06f9859 100644 --- a/packages/components/table/docs/Theme.zh.md +++ b/packages/components/table/docs/Theme.zh.md @@ -1,28 +1,25 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@table-font-size-sm` | `var(--ix-font-size-sm)` | - | - | -| `@table-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@table-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-sm)` | - | -| `@table-head-row-height-sm` | `var(--ix-height-md)` | `var(--ix-height-md)` | - | -| `@table-head-row-height-md` | `var(--ix-height-lg)` | `var(--ix-height-md)` | - | -| `@table-head-row-height-lg` | `var(--ix-height-xl)` | `var(--ix-height-md)` | - | -| `@table-body-row-height-sm` | `var(--ix-height-lg)` | `var(--ix-height-md)` | - | -| `@table-body-row-height-md` | `var(--ix-height-xl)` | `var(--ix-height-lg)` | - | -| `@table-body-row-height-lg` | `var(--ix-height-2xl)` | - | - | -| `@table-row-padding-horizontal-sm` | `var(--ix-spacing-sm)` | - | - | -| `@table-row-padding-horizontal-md` | `var(--ix-spacing-md)` | - | - | -| `@table-row-padding-horizontal-lg` | `var(--ix-spacing-lg)` | - | - | -| `@table-border-color` | `var(--ix-border-color-secondary)` | - | - | -| `@table-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@table-head-color` | `var(--ix-text-color-title-secondary)` | - | - | -| `@table-head-background-color` | `var(--ix-background-color-medium)` | - | - | -| `@table-head-separator-color` | `var(--ix-border-color)` | - | - | -| `@table-head-icon-color` | `inherit` | `@color-graphite-l10` | - | -| `@table-head-icon-color-active` | `var(--ix-color-primary)` | - | - | -| `@table-head-icon-background-color-hover` | `var(--ix-background-color-deep)` | - | - | -| `@table-head-font-weight` | `var(--ix-font-weight-lg)` | `var(--ix-font-weight-md)` | - | -| `@table-body-row-background-color-hover` | `var(--ix-background-color-light)` | - | - | -| `@table-body-row-background-color-selected` | `var(--ix-color-primary-l50)` | `var(--ix-background-color)` | - | -| `@table-expandable-icon-color` | `var(--ix-text-color-secondary)` | `@color-graphite-l10` | - | -| `@table-expandable-background-color` | `@table-body-row-background-color-hover` | - | - | -| `@table-expandable-background-color-hover` | `@table-body-row-background-color-hover` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bodyRowBgColorExpanded` | | `string` | `#f7f9fc` | `#171A1F` | +| `bodyRowBgColorHover` | | `string` | `#f7f9fc` | `#171A1F` | +| `bodyRowBgColorSelected` | | `string` | `#ffffff` | `#0A0C0F` | +| `bodyRowBgColorTreeExpanded` | | `string` | `#f7f9fc` | `#171A1F` | +| `bodyRowHeightLg` | | `number` | `56` | `56` | +| `bodyRowHeightMd` | | `number` | `40` | `40` | +| `bodyRowHeightSm` | | `number` | `32` | `32` | +| `expandableIconColor` | | `string` | `#bec3cc` | `#687080` | +| `fontSizeLg` | | `number` | `12` | `12` | +| `fontSizeMd` | | `number` | `12` | `12` | +| `fontSizeSm` | | `number` | `12` | `12` | +| `headBgColor` | | `string` | `#edf1f7` | `#1F2329` | +| `headColor` | | `string` | `#454c59` | `#C2C7D1` | +| `headIconBgColorHover` | | `string` | `#e1e5eb` | `#1F2329` | +| `headIconColor` | | `string` | `#bec3cc` | `#687080` | +| `headIconColorActive` | | `string` | `#1c6eff` | `#4083E8` | +| `headRowHeightLg` | | `number` | `32` | `32` | +| `headRowHeightMd` | | `number` | `32` | `32` | +| `headRowHeightSm` | | `number` | `32` | `32` | +| `headSeparatorColor` | | `string` | `#d3d7de` | `#3C424D` | +| `rowPaddingHorizontalLg` | | `number` | `16` | `16` | +| `rowPaddingHorizontalMd` | | `number` | `12` | `12` | +| `rowPaddingHorizontalSm` | | `number` | `8` | `8` | diff --git a/packages/components/tabs/docs/Theme.zh.md b/packages/components/tabs/docs/Theme.zh.md index c9f4d7228..597bd19f8 100644 --- a/packages/components/tabs/docs/Theme.zh.md +++ b/packages/components/tabs/docs/Theme.zh.md @@ -1,28 +1,11 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@tabs-selected-color` | `@color-primary` | - | - | -| `@tabs-hover-color` | `@color-primary-l10` | - | - | -| `@tabs-active-color` | `@color-primary-d10` | - | - | -| `@tabs-disabled-color` | `@color-graphite-l10` | - | - | -| `@tabs-nav-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@tabs-nav-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - | -| `@tabs-nav-background-color` | `@color-white` | - | - | -| `@tabs-nav-border-color` | `@color-graphite-l30` | - | - | -| `@tabs-nav-bottom-color` | `@color-graphite-l30` | - | - | -| `@tabs-card-nav-font-size` | `@font-size-md` | - | - | -| `@tabs-segment-nav-disabled-background-color` | `@color-graphite-l40` | - | - | -| `@tabs-segment-nav-primary-active-background-color` | `@color-primary` | - | - | -| `@tabs-segment-nav-primary-active-text-color` | `@color-white` | - | - | -| `@tabs-segment-nav-height` | `32px` | - | - | -| `@tabs-card-nav-tab-background-color` | `@color-graphite-l50` | - | - | -| `@tabs-card-nav-tab-selected-background-color` | `@color-white` | - | - | -| `@tabs-nav-tab-padding` | `0 16px` | - | - | -| `@tabs-nav-tab-height` | `40px` | - | - | -| `@tabs-nav-tab-text-color` | `@color-graphite-d40` | - | - | -| `@tabs-nav-bar-color` | `@color-primary` | - | - | -| `@tabs-nav-bar-height` | `2px` | - | - | -| `@tabs-border-radius` | `2px` | - | - | -| `@tabs-pane-min-width` | `72px` | - | - | -| `@tabs-pane-padding` | `16px` | - | - | -| `@tabs-icon-font-size` | `@font-size-lg` | - | - | -| `@tabs-icon-color` | `@color-graphite-d20` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `borderRadius` | | `number` | `2` | `2` | +| `navBarHeight` | | `number` | `2` | `2` | +| `navFontSizeLg` | | `number` | `14` | `14` | +| `navFontSizeMd` | | `number` | `12` | `12` | +| `navTabHeight` | | `number` | `40` | `40` | +| `navTabMinWidth` | | `number` | `72` | `72` | +| `navTabPadding` | | `string | number` | `0 16px` | `0 16px` | +| `panelPaddingSize` | | `number` | `16` | `16` | +| `segmentNavHeight` | | `number` | `32` | `32` | diff --git a/packages/components/tag/docs/Index.zh.md b/packages/components/tag/docs/Index.zh.md index e1c53ff02..8e4e97973 100644 --- a/packages/components/tag/docs/Index.zh.md +++ b/packages/components/tag/docs/Index.zh.md @@ -4,7 +4,7 @@ type: 通用 title: Tag subtitle: 标签 order: 0 -theme: true + --- 根据事物的属性和维度进行标记分类的可视化元素。 diff --git a/packages/components/tag/docs/Theme.zh.md b/packages/components/tag/docs/Theme.zh.md index aeadd6609..ebbb702e6 100644 --- a/packages/components/tag/docs/Theme.zh.md +++ b/packages/components/tag/docs/Theme.zh.md @@ -1,31 +1,14 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@tag-line-height` | `calc(var(--ix-font-size) + var(--ix-line-height-gutter) - @tag-border-width * 2)` | - | - | -| `@tag-border-width` | `1px` | - | - | -| `@tag-border-color` | `var(--ix-tag-border-color, var(--ix-border-color))` | - | - | -| `@tag-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@tag-min-width-rect` | `40px` | - | - | -| `@tag-min-width-round` | `48px` | - | - | -| `@tag-min-width-numeric` | `64px` | - | - | -| `@tag-color` | `var(--ix-tag-color, var(--ix-text-color-info))` | - | - | -| `@tag-color-inverse` | `var(--ix-text-color-inverse)` | - | - | -| `@tag-background-color` | `var(--ix-tag-background-color, var(--ix-background-color-medium))` | `var(--ix-tag-background-color, #f0f1f2)` | - | -| `@tag-background-color-filled` | `@color-grey` | `#99acd1` | - | -| `@tag-color-success` | `var(--ix-color-turquoise)` | `var(--ix-color-turquoise-d10)` | - | -| `@tag-background-color-success` | `#e7f6f1` | - | - | -| `@tag-background-color-success-filled` | `var(--ix-color-turquoise-l10)` | - | - | -| `@tag-color-info` | `var(--ix-color-primary)` | - | - | -| `@tag-background-color-info` | `#e8f0ff` | - | - | -| `@tag-background-color-info-filled` | `var(--ix-color-primary-l10)` | `#689fff` | - | -| `@tag-color-warning` | `var(--ix-color-brown)` | - | - | -| `@tag-background-color-warning` | `#fff3da` | - | - | -| `@tag-background-color-warning-filled` | `var(--ix-color-brown-l10)` | - | - | -| `@tag-color-risk` | `var(--ix-color-orange)` | - | - | -| `@tag-background-color-risk` | `#fff4ec` | - | - | -| `@tag-background-color-risk-filled` | `var(--ix-color-orange-l10)` | - | - | -| `@tag-color-error` | `var(--ix-color-red)` | `var(--ix-color-red-d10)` | - | -| `@tag-background-color-error` | `#fae7e8` | - | - | -| `@tag-background-color-error-filled` | `var(--ix-color-red-l10)` | `#db4c35` | - | -| `@tag-color-fatal` | `var(--ix-color-red-d30)` | - | - | -| `@tag-background-color-fatal` | `#f2e5e6` | - | - | -| `@tag-background-color-fatal-filled` | `var(--ix-color-red-d20)` | `#8c1604` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bgColorFilled` | | `string` | `#99acd1` | `#99acd1` | +| `borderRadius` | | `number` | `2` | `2` | +| `borderWidth` | | `number` | `1` | `1` | +| `errorBgColor` | | `string` | `rgba(255, 87, 82, 0.1)` | `rgba(232, 81, 76, 0.2)` | +| `fatalBgColor` | | `string` | `rgba(130, 1, 14, 0.1)` | `rgba(143, 30, 31, 0.2)` | +| `infoBgColor` | | `string` | `rgba(28, 110, 255, 0.1)` | `rgba(64, 131, 232, 0.2)` | +| `minWidthNumeric` | | `number` | `64` | `64` | +| `minWidthRect` | | `number` | `40` | `40` | +| `minWidthRound` | | `number` | `48` | `48` | +| `riskBgColor` | | `string` | `rgba(250, 114, 27, 0.1)` | `rgba(232, 134, 65, 0.2)` | +| `successBgColor` | | `string` | `rgba(18, 166, 121, 0.1)` | `rgba(64, 198, 149, 0.2)` | +| `warningBgColor` | | `string` | `rgba(253, 170, 29, 0.1)` | `rgba(253, 170, 29, 0.2)` | diff --git a/packages/components/text/docs/Index.zh.md b/packages/components/text/docs/Index.zh.md index 43f9f9bbf..585efdd4f 100644 --- a/packages/components/text/docs/Index.zh.md +++ b/packages/components/text/docs/Index.zh.md @@ -4,6 +4,6 @@ type: 通用 order: 0 title: Text subtitle: 文本 -theme: true + --- diff --git a/packages/components/textarea/docs/Theme.zh.md b/packages/components/textarea/docs/Theme.zh.md index 5c561447f..880e24c46 100644 --- a/packages/components/textarea/docs/Theme.zh.md +++ b/packages/components/textarea/docs/Theme.zh.md @@ -1,26 +1,6 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@textarea-font-size-sm` | `@form-font-size-sm` | - | - | -| `@textarea-font-size-md` | `@form-font-size-md` | - | - | -| `@textarea-font-size-lg` | `@form-font-size-lg` | - | - | -| `@textarea-line-height` | `@form-line-height` | - | - | -| `@textarea-padding-vertical-sm` | `@form-padding-vertical-sm` | - | - | -| `@textarea-padding-vertical-md` | `@form-padding-vertical-md` | - | - | -| `@textarea-padding-vertical-lg` | `@form-padding-vertical-lg` | - | - | -| `@textarea-border-width` | `@form-border-width` | - | - | -| `@textarea-border-style` | `@form-border-style` | - | - | -| `@textarea-border-color` | `@form-border-color` | - | - | -| `@textarea-border-radius` | `@border-radius-md` | `@border-radius-sm` | - | -| `@textarea-color` | `@form-color` | - | - | -| `@textarea-color-secondary` | `@form-color-secondary` | - | - | -| `@textarea-background-color` | `@form-background-color` | - | - | -| `@textarea-placeholder-color` | `@form-placeholder-color` | - | - | -| `@textarea-hover-color` | `@form-hover-color` | - | - | -| `@textarea-active-color` | `@form-active-color` | - | - | -| `@textarea-active-box-shadow` | `@form-active-box-shadow` | - | - | -| `@textarea-disabled-color` | `@form-disabled-color` | - | - | -| `@textarea-disabled-background-color` | `@form-disabled-background-color` | - | - | -| `@textarea-count-bottom` | `1px` | - | - | -| `@textarea-count-right` | `8px` | - | - | -| `@textarea-count-opacity` | `0.9` | - | - | -| `@textarea-count-color` | `@textarea-placeholder-color` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `countBottom` | | `number` | `1` | `1` | +| `countColor` | | `string` | `#a1a7b3` | `#525966` | +| `countOpacity` | | `number` | `0.9` | `0.9` | +| `countRight` | | `number` | `8` | `8` | diff --git a/packages/components/theme/demo/Dynamic.md b/packages/components/theme/demo/Dynamic.md new file mode 100644 index 000000000..10c40579f --- /dev/null +++ b/packages/components/theme/demo/Dynamic.md @@ -0,0 +1,6 @@ +--- +order: 1 +title: + zh: 动态切换主题 + en: Dynamic theme +--- diff --git a/packages/components/theme/demo/Dynamic.vue b/packages/components/theme/demo/Dynamic.vue new file mode 100644 index 000000000..c49393f58 --- /dev/null +++ b/packages/components/theme/demo/Dynamic.vue @@ -0,0 +1,28 @@ + + + diff --git a/packages/components/theme/demo/Nested.md b/packages/components/theme/demo/Nested.md new file mode 100644 index 000000000..dc3006fbe --- /dev/null +++ b/packages/components/theme/demo/Nested.md @@ -0,0 +1,6 @@ +--- +order: 1 +title: + zh: 嵌套主题 + en: Nested theme +--- diff --git a/packages/components/theme/demo/Nested.vue b/packages/components/theme/demo/Nested.vue new file mode 100644 index 000000000..559e2bcfa --- /dev/null +++ b/packages/components/theme/demo/Nested.vue @@ -0,0 +1,31 @@ + + + diff --git a/packages/components/theme/demo/Tokens.md b/packages/components/theme/demo/Tokens.md new file mode 100644 index 000000000..6df07f8ef --- /dev/null +++ b/packages/components/theme/demo/Tokens.md @@ -0,0 +1,6 @@ +--- +order: 0 +title: + zh: 修改主题token + en: Modify theme tokens +--- diff --git a/packages/components/theme/demo/Tokens.vue b/packages/components/theme/demo/Tokens.vue new file mode 100644 index 000000000..0c3ff3653 --- /dev/null +++ b/packages/components/theme/demo/Tokens.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/components/theme/docs/Api.zh.md b/packages/components/theme/docs/Api.zh.md new file mode 100644 index 000000000..47338160d --- /dev/null +++ b/packages/components/theme/docs/Api.zh.md @@ -0,0 +1,125 @@ +## IxThemeProvider + +### ThemeProviderProps + +| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | +| --- | --- | --- | --- | --- | --- | +| `presetTheme` | 预设的主题 | `PresetTheme` | `'default'` | ✅ | | +| `hashed` | 是否开始 `hash` 功能 | `boolean` | `true` | ✅ | | +| `tag` | 配置 `IxThemeProvider` 渲染时使用的标签 | `string` | - | - | - | +| `inherit` | 是否继承上层Provider的token和配置 | `boolean \| 'all'` | `true` | - | 配置为true仅继承，配置为`'all'`则必须有上层的provider才会启用主题功能，用于组件封装时覆盖变量的场景 | +| `attachTo` | 配置承载css变量的style标签需要插入的节点 | `ThemeProviderAttachTo` | - | ✅ | 不配置默认插入到 `document.head` | +| `tokens` | 配置全局以及组件的token覆盖 | `DeepPartialThemeTokens` | - | ✅ | 全局配置中没有 `tokens` 配置，直接配置 `global` 以及 `components` | +| `algorithm` | 配置基础算法 | `ThemeTokenAlgorithms` | - | - | 不配置默认使用预设主题的算法 | + +```ts +// 预设主题 +type PresetTheme = 'default' | 'dark' + +// attachTo +type ThemeProviderAttachTo = string | HTMLElement | (() => HTMLElement) + +// tokens 配置定义 +interface DeepPartialThemeTokens { + global?: Partial + components?: { + [key in keyof ComponentThemeTokens]?: Partial + } & { + [key: string]: Record + } +} + +// 色板梯度变量 +interface ColorPalette { + base: string + l10: string + l20: string + l30: string + l40: string + l50: string + d10: string + d20: string + d30: string + d40: string + d50: string +} + +// 基础色 +export type BaseColorKeys = + | 'red' + | 'orange' + | 'brown' + | 'yellow' + | 'canary' + | 'bud' + | 'green' + | 'turquoise' + | 'cyan' + | 'glacier' + | 'blue' + | 'indigo' + | 'purple' + | 'magenta' + | 'graphite' + | 'grey' + | 'white' + | 'black' + +// 基础色列表 +export type BaseColors = { + [key in BaseColorKeys]: string +} + +// 获取色板梯度变量 +type GetColorPalette = (color: string) => ColorPalette +// 获取灰阶颜色 +type GetGreyColors = () => ColorPalette +// 获取基础颜色 +type GetBaseColors = () => BaseColors +interface ThemeTokenAlgorithms { + getColorPalette: GetColorPalette + getGreyColors: GetGreyColors + getBaseColors: GetBaseColors +} +``` + +### UseThemeToken + +`useThemeToken` 接受参数 `key` 指定使用的主题变量作用域的key，通常指代组件名称，为可选参数 + +在不提供 `key` 或 `key` 为 `undefined` 的时候，则为使用全局作用域，返回 `GlobalUseThemeTokenContext` + +在提供 `key` 时，为具体的作用域，返回 `ScopedUseThemeTokenContext` + +```ts +interface ScopedUseThemeTokenContext { + presetTheme: ComputedRef + globalHashId: ComputedRef + hashId: ComputedRef + themeTokens: ComputedRef> + registerToken: (getTokens: TokenGetter, transforms?: TokenTransforms) => string +} + +interface GlobalUseThemeTokenContext { + globalHashId: ComputedRef + themeTokens: ComputedRef + presetTheme: ComputedRef +} +``` + +> 注：`useThemeToken` 必须在组件的setup阶段调用 + +### Shared + +`@idux/components/theme` 暴露了一些公共的用于主题计算或转换的工具函数，如下： + +| 名称 | 说明 | 类型 | +| --- | --- | --- | +| `getAlphaColor` | 在给定色值上增加alpha通道数值，返回颜色 | `(baseColor: string, alpha: number) => string` | +| `getSolidColor` | 在给定色值基础上调低亮度，返回颜色 | `(baseColor: string, brightness: number) => string` | +| `getBaseColors` | 获取基础颜色 | `GetBaseColors` | +| `getColorPalette` | 获取颜色色阶 | `GetColorPalette` | +| `getDarkColorPalette` | 获取暗黑风格颜色色阶 | `(color: string, bgColor?: string, options?: DarkColorPaletteOptions) => ColorPalette` | +| `getGreyColors` | 获取灰阶颜色 | `GetGreyColors` | +| `getThemeTokens` | 获取预设主题的全局变量 | `(presetTheme: PresetTheme, tokens: Partial \| undefined, algorithms: Partial \| undefined) => GlobalThemeTokens` | +| `getPresetAlgorithms` | 获取预设主题的算法 | `getPresetAlgorithms(presetTheme: PresetTheme) => ThemeTokenAlgorithms` | diff --git a/packages/components/theme/docs/Index.zh.md b/packages/components/theme/docs/Index.zh.md new file mode 100644 index 000000000..966385634 --- /dev/null +++ b/packages/components/theme/docs/Index.zh.md @@ -0,0 +1,8 @@ +--- +category: components +type: 其他 +title: Theme +subtitle: 主题配置 + +--- + diff --git a/packages/components/theme/index.ts b/packages/components/theme/index.ts index 2c3f705fb..3d28de9b0 100644 --- a/packages/components/theme/index.ts +++ b/packages/components/theme/index.ts @@ -19,6 +19,7 @@ export { getSolidColor, getBaseColors, getThemeTokens, + getPresetAlgorithms, getColorPalette, getDarkColorPalette, getGreyColors, @@ -39,5 +40,10 @@ export type { DeepPartialThemeTokens, PresetTheme, } from './src/types' -export type { UseThemeTokenContext, FullUseThemeTokenContext, NullUseThemeTokenContext } from './src/useThemeToken' +export type { + UseThemeTokenScope, + UseThemeTokenContext, + GlobalUseThemeTokenContext, + ScopedUseThemeTokenContext, +} from './src/useThemeToken' export type { TokenGetter } from './src/composables/useTokenRegister' diff --git a/packages/components/theme/src/ThemeProvider.tsx b/packages/components/theme/src/ThemeProvider.tsx index 0765bf36d..6165ff07c 100644 --- a/packages/components/theme/src/ThemeProvider.tsx +++ b/packages/components/theme/src/ThemeProvider.tsx @@ -33,8 +33,7 @@ export default defineComponent({ const themeConfig = useGlobalConfig('theme') const mergedPresetTheme = computed( () => - (props.inherit ? supperContext?.presetTheme.value : undefined) ?? - props.presetTheme ?? + (props.inherit && !props.presetTheme ? supperContext?.presetTheme.value : props.presetTheme) ?? themeConfig.presetTheme, ) const mergedHashed = computed( @@ -84,6 +83,11 @@ export default defineComponent({ updateToken(globalTokenKey, useSupper ? supperContext!.getThemeHashId(globalTokenKey) : undefined) } + // sub providers don't register reset styles + if (props.inherit && !!supperContext) { + return + } + if (!isTokensRegistered(resetTokenKey)) { registerToken( resetTokenKey, diff --git a/packages/components/theme/src/composables/useTokenMerge.ts b/packages/components/theme/src/composables/useTokenMerge.ts index 1e94ac811..856046285 100644 --- a/packages/components/theme/src/composables/useTokenMerge.ts +++ b/packages/components/theme/src/composables/useTokenMerge.ts @@ -52,12 +52,13 @@ export function useTokenMerge( const configGlobalTokens = config.global const configComponentTokens = config.components - const globalTokens = merge( - { ...(props.inherit ? supperContext?.mergedTokens.value.global ?? {} : {}) }, + const overwrittenTokens = merge( + { ...(props.inherit && !props.presetTheme ? supperContext?.mergedTokens.value.global ?? {} : {}) }, { ...configGlobalTokens }, props.tokens?.global, ) as GlobalThemeTokens - const mergedGlobalTokens = getThemeTokens(mergedPresetTheme.value, globalTokens, mergedAlgorithms.value) + + const mergedGlobalTokens = getThemeTokens(mergedPresetTheme.value, overwrittenTokens, mergedAlgorithms.value) const mergedComponentTokens = merge( { ...(props.inherit ? supperContext?.mergedTokens.value.components ?? {} : {}) }, diff --git a/packages/components/theme/src/composables/useTokenRegister.ts b/packages/components/theme/src/composables/useTokenRegister.ts index 680daecd4..c65fb6abc 100644 --- a/packages/components/theme/src/composables/useTokenRegister.ts +++ b/packages/components/theme/src/composables/useTokenRegister.ts @@ -168,9 +168,6 @@ export function useTokenRegister( return tokenRecordMap.get(key)!.tokens as CertainThemeTokens } const getThemeHashId = (key: ThemeKeys) => { - if (key === 'timePicker') { - console.log('getThemeHashId', tokenRecordMap.get(key)) - } return tokenRecordMap.get(key)?.hashId } diff --git a/packages/components/theme/src/types/themeTokens/basicToken.ts b/packages/components/theme/src/types/themeTokens/basicToken.ts index aa1cc10eb..b3e9dd86f 100644 --- a/packages/components/theme/src/types/themeTokens/basicToken.ts +++ b/packages/components/theme/src/types/themeTokens/basicToken.ts @@ -9,180 +9,158 @@ export interface BasicTokens { // ---------- color ---------- // /** - * Brand color - * 主题色 + * @desc 主题色 */ colorPrimary: string /** - * Success color - * 成功信息色 + * @desc 成功信息色 */ colorSuccess: string /** - * Warning color - * 警告信息色 + * @desc 警告信息色 */ colorWarning: string /** - * Error color - * 错误信息色 + * @desc 错误信息色 */ colorError: string /** - * Risk color - * 风险信息色 + * @desc 风险信息色 */ colorRisk: string /** - * Fatal color - * 失陷信息色 + * @desc 失陷信息色 */ colorFatal: string /** - * Info color - * 信息颜色 + * @desc 信息颜色 */ colorInfo: string /** - * White color - * 白色 + * @desc 白色 */ colorWhite: string /** - * Text color - * 文字颜色 + * @desc 文字颜色 */ colorText: string /** - * Background color base - * 基础背景颜色 + * @desc 基础背景颜色 */ colorBg: string /** - * Border color - * 基础边框颜色 + * @desc 基础边框颜色 */ colorBorder: string /** - * Border color secondary - * 次级边框颜色，比基础边框颜色要浅一阶段， 通常用于表格、卡片等不需要边框特别突出的组件 + * @desc 次级边框颜色，比基础边框颜色要浅一阶段， 通常用于表格、卡片等不需要边框特别突出的组件 */ colorBorderSecondary: string /** - * Hyperlink color - * 链接颜色 + * @desc 链接颜色 */ colorLink: string // ---------- font ---------- // /** - * Font size base - * 基础字体大小 + * @desc 基础字体大小, 默认解析为中号字体，正文字体使用sm */ fontSize: number /** - * Font family + * @desc Font family */ fontFamily: string /** - * Font family code + * @desc Font family code */ fontFamilyCode: string /** - * Font weight base - * 基础字体粗度 + * @desc 基础字重 */ fontWeight: number // ---------- size ---------- // /** - * Border radius base - * 边框圆角 + * @desc 边框圆角 */ borderRadius: number /** - * Height size base - * 基础高度尺寸 + * @desc 基础高度尺寸 */ height: number /** - * Line height gutter - * 行高gutter，fontSize + gutter = 行高 + * @desc 行高gutter，fontSize + gutter = 行高 */ lineHeightGutter: number /** - * Spacing base of padding or margin - * 基础间距 + * @desc 基础间距 */ spacing: number /** - * width of component border or separator - * 边框，分割线的宽度 + * @desc 边框，分割线的宽度 */ lineWidth: number /** - * type of component border or separator - * 边框，分割线的线条样式 + * @desc 边框，分割线的线条样式 */ lineType: string // ---------- motion ---------- // /** - * Motion duration base - * 过渡动画时间 + * @desc 过渡动画时间 */ motionDuration: number /** - * Preset motion curve + * @desc 预设动效曲率 */ motionEaseIn: string /** - * Preset motion curve + * @desc 预设动效曲率 */ motionEaseOut: string /** - * Preset motion curve + * @desc 预设动效曲率 */ motionEaseInOut: string /** - * Preset motion curve + * @desc 预设动效曲率 */ motionEaseInBack: string /** - * Preset motion curve + * @desc 预设动效曲率 */ motionEaseOutBack: string /** - * Preset motion curve + * @desc 预设动效曲率 */ motionEaseInCirc: string @@ -192,34 +170,34 @@ export interface BasicTokens { motionEaseOutCirc: string /** - * Preset motion curve + * @desc 预设动效曲率 */ motionEaseInQuint: string /** - * Preset motion curve + * @desc 预设动效曲率 */ motionEaseOutQuint: string // ---------- screen ---------- // /** - * 屏幕尺寸SM + * @desc 屏幕尺寸Sm */ screenSm: number /** - * 屏幕尺寸MD + * @desc 屏幕尺寸Md */ screenMd: number /** - * 屏幕尺寸LG + * @desc 屏幕尺寸Lg */ screenLg: number /** - * 屏幕尺寸XL + * @desc 屏幕尺寸Xl */ screenXl: number } diff --git a/packages/components/theme/src/types/themeTokens/derived/color.ts b/packages/components/theme/src/types/themeTokens/derived/color.ts index 7312c3e9c..f1fac1cee 100644 --- a/packages/components/theme/src/types/themeTokens/derived/color.ts +++ b/packages/components/theme/src/types/themeTokens/derived/color.ts @@ -6,106 +6,313 @@ */ interface DerivedPrimaryColorTokens { + /** + * @desc 主题色阶边框颜色 + */ colorPrimaryBorder: string + /** + * @desc 主题色阶边框悬浮颜色 + */ colorPrimaryBorderHover: string + /** + * @desc 主题色阶边框激活颜色 + */ colorPrimaryBorderActive: string + /** + * @desc 主题色阶悬浮颜色，常用于背景色 + */ colorPrimaryHover: string + /** + * @desc 主题色阶激活颜色，常用于背景色 + */ colorPrimaryActive: string + /** + * @desc 主题色阶文字颜色 + */ colorPrimaryText: string + /** + * @desc 主题色阶文字悬浮颜色 + */ colorPrimaryTextHover: string + /** + * @desc 主题色阶文字激活颜色 + */ colorPrimaryTextActive: string + /** + * @desc 主题色阶图标颜色 + */ colorPrimaryIcon: string } interface DerivedSuccessColorTokens { + /** + * @desc 成功色阶边框颜色 + */ colorSuccessBorder: string + /** + * @desc 成功色阶边框悬浮颜色 + */ colorSuccessBorderHover: string + /** + * @desc 成功色阶边框激活颜色 + */ colorSuccessBorderActive: string + /** + * @desc 成功色阶背景颜色 + */ colorSuccessBg: string + /** + * @desc 成功色阶背景悬浮颜色 + */ colorSuccessBgHover: string + /** + * @desc 成功色阶背景激活颜色 + */ colorSuccessBgActive: string + /** + * @desc 成功色阶文字颜色 + */ colorSuccessText: string + /** + * @desc 成功色阶文字悬浮颜色 + */ colorSuccessTextHover: string + /** + * @desc 成功色阶文字激活颜色 + */ colorSuccessTextActive: string + /** + * @desc 成功色阶图标颜色 + */ colorSuccessIcon: string } interface DerivedWarningColorTokens { + /** + * @desc 警告色阶边框颜色 + */ colorWarningBorder: string + /** + * @desc 警告色阶边框悬浮颜色 + */ colorWarningBorderHover: string + /** + * @desc 警告色阶边框激活颜色 + */ colorWarningBorderActive: string + /** + * @desc 警告色阶背景颜色 + */ colorWarningBg: string + /** + * @desc 警告色阶背景悬浮颜色 + */ colorWarningBgHover: string + /** + * @desc 警告色阶背景激活颜色 + */ colorWarningBgActive: string + /** + * @desc 警告色阶文字颜色 + */ colorWarningText: string + /** + * @desc 警告色阶文字悬浮颜色 + */ colorWarningTextHover: string + /** + * @desc 警告色阶文字激活颜色 + */ colorWarningTextActive: string + /** + * @desc 警告色阶图标颜色 + */ colorWarningIcon: string } interface DerivedErrorColorTokens { + /** + * @desc 错误色阶边框颜色 + */ colorErrorBorder: string + /** + * @desc 错误色阶边框悬浮颜色 + */ colorErrorBorderHover: string + /** + * @desc 错误色阶边框激活颜色 + */ colorErrorBorderActive: string + /** + * @desc 错误色阶背景颜色 + */ colorErrorBg: string + /** + * @desc 错误色阶背景悬浮颜色 + */ colorErrorBgHover: string + /** + * @desc 错误色阶背景激活颜色 + */ colorErrorBgActive: string + /** + * @desc 错误色阶文字颜色 + */ colorErrorText: string + /** + * @desc 错误色阶文字悬浮颜色 + */ colorErrorTextHover: string + /** + * @desc 错误色阶文字激活颜色 + */ colorErrorTextActive: string + /** + * @desc 错误色阶图标颜色 + */ colorErrorIcon: string } interface DerivedRiskColorTokens { + /** + * @desc 风险色阶边框颜色 + */ colorRiskBorder: string + /** + * @desc 风险色阶边框悬浮颜色 + */ colorRiskBorderHover: string + /** + * @desc 风险色阶边框激活颜色 + */ colorRiskBorderActive: string + /** + * @desc 风险色阶背景颜色 + */ colorRiskBg: string + /** + * @desc 风险色阶背景悬浮颜色 + */ colorRiskBgHover: string + /** + * @desc 风险色阶背景激活颜色 + */ colorRiskBgActive: string + /** + * @desc 风险色阶文字颜色 + */ colorRiskText: string + /** + * @desc 风险色阶文字悬浮颜色 + */ colorRiskTextHover: string + /** + * @desc 风险色阶文字激活颜色 + */ colorRiskTextActive: string + /** + * @desc 风险色阶图标颜色 + */ colorRiskIcon: string } interface DerivedFatalColorTokens { + /** + * @desc 失陷色阶边框颜色 + */ colorFatalBorder: string + /** + * @desc 失陷色阶边框悬浮颜色 + */ colorFatalBorderHover: string + /** + * @desc 失陷色阶边框激活颜色 + */ colorFatalBorderActive: string + /** + * @desc 失陷色阶背景颜色 + */ colorFatalBg: string + /** + * @desc 失陷色阶背景悬浮颜色 + */ colorFatalBgHover: string + /** + * @desc 失陷色阶背景激活颜色 + */ colorFatalBgActive: string + /** + * @desc 失陷色阶文字颜色 + */ colorFatalText: string + /** + * @desc 失陷色阶文字悬浮颜色 + */ colorFatalTextHover: string + /** + * @desc 失陷色阶文字激活颜色 + */ colorFatalTextActive: string + /** + * @desc 失陷色阶图标颜色 + */ colorFatalIcon: string } interface DerivedInfoColorTokens { + /** + * @desc 信息色阶边框颜色 + */ colorInfoBorder: string + /** + * @desc 信息色阶边框悬浮颜色 + */ colorInfoBorderHover: string + /** + * @desc 信息色阶边框激活颜色 + */ colorInfoBorderActive: string + /** + * @desc 信息色阶背景颜色 + */ colorInfoBg: string + /** + * @desc 信息色阶背景悬浮颜色 + */ colorInfoBgHover: string + /** + * @desc 信息色阶背景激活颜色 + */ colorInfoBgActive: string + /** + * @desc 信息色阶文字颜色 + */ colorInfoText: string + /** + * @desc 信息色阶文字悬浮颜色 + */ colorInfoTextHover: string + /** + * @desc 信息色阶文字激活颜色 + */ colorInfoTextActive: string + /** + * @desc 信息色阶图标颜色 + */ colorInfoIcon: string } @@ -117,7 +324,16 @@ export interface DerivedColorTokens DerivedRiskColorTokens, DerivedFatalColorTokens, DerivedInfoColorTokens { + /** + * @desc 离线颜色 + */ colorOffline: string + /** + * @desc 离线背景颜色 + */ colorOfflineBg: string + /** + * @desc 离线文字颜色 + */ colorOfflineText: string } diff --git a/packages/components/theme/src/types/themeTokens/derived/font.ts b/packages/components/theme/src/types/themeTokens/derived/font.ts index b5c8d3785..01bd7f76a 100644 --- a/packages/components/theme/src/types/themeTokens/derived/font.ts +++ b/packages/components/theme/src/types/themeTokens/derived/font.ts @@ -6,25 +6,73 @@ */ interface DerivedFontSizeTokens { + /** + * @desc 字体大小尺寸Xs + */ fontSizeXs: number + /** + * @desc 字体大小尺寸Sm + */ fontSizeSm: number + /** + * @desc 字体大小尺寸Md + */ fontSizeMd: number + /** + * @desc 字体大小尺寸Lg + */ fontSizeLg: number + /** + * @desc 字体大小尺寸Xl + */ fontSizeXl: number + /** + * @desc 字体大小尺寸2Xl + */ fontSize2xl: number + /** + * @desc 字体大小尺寸3Xl + */ fontSize3xl: number + /** + * @desc 头部、标题字体大小尺寸Sm + */ fontSizeHeaderSm: number + /** + * @desc 头部、标题字体大小尺寸Md + */ fontSizeHeaderMd: number + /** + * @desc 头部、标题字体大小尺寸Lg + */ fontSizeHeaderLg: number + /** + * @desc 头部、标题字体大小尺寸Xl + */ fontSizeHeaderXl: number } interface DerivedFontWeightTokens { + /** + * @desc 字重Xs + */ fontWeightXs: number + /** + * @desc 字重Sm + */ fontWeightSm: number + /** + * @desc 字重Md + */ fontWeightMd: number + /** + * @desc 字重Lg + */ fontWeightLg: number + /** + * @desc 字重Xl + */ fontWeightXl: number } diff --git a/packages/components/theme/src/types/themeTokens/derived/motion.ts b/packages/components/theme/src/types/themeTokens/derived/motion.ts index 2a9254e57..c1559b493 100644 --- a/packages/components/theme/src/types/themeTokens/derived/motion.ts +++ b/packages/components/theme/src/types/themeTokens/derived/motion.ts @@ -6,7 +6,16 @@ */ export interface DerivedMotionTokens { + /** + * @desc 过渡动画时间 快速 + */ motionDurationFast: number + /** + * @desc 过渡动画时间 中等 + */ motionDurationMedium: number + /** + * @desc 过渡动画时间 缓慢 + */ motionDurationSlow: number } diff --git a/packages/components/theme/src/types/themeTokens/derived/shadow.ts b/packages/components/theme/src/types/themeTokens/derived/shadow.ts index f15dc4bd0..33d055288 100644 --- a/packages/components/theme/src/types/themeTokens/derived/shadow.ts +++ b/packages/components/theme/src/types/themeTokens/derived/shadow.ts @@ -6,7 +6,16 @@ */ export interface ShadowTokens { - boxShadowSm: string // 阴影Sm - boxShadowMd: string // 阴影Md - boxShadowLg: string // 阴影Lg + /** + * @desc 阴影Sm，物体处于低层，hover触发为悬浮状态，如：卡片hover + */ + boxShadowSm: string + /** + * @desc 阴影Md, 物体处于中层，由地面上的元素展开产生，如：下拉面板等 + */ + boxShadowMd: string + /** + * @desc 阴影Lg, 物体处于高层，物体和其他层级没有关系，如：对话框、抽屉 + */ + boxShadowLg: string } diff --git a/packages/components/theme/src/types/themeTokens/derived/size.ts b/packages/components/theme/src/types/themeTokens/derived/size.ts index acd35d504..4dbc3a6cc 100644 --- a/packages/components/theme/src/types/themeTokens/derived/size.ts +++ b/packages/components/theme/src/types/themeTokens/derived/size.ts @@ -6,50 +6,150 @@ */ interface PaddingSizeTokens { + /** + * @desc 内边距尺寸2Xs + */ paddingSize2Xs: number + /** + * @desc 内边距尺寸Xs + */ paddingSizeXs: number + /** + * @desc 内边距尺寸Sm + */ paddingSizeSm: number + /** + * @desc 内边距尺寸Md + */ paddingSizeMd: number + /** + * @desc 内边距尺寸Lg + */ paddingSizeLg: number + /** + * @desc 内边距尺寸Xl + */ paddingSizeXl: number + /** + * @desc 内边距尺寸2Xl + */ paddingSize2Xl: number } interface MarginSizeTokens { + /** + * @desc 外边距尺寸2Xs + */ marginSize2Xs: number + + /** + * @desc 外边距尺寸Xs + */ marginSizeXs: number + /** + * @desc 外边距尺寸Sm + */ marginSizeSm: number + /** + * @desc 外边距尺寸Md + */ marginSizeMd: number + /** + * @desc 外边距尺寸Lg + */ marginSizeLg: number + /** + * @desc 外边距尺寸Xl + */ marginSizeXl: number + /** + * @desc 外边距尺寸2Xl + */ marginSize2Xl: number } interface HeightTokens { + /** + * @desc 高度尺寸Xs + */ heightXs: number + /** + * @desc 高度尺寸Sm + */ heightSm: number + /** + * @desc 高度尺寸Md + */ heightMd: number + /** + * @desc 高度尺寸Lg + */ heightLg: number + /** + * @desc 高度尺寸Xl + */ heightXl: number + /** + * @desc 高度尺寸2Xl + */ height2xl: number + /** + * @desc 高度尺寸3Xl + */ height3xl: number } interface BorderRadiusTokens { + /** + * @desc 边框圆角尺寸Xs + */ borderRadiusXs: number + /** + * @desc 边框圆角尺寸Sm + */ borderRadiusSm: number + /** + * @desc 边框圆角尺寸Md + */ borderRadiusMd: number + /** + * @desc 边框圆角尺寸Lg + */ borderRadiusLg: number } interface ScreenTokens { + /** + * @private + */ screenXsMax: number + /** + * @private + */ screenSmMin: number + /** + * @private + */ screenSmMax: number + /** + * @private + */ screenMdMin: number + /** + * @private + */ screenMdMax: number + /** + * @private + */ screenLgMin: number + /** + * @private + */ screenLgMax: number + /** + * @private + */ screenXlMin: number } @@ -59,6 +159,12 @@ export interface DerivedSizeTokens HeightTokens, BorderRadiusTokens, ScreenTokens { + /** + * @desc 粗线框尺寸 + */ lineWidthBold: number + /** + * @desc 箭头尺寸 + */ arrowSize: number } diff --git a/packages/components/theme/src/types/themeTokens/extended/color.ts b/packages/components/theme/src/types/themeTokens/extended/color.ts index 85eafbbbd..19f88a227 100644 --- a/packages/components/theme/src/types/themeTokens/extended/color.ts +++ b/packages/components/theme/src/types/themeTokens/extended/color.ts @@ -6,46 +6,150 @@ */ export interface ExtendedColorTokens { - colorContainerBg: string // 组件容器背景颜色 - colorContainerBgHover: string //组件容器悬浮背景颜色 - colorContainerBgActive: string // 组件容器激活状态背景颜色，用于menu、select、tree-select等 - colorContainerBgDisabled: string // 组件容器禁用背景颜色 - colorEmphasizedContainerBg: string // 需要突出显示的容器背景颜色，例如表头 - colorEmphasizedContainerBgHover: string // 需要突出显示的容器背景颜色，例如表头 - colorEmphasizedContainerBgDisabled: string // 需要突出显示的容器背景颜色，例如表头 - colorInfoContainerBg: string // 信息容器背景颜色，用于组件内有信息承载的容器， 比如fieldset - colorInfoContainerBgHover: string // 信息容器悬浮背景颜色，用于组件内有信息承载的容器， 比如fieldset - colorInfoContainerBgDisabled: string // 信息容器禁用背景颜色，用于组件内有信息承载的容器， 比如fieldset - colorAddonContainerBg: string // 容器附加元素背景色，例如输入框的 addon - colorFillContainerBg: string // 控件组件容器在未选中时的填充颜色 - - colorSeparator: string // 分割线颜色 - - colorTextPlaceholder: string // placeholder 背景颜色 - colorTextDisabled: string // 文字禁用颜色 - colorTextInverse: string // 反向文字颜色，用于有背景颜色的文字 - colorTextInverseDisabled: string // 反向文字禁用，用于有背景颜色的文字 - colorTextTitle: string // 标题颜色 - colorTextTitleSecondary: string // 副标题颜色 - colorTextInfo: string // 信息，描述 - - colorIcon: string // 图标颜色 - colorIconInfo: string // 信息图标颜色，这种图标不可操作，仅展示 - colorIconHover: string // 图标悬浮颜色 - colorIconActive: string // 图标激活颜色 - colorIconDisabled: string // 图标禁用颜色 - - colorWarningOutline: string // 警告状态的组件边框颜色，用于表单控件 - colorErrorOutline: string // 错误状态的组件边框颜色，用于表单控件 - - colorBgInverse: string // 反向背景颜色，用于有背景颜色的容器中，如幽灵按钮 - colorBgInverseDisabled: string // 反向禁用背景颜色，用于有背景颜色的容器中，如幽灵按钮 - - colorBorderInverse: string // 反向边框颜色，用于由北京的容器中，如幽灵按钮 - colorBorderSecondary: string // 次级边框颜色，用于组件内容区域分割 - - colorMask: string // 遮罩颜色 - - tagCompColorAlpha: number // IxTag 组件的颜色Alpha值，仅用于这一个组件 - alertCompColorAlpha: number // IxAlert 组件的颜色Alpha值， 仅用于这一个组件 + /** + * @desc 组件容器背景颜色 + */ + colorContainerBg: string + /** + * @desc 组件容器悬浮背景颜色 + */ + colorContainerBgHover: string + /** + * @desc 组件容器激活状态背景颜色，用于menu、select、tree-select等 + */ + colorContainerBgActive: string + /** + * @desc 组件容器禁用背景颜色 + */ + colorContainerBgDisabled: string + /** + * @desc 需要突出显示的容器背景颜色，例如表头 + */ + colorEmphasizedContainerBg: string + /** + * @desc 需要突出显示的容器背景颜色，例如表头 + */ + colorEmphasizedContainerBgHover: string + /** + * @desc 需要突出显示的容器背景颜色，例如表头 + */ + colorEmphasizedContainerBgDisabled: string + /** + * @desc 信息容器背景颜色，用于组件内容承载的容器， 比如fieldset + */ + colorInfoContainerBg: string + /** + * @desc 信息容器悬浮背景颜色，用于组件内容承载的容器， 比如fieldset + */ + colorInfoContainerBgHover: string + /** + * @desc 信息容器禁用背景颜色，用于组件内有信息承载的容器， 比如fieldset + */ + colorInfoContainerBgDisabled: string + /** + * @desc 容器附加元素背景色，例如输入框的 addon + */ + colorAddonContainerBg: string + /** + * @desc 控件组件容器在未选中时的填充颜色 + */ + colorFillContainerBg: string + + /** + * @desc 分割线颜色 + */ + colorSeparator: string + + /** + * @desc placeholder 背景颜色 + */ + colorTextPlaceholder: string + /** + * @desc 文字禁用颜色 + */ + colorTextDisabled: string + /** + * @desc 反向文字颜色，用于有背景颜色的文字 + */ + colorTextInverse: string + /** + * @desc 反向文字禁用，用于有背景颜色的文字 + */ + colorTextInverseDisabled: string + /** + * @desc 标题颜色 + */ + colorTextTitle: string + /** + * @desc 副标题颜色 + */ + colorTextTitleSecondary: string + /** + * @desc 信息，描述 + */ + colorTextInfo: string + + /** + * @desc 图标颜色 + */ + colorIcon: string + /** + * @desc 信息图标颜色，这种图标不可操作，仅展示 + */ + colorIconInfo: string + /** + * @desc 图标悬浮颜色 + */ + colorIconHover: string + /** + * @desc 图标激活颜色 + */ + colorIconActive: string + /** + * @desc 图标禁用颜色 + */ + colorIconDisabled: string + + /** + * @desc 警告状态的组件边框颜色，用于表单控件 + */ + colorWarningOutline: string + /** + * @desc 错误状态的组件边框颜色，用于表单控件 + */ + colorErrorOutline: string + + /** + * @desc 反向背景颜色，用于有背景颜色的容器中，如幽灵按钮 + */ + colorBgInverse: string + /** + * @desc 反向禁用背景颜色，用于有背景颜色的容器中，如幽灵按钮 + */ + colorBgInverseDisabled: string + + /** + * @desc 反向边框颜色，用于由北京的容器中，如幽灵按钮 + */ + colorBorderInverse: string + /** + * @desc 次级边框颜色，用于组件内容区域分割 + */ + colorBorderSecondary: string + + /** + * @desc 遮罩颜色 + */ + colorMask: string + + /** + * @private Internal usage only + * @desc IxTag 组件的颜色Alpha值，仅用于这一个组件 + */ + tagCompColorAlpha: number + /** + * @private Internal usage only + * @desc IxAlert 组件的颜色Alpha值， 仅用于这一个组件 + */ + alertCompColorAlpha: number } diff --git a/packages/components/theme/src/types/themeTokens/extended/control.ts b/packages/components/theme/src/types/themeTokens/extended/control.ts index 48fa1009e..d32720940 100644 --- a/packages/components/theme/src/types/themeTokens/extended/control.ts +++ b/packages/components/theme/src/types/themeTokens/extended/control.ts @@ -6,38 +6,123 @@ */ export interface ControlTokens { - controlHeightXs: number // 控件尺寸Xs - controlHeightSm: number // 控件尺寸Sm - controlHeightMd: number // 控件尺寸Md - controlHeightLg: number // 控件尺寸Lg - - controlLineWidth: number // 控件的线框宽度 - controlLineType: string // 控件的线框类型 - - controlFontSizeXs: number // 控件字体大小Xs - controlFontSizeSm: number // 控件字体大小Sm - controlFontSizeMd: number // 控件字体大小Md - controlFontSizeLg: number // 控件字体大小Lg - - controlBoxShadowFocus: string // 控件聚焦，激活时的阴影 - controlBoxShadowInvalid: string // 控件校验非法时的阴影 - - controlBgColor: string // 控件背景颜色 - controlBgColorDisabled: string // 控件禁用颜色 - controlBorderColorHover: string // 控件悬浮边框颜色 - controlBorderColorActive: string // 控件激活态边框颜色 - - controlPaddingSizeHorizontalXs: number // 控件横向内间距Xs - controlPaddingSizeHorizontalSm: number // 控件横向内间距Sm - controlPaddingSizeHorizontalMd: number // 控件横向内间距Md - controlPaddingSizeHorizontalLg: number // 控件横向内间距Lg - controlPaddingSizeVerticalXs: number // 控件竖向内间距Xs - controlPaddingSizeVerticalSm: number // 控件竖向内间距Sm - controlPaddingSizeVerticalMd: number // 控件竖向内间距Md - controlPaddingSizeVerticalLg: number // 控件竖向内间距Lg - - controlBorderRadiusXs: number // 控件边框圆角Xs - controlBorderRadiusSm: number // 控件边框圆角Sm - controlBorderRadiusMd: number // 控件边框圆角Md - controlBorderRadiusLg: number // 控件边框圆角Lg + /** + * @desc 控件尺寸Xs + */ + controlHeightXs: number + /** + * @desc 控件尺寸Sm + */ + controlHeightSm: number + /** + * @desc 控件尺寸Md + */ + controlHeightMd: number + /** + * @desc 控件尺寸Lg + */ + controlHeightLg: number + + /** + * @desc 控件的线框宽度 + */ + controlLineWidth: number + /** + * @desc 控件的线框类型 + */ + controlLineType: string + + /** + * @desc 控件字体大小Xs + */ + controlFontSizeXs: number + /** + * @desc 控件字体大小Sm + */ + controlFontSizeSm: number + /** + * @desc 控件字体大小Md + */ + controlFontSizeMd: number + /** + * @desc 控件字体大小Lg + */ + controlFontSizeLg: number + + /** + * @desc 控件聚焦，激活时的阴影 + */ + controlBoxShadowFocus: string + /** + * @desc 控件校验非法时的阴影 + */ + controlBoxShadowInvalid: string + + /** + * @desc 控件背景颜色 + */ + controlBgColor: string + /** + * @desc 控件禁用颜色 + */ + controlBgColorDisabled: string + /** + * @desc 控件悬浮边框颜色 + */ + controlBorderColorHover: string + /** + * @desc 控件激活态边框颜色 + + */ + controlBorderColorActive: string + + /** + * @desc 控件横向内间距Xs + */ + controlPaddingSizeHorizontalXs: number + /** + * @desc 控件横向内间距Sm + */ + controlPaddingSizeHorizontalSm: number + /** + * @desc 控件横向内间距Md + */ + controlPaddingSizeHorizontalMd: number + /** + * @desc 控件横向内间距Lg + */ + controlPaddingSizeHorizontalLg: number + /** + * @desc 控件竖向内间距Xs + */ + controlPaddingSizeVerticalXs: number + /** + * @desc 控件竖向内间距Sm + */ + controlPaddingSizeVerticalSm: number + /** + * @desc 控件竖向内间距Md + */ + controlPaddingSizeVerticalMd: number + /** + * @desc 控件竖向内间距Lg + */ + controlPaddingSizeVerticalLg: number + + /** + * @desc 控件边框圆角Xs + */ + controlBorderRadiusXs: number + /** + * @desc 控件边框圆角Sm + */ + controlBorderRadiusSm: number + /** + * @desc 控件边框圆角Md + */ + controlBorderRadiusMd: number + /** + * @desc 控件边框圆角Lg + */ + controlBorderRadiusLg: number } diff --git a/packages/components/theme/src/types/themeTokens/extended/font.ts b/packages/components/theme/src/types/themeTokens/extended/font.ts index f4ac317a4..d76473fd0 100644 --- a/packages/components/theme/src/types/themeTokens/extended/font.ts +++ b/packages/components/theme/src/types/themeTokens/extended/font.ts @@ -6,6 +6,12 @@ */ export interface ExtendedFontTokens { - fontSizeIcon: number // 图标尺寸，字体大小 - fontWeightHeader: number // 头部字体粗度 + /** + * @desc 图标尺寸，字体大小 + */ + fontSizeIcon: number + /** + * @desc 头部字体粗度 + */ + fontWeightHeader: number } diff --git a/packages/components/theme/src/types/themeTokens/extended/overlay.ts b/packages/components/theme/src/types/themeTokens/extended/overlay.ts index 88768f562..532ce303b 100644 --- a/packages/components/theme/src/types/themeTokens/extended/overlay.ts +++ b/packages/components/theme/src/types/themeTokens/extended/overlay.ts @@ -6,10 +6,28 @@ */ export interface OverlayTokens { + /** + * @desc 浮层背景颜色 + */ overlayBgColor: string + /** + * @desc 浮层边框圆角 + */ overlayBorderRadius: string | number + /** + * @desc 浮层边框宽度 + */ overlayBorderWidth: number + /** + * @desc 浮层边框颜色 + */ overlayBorderColor: string + /** + * @desc 浮层边框样式 + */ overlayBorderType: string + /** + * @desc 浮层箭头尺寸 + */ overlayArrowSize: number } diff --git a/packages/components/theme/src/types/themeTokens/extended/scrollbar.ts b/packages/components/theme/src/types/themeTokens/extended/scrollbar.ts index cbabbaedf..6a4964195 100644 --- a/packages/components/theme/src/types/themeTokens/extended/scrollbar.ts +++ b/packages/components/theme/src/types/themeTokens/extended/scrollbar.ts @@ -6,15 +6,48 @@ */ export interface ScrollbarTokens { - scrollbarWidth: number // 滚动条宽度 - scrollbarHeight: number // 滚动条高度 - scrollbarThumbBg: string // 滚动条滑块背景颜色 - scrollbarThumbBgHover: string // 滚动条滑块悬浮背景颜色 - scrollbarThumbBgActive: string // 滚动条滑块激活背景颜色 - scrollbarThumbBorderWidth: number // 滚动条滑块边框颜色 - scrollbarThumbBorderRadius: number // 滚动条滑块边框圆角 - scrollbarThumbBoxShadow: string // 滚动条滑块阴影 - scrollbarTrackBg: string // 滚动条轨道背景颜色 - scrollbarTrackBorderRadius: number // 滚动条轨道边框圆角 - scrollbarTrackBoxShadow: string // 滚动条轨道阴影 + /** + * @desc 滚动条宽度 + */ + scrollbarWidth: number + /** + * @desc 滚动条高度 + */ + scrollbarHeight: number + /** + * @desc 滚动条滑块背景颜色 + */ + scrollbarThumbBg: string + /** + * @desc 滚动条滑块悬浮背景颜色 + */ + scrollbarThumbBgHover: string + /** + * @desc 滚动条滑块激活背景颜色 + */ + scrollbarThumbBgActive: string + /** + * @desc 滚动条滑块边框颜色 + */ + scrollbarThumbBorderWidth: number + /** + * @desc 滚动条滑块边框圆角 + */ + scrollbarThumbBorderRadius: number + /** + * @desc 滚动条滑块阴影 + */ + scrollbarThumbBoxShadow: string + /** + * @desc 滚动条轨道背景颜色 + */ + scrollbarTrackBg: string + /** + * @desc 滚动条轨道边框圆角 + */ + scrollbarTrackBorderRadius: number + /** + * @desc 滚动条轨道阴影 + */ + scrollbarTrackBoxShadow: string } diff --git a/packages/components/theme/src/types/themeTokens/extended/size.ts b/packages/components/theme/src/types/themeTokens/extended/size.ts index 38875f26f..5d113729e 100644 --- a/packages/components/theme/src/types/themeTokens/extended/size.ts +++ b/packages/components/theme/src/types/themeTokens/extended/size.ts @@ -6,5 +6,8 @@ */ export interface ExtendedSizeTokens { - componentBorderRadius: number // 组件边框圆角 + /** + * @desc 组件边框圆角 + */ + componentBorderRadius: number } diff --git a/packages/components/theme/src/useThemeToken.ts b/packages/components/theme/src/useThemeToken.ts index d8137ee0e..45fbb65cb 100644 --- a/packages/components/theme/src/useThemeToken.ts +++ b/packages/components/theme/src/useThemeToken.ts @@ -14,6 +14,7 @@ import { Logger, tryOnScopeDispose } from '@idux/cdk/utils' import { THEME_PROVIDER_TOKEN, type ThemeProviderContext } from './token' import { type CertainThemeTokens, + type GlobalThemeTokens, type GlobalTokenKey, type PresetTheme, type ThemeKeys, @@ -22,7 +23,9 @@ import { globalTokenKey, } from './types' -export interface FullUseThemeTokenContext { +export type UseThemeTokenScope = Exclude + +export interface ScopedUseThemeTokenContext { presetTheme: ComputedRef globalHashId: ComputedRef hashId: ComputedRef @@ -30,24 +33,28 @@ export interface FullUseThemeTokenContext, transforms?: TokenTransforms) => string } -export interface NullUseThemeTokenContext { +export interface GlobalUseThemeTokenContext { globalHashId: ComputedRef + themeTokens: ComputedRef presetTheme: ComputedRef } -export type UseThemeTokenContext = K extends - | ThemeKeys - | keyof Ext - ? FullUseThemeTokenContext - : NullUseThemeTokenContext +export type UseThemeTokenContext< + K extends UseThemeTokenScope | keyof Ext | undefined, + Ext extends object = object, +> = K extends undefined + ? GlobalUseThemeTokenContext + : K extends UseThemeTokenScope | keyof Ext + ? ScopedUseThemeTokenContext + : never -let emptyContext: UseThemeTokenContext +let emptyContext: UseThemeTokenContext -export function useThemeToken(): NullUseThemeTokenContext -export function useThemeToken( +export function useThemeToken(): GlobalUseThemeTokenContext +export function useThemeToken( key: K, -): FullUseThemeTokenContext -export function useThemeToken( +): UseThemeTokenContext +export function useThemeToken( key?: K, ): UseThemeTokenContext { const themeProviderContext = inject(THEME_PROVIDER_TOKEN, null) @@ -61,8 +68,8 @@ export function useThemeToken ''), themeTokens: computed(() => ({})), presetTheme: computed(() => 'default'), - registerToken: (() => {}) as unknown as UseThemeTokenContext['registerToken'], - } as UseThemeTokenContext + registerToken: (() => {}) as unknown as UseThemeTokenContext['registerToken'], + } as UseThemeTokenContext } return emptyContext as unknown as UseThemeTokenContext @@ -85,6 +92,7 @@ export function useThemeToken (hashed.value ? _globalHashId.value : '')), + themeTokens: computed(() => getThemeTokens(globalTokenKey)), }) as UseThemeTokenContext, ) @@ -92,12 +100,14 @@ export function useThemeToken } + type NotNullKey = NonNullable + const context = getSharedContext(key, useThemeTokenContextMap, () => { const globalHashId = globalContext.globalHashId const hashId = computed(() => (hashed.value ? getThemeHashId(key) ?? '' : '')) const themeTokens = computed(() => getThemeTokens(key)) - const registerToken = (getTokens: TokenGetter, transforms?: TokenTransforms) => { + const registerToken = (getTokens: TokenGetter, transforms?: TokenTransforms) => { return _registerToken(key, getTokens, transforms as TokenTransforms) ?? '' } @@ -107,7 +117,7 @@ export function useThemeToken + } as UseThemeTokenContext }) return context as unknown as UseThemeTokenContext diff --git a/packages/components/time-picker/docs/Theme.zh.md b/packages/components/time-picker/docs/Theme.zh.md index ec4b39a5f..3699877c0 100644 --- a/packages/components/time-picker/docs/Theme.zh.md +++ b/packages/components/time-picker/docs/Theme.zh.md @@ -1,33 +1,27 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@time-picker-color` | `@form-color` | - | - | -| `@time-picker-line-height` | `@form-line-height` | - | - | -| `@time-range-picker-trigger-separator-margin` | `@spacing-xl` | - | - | -| `@time-picker-overlay-width` | `200px` | - | - | -| `@time-picker-overlay-padding` | `@spacing-sm @spacing-sm 0 @spacing-sm` | - | - | -| `@time-picker-overlay-body-padding` | `0 0 @spacing-sm 0` | - | - | -| `@time-picker-overlay-box-shadow` | `@shadow-bottom-md` | - | - | -| `@time-picker-overlay-background-color` | `@form-background-color` | - | - | -| `@time-picker-overlay-input-margin-bottom` | `@spacing-sm` | - | - | -| `@time-range-picker-overlay-padding` | `@spacing-lg @spacing-lg 0 @spacing-lg` | - | - | -| `@time-range-picker-overlay-body-padding` | `0 0 @spacing-lg 0` | - | - | -| `@time-range-picker-overlay-board-width` | `184px` | - | - | -| `@time-range-picker-overlay-separator-width` | `@spacing-2xl` | - | - | -| `@time-range-picker-overlay-separator-padding` | `1px 0 0 0` | `2px 8px` | - | -| `@time-range-picker-overlay-separator-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@time-range-picker-board-width` | `184px` | - | - | -| `@time-range-picker-board-panel-border-width` | `0` | - | - | -| `@time-range-picker-board-panel-border-style` | `none` | - | - | -| `@time-range-picker-board-panel-border-color` | `none` | - | - | -| `@time-range-picker-board-panel-border-radius` | `0` | - | - | -| `@time-picker-overlay-footer-border-width` | `@form-border-width` | - | - | -| `@time-picker-overlay-footer-border-style` | `@form-border-style` | - | - | -| `@time-picker-overlay-footer-border-color` | `@form-border-color` | - | - | -| `@time-picker-overlay-footer-padding` | `@spacing-sm @spacing-lg` | - | - | -| `@time-picker-overlay-footer-button-margin-left` | `@spacing-sm` | - | - | -| `@time-range-picker-overlay-separator-line-color` | `@form-border-color` | - | - | -| `@time-range-picker-overlay-footer-border-width` | `@time-picker-overlay-footer-border-width` | - | - | -| `@time-range-picker-overlay-footer-border-style` | `@time-picker-overlay-footer-border-style` | - | - | -| `@time-range-picker-overlay-footer-border-color` | `@color-graphite-l30` | - | - | -| `@time-range-picker-overlay-footer-padding` | `@spacing-sm 0` | - | - | -| `@time-range-picker-overlay-footer-button-margin-left` | `@time-picker-overlay-footer-button-margin-left` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `overlayFooterPadding` | | `string | number` | `8px 16px` | `8px 16px` | +| `overlayPadding` | | `string | number` | `8px 8px 0 8px` | `8px 8px 0 8px` | +| `overlayWidth` | | `number` | `200` | `200` | +| `panelCellBgColorActive` | | `string` | `transparent` | `transparent` | +| `panelCellBgColorHover` | | `string` | `transparent` | `transparent` | +| `panelCellColor` | | `string` | `#6f7785` | `#808999` | +| `panelCellColorActive` | | `string` | `#2f3540` | `#F4F8FF` | +| `panelCellFontWeightActive` | | `number` | `600` | `600` | +| `panelCellHeight` | | `number` | `32` | `32` | +| `panelCellPaddingHorizontal` | | `number` | `8` | `8` | +| `panelFontSize` | | `number` | `12` | `12` | +| `panelHeight` | | `number` | `224` | `224` | +| `panelPaddingHorizontal` | | `number` | `8` | `8` | +| `panelPaddingVertical` | | `number` | `8` | `8` | +| `panelScrollbarThumbBgColor` | | `string` | `#e1e5eb` | `#1F2329` | +| `panelScrollbarThumbBorderRadius` | | `number` | `10` | `10` | +| `panelScrollbarTrackBgColor` | | `string` | `unset` | `unset` | +| `panelScrollbarWidth` | | `number` | `6` | `6` | +| `rangeBoardBorder` | | `string` | `none` | `none` | +| `rangeBoardWidth` | | `number` | `184` | `184` | +| `rangeOverlayFooterPadding` | | `string | number` | `8px 0` | `8px 0` | +| `rangeOverlayPadding` | | `string | number` | `16px 16px 0 16px` | `16px 16px 0 16px` | +| `rangeOverlaySeparatorFontSize` | | `number` | `12` | `12` | +| `rangeOverlaySeparatorPadding` | | `string | number` | `2px 10px` | `2px 10px` | +| `separatorMarginHorizontal` | | `string | number` | `24` | `24` | diff --git a/packages/components/timeline/docs/Theme.zh.md b/packages/components/timeline/docs/Theme.zh.md index 7983a0db8..a08f3832d 100644 --- a/packages/components/timeline/docs/Theme.zh.md +++ b/packages/components/timeline/docs/Theme.zh.md @@ -1,22 +1,10 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@timeline-font-size` | `@font-size-sm` | - | - | -| `@timeline-line-height` | `1.25` | `1` | - | -| `@timeline-item-timeline-width` | `@timeline-dot-size + @timeline-dot-border-width + 8` | - | - | -| `@timeline-item-timeline-top` | `(@timeline-font-size * @timeline-line-height / 2 - @timeline-dot-size / 2)` | - | - | -| `@timeline-dot-size` | `12px` | - | - | -| `@timeline-dot-border-width` | `2px` | - | - | -| `@timeline-dot-border` | `@timeline-dot-border-width solid transparent` | - | - | -| `@timeline-dot-font-size` | `@timeline-dot-size + @timeline-dot-border-width` | - | - | -| `@timeline-custom-dot-gap` | `(@timeline-dot-size / 2)` | - | - | -| `@timeline-content-gap` | `@timeline-item-timeline-width` | - | - | -| `@timeline-content-color` | `@text-color` | - | - | -| `@timeline-content-label-color` | `@color-graphite` | - | - | -| `@timeline-content-label-margin-top` | `0` | `8px` | - | -| `@timeline-line-gap` | `((@timeline-dot-size - @timeline-dot-border-width) / 2)` | - | - | -| `@timeline-line-width` | `2px` | - | - | -| `@timeline-line-background-color` | `@color-graphite-l30` | - | - | -| `@timeline-pending-item-content-min-height` | `40px` | - | - | -| `@timeline-content-margin-bottom` | `20px` | - | - | -| `@timeline-dotted-line-background` | `linear-gradient(to bottom, @timeline-line-background-color, @timeline-line-background-color 50%, transparent 50%, transparent)` | - | - | -| `@timeline-dotted-line-background-size` | `100% 10px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `contentLabelMarginTop` | | `number` | `8` | `8` | +| `contentMarginBottom` | | `number` | `20` | `20` | +| `dotBorderWidth` | | `number` | `2` | `2` | +| `dotSize` | | `number` | `12` | `12` | +| `fontSize` | | `number` | `12` | `12` | +| `lineBgColor` | | `string` | `#e1e5eb` | `#1F2329` | +| `lineWidth` | | `number` | `2` | `2` | +| `pendingItemContentMinWidth` | | `number` | `40` | `40` | diff --git a/packages/components/tooltip/docs/Index.zh.md b/packages/components/tooltip/docs/Index.zh.md index b8a4a9563..e82ae6514 100644 --- a/packages/components/tooltip/docs/Index.zh.md +++ b/packages/components/tooltip/docs/Index.zh.md @@ -3,6 +3,6 @@ category: components type: 数据展示 title: Tooltip subtitle: 文字提示 -theme: true + --- diff --git a/packages/components/tooltip/docs/Theme.zh.md b/packages/components/tooltip/docs/Theme.zh.md index 1988d96bc..eaa556717 100644 --- a/packages/components/tooltip/docs/Theme.zh.md +++ b/packages/components/tooltip/docs/Theme.zh.md @@ -1,9 +1,6 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@tooltip-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - | -| `@tooltip-color` | `var(--ix-text-color-info)` | - | - | -| `@tooltip-background-color` | `var(--ix-background-color)` | - | - | -| `@tooltip-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - | -| `@tooltip-box-shadow` | `@shadow-bottom-sm` | - | - | -| `@tooltip-min-width` | `32px` | - | - | -| `@tooltip-max-width` | `400px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `color` | | `string` | `#6f7785` | `#808999` | +| `fontSize` | | `number` | `12` | `12` | +| `maxWidth` | | `number` | `400` | `400` | +| `minWidth` | | `number` | `32` | `32` | diff --git a/packages/components/tour/docs/Theme.zh.md b/packages/components/tour/docs/Theme.zh.md index 6921a3cbe..65641acc4 100644 --- a/packages/components/tour/docs/Theme.zh.md +++ b/packages/components/tour/docs/Theme.zh.md @@ -1,3 +1,14 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| - | - | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bgColor` | | `string` | `#ffffff` | `#0A0C0F` | +| `borderRadius` | | `number` | `4` | `4` | +| `descriptionColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `descriptionFontSize` | | `number` | `12` | `12` | +| `footerBtnGap` | | `number` | `4` | `4` | +| `indicatorsColor` | | `string` | `#6f7785` | `#808999` | +| `indicatorsFontSize` | | `number` | `12` | `12` | +| `minWidth` | | `number` | `250` | `250` | +| `paddingBottom` | | `number` | `16` | `16` | +| `paddingLeft` | | `number` | `16` | `16` | +| `paddingRight` | | `number` | `16` | `16` | +| `paddingTop` | | `number` | `16` | `16` | diff --git a/packages/components/transfer/docs/Theme.zh.md b/packages/components/transfer/docs/Theme.zh.md index a4a529f99..99c35f6e6 100644 --- a/packages/components/transfer/docs/Theme.zh.md +++ b/packages/components/transfer/docs/Theme.zh.md @@ -1,37 +1,16 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@transfer-height` | `290px` | - | - | -| `@transfer-content-width` | `260px` | - | - | -| `@transfer-border-color` | `@form-border-color` | `@color-graphite-l30` | - | -| `@transfer-border-radius` | `2px` | - | - | -| `@transfer-background-color` | `@form-background-color` | - | - | -| `@transfer-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@transfer-color` | `@text-color` | - | - | -| `@transfer-disabled-color` | `@text-color-disabled` | - | - | -| `@transfer-header-height` | `@height-lg` | - | - | -| `@transfer-header-suffix-margin-left` | `@spacing-md` | `@spacing-sm` | - | -| `@transfer-footer-height` | `@height-lg` | - | - | -| `@transfer-header-padding` | `0 @spacing-md` | `0 @spacing-sm 0 @spacing-md` | - | -| `@transfer-footer-padding` | `0 @spacing-sm` | - | - | -| `@transfer-operations-min-width` | `@spacing-xs` | - | - | -| `@transfer-operations-padding` | `@spacing-sm` | - | - | -| `@transfer-operations-btn-width` | `24px` | - | - | -| `@transfer-operations-btn-height` | `32px` | - | - | -| `@transfer-operations-btn-gap` | `@spacing-sm` | - | - | -| `@transer-search-width` | `110px` | - | - | -| `@transfer-clear-icon-font-size` | `@font-size-lg` | - | - | -| `@transfer-clear-icon-color` | `@color-graphite-d20` | - | - | -| `@transfer-clear-icon-hover-color` | `@color-primary` | - | - | -| `@transfer-clear-icon-active-color` | `@color-primary` | - | - | -| `@transfer-search-icon-font-size` | `@font-size-lg` | - | - | -| `@transfer-search-icon-color` | `@color-graphite` | - | - | -| `@transfer-list-item-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@transfer-list-item-min-height` | `@height-md` | - | - | -| `@transfer-list-item-padding` | `@spacing-xs 0 @spacing-xs @spacing-md` | `0 @spacing-sm 0 @spacing-md` | - | -| `@transfer-list-item-line-height` | `@line-height-base` | - | - | -| `@transfer-list-item-hover-color` | `@color-graphite-l50` | - | - | -| `@transfer-list-close-icon-padding` | `0 @spacing-md` | - | - | -| `@transfer-list-close-icon-font-size` | `@font-size-lg` | `@font-size-lg` | - | -| `@transfer-list-close-icon-color` | `@color-graphite-d20` | - | - | -| `@transfer-list-close-icon-hover-color` | `@color-primary` | - | - | -| `@transfer-list-close-icon-active-color` | `@color-primary` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `closeIconPadding` | | `string | number` | `0 12px` | `0 12px` | +| `contentPadding` | | `string | number` | `0 8px 0 12px` | `0 8px 0 12px` | +| `contentWidth` | | `number` | `260` | `260` | +| `footerHeight` | | `number` | `40` | `40` | +| `headerHeight` | | `number` | `40` | `40` | +| `height` | | `number` | `290` | `290` | +| `listItemMinHeight` | | `number` | `32` | `32` | +| `oprButtonGap` | | `number` | `8` | `8` | +| `oprButtonHeight` | | `number` | `32` | `32` | +| `oprButtonWidth` | | `number` | `24` | `24` | +| `oprMinWidth` | | `number` | `4` | `4` | +| `oprPadding` | | `string | number` | `8` | `8` | +| `searchWidth` | | `number` | `110` | `110` | +| `suffixMarginLeft` | | `number` | `12` | `12` | diff --git a/packages/components/tree-select/docs/Theme.zh.md b/packages/components/tree-select/docs/Theme.zh.md index ba13286ad..9925c2a8e 100644 --- a/packages/components/tree-select/docs/Theme.zh.md +++ b/packages/components/tree-select/docs/Theme.zh.md @@ -1,19 +1,9 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@tree-select-option-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@tree-select-option-height` | `@height-md` | - | - | -| `@tree-select-option-margin-left` | `@spacing-md` | - | - | -| `@tree-select-option-padding` | `@spacing-sm` | - | - | -| `@tree-select-option-color` | `@text-color` | - | - | -| `@tree-select-option-disabled-color` | `@text-color-disabled` | - | - | -| `@tree-select-option-active-background-color` | `@color-grey-l50` | - | - | -| `@tree-select-option-selected-color` | `@color-primary` | - | - | -| `@tree-select-option-selected-background-color` | `tint(@color-primary, 90%)` | - | - | -| `@tree-select-option-selected-font-weight` | `@font-weight-xl` | - | - | -| `@tree-select-option-container-padding` | `@spacing-sm` | `4px 0` | - | -| `@tree-select-option-container-background-color` | `@background-color-component` | - | - | -| `@tree-select-option-container-border-radius` | `@border-radius-sm` | - | - | -| `@tree-select-option-container-box-shadow` | `@shadow-bottom-md` | - | - | -| `@tree-select-option-container-search-wrapper-padding` | `@select-overlay-search-wrapper-padding` | - | - | -| `@tree-select-option-container-tree-node-padding` | `0 0 0 @spacing-xs` | `0 0 0 @spacing-sm` | - | -| `@tree-select-border-radius` | - | `@border-radius-sm` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `optionContainerPadding` | | `string | number` | `4px 0` | `4px 0` | +| `optionContainerTreeNodePadding` | | `string | number` | `0 0 0 8px` | `0 0 0 8px` | +| `optionFontSize` | | `number` | `12` | `12` | +| `optionHeight` | | `number` | `32` | `32` | +| `optionMarginLeft` | | `number` | `8` | `8` | +| `optionPadding` | | `string | number` | `8px 12px` | `8px 12px` | +| `overlaySearchWrapperPadding` | | `string | number` | `4px 12px 8px` | `4px 12px 8px` | diff --git a/packages/components/tree/docs/Theme.zh.md b/packages/components/tree/docs/Theme.zh.md index 05be0fdc7..943e6a653 100644 --- a/packages/components/tree/docs/Theme.zh.md +++ b/packages/components/tree/docs/Theme.zh.md @@ -1,23 +1,16 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@tree-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@tree-icon-font-size` | `@font-size-lg` | - | - | -| `@tree-icon-color` | `@color-graphite-d20` | - | - | -| `@tree-background-color` | `@background-color-component` | - | - | -| `@tree-background-color-focused` | `@background-color-selected-light` | - | - | -| `@tree-box-shadow-size` | `2px` | - | - | -| `@tree-box-shadow-color` | `@color-primary-l20` | - | - | -| `@tree-node-disabled-color` | `@text-color-disabled` | `@color-graphite-d10` | - | -| `@tree-node-hover-background-color` | `@color-graphite-l50` | - | - | -| `@tree-node-selected-color` | `@color-graphite-d40` | `@color-primary` | - | -| `@tree-node-selected-background-color` | `@color-graphite-l40` | `@color-white` | - | -| `@tree-node-line-size` | `1px` | - | - | -| `@tree-node-line-color` | `@color-graphite` | - | - | -| `@tree-node-padding-vertical` | `(@spacing-sm / 2)` | `0px` | - | -| `@tree-node-content-height` | `@height-sm` | `@height-md` | - | -| `@tree-node-content-padding` | `0 @spacing-sm 0 @spacing-xs` | - | - | -| `@tree-node-content-label-padding` | `0 @spacing-xs` | - | - | -| `@tree-node-content-label-highlight-color` | `@color-primary` | - | - | -| `@tree-node-checkbox-margin` | `0 @spacing-xs 0 (@tree-node-icon-width / 2 - @tree-icon-font-size / 2)` | - | - | -| `@tree-node-icon-width` | `@height-sm` | - | - | -| `@tree-expand-icon-color` | `@color-graphite` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `bgColor` | | `string` | `#ffffff` | `#0A0C0F` | +| `dropLineColor` | | `string` | `#458fff` | `#1B61DD` | +| `dropLineWidth` | | `number` | `2` | `2` | +| `expandIconColor` | | `string` | `#bec3cc` | `#687080` | +| `nodeBgColorHover` | | `string` | `#f7f9fc` | `#171A1F` | +| `nodeBgColorSelected` | | `string` | `#ffffff` | `#0A0C0F` | +| `nodeCheckboxMargin` | | `string` | `0 4px 0 4px` | `0 4px 0 4px` | +| `nodeColorSelected` | | `string` | `#1c6eff` | `#4083E8` | +| `nodeContentHeight` | | `number` | `32` | `32` | +| `nodeContentLabelHighlightColor` | | `string` | `#1c6eff` | `#4083E8` | +| `nodeContentLabelPadding` | | `string | number` | `0 4px` | `0 4px` | +| `nodeContentPadding` | | `string | number` | `0 8px 0 4px` | `0 8px 0 4px` | +| `nodeIconWidth` | | `number` | `24` | `24` | +| `nodePaddingVertical` | | `string | number` | `0px` | `0px` | diff --git a/packages/components/types.d.ts b/packages/components/types.d.ts index 07d0bd56f..f99195a26 100644 --- a/packages/components/types.d.ts +++ b/packages/components/types.d.ts @@ -80,6 +80,7 @@ import type { TabComponent, TabsComponent } from '@idux/components/tabs' import type { TagComponent, TagGroupComponent } from '@idux/components/tag' import type { TextComponent } from '@idux/components/text' import type { TextareaComponent } from '@idux/components/textarea' +import type { ThemeProviderComponent } from '@idux/components/theme' import type { TimePickerComponent, TimeRangePickerComponent } from '@idux/components/time-picker' import type { TimelineComponent, TimelineItemComponent } from '@idux/components/timeline' import type { TooltipComponent } from '@idux/components/tooltip' @@ -181,6 +182,7 @@ declare module 'vue' { IxTagGroup: TagGroupComponent IxText: TextComponent IxTextarea: TextareaComponent + IxThemeProvider: ThemeProviderComponent IxTimeline: TimelineComponent IxTimelineItem: TimelineItemComponent IxTimePicker: TimePickerComponent diff --git a/packages/components/upload/docs/Theme.zh.md b/packages/components/upload/docs/Theme.zh.md index 4be03178c..3cc31ee22 100644 --- a/packages/components/upload/docs/Theme.zh.md +++ b/packages/components/upload/docs/Theme.zh.md @@ -1,32 +1,9 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@upload-list-margin` | `8px 0 0` | - | - | -| `@upload-border-radius` | `2px` | - | - | -| `@upload-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@upload-selector-drag-border` | `1px dashed @color-graphite-l20` | - | - | -| `@upload-selector-dragover-border` | `1px dashed @color-blue` | - | - | -| `@upload-list-text-border` | `1px solid @color-graphite-l30` | - | - | -| `@upload-list-name-max-width` | `calc(100% - 74px)` | - | - | -| `@upload-list-image-thumb-width` | `48px` | - | - | -| `@upload-list-image-thumb-height` | `48px` | - | - | -| `@upload-list-image-thumb-margin` | `0 8px 0 0` | - | - | -| `@upload-list-image-margin` | `8px 0 0` | - | - | -| `@upload-list-image-card-height` | `96px` | - | - | -| `@upload-list-image-card-width` | `96px` | - | - | -| `@upload-list-image-card-margin` | `0 8px 8px 0` | - | - | -| `@upload-list-image-card-bg-color` | `@color-black` | - | - | -| `@upload-list-image-card-icon-wrap-width` | `100%` | - | - | -| `@upload-list-image-card-selector-font-size` | `24px` | - | - | -| `@upload-list-image-card-selector-color-hover` | `@color-primary-l10` | - | - | -| `@upload-list-image-card-status-min-width` | `60px` | - | - | -| `@upload-list-image-card-status-progress-margin` | `8px 0 0` | - | - | -| `@upload-file-border-bottom` | `1px solid @color-graphite-l30` | - | - | -| `@upload-file-height` | `32px` | - | - | -| `@upload-icon-wrap-max-width` | `120px` | - | - | -| `@upload-icon-margin` | `0 0 0 16px` | - | - | -| `@upload-icon-file-margin` | `0 8px 0 0` | - | - | -| `@upload-icon-font-size` | `@font-size-md` | `@font-size-lg` | - | -| `@upload-tip-margin` | `8px 0 0` | - | - | -| `@upload-color-error` | `@color-red-d10` | - | - | -| `@upload-opr-height` | `20px` | - | - | -| `@upload-opr-fail-text-margin` | `6px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `listImgCardHeight` | | `number` | `96` | `96` | +| `listImgCardWidth` | | `number` | `96` | `96` | +| `listImgThumbHeight` | | `number` | `48` | `48` | +| `listImgThumbWidth` | | `number` | `48` | `48` | +| `listNameMaxWidth` | | `string | number` | `calc(100% - 74px)` | `calc(100% - 74px)` | +| `selectorDragableBorder` | | `string` | `1px dashed #d3d7de` | `1px dashed #3C424D` | +| `selectorDragableBorderDragover` | | `string` | `1px dashed #1c6eff` | `1px dashed #4083E8` | diff --git a/packages/pro/dark.full.css b/packages/pro/dark.full.css index 178f31ca8..3603151c5 100644 --- a/packages/pro/dark.full.css +++ b/packages/pro/dark.full.css @@ -1,42 +1,5 @@ -/* ------ search css variables ------ */ -:root { - --ix-pro-search-height-sm: 24px; - --ix-pro-search-height-md: 32px; - --ix-pro-search-container-padding-sm: 2px; - --ix-pro-search-container-padding-md: 4px; - --ix-pro-search-tag-gap-sm: 2px; - --ix-pro-search-tag-gap-md: 4px; - --ix-pro-search-quick-select-padding-sm: 8px; - --ix-pro-search-quick-select-padding-md: 12px; - --ix-pro-search-tag-color: #f4f8ff; - --ix-pro-search-tag-bg-color: #1f2329; - --ix-pro-search-tag-color-disabled: #687080; - --ix-pro-search-tag-bg-color-disabled: #1f2329; - --ix-pro-search-tag-name-color: #808999; - --ix-pro-search-segment-padding-horizontal: 4px; - --ix-pro-search-segment-max-width: 150px; - --ix-pro-search-name-panel-min-width: 160px; - --ix-pro-search-operator-panel-min-width: 20px; - --ix-pro-search-select-panel-min-width: 100px; - --ix-pro-search-tree-select-panel-min-width: 200px; - --ix-pro-search-tree-select-panel-max-width: 400px; -} - -/* ------ transfer css variables ------ */ -:root { - --ix-pro-transfer-list-min-width: 260px; - --ix-pro-transfer-list-min-height: 290px; - --ix-pro-transfer-table-close-icon-padding: 0 0 0 12px; - --ix-pro-transfer-tree-close-icon-padding: 0 8px; -} - -/* ------ tree css variables ------ */ -:root { - --ix-pro-tree-header-height: 38px; -} - -/* ------ layout css variables ------ */ +/* ------ pro-layout css variables ------ */ :root { --ix-pro-layout-content-bg-color: #171a1f; --ix-pro-layout-header-box-shadow: 0 1px 0 0 #1f2329; @@ -93,7 +56,31 @@ --ix-pro-layout-dark-menu-horizontal-item-bg-active: #151d33; } -/* ------ textarea css variables ------ */ +/* ------ pro-search css variables ------ */ +:root { + --ix-pro-search-height-sm: 24px; + --ix-pro-search-height-md: 32px; + --ix-pro-search-container-padding-sm: 2px; + --ix-pro-search-container-padding-md: 4px; + --ix-pro-search-tag-gap-sm: 2px; + --ix-pro-search-tag-gap-md: 4px; + --ix-pro-search-quick-select-padding-sm: 8px; + --ix-pro-search-quick-select-padding-md: 12px; + --ix-pro-search-tag-color: #f4f8ff; + --ix-pro-search-tag-bg-color: #1f2329; + --ix-pro-search-tag-color-disabled: #687080; + --ix-pro-search-tag-bg-color-disabled: #1f2329; + --ix-pro-search-tag-name-color: #808999; + --ix-pro-search-segment-padding-horizontal: 4px; + --ix-pro-search-segment-max-width: 150px; + --ix-pro-search-name-panel-min-width: 160px; + --ix-pro-search-operator-panel-min-width: 20px; + --ix-pro-search-select-panel-min-width: 100px; + --ix-pro-search-tree-select-panel-min-width: 200px; + --ix-pro-search-tree-select-panel-max-width: 400px; +} + +/* ------ pro-textarea css variables ------ */ :root { --ix-pro-textarea-index-col-color: #f4f8ff; --ix-pro-textarea-index-col-min-width: 32px; @@ -106,3 +93,16 @@ --ix-pro-textarea-count-opacity: 0.9; --ix-pro-textarea-count-color: #525966; } + +/* ------ pro-transfer css variables ------ */ +:root { + --ix-pro-transfer-list-min-width: 260px; + --ix-pro-transfer-list-min-height: 290px; + --ix-pro-transfer-table-close-icon-padding: 0 0 0 12px; + --ix-pro-transfer-tree-close-icon-padding: 0 8px; +} + +/* ------ pro-tree css variables ------ */ +:root { + --ix-pro-tree-header-height: 38px; +} diff --git a/packages/pro/default.full.css b/packages/pro/default.full.css index a2517bf42..d5786a628 100644 --- a/packages/pro/default.full.css +++ b/packages/pro/default.full.css @@ -1,42 +1,5 @@ -/* ------ search css variables ------ */ -:root { - --ix-pro-search-height-sm: 24px; - --ix-pro-search-height-md: 32px; - --ix-pro-search-container-padding-sm: 2px; - --ix-pro-search-container-padding-md: 4px; - --ix-pro-search-tag-gap-sm: 2px; - --ix-pro-search-tag-gap-md: 4px; - --ix-pro-search-quick-select-padding-sm: 8px; - --ix-pro-search-quick-select-padding-md: 12px; - --ix-pro-search-tag-color: #2f3540; - --ix-pro-search-tag-bg-color: #edf1f7; - --ix-pro-search-tag-color-disabled: #bec3cc; - --ix-pro-search-tag-bg-color-disabled: #edf1f7; - --ix-pro-search-tag-name-color: #6f7785; - --ix-pro-search-segment-padding-horizontal: 4px; - --ix-pro-search-segment-max-width: 150px; - --ix-pro-search-name-panel-min-width: 160px; - --ix-pro-search-operator-panel-min-width: 20px; - --ix-pro-search-select-panel-min-width: 100px; - --ix-pro-search-tree-select-panel-min-width: 200px; - --ix-pro-search-tree-select-panel-max-width: 400px; -} - -/* ------ transfer css variables ------ */ -:root { - --ix-pro-transfer-list-min-width: 260px; - --ix-pro-transfer-list-min-height: 290px; - --ix-pro-transfer-table-close-icon-padding: 0 0 0 12px; - --ix-pro-transfer-tree-close-icon-padding: 0 8px; -} - -/* ------ tree css variables ------ */ -:root { - --ix-pro-tree-header-height: 38px; -} - -/* ------ layout css variables ------ */ +/* ------ pro-layout css variables ------ */ :root { --ix-pro-layout-content-bg-color: #f7f9fc; --ix-pro-layout-header-box-shadow: 0 1px 0 0 #e1e5eb; @@ -83,7 +46,31 @@ --ix-pro-layout-dark-menu-horizontal-item-bg-active: #454c59; } -/* ------ textarea css variables ------ */ +/* ------ pro-search css variables ------ */ +:root { + --ix-pro-search-height-sm: 24px; + --ix-pro-search-height-md: 32px; + --ix-pro-search-container-padding-sm: 2px; + --ix-pro-search-container-padding-md: 4px; + --ix-pro-search-tag-gap-sm: 2px; + --ix-pro-search-tag-gap-md: 4px; + --ix-pro-search-quick-select-padding-sm: 8px; + --ix-pro-search-quick-select-padding-md: 12px; + --ix-pro-search-tag-color: #2f3540; + --ix-pro-search-tag-bg-color: #edf1f7; + --ix-pro-search-tag-color-disabled: #bec3cc; + --ix-pro-search-tag-bg-color-disabled: #edf1f7; + --ix-pro-search-tag-name-color: #6f7785; + --ix-pro-search-segment-padding-horizontal: 4px; + --ix-pro-search-segment-max-width: 150px; + --ix-pro-search-name-panel-min-width: 160px; + --ix-pro-search-operator-panel-min-width: 20px; + --ix-pro-search-select-panel-min-width: 100px; + --ix-pro-search-tree-select-panel-min-width: 200px; + --ix-pro-search-tree-select-panel-max-width: 400px; +} + +/* ------ pro-textarea css variables ------ */ :root { --ix-pro-textarea-index-col-color: #2f3540; --ix-pro-textarea-index-col-min-width: 32px; @@ -96,3 +83,16 @@ --ix-pro-textarea-count-opacity: 0.9; --ix-pro-textarea-count-color: #a1a7b3; } + +/* ------ pro-transfer css variables ------ */ +:root { + --ix-pro-transfer-list-min-width: 260px; + --ix-pro-transfer-list-min-height: 290px; + --ix-pro-transfer-table-close-icon-padding: 0 0 0 12px; + --ix-pro-transfer-tree-close-icon-padding: 0 8px; +} + +/* ------ pro-tree css variables ------ */ +:root { + --ix-pro-tree-header-height: 38px; +} diff --git a/packages/pro/layout/docs/Theme.zh.md b/packages/pro/layout/docs/Theme.zh.md index e2c6d19c5..31c13c300 100644 --- a/packages/pro/layout/docs/Theme.zh.md +++ b/packages/pro/layout/docs/Theme.zh.md @@ -1,8 +1,45 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@pro-background-color` | `var(--ix-background-color-light)` | - | - | -| `@pro-layout-header-box-shadow` | `0 2px 8px 0 @menu-border-color` | `0 1px 0 0 @menu-border-color` | - | -| `@pro-layout-sider-box-shadow` | `2px 0 8px 0 @menu-border-color` | `1px 0 0 0 @menu-border-color` | - | -| `@pro-layout-logo-font-size` | `var(--ix-font-size-xl)` | - | - | -| `@pro-layout-logo-font-weight` | `var(--ix-font-weight-lg)` | - | - | -| `@pro-layout-logo-image-height` | `36px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `contentBgColor` | | `string` | `#f7f9fc` | `#171A1F` | +| `darkMenuHorizontalItemBgActive` | | `string` | `#454c59` | `#151D33` | +| `darkMenuHorizontalItemBgHover` | | `string` | `#1e232b` | `#171A1F` | +| `darkMenuHorizontalItemColorActive` | | `string` | `#ffffff` | `#4083E8` | +| `darkMenuHorizontalItemColorHover` | | `string` | `#ffffff` | `#F4F8FF` | +| `darkMenuItemBg` | | `string` | `#2f3540` | `#0A0C0F` | +| `darkMenuItemBgActive` | | `string` | `#1c6eff` | `left / 100% 100% no-repeat url(data:image/png;base64,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)` | +| `darkMenuItemBgDisabled` | | `string` | `#2f3540` | `#0A0C0F` | +| `darkMenuItemBgHover` | | `string` | `#1e232b` | `linear-gradient(to right, rgba(28, 110, 255, 0.20) 1%, rgba(76, 140, 255, 0.05) 99%)` | +| `darkMenuItemColor` | | `string` | `#ffffff` | `#F4F8FF` | +| `darkMenuItemColorActive` | | `string` | `#ffffff` | `#F4F8FF` | +| `darkMenuItemColorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `darkMenuItemColorHover` | | `string` | `#ffffff` | `#F4F8FF` | +| `darkMenuItemFontWeightActive` | | `number` | `600` | `400` | +| `darkMenuItemGroupBg` | | `string` | `#2f3540` | `#0A0C0F` | +| `darkMenuItemGroupColor` | | `string` | `#6f7785` | `#808999` | +| `darkMenuSubExpandedBg` | | `string` | `#2f3540` | `#0A0C0F` | +| `darkMenuSubExpandedBgActive` | | `string` | `#2f3540` | `#171A1F` | +| `darkSiderTriggerBg` | | `string` | `#454c59` | `#1F2329` | +| `darkSiderTriggerBgHover` | | `string` | `#1e232b` | `#1F2329` | +| `headerBoxShadow` | | `string` | `0 1px 0 0 #e1e5eb` | `0 1px 0 0 #1F2329` | +| `logoFontSize` | | `number` | `20` | `20` | +| `logoFontWeight` | | `number` | `600` | `600` | +| `logoImgHeight` | | `number` | `36` | `36` | +| `menuHorizontalItemBgActive` | | `string` | `#e8f4ff` | `#151D33` | +| `menuHorizontalItemBgHover` | | `string` | `#f7f9fc` | `#171A1F` | +| `menuHorizontalItemColorActive` | | `string` | `#1c6eff` | `#4083E8` | +| `menuHorizontalItemColorHover` | | `string` | `#2f3540` | `#F4F8FF` | +| `menuItemBg` | | `string` | `#ffffff` | `#0A0C0F` | +| `menuItemBgActive` | | `string` | `#e8f4ff` | `left / 100% 100% no-repeat url(data:image/png;base64,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)` | +| `menuItemBgDisabled` | | `string` | `#ffffff` | `#0A0C0F` | +| `menuItemBgHover` | | `string` | `#f7f9fc` | `linear-gradient(to right, rgba(28, 110, 255, 0.20) 1%, rgba(76, 140, 255, 0.05) 99%)` | +| `menuItemColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `menuItemColorActive` | | `string` | `#1c6eff` | `#F4F8FF` | +| `menuItemColorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `menuItemColorHover` | | `string` | `#2f3540` | `#F4F8FF` | +| `menuItemGroupBg` | | `string` | `#ffffff` | `#0A0C0F` | +| `menuItemGroupColor` | | `string` | `#6f7785` | `#808999` | +| `menuSubExpandedBg` | | `string` | `#ffffff` | `#0A0C0F` | +| `menuSubExpandedBgActive` | | `string` | `#ffffff` | `#171A1F` | +| `siderBoxShadow` | | `string` | `1px 0 0 0 #e1e5eb` | `1px 0 0 0 #1F2329` | +| `siderTriggerBg` | | `string` | `#edf1f7` | `#1F2329` | +| `siderTriggerBgHover` | | `string` | `#e1e5eb` | `#1F2329` | diff --git a/packages/pro/layout/theme/dark.css b/packages/pro/layout/theme/dark.css index dcbaaa221..853948fed 100644 --- a/packages/pro/layout/theme/dark.css +++ b/packages/pro/layout/theme/dark.css @@ -1,4 +1,4 @@ -/* ------ layout css variables ------ */ +/* ------ pro-layout css variables ------ */ :root { --ix-pro-layout-content-bg-color: #171a1f; --ix-pro-layout-header-box-shadow: 0 1px 0 0 #1f2329; diff --git a/packages/pro/layout/theme/default.css b/packages/pro/layout/theme/default.css index 4ec4be5c7..8d39f6b7a 100644 --- a/packages/pro/layout/theme/default.css +++ b/packages/pro/layout/theme/default.css @@ -1,4 +1,4 @@ -/* ------ layout css variables ------ */ +/* ------ pro-layout css variables ------ */ :root { --ix-pro-layout-content-bg-color: #f7f9fc; --ix-pro-layout-header-box-shadow: 0 1px 0 0 #e1e5eb; diff --git a/packages/pro/search/docs/Theme.zh.md b/packages/pro/search/docs/Theme.zh.md index 2ac02e1a1..4d3fc8353 100644 --- a/packages/pro/search/docs/Theme.zh.md +++ b/packages/pro/search/docs/Theme.zh.md @@ -1,83 +1,22 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@pro-search-font-size` | `@form-font-size-md` | - | - | -| `@pro-search-min-height` | `@height-md` | - | - | -| `@pro-search-content-padding-horizontal` | `@spacing-xs` | - | - | -| `@pro-search-content-padding-vertical` | `@spacing-xs` | - | - | -| `@pro-search-border-width` | `@form-border-width` | - | - | -| `@pro-search-border-style` | `@form-border-style` | - | - | -| `@pro-search-border-color` | `@form-border-color` | - | - | -| `@pro-search-border-radius` | `@border-radius-sm` | - | - | -| `@pro-search-color` | `@form-color` | - | - | -| `@pro-search-background-color` | `@form-background-color` | - | - | -| `@pro-search-placeholder-color` | `@color-graphite` | - | - | -| `@pro-search-hover-color` | `@form-hover-color` | - | - | -| `@pro-search-active-color` | `@form-active-color` | - | - | -| `@pro-search-active-box-shadow` | `@form-active-box-shadow` | - | - | -| `@pro-search-disabled-color` | `@form-disabled-color` | - | - | -| `@pro-search-disabled-background-color` | `@form-disabled-background-color` | - | - | -| `@pro-search-placeholder-padding-horizontal` | `12px` | - | - | -| `@pro-search-clear-icon-font-size` | `@font-size-lg` | - | - | -| `@pro-search-clear-icon-width` | `@font-size-lg` | - | - | -| `@pro-search-clear-icon-margin-right` | `@spacing-sm` | - | - | -| `@pro-search-clear-icon-color` | `@color-graphite-d20` | - | - | -| `@pro-search-close-icon-font-size` | `@font-size-lg` | - | - | -| `@pro-search-close-icon-color` | `@color-graphite-d20` | - | - | -| `@pro-search-close-icon-margin-left` | `0` | - | - | -| `@pro-search-search-button-width` | `@pro-search-min-height` | - | - | -| `@pro-search-search-button-background-color` | `@color-primary` | - | - | -| `@pro-search-search-button-font-size` | `@font-size-lg` | - | - | -| `@pro-search-search-button-color` | `@color-white` | - | - | -| `@pro-search-search-button-disabled-background-color` | `@disabled-color` | - | - | -| `@pro-search-search-button-disabled-color` | `@disabled-bg-color` | - | - | -| `@pro-search-item-height` | `22px` | - | - | -| `@pro-search-item-color` | `@pro-search-color` | - | - | -| `@pro-search-item-tag-max-width` | `160px` | - | - | -| `@pro-search-item-tag-color` | `@pro-search-color` | - | - | -| `@pro-search-item-tag-background-color` | `@color-graphite-l40` | - | - | -| `@pro-search-item-tag-border-radius` | `2px` | - | - | -| `@pro-search-item-tag-padding` | `2px 4px 2px 8px` | - | - | -| `@pro-search-item-tag-margin-left` | `@spacing-xs` | - | - | -| `@pro-search-item-tag-margin-bottom` | `@spacing-xs` | - | - | -| `@pro-search-item-tag-disabled-border-color` | `@pro-search-border-color` | - | - | -| `@pro-search-item-tag-disabled-background-color` | `@color-graphite-l40` | - | - | -| `@pro-search-item-tag-invalid-border-color` | `@color-error-d10` | - | - | -| `@pro-search-item-tag-invalid-tooltip-background-color` | `@form-item-invalid-color` | - | - | -| `@pro-search-item-tag-invalid-tooltip-color` | `@color-white` | - | - | -| `@pro-search-segment-padding-horizontal` | `@spacing-xs` | - | - | -| `@pro-search-segment-margin` | `@spacing-xs` | - | - | -| `@pro-search-segment-border-bottom` | `1px solid @color-primary` | - | - | -| `@pro-search-overlay-padding` | `0` | - | - | -| `@pro-search-overlay-background-color` | `@background-color-component` | - | - | -| `@pro-search-overlay-border-radius` | `@border-radius-sm` | - | - | -| `@pro-search-overlay-box-shadow` | `@shadow-bottom-md` | - | - | -| `@pro-search-panel-footer-border-width` | `1px` | - | - | -| `@pro-search-panel-footer-border-style` | `solid` | - | - | -| `@pro-search-panel-footer-border-color` | `@color-graphite-l30` | - | - | -| `@pro-search-panel-footer-padding-horizontal` | `12px` | - | - | -| `@pro-search-panel-footer-padding-vertical` | `8px` | - | - | -| `@pro-search-panel-footer-button-margin` | `@spacing-sm` | - | - | -| `@pro-search-date-picker-panel-body-padding` | `@spacing-lg` | - | - | -| `@pro-search-name-segment-panel-min-width` | `160px` | - | - | -| `@pro-search-operator-segment-panel-min-width` | `20px` | - | - | -| `@pro-search-select-panel-min-width` | `100px` | - | - | -| `@pro-search-tree-select-panel-min-width` | `200px` | - | - | -| `@pro-search-tree-select-panel-max-width` | `400px` | - | - | -| `@pro-search-name-segment-input-min-width` | `60px` | - | - | -| `@pro-search-name-segment-input-text-align` | `start` | - | - | -| `@pro-search-operator-segment-input-min-width` | `20px` | - | - | -| `@pro-search-operator-segment-input-text-align` | `center` | - | - | -| `@pro-search-input-segment-input-min-width` | `100px` | - | - | -| `@pro-search-input-segment-input-text-align` | `start` | - | - | -| `@pro-search-select-segment-input-min-width` | `100px` | - | - | -| `@pro-search-select-segment-input-text-align` | `start` | - | - | -| `@pro-search-tree-select-segment-input-min-width` | `200px` | - | - | -| `@pro-search-tree-select-segment-input-text-align` | `start` | - | - | -| `@pro-search-cascader-segment-input-min-width` | `200px` | - | - | -| `@pro-search-cascader-segment-input-text-align` | `start` | - | - | -| `@pro-search-date-picker-segment-input-min-width` | `100px` | - | - | -| `@pro-search-date-picker-segment-input-text-align` | `start` | - | - | -| `@pro-search-date-range-picker-segment-input-min-width` | `100px` | - | - | -| `@pro-search-date-range-picker-segment-input-text-align` | `start` | - | - | -| `@pro-search-custom-segment-input-min-width` | `100px` | - | - | -| `@pro-search-custom-segment-input-text-align` | `start` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `containerPaddingMd` | | `number` | `4` | `4` | +| `containerPaddingSm` | | `number` | `2` | `2` | +| `heightMd` | | `number` | `32` | `32` | +| `heightSm` | | `number` | `24` | `24` | +| `namePanelMinWidth` | | `number` | `160` | `160` | +| `operatorPanelMinWidth` | | `number` | `20` | `20` | +| `quickSelectPaddingMd` | | `string | number` | `12` | `12` | +| `quickSelectPaddingSm` | | `string | number` | `8` | `8` | +| `segmentMaxWidth` | | `number` | `150` | `150` | +| `segmentPaddingHorizontal` | | `number` | `4` | `4` | +| `selectPanelMinWidth` | | `number` | `100` | `100` | +| `tagBgColor` | | `string` | `#edf1f7` | `#1F2329` | +| `tagBgColorDisabled` | | `string` | `#edf1f7` | `#1F2329` | +| `tagColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `tagColorDisabled` | | `string` | `#bec3cc` | `#687080` | +| `tagGapMd` | | `number` | `4` | `4` | +| `tagGapSm` | | `number` | `2` | `2` | +| `tagNameColor` | | `string` | `#6f7785` | `#808999` | +| `treeSelectPanelMaxWidth` | | `number` | `400` | `400` | +| `treeSelectPanelMinWidth` | | `number` | `200` | `200` | diff --git a/packages/pro/search/theme/dark.css b/packages/pro/search/theme/dark.css index b0af86e04..6309bc7d4 100644 --- a/packages/pro/search/theme/dark.css +++ b/packages/pro/search/theme/dark.css @@ -1,4 +1,4 @@ -/* ------ search css variables ------ */ +/* ------ pro-search css variables ------ */ :root { --ix-pro-search-height-sm: 24px; --ix-pro-search-height-md: 32px; diff --git a/packages/pro/search/theme/default.css b/packages/pro/search/theme/default.css index 928d90dcd..3600cfe18 100644 --- a/packages/pro/search/theme/default.css +++ b/packages/pro/search/theme/default.css @@ -1,4 +1,4 @@ -/* ------ search css variables ------ */ +/* ------ pro-search css variables ------ */ :root { --ix-pro-search-height-sm: 24px; --ix-pro-search-height-md: 32px; diff --git a/packages/pro/textarea/docs/Theme.zh.md b/packages/pro/textarea/docs/Theme.zh.md index 8b6beeb74..85b4bcfab 100644 --- a/packages/pro/textarea/docs/Theme.zh.md +++ b/packages/pro/textarea/docs/Theme.zh.md @@ -1,37 +1,12 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@pro-textarea-color` | `@form-color` | - | - | -| `@pro-textarea-color-secondary` | `@form-color-secondary` | - | - | -| `@pro-textarea-line-height` | `@form-line-height` | `20px` | - | -| `@pro-textarea-font-size-sm` | `@form-font-size-sm` | - | - | -| `@pro-textarea-font-size-md` | `@form-font-size-md` | - | - | -| `@pro-textarea-font-size-lg` | `@form-font-size-lg` | - | - | -| `@pro-textarea-padding-vertical-sm` | `@form-padding-vertical-sm` | `4px` | - | -| `@pro-textarea-padding-vertical-md` | `@form-padding-vertical-md` | `6px` | - | -| `@pro-textarea-padding-vertical-lg` | `@form-padding-vertical-lg` | `8px` | - | -| `@pro-textarea-border-width` | `@form-border-width` | - | - | -| `@pro-textarea-border-style` | `@form-border-style` | - | - | -| `@pro-textarea-border-color` | `@form-border-color` | - | - | -| `@pro-textarea-border-radius` | `@border-radius-md` | - | - | -| `@pro-textarea-background-color` | `@form-background-color` | - | - | -| `@pro-textarea-placeholder-color` | `@form-placeholder-color` | - | - | -| `@pro-textarea-hover-color` | `@form-hover-color` | - | - | -| `@pro-textarea-active-color` | `@form-active-color` | - | - | -| `@pro-textarea-active-box-shadow` | `@form-active-box-shadow` | - | - | -| `@pro-textarea-disabled-color` | `@form-disabled-color` | - | - | -| `@pro-textarea-disabled-background-color` | `@form-disabled-background-color` | - | - | -| `@pro-textarea-index-column-color` | `@pro-textarea-color` | - | - | -| `@pro-textarea-index-column-min-width` | `32px` | - | - | -| `@pro-textarea-index-column-padding-horizontal` | `@spacing-xs` | - | - | -| `@pro-textarea-index-column-background-color` | `@color-graphite-l50` | - | - | -| `@pro-textarea-index-column-cell-error-background-color` | `@color-error-l30` | - | - | -| `@pro-textarea-error-line-background-color` | `@color-error-l50` | - | - | -| `@pro-textarea-error-line-tooltip-background-color` | `@form-item-invalid-color` | - | - | -| `@pro-textarea-error-line-tooltip-color` | `@color-white` | - | - | -| `@pro-textarea-count-bottom` | `1px` | - | - | -| `@pro-textarea-count-right` | `8px` | - | - | -| `@pro-textarea-count-opacity` | `0.9` | - | - | -| `@pro-textarea-count-color` | `@pro-textarea-placeholder-color` | - | - | -| `@pro-textarea-padding-horizontal-sm` | - | `4px` | - | -| `@pro-textarea-padding-horizontal-md` | - | `6px` | - | -| `@pro-textarea-padding-horizontal-lg` | - | `8px` | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `countBottom` | | `number` | `1` | `1` | +| `countColor` | | `string` | `#a1a7b3` | `#525966` | +| `countOpacity` | | `number` | `0.9` | `0.9` | +| `countRight` | | `number` | `8` | `8` | +| `errorLineBgColor` | | `string` | `#fff2f0` | `#33151A` | +| `indexColBgColor` | | `string` | `#f7f9fc` | `#171A1F` | +| `indexColCellErrorBgColor` | | `string` | `#ffaca3` | `#821D1F` | +| `indexColColor` | | `string` | `#2f3540` | `#F4F8FF` | +| `indexColMinWidth` | | `number` | `32` | `32` | +| `indexColPaddingHorizontal` | | `number` | `4` | `4` | diff --git a/packages/pro/textarea/theme/dark.css b/packages/pro/textarea/theme/dark.css index 6c8d5dfcb..6dc744eb7 100644 --- a/packages/pro/textarea/theme/dark.css +++ b/packages/pro/textarea/theme/dark.css @@ -1,4 +1,4 @@ -/* ------ textarea css variables ------ */ +/* ------ pro-textarea css variables ------ */ :root { --ix-pro-textarea-index-col-color: #f4f8ff; --ix-pro-textarea-index-col-min-width: 32px; diff --git a/packages/pro/textarea/theme/default.css b/packages/pro/textarea/theme/default.css index afad9effc..6016ddca5 100644 --- a/packages/pro/textarea/theme/default.css +++ b/packages/pro/textarea/theme/default.css @@ -1,4 +1,4 @@ -/* ------ textarea css variables ------ */ +/* ------ pro-textarea css variables ------ */ :root { --ix-pro-textarea-index-col-color: #2f3540; --ix-pro-textarea-index-col-min-width: 32px; diff --git a/packages/pro/theme/src/useThemeToken.ts b/packages/pro/theme/src/useThemeToken.ts index 4bb234a26..dd4b06f45 100644 --- a/packages/pro/theme/src/useThemeToken.ts +++ b/packages/pro/theme/src/useThemeToken.ts @@ -6,21 +6,19 @@ */ import { - type FullUseThemeTokenContext, - NullUseThemeTokenContext, - type ThemeKeys, type UseThemeTokenContext, + type UseThemeTokenScope, useThemeToken as _useThemeToken, } from '@idux/components/theme' import { ProComponentThemeTokens } from './types' -export function useThemeToken(): NullUseThemeTokenContext -export function useThemeToken( +export function useThemeToken(): UseThemeTokenContext +export function useThemeToken( key: K, -): FullUseThemeTokenContext -export function useThemeToken( +): UseThemeTokenContext +export function useThemeToken( key?: K, -): UseThemeTokenContext { - return _useThemeToken(key as K) +): UseThemeTokenContext { + return _useThemeToken(key as K) } diff --git a/packages/pro/transfer/docs/Theme.zh.md b/packages/pro/transfer/docs/Theme.zh.md index bee888629..8fc0eb189 100644 --- a/packages/pro/transfer/docs/Theme.zh.md +++ b/packages/pro/transfer/docs/Theme.zh.md @@ -1,12 +1,6 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@pro-transfer-list-min-width` | `260px` | - | - | -| `@pro-transfer-list-min-height` | `290px` | - | - | -| `@pro-transfer-list-background-color` | `@background-color-component` | - | - | -| `@pro-transfer-list-item-hover-color` | `@color-graphite-l50` | - | - | -| `@pro-transfer-table-close-icon-padding` | `0 0 0 @spacing-md` | - | - | -| `@pro-transfer-tree-close-icon-padding` | `0 @spacing-sm` | - | - | -| `@pro-transfer-list-close-icon-font-size` | `@font-size-md` | - | - | -| `@pro-transfer-list-close-icon-color` | `@color-graphite-d20` | - | - | -| `@pro-transfer-list-close-icon-hover-color` | `@color-primary` | - | - | -| `@pro-transfer-list-close-icon-active-color` | `@color-primary` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `listMinHeight` | | `number` | `290` | `290` | +| `listMinWidth` | | `number` | `260` | `260` | +| `tableCloseIconPadding` | | `string | number` | `0 0 0 12px` | `0 0 0 12px` | +| `treeCloseIconPadding` | | `string | number` | `0 8px` | `0 8px` | diff --git a/packages/pro/transfer/theme/dark.css b/packages/pro/transfer/theme/dark.css index ee2075f2c..eae57e4fc 100644 --- a/packages/pro/transfer/theme/dark.css +++ b/packages/pro/transfer/theme/dark.css @@ -1,4 +1,4 @@ -/* ------ transfer css variables ------ */ +/* ------ pro-transfer css variables ------ */ :root { --ix-pro-transfer-list-min-width: 260px; --ix-pro-transfer-list-min-height: 290px; diff --git a/packages/pro/transfer/theme/default.css b/packages/pro/transfer/theme/default.css index ee2075f2c..eae57e4fc 100644 --- a/packages/pro/transfer/theme/default.css +++ b/packages/pro/transfer/theme/default.css @@ -1,4 +1,4 @@ -/* ------ transfer css variables ------ */ +/* ------ pro-transfer css variables ------ */ :root { --ix-pro-transfer-list-min-width: 260px; --ix-pro-transfer-list-min-height: 290px; diff --git a/packages/pro/tree/docs/Theme.zh.md b/packages/pro/tree/docs/Theme.zh.md index 6cf397fb2..749b7fde9 100644 --- a/packages/pro/tree/docs/Theme.zh.md +++ b/packages/pro/tree/docs/Theme.zh.md @@ -1,17 +1,3 @@ -| 名称 | default | seer | 备注 | -| --- | --- | --- | --- | -| `@pro-tree-border` | `1px solid @color-graphite-l30` | - | - | -| `@pro-tree-padding` | `0` | - | - | -| `@pro-tree-header-search-wrapper-gap` | `4px` | - | - | -| `@pro-tree-header-search-wrapper-horizontal-spacing` | `12px` | - | - | -| `@pro-tree-header-search-wrapper-vertical-spacing` | `0` | - | - | -| `@pro-tree-search-wrapper-margin-bottom` | `8px` | - | - | -| `@pro-tree-search-input-suffix-color` | `@color-graphite-l10` | - | - | -| `@pro-tree-header-wrapper-icon-font-size` | `@font-size-lg` | - | - | -| `@pro-tree-header-wrapper-icon-hover-color` | `@color-primary` | - | - | -| `@pro-tree-header-wrapper-height` | `38px` | - | - | -| `@pro-tree-content-horizontal-spacing` | `0` | - | - | -| `@pro-tree-content-vertical-spacing` | `0` | - | - | -| `@pro-tree-divider-horizontal-spacing` | `@pro-tree-header-search-wrapper-horizontal-spacing` | - | - | -| `@pro-tree-divider-vertical-spacing` | `8px` | - | - | -| `@pro-tree-node-padding` | `0 0 0 8px` | - | - | +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `headerHeight` | | `number` | `38` | `38` | diff --git a/packages/pro/tree/theme/dark.css b/packages/pro/tree/theme/dark.css index 70c02e3cf..54cb2a262 100644 --- a/packages/pro/tree/theme/dark.css +++ b/packages/pro/tree/theme/dark.css @@ -1,4 +1,4 @@ -/* ------ tree css variables ------ */ +/* ------ pro-tree css variables ------ */ :root { --ix-pro-tree-header-height: 38px; } diff --git a/packages/pro/tree/theme/default.css b/packages/pro/tree/theme/default.css index 70c02e3cf..54cb2a262 100644 --- a/packages/pro/tree/theme/default.css +++ b/packages/pro/tree/theme/default.css @@ -1,4 +1,4 @@ -/* ------ tree css variables ------ */ +/* ------ pro-tree css variables ------ */ :root { --ix-pro-tree-header-height: 38px; } diff --git a/packages/site/plugins/md/parseIndexDocs.ts b/packages/site/plugins/md/parseIndexDocs.ts index 6f9e46fc0..9d98f0058 100644 --- a/packages/site/plugins/md/parseIndexDocs.ts +++ b/packages/site/plugins/md/parseIndexDocs.ts @@ -20,7 +20,7 @@ export function parseIndexDocs(id: string, raw: string): string { const apiDocName = getDocCompName(id, 'Api') const overviewDocName = getDocCompName(id, 'Overview') const designDocName = getDocCompName(id, 'Design') - const themeDocName = indexMeta.theme ? getDocCompName(id, 'Theme') : '' + const themeDocName = getDocCompName(id, 'Theme') return ( generaComponentScript( diff --git a/packages/site/src/docs/CustomizeTheme.zh.md b/packages/site/src/docs/CustomizeTheme.zh.md index af624d91a..2b6204be0 100644 --- a/packages/site/src/docs/CustomizeTheme.zh.md +++ b/packages/site/src/docs/CustomizeTheme.zh.md @@ -6,103 +6,588 @@ order: 5 我们所有的组件都支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。 -我们使用了 [Less](https://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整，在每个组件的文档中都会有说明哪些变量支持定制。 +在 2.0 的版本中，我们基于全套设计token实现了全新的动态主题机制，提供了一系列的全局token变量可供修改，以及各个组件可独立控制的token变量。 -## 官方主题 +## 主题配置 -我们提供了 2 种官方主题，欢迎在项目中试用，并且给我们提供反馈。 +### 使用 IxThemeProvider + +动态主题需要通过 `IxThemeProvider` 来使用，它的功能包含主题变量配置、预设主题配置、主题token动态注入等 + +```ts +import { IxThemeProvider } from '@idux/components/theme' +``` + +```html + + + +``` + +### 配置预设主题 + +我们提供了 2 种预设主题，欢迎在项目中试用，并且给我们提供反馈。 - `default`: 默认主题 -- `seer`: 安全主题 +- `dark`: 暗黑风格主题 + +通过 `IxThemeProvider` 的 `presetTheme` 进行配置即可，该配置同时支持全局配置 + +### 配置主题Token + +可以通过 `IxThemeProvider` 的 `tokens` 属性配置来修改token，也可以在全局配置中修改。 + +支持修改全局token以及组件token，详情请见： -默认的 `@idux/components/(default|seer).full.(css|less)` 文件中已经包含了内置的 `reset` 样式，如果不需要的话，可以替换成相应的 `@idux/components/(default|seer).(css|less)` 文件，同时应该提供最基础的 reset 样式，参见：[#1194](https://github.com/IDuxFE/idux/issues/1194). +```html + + + +``` + +### 配置主题算法 + +主题内部的token依赖多层的派生和继承，以及一些主题算法算法，用于获取颜色等。 + +目前支持的算法配置有： + +- 获取基础颜色：`getBaseColors: () => BaseColors` -### 方式一: 使用 CSS +组件或者是内置的几套主题的全局token，均会用到几种基础色以及通过其派生的颜色，可以通过改算法修改内置的基础色 -如果项目不使用 Less，可在入口的 CSS 文件(如：`style.css`)或者 ts 文件(如：`idux.ts`/`main.ts`)中，全量引入主题样式文件。 +- 计算色板颜色：`getColorPalette: (color: string) => ColorPalette` -```css -/* 默认主题*/ -@import "@idux/components/default.full.css"; -@import "@idux/pro/default.css"; +一些例如信息色或者主题色的不同状态和用途的颜色token是通过色板计算而来，可以通过该算法修改色板的计算逻辑 -/* 安全主题 */ -/* @import "@idux/components/seer.full.css" */ -/* @import "@idux/pro/seer.css" */ +- 获取灰阶颜色：`getGreyColors: () => ColorPalette` + +文字、背景色通常会使用灰阶颜色的不同色阶，可以通过修改该算法来修改整体的灰阶颜色 + +```html + + + ``` -### 方式二：使用 Less +## 高级使用 + +### 动态主题切换 -可在入口的 Less 文件(如：`style.less`)或者 ts 文件(如：`idux.ts`/`main.ts`)中，全量引入主题样式文件, 同时还需要在构建工具中配置 less。 +由于 2.0 版本中使用了 `javascript` 变量表达设计token，因此我们已经实现了主题token配置以及预设主题配置等的动态切换功能，只需要在 `IxThemeProvider` 的属性中或者全局配置的 `theme` 属性中做修改，既可实现动态切换 -```less -/* 默认主题*/ -@import "@idux/components/default.full.less"; -@import "@idux/pro/default.less"; +### 是否使用 hash -/* 安全主题 */ -/* @import "@idux/components/seer.full.less" */ -/* @import "@idux/pro/seer.less" */ +我们基于对全局的token以及每个组件token都基于 `hash` 做了隔离和性能优化，也基于该功能实现了主题嵌套能力，但是你仍然可以选择关闭该功能，届时主题嵌套会不再生效，所有的token生成的css变量都会作用在 `:root` 下 + +可以通过 `IxThemeProvider` 或者全局配置的 `theme` 属性来设置 `hashed` + +```html + + + ``` -配置 less, 以 vite 为例，修改 `vite.config.ts`: +> 注：即使不使用 `hash`，组件库内部仍然会计算 `hash`，通过比对两次的计算结果来判断是否有组件或全局的主题变更 + +### 主题嵌套 + +可以通过 `IxThemeProvider` 的嵌套使用来实现主题嵌套 + +可以用来局部修改某个页面或区块的组件样式，也可以用来修改二次封装的组件内部的基础组件风格，由于这些token是经过考量和打磨的可暴露API，使用主题token会比样式覆盖更加可控。 + +配置 `inherit` 来继承上层 Provider 的token 以及配置 + +```html + + + + + + +``` + +> 注：主题嵌套的能力必须开启 `hash`，即配置 `hashed` 为 `true` + +### 使用和注册主题Token + +可以通过 `@idux/components/theme` 暴露的 `useThemeToken` 来使用主题token。 ```ts -// https://vitejs.dev/config/ -export default defineConfig({ - ... - css: { - preprocessorOptions: { - less: { - javascriptEnabled: true, - }, - }, +import { defineComponent } from 'vue' +import { useThemeToken } from '@idux/components/theme' + +export default defineComponent({ + setup() { + // 不提供 key， 默认获取全局token，以及全局 hashId + const { tokens: globalTokens } = useThemeToken() + // 提供具体key，获取某组件token，以及组件 hashId + const { globalHashId, hashId, tokens } = useThemeToken('timePicker') + + ... + ... + + return () =>
+ ... +
+ } +}) +``` + +由于token会在运行时被转换为中划线连接的，以 `--ix` 开头的 `css` 变量，而这些变量通过作为class的 `hashId`来划分作用域，因此在需要消费这些 `css` 变量时应当将 `hashId` 绑定到需要使用变量的节点下。 + +如果应用内部需要消费组件库的全局token转换成的 `css` 变量，同样也需要将 `globalHashId` 绑定到指定的节点。 + +如果只需要使用 `javascript` 变量，这不需要绑定 `hashId`。 + +> 注：对于某个组件的token，只有引用了该组件并执行过该组件的setup阶段，才能获取该组件的token + +### 定义和注册自定义组件或业务页面的主题token + +同样可以使用 `useThemeToken` 来注册某个组件的主题token并消费，通常可以在项目中或者需要的地方扩展主题类型 + +```ts +import { + type UseThemeTokenScope, + type UseThemeTokenContext, + useThemeToken as _useThemeToken, +} from '@idux/components/theme' + +// 扩展的 token 定义 +interface PageThemeTokens { + pageA: { + menuColor: string, + iconTop: number, + ... }, -}); + pageB: { + ... + } +} + +// 获取某个页面的token +export type PageCertainThemeTokens = CertainThemeTokens< + K, + PageThemeTokens +> + +// 某个页面的token getter类型扩展 +export type PageTokenGetter = TokenGetter< + K, + PageThemeTokens +> + +// 某个页面的token转换函数类型扩展 +export type PageTokenTransforms = TokenTransforms< + K, + PageThemeTokens +> + + +export function useThemeToken(): UseThemeTokenContext +export function useThemeToken( + key: K, +): UseThemeTokenContext +export function useThemeToken( + key?: K, +): UseThemeTokenContext { + return _useThemeToken(key as K) +} ``` -## 自定义主题 +下一步为 `pageA` 页面定义主题 `getter` + +```ts +import type { PageTokenGetter, PageTokenTransforms } from 'path/to/pageTokenTypes.ts' + +import { numUnitTransform } from '@idux/components/theme' -### 方式一：在 Less 文件中覆盖主题变量 +export const transforms: PageTokenTransforms<'pageA'> = { + iconTop: value => numUnitTransform(value, 'rem') +} -在 `styles.less` 里引入官方主题文件，再根据实际需求自定义覆盖主题样式变量的参数。 +export const getThemeTokens: PageTokenGetter<'pageA'> = (tokens, presetTheme, algorithms) => { + const { getBaseColors, getGreyColors, getColorPalette } = algorithms + const { colorText } = tokens -例如，在以下样例中通过修改 `@primary-color` 的数值将预定义默认主题的基础色修改为 `#f5222d`： + ... + ... -```less -// -------- 引入官方提供的 less 样式入口文件 ----------- -@import "@idux/components/default.less"; -@import "@idux/pro/default.less"; + return { + menuColor: colorText, + iconTop: 16, -// -------- 自定义参数覆盖 ----------- -@primary-color: #f5222d; -... + ... + } +} ``` -### 方式二：构建工具中覆盖主题变量 +`transforms` 的作用是将数字或者字符串类型的token在转换成 `css` 变量时自定义转换函数，例如加上单位，内置的转换函数会保留 `string` 类型的全部内容不做修改，而会将一系列关键字匹配到的 `number` 类型的token加上对应的单位，大部分会转换成 `px` 单位。 -以 vite 为例，修改 `vite.config.ts`: +最后，在页面初始化时注册页面token的 `getter` ，即可使用对应的js变量或者在样式中使用对应的 `css` 变量 ```ts -// https://vitejs.dev/config/ -export default defineConfig({ - ... - css: { - preprocessorOptions: { - less: { - javascriptEnabled: true, - modifyVars: { - 'primary-color': '#f5222d', - ... - }, - }, - }, - }, -}); +import { defineComponent } from 'vue' +import { useThemeToken } from '@idux/components/theme' + +import { transforms, getThemeTokens } from './tokens' +export default defineComponent({ + setup() { + const { globalHashId, hashId, tokens, registerToken } = useThemeToken('timePicker') + registerToken(getThemeTokens, transforms) + + ... + ... + + return () =>
+ ... +
+ } +}) ``` -## 动态切换主题 +token `getter` 只会在第一次注册成功的时候实际执行，因此不必要担心重复注册的问题。 + +## 设计解析 + +### 主题Token + +主题token，也叫主题变量，经过团队的整理，划分成了三个不同概念层次的token。分别是 __基础token__、__派生token__、__扩展token__ ，他们属于逐层派生的关系，并共同构成全局主题token，每一层的token变化，都会触发下面几层的token的变化。 + +#### 基础token + +基础token规定了最基础的，用于派生其他token的原始token，比如字体大小，主题色，信息色等，这些token通常不会直接在具体场景中使用，而是通过派生来创建具有特定意义的token。但通过调整基础token，就已经可以做到调整整体组件库的主题风格。 + +#### 派生token + +派生token是基于基础token，并使用一系列内置的计算规则派生出例如用于不同状态的颜色，不同梯度的尺寸等，这些变量是距离设计规范最近也最据概括性的，他们也已经有了在全局范围内的含义。 + +#### 扩展token + +扩展token是在整体设计规范中最具体的一系列token，他们指定了某个具体场景下应当使用的变量，例如信息文字颜色、组件背景颜色等。调整扩展token可以控制组件库的主题细节。 -TODO: 待补充 +### 主题token与css样式 + +主题token的整体设计思路，是利用编程语言的强大能力处理变量，再将处理过的变量通过一系列的规则转换成 `css` 变量以提供给样式引用 + +### hash计算 + +为了避免重复的生成和插入 `css` 变量，引入了 `hash` 比对的方式，即如果两次插入的token是一样的，则不会再重复插入。 + +## API + +### IxThemeProvider + +详情请参考 [Tooltip](/components/theme/zh). + +### 基础Token + + +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `borderRadius` | 边框圆角 | `number` | `4` | `4` | +| `colorBg` | 基础背景颜色 | `string` | `#ffffff` | `#0A0C0F` | +| `colorBorder` | 基础边框颜色 | `string` | `#d3d7de` | `#3C424D` | +| `colorBorderSecondary` | 次级边框颜色，比基础边框颜色要浅一阶段， 通常用于表格、卡片等不需要边框特别突出的组件 | `string` | `#e1e5eb` | `#1F2329` | +| `colorError` | 错误信息色 | `string` | `#f52727` | `#E8514C` | +| `colorFatal` | 失陷信息色 | `string` | `#82010e` | `#A72122` | +| `colorInfo` | 信息颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorLink` | 链接颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorPrimary` | 主题色 | `string` | `#1c6eff` | `#4083E8` | +| `colorRisk` | 风险信息色 | `string` | `#fa721b` | `#E88641` | +| `colorSuccess` | 成功信息色 | `string` | `#12a679` | `#40C695` | +| `colorText` | 文字颜色 | `string` | `#2f3540` | `#F4F8FF` | +| `colorWarning` | 警告信息色 | `string` | `#fdaa1d` | `#FDAA1D` | +| `colorWhite` | 白色 | `string` | `#ffffff` | `#fff` | +| `fontFamily` | Font family | `string` | `pingfang SC, helvetica neue, arial, hiragino sans gb, microsoft yahei ui, microsoft yahei, simsun, sans-serif` | `pingfang SC, helvetica neue, arial, hiragino sans gb, microsoft yahei ui, microsoft yahei, simsun, sans-serif` | +| `fontFamilyCode` | Font family code | `string` | `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace` | `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace` | +| `fontSize` | 基础字体大小, 默认解析为中号字体，正文字体使用sm | `number` | `14` | `14` | +| `fontWeight` | 基础字重 | `number` | `400` | `400` | +| `height` | 基础高度尺寸 | `number` | `32` | `32` | +| `lineHeightGutter` | 行高gutter，fontSize + gutter = 行高 | `number` | `8` | `8` | +| `lineType` | 边框，分割线的线条样式 | `string` | `solid` | `solid` | +| `lineWidth` | 边框，分割线的宽度 | `number` | `1` | `1` | +| `motionDuration` | 过渡动画时间 | `number` | `0.24` | `0.24` | +| `motionEaseIn` | 预设动效曲率 | `string` | `cubic-bezier(0.12, 0, 0.39, 0)` | `cubic-bezier(0.12, 0, 0.39, 0)` | +| `motionEaseInBack` | 预设动效曲率 | `string` | `cubic-bezier(0.36, 0, 0.66, -0.56)` | `cubic-bezier(0.36, 0, 0.66, -0.56)` | +| `motionEaseInCirc` | 预设动效曲率 | `string` | `cubic-bezier(0.55, 0, 1, 0.45)` | `cubic-bezier(0.55, 0, 1, 0.45)` | +| `motionEaseInOut` | 预设动效曲率 | `string` | `cubic-bezier(0.37, 0, 0.63, 1)` | `cubic-bezier(0.37, 0, 0.63, 1)` | +| `motionEaseInQuint` | 预设动效曲率 | `string` | `cubic-bezier(0.64, 0, 0.78, 0)` | `cubic-bezier(0.64, 0, 0.78, 0)` | +| `motionEaseOut` | 预设动效曲率 | `string` | `cubic-bezier(0.61, 1, 0.88, 1)` | `cubic-bezier(0.61, 1, 0.88, 1)` | +| `motionEaseOutBack` | 预设动效曲率 | `string` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | +| `motionEaseOutCirc` | | `string` | `cubic-bezier(0, 0.55, 0.45, 1)` | `cubic-bezier(0, 0.55, 0.45, 1)` | +| `motionEaseOutQuint` | 预设动效曲率 | `string` | `cubic-bezier(0.22, 1, 0.36, 1)` | `cubic-bezier(0.22, 1, 0.36, 1)` | +| `screenLg` | 屏幕尺寸Lg | `number` | `1280` | `1280` | +| `screenMd` | 屏幕尺寸Md | `number` | `960` | `960` | +| `screenSm` | 屏幕尺寸Sm | `number` | `600` | `600` | +| `screenXl` | 屏幕尺寸Xl | `number` | `1720` | `1720` | +| `spacing` | 基础间距 | `number` | `8` | `8` | + + +### 派生Token + + +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `arrowSize` | 箭头尺寸 | `number` | `6` | `6` | +| `borderRadiusLg` | 边框圆角尺寸Lg | `number` | `8` | `8` | +| `borderRadiusMd` | 边框圆角尺寸Md | `number` | `4` | `4` | +| `borderRadiusSm` | 边框圆角尺寸Sm | `number` | `2` | `2` | +| `borderRadiusXs` | 边框圆角尺寸Xs | `number` | `2` | `2` | +| `boxShadowLg` | 阴影Lg, 物体处于高层，物体和其他层级没有关系，如：对话框、抽屉 | `string` | `0 8px 22px 0px rgba(30, 35, 43, 0.12)` | `0 8px 22px 0px #0A0C0F` | +| `boxShadowMd` | 阴影Md, 物体处于中层，由地面上的元素展开产生，如：下拉面板等 | `string` | `0 4px 16px 0px rgba(30, 35, 43, 0.14)` | `0 4px 16px 0px #0A0C0F` | +| `boxShadowSm` | 阴影Sm，物体处于低层，hover触发为悬浮状态，如：卡片hover | `string` | `0 2px 10px 0px rgba(30, 35, 43, 0.16)` | `0 2px 10px 0px #0A0C0F` | +| `colorErrorBg` | 错误色阶背景颜色 | `string` | `#ff5752` | `#E8514C` | +| `colorErrorBgActive` | 错误色阶背景激活颜色 | `string` | `#cf171d` | `#F37E75` | +| `colorErrorBgHover` | 错误色阶背景悬浮颜色 | `string` | `#ff837a` | `#D42525` | +| `colorErrorBorder` | 错误色阶边框颜色 | `string` | `#cf171d` | `#E8514C` | +| `colorErrorBorderActive` | 错误色阶边框激活颜色 | `string` | `#a80a15` | `#F37E75` | +| `colorErrorBorderHover` | 错误色阶边框悬浮颜色 | `string` | `#f52727` | `#D42525` | +| `colorErrorIcon` | 错误色阶图标颜色 | `string` | `#ff5752` | `#E8514C` | +| `colorErrorText` | 错误色阶文字颜色 | `string` | `#cf171d` | `#E8514C` | +| `colorErrorTextActive` | 错误色阶文字激活颜色 | `string` | `#cf171d` | `#F37E75` | +| `colorErrorTextHover` | 错误色阶文字悬浮颜色 | `string` | `#f52727` | `#D42525` | +| `colorFatalBg` | 失陷色阶背景颜色 | `string` | `#82010e` | `#8f1e1f` | +| `colorFatalBgActive` | 失陷色阶背景激活颜色 | `string` | `#5c000c` | `#a23e3b` | +| `colorFatalBgHover` | 失陷色阶背景悬浮颜色 | `string` | `#8f1820` | `#701a1b` | +| `colorFatalBorder` | 失陷色阶边框颜色 | `string` | `#82010e` | `#8f1e1f` | +| `colorFatalBorderActive` | 失陷色阶边框激活颜色 | `string` | `#5c000c` | `#a23e3b` | +| `colorFatalBorderHover` | 失陷色阶边框悬浮颜色 | `string` | `#8f1820` | `#701a1b` | +| `colorFatalIcon` | 失陷色阶图标颜色 | `string` | `#8f1820` | `#A72122` | +| `colorFatalText` | 失陷色阶文字颜色 | `string` | `#82010e` | `#8f1e1f` | +| `colorFatalTextActive` | 失陷色阶文字激活颜色 | `string` | `#5c000c` | `#a23e3b` | +| `colorFatalTextHover` | 失陷色阶文字悬浮颜色 | `string` | `#8f1820` | `#701a1b` | +| `colorInfoBg` | 信息色阶背景颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorInfoBgActive` | 信息色阶背景激活颜色 | `string` | `#0d51d9` | `#6AA6F4` | +| `colorInfoBgHover` | 信息色阶背景悬浮颜色 | `string` | `#458fff` | `#1B61DD` | +| `colorInfoBorder` | 信息色阶边框颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorInfoBorderActive` | 信息色阶边框激活颜色 | `string` | `#0d51d9` | `#6AA6F4` | +| `colorInfoBorderHover` | 信息色阶边框悬浮颜色 | `string` | `#458fff` | `#1B61DD` | +| `colorInfoIcon` | 信息色阶图标颜色 | `string` | `#458fff` | `#4083E8` | +| `colorInfoText` | 信息色阶文字颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorInfoTextActive` | 信息色阶文字激活颜色 | `string` | `#0d51d9` | `#6AA6F4` | +| `colorInfoTextHover` | 信息色阶文字悬浮颜色 | `string` | `#458fff` | `#1B61DD` | +| `colorOffline` | 离线颜色 | `string` | `#6f7785` | `#808999` | +| `colorOfflineBg` | 离线背景颜色 | `string` | `#6f7785` | `#808999` | +| `colorOfflineText` | 离线文字颜色 | `string` | `#6f7785` | `#808999` | +| `colorPrimaryActive` | 主题色阶激活颜色，常用于背景色 | `string` | `#0d51d9` | `#6AA6F4` | +| `colorPrimaryBorder` | 主题色阶边框颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorPrimaryBorderActive` | 主题色阶边框激活颜色 | `string` | `#0d51d9` | `#6AA6F4` | +| `colorPrimaryBorderHover` | 主题色阶边框悬浮颜色 | `string` | `#458fff` | `#1B61DD` | +| `colorPrimaryHover` | 主题色阶悬浮颜色，常用于背景色 | `string` | `#458fff` | `#1B61DD` | +| `colorPrimaryIcon` | 主题色阶图标颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorPrimaryText` | 主题色阶文字颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorPrimaryTextActive` | 主题色阶文字激活颜色 | `string` | `#0d51d9` | `#6AA6F4` | +| `colorPrimaryTextHover` | 主题色阶文字悬浮颜色 | `string` | `#458fff` | `#1B61DD` | +| `colorRiskBg` | 风险色阶背景颜色 | `string` | `#fa721b` | `#E88641` | +| `colorRiskBgActive` | 风险色阶背景激活颜色 | `string` | `#d4520d` | `#F3A76A` | +| `colorRiskBgHover` | 风险色阶背景悬浮颜色 | `string` | `#ff9245` | `#D8641B` | +| `colorRiskBorder` | 风险色阶边框颜色 | `string` | `#fa721b` | `#E88641` | +| `colorRiskBorderActive` | 风险色阶边框激活颜色 | `string` | `#d4520d` | `#F3A76A` | +| `colorRiskBorderHover` | 风险色阶边框悬浮颜色 | `string` | `#ff9245` | `#D8641B` | +| `colorRiskIcon` | 风险色阶图标颜色 | `string` | `#ff9245` | `#E88641` | +| `colorRiskText` | 风险色阶文字颜色 | `string` | `#fa721b` | `#E88641` | +| `colorRiskTextActive` | 风险色阶文字激活颜色 | `string` | `#d4520d` | `#F3A76A` | +| `colorRiskTextHover` | 风险色阶文字悬浮颜色 | `string` | `#ff9245` | `#D8641B` | +| `colorSuccessBg` | 成功色阶背景颜色 | `string` | `#12a679` | `#40C695` | +| `colorSuccessBgActive` | 成功色阶背景激活颜色 | `string` | `#088060` | `#6ADCAE` | +| `colorSuccessBgHover` | 成功色阶背景悬浮颜色 | `string` | `#30b387` | `#1FB182` | +| `colorSuccessBorder` | 成功色阶边框颜色 | `string` | `#088060` | `#40C695` | +| `colorSuccessBorderActive` | 成功色阶边框激活颜色 | `string` | `#015945` | `#6ADCAE` | +| `colorSuccessBorderHover` | 成功色阶边框悬浮颜色 | `string` | `#12a679` | `#1FB182` | +| `colorSuccessIcon` | 成功色阶图标颜色 | `string` | `#12a679` | `#40C695` | +| `colorSuccessText` | 成功色阶文字颜色 | `string` | `#088060` | `#40C695` | +| `colorSuccessTextActive` | 成功色阶文字激活颜色 | `string` | `#015945` | `#6ADCAE` | +| `colorSuccessTextHover` | 成功色阶文字悬浮颜色 | `string` | `#12a679` | `#1FB182` | +| `colorWarningBg` | 警告色阶背景颜色 | `string` | `#fdaa1d` | `#FDAA1D` | +| `colorWarningBgActive` | 警告色阶背景激活颜色 | `string` | `#d6860d` | `#F3CA6A` | +| `colorWarningBgHover` | 警告色阶背景悬浮颜色 | `string` | `#ffc145` | `#DB941D` | +| `colorWarningBorder` | 警告色阶边框颜色 | `string` | `#fdaa1d` | `#FDAA1D` | +| `colorWarningBorderActive` | 警告色阶边框激活颜色 | `string` | `#d6860d` | `#F3CA6A` | +| `colorWarningBorderHover` | 警告色阶边框悬浮颜色 | `string` | `#ffc145` | `#DB941D` | +| `colorWarningIcon` | 警告色阶图标颜色 | `string` | `#ffc145` | `#FDAA1D` | +| `colorWarningText` | 警告色阶文字颜色 | `string` | `#fdaa1d` | `#FDAA1D` | +| `colorWarningTextActive` | 警告色阶文字激活颜色 | `string` | `#d6860d` | `#F3CA6A` | +| `colorWarningTextHover` | 警告色阶文字悬浮颜色 | `string` | `#ffc145` | `#DB941D` | +| `fontSize2xl` | 字体大小尺寸2Xl | `number` | `24` | `24` | +| `fontSize3xl` | 字体大小尺寸3Xl | `number` | `30` | `30` | +| `fontSizeHeaderLg` | 头部、标题字体大小尺寸Lg | `number` | `20` | `20` | +| `fontSizeHeaderMd` | 头部、标题字体大小尺寸Md | `number` | `16` | `16` | +| `fontSizeHeaderSm` | 头部、标题字体大小尺寸Sm | `number` | `14` | `14` | +| `fontSizeHeaderXl` | 头部、标题字体大小尺寸Xl | `number` | `24` | `24` | +| `fontSizeLg` | 字体大小尺寸Lg | `number` | `16` | `16` | +| `fontSizeMd` | 字体大小尺寸Md | `number` | `14` | `14` | +| `fontSizeSm` | 字体大小尺寸Sm | `number` | `12` | `12` | +| `fontSizeXl` | 字体大小尺寸Xl | `number` | `20` | `20` | +| `fontSizeXs` | 字体大小尺寸Xs | `number` | `10` | `10` | +| `fontWeightLg` | 字重Lg | `number` | `500` | `500` | +| `fontWeightMd` | 字重Md | `number` | `400` | `400` | +| `fontWeightSm` | 字重Sm | `number` | `300` | `300` | +| `fontWeightXl` | 字重Xl | `number` | `600` | `600` | +| `fontWeightXs` | 字重Xs | `number` | `200` | `200` | +| `height2xl` | 高度尺寸2Xl | `number` | `56` | `56` | +| `height3xl` | 高度尺寸3Xl | `number` | `64` | `64` | +| `heightLg` | 高度尺寸Lg | `number` | `40` | `40` | +| `heightMd` | 高度尺寸Md | `number` | `32` | `32` | +| `heightSm` | 高度尺寸Sm | `number` | `24` | `24` | +| `heightXl` | 高度尺寸Xl | `number` | `48` | `48` | +| `heightXs` | 高度尺寸Xs | `number` | `16` | `16` | +| `lineWidthBold` | 粗线框尺寸 | `number` | `2` | `2` | +| `marginSize2Xl` | 外边距尺寸2Xl | `number` | `32` | `32` | +| `marginSize2Xs` | 外边距尺寸2Xs | `number` | `2` | `2` | +| `marginSizeLg` | 外边距尺寸Lg | `number` | `16` | `16` | +| `marginSizeMd` | 外边距尺寸Md | `number` | `12` | `12` | +| `marginSizeSm` | 外边距尺寸Sm | `number` | `8` | `8` | +| `marginSizeXl` | 外边距尺寸Xl | `number` | `24` | `24` | +| `marginSizeXs` | 外边距尺寸Xs | `number` | `4` | `4` | +| `motionDurationFast` | 过渡动画时间 快速 | `number` | `0.18` | `0.18` | +| `motionDurationMedium` | 过渡动画时间 中等 | `number` | `0.24` | `0.24` | +| `motionDurationSlow` | 过渡动画时间 缓慢 | `number` | `0.3` | `0.3` | +| `paddingSize2Xl` | 内边距尺寸2Xl | `number` | `32` | `32` | +| `paddingSize2Xs` | 内边距尺寸2Xs | `number` | `2` | `2` | +| `paddingSizeLg` | 内边距尺寸Lg | `number` | `16` | `16` | +| `paddingSizeMd` | 内边距尺寸Md | `number` | `12` | `12` | +| `paddingSizeSm` | 内边距尺寸Sm | `number` | `8` | `8` | +| `paddingSizeXl` | 内边距尺寸Xl | `number` | `24` | `24` | +| `paddingSizeXs` | 内边距尺寸Xs | `number` | `4` | `4` | +| `screenLgMax` | | `number` | `1719.99` | `1719.99` | +| `screenLgMin` | | `number` | `1280` | `1280` | +| `screenMdMax` | | `number` | `1279.99` | `1279.99` | +| `screenMdMin` | | `number` | `960` | `960` | +| `screenSmMax` | | `number` | `959.99` | `959.99` | +| `screenSmMin` | | `number` | `600` | `600` | +| `screenXlMin` | | `number` | `1720` | `1720` | +| `screenXsMax` | | `number` | `599.99` | `599.99` | + + +### 扩展Token + + +| 名称 | 描述 | 类型 | default | dark | +|---|---|---|---|---| +| `alertCompColorAlpha` | IxAlert 组件的颜色Alpha值， 仅用于这一个组件 | `number` | `0.1` | `0.2` | +| `colorAddonContainerBg` | 容器附加元素背景色，例如输入框的 addon | `string` | `#f7f9fc` | `#171A1F` | +| `colorBgInverse` | 反向背景颜色，用于有背景颜色的容器中，如幽灵按钮 | `string` | `#2f3540` | `#fff` | +| `colorBgInverseDisabled` | 反向禁用背景颜色，用于有背景颜色的容器中，如幽灵按钮 | `string` | `#1e232b` | `#FFFFFF` | +| `colorBorderInverse` | 反向边框颜色，用于由北京的容器中，如幽灵按钮 | `string` | `#ffffff` | `#0A0C0F` | +| `colorBorderSecondary` | 次级边框颜色，用于组件内容区域分割 | `string` | `#e1e5eb` | `#1F2329` | +| `colorContainerBg` | 组件容器背景颜色 | `string` | `#ffffff` | `#0A0C0F` | +| `colorContainerBgActive` | 组件容器激活状态背景颜色，用于menu、select、tree-select等 | `string` | `#e8f4ff` | `#151D33` | +| `colorContainerBgDisabled` | 组件容器禁用背景颜色 | `string` | `#e1e5eb` | `#1F2329` | +| `colorContainerBgHover` | 组件容器悬浮背景颜色 | `string` | `#f7f9fc` | `#171A1F` | +| `colorEmphasizedContainerBg` | 需要突出显示的容器背景颜色，例如表头 | `string` | `#edf1f7` | `#1F2329` | +| `colorEmphasizedContainerBgDisabled` | 需要突出显示的容器背景颜色，例如表头 | `string` | `#d3d7de` | `#1F2329` | +| `colorEmphasizedContainerBgHover` | 需要突出显示的容器背景颜色，例如表头 | `string` | `#e1e5eb` | `#1F2329` | +| `colorErrorOutline` | 错误状态的组件边框颜色，用于表单控件 | `string` | `#f52727` | `#E8514C` | +| `colorFillContainerBg` | 控件组件容器在未选中时的填充颜色 | `string` | `#bec3cc` | `#687080` | +| `colorIcon` | 图标颜色 | `string` | `#5e6573` | `#A1A7B3` | +| `colorIconActive` | 图标激活颜色 | `string` | `#0d51d9` | `#6AA6F4` | +| `colorIconDisabled` | 图标禁用颜色 | `string` | `#bec3cc` | `#687080` | +| `colorIconHover` | 图标悬浮颜色 | `string` | `#1c6eff` | `#4083E8` | +| `colorIconInfo` | 信息图标颜色，这种图标不可操作，仅展示 | `string` | `#bec3cc` | `#687080` | +| `colorInfoContainerBg` | 信息容器背景颜色，用于组件内容承载的容器， 比如fieldset | `string` | `#f7f9fc` | `#171A1F` | +| `colorInfoContainerBgDisabled` | 信息容器禁用背景颜色，用于组件内有信息承载的容器， 比如fieldset | `string` | `#f7f9fc` | `#171A1F` | +| `colorInfoContainerBgHover` | 信息容器悬浮背景颜色，用于组件内容承载的容器， 比如fieldset | `string` | `#f7f9fc` | `#171A1F` | +| `colorMask` | 遮罩颜色 | `string` | `rgba(0, 0, 0, 0.45)` | `rgba(23, 26, 31, 0.88)` | +| `colorSeparator` | 分割线颜色 | `string` | `#e1e5eb` | `#1F2329` | +| `colorTextDisabled` | 文字禁用颜色 | `string` | `#bec3cc` | `#687080` | +| `colorTextInfo` | 信息，描述 | `string` | `#6f7785` | `#808999` | +| `colorTextInverse` | 反向文字颜色，用于有背景颜色的文字 | `string` | `#ffffff` | `#fff` | +| `colorTextInverseDisabled` | 反向文字禁用，用于有背景颜色的文字 | `string` | `#bec3cc` | `#687080` | +| `colorTextPlaceholder` | placeholder 背景颜色 | `string` | `#a1a7b3` | `#525966` | +| `colorTextTitle` | 标题颜色 | `string` | `#2f3540` | `#F4F8FF` | +| `colorTextTitleSecondary` | 副标题颜色 | `string` | `#454c59` | `#C2C7D1` | +| `colorWarningOutline` | 警告状态的组件边框颜色，用于表单控件 | `string` | `#fdaa1d` | `#FDAA1D` | +| `componentBorderRadius` | 组件边框圆角 | `number` | `2` | `2` | +| `controlBgColor` | 控件背景颜色 | `string` | `#ffffff` | `#0A0C0F` | +| `controlBgColorDisabled` | 控件禁用颜色 | `string` | `#e1e5eb` | `#1F2329` | +| `controlBorderColorActive` | 控件激活态边框颜色 | `string` | `#0d51d9` | `#6AA6F4` | +| `controlBorderColorHover` | 控件悬浮边框颜色 | `string` | `#458fff` | `#1B61DD` | +| `controlBorderRadiusLg` | 控件边框圆角Lg | `number` | `2` | `2` | +| `controlBorderRadiusMd` | 控件边框圆角Md | `number` | `2` | `2` | +| `controlBorderRadiusSm` | 控件边框圆角Sm | `number` | `2` | `2` | +| `controlBorderRadiusXs` | 控件边框圆角Xs | `number` | `2` | `2` | +| `controlBoxShadowFocus` | 控件聚焦，激活时的阴影 | `string` | `0 0 0 2px rgba(28, 110, 255, 0.2)` | `0 0 0 2px rgba(64, 131, 232, 0.2)` | +| `controlBoxShadowInvalid` | 控件校验非法时的阴影 | `string` | `0 0 0 2px rgba(245, 39, 39, 0.2)` | `0 0 0 2px rgba(232, 81, 76, 0.2)` | +| `controlFontSizeLg` | 控件字体大小Lg | `number` | `14` | `14` | +| `controlFontSizeMd` | 控件字体大小Md | `number` | `12` | `12` | +| `controlFontSizeSm` | 控件字体大小Sm | `number` | `12` | `12` | +| `controlFontSizeXs` | 控件字体大小Xs | `number` | `10` | `10` | +| `controlHeightLg` | 控件尺寸Lg | `number` | `40` | `40` | +| `controlHeightMd` | 控件尺寸Md | `number` | `32` | `32` | +| `controlHeightSm` | 控件尺寸Sm | `number` | `24` | `24` | +| `controlHeightXs` | 控件尺寸Xs | `number` | `16` | `16` | +| `controlLineType` | 控件的线框类型 | `string` | `solid` | `solid` | +| `controlLineWidth` | 控件的线框宽度 | `number` | `1` | `1` | +| `controlPaddingSizeHorizontalLg` | 控件横向内间距Lg | `number` | `11` | `11` | +| `controlPaddingSizeHorizontalMd` | 控件横向内间距Md | `number` | `11` | `11` | +| `controlPaddingSizeHorizontalSm` | 控件横向内间距Sm | `number` | `7` | `7` | +| `controlPaddingSizeHorizontalXs` | 控件横向内间距Xs | `number` | `7` | `7` | +| `controlPaddingSizeVerticalLg` | 控件竖向内间距Lg | `number` | `8` | `8` | +| `controlPaddingSizeVerticalMd` | 控件竖向内间距Md | `number` | `5` | `5` | +| `controlPaddingSizeVerticalSm` | 控件竖向内间距Sm | `number` | `1` | `1` | +| `controlPaddingSizeVerticalXs` | 控件竖向内间距Xs | `number` | `0` | `0` | +| `fontSizeIcon` | 图标尺寸，字体大小 | `number` | `16` | `16` | +| `fontWeightHeader` | 头部字体粗度 | `number` | `600` | `600` | +| `overlayArrowSize` | 浮层箭头尺寸 | `number` | `6` | `6` | +| `overlayBgColor` | 浮层背景颜色 | `string` | `#ffffff` | `#0A0C0F` | +| `overlayBorderColor` | 浮层边框颜色 | `string` | `none` | `#1F2329` | +| `overlayBorderRadius` | 浮层边框圆角 | `string | number` | `2` | `2` | +| `overlayBorderType` | 浮层边框样式 | `string` | `solid` | `solid` | +| `overlayBorderWidth` | 浮层边框宽度 | `number` | `0` | `1` | +| `scrollbarHeight` | 滚动条高度 | `number` | `12` | `12` | +| `scrollbarThumbBg` | 滚动条滑块背景颜色 | `string` | `#e1e5eb` | `#1F2329` | +| `scrollbarThumbBgActive` | 滚动条滑块激活背景颜色 | `string` | `#bec3cc` | `#687080` | +| `scrollbarThumbBgHover` | 滚动条滑块悬浮背景颜色 | `string` | `#bec3cc` | `#687080` | +| `scrollbarThumbBorderRadius` | 滚动条滑块边框圆角 | `number` | `6` | `6` | +| `scrollbarThumbBorderWidth` | 滚动条滑块边框颜色 | `number` | `2` | `2` | +| `scrollbarThumbBoxShadow` | 滚动条滑块阴影 | `string` | `none` | `none` | +| `scrollbarTrackBg` | 滚动条轨道背景颜色 | `string` | `unset` | `unset` | +| `scrollbarTrackBorderRadius` | 滚动条轨道边框圆角 | `number` | `0` | `0` | +| `scrollbarTrackBoxShadow` | 滚动条轨道阴影 | `string` | `unset` | `unset` | +| `scrollbarWidth` | 滚动条宽度 | `number` | `12` | `12` | +| `tagCompColorAlpha` | IxTag 组件的颜色Alpha值，仅用于这一个组件 | `number` | `0.1` | `0.2` | + + +## FAQ + +### 可不可以不使用 IxThemeProvider？ + +如果由于某些限制无法使用 IxThemeProvider，我们在打包产物中增加了不同主题下的全部 `css` 变量，可以直接在项目中引入这些变量并针对性覆盖。 + +```ts +// 引入默认主题全局变量 +import '@idux/components/default.css' + +// 引入暗黑主题全局变量 +import '@idux/components/dark.css' + +// 引入默认主题全量变量 +import '@idux/components/default.full.css' + +// 引入暗黑主题全量变量 +import '@idux/components/dark.full.css' + +// 引入默认主题组件变量 +import '@idux/components/button/theme/default.css' + +// 引入暗黑主题组件变量 +import '@idux/components/button/theme/default.css' +``` diff --git a/packages/site/vite.config.ts b/packages/site/vite.config.ts index 28a65acf4..260208c0b 100644 --- a/packages/site/vite.config.ts +++ b/packages/site/vite.config.ts @@ -25,6 +25,7 @@ const componentPath: Record = { CdkResizeObserver: '@idux/cdk/resize', IxLoadingBar: '@idux/components/loading-bar', IxLoadingBarProvider: '@idux/components/loading-bar', + IxThemeProvider: '@idux/components/theme', } export default defineConfig(({ command, mode }) => { diff --git a/scripts/gen/theme/update.ts b/scripts/gen/theme/update.ts index 745de91b2..55640b809 100644 --- a/scripts/gen/theme/update.ts +++ b/scripts/gen/theme/update.ts @@ -1,19 +1,21 @@ // @ts-nocheck +/* eslint-disable @typescript-eslint/no-explicit-any */ import type { PresetTheme, ThemeKeys } from '@idux/components/theme/src/types' import { resolve } from 'path' -import { camelCase } from 'lodash-es' +import { kebabCase } from 'lodash-es' import chalk from 'chalk' -import { existsSync, readdirSync, statSync, writeFile } from 'fs-extra' +import { writeFile } from 'fs-extra' import ora from 'ora' import { format } from 'prettier' +import { type TokenMeta, getTokenMeta, updateCompThemeDoc, updateGlobalThemeDoc } from './updateDoc' import { createDomEnv } from '../../vite' -async function generateThemeVariables(theme: PresetTheme) { +async function generateThemeVariables(theme: PresetTheme, tokenMeta: TokenMeta) { const { destroy: destroyDomEnv } = createDomEnv() const componentsDirPath = resolve(__dirname, '../../../packages/components') const proComponentDirPath = resolve(__dirname, '../../../packages/pro') @@ -25,23 +27,22 @@ async function generateThemeVariables(theme: PresetTheme) { const algorithms = getPresetAlgorithms(theme) - const globalTokens = getThemeTokens(theme) + const globalTokens = getThemeTokens(theme, undefined, undefined) + const compTokens: Record = {} const compVariables: { comp: string; scope: 'components' | 'pro'; content: string }[] = [] - async function updateComponentTokenVariables( - dirPath: string, - scope: 'components' | 'pro', - compName: string, - themeKey: ThemeKeys, - ) { + async function updateComponentTokenVariables(themeKey: ThemeKeys, compPath: string) { const spin = ora() - spin.start(`[Theme: ${theme}] generating component ${compName} variables...\n`) + spin.start(`[Theme: ${theme}] generating component ${themeKey} variables...\n`) + + const compName = kebabCase(themeKey) + const scope = /components/.test(compPath) ? 'components' : 'pro' /* @vite-ignore */ const { getThemeTokens, transforms } = await import( /* @vite-ignore */ - resolve(dirPath, `${compName}/theme/index.ts`) + resolve(compPath, `theme/index.ts`) ) const tokens = getThemeTokens(globalTokens, theme, algorithms) @@ -59,7 +60,8 @@ async function generateThemeVariables(theme: PresetTheme) { const formattedCssContent = await format(cssContent, { parser: 'css' }) compVariables.push({ comp: compName, scope, content: formattedCssContent }) - await writeFile(resolve(dirPath, `${compName}/theme/${theme}.css`), formattedCssContent) + compTokens[themeKey] = tokens + await writeFile(resolve(compPath, `theme/${theme}.css`), formattedCssContent) spin.succeed(chalk.greenBright(`[Theme: ${theme}] component ${compName} variables generated\n`)) } @@ -96,7 +98,18 @@ async function generateThemeVariables(theme: PresetTheme) { let cssContent = scope === 'components' ? globalVariablesContent : '' - for (const comp of compVariables.filter(comp => comp.scope === scope).sort()) { + for (const comp of compVariables + .sort((comp1, comp2) => { + if (comp1.comp < comp2.comp) { + return -1 + } + if (comp1.comp > comp2.comp) { + return 1 + } + return 0 + }) + .filter(comp => comp.scope === scope) + .sort()) { cssContent += `\n` + comp.content } @@ -108,26 +121,66 @@ async function generateThemeVariables(theme: PresetTheme) { spin.succeed(chalk.greenBright(`[Theme: ${theme}] ${scope} full variables generated\n`)) } - const getCompUpdates = (scope: 'components' | 'pro') => { - const dirPath = scope === 'components' ? componentsDirPath : proComponentDirPath - - return readdirSync(dirPath) - .filter( - comp => - comp !== '_private' && - statSync(resolve(dirPath, comp)).isDirectory() && - existsSync(resolve(dirPath, `${comp}/theme/index.ts`)), - ) - .map(comp => - updateComponentTokenVariables(dirPath, scope, comp, camelCase(scope === 'components' ? comp : 'pro-' + comp)), - ) + const getCompUpdates = () => { + // const dirPath = scope === 'components' ? componentsDirPath : proComponentDirPath + + // return readdirSync(dirPath) + // .filter( + // comp => + // comp !== '_private' && + // statSync(resolve(dirPath, comp)).isDirectory() && + // existsSync(resolve(dirPath, `${comp}/theme/index.ts`)), + // ) + // .map(comp => + // updateComponentTokenVariables(dirPath, scope, comp, camelCase(scope === 'components' ? comp : 'pro-' + comp)), + // ) + + return Object.entries(tokenMeta?.components ?? {}).map(([themeKey, { compPath }]) => + updateComponentTokenVariables(themeKey, compPath), + ) } - await Promise.all([updateGlobalTokenVariables(), ...getCompUpdates('components'), ...getCompUpdates('pro')]) + await Promise.all([updateGlobalTokenVariables(), ...getCompUpdates()]) await Promise.all([updateGlobalFullVariables('components'), updateGlobalFullVariables('pro')]) destroyDomEnv() + + return [globalTokens, compTokens] as const } -await Promise.all([generateThemeVariables('default'), generateThemeVariables('dark')]) +const tokenMeta = (await getTokenMeta())! + +const [[defaultGlobalTokens, defaultCompTokens], [darkGlobalTokens, darkCompTokens]] = await Promise.all([ + generateThemeVariables('default', tokenMeta), + generateThemeVariables('dark', tokenMeta), +]) + +await Promise.all([ + updateGlobalThemeDoc(tokenMeta, [ + { + theme: 'default', + tokens: defaultGlobalTokens, + }, + { + theme: 'dark', + tokens: darkGlobalTokens, + }, + ]), + Object.keys(tokenMeta?.components ?? {}).map(themeKey => { + return updateCompThemeDoc( + tokenMeta, + [ + { + theme: 'default', + tokens: defaultCompTokens[themeKey], + }, + { + theme: 'dark', + tokens: darkCompTokens[themeKey], + }, + ], + themeKey, + ) + }), +]) diff --git a/scripts/gen/theme/updateDoc.ts b/scripts/gen/theme/updateDoc.ts new file mode 100644 index 000000000..cb9779268 --- /dev/null +++ b/scripts/gen/theme/updateDoc.ts @@ -0,0 +1,158 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable import/no-unresolved */ + +import type { PresetTheme } from '@idux/components/theme/src/types' +import type { DeclarationReflection } from 'typedoc' + +import { resolve } from 'path' + +import { lowerFirst } from 'lodash-es' + +import { readFile, writeFile } from 'fs-extra' +import { Application, TSConfigReader, TypeDocReader } from 'typedoc' + +export interface Token { + name: string + type: string | undefined + desc: string +} + +export interface TokenMeta { + basic: Token[] + derived: Token[] + extended: Token[] + components: Record +} + +export interface ThemeOption { + theme: PresetTheme + tokens: Record +} + +function getTokenList(list: DeclarationReflection[]): Token[] { + return (list || []) + .filter( + item => + !item.comment?.blockTags.some( + tag => tag.tag === '@internal' || tag.tag === '@private' || tag.tag === '@deprecated', + ), + ) + .map(item => ({ + name: item.name, + type: item?.type?.toString(), + desc: + item.comment?.blockTags + ?.find(tag => tag.tag === '@desc') + ?.content.reduce((result, str) => result.concat(str.text), '') || '', + })) +} + +export async function getTokenMeta(): Promise { + const app = await Application.bootstrap( + { + // typedoc options here + entryPoints: [ + resolve(__dirname, '../../../packages/components/theme/src/types/themeTokens/index.ts'), + resolve(__dirname, '../../../packages/components/*/theme/tokens.ts'), + resolve(__dirname, '../../../packages/pro/*/theme/tokens.ts'), + ], + skipErrorChecking: true, + }, + [new TSConfigReader(), new TypeDocReader()], + ) + + const project = await app.convert() + + if (project) { + const tokenMeta: TokenMeta = { + basic: [], + derived: [], + extended: [], + components: {}, + } + + // const globalThemes = themes.map(({ theme, globalTokens }) => ({ theme, tokens: globalTokens })) + + project?.children?.forEach((file: any) => { + // Global Token + if (file.name === 'components/theme/src/types/themeTokens') { + file.children?.forEach((type: any) => { + if (type.name === 'BasicTokens') { + tokenMeta.basic = getTokenList(type.children) + } else if (type.name === 'DerivedTokens') { + tokenMeta.derived = getTokenList(type.children) + } else if (type.name === 'ExtendedTokens') { + tokenMeta.extended = getTokenList(type.children) + } + }) + } else { + const componentToken = file.children?.find((item: any) => item?.name.endsWith('ThemeTokens')) + const component = lowerFirst(componentToken.name.replace('ThemeTokens', '')) + const records = tokenMeta.components + + if (componentToken) { + records[component] = { + compPath: resolve(file.escapedName.replace('"', ''), '../../'), + tokens: getTokenList(componentToken.children), + } + } + } + }) + + return tokenMeta + } + + return +} + +function formatDoc(themes: ThemeOption[], tokens: Token[]) { + const title = `| 名称 | 描述 | 类型 |${themes.map(({ theme }) => ' ' + theme + ' |').join('')}` + + const separator = `|---|---|---|${themes.map(() => '---' + '|').join('')}` + + const contents = tokens + .map( + token => + `| ${'`' + token.name + '`'} | ${token.desc} | ${'`' + token.type + '`'} |${themes + .map(({ tokens }) => ' ' + '`' + tokens[token.name] + '`' + ' |') + .join('')}`, + ) + .join('\n') + + return title + '\n' + separator + '\n' + contents + '\n' +} + +export async function updateGlobalThemeDoc(tokenMeta: TokenMeta, themes: ThemeOption[]): Promise { + const globalThemeDocPath = resolve(__dirname, '../../../packages/site/src/docs/CustomizeTheme.zh.md') + const content = await readFile(globalThemeDocPath, 'utf8') + + await writeFile( + globalThemeDocPath, + content + .replace( + /([\s\S]*?)/, + '\n' + + formatDoc(themes, tokenMeta.basic) + + '\n', + ) + .replace( + /([\s\S]*?)/, + '\n' + + formatDoc(themes, tokenMeta.derived) + + '\n', + ) + .replace( + /([\s\S]*?)/, + '\n' + + formatDoc(themes, tokenMeta.extended) + + '\n', + ), + ) +} + +export async function updateCompThemeDoc(tokenMeta: TokenMeta, themes: ThemeOption[], themeKey: string): Promise { + const { compPath, tokens } = tokenMeta.components[themeKey] + const docPath = resolve(compPath, `docs/Theme.zh.md`) + + await writeFile(docPath, formatDoc(themes, tokens)) +} diff --git a/scripts/gulp/site/utils.ts b/scripts/gulp/site/utils.ts index d934e7d49..5cc811531 100644 --- a/scripts/gulp/site/utils.ts +++ b/scripts/gulp/site/utils.ts @@ -5,7 +5,7 @@ import { readFileSync, readdirSync, statSync, writeFileSync } from 'fs-extra' // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore // eslint-disable-next-line import/no-unresolved -import { kebabCase, lowerFirst } from 'lodash' +import { isString, kebabCase, lowerFirst } from 'lodash' import { loadFront } from 'yaml-front-matter' import { gulpConfig } from '../gulpConfig' @@ -38,13 +38,13 @@ export function initSite(): void { const filterComponentName = [ '_private', 'config', - 'theme', 'locales', 'node_modules', 'style', `typography`, 'utils', 'version', + ['pro', 'theme'], ] readdirSync(packageRoot).forEach(packageName => { if (filterPackageName.includes(packageName)) { @@ -57,7 +57,11 @@ export function initSite(): void { } docsMeta[packageName] = {} readdirSync(packageDirname).forEach(componentName => { - if (filterComponentName.includes(componentName)) { + if ( + filterComponentName.some(filter => + isString(filter) ? componentName === filter : filter[0] === packageName && filter[1] === componentName, + ) + ) { return }