From 4a6bbf49015a1cfb2d6e92b352a3a6b9f1fefdb6 Mon Sep 17 00:00:00 2001 From: devin Date: Sun, 19 Feb 2023 12:31:52 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E6=98=BE=E7=A4=BAicons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/portal/src/pages/TheIcons.vue | 85 ++++++++++++++++++++++++ packages/portal/src/router.ts | 44 ++++++------ packages/portal/vite.config.ts | 2 +- packages/scripts/src/gen-icons/config.ts | 3 + 4 files changed, 114 insertions(+), 20 deletions(-) create mode 100644 packages/portal/src/pages/TheIcons.vue diff --git a/packages/portal/src/pages/TheIcons.vue b/packages/portal/src/pages/TheIcons.vue new file mode 100644 index 00000000..0b521627 --- /dev/null +++ b/packages/portal/src/pages/TheIcons.vue @@ -0,0 +1,85 @@ + + + diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts index 3cf315c7..7a7b8261 100644 --- a/packages/portal/src/router.ts +++ b/packages/portal/src/router.ts @@ -8,120 +8,126 @@ export const routes = [ label: '首页', component: TheHome, }, + { + path: '/icons', + name: 'Icons', + label: '图标', + component: () => import('./pages/TheIcons.vue'), + }, { path: '/button', name: 'Button', label: '按钮', - component: () => import('@demo/button/__demo__/IndexBtn.vue'), + component: () => import('@components/button/__demo__/IndexBtn.vue'), }, { path: '/link', name: 'Link', label: '链接', - component: () => import('@demo/link/__demo__/IndexLink.vue'), + component: () => import('@components/link/__demo__/IndexLink.vue'), }, { path: '/switch', name: 'Switch', label: '开关', - component: () => import('@demo/switch/__demo__/IndexSwitch.vue'), + component: () => import('@components/switch/__demo__/IndexSwitch.vue'), }, { path: '/resize-observer', name: 'ResizeObserver', label: 'resize监听', - component: () => import('@demo/resize-observer/__demo__/IndexResize.vue'), + component: () => import('@components/resize-observer/__demo__/IndexResize.vue'), }, { path: '/intersection-observer', name: 'IntersectionObserver', label: 'Intersection监听', - component: () => import('@demo/intersection-observer/__demo__/IndexIntersection.vue'), + component: () => import('@components/intersection-observer/__demo__/IndexIntersection.vue'), }, { path: '/child-only', name: 'ChildOnly', label: '只渲染一个子元素', - component: () => import('@demo/child-only/__demo__/IndexChildOnly.vue'), + component: () => import('@components/child-only/__demo__/IndexChildOnly.vue'), }, { path: '/popup', name: 'Popup', label: '弹层', - component: () => import('@demo/popup/__demo__/IndexPopup.vue'), + component: () => import('@components/popup/__demo__/IndexPopup.vue'), }, { path: '/popover', name: 'Popover', label: '弹出框', - component: () => import('@demo/popover/__demo__/IndexPopover.vue'), + component: () => import('@components/popover/__demo__/IndexPopover.vue'), }, { path: '/input', name: 'Input', label: '输入框', - component: () => import('@demo/input/__demo__/IndexInput.vue'), + component: () => import('@components/input/__demo__/IndexInput.vue'), }, { path: '/input-number', name: 'InputNumber', label: '数字输入框', - component: () => import('@demo/input-number/__demo__/IndexInputNumber.vue'), + component: () => import('@components/input-number/__demo__/IndexInputNumber.vue'), }, { path: '/textarea', name: 'Textarea', label: '文本域', - component: () => import('@demo/textarea/__demo__/IndexTextarea.vue'), + component: () => import('@components/textarea/__demo__/IndexTextarea.vue'), }, { path: '/select', name: 'Select', label: '下拉框', - component: () => import('@demo/select/__demo__/IndexSelect.vue'), + component: () => import('@components/select/__demo__/IndexSelect.vue'), }, { path: '/radio', name: 'Radio', label: '单选', - component: () => import('@demo/radio/__demo__/IndexRadio.vue'), + component: () => import('@components/radio/__demo__/IndexRadio.vue'), }, { path: '/checkbox', name: 'Checkbox', label: '多选', - component: () => import('@demo/checkbox/__demo__/IndexCheckbox.vue'), + component: () => import('@components/checkbox/__demo__/IndexCheckbox.vue'), }, { path: '/tabs', name: 'Tabs', label: '标签页', - component: () => import('@demo/tabs/__demo__/IndexTabs.vue'), + component: () => import('@components/tabs/__demo__/IndexTabs.vue'), }, { path: '/table', name: 'Table', label: '表格', - component: () => import('@demo/table/__demo__/IndexTable.vue'), + component: () => import('@components/table/__demo__/IndexTable.vue'), }, { path: '/pagination', name: 'Pagination', label: '分页', - component: () => import('@demo/pagination/__demo__/IndexPagination.vue'), + component: () => import('@components/pagination/__demo__/IndexPagination.vue'), }, { path: '/divider', name: 'Divider', label: '分割线', - component: () => import('@demo/divider/__demo__/IndexDivider.vue'), + component: () => import('@components/divider/__demo__/IndexDivider.vue'), }, { path: '/tag', name: 'Tag', label: '标签', - component: () => import('@demo/tag/__demo__/IndexTag.vue'), + component: () => import('@components/tag/__demo__/IndexTag.vue'), }, ]; diff --git a/packages/portal/vite.config.ts b/packages/portal/vite.config.ts index 597e4b93..6a097366 100644 --- a/packages/portal/vite.config.ts +++ b/packages/portal/vite.config.ts @@ -8,7 +8,7 @@ export default defineConfig({ resolve: { alias: { '@/': `${path.resolve(__dirname, './src')}/`, - '@demo': path.resolve(__dirname, '../opendesign/src/components'), + '@components': path.resolve(__dirname, '../opendesign/src/components'), }, }, }); diff --git a/packages/scripts/src/gen-icons/config.ts b/packages/scripts/src/gen-icons/config.ts index 38ae7dcd..27921add 100644 --- a/packages/scripts/src/gen-icons/config.ts +++ b/packages/scripts/src/gen-icons/config.ts @@ -27,6 +27,8 @@ const svgoConfig: Config = { params: { attrs: [ 'class', + 'path:fill:currentColor', + 'path:stroke:currentColor' ], }, }, @@ -46,6 +48,7 @@ const template = ({ name, componentName, svg, type }: { name: string, componentN import { defineComponent } from 'vue'; export default defineComponent({ name: '${componentName}', + svgType: '${type}', setup() { const classnames = ['o-icon', '${name}', 'type-${type}']; return { -- Gitee From 86ccc392302d3619670c76d63903c13239f54327 Mon Sep 17 00:00:00 2001 From: devin Date: Sun, 19 Feb 2023 12:51:14 +0800 Subject: [PATCH 2/8] =?UTF-8?q?=E5=A2=9E=E5=8A=A0normal=E5=B8=B8=E6=80=81?= =?UTF-8?q?=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/opendesign.token.code-snippets | 238 ++++++++++-------- .../src/components/style/dark.token.css | 91 +++++++ .../components/style/default-light.token.css | 28 +++ packages/opendesign/src/tokens/tokens.json | 61 ++++- packages/scripts/src/gen-tokens/index.ts | 2 +- 5 files changed, 307 insertions(+), 113 deletions(-) diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets index e4222b68..3ecf263a 100644 --- a/.vscode/opendesign.token.code-snippets +++ b/.vscode/opendesign.token.code-snippets @@ -3,7 +3,7 @@ "prefix": [ "--o-color-primary1" ], - "body": "var(--o-color-primary1)", + "body": "--o-color-primary1", "description": "常规色: 用于按钮、文本、链接强调状态时常规颜色[light: #002fa7, dark: #406fe7]", "scope": "css,scss,less" }, @@ -11,7 +11,7 @@ "prefix": [ "--o-color-primary2" ], - "body": "var(--o-color-primary2)", + "body": "--o-color-primary2", "description": "悬浮色: 用于按钮、文本、链接强调状态时悬浮颜色[light: #406fe7, dark: #5988ff]", "scope": "css,scss,less" }, @@ -19,31 +19,63 @@ "prefix": [ "--o-color-primary3" ], - "body": "var(--o-color-primary3)", - "description": "聚焦色: 用于按钮、文本、链接强调状态时聚焦颜色[light: #00288d, 'dark: #002fa7]", + "body": "--o-color-primary3", + "description": "聚焦色: 用于按钮、文本、链接强调状态时聚焦颜色[light: #00288d, dark: #002fa7]", "scope": "css,scss,less" }, "--o-color-primary4": { "prefix": [ "--o-color-primary4" ], - "body": "var(--o-color-primary4)", - "description": "禁用色: 用于按钮、文本、链接强调状态时禁用颜色[light: #b2c0e4, 'dark: #0c2360]", + "body": "--o-color-primary4", + "description": "禁用色: 用于按钮、文本、链接强调状态时禁用颜色[light: #b2c0e4, dark: #0c2360]", "scope": "css,scss,less" }, "--o-color-major1": { "prefix": [ "--o-color-major1" ], - "body": "var(--o-color-major1)", - "description": "常规色: 用于按钮、文本、链接major状态时文本颜色[light: #feb32a, 'dark: #feb32a]", + "body": "--o-color-major1", + "description": "常规色: 用于按钮、文本、链接major状态时文本颜色[light: #feb32a, dark: #feb32a]", + "scope": "css,scss,less" + }, + "--o-color-normal1": { + "prefix": [ + "--o-color-normal1" + ], + "body": "--o-color-normal1", + "description": "常规色: 用于按钮、文本、链接常态时常规颜色[light: var(--o-color-info1), dark: var(--o-color-info1)]", + "scope": "css,scss,less" + }, + "--o-color-normal2": { + "prefix": [ + "--o-color-normal2" + ], + "body": "--o-color-normal2", + "description": "悬浮色: 用于按钮、文本、链接常态时悬浮颜色[light: var(--o-color-primary2), dark: var(--o-color-primary2)]", + "scope": "css,scss,less" + }, + "--o-color-normal3": { + "prefix": [ + "--o-color-normal3" + ], + "body": "--o-color-normal3", + "description": "聚焦色: 用于按钮、文本、链接常态时聚焦颜色[light: var(--o-color-primary3), dark: var(--o-color-primary3)]", + "scope": "css,scss,less" + }, + "--o-color-normal4": { + "prefix": [ + "--o-color-normal4" + ], + "body": "--o-color-normal4", + "description": "禁用色: 用于按钮、文本、链接常态时禁用颜色[light: var(--o-color-info4), dark: var(--o-color-info4)]", "scope": "css,scss,less" }, "--o-color-success1": { "prefix": [ "--o-color-success1" ], - "body": "var(--o-color-success1)", + "body": "--o-color-success1", "description": "常规色: 用于按钮、文本、链接成功状态时常规颜色[light: #6dc335, dark: #6dc335]", "scope": "css,scss,less" }, @@ -51,7 +83,7 @@ "prefix": [ "--o-color-success2" ], - "body": "var(--o-color-success2)", + "body": "--o-color-success2", "description": "悬浮色: 用于按钮、文本、链接成功状态时悬浮颜色[light: #93e95b, dark: #93e95b]", "scope": "css,scss,less" }, @@ -59,7 +91,7 @@ "prefix": [ "--o-color-success3" ], - "body": "var(--o-color-success3)", + "body": "--o-color-success3", "description": "聚焦色: 用于按钮、文本、链接成功状态时聚焦颜色[light: #62af30, dark: #62af30]", "scope": "css,scss,less" }, @@ -67,7 +99,7 @@ "prefix": [ "--o-color-success4" ], - "body": "var(--o-color-success4)", + "body": "--o-color-success4", "description": "禁用色: 用于按钮、文本、链接成功状态时禁用颜色[light: #c5e7ae, dark: #355f1a]", "scope": "css,scss,less" }, @@ -75,7 +107,7 @@ "prefix": [ "--o-color-warning1" ], - "body": "var(--o-color-warning1)", + "body": "--o-color-warning1", "description": "常规色: 用于按钮、文本、链接告警状态时常规颜色[light: #ff8e36, dark: #ff8e36]", "scope": "css,scss,less" }, @@ -83,7 +115,7 @@ "prefix": [ "--o-color-warning2" ], - "body": "var(--o-color-warning2)", + "body": "--o-color-warning2", "description": "悬浮色: 用于按钮、文本、链接告警状态时悬浮颜色[light: #ffb45c, dark: #ffb45c]", "scope": "css,scss,less" }, @@ -91,7 +123,7 @@ "prefix": [ "--o-color-warning3" ], - "body": "var(--o-color-warning3)", + "body": "--o-color-warning3", "description": "聚焦色: 用于按钮、文本、链接告警状态时聚焦颜色[light: #ff801c, dark: #ff801c]", "scope": "css,scss,less" }, @@ -99,7 +131,7 @@ "prefix": [ "--o-color-warning4" ], - "body": "var(--o-color-warning4)", + "body": "--o-color-warning4", "description": "禁用色: 用于按钮、文本、链接告警状态时禁用颜色[light: #ffd2af, dark: #b54f00]", "scope": "css,scss,less" }, @@ -107,7 +139,7 @@ "prefix": [ "--o-color-danger1" ], - "body": "var(--o-color-danger1)", + "body": "--o-color-danger1", "description": "常规色: 用于按钮、文本、链接错误状态时常规颜色[light: #f3524d, dark: #f3524d]", "scope": "css,scss,less" }, @@ -115,7 +147,7 @@ "prefix": [ "--o-color-danger2" ], - "body": "var(--o-color-danger2)", + "body": "--o-color-danger2", "description": "悬浮色: 用于按钮、文本、链接错误状态时悬浮颜色[light: #ff7873, dark: #ff7873]", "scope": "css,scss,less" }, @@ -123,7 +155,7 @@ "prefix": [ "--o-color-danger3" ], - "body": "var(--o-color-danger3)", + "body": "--o-color-danger3", "description": "聚焦色: 用于按钮、文本、链接错误状态时聚焦颜色[light: #f13b35, dark: #f13b35]", "scope": "css,scss,less" }, @@ -131,7 +163,7 @@ "prefix": [ "--o-color-danger4" ], - "body": "var(--o-color-danger4)", + "body": "--o-color-danger4", "description": "禁用色: 用于按钮、文本、链接错误状态时禁用颜色[light: #fabab8, dark: #850d09]", "scope": "css,scss,less" }, @@ -139,7 +171,7 @@ "prefix": [ "--o-color-info1" ], - "body": "var(--o-color-info1)", + "body": "--o-color-info1", "description": "常规色: 用于按钮、文本、链接信息状态时常规颜色[light: #e5e5e5, dark: #242424]", "scope": "css,scss,less" }, @@ -147,7 +179,7 @@ "prefix": [ "--o-color-info2" ], - "body": "var(--o-color-info2)", + "body": "--o-color-info2", "description": "悬浮色: 用于按钮、文本、链接信息状态时悬浮颜色[light: #e5e8f0, dark: #2e2e2e]", "scope": "css,scss,less" }, @@ -155,15 +187,15 @@ "prefix": [ "--o-color-info3" ], - "body": "var(--o-color-info3)", - "description": "聚焦色: 用于按钮、文本、链接信息状态时聚焦颜色[light: #cccccc, 'dark: #1e1e1e]", + "body": "--o-color-info3", + "description": "聚焦色: 用于按钮、文本、链接信息状态时聚焦颜色[light: #cccccc, dark: #1e1e1e]", "scope": "css,scss,less" }, "--o-color-info4": { "prefix": [ "--o-color-info4" ], - "body": "var(--o-color-info4)", + "body": "--o-color-info4", "description": "禁用色: 用于按钮、文本、链接信息状态时禁用颜色[light: #f7f8fa, dark: #151515]", "scope": "css,scss,less" }, @@ -171,7 +203,7 @@ "prefix": [ "--o-color-bg1" ], - "body": "var(--o-color-bg1)", + "body": "--o-color-bg1", "description": "一级容器背景色: 用于页面整体背景色[light: #f5f6f8, dark: #121212]", "scope": "css,scss,less" }, @@ -179,15 +211,15 @@ "prefix": [ "--o-color-bg2" ], - "body": "var(--o-color-bg2)", - "description": "二级容器背景色: 用于区块、卡片、弹出框、tooltip背景色[light: #ffffff, 'dark: #1e1e1e]", + "body": "--o-color-bg2", + "description": "二级容器背景色: 用于区块、卡片、弹出框、tooltip背景色[light: #ffffff, dark: #1e1e1e]", "scope": "css,scss,less" }, "--o-color-bg3": { "prefix": [ "--o-color-bg3" ], - "body": "var(--o-color-bg3)", + "body": "--o-color-bg3", "description": "三级容器背景色: 用于区块卡片背景色[light: #f7f8fa, dark: #242424]", "scope": "css,scss,less" }, @@ -195,7 +227,7 @@ "prefix": [ "--o-color-bg4" ], - "body": "var(--o-color-bg4)", + "body": "--o-color-bg4", "description": "四级容器背景色: 用于区块、卡片、表头背景色[light: #e5e8f0, dark: #2e2e2e]", "scope": "css,scss,less" }, @@ -203,7 +235,7 @@ "prefix": [ "--o-color-text1" ], - "body": "var(--o-color-text1)", + "body": "--o-color-text1", "description": "标题色: 用于强调、标题颜色[light: #000000, dark: #ffffff]", "scope": "css,scss,less" }, @@ -211,7 +243,7 @@ "prefix": [ "--o-color-text1-inverse" ], - "body": "var(--o-color-text1-inverse)", + "body": "--o-color-text1-inverse", "description": "标题反色: 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题[light: #ffffff, dark: #000000]", "scope": "css,scss,less" }, @@ -219,15 +251,15 @@ "prefix": [ "--o-color-text2" ], - "body": "var(--o-color-text2)", - "description": "正文色: 用于次强调、次级标题、正文颜色[light: #3f3f3f, 'dark: #e5e5e5]", + "body": "--o-color-text2", + "description": "正文色: 用于次强调、次级标题、正文颜色[light: #3f3f3f, dark: #e5e5e5]", "scope": "css,scss,less" }, "--o-color-text2-inverse": { "prefix": [ "--o-color-text2-inverse" ], - "body": "var(--o-color-text2-inverse)", + "body": "--o-color-text2-inverse", "description": "正文反色: 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文[light: #e5e5e5, dark: #3f3f3f]", "scope": "css,scss,less" }, @@ -235,15 +267,15 @@ "prefix": [ "--o-color-text3" ], - "body": "var(--o-color-text3)", - "description": "提示色: 用于提示文本颜色[light: #707070, 'dark: #b2b2b2]", + "body": "--o-color-text3", + "description": "提示色: 用于提示文本颜色[light: #707070, dark: #b2b2b2]", "scope": "css,scss,less" }, "--o-color-text3-inverse": { "prefix": [ "--o-color-text3-inverse" ], - "body": "var(--o-color-text3-inverse)", + "body": "--o-color-text3-inverse", "description": "提示反色: 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示[light: #b2b2b2, dark: #707070]", "scope": "css,scss,less" }, @@ -251,7 +283,7 @@ "prefix": [ "--o-color-text4" ], - "body": "var(--o-color-text4)", + "body": "--o-color-text4", "description": "置灰色: 用于禁用文本颜色[light: #cccccc, dark: #555555]", "scope": "css,scss,less" }, @@ -259,7 +291,7 @@ "prefix": [ "--o-color-text4-inverse" ], - "body": "var(--o-color-text4-inverse)", + "body": "--o-color-text4-inverse", "description": "置灰反色: 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本[light: #e5e5e5, dark: #2d2d2d]", "scope": "css,scss,less" }, @@ -267,7 +299,7 @@ "prefix": [ "--o-color-border1" ], - "body": "var(--o-color-border1)", + "body": "--o-color-border1", "description": "边框色: 较明显的边框[light: #707070, dark: #b2b2b2]", "scope": "css,scss,less" }, @@ -275,7 +307,7 @@ "prefix": [ "--o-color-border2" ], - "body": "var(--o-color-border2)", + "body": "--o-color-border2", "description": "弱边框色: 较弱的边框[light: #e5e5e5, dark: #2d2d2d]", "scope": "css,scss,less" }, @@ -283,7 +315,7 @@ "prefix": [ "--o-color-division1" ], - "body": "var(--o-color-division1)", + "body": "--o-color-division1", "description": "分隔线色1: 用于分隔线颜色[light: #707070, dark: #b2b2b2]", "scope": "css,scss,less" }, @@ -291,23 +323,23 @@ "prefix": [ "--o-color-mask1" ], - "body": "var(--o-color-mask1)", - "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5), 'dark: rgba(0, 0, 0, 0.5)]", + "body": "--o-color-mask1", + "description": "遮罩色1: 用于弹窗遮罩色[light: rgba(0, 0, 0, 0.5), dark: rgba(0, 0, 0, 0.5)]", "scope": "css,scss,less" }, "--o-color-mask2": { "prefix": [ "--o-color-mask2" ], - "body": "var(--o-color-mask2)", - "description": "遮罩色2: 用于loading遮罩色[light: rgba(0, 0, 0, 0.1), 'dark: rgba(0, 0, 0, 0.1)]", + "body": "--o-color-mask2", + "description": "遮罩色2: 用于loading遮罩色[light: rgba(0, 0, 0, 0.1), dark: rgba(0, 0, 0, 0.1)]", "scope": "css,scss,less" }, "--o-shadow-1": { "prefix": [ "--o-shadow-1" ], - "body": "var(--o-shadow-1)", + "body": "--o-shadow-1", "description": "阴影1: 用于卡片、小弹窗、楼层阴影[light: 0 1px 5px rgba(45, 47, 51, 0.1), dark: 0 1px 7px rgba(0, 0, 0, 0.3)]", "scope": "css,scss,less" }, @@ -315,7 +347,7 @@ "prefix": [ "--o-shadow-2" ], - "body": "var(--o-shadow-2)", + "body": "--o-shadow-2", "description": "阴影2: 用于卡片悬浮阴影[light: 0 6px 18px rgba(0, 47, 167, 0.14), dark: 0 6px 18px rgba(0, 0, 0, 0.42)]", "scope": "css,scss,less" }, @@ -323,7 +355,7 @@ "prefix": [ "--o-shadow-3" ], - "body": "var(--o-shadow-3)", + "body": "--o-shadow-3", "description": "阴影3: 用于提示阴影[light: 0 10px 32px rgba(45, 47, 51, 0.18), dark: 0 10px 32px rgba(0, 0, 0, 0.54)]", "scope": "css,scss,less" }, @@ -331,7 +363,7 @@ "prefix": [ "--o-gap-1" ], - "body": "var(--o-gap-1)", + "body": "--o-gap-1", "description": "间距1: 用于组件之间的间距1[light: 4px, dark: 4px]", "scope": "css,scss,less" }, @@ -339,7 +371,7 @@ "prefix": [ "--o-gap-2" ], - "body": "var(--o-gap-2)", + "body": "--o-gap-2", "description": "间距2: 用于组件之间的间距2[light: 8px, dark: 8px]", "scope": "css,scss,less" }, @@ -347,7 +379,7 @@ "prefix": [ "--o-gap-3" ], - "body": "var(--o-gap-3)", + "body": "--o-gap-3", "description": "间距3: 用于组件之间的间距3[light: 12px, dark: 12px]", "scope": "css,scss,less" }, @@ -355,7 +387,7 @@ "prefix": [ "--o-gap-4" ], - "body": "var(--o-gap-4)", + "body": "--o-gap-4", "description": "间距4: 用于组件之间的间距4[light: 16px, dark: 16px]", "scope": "css,scss,less" }, @@ -363,7 +395,7 @@ "prefix": [ "--o-gap-5" ], - "body": "var(--o-gap-5)", + "body": "--o-gap-5", "description": "间距5: 用于组件之间的间距5[light: 24px, dark: 24px]", "scope": "css,scss,less" }, @@ -371,7 +403,7 @@ "prefix": [ "--o-gap-6" ], - "body": "var(--o-gap-6)", + "body": "--o-gap-6", "description": "间距6: 用于组件之间的间距6[light: 32px, dark: 32px]", "scope": "css,scss,less" }, @@ -379,7 +411,7 @@ "prefix": [ "--o-gap-7" ], - "body": "var(--o-gap-7)", + "body": "--o-gap-7", "description": "间距7: 用于组件之间的间距7[light: 40px, dark: 40px]", "scope": "css,scss,less" }, @@ -387,7 +419,7 @@ "prefix": [ "--o-gap-8" ], - "body": "var(--o-gap-8)", + "body": "--o-gap-8", "description": "间距8: 用于组件之间的间距8[light: 64px, dark: 64px]", "scope": "css,scss,less" }, @@ -395,7 +427,7 @@ "prefix": [ "--o-size-l" ], - "body": "var(--o-size-l)", + "body": "--o-size-l", "description": "大尺寸: 尺寸[light: 40px, dark: 40px]", "scope": "css,scss,less" }, @@ -403,7 +435,7 @@ "prefix": [ "--o-size-m" ], - "body": "var(--o-size-m)", + "body": "--o-size-m", "description": "中尺寸: 尺寸[light: 32px, dark: 32px]", "scope": "css,scss,less" }, @@ -411,7 +443,7 @@ "prefix": [ "--o-size-s" ], - "body": "var(--o-size-s)", + "body": "--o-size-s", "description": "小尺寸: 小尺寸[light: 24px, dark: 24px]", "scope": "css,scss,less" }, @@ -419,7 +451,7 @@ "prefix": [ "--o-icon_size-l" ], - "body": "var(--o-icon_size-l)", + "body": "--o-icon_size-l", "description": "大尺寸图标: 尺寸[light: 48px, dark: 48px]", "scope": "css,scss,less" }, @@ -427,7 +459,7 @@ "prefix": [ "--o-icon_size-m" ], - "body": "var(--o-icon_size-m)", + "body": "--o-icon_size-m", "description": "中尺寸图标: 尺寸[light: 32px, dark: 32px]", "scope": "css,scss,less" }, @@ -435,7 +467,7 @@ "prefix": [ "--o-icon_size-s" ], - "body": "var(--o-icon_size-s)", + "body": "--o-icon_size-s", "description": "小尺寸图标: 小尺寸[light: 24px, dark: 24px]", "scope": "css,scss,less" }, @@ -443,7 +475,7 @@ "prefix": [ "--o-icon_size-xs" ], - "body": "var(--o-icon_size-xs)", + "body": "--o-icon_size-xs", "description": "超小尺寸图标: 小尺寸[light: 16px, dark: 16px]", "scope": "css,scss,less" }, @@ -451,7 +483,7 @@ "prefix": [ "--o-font_size-display1" ], - "body": "var(--o-font_size-display1)", + "body": "--o-font_size-display1", "description": "一级数据展示: 一级数据展示[light: 64px, dark: 64px]", "scope": "css,scss,less" }, @@ -459,7 +491,7 @@ "prefix": [ "--o-font_size-display2" ], - "body": "var(--o-font_size-display2)", + "body": "--o-font_size-display2", "description": "二级数据展示: 二级数据展示[light: 54px, dark: 54px]", "scope": "css,scss,less" }, @@ -467,7 +499,7 @@ "prefix": [ "--o-font_size-display3" ], - "body": "var(--o-font_size-display3)", + "body": "--o-font_size-display3", "description": "三级数据展示: 三级数据展示[light: 36px, dark: 36px]", "scope": "css,scss,less" }, @@ -475,7 +507,7 @@ "prefix": [ "--o-font_size-display4" ], - "body": "var(--o-font_size-display4)", + "body": "--o-font_size-display4", "description": "四级数据展示: 四级数据展示[light: 28px, dark: 28px]", "scope": "css,scss,less" }, @@ -483,7 +515,7 @@ "prefix": [ "--o-font_size-h1" ], - "body": "var(--o-font_size-h1)", + "body": "--o-font_size-h1", "description": "一级标题: 一级标题[light: 24px, dark: 24px]", "scope": "css,scss,less" }, @@ -491,7 +523,7 @@ "prefix": [ "--o-font_size-h2" ], - "body": "var(--o-font_size-h2)", + "body": "--o-font_size-h2", "description": "二级标题: 二级标题[light: 20px, dark: 20px]", "scope": "css,scss,less" }, @@ -499,7 +531,7 @@ "prefix": [ "--o-font_size-h3" ], - "body": "var(--o-font_size-h3)", + "body": "--o-font_size-h3", "description": "三级标题: 三级标题[light: 18px, dark: 18px]", "scope": "css,scss,less" }, @@ -507,7 +539,7 @@ "prefix": [ "--o-font_size-h4" ], - "body": "var(--o-font_size-h4)", + "body": "--o-font_size-h4", "description": "四级标题: 四级标题[light: 16px, dark: 16px]", "scope": "css,scss,less" }, @@ -515,7 +547,7 @@ "prefix": [ "--o-font_size-text" ], - "body": "var(--o-font_size-text)", + "body": "--o-font_size-text", "description": "正文: 正文[light: 14px, dark: 14px]", "scope": "css,scss,less" }, @@ -523,7 +555,7 @@ "prefix": [ "--o-font_size-tip1" ], - "body": "var(--o-font_size-tip1)", + "body": "--o-font_size-tip1", "description": "提示文本1: 提示文本1[light: 12px, dark: 12px]", "scope": "css,scss,less" }, @@ -531,7 +563,7 @@ "prefix": [ "--o-font_size-tip2" ], - "body": "var(--o-font_size-tip2)", + "body": "--o-font_size-tip2", "description": "提示文本2: 提示文本2[light: 10px, dark: 10px]", "scope": "css,scss,less" }, @@ -539,7 +571,7 @@ "prefix": [ "--o-line_height-display1" ], - "body": "var(--o-line_height-display1)", + "body": "--o-line_height-display1", "description": "一级数据展示: 一级数据展示[light: 84px, dark: 84px]", "scope": "css,scss,less" }, @@ -547,7 +579,7 @@ "prefix": [ "--o-line_height-display2" ], - "body": "var(--o-line_height-display2)", + "body": "--o-line_height-display2", "description": "二级数据展示: 二级数据展示[light: 76px, dark: 76px]", "scope": "css,scss,less" }, @@ -555,7 +587,7 @@ "prefix": [ "--o-line_height-display3" ], - "body": "var(--o-line_height-display3)", + "body": "--o-line_height-display3", "description": "三级数据展示: 三级数据展示[light: 48px, dark: 48px]", "scope": "css,scss,less" }, @@ -563,7 +595,7 @@ "prefix": [ "--o-line_height-display4" ], - "body": "var(--o-line_height-display4)", + "body": "--o-line_height-display4", "description": "四级数据展示: 四级数据展示[light: 36px, dark: 36px]", "scope": "css,scss,less" }, @@ -571,7 +603,7 @@ "prefix": [ "--o-line_height-h1" ], - "body": "var(--o-line_height-h1)", + "body": "--o-line_height-h1", "description": "一级标题: 一级标题[light: 32px, dark: 32px]", "scope": "css,scss,less" }, @@ -579,7 +611,7 @@ "prefix": [ "--o-line_height-h2" ], - "body": "var(--o-line_height-h2)", + "body": "--o-line_height-h2", "description": "二级标题: 二级标题[light: 28px, dark: 28px]", "scope": "css,scss,less" }, @@ -587,7 +619,7 @@ "prefix": [ "--o-line_height-h3" ], - "body": "var(--o-line_height-h3)", + "body": "--o-line_height-h3", "description": "三级标题: 三级标题[light: 26px, dark: 26px]", "scope": "css,scss,less" }, @@ -595,7 +627,7 @@ "prefix": [ "--o-line_height-h4" ], - "body": "var(--o-line_height-h4)", + "body": "--o-line_height-h4", "description": "四级标题: 四级标题[light: 24px, dark: 24px]", "scope": "css,scss,less" }, @@ -603,7 +635,7 @@ "prefix": [ "--o-line_height-text" ], - "body": "var(--o-line_height-text)", + "body": "--o-line_height-text", "description": "正文: 正文[light: 22px, dark: 22px]", "scope": "css,scss,less" }, @@ -611,7 +643,7 @@ "prefix": [ "--o-line_height-tip1" ], - "body": "var(--o-line_height-tip1)", + "body": "--o-line_height-tip1", "description": "提示文本1: 提示文本1[light: 18px, dark: 18px]", "scope": "css,scss,less" }, @@ -619,7 +651,7 @@ "prefix": [ "--o-line_height-tip2" ], - "body": "var(--o-line_height-tip2)", + "body": "--o-line_height-tip2", "description": "提示文本2: 提示文本2[light: 14px, dark: 14px]", "scope": "css,scss,less" }, @@ -627,7 +659,7 @@ "prefix": [ "--o-radius-l" ], - "body": "var(--o-radius-l)", + "body": "--o-radius-l", "description": "大尺寸圆角: 大尺寸圆角[light: 16px, dark: 16px]", "scope": "css,scss,less" }, @@ -635,7 +667,7 @@ "prefix": [ "--o-radius-m" ], - "body": "var(--o-radius-m)", + "body": "--o-radius-m", "description": "中尺寸圆角: 中尺寸圆角[light: 8px, dark: 8px]", "scope": "css,scss,less" }, @@ -643,7 +675,7 @@ "prefix": [ "--o-radius-s" ], - "body": "var(--o-radius-s)", + "body": "--o-radius-s", "description": "小尺寸圆角: 小尺寸圆角[light: 4px, dark: 4px]", "scope": "css,scss,less" }, @@ -651,7 +683,7 @@ "prefix": [ "--o-duration-s" ], - "body": "var(--o-duration-s)", + "body": "--o-duration-s", "description": "持续时间: 用于退出屏幕的动画[light: 200ms, dark: 200ms]", "scope": "css,scss,less" }, @@ -659,7 +691,7 @@ "prefix": [ "--o-duration-m1" ], - "body": "var(--o-duration-m1)", + "body": "--o-duration-m1", "description": "持续时间: 用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]", "scope": "css,scss,less" }, @@ -667,7 +699,7 @@ "prefix": [ "--o-duration-m2" ], - "body": "var(--o-duration-m2)", + "body": "--o-duration-m2", "description": "持续时间: 用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]", "scope": "css,scss,less" }, @@ -675,7 +707,7 @@ "prefix": [ "--o-duration-m3" ], - "body": "var(--o-duration-m3)", + "body": "--o-duration-m3", "description": "持续时间: 用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]", "scope": "css,scss,less" }, @@ -683,7 +715,7 @@ "prefix": [ "--o-duration-l" ], - "body": "var(--o-duration-l)", + "body": "--o-duration-l", "description": "持续时间: 用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]", "scope": "css,scss,less" }, @@ -691,7 +723,7 @@ "prefix": [ "--o-duration-xl" ], - "body": "var(--o-duration-xl)", + "body": "--o-duration-xl", "description": "持续时间: 用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]", "scope": "css,scss,less" }, @@ -699,7 +731,7 @@ "prefix": [ "--o-easing-linear" ], - "body": "var(--o-easing-linear)", + "body": "--o-easing-linear", "description": "线性动画曲线: 线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]", "scope": "css,scss,less" }, @@ -707,7 +739,7 @@ "prefix": [ "--o-easing-standard" ], - "body": "var(--o-easing-standard)", + "body": "--o-easing-standard", "description": "动画曲线: 用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]", "scope": "css,scss,less" }, @@ -715,7 +747,7 @@ "prefix": [ "--o-easing-standard-in" ], - "body": "var(--o-easing-standard-in)", + "body": "--o-easing-standard-in", "description": "动画曲线: 用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]", "scope": "css,scss,less" }, @@ -723,7 +755,7 @@ "prefix": [ "--o-easing-standard-out" ], - "body": "var(--o-easing-standard-out)", + "body": "--o-easing-standard-out", "description": "动画曲线: 用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]", "scope": "css,scss,less" }, @@ -731,7 +763,7 @@ "prefix": [ "--o-easing-emphasized" ], - "body": "var(--o-easing-emphasized)", + "body": "--o-easing-emphasized", "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]", "scope": "css,scss,less" }, @@ -739,7 +771,7 @@ "prefix": [ "--o-easing-emphasized-in" ], - "body": "var(--o-easing-emphasized-in)", + "body": "--o-easing-emphasized-in", "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]", "scope": "css,scss,less" }, @@ -747,7 +779,7 @@ "prefix": [ "--o-easing-emphasized-out" ], - "body": "var(--o-easing-emphasized-out)", + "body": "--o-easing-emphasized-out", "description": "动画曲线: 用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: cubic-bezier(0.05, 0.7, 0.1, 1)]", "scope": "css,scss,less" } diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css index 6054226e..d6afd92c 100644 --- a/packages/opendesign/src/components/style/dark.token.css +++ b/packages/opendesign/src/components/style/dark.token.css @@ -14,6 +14,55 @@ * @description 用于按钮、文本、链接强调状态时悬浮颜色 */ --o-color-primary2: #5988ff; + /** + * @name 聚焦色 + * @type color + * @group primary + * @description 用于按钮、文本、链接强调状态时聚焦颜色 + */ + --o-color-primary3: #002fa7; + /** + * @name 禁用色 + * @type color + * @group primary + * @description 用于按钮、文本、链接强调状态时禁用颜色 + */ + --o-color-primary4: #0c2360; + /** + * @name 常规色 + * @type color + * @group major + * @description 用于按钮、文本、链接major状态时文本颜色 + */ + --o-color-major1: #feb32a; + /** + * @name 常规色 + * @type color + * @group normal + * @description 用于按钮、文本、链接常态时常规颜色 + */ + --o-color-normal1: var(--o-color-info1); + /** + * @name 悬浮色 + * @type color + * @group normal + * @description 用于按钮、文本、链接常态时悬浮颜色 + */ + --o-color-normal2: var(--o-color-primary2); + /** + * @name 聚焦色 + * @type color + * @group normal + * @description 用于按钮、文本、链接常态时聚焦颜色 + */ + --o-color-normal3: var(--o-color-primary3); + /** + * @name 禁用色 + * @type color + * @group normal + * @description 用于按钮、文本、链接常态时禁用颜色 + */ + --o-color-normal4: var(--o-color-info4); /** * @name 常规色 * @type color @@ -112,6 +161,13 @@ * @description 用于按钮、文本、链接信息状态时悬浮颜色 */ --o-color-info2: #2e2e2e; + /** + * @name 聚焦色 + * @type color + * @group info + * @description 用于按钮、文本、链接信息状态时聚焦颜色 + */ + --o-color-info3: #1e1e1e; /** * @name 禁用色 * @type color @@ -126,6 +182,13 @@ * @description 用于页面整体背景色 */ --o-color-bg1: #121212; + /** + * @name 二级容器背景色 + * @type color + * @group background + * @description 用于区块、卡片、弹出框、tooltip背景色 + */ + --o-color-bg2: #1e1e1e; /** * @name 三级容器背景色 * @type color @@ -154,6 +217,13 @@ * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题 */ --o-color-text1-inverse: #000000; + /** + * @name 正文色 + * @type color + * @group text + * @description 用于次强调、次级标题、正文颜色 + */ + --o-color-text2: #e5e5e5; /** * @name 正文反色 * @type color @@ -161,6 +231,13 @@ * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文 */ --o-color-text2-inverse: #3f3f3f; + /** + * @name 提示色 + * @type color + * @group text + * @description 用于提示文本颜色 + */ + --o-color-text3: #b2b2b2; /** * @name 提示反色 * @type color @@ -203,6 +280,20 @@ * @description 用于分隔线颜色 */ --o-color-division1: #b2b2b2; + /** + * @name 遮罩色1 + * @type color + * @group mask + * @description 用于弹窗遮罩色 + */ + --o-color-mask1: rgba(0, 0, 0, 0.5); + /** + * @name 遮罩色2 + * @type color + * @group mask + * @description 用于loading遮罩色 + */ + --o-color-mask2: rgba(0, 0, 0, 0.1); /** * @name 阴影1 * @type shadow diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css index 0677d8d0..0b64bf7d 100644 --- a/packages/opendesign/src/components/style/default-light.token.css +++ b/packages/opendesign/src/components/style/default-light.token.css @@ -36,6 +36,34 @@ * @description 用于按钮、文本、链接major状态时文本颜色 */ --o-color-major1: #feb32a; + /** + * @name 常规色 + * @type color + * @group normal + * @description 用于按钮、文本、链接常态时常规颜色 + */ + --o-color-normal1: var(--o-color-info1); + /** + * @name 悬浮色 + * @type color + * @group normal + * @description 用于按钮、文本、链接常态时悬浮颜色 + */ + --o-color-normal2: var(--o-color-primary2); + /** + * @name 聚焦色 + * @type color + * @group normal + * @description 用于按钮、文本、链接常态时聚焦颜色 + */ + --o-color-normal3: var(--o-color-primary3); + /** + * @name 禁用色 + * @type color + * @group normal + * @description 用于按钮、文本、链接常态时禁用颜色 + */ + --o-color-normal4: var(--o-color-info4); /** * @name 常规色 * @type color diff --git a/packages/opendesign/src/tokens/tokens.json b/packages/opendesign/src/tokens/tokens.json index fe7e48fe..b22c1656 100644 --- a/packages/opendesign/src/tokens/tokens.json +++ b/packages/opendesign/src/tokens/tokens.json @@ -28,7 +28,7 @@ "description": "用于按钮、文本、链接强调状态时聚焦颜色", "value": { "light": "#00288d", - "'dark": "#002fa7" + "dark": "#002fa7" } }, { @@ -37,7 +37,7 @@ "description": "用于按钮、文本、链接强调状态时禁用颜色", "value": { "light": "#b2c0e4", - "'dark": "#0c2360" + "dark": "#0c2360" } } ] @@ -53,7 +53,50 @@ "description": "用于按钮、文本、链接major状态时文本颜色", "value": { "light": "#feb32a", - "'dark": "#feb32a" + "dark": "#feb32a" + } + } + ] + }, + "normal": { + "name": "常态色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-normal1", + "name": "常规色", + "description": "用于按钮、文本、链接常态时常规颜色", + "value": { + "light": "var(--o-color-info1)", + "dark": "var(--o-color-info1)" + } + }, + { + "key": "color-normal2", + "name": "悬浮色", + "description": "用于按钮、文本、链接常态时悬浮颜色", + "value": { + "light": "var(--o-color-primary2)", + "dark": "var(--o-color-primary2)" + } + }, + { + "key": "color-normal3", + "name": "聚焦色", + "description": "用于按钮、文本、链接常态时聚焦颜色", + "value": { + "light": "var(--o-color-primary3)", + "dark": "var(--o-color-primary3)" + } + }, + { + "key": "color-normal4", + "name": "禁用色", + "description": "用于按钮、文本、链接常态时禁用颜色", + "value": { + "light": "var(--o-color-info4)", + "dark": "var(--o-color-info4)" } } ] @@ -216,7 +259,7 @@ "description": "用于按钮、文本、链接信息状态时聚焦颜色", "value": { "light": "#cccccc", - "'dark": "#1e1e1e" + "dark": "#1e1e1e" } }, { @@ -250,7 +293,7 @@ "description": "用于区块、卡片、弹出框、tooltip背景色", "value": { "light": "#ffffff", - "'dark": "#1e1e1e" + "dark": "#1e1e1e" } }, { @@ -302,7 +345,7 @@ "description": "用于次强调、次级标题、正文颜色", "value": { "light": "#3f3f3f", - "'dark": "#e5e5e5" + "dark": "#e5e5e5" } }, { @@ -320,7 +363,7 @@ "description": "用于提示文本颜色", "value": { "light": "#707070", - "'dark": "#b2b2b2" + "dark": "#b2b2b2" } }, { @@ -404,7 +447,7 @@ "description": "用于弹窗遮罩色", "value": { "light": "rgba(0, 0, 0, 0.5)", - "'dark": "rgba(0, 0, 0, 0.5)" + "dark": "rgba(0, 0, 0, 0.5)" } }, { @@ -413,7 +456,7 @@ "description": "用于loading遮罩色", "value": { "light": "rgba(0, 0, 0, 0.1)", - "'dark": "rgba(0, 0, 0, 0.1)" + "dark": "rgba(0, 0, 0, 0.1)" } } ] diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts index c4a87c6c..cf373dec 100644 --- a/packages/scripts/src/gen-tokens/index.ts +++ b/packages/scripts/src/gen-tokens/index.ts @@ -195,7 +195,7 @@ function generateCodeSnippets(tokens: Record, outFile: strin snippets[tokenKey] = { prefix: [tokenKey], - body: `var(${tokenKey})`, + body: tokenKey, description: desc, scope: 'css,scss,less' }; -- Gitee From e5071af554c41a931b59df721d5a7ff534d31d37 Mon Sep 17 00:00:00 2001 From: devin Date: Sun, 19 Feb 2023 15:54:00 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=86=99=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/opendesign.token.code-snippets | 6 +- packages/docs/global.md | 12 +- .../src/components/_shared/global.ts | 31 ++- .../src/components/button/OButton.vue | 72 ++++-- .../components/button/__demo__/BtnBasic.vue | 66 +++++ .../button/__demo__/BtnDisabled.vue | 16 -- .../components/button/__demo__/BtnRound.vue | 62 +++++ .../components/button/__demo__/BtnShape.vue | 29 --- .../components/button/__demo__/BtnSize.vue | 12 - .../components/button/__demo__/BtnType.vue | 13 - .../components/button/__demo__/IndexBtn.vue | 12 +- .../opendesign/src/components/button/index.ts | 2 +- .../src/components/button/style/index.scss | 244 ++++++++++++------ .../opendesign/src/components/button/types.ts | 48 +++- .../src/components/style/dark.token.css | 6 +- .../components/style/default-light.token.css | 6 +- .../src/icons/svgs/{stroke => fill}/add.svg | 0 .../svgs/{stroke => fill}/chevron-down.svg | 0 .../svgs/{stroke => fill}/chevron-left.svg | 0 .../svgs/{stroke => fill}/chevron-right.svg | 0 .../svgs/{stroke => fill}/chevron-up.svg | 0 .../src/icons/svgs/{stroke => fill}/done.svg | 0 .../icons/svgs/{stroke => fill}/ellipsis.svg | 0 .../icons/svgs/{stroke => fill}/filter.svg | 0 .../icons/svgs/{stroke => fill}/loading.svg | 0 .../src/icons/svgs/{stroke => fill}/minus.svg | 0 .../icons/svgs/{stroke => fill}/refresh.svg | 0 .../icons/svgs/{stroke => fill}/search.svg | 0 .../src/icons/svgs/{stroke => fill}/x.svg | 0 packages/opendesign/src/tokens/tokens.json | 12 +- packages/portal/src/App.vue | 2 +- 31 files changed, 439 insertions(+), 212 deletions(-) create mode 100644 packages/opendesign/src/components/button/__demo__/BtnBasic.vue delete mode 100644 packages/opendesign/src/components/button/__demo__/BtnDisabled.vue create mode 100644 packages/opendesign/src/components/button/__demo__/BtnRound.vue delete mode 100644 packages/opendesign/src/components/button/__demo__/BtnShape.vue delete mode 100644 packages/opendesign/src/components/button/__demo__/BtnSize.vue delete mode 100644 packages/opendesign/src/components/button/__demo__/BtnType.vue rename packages/opendesign/src/icons/svgs/{stroke => fill}/add.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/chevron-down.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/chevron-left.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/chevron-right.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/chevron-up.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/done.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/ellipsis.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/filter.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/loading.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/minus.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/refresh.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/search.svg (100%) rename packages/opendesign/src/icons/svgs/{stroke => fill}/x.svg (100%) diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets index 3ecf263a..84668efa 100644 --- a/.vscode/opendesign.token.code-snippets +++ b/.vscode/opendesign.token.code-snippets @@ -660,7 +660,7 @@ "--o-radius-l" ], "body": "--o-radius-l", - "description": "大尺寸圆角: 大尺寸圆角[light: 16px, dark: 16px]", + "description": "大尺寸圆角: 大尺寸圆角[light: 8px, dark: 8px]", "scope": "css,scss,less" }, "--o-radius-m": { @@ -668,7 +668,7 @@ "--o-radius-m" ], "body": "--o-radius-m", - "description": "中尺寸圆角: 中尺寸圆角[light: 8px, dark: 8px]", + "description": "中尺寸圆角: 中尺寸圆角[light: 4px, dark: 4px]", "scope": "css,scss,less" }, "--o-radius-s": { @@ -676,7 +676,7 @@ "--o-radius-s" ], "body": "--o-radius-s", - "description": "小尺寸圆角: 小尺寸圆角[light: 4px, dark: 4px]", + "description": "小尺寸圆角: 小尺寸圆角[light: 2px, dark: 2px]", "scope": "css,scss,less" }, "--o-duration-s": { diff --git a/packages/docs/global.md b/packages/docs/global.md index aaf6bca0..8ff23227 100644 --- a/packages/docs/global.md +++ b/packages/docs/global.md @@ -17,9 +17,9 @@ | initCloseIcon | (icon: Component) | -- | 设置全局关闭图标 | | initAddIcon | (icon: Component) | -- | 设置全局添加图标 | -| 方法名 | 参数 | 默认值 | -| :------ | :-------------------------------------- | :-------- | -| color | undefined primary success warning error | undefined | -| variant | fill outline text | outline | -| rounded | undefined string 'pill' | undefined | -| size | small medium large | medium | +| 方法名 | 参数 | 默认值 | +| :------ | :------------------------------------ | :-------- | +| color | normal primary success warning danger | normal | +| variant | fill outline text | outline | +| rounded | undefined string 'pill' | undefined | +| size | small normal large | normal | diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts index cdb820cc..37880a80 100644 --- a/packages/opendesign/src/components/_shared/global.ts +++ b/packages/opendesign/src/components/_shared/global.ts @@ -1,21 +1,36 @@ import { ref } from 'vue'; // 尺寸 -export type SizeT = 'large' | 'normal' | 'small'; -export const defaultSize = ref('normal'); -export function initSize(type: SizeT) { - defaultSize.value = type; +export type SizeT = 'large' | 'medium' | 'small'; +export const defaultSize = ref('medium'); +export function initSize(val: SizeT) { + defaultSize.value = val; } +// 圆角 +export type RoundT = 'pill' | string; +export const defaultRound = ref<{ m: string, s: string, l: string } | null>(); + +export function initRound(m: string, s: string, l: string) { + defaultRound.value = { + m, s, l + }; +} + +// 方向 +export type DirectionT = 'horizontal' | 'vertical'; + +export type VariantT = 'fill' | 'outline' | 'text'; + +export type ColorT = 'normal' | 'primary' | 'success' | 'warning' | 'danger'; + + +// todo 废弃 // 形状 export type ShapeT = 'round' | 'normal'; export const defaultShape = ref('normal'); export function initShape(type: ShapeT) { defaultShape.value = type; } - -// 方向 -export type DirectionT = 'horizontal' | 'vertical'; - // 状态 export type StatusT = 'normal' | 'primary' | 'warning' | 'danger' | 'success'; diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue index 19b6fba0..12c53fc2 100644 --- a/packages/opendesign/src/components/button/OButton.vue +++ b/packages/opendesign/src/components/button/OButton.vue @@ -1,31 +1,47 @@