diff --git a/packages/opendesign/src/_components/inner-frame/style/var.scss b/packages/opendesign/src/_components/inner-frame/style/var.scss index f54a579779cd00b3b9d855adb7d4f337d10afa02..377c6cd2465daa22285751f2edd3fc98b6193054 100644 --- a/packages/opendesign/src/_components/inner-frame/style/var.scss +++ b/packages/opendesign/src/_components/inner-frame/style/var.scss @@ -103,12 +103,12 @@ --if-height: var(--o-control_size-s); --if-text-size: var(--o-font_size-tip1); --if-text-height: var(--o-line_height-tip1); - --icon-size: var(--o-icon_size-xs); + --icon-size: var(--o-icon_size_control-xs); --if-padding: 0 7px; --if-prepend-padding: 0 3px 0 4px; --if-append-padding: 0 4px 0 3px; - --if-radius: var(--o-radius_control-s); + --if-radius: var(--o-radius_control-xs); --icon-c &.o-if-round-pill { --if-padding: 0 9px; @@ -120,10 +120,10 @@ --if-height: var(--o-control_size-m); --if-text-size: var(--o-font_size-text1); --if-text-height: var(--o-line_height-text1); - --icon-size: var(--o-icon_size-s); + --icon-size: var(--o-icon_size_control-m); --if-padding: 0 11px; - --if-radius: var(--o-radius_control-m); + --if-radius: var(--o-radius_control-s); --if-prepend-padding: 0 7px 0 8px; --if-append-padding: 0 8px 0 7px; @@ -137,7 +137,7 @@ --if-height: var(--o-control_size-l); --if-text-size: var(--o-font_size-text2); --if-text-height: var(--o-line_height-text2); - --icon-size: var(--o-icon_size-s); + --icon-size: var(--o-icon_size_control-m); --if-padding: 0 15px; --if-prepend-padding: 0 11px 0 12px; diff --git a/packages/opendesign/src/_components/inner-panel/style/var.scss b/packages/opendesign/src/_components/inner-panel/style/var.scss index 3e96ce2ce56a2ec487d8fb798aa75125512c793a..10b71671b4948ceac7a464ad1cd23a5ae6bb5e49 100644 --- a/packages/opendesign/src/_components/inner-panel/style/var.scss +++ b/packages/opendesign/src/_components/inner-panel/style/var.scss @@ -1,7 +1,7 @@ .o-i-panel { --popup-bg-color: var(--o-color-fill2); --popup-shadow: var(--o-shadow-1); - --popup-radius: var(--o-radius_control-m); + --popup-radius: var(--o-radius_control-s); --popup-bd: none; // --popup-min-width: 312px; --popup-padding: 0; diff --git a/packages/opendesign/src/_styles/dark.token.css b/packages/opendesign/src/_styles/dark.token.css index ecdb86d0b53487edb4a3e7f6beac89596dd91ed3..5760dc36daa26c4f25bed60e2c800e428d8ba4a8 100644 --- a/packages/opendesign/src/_styles/dark.token.css +++ b/packages/opendesign/src/_styles/dark.token.css @@ -294,13 +294,6 @@ * @description */ --o-red-10: 255, 234, 232; - /** - * @name - * @type palette - * @group huaweired - * @description - */ - --o-red-huawei: 199, 0, 11; /** * @name * @type palette @@ -1471,19 +1464,19 @@ */ --o-gap-8: 64px; /** - * @name 小尺寸 + * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ - --o-control_size-2xs: 12px; + --o-control_size-2xs: 14px; /** * @name 小尺寸 * @type size * @group control_size * @description 小尺寸 */ - --o-control_size-xs: 18px; + --o-control_size-xs: 16px; /** * @name 小尺寸 * @type size @@ -1512,237 +1505,321 @@ * @description 尺寸 */ --o-control_size-xl: 48px; + /** + * @name 大尺寸 + * @type size + * @group control_size + * @description 尺寸 + */ + --o-control_size-2xl: 56px; /** * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 + */ + --o-icon_size-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸图标 + */ + --o-icon_size-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸图标 + */ + --o-icon_size-m: 24px; + /** + * @name 大尺寸图标 + * @type size + * @group icon_size + * @description 大尺寸图标 + */ + --o-icon_size-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸图标 + */ + --o-icon_size-xl: 40px; + /** + * @name 2xl尺寸图标 + * @type size + * @group icon_size + * @description 2xl尺寸图标 + */ + --o-icon_size-2xl: 48px; + /** + * @name 3xl尺寸图标 + * @type size + * @group icon_size + * @description 3xl尺寸图标 + */ + --o-icon_size-3xl: 56px; + /** + * @name 4xl尺寸图标 + * @type size + * @group icon_size + * @description 4xl尺寸图标 */ - --o-icon_size-2xs: 12px; + --o-icon_size-4xl: 64px; /** * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸控件图标(组件使用) */ - --o-icon_size-xs: 16px; + --o-icon_size_control-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸控件图标(组件使用) */ - --o-icon_size-s: 24px; + --o-icon_size_control-s: 20px; /** * @name 中尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 中尺寸控件图标(组件使用) */ - --o-icon_size-m: 32px; + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-l: 48px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font * @group font_size * @description 一级数据展示 */ - --o-font_size-display1: 64px; + --o-font_size-display1: 56px; /** * @name 二级数据展示 * @type font * @group font_size * @description 二级数据展示 */ - --o-font_size-display2: 54px; + --o-font_size-display2: 48px; /** * @name 三级数据展示 * @type font * @group font_size * @description 三级数据展示 */ - --o-font_size-display3: 36px; - /** - * @name 四级数据展示 - * @type font - * @group font_size - * @description 四级数据展示 - */ - --o-font_size-display4: 28px; + --o-font_size-display3: 40px; /** * @name 一级标题 * @type font * @group font_size * @description 一级标题 */ - --o-font_size-h1: 24px; + --o-font_size-h1: 32px; /** * @name 二级标题 * @type font * @group font_size * @description 二级标题 */ - --o-font_size-h2: 20px; + --o-font_size-h2: 24px; /** * @name 三级标题 * @type font * @group font_size * @description 三级标题 */ - --o-font_size-h3: 18px; + --o-font_size-h3: 22px; + /** + * @name 四级标题 + * @type font + * @group font_size + * @description 四级标题 + */ + --o-font_size-h4: 20px; /** * @name 常规正文 * @type font * @group font_size * @description 常规正文 */ - --o-font_size-text1: 14px; + --o-font_size-text1: 16px; /** * @name 大号正文 * @type font * @group font_size * @description 大号正文 */ - --o-font_size-text2: 16px; + --o-font_size-text2: 18px; /** * @name 提示文本1 * @type font * @group font_size * @description 提示文本1 */ - --o-font_size-tip1: 12px; + --o-font_size-tip1: 14px; /** * @name 提示文本2 * @type font * @group font_size * @description 提示文本2 */ - --o-font_size-tip2: 10px; + --o-font_size-tip2: 12px; /** * @name 一级数据展示 * @type font * @group line_height * @description 一级数据展示 */ - --o-line_height-display1: 84px; + --o-line_height-display1: 80px; /** * @name 二级数据展示 * @type font * @group line_height * @description 二级数据展示 */ - --o-line_height-display2: 76px; + --o-line_height-display2: 64px; /** * @name 三级数据展示 * @type font * @group line_height * @description 三级数据展示 */ - --o-line_height-display3: 48px; - /** - * @name 四级数据展示 - * @type font - * @group line_height - * @description 四级数据展示 - */ - --o-line_height-display4: 36px; + --o-line_height-display3: 56px; /** * @name 一级标题 * @type font * @group line_height * @description 一级标题 */ - --o-line_height-h1: 32px; + --o-line_height-h1: 44px; /** * @name 二级标题 * @type font * @group line_height * @description 二级标题 */ - --o-line_height-h2: 28px; + --o-line_height-h2: 32px; /** * @name 三级标题 * @type font * @group line_height * @description 三级标题 */ - --o-line_height-h3: 26px; + --o-line_height-h3: 30px; /** - * @name 常规正文 + * @name 四级标题 * @type font * @group line_height - * @description 常规正文 + * @description 四级标题 */ - --o-line_height-text1: 22px; + --o-line_height-h4: 28px; /** - * @name 大号正文 + * @name 正文 * @type font * @group line_height - * @description 大号正文 + * @description 正文 + */ + --o-line_height-text1: 24px; + /** + * @name 正文-大 + * @type font + * @group line_height + * @description 正文-大 */ - --o-line_height-text2: 24px; + --o-line_height-text2: 26x; /** * @name 提示文本1 * @type font * @group line_height * @description 提示文本1 */ - --o-line_height-tip1: 18px; + --o-line_height-tip1: 22px; /** * @name 提示文本2 * @type font * @group line_height * @description 提示文本2 */ - --o-line_height-tip2: 14px; + --o-line_height-tip2: 18px; + /** + * @name 超小尺寸圆角 + * @type size + * @group radius + * @description 超小尺寸圆角 + */ + --o-radius-xs: 4px; /** * @name 小尺寸圆角 * @type size * @group radius * @description 小尺寸圆角 */ - --o-radius-s: 2px; + --o-radius-s: 8px; /** * @name 中尺寸圆角 * @type size * @group radius * @description 中尺寸圆角 */ - --o-radius-m: 4px; + --o-radius-m: 12px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角 */ - --o-radius-l: 8px; + --o-radius-l: 16px; /** - * @name 小尺寸控件圆角 + * @name 大尺寸圆角 * @type size * @group radius - * @description 小尺寸控件圆角 + * @description 大尺寸圆角,一般用于卡片 */ - --o-radius_control-s: var(--o-radius-s); + --o-radius-xl: 24px; + /** + * @name 大尺寸控件圆角 + * @type size + * @group radius + * @description 大尺寸控件圆角(组件使用) + */ + --o-radius_control-l: 16px; /** * @name 中尺寸控件圆角 * @type size * @group radius - * @description 中尺寸控件圆角 + * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: var(--o-radius-m); + --o-radius_control-m: 12px; /** - * @name 大尺寸控件圆角 + * @name 小尺寸控件圆角 + * @type size + * @group radius + * @description 小尺寸控件圆角(组件使用) + */ + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 * @type size * @group radius - * @description 大尺寸控件圆角 + * @description 超小尺寸控件圆角(组件使用) */ - --o-radius_control-l: var(--o-radius-l); + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/opendesign/src/_styles/light.token.css b/packages/opendesign/src/_styles/light.token.css index 22ff7d2df5ba125fc2815827a22fc80dd07b52d8..9f6c55a6cdb16b42bec7bb82b505662c30620d55 100644 --- a/packages/opendesign/src/_styles/light.token.css +++ b/packages/opendesign/src/_styles/light.token.css @@ -294,13 +294,6 @@ * @description */ --o-red-10: 77, 0, 17; - /** - * @name - * @type palette - * @group huaweired - * @description - */ - --o-red-huawei: 199, 0, 11; /** * @name * @type palette @@ -1259,7 +1252,7 @@ * @group control * @description 禁用,常用于边框 */ - --o-color-control4: rgba(var(--o-mixedgray-14), 0.15); + --o-color-control4: rgba(var(--o-mixedgray-14), 0.1); /** * @name * @type color @@ -1471,19 +1464,19 @@ */ --o-gap-8: 64px; /** - * @name 小尺寸 + * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ - --o-control_size-2xs: 12px; + --o-control_size-2xs: 14px; /** * @name 小尺寸 * @type size * @group control_size * @description 小尺寸 */ - --o-control_size-xs: 18px; + --o-control_size-xs: 16px; /** * @name 小尺寸 * @type size @@ -1512,237 +1505,321 @@ * @description 尺寸 */ --o-control_size-xl: 48px; + /** + * @name 大尺寸 + * @type size + * @group control_size + * @description 尺寸 + */ + --o-control_size-2xl: 56px; /** * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 + */ + --o-icon_size-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸图标 + */ + --o-icon_size-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸图标 + */ + --o-icon_size-m: 24px; + /** + * @name 大尺寸图标 + * @type size + * @group icon_size + * @description 大尺寸图标 + */ + --o-icon_size-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸图标 + */ + --o-icon_size-xl: 40px; + /** + * @name 2xl尺寸图标 + * @type size + * @group icon_size + * @description 2xl尺寸图标 + */ + --o-icon_size-2xl: 48px; + /** + * @name 3xl尺寸图标 + * @type size + * @group icon_size + * @description 3xl尺寸图标 + */ + --o-icon_size-3xl: 56px; + /** + * @name 4xl尺寸图标 + * @type size + * @group icon_size + * @description 4xl尺寸图标 */ - --o-icon_size-2xs: 12px; + --o-icon_size-4xl: 64px; /** * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸控件图标(组件使用) */ - --o-icon_size-xs: 16px; + --o-icon_size_control-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸控件图标(组件使用) */ - --o-icon_size-s: 24px; + --o-icon_size_control-s: 20px; /** * @name 中尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 中尺寸控件图标(组件使用) */ - --o-icon_size-m: 32px; + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-l: 48px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font * @group font_size * @description 一级数据展示 */ - --o-font_size-display1: 64px; + --o-font_size-display1: 56px; /** * @name 二级数据展示 * @type font * @group font_size * @description 二级数据展示 */ - --o-font_size-display2: 54px; + --o-font_size-display2: 48px; /** * @name 三级数据展示 * @type font * @group font_size * @description 三级数据展示 */ - --o-font_size-display3: 36px; - /** - * @name 四级数据展示 - * @type font - * @group font_size - * @description 四级数据展示 - */ - --o-font_size-display4: 28px; + --o-font_size-display3: 40px; /** * @name 一级标题 * @type font * @group font_size * @description 一级标题 */ - --o-font_size-h1: 24px; + --o-font_size-h1: 32px; /** * @name 二级标题 * @type font * @group font_size * @description 二级标题 */ - --o-font_size-h2: 20px; + --o-font_size-h2: 24px; /** * @name 三级标题 * @type font * @group font_size * @description 三级标题 */ - --o-font_size-h3: 18px; + --o-font_size-h3: 22px; + /** + * @name 四级标题 + * @type font + * @group font_size + * @description 四级标题 + */ + --o-font_size-h4: 20px; /** * @name 常规正文 * @type font * @group font_size * @description 常规正文 */ - --o-font_size-text1: 14px; + --o-font_size-text1: 16px; /** * @name 大号正文 * @type font * @group font_size * @description 大号正文 */ - --o-font_size-text2: 16px; + --o-font_size-text2: 18px; /** * @name 提示文本1 * @type font * @group font_size * @description 提示文本1 */ - --o-font_size-tip1: 12px; + --o-font_size-tip1: 14px; /** * @name 提示文本2 * @type font * @group font_size * @description 提示文本2 */ - --o-font_size-tip2: 10px; + --o-font_size-tip2: 12px; /** * @name 一级数据展示 * @type font * @group line_height * @description 一级数据展示 */ - --o-line_height-display1: 84px; + --o-line_height-display1: 80px; /** * @name 二级数据展示 * @type font * @group line_height * @description 二级数据展示 */ - --o-line_height-display2: 76px; + --o-line_height-display2: 64px; /** * @name 三级数据展示 * @type font * @group line_height * @description 三级数据展示 */ - --o-line_height-display3: 48px; - /** - * @name 四级数据展示 - * @type font - * @group line_height - * @description 四级数据展示 - */ - --o-line_height-display4: 36px; + --o-line_height-display3: 56px; /** * @name 一级标题 * @type font * @group line_height * @description 一级标题 */ - --o-line_height-h1: 32px; + --o-line_height-h1: 44px; /** * @name 二级标题 * @type font * @group line_height * @description 二级标题 */ - --o-line_height-h2: 28px; + --o-line_height-h2: 32px; /** * @name 三级标题 * @type font * @group line_height * @description 三级标题 */ - --o-line_height-h3: 26px; + --o-line_height-h3: 30px; /** - * @name 常规正文 + * @name 四级标题 * @type font * @group line_height - * @description 常规正文 + * @description 四级标题 */ - --o-line_height-text1: 22px; + --o-line_height-h4: 28px; /** - * @name 大号正文 + * @name 正文 * @type font * @group line_height - * @description 大号正文 + * @description 正文 + */ + --o-line_height-text1: 24px; + /** + * @name 正文-大 + * @type font + * @group line_height + * @description 正文-大 */ - --o-line_height-text2: 24px; + --o-line_height-text2: 26px; /** * @name 提示文本1 * @type font * @group line_height * @description 提示文本1 */ - --o-line_height-tip1: 18px; + --o-line_height-tip1: 22px; /** * @name 提示文本2 * @type font * @group line_height * @description 提示文本2 */ - --o-line_height-tip2: 14px; + --o-line_height-tip2: 18px; + /** + * @name 超小尺寸圆角 + * @type size + * @group radius + * @description 超小尺寸圆角 + */ + --o-radius-xs: 4px; /** * @name 小尺寸圆角 * @type size * @group radius * @description 小尺寸圆角 */ - --o-radius-s: 2px; + --o-radius-s: 8px; /** * @name 中尺寸圆角 * @type size * @group radius * @description 中尺寸圆角 */ - --o-radius-m: 4px; + --o-radius-m: 12px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角 */ - --o-radius-l: 8px; + --o-radius-l: 16px; /** - * @name 小尺寸控件圆角 + * @name 大尺寸圆角 * @type size * @group radius - * @description 小尺寸控件圆角 + * @description 大尺寸圆角,一般用于卡片 */ - --o-radius_control-s: var(--o-radius-s); + --o-radius-xl: 24px; + /** + * @name 大尺寸控件圆角 + * @type size + * @group radius + * @description 大尺寸控件圆角(组件使用) + */ + --o-radius_control-l: 16px; /** * @name 中尺寸控件圆角 * @type size * @group radius - * @description 中尺寸控件圆角 + * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: var(--o-radius-m); + --o-radius_control-m: 12px; /** - * @name 大尺寸控件圆角 + * @name 小尺寸控件圆角 + * @type size + * @group radius + * @description 小尺寸控件圆角(组件使用) + */ + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 * @type size * @group radius - * @description 大尺寸控件圆角 + * @description 超小尺寸控件圆角(组件使用) */ - --o-radius_control-l: var(--o-radius-l); + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/opendesign/src/anchor/style/var.scss b/packages/opendesign/src/anchor/style/var.scss index 5fc03927f0315650e32322ec68302331b83d676a..62fa24733528ee992690bb94ddc4814950b635a4 100644 --- a/packages/opendesign/src/anchor/style/var.scss +++ b/packages/opendesign/src/anchor/style/var.scss @@ -20,7 +20,7 @@ --anchor-item-bg-color-active: var(--o-color-control3-light); --anchor-item-padding: 8px; - --anchor-item-radius: var(--o-radius_control-m); + --anchor-item-radius: var(--o-radius_control-s); --anchor-item-gap: 2px; } diff --git a/packages/opendesign/src/breadcrumb/style/media.scss b/packages/opendesign/src/breadcrumb/style/media.scss index 3baeb07e65c80a743611dbcebb7fac6d9d89b06c..8773715e89440bcb7b038d87235e3e2bbe9a1208 100644 --- a/packages/opendesign/src/breadcrumb/style/media.scss +++ b/packages/opendesign/src/breadcrumb/style/media.scss @@ -4,6 +4,6 @@ .o-breadcrumb { --breadcrumb-text-size: var(--o-font_size-tip2); --breadcrumb-text-height: var(--o-line_height-tip2); - --breadcrumb-seperator-size: var(--o-icon_size-xs); + --breadcrumb-seperator-size: var(--o-icon_size_control-xs); } } diff --git a/packages/opendesign/src/breadcrumb/style/var.scss b/packages/opendesign/src/breadcrumb/style/var.scss index 923520f62d09c5900de85f0195903a44edb7e803..2feaea59048e909fb07ce0038e9a70e4382d0386 100644 --- a/packages/opendesign/src/breadcrumb/style/var.scss +++ b/packages/opendesign/src/breadcrumb/style/var.scss @@ -8,7 +8,7 @@ --breadcrumb-text-height: var(--o-line_height-tip1); --breadcrumb-gap: 4px; - --breadcrumb-seperator-size: var(--o-icon_size-s); + --breadcrumb-seperator-size: var(--o-icon_size_control-m); --breadcrumb-label-max-width: 140px; } diff --git a/packages/opendesign/src/button/style/var.scss b/packages/opendesign/src/button/style/var.scss index 6309959b06c3ac6a1cf6315f9e32aee891258814..5e038260a012b10bd55f2c8a9271c224de5e31f4 100644 --- a/packages/opendesign/src/button/style/var.scss +++ b/packages/opendesign/src/button/style/var.scss @@ -156,12 +156,12 @@ } .o-btn-small { - --btn-radius: var(--o-radius_control-s); + --btn-radius: var(--o-radius_control-xs); --btn-gap: 2px; --btn-padding: 0 11px; } .o-btn-medium { - --btn-radius: var(--o-radius_control-m); + --btn-radius: var(--o-radius_control-s); --btn-gap: 8px; --btn-padding: 0 15px; } diff --git a/packages/opendesign/src/card/style/media.scss b/packages/opendesign/src/card/style/media.scss index fb008d01c6757324ddb68cff52f3b053f35d5951..7779c4b56091dbaad85776a90d45fee2db4fa024 100644 --- a/packages/opendesign/src/card/style/media.scss +++ b/packages/opendesign/src/card/style/media.scss @@ -23,7 +23,7 @@ --card-main-padding: 24px 24px; - --card-icon-size: var(--o-icon_size-l); + --card-icon-size: var(--o-icon_size_control-xl); --card-content-text-size: var(--o-font_size-tip2); --card-content-text-height: var(--o-line_height-tip2); @@ -37,14 +37,14 @@ @include respond-to('phone') { .o-card { &:not(.o-card-no-responsive) { - --card-radius: var(--o-radius_control-m); + --card-radius: var(--o-radius_control-s); --card-main-padding: 16px 16px; --card-header-text-size: var(--o-font_size-tip1); --card-header-text-height: var(--o-line_height-tip1); - --card-icon-size: var(--o-icon_size-m); + --card-icon-size: var(--o-icon_size_control-l); --card-content-gap: 8px; --card-content-text-size: var(--o-font_size-tip2); diff --git a/packages/opendesign/src/card/style/var.scss b/packages/opendesign/src/card/style/var.scss index 708fadd4988c0b3afa9563e82f9b54b3efee0254..780032617b1e2f54cb0068f4db26b2f2bb151949 100644 --- a/packages/opendesign/src/card/style/var.scss +++ b/packages/opendesign/src/card/style/var.scss @@ -15,7 +15,7 @@ --card-icon-gap: 16px; --card-icon-color: var(--o-color-info1); - --card-icon-size: var(--o-icon_size-2xl); + --card-icon-size: 64px; --card-header-color: var(--o-color-info1); --card-header-text-size: var(--o-font_size-h3); diff --git a/packages/opendesign/src/carousel/style/media.scss b/packages/opendesign/src/carousel/style/media.scss index e644082a5f91ab083e18a1c47611a20f1ad15b4e..41b5cc698a68ffd3f85827ad405b97213283f63c 100644 --- a/packages/opendesign/src/carousel/style/media.scss +++ b/packages/opendesign/src/carousel/style/media.scss @@ -2,7 +2,7 @@ @include respond-to('laptop') { .o-carousel { - --carousel-arrow-size: var(--o-icon_size-s); + --carousel-arrow-size: var(--o-icon_size_control-m); --carousel-indicator-width: 40px; --carousel-indicator-height: 3px; --carousel-indicator-gap: 8px; @@ -12,7 +12,7 @@ @include respond-to('phone-pad') { .o-carousel { - --carousel-arrow-size: var(--o-icon_size-xs); + --carousel-arrow-size: var(--o-icon_size_control-xs); --carousel-indicator-width: 24px; --carousel-indicator-height: 2px; --carousel-indicator-gap: 4px; diff --git a/packages/opendesign/src/carousel/style/var.scss b/packages/opendesign/src/carousel/style/var.scss index e4904a7da15e3c5fc266e51f66a0b0ffb0cd5583..24fe734f2deeb0111459153e267c569254bad4dc 100644 --- a/packages/opendesign/src/carousel/style/var.scss +++ b/packages/opendesign/src/carousel/style/var.scss @@ -1,6 +1,6 @@ .o-carousel { // arrow - --carousel-arrow-size: var(--o-icon_size-m); + --carousel-arrow-size: var(--o-icon_size_control-l); --carousel-arrow-color: var(--o-color-info1); --carousel-arrow-color-hover: var(--o-color-info2); --carousel-arrow-color-active: var(--o-color-info3); diff --git a/packages/opendesign/src/cascader/style/var.scss b/packages/opendesign/src/cascader/style/var.scss index dc58ddbf6746bec80c32ff5c9a6eee7992f64121..9accf86299592e22e7d2a1a8066694d8296f9ed5 100644 --- a/packages/opendesign/src/cascader/style/var.scss +++ b/packages/opendesign/src/cascader/style/var.scss @@ -12,11 +12,11 @@ --cascader-option-text-height: var(--o-line_height-text1); --cascader-option-padding: 8px 12px; - --cascader-option-radius: var(--o-radius_control-m); + --cascader-option-radius: var(--o-radius_control-s); --cascader-option-bg-color: transparent; --cascader-option-bg-color-hover: var(--o-color-control2-light); --cascader-option-bg-color-selected: var(--o-color-control3-light); - --cascader-option-icon-size: var(--o-icon_size-xs); + --cascader-option-icon-size: var(--o-icon_size_control-xs); } diff --git a/packages/opendesign/src/checkbox/style/var.scss b/packages/opendesign/src/checkbox/style/var.scss index c563887d53562d363c12844483436b2ab58f5a51..895b03d7db614de618d895a0d8181447aa286f38 100644 --- a/packages/opendesign/src/checkbox/style/var.scss +++ b/packages/opendesign/src/checkbox/style/var.scss @@ -9,7 +9,7 @@ --checkbox-color: var(--o-color-info1); --checkbox-color-disabled: var(--o-color-info4); - --checkbox-radius: var(--o-radius_control-s); + --checkbox-radius: var(--o-radius_control-xs); --checkbox-input-wrap-size: var(--o-control_size-s); --checkbox-input-size: var(--o-control_size-xs); diff --git a/packages/opendesign/src/collapse/style/var.scss b/packages/opendesign/src/collapse/style/var.scss index 801a6a6470b6895baec9d2efd0dc4e3d78b25567..3e9b0e98ab4cd145f797d955fa6a300a6f32a969 100644 --- a/packages/opendesign/src/collapse/style/var.scss +++ b/packages/opendesign/src/collapse/style/var.scss @@ -9,5 +9,5 @@ --collapse-item-header-padding: 24px 0px; --collapse-item-title-color: var(--o-color-info1); --collapse-item-icon-color: var(--o-color-info1); - --collapse-item-icon-size: var(--o-icon_size-xs); + --collapse-item-icon-size: var(--o-icon_size_control-xs); } diff --git a/packages/opendesign/src/date-picker/style/var.scss b/packages/opendesign/src/date-picker/style/var.scss index 8a7bf137cf93349d6a6b81066960c5f74ea68941..15277f6dbceb1d4841751636684074fa5c75c64e 100644 --- a/packages/opendesign/src/date-picker/style/var.scss +++ b/packages/opendesign/src/date-picker/style/var.scss @@ -5,7 +5,7 @@ --picker-panel-color: var(--o-color-info1); --picker-panel-color-out: var(--o-color-info4); - --picker-panel-icon-size: var(--o-icon_size-s); + --picker-panel-icon-size: var(--o-icon_size_control-m); --picker-panel-text-size: var(--o-font_size-text1); --picker-panel-text-height: var(--o-line_height-text1); diff --git a/packages/opendesign/src/dialog/style/var.scss b/packages/opendesign/src/dialog/style/var.scss index 4d8ade379babc8114364540438bd4853d6d92cf7..f61f342d7d42923ff30cadc0f5d302b0a4cecc56 100644 --- a/packages/opendesign/src/dialog/style/var.scss +++ b/packages/opendesign/src/dialog/style/var.scss @@ -1,5 +1,5 @@ .o-dialog { - --dlg-close-size: var(--o-icon_size-s); + --dlg-close-size: var(--o-icon_size_control-m); --dlg-close-color: var(--o-color-info2); --dlg-close-color-hover: var(--o-color-primary2); --dlg-close-color-active: var(--o-color-primary3); diff --git a/packages/opendesign/src/dropdown/style/var.scss b/packages/opendesign/src/dropdown/style/var.scss index da96cd90021f70a6cef620093bba520baa3f7a58..fd619da75cb6333a4896fad7c1585143b72b80ff 100644 --- a/packages/opendesign/src/dropdown/style/var.scss +++ b/packages/opendesign/src/dropdown/style/var.scss @@ -20,5 +20,5 @@ --dropdown-item-padding: 7px 12px; --dropdown-item-gap: 2px; - --dropdown-item-radius: var(--o-radius_control-m); + --dropdown-item-radius: var(--o-radius_control-s); } diff --git a/packages/opendesign/src/figure/style/var.scss b/packages/opendesign/src/figure/style/var.scss index 6aea9878eef69b85a3128db94fde7b8c1134c02e..6eafe58524fe7e2430b51927bd6487b12344bc4d 100644 --- a/packages/opendesign/src/figure/style/var.scss +++ b/packages/opendesign/src/figure/style/var.scss @@ -4,5 +4,5 @@ --figure-position: center; --figure-radius: 0; --figure-error-color: var(--o-color-control4); - --figure-error-size: var(--o-icon_size-m); + --figure-error-size: var(--o-icon_size_control-l); } diff --git a/packages/opendesign/src/input/style/var.scss b/packages/opendesign/src/input/style/var.scss index c88a9a47db9f38c97744eb93691b98653a735068..6301b991fcce5b33538ec4bf648230a9dcf8b0be 100644 --- a/packages/opendesign/src/input/style/var.scss +++ b/packages/opendesign/src/input/style/var.scss @@ -94,8 +94,8 @@ --input-padding: 0 7px; --input-append-padding: 0 3px 0 4px; --input-prepend-padding: 0 4px 0 3px; - --input-radius: var(--o-radius_control-s); - --o-input-icon-size: var(--o-icon_size-2xs); + --input-radius: var(--o-radius_control-xs); + --o-input-icon-size: var(--o-icon_size_control-xs); &.o-input-round-pill { --input-append-padding: 0 5px 0 4px; @@ -111,8 +111,8 @@ --input-padding: 0 11px; --input-append-padding: 0 7px 0 8px; --input-prepend-padding: 0 8px 0 7px; - --input-radius: var(--o-radius_control-m); - --o-input-icon-size: var(--o-icon_size-xs); + --input-radius: var(--o-radius_control-s); + --o-input-icon-size: var(--o-icon_size_control-xs); &.o-input-round-pill { --input-append-padding: 0 11px 0 8px; @@ -129,7 +129,7 @@ --input-append-padding: 0 11px 0 12px; --input-prepend-padding: 0 12px 0 11px; --input-radius: var(--o-radius_control-l); - --o-input-icon-size: var(--o-icon_size-s); + --o-input-icon-size: var(--o-icon_size_control-m); &.o-input-round-pill { --input-append-padding: 0 15px 0 12px; diff --git a/packages/opendesign/src/link/style/var.scss b/packages/opendesign/src/link/style/var.scss index 77bc49aa5ce89183492110708735b1e46f311310..d9c2d0004c5f415aadc7bbb629ee7ae09af259dc 100644 --- a/packages/opendesign/src/link/style/var.scss +++ b/packages/opendesign/src/link/style/var.scss @@ -47,13 +47,13 @@ } .o-link-small { - --link-icon-size: var(--o-icon_size-2xs); + --link-icon-size: var(--o-icon_size_control-xs); } .o-link-medium { - --link-icon-size: var(--o-icon_size-xs); + --link-icon-size: var(--o-icon_size_control-xs); } .o-link-large { - --link-icon-size: var(--o-icon_size-s); + --link-icon-size: var(--o-icon_size_control-m); } diff --git a/packages/opendesign/src/loading/style/var.scss b/packages/opendesign/src/loading/style/var.scss index 95c18c5bcf74efe9564d47d55dff36b342dd5e8b..9833c3b2e6be1a2cbe73d24ed403a937b38449c8 100644 --- a/packages/opendesign/src/loading/style/var.scss +++ b/packages/opendesign/src/loading/style/var.scss @@ -1,7 +1,7 @@ .o-loading { --loading-mask: var(--o-color-mask1); - --loading-icon-size: var(--o-icon_size-s); + --loading-icon-size: var(--o-icon_size_control-m); --loading-icon-color: var(--o-color-info2); --loading-mask-icon-color: var(--o-color-info2-inverse); diff --git a/packages/opendesign/src/menu/style/var.scss b/packages/opendesign/src/menu/style/var.scss index 8402e1bf1f702e35e53c4994365e38ec8217a02e..b3c28bf75c2647e2d3600b382db83384daca2b9c 100644 --- a/packages/opendesign/src/menu/style/var.scss +++ b/packages/opendesign/src/menu/style/var.scss @@ -11,7 +11,7 @@ --sub-menu-color: var(--o-color-info1); --sub-menu-color-selected: var(--o-color-primary1); - --sub-menu-radius: var(--o-radius_control-m); + --sub-menu-radius: var(--o-radius_control-s); --sub-menu-text-size: var(--o-font_size-text1); --sub-menu-text-height: var(--o-line_height-text1); @@ -19,14 +19,14 @@ --sub-menu-secondary-text-size: var(--o-font_size-tip1); --sub-menu-secondary-text-height: var(--o-line_height-tip1); - --sub-menu-icon-size: var(--o-icon_size-s); + --sub-menu-icon-size: var(--o-icon_size_control-m); --sub-menu-icon-color: var(--o-color-info1); --sub-menu-icon-color-selected: var(--o-color-primary1); --sub-menu-icon-gap: 8px; --sub-menu-padding-right: calc(var(--menu-padding-h) + var(--sub-menu-icon-size) + var(--sub-menu-icon-gap)); - --sub-menu-arrow-size: var(--o-icon_size-s); + --sub-menu-arrow-size: var(--o-icon_size_control-m); --sub-menu-bg-color-hover: var(--o-color-control2-light); --sub-menu-bg-color-selected: var(--o-color-control3-light); @@ -37,9 +37,9 @@ --menu-item-color-disabled: var(--o-color-info4); --menu-item-color-selected: var(--o-color-primary1); - --menu-item-radius: var(--o-radius_control-m); + --menu-item-radius: var(--o-radius_control-s); - --menu-item-icon-size: var(--o-icon_size-s); + --menu-item-icon-size: var(--o-icon_size_control-m); --menu-item-icon-color: var(--o-color-info1); --menu-item-icon-color-selected: var(--o-color-primary1); --menu-item-icon-gap: 8px; diff --git a/packages/opendesign/src/message/style/media.scss b/packages/opendesign/src/message/style/media.scss index d01449e0be0b20f3a7db0a4c2d8446376f66957b..623d9cbe7b1e858ef284cb257c3662ac52444e8b 100644 --- a/packages/opendesign/src/message/style/media.scss +++ b/packages/opendesign/src/message/style/media.scss @@ -15,7 +15,7 @@ --message-text-size: var(--o-font_size-tip2); --message-text-height: var(--o-line_height-tip2); --message-padding: 7px 12px; - --message-icon-size: var(--o-icon_size-xs); + --message-icon-size: var(--o-icon_size_control-xs); --message-icon-gap: 8px; } } diff --git a/packages/opendesign/src/message/style/var.scss b/packages/opendesign/src/message/style/var.scss index fa9d570760589ffc2609c6dd8bf32462c4830169..c08919060a4b79814143881a0064c4165cf0fa80 100644 --- a/packages/opendesign/src/message/style/var.scss +++ b/packages/opendesign/src/message/style/var.scss @@ -10,11 +10,11 @@ --message-align: center; - --message-radius: var(--o-radius_control-m); + --message-radius: var(--o-radius_control-s); --message-padding: 8px 16px; - --message-icon-size: var(--o-icon_size-s); + --message-icon-size: var(--o-icon_size_control-m); --message-icon-gap: 8px; --message-icon-close-color: var(--o-color-info2); diff --git a/packages/opendesign/src/option/style/var.scss b/packages/opendesign/src/option/style/var.scss index db5734c2ba37b325ea6b321a205a9a9703033be9..9b9fe7dc09e9c5b26254f2b1120a81d396343131 100644 --- a/packages/opendesign/src/option/style/var.scss +++ b/packages/opendesign/src/option/style/var.scss @@ -14,7 +14,7 @@ --option-padding: 7px 12px; --option-gap: 2px; - --option-radius: var(--o-radius_control-m); + --option-radius: var(--o-radius_control-s); } .o-option-multiple { --option-bg-color-active: transparent; diff --git a/packages/opendesign/src/pagination/style/index.scss b/packages/opendesign/src/pagination/style/index.scss index 515d951c9705b1eb94e907e5ca48759bf294c19f..a8bf5319009073268d50a4823c74e2b606a8b4a9 100644 --- a/packages/opendesign/src/pagination/style/index.scss +++ b/packages/opendesign/src/pagination/style/index.scss @@ -127,7 +127,7 @@ } } .o-pagination-more-icon { - font-size: var(--o-icon_size-xs); + font-size: var(--o-icon_size_control-xs); height: 100%; width: 100%; } diff --git a/packages/opendesign/src/pagination/style/var.scss b/packages/opendesign/src/pagination/style/var.scss index 3ef1ffaeffa0900bea1dcd8079988148a9ab7647..9cdb0f7fd677fed18acb30416c5aebc905e50d83 100644 --- a/packages/opendesign/src/pagination/style/var.scss +++ b/packages/opendesign/src/pagination/style/var.scss @@ -13,7 +13,7 @@ --pagination-item-color-active: var(--o-color-info2); --pagination-item-color-current: var(--o-color-primary1); - --pagination-radius: var(--o-radius_control-m); + --pagination-radius: var(--o-radius_control-s); } .o-pagination-outline { --pagination-arrow-bd-color: var(--o-color-control1); diff --git a/packages/opendesign/src/popover/style/var.scss b/packages/opendesign/src/popover/style/var.scss index cea329c9f6d841d60f2d4c1f9720c45f18326c22..4dd687ce4135ff3fd202d27aef0a78c8445caaf2 100644 --- a/packages/opendesign/src/popover/style/var.scss +++ b/packages/opendesign/src/popover/style/var.scss @@ -1,7 +1,7 @@ .o-popover { --popup-bg-color: var(--o-color-fill2); --popup-shadow: var(--o-shadow-1); - --popup-radius: var(--o-radius_control-m); + --popup-radius: var(--o-radius_control-s); --popup-bd: none; --popup-min-width: 120px; --popup-padding: 8px; diff --git a/packages/opendesign/src/popup/__demo__/IndexPopup.vue b/packages/opendesign/src/popup/__demo__/IndexPopup.vue index 6c7b1d29016e6fab19fbd03f06c54b0696b4489c..94ed80a9fdc0e0bbd25884079bf79f7e15e3225d 100644 --- a/packages/opendesign/src/popup/__demo__/IndexPopup.vue +++ b/packages/opendesign/src/popup/__demo__/IndexPopup.vue @@ -19,7 +19,7 @@ import PopupTarget from './PopupTarget.vue'; background-color: var(--o-color-fill2); box-shadow: var(--o-shadow-1); padding: 4px 8px; - border-radius: var(--o-radius_control-s); + border-radius: var(--o-radius_control-xs); border: 1px solid red; } diff --git a/packages/opendesign/src/progress/style/var.scss b/packages/opendesign/src/progress/style/var.scss index 9bb3792fe53cadba63f5b40fe675f6c486792e25..75f6e98a19de53ddb014287eb052d2c1ba99c8a0 100644 --- a/packages/opendesign/src/progress/style/var.scss +++ b/packages/opendesign/src/progress/style/var.scss @@ -12,14 +12,14 @@ --progress-text-size: var(--o-font_size-text1); --progress-text-height: var(--o-line_height-text1); - --progress-icon-size: var(--o-icon_size-s); + --progress-icon-size: var(--o-icon_size_control-m); } .o-progress-small { --progress-text-size: var(--o-font_size-tip2); --progress-text-height: var(--o-line_height-tip2); - --progress-icon-size: var(--o-icon_size-xs); + --progress-icon-size: var(--o-icon_size_control-xs); } .o-progress-primary { diff --git a/packages/opendesign/src/rate/style/var.scss b/packages/opendesign/src/rate/style/var.scss index 3edea241b0a702e8c7ec1a1aac6a61f9a0b9bc49..ea081b070316f8e15654bdc12665b2441e31e341 100644 --- a/packages/opendesign/src/rate/style/var.scss +++ b/packages/opendesign/src/rate/style/var.scss @@ -23,12 +23,12 @@ } .o-rate-large { - --rate-size: var(--o-icon_size-m); + --rate-size: var(--o-icon_size_control-l); --rate-gap: 4px; } .o-rate-medium { - --rate-size: var(--o-icon_size-xs); + --rate-size: var(--o-icon_size_control-xs); --rate-gap: 4px; } @@ -36,6 +36,6 @@ --rate-popover-color: var(--o-color-info1); --rate-popover-text-size: var(--o-font_size-tip1); --rate-popover-text-height: var(--o-line_height-tip2); - --rate-popover-radius: var(--o-radius_control-m); + --rate-popover-radius: var(--o-radius_control-s); --rate-popover-padding: 2px 8px; } diff --git a/packages/opendesign/src/result/style/var.scss b/packages/opendesign/src/result/style/var.scss index 06438a10c807ebcabf81e05e7368817521f9d077..9932585b8047a44526b881442abeaf67e6ce1735 100644 --- a/packages/opendesign/src/result/style/var.scss +++ b/packages/opendesign/src/result/style/var.scss @@ -1,5 +1,5 @@ .o-result { - --result-icon-size: var(--o-icon_size-l); + --result-icon-size: var(--o-icon_size_control-xl); --result-icon-color: var(--o-color-primary1); --result-icon-gap: 16px; diff --git a/packages/opendesign/src/select/style/style.scss b/packages/opendesign/src/select/style/style.scss index 7ad565374128cff6e4846c71a61d1e3591f010ef..d167a4aadececc10f82f12529f0adf0968a53609 100644 --- a/packages/opendesign/src/select/style/style.scss +++ b/packages/opendesign/src/select/style/style.scss @@ -156,7 +156,7 @@ align-items: center; justify-content: center; padding: 12px; - font-size: var(--o-icon_size-s); + font-size: var(--o-icon_size_control-m); } .o-select-empty { @@ -194,7 +194,7 @@ } } .o-select-tag-remove { - font-size: var(--o-icon_size-2xs); + font-size: var(--o-icon_size_control-xs); margin-left: 4px; transition: transform var(--o-duration-m1) var(--o-easing-standard-in); display: flex; diff --git a/packages/opendesign/src/select/style/var.scss b/packages/opendesign/src/select/style/var.scss index d028113936b7035704f63e999764f8941019e83c..222e15a9526a694b5e0fc44fce3c4a33d42b3d97 100644 --- a/packages/opendesign/src/select/style/var.scss +++ b/packages/opendesign/src/select/style/var.scss @@ -21,7 +21,7 @@ .o-select, .o-select-tag-popover { --select-tag-bg-color: var(--o-color-control2-light); - --select-tag-radius: var(--o-radius_control-m); + --select-tag-radius: var(--o-radius_control-s); --select-tag-text-size: var(--o-font_size-tip1); --select-tag-text-height: var(--o-line_height-tip1); @@ -116,8 +116,8 @@ --select-height: var(--o-control_size-s); --select-text-size: var(--o-font_size-tip1); --select-text-height: var(--o-line_height-tip1); - --select-radius: var(--o-radius_control-s); - --select-icon-size: var(--o-icon_size-xs); + --select-radius: var(--o-radius_control-xs); + --select-icon-size: var(--o-icon_size_control-xs); --select-tag-min-height: var(--o-control_size-xs); --select-tag-text-size: var(--o-font_size-tip2); @@ -129,18 +129,18 @@ } .o-select-medium { --select-padding: 0 7px 0 11px; - --select-icon-size: var(--o-icon_size-xs); + --select-icon-size: var(--o-icon_size_control-xs); --select-height: var(--o-control_size-m); --select-text-size: var(--o-font_size-text1); --select-text-height: var(--o-line_height-text1); - --select-radius: var(--o-radius_control-m); + --select-radius: var(--o-radius_control-s); // --select-multiple-max-height: 60px; } .o-select-large { --select-padding: 0 11px 0 15px; - --select-icon-size: var(--o-icon_size-s); + --select-icon-size: var(--o-icon_size_control-m); --select-height: var(--o-control_size-l); --select-text-size: var(--o-font_size-text2); @@ -160,7 +160,7 @@ --select-options-bg-color: var(--o-color-control-light); --select-options-shadow: var(--o-shadow-2); --select-options-bd: none; - --select-options-radius: var(--o-radius_control-m); + --select-options-radius: var(--o-radius_control-s); --select-options-padding: 4px; --select-empty-padding: 16px; diff --git a/packages/opendesign/src/tab/style/index.scss b/packages/opendesign/src/tab/style/index.scss index 4442e8423a9db70200372a3c6dd6247de206f2a5..09fcda1b0e807f9b09d6f4ae34022946f52ece0e 100644 --- a/packages/opendesign/src/tab/style/index.scss +++ b/packages/opendesign/src/tab/style/index.scss @@ -143,7 +143,7 @@ position: absolute; right: 0; top: 0; - font-size: var(--o-icon_size-2xs); + font-size: var(--o-icon_size_control-xs); padding: 1px; display: inline-flex; align-items: center; diff --git a/packages/opendesign/src/table/style/var.scss b/packages/opendesign/src/table/style/var.scss index 3c8942857366147dabb3538843d4cde356485870..ce26b742b10e5fc289f2a6e182727aafa3d7e553 100644 --- a/packages/opendesign/src/table/style/var.scss +++ b/packages/opendesign/src/table/style/var.scss @@ -22,7 +22,7 @@ --table-body-min-height: 200px; --table-bg-color: var(--o-color-control-light); - --table-radius: var(--o-radius_control-m); + --table-radius: var(--o-radius_control-s); --table-cell-padding: 8px 12px; --table-cell-height: 48px; diff --git a/packages/opendesign/src/tag/style/media.scss b/packages/opendesign/src/tag/style/media.scss index d84e2468411ccdb9379cc378697876c7ea109978..938757734f6b13cd5b19e68fa70636e48d34318f 100644 --- a/packages/opendesign/src/tag/style/media.scss +++ b/packages/opendesign/src/tag/style/media.scss @@ -5,7 +5,7 @@ --tag-text-size: var(--o-font_size-tip2); --tag-text-height: var(--o-line_height-tip2); --tag-height: var(--o-control_size-xs); - --tag-icon-size: var(--o-icon_size-2xs); + --tag-icon-size: var(--o-icon_size_control-xs); .o-tag-label, .o-tag-icon, diff --git a/packages/opendesign/src/tag/style/var.scss b/packages/opendesign/src/tag/style/var.scss index eb1e65af8480c3ad9e3f131a7880bb65de08f81e..0c25e85b66db3f5fd0589cb8be73f3c5eb6cd0d4 100644 --- a/packages/opendesign/src/tag/style/var.scss +++ b/packages/opendesign/src/tag/style/var.scss @@ -1,5 +1,5 @@ .o-tag { - --tag-radius: var(--o-radius_control-s); + --tag-radius: var(--o-radius_control-xs); } .o-tag-normal { @@ -102,7 +102,7 @@ --tag-text-size: var(--o-font_size-tip2); --tag-text-height: var(--o-line_height-tip2); --tag-height: var(--o-control_size-s); - --tag-icon-size: var(--o-icon_size-xs); + --tag-icon-size: var(--o-icon_size_control-xs); --tag-icon-gap: 4px; } @@ -111,7 +111,7 @@ --tag-text-size: var(--o-font_size-tip2); --tag-text-height: var(--o-line_height-tip2); --tag-height: var(--o-control_size-xs); - --tag-icon-size: var(--o-icon_size-2xs); + --tag-icon-size: var(--o-icon_size_control-xs); --tag-icon-gap: 2px; } diff --git a/packages/opendesign/src/textarea/style/var.scss b/packages/opendesign/src/textarea/style/var.scss index bd5f2d1b0ad2c81df8f7e6c278d5f02aa7b1cfe0..32bbffc180cf4d22f4bfe03219d29272627adce4 100644 --- a/packages/opendesign/src/textarea/style/var.scss +++ b/packages/opendesign/src/textarea/style/var.scss @@ -4,7 +4,7 @@ --textarea-icon-color: var(--o-color-control3); --textarea-icon-color-hover: var(--o-color-primary1); - --textarea-icon-size: var(--o-icon_size-xs); + --textarea-icon-size: var(--o-icon_size_control-xs); --textarea-limit-color: var(--o-color-info4); --textarea-limit-color-error: var(--o-color-danger1); @@ -78,7 +78,7 @@ --textarea-text-height: var(--o-line_height-tip1); --textarea-padding-v: 4px; --textarea-padding-h: 8px; - --textarea-radius: var(--o-radius_control-s); + --textarea-radius: var(--o-radius_control-xs); --textarea-radius-pill: 12px; } .o-textarea-size-medium { @@ -86,7 +86,7 @@ --textarea-text-height: var(--o-line_height-text1); --textarea-padding-v: 8px; --textarea-padding-h: 12px; - --textarea-radius: var(--o-radius_control-m); + --textarea-radius: var(--o-radius_control-s); --textarea-radius-pill: 16px; } .o-textarea-size-large { diff --git a/packages/opendesign/src/toggle/style/var.scss b/packages/opendesign/src/toggle/style/var.scss index 325a0a6382a7abbe6653169d96d01cff106c30b3..30a17bb99263be76cde41966045a0b9aebf6cac0 100644 --- a/packages/opendesign/src/toggle/style/var.scss +++ b/packages/opendesign/src/toggle/style/var.scss @@ -3,11 +3,11 @@ --toggle-text-size: var(--o-font_size-text1); --toggle-text-height: var(--o-line_height-text1); - --toggle-radius: var(--o-radius_control-m); + --toggle-radius: var(--o-radius_control-s); --toggle-gap: 4px; - --toggle-icon-size: var(--o-icon_size-s); + --toggle-icon-size: var(--o-icon_size_control-m); --toggle-padding: 0 15px; diff --git a/packages/opendesign/src/upload/style/var.scss b/packages/opendesign/src/upload/style/var.scss index 5bf162c1630a943bc3fb9dc6f1d15e9d9e85b802..5e598d60be51f221b0aad1f0a320eb142f080177 100644 --- a/packages/opendesign/src/upload/style/var.scss +++ b/packages/opendesign/src/upload/style/var.scss @@ -1,14 +1,14 @@ .o-upload { - --upload-icon-size: var(--o-icon_size-xs); - --upload-icon-size-l: var(--o-icon_size-s); - --upload-icon-size-xl: var(--o-icon_size-m); + --upload-icon-size: var(--o-icon_size_control-xs); + --upload-icon-size-l: var(--o-icon_size_control-m); + --upload-icon-size-xl: var(--o-icon_size_control-l); --upload-color: var(--o-color-info1); --upload-color-error: var(--o-color-danger1); --upload-color-disabled: var(--o-color-info4); --upload-item-bg-hover: var(--o-color-control2-light); - --upload-item-radius: var(--o-radius_control-m); + --upload-item-radius: var(--o-radius_control-s); --upload-progress-height: 1px; --upload-progress-radius: var(--upload-progress-height); @@ -16,7 +16,7 @@ --upload-progress-value-bg-color: var(--o-color-primary1); --upload-drag-padding: 32px 0; - --upload-drag-radius: var(--o-radius_control-m); + --upload-drag-radius: var(--o-radius_control-s); --upload-drag-color: var(--o-color-info2); --upload-drag-color-disabled: var(--o-color-info4); @@ -32,7 +32,7 @@ --upload-drag-bd-dragging: 1px dashed var(--o-color-primary2); --upload-drag-bd-disabled: 1px dashed var(--o-color-control4); - --upload-card-radius: var(--o-radius_control-m); + --upload-card-radius: var(--o-radius_control-s); --upload-card-width: 120px; --upload-card-height: var(--upload-card-width); --upload-card-gap: 8px; diff --git a/packages/opendesign/tokens/opendesign-token.json b/packages/opendesign/tokens/opendesign-token.json index 572348494d2f7b34602fa7865b76d5a3e7b29c2c..78a47a7c948f969c8838ef7deef0d926ca5a9a2f 100644 --- a/packages/opendesign/tokens/opendesign-token.json +++ b/packages/opendesign/tokens/opendesign-token.json @@ -328,20 +328,6 @@ } ] }, - "huaweired": { - "name": "华为红", - "type": "palette", - "typeName": "色盘", - "value": [ - { - "key": "red-huawei", - "value": { - "light": "199, 0, 11", - "dark": "199, 0, 11" - } - } - ] - }, "gray": { "name": "中性灰", "type": "palette", @@ -1440,7 +1426,7 @@ "key": "color-control4", "description": "禁用,常用于边框", "value": { - "light": "rgba(var(--o-mixedgray-14), 0.15)", + "light": "rgba(var(--o-mixedgray-14), 0.1)", "dark": "rgba(var(--o-mixedgray-14), 0.15)" } }, @@ -1742,11 +1728,11 @@ "value": [ { "key": "control_size-2xs", - "name": "小尺寸", - "description": "小尺寸", + "name": "超小尺寸", + "description": "超小尺寸", "value": { - "light": "12px", - "dark": "12px" + "light": "14px", + "dark": "14px" } }, { @@ -1754,8 +1740,8 @@ "name": "小尺寸", "description": "小尺寸", "value": { - "light": "18px", - "dark": "18px" + "light": "16px", + "dark": "16px" } }, { @@ -1793,6 +1779,15 @@ "light": "48px", "dark": "48px" } + }, + { + "key": "control_size-2xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "56px", + "dark": "56px" + } } ] }, @@ -1803,48 +1798,120 @@ "typeName": "尺寸", "value": [ { - "key": "icon_size-2xs", + "key": "icon_size-xs", "name": "超小尺寸图标", - "description": "小尺寸", + "description": "超小尺寸图标", "value": { - "light": "12px", - "dark": "12px" + "light": "16px", + "dark": "16px" } }, { - "key": "icon_size-xs", + "key": "icon_size-s", + "name": "小尺寸图标", + "description": "小尺寸图标", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "icon_size-m", + "name": "中尺寸图标", + "description": "中尺寸图标", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "icon_size-l", + "name": "大尺寸图标", + "description": "大尺寸图标", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "icon_size-xl", + "name": "超大尺寸图标", + "description": "超大尺寸图标", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "icon_size-2xl", + "name": "2xl尺寸图标", + "description": "2xl尺寸图标", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "icon_size-3xl", + "name": "3xl尺寸图标", + "description": "3xl尺寸图标", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "icon_size-4xl", + "name": "4xl尺寸图标", + "description": "4xl尺寸图标", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "icon_size_control-xs", "name": "超小尺寸图标", - "description": "小尺寸", + "description": "超小尺寸控件图标(组件使用)", "value": { "light": "16px", "dark": "16px" } }, { - "key": "icon_size-s", + "key": "icon_size_control-s", "name": "小尺寸图标", - "description": "小尺寸", + "description": "小尺寸控件图标(组件使用)", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "icon_size_control-m", + "name": "中尺寸图标", + "description": "中尺寸控件图标(组件使用)", "value": { "light": "24px", "dark": "24px" } }, { - "key": "icon_size-m", - "name": "中尺寸图标", - "description": "尺寸", + "key": "icon_size_control-l", + "name": "大尺寸图标", + "description": "大尺寸控件图标(组件使用)", "value": { "light": "32px", "dark": "32px" } }, { - "key": "icon_size-l", - "name": "大尺寸图标", - "description": "尺寸", + "key": "icon_size_control-xl", + "name": "超大尺寸图标", + "description": "超大尺寸控件图标(组件使用)", "value": { - "light": "48px", - "dark": "48px" + "light": "40px", + "dark": "40px" } } ] @@ -1860,8 +1927,8 @@ "name": "一级数据展示", "description": "一级数据展示", "value": { - "light": "64px", - "dark": "64px" + "light": "56px", + "dark": "56px" } }, { @@ -1869,8 +1936,8 @@ "name": "二级数据展示", "description": "二级数据展示", "value": { - "light": "54px", - "dark": "54px" + "light": "48px", + "dark": "48px" } }, { @@ -1878,17 +1945,8 @@ "name": "三级数据展示", "description": "三级数据展示", "value": { - "light": "36px", - "dark": "36px" - } - }, - { - "key": "font_size-display4", - "name": "四级数据展示", - "description": "四级数据展示", - "value": { - "light": "28px", - "dark": "28px" + "light": "40px", + "dark": "40px" } }, { @@ -1896,8 +1954,8 @@ "name": "一级标题", "description": "一级标题", "value": { - "light": "24px", - "dark": "24px" + "light": "32px", + "dark": "32px" } }, { @@ -1905,8 +1963,8 @@ "name": "二级标题", "description": "二级标题", "value": { - "light": "20px", - "dark": "20px" + "light": "24px", + "dark": "24px" } }, { @@ -1914,8 +1972,17 @@ "name": "三级标题", "description": "三级标题", "value": { - "light": "18px", - "dark": "18px" + "light": "22px", + "dark": "22px" + } + }, + { + "key": "font_size-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "20px", + "dark": "20px" } }, { @@ -1923,8 +1990,8 @@ "name": "常规正文", "description": "常规正文", "value": { - "light": "14px", - "dark": "14px" + "light": "16px", + "dark": "16px" } }, { @@ -1932,8 +1999,8 @@ "name": "大号正文", "description": "大号正文", "value": { - "light": "16px", - "dark": "16px" + "light": "18px", + "dark": "18px" } }, { @@ -1941,8 +2008,8 @@ "name": "提示文本1", "description": "提示文本1", "value": { - "light": "12px", - "dark": "12px" + "light": "14px", + "dark": "14px" } }, { @@ -1950,8 +2017,8 @@ "name": "提示文本2", "description": "提示文本2", "value": { - "light": "10px", - "dark": "10px" + "light": "12px", + "dark": "12px" } } ] @@ -1966,8 +2033,8 @@ "name": "一级数据展示", "description": "一级数据展示", "value": { - "light": "84px", - "dark": "84px" + "light": "80px", + "dark": "80px" } }, { @@ -1975,8 +2042,8 @@ "name": "二级数据展示", "description": "二级数据展示", "value": { - "light": "76px", - "dark": "76px" + "light": "64px", + "dark": "64px" } }, { @@ -1984,17 +2051,8 @@ "name": "三级数据展示", "description": "三级数据展示", "value": { - "light": "48px", - "dark": "48px" - } - }, - { - "key": "line_height-display4", - "name": "四级数据展示", - "description": "四级数据展示", - "value": { - "light": "36px", - "dark": "36px" + "light": "56px", + "dark": "56px" } }, { @@ -2002,8 +2060,8 @@ "name": "一级标题", "description": "一级标题", "value": { - "light": "32px", - "dark": "32px" + "light": "44px", + "dark": "44px" } }, { @@ -2011,8 +2069,8 @@ "name": "二级标题", "description": "二级标题", "value": { - "light": "28px", - "dark": "28px" + "light": "32px", + "dark": "32px" } }, { @@ -2020,35 +2078,44 @@ "name": "三级标题", "description": "三级标题", "value": { - "light": "26px", - "dark": "26px" + "light": "30px", + "dark": "30px" } }, { - "key": "line_height-text1", - "name": "常规正文", - "description": "常规正文", + "key": "line_height-h4", + "name": "四级标题", + "description": "四级标题", "value": { - "light": "22px", - "dark": "22px" + "light": "28px", + "dark": "28px" } }, { - "key": "line_height-text2", - "name": "大号正文", - "description": "大号正文", + "key": "line_height-text1", + "name": "正文", + "description": "正文", "value": { "light": "24px", "dark": "24px" } }, + { + "key": "line_height-text2", + "name": "正文-大", + "description": "正文-大", + "value": { + "light": "26px", + "dark": "26x" + } + }, { "key": "line_height-tip1", "name": "提示文本1", "description": "提示文本1", "value": { - "light": "18px", - "dark": "18px" + "light": "22px", + "dark": "22px" } }, { @@ -2056,8 +2123,8 @@ "name": "提示文本2", "description": "提示文本2", "value": { - "light": "14px", - "dark": "14px" + "light": "18px", + "dark": "18px" } } ] @@ -2068,13 +2135,22 @@ "type": "size", "typeName": "尺寸", "value": [ + { + "key": "radius-xs", + "name": "超小尺寸圆角", + "description": "超小尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, { "key": "radius-s", "name": "小尺寸圆角", "description": "小尺寸圆角", "value": { - "light": "2px", - "dark": "2px" + "light": "8px", + "dark": "8px" } }, { @@ -2082,8 +2158,8 @@ "name": "中尺寸圆角", "description": "中尺寸圆角", "value": { - "light": "4px", - "dark": "4px" + "light": "12px", + "dark": "12px" } }, { @@ -2091,40 +2167,57 @@ "name": "大尺寸圆角", "description": "大尺寸圆角", "value": { - "light": "8px", - "dark": "8px" + "light": "16px", + "dark": "16px" } }, { - "key": "radius-control-s", - "name": "小尺寸控件圆角", - "description": "小尺寸控件圆角", + "key": "radius-xl", + "name": "大尺寸圆角", + "description": "大尺寸圆角,一般用于卡片", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "radius_control-l", + "name": "大尺寸控件圆角", + "description": "大尺寸控件圆角(组件使用)", "value": { - "light": "var(--o-radius-s)", - "dark": "var(--o-radius-s)" + "light": "16px", + "dark": "16px" } }, { - "key": "radius-control-m", + "key": "radius_control-m", "name": "中尺寸控件圆角", - "description": "中尺寸控件圆角", + "description": "中尺寸控件圆角(组件使用)", "value": { - "light": "var(--o-radius-m)", - "dark": "var(--o-radius-m)" + "light": "12px", + "dark": "12px" } }, { - "key": "radius-control-l", - "name": "大尺寸控件圆角", - "description": "大尺寸控件圆角", + "key": "radius_control-s", + "name": "小尺寸控件圆角", + "description": "小尺寸控件圆角(组件使用)", "value": { - "light": "var(--o-radius-l)", - "dark": "var(--o-radius-l)" + "light": "8px", + "dark": "8px" + } + }, + { + "key": "radius_control-xs", + "name": "超小尺寸控件圆角", + "description": "超小尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" } } ] }, - "duration": { "name": "动画持续时间", "type": "animation", diff --git a/packages/portal-ak/src/ak/theme/a.dark.token.css b/packages/portal-ak/src/ak/theme/a.dark.token.css index fd9d6c352cacac60efcaf598950022234c31b69a..e819000b9805e9e7620d8430bf0e8222f027b1cb 100644 --- a/packages/portal-ak/src/ak/theme/a.dark.token.css +++ b/packages/portal-ak/src/ak/theme/a.dark.token.css @@ -1488,7 +1488,7 @@ * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ --o-control_size-2xs: 14px; /** @@ -1534,68 +1534,96 @@ */ --o-control_size-2xl: 56px; /** - * @name 小尺寸图标 + * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 */ - --o-icon_size-2xs: 14px; + --o-icon_size-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸图标 */ - --o-icon_size-xs: 16px; + --o-icon_size-s: 20px; /** - * @name 小尺寸图标 + * @name 中尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 中尺寸图标 */ - --o-icon_size-s: 24px; + --o-icon_size-m: 24px; /** - * @name 小尺寸图标 + * @name 大尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 大尺寸图标 */ - --o-icon_size-m: 32px; + --o-icon_size-l: 32px; /** - * @name 大尺寸图标 + * @name 超大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 超大尺寸图标 */ - --o-icon_size-l: 40px; + --o-icon_size-xl: 40px; /** - * @name 大尺寸图标 + * @name 2xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 2xl尺寸图标 */ - --o-icon_size-xl: 48px; + --o-icon_size-2xl: 48px; /** - * @name 大尺寸图标 + * @name 3xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 3xl尺寸图标 */ - --o-icon_size-2xl: 64px; + --o-icon_size-3xl: 56px; /** - * @name 大尺寸图标 + * @name 4xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 4xl尺寸图标 */ - --o-icon_size-3xl: 72px; + --o-icon_size-4xl: 64px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 超小尺寸控件图标(组件使用) + */ + --o-icon_size_control-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸控件图标(组件使用) + */ + --o-icon_size_control-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸控件图标(组件使用) + */ + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-4xl: 96px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font @@ -1798,14 +1826,21 @@ * @group radius * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: 8px; + --o-radius_control-m: 12px; /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角(组件使用) */ - --o-radius_control-s: 4px; + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 + * @type size + * @group radius + * @description 超小尺寸控件圆角(组件使用) + */ + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/portal-ak/src/ak/theme/a.light.token.css b/packages/portal-ak/src/ak/theme/a.light.token.css index 0ce8c6f1611a8dbf7651a58dbf58c3e16e83380b..5c9ccf9f37ffa6388c01de320732f5fcd4266bc0 100644 --- a/packages/portal-ak/src/ak/theme/a.light.token.css +++ b/packages/portal-ak/src/ak/theme/a.light.token.css @@ -1259,7 +1259,7 @@ * @group control * @description 禁用,常用于边框 */ - --o-color-control4: rgba(var(--o-mixedgray-14), 0.15); + --o-color-control4: rgba(var(--o-mixedgray-14), 0.1); /** * @name * @type color @@ -1488,7 +1488,7 @@ * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ --o-control_size-2xs: 14px; /** @@ -1534,68 +1534,96 @@ */ --o-control_size-2xl: 56px; /** - * @name 小尺寸图标 + * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 */ - --o-icon_size-2xs: 14px; + --o-icon_size-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸图标 */ - --o-icon_size-xs: 16px; + --o-icon_size-s: 20px; /** - * @name 小尺寸图标 + * @name 中尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 中尺寸图标 */ - --o-icon_size-s: 24px; + --o-icon_size-m: 24px; /** - * @name 小尺寸图标 + * @name 大尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 大尺寸图标 */ - --o-icon_size-m: 32px; + --o-icon_size-l: 32px; /** - * @name 大尺寸图标 + * @name 超大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 超大尺寸图标 */ - --o-icon_size-l: 40px; + --o-icon_size-xl: 40px; /** - * @name 大尺寸图标 + * @name 2xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 2xl尺寸图标 */ - --o-icon_size-xl: 48px; + --o-icon_size-2xl: 48px; /** - * @name 大尺寸图标 + * @name 3xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 3xl尺寸图标 */ - --o-icon_size-2xl: 64px; + --o-icon_size-3xl: 56px; /** - * @name 大尺寸图标 + * @name 4xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 4xl尺寸图标 */ - --o-icon_size-3xl: 72px; + --o-icon_size-4xl: 64px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 超小尺寸控件图标(组件使用) + */ + --o-icon_size_control-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸控件图标(组件使用) + */ + --o-icon_size_control-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸控件图标(组件使用) + */ + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-4xl: 96px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font @@ -1798,14 +1826,21 @@ * @group radius * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: 8px; + --o-radius_control-m: 12px; /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角(组件使用) */ - --o-radius_control-s: 4px; + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 + * @type size + * @group radius + * @description 超小尺寸控件圆角(组件使用) + */ + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/portal-ak/src/ak/theme/a.media.token.css b/packages/portal-ak/src/ak/theme/a.media.token.css index cb617bf40eb0594544955ef6cc0af8cf40d74ddd..5809ee9a3d939d543c131ad01727d4bb35333dbc 100644 --- a/packages/portal-ak/src/ak/theme/a.media.token.css +++ b/packages/portal-ak/src/ak/theme/a.media.token.css @@ -6,11 +6,10 @@ } } -@media screen and (max-width: 1200px) and (min-width: 721px) { +@media screen and (max-width: 1200px) and (min-width: 600px) { [data-o-theme='a.dark'], [data-o-theme='a.light'] { --o-control_size-l: 36px; - --o-icon_size-s: 20px; } } diff --git a/packages/portal-ak/src/ak/theme/button.scss b/packages/portal-ak/src/ak/theme/button.scss index 00c185b02c0d93e3b2ecda1cb8b6e6eeb19ea768..82a09152637ce68dc45c85ba6bd57656c6fcad66 100644 --- a/packages/portal-ak/src/ak/theme/button.scss +++ b/packages/portal-ak/src/ak/theme/button.scss @@ -4,13 +4,13 @@ font-size: var(--o-font_size-tip1); line-height: var(--o-line_height-tip1); --btn-min-width: 80px; - --btn-icon-size: var(--o-icon_size-xs); + --btn-icon-size: var(--o-icon_size_control-xs); } .o-btn-large { font-size: var(--o-font_size-text1); line-height: var(--o-line_height-text1); --btn-min-width: 96px; - --btn-icon-size: var(--o-icon_size-s); + --btn-icon-size: var(--o-icon_size_control-m); @include respond-to('pad') { font-size: var(--o-font_size-tip1); diff --git a/packages/portal-ak/src/ak/theme/card.k.scss b/packages/portal-ak/src/ak/theme/card.k.scss index f1c9f4312c9ce0d4b72a4803cad4c6aa7beae025..645a8747d629d0e0409f059455a6b271a2ec0acd 100644 --- a/packages/portal-ak/src/ak/theme/card.k.scss +++ b/packages/portal-ak/src/ak/theme/card.k.scss @@ -26,8 +26,8 @@ --card-shadow: none; --card-shadow-hover: none; --card-shadow-active: none; - --card-radius: var(--o-radius-xl); - --card-cover-radius: var(--o-radius-xl); + --card-radius: var(--o-radius_control-xl); + --card-cover-radius: var(--o-radius_control-xl); --card-icon-size: 56px; } @@ -68,7 +68,7 @@ .c-card-kunpeng { &.o-card { &:not(.o-card-no-responsive) { - --card-icon-size: var(--o-icon_size-l); + --card-icon-size: var(--o-icon_size_control-xl); } } } @@ -77,7 +77,7 @@ @include respond-to('phone') { .c-card-kunpeng { &.o-card { - --card-icon-size: var(--o-icon_size-l); + --card-icon-size: var(--o-icon_size_control-xl); .o-card-cover-v { .o-card-cover-img { diff --git a/packages/portal-ak/src/ak/theme/dialog.scss b/packages/portal-ak/src/ak/theme/dialog.scss index 7c1432002f315a206b57318889b867c195a7303f..6fd35fd3cf301daa797973761b206a172ccf4de4 100644 --- a/packages/portal-ak/src/ak/theme/dialog.scss +++ b/packages/portal-ak/src/ak/theme/dialog.scss @@ -49,7 +49,7 @@ --dlg-body-padding: 12px 16px 12px; --dlg-foot-padding: 0 16px 16px; --dlg-max-height: 50%; - --dlg-radius: var(--o-radius-s); + --dlg-radius: var(--o-radius_control-s); } } @@ -65,7 +65,7 @@ --dlg-body-padding: 12px 16px 12px; --dlg-foot-padding: 0 16px 16px; --dlg-max-height: 80vh; - --dlg-radius: var(--o-radius-s); + --dlg-radius: var(--o-radius_control-s); } @include respond-to('phone-h') { @@ -155,7 +155,7 @@ @include respond-to('phone-v') { --dlg-width: 100%; --dlg-margin: 0; - --dlg-radius: var(--o-radius-s) var(--o-radius-s) 0 0; + --dlg-radius: var(--o-radius_control-s) var(--o-radius_control-s) 0 0; } } @@ -187,7 +187,7 @@ top: calc(100% + 16px); border: 1px solid var(--o-color-info1-inverse); border-radius: 50%; - font-size: var(--o-icon_size-xs); + font-size: var(--o-icon_size_control-xs); color: var(--o-color-info1-inverse); padding: 4px; display: flex; diff --git a/packages/portal-ak/src/ak/theme/icon.scss b/packages/portal-ak/src/ak/theme/icon.scss index 36c0d7026fbd404feb002612e505571bac7af45f..1799b04a2d743dcbcb957aab6623ca811495e584 100644 --- a/packages/portal-ak/src/ak/theme/icon.scss +++ b/packages/portal-ak/src/ak/theme/icon.scss @@ -4,5 +4,5 @@ --icon-btn-color-active: var(--o-color-info1); } .c-icon-large { - --icon-size: var(--o-icon_size-s); + --icon-size: var(--o-icon_size_control-m); } diff --git a/packages/portal-ak/src/ak/theme/k.dark.token.css b/packages/portal-ak/src/ak/theme/k.dark.token.css index 01b26a1b625841870c7bb9a8df92c33b54e745e7..973c137224e77bf7ff063405e4735767a64ecd70 100644 --- a/packages/portal-ak/src/ak/theme/k.dark.token.css +++ b/packages/portal-ak/src/ak/theme/k.dark.token.css @@ -1488,7 +1488,7 @@ * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ --o-control_size-2xs: 14px; /** @@ -1534,68 +1534,96 @@ */ --o-control_size-2xl: 56px; /** - * @name 小尺寸图标 + * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 */ - --o-icon_size-2xs: 14px; + --o-icon_size-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸图标 */ - --o-icon_size-xs: 16px; + --o-icon_size-s: 20px; /** - * @name 小尺寸图标 + * @name 中尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 中尺寸图标 */ - --o-icon_size-s: 24px; + --o-icon_size-m: 24px; /** - * @name 小尺寸图标 + * @name 大尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 大尺寸图标 */ - --o-icon_size-m: 32px; + --o-icon_size-l: 32px; /** - * @name 大尺寸图标 + * @name 超大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 超大尺寸图标 */ - --o-icon_size-l: 40px; + --o-icon_size-xl: 40px; /** - * @name 大尺寸图标 + * @name 2xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 2xl尺寸图标 */ - --o-icon_size-xl: 48px; + --o-icon_size-2xl: 48px; /** - * @name 大尺寸图标 + * @name 3xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 3xl尺寸图标 */ - --o-icon_size-2xl: 64px; + --o-icon_size-3xl: 56px; /** - * @name 大尺寸图标 + * @name 4xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 4xl尺寸图标 */ - --o-icon_size-3xl: 72px; + --o-icon_size-4xl: 64px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 超小尺寸控件图标(组件使用) + */ + --o-icon_size_control-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸控件图标(组件使用) + */ + --o-icon_size_control-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸控件图标(组件使用) + */ + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-4xl: 96px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font @@ -1763,49 +1791,56 @@ * @group radius * @description 小尺寸圆角 */ - --o-radius-s: 4px; + --o-radius-s: 8px; /** * @name 中尺寸圆角 * @type size * @group radius * @description 中尺寸圆角 */ - --o-radius-m: 4px; + --o-radius-m: 12px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角 */ - --o-radius-l: 4px; + --o-radius-l: 16px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角,一般用于卡片 */ - --o-radius-xl: 0px; + --o-radius-xl: 24px; /** * @name 大尺寸控件圆角 * @type size * @group radius * @description 大尺寸控件圆角(组件使用) */ - --o-radius_control-l: 4px; + --o-radius_control-l: 16px; /** * @name 中尺寸控件圆角 * @type size * @group radius * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: 4px; + --o-radius_control-m: 12px; /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角(组件使用) */ - --o-radius_control-s: 4px; + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 + * @type size + * @group radius + * @description 超小尺寸控件圆角(组件使用) + */ + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/portal-ak/src/ak/theme/k.light.token.css b/packages/portal-ak/src/ak/theme/k.light.token.css index d8ab7d1a51f6be88a61182bb889df634421d9b6b..bf80547e7ecb656388d5d62db925a225af1dae78 100644 --- a/packages/portal-ak/src/ak/theme/k.light.token.css +++ b/packages/portal-ak/src/ak/theme/k.light.token.css @@ -1259,7 +1259,7 @@ * @group control * @description 禁用,常用于边框 */ - --o-color-control4: rgba(var(--o-gray-14), 0.15); + --o-color-control4: rgba(var(--o-gray-14), 0.1); /** * @name * @type color @@ -1488,7 +1488,7 @@ * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ --o-control_size-2xs: 14px; /** @@ -1534,68 +1534,96 @@ */ --o-control_size-2xl: 56px; /** - * @name 小尺寸图标 + * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 */ - --o-icon_size-2xs: 14px; + --o-icon_size-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸图标 */ - --o-icon_size-xs: 16px; + --o-icon_size-s: 20px; /** - * @name 小尺寸图标 + * @name 中尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 中尺寸图标 */ - --o-icon_size-s: 24px; + --o-icon_size-m: 24px; /** - * @name 小尺寸图标 + * @name 大尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 大尺寸图标 */ - --o-icon_size-m: 32px; + --o-icon_size-l: 32px; /** - * @name 大尺寸图标 + * @name 超大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 超大尺寸图标 */ - --o-icon_size-l: 40px; + --o-icon_size-xl: 40px; /** - * @name 大尺寸图标 + * @name 2xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 2xl尺寸图标 */ - --o-icon_size-xl: 48px; + --o-icon_size-2xl: 48px; /** - * @name 大尺寸图标 + * @name 3xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 3xl尺寸图标 */ - --o-icon_size-2xl: 64px; + --o-icon_size-3xl: 56px; /** - * @name 大尺寸图标 + * @name 4xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 4xl尺寸图标 */ - --o-icon_size-3xl: 72px; + --o-icon_size-4xl: 64px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 超小尺寸控件图标(组件使用) + */ + --o-icon_size_control-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸控件图标(组件使用) + */ + --o-icon_size_control-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸控件图标(组件使用) + */ + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-4xl: 96px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font @@ -1763,49 +1791,56 @@ * @group radius * @description 小尺寸圆角 */ - --o-radius-s: 4px; + --o-radius-s: 8px; /** * @name 中尺寸圆角 * @type size * @group radius * @description 中尺寸圆角 */ - --o-radius-m: 4px; + --o-radius-m: 12px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角 */ - --o-radius-l: 4px; + --o-radius-l: 16px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角,一般用于卡片 */ - --o-radius-xl: 0px; + --o-radius-xl: 24px; /** * @name 大尺寸控件圆角 * @type size * @group radius * @description 大尺寸控件圆角(组件使用) */ - --o-radius_control-l: 4px; + --o-radius_control-l: 16px; /** * @name 中尺寸控件圆角 * @type size * @group radius * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: 4px; + --o-radius_control-m: 12px; /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角(组件使用) */ - --o-radius_control-s: 4px; + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 + * @type size + * @group radius + * @description 超小尺寸控件圆角(组件使用) + */ + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/portal-ak/src/ak/theme/link.scss b/packages/portal-ak/src/ak/theme/link.scss index 36fbb264d858d5e099a145ba296ae57067f88f03..09008c2d3382d87fe44c89ec82b1e16cd643737e 100644 --- a/packages/portal-ak/src/ak/theme/link.scss +++ b/packages/portal-ak/src/ak/theme/link.scss @@ -13,12 +13,12 @@ .o-link-medium { font-size: var(--o-font_size-tip1); line-height: var(--o-line_height-tip1); - --link-icon-size: var(--o-icon_size-xs); + --link-icon-size: var(--o-icon_size_control-xs); } .o-link-large { font-size: var(--o-font_size-text1); line-height: var(--o-line_height-text1); - --link-icon-size: var(--o-icon_size-s); + --link-icon-size: var(--o-icon_size_control-m); @include respond-to('pad') { font-size: var(--o-font_size-tip1); line-height: var(--o-line_height-tip1); @@ -30,15 +30,15 @@ &.o-link-medium { --arrow-width: 5px; .o-link-suffix { - width: var(--o-icon_size-xs); - height: var(--o-icon_size-xs); + width: var(--o-icon_size_control-xs); + height: var(--o-icon_size_control-xs); } } &.o-link-large { --arrow-width: 6px; .o-link-suffix { - width: var(--o-icon_size-s); - height: var(--o-icon_size-s); + width: var(--o-icon_size_control-m); + height: var(--o-icon_size_control-m); } } @include respond-to('up-pad') { diff --git a/packages/portal-ak/src/ak/theme/select.scss b/packages/portal-ak/src/ak/theme/select.scss index 689250ed8480ea36571ab660039ba9549b4a6f8d..0d86187c0d47d3f4717a4c65949e866267a47bbd 100644 --- a/packages/portal-ak/src/ak/theme/select.scss +++ b/packages/portal-ak/src/ak/theme/select.scss @@ -29,7 +29,7 @@ } } .o-select-options { - --select-options-radius: var(--o-radius-m); + --select-options-radius: var(--o-radius_control-m); --select-options-max-height: 302px; } // 移动端响应式 @@ -56,7 +56,7 @@ } } > .o-icon { - font-size: var(--o-icon_size-xs); + font-size: var(--o-icon_size_control-xs); margin-right: 4px; } } diff --git a/packages/portal-ak/src/ak/theme/tab.scss b/packages/portal-ak/src/ak/theme/tab.scss index e2ad2da838a1cdc31974f7700b6ba4293e629dbb..d8e3c6a4aac065eca5978e84ae97cb7a87335fbb 100644 --- a/packages/portal-ak/src/ak/theme/tab.scss +++ b/packages/portal-ak/src/ak/theme/tab.scss @@ -19,10 +19,10 @@ padding: 0; > .o-icon { - font-size: var(--o-icon_size-s); + font-size: var(--o-icon_size_control-m); margin-right: 8px; @include respond-to('phone-pad') { - font-size: var(--o-icon_size-xs); + font-size: var(--o-icon_size_control-xs); } } } @@ -74,10 +74,10 @@ } > .o-icon { - font-size: var(--o-icon_size-m); + font-size: var(--o-icon_size_control-l); margin-right: 8px; @include respond-to('phone-pad') { - font-size: var(--o-icon_size-s); + font-size: var(--o-icon_size_control-m); } } } diff --git a/packages/portal-ak/src/ak/theme/table.scss b/packages/portal-ak/src/ak/theme/table.scss index b592c8a24e0d54539faebfc2554b1e0753cf0df9..d27a5bcb4f41203a3f21e24a8fab67a99ad14d54 100644 --- a/packages/portal-ak/src/ak/theme/table.scss +++ b/packages/portal-ak/src/ak/theme/table.scss @@ -28,7 +28,7 @@ --table-text-height: var(--o-line_height-tip2); --table-cell-padding: 8px 12px 7px; - --table-radius: var(--o-radius_control-s); + --table-radius: var(--o-radius_control-xs); } } @@ -54,7 +54,7 @@ --table-text-size: var(--o-font_size-tip2); --table-text-height: var(--o-line_height-tip2); - --table-radius: var(--o-radius_control-s); + --table-radius: var(--o-radius_control-xs); } } .o-table-border-all, diff --git a/packages/portal-ak/src/ak/theme/toggle.scss b/packages/portal-ak/src/ak/theme/toggle.scss index d9a8c9bf70951b97904790511a19acc27c6f720b..234f146b9250ffd8038602176f8414819775c002 100644 --- a/packages/portal-ak/src/ak/theme/toggle.scss +++ b/packages/portal-ak/src/ak/theme/toggle.scss @@ -12,7 +12,7 @@ .o-toggle { --toggle-text-size: var(--o-font_size-tip2); --toggle-text-height: var(--o-line_height-tip2); - --toggle-icon-size: var(--o-icon_size-xs); + --toggle-icon-size: var(--o-icon_size_control-xs); --toggle-padding: 0 11px; } } diff --git a/packages/portal/src/assets/style/a.dark.token.css b/packages/portal/src/assets/style/a.dark.token.css index fd9d6c352cacac60efcaf598950022234c31b69a..e819000b9805e9e7620d8430bf0e8222f027b1cb 100644 --- a/packages/portal/src/assets/style/a.dark.token.css +++ b/packages/portal/src/assets/style/a.dark.token.css @@ -1488,7 +1488,7 @@ * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ --o-control_size-2xs: 14px; /** @@ -1534,68 +1534,96 @@ */ --o-control_size-2xl: 56px; /** - * @name 小尺寸图标 + * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 */ - --o-icon_size-2xs: 14px; + --o-icon_size-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸图标 */ - --o-icon_size-xs: 16px; + --o-icon_size-s: 20px; /** - * @name 小尺寸图标 + * @name 中尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 中尺寸图标 */ - --o-icon_size-s: 24px; + --o-icon_size-m: 24px; /** - * @name 小尺寸图标 + * @name 大尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 大尺寸图标 */ - --o-icon_size-m: 32px; + --o-icon_size-l: 32px; /** - * @name 大尺寸图标 + * @name 超大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 超大尺寸图标 */ - --o-icon_size-l: 40px; + --o-icon_size-xl: 40px; /** - * @name 大尺寸图标 + * @name 2xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 2xl尺寸图标 */ - --o-icon_size-xl: 48px; + --o-icon_size-2xl: 48px; /** - * @name 大尺寸图标 + * @name 3xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 3xl尺寸图标 */ - --o-icon_size-2xl: 64px; + --o-icon_size-3xl: 56px; /** - * @name 大尺寸图标 + * @name 4xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 4xl尺寸图标 */ - --o-icon_size-3xl: 72px; + --o-icon_size-4xl: 64px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 超小尺寸控件图标(组件使用) + */ + --o-icon_size_control-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸控件图标(组件使用) + */ + --o-icon_size_control-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸控件图标(组件使用) + */ + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-4xl: 96px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font @@ -1798,14 +1826,21 @@ * @group radius * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: 8px; + --o-radius_control-m: 12px; /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角(组件使用) */ - --o-radius_control-s: 4px; + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 + * @type size + * @group radius + * @description 超小尺寸控件圆角(组件使用) + */ + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/portal/src/assets/style/a.light.token.css b/packages/portal/src/assets/style/a.light.token.css index 0ce8c6f1611a8dbf7651a58dbf58c3e16e83380b..5c9ccf9f37ffa6388c01de320732f5fcd4266bc0 100644 --- a/packages/portal/src/assets/style/a.light.token.css +++ b/packages/portal/src/assets/style/a.light.token.css @@ -1259,7 +1259,7 @@ * @group control * @description 禁用,常用于边框 */ - --o-color-control4: rgba(var(--o-mixedgray-14), 0.15); + --o-color-control4: rgba(var(--o-mixedgray-14), 0.1); /** * @name * @type color @@ -1488,7 +1488,7 @@ * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ --o-control_size-2xs: 14px; /** @@ -1534,68 +1534,96 @@ */ --o-control_size-2xl: 56px; /** - * @name 小尺寸图标 + * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 */ - --o-icon_size-2xs: 14px; + --o-icon_size-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸图标 */ - --o-icon_size-xs: 16px; + --o-icon_size-s: 20px; /** - * @name 小尺寸图标 + * @name 中尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 中尺寸图标 */ - --o-icon_size-s: 24px; + --o-icon_size-m: 24px; /** - * @name 小尺寸图标 + * @name 大尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 大尺寸图标 */ - --o-icon_size-m: 32px; + --o-icon_size-l: 32px; /** - * @name 大尺寸图标 + * @name 超大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 超大尺寸图标 */ - --o-icon_size-l: 40px; + --o-icon_size-xl: 40px; /** - * @name 大尺寸图标 + * @name 2xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 2xl尺寸图标 */ - --o-icon_size-xl: 48px; + --o-icon_size-2xl: 48px; /** - * @name 大尺寸图标 + * @name 3xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 3xl尺寸图标 */ - --o-icon_size-2xl: 64px; + --o-icon_size-3xl: 56px; /** - * @name 大尺寸图标 + * @name 4xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 4xl尺寸图标 */ - --o-icon_size-3xl: 72px; + --o-icon_size-4xl: 64px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 超小尺寸控件图标(组件使用) + */ + --o-icon_size_control-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸控件图标(组件使用) + */ + --o-icon_size_control-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸控件图标(组件使用) + */ + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-4xl: 96px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font @@ -1798,14 +1826,21 @@ * @group radius * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: 8px; + --o-radius_control-m: 12px; /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角(组件使用) */ - --o-radius_control-s: 4px; + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 + * @type size + * @group radius + * @description 超小尺寸控件圆角(组件使用) + */ + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/portal/src/assets/style/k.dark.token.css b/packages/portal/src/assets/style/k.dark.token.css index 01b26a1b625841870c7bb9a8df92c33b54e745e7..973c137224e77bf7ff063405e4735767a64ecd70 100644 --- a/packages/portal/src/assets/style/k.dark.token.css +++ b/packages/portal/src/assets/style/k.dark.token.css @@ -1488,7 +1488,7 @@ * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ --o-control_size-2xs: 14px; /** @@ -1534,68 +1534,96 @@ */ --o-control_size-2xl: 56px; /** - * @name 小尺寸图标 + * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 */ - --o-icon_size-2xs: 14px; + --o-icon_size-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸图标 */ - --o-icon_size-xs: 16px; + --o-icon_size-s: 20px; /** - * @name 小尺寸图标 + * @name 中尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 中尺寸图标 */ - --o-icon_size-s: 24px; + --o-icon_size-m: 24px; /** - * @name 小尺寸图标 + * @name 大尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 大尺寸图标 */ - --o-icon_size-m: 32px; + --o-icon_size-l: 32px; /** - * @name 大尺寸图标 + * @name 超大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 超大尺寸图标 */ - --o-icon_size-l: 40px; + --o-icon_size-xl: 40px; /** - * @name 大尺寸图标 + * @name 2xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 2xl尺寸图标 */ - --o-icon_size-xl: 48px; + --o-icon_size-2xl: 48px; /** - * @name 大尺寸图标 + * @name 3xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 3xl尺寸图标 */ - --o-icon_size-2xl: 64px; + --o-icon_size-3xl: 56px; /** - * @name 大尺寸图标 + * @name 4xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 4xl尺寸图标 */ - --o-icon_size-3xl: 72px; + --o-icon_size-4xl: 64px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 超小尺寸控件图标(组件使用) + */ + --o-icon_size_control-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸控件图标(组件使用) + */ + --o-icon_size_control-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸控件图标(组件使用) + */ + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-4xl: 96px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font @@ -1763,49 +1791,56 @@ * @group radius * @description 小尺寸圆角 */ - --o-radius-s: 4px; + --o-radius-s: 8px; /** * @name 中尺寸圆角 * @type size * @group radius * @description 中尺寸圆角 */ - --o-radius-m: 4px; + --o-radius-m: 12px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角 */ - --o-radius-l: 4px; + --o-radius-l: 16px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角,一般用于卡片 */ - --o-radius-xl: 0px; + --o-radius-xl: 24px; /** * @name 大尺寸控件圆角 * @type size * @group radius * @description 大尺寸控件圆角(组件使用) */ - --o-radius_control-l: 4px; + --o-radius_control-l: 16px; /** * @name 中尺寸控件圆角 * @type size * @group radius * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: 4px; + --o-radius_control-m: 12px; /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角(组件使用) */ - --o-radius_control-s: 4px; + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 + * @type size + * @group radius + * @description 超小尺寸控件圆角(组件使用) + */ + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation diff --git a/packages/portal/src/assets/style/k.light.token.css b/packages/portal/src/assets/style/k.light.token.css index d8ab7d1a51f6be88a61182bb889df634421d9b6b..bf80547e7ecb656388d5d62db925a225af1dae78 100644 --- a/packages/portal/src/assets/style/k.light.token.css +++ b/packages/portal/src/assets/style/k.light.token.css @@ -1259,7 +1259,7 @@ * @group control * @description 禁用,常用于边框 */ - --o-color-control4: rgba(var(--o-gray-14), 0.15); + --o-color-control4: rgba(var(--o-gray-14), 0.1); /** * @name * @type color @@ -1488,7 +1488,7 @@ * @name 超小尺寸 * @type size * @group control_size - * @description 小尺寸 + * @description 超小尺寸 */ --o-control_size-2xs: 14px; /** @@ -1534,68 +1534,96 @@ */ --o-control_size-2xl: 56px; /** - * @name 小尺寸图标 + * @name 超小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 超小尺寸图标 */ - --o-icon_size-2xs: 14px; + --o-icon_size-xs: 16px; /** * @name 小尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 小尺寸图标 */ - --o-icon_size-xs: 16px; + --o-icon_size-s: 20px; /** - * @name 小尺寸图标 + * @name 中尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 中尺寸图标 */ - --o-icon_size-s: 24px; + --o-icon_size-m: 24px; /** - * @name 小尺寸图标 + * @name 大尺寸图标 * @type size * @group icon_size - * @description 小尺寸 + * @description 大尺寸图标 */ - --o-icon_size-m: 32px; + --o-icon_size-l: 32px; /** - * @name 大尺寸图标 + * @name 超大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 超大尺寸图标 */ - --o-icon_size-l: 40px; + --o-icon_size-xl: 40px; /** - * @name 大尺寸图标 + * @name 2xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 2xl尺寸图标 */ - --o-icon_size-xl: 48px; + --o-icon_size-2xl: 48px; /** - * @name 大尺寸图标 + * @name 3xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 3xl尺寸图标 */ - --o-icon_size-2xl: 64px; + --o-icon_size-3xl: 56px; /** - * @name 大尺寸图标 + * @name 4xl尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 4xl尺寸图标 */ - --o-icon_size-3xl: 72px; + --o-icon_size-4xl: 64px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 超小尺寸控件图标(组件使用) + */ + --o-icon_size_control-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸控件图标(组件使用) + */ + --o-icon_size_control-s: 20px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 中尺寸控件图标(组件使用) + */ + --o-icon_size_control-m: 24px; /** * @name 大尺寸图标 * @type size * @group icon_size - * @description 尺寸 + * @description 大尺寸控件图标(组件使用) + */ + --o-icon_size_control-l: 32px; + /** + * @name 超大尺寸图标 + * @type size + * @group icon_size + * @description 超大尺寸控件图标(组件使用) */ - --o-icon_size-4xl: 96px; + --o-icon_size_control-xl: 40px; /** * @name 一级数据展示 * @type font @@ -1763,49 +1791,56 @@ * @group radius * @description 小尺寸圆角 */ - --o-radius-s: 4px; + --o-radius-s: 8px; /** * @name 中尺寸圆角 * @type size * @group radius * @description 中尺寸圆角 */ - --o-radius-m: 4px; + --o-radius-m: 12px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角 */ - --o-radius-l: 4px; + --o-radius-l: 16px; /** * @name 大尺寸圆角 * @type size * @group radius * @description 大尺寸圆角,一般用于卡片 */ - --o-radius-xl: 0px; + --o-radius-xl: 24px; /** * @name 大尺寸控件圆角 * @type size * @group radius * @description 大尺寸控件圆角(组件使用) */ - --o-radius_control-l: 4px; + --o-radius_control-l: 16px; /** * @name 中尺寸控件圆角 * @type size * @group radius * @description 中尺寸控件圆角(组件使用) */ - --o-radius_control-m: 4px; + --o-radius_control-m: 12px; /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角(组件使用) */ - --o-radius_control-s: 4px; + --o-radius_control-s: 8px; + /** + * @name 超小尺寸控件圆角 + * @type size + * @group radius + * @description 超小尺寸控件圆角(组件使用) + */ + --o-radius_control-xs: 4px; /** * @name 持续时间 * @type animation