diff --git a/.vscode/screen.code-snippets b/.vscode/screen.code-snippets new file mode 100644 index 0000000000000000000000000000000000000000..821994200d7d97306726b8064d4bb8c4bf9b3a6c --- /dev/null +++ b/.vscode/screen.code-snippets @@ -0,0 +1,212 @@ +{ + "(0, 600)": { + "prefix": ["w-600", "@include respond-to('phone')"], + "body": [ + "@include respond-to('phone') {", + " $1", + "}" + ], + "description": "(0, 600px)", + "scope": "scss, less" + }, + "(601, Inf)": { + "prefix": ["w600", "@include respond-to('>phone')"], + "body": [ + "@include respond-to('>phone') {", + " $1", + "}" + ], + "description": "(601px, Inf)", + "scope": "scss, less" + }, + "(601, 1200)": { + "prefix": ["w600-1200", "@include respond-to('pad')"], + "body": [ + "@include respond-to('pad') {", + " $1", + "}" + ], + "description": "(601px, 1200px)", + "scope": "scss, less" + }, + "(0, 1200)": { + "prefix": ["w-1200", "@include respond-to('<=pad')"], + "body": [ + "@include respond-to('<=pad') {", + " $1", + "}" + ], + "description": "(0, 1200px)", + "scope": "scss, less" + }, + "(1201, Inf)": { + "prefix": ["w1200", "@include respond-to('>pad')"], + "body": [ + "@include respond-to('>pad') {", + " $1", + "}" + ], + "description": "(1201px, Inf)", + "scope": "scss, less" + }, + "(601, 840)": { + "prefix": ["w600-840", "@include respond-to('pad_v')"], + "body": [ + "@include respond-to('pad_v') {", + " $1", + "}" + ], + "description": "(601px, 840px)", + "scope": "scss, less" + }, + "(0, 840)": { + "prefix": ["w-840", "@include respond-to('<=pad_v')"], + "body": [ + "@include respond-to('<=pad_v') {", + " $1", + "}" + ], + "description": "(0, 840px)", + "scope": "scss, less" + }, + "(841, Inf)": { + "prefix": ["w840", "@include respond-to('>pad_v')"], + "body": [ + "@include respond-to('>pad_v') {", + " $1", + "}" + ], + "description": "(841px, Inf)", + "scope": "scss, less" + }, + "(841, 1200)": { + "prefix": ["w840-1200", "@include respond-to('pad_h')"], + "body": [ + "@include respond-to('pad_h') {", + " $1", + "}" + ], + "description": "(841px, 1200px)", + "scope": "scss, less" + }, + "(1200, 1440)": { + "prefix": ["w1200-1440", "@include respond-to('laptop')"], + "body": [ + "@include respond-to('laptop') {", + " $1", + "}" + ], + "description": "(1200px, 1440px)", + "scope": "scss, less" + }, + "(0, 1440)": { + "prefix": ["w-1440", "@include respond-to('<=laptop')"], + "body": [ + "@include respond-to('<=laptop') {", + " $1", + "}" + ], + "description": "(0, 1440px)", + "scope": "scss, less" + }, + "(1441, Inf)": { + "prefix": ["w1440", "@include respond-to('>laptop')"], + "body": [ + "@include respond-to('>laptop') {", + " $1", + "}" + ], + "description": "(1441px, Inf)", + "scope": "scss, less" + }, + "(601, 1440)": { + "prefix": ["w600-1440", "@include responsd-to('pad-laptop')"], + "body": [ + "@include respond-to('pad-laptop') {", + " $1", + "}" + ], + "description": "(601px, 1440px)", + "scope": "scss, less" + }, + "(841, 1440)": { + "prefix": ["w840-1440", "@include responsd-to('pad_v-laptop')"], + "body": [ + "@include respond-to('pad_v-laptop') {", + " $1", + "}" + ], + "description": "(841px, 1440px)", + "scope": "scss, less" + }, + "(1441-1920)": { + "prefix": ["w1440-1920", "@include responsd-to('pc')"], + "body": [ + "@include respond-to('pc') {", + " $1", + "}" + ], + "description": "(1441-1920px)", + "scope": "scss, less" + }, + "(1441, 1680)": { + "prefix": ["w1440-1680", "@include responsd-to('pc_s')"], + "body": [ + "@include respond-to('pc_s') {", + " $1", + "}" + ], + "description": "(1441, 1680px)", + "scope": "scss, less" + }, + "(0, 1680)": { + "prefix": ["w-1680", "@include responsd-to('<=pc_s')"], + "body": [ + "@include respond-to('<=pc_s') {", + " $1", + "}" + ], + "description": "(0, 1680px)", + "scope": "scss, less" + }, + "(1681, 1920)": { + "prefix": ["w1680-1920", "@include responsd-to('pc_l')"], + "body": [ + "@include respond-to('pc_l') {", + " $1", + "}" + ], + "description": "(1681, 1920px)", + "scope": "scss, less" + }, + "(1681, Inf)": { + "prefix": ["w1680", "@include responsd-to('>pc_s')"], + "body": [ + "@include respond-to('>pc_s') {", + " $1", + "}" + ], + "description": "(1681px, Inf)", + "scope": "scss, less" + }, + "(1921, Inf)": { + "prefix": ["w1920", "@include responsd-to('>pc')"], + "body": [ + "@include respond-to('>pc') {", + " $1", + "}" + ], + "description": "(1921px, Inf)", + "scope": "scss, less" + }, + "(1201, 1680)": { + "prefix": ["w1200-1680", "@include responsd-to('laptop-pc_s')"], + "body": [ + "@include respond-to('laptop-pc_s') {", + " $1", + "}" + ], + "description": "(1201px, 1680px)", + "scope": "scss, less" + } +} diff --git a/package.json b/package.json index d9565ce90524582f5fc74cdbd90ad315c7d1031f..fa2b72ac2878915fcd6099cb44b408f99a092a38 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "dev": "pnpm -C packages/portal dev", "dev:ak": "pnpm -C packages/portal-ak dev", - "docs:install": "pnpm i && pnpm -C packages/scripts build && pnpm i && pnpm -C packages/opendesign build && pnpm -C packages/docs gen:api ", + "docs:install": "pnpm i && pnpm -C packages/scripts build && pnpm i && pnpm -C packages/opendesign gen:icon && pnpm -C packages/themes gen:tokens && pnpm -C packages/docs gen:icon && pnpm -C packages/docs gen:api ", "docs:dev": "pnpm -C packages/docs dev", "docs:build": "pnpm -C packages/docs build" }, diff --git a/packages/docs/plugins/injectDemoAndApi.ts b/packages/docs/plugins/injectDemoAndApi.ts index 426f1732fdd7302991e5b747a2c71660256834c0..97fdd90acce96ee4fab41746f70b75e713cb54c4 100644 --- a/packages/docs/plugins/injectDemoAndApi.ts +++ b/packages/docs/plugins/injectDemoAndApi.ts @@ -30,16 +30,29 @@ const resolveActiveTheme = (theme: string) => { if (_theme.startsWith(':')) { _theme = _theme.slice(1); } - if (['e', 'euler'].includes(_theme)) { - return 'e'; - } - if (['k', 'kunpeng'].includes(_theme)) { - return 'k'; - } - if (['a', 'ascend'].includes(_theme)) { - return 'a'; - } - return ''; + return Array.from( + new Set( + _theme + .split('|') + .map((_item) => { + const item = _item.trim().toLowerCase(); + if (['e', 'open-euler'].includes(item)) { + return 'e'; + } + if (['k', 'kunpeng'].includes(item)) { + return 'k'; + } + if (['a', 'ascend'].includes(item)) { + return 'a'; + } + if (['d', 'open-design'].includes(item)) { + return 'd'; + } + return ''; + }) + .filter(Boolean), + ), + ); }; /** @@ -51,7 +64,7 @@ const resolveActiveTheme = (theme: string) => { * @param viteDevServer vite开发服务器实例 * @returns 转化后的代码 */ -const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unknown', activeTheme?: string, viteDevServer?: ViteDevServer) => { +const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unknown', activeThemes?: string[], viteDevServer?: ViteDevServer) => { const imported: { default?: string; all?: string; @@ -92,7 +105,7 @@ const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unk } const docsJson = `{${imported.map((item) => `'${item.lang}': ${item.default}`).join(',')}}`; // 补充 usage 的 vue 文件的 template 块 - const template = ``; + const template = ``; return `${[...customBlocks, scriptSetup, ...styles] .filter(Boolean) .map((block) => { @@ -100,7 +113,13 @@ const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unk }) .join('\n')}\n${template}`; }; -const transformMdEntry = async (code: string, id: string, usageFiles: Map, mode: 'dev' | 'build' | 'unknown', viteDevServer?: ViteDevServer) => { +const transformMdEntry = async ( + code: string, + id: string, + usageFiles: Map, + mode: 'dev' | 'build' | 'unknown', + viteDevServer?: ViteDevServer, +) => { const imported: { default?: string; all?: string; @@ -110,12 +129,12 @@ const transformMdEntry = async (code: string, id: string, usageFiles: Map 注释替换成 // 将 注释替换成 - let newCode = await asyncReplace(code, //gi, async (match) => { + let newCode = await asyncReplace(code, //gi, async (match) => { const [, directive, _activeTheme, filePath] = match; const paths = filePath.split('/'); const dirs = paths.slice(0, -1); const fileName = paths[paths.length - 1]; - const activeTheme = resolveActiveTheme(_activeTheme || ''); + const activeThemes = resolveActiveTheme(_activeTheme || ''); if (directive === 'api') { // 拼接 api 文件 const apiFile = join(dirname(id), ...dirs, `${fileName}-api.${lang.lang}.md`); @@ -130,7 +149,7 @@ const transformMdEntry = async (code: string, id: string, usageFiles: Map`; + return ``; } else { // 此处只导入 usage 指令指定的 vue 模块。该 vue 模块的还需在 transformVueDemo 函数中转换 imported.push({ @@ -141,7 +160,7 @@ const transformMdEntry = async (code: string, id: string, usageFiles: Map`; } } @@ -162,7 +181,7 @@ export function injectDemoAndApi(): Plugin { * 缓存需要导入的usage模块 * Map */ - const usageFiles = new Map(); + const usageFiles = new Map(); let viteDevServer: ViteDevServer | null = null; return { name: 'portal:inject-demo-and-api', diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue index 261d5b9862843a960c589356cf203bd00f969b95..63f471996905a75512716d47476b6fe95d1ae49e 100644 --- a/packages/docs/src/App.vue +++ b/packages/docs/src/App.vue @@ -1,5 +1,5 @@ @@ -40,7 +46,7 @@ const copyCode = async () => { position: relative; .lang-mark, - .copy-block { + .operation-block { position: absolute; z-index: 2; color: var(--o-color-info3); @@ -49,18 +55,24 @@ const copyCode = async () => { top: var(--o3-gap-3); right: var(--o3-gap-4); } - .copy-block { + .operation-block { display: none; top: var(--o3-gap-2); right: var(--o3-gap-4); - --btn-height: var(--o3-icon_size-l); + :deep(.o-btn) { + --btn-height: var(--o3-icon_size-l); + --btn-icon-size: var(--o3-icon_size-m); + & + .o-btn { + margin-left: var(--o3-gap-2); + } + } } &:hover { .lang-mark { display: none; } - .copy-block { + .operation-block { display: block; } } diff --git a/packages/docs/src/components/DemoContainer.vue b/packages/docs/src/components/DemoContainer.vue index 9739d75d99fb1449e2209dbdd30fc8829e0d18db..74ce2ecfa3e72c00f3f7567051b78e29f9b93dfe 100644 --- a/packages/docs/src/components/DemoContainer.vue +++ b/packages/docs/src/components/DemoContainer.vue @@ -1,10 +1,12 @@ diff --git a/packages/opendesign/src/button/__docs__/__case__/BtnThemeLink.vue b/packages/opendesign/src/button/__docs__/__case__/BtnThemeLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..80e87ed1b2203f077499a25cac9f031649b58601 --- /dev/null +++ b/packages/opendesign/src/button/__docs__/__case__/BtnThemeLink.vue @@ -0,0 +1,27 @@ + + + +#### 链接按钮（带链接功能的文本按钮） + +- **功能定位**：用于跳转外部/内部链接的按钮 +- **配置方式**： + 使用 `OLink` 组件，传递 `hover-underline`（悬停下划线） + `color="primary"`（链接主色样式）参数 + + + +#### Link Buttons (Text Buttons with Link Functionality) + +- **Functional Positioning**: Used for buttons that navigate to external/internal links. +- **Configuration Method**: + Use the `OLink` component, passing the `hover-underline` (hover underline) + `color="primary"` (link primary color style) parameters. + + + + diff --git a/packages/opendesign/src/button/__docs__/__case__/BtnThemeNormal.vue b/packages/opendesign/src/button/__docs__/__case__/BtnThemeNormal.vue new file mode 100644 index 0000000000000000000000000000000000000000..274d68e293f7d70bf4d5cb1a6dff6a207c9c1f84 --- /dev/null +++ b/packages/opendesign/src/button/__docs__/__case__/BtnThemeNormal.vue @@ -0,0 +1,27 @@ + + + +#### 普通按钮 + +- **功能定位**：辅助性操作按钮（如取消、返回） +- **配置方式**：需同时传递两个参数 + `color="primary"`（标识颜色为主题色） + `variant="outline"`（线框样式） + + + +#### Normal Buttons + +- **Functional Positioning**: Auxiliary action buttons (e.g., cancellation, return). +- **Configuration Method**: Requires passing two parameters simultaneously: + `color="primary"` (indicates the color as the theme color) + `variant="outline"` (outline style). + + + diff --git a/packages/opendesign/src/button/__docs__/__case__/BtnThemePrimary.vue b/packages/opendesign/src/button/__docs__/__case__/BtnThemePrimary.vue new file mode 100644 index 0000000000000000000000000000000000000000..d4ac29f1d76450dea645b4658f912b2d8e670bda --- /dev/null +++ b/packages/opendesign/src/button/__docs__/__case__/BtnThemePrimary.vue @@ -0,0 +1,26 @@ + + + +#### 强调按钮 + +- **功能定位**：页面核心操作的主按钮（如提交、确认） +- **配置方式**：需同时传递两个参数 +`color="primary"`（标识颜色为主题色） + `variant="solid"`（实心样式） + + +#### Primary Buttons (Main Action Buttons) + +- **Functional Positioning**: Primary button for core page operations (e.g., submission, confirmation). +- **Configuration Method**: Requires passing two parameters simultaneously: + `color="primary"` (indicates the color as the theme color) + `variant="solid"` (solid style). + + + diff --git a/packages/opendesign/src/button/__docs__/index.en-US.md b/packages/opendesign/src/button/__docs__/index.en-US.md index b81cf8ee88e5e2e9afa07209b0cf66fccba69a71..ed5592c72ce833795a3e2d9cc8e7999d6de0239f 100644 --- a/packages/opendesign/src/button/__docs__/index.en-US.md +++ b/packages/opendesign/src/button/__docs__/index.en-US.md @@ -7,10 +7,48 @@ sidebar: OButton ## Demo - -## Api + + + + + + + + + + + + + + + + +## API + +### CSS Variables + +| CSS Variable | Description | +| ------------------------- | -------------------------------------------------------------------- | +| \-\-btn-color | Button text color | +| \-\-btn-color-hover | Button text color on hover | +| \-\-btn-color-active | Button text color when active | +| \-\-btn-bd-color | Button border color | +| \-\-btn-bd-color-hover | Button border color on hover | +| \-\-btn-bd-color-active | Button border color when active | +| \-\-btn-bd-color-disabled | Button border color in disabled state | +| \-\-btn-color-disabled | Button text color in disabled state | +| \-\-btn-bg-color | Button background color | +| \-\-btn-bg-color-hover | Button background color on hover | +| \-\-btn-bg-color-active | Button background color when active | +| \-\-btn-bg-color-disabled | Button background color in disabled state | +| \-\-btn-radius | Button border radius | +| \-\-btn-gap | Spacing between the button's preceding and following slots and text | +| \-\-btn-padding | Button internal padding | +| \-\-btn-icon-size | Size of text and icons in the button's preceding and following slots | +| \-\-btn-height | Button height | +| \-\-btn-min-width | Button minimum width (varies with the `size` parameter) | diff --git a/packages/opendesign/src/button/__docs__/index.zh-CN.md b/packages/opendesign/src/button/__docs__/index.zh-CN.md index e03921b6f6a33092ffd4602895708f9b02cb979f..8d12109425ed7e91346bdc8470773d6b0f2f9427 100644 --- a/packages/opendesign/src/button/__docs__/index.zh-CN.md +++ b/packages/opendesign/src/button/__docs__/index.zh-CN.md @@ -7,10 +7,48 @@ sidebar: OButton 按钮 ## 示例 - -## Api + + + + + + + + + + + + + + + + +## API + +### CSS 变量 + +| CSS 变量 | 描述 | +| ------------------------- | ------------------------------------ | +| \-\-btn-color | 按钮文字颜色 | +| \-\-btn-color-hover | 按钮鼠标悬停文字颜色 | +| \-\-btn-color-active | 按钮鼠标按下文字颜色 | +| \-\-btn-bd-color | 按钮边框颜色 | +| \-\-btn-bd-color-hover | 按钮鼠标悬停边框颜色 | +| \-\-btn-bd-color-active | 按钮鼠标按下边框颜色 | +| \-\-btn-bd-color-disabled | 按钮禁用状态边框颜色 | +| \-\-btn-color-disabled | 按钮禁用状态文字颜色 | +| \-\-btn-bg-color | 按钮背景色 | +| \-\-btn-bg-color-hover | 按钮鼠标悬停背景色 | +| \-\-btn-bg-color-active | 按钮鼠标按下背景色 | +| \-\-btn-bg-color-disabled | 按钮禁用状态背景色 | +| \-\-btn-radius | 按钮圆角 | +| \-\-btn-gap | 按钮前后插槽与文本间距 | +| \-\-btn-padding | 按钮内边距 | +| \-\-btn-icon-size | 按钮前后插槽文字及图标大小 | +| \-\-btn-height | 按钮高度 | +| \-\-btn-min-width | 按钮最小宽度（随着 `size` 参数变化） | diff --git a/packages/themes/.gitignore b/packages/themes/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..85c46b6bb7050a46bc5c0d32c0b1646150699590 --- /dev/null +++ b/packages/themes/.gitignore @@ -0,0 +1,3 @@ +# 自动生成 +*.token.css +*.token.code-snippets diff --git a/packages/themes/package.json b/packages/themes/package.json new file mode 100644 index 0000000000000000000000000000000000000000..dd8c05239bb17b8cbb4840fcd2ac2ca9732704de --- /dev/null +++ b/packages/themes/package.json @@ -0,0 +1,17 @@ +{ + "name": "@opensig/open-themes", + "version": "1.0.0", + "description": "", + "scripts": { + "gen:token:a": "open-scripts gen:token --config ./src/ascend/token.config.cjs", + "gen:token:k": "open-scripts gen:token --config ./src/kunpeng/token.config.cjs", + "gen:token:e": "open-scripts gen:token --config ./src/open-euler/token.config.cjs", + "gen:tokens": "pnpm gen:token:a && pnpm gen:token:k && pnpm gen:token:e" + }, + "keywords": [], + "author": "", + "license": "MIT", + "devDependencies": { + "@opensig/open-scripts": "workspace:^" + } +} diff --git a/packages/themes/src/ascend/base.scss b/packages/themes/src/ascend/base.scss new file mode 100644 index 0000000000000000000000000000000000000000..20c3df2eb1d8e2fd3688fe92528ae8cb748610df --- /dev/null +++ b/packages/themes/src/ascend/base.scss @@ -0,0 +1,13 @@ +[class^='c-'], +[class*=' c-'] { + box-sizing: border-box; +} + +[data-o-theme='a.light'] { + --ak-color-band-start: 46, 83, 250; + --ak-color-band-end: 123, 37, 244; +} +[data-o-theme='a.dark'] { + --ak-color-band-start: 84, 120, 251; + --ak-color-band-end: 152, 74, 246; +} diff --git a/packages/themes/src/ascend/button.scss b/packages/themes/src/ascend/button.scss new file mode 100644 index 0000000000000000000000000000000000000000..37408f3f9ea866b7a2e61ca59341311cc01f1840 --- /dev/null +++ b/packages/themes/src/ascend/button.scss @@ -0,0 +1,26 @@ +@use '../shared/mixin.scss' as *; +@use '../shared/button.scss'; + +.c-btn-activity, +.c-btn-ascend { + color: var(--o-color-white) !important; + background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%); + border-color: transparent; + background-repeat: no-repeat; + border: none; + @include hover { + background: linear-gradient(90deg, rgba(var(--ak-color-band-start), 0.8) 0%, rgba(var(--ak-color-band-end), 0.8) 100%); + border-color: transparent; + border: none; + } + &:active { + background: linear-gradient(90deg, rgba(var(--ak-color-band-start), 0.9) 0%, rgba(var(--ak-color-band-end), 0.9) 100%); + border-color: transparent; + border: none; + } + &.o-btn-disabled { + opacity: 0.4; + background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%); + border: none; + } +} diff --git a/packages/themes/src/ascend/index.scss b/packages/themes/src/ascend/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..102cb2fd49cd75f30d87ee8431528a12a148d307 --- /dev/null +++ b/packages/themes/src/ascend/index.scss @@ -0,0 +1,5 @@ +@use './a.light.token.css' as *; +@use './a.dark.token.css' as *; +@use './base.scss' as *; +@use './button.scss' as *; +@use './link.scss' as *; \ No newline at end of file diff --git a/packages/themes/src/ascend/link.scss b/packages/themes/src/ascend/link.scss new file mode 100644 index 0000000000000000000000000000000000000000..7b209e384b0b9598f3a89fe8672768f60a216249 --- /dev/null +++ b/packages/themes/src/ascend/link.scss @@ -0,0 +1,76 @@ +@use '../shared/mixin.scss' as *; +@use '../shared/link.scss'; + +.c-link-ascend { + --arrow-width: 0.375em; + &.o-link-medium { + --arrow-width: 5px; + .o-link-suffix { + 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_control-m); + height: var(--o-icon_size_control-m); + } + } + @include respond-to('>pad') { + @include hoverable { + &:not(.o-link-disabled):hover { + .c-link-ascend-arrow { + transform: translate3d(0, 0, 0); + &::before { + opacity: 1; + transform: translate3d(0, 0, 0) rotate(45deg); + } + &::after { + opacity: 1; + transform: translate3d(0, 0, 0) rotate(-45deg); + } + } + } + } + } +} +.c-link-ascend-arrow { + width: var(--arrow-width); + height: 1px; + background-color: currentColor; + display: inline-flex; + position: relative; + transform-origin: 0 center; + transition: transform var(--o-easing-standard-in) var(--o-duration-m2); + border-radius: 1px; + margin-left: 3px; + &::after, + &::before { + content: ''; + position: absolute; + right: -0.375em; + top: 0; + width: 130%; + height: 100%; + background-color: currentColor; + flex-shrink: 0; + transform-origin: 100% center; + transition: transform var(--o-easing-standard-in) var(--o-duration-m2), opacity var(--o-duration-m2); + border-radius: 1px; + } + &::before { + transform: translate3d(0, 0, 0) rotate(45deg); + } + &::after { + transform: translate3d(0, 0, 0) rotate(-45deg); + } + @include respond-to('>pad') { + transform: translate3d(-5px, 0.3em, 0); + &::before, + &::after { + transform: translate3d(-6px, 0, 0) scale(0.5); + opacity: 0; + } + } +} diff --git a/packages/themes/src/ascend/token.config.cjs b/packages/themes/src/ascend/token.config.cjs new file mode 100644 index 0000000000000000000000000000000000000000..1abb37901308977d7af969d0fae5f82c2c8bd7e6 --- /dev/null +++ b/packages/themes/src/ascend/token.config.cjs @@ -0,0 +1,17 @@ +/* global module */ +module.exports = { + prefix: '--o-', + themeMap: [ + { + key: 'light', + name: 'a.light', + }, + { + key: 'dark', + name: 'a.dark', + }, + ], + defaultTheme: '', + tokenFile: ['./token.json'], + codeSnippetsFile: './a.token.code-snippets', +}; diff --git a/packages/themes/src/ascend/token.json b/packages/themes/src/ascend/token.json new file mode 100644 index 0000000000000000000000000000000000000000..30ca0270e6bb65836614ad0bd1809e1474820f91 --- /dev/null +++ b/packages/themes/src/ascend/token.json @@ -0,0 +1,2428 @@ +{ + "white": { + "name": "白色", + "type": "palette", + "typeName": "颜色", + "value": [ + { + "key": "white", + "value": { + "light": "255, 255, 255", + "dark": "255, 255, 255" + } + } + ] + }, + "black": { + "name": "黑色", + "type": "palette", + "typeName": "颜色", + "value": [ + { + "key": "black", + "value": { + "light": "0, 0, 0", + "dark": "0, 0, 0" + } + } + ] + }, + "deepblue": { + "name": "深蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "deepblue-1", + "value": { + "light": "232, 240, 255", + "dark": "0, 4, 77" + } + }, + { + "key": "deepblue-2", + "value": { + "light": "194, 213, 254", + "dark": "6, 15, 120" + } + }, + { + "key": "deepblue-3", + "value": { + "light": "157, 184, 253", + "dark": "20, 37, 163" + } + }, + { + "key": "deepblue-4", + "value": { + "light": "120, 153, 252", + "dark": "40, 65, 207" + } + }, + { + "key": "deepblue-5", + "value": { + "light": "83, 119, 251", + "dark": "66, 99, 250" + } + }, + { + "key": "deepblue-6", + "value": { + "light": "46, 83, 250", + "dark": "84, 120, 251" + } + }, + { + "key": "deepblue-7", + "value": { + "light": "29, 55, 207", + "dark": "122, 154, 252" + } + }, + { + "key": "deepblue-8", + "value": { + "light": "15, 32, 163", + "dark": "160, 186, 253" + } + }, + { + "key": "deepblue-9", + "value": { + "light": "6, 15, 120", + "dark": "199, 217, 254" + } + }, + { + "key": "deepblue-10", + "value": { + "light": "0, 4, 77", + "dark": "238, 244, 255" + } + } + ] + }, + "green": { + "name": "绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "green-1", + "value": { + "light": "232, 255, 238", + "dark": "0, 77, 42" + } + }, + { + "key": "green-2", + "value": { + "light": "177, 239, 195", + "dark": "2, 102, 53" + } + }, + { + "key": "green-3", + "value": { + "light": "128, 224, 158", + "dark": "10, 127, 66" + } + }, + { + "key": "green-4", + "value": { + "light": "84, 208, 127", + "dark": "22, 152, 80" + } + }, + { + "key": "green-5", + "value": { + "light": "45, 193, 101", + "dark": "36, 177, 95" + } + }, + { + "key": "green-6", + "value": { + "light": "11, 177, 81", + "dark": "51, 193, 104" + } + }, + { + "key": "green-7", + "value": { + "light": "7, 152, 72", + "dark": "90, 208, 131" + } + }, + { + "key": "green-8", + "value": { + "light": "4, 127, 63", + "dark": "135, 224, 163" + } + }, + { + "key": "green-9", + "value": { + "light": "2, 102, 53", + "dark": "185, 239, 200" + } + }, + { + "key": "green-10", + "value": { + "light": "0, 77, 42", + "dark": "240, 255, 244" + } + } + ] + }, + "orange": { + "name": "橘红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "orange-1", + "value": { + "light": "255, 246, 232", + "dark": "77, 24, 0" + } + }, + { + "key": "orange-2", + "value": { + "light": "254, 226, 186", + "dark": "120, 42, 1" + } + }, + { + "key": "orange-3", + "value": { + "light": "253, 202, 140", + "dark": "163, 68, 8" + } + }, + { + "key": "orange-4", + "value": { + "light": "252, 176, 95", + "dark": "207, 97, 19" + } + }, + { + "key": "orange-5", + "value": { + "light": "251, 147, 50", + "dark": "250, 130, 33" + } + }, + { + "key": "orange-6", + "value": { + "light": "250, 115, 5", + "dark": "251, 143, 43" + } + }, + { + "key": "orange-7", + "value": { + "light": "207, 88, 3", + "dark": "252, 174, 91" + } + }, + { + "key": "orange-8", + "value": { + "light": "163, 64, 2", + "dark": "253, 202, 139" + } + }, + { + "key": "orange-9", + "value": { + "light": "120, 42, 1", + "dark": "254, 227, 188" + } + }, + { + "key": "orange-10", + "value": { + "light": "77, 24, 0", + "dark": "255, 248, 237" + } + } + ] + }, + "red": { + "name": "红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-1", + "value": { + "light": "255, 234, 232", + "dark": "77, 0, 17" + } + }, + { + "key": "red-2", + "value": { + "light": "250, 185, 182", + "dark": "115, 3, 24" + } + }, + { + "key": "red-3", + "value": { + "light": "245, 136, 134", + "dark": "153, 9, 31" + } + }, + { + "key": "red-4", + "value": { + "light": "240, 87, 90", + "dark": "192, 17, 37" + } + }, + { + "key": "red-5", + "value": { + "light": "235, 43, 52", + "dark": "230, 28, 43" + } + }, + { + "key": "red-6", + "value": { + "light": "230, 0, 18", + "dark": "235, 35, 45" + } + }, + { + "key": "red-7", + "value": { + "light": "192, 0, 22", + "dark": "240, 82, 85" + } + }, + { + "key": "red-8", + "value": { + "light": "153, 0, 23", + "dark": "245, 132, 130" + } + }, + { + "key": "red-9", + "value": { + "light": "115, 0, 21", + "dark": "250, 183, 180" + } + }, + { + "key": "red-10", + "value": { + "light": "77, 0, 17", + "dark": "255, 234, 232" + } + } + ] + }, + "huaweired": { + "name": "华为红", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-huawei", + "value": { + "light": "199, 0, 11", + "dark": "199, 0, 11" + } + } + ] + }, + "gray": { + "name": "中性灰", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "gray-1", + "value": { + "light": "255, 255, 255", + "dark": "0, 0, 0" + } + }, + { + "key": "gray-2", + "value": { + "light": "243, 243, 245", + "dark": "18, 18, 20" + } + }, + { + "key": "gray-3", + "value": { + "light": "237, 237, 240", + "dark": "26, 26, 28" + } + }, + { + "key": "gray-4", + "value": { + "light": "232, 232, 235", + "dark": "36, 36, 39" + } + }, + { + "key": "gray-5", + "value": { + "light": "222, 222, 227", + "dark": "43, 43, 47" + } + }, + { + "key": "gray-6", + "value": { + "light": "210, 210, 217", + "dark": "53, 53, 57" + } + }, + { + "key": "gray-7", + "value": { + "light": "186, 186, 191", + "dark": "63, 63, 67" + } + }, + { + "key": "gray-8", + "value": { + "light": "149, 149, 156", + "dark": "85, 85, 88" + } + }, + { + "key": "gray-9", + "value": { + "light": "111, 111, 117", + "dark": "118, 118, 122" + } + }, + { + "key": "gray-10", + "value": { + "light": "85, 85, 92", + "dark": "156, 156, 159" + } + }, + { + "key": "gray-11", + "value": { + "light": "61, 61, 66", + "dark": "181, 181, 185" + } + }, + { + "key": "gray-12", + "value": { + "light": "37, 37, 41", + "dark": "208, 208, 210" + } + }, + { + "key": "gray-13", + "value": { + "light": "21, 21, 23", + "dark": "235, 235, 238" + } + }, + { + "key": "gray-14", + "value": { + "light": "0, 0, 0", + "dark": "255, 255, 255" + } + } + ] + }, + "mixedgray": { + "name": "混合中性色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "mixedgray-1", + "value": { + "light": "255, 255, 255", + "dark": "0, 0, 0" + } + }, + { + "key": "mixedgray-2", + "value": { + "light": "244, 245, 247", + "dark": "16, 18, 20" + } + }, + { + "key": "mixedgray-3", + "value": { + "light": "237, 239, 242", + "dark": "23, 25, 28" + } + }, + { + "key": "mixedgray-4", + "value": { + "light": "232, 234, 237", + "dark": "33, 35, 39" + } + }, + { + "key": "mixedgray-5", + "value": { + "light": "224, 226, 230", + "dark": "40, 42, 47" + } + }, + { + "key": "mixedgray-6", + "value": { + "light": "209, 214, 219", + "dark": "50, 53, 57" + } + }, + { + "key": "mixedgray-7", + "value": { + "light": "179, 185, 191", + "dark": "61, 63, 67" + } + }, + { + "key": "mixedgray-8", + "value": { + "light": "144, 150, 158", + "dark": "80, 84, 88" + } + }, + { + "key": "mixedgray-9", + "value": { + "light": "104, 109, 117", + "dark": "113, 117, 122" + } + }, + { + "key": "mixedgray-10", + "value": { + "light": "79, 84, 92", + "dark": "147, 152, 159" + } + }, + { + "key": "mixedgray-11", + "value": { + "light": "55, 59, 66", + "dark": "172, 177, 185" + } + }, + { + "key": "mixedgray-12", + "value": { + "light": "32, 35, 41", + "dark": "198, 202, 210" + } + }, + { + "key": "mixedgray-13", + "value": { + "light": "18, 20, 23", + "dark": "231, 234, 238" + } + }, + { + "key": "mixedgray-14", + "value": { + "light": "0, 0, 0", + "dark": "255, 255, 255" + } + } + ] + }, + "yellow": { + "name": "黄色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "yellow-1", + "value": { + "light": "255, 255, 232", + "dark": "77, 54, 0" + } + }, + { + "key": "yellow-2", + "value": { + "light": "253, 251, 185", + "dark": "119, 87, 2" + } + }, + { + "key": "yellow-3", + "value": { + "light": "251, 244, 139", + "dark": "161, 126, 11" + } + }, + { + "key": "yellow-4", + "value": { + "light": "249, 233, 94", + "dark": "203, 167, 24" + } + }, + { + "key": "yellow-5", + "value": { + "light": "247, 221, 49", + "dark": "245, 211, 42" + } + }, + { + "key": "yellow-6", + "value": { + "light": "245, 205, 5", + "dark": "247, 222, 54" + } + }, + { + "key": "yellow-7", + "value": { + "light": "203, 163, 3", + "dark": "249, 234, 100" + } + }, + { + "key": "yellow-8", + "value": { + "light": "161, 124, 2", + "dark": "251, 244, 146" + } + }, + { + "key": "yellow-9", + "value": { + "light": "119, 87, 1", + "dark": "253, 251, 192" + } + }, + { + "key": "yellow-10", + "value": { + "light": "77, 54, 0", + "dark": "255, 255, 240" + } + } + ] + }, + "lime": { + "name": "黄绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "lime-1", + "value": { + "light": "251, 255, 232", + "dark": "41, 77, 0" + } + }, + { + "key": "lime-2", + "value": { + "light": "233, 245, 184", + "dark": "63, 109, 3" + } + }, + { + "key": "lime-3", + "value": { + "light": "213, 236, 139", + "dark": "91, 142, 14" + } + }, + { + "key": "lime-4", + "value": { + "light": "192, 226, 97", + "dark": "121, 174, 30" + } + }, + { + "key": "lime-5", + "value": { + "light": "169, 217, 59", + "dark": "155, 207, 50" + } + }, + { + "key": "lime-6", + "value": { + "light": "146, 207, 23", + "dark": "172, 217, 68" + } + }, + { + "key": "lime-7", + "value": { + "light": "116, 174, 15", + "dark": "194, 226, 104" + } + }, + { + "key": "lime-8", + "value": { + "light": "88, 142, 8", + "dark": "214, 236, 144" + } + }, + { + "key": "lime-9", + "value": { + "light": "63, 109, 3", + "dark": "233, 245, 186" + } + }, + { + "key": "lime-10", + "value": { + "light": "41, 77, 0", + "dark": "251, 255, 232" + } + } + ] + }, + "cyan": { + "name": "青色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "cyan-1", + "value": { + "light": "232, 255, 249", + "dark": "0, 73, 77" + } + }, + { + "key": "cyan-2", + "value": { + "light": "176, 240, 226", + "dark": "2, 101, 103" + } + }, + { + "key": "cyan-3", + "value": { + "light": "125, 225, 207", + "dark": "9, 129, 127" + } + }, + { + "key": "cyan-4", + "value": { + "light": "79, 211, 191", + "dark": "18, 155, 148" + } + }, + { + "key": "cyan-5", + "value": { + "light": "38, 196, 177", + "dark": "30, 181, 167" + } + }, + { + "key": "cyan-6", + "value": { + "light": "3, 181, 165", + "dark": "42, 196, 178" + } + }, + { + "key": "cyan-7", + "value": { + "light": "2, 155, 147", + "dark": "84, 211, 192" + } + }, + { + "key": "cyan-8", + "value": { + "light": "1, 129, 127", + "dark": "130, 225, 208" + } + }, + { + "key": "cyan-9", + "value": { + "light": "0, 101, 103", + "dark": "182, 240, 227" + } + }, + { + "key": "cyan-10", + "value": { + "light": "0, 73, 77", + "dark": "239, 255, 251" + } + } + ] + }, + "blue": { + "name": "蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "blue-1", + "value": { + "light": "232, 249, 255", + "dark": "0, 34, 77" + } + }, + { + "key": "blue-2", + "value": { + "light": "185, 233, 252", + "dark": "1, 57, 117" + } + }, + { + "key": "blue-3", + "value": { + "light": "138, 214, 249", + "dark": "8, 86, 158" + } + }, + { + "key": "blue-4", + "value": { + "light": "93, 192, 246", + "dark": "18, 118, 199" + } + }, + { + "key": "blue-5", + "value": { + "light": "48, 168, 243", + "dark": "31, 153, 240" + } + }, + { + "key": "blue-6", + "value": { + "light": "5, 142, 240", + "dark": "42, 166, 243" + } + }, + { + "key": "blue-7", + "value": { + "light": "3, 111, 199", + "dark": "89, 191, 246" + } + }, + { + "key": "blue-8", + "value": { + "light": "2, 83, 158", + "dark": "137, 214, 249" + } + }, + { + "key": "blue-9", + "value": { + "light": "1, 57, 117", + "dark": "187, 233, 252" + } + }, + { + "key": "blue-10", + "value": { + "light": "0, 34, 77", + "dark": "237, 250, 255" + } + } + ] + }, + "purple": { + "name": "紫色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "purple-1", + "value": { + "light": "245, 232, 255", + "dark": "22, 0, 77" + } + }, + { + "key": "purple-2", + "value": { + "light": "225, 192, 253", + "dark": "40, 3, 118" + } + }, + { + "key": "purple-3", + "value": { + "light": "203, 152, 251", + "dark": "66, 15, 160" + } + }, + { + "key": "purple-4", + "value": { + "light": "178, 113, 248", + "dark": "98, 33, 202" + } + }, + { + "key": "purple-5", + "value": { + "light": "152, 75, 246", + "dark": "134, 57, 244" + } + }, + { + "key": "purple-6", + "value": { + "light": "123, 37, 244", + "dark": "152, 74, 246" + } + }, + { + "key": "purple-7", + "value": { + "light": "92, 23, 202", + "dark": "179, 114, 248" + } + }, + { + "key": "purple-8", + "value": { + "light": "64, 12, 160", + "dark": "205, 156, 251" + } + }, + { + "key": "purple-9", + "value": { + "light": "41, 4, 118", + "dark": "228, 198, 253" + } + }, + { + "key": "purple-10", + "value": { + "light": "22, 0, 77", + "dark": "249, 240, 255" + } + } + ] + }, + "pink": { + "name": "粉色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "pink-1", + "value": { + "light": "255, 232, 253", + "dark": "61, 0, 77" + } + }, + { + "key": "pink-2", + "value": { + "light": "246, 188, 243", + "dark": "93, 5, 110" + } + }, + { + "key": "pink-3", + "value": { + "light": "238, 146, 235", + "dark": "127, 16, 144" + } + }, + { + "key": "pink-4", + "value": { + "light": "229, 107, 229", + "dark": "164, 33, 178" + } + }, + { + "key": "pink-5", + "value": { + "light": "216, 71, 221", + "dark": "200, 54, 212" + } + }, + { + "key": "pink-6", + "value": { + "light": "199, 37, 212", + "dark": "216, 72, 221" + } + }, + { + "key": "pink-7", + "value": { + "light": "163, 23, 178", + "dark": "229, 109, 229" + } + }, + { + "key": "pink-8", + "value": { + "light": "127, 13, 144", + "dark": "238, 149, 235" + } + }, + { + "key": "pink-9", + "value": { + "light": "93, 5, 110", + "dark": "246, 191, 243" + } + }, + { + "key": "pink-10", + "value": { + "light": "61, 0, 77", + "dark": "255, 236, 253" + } + } + ] + }, + "rosyred": { + "name": "玫红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "rosyred-1", + "value": { + "light": "255, 232, 240", + "dark": "77, 0, 48" + } + }, + { + "key": "rosyred-2", + "value": { + "light": "249, 185, 209", + "dark": "114, 3, 70" + } + }, + { + "key": "rosyred-3", + "value": { + "light": "243, 141, 182", + "dark": "151, 12, 91" + } + }, + { + "key": "rosyred-4", + "value": { + "light": "238, 98, 158", + "dark": "189, 25, 112" + } + }, + { + "key": "rosyred-5", + "value": { + "light": "232, 57, 139", + "dark": "226, 41, 133" + } + }, + { + "key": "rosyred-6", + "value": { + "light": "226, 18, 122", + "dark": "232, 53, 137" + } + }, + { + "key": "rosyred-7", + "value": { + "light": "189, 11, 106", + "dark": "238, 97, 158" + } + }, + { + "key": "rosyred-8", + "value": { + "light": "151, 6, 88", + "dark": "243, 143, 183" + } + }, + { + "key": "rosyred-9", + "value": { + "light": "114, 2, 69", + "dark": "249, 192, 213" + } + }, + { + "key": "rosyred-10", + "value": { + "light": "77, 0, 48", + "dark": "255, 242, 247" + } + } + ] + }, + + "base": { + "name": "基础色(不同皮肤色相不变)", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-white", + "value": { + "light": "rgb(var(--o-white))", + "dark": "rgb(var(--o-white))" + } + }, + { + "key": "color-black", + "value": { + "light": "rgb(var(--o-black))", + "dark": "rgb(var(--o-black))" + } + } + ] + }, + "primary": { + "name": "强调色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-primary1", + "description": "常规", + "value": { + "light": "rgb(var(--o-mixedgray-12))", + "dark": "rgb(var(--o-mixedgray-14))" + } + }, + { + "key": "color-primary2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-mixedgray-11))", + "dark": "rgb(var(--o-mixedgray-13))" + } + }, + { + "key": "color-primary3", + "description": "激活", + "value": { + "light": "rgb(var(--o-mixedgray-13))", + "dark": "rgb(var(--o-mixedgray-12))" + } + }, + { + "key": "color-primary4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-mixedgray-6))", + "dark": "rgb(var(--o-mixedgray-8))" + } + }, + { + "key": "color-primary1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-mixedgray-4))", + "dark": "rgb(var(--o-mixedgray-5))" + } + }, + { + "key": "color-primary2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-mixedgray-5))", + "dark": "rgb(var(--o-mixedgray-6))" + } + }, + { + "key": "color-primary3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-mixedgray-6))", + "dark": "rgb(var(--o-mixedgray-7))" + } + }, + { + "key": "color-primary4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-mixedgray-5))", + "dark": "rgb(var(--o-mixedgray-6))" + } + } + ] + }, + "success": { + "name": "成功色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-success1", + "description": "常规", + "value": { + "light": "rgb(var(--o-green-6))", + "dark": "rgb(var(--o-green-6))" + } + }, + { + "key": "color-success2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success3", + "description": "激活", + "value": { + "light": "rgb(var(--o-green-7))", + "dark": "rgb(var(--o-green-7))" + } + }, + { + "key": "color-success4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-green-2))", + "dark": "rgb(var(--o-green-2))" + } + }, + { + "key": "color-success2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-green-1))", + "dark": "rgb(var(--o-green-1))" + } + } + ] + }, + "warning": { + "name": "告警色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-warning1", + "description": "常规", + "value": { + "light": "rgb(var(--o-orange-6))", + "dark": "rgb(var(--o-orange-6))" + } + }, + { + "key": "color-warning2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning3", + "description": "激活", + "value": { + "light": "rgb(var(--o-orange-7))", + "dark": "rgb(var(--o-orange-7))" + } + }, + { + "key": "color-warning4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-orange-2))", + "dark": "rgb(var(--o-orange-2))" + } + }, + { + "key": "color-warning2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-orange-1))", + "dark": "rgb(var(--o-orange-1))" + } + } + ] + }, + "danger": { + "name": "危险色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-danger1", + "description": "常规", + "value": { + "light": "rgb(var(--o-red-6))", + "dark": "rgb(var(--o-red-6))" + } + }, + { + "key": "color-danger2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger3", + "description": "激活", + "value": { + "light": "rgb(var(--o-red-7))", + "dark": "rgb(var(--o-red-7))" + } + }, + { + "key": "color-danger4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-red-2))", + "dark": "rgb(var(--o-red-2))" + } + }, + { + "key": "color-danger2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-red-1))", + "dark": "rgb(var(--o-red-1))" + } + } + ] + }, + "fill": { + "name": "填充色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-fill1", + "description": "一级填充：页面背景", + "value": { + "light": "rgb(var(--o-mixedgray-2))", + "dark": "rgb(var(--o-mixedgray-3))" + } + }, + { + "key": "color-fill2", + "description": "二级填充：区块/卡片", + "value": { + "light": "rgb(var(--o-mixedgray-1))", + "dark": "rgb(var(--o-mixedgray-4))" + } + }, + { + "key": "color-fill3", + "description": "三级填充：卡片", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-5))" + } + } + ] + }, + "control": { + "name": "控件色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-control1", + "description": "常规，常用于边框", + "value": { + "light": "rgba(var(--o-mixedgray-14), 0.25)", + "dark": "rgba(var(--o-mixedgray-14), 0.25)" + } + }, + { + "key": "color-control2", + "description": "悬浮，常用于边框", + "value": { + "light": "rgba(var(--o-mixedgray-14), 0.6)", + "dark": "rgba(var(--o-mixedgray-14), 0.6)" + } + }, + { + "key": "color-control3", + "description": "激活，常用于边框", + "value": { + "light": "rgba(var(--o-mixedgray-14), 0.8)", + "dark": "rgba(var(--o-mixedgray-14), 0.8)" + } + }, + { + "key": "color-control4", + "description": "禁用，常用于边框", + "value": { + "light": "rgba(var(--o-mixedgray-14), 0.1)", + "dark": "rgba(var(--o-mixedgray-14), 0.15)" + } + }, + { + "key": "color-control1-light", + "description": "常规-浅，常用于背景", + "value": { + "light": "rgb(var(--o-mixedgray-5))", + "dark": "rgb(var(--o-mixedgray-7))" + } + }, + { + "key": "color-control2-light", + "description": "悬浮-浅，常用于背景", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-5))" + } + }, + { + "key": "color-control3-light", + "description": "激活-浅，常用于背景", + "value": { + "light": "rgb(var(--o-mixedgray-4))", + "dark": "rgb(var(--o-mixedgray-6))" + } + }, + { + "key": "color-control4-light", + "description": "禁用-浅，常用于背景", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-5))" + } + }, + { + "key": "color-control-light", + "description": "很浅，常用于表格背景色", + "value": { + "light": "rgb(var(--o-mixedgray-1))", + "dark": "rgb(var(--o-mixedgray-4))" + } + } + ] + }, + "info": { + "name": "信息色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-info1", + "description": "一级/强调/标题", + "value": { + "light": "rgba(var(--o-mixedgray-14), 1.0)", + "dark": "rgba(var(--o-mixedgray-14), 1.0)" + } + }, + { + "key": "color-info2", + "description": "二级/次强调/正文", + "value": { + "light": "rgba(var(--o-mixedgray-14), 0.8)", + "dark": "rgba(var(--o-mixedgray-14), 0.8)" + } + }, + { + "key": "color-info3", + "description": "三级/辅助信息", + "value": { + "light": "rgba(var(--o-mixedgray-14), 0.6)", + "dark": "rgba(var(--o-mixedgray-14), 0.6)" + } + }, + { + "key": "color-info4", + "description": "置灰/禁用", + "value": { + "light": "rgba(var(--o-mixedgray-14), 0.4)", + "dark": "rgba(var(--o-mixedgray-14), 0.4)" + } + }, + { + "key": "color-info1-inverse", + "description": "一级/次强调/正文反色", + "value": { + "light": "rgba(var(--o-mixedgray-1), 1.0)", + "dark": "rgba(var(--o-mixedgray-1), 1.0)" + } + }, + { + "key": "color-info2-inverse", + "description": "二级/辅助信息反色", + "value": { + "light": "rgba(var(--o-mixedgray-1), 0.8)", + "dark": "rgba(var(--o-mixedgray-1), 0.8)" + } + }, + { + "key": "color-info3-inverse", + "description": "三级/辅助信息反色", + "value": { + "light": "rgba(var(--o-mixedgray-1), 0.6)", + "dark": "rgba(var(--o-mixedgray-1), 0.6)" + } + }, + { + "key": "color-info4-inverse", + "description": "置灰/禁用反色", + "value": { + "light": "rgba(var(--o-mixedgray-1), 0.4)", + "dark": "rgba(var(--o-mixedgray-1), 0.4)" + } + } + ] + }, + "mask": { + "name": "遮罩色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-mask1", + "description": "全局遮罩", + "value": { + "light": "rgba(var(--o-mixedgray-14), 0.4)", + "dark": "rgba(var(--o-mixedgray-1), 0.4)" + } + }, + { + "key": "color-mask2", + "description": "局部遮罩", + "value": { + "light": "rgba(var(--o-mixedgray-1), 0.2)", + "dark": "rgba(var(--o-mixedgray-4), 0.2)" + } + } + ] + }, + "link": { + "name": "链接色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-link1", + "description": "常规", + "value": { + "light": "rgba(var(--o-deepblue-6), 1.0)", + "dark": "rgba(var(--o-deepblue-6), 1.0)" + } + }, + { + "key": "color-link2", + "description": "悬浮", + "value": { + "light": "rgba(var(--o-deepblue-6), 0.7)", + "dark": "rgba(var(--o-deepblue-6), 0.7)" + } + }, + { + "key": "color-link3", + "description": "激活", + "value": { + "light": "rgba(var(--o-deepblue-6), 0.9)", + "dark": "rgba(var(--o-deepblue-6), 0.9)" + } + }, + { + "key": "color-link4", + "description": "禁用", + "value": { + "light": "rgba(var(--o-deepblue-6), 0.4)", + "dark": "rgba(var(--o-deepblue-6), 0.4)" + } + } + ] + }, + + "shadow": { + "name": "阴影", + "type": "shadow", + "typeName": "阴影", + "value": [ + { + "key": "shadow-1", + "name": "阴影1", + "description": "用于卡片、小弹窗、楼层阴影", + "value": { + "light": "0 3px 8px rgba(var(--o-mixedgray-13), 0.08)", + "dark": "0 3px 8px rgba(var(--o-mixedgray-1), 0.08)" + } + }, + { + "key": "shadow-2", + "name": "阴影2", + "description": "用于卡片悬浮阴影", + "value": { + "light": "0 2px 24px rgba(var(--o-mixedgray-13), 0.15)", + "dark": "0 2px 24px rgba(var(--o-mixedgray-1), 0.15)" + } + }, + { + "key": "shadow-3", + "name": "阴影3", + "description": "用于提示阴影", + "value": { + "light": "0 8px 40px rgba(var(--o-mixedgray-13), 0.1)", + "dark": "0 8px 40px rgba(var(--o-mixedgray-1), 0.1)" + } + } + ] + }, + + "gap": { + "name": "间距", + "type": "gap", + "typeName": "间距", + "value": [ + { + "key": "gap-1", + "name": "间距1", + "description": "用于组件之间的间距1", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "gap-2", + "name": "间距2", + "description": "用于组件之间的间距2", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "gap-3", + "name": "间距3", + "description": "用于组件之间的间距3", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "gap-4", + "name": "间距4", + "description": "用于组件之间的间距4", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "gap-5", + "name": "间距5", + "description": "用于组件之间的间距5", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "gap-6", + "name": "间距6", + "description": "用于组件之间的间距6", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "gap-7", + "name": "间距7", + "description": "用于组件之间的间距7", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "gap-8", + "name": "间距8", + "description": "用于组件之间的间距8", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "gap-9", + "name": "间距9", + "description": "用于组件之间的间距9", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "gap-10", + "name": "间距10", + "description": "用于组件之间的间距10", + "value": { + "light": "72px", + "dark": "72px" + } + } + ] + }, + + "control_size": { + "name": "组件尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "control_size-2xs", + "name": "超小尺寸", + "description": "超小尺寸", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "control_size-xs", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "control_size-s", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "control_size-m", + "name": "中尺寸", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "control_size-l", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "control_size-xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "control_size-2xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "56px", + "dark": "56px" + } + } + ] + }, + + "icon_size": { + "name": "图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size-xs", + "name": "超小尺寸图标", + "description": "超小尺寸图标", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "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" + } + } + ] + }, + "icon_size_control": { + "name": "组件图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size_control-xs", + "name": "超小尺寸图标", + "description": "超小尺寸控件图标(组件使用)", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "icon_size_control-s", + "name": "小尺寸图标", + "description": "小尺寸控件图标(组件使用)", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "icon_size_control-m", + "name": "中尺寸图标", + "description": "中尺寸控件图标(组件使用)", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "icon_size_control-l", + "name": "大尺寸图标", + "description": "大尺寸控件图标(组件使用)", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "icon_size_control-xl", + "name": "超大尺寸图标", + "description": "超大尺寸控件图标(组件使用)", + "value": { + "light": "40px", + "dark": "40px" + } + } + ] + }, + + "font_size": { + "name": "字体尺寸", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "font_size-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "font_size-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "font_size-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "font_size-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "font_size-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "font_size-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "22px", + "dark": "22px" + } + }, + { + "key": "font_size-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "font_size-text1", + "name": "常规正文", + "description": "常规正文", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "font_size-text2", + "name": "大号正文", + "description": "大号正文", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "font_size-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "font_size-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "12px", + "dark": "12px" + } + } + ] + }, + "line_height": { + "name": "字体行高", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "line_height-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "80px", + "dark": "80px" + } + }, + { + "key": "line_height-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "line_height-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "line_height-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "44px", + "dark": "44px" + } + }, + { + "key": "line_height-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "line_height-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "30px", + "dark": "30px" + } + }, + { + "key": "line_height-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "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": "22px", + "dark": "22px" + } + }, + { + "key": "line_height-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "18px", + "dark": "18px" + } + } + ] + }, + + "radius": { + "name": "圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius-xs", + "name": "超小尺寸圆角", + "description": "超小尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-s", + "name": "小尺寸圆角", + "description": "小尺寸圆角", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "radius-m", + "name": "中尺寸圆角", + "description": "中尺寸圆角", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "radius-l", + "name": "大尺寸圆角", + "description": "大尺寸圆角", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "radius-xl", + "name": "大尺寸圆角", + "description": "大尺寸圆角,一般用于卡片", + "value": { + "light": "24px", + "dark": "24px" + } + } + ] + }, + "radius_control": { + "name": "组件圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius_control-xs", + "name": "超小尺寸控件圆角", + "description": "超小尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius_control-s", + "name": "小尺寸控件圆角", + "description": "小尺寸控件圆角(组件使用)", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "radius_control-m", + "name": "中尺寸控件圆角", + "description": "中尺寸控件圆角(组件使用)", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "radius_control-l", + "name": "大尺寸控件圆角", + "description": "大尺寸控件圆角(组件使用)", + "value": { + "light": "16px", + "dark": "16px" + } + } + ] + }, + + "duration": { + "name": "动画持续时间", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "duration-s", + "name": "持续时间", + "description": "用于退出屏幕的动画", + "value": { + "light": "200ms", + "dark": "200ms" + } + }, + { + "key": "duration-m1", + "name": "持续时间", + "description": "用于当曲线为standard-in时进入屏幕的动画", + "value": { + "light": "250ms", + "dark": "250ms" + } + }, + { + "key": "duration-m2", + "name": "持续时间", + "description": "用于当曲线为standard时开始、结束的动画", + "value": { + "light": "300ms", + "dark": "300ms" + } + }, + { + "key": "duration-m3", + "name": "持续时间", + "description": "用于当曲线为emphasized-in时进入屏幕的动画", + "value": { + "light": "400ms", + "dark": "400ms" + } + }, + { + "key": "duration-l", + "name": "持续时间", + "description": "用于当曲线为emphasized时开始、结束的动画", + "value": { + "light": "500ms", + "dark": "500ms" + } + }, + { + "key": "duration-xl", + "name": "持续时间", + "description": "用于当曲线为emphasized时，轮播切换动画", + "value": { + "light": "1000ms", + "dark": "1000ms" + } + } + ] + }, + + "easing": { + "name": "动画曲线", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "easing-linear", + "name": "线性动画曲线", + "description": "线性曲线", + "value": { + "light": "cubic-bezier(0, 0, 1, 1)", + "dark": "cubic-bezier(0, 0, 1, 1)" + } + }, + { + "key": "easing-standard", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-standard-in", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0, 0, 0, 1)", + "dark": "cubic-bezier(0, 0, 0, 1)" + } + }, + { + "key": "easing-standard-out", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.3, 0, 1, 1)", + "dark": "cubic-bezier(0.3, 0, 1, 1)" + } + }, + { + "key": "easing-emphasized", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-emphasized-in", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.3, 0, 0.8, 0.15)", + "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)" + } + }, + { + "key": "easing-emphasized-out", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.05, 0.7, 0.1, 1)", + "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)" + } + } + ] + } +} diff --git a/packages/themes/src/kunpeng/base.scss b/packages/themes/src/kunpeng/base.scss new file mode 100644 index 0000000000000000000000000000000000000000..3dee5ae02258cd0c98498e4ca7d7001ab420ee02 --- /dev/null +++ b/packages/themes/src/kunpeng/base.scss @@ -0,0 +1,13 @@ +[class^='c-'], +[class*=' c-'] { + box-sizing: border-box; +} + +[data-o-theme='k.light'] { + --ak-color-band-start: 255, 153, 51; + --ak-color-band-end: 247, 77, 97; +} +[data-o-theme='k.dark'] { + --ak-color-band-start: 255, 153, 51; + --ak-color-band-end: 247, 77, 97; +} diff --git a/packages/themes/src/kunpeng/button.scss b/packages/themes/src/kunpeng/button.scss new file mode 100644 index 0000000000000000000000000000000000000000..b71035dd28cde715ff29a4fe958f721a54ce4b5b --- /dev/null +++ b/packages/themes/src/kunpeng/button.scss @@ -0,0 +1,26 @@ +@use '../shared/button.scss'; +@use '../shared/mixin.scss' as *; + +.c-btn-activity, +.c-btn-kunpeng { + color: var(--o-color-white) !important; + background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%); + border-color: transparent; + background-repeat: no-repeat; + border: none; + @include hover { + background: linear-gradient(90deg, rgba(var(--ak-color-band-start), 0.8) 0%, rgba(var(--ak-color-band-end), 0.8) 100%); + border-color: transparent; + border: none; + } + &:active { + background: linear-gradient(90deg, rgba(var(--ak-color-band-start), 0.9) 0%, rgba(var(--ak-color-band-end), 0.9) 100%); + border-color: transparent; + border: none; + } + &.o-btn-disabled { + opacity: 0.4; + background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%); + border: none; + } +} diff --git a/packages/themes/src/kunpeng/index.scss b/packages/themes/src/kunpeng/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..cd19c6841cfa0558184fbc9139abcf86dc8a46bc --- /dev/null +++ b/packages/themes/src/kunpeng/index.scss @@ -0,0 +1,5 @@ +@use './k.light.token.css' as *; +@use './k.dark.token.css' as *; +@use './base.scss' as *; +@use './button.scss' as *; +@use './link.scss' as *; \ No newline at end of file diff --git a/packages/themes/src/kunpeng/link.scss b/packages/themes/src/kunpeng/link.scss new file mode 100644 index 0000000000000000000000000000000000000000..1665a3fbe404214e49bba5d1bfb4d4d33fe4d1d4 --- /dev/null +++ b/packages/themes/src/kunpeng/link.scss @@ -0,0 +1,8 @@ +@use '../shared/mixin.scss' as *; +@use '../shared/link.scss'; + +.c-link-kunpeng { + @include hover { + --link-color-hover: rgb(var(--o-red-huawei)); + } +} diff --git a/packages/themes/src/kunpeng/token.config.cjs b/packages/themes/src/kunpeng/token.config.cjs new file mode 100644 index 0000000000000000000000000000000000000000..815bf1aec549cca892d15f99b8ea7c40f74f0245 --- /dev/null +++ b/packages/themes/src/kunpeng/token.config.cjs @@ -0,0 +1,17 @@ +/* global module */ +module.exports = { + prefix: '--o-', + themeMap: [ + { + key: 'light', + name: 'k.light', + }, + { + key: 'dark', + name: 'k.dark', + }, + ], + defaultTheme: '', + tokenFile: ['./token.json'], + codeSnippetsFile: './k.token.code-snippets', +}; diff --git a/packages/themes/src/kunpeng/token.json b/packages/themes/src/kunpeng/token.json new file mode 100644 index 0000000000000000000000000000000000000000..f9ed090b282207cde241488a1137a9e2402da230 --- /dev/null +++ b/packages/themes/src/kunpeng/token.json @@ -0,0 +1,2427 @@ +{ + "white": { + "name": "白色", + "type": "palette", + "typeName": "颜色", + "value": [ + { + "key": "white", + "value": { + "light": "255, 255, 255", + "dark": "255, 255, 255" + } + } + ] + }, + "black": { + "name": "黑色", + "type": "palette", + "typeName": "颜色", + "value": [ + { + "key": "black", + "value": { + "light": "0, 0, 0", + "dark": "0, 0, 0" + } + } + ] + }, + "deepblue": { + "name": "深蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "deepblue-1", + "value": { + "light": "232, 240, 255", + "dark": "0, 4, 77" + } + }, + { + "key": "deepblue-2", + "value": { + "light": "194, 213, 254", + "dark": "6, 15, 120" + } + }, + { + "key": "deepblue-3", + "value": { + "light": "157, 184, 253", + "dark": "20, 37, 163" + } + }, + { + "key": "deepblue-4", + "value": { + "light": "120, 153, 252", + "dark": "40, 65, 207" + } + }, + { + "key": "deepblue-5", + "value": { + "light": "83, 119, 251", + "dark": "66, 99, 250" + } + }, + { + "key": "deepblue-6", + "value": { + "light": "46, 83, 250", + "dark": "84, 120, 251" + } + }, + { + "key": "deepblue-7", + "value": { + "light": "29, 55, 207", + "dark": "122, 154, 252" + } + }, + { + "key": "deepblue-8", + "value": { + "light": "15, 32, 163", + "dark": "160, 186, 253" + } + }, + { + "key": "deepblue-9", + "value": { + "light": "6, 15, 120", + "dark": "199, 217, 254" + } + }, + { + "key": "deepblue-10", + "value": { + "light": "0, 4, 77", + "dark": "238, 244, 255" + } + } + ] + }, + "green": { + "name": "绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "green-1", + "value": { + "light": "232, 255, 238", + "dark": "0, 77, 42" + } + }, + { + "key": "green-2", + "value": { + "light": "177, 239, 195", + "dark": "2, 102, 53" + } + }, + { + "key": "green-3", + "value": { + "light": "128, 224, 158", + "dark": "10, 127, 66" + } + }, + { + "key": "green-4", + "value": { + "light": "84, 208, 127", + "dark": "22, 152, 80" + } + }, + { + "key": "green-5", + "value": { + "light": "45, 193, 101", + "dark": "36, 177, 95" + } + }, + { + "key": "green-6", + "value": { + "light": "11, 177, 81", + "dark": "51, 193, 104" + } + }, + { + "key": "green-7", + "value": { + "light": "7, 152, 72", + "dark": "90, 208, 131" + } + }, + { + "key": "green-8", + "value": { + "light": "4, 127, 63", + "dark": "135, 224, 163" + } + }, + { + "key": "green-9", + "value": { + "light": "2, 102, 53", + "dark": "185, 239, 200" + } + }, + { + "key": "green-10", + "value": { + "light": "0, 77, 42", + "dark": "240, 255, 244" + } + } + ] + }, + "orange": { + "name": "橘红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "orange-1", + "value": { + "light": "255, 246, 232", + "dark": "77, 24, 0" + } + }, + { + "key": "orange-2", + "value": { + "light": "254, 226, 186", + "dark": "120, 42, 1" + } + }, + { + "key": "orange-3", + "value": { + "light": "253, 202, 140", + "dark": "163, 68, 8" + } + }, + { + "key": "orange-4", + "value": { + "light": "252, 176, 95", + "dark": "207, 97, 19" + } + }, + { + "key": "orange-5", + "value": { + "light": "251, 147, 50", + "dark": "250, 130, 33" + } + }, + { + "key": "orange-6", + "value": { + "light": "250, 115, 5", + "dark": "251, 143, 43" + } + }, + { + "key": "orange-7", + "value": { + "light": "207, 88, 3", + "dark": "252, 174, 91" + } + }, + { + "key": "orange-8", + "value": { + "light": "163, 64, 2", + "dark": "253, 202, 139" + } + }, + { + "key": "orange-9", + "value": { + "light": "120, 42, 1", + "dark": "254, 227, 188" + } + }, + { + "key": "orange-10", + "value": { + "light": "77, 24, 0", + "dark": "255, 248, 237" + } + } + ] + }, + "red": { + "name": "红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-1", + "value": { + "light": "255, 234, 232", + "dark": "77, 0, 17" + } + }, + { + "key": "red-2", + "value": { + "light": "250, 185, 182", + "dark": "115, 3, 24" + } + }, + { + "key": "red-3", + "value": { + "light": "245, 136, 134", + "dark": "153, 9, 31" + } + }, + { + "key": "red-4", + "value": { + "light": "240, 87, 90", + "dark": "192, 17, 37" + } + }, + { + "key": "red-5", + "value": { + "light": "235, 43, 52", + "dark": "230, 28, 43" + } + }, + { + "key": "red-6", + "value": { + "light": "230, 0, 18", + "dark": "235, 35, 45" + } + }, + { + "key": "red-7", + "value": { + "light": "192, 0, 22", + "dark": "240, 82, 85" + } + }, + { + "key": "red-8", + "value": { + "light": "153, 0, 23", + "dark": "245, 132, 130" + } + }, + { + "key": "red-9", + "value": { + "light": "115, 0, 21", + "dark": "250, 183, 180" + } + }, + { + "key": "red-10", + "value": { + "light": "77, 0, 17", + "dark": "255, 234, 232" + } + } + ] + }, + "huaweired": { + "name": "华为红", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-huawei", + "value": { + "light": "199, 0, 11", + "dark": "199, 0, 11" + } + } + ] + }, + "gray": { + "name": "中性灰", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "gray-1", + "value": { + "light": "255, 255, 255", + "dark": "0, 0, 0" + } + }, + { + "key": "gray-2", + "value": { + "light": "243, 243, 245", + "dark": "18, 18, 20" + } + }, + { + "key": "gray-3", + "value": { + "light": "237, 237, 240", + "dark": "26, 26, 28" + } + }, + { + "key": "gray-4", + "value": { + "light": "232, 232, 235", + "dark": "36, 36, 39" + } + }, + { + "key": "gray-5", + "value": { + "light": "222, 222, 227", + "dark": "43, 43, 47" + } + }, + { + "key": "gray-6", + "value": { + "light": "210, 210, 217", + "dark": "53, 53, 57" + } + }, + { + "key": "gray-7", + "value": { + "light": "186, 186, 191", + "dark": "63, 63, 67" + } + }, + { + "key": "gray-8", + "value": { + "light": "149, 149, 156", + "dark": "85, 85, 88" + } + }, + { + "key": "gray-9", + "value": { + "light": "111, 111, 117", + "dark": "118, 118, 122" + } + }, + { + "key": "gray-10", + "value": { + "light": "85, 85, 92", + "dark": "156, 156, 159" + } + }, + { + "key": "gray-11", + "value": { + "light": "61, 61, 66", + "dark": "181, 181, 185" + } + }, + { + "key": "gray-12", + "value": { + "light": "37, 37, 41", + "dark": "208, 208, 210" + } + }, + { + "key": "gray-13", + "value": { + "light": "21, 21, 23", + "dark": "235, 235, 238" + } + }, + { + "key": "gray-14", + "value": { + "light": "0, 0, 0", + "dark": "255, 255, 255" + } + } + ] + }, + "mixedgray": { + "name": "混合中性色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "mixedgray-1", + "value": { + "light": "255, 255, 255", + "dark": "0, 0, 0" + } + }, + { + "key": "mixedgray-2", + "value": { + "light": "244, 245, 247", + "dark": "16, 18, 20" + } + }, + { + "key": "mixedgray-3", + "value": { + "light": "237, 239, 242", + "dark": "23, 25, 28" + } + }, + { + "key": "mixedgray-4", + "value": { + "light": "232, 234, 237", + "dark": "33, 35, 39" + } + }, + { + "key": "mixedgray-5", + "value": { + "light": "224, 226, 230", + "dark": "40, 42, 47" + } + }, + { + "key": "mixedgray-6", + "value": { + "light": "209, 214, 219", + "dark": "50, 53, 57" + } + }, + { + "key": "mixedgray-7", + "value": { + "light": "179, 185, 191", + "dark": "61, 63, 67" + } + }, + { + "key": "mixedgray-8", + "value": { + "light": "144, 150, 158", + "dark": "80, 84, 88" + } + }, + { + "key": "mixedgray-9", + "value": { + "light": "104, 109, 117", + "dark": "113, 117, 122" + } + }, + { + "key": "mixedgray-10", + "value": { + "light": "79, 84, 92", + "dark": "147, 152, 159" + } + }, + { + "key": "mixedgray-11", + "value": { + "light": "55, 59, 66", + "dark": "172, 177, 185" + } + }, + { + "key": "mixedgray-12", + "value": { + "light": "32, 35, 41", + "dark": "198, 202, 210" + } + }, + { + "key": "mixedgray-13", + "value": { + "light": "18, 20, 23", + "dark": "231, 234, 238" + } + }, + { + "key": "mixedgray-14", + "value": { + "light": "0, 0, 0", + "dark": "255, 255, 255" + } + } + ] + }, + "yellow": { + "name": "黄色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "yellow-1", + "value": { + "light": "255, 255, 232", + "dark": "77, 54, 0" + } + }, + { + "key": "yellow-2", + "value": { + "light": "253, 251, 185", + "dark": "119, 87, 2" + } + }, + { + "key": "yellow-3", + "value": { + "light": "251, 244, 139", + "dark": "161, 126, 11" + } + }, + { + "key": "yellow-4", + "value": { + "light": "249, 233, 94", + "dark": "203, 167, 24" + } + }, + { + "key": "yellow-5", + "value": { + "light": "247, 221, 49", + "dark": "245, 211, 42" + } + }, + { + "key": "yellow-6", + "value": { + "light": "245, 205, 5", + "dark": "247, 222, 54" + } + }, + { + "key": "yellow-7", + "value": { + "light": "203, 163, 3", + "dark": "249, 234, 100" + } + }, + { + "key": "yellow-8", + "value": { + "light": "161, 124, 2", + "dark": "251, 244, 146" + } + }, + { + "key": "yellow-9", + "value": { + "light": "119, 87, 1", + "dark": "253, 251, 192" + } + }, + { + "key": "yellow-10", + "value": { + "light": "77, 54, 0", + "dark": "255, 255, 240" + } + } + ] + }, + "lime": { + "name": "黄绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "lime-1", + "value": { + "light": "251, 255, 232", + "dark": "41, 77, 0" + } + }, + { + "key": "lime-2", + "value": { + "light": "233, 245, 184", + "dark": "63, 109, 3" + } + }, + { + "key": "lime-3", + "value": { + "light": "213, 236, 139", + "dark": "91, 142, 14" + } + }, + { + "key": "lime-4", + "value": { + "light": "192, 226, 97", + "dark": "121, 174, 30" + } + }, + { + "key": "lime-5", + "value": { + "light": "169, 217, 59", + "dark": "155, 207, 50" + } + }, + { + "key": "lime-6", + "value": { + "light": "146, 207, 23", + "dark": "172, 217, 68" + } + }, + { + "key": "lime-7", + "value": { + "light": "116, 174, 15", + "dark": "194, 226, 104" + } + }, + { + "key": "lime-8", + "value": { + "light": "88, 142, 8", + "dark": "214, 236, 144" + } + }, + { + "key": "lime-9", + "value": { + "light": "63, 109, 3", + "dark": "233, 245, 186" + } + }, + { + "key": "lime-10", + "value": { + "light": "41, 77, 0", + "dark": "251, 255, 232" + } + } + ] + }, + "cyan": { + "name": "青色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "cyan-1", + "value": { + "light": "232, 255, 249", + "dark": "0, 73, 77" + } + }, + { + "key": "cyan-2", + "value": { + "light": "176, 240, 226", + "dark": "2, 101, 103" + } + }, + { + "key": "cyan-3", + "value": { + "light": "125, 225, 207", + "dark": "9, 129, 127" + } + }, + { + "key": "cyan-4", + "value": { + "light": "79, 211, 191", + "dark": "18, 155, 148" + } + }, + { + "key": "cyan-5", + "value": { + "light": "38, 196, 177", + "dark": "30, 181, 167" + } + }, + { + "key": "cyan-6", + "value": { + "light": "3, 181, 165", + "dark": "42, 196, 178" + } + }, + { + "key": "cyan-7", + "value": { + "light": "2, 155, 147", + "dark": "84, 211, 192" + } + }, + { + "key": "cyan-8", + "value": { + "light": "1, 129, 127", + "dark": "130, 225, 208" + } + }, + { + "key": "cyan-9", + "value": { + "light": "0, 101, 103", + "dark": "182, 240, 227" + } + }, + { + "key": "cyan-10", + "value": { + "light": "0, 73, 77", + "dark": "239, 255, 251" + } + } + ] + }, + "blue": { + "name": "蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "blue-1", + "value": { + "light": "232, 249, 255", + "dark": "0, 34, 77" + } + }, + { + "key": "blue-2", + "value": { + "light": "185, 233, 252", + "dark": "1, 57, 117" + } + }, + { + "key": "blue-3", + "value": { + "light": "138, 214, 249", + "dark": "8, 86, 158" + } + }, + { + "key": "blue-4", + "value": { + "light": "93, 192, 246", + "dark": "18, 118, 199" + } + }, + { + "key": "blue-5", + "value": { + "light": "48, 168, 243", + "dark": "31, 153, 240" + } + }, + { + "key": "blue-6", + "value": { + "light": "5, 142, 240", + "dark": "42, 166, 243" + } + }, + { + "key": "blue-7", + "value": { + "light": "3, 111, 199", + "dark": "89, 191, 246" + } + }, + { + "key": "blue-8", + "value": { + "light": "2, 83, 158", + "dark": "137, 214, 249" + } + }, + { + "key": "blue-9", + "value": { + "light": "1, 57, 117", + "dark": "187, 233, 252" + } + }, + { + "key": "blue-10", + "value": { + "light": "0, 34, 77", + "dark": "237, 250, 255" + } + } + ] + }, + "purple": { + "name": "紫色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "purple-1", + "value": { + "light": "245, 232, 255", + "dark": "22, 0, 77" + } + }, + { + "key": "purple-2", + "value": { + "light": "225, 192, 253", + "dark": "40, 3, 118" + } + }, + { + "key": "purple-3", + "value": { + "light": "203, 152, 251", + "dark": "66, 15, 160" + } + }, + { + "key": "purple-4", + "value": { + "light": "178, 113, 248", + "dark": "98, 33, 202" + } + }, + { + "key": "purple-5", + "value": { + "light": "152, 75, 246", + "dark": "134, 57, 244" + } + }, + { + "key": "purple-6", + "value": { + "light": "123, 37, 244", + "dark": "152, 74, 246" + } + }, + { + "key": "purple-7", + "value": { + "light": "92, 23, 202", + "dark": "179, 114, 248" + } + }, + { + "key": "purple-8", + "value": { + "light": "64, 12, 160", + "dark": "205, 156, 251" + } + }, + { + "key": "purple-9", + "value": { + "light": "41, 4, 118", + "dark": "228, 198, 253" + } + }, + { + "key": "purple-10", + "value": { + "light": "22, 0, 77", + "dark": "249, 240, 255" + } + } + ] + }, + "pink": { + "name": "粉色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "pink-1", + "value": { + "light": "255, 232, 253", + "dark": "61, 0, 77" + } + }, + { + "key": "pink-2", + "value": { + "light": "246, 188, 243", + "dark": "93, 5, 110" + } + }, + { + "key": "pink-3", + "value": { + "light": "238, 146, 235", + "dark": "127, 16, 144" + } + }, + { + "key": "pink-4", + "value": { + "light": "229, 107, 229", + "dark": "164, 33, 178" + } + }, + { + "key": "pink-5", + "value": { + "light": "216, 71, 221", + "dark": "200, 54, 212" + } + }, + { + "key": "pink-6", + "value": { + "light": "199, 37, 212", + "dark": "216, 72, 221" + } + }, + { + "key": "pink-7", + "value": { + "light": "163, 23, 178", + "dark": "229, 109, 229" + } + }, + { + "key": "pink-8", + "value": { + "light": "127, 13, 144", + "dark": "238, 149, 235" + } + }, + { + "key": "pink-9", + "value": { + "light": "93, 5, 110", + "dark": "246, 191, 243" + } + }, + { + "key": "pink-10", + "value": { + "light": "61, 0, 77", + "dark": "255, 236, 253" + } + } + ] + }, + "rosyred": { + "name": "玫红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "rosyred-1", + "value": { + "light": "255, 232, 240", + "dark": "77, 0, 48" + } + }, + { + "key": "rosyred-2", + "value": { + "light": "249, 185, 209", + "dark": "114, 3, 70" + } + }, + { + "key": "rosyred-3", + "value": { + "light": "243, 141, 182", + "dark": "151, 12, 91" + } + }, + { + "key": "rosyred-4", + "value": { + "light": "238, 98, 158", + "dark": "189, 25, 112" + } + }, + { + "key": "rosyred-5", + "value": { + "light": "232, 57, 139", + "dark": "226, 41, 133" + } + }, + { + "key": "rosyred-6", + "value": { + "light": "226, 18, 122", + "dark": "232, 53, 137" + } + }, + { + "key": "rosyred-7", + "value": { + "light": "189, 11, 106", + "dark": "238, 97, 158" + } + }, + { + "key": "rosyred-8", + "value": { + "light": "151, 6, 88", + "dark": "243, 143, 183" + } + }, + { + "key": "rosyred-9", + "value": { + "light": "114, 2, 69", + "dark": "249, 192, 213" + } + }, + { + "key": "rosyred-10", + "value": { + "light": "77, 0, 48", + "dark": "255, 242, 247" + } + } + ] + }, + + "base": { + "name": "基础色(不同皮肤色相不变)", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-white", + "value": { + "light": "rgb(var(--o-white))", + "dark": "rgb(var(--o-white))" + } + }, + { + "key": "color-black", + "value": { + "light": "rgb(var(--o-black))", + "dark": "rgb(var(--o-black))" + } + } + ] + }, + "primary": { + "name": "强调色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-primary1", + "description": "常规", + "value": { + "light": "rgb(var(--o-gray-12))", + "dark": "rgb(var(--o-gray-14))" + } + }, + { + "key": "color-primary2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-gray-11))", + "dark": "rgb(var(--o-gray-13))" + } + }, + { + "key": "color-primary3", + "description": "激活", + "value": { + "light": "rgb(var(--o-gray-13))", + "dark": "rgb(var(--o-gray-12))" + } + }, + { + "key": "color-primary4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-gray-6))", + "dark": "rgb(var(--o-gray-8))" + } + }, + { + "key": "color-primary1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-gray-4))", + "dark": "rgb(var(--o-gray-5))" + } + }, + { + "key": "color-primary2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-gray-5))", + "dark": "rgb(var(--o-gray-6))" + } + }, + { + "key": "color-primary3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-gray-6))", + "dark": "rgb(var(--o-gray-7))" + } + }, + { + "key": "color-primary4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-gray-5))", + "dark": "rgb(var(--o-gray-6))" + } + } + ] + }, + "success": { + "name": "成功色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-success1", + "description": "常规", + "value": { + "light": "rgb(var(--o-green-6))", + "dark": "rgb(var(--o-green-6))" + } + }, + { + "key": "color-success2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success3", + "description": "激活", + "value": { + "light": "rgb(var(--o-green-7))", + "dark": "rgb(var(--o-green-7))" + } + }, + { + "key": "color-success4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-green-2))", + "dark": "rgb(var(--o-green-2))" + } + }, + { + "key": "color-success2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-green-1))", + "dark": "rgb(var(--o-green-1))" + } + } + ] + }, + "warning": { + "name": "告警色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-warning1", + "description": "常规", + "value": { + "light": "rgb(var(--o-orange-6))", + "dark": "rgb(var(--o-orange-6))" + } + }, + { + "key": "color-warning2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning3", + "description": "激活", + "value": { + "light": "rgb(var(--o-orange-7))", + "dark": "rgb(var(--o-orange-7))" + } + }, + { + "key": "color-warning4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-orange-2))", + "dark": "rgb(var(--o-orange-2))" + } + }, + { + "key": "color-warning2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-orange-1))", + "dark": "rgb(var(--o-orange-1))" + } + } + ] + }, + "danger": { + "name": "危险色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-danger1", + "description": "常规", + "value": { + "light": "rgb(var(--o-red-6))", + "dark": "rgb(var(--o-red-6))" + } + }, + { + "key": "color-danger2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger3", + "description": "激活", + "value": { + "light": "rgb(var(--o-red-7))", + "dark": "rgb(var(--o-red-7))" + } + }, + { + "key": "color-danger4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-red-2))", + "dark": "rgb(var(--o-red-2))" + } + }, + { + "key": "color-danger2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-red-1))", + "dark": "rgb(var(--o-red-1))" + } + } + ] + }, + "fill": { + "name": "填充色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-fill1", + "description": "一级填充：页面背景", + "value": { + "light": "rgb(var(--o-gray-2))", + "dark": "rgb(var(--o-gray-3))" + } + }, + { + "key": "color-fill2", + "description": "二级填充：区块、卡片", + "value": { + "light": "rgb(var(--o-gray-1))", + "dark": "rgb(var(--o-gray-4))" + } + }, + { + "key": "color-fill3", + "description": "三级填充：卡片", + "value": { + "light": "rgb(var(--o-gray-3))", + "dark": "rgb(var(--o-gray-5))" + } + } + ] + }, + "control": { + "name": "控件色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-control1", + "description": "常规，常用于边框", + "value": { + "light": "rgba(var(--o-gray-14), 0.25)", + "dark": "rgba(var(--o-gray-14), 0.25)" + } + }, + { + "key": "color-control2", + "description": "悬浮，常用于边框", + "value": { + "light": "rgba(var(--o-gray-14), 0.6)", + "dark": "rgba(var(--o-gray-14), 0.6)" + } + }, + { + "key": "color-control3", + "description": "激活，常用于边框", + "value": { + "light": "rgba(var(--o-gray-14), 0.8)", + "dark": "rgba(var(--o-gray-14), 0.8)" + } + }, + { + "key": "color-control4", + "description": "禁用，常用于边框", + "value": { + "light": "rgba(var(--o-gray-14), 0.1)", + "dark": "rgba(var(--o-gray-14), 0.15)" + } + }, + { + "key": "color-control1-light", + "description": "常规-浅，常用于背景", + "value": { + "light": "rgb(var(--o-gray-5))", + "dark": "rgb(var(--o-gray-7))" + } + }, + { + "key": "color-control2-light", + "description": "悬浮-浅，常用于背景", + "value": { + "light": "rgb(var(--o-gray-3))", + "dark": "rgb(var(--o-gray-5))" + } + }, + { + "key": "color-control3-light", + "description": "激活-浅，常用于背景", + "value": { + "light": "rgb(var(--o-gray-4))", + "dark": "rgb(var(--o-gray-6))" + } + }, + { + "key": "color-control4-light", + "description": "禁用，常用于背景", + "value": { + "light": "rgb(var(--o-gray-3))", + "dark": "rgb(var(--o-gray-5))" + } + }, + { + "key": "color-control-light", + "description": "很浅，常用于表格背景色", + "value": { + "light": "rgb(var(--o-gray-1))", + "dark": "rgb(var(--o-gray-4))" + } + } + ] + }, + "info": { + "name": "信息色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-info1", + "description": "一级/强调/标题", + "value": { + "light": "rgba(var(--o-gray-14), 1.0)", + "dark": "rgba(var(--o-gray-14), 1.0)" + } + }, + { + "key": "color-info2", + "description": "二级/次强调/正文", + "value": { + "light": "rgba(var(--o-gray-14), 0.8)", + "dark": "rgba(var(--o-gray-14), 0.8)" + } + }, + { + "key": "color-info3", + "description": "三级/辅助信息", + "value": { + "light": "rgba(var(--o-gray-14), 0.6)", + "dark": "rgba(var(--o-gray-14), 0.6)" + } + }, + { + "key": "color-info4", + "description": "置灰/禁用", + "value": { + "light": "rgba(var(--o-gray-14), 0.4)", + "dark": "rgba(var(--o-gray-14), 0.4)" + } + }, + { + "key": "color-info1-inverse", + "description": "一级/次强调/正文反色", + "value": { + "light": "rgba(var(--o-gray-1), 1.0)", + "dark": "rgba(var(--o-gray-1), 1.0)" + } + }, + { + "key": "color-info2-inverse", + "description": "二级/辅助信息反色", + "value": { + "light": "rgba(var(--o-gray-1), 0.8)", + "dark": "rgba(var(--o-gray-1), 0.8)" + } + }, + { + "key": "color-info3-inverse", + "description": "三级/辅助信息反色", + "value": { + "light": "rgba(var(--o-gray-1), 0.6)", + "dark": "rgba(var(--o-gray-1), 0.6)" + } + }, + { + "key": "color-info4-inverse", + "description": "置灰/禁用反色", + "value": { + "light": "rgba(var(--o-gray-1), 0.4)", + "dark": "rgba(var(--o-gray-1), 0.4)" + } + } + ] + }, + "mask": { + "name": "遮罩色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-mask1", + "description": "全局遮罩", + "value": { + "light": "rgba(var(--o-gray-14), 0.4)", + "dark": "rgba(var(--o-gray-1), 0.4)" + } + }, + { + "key": "color-mask2", + "description": "局部遮罩", + "value": { + "light": "rgba(var(--o-gray-1), 0.2)", + "dark": "rgba(var(--o-gray-4), 0.2)" + } + } + ] + }, + "shadow": { + "name": "阴影", + "type": "shadow", + "typeName": "阴影", + "value": [ + { + "key": "shadow-1", + "name": "阴影1", + "description": "用于卡片、小弹窗、楼层阴影", + "value": { + "light": "0 3px 8px rgba(var(--o-gray-14), 0.08)", + "dark": "0 3px 8px rgba(var(--o-gray-1), 0.08)" + } + }, + { + "key": "shadow-2", + "name": "阴影2", + "description": "用于卡片悬浮阴影", + "value": { + "light": "0 2px 24px rgba(var(--o-gray-14), 0.15)", + "dark": "0 2px 24px rgba(var(--o-gray-1), 0.15)" + } + }, + { + "key": "shadow-3", + "name": "阴影3", + "description": "用于提示阴影", + "value": { + "light": "0 8px 40px rgba(var(--o-gray-14), 0.1)", + "dark": "0 8px 40px rgba(var(--o-gray-1), 0.1)" + } + } + ] + }, + "link": { + "name": "链接色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-link1", + "description": "常规", + "value": { + "light": "rgba(var(--o-deepblue-6), 1.0)", + "dark": "rgba(var(--o-deepblue-6), 1.0)" + } + }, + { + "key": "color-link2", + "description": "悬浮", + "value": { + "light": "rgba(var(--o-deepblue-6), 0.7)", + "dark": "rgba(var(--o-deepblue-6), 0.7)" + } + }, + { + "key": "color-link3", + "description": "激活", + "value": { + "light": "rgba(var(--o-deepblue-6), 0.9)", + "dark": "rgba(var(--o-deepblue-6), 0.9)" + } + }, + { + "key": "color-link4", + "description": "禁用", + "value": { + "light": "rgba(var(--o-deepblue-6), 0.4)", + "dark": "rgba(var(--o-deepblue-6), 0.4)" + } + } + ] + }, + + "gap": { + "name": "间距", + "type": "gap", + "typeName": "间距", + "value": [ + { + "key": "gap-1", + "name": "间距1", + "description": "用于组件之间的间距1", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "gap-2", + "name": "间距2", + "description": "用于组件之间的间距2", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "gap-3", + "name": "间距3", + "description": "用于组件之间的间距3", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "gap-4", + "name": "间距4", + "description": "用于组件之间的间距4", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "gap-5", + "name": "间距5", + "description": "用于组件之间的间距5", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "gap-6", + "name": "间距6", + "description": "用于组件之间的间距6", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "gap-7", + "name": "间距7", + "description": "用于组件之间的间距7", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "gap-8", + "name": "间距8", + "description": "用于组件之间的间距8", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "gap-9", + "name": "间距9", + "description": "用于组件之间的间距9", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "gap-10", + "name": "间距10", + "description": "用于组件之间的间距10", + "value": { + "light": "72px", + "dark": "72px" + } + } + ] + }, + + "control_size": { + "name": "组件尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "control_size-2xs", + "name": "超小尺寸", + "description": "超小尺寸", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "control_size-xs", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "control_size-s", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "control_size-m", + "name": "中尺寸", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "control_size-l", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "control_size-xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "control_size-2xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "56px", + "dark": "56px" + } + } + ] + }, + + "icon_size": { + "name": "图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size-xs", + "name": "超小尺寸图标", + "description": "超小尺寸图标", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "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" + } + } + ] + }, + "icon_size_control": { + "name": "组件图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size_control-xs", + "name": "超小尺寸图标", + "description": "超小尺寸控件图标(组件使用)", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "icon_size_control-s", + "name": "小尺寸图标", + "description": "小尺寸控件图标(组件使用)", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "icon_size_control-m", + "name": "中尺寸图标", + "description": "中尺寸控件图标(组件使用)", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "icon_size_control-l", + "name": "大尺寸图标", + "description": "大尺寸控件图标(组件使用)", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "icon_size_control-xl", + "name": "超大尺寸图标", + "description": "超大尺寸控件图标(组件使用)", + "value": { + "light": "40px", + "dark": "40px" + } + } + ] + }, + + "font_size": { + "name": "字体尺寸", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "font_size-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "font_size-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "font_size-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "font_size-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "font_size-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "font_size-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "22px", + "dark": "22px" + } + }, + { + "key": "font_size-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "font_size-text1", + "name": "常规正文", + "description": "常规正文", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "font_size-text2", + "name": "大号正文", + "description": "大号正文", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "font_size-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "font_size-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "12px", + "dark": "12px" + } + } + ] + }, + "line_height": { + "name": "字体行高", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "line_height-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "80px", + "dark": "80px" + } + }, + { + "key": "line_height-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "line_height-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "line_height-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "44px", + "dark": "44px" + } + }, + { + "key": "line_height-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "line_height-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "30px", + "dark": "30px" + } + }, + { + "key": "line_height-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "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": "22px", + "dark": "22px" + } + }, + { + "key": "line_height-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "18px", + "dark": "18px" + } + } + ] + }, + + "radius": { + "name": "圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius-xs", + "name": "超小尺寸圆角", + "description": "超小尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-s", + "name": "小尺寸圆角", + "description": "小尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-m", + "name": "中尺寸圆角", + "description": "中尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-l", + "name": "大尺寸圆角", + "description": "大尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-xl", + "name": "大尺寸圆角", + "description": "大尺寸圆角,一般用于卡片", + "value": { + "light": "0px", + "dark": "0px" + } + } + ] + }, + "radius_control": { + "name": "组件圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius_control-xs", + "name": "超小尺寸控件圆角", + "description": "超小尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius_control-s", + "name": "小尺寸控件圆角", + "description": "小尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius_control-m", + "name": "中尺寸控件圆角", + "description": "中尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius_control-l", + "name": "大尺寸控件圆角", + "description": "大尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + } + ] + }, + + "duration": { + "name": "动画持续时间", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "duration-s", + "name": "持续时间", + "description": "用于退出屏幕的动画", + "value": { + "light": "200ms", + "dark": "200ms" + } + }, + { + "key": "duration-m1", + "name": "持续时间", + "description": "用于当曲线为standard-in时进入屏幕的动画", + "value": { + "light": "250ms", + "dark": "250ms" + } + }, + { + "key": "duration-m2", + "name": "持续时间", + "description": "用于当曲线为standard时开始、结束的动画", + "value": { + "light": "300ms", + "dark": "300ms" + } + }, + { + "key": "duration-m3", + "name": "持续时间", + "description": "用于当曲线为emphasized-in时进入屏幕的动画", + "value": { + "light": "400ms", + "dark": "400ms" + } + }, + { + "key": "duration-l", + "name": "持续时间", + "description": "用于当曲线为emphasized时开始、结束的动画", + "value": { + "light": "500ms", + "dark": "500ms" + } + }, + { + "key": "duration-xl", + "name": "持续时间", + "description": "用于当曲线为emphasized时，轮播切换动画", + "value": { + "light": "1000ms", + "dark": "1000ms" + } + } + ] + }, + + "easing": { + "name": "动画曲线", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "easing-linear", + "name": "线性动画曲线", + "description": "线性曲线", + "value": { + "light": "cubic-bezier(0, 0, 1, 1)", + "dark": "cubic-bezier(0, 0, 1, 1)" + } + }, + { + "key": "easing-standard", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-standard-in", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0, 0, 0, 1)", + "dark": "cubic-bezier(0, 0, 0, 1)" + } + }, + { + "key": "easing-standard-out", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.3, 0, 1, 1)", + "dark": "cubic-bezier(0.3, 0, 1, 1)" + } + }, + { + "key": "easing-emphasized", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-emphasized-in", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.3, 0, 0.8, 0.15)", + "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)" + } + }, + { + "key": "easing-emphasized-out", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.05, 0.7, 0.1, 1)", + "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)" + } + } + ] + } +} diff --git a/packages/themes/src/open-euler/base.scss b/packages/themes/src/open-euler/base.scss new file mode 100644 index 0000000000000000000000000000000000000000..08d8b57f2dcf0f4719305d8f8efc85c778bb641f --- /dev/null +++ b/packages/themes/src/open-euler/base.scss @@ -0,0 +1,4 @@ +[class^='c-'], +[class*=' c-'] { + box-sizing: border-box; +} diff --git a/packages/themes/src/open-euler/button.scss b/packages/themes/src/open-euler/button.scss new file mode 100644 index 0000000000000000000000000000000000000000..73d0378b6dd93cd1874782ca8109dc9d86822cbc --- /dev/null +++ b/packages/themes/src/open-euler/button.scss @@ -0,0 +1 @@ +@use '../shared/button.scss'; diff --git a/packages/themes/src/open-euler/index.scss b/packages/themes/src/open-euler/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..b6fa4adc1e20d84bfecfd76a7c3203e0b8fb0183 --- /dev/null +++ b/packages/themes/src/open-euler/index.scss @@ -0,0 +1,4 @@ +@use './e.light.token.css' as *; +@use './e.dark.token.css' as *; +@use './base.scss' as *; +@use './button.scss' as *; \ No newline at end of file diff --git a/packages/themes/src/open-euler/token.config.cjs b/packages/themes/src/open-euler/token.config.cjs new file mode 100644 index 0000000000000000000000000000000000000000..974e257e2fb63ea5fdb1fdad382028a9eb64716f --- /dev/null +++ b/packages/themes/src/open-euler/token.config.cjs @@ -0,0 +1,17 @@ +/* global module */ +module.exports = { + prefix: '--o-', + themeMap: [ + { + key: 'light', + name: 'e.light', + }, + { + key: 'dark', + name: 'e.dark', + }, + ], + defaultTheme: '', + tokenFile: ['./token.json'], + codeSnippetsFile: './e.token.code-snippets', +}; diff --git a/packages/themes/src/open-euler/token.json b/packages/themes/src/open-euler/token.json new file mode 100644 index 0000000000000000000000000000000000000000..a1fa8005713b06d8ddc1546f46fc456e2d31f67d --- /dev/null +++ b/packages/themes/src/open-euler/token.json @@ -0,0 +1,2707 @@ +{ + "white": { + "name": "白色", + "type": "palette", + "typeName": "颜色", + "value": [ + { + "key": "white", + "value": { + "light": "255, 255, 255", + "dark": "255, 255, 255" + } + } + ] + }, + "black": { + "name": "黑色", + "type": "palette", + "typeName": "颜色", + "value": [ + { + "key": "black", + "value": { + "light": "0, 0, 0", + "dark": "0, 0, 0" + } + } + ] + }, + "gray": { + "name": "中性灰", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "gray-1", + "value": { + "light": "255, 255, 255", + "dark": "0, 0, 0" + } + }, + { + "key": "gray-2", + "value": { + "light": "243, 243, 245", + "dark": "18, 18, 20" + } + }, + { + "key": "gray-3", + "value": { + "light": "237, 237, 240", + "dark": "26, 26, 28" + } + }, + { + "key": "gray-4", + "value": { + "light": "232, 232, 235", + "dark": "36, 36, 39" + } + }, + { + "key": "gray-5", + "value": { + "light": "222, 222, 227", + "dark": "43, 43, 47" + } + }, + { + "key": "gray-6", + "value": { + "light": "210, 210, 217", + "dark": "53, 53, 57" + } + }, + { + "key": "gray-7", + "value": { + "light": "186, 186, 191", + "dark": "63, 63, 67" + } + }, + { + "key": "gray-8", + "value": { + "light": "149, 149, 156", + "dark": "85, 85, 88" + } + }, + { + "key": "gray-9", + "value": { + "light": "111, 111, 117", + "dark": "118, 118, 122" + } + }, + { + "key": "gray-10", + "value": { + "light": "85, 85, 92", + "dark": "156, 156, 159" + } + }, + { + "key": "gray-11", + "value": { + "light": "61, 61, 66", + "dark": "181, 181, 185" + } + }, + { + "key": "gray-12", + "value": { + "light": "37, 37, 41", + "dark": "208, 208, 210" + } + }, + { + "key": "gray-13", + "value": { + "light": "21, 21, 23", + "dark": "235, 235, 238" + } + }, + { + "key": "gray-14", + "value": { + "light": "0, 0, 0", + "dark": "255, 255, 255" + } + } + ] + }, + "kleinblue": { + "name": "品牌色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "kleinblue-1", + "value": { + "light": "235, 241, 250", + "dark": "14, 26, 69" + } + }, + { + "key": "kleinblue-2", + "value": { + "light": "206, 219, 245", + "dark": "18, 34, 87" + } + }, + { + "key": "kleinblue-3", + "value": { + "light": "132, 161, 220", + "dark": "29, 51, 119" + } + }, + { + "key": "kleinblue-4", + "value": { + "light": "81, 119, 202", + "dark": "42, 72, 158" + } + }, + { + "key": "kleinblue-5", + "value": { + "light": "37, 81, 185", + "dark": "57, 97, 202" + } + }, + { + "key": "kleinblue-6", + "value": { + "light": "0, 47, 167", + "dark": "73, 122, 248" + } + }, + { + "key": "kleinblue-7", + "value": { + "light": "0, 39, 147", + "dark": "110, 148, 243" + } + }, + { + "key": "kleinblue-8", + "value": { + "light": "0, 31, 126", + "dark": "140, 171, 234" + } + }, + { + "key": "kleinblue-9", + "value": { + "light": "0, 24, 106", + "dark": "176, 199, 241" + } + }, + { + "key": "kleinblue-10", + "value": { + "light": "0, 18, 85", + "dark": "215, 227, 248" + } + } + ] + }, + "yellow": { + "name": "黄色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "yellow-1", + "value": { + "light": "254, 252, 233", + "dark": "81, 46, 9" + } + }, + { + "key": "yellow-2", + "value": { + "light": "252, 248, 202", + "dark": "121, 75, 15" + } + }, + { + "key": "yellow-3", + "value": { + "light": "249, 237, 149", + "dark": "161, 107, 22" + } + }, + { + "key": "yellow-4", + "value": { + "light": "246, 224, 98", + "dark": "202, 143, 30" + } + }, + { + "key": "yellow-5", + "value": { + "light": "243, 207, 49", + "dark": "242, 183, 38" + } + }, + { + "key": "yellow-6", + "value": { + "light": "240, 188, 0", + "dark": "245, 202, 80" + } + }, + { + "key": "yellow-7", + "value": { + "light": "200, 147, 0", + "dark": "247, 219, 122" + } + }, + { + "key": "yellow-8", + "value": { + "light": "160, 109, 0", + "dark": "250, 234, 166" + } + }, + { + "key": "yellow-9", + "value": { + "light": "120, 76, 0", + "dark": "252, 246, 210" + } + }, + { + "key": "yellow-10", + "value": { + "light": "80, 47, 0", + "dark": "254, 251, 237" + } + } + ] + }, + "orange": { + "name": "橘红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "orange-1", + "value": { + "light": "255, 246, 232", + "dark": "77, 24, 0" + } + }, + { + "key": "orange-2", + "value": { + "light": "254, 226, 186", + "dark": "120, 42, 1" + } + }, + { + "key": "orange-3", + "value": { + "light": "253, 202, 140", + "dark": "163, 68, 8" + } + }, + { + "key": "orange-4", + "value": { + "light": "252, 176, 95", + "dark": "207, 97, 19" + } + }, + { + "key": "orange-5", + "value": { + "light": "251, 147, 50", + "dark": "250, 130, 33" + } + }, + { + "key": "orange-6", + "value": { + "light": "250, 115, 5", + "dark": "251, 143, 43" + } + }, + { + "key": "orange-7", + "value": { + "light": "207, 88, 3", + "dark": "252, 174, 91" + } + }, + { + "key": "orange-8", + "value": { + "light": "163, 64, 2", + "dark": "253, 202, 139" + } + }, + { + "key": "orange-9", + "value": { + "light": "120, 42, 1", + "dark": "254, 227, 188" + } + }, + { + "key": "orange-10", + "value": { + "light": "77, 24, 0", + "dark": "255, 248, 237" + } + } + ] + }, + "red": { + "name": "红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-1", + "value": { + "light": "255, 234, 232", + "dark": "77, 0, 17" + } + }, + { + "key": "red-2", + "value": { + "light": "250, 185, 182", + "dark": "115, 3, 24" + } + }, + { + "key": "red-3", + "value": { + "light": "245, 136, 134", + "dark": "153, 9, 31" + } + }, + { + "key": "red-4", + "value": { + "light": "240, 87, 90", + "dark": "192, 17, 37" + } + }, + { + "key": "red-5", + "value": { + "light": "235, 43, 52", + "dark": "230, 28, 43" + } + }, + { + "key": "red-6", + "value": { + "light": "230, 0, 18", + "dark": "235, 35, 45" + } + }, + { + "key": "red-7", + "value": { + "light": "192, 0, 22", + "dark": "240, 82, 85" + } + }, + { + "key": "red-8", + "value": { + "light": "153, 0, 23", + "dark": "245, 132, 130" + } + }, + { + "key": "red-9", + "value": { + "light": "115, 0, 21", + "dark": "250, 183, 180" + } + }, + { + "key": "red-10", + "value": { + "light": "77, 0, 17", + "dark": "255, 234, 232" + } + } + ] + }, + "huaweired": { + "name": "华为红", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-huawei", + "value": { + "light": "199, 0, 11", + "dark": "199, 0, 11" + } + } + ] + }, + "green": { + "name": "绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "green-1", + "value": { + "light": "232, 255, 238", + "dark": "0, 77, 42" + } + }, + { + "key": "green-2", + "value": { + "light": "177, 239, 195", + "dark": "2, 102, 53" + } + }, + { + "key": "green-3", + "value": { + "light": "128, 224, 158", + "dark": "10, 127, 66" + } + }, + { + "key": "green-4", + "value": { + "light": "84, 208, 127", + "dark": "22, 152, 80" + } + }, + { + "key": "green-5", + "value": { + "light": "45, 193, 101", + "dark": "36, 177, 95" + } + }, + { + "key": "green-6", + "value": { + "light": "11, 177, 81", + "dark": "51, 193, 104" + } + }, + { + "key": "green-7", + "value": { + "light": "7, 152, 72", + "dark": "90, 208, 131" + } + }, + { + "key": "green-8", + "value": { + "light": "4, 127, 63", + "dark": "135, 224, 163" + } + }, + { + "key": "green-9", + "value": { + "light": "2, 102, 53", + "dark": "185, 239, 200" + } + }, + { + "key": "green-10", + "value": { + "light": "0, 77, 42", + "dark": "240, 255, 244" + } + } + ] + }, + "amber": { + "name": "琥珀色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "amber-1", + "value": { + "light": "253, 247, 232", + "dark": "77, 30, 0" + } + }, + { + "key": "amber-2", + "value": { + "light": "250, 237, 200", + "dark": "116, 51, 0" + } + }, + { + "key": "amber-3", + "value": { + "light": "245, 215, 147", + "dark": "154, 76, 0" + } + }, + { + "key": "amber-4", + "value": { + "light": "241, 191, 96", + "dark": "193, 105, 0" + } + }, + { + "key": "amber-5", + "value": { + "light": "236, 165, 47", + "dark": "231, 137, 0" + } + }, + { + "key": "amber-6", + "value": { + "light": "231, 137, 0", + "dark": "236, 165, 47" + } + }, + { + "key": "amber-7", + "value": { + "light": "193, 105, 0", + "dark": "241, 191, 96" + } + }, + { + "key": "amber-8", + "value": { + "light": "154, 76, 0", + "dark": "245, 215, 147" + } + }, + { + "key": "amber-9", + "value": { + "light": "116, 51, 0", + "dark": "250, 237, 200" + } + }, + { + "key": "amber-10", + "value": { + "light": "77, 30, 0", + "dark": "253, 247, 232" + } + } + ] + }, + "lime": { + "name": "黄绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "lime-1", + "value": { + "light": "243, 250, 230", + "dark": "51, 67, 0" + } + }, + { + "key": "lime-2", + "value": { + "light": "229, 244, 195", + "dark": "78, 101, 0" + } + }, + { + "key": "lime-3", + "value": { + "light": "208, 233, 140", + "dark": "107, 134, 0" + } + }, + { + "key": "lime-4", + "value": { + "light": "191, 223, 89", + "dark": "134, 168, 0" + } + }, + { + "key": "lime-5", + "value": { + "light": "177, 212, 42", + "dark": "167, 201, 0" + } + }, + { + "key": "lime-6", + "value": { + "light": "167, 201, 0", + "dark": "177, 212, 42" + } + }, + { + "key": "lime-7", + "value": { + "light": "136, 168, 0", + "dark": "191, 223, 89" + } + }, + { + "key": "lime-8", + "value": { + "light": "107, 134, 0", + "dark": "208, 233, 140" + } + }, + { + "key": "lime-9", + "value": { + "light": "78, 101, 0", + "dark": "229, 244, 195" + } + }, + { + "key": "lime-10", + "value": { + "light": "51, 67, 0", + "dark": "243, 250, 230" + } + } + ] + }, + "light-green": { + "name": "浅绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "light-green-1", + "value": { + "light": "242, 247, 231", + "dark": "33, 60, 7" + } + }, + { + "key": "light-green-2", + "value": { + "light": "225, 240, 199", + "dark": "51, 90, 11" + } + }, + { + "key": "light-green-3", + "value": { + "light": "195, 225, 148", + "dark": "70, 119, 16" + } + }, + { + "key": "light-green-4", + "value": { + "light": "166, 209, 103", + "dark": "91, 149, 21" + } + }, + { + "key": "light-green-5", + "value": { + "light": "138, 194, 62", + "dark": "112, 179, 27" + } + }, + { + "key": "light-green-6", + "value": { + "light": "112, 179, 27", + "dark": "184, 220, 48" + } + }, + { + "key": "light-green-7", + "value": { + "light": "91, 149, 21", + "dark": "166, 209, 103" + } + }, + { + "key": "light-green-8", + "value": { + "light": "70, 119, 16", + "dark": "195, 225, 148" + } + }, + { + "key": "light-green-9", + "value": { + "light": "51, 90, 11", + "dark": "225, 240, 199" + } + }, + { + "key": "light-green-10", + "value": { + "light": "33, 60, 7", + "dark": "242, 247, 231" + } + } + ] + }, + "teal": { + "name": "蓝绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "teal-1", + "value": { + "light": "228, 247, 241", + "dark": "0, 60, 48" + } + }, + { + "key": "teal-2", + "value": { + "light": "192, 240, 224", + "dark": "0, 90, 71" + } + }, + { + "key": "teal-3", + "value": { + "light": "135, 225, 197", + "dark": "0, 119, 93" + } + }, + { + "key": "teal-4", + "value": { + "light": "84, 209, 173", + "dark": "0, 149, 113" + } + }, + { + "key": "teal-5", + "value": { + "light": "39, 194, 152", + "dark": "0, 179, 133" + } + }, + { + "key": "teal-6", + "value": { + "light": "0, 179, 133", + "dark": "39, 194, 152" + } + }, + { + "key": "teal-7", + "value": { + "light": "0, 149, 113", + "dark": "84, 209, 173" + } + }, + { + "key": "teal-8", + "value": { + "light": "0, 119, 93", + "dark": "135, 225, 197" + } + }, + { + "key": "teal-9", + "value": { + "light": "0, 90, 71", + "dark": "192, 240, 224" + } + }, + { + "key": "teal-10", + "value": { + "light": "0, 60, 48", + "dark": "228, 247, 241" + } + } + ] + }, + "cyan": { + "name": "青色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "cyan-1", + "value": { + "light": "228, 247, 247", + "dark": "0, 52, 60" + } + }, + { + "key": "cyan-2", + "value": { + "light": "192, 240, 240", + "dark": "0, 79, 90" + } + }, + { + "key": "cyan-3", + "value": { + "light": "135, 223, 225", + "dark": "0, 107, 119" + } + }, + { + "key": "cyan-4", + "value": { + "light": "84, 205, 209", + "dark": "0, 137, 149" + } + }, + { + "key": "cyan-5", + "value": { + "light": "39, 186, 194", + "dark": "39, 186, 194" + } + }, + { + "key": "cyan-6", + "value": { + "light": "0, 167, 179", + "dark": "84, 205, 209" + } + }, + { + "key": "cyan-7", + "value": { + "light": "0, 137, 149", + "dark": "92, 208, 212" + } + }, + { + "key": "cyan-8", + "value": { + "light": "0, 107, 119", + "dark": "135, 223, 225" + } + }, + { + "key": "cyan-9", + "value": { + "light": "0, 79, 90", + "dark": "192, 240, 240" + } + }, + { + "key": "cyan-10", + "value": { + "light": "0, 52, 60", + "dark": "228, 247, 247" + } + } + ] + }, + "light-blue": { + "name": "浅蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "light-blue-1", + "value": { + "light": "232, 247, 252", + "dark": "0, 47, 76" + } + }, + { + "key": "light-blue-2", + "value": { + "light": "200, 237, 250", + "dark": "0, 72, 115" + } + }, + { + "key": "light-blue-3", + "value": { + "light": "147, 218, 245", + "dark": "0, 99, 153" + } + }, + { + "key": "light-blue-4", + "value": { + "light": "96, 198, 239", + "dark": "0, 127, 191" + } + }, + { + "key": "light-blue-5", + "value": { + "light": "47, 178, 234", + "dark": "0, 156, 229" + } + }, + { + "key": "light-blue-6", + "value": { + "light": "0, 156, 229", + "dark": "47, 178, 234" + } + }, + { + "key": "light-blue-7", + "value": { + "light": "0, 127, 191", + "dark": "96, 198, 239" + } + }, + { + "key": "light-blue-8", + "value": { + "light": "0, 99, 153", + "dark": "147, 218, 245" + } + }, + { + "key": "light-blue-9", + "value": { + "light": "0, 72, 115", + "dark": "200, 237, 250" + } + }, + { + "key": "light-blue-10", + "value": { + "light": "0, 47, 76", + "dark": "232, 247, 252" + } + } + ] + }, + "blue": { + "name": "蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "blue-1", + "value": { + "light": "233, 245, 254", + "dark": "0, 43, 97" + } + }, + { + "key": "blue-2", + "value": { + "light": "202, 231, 252", + "dark": "0, 61, 133" + } + }, + { + "key": "blue-3", + "value": { + "light": "149, 205, 249", + "dark": "0, 80, 169" + } + }, + { + "key": "blue-4", + "value": { + "light": "98, 178, 246", + "dark": "0, 100, 204" + } + }, + { + "key": "blue-5", + "value": { + "light": "49, 151, 243", + "dark": "0, 122, 240" + } + }, + { + "key": "blue-6", + "value": { + "light": "0, 122, 240", + "dark": "49, 151, 243" + } + }, + { + "key": "blue-7", + "value": { + "light": "0, 100, 204", + "dark": "98, 178, 246" + } + }, + { + "key": "blue-8", + "value": { + "light": "0, 80, 169", + "dark": "149, 205, 249" + } + }, + { + "key": "blue-9", + "value": { + "light": "0, 61, 133", + "dark": "202, 231, 252" + } + }, + { + "key": "blue-10", + "value": { + "light": "0, 43, 97", + "dark": "233, 245, 254" + } + } + ] + }, + "indigo": { + "name": "靛蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "indigo-1", + "value": { + "light": "232, 236, 247", + "dark": "5, 19, 97" + } + }, + { + "key": "indigo-2", + "value": { + "light": "200, 211, 240", + "dark": "10, 28, 118" + } + }, + { + "key": "indigo-3", + "value": { + "light": "150, 170, 225", + "dark": "16, 38, 138" + } + }, + { + "key": "indigo-4", + "value": { + "light": "106, 131, 209", + "dark": "23, 50, 159" + } + }, + { + "key": "indigo-5", + "value": { + "light": "66, 96, 194", + "dark": "31, 63, 179" + } + }, + { + "key": "indigo-6", + "value": { + "light": "31, 63, 179", + "dark": "66, 96, 194" + } + }, + { + "key": "indigo-7", + "value": { + "light": "23, 50, 159", + "dark": "106, 131, 209" + } + }, + { + "key": "indigo-8", + "value": { + "light": "16, 38, 138", + "dark": "150, 170, 225" + } + }, + { + "key": "indigo-9", + "value": { + "light": "10, 28, 118", + "dark": "200, 211, 240" + } + }, + { + "key": "indigo-10", + "value": { + "light": "5, 19, 101", + "dark": "232, 236, 247" + } + } + ] + }, + "violet": { + "name": "紫罗兰色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "violet-1", + "value": { + "light": "234, 231, 249", + "dark": "34, 0, 109" + } + }, + { + "key": "violet-2", + "value": { + "light": "206, 199, 242", + "dark": "39, 2, 130" + } + }, + { + "key": "violet-3", + "value": { + "light": "163, 147, 229", + "dark": "46, 7, 150" + } + }, + { + "key": "violet-4", + "value": { + "light": "124, 100, 217", + "dark": "53, 13, 171" + } + }, + { + "key": "violet-5", + "value": { + "light": "90, 58, 204", + "dark": "61, 20, 191" + } + }, + { + "key": "violet-6", + "value": { + "light": "61, 20, 191", + "dark": "97, 62, 201" + } + }, + { + "key": "violet-7", + "value": { + "light": "53, 13, 171", + "dark": "150, 130, 223" + } + }, + { + "key": "violet-8", + "value": { + "light": "46, 7, 150", + "dark": "182, 169, 233" + } + }, + { + "key": "violet-9", + "value": { + "light": "39, 2, 130", + "dark": "217, 210, 244" + } + }, + { + "key": "violet-10", + "value": { + "light": "34, 0, 109", + "dark": "240, 237, 250" + } + } + ] + }, + "purple": { + "name": "紫色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "purple-1", + "value": { + "light": "245, 232, 255", + "dark": "60, 0, 97" + } + }, + { + "key": "purple-2", + "value": { + "light": "225, 192, 253", + "dark": "77, 0, 118" + } + }, + { + "key": "purple-3", + "value": { + "light": "203, 152, 251", + "dark": "95, 0, 138" + } + }, + { + "key": "purple-4", + "value": { + "light": "178, 113, 248", + "dark": "114, 0, 159" + } + }, + { + "key": "purple-5", + "value": { + "light": "152, 75, 246", + "dark": "135, 2, 179" + } + }, + { + "key": "purple-6", + "value": { + "light": "123, 37, 244", + "dark": "161, 41, 194" + } + }, + { + "key": "purple-7", + "value": { + "light": "92, 23, 202", + "dark": "187, 85, 209" + } + }, + { + "key": "purple-8", + "value": { + "light": "64, 12, 160", + "dark": "211, 136, 225" + } + }, + { + "key": "purple-9", + "value": { + "light": "41, 4, 118", + "dark": "234, 192, 240" + } + }, + { + "key": "purple-10", + "value": { + "light": "22, 0, 77", + "dark": "245, 228, 247" + } + } + ] + }, + "pink": { + "name": "粉色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "pink-1", + "value": { + "light": "255, 232, 253", + "dark": "81, 0, 51" + } + }, + { + "key": "pink-2", + "value": { + "light": "246, 188, 243", + "dark": "117, 0, 70" + } + }, + { + "key": "pink-3", + "value": { + "light": "238, 146, 235", + "dark": "153, 0, 86" + } + }, + { + "key": "pink-4", + "value": { + "light": "229, 107, 229", + "dark": "188, 0, 100" + } + }, + { + "key": "pink-5", + "value": { + "light": "216, 71, 221", + "dark": "224, 0, 112" + } + }, + { + "key": "pink-6", + "value": { + "light": "199, 37, 212", + "dark": "230, 46, 132" + } + }, + { + "key": "pink-7", + "value": { + "light": "163, 23, 178", + "dark": "236, 95, 156" + } + }, + { + "key": "pink-8", + "value": { + "light": "127, 13, 144", + "dark": "243, 146, 184" + } + }, + { + "key": "pink-9", + "value": { + "light": "93, 5, 110", + "dark": "249, 199, 217" + } + }, + { + "key": "pink-10", + "value": { + "light": "61, 0, 77", + "dark": "252, 232, 239" + } + } + ] + }, + + "base": { + "name": "基础色(不同皮肤色相不变)", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-white", + "value": { + "light": "rgb(var(--o-white))", + "dark": "rgb(var(--o-white))" + } + }, + { + "key": "color-black", + "value": { + "light": "rgb(var(--o-black))", + "dark": "rgb(var(--o-black))" + } + } + ] + }, + "primary": { + "name": "强调色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-primary1", + "description": "常规", + "value": { + "light": "rgb(var(--o-kleinblue-6))", + "dark": "rgb(var(--o-kleinblue-6))" + } + }, + { + "key": "color-primary2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-kleinblue-4))", + "dark": "rgb(var(--o-kleinblue-5))" + } + }, + { + "key": "color-primary3", + "description": "激活", + "value": { + "light": "rgb(var(--o-kleinblue-7))", + "dark": "rgb(var(--o-kleinblue-7))" + } + }, + { + "key": "color-primary4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-kleinblue-3))", + "dark": "rgb(var(--o-kleinblue-4))" + } + }, + { + "key": "color-primary1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-kleinblue-2))", + "dark": "rgb(var(--o-kleinblue-2))" + } + }, + { + "key": "color-primary2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-kleinblue-3))", + "dark": "rgb(var(--o-kleinblue-3))" + } + }, + { + "key": "color-primary3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-kleinblue-4))", + "dark": "rgb(var(--o-kleinblue-4))" + } + }, + { + "key": "color-primary4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-kleinblue-1))", + "dark": "rgb(var(--o-kleinblue-1))" + } + } + ] + }, + "success": { + "name": "成功色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-success1", + "description": "常规", + "value": { + "light": "rgb(var(--o-green-6))", + "dark": "rgb(var(--o-green-6))" + } + }, + { + "key": "color-success2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success3", + "description": "激活", + "value": { + "light": "rgb(var(--o-green-7))", + "dark": "rgb(var(--o-green-7))" + } + }, + { + "key": "color-success4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-green-2))", + "dark": "rgb(var(--o-green-2))" + } + }, + { + "key": "color-success2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-green-1))", + "dark": "rgb(var(--o-green-1))" + } + } + ] + }, + "warning": { + "name": "告警色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-warning1", + "description": "常规", + "value": { + "light": "rgb(var(--o-orange-6))", + "dark": "rgb(var(--o-orange-6))" + } + }, + { + "key": "color-warning2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning3", + "description": "激活", + "value": { + "light": "rgb(var(--o-orange-7))", + "dark": "rgb(var(--o-orange-7))" + } + }, + { + "key": "color-warning4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-orange-2))", + "dark": "rgb(var(--o-orange-2))" + } + }, + { + "key": "color-warning2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-orange-1))", + "dark": "rgb(var(--o-orange-1))" + } + } + ] + }, + "danger": { + "name": "危险色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-danger1", + "description": "常规", + "value": { + "light": "rgb(var(--o-red-6))", + "dark": "rgb(var(--o-red-6))" + } + }, + { + "key": "color-danger2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger3", + "description": "激活", + "value": { + "light": "rgb(var(--o-red-7))", + "dark": "rgb(var(--o-red-7))" + } + }, + { + "key": "color-danger4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger1-light", + "description": "常规-浅", + "value": { + "light": "rgb(var(--o-red-2))", + "dark": "rgb(var(--o-red-2))" + } + }, + { + "key": "color-danger2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-red-1))", + "dark": "rgb(var(--o-red-1))" + } + } + ] + }, + "fill": { + "name": "填充色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-fill1", + "description": "一级填充：页面背景", + "value": { + "light": "rgb(var(--o-gray-2))", + "dark": "rgb(var(--o-gray-3))" + } + }, + { + "key": "color-fill2", + "description": "二级填充：区块、卡片", + "value": { + "light": "rgb(var(--o-gray-1))", + "dark": "rgb(var(--o-gray-4))" + } + }, + { + "key": "color-fill3", + "description": "三级填充：卡片", + "value": { + "light": "rgb(var(--o-gray-3))", + "dark": "rgb(var(--o-gray-5))" + } + } + ] + }, + "control": { + "name": "控件色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-control1", + "description": "常规，常用于边框", + "value": { + "light": "rgba(var(--o-gray-14), 0.25)", + "dark": "rgba(var(--o-gray-14), 0.25)" + } + }, + { + "key": "color-control2", + "description": "悬浮，常用于边框", + "value": { + "light": "rgb(var(--o-kleinblue-4))", + "dark": "rgba(var(--o-gray-14), 0.6)" + } + }, + { + "key": "color-control3", + "description": "激活，常用于边框", + "value": { + "light": "rgb(var(--o-kleinblue-7))", + "dark": "rgba(var(--o-gray-14), 0.8)" + } + }, + { + "key": "color-control4", + "description": "禁用，常用于边框", + "value": { + "light": "rgba(var(--o-gray-14), 0.1)", + "dark": "rgba(var(--o-gray-14), 0.15)" + } + }, + { + "key": "color-control1-light", + "description": "常规-浅，常用于背景", + "value": { + "light": "rgb(var(--o-gray-5))", + "dark": "rgb(var(--o-gray-7))" + } + }, + { + "key": "color-control2-light", + "description": "悬浮-浅，常用于背景", + "value": { + "light": "rgb(var(--o-kleinblue-1))", + "dark": "rgb(var(--o-gray-5))" + } + }, + { + "key": "color-control3-light", + "description": "激活-浅，常用于背景", + "value": { + "light": "rgb(var(--o-kleinblue-2))", + "dark": "rgb(var(--o-gray-6))" + } + }, + { + "key": "color-control4-light", + "description": "禁用，常用于背景", + "value": { + "light": "rgb(var(--o-gray-3))", + "dark": "rgb(var(--o-gray-5))" + } + }, + { + "key": "color-control-light", + "description": "很浅，常用于表格背景色", + "value": { + "light": "rgb(var(--o-gray-1))", + "dark": "rgb(var(--o-gray-4))" + } + } + ] + }, + "info": { + "name": "信息色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-info1", + "description": "一级/强调/标题", + "value": { + "light": "rgba(var(--o-gray-14), 1.0)", + "dark": "rgba(var(--o-gray-14), 1.0)" + } + }, + { + "key": "color-info2", + "description": "二级/次强调/正文", + "value": { + "light": "rgba(var(--o-gray-14), 0.8)", + "dark": "rgba(var(--o-gray-14), 0.8)" + } + }, + { + "key": "color-info3", + "description": "三级/辅助信息", + "value": { + "light": "rgba(var(--o-gray-14), 0.6)", + "dark": "rgba(var(--o-gray-14), 0.6)" + } + }, + { + "key": "color-info4", + "description": "置灰/禁用", + "value": { + "light": "rgba(var(--o-gray-14), 0.4)", + "dark": "rgba(var(--o-gray-14), 0.4)" + } + }, + { + "key": "color-info1-inverse", + "description": "一级/次强调/正文反色", + "value": { + "light": "rgba(var(--o-gray-1), 1.0)", + "dark": "rgba(var(--o-gray-1), 1.0)" + } + }, + { + "key": "color-info2-inverse", + "description": "二级/辅助信息反色", + "value": { + "light": "rgba(var(--o-gray-1), 0.8)", + "dark": "rgba(var(--o-gray-1), 0.8)" + } + }, + { + "key": "color-info3-inverse", + "description": "三级/辅助信息反色", + "value": { + "light": "rgba(var(--o-gray-1), 0.6)", + "dark": "rgba(var(--o-gray-1), 0.6)" + } + }, + { + "key": "color-info4-inverse", + "description": "置灰/禁用反色", + "value": { + "light": "rgba(var(--o-gray-1), 0.4)", + "dark": "rgba(var(--o-gray-1), 0.4)" + } + } + ] + }, + "mask": { + "name": "遮罩色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-mask1", + "description": "全局遮罩", + "value": { + "light": "rgba(var(--o-gray-14), 0.4)", + "dark": "rgba(var(--o-gray-1), 0.4)" + } + }, + { + "key": "color-mask2", + "description": "局部遮罩", + "value": { + "light": "rgba(var(--o-gray-1), 0.2)", + "dark": "rgba(var(--o-gray-4), 0.2)" + } + } + ] + }, + "shadow": { + "name": "阴影", + "type": "shadow", + "typeName": "阴影", + "value": [ + { + "key": "shadow-1", + "name": "阴影1", + "description": "用于卡片、小弹窗、楼层阴影", + "value": { + "light": "0 3px 8px rgba(var(--o-gray-14), 0.08)", + "dark": "0 3px 8px rgba(var(--o-gray-1), 0.08)" + } + }, + { + "key": "shadow-2", + "name": "阴影2", + "description": "用于卡片悬浮阴影", + "value": { + "light": "0 2px 24px rgba(var(--o-gray-14), 0.15)", + "dark": "0 2px 24px rgba(var(--o-gray-1), 0.15)" + } + }, + { + "key": "shadow-3", + "name": "阴影3", + "description": "用于提示阴影", + "value": { + "light": "0 8px 40px rgba(var(--o-gray-14), 0.1)", + "dark": "0 8px 40px rgba(var(--o-gray-1), 0.1)" + } + } + ] + }, + "link": { + "name": "链接色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-link1", + "description": "常规", + "value": { + "light": "rgb(var(--o-kleinblue-6))", + "dark": "rgb(var(--o-kleinblue-6))" + } + }, + { + "key": "color-link2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-kleinblue-4))", + "dark": "rgb(var(--o-kleinblue-5))" + } + }, + { + "key": "color-link3", + "description": "激活", + "value": { + "light": "rgb(var(--o-kleinblue-7))", + "dark": "rgb(var(--o-kleinblue-7))" + } + }, + { + "key": "color-link4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-kleinblue-3))", + "dark": "rgb(var(--o-kleinblue-4))" + } + } + ] + }, + + "gap": { + "name": "间距", + "type": "gap", + "typeName": "间距", + "value": [ + { + "key": "gap-1", + "name": "间距1", + "description": "用于组件之间的间距1", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "gap-2", + "name": "间距2", + "description": "用于组件之间的间距2", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "gap-3", + "name": "间距3", + "description": "用于组件之间的间距3", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "gap-4", + "name": "间距4", + "description": "用于组件之间的间距4", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "gap-5", + "name": "间距5", + "description": "用于组件之间的间距5", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "gap-6", + "name": "间距6", + "description": "用于组件之间的间距6", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "gap-7", + "name": "间距7", + "description": "用于组件之间的间距7", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "gap-8", + "name": "间距8", + "description": "用于组件之间的间距8", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "gap-9", + "name": "间距9", + "description": "用于组件之间的间距9", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "gap-10", + "name": "间距10", + "description": "用于组件之间的间距10", + "value": { + "light": "72px", + "dark": "72px" + } + } + ] + }, + + "control_size": { + "name": "组件尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "control_size-2xs", + "name": "超小尺寸", + "description": "超小尺寸", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "control_size-xs", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "control_size-s", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "control_size-m", + "name": "中尺寸", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "control_size-l", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "control_size-xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "control_size-2xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "56px", + "dark": "56px" + } + } + ] + }, + + "icon_size": { + "name": "图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size-xs", + "name": "超小尺寸图标", + "description": "超小尺寸图标", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "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" + } + } + ] + }, + "icon_size_control": { + "name": "组件图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size_control-xs", + "name": "超小尺寸图标", + "description": "超小尺寸控件图标(组件使用)", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "icon_size_control-s", + "name": "小尺寸图标", + "description": "小尺寸控件图标(组件使用)", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "icon_size_control-m", + "name": "中尺寸图标", + "description": "中尺寸控件图标(组件使用)", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "icon_size_control-l", + "name": "大尺寸图标", + "description": "大尺寸控件图标(组件使用)", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "icon_size_control-xl", + "name": "超大尺寸图标", + "description": "超大尺寸控件图标(组件使用)", + "value": { + "light": "40px", + "dark": "40px" + } + } + ] + }, + + "font_size": { + "name": "字体尺寸", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "font_size-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "font_size-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "font_size-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "font_size-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "font_size-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "font_size-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "22px", + "dark": "22px" + } + }, + { + "key": "font_size-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "font_size-text1", + "name": "常规正文", + "description": "常规正文", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "font_size-text2", + "name": "大号正文", + "description": "大号正文", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "font_size-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "font_size-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "12px", + "dark": "12px" + } + } + ] + }, + "line_height": { + "name": "字体行高", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "line_height-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "80px", + "dark": "80px" + } + }, + { + "key": "line_height-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "line_height-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "line_height-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "44px", + "dark": "44px" + } + }, + { + "key": "line_height-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "line_height-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "30px", + "dark": "30px" + } + }, + { + "key": "line_height-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "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": "22px", + "dark": "22px" + } + }, + { + "key": "line_height-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "18px", + "dark": "18px" + } + } + ] + }, + + "radius": { + "name": "圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius-xs", + "name": "超小尺寸圆角", + "description": "超小尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-s", + "name": "小尺寸圆角", + "description": "小尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-m", + "name": "中尺寸圆角", + "description": "中尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-l", + "name": "大尺寸圆角", + "description": "大尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-xl", + "name": "大尺寸圆角", + "description": "大尺寸圆角,一般用于卡片", + "value": { + "light": "0px", + "dark": "0px" + } + } + ] + }, + "radius_control": { + "name": "组件圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius_control-xs", + "name": "超小尺寸控件圆角", + "description": "超小尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius_control-s", + "name": "小尺寸控件圆角", + "description": "小尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius_control-m", + "name": "中尺寸控件圆角", + "description": "中尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius_control-l", + "name": "大尺寸控件圆角", + "description": "大尺寸控件圆角(组件使用)", + "value": { + "light": "4px", + "dark": "4px" + } + } + ] + }, + + "duration": { + "name": "动画持续时间", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "duration-s", + "name": "持续时间", + "description": "用于退出屏幕的动画", + "value": { + "light": "200ms", + "dark": "200ms" + } + }, + { + "key": "duration-m1", + "name": "持续时间", + "description": "用于当曲线为standard-in时进入屏幕的动画", + "value": { + "light": "250ms", + "dark": "250ms" + } + }, + { + "key": "duration-m2", + "name": "持续时间", + "description": "用于当曲线为standard时开始、结束的动画", + "value": { + "light": "300ms", + "dark": "300ms" + } + }, + { + "key": "duration-m3", + "name": "持续时间", + "description": "用于当曲线为emphasized-in时进入屏幕的动画", + "value": { + "light": "400ms", + "dark": "400ms" + } + }, + { + "key": "duration-l", + "name": "持续时间", + "description": "用于当曲线为emphasized时开始、结束的动画", + "value": { + "light": "500ms", + "dark": "500ms" + } + }, + { + "key": "duration-xl", + "name": "持续时间", + "description": "用于当曲线为emphasized时，轮播切换动画", + "value": { + "light": "1000ms", + "dark": "1000ms" + } + } + ] + }, + + "easing": { + "name": "动画曲线", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "easing-linear", + "name": "线性动画曲线", + "description": "线性曲线", + "value": { + "light": "cubic-bezier(0, 0, 1, 1)", + "dark": "cubic-bezier(0, 0, 1, 1)" + } + }, + { + "key": "easing-standard", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-standard-in", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0, 0, 0, 1)", + "dark": "cubic-bezier(0, 0, 0, 1)" + } + }, + { + "key": "easing-standard-out", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.3, 0, 1, 1)", + "dark": "cubic-bezier(0.3, 0, 1, 1)" + } + }, + { + "key": "easing-emphasized", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-emphasized-in", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.3, 0, 0.8, 0.15)", + "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)" + } + }, + { + "key": "easing-emphasized-out", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.05, 0.7, 0.1, 1)", + "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)" + } + } + ] + } +} diff --git a/packages/themes/src/shared/button.scss b/packages/themes/src/shared/button.scss new file mode 100644 index 0000000000000000000000000000000000000000..b66b25f0967a8faca0116af34af06131ee1834d0 --- /dev/null +++ b/packages/themes/src/shared/button.scss @@ -0,0 +1,23 @@ +@use './mixin.scss' as *; + +.o-btn.o-btn-solid { + --btn-color: var(--o-color-info1-inverse); + --btn-color-hover: var(--o-color-info1-inverse); + --btn-color-active: var(--o-color-info1-inverse); + --btn-color-disabled: var(--o-color-info1-inverse); +} + +.o-btn-outline.o-btn-primary:not(.o-btn-disabled) { + --btn-color: var(--o-color-info1); + --btn-color-hover: var(--o-color-info1-inverse); + --btn-color-active: var(--o-color-info1-inverse); + --btn-bg-color-hover: var(--o-color-primary2); + --btn-bg-color-active: var(--o-color-primary3); + @include hover { + background-color: var(--btn-bg-color-hover); + } + + &:active { + background-color: var(--btn-bg-color-active); + } +} diff --git a/packages/docs/src/assets/style/grid.scss b/packages/themes/src/shared/grid.scss similarity index 98% rename from packages/docs/src/assets/style/grid.scss rename to packages/themes/src/shared/grid.scss index 54dbf755418f0442556047f681921ae9f7486dd2..6022badb2076852661a23ba736b7057a38206ce0 100644 --- a/packages/docs/src/assets/style/grid.scss +++ b/packages/themes/src/shared/grid.scss @@ -1,3 +1,5 @@ +@use './mixin.scss' as *; + @mixin __inject_var($width, $padding, $gutter, $columns) { --grid-padding: #{$padding}; --grid-layout-width: #{$width}; diff --git a/packages/themes/src/shared/link.scss b/packages/themes/src/shared/link.scss new file mode 100644 index 0000000000000000000000000000000000000000..5f4b8aedb3a03bdde16dc722b78e5c52dad2630f --- /dev/null +++ b/packages/themes/src/shared/link.scss @@ -0,0 +1,15 @@ +.o-link-normal { + --link-color: var(--o-color-info2); + --link-color-hover: var(--o-color-info1); + --link-color-active: var(--o-color-info1); +} +.o-link-primary { + --link-color: var(--o-color-link1); + --link-color-hover: var(--o-color-link1); + --link-color-active: var(--o-color-link1); +} +.o-link-disabled.o-link-primary, +.o-link-disabled.o-link-primary:hover, +.o-link-disabled.o-link-primary:active { + color: var(--o-color-link4); +} diff --git a/packages/themes/src/shared/mixin.scss b/packages/themes/src/shared/mixin.scss new file mode 100644 index 0000000000000000000000000000000000000000..47e00db3a94197b93b32740a659b712d51d78460 --- /dev/null +++ b/packages/themes/src/shared/mixin.scss @@ -0,0 +1,101 @@ +@use 'sass:map'; +@use 'sass:list'; +@use 'sass:meta'; + +// 断点定义 +$breakpoints: ( + // phone + 'phone': (0, 600px), + '>phone': 601px, + // pad + 'pad': (601px, 1200px), + '<=pad': (0, 1200px), + '>pad': 1201px, + // pad-v + 'pad_v': (601px, 840px), + '<=pad_v': (0, 840px), + '>pad_v': 841px, + // pad-h + 'pad_h': (841px, 1200px), + // laptop + 'laptop': (1201px, 1440px), + '<=laptop': (0, 1440px), + '>laptop': 1441px, + 'pad-laptop': (601px, 1440px), + 'pad_v-laptop': (841px, 1440px), + 'pad_v-pc_s': (841px, 1680px), + 'pc': (1441px, 1920px), + 'pc_s': (1441px, 1680px), + '<=pc_s': (0, 1680px), + 'pc_l': (1681px, 1920px), + '>pc_s': 1681px, + '>pc': 1921px, + 'laptop-pc_s': (1201px, 1680px) +); + +@mixin respond-to($breakname) { + $bp: map.get($breakpoints, $breakname); + @if meta.type-of($bp) == 'list' { + $min: list.nth($bp, 1); + $max: list.nth($bp, 2); + @if $min == 0 { + @media (max-width: $max) { + @content; + } + } @else { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } + } @else { + @media (min-width: $bp) { + @content; + } + } +} + +@mixin hoverable($hover: hover) { + @media (hover: $hover) { + @content; + } +} + +@mixin hover() { + @media (hover: hover) { + &:hover { + @content; + } + } +} + +@mixin me-hover() { + @content; + @media (hover: hover) { + &:hover { + @content; + } + } +} + +@mixin x-hover() { + transition: all var(--o-duration-m1) var(--o-easing-standard-in); + @include hover { + transform: rotate(180deg); + } +} + +@mixin x-svg-hover() { + & { + overflow: hidden; + } + + svg { + transition: all var(--o-duration-m1) var(--o-easing-standard-in); + } + + @include hover { + svg { + transform: rotate(180deg); + } + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7a05f93d5a825c2107370af682c86772d92c14f8..82cc28bf7e883599bd8ad717ca5f3c47e3cce78f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -376,6 +376,12 @@ importers: specifier: catalog:build version: 6.3.0(@types/node@22.13.1)(sass-embedded@1.83.4)(sass@1.84.0)(terser@5.38.1) + packages/themes: + devDependencies: + '@opensig/open-scripts': + specifier: workspace:^ + version: link:../scripts + packages: '@babel/helper-string-parser@7.27.1':