diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets index c0ab64b136591578be4d8fe323754d4ce1bdfef9..9f671d7289a74daba5992848348bb53fa751a78f 100644 --- a/.vscode/opendesign.token.code-snippets +++ b/.vscode/opendesign.token.code-snippets @@ -1103,20 +1103,20 @@ "description": "用于组件之间的间距8[light: 64px, dark: 64px]", "scope": "css,scss,less" }, - "--o-size-l": { + "--o-size-xxs": { "prefix": [ - "var(--o-size-l)" + "var(--o-size-xxs)" ], - "body": "var(--o-size-l)", - "description": "尺寸[light: 40px, dark: 40px]", + "body": "var(--o-size-xxs)", + "description": "小尺寸[light: 12px, dark: 12px]", "scope": "css,scss,less" }, - "--o-size-m": { + "--o-size-xs": { "prefix": [ - "var(--o-size-m)" + "var(--o-size-xs)" ], - "body": "var(--o-size-m)", - "description": "尺寸[light: 32px, dark: 32px]", + "body": "var(--o-size-xs)", + "description": "小尺寸[light: 18px, dark: 18px]", "scope": "css,scss,less" }, "--o-size-s": { @@ -1127,20 +1127,44 @@ "description": "小尺寸[light: 24px, dark: 24px]", "scope": "css,scss,less" }, - "--o-icon_size-l": { + "--o-size-m": { "prefix": [ - "var(--o-icon_size-l)" + "var(--o-size-m)" ], - "body": "var(--o-icon_size-l)", + "body": "var(--o-size-m)", + "description": "尺寸[light: 32px, dark: 32px]", + "scope": "css,scss,less" + }, + "--o-size-l": { + "prefix": [ + "var(--o-size-l)" + ], + "body": "var(--o-size-l)", + "description": "尺寸[light: 40px, dark: 40px]", + "scope": "css,scss,less" + }, + "--o-size-xl": { + "prefix": [ + "var(--o-size-xl)" + ], + "body": "var(--o-size-xl)", "description": "尺寸[light: 48px, dark: 48px]", "scope": "css,scss,less" }, - "--o-icon_size-m": { + "--o-icon_size-xxs": { "prefix": [ - "var(--o-icon_size-m)" + "var(--o-icon_size-xxs)" ], - "body": "var(--o-icon_size-m)", - "description": "尺寸[light: 32px, dark: 32px]", + "body": "var(--o-icon_size-xxs)", + "description": "小尺寸[light: 12px, dark: 12px]", + "scope": "css,scss,less" + }, + "--o-icon_size-xs": { + "prefix": [ + "var(--o-icon_size-xs)" + ], + "body": "var(--o-icon_size-xs)", + "description": "小尺寸[light: 16px, dark: 16px]", "scope": "css,scss,less" }, "--o-icon_size-s": { @@ -1151,12 +1175,20 @@ "description": "小尺寸[light: 24px, dark: 24px]", "scope": "css,scss,less" }, - "--o-icon_size-xs": { + "--o-icon_size-m": { "prefix": [ - "var(--o-icon_size-xs)" + "var(--o-icon_size-m)" ], - "body": "var(--o-icon_size-xs)", - "description": "小尺寸[light: 16px, dark: 16px]", + "body": "var(--o-icon_size-m)", + "description": "尺寸[light: 32px, dark: 32px]", + "scope": "css,scss,less" + }, + "--o-icon_size-l": { + "prefix": [ + "var(--o-icon_size-l)" + ], + "body": "var(--o-icon_size-l)", + "description": "尺寸[light: 48px, dark: 48px]", "scope": "css,scss,less" }, "--o-font_size-display1": { @@ -1215,20 +1247,20 @@ "description": "三级标题[light: 18px, dark: 18px]", "scope": "css,scss,less" }, - "--o-font_size-h4": { + "--o-font_size-text1": { "prefix": [ - "var(--o-font_size-h4)" + "var(--o-font_size-text1)" ], - "body": "var(--o-font_size-h4)", - "description": "四级标题[light: 16px, dark: 16px]", + "body": "var(--o-font_size-text1)", + "description": "常规正文[light: 14px, dark: 14px]", "scope": "css,scss,less" }, - "--o-font_size-text": { + "--o-font_size-text2": { "prefix": [ - "var(--o-font_size-text)" + "var(--o-font_size-text2)" ], - "body": "var(--o-font_size-text)", - "description": "正文[light: 14px, dark: 14px]", + "body": "var(--o-font_size-text2)", + "description": "大号正文[light: 16px, dark: 16px]", "scope": "css,scss,less" }, "--o-font_size-tip1": { @@ -1303,20 +1335,20 @@ "description": "三级标题[light: 26px, dark: 26px]", "scope": "css,scss,less" }, - "--o-line_height-h4": { + "--o-line_height-text1": { "prefix": [ - "var(--o-line_height-h4)" + "var(--o-line_height-text1)" ], - "body": "var(--o-line_height-h4)", - "description": "四级标题[light: 24px, dark: 24px]", + "body": "var(--o-line_height-text1)", + "description": "常规正文[light: 22px, dark: 22px]", "scope": "css,scss,less" }, - "--o-line_height-text": { + "--o-line_height-text2": { "prefix": [ - "var(--o-line_height-text)" + "var(--o-line_height-text2)" ], - "body": "var(--o-line_height-text)", - "description": "正文[light: 22px, dark: 22px]", + "body": "var(--o-line_height-text2)", + "description": "大号正文[light: 24px, dark: 24px]", "scope": "css,scss,less" }, "--o-line_height-tip1": { @@ -1335,12 +1367,12 @@ "description": "提示文本2[light: 14px, dark: 14px]", "scope": "css,scss,less" }, - "--o-radius-l": { + "--o-radius-s": { "prefix": [ - "var(--o-radius-l)" + "var(--o-radius-s)" ], - "body": "var(--o-radius-l)", - "description": "大尺寸圆角[light: 8px, dark: 8px]", + "body": "var(--o-radius-s)", + "description": "小尺寸圆角[light: 2px, dark: 2px]", "scope": "css,scss,less" }, "--o-radius-m": { @@ -1351,20 +1383,20 @@ "description": "中尺寸圆角[light: 4px, dark: 4px]", "scope": "css,scss,less" }, - "--o-radius-s": { + "--o-radius-l": { "prefix": [ - "var(--o-radius-s)" + "var(--o-radius-l)" ], - "body": "var(--o-radius-s)", - "description": "小尺寸圆角[light: 2px, dark: 2px]", + "body": "var(--o-radius-l)", + "description": "大尺寸圆角[light: 8px, dark: 8px]", "scope": "css,scss,less" }, - "--o-radius-control-l": { + "--o-radius-control-s": { "prefix": [ - "var(--o-radius-control-l)" + "var(--o-radius-control-s)" ], - "body": "var(--o-radius-control-l)", - "description": "大尺寸控件圆角[light: var(--o-radius-l), dark: var(--o-radius-l)]", + "body": "var(--o-radius-control-s)", + "description": "小尺寸控件圆角[light: var(--o-radius-s), dark: var(--o-radius-s)]", "scope": "css,scss,less" }, "--o-radius-control-m": { @@ -1375,12 +1407,12 @@ "description": "中尺寸控件圆角[light: var(--o-radius-m), dark: var(--o-radius-m)]", "scope": "css,scss,less" }, - "--o-radius-control-s": { + "--o-radius-control-l": { "prefix": [ - "var(--o-radius-control-s)" + "var(--o-radius-control-l)" ], - "body": "var(--o-radius-control-s)", - "description": "小尺寸控件圆角[light: var(--o-radius-s), dark: var(--o-radius-s)]", + "body": "var(--o-radius-control-l)", + "description": "大尺寸控件圆角[light: var(--o-radius-l), dark: var(--o-radius-l)]", "scope": "css,scss,less" }, "--o-duration-s": { diff --git a/packages/docs/button.md b/packages/docs/button.md index cbf9e7f09029d78d0f9d6d89c46df32156a0a23e..ac5149bb9df4a650fe2aa831ce8459e0652b3e0c 100644 --- a/packages/docs/button.md +++ b/packages/docs/button.md @@ -2,12 +2,12 @@ ## props -| name | type | 默认值 | 说明 | -| :------ | :-------------------------------------- | :-------- | :------------- | -| shape | 'large' \| 'normal' \| 'small' | 'normal' | 可选，形状 | -| size | 'normal' \| 'round' | 'normal' | 可选，尺寸 | -| type | 'primary' \|'outline'\| 'text' \|'link' | 'outline' | 可选，状态 | -| loading | boolean | false | 可选，加载状态 | +| name | type | 默认值 | 说明 | +| :------ | :--------------------------------------- | :-------- | :------------- | +| shape | 'large' \| 'normal' \| 'small' | 'normal' | 可选，形状 | +| size | 'mini' \| 'small' \| 'medium' \| 'large' | 'medium' | 可选，尺寸 | +| type | 'primary' \|'outline'\| 'text' \|'link' | 'outline' | 可选，状态 | +| loading | boolean | false | 可选，加载状态 | ## event diff --git a/packages/opendesign/src/components/_shared/export.ts b/packages/opendesign/src/components/_shared/export.ts index 28edaec14866d99c093e3b0a35820f2aa1d917a8..71cb527f7b6c522982d80caf388413e88c9b182a 100644 --- a/packages/opendesign/src/components/_shared/export.ts +++ b/packages/opendesign/src/components/_shared/export.ts @@ -1,3 +1,3 @@ -export { initSize, initShape } from './global'; +export { initSize, initShape, initRound } from './global'; export * from './init-icons'; \ No newline at end of file diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts index d6f0fe373374f00763a3ec427c18e3fc99124c9a..c1c457c60e78ff12c76b4b2ebdd29edc5a25ac63 100644 --- a/packages/opendesign/src/components/_shared/global.ts +++ b/packages/opendesign/src/components/_shared/global.ts @@ -8,10 +8,10 @@ export function initSize(val: SizeT) { } // 圆角 -export type RoundT = 'pill' | string; -export const defaultRound = ref<'pill' | 'default'>('default'); +export type RoundT = 'pill' | 'normal' | string; +export const defaultRound = ref<'pill' | 'normal'>('normal'); -export function initRound(type: 'pill' | 'default') { +export function initRound(type: 'pill' | 'normal') { defaultRound.value = type; } // TODO 全局变量增加 o-radius-control-s o-radius-control-m o-radius-control-l diff --git a/packages/opendesign/src/components/breadcrumb/style/var.scss b/packages/opendesign/src/components/breadcrumb/style/var.scss index f235992a49145106aab7f9701e641c6ee021de32..9da8ad6f3ef82be00b0180c2892dfb3445fc83fa 100644 --- a/packages/opendesign/src/components/breadcrumb/style/var.scss +++ b/packages/opendesign/src/components/breadcrumb/style/var.scss @@ -2,8 +2,8 @@ --breadcrumb-color: var(--o-color-info3); --breadcrumb-color-active: var(--o-color-info1); - --breadcrumb-text-size: var(--o-font_size-text); - --breadcrumb-text-height: var(--o-line_height-text); + --breadcrumb-text-size: var(--o-font_size-text1); + --breadcrumb-text-height: var(--o-line_height-text1); --breadcrumb-gap: var(--o-gap-1); } diff --git a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue index e2c34eb27ec12cdd46e5504f092b66801a0c98ff..a53a46121026999177b2127f9d67e65a588338a9 100644 --- a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue +++ b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue @@ -1,5 +1,6 @@ diff --git a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue deleted file mode 100644 index 583110f5128471af96c901ee435ba1d87702724a..0000000000000000000000000000000000000000 --- a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - diff --git a/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue b/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue new file mode 100644 index 0000000000000000000000000000000000000000..2e769dab5aaff23bf6b7e57b3370cb328d96eaa9 --- /dev/null +++ b/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue @@ -0,0 +1,76 @@ + + + diff --git a/packages/opendesign/src/components/button/__demo__/BtnRound.vue b/packages/opendesign/src/components/button/__demo__/BtnRound.vue index 5b6fd47cef8433bd3bbd9b6a0664f31688e99049..2af78a5f4dbc458393132294a464db59fe125a08 100644 --- a/packages/opendesign/src/components/button/__demo__/BtnRound.vue +++ b/packages/opendesign/src/components/button/__demo__/BtnRound.vue @@ -43,7 +43,7 @@ const onClick = () => {

round="{{ r }}px"

- Round Button + Click To Change Round Round Button diff --git a/packages/opendesign/src/components/button/__demo__/IndexBtn.vue b/packages/opendesign/src/components/button/__demo__/IndexBtn.vue index f2bccf9e1e1c82335120bb7c3fadf01b462a9312..47f889de512cfa61f298fafc2c14c04ab6c4f980 100644 --- a/packages/opendesign/src/components/button/__demo__/IndexBtn.vue +++ b/packages/opendesign/src/components/button/__demo__/IndexBtn.vue @@ -2,15 +2,15 @@ import '../style'; import BtnBasic from './BtnBasic.vue'; -import BtnIcon from './BtnIcon.vue'; +import BtnIconSize from './BtnIconSize.vue'; import BtnRound from './BtnRound.vue'; import BtnLoading from './BtnLoading.vue'; diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss index d31d993a18418c5e1c25168e2a60e4bec1dbe9c2..478de982f8f2f9778223f02e3c04f52439cd9d75 100644 --- a/packages/opendesign/src/components/button/style/index.scss +++ b/packages/opendesign/src/components/button/style/index.scss @@ -82,6 +82,19 @@ background-color: var(--btn-bg-color-disabled); } +.o-btn-mini { + padding: 0 4px; + height: var(--o-size-xs); + font-size: var(--o-font_size-tip2); + line-height: var(--o-line_height-tip2); + + &.o-btn-icon-only { + width: var(--o-size-xs); + } + .o-btn-icon { + margin-right: 2px; + } +} .o-btn-small { padding: 0 7px; height: var(--o-size-s); @@ -99,8 +112,8 @@ .o-btn-medium { padding: 0 15px; height: var(--o-size-m); - font-size: var(--o-font_size-text); - line-height: var(--o-line_height-text); + font-size: var(--o-font_size-text1); + line-height: var(--o-line_height-text1); &.o-btn-icon-only { width: var(--o-size-m); @@ -110,8 +123,8 @@ .o-btn-large { padding: 0 19px; height: var(--o-size-l); - font-size: var(--o-font_size-h4); - line-height: var(--o-line_height-h4); + font-size: var(--o-font_size-text2); + line-height: var(--o-line_height-text2); &.o-btn-icon-only { width: var(--o-size-l); diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss index 92a6bd7675d0314c302945842573101d2f7b0299..6e442ede811068a3c050bda094a679532a2b5f0f 100644 --- a/packages/opendesign/src/components/button/style/var.scss +++ b/packages/opendesign/src/components/button/style/var.scss @@ -160,9 +160,6 @@ } } -.o-btn-round-pill { - --btn-radius: var(--o-size-l); -} .o-btn-small { --btn-radius: var(--o-radius-control-s); } @@ -172,3 +169,7 @@ .o-btn-large { --btn-radius: var(--o-radius-control-l); } + +.o-btn-round-pill { + --btn-radius: var(--o-size-l); +} diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts index 71b02fa760ab0388f9a3e113edd405ec3bf2bcd3..9aec18fee4767b48c87a987ff409fd3915a53a92 100644 --- a/packages/opendesign/src/components/button/types.ts +++ b/packages/opendesign/src/components/button/types.ts @@ -1,5 +1,5 @@ import { ExtractPropTypes, PropType } from 'vue'; -import { SizeT, RoundT, ColorT, VariantT } from '../_shared/global'; +import { RoundT, ColorT, VariantT } from '../_shared/global'; export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link' @@ -22,7 +22,7 @@ export const buttonProps = { * 按钮尺寸：SizeT */ size: { - type: String as PropType + type: String as PropType<'mini' | 'small' | 'medium' | 'large'> }, /** * 圆角值 diff --git a/packages/opendesign/src/components/checkbox/style/var.scss b/packages/opendesign/src/components/checkbox/style/var.scss index a0c07b50578102c7a08234993fb24049c9b79e1c..2d1f8a4cc11947c722b62b2e907fcf9e07632c6e 100644 --- a/packages/opendesign/src/components/checkbox/style/var.scss +++ b/packages/opendesign/src/components/checkbox/style/var.scss @@ -2,8 +2,8 @@ --checkbox-color: var(--o-color-info1); --checkbox-color-disabled: var(--o-color-info4); - --checkbox-text-size: var(--o-font_size-text); - --checkbox-text-height: var(--o-line_height-text); + --checkbox-text-size: var(--o-font_size-text1); + --checkbox-text-height: var(--o-line_height-text1); --checkbox-input-color: var(--o-color-fill1); diff --git a/packages/opendesign/src/components/divider/style/var.scss b/packages/opendesign/src/components/divider/style/var.scss index af9e6c3cfa9a687090280ed2345b1bb6b399fa5e..a5c57156c2089ca6ff72c2829744b0694143aaf9 100644 --- a/packages/opendesign/src/components/divider/style/var.scss +++ b/packages/opendesign/src/components/divider/style/var.scss @@ -3,8 +3,8 @@ --o-divider-bd-color: var(--o-color-control1); - --o-divider-text-size: var(--o-font_size-text); - --o-divider-text-height: var(--o-line_height-text); + --o-divider-text-size: var(--o-font_size-text1); + --o-divider-text-height: var(--o-line_height-text1); } .o-divider-horizontal { diff --git a/packages/opendesign/src/components/dropdown/style/var.scss b/packages/opendesign/src/components/dropdown/style/var.scss index fb57ac28401bedf92f393b14f4863c89184ddd3a..4a5272d3330b4448bff1cd29765a049cbb9fb908 100644 --- a/packages/opendesign/src/components/dropdown/style/var.scss +++ b/packages/opendesign/src/components/dropdown/style/var.scss @@ -16,10 +16,10 @@ --dropdown-item-bg-color-active: var(--o-color-primary2-light); --dropdown-item-bg-color-disabled: var(--o-color-control4-light); - --dropdown-item-text-size: var(--o-font_size-text); - --dropdown-item-text-height: var(--o-line_height-text); + --dropdown-item-text-size: var(--o-font_size-text1); + --dropdown-item-text-height: var(--o-line_height-text1); --dropdown-item-padding: 5px 12px; - --dropdown-item-text-size: var(--o-font_size-text); - --dropdown-item-text-height: var(--o-line_height-text); + --dropdown-item-text-size: var(--o-font_size-text1); + --dropdown-item-text-height: var(--o-line_height-text1); } diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss index dfaa0ad717f9d3ad2c0e1a202b78d50f8ef9cbf3..6f1cedf984ee03c40af82c487d212458ba0b5041 100644 --- a/packages/opendesign/src/components/input-number/style/index.scss +++ b/packages/opendesign/src/components/input-number/style/index.scss @@ -3,7 +3,7 @@ .o-input-number { .o-input-prepend, .o-input-append { - font-size: var(--o-font_size-text); + font-size: var(--o-font_size-text1); padding: 0; align-items: stretch; overflow: hidden; diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss index fdf7d299792c85fcf2a93f95e1a1f0372fd85a1e..2c36b6da8306133801757e6d13de0f23798a1e66 100644 --- a/packages/opendesign/src/components/input/style/var.scss +++ b/packages/opendesign/src/components/input/style/var.scss @@ -108,8 +108,8 @@ .o-input-size-medium { --input-height: var(--o-size-m); - --input-text-size: var(--o-font_size-text); - --input-text-height: var(--o-line_height-text); + --input-text-size: var(--o-font_size-text1); + --input-text-height: var(--o-line_height-text1); --input-padding: 0 12px; --input-append-padding: 0 8px; @@ -124,8 +124,8 @@ .o-input-size-large { --input-height: var(--o-size-l); - --input-text-size: var(--o-font_size-h4); - --input-text-height: var(--o-font_size-h4); + --input-text-size: var(--o-font_size-text2); + --input-text-height: var(--o-font_size-text2); --input-padding: 0 16px; --input-append-padding: 0 12px; diff --git a/packages/opendesign/src/components/menu/style/var.scss b/packages/opendesign/src/components/menu/style/var.scss index 9719d272ceeaa936b73df592bdf30c246e4595bc..b6c2b59e999306784dae8611ba872114d9734377 100644 --- a/packages/opendesign/src/components/menu/style/var.scss +++ b/packages/opendesign/src/components/menu/style/var.scss @@ -6,15 +6,15 @@ .o-sub-menu { --sub-menu-bg-hover: var(--o-color-control2-light); - --sub-menu-text-size: var(--o-font_size-h4); - --sub-menu-text-height: var(--o-line_height-h4); + --sub-menu-text-size: var(--o-font_size-text2); + --sub-menu-text-height: var(--o-line_height-text2); --sub-menu-icon-height: var(--o-font_size-h1); --sub-menu-radius: var(--o-radius-control-s); } .o-menu-item { - --menu-item-text-size: var(--o-font_size-text); - --menu-item-text-height: var(--o-line_height-text); + --menu-item-text-size: var(--o-font_size-text1); + --menu-item-text-height: var(--o-line_height-text1); --menu-item-bg-active: var(--o-color-control2); --menu-item-bg-hover: var(--o-color-control2-light); --menu-item-color-disabled: var(--o-color-info4); diff --git a/packages/opendesign/src/components/option/style/var.scss b/packages/opendesign/src/components/option/style/var.scss index 6def4083642800c98f4946938cb40c1af857a3ae..46cb4216c05aa04ab35efbb95a8c8f8660dc42fa 100644 --- a/packages/opendesign/src/components/option/style/var.scss +++ b/packages/opendesign/src/components/option/style/var.scss @@ -9,10 +9,10 @@ --option-bg-color-active: var(--o-color-primary2-light); --option-bg-color-disabled: var(--o-color-control4-light); - --option-text-size: var(--o-font_size-text); - --option-text-height: var(--o-line_height-text); + --option-text-size: var(--o-font_size-text1); + --option-text-height: var(--o-line_height-text1); --option-padding: 5px 12px; - --option-text-size: var(--o-font_size-text); - --option-text-height: var(--o-line_height-text); + --option-text-size: var(--o-font_size-text1); + --option-text-height: var(--o-line_height-text1); } diff --git a/packages/opendesign/src/components/radio/style/var.scss b/packages/opendesign/src/components/radio/style/var.scss index 0aa0920895b6308107a37d1ce282bb0a9159b7cb..c5725a5536adc43ee826b862636a2bbf99b268f8 100644 --- a/packages/opendesign/src/components/radio/style/var.scss +++ b/packages/opendesign/src/components/radio/style/var.scss @@ -1,6 +1,6 @@ .o-radio { - --radio-text-size: var(--o-font_size-text); - --radio-text-height: var(--o-line_height-text); + --radio-text-size: var(--o-font_size-text1); + --radio-text-height: var(--o-line_height-text1); --radio-input-size: 18px; --radio-input-inner-size: 12px; diff --git a/packages/opendesign/src/components/rate/style/var.scss b/packages/opendesign/src/components/rate/style/var.scss index cb369f906fa2c240a39875c800622b0829d78d20..a3019b1ee33f60c1896686615e257c8188ad9f7d 100644 --- a/packages/opendesign/src/components/rate/style/var.scss +++ b/packages/opendesign/src/components/rate/style/var.scss @@ -14,7 +14,7 @@ } .o-rate-size-small { - --rate-height: var(--o-font_size-h4); + --rate-height: var(--o-font_size-text2); } .o-rate-primary { diff --git a/packages/opendesign/src/components/select/style/var.scss b/packages/opendesign/src/components/select/style/var.scss index 3099018b954510b9124ef36c68d09bf18062c6e1..525e513edcc0b3e1fda1acf175937625673956ec 100644 --- a/packages/opendesign/src/components/select/style/var.scss +++ b/packages/opendesign/src/components/select/style/var.scss @@ -1,6 +1,6 @@ .o-select { - --select-text-size: var(--o-font_size-text); - --select-text-height: var(--o-line_height-text); + --select-text-size: var(--o-font_size-text1); + --select-text-height: var(--o-line_height-text1); --select-color: var(--o-color-info2); --select-color-disabled: var(--o-color-info4); @@ -94,15 +94,15 @@ } .o-select-size-medium { --select-height: var(--o-size-m); - --select-text-size: var(--o-font_size-text); - --select-text-height: var(--o-line_height-text); + --select-text-size: var(--o-font_size-text1); + --select-text-height: var(--o-line_height-text1); --select-padding: 4px 8px 4px 12px; --select-radius: var(--o-radius-control-m); } .o-select-size-large { --select-height: var(--o-size-l); - --select-text-size: var(--o-font_size-h4); - --select-text-height: var(--o-line_height-h4); + --select-text-size: var(--o-font_size-text2); + --select-text-height: var(--o-line_height-text2); --select-padding: 4px 12px 4px 16px; --select-radius: var(--o-radius-control-l); } @@ -119,7 +119,7 @@ .o-select-options-size-large & { --option-padding: 7px 16px; - --option-text-size: var(--o-font_size-h4); - --option-text-height: var(--o-line_height-h4); + --option-text-size: var(--o-font_size-text2); + --option-text-height: var(--o-line_height-text2); } } diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css index 64377f1d547e783d65c298dcf26565428ec51b18..4925155de9314e519ac050d354b44081290a19c3 100644 --- a/packages/opendesign/src/components/style/dark.token.css +++ b/packages/opendesign/src/components/style/dark.token.css @@ -967,19 +967,19 @@ */ --o-gap-8: 64px; /** - * @name 大尺寸 + * @name 小尺寸 * @type size * @group size - * @description 尺寸 + * @description 小尺寸 */ - --o-size-l: 40px; + --o-size-xxs: 12px; /** - * @name 中尺寸 + * @name 小尺寸 * @type size * @group size - * @description 尺寸 + * @description 小尺寸 */ - --o-size-m: 32px; + --o-size-xs: 18px; /** * @name 小尺寸 * @type size @@ -988,26 +988,33 @@ */ --o-size-s: 24px; /** - * @name 大尺寸图标 + * @name 中尺寸 * @type size - * @group icon_size + * @group size * @description 尺寸 */ - --o-icon_size-l: 48px; + --o-size-m: 32px; /** - * @name 中尺寸图标 + * @name 大尺寸 * @type size - * @group icon_size + * @group size * @description 尺寸 */ - --o-icon_size-m: 32px; + --o-size-l: 40px; /** - * @name 小尺寸图标 + * @name 大尺寸 + * @type size + * @group size + * @description 尺寸 + */ + --o-size-xl: 48px; + /** + * @name 超小尺寸图标 * @type size * @group icon_size * @description 小尺寸 */ - --o-icon_size-s: 24px; + --o-icon_size-xxs: 12px; /** * @name 超小尺寸图标 * @type size @@ -1015,6 +1022,27 @@ * @description 小尺寸 */ --o-icon_size-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸 + */ + --o-icon_size-s: 24px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 尺寸 + */ + --o-icon_size-m: 32px; + /** + * @name 大尺寸图标 + * @type size + * @group icon_size + * @description 尺寸 + */ + --o-icon_size-l: 48px; /** * @name 一级数据展示 * @type font @@ -1065,19 +1093,19 @@ */ --o-font_size-h3: 18px; /** - * @name 四级标题 + * @name 常规正文 * @type font * @group font_size - * @description 四级标题 + * @description 常规正文 */ - --o-font_size-h4: 16px; + --o-font_size-text1: 14px; /** - * @name 正文 + * @name 大号正文 * @type font * @group font_size - * @description 正文 + * @description 大号正文 */ - --o-font_size-text: 14px; + --o-font_size-text2: 16px; /** * @name 提示文本1 * @type font @@ -1142,19 +1170,19 @@ */ --o-line_height-h3: 26px; /** - * @name 四级标题 + * @name 常规正文 * @type font * @group line_height - * @description 四级标题 + * @description 常规正文 */ - --o-line_height-h4: 24px; + --o-line_height-text1: 22px; /** - * @name 正文 + * @name 大号正文 * @type font * @group line_height - * @description 正文 + * @description 大号正文 */ - --o-line_height-text: 22px; + --o-line_height-text2: 24px; /** * @name 提示文本1 * @type font @@ -1170,12 +1198,12 @@ */ --o-line_height-tip2: 14px; /** - * @name 大尺寸圆角 + * @name 小尺寸圆角 * @type size * @group radius - * @description 大尺寸圆角 + * @description 小尺寸圆角 */ - --o-radius-l: 8px; + --o-radius-s: 2px; /** * @name 中尺寸圆角 * @type size @@ -1184,19 +1212,19 @@ */ --o-radius-m: 4px; /** - * @name 小尺寸圆角 + * @name 大尺寸圆角 * @type size * @group radius - * @description 小尺寸圆角 + * @description 大尺寸圆角 */ - --o-radius-s: 2px; + --o-radius-l: 8px; /** - * @name 大尺寸控件圆角 + * @name 小尺寸控件圆角 * @type size * @group radius - * @description 大尺寸控件圆角 + * @description 小尺寸控件圆角 */ - --o-radius-control-l: var(--o-radius-l); + --o-radius-control-s: var(--o-radius-s); /** * @name 中尺寸控件圆角 * @type size @@ -1205,12 +1233,12 @@ */ --o-radius-control-m: var(--o-radius-m); /** - * @name 小尺寸控件圆角 + * @name 大尺寸控件圆角 * @type size * @group radius - * @description 小尺寸控件圆角 + * @description 大尺寸控件圆角 */ - --o-radius-control-s: var(--o-radius-s); + --o-radius-control-l: var(--o-radius-l); /** * @name 持续时间 * @type animation diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css index ab0d97593180442b352483c88908f1e8711f99f7..f1462de13a1b34ca72f7c2c04d621631e4d7f1d8 100644 --- a/packages/opendesign/src/components/style/default-light.token.css +++ b/packages/opendesign/src/components/style/default-light.token.css @@ -968,19 +968,19 @@ */ --o-gap-8: 64px; /** - * @name 大尺寸 + * @name 小尺寸 * @type size * @group size - * @description 尺寸 + * @description 小尺寸 */ - --o-size-l: 40px; + --o-size-xxs: 12px; /** - * @name 中尺寸 + * @name 小尺寸 * @type size * @group size - * @description 尺寸 + * @description 小尺寸 */ - --o-size-m: 32px; + --o-size-xs: 18px; /** * @name 小尺寸 * @type size @@ -989,26 +989,33 @@ */ --o-size-s: 24px; /** - * @name 大尺寸图标 + * @name 中尺寸 * @type size - * @group icon_size + * @group size * @description 尺寸 */ - --o-icon_size-l: 48px; + --o-size-m: 32px; /** - * @name 中尺寸图标 + * @name 大尺寸 * @type size - * @group icon_size + * @group size * @description 尺寸 */ - --o-icon_size-m: 32px; + --o-size-l: 40px; /** - * @name 小尺寸图标 + * @name 大尺寸 + * @type size + * @group size + * @description 尺寸 + */ + --o-size-xl: 48px; + /** + * @name 超小尺寸图标 * @type size * @group icon_size * @description 小尺寸 */ - --o-icon_size-s: 24px; + --o-icon_size-xxs: 12px; /** * @name 超小尺寸图标 * @type size @@ -1016,6 +1023,27 @@ * @description 小尺寸 */ --o-icon_size-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸 + */ + --o-icon_size-s: 24px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 尺寸 + */ + --o-icon_size-m: 32px; + /** + * @name 大尺寸图标 + * @type size + * @group icon_size + * @description 尺寸 + */ + --o-icon_size-l: 48px; /** * @name 一级数据展示 * @type font @@ -1066,19 +1094,19 @@ */ --o-font_size-h3: 18px; /** - * @name 四级标题 + * @name 常规正文 * @type font * @group font_size - * @description 四级标题 + * @description 常规正文 */ - --o-font_size-h4: 16px; + --o-font_size-text1: 14px; /** - * @name 正文 + * @name 大号正文 * @type font * @group font_size - * @description 正文 + * @description 大号正文 */ - --o-font_size-text: 14px; + --o-font_size-text2: 16px; /** * @name 提示文本1 * @type font @@ -1143,19 +1171,19 @@ */ --o-line_height-h3: 26px; /** - * @name 四级标题 + * @name 常规正文 * @type font * @group line_height - * @description 四级标题 + * @description 常规正文 */ - --o-line_height-h4: 24px; + --o-line_height-text1: 22px; /** - * @name 正文 + * @name 大号正文 * @type font * @group line_height - * @description 正文 + * @description 大号正文 */ - --o-line_height-text: 22px; + --o-line_height-text2: 24px; /** * @name 提示文本1 * @type font @@ -1171,12 +1199,12 @@ */ --o-line_height-tip2: 14px; /** - * @name 大尺寸圆角 + * @name 小尺寸圆角 * @type size * @group radius - * @description 大尺寸圆角 + * @description 小尺寸圆角 */ - --o-radius-l: 8px; + --o-radius-s: 2px; /** * @name 中尺寸圆角 * @type size @@ -1185,19 +1213,19 @@ */ --o-radius-m: 4px; /** - * @name 小尺寸圆角 + * @name 大尺寸圆角 * @type size * @group radius - * @description 小尺寸圆角 + * @description 大尺寸圆角 */ - --o-radius-s: 2px; + --o-radius-l: 8px; /** - * @name 大尺寸控件圆角 + * @name 小尺寸控件圆角 * @type size * @group radius - * @description 大尺寸控件圆角 + * @description 小尺寸控件圆角 */ - --o-radius-control-l: var(--o-radius-l); + --o-radius-control-s: var(--o-radius-s); /** * @name 中尺寸控件圆角 * @type size @@ -1206,12 +1234,12 @@ */ --o-radius-control-m: var(--o-radius-m); /** - * @name 小尺寸控件圆角 + * @name 大尺寸控件圆角 * @type size * @group radius - * @description 小尺寸控件圆角 + * @description 大尺寸控件圆角 */ - --o-radius-control-s: var(--o-radius-s); + --o-radius-control-l: var(--o-radius-l); /** * @name 持续时间 * @type animation diff --git a/packages/opendesign/src/components/table/style/var.scss b/packages/opendesign/src/components/table/style/var.scss index 1c227e0a7e119e7527f386a8161d1c9e3cd45b5f..af5fd50944c4ab2933649dde6c20ebe3cc019ef1 100644 --- a/packages/opendesign/src/components/table/style/var.scss +++ b/packages/opendesign/src/components/table/style/var.scss @@ -1,6 +1,6 @@ .o-table { - --table-text-size: var(--o-font_size-text); - --table-text-height: var(--o-line_height-text); + --table-text-size: var(--o-font_size-text1); + --table-text-height: var(--o-line_height-text1); --table-color: var(--o-color-info2); --table-tip-text-size: var(--o-font_size-tip1); diff --git a/packages/opendesign/src/components/tabs/style/var.scss b/packages/opendesign/src/components/tabs/style/var.scss index 34669e6d8418880f643871b0db463a07f7b28385..1e2ccd8913153854f3bd391359c04dd5456f9dc7 100644 --- a/packages/opendesign/src/components/tabs/style/var.scss +++ b/packages/opendesign/src/components/tabs/style/var.scss @@ -1,6 +1,6 @@ .o-tabs { - --tabs-nav-text-size: var(--o-font_size-text); - --tabs-nav-text-height: var(--o-line_height-text); + --tabs-nav-text-size: var(--o-font_size-text1); + --tabs-nav-text-height: var(--o-line_height-text1); --tabs-nav-color: var(--o-color-info2); --tabs-nav-color-disabled: var(--o-color-info4); diff --git a/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue index 6e47fd73c876585f0a18fc6e72be48780a787adf..5083ec415a899d81e38f2ef76a93e65a88298e58 100644 --- a/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue +++ b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue @@ -15,6 +15,7 @@ const handleChange = (val: boolean) => {

可选中标签

Tag1 + Tag2 Tag2 Tag3 Tag4 diff --git a/packages/opendesign/src/components/textarea/style/var.scss b/packages/opendesign/src/components/textarea/style/var.scss index aff01d8d887d203f5f258826e228389650a15b34..607acd4b62d6bbb3c63dc7f1e58a78424eb5e1ab 100644 --- a/packages/opendesign/src/components/textarea/style/var.scss +++ b/packages/opendesign/src/components/textarea/style/var.scss @@ -86,16 +86,16 @@ --textarea-radius-pill: 12px; } .o-textarea-size-medium { - --textarea-text-size: var(--o-font_size-text); - --textarea-text-height: var(--o-line_height-text); + --textarea-text-size: var(--o-font_size-text1); + --textarea-text-height: var(--o-line_height-text1); --textarea-padding-v: 4px; --textarea-padding-h: 12px; --textarea-radius: var(--o-radius-control-m); --textarea-radius-pill: 16px; } .o-textarea-size-large { - --textarea-text-size: var(--o-font_size-h4); - --textarea-text-height: var(--o-line_height-h4); + --textarea-text-size: var(--o-font_size-text2); + --textarea-text-height: var(--o-line_height-text2); --textarea-padding-v: 6px; --textarea-padding-h: 12px; --textarea-radius: var(--o-radius-control-l); diff --git a/packages/opendesign/src/tokens/ascend-token.json b/packages/opendesign/src/tokens/ascend-token.json index 86fe86ee99723ec3d224a98d6b9d8976583531ab..526031d0fb3a4cd38383d37192667c170afe7eca 100644 --- a/packages/opendesign/src/tokens/ascend-token.json +++ b/packages/opendesign/src/tokens/ascend-token.json @@ -20,156 +20,79 @@ } ] }, - "blue": { - "name": "蓝色", + "deepblue": { + "name": "深蓝色", "type": "palette", "typeName": "色盘", "value": [ { - "key": "blue-1", + "key": "deepblue-1", "value": { "light": "232, 240, 255", - "dark": "0, 13, 77" + "dark": "232, 240, 255" } }, { - "key": "blue-2", + "key": "deepblue-2", "value": { "light": "194, 213, 254", - "dark": "4, 27, 121" + "dark": "194, 213, 254" } }, { - "key": "blue-3", + "key": "deepblue-3", "value": { "light": "157, 184, 253", - "dark": "14, 50, 166" + "dark": "157, 184, 253" } }, { - "key": "blue-4", + "key": "deepblue-4", "value": { "light": "120, 153, 252", - "dark": "29, 77, 210" + "dark": "120, 153, 252" } }, { - "key": "blue-5", + "key": "deepblue-5", "value": { "light": "83, 119, 251", - "dark": "48, 111, 255" + "dark": "83, 119, 251" } }, { - "key": "blue-6", + "key": "deepblue-6", "value": { "light": "46, 83, 250", - "dark": "60, 126, 255" + "dark": "46, 83, 250" } }, { - "key": "blue-7", + "key": "deepblue-7", "value": { "light": "29, 55, 207", - "dark": "104, 159, 255" + "dark": "29, 55, 207" } }, { - "key": "blue-8", + "key": "deepblue-8", "value": { "light": "15, 32, 163", - "dark": "147, 190, 255" + "dark": "15, 32, 163" } }, { - "key": "blue-9", + "key": "deepblue-9", "value": { "light": "6, 15, 120", - "dark": "190, 218, 255" + "dark": "6, 15, 120" } }, { - "key": "blue-10", + "key": "deepblue-10", "value": { "light": "0, 4, 47", - "dark": "234, 244, 255" - } - } - ] - }, - "yellow": { - "name": "黄色", - "type": "palette", - "typeName": "色盘", - "value": [ - { - "key": "yellow-1", - "value": { - "light": "255, 255, 232", - "dark": "77, 56, 0" - } - }, - { - "key": "yellow-2", - "value": { - "light": "253, 251, 185", - "dark": "120, 94, 7" - } - }, - { - "key": "yellow-3", - "value": { - "light": "251, 244, 139", - "dark": "163, 134, 20" - } - }, - { - "key": "yellow-4", - "value": { - "light": "249, 233, 94", - "dark": "207, 179, 37" - } - }, - { - "key": "yellow-5", - "value": { - "light": "247, 221, 49", - "dark": "250, 225, 60" - } - }, - { - "key": "yellow-6", - "value": { - "light": "245, 205, 5", - "dark": "251, 233, 75" - } - }, - { - "key": "yellow-7", - "value": { - "light": "203, 163, 3", - "dark": "252, 243, 116" - } - }, - { - "key": "yellow-8", - "value": { - "light": "161, 124, 2", - "dark": "253, 250, 157" - } - }, - { - "key": "yellow-9", - "value": { - "light": "119, 87, 1", - "dark": "254, 254, 198" - } - }, - { - "key": "yellow-10", - "value": { - "light": "77, 54, 0", - "dark": "254, 255, 240" + "dark": "0, 4, 47" } } ] @@ -183,70 +106,70 @@ "key": "green-1", "value": { "light": "232, 255, 238", - "dark": "0, 77, 28" + "dark": "232, 255, 238" } }, { "key": "green-2", "value": { "light": "177, 239, 195", - "dark": "4, 102, 37" + "dark": "177, 239, 195" } }, { "key": "green-3", "value": { "light": "128, 224, 158", - "dark": "10, 128, 45" + "dark": "128, 224, 158" } }, { "key": "green-4", "value": { "light": "84, 208, 127", - "dark": "18, 154, 55" + "dark": "84, 208, 127" } }, { "key": "green-5", "value": { "light": "45, 193, 101", - "dark": "29, 180, 64" + "dark": "45, 193, 101" } }, { "key": "green-6", "value": { "light": "11, 177, 81", - "dark": "39, 195, 70" + "dark": "11, 177, 81" } }, { "key": "green-7", "value": { "light": "7, 152, 72", - "dark": "80, 210, 102" + "dark": "7, 152, 72" } }, { "key": "green-8", "value": { "light": "4, 127, 63", - "dark": "126, 225, 139" + "dark": "4, 127, 63" } }, { "key": "green-9", "value": { "light": "2, 102, 53", - "dark": "178, 240, 183" + "dark": "2, 102, 53" } }, { "key": "green-10", "value": { "light": "0, 77, 42", - "dark": "235, 255, 236" + "dark": "0, 77, 42" } } ] @@ -260,70 +183,70 @@ "key": "orange-1", "value": { "light": "255, 246, 232", - "dark": "77, 27, 0" + "dark": "255, 246, 232" } }, { "key": "orange-2", "value": { "light": "254, 226, 186", - "dark": "121, 48, 4" + "dark": "254, 226, 186" } }, { "key": "orange-3", "value": { "light": "253, 202, 140", - "dark": "166, 75, 10" + "dark": "253, 202, 140" } }, { "key": "orange-4", "value": { "light": "252, 176, 95", - "dark": "210, 105, 19" + "dark": "252, 176, 95" } }, { "key": "orange-5", "value": { "light": "251, 147, 50", - "dark": "255, 141, 31" + "dark": "251, 147, 50" } }, { "key": "orange-6", "value": { "light": "250, 115, 5", - "dark": "255, 150, 38" + "dark": "250, 115, 5" } }, { "key": "orange-7", "value": { "light": "207, 88, 3", - "dark": "255, 179, 87" + "dark": "207, 88, 3" } }, { "key": "orange-8", "value": { "light": "163, 64, 2", - "dark": "255, 205, 135" + "dark": "163, 64, 2" } }, { "key": "orange-9", "value": { "light": "120, 42, 1", - "dark": "255, 227, 184" + "dark": "120, 42, 1" } }, { "key": "orange-10", "value": { "light": "77, 24, 0", - "dark": "255, 247, 232" + "dark": "77, 24, 0" } } ] @@ -337,70 +260,84 @@ "key": "red-1", "value": { "light": "255, 234, 232", - "dark": "77, 0, 10" + "dark": "255, 234, 232" } }, { "key": "red-2", "value": { "light": "250, 185, 182", - "dark": "119, 6, 17" + "dark": "250, 185, 182" } }, { "key": "red-3", "value": { "light": "245, 136, 134", - "dark": "161, 22, 31" + "dark": "245, 136, 134" } }, { "key": "red-4", "value": { "light": "240, 87, 90", - "dark": "203, 46, 52" + "dark": "240, 87, 90" } }, { "key": "red-5", "value": { "light": "235, 43, 52", - "dark": "245, 78, 78" + "dark": "235, 43, 52" } }, { "key": "red-6", "value": { "light": "230, 0, 18", - "dark": "247, 105, 101" + "dark": "230, 0, 18" } }, { "key": "red-7", "value": { "light": "192, 0, 45", - "dark": "249, 141, 134" + "dark": "192, 0, 45" } }, { "key": "red-8", "value": { "light": "153, 0, 23", - "dark": "251, 176, 167" + "dark": "153, 0, 23" } }, { "key": "red-9", "value": { "light": "115, 0, 21", - "dark": "253, 209, 202" + "dark": "115, 0, 21" } }, { "key": "red-10", "value": { "light": "77, 0, 17", - "dark": "255, 240, 236" + "dark": "77, 0, 17" + } + } + ] + }, + "huaweired": { + "name": "华为红", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-huawei", + "value": { + "light": "199, 0, 11", + "dark": "199, 0, 11" } } ] @@ -414,98 +351,98 @@ "key": "gray-1", "value": { "light": "255, 255, 255", - "dark": "0, 0, 0" + "dark": "255, 255, 255" } }, { "key": "gray-2", "value": { "light": "250, 250, 250", - "dark": "36, 36, 36" + "dark": "250, 250, 250" } }, { "key": "gray-3", "value": { "light": "247, 247, 247", - "dark": "57, 57, 57" + "dark": "247, 247, 247" } }, { "key": "gray-4", "value": { "light": "242, 242, 242", - "dark": "94, 94, 94" + "dark": "242, 242, 242" } }, { "key": "gray-5", "value": { "light": "235, 235, 235", - "dark": "119, 119, 122" + "dark": "235, 235, 235" } }, { "key": "gray-6", "value": { "light": "219, 219, 219", - "dark": "166, 166, 166" + "dark": "219, 219, 219" } }, { "key": "gray-7", "value": { "light": "189, 189, 189", - "dark": "221, 221, 221" + "dark": "189, 189, 189" } }, { "key": "gray-8", "value": { "light": "148, 148, 148", - "dark": "238, 238, 238" + "dark": "148, 148, 148" } }, { "key": "gray-9", "value": { "light": "110, 110, 110", - "dark": "243, 243, 243" + "dark": "110, 110, 110" } }, { "key": "gray-10", "value": { "light": "79, 79, 79", - "dark": "255, 255, 255" + "dark": "79, 79, 79" } }, { "key": "gray-11", "value": { "light": "48, 48, 48", - "dark": "255, 255, 255" + "dark": "48, 48, 48" } }, { "key": "gray-12", "value": { "light": "36, 36, 36", - "dark": "255, 255, 255" + "dark": "36, 36, 36" } }, { "key": "gray-13", "value": { "light": "18, 18, 18", - "dark": "255, 255, 255" + "dark": "18, 18, 18" } }, { "key": "gray-14", "value": { "light": "0, 0, 0", - "dark": "255, 255, 255" + "dark": "0, 0, 0" } } ] @@ -519,98 +456,637 @@ "key": "mixedgray-1", "value": { "light": "255, 255, 255", - "dark": "0, 0, 0" + "dark": "255, 255, 255" } }, { "key": "mixedgray-2", "value": { "light": "244, 245, 247", - "dark": "16, 18, 20" + "dark": "244, 245, 247" } }, { "key": "mixedgray-3", "value": { "light": "237, 239, 242", - "dark": "23, 25, 28" + "dark": "237, 239, 242" } }, { "key": "mixedgray-4", "value": { "light": "232, 234, 237", - "dark": "33, 35, 39" + "dark": "232, 234, 237" } }, { "key": "mixedgray-5", "value": { "light": "224, 226, 230", - "dark": "40, 42, 47" + "dark": "224, 226, 230" } }, { "key": "mixedgray-6", "value": { "light": "209, 214, 219", - "dark": "50, 53, 57" + "dark": "209, 214, 219" } }, { "key": "mixedgray-7", "value": { "light": "179, 185, 191", - "dark": "61, 63, 67" + "dark": "179, 185, 191" } }, { "key": "mixedgray-8", "value": { "light": "144, 150, 158", - "dark": "80, 84, 88" + "dark": "144, 150, 158" } }, { "key": "mixedgray-9", "value": { "light": "104, 109, 117", - "dark": "113, 117, 122" + "dark": "104, 109, 117" } }, { "key": "mixedgray-10", "value": { "light": "79, 84, 92", - "dark": "147, 152, 159" + "dark": "79, 84, 92" } }, { "key": "mixedgray-11", "value": { "light": "55, 59, 66", - "dark": "172, 177, 185" + "dark": "55, 59, 66" } }, { "key": "mixedgray-12", "value": { "light": "32, 35, 41", - "dark": "198, 202, 210" + "dark": "32, 35, 41" } }, { "key": "mixedgray-13", "value": { "light": "18, 20, 23", - "dark": "231, 234, 238" + "dark": "18, 20, 23" } }, { "key": "mixedgray-14", "value": { "light": "0, 0, 0", - "dark": "255, 255, 255" + "dark": "0, 0, 0" + } + } + ] + }, + "yellow": { + "name": "黄色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "yellow-1", + "value": { + "light": "255, 255, 232", + "dark": "255, 255, 232" + } + }, + { + "key": "yellow-2", + "value": { + "light": "253, 251, 185", + "dark": "253, 251, 185" + } + }, + { + "key": "yellow-3", + "value": { + "light": "251, 244, 139", + "dark": "251, 244, 139" + } + }, + { + "key": "yellow-4", + "value": { + "light": "249, 233, 94", + "dark": "249, 233, 94" + } + }, + { + "key": "yellow-5", + "value": { + "light": "247, 221, 49", + "dark": "247, 221, 49" + } + }, + { + "key": "yellow-6", + "value": { + "light": "245, 205, 5", + "dark": "245, 205, 5" + } + }, + { + "key": "yellow-7", + "value": { + "light": "203, 163, 3", + "dark": "203, 163, 3" + } + }, + { + "key": "yellow-8", + "value": { + "light": "161, 124, 2", + "dark": "161, 124, 2" + } + }, + { + "key": "yellow-9", + "value": { + "light": "119, 87, 1", + "dark": "119, 87, 1" + } + }, + { + "key": "yellow-10", + "value": { + "light": "77, 54, 0", + "dark": "77, 54, 0" + } + } + ] + }, + "lime": { + "name": "黄绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "lime-1", + "value": { + "light": "251, 255, 232", + "dark": "251, 255, 232" + } + }, + { + "key": "lime-2", + "value": { + "light": "233, 245, 184", + "dark": "233, 245, 184" + } + }, + { + "key": "lime-3", + "value": { + "light": "213, 236, 139", + "dark": "213, 236, 139" + } + }, + { + "key": "lime-4", + "value": { + "light": "192, 226, 97", + "dark": "192, 226, 97" + } + }, + { + "key": "lime-5", + "value": { + "light": "169, 217, 59", + "dark": "169, 217, 59" + } + }, + { + "key": "lime-6", + "value": { + "light": "146, 207, 23", + "dark": "146, 207, 23" + } + }, + { + "key": "lime-7", + "value": { + "light": "116, 174, 15", + "dark": "116, 174, 15" + } + }, + { + "key": "lime-8", + "value": { + "light": "88, 142, 8", + "dark": "88, 142, 8" + } + }, + { + "key": "lime-9", + "value": { + "light": "63, 109, 3", + "dark": "63, 109, 3" + } + }, + { + "key": "lime-10", + "value": { + "light": "41, 77, 0", + "dark": "41, 77, 0" + } + } + ] + }, + "cyan": { + "name": "青色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "cyan-1", + "value": { + "light": "232, 255, 249", + "dark": "232, 255, 249" + } + }, + { + "key": "cyan-2", + "value": { + "light": "176, 240, 226", + "dark": "176, 240, 226" + } + }, + { + "key": "cyan-3", + "value": { + "light": "125, 225, 207", + "dark": "125, 225, 207" + } + }, + { + "key": "cyan-4", + "value": { + "light": "79, 221, 191", + "dark": "79, 221, 191" + } + }, + { + "key": "cyan-5", + "value": { + "light": "38, 196, 177", + "dark": "38, 196, 177" + } + }, + { + "key": "cyan-6", + "value": { + "light": "3, 181, 165", + "dark": "3, 181, 165" + } + }, + { + "key": "cyan-7", + "value": { + "light": "2, 155, 147", + "dark": "2, 155, 147" + } + }, + { + "key": "cyan-8", + "value": { + "light": "1, 129, 127", + "dark": "1, 129, 127" + } + }, + { + "key": "cyan-9", + "value": { + "light": "0, 101, 103", + "dark": "0, 101, 103" + } + }, + { + "key": "cyan-10", + "value": { + "light": "0, 73, 77", + "dark": "0, 73, 77" + } + } + ] + }, + "blue": { + "name": "蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "blue-1", + "value": { + "light": "232, 249, 255", + "dark": "232, 249, 255" + } + }, + { + "key": "blue-2", + "value": { + "light": "185, 233, 252", + "dark": "185, 233, 252" + } + }, + { + "key": "blue-3", + "value": { + "light": "138, 214, 249", + "dark": "138, 214, 249" + } + }, + { + "key": "blue-4", + "value": { + "light": "93, 192, 246", + "dark": "93, 192, 246" + } + }, + { + "key": "blue-5", + "value": { + "light": "48, 168, 243", + "dark": "48, 168, 243" + } + }, + { + "key": "blue-6", + "value": { + "light": "5, 142, 240", + "dark": "5, 142, 240" + } + }, + { + "key": "blue-7", + "value": { + "light": "3, 111, 199", + "dark": "3, 111, 199" + } + }, + { + "key": "blue-8", + "value": { + "light": "2, 83, 158", + "dark": "2, 83, 158" + } + }, + { + "key": "blue-9", + "value": { + "light": "1, 57, 117", + "dark": "1, 57, 117" + } + }, + { + "key": "blue-10", + "value": { + "light": "0, 34, 77", + "dark": "0, 34, 77" + } + } + ] + }, + "purple": { + "name": "紫色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "purple-1", + "value": { + "light": "245, 232, 255", + "dark": "245, 232, 255" + } + }, + { + "key": "purple-2", + "value": { + "light": "225, 192, 253", + "dark": "225, 192, 253" + } + }, + { + "key": "purple-3", + "value": { + "light": "203, 152, 251", + "dark": "203, 152, 251" + } + }, + { + "key": "purple-4", + "value": { + "light": "178, 113, 248", + "dark": "178, 113, 248" + } + }, + { + "key": "purple-5", + "value": { + "light": "152, 75, 246", + "dark": "152, 75, 246" + } + }, + { + "key": "purple-6", + "value": { + "light": "123, 37, 244", + "dark": "123, 37, 244" + } + }, + { + "key": "purple-7", + "value": { + "light": "92, 23, 202", + "dark": "92, 23, 202" + } + }, + { + "key": "purple-8", + "value": { + "light": "64, 12, 160", + "dark": "64, 12, 160" + } + }, + { + "key": "purple-9", + "value": { + "light": "41, 4, 118", + "dark": "41, 4, 118" + } + }, + { + "key": "purple-10", + "value": { + "light": "22, 0, 77", + "dark": "22, 0, 77" + } + } + ] + }, + "pink": { + "name": "粉色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "pink-1", + "value": { + "light": "255, 232, 253", + "dark": "255, 232, 253" + } + }, + { + "key": "pink-2", + "value": { + "light": "246, 188, 243", + "dark": "246, 188, 243" + } + }, + { + "key": "pink-3", + "value": { + "light": "238, 146, 235", + "dark": "238, 146, 235" + } + }, + { + "key": "pink-4", + "value": { + "light": "229, 107, 229", + "dark": "229, 107, 229" + } + }, + { + "key": "pink-5", + "value": { + "light": "216, 71, 221", + "dark": "216, 71, 221" + } + }, + { + "key": "pink-6", + "value": { + "light": "199, 37, 212", + "dark": "199, 37, 212" + } + }, + { + "key": "pink-7", + "value": { + "light": "163, 23, 178", + "dark": "163, 23, 178" + } + }, + { + "key": "pink-8", + "value": { + "light": "127, 13, 144", + "dark": "127, 13, 144" + } + }, + { + "key": "pink-9", + "value": { + "light": "93, 5, 110", + "dark": "93, 5, 110" + } + }, + { + "key": "pink-10", + "value": { + "light": "61, 0, 77", + "dark": "61, 0, 77" + } + } + ] + }, + "rosyred": { + "name": "玫红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "rosyred-1", + "value": { + "light": "255, 232, 240", + "dark": "255, 232, 240" + } + }, + { + "key": "rosyred-2", + "value": { + "light": "249, 185, 209", + "dark": "249, 185, 209" + } + }, + { + "key": "rosyred-3", + "value": { + "light": "243, 141, 182", + "dark": "243, 141, 182" + } + }, + { + "key": "rosyred-4", + "value": { + "light": "238, 98, 158", + "dark": "238, 98, 158" + } + }, + { + "key": "rosyred-5", + "value": { + "light": "232, 57, 139", + "dark": "232, 57, 139" + } + }, + { + "key": "rosyred-6", + "value": { + "light": "226, 18, 122", + "dark": "226, 18, 122" + } + }, + { + "key": "rosyred-7", + "value": { + "light": "189, 11, 106", + "dark": "189, 11, 106" + } + }, + { + "key": "rosyred-8", + "value": { + "light": "151, 6, 88", + "dark": "151, 6, 88" + } + }, + { + "key": "rosyred-9", + "value": { + "light": "114, 2, 69", + "dark": "114, 2, 69" + } + }, + { + "key": "rosyred-10", + "value": { + "light": "77, 0, 48", + "dark": "77, 0, 48" } } ] @@ -761,7 +1237,6 @@ "dark": "rgb(var(--o-mixedgray-7))" } }, - { "key": "color-control2", "description": "hover，常用于边框", @@ -770,7 +1245,6 @@ "dark": "rgb(var(--o-mixedgray-9))" } }, - { "key": "color-control3", "description": "激活，常用于边框", @@ -1463,21 +1937,21 @@ } }, { - "key": "font_size-h5", - "name": "五级标题", - "description": "五级标题", + "key": "font_size-text1", + "name": "常规正文", + "description": "常规正文", "value": { - "light": "18px", - "dark": "18px" + "light": "16px", + "dark": "16px" } }, { - "key": "font_size-text", - "name": "正文", - "description": "正文", + "key": "font_size-text2", + "name": "大号正文", + "description": "大号正文", "value": { - "light": "16px", - "dark": "16px" + "light": "18px", + "dark": "18px" } }, { @@ -1596,9 +2070,18 @@ } }, { - "key": "line_height-text", + "key": "line_height-text1", "name": "正文", "description": "正文", + "value": { + "light": "22px", + "dark": "22px" + } + }, + { + "key": "line_height-text2", + "name": "正文-大", + "description": "正文-大", "value": { "light": "24px", "dark": "24px" diff --git a/packages/opendesign/src/tokens/opendesign-token.json b/packages/opendesign/src/tokens/opendesign-token.json index d9908f2573b1df19f22891b796e3454b4fabeade..d34be7e9b3c9b762c9876625c4c9193310425e24 100644 --- a/packages/opendesign/src/tokens/opendesign-token.json +++ b/packages/opendesign/src/tokens/opendesign-token.json @@ -1174,21 +1174,21 @@ "typeName": "尺寸", "value": [ { - "key": "size-l", - "name": "大尺寸", - "description": "尺寸", + "key": "size-xxs", + "name": "小尺寸", + "description": "小尺寸", "value": { - "light": "40px", - "dark": "40px" + "light": "12px", + "dark": "12px" } }, { - "key": "size-m", - "name": "中尺寸", - "description": "尺寸", + "key": "size-xs", + "name": "小尺寸", + "description": "小尺寸", "value": { - "light": "32px", - "dark": "32px" + "light": "18px", + "dark": "18px" } }, { @@ -1199,6 +1199,33 @@ "light": "24px", "dark": "24px" } + }, + { + "key": "size-m", + "name": "中尺寸", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "size-l", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "size-xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } } ] }, @@ -1208,21 +1235,21 @@ "typeName": "尺寸", "value": [ { - "key": "icon_size-l", - "name": "大尺寸图标", - "description": "尺寸", + "key": "icon_size-xxs", + "name": "超小尺寸图标", + "description": "小尺寸", "value": { - "light": "48px", - "dark": "48px" + "light": "12px", + "dark": "12px" } }, { - "key": "icon_size-m", - "name": "中尺寸图标", - "description": "尺寸", + "key": "icon_size-xs", + "name": "超小尺寸图标", + "description": "小尺寸", "value": { - "light": "32px", - "dark": "32px" + "light": "16px", + "dark": "16px" } }, { @@ -1235,12 +1262,21 @@ } }, { - "key": "icon_size-xs", - "name": "超小尺寸图标", - "description": "小尺寸", + "key": "icon_size-m", + "name": "中尺寸图标", + "description": "尺寸", "value": { - "light": "16px", - "dark": "16px" + "light": "32px", + "dark": "32px" + } + }, + { + "key": "icon_size-l", + "name": "大尺寸图标", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" } } ] @@ -1314,21 +1350,21 @@ } }, { - "key": "font_size-h4", - "name": "四级标题", - "description": "四级标题", + "key": "font_size-text1", + "name": "常规正文", + "description": "常规正文", "value": { - "light": "16px", - "dark": "16px" + "light": "14px", + "dark": "14px" } }, { - "key": "font_size-text", - "name": "正文", - "description": "正文", + "key": "font_size-text2", + "name": "大号正文", + "description": "大号正文", "value": { - "light": "14px", - "dark": "14px" + "light": "16px", + "dark": "16px" } }, { @@ -1420,21 +1456,21 @@ } }, { - "key": "line_height-h4", - "name": "四级标题", - "description": "四级标题", + "key": "line_height-text1", + "name": "常规正文", + "description": "常规正文", "value": { - "light": "24px", - "dark": "24px" + "light": "22px", + "dark": "22px" } }, { - "key": "line_height-text", - "name": "正文", - "description": "正文", + "key": "line_height-text2", + "name": "大号正文", + "description": "大号正文", "value": { - "light": "22px", - "dark": "22px" + "light": "24px", + "dark": "24px" } }, { @@ -1463,12 +1499,12 @@ "typeName": "尺寸", "value": [ { - "key": "radius-l", - "name": "大尺寸圆角", - "description": "大尺寸圆角", + "key": "radius-s", + "name": "小尺寸圆角", + "description": "小尺寸圆角", "value": { - "light": "8px", - "dark": "8px" + "light": "2px", + "dark": "2px" } }, { @@ -1481,21 +1517,21 @@ } }, { - "key": "radius-s", - "name": "小尺寸圆角", - "description": "小尺寸圆角", + "key": "radius-l", + "name": "大尺寸圆角", + "description": "大尺寸圆角", "value": { - "light": "2px", - "dark": "2px" + "light": "8px", + "dark": "8px" } }, { - "key": "radius-control-l", - "name": "大尺寸控件圆角", - "description": "大尺寸控件圆角", + "key": "radius-control-s", + "name": "小尺寸控件圆角", + "description": "小尺寸控件圆角", "value": { - "light": "var(--o-radius-l)", - "dark": "var(--o-radius-l)" + "light": "var(--o-radius-s)", + "dark": "var(--o-radius-s)" } }, { @@ -1508,12 +1544,12 @@ } }, { - "key": "radius-control-s", - "name": "小尺寸控件圆角", - "description": "小尺寸控件圆角", + "key": "radius-control-l", + "name": "大尺寸控件圆角", + "description": "大尺寸控件圆角", "value": { - "light": "var(--o-radius-s)", - "dark": "var(--o-radius-s)" + "light": "var(--o-radius-l)", + "dark": "var(--o-radius-l)" } } ] diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts index 416431bd602d46480ab64cfca44fcebffbd73b3a..b6138c8ff9ded78fbaccc4dc92f446848f8c20c4 100644 --- a/packages/scripts/src/gen-tokens/index.ts +++ b/packages/scripts/src/gen-tokens/index.ts @@ -192,10 +192,11 @@ function generateCodeSnippets(tokens: Record, outFile: strin const { value, tokenKey, description } = token; const themes = Object.keys(value).map(theme => `${theme}: ${value[theme]}`); const desc = `${description || ''}[${themes.join(', ')}]`; + const code = `var(${tokenKey})`; snippets[tokenKey] = { - prefix: [`var(${tokenKey})`], - body: `var(${tokenKey})`, + prefix: [code], + body: code, description: desc, scope: 'css,scss,less' };