diff --git a/.github/workflows/build-tokens.yml b/.github/workflows/build-tokens.yml index 4d7a965..9692203 100644 --- a/.github/workflows/build-tokens.yml +++ b/.github/workflows/build-tokens.yml @@ -8,10 +8,15 @@ jobs: - uses: actions/checkout@v2 - name: Setup Node.js environment uses: actions/setup-node@v2.4.0 + - run: npm config set registry https://registry.npmjs.org - run: npm install - run: npx token-transformer input/design-tokens.json input/base.json base - - run: npx token-transformer input/design-tokens.json input/brand-a.json base,brand-a base --expandTypography=true - - run: npx token-transformer input/design-tokens.json input/brand-b.json base,brand-b base --expandTypography=true + - run: + npx token-transformer input/design-tokens.json input/brand-a.json + base,brand-a base --expandTypography=true + - run: + npx token-transformer input/design-tokens.json input/brand-b.json + base,brand-b base --expandTypography=true - run: node build.js - uses: stefanzweifel/git-auto-commit-action@v4 with: @@ -23,12 +28,60 @@ jobs: - uses: andstor/copycat-action@v3.2.4 with: personal_token: ${{ secrets.GH_PAT }} - src_branch: main + src_branch: feature src_path: output/. - dst_owner: nyan-matt + dst_owner: Tangcuyu dst_repo_name: stencil-storybook-token-demo dst_branch: main dst_path: src/css/. - username: nyan-matt - email: matt.rea@gmail.com + username: tangcuyu + email: joysmshr@126.com commit_message: copy css tokens + copy_tokens_tographclient: + runs-on: ubuntu-latest + needs: [build_tokens] + steps: + - uses: andstor/copycat-action@v3.2.4 + with: + personal_token: ${{ secrets.GH_PAT }} + src_branch: feature + src_path: output/. + dst_owner: Tangcuyu + dst_repo_name: graphClient + dst_branch: feature-designtokens + dst_path: src/styles/css/. + username: tangcuyu + email: joysmshr@126.com + commit_message: copy base css tokens from token-demo-src repo + copy_tokens_to_election_client: + runs-on: ubuntu-latest + needs: [build_tokens] + steps: + - uses: andstor/copycat-action@v3.2.4 + with: + personal_token: ${{ secrets.GH_PAT }} + src_branch: feature + src_path: output/. + dst_owner: Tangcuyu + dst_repo_name: cleanclient + dst_branch: feature-tokens + dst_path: src/renderer/styles/theme/. + username: tangcuyu + email: joysmshr@126.com + commit_message: copy base css tokens from token-demo-src repo + copy_tokens_to_living_base: + runs-on: ubuntu-latest + needs: [build_tokens] + steps: + - uses: andstor/copycat-action@v3.2.4 + with: + personal_token: ${{ secrets.GH_PAT }} + src_branch: feature + src_path: output/base.scss + dst_owner: Tangcuyu + dst_repo_name: living-base + dst_branch: feature + dst_path: src/global/css + username: tangcuyu + email: joysmshr@126.com + commit_message: copy base css tokens from tokens src repo diff --git a/build.js b/build.js index bd06bd3..f1ff8c9 100644 --- a/build.js +++ b/build.js @@ -1,26 +1,70 @@ const StyleDictionaryPackage = require('style-dictionary'); +const tinycolor = require('tinycolor2'); + +// increase the lightness by 10% +// tinycolor represents the percent as a decimal between 0 and 1) +// for example: hsl(262, 100%, 68%) is represented as { h: 262, s: 1, l: .68 } +const OFFSET = 0.1; + +// the new color properties to replace the original ones +// recall, the original ones are in `design-tokens.json` +let shades = {}; + +// round to the highest range +// for example: .62 rounds to .70 +function roundUp(num, offset = OFFSET) { + return Math.ceil(num / offset) / 10; +} + +// since tinycolor represents the percent as a decimal, translate the decimal to the percentage +function asPercent(num) { + return num * 100; +} + +// appends the shade percentage to the key +// for example: primary + { h: 262, s: 1, l: .68 } becomes primary-70 +function asShadeKey(key, lightness) { + return `${key}-${asPercent(roundUp(lightness))}`; +} + +// convert the object representing the hsl back into a string +// for example: { h: 262, s: 1, l: .68 } becomes hsl(262, 100%, 68%) +function asHslString(ratio) { + return tinycolor.fromRatio(ratio).toHslString(); +} + +// add a new color property for the generated shade +function cloneShade({ hsl, key, lightness, prop }) { + const shadeKey = asShadeKey(key, lightness); + shades[shadeKey] = { + ...prop, + value: asHslString({ ...hsl, l: lightness }), + }; +} // HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED StyleDictionaryPackage.registerFormat({ - name: 'css/variables', - formatter: function (dictionary, config) { - return `${this.selector} { - ${dictionary.allProperties.map(prop => ` --${prop.name}: ${prop.value};`).join('\n')} - }` - } - }); + name: 'css/variables', + formatter: function (dictionary, config) { + return `${this.selector} { + ${dictionary.allProperties + .map((prop) => ` --${prop.name}: ${prop.value};`) + .join('\n')} + }`; + }, +}); // function kebabIt(str) { - return str - .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) - .join('-') - .toLowerCase(); - } + return str + .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) + .join('-') + .toLowerCase(); +} - function getBasePxFontSize(options) { +function getBasePxFontSize(options) { return (options && options.basePxFontSize) || 16; } @@ -37,42 +81,63 @@ function fontPxToRem(token, options) { } StyleDictionaryPackage.registerTransform({ - name: 'size/pxToRem', - type: 'value', - matcher: (token) => ['fontSizes'].includes(token.type), - transformer: (token, options) => fontPxToRem(token, options) - }) -// + name: 'size/pxToRem', + type: 'value', + matcher: (token) => ['fontSizes'].includes(token.type), + transformer: (token, options) => fontPxToRem(token, options), +}); +// StyleDictionaryPackage.registerTransform({ - name: 'sizes/px', - type: 'value', - matcher: function(prop) { - // You can be more specific here if you only want 'em' units for font sizes - return ["fontSize", "spacing", "borderRadius", "borderWidth", "sizing"].includes(prop.attributes.category); - }, - transformer: function(prop) { - // You can also modify the value here if you want to convert pixels to ems - return parseFloat(prop.original.value) + 'px'; - } - }); + name: 'sizes/px', + type: 'value', + matcher: function (prop) { + // You can be more specific here if you only want 'em' units for font sizes + return [ + 'fontSize', + 'spacing', + 'borderRadius', + 'borderWidth', + 'sizing', + ].includes(prop.attributes.category); + }, + transformer: function (prop) { + // You can also modify the value here if you want to convert pixels to ems + return parseFloat(prop.original.value) + 'px'; + }, +}); function getStyleDictionaryConfig(theme) { return { - "source": [ - `input/${theme}.json`, - ], - "platforms": { - "web": { - "transforms": - ["attribute/cti", "name/cti/kebab", "sizes/px", "size/pxToRem"], - "buildPath": `output/`, - "files": [{ - "destination": `${theme}.css`, - "format": "css/variables", - "selector": `.${theme}-theme` - }] - } - } + source: [`input/${theme}.json`], + platforms: { + web: { + transforms: [ + 'attribute/cti', + 'name/cti/kebab', + 'sizes/px', + 'size/pxToRem', + ], + buildPath: `output/`, + files: [ + { + destination: `${theme}.css`, + format: 'css/variables', + selector: `.${theme}-theme`, + }, + ], + }, + scss: { + transformGroup: 'scss', + buildPath: `output/`, + files: [ + { + destination: `${theme}.scss`, + format: 'scss/variables', + selector: `.${theme}-theme`, + }, + ], + }, + }, }; } @@ -81,19 +146,55 @@ console.log('Build started...'); // PROCESS THE DESIGN TOKENS FOR THE DIFFEREN BRANDS AND PLATFORMS ['base', 'brand-a', 'brand-b'].map(function (theme) { + console.log('\n=============================================='); + console.log(`\nProcessing: [${theme}]`); - console.log('\n=============================================='); - console.log(`\nProcessing: [${theme}]`); + const StyleDictionary = StyleDictionaryPackage.extend( + getStyleDictionaryConfig(theme), + ); - const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(theme)); + if (theme === 'base') { + // the original color properties + const colorProps = Object.entries(StyleDictionary.properties.brand); - StyleDictionary.buildPlatform('web'); + for (const [key, prop] of colorProps) { + // convert any color into a hsl object + const hsl = tinycolor(prop.value).toHsl(); - console.log('\nEnd processing'); -}) + // extract the original lightness before we manipulate it + const { l: originalLightness } = hsl; + let lightness = originalLightness; -console.log('\n=============================================='); -console.log('\nBuild completed!'); + // add a property for the original shade + cloneShade({ hsl, lightness, key, prop }); + // add a property for a lighter shade (higher lightness percentage) + // until another lighter shade would go above 99% + while (lightness + OFFSET < 1) { + lightness = lightness + OFFSET; + cloneShade({ hsl, lightness, key, prop }); + } + // reset lightness to original value + lightness = originalLightness; + // add a property for a darker shade (lower lightness percentage) + // until another darker shade would go below 1% + while (lightness - OFFSET > 0) { + lightness = lightness - OFFSET; + cloneShade({ hsl, lightness, key, prop }); + } + } + + // replace the original color properties with all the new shade properties + StyleDictionary.properties.brand = shades; + } + + StyleDictionary.buildPlatform('web'); + StyleDictionary.buildPlatform('scss'); + + console.log('\nEnd processing'); +}); + +console.log('\n=============================================='); +console.log('\nBuild completed!'); diff --git a/input/base.json b/input/base.json index 3e93813..8f787fe 100644 --- a/input/base.json +++ b/input/base.json @@ -1,504 +1,814 @@ { - "spacing-base": { + "brand": { + "color-primary-bg": { + "value": "#f0f9ff", + "type": "color", + "description": "主色浅色背景色" + }, + "color-primary-bg-hover": { + "value": "#e0f2ff", + "type": "color", + "description": "主色浅色背景悬浮态" + }, + "color-primary-border": { + "value": "#aed4f2", + "type": "color", + "description": "主色描边色" + }, + "color-primary-border-hover": { + "value": "#81b5e6", + "type": "color", + "description": "主色描边色悬浮态" + }, + "color-primary-hover": { + "value": "#5796d9", + "type": "color", + "description": "主色悬浮态" + }, + "color-primary": { + "value": "#3076cc", + "type": "color", + "description": "品牌主色" + }, + "color-primary-active": { + "value": "#1f57a6", + "type": "color", + "description": "主色激活态" + }, + "color-primary-text-hover": { + "value": "#5796d9", + "type": "color", + "description": "主色文本悬浮态" + }, + "color-primary-text": { + "value": "#3076cc", + "type": "color", + "description": "主色文本" + }, + "color-primary-text-active": { + "value": "#1f57a6", + "type": "color", + "description": "主色文本激活态" + } + }, + "font-size": { + "default": { + "value": "14px", + "type": "fontSizes", + "description": "中等字号(默认字号)" + }, + "sm": { + "value": "12px", + "type": "fontSizes", + "description": "小字号" + }, + "lg": { + "value": "16px", + "type": "fontSizes", + "description": "大字号" + }, + "xl": { + "value": "20px", + "type": "fontSizes", + "description": "超大字号" + }, + "heading1": { + "value": "24px", + "type": "fontSizes", + "description": "一级标题字号" + }, + "heading2": { + "value": "20px", + "type": "fontSizes", + "description": "二级标题字号" + }, + "heading3": { + "value": "16px", + "type": "fontSizes", + "description": "三级标题字号" + }, + "heading4": { + "value": "14px", + "type": "fontSizes", + "description": "四级标题字号" + } + }, + "font-weight-base": { + "thin": { + "value": 300, + "type": "fontWeights" + }, + "regular": { + "value": 400, + "type": "fontWeights" + }, + "medium": { + "value": 500, + "type": "fontWeights" + }, + "bold": { + "value": 600, + "type": "fontWeights" + } + }, + "border-radius": { + "default": { + "value": "4px", + "type": "borderRadius", + "description": "基础圆角" + } + }, + "sizing-base-h": { "unit": { - "value": "8px", - "type": "spacing" + "value": "480px", + "type": "sizing" }, "xs": { - "value": "8px", - "type": "spacing" + "value": "960px", + "type": "sizing" }, "sm": { - "value": "16px", - "type": "spacing" + "value": "1440px", + "type": "sizing" }, "md": { - "value": "24px", - "type": "spacing" + "value": "1920px", + "type": "sizing" }, "lg": { - "value": "32px", - "type": "spacing" + "value": "2400px", + "type": "sizing" }, "xl": { - "value": "40px", - "type": "spacing" + "value": "2880px", + "type": "sizing" }, "xxl": { - "value": "48px", - "type": "spacing" + "value": "3360px", + "type": "sizing" + } + }, + "sizing-base-v": { + "unit": { + "value": "270px", + "type": "sizing" + }, + "xs": { + "value": "540px", + "type": "sizing" }, - "none": { - "value": "0px", - "type": "spacing" + "sm": { + "value": "810px", + "type": "sizing" + }, + "md": { + "value": "1080px", + "type": "sizing" + }, + "lg": { + "value": "1350px", + "type": "sizing" + }, + "xl": { + "value": "1620px", + "type": "sizing" } }, - "color-base-neutral-dark": { - "10": { - "value": "#5c5c5c", - "type": "color" + "success": { + "color-success-bg": { + "value": "#f6ffed", + "type": "color", + "description": "成功色的浅色背景颜色" }, - "20": { - "value": "#525252", - "type": "color" + "color-success-bg-hover": { + "value": "#d9f7be", + "type": "color", + "description": "成功色的浅色背景悬浮态" }, - "30": { - "value": "#474747", - "type": "color" + "color-success-border": { + "value": "#b7eb8f", + "type": "color", + "description": "成功色的描边色" }, - "40": { - "value": "#3d3d3d", - "type": "color" + "color-success-border-hover": { + "value": "#95de64", + "type": "color", + "description": "成功色的描边色悬浮态" }, - "50": { - "value": "#333333", - "type": "color" + "color-success-hover": { + "value": "#95de64", + "type": "color", + "description": "成功色的深色悬浮态" }, - "60": { - "value": "#292929", - "type": "color" + "color-success": { + "value": "#52c41a", + "type": "color", + "description": "成功色" }, - "70": { - "value": "#1f1f1f", - "type": "color" + "color-success-active": { + "value": "#389e0d", + "type": "color", + "description": "成功色的深色激活态" }, - "80": { - "value": "#141414", - "type": "color" + "color-success-text-hover": { + "value": "#73d13d", + "type": "color", + "description": "成功色的文本悬浮态" }, - "90": { - "value": "#0a0a0a", - "type": "color" + "color-success-text": { + "value": "#52c41a", + "type": "color", + "description": "成功色的文本默认态" }, - "100": { - "value": "#000000", - "type": "color" + "color-success-text-active": { + "value": "#389e0d", + "type": "color", + "description": "成功色的文本激活态" } }, - "color-base-dark-blue": { - "10": { - "value": "#cccfd1", - "type": "color" + "warning": { + "color-warning-bg": { + "value": "#fffbe6", + "type": "color", + "description": "警戒色的浅色背景颜色" }, - "20": { - "value": "#adb2b6", - "type": "color" + "color-warning-bg-hover": { + "value": "#fff1b8", + "type": "color", + "description": "警戒色的浅色背景悬浮态" }, - "30": { - "value": "#8f959a", - "type": "color" + "color-warning-border": { + "value": "#ffe58f", + "type": "color", + "description": "警戒色的描边色" }, - "40": { - "value": "#70787f", - "type": "color" + "color-warning-border-hover": { + "value": "#ffd666", + "type": "color", + "description": "警戒色的描边色悬浮态" }, - "50": { - "value": "#525b63", - "type": "color" + "color-warning-hover": { + "value": "#ffd666", + "type": "color", + "description": "警戒色的深色悬浮态" }, - "60": { - "value": "#333E48", + "color-warning": { + "value": "#faad14", "type": "color", - "description": "default" + "description": "警戒色" }, - "70": { - "value": "#2b353d", - "type": "color" + "color-warning-active": { + "value": "#d48806", + "type": "color", + "description": "警戒色的深色激活态" }, - "80": { - "value": "#242b32", - "type": "color" + "color-warning-text-hover": { + "value": "#ffc53d", + "type": "color", + "description": "警戒色的文本悬浮态" }, - "90": { - "value": "#1c2228", - "type": "color" + "color-warning-text": { + "value": "#faad14", + "type": "color", + "description": "警戒色的文本默认态" }, - "100": { - "value": "#14191d", - "type": "color" + "color-warning-text-active": { + "value": "#d48806", + "type": "color", + "description": "警戒色的文本激活态" } }, - "color-base-blue": { - "10": { - "value": "#c4d0f3", - "type": "color" - }, - "20": { - "value": "#a1b3eb", - "type": "color" - }, - "30": { - "value": "#7d97e4", - "type": "color" - }, - "40": { - "value": "#5a7adc", - "type": "color" - }, - "50": { - "value": "#365ed5", - "type": "color" - }, - "60": { - "value": "#1341cd", - "type": "color" - }, - "70": { - "value": "#1037ae", - "type": "color" - }, - "80": { - "value": "#0d2e90", - "type": "color" - }, - "90": { - "value": "#0a2471", - "type": "color" - }, - "100": { - "value": "#081a52", - "type": "color" + "error": { + "color-error-bg": { + "value": "#fff2f0", + "type": "color", + "description": "错误色的浅色背景颜色" + }, + "color-error-bg-hover": { + "value": "#fff1f0", + "type": "color", + "description": "错误色的浅色背景色悬浮态" + }, + "color-error-border": { + "value": "#ffccc7", + "type": "color", + "description": "错误色的描边色" + }, + "color-error-border-hover": { + "value": "#ffa39e", + "type": "color", + "description": "错误色的描边色悬浮态" + }, + "color-error-hover": { + "value": "#ff7875", + "type": "color", + "description": "错误色的深色悬浮态" + }, + "color-error": { + "value": "#ff4d4f", + "type": "color", + "description": "错误色" + }, + "color-error-active": { + "value": "#d9363e", + "type": "color", + "description": "错误色的深色激活态" + }, + "color-error-text-hover": { + "value": "#ff7875", + "type": "color", + "description": "错误色的文本悬浮态" + }, + "color-error-text": { + "value": "#ff4d4f", + "type": "color", + "description": "错误色的文本默认态" + }, + "color-error-text-active": { + "value": "#d9363e", + "type": "color", + "description": "错误色的文本激活态" } }, - "color-base-red": { - "10": { - "value": "#f1c4c4", - "type": "color" - }, - "20": { - "value": "#e9a0a0", - "type": "color" - }, - "30": { - "value": "#e07d7d", - "type": "color" - }, - "40": { - "value": "#d85959", - "type": "color" - }, - "50": { - "value": "#cf3636", - "type": "color" - }, - "60": { - "value": "#c71212", - "type": "color" - }, - "70": { - "value": "#a90f0f", - "type": "color" - }, - "80": { - "value": "#8b0d0d", - "type": "color" - }, - "90": { - "value": "#6d0a0a", - "type": "color" - }, - "100": { - "value": "#500707", - "type": "color" + "info": { + "color-info-bg": { + "value": "#eaf4ff", + "type": "color", + "description": "信息色的浅色背景颜色" + }, + "color-info-bg-hover": { + "value": "#e0f2ff", + "type": "color", + "description": "信息色的浅色背景悬浮态" + }, + "color-info-border": { + "value": "#97c3f2", + "type": "color", + "description": "信息色的描边色" + }, + "color-info-border-hover": { + "value": "#81b5e6", + "type": "color", + "description": "信息色的描边色悬浮态" + }, + "color-info-hover": { + "value": "#4196f0", + "type": "color", + "description": "信息色的深色悬浮态" + }, + "color-info": { + "value": "#3076cc", + "type": "color", + "description": "信息色" + }, + "color-info-active": { + "value": "#277cd6", + "type": "color", + "description": "信息色的深色激活态" + }, + "color-info-text-hover": { + "value": "#4196f0", + "type": "color", + "description": "信息色的文本悬浮态" + }, + "color-info-text": { + "value": "#3076cc", + "type": "color", + "description": "信息色的文本默认态" + }, + "color-info-text-active": { + "value": "#1f57a6", + "type": "color", + "description": "信息色的文本激活态" } }, - "color-base-green": { - "10": { - "value": "#c3e6cb", - "type": "color" - }, - "20": { - "value": "#9fd6ab", - "type": "color" - }, - "30": { - "value": "#7bc78c", - "type": "color" - }, - "40": { - "value": "#57b86d", - "type": "color" - }, - "50": { - "value": "#33a84d", - "type": "color" - }, - "60": { - "value": "#0f992e", - "type": "color" - }, - "70": { - "value": "#0d8227", - "type": "color" - }, - "80": { - "value": "#0b6b20", - "type": "color" - }, - "90": { - "value": "#085419", - "type": "color" - }, - "100": { - "value": "#063d12", - "type": "color" + "link": { + "color-link": { + "value": "#3076cc", + "type": "color", + "description": "链接色" + }, + "color-link-hover": { + "value": "#81b5e6", + "type": "color", + "description": "超链接悬浮颜色" + }, + "color-link-active": { + "value": "#1f57a6", + "type": "color", + "description": "超链接激活颜色" } }, - "color-base-navy": { - "10": { - "value": "#c2d0dc", - "type": "color" + "text": { + "color-text-base": { + "value": "#000000", + "type": "color", + "description": "基础文本色" }, - "20": { - "value": "#9db3c7", - "type": "color" + "color-text": { + "value": "#000000e0", + "type": "color", + "description": "一级文本色" }, - "30": { - "value": "#7897b2", - "type": "color" + "color-text-secondary": { + "value": "#000000a6", + "type": "color", + "description": "二级文本色" }, - "40": { - "value": "#547a9d", - "type": "color" + "color-text-tertiary": { + "value": "#00000073", + "type": "color", + "description": "三级文本色" }, - "50": { - "value": "#2f5e88", - "type": "color" + "color-text-quaternary": { + "value": "#00000040", + "type": "color", + "description": "四级文本色" + } + }, + "border": { + "color-border": { + "value": "#d9d9d9", + "type": "color", + "description": "一级边框色" }, - "60": { - "value": "#0a4173", + "color-border-secondary": { + "value": "#f0f0f0", "type": "color", - "description": "default" + "description": "二级边框色" + } + }, + "fill": { + "color-fill": { + "value": "#00000026", + "type": "color", + "description": "一级填充" }, - "70": { - "value": "#093762", - "type": "color" + "color-fill-secondary": { + "value": "#0000000f", + "type": "color", + "description": "二级填充" }, - "80": { - "value": "#072e51", - "type": "color" + "color-fill-tertiary": { + "value": "#0000000a", + "type": "color", + "description": "三级填充" }, - "90": { - "value": "#06243f", - "type": "color" + "color-fill-quaternary": { + "value": "#00000005", + "type": "color", + "description": "四级填充" + } + }, + "background": { + "color-bg-container": { + "value": "#ffffff", + "type": "color", + "description": "组件容器背景色" + }, + "color-bg-elevated": { + "value": "#ffffff", + "type": "color", + "description": "浮层容器背景色" + }, + "color-bg-layout": { + "value": "#f5f5f5", + "type": "color", + "description": "布局背景色" }, - "100": { - "value": "#041a2e", - "type": "color" + "color-bg-spotlight": { + "value": "#000000d9", + "type": "color", + "description": "引起注意的背景色" + }, + "color-bg-mask": { + "value": "#00000073", + "type": "color", + "description": "浮层的背景蒙层颜色" } }, - "color-base-pink": { - "10": { - "value": "#e0c2dd", - "type": "color" - }, - "20": { - "value": "#ce9dc9", - "type": "color" - }, - "30": { - "value": "#bb78b4", - "type": "color" - }, - "40": { - "value": "#a953a0", - "type": "color" - }, - "50": { - "value": "#962e8b", - "type": "color" - }, - "60": { - "value": "#840977", - "type": "color" - }, - "70": { - "value": "#700865", - "type": "color" - }, - "80": { - "value": "#5c0653", - "type": "color" - }, - "90": { - "value": "#490541", - "type": "color" - }, - "100": { - "value": "#350430", - "type": "color" + "fontBase": { + "fontFamily-apple-system": { + "value": "'-apple-system'", + "type": "fontFamilies", + "description": "-apple-system targets San Francisco in Safari (on Mac OS X and iOS), and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size" + }, + "fontFamily-blink": { + "value": "'BlinkMacSystemFont'", + "type": "fontFamilies", + "description": "Apple system font full version" + }, + "fontFamily-SegoeUi": { + "value": "'Segoe UI'", + "type": "fontFamilies", + "description": "Segoe UI targets Windows and Windows Phone." + }, + "fontFamily-Roboto": { + "value": "'Roboto'", + "type": "fontFamilies", + "description": "Roboto targets Android and newer Chrome OS. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead." + }, + "fontFamily-HelveticaNeue": { + "value": "'Helvetica Neue'", + "type": "fontFamilies", + "description": "Helvetica Neue is a sans-serif typeface that is inspiring designers with its unique and appealing characters and width for a long time. The font came to the surface in 1957 by a typeface designer Max Miedinger belongs to Swiss. " + }, + "fontFamily-Arial": { + "value": "'Arial'", + "type": "fontFamilies", + "description": "Arial is an extremely versatile family of typefaces which can be used with equal success for text setting in reports, presentations, magazines etc, and for display use in newspapers, advertising and promotions." + }, + "fontFamily-NotoSans": { + "value": "'Noto Sans'", + "type": "fontFamilies", + "description": "Noto Sans is an unmodulated (“sans serif”) design for texts in the Latin, Cyrillic and Greek scripts, which is also suitable as the complementary choice for other script-specific Noto Sans fonts." + }, + "fontFamily-sans-serif": { + "value": "'sans-serif'", + "type": "fontFamilies", + "description": "A sans serif—or simply “sans”—is a typeface designed without serif.Examples of sans serif typefaces include Roboto, Open Sans, Poppins, Noto Sans, Work Sans, and Epilogue." + }, + "fontFamily-AppleColorEmoji": { + "value": "'Apple Color Emoji'", + "type": "fontFamilies", + "description": "Apple Color Emoji (stylized as AppleColorEmoji) is a color typeface used on Apple platforms such as iOS and macOS to display Emoji characters." + }, + "fontFamily-SegoeUIEmoji": { + "value": "'Segoe UI Emoji'", + "type": "fontFamilies", + "description": "Segoe (/ˈsiːɡoʊ/ SEE-goh) is a typeface, or family of fonts, that is best known for its use by Microsoft. " + }, + "fontFamily-SegoeUISymbol": { + "value": "'Segoe UI Symbol'", + "type": "fontFamilies", + "description": "The Segoe UI Symbol font from Microsoft contains an extensive range of symbols, emoji, pictures, dingbats, icons and images." + }, + "fontFamily-NotoColorEmoji": { + "value": "'Noto Color Emoji'", + "type": "fontFamilies", + "description": "Noto Color Emoji is an open-source emoji font from Google." + }, + "fontFamily-Helvetica": { + "value": "'Helvetica'", + "type": "fontFamilies", + "description": "Helvetica原名Neue Haas Grotesk，是一种广泛使用的无衬线字体，由瑞士字体设计师Max Miedinger和Eduard Hoffmann于1957年开发" + }, + "fontFamily-PingFang SC": { + "value": "'PingFang SC'", + "type": "fontFamilies", + "description": "苹果专门为中国用户打造的一套字体，包括6种字重，分别是极细体、纤细体、细体、常规体、中黑体、中粗体、粗体，全部都是.ttf 格式" + }, + "fontFamily-Hiragino Sans GB": { + "value": "'Hiragino Sans GB'", + "type": "fontFamilies", + "description": "The font was designed by JIYUKOBO Ltd and Beijing Hanyi Keyin Information Technology Co Ltd and free for personal use." + }, + "fontFamily-Microsoft YaHei": { + "value": "'Microsoft YaHei'", + "type": "fontFamilies", + "description": "A Simplified Chinese font developed by taking advantage of ClearType technology, and it provides excellent reading experience particularly onscreen. The font is very legible at small sizes." + }, + "fontFamily-微软雅黑": { + "value": "'微软雅黑'", + "type": "fontFamilies", + "description": "微软雅黑" } }, - "font-face-base": { - "sans-serif": { - "value": "'Inter', Helvetica, Arial, sans-serif", - "type": "fontFamilies" - }, - "serif": { - "value": "Baskerville", - "type": "fontFamilies" - }, - "mono": { - "value": "'Consolas', Courier, monospace", - "type": "fontFamilies" + "fontFamily": { + "element-plus": { + "value": "'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'", + "type": "fontFamilies", + "description": "Element Plus包含的默认字体" + }, + "ant-design": { + "value": "'-apple-system', 'BlinkMacSystemFont' , 'Segoe UI' , 'Roboto' , 'Helvetica Neue' , 'Arial' , 'Noto Sans' , 'sans-serif' , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji'", + "type": "fontFamilies", + "description": "Ant Design默认字体组" } }, - "font-size-display": { + "lineHeight": { + "default": { + "value": 1.571, + "type": "lineHeights", + "description": "默认行高" + }, + "sm": { + "value": 1.667, + "type": "lineHeights", + "description": "小字号行高" + }, + "lg": { + "value": 1.5, + "type": "lineHeights", + "description": "大字号行高" + }, + "xl": { + "value": 1.4, + "type": "lineHeights", + "description": "超大字号行高" + }, + "heading1": { + "value": 1.333, + "type": "lineHeights", + "description": "一级标题行高" + }, + "heading2": { + "value": 1.4, + "type": "lineHeights", + "description": "二级标题行高" + }, + "heading3": { + "value": 1.5, + "type": "lineHeights", + "description": "三级标题行高" + }, + "heading4": { + "value": 1.571, + "type": "lineHeights", + "description": "四级标题行高" + } + }, + "margin": { + "xxs": { + "value": "4px", + "type": "spacing", + "description": "极小外间距" + }, "xs": { - "value": "14px", - "type": "fontSizes" + "value": "8px", + "type": "spacing", + "description": "特小外间距" }, "sm": { + "value": "12px", + "type": "spacing", + "description": "小外间距" + }, + "default": { "value": "16px", - "type": "fontSizes" + "type": "spacing", + "description": "外间距" }, "md": { - "value": "18px", - "type": "fontSizes" + "value": "20px", + "type": "spacing", + "description": "中等外间距" }, "lg": { "value": "24px", - "type": "fontSizes" + "type": "spacing", + "description": "大外间距" }, "xl": { "value": "32px", - "type": "fontSizes" + "type": "spacing", + "description": "特大外间距" }, "xxl": { "value": "48px", - "type": "fontSizes" + "type": "spacing", + "description": "超大外间距" } }, - "font-size-label": { + "padding": { + "xxs": { + "value": "4px", + "type": "spacing", + "description": "极小内间距" + }, "xs": { - "value": "12px", - "type": "fontSizes" + "value": "8px", + "type": "spacing", + "description": "特小内间距" }, "sm": { - "value": "13px", - "type": "fontSizes" + "value": "12px", + "type": "spacing", + "description": "小内间距" + }, + "default": { + "value": "16px", + "type": "spacing", + "description": "内间距" }, "md": { - "value": "14px", - "type": "fontSizes" + "value": "20px", + "type": "spacing", + "description": "中等内间距" }, "lg": { - "value": "16px", - "type": "fontSizes" + "value": "24px", + "type": "spacing", + "description": "大内间距" }, "xl": { - "value": "17px", - "type": "fontSizes" - }, - "xxl": { - "value": "18px", - "type": "fontSizes" + "value": "32px", + "type": "spacing", + "description": "特大内间距" } }, - "font-size-body": { - "sm": { - "value": "14px", - "type": "fontSizes" - }, - "md": { - "value": "16px", - "type": "fontSizes" - }, - "lg": { - "value": "18px", - "type": "fontSizes" + "boxShadow": { + "default": { + "value": "0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d", + "type": "boxShadow", + "description": "一级阴影" + }, + "secondary": { + "value": "0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d", + "type": "boxShadow", + "description": "二级阴影" } }, - "font-weight-base": { - "thin": { - "value": 300, - "type": "fontWeights" + "chart": { + "cyan": { + "value": "#5ad8a6", + "type": "color", + "description": "翡翠绿" }, - "regular": { - "value": 400, - "type": "fontWeights" + "cyanLight": { + "value": "#cdf3e3", + "type": "color", + "description": "翡翠浅绿" }, - "medium": { - "value": 500, - "type": "fontWeights" + "grey": { + "value": "#5d7092", + "type": "color", + "description": "商务灰" }, - "bold": { - "value": 600, - "type": "fontWeights" - } - }, - "radius-base": { - "min": { - "value": "4px", - "type": "borderRadius" + "greyLight": { + "value": "#ced4de", + "type": "color", + "description": "商务浅灰" }, - "xs": { - "value": "8px", - "type": "borderRadius" + "sunriseYellow": { + "value": "#f6bd16", + "type": "color", + "description": "旭日黄" }, - "sm": { - "value": "12px", - "type": "borderRadius" + "sunriseYellowLight": { + "value": "#fcebb9", + "type": "color", + "description": "旭日浅黄" }, - "md": { - "value": "24px", - "type": "borderRadius" + "dustRed": { + "value": "#e86452", + "type": "color", + "description": "薄暮红" }, - "lg": { - "value": "48px", - "type": "borderRadius" + "dustRedLight": { + "value": "#f8d0cb", + "type": "color", + "description": "薄暮浅红" }, - "xl": { - "value": "64px", - "type": "borderRadius" - } - }, - "color-base-neutral-light": { - "10": { - "value": "#a3a3a3", - "type": "color" + "dayBreakBlue": { + "value": "#6dc8ec", + "type": "color", + "description": "破晓蓝" }, - "20": { - "value": "#adadad", - "type": "color" + "dayBreakBlueLight": { + "value": "#d3eef9", + "type": "color", + "description": "破晓浅蓝" }, - "30": { - "value": "#b8b8b8", - "type": "color" + "goldenPurple": { + "value": "#945fb9", + "type": "color", + "description": "罗兰紫" }, - "40": { - "value": "#c2c2c2", - "type": "color" + "goldenPurpleLight": { + "value": "#decfea", + "type": "color", + "description": "罗兰浅紫" }, - "50": { - "value": "#cccccc", - "type": "color" + "sunsetOrange": { + "value": "#ff9845", + "type": "color", + "description": "落日橘" }, - "60": { - "value": "#d6d6d6", - "type": "color" + "sunsetOrangeLight": { + "value": "#ffe0c7", + "type": "color", + "description": "落日浅橘" }, - "70": { - "value": "#e0e0e0", - "type": "color" + "dardGreen": { + "value": "#1e9493", + "type": "color", + "description": "天水青" }, - "80": { - "value": "#ebebeb", - "type": "color" + "dardGreenLight": { + "value": "#bbdede", + "type": "color", + "description": "天水浅青" }, - "90": { - "value": "#f5f5f5", - "type": "color" + "magenta": { + "value": "#ff99c3", + "type": "color", + "description": "桃花粉" }, - "100": { - "value": "#ffffff", - "type": "color" - } - }, - "color-test": { - "ci-trigger": { - "value": "orange", - "type": "color" + "magentaLight": { + "value": "#ffe0ed", + "type": "color", + "description": "桃花浅粉" } } } \ No newline at end of file diff --git a/input/brand-a.json b/input/brand-a.json index e950188..d8e51ca 100644 --- a/input/brand-a.json +++ b/input/brand-a.json @@ -1,21 +1,21 @@ { "color-primary": { "default": { - "value": "#0f992e", + "value": "#3076cc", "type": "color" }, "hover": { - "value": "#0d8227", + "value": "#1f57a6", "type": "color" }, "disabled": { - "value": "#c2d0dc", + "value": "#f0f0f0", "type": "color" } }, "button": { "radius": { - "value": "48px", + "value": "4px", "type": "borderRadius" }, "padding": { @@ -41,11 +41,11 @@ "typography": { "lg": { "fontFamily": { - "value": "'Consolas', Courier, monospace", + "value": "'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'", "type": "fontFamilies" }, "fontWeight": { - "value": 500, + "value": 400, "type": "fontWeights" }, "fontSize": { @@ -55,15 +55,19 @@ "textCase": { "value": "none", "type": "textCase" + }, + "lineHeight": { + "value": 1.571, + "type": "lineHeights" } }, "sm": { "fontFamily": { - "value": "'Consolas', Courier, monospace", + "value": "'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'", "type": "fontFamilies" }, "fontWeight": { - "value": 500, + "value": 400, "type": "fontWeights" }, "fontSize": { @@ -77,22 +81,71 @@ } }, "font-family": { - "value": "'Consolas', Courier, monospace", + "value": "'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'", "type": "fontFamilies" } }, "color-disabled": { "text": { - "value": "#a3a3a3", + "value": "#3076cc", "type": "color" }, "background": { - "value": "#f5f5f5", + "value": "#f0f0f0", "type": "color" }, "border": { - "value": "#adadad", + "value": "#d9d9d9", "type": "color" } + }, + "card": { + "header": { + "padding": { + "top": { + "value": "16px", + "type": "spacing" + } + } + }, + "width": { + "unit": { + "value": "480px", + "type": "sizing" + }, + "sm": { + "value": "960px", + "type": "sizing", + "description": "小尺寸卡片宽度" + } + }, + "height": { + "unit": { + "value": "270px", + "type": "sizing" + } + }, + "radius": { + "value": "4px", + "type": "borderRadius" + }, + "bottom": { + "sm": { + "value": "12px", + "type": "spacing" + }, + "lg": { + "value": "24px", + "type": "spacing" + }, + "xxl": { + "value": "32px", + "type": "spacing" + } + }, + "gap": { + "value": "12px", + "type": "spacing" + } } } \ No newline at end of file diff --git a/input/brand-b.json b/input/brand-b.json index c845b9f..52523f9 100644 --- a/input/brand-b.json +++ b/input/brand-b.json @@ -1,33 +1,19 @@ { "color-primary": { "default": { - "value": "#840977", + "value": "#5ad8a6", "type": "color" }, "hover": { - "value": "#700865", + "value": "#1e9493", "type": "color" }, "disabled": { - "value": "#e0c2dd", + "value": "#ced4de", "type": "color" } }, "button": { - "radius": { - "value": "4px", - "type": "borderRadius" - }, - "padding": { - "left": { - "value": "16px", - "type": "spacing" - }, - "right": { - "value": "16px", - "type": "spacing" - } - }, "height": { "lg": { "value": "36px", @@ -38,61 +24,49 @@ "type": "sizing" } }, - "typography": { - "lg": { - "fontFamily": { - "value": "'Inter', Helvetica, Arial, sans-serif", - "type": "fontFamilies" - }, - "fontWeight": { - "value": 400, - "type": "fontWeights" - }, - "fontSize": { - "value": "16px", - "type": "fontSizes" - }, - "textCase": { - "value": "none", - "type": "textCase" - } - }, - "sm": { - "fontFamily": { - "value": "'Inter', Helvetica, Arial, sans-serif", - "type": "fontFamilies" - }, - "fontWeight": { - "value": 400, - "type": "fontWeights" - }, - "fontSize": { - "value": "12px", - "type": "fontSizes" - }, - "textCase": { - "value": "none", - "type": "textCase" - } - } - }, - "font-family": { - "value": "'Inter', Helvetica, Arial, sans-serif", - "type": "fontFamilies" + "width": { + "value": "270px", + "type": "sizing" } }, "color-disabled": { "text": { - "value": "#a3a3a3", + "value": "#ffe0ed", "type": "color" }, "background": { - "value": "#f5f5f5", + "value": "#cdf3e3", "type": "color" }, "border": { - "value": "#adadad", + "value": "#945fb9", "type": "color" } + }, + "card": { + "width": { + "unit": { + "value": "270px", + "type": "sizing" + } + }, + "gap": { + "value": "8px", + "type": "spacing" + }, + "top": { + "value": "24px", + "type": "spacing" + } + }, + "color": { + "text": { + "button": { + "title": { + "value": "#3076cc", + "type": "color" + } + } + } } } \ No newline at end of file diff --git a/input/design-tokens.json b/input/design-tokens.json index 96ee8b3..0692e53 100644 --- a/input/design-tokens.json +++ b/input/design-tokens.json @@ -1,535 +1,845 @@ { "base": { - "spacing-base": { - "unit": { - "value": "8px", - "type": "spacing" + "brand": { + "color-primary-bg": { + "value": "#f0f9ff", + "type": "color", + "description": "主色浅色背景色" }, - "xs": { - "value": "{spacing-base.unit}*1", - "type": "spacing" + "color-primary-bg-hover": { + "value": "#e0f2ff", + "type": "color", + "description": "主色浅色背景悬浮态" }, - "sm": { - "value": "{spacing-base.unit}*2", - "type": "spacing" + "color-primary-border": { + "value": "#aed4f2", + "type": "color", + "description": "主色描边色" }, - "md": { - "value": "{spacing-base.unit}*3", - "type": "spacing" + "color-primary-border-hover": { + "value": "#81b5e6", + "type": "color", + "description": "主色描边色悬浮态" }, - "lg": { - "value": "{spacing-base.unit}*4", - "type": "spacing" + "color-primary-hover": { + "value": "#5796d9", + "type": "color", + "description": "主色悬浮态" }, - "xl": { - "value": "{spacing-base.unit}*5", - "type": "spacing" + "color-primary": { + "value": "#3076cc", + "type": "color", + "description": "品牌主色" }, - "xxl": { - "value": "{spacing-base.unit}*6", - "type": "spacing" + "color-primary-active": { + "value": "#1f57a6", + "type": "color", + "description": "主色激活态" }, - "none": { - "value": "0px", - "type": "spacing" + "color-primary-text-hover": { + "value": "#5796d9", + "type": "color", + "description": "主色文本悬浮态" + }, + "color-primary-text": { + "value": "#3076cc", + "type": "color", + "description": "主色文本" + }, + "color-primary-text-active": { + "value": "#1f57a6", + "type": "color", + "description": "主色文本激活态" } }, - "color-base-neutral-dark": { - "10": { - "value": "hsl(0,0%,36%)", - "type": "color" + "font-size": { + "default": { + "value": "14px", + "type": "fontSizes", + "description": "中等字号(默认字号)" }, - "20": { - "value": "hsl(0,0%,32%)", - "type": "color" + "sm": { + "value": "12px", + "type": "fontSizes", + "description": "小字号" }, - "30": { - "value": "hsl(0,0%,28%)", - "type": "color" + "lg": { + "value": "16px", + "type": "fontSizes", + "description": "大字号" }, - "40": { - "value": "hsl(0,0%,24%)", - "type": "color" + "xl": { + "value": "20px", + "type": "fontSizes", + "description": "超大字号" }, - "50": { - "value": "hsl(0,0%,20%)", - "type": "color" + "heading1": { + "value": "24px", + "type": "fontSizes", + "description": "一级标题字号" }, - "60": { - "value": "hsl(0,0%,16%)", - "type": "color" + "heading2": { + "value": "20px", + "type": "fontSizes", + "description": "二级标题字号" }, - "70": { - "value": "hsl(0,0%,12%)", - "type": "color" + "heading3": { + "value": "16px", + "type": "fontSizes", + "description": "三级标题字号" }, - "80": { - "value": "hsl(0,0%,8%)", - "type": "color" + "heading4": { + "value": "14px", + "type": "fontSizes", + "description": "四级标题字号" + } + }, + "font-weight-base": { + "thin": { + "value": "300", + "type": "fontWeights" }, - "90": { - "value": "hsl(0,0%,4%)", - "type": "color" + "regular": { + "value": "400", + "type": "fontWeights" }, - "100": { - "value": "hsl(0,0%,0%)", - "type": "color" + "medium": { + "value": "500", + "type": "fontWeights" + }, + "bold": { + "value": "600", + "type": "fontWeights" } }, - "color-base-dark-blue": { - "10": { - "value": "#cccfd1", - "type": "color" + "border-radius": { + "default": { + "value": "4px", + "type": "borderRadius", + "description": "基础圆角" + } + }, + "sizing-base-h": { + "unit": { + "value": "480px", + "type": "sizing" }, - "20": { - "value": "#adb2b6", - "type": "color" + "xs": { + "value": "{sizing-base-h.unit} * 2", + "type": "sizing" }, - "30": { - "value": "#8f959a", - "type": "color" + "sm": { + "value": "{sizing-base-h.unit} * 3", + "type": "sizing" }, - "40": { - "value": "#70787f", - "type": "color" + "md": { + "value": "{sizing-base-h.unit} * 4", + "type": "sizing" }, - "50": { - "value": "#525b63", - "type": "color" + "lg": { + "value": "{sizing-base-h.unit} * 5", + "type": "sizing" }, - "60": { - "value": "#333E48", - "type": "color", - "description": "default" + "xl": { + "value": "{sizing-base-h.unit} * 6", + "type": "sizing" }, - "70": { - "value": "#2b353d", - "type": "color" + "xxl": { + "value": "{sizing-base-h.unit} * 7", + "type": "sizing" + } + }, + "sizing-base-v": { + "unit": { + "value": "270px", + "type": "sizing" }, - "80": { - "value": "#242b32", - "type": "color" + "xs": { + "value": "{sizing-base-v.unit} * 2", + "type": "sizing" }, - "90": { - "value": "#1c2228", - "type": "color" + "sm": { + "value": "{sizing-base-v.unit} * 3", + "type": "sizing" }, - "100": { - "value": "#14191d", - "type": "color" + "md": { + "value": "{sizing-base-v.unit} * 4", + "type": "sizing" + }, + "lg": { + "value": "{sizing-base-v.unit} * 5", + "type": "sizing" + }, + "xl": { + "value": "{sizing-base-v.unit} * 6", + "type": "sizing" } }, - "color-base-blue": { - "10": { - "value": "#c4d0f3", - "type": "color" + "success": { + "color-success-bg": { + "value": "#f6ffed", + "type": "color", + "description": "成功色的浅色背景颜色" }, - "20": { - "value": "#a1b3eb", - "type": "color" + "color-success-bg-hover": { + "value": "#d9f7be", + "type": "color", + "description": "成功色的浅色背景悬浮态" }, - "30": { - "value": "#7d97e4", - "type": "color" + "color-success-border": { + "value": "#b7eb8f", + "type": "color", + "description": "成功色的描边色" }, - "40": { - "value": "#5a7adc", - "type": "color" + "color-success-border-hover": { + "value": "#95de64", + "type": "color", + "description": "成功色的描边色悬浮态" }, - "50": { - "value": "#365ed5", - "type": "color" + "color-success-hover": { + "value": "#95de64", + "type": "color", + "description": "成功色的深色悬浮态" }, - "60": { - "value": "#1341cd", - "type": "color" + "color-success": { + "value": "#52c41a", + "type": "color", + "description": "成功色" }, - "70": { - "value": "#1037ae", - "type": "color" + "color-success-active": { + "value": "#389e0d", + "type": "color", + "description": "成功色的深色激活态" }, - "80": { - "value": "#0d2e90", - "type": "color" + "color-success-text-hover": { + "value": "#73d13d", + "type": "color", + "description": "成功色的文本悬浮态" }, - "90": { - "value": "#0a2471", - "type": "color" + "color-success-text": { + "value": "#52c41a", + "type": "color", + "description": "成功色的文本默认态" }, - "100": { - "value": "#081a52", - "type": "color" + "color-success-text-active": { + "value": "#389e0d", + "type": "color", + "description": "成功色的文本激活态" } }, - "color-base-red": { - "10": { - "value": "#f1c4c4", - "type": "color" + "warning": { + "color-warning-bg": { + "value": "#fffbe6", + "type": "color", + "description": "警戒色的浅色背景颜色" }, - "20": { - "value": "#e9a0a0", - "type": "color" + "color-warning-bg-hover": { + "value": "#fff1b8", + "type": "color", + "description": "警戒色的浅色背景悬浮态" }, - "30": { - "value": "#e07d7d", - "type": "color" + "color-warning-border": { + "value": "#ffe58f", + "type": "color", + "description": "警戒色的描边色" }, - "40": { - "value": "#d85959", - "type": "color" + "color-warning-border-hover": { + "value": "#ffd666", + "type": "color", + "description": "警戒色的描边色悬浮态" }, - "50": { - "value": "#cf3636", - "type": "color" + "color-warning-hover": { + "value": "#ffd666", + "type": "color", + "description": "警戒色的深色悬浮态" }, - "60": { - "value": "#c71212", - "type": "color" + "color-warning": { + "value": "#faad14", + "type": "color", + "description": "警戒色" }, - "70": { - "value": "#a90f0f", - "type": "color" + "color-warning-active": { + "value": "#d48806", + "type": "color", + "description": "警戒色的深色激活态" }, - "80": { - "value": "#8b0d0d", - "type": "color" + "color-warning-text-hover": { + "value": "#ffc53d", + "type": "color", + "description": "警戒色的文本悬浮态" }, - "90": { - "value": "#6d0a0a", - "type": "color" + "color-warning-text": { + "value": "#faad14", + "type": "color", + "description": "警戒色的文本默认态" }, - "100": { - "value": "#500707", - "type": "color" + "color-warning-text-active": { + "value": "#d48806", + "type": "color", + "description": "警戒色的文本激活态" } }, - "color-base-green": { - "10": { - "value": "#c3e6cb", - "type": "color" + "error": { + "color-error-bg": { + "value": "#fff2f0", + "type": "color", + "description": "错误色的浅色背景颜色" }, - "20": { - "value": "#9fd6ab", - "type": "color" + "color-error-bg-hover": { + "value": "#fff1f0", + "type": "color", + "description": "错误色的浅色背景色悬浮态" }, - "30": { - "value": "#7bc78c", - "type": "color" + "color-error-border": { + "value": "#ffccc7", + "type": "color", + "description": "错误色的描边色" }, - "40": { - "value": "#57b86d", - "type": "color" + "color-error-border-hover": { + "value": "#ffa39e", + "type": "color", + "description": "错误色的描边色悬浮态" }, - "50": { - "value": "#33a84d", - "type": "color" + "color-error-hover": { + "value": "#ff7875", + "type": "color", + "description": "错误色的深色悬浮态" }, - "60": { - "value": "#0f992e", - "type": "color" + "color-error": { + "value": "#ff4d4f", + "type": "color", + "description": "错误色" }, - "70": { - "value": "#0d8227", - "type": "color" + "color-error-active": { + "value": "#d9363e", + "type": "color", + "description": "错误色的深色激活态" }, - "80": { - "value": "#0b6b20", - "type": "color" + "color-error-text-hover": { + "value": "#ff7875", + "type": "color", + "description": "错误色的文本悬浮态" }, - "90": { - "value": "#085419", - "type": "color" + "color-error-text": { + "value": "#ff4d4f", + "type": "color", + "description": "错误色的文本默认态" }, - "100": { - "value": "#063d12", - "type": "color" + "color-error-text-active": { + "value": "#d9363e", + "type": "color", + "description": "错误色的文本激活态" } }, - "color-base-navy": { - "10": { - "value": "#c2d0dc", - "type": "color" + "info": { + "color-info-bg": { + "value": "#eaf4ff", + "type": "color", + "description": "信息色的浅色背景颜色" }, - "20": { - "value": "#9db3c7", - "type": "color" + "color-info-bg-hover": { + "value": "#e0f2ff", + "type": "color", + "description": "信息色的浅色背景悬浮态" }, - "30": { - "value": "#7897b2", - "type": "color" + "color-info-border": { + "value": "#97c3f2", + "type": "color", + "description": "信息色的描边色" }, - "40": { - "value": "#547a9d", - "type": "color" + "color-info-border-hover": { + "value": "#81b5e6", + "type": "color", + "description": "信息色的描边色悬浮态" }, - "50": { - "value": "#2f5e88", - "type": "color" + "color-info-hover": { + "value": "#4196f0", + "type": "color", + "description": "信息色的深色悬浮态" }, - "60": { - "value": "#0a4173", + "color-info": { + "value": "#3076cc", "type": "color", - "description": "default" + "description": "信息色" }, - "70": { - "value": "#093762", - "type": "color" + "color-info-active": { + "value": "#277cd6", + "type": "color", + "description": "信息色的深色激活态" }, - "80": { - "value": "#072e51", - "type": "color" + "color-info-text-hover": { + "value": "#4196f0", + "type": "color", + "description": "信息色的文本悬浮态" }, - "90": { - "value": "#06243f", - "type": "color" + "color-info-text": { + "value": "#3076cc", + "type": "color", + "description": "信息色的文本默认态" }, - "100": { - "value": "#041a2e", - "type": "color" + "color-info-text-active": { + "value": "#1f57a6", + "type": "color", + "description": "信息色的文本激活态" } }, - "color-base-pink": { - "10": { - "value": "#e0c2dd", - "type": "color" + "link": { + "color-link": { + "value": "#3076cc", + "type": "color", + "description": "链接色" }, - "20": { - "value": "#ce9dc9", - "type": "color" + "color-link-hover": { + "value": "#81b5e6", + "type": "color", + "description": "超链接悬浮颜色" }, - "30": { - "value": "#bb78b4", - "type": "color" + "color-link-active": { + "value": "#1f57a6", + "type": "color", + "description": "超链接激活颜色" + } + }, + "text": { + "color-text-base": { + "value": "#000000", + "type": "color", + "description": "基础文本色" }, - "40": { - "value": "#a953a0", - "type": "color" + "color-text": { + "value": "rgba(0,0,0,0.88)", + "type": "color", + "description": "一级文本色" }, - "50": { - "value": "#962e8b", - "type": "color" + "color-text-secondary": { + "value": "rgba(0,0,0,0.65)", + "type": "color", + "description": "二级文本色" }, - "60": { - "value": "#840977", - "type": "color" + "color-text-tertiary": { + "value": "rgba(0,0,0,0.45)", + "type": "color", + "description": "三级文本色" }, - "70": { - "value": "#700865", - "type": "color" + "color-text-quaternary": { + "value": "rgba(0,0,0,0.25)", + "type": "color", + "description": "四级文本色" + } + }, + "border": { + "color-border": { + "value": "#d9d9d9", + "type": "color", + "description": "一级边框色" }, - "80": { - "value": "#5c0653", - "type": "color" + "color-border-secondary": { + "value": "#f0f0f0", + "type": "color", + "description": "二级边框色" + } + }, + "fill": { + "color-fill": { + "value": "rgba(0,0,0,0.15)", + "type": "color", + "description": "一级填充" }, - "90": { - "value": "#490541", - "type": "color" + "color-fill-secondary": { + "value": "rgba(0,0,0,0.06)", + "type": "color", + "description": "二级填充" }, - "100": { - "value": "#350430", - "type": "color" + "color-fill-tertiary": { + "value": "rgba(0,0,0,0.04)", + "type": "color", + "description": "三级填充" + }, + "color-fill-quaternary": { + "value": "rgba(0,0,0,0.02)", + "type": "color", + "description": "四级填充" } }, - "font-face-base": { - "sans-serif": { - "value": "'Inter', Helvetica, Arial, sans-serif", - "type": "fontFamilies" + "background": { + "color-bg-container": { + "value": "#ffffff", + "type": "color", + "description": "组件容器背景色" }, - "serif": { - "value": "Baskerville", - "type": "fontFamilies" + "color-bg-elevated": { + "value": "#ffffff", + "type": "color", + "description": "浮层容器背景色" }, - "mono": { - "value": "'Consolas', Courier, monospace", - "type": "fontFamilies" + "color-bg-layout": { + "value": "#f5f5f5", + "type": "color", + "description": "布局背景色" + }, + "color-bg-spotlight": { + "value": "rgba(0,0,0,0.85)", + "type": "color", + "description": "引起注意的背景色" + }, + "color-bg-mask": { + "value": "rgba(0,0,0,0.45)", + "type": "color", + "description": "浮层的背景蒙层颜色" } }, - "font-size-display": { + "fontBase": { + "fontFamily-apple-system": { + "value": "'-apple-system'", + "type": "fontFamilies", + "description": "-apple-system targets San Francisco in Safari (on Mac OS X and iOS), and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size" + }, + "fontFamily-blink": { + "value": "'BlinkMacSystemFont'", + "type": "fontFamilies", + "description": "Apple system font full version" + }, + "fontFamily-SegoeUi": { + "value": "'Segoe UI'", + "type": "fontFamilies", + "description": "Segoe UI targets Windows and Windows Phone." + }, + "fontFamily-Roboto": { + "value": "'Roboto'", + "type": "fontFamilies", + "description": "Roboto targets Android and newer Chrome OS. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead." + }, + "fontFamily-HelveticaNeue": { + "value": "'Helvetica Neue'", + "type": "fontFamilies", + "description": "Helvetica Neue is a sans-serif typeface that is inspiring designers with its unique and appealing characters and width for a long time. The font came to the surface in 1957 by a typeface designer Max Miedinger belongs to Swiss. " + }, + "fontFamily-Arial": { + "value": "'Arial'", + "type": "fontFamilies", + "description": "Arial is an extremely versatile family of typefaces which can be used with equal success for text setting in reports, presentations, magazines etc, and for display use in newspapers, advertising and promotions." + }, + "fontFamily-NotoSans": { + "value": "'Noto Sans'", + "type": "fontFamilies", + "description": "Noto Sans is an unmodulated (“sans serif”) design for texts in the Latin, Cyrillic and Greek scripts, which is also suitable as the complementary choice for other script-specific Noto Sans fonts." + }, + "fontFamily-sans-serif": { + "value": "'sans-serif'", + "type": "fontFamilies", + "description": "A sans serif—or simply “sans”—is a typeface designed without serif.Examples of sans serif typefaces include Roboto, Open Sans, Poppins, Noto Sans, Work Sans, and Epilogue." + }, + "fontFamily-AppleColorEmoji": { + "value": "'Apple Color Emoji'", + "type": "fontFamilies", + "description": "Apple Color Emoji (stylized as AppleColorEmoji) is a color typeface used on Apple platforms such as iOS and macOS to display Emoji characters." + }, + "fontFamily-SegoeUIEmoji": { + "value": "'Segoe UI Emoji'", + "type": "fontFamilies", + "description": "Segoe (/ˈsiːɡoʊ/ SEE-goh) is a typeface, or family of fonts, that is best known for its use by Microsoft. " + }, + "fontFamily-SegoeUISymbol": { + "value": "'Segoe UI Symbol'", + "type": "fontFamilies", + "description": "The Segoe UI Symbol font from Microsoft contains an extensive range of symbols, emoji, pictures, dingbats, icons and images." + }, + "fontFamily-NotoColorEmoji": { + "value": "'Noto Color Emoji'", + "type": "fontFamilies", + "description": "Noto Color Emoji is an open-source emoji font from Google." + }, + "fontFamily-Helvetica": { + "value": "'Helvetica'", + "type": "fontFamilies", + "description": "Helvetica原名Neue Haas Grotesk，是一种广泛使用的无衬线字体，由瑞士字体设计师Max Miedinger和Eduard Hoffmann于1957年开发" + }, + "fontFamily-PingFang SC": { + "value": "'PingFang SC'", + "type": "fontFamilies", + "description": "苹果专门为中国用户打造的一套字体，包括6种字重，分别是极细体、纤细体、细体、常规体、中黑体、中粗体、粗体，全部都是.ttf 格式" + }, + "fontFamily-Hiragino Sans GB": { + "value": "'Hiragino Sans GB'", + "type": "fontFamilies", + "description": "The font was designed by JIYUKOBO Ltd and Beijing Hanyi Keyin Information Technology Co Ltd and free for personal use." + }, + "fontFamily-Microsoft YaHei": { + "value": "'Microsoft YaHei'", + "type": "fontFamilies", + "description": "A Simplified Chinese font developed by taking advantage of ClearType technology, and it provides excellent reading experience particularly onscreen. The font is very legible at small sizes." + }, + "fontFamily-微软雅黑": { + "value": "'微软雅黑'", + "type": "fontFamilies", + "description": "微软雅黑" + } + }, + "fontFamily": { + "element-plus": { + "value": "{fontBase.fontFamily-Helvetica}, {fontBase.fontFamily-Helvetica}, {fontBase.fontFamily-PingFang SC} , {fontBase.fontFamily-Hiragino Sans GB} , {fontBase.fontFamily-Microsoft YaHei} , {fontBase.fontFamily-微软雅黑} , {fontBase.fontFamily-Arial} , {fontBase.fontFamily-sans-serif}", + "type": "fontFamilies", + "description": "Element Plus包含的默认字体" + }, + "ant-design": { + "value": "{fontBase.fontFamily-apple-system}, {fontBase.fontFamily-blink} , {fontBase.fontFamily-SegoeUi} , {fontBase.fontFamily-Roboto} , {fontBase.fontFamily-HelveticaNeue} , {fontBase.fontFamily-Arial} , {fontBase.fontFamily-NotoSans} , {fontBase.fontFamily-sans-serif} , {fontBase.fontFamily-AppleColorEmoji} , {fontBase.fontFamily-SegoeUIEmoji} , {fontBase.fontFamily-SegoeUISymbol} , {fontBase.fontFamily-NotoColorEmoji}", + "type": "fontFamilies", + "description": "Ant Design默认字体组" + } + }, + "lineHeight": { + "default": { + "value": "1.571428571", + "type": "lineHeights", + "description": "默认行高" + }, + "sm": { + "value": "1.6666666666666667", + "type": "lineHeights", + "description": "小字号行高" + }, + "lg": { + "value": "1.5", + "type": "lineHeights", + "description": "大字号行高" + }, + "xl": { + "value": "1.4", + "type": "lineHeights", + "description": "超大字号行高" + }, + "heading1": { + "value": "1.33333333333333", + "type": "lineHeights", + "description": "一级标题行高" + }, + "heading2": { + "value": "1.4", + "type": "lineHeights", + "description": "二级标题行高" + }, + "heading3": { + "value": "1.5", + "type": "lineHeights", + "description": "三级标题行高" + }, + "heading4": { + "value": "1.571428571", + "type": "lineHeights", + "description": "四级标题行高" + } + }, + "margin": { + "xxs": { + "value": "4px", + "type": "spacing", + "description": "极小外间距" + }, "xs": { - "value": "14px", - "type": "fontSizes" + "value": "8px", + "type": "spacing", + "description": "特小外间距" }, "sm": { + "value": "12px", + "type": "spacing", + "description": "小外间距" + }, + "default": { "value": "16px", - "type": "fontSizes" + "type": "spacing", + "description": "外间距" }, "md": { - "value": "18px", - "type": "fontSizes" + "value": "20px", + "type": "spacing", + "description": "中等外间距" }, "lg": { "value": "24px", - "type": "fontSizes" + "type": "spacing", + "description": "大外间距" }, "xl": { "value": "32px", - "type": "fontSizes" + "type": "spacing", + "description": "特大外间距" }, "xxl": { "value": "48px", - "type": "fontSizes" + "type": "spacing", + "description": "超大外间距" } }, - "font-size-label": { + "padding": { + "xxs": { + "value": "4px", + "type": "spacing", + "description": "极小内间距" + }, "xs": { - "value": "12px", - "type": "fontSizes" + "value": "8px", + "type": "spacing", + "description": "特小内间距" }, "sm": { - "value": "13px", - "type": "fontSizes" + "value": "12px", + "type": "spacing", + "description": "小内间距" + }, + "default": { + "value": "16px", + "type": "spacing", + "description": "内间距" }, "md": { - "value": "14px", - "type": "fontSizes" + "value": "20px", + "type": "spacing", + "description": "中等内间距" }, "lg": { - "value": "16px", - "type": "fontSizes" + "value": "24px", + "type": "spacing", + "description": "大内间距" }, "xl": { - "value": "17px", - "type": "fontSizes" - }, - "xxl": { - "value": "18px", - "type": "fontSizes" + "value": "32px", + "type": "spacing", + "description": "特大内间距" } }, - "font-size-body": { - "sm": { - "value": "14px", - "type": "fontSizes" - }, - "md": { - "value": "16px", - "type": "fontSizes" - }, - "lg": { - "value": "18px", - "type": "fontSizes" + "boxShadow": { + "default": { + "value": "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)", + "type": "boxShadow", + "description": "一级阴影" + }, + "secondary": { + "value": "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)", + "type": "boxShadow", + "description": "二级阴影" } }, - "font-weight-base": { - "thin": { - "value": "300", - "type": "fontWeights" + "chart": { + "cyan": { + "value": "#5ad8a6", + "type": "color", + "description": "翡翠绿" }, - "regular": { - "value": "400", - "type": "fontWeights" + "cyanLight": { + "value": "#cdf3e3", + "type": "color", + "description": "翡翠浅绿" }, - "medium": { - "value": "500", - "type": "fontWeights" + "grey": { + "value": "#5d7092", + "type": "color", + "description": "商务灰" }, - "bold": { - "value": "600", - "type": "fontWeights" - } - }, - "radius-base": { - "min": { - "value": "4px", - "type": "borderRadius" + "greyLight": { + "value": "#ced4de", + "type": "color", + "description": "商务浅灰" }, - "xs": { - "value": "8px", - "type": "borderRadius" + "sunriseYellow": { + "value": "#f6bd16", + "type": "color", + "description": "旭日黄" }, - "sm": { - "value": "12px", - "type": "borderRadius" + "sunriseYellowLight": { + "value": "#fcebb9", + "type": "color", + "description": "旭日浅黄" }, - "md": { - "value": "24px", - "type": "borderRadius" + "dustRed": { + "value": "#e86452", + "type": "color", + "description": "薄暮红" }, - "lg": { - "value": "48px", - "type": "borderRadius" + "dustRedLight": { + "value": "#f8d0cb", + "type": "color", + "description": "薄暮浅红" }, - "xl": { - "value": "64px", - "type": "borderRadius" - } - }, - "color-base-neutral-light": { - "10": { - "value": "hsl(0,0%,64%)", - "type": "color" + "dayBreakBlue": { + "value": "#6dc8ec", + "type": "color", + "description": "破晓蓝" }, - "20": { - "value": "hsl(0,0%,68%)", - "type": "color" + "dayBreakBlueLight": { + "value": "#d3eef9", + "type": "color", + "description": "破晓浅蓝" }, - "30": { - "value": "hsl(0,0%,72%)", - "type": "color" + "goldenPurple": { + "value": "#945fb9", + "type": "color", + "description": "罗兰紫" }, - "40": { - "value": "hsl(0,0%,76%)", - "type": "color" + "goldenPurpleLight": { + "value": "#decfea", + "type": "color", + "description": "罗兰浅紫" }, - "50": { - "value": "hsl(0,0%,80%)", - "type": "color" + "sunsetOrange": { + "value": "#ff9845", + "type": "color", + "description": "落日橘" }, - "60": { - "value": "hsl(0,0%,84%)", - "type": "color" + "sunsetOrangeLight": { + "value": "#ffe0c7", + "type": "color", + "description": "落日浅橘" }, - "70": { - "value": "hsl(0,0%,88%)", - "type": "color" + "dardGreen": { + "value": "#1e9493", + "type": "color", + "description": "天水青" }, - "80": { - "value": "hsl(0,0%,92%)", - "type": "color" + "dardGreenLight": { + "value": "#bbdede", + "type": "color", + "description": "天水浅青" }, - "90": { - "value": "hsl(0,0%,96%)", - "type": "color" + "magenta": { + "value": "#ff99c3", + "type": "color", + "description": "桃花粉" }, - "100": { - "value": "hsl(0,0%,100%)", - "type": "color" - } - }, - "color-test": { - "ci-trigger": { - "value": "orange", - "type": "color" + "magentaLight": { + "value": "#ffe0ed", + "type": "color", + "description": "桃花浅粉" } } }, "brand-a": { "color-primary": { "default": { - "value": "{color-base-green.60}", + "value": "{brand.color-primary}", "type": "color" }, "hover": { - "value": "{color-base-green.70}", + "value": "{brand.color-primary-active}", "type": "color" }, "disabled": { - "value": "{color-base-navy.10}", + "value": "{color-disabled.background}", "type": "color" } }, "button": { "radius": { - "value": "{radius-base.lg}", + "value": "{border-radius.default}", "type": "borderRadius" }, "padding": { "left": { - "value": "{spacing-base.sm}", + "value": "{padding.default}", "type": "spacing" }, "right": { - "value": "{spacing-base.sm}", + "value": "{padding.default}", "type": "spacing" } }, @@ -546,73 +856,109 @@ "typography": { "lg": { "value": { - "fontFamily": "{font-face-base.mono}", - "fontWeight": "{font-weight-base.medium}", - "fontSize": "{font-size-label.lg}", - "textCase": "none" + "fontFamily": "{fontFamily.element-plus}", + "fontWeight": "{font-weight-base.regular}", + "fontSize": "{font-size.lg}", + "textCase": "none", + "lineHeight": "{lineHeight.default}" }, "type": "typography" }, "sm": { "value": { - "fontFamily": "{font-face-base.mono}", - "fontWeight": "{font-weight-base.medium}", - "fontSize": "{font-size-label.xs}", + "fontFamily": "{fontFamily.element-plus}", + "fontWeight": "{font-weight-base.regular}", + "fontSize": "{font-size.sm}", "textCase": "none" }, "type": "typography" } }, "font-family": { - "value": "{font-face-base.mono}", + "value": "{fontFamily.element-plus}", "type": "fontFamilies" } }, "color-disabled": { "text": { - "value": "{color-base-neutral-light.10}", + "value": "{brand.color-primary-text}", "type": "color" }, "background": { - "value": "{color-base-neutral-light.90}", + "value": "{border.color-border-secondary}", "type": "color" }, "border": { - "value": "{color-base-neutral-light.20}", + "value": "{border.color-border}", "type": "color" } + }, + "card": { + "header": { + "padding": { + "top": { + "value": "{padding.default}", + "type": "spacing" + } + } + }, + "width": { + "unit": { + "value": "{sizing-base-h.unit}", + "type": "sizing" + }, + "sm": { + "value": "{sizing-base-h.xs}", + "type": "sizing", + "description": "小尺寸卡片宽度" + } + }, + "height": { + "unit": { + "value": "{sizing-base-v.unit}", + "type": "sizing" + } + }, + "radius": { + "value": "{border-radius.default}", + "type": "borderRadius" + }, + "bottom": { + "sm": { + "value": "{margin.sm}", + "type": "spacing" + }, + "lg": { + "value": "{margin.lg}", + "type": "spacing" + }, + "xxl": { + "value": "{margin.xl}", + "type": "spacing" + } + }, + "gap": { + "value": "{card.bottom.sm}", + "type": "spacing" + } } }, "brand-b": { "color-primary": { "default": { - "value": "{color-base-pink.60}", + "value": "{chart.cyan}", "type": "color" }, "hover": { - "value": "{color-base-pink.70}", + "value": "{chart.dardGreen}", "type": "color" }, "disabled": { - "value": "{color-base-pink.10}", + "value": "{chart.greyLight}", "type": "color" } }, "button": { - "radius": { - "value": "{radius-base.min}", - "type": "borderRadius" - }, - "padding": { - "left": { - "value": "{spacing-base.sm}", - "type": "spacing" - }, - "right": { - "value": "{spacing-base.sm}", - "type": "spacing" - } - }, "height": { "lg": { "value": "36px", @@ -623,44 +969,50 @@ "type": "sizing" } }, - "typography": { - "lg": { - "value": { - "fontFamily": "{font-face-base.sans-serif}", - "fontWeight": "{font-weight-base.regular}", - "fontSize": "{font-size-label.lg}", - "textCase": "none" - }, - "type": "typography" - }, - "sm": { - "value": { - "fontFamily": "{font-face-base.sans-serif}", - "fontWeight": "{font-weight-base.regular}", - "fontSize": "{font-size-label.xs}", - "textCase": "none" - }, - "type": "typography" - } - }, - "font-family": { - "value": "{font-face-base.sans-serif}", - "type": "fontFamilies" + "width": { + "value": "{card.width.unit}", + "type": "sizing" } }, "color-disabled": { "text": { - "value": "{color-base-neutral-light.10}", + "value": "{chart.magentaLight}", "type": "color" }, "background": { - "value": "{color-base-neutral-light.90}", + "value": "{chart.cyanLight}", "type": "color" }, "border": { - "value": "{color-base-neutral-light.20}", + "value": "{chart.goldenPurple}", "type": "color" } + }, + "card": { + "width": { + "unit": { + "value": "{sizing-base-v.unit}", + "type": "sizing" + } + }, + "gap": { + "value": "{margin.xs}", + "type": "spacing" + }, + "top": { + "value": "{margin.lg}", + "type": "spacing" + } + }, + "color": { + "text": { + "button": { + "title": { + "value": "{brand.color-primary-text}", + "type": "color" + } + } + } } }, "$themes": [], diff --git a/output/base.css b/output/base.css index 4b63de1..357398d 100644 --- a/output/base.css +++ b/output/base.css @@ -1,119 +1,249 @@ .base-theme { - --spacing-base-unit: 8px; - --spacing-base-xs: 8px; - --spacing-base-sm: 16px; - --spacing-base-md: 24px; - --spacing-base-lg: 32px; - --spacing-base-xl: 40px; - --spacing-base-xxl: 48px; - --spacing-base-none: 0px; - --color-base-neutral-dark-10: #5c5c5c; - --color-base-neutral-dark-20: #525252; - --color-base-neutral-dark-30: #474747; - --color-base-neutral-dark-40: #3d3d3d; - --color-base-neutral-dark-50: #333333; - --color-base-neutral-dark-60: #292929; - --color-base-neutral-dark-70: #1f1f1f; - --color-base-neutral-dark-80: #141414; - --color-base-neutral-dark-90: #0a0a0a; - --color-base-neutral-dark-100: #000000; - --color-base-dark-blue-10: #cccfd1; - --color-base-dark-blue-20: #adb2b6; - --color-base-dark-blue-30: #8f959a; - --color-base-dark-blue-40: #70787f; - --color-base-dark-blue-50: #525b63; - --color-base-dark-blue-60: #333E48; - --color-base-dark-blue-70: #2b353d; - --color-base-dark-blue-80: #242b32; - --color-base-dark-blue-90: #1c2228; - --color-base-dark-blue-100: #14191d; - --color-base-blue-10: #c4d0f3; - --color-base-blue-20: #a1b3eb; - --color-base-blue-30: #7d97e4; - --color-base-blue-40: #5a7adc; - --color-base-blue-50: #365ed5; - --color-base-blue-60: #1341cd; - --color-base-blue-70: #1037ae; - --color-base-blue-80: #0d2e90; - --color-base-blue-90: #0a2471; - --color-base-blue-100: #081a52; - --color-base-red-10: #f1c4c4; - --color-base-red-20: #e9a0a0; - --color-base-red-30: #e07d7d; - --color-base-red-40: #d85959; - --color-base-red-50: #cf3636; - --color-base-red-60: #c71212; - --color-base-red-70: #a90f0f; - --color-base-red-80: #8b0d0d; - --color-base-red-90: #6d0a0a; - --color-base-red-100: #500707; - --color-base-green-10: #c3e6cb; - --color-base-green-20: #9fd6ab; - --color-base-green-30: #7bc78c; - --color-base-green-40: #57b86d; - --color-base-green-50: #33a84d; - --color-base-green-60: #0f992e; - --color-base-green-70: #0d8227; - --color-base-green-80: #0b6b20; - --color-base-green-90: #085419; - --color-base-green-100: #063d12; - --color-base-navy-10: #c2d0dc; - --color-base-navy-20: #9db3c7; - --color-base-navy-30: #7897b2; - --color-base-navy-40: #547a9d; - --color-base-navy-50: #2f5e88; - --color-base-navy-60: #0a4173; - --color-base-navy-70: #093762; - --color-base-navy-80: #072e51; - --color-base-navy-90: #06243f; - --color-base-navy-100: #041a2e; - --color-base-pink-10: #e0c2dd; - --color-base-pink-20: #ce9dc9; - --color-base-pink-30: #bb78b4; - --color-base-pink-40: #a953a0; - --color-base-pink-50: #962e8b; - --color-base-pink-60: #840977; - --color-base-pink-70: #700865; - --color-base-pink-80: #5c0653; - --color-base-pink-90: #490541; - --color-base-pink-100: #350430; - --font-face-base-sans-serif: 'Inter', Helvetica, Arial, sans-serif; - --font-face-base-serif: Baskerville; - --font-face-base-mono: 'Consolas', Courier, monospace; - --font-size-display-xs: 0.875rem; - --font-size-display-sm: 1rem; - --font-size-display-md: 1.125rem; - --font-size-display-lg: 1.5rem; - --font-size-display-xl: 2rem; - --font-size-display-xxl: 3rem; - --font-size-label-xs: 0.75rem; - --font-size-label-sm: 0.8125rem; - --font-size-label-md: 0.875rem; - --font-size-label-lg: 1rem; - --font-size-label-xl: 1.0625rem; - --font-size-label-xxl: 1.125rem; - --font-size-body-sm: 0.875rem; - --font-size-body-md: 1rem; - --font-size-body-lg: 1.125rem; + --brand-color-primary-bg-100: hsl(204, 100%, 97%); + --brand-color-primary-bg-90: hsl(204, 100%, 87%); + --brand-color-primary-bg-80: hsl(204, 100%, 77%); + --brand-color-primary-bg-70: hsl(204, 100%, 67%); + --brand-color-primary-bg-60: hsl(204, 100%, 57%); + --brand-color-primary-bg-50: hsl(204, 100%, 47%); + --brand-color-primary-bg-40: hsl(204, 100%, 37%); + --brand-color-primary-bg-30: hsl(204, 100%, 27%); + --brand-color-primary-bg-20: hsl(204, 100%, 17%); + --brand-color-primary-bg-10: hsl(204, 100%, 7%); + --brand-color-primary-bg-hover-100: hsl(205, 100%, 94%); + --brand-color-primary-bg-hover-90: hsl(205, 100%, 84%); + --brand-color-primary-bg-hover-80: hsl(205, 100%, 74%); + --brand-color-primary-bg-hover-70: hsl(205, 100%, 64%); + --brand-color-primary-bg-hover-60: hsl(205, 100%, 54%); + --brand-color-primary-bg-hover-50: hsl(205, 100%, 44%); + --brand-color-primary-bg-hover-40: hsl(205, 100%, 34%); + --brand-color-primary-bg-hover-30: hsl(205, 100%, 24%); + --brand-color-primary-bg-hover-20: hsl(205, 100%, 14%); + --brand-color-primary-bg-hover-10: hsl(205, 100%, 4%); + --brand-color-primary-border-90: hsl(206, 72%, 82%); + --brand-color-primary-border-100: hsl(206, 72%, 92%); + --brand-color-primary-border-80: hsl(206, 72%, 72%); + --brand-color-primary-border-70: hsl(206, 72%, 62%); + --brand-color-primary-border-60: hsl(206, 72%, 52%); + --brand-color-primary-border-50: hsl(206, 72%, 42%); + --brand-color-primary-border-40: hsl(206, 72%, 32%); + --brand-color-primary-border-30: hsl(206, 72%, 22%); + --brand-color-primary-border-20: hsl(206, 72%, 12%); + --brand-color-primary-border-10: hsl(206, 72%, 2%); + --brand-color-primary-border-hover-80: hsl(209, 67%, 70%); + --brand-color-primary-border-hover-90: hsl(209, 67%, 80%); + --brand-color-primary-border-hover-100: hsl(209, 67%, 90%); + --brand-color-primary-border-hover-70: hsl(209, 67%, 60%); + --brand-color-primary-border-hover-60: hsl(209, 67%, 50%); + --brand-color-primary-border-hover-50: hsl(209, 67%, 40%); + --brand-color-primary-border-hover-40: hsl(209, 67%, 30%); + --brand-color-primary-border-hover-30: hsl(209, 67%, 20%); + --brand-color-primary-border-hover-20: hsl(209, 67%, 10%); + --brand-color-primary-border-hover-10: hsl(203, 100%, 0%); + --brand-color-primary-hover-60: hsl(211, 63%, 60%); + --brand-color-primary-hover-70: hsl(211, 63%, 70%); + --brand-color-primary-hover-80: hsl(211, 63%, 80%); + --brand-color-primary-hover-90: hsl(211, 63%, 90%); + --brand-color-primary-hover-100: hsl(211, 63%, 100%); + --brand-color-primary-hover-50: hsl(211, 63%, 50%); + --brand-color-primary-hover-40: hsl(211, 63%, 40%); + --brand-color-primary-hover-30: hsl(211, 63%, 30%); + --brand-color-primary-hover-20: hsl(211, 63%, 20%); + --brand-color-primary-hover-10: hsl(211, 63%, 10%); + --brand-color-primary-50: hsl(213, 62%, 49%); + --brand-color-primary-60: hsl(213, 62%, 59%); + --brand-color-primary-70: hsl(213, 62%, 69%); + --brand-color-primary-80: hsl(213, 62%, 79%); + --brand-color-primary-90: hsl(213, 62%, 89%); + --brand-color-primary-100: hsl(213, 62%, 99%); + --brand-color-primary-40: hsl(213, 62%, 39%); + --brand-color-primary-30: hsl(213, 62%, 29%); + --brand-color-primary-20: hsl(213, 62%, 19%); + --brand-color-primary-10: hsl(213, 62%, 9%); + --brand-color-primary-active-40: hsl(215, 69%, 39%); + --brand-color-primary-active-50: hsl(215, 69%, 49%); + --brand-color-primary-active-60: hsl(215, 69%, 59%); + --brand-color-primary-active-70: hsl(215, 69%, 69%); + --brand-color-primary-active-80: hsl(215, 69%, 79%); + --brand-color-primary-active-90: hsl(215, 69%, 89%); + --brand-color-primary-active-100: hsl(215, 69%, 99%); + --brand-color-primary-active-30: hsl(215, 69%, 29%); + --brand-color-primary-active-20: hsl(215, 69%, 19%); + --brand-color-primary-active-10: hsl(215, 69%, 9%); + --brand-color-primary-text-hover-60: hsl(211, 63%, 60%); + --brand-color-primary-text-hover-70: hsl(211, 63%, 70%); + --brand-color-primary-text-hover-80: hsl(211, 63%, 80%); + --brand-color-primary-text-hover-90: hsl(211, 63%, 90%); + --brand-color-primary-text-hover-100: hsl(211, 63%, 100%); + --brand-color-primary-text-hover-50: hsl(211, 63%, 50%); + --brand-color-primary-text-hover-40: hsl(211, 63%, 40%); + --brand-color-primary-text-hover-30: hsl(211, 63%, 30%); + --brand-color-primary-text-hover-20: hsl(211, 63%, 20%); + --brand-color-primary-text-hover-10: hsl(211, 63%, 10%); + --brand-color-primary-text-50: hsl(213, 62%, 49%); + --brand-color-primary-text-60: hsl(213, 62%, 59%); + --brand-color-primary-text-70: hsl(213, 62%, 69%); + --brand-color-primary-text-80: hsl(213, 62%, 79%); + --brand-color-primary-text-90: hsl(213, 62%, 89%); + --brand-color-primary-text-100: hsl(213, 62%, 99%); + --brand-color-primary-text-40: hsl(213, 62%, 39%); + --brand-color-primary-text-30: hsl(213, 62%, 29%); + --brand-color-primary-text-20: hsl(213, 62%, 19%); + --brand-color-primary-text-10: hsl(213, 62%, 9%); + --brand-color-primary-text-active-40: hsl(215, 69%, 39%); + --brand-color-primary-text-active-50: hsl(215, 69%, 49%); + --brand-color-primary-text-active-60: hsl(215, 69%, 59%); + --brand-color-primary-text-active-70: hsl(215, 69%, 69%); + --brand-color-primary-text-active-80: hsl(215, 69%, 79%); + --brand-color-primary-text-active-90: hsl(215, 69%, 89%); + --brand-color-primary-text-active-100: hsl(215, 69%, 99%); + --brand-color-primary-text-active-30: hsl(215, 69%, 29%); + --brand-color-primary-text-active-20: hsl(215, 69%, 19%); + --brand-color-primary-text-active-10: hsl(215, 69%, 9%); + --font-size-default: 0.875rem; + --font-size-sm: 0.75rem; + --font-size-lg: 1rem; + --font-size-xl: 1.25rem; + --font-size-heading1: 1.5rem; + --font-size-heading2: 1.25rem; + --font-size-heading3: 1rem; + --font-size-heading4: 0.875rem; --font-weight-base-thin: 300; --font-weight-base-regular: 400; --font-weight-base-medium: 500; --font-weight-base-bold: 600; - --radius-base-min: 4px; - --radius-base-xs: 8px; - --radius-base-sm: 12px; - --radius-base-md: 24px; - --radius-base-lg: 48px; - --radius-base-xl: 64px; - --color-base-neutral-light-10: #a3a3a3; - --color-base-neutral-light-20: #adadad; - --color-base-neutral-light-30: #b8b8b8; - --color-base-neutral-light-40: #c2c2c2; - --color-base-neutral-light-50: #cccccc; - --color-base-neutral-light-60: #d6d6d6; - --color-base-neutral-light-70: #e0e0e0; - --color-base-neutral-light-80: #ebebeb; - --color-base-neutral-light-90: #f5f5f5; - --color-base-neutral-light-100: #ffffff; - --color-test-ci-trigger: orange; + --border-radius-default: 4px; + --sizing-base-h-unit: 480px; + --sizing-base-h-xs: 960px; + --sizing-base-h-sm: 1440px; + --sizing-base-h-md: 1920px; + --sizing-base-h-lg: 2400px; + --sizing-base-h-xl: 2880px; + --sizing-base-h-xxl: 3360px; + --sizing-base-v-unit: 270px; + --sizing-base-v-xs: 540px; + --sizing-base-v-sm: 810px; + --sizing-base-v-md: 1080px; + --sizing-base-v-lg: 1350px; + --sizing-base-v-xl: 1620px; + --success-color-success-bg: #f6ffed; + --success-color-success-bg-hover: #d9f7be; + --success-color-success-border: #b7eb8f; + --success-color-success-border-hover: #95de64; + --success-color-success-hover: #95de64; + --success-color-success: #52c41a; + --success-color-success-active: #389e0d; + --success-color-success-text-hover: #73d13d; + --success-color-success-text: #52c41a; + --success-color-success-text-active: #389e0d; + --warning-color-warning-bg: #fffbe6; + --warning-color-warning-bg-hover: #fff1b8; + --warning-color-warning-border: #ffe58f; + --warning-color-warning-border-hover: #ffd666; + --warning-color-warning-hover: #ffd666; + --warning-color-warning: #faad14; + --warning-color-warning-active: #d48806; + --warning-color-warning-text-hover: #ffc53d; + --warning-color-warning-text: #faad14; + --warning-color-warning-text-active: #d48806; + --error-color-error-bg: #fff2f0; + --error-color-error-bg-hover: #fff1f0; + --error-color-error-border: #ffccc7; + --error-color-error-border-hover: #ffa39e; + --error-color-error-hover: #ff7875; + --error-color-error: #ff4d4f; + --error-color-error-active: #d9363e; + --error-color-error-text-hover: #ff7875; + --error-color-error-text: #ff4d4f; + --error-color-error-text-active: #d9363e; + --info-color-info-bg: #eaf4ff; + --info-color-info-bg-hover: #e0f2ff; + --info-color-info-border: #97c3f2; + --info-color-info-border-hover: #81b5e6; + --info-color-info-hover: #4196f0; + --info-color-info: #3076cc; + --info-color-info-active: #277cd6; + --info-color-info-text-hover: #4196f0; + --info-color-info-text: #3076cc; + --info-color-info-text-active: #1f57a6; + --link-color-link: #3076cc; + --link-color-link-hover: #81b5e6; + --link-color-link-active: #1f57a6; + --text-color-text-base: #000000; + --text-color-text: #000000e0; + --text-color-text-secondary: #000000a6; + --text-color-text-tertiary: #00000073; + --text-color-text-quaternary: #00000040; + --border-color-border: #d9d9d9; + --border-color-border-secondary: #f0f0f0; + --fill-color-fill: #00000026; + --fill-color-fill-secondary: #0000000f; + --fill-color-fill-tertiary: #0000000a; + --fill-color-fill-quaternary: #00000005; + --background-color-bg-container: #ffffff; + --background-color-bg-elevated: #ffffff; + --background-color-bg-layout: #f5f5f5; + --background-color-bg-spotlight: #000000d9; + --background-color-bg-mask: #00000073; + --font-base-font-family-apple-system: '-apple-system'; + --font-base-font-family-blink: 'BlinkMacSystemFont'; + --font-base-font-family-segoe-ui: 'Segoe UI'; + --font-base-font-family-roboto: 'Roboto'; + --font-base-font-family-helvetica-neue: 'Helvetica Neue'; + --font-base-font-family-arial: 'Arial'; + --font-base-font-family-noto-sans: 'Noto Sans'; + --font-base-font-family-sans-serif: 'sans-serif'; + --font-base-font-family-apple-color-emoji: 'Apple Color Emoji'; + --font-base-font-family-segoe-ui-emoji: 'Segoe UI Emoji'; + --font-base-font-family-segoe-ui-symbol: 'Segoe UI Symbol'; + --font-base-font-family-noto-color-emoji: 'Noto Color Emoji'; + --font-base-font-family-helvetica: 'Helvetica'; + --font-base-font-family-ping-fang-sc: 'PingFang SC'; + --font-base-font-family-hiragino-sans-gb: 'Hiragino Sans GB'; + --font-base-font-family-microsoft-ya-hei: 'Microsoft YaHei'; + --font-base-font-family: '微软雅黑'; + --font-family-element-plus: 'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'; + --font-family-ant-design: '-apple-system', 'BlinkMacSystemFont' , 'Segoe UI' , 'Roboto' , 'Helvetica Neue' , 'Arial' , 'Noto Sans' , 'sans-serif' , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji'; + --line-height-default: 1.571; + --line-height-sm: 1.667; + --line-height-lg: 1.5; + --line-height-xl: 1.4; + --line-height-heading1: 1.333; + --line-height-heading2: 1.4; + --line-height-heading3: 1.5; + --line-height-heading4: 1.571; + --margin-xxs: 4px; + --margin-xs: 8px; + --margin-sm: 12px; + --margin-default: 16px; + --margin-md: 20px; + --margin-lg: 24px; + --margin-xl: 32px; + --margin-xxl: 48px; + --padding-xxs: 4px; + --padding-xs: 8px; + --padding-sm: 12px; + --padding-default: 16px; + --padding-md: 20px; + --padding-lg: 24px; + --padding-xl: 32px; + --box-shadow-default: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d; + --box-shadow-secondary: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d; + --chart-cyan: #5ad8a6; + --chart-cyan-light: #cdf3e3; + --chart-grey: #5d7092; + --chart-grey-light: #ced4de; + --chart-sunrise-yellow: #f6bd16; + --chart-sunrise-yellow-light: #fcebb9; + --chart-dust-red: #e86452; + --chart-dust-red-light: #f8d0cb; + --chart-day-break-blue: #6dc8ec; + --chart-day-break-blue-light: #d3eef9; + --chart-golden-purple: #945fb9; + --chart-golden-purple-light: #decfea; + --chart-sunset-orange: #ff9845; + --chart-sunset-orange-light: #ffe0c7; + --chart-dard-green: #1e9493; + --chart-dard-green-light: #bbdede; + --chart-magenta: #ff99c3; + --chart-magenta-light: #ffe0ed; } \ No newline at end of file diff --git a/output/base.scss b/output/base.scss new file mode 100644 index 0000000..77d58a5 --- /dev/null +++ b/output/base.scss @@ -0,0 +1,251 @@ + +// Do not edit directly +// Generated on Thu, 26 Oct 2023 07:07:34 GMT + +$brand-color-primary-bg-100: hsl(204, 100%, 97%); +$brand-color-primary-bg-90: hsl(204, 100%, 87%); +$brand-color-primary-bg-80: hsl(204, 100%, 77%); +$brand-color-primary-bg-70: hsl(204, 100%, 67%); +$brand-color-primary-bg-60: hsl(204, 100%, 57%); +$brand-color-primary-bg-50: hsl(204, 100%, 47%); +$brand-color-primary-bg-40: hsl(204, 100%, 37%); +$brand-color-primary-bg-30: hsl(204, 100%, 27%); +$brand-color-primary-bg-20: hsl(204, 100%, 17%); +$brand-color-primary-bg-10: hsl(204, 100%, 7%); +$brand-color-primary-bg-hover-100: hsl(205, 100%, 94%); +$brand-color-primary-bg-hover-90: hsl(205, 100%, 84%); +$brand-color-primary-bg-hover-80: hsl(205, 100%, 74%); +$brand-color-primary-bg-hover-70: hsl(205, 100%, 64%); +$brand-color-primary-bg-hover-60: hsl(205, 100%, 54%); +$brand-color-primary-bg-hover-50: hsl(205, 100%, 44%); +$brand-color-primary-bg-hover-40: hsl(205, 100%, 34%); +$brand-color-primary-bg-hover-30: hsl(205, 100%, 24%); +$brand-color-primary-bg-hover-20: hsl(205, 100%, 14%); +$brand-color-primary-bg-hover-10: hsl(205, 100%, 4%); +$brand-color-primary-border-90: hsl(206, 72%, 82%); +$brand-color-primary-border-100: hsl(206, 72%, 92%); +$brand-color-primary-border-80: hsl(206, 72%, 72%); +$brand-color-primary-border-70: hsl(206, 72%, 62%); +$brand-color-primary-border-60: hsl(206, 72%, 52%); +$brand-color-primary-border-50: hsl(206, 72%, 42%); +$brand-color-primary-border-40: hsl(206, 72%, 32%); +$brand-color-primary-border-30: hsl(206, 72%, 22%); +$brand-color-primary-border-20: hsl(206, 72%, 12%); +$brand-color-primary-border-10: hsl(206, 72%, 2%); +$brand-color-primary-border-hover-80: hsl(209, 67%, 70%); +$brand-color-primary-border-hover-90: hsl(209, 67%, 80%); +$brand-color-primary-border-hover-100: hsl(209, 67%, 90%); +$brand-color-primary-border-hover-70: hsl(209, 67%, 60%); +$brand-color-primary-border-hover-60: hsl(209, 67%, 50%); +$brand-color-primary-border-hover-50: hsl(209, 67%, 40%); +$brand-color-primary-border-hover-40: hsl(209, 67%, 30%); +$brand-color-primary-border-hover-30: hsl(209, 67%, 20%); +$brand-color-primary-border-hover-20: hsl(209, 67%, 10%); +$brand-color-primary-border-hover-10: hsl(203, 100%, 0%); +$brand-color-primary-hover-60: hsl(211, 63%, 60%); +$brand-color-primary-hover-70: hsl(211, 63%, 70%); +$brand-color-primary-hover-80: hsl(211, 63%, 80%); +$brand-color-primary-hover-90: hsl(211, 63%, 90%); +$brand-color-primary-hover-100: hsl(211, 63%, 100%); +$brand-color-primary-hover-50: hsl(211, 63%, 50%); +$brand-color-primary-hover-40: hsl(211, 63%, 40%); +$brand-color-primary-hover-30: hsl(211, 63%, 30%); +$brand-color-primary-hover-20: hsl(211, 63%, 20%); +$brand-color-primary-hover-10: hsl(211, 63%, 10%); +$brand-color-primary-50: hsl(213, 62%, 49%); +$brand-color-primary-60: hsl(213, 62%, 59%); +$brand-color-primary-70: hsl(213, 62%, 69%); +$brand-color-primary-80: hsl(213, 62%, 79%); +$brand-color-primary-90: hsl(213, 62%, 89%); +$brand-color-primary-100: hsl(213, 62%, 99%); +$brand-color-primary-40: hsl(213, 62%, 39%); +$brand-color-primary-30: hsl(213, 62%, 29%); +$brand-color-primary-20: hsl(213, 62%, 19%); +$brand-color-primary-10: hsl(213, 62%, 9%); +$brand-color-primary-active-40: hsl(215, 69%, 39%); +$brand-color-primary-active-50: hsl(215, 69%, 49%); +$brand-color-primary-active-60: hsl(215, 69%, 59%); +$brand-color-primary-active-70: hsl(215, 69%, 69%); +$brand-color-primary-active-80: hsl(215, 69%, 79%); +$brand-color-primary-active-90: hsl(215, 69%, 89%); +$brand-color-primary-active-100: hsl(215, 69%, 99%); +$brand-color-primary-active-30: hsl(215, 69%, 29%); +$brand-color-primary-active-20: hsl(215, 69%, 19%); +$brand-color-primary-active-10: hsl(215, 69%, 9%); +$brand-color-primary-text-hover-60: hsl(211, 63%, 60%); +$brand-color-primary-text-hover-70: hsl(211, 63%, 70%); +$brand-color-primary-text-hover-80: hsl(211, 63%, 80%); +$brand-color-primary-text-hover-90: hsl(211, 63%, 90%); +$brand-color-primary-text-hover-100: hsl(211, 63%, 100%); +$brand-color-primary-text-hover-50: hsl(211, 63%, 50%); +$brand-color-primary-text-hover-40: hsl(211, 63%, 40%); +$brand-color-primary-text-hover-30: hsl(211, 63%, 30%); +$brand-color-primary-text-hover-20: hsl(211, 63%, 20%); +$brand-color-primary-text-hover-10: hsl(211, 63%, 10%); +$brand-color-primary-text-50: hsl(213, 62%, 49%); +$brand-color-primary-text-60: hsl(213, 62%, 59%); +$brand-color-primary-text-70: hsl(213, 62%, 69%); +$brand-color-primary-text-80: hsl(213, 62%, 79%); +$brand-color-primary-text-90: hsl(213, 62%, 89%); +$brand-color-primary-text-100: hsl(213, 62%, 99%); +$brand-color-primary-text-40: hsl(213, 62%, 39%); +$brand-color-primary-text-30: hsl(213, 62%, 29%); +$brand-color-primary-text-20: hsl(213, 62%, 19%); +$brand-color-primary-text-10: hsl(213, 62%, 9%); +$brand-color-primary-text-active-40: hsl(215, 69%, 39%); +$brand-color-primary-text-active-50: hsl(215, 69%, 49%); +$brand-color-primary-text-active-60: hsl(215, 69%, 59%); +$brand-color-primary-text-active-70: hsl(215, 69%, 69%); +$brand-color-primary-text-active-80: hsl(215, 69%, 79%); +$brand-color-primary-text-active-90: hsl(215, 69%, 89%); +$brand-color-primary-text-active-100: hsl(215, 69%, 99%); +$brand-color-primary-text-active-30: hsl(215, 69%, 29%); +$brand-color-primary-text-active-20: hsl(215, 69%, 19%); +$brand-color-primary-text-active-10: hsl(215, 69%, 9%); +$font-size-default: 14px; +$font-size-sm: 12px; +$font-size-lg: 16px; +$font-size-xl: 20px; +$font-size-heading1: 24px; +$font-size-heading2: 20px; +$font-size-heading3: 16px; +$font-size-heading4: 14px; +$font-weight-base-thin: 300; +$font-weight-base-regular: 400; +$font-weight-base-medium: 500; +$font-weight-base-bold: 600; +$border-radius-default: 4px; +$sizing-base-h-unit: 480px; +$sizing-base-h-xs: 960px; +$sizing-base-h-sm: 1440px; +$sizing-base-h-md: 1920px; +$sizing-base-h-lg: 2400px; +$sizing-base-h-xl: 2880px; +$sizing-base-h-xxl: 3360px; +$sizing-base-v-unit: 270px; +$sizing-base-v-xs: 540px; +$sizing-base-v-sm: 810px; +$sizing-base-v-md: 1080px; +$sizing-base-v-lg: 1350px; +$sizing-base-v-xl: 1620px; +$success-color-success-bg: #f6ffed; +$success-color-success-bg-hover: #d9f7be; +$success-color-success-border: #b7eb8f; +$success-color-success-border-hover: #95de64; +$success-color-success-hover: #95de64; +$success-color-success: #52c41a; +$success-color-success-active: #389e0d; +$success-color-success-text-hover: #73d13d; +$success-color-success-text: #52c41a; +$success-color-success-text-active: #389e0d; +$warning-color-warning-bg: #fffbe6; +$warning-color-warning-bg-hover: #fff1b8; +$warning-color-warning-border: #ffe58f; +$warning-color-warning-border-hover: #ffd666; +$warning-color-warning-hover: #ffd666; +$warning-color-warning: #faad14; +$warning-color-warning-active: #d48806; +$warning-color-warning-text-hover: #ffc53d; +$warning-color-warning-text: #faad14; +$warning-color-warning-text-active: #d48806; +$error-color-error-bg: #fff2f0; +$error-color-error-bg-hover: #fff1f0; +$error-color-error-border: #ffccc7; +$error-color-error-border-hover: #ffa39e; +$error-color-error-hover: #ff7875; +$error-color-error: #ff4d4f; +$error-color-error-active: #d9363e; +$error-color-error-text-hover: #ff7875; +$error-color-error-text: #ff4d4f; +$error-color-error-text-active: #d9363e; +$info-color-info-bg: #eaf4ff; +$info-color-info-bg-hover: #e0f2ff; +$info-color-info-border: #97c3f2; +$info-color-info-border-hover: #81b5e6; +$info-color-info-hover: #4196f0; +$info-color-info: #3076cc; +$info-color-info-active: #277cd6; +$info-color-info-text-hover: #4196f0; +$info-color-info-text: #3076cc; +$info-color-info-text-active: #1f57a6; +$link-color-link: #3076cc; +$link-color-link-hover: #81b5e6; +$link-color-link-active: #1f57a6; +$text-color-text-base: #000000; +$text-color-text: #000000e0; +$text-color-text-secondary: #000000a6; +$text-color-text-tertiary: #00000073; +$text-color-text-quaternary: #00000040; +$border-color-border: #d9d9d9; +$border-color-border-secondary: #f0f0f0; +$fill-color-fill: #00000026; +$fill-color-fill-secondary: #0000000f; +$fill-color-fill-tertiary: #0000000a; +$fill-color-fill-quaternary: #00000005; +$background-color-bg-container: #ffffff; +$background-color-bg-elevated: #ffffff; +$background-color-bg-layout: #f5f5f5; +$background-color-bg-spotlight: #000000d9; +$background-color-bg-mask: #00000073; +$font-base-font-family-apple-system: '-apple-system'; +$font-base-font-family-blink: 'BlinkMacSystemFont'; +$font-base-font-family-segoe-ui: 'Segoe UI'; +$font-base-font-family-roboto: 'Roboto'; +$font-base-font-family-helvetica-neue: 'Helvetica Neue'; +$font-base-font-family-arial: 'Arial'; +$font-base-font-family-noto-sans: 'Noto Sans'; +$font-base-font-family-sans-serif: 'sans-serif'; +$font-base-font-family-apple-color-emoji: 'Apple Color Emoji'; +$font-base-font-family-segoe-ui-emoji: 'Segoe UI Emoji'; +$font-base-font-family-segoe-ui-symbol: 'Segoe UI Symbol'; +$font-base-font-family-noto-color-emoji: 'Noto Color Emoji'; +$font-base-font-family-helvetica: 'Helvetica'; +$font-base-font-family-ping-fang-sc: 'PingFang SC'; +$font-base-font-family-hiragino-sans-gb: 'Hiragino Sans GB'; +$font-base-font-family-microsoft-ya-hei: 'Microsoft YaHei'; +$font-base-font-family: '微软雅黑'; +$font-family-element-plus: 'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'; +$font-family-ant-design: '-apple-system', 'BlinkMacSystemFont' , 'Segoe UI' , 'Roboto' , 'Helvetica Neue' , 'Arial' , 'Noto Sans' , 'sans-serif' , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji'; +$line-height-default: 1.571; +$line-height-sm: 1.667; +$line-height-lg: 1.5; +$line-height-xl: 1.4; +$line-height-heading1: 1.333; +$line-height-heading2: 1.4; +$line-height-heading3: 1.5; +$line-height-heading4: 1.571; +$margin-xxs: 4px; +$margin-xs: 8px; +$margin-sm: 12px; +$margin-default: 16px; +$margin-md: 20px; +$margin-lg: 24px; +$margin-xl: 32px; +$margin-xxl: 48px; +$padding-xxs: 4px; +$padding-xs: 8px; +$padding-sm: 12px; +$padding-default: 16px; +$padding-md: 20px; +$padding-lg: 24px; +$padding-xl: 32px; +$box-shadow-default: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d; +$box-shadow-secondary: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d; +$chart-cyan: #5ad8a6; +$chart-cyan-light: #cdf3e3; +$chart-grey: #5d7092; +$chart-grey-light: #ced4de; +$chart-sunrise-yellow: #f6bd16; +$chart-sunrise-yellow-light: #fcebb9; +$chart-dust-red: #e86452; +$chart-dust-red-light: #f8d0cb; +$chart-day-break-blue: #6dc8ec; +$chart-day-break-blue-light: #d3eef9; +$chart-golden-purple: #945fb9; +$chart-golden-purple-light: #decfea; +$chart-sunset-orange: #ff9845; +$chart-sunset-orange-light: #ffe0c7; +$chart-dard-green: #1e9493; +$chart-dard-green-light: #bbdede; +$chart-magenta: #ff99c3; +$chart-magenta-light: #ffe0ed; diff --git a/output/brand-a.css b/output/brand-a.css index 439cbe1..76f8e3b 100644 --- a/output/brand-a.css +++ b/output/brand-a.css @@ -1,22 +1,32 @@ .brand-a-theme { - --color-primary-default: #0f992e; - --color-primary-hover: #0d8227; - --color-primary-disabled: #c2d0dc; - --button-radius: 48px; + --color-primary-default: #3076cc; + --color-primary-hover: #1f57a6; + --color-primary-disabled: #f0f0f0; + --button-radius: 4px; --button-padding-left: 16px; --button-padding-right: 16px; --button-height-lg: 36px; --button-height-sm: 24px; - --button-typography-lg-font-family: 'Consolas', Courier, monospace; - --button-typography-lg-font-weight: 500; + --button-typography-lg-font-family: 'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'; + --button-typography-lg-font-weight: 400; --button-typography-lg-font-size: 1rem; --button-typography-lg-text-case: none; - --button-typography-sm-font-family: 'Consolas', Courier, monospace; - --button-typography-sm-font-weight: 500; + --button-typography-lg-line-height: 1.571; + --button-typography-sm-font-family: 'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'; + --button-typography-sm-font-weight: 400; --button-typography-sm-font-size: 0.75rem; --button-typography-sm-text-case: none; - --button-font-family: 'Consolas', Courier, monospace; - --color-disabled-text: #a3a3a3; - --color-disabled-background: #f5f5f5; - --color-disabled-border: #adadad; + --button-font-family: 'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'; + --color-disabled-text: #3076cc; + --color-disabled-background: #f0f0f0; + --color-disabled-border: #d9d9d9; + --card-header-padding-top: 16px; + --card-width-unit: 480px; + --card-width-sm: 960px; + --card-height-unit: 270px; + --card-radius: 4px; + --card-bottom-sm: 12px; + --card-bottom-lg: 24px; + --card-bottom-xxl: 32px; + --card-gap: 12px; } \ No newline at end of file diff --git a/output/brand-a.scss b/output/brand-a.scss new file mode 100644 index 0000000..5492986 --- /dev/null +++ b/output/brand-a.scss @@ -0,0 +1,34 @@ + +// Do not edit directly +// Generated on Thu, 26 Oct 2023 07:07:34 GMT + +$color-primary-default: #3076cc; +$color-primary-hover: #1f57a6; +$color-primary-disabled: #f0f0f0; +$button-radius: 4px; +$button-padding-left: 16px; +$button-padding-right: 16px; +$button-height-lg: 36px; +$button-height-sm: 24px; +$button-typography-lg-font-family: 'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'; +$button-typography-lg-font-weight: 400; +$button-typography-lg-font-size: 16px; +$button-typography-lg-text-case: none; +$button-typography-lg-line-height: 1.571; +$button-typography-sm-font-family: 'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'; +$button-typography-sm-font-weight: 400; +$button-typography-sm-font-size: 12px; +$button-typography-sm-text-case: none; +$button-font-family: 'Helvetica', 'Helvetica', 'PingFang SC' , 'Hiragino Sans GB' , 'Microsoft YaHei' , '微软雅黑' , 'Arial' , 'sans-serif'; +$color-disabled-text: #3076cc; +$color-disabled-background: #f0f0f0; +$color-disabled-border: #d9d9d9; +$card-header-padding-top: 16px; +$card-width-unit: 480px; +$card-width-sm: 960px; +$card-height-unit: 270px; +$card-radius: 4px; +$card-bottom-sm: 12px; +$card-bottom-lg: 24px; +$card-bottom-xxl: 32px; +$card-gap: 12px; diff --git a/output/brand-b.css b/output/brand-b.css index 31454a7..a65498d 100644 --- a/output/brand-b.css +++ b/output/brand-b.css @@ -1,22 +1,15 @@ .brand-b-theme { - --color-primary-default: #840977; - --color-primary-hover: #700865; - --color-primary-disabled: #e0c2dd; - --button-radius: 4px; - --button-padding-left: 16px; - --button-padding-right: 16px; + --color-primary-default: #5ad8a6; + --color-primary-hover: #1e9493; + --color-primary-disabled: #ced4de; --button-height-lg: 36px; --button-height-sm: 24px; - --button-typography-lg-font-family: 'Inter', Helvetica, Arial, sans-serif; - --button-typography-lg-font-weight: 400; - --button-typography-lg-font-size: 1rem; - --button-typography-lg-text-case: none; - --button-typography-sm-font-family: 'Inter', Helvetica, Arial, sans-serif; - --button-typography-sm-font-weight: 400; - --button-typography-sm-font-size: 0.75rem; - --button-typography-sm-text-case: none; - --button-font-family: 'Inter', Helvetica, Arial, sans-serif; - --color-disabled-text: #a3a3a3; - --color-disabled-background: #f5f5f5; - --color-disabled-border: #adadad; + --button-width: 270px; + --color-disabled-text: #ffe0ed; + --color-disabled-background: #cdf3e3; + --color-disabled-border: #945fb9; + --card-width-unit: 270px; + --card-gap: 8px; + --card-top: 24px; + --color-text-button-title: #3076cc; } \ No newline at end of file diff --git a/output/brand-b.scss b/output/brand-b.scss new file mode 100644 index 0000000..9a813a5 --- /dev/null +++ b/output/brand-b.scss @@ -0,0 +1,17 @@ + +// Do not edit directly +// Generated on Thu, 26 Oct 2023 07:07:34 GMT + +$color-primary-default: #5ad8a6; +$color-primary-hover: #1e9493; +$color-primary-disabled: #ced4de; +$button-height-lg: 36px; +$button-height-sm: 24px; +$button-width: 270px; +$color-disabled-text: #ffe0ed; +$color-disabled-background: #cdf3e3; +$color-disabled-border: #945fb9; +$card-width-unit: 270px; +$card-gap: 8px; +$card-top: 24px; +$color-text-button-title: #3076cc; diff --git a/package-lock.json b/package-lock.json index e2aa353..9b6676a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,7 +1,7 @@ { "name": "style-dictionary-tutorial", "version": "1.0.0", - "lockfileVersion": 2, + "lockfileVersion": 3, "requires": true, "packages": { "": { @@ -9,9 +9,17 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "style-dictionary": "^3.7.1" + "@divriots/style-dictionary-to-figma": "^0.4.0", + "handlebars": "^4.0.11", + "style-dictionary": "^3.7.1", + "tinycolor": "^0.0.1" } }, + "node_modules/@divriots/style-dictionary-to-figma": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@divriots/style-dictionary-to-figma/-/style-dictionary-to-figma-0.4.0.tgz", + "integrity": "sha512-vSC3u1xBi9ShYpGEP+atS+L0vnNnSFmjtvB976+yNUT25nvgpUYCb1ZsSpKBe8+Uk1Qww+4ZIK+/91k3msfs2Q==" + }, "node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -179,9 +187,29 @@ } }, "node_modules/graceful-fs": { - "version": "4.2.10", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", - "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + }, + "node_modules/handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "dependencies": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "wordwrap": "^1.0.0" + }, + "bin": { + "handlebars": "bin/handlebars" + }, + "engines": { + "node": ">=0.4.7" + }, + "optionalDependencies": { + "uglify-js": "^3.1.4" + } }, "node_modules/has-flag": { "version": "4.0.0", @@ -215,9 +243,9 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/json5": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.2.tgz", - "integrity": "sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "bin": { "json5": "lib/cli.js" }, @@ -265,6 +293,19 @@ "node": "*" } }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" + }, "node_modules/no-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", @@ -336,17 +377,25 @@ "tslib": "^2.0.3" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/style-dictionary": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz", - "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==", + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.9.0.tgz", + "integrity": "sha512-mnq8QfPJoj3ellKHRKZwmCgYUGgwYtoagW5edyKpR09O1W4/XqBdeKXoY/LbeIKqHrqVR7sGgk6E/dNYkPS4aA==", "dependencies": { "chalk": "^4.0.0", "change-case": "^4.1.2", "commander": "^8.3.0", "fs-extra": "^10.0.0", "glob": "^7.2.0", - "json5": "^2.2.0", + "json5": "^2.2.2", "jsonc-parser": "^3.0.0", "lodash": "^4.17.15", "tinycolor2": "^1.4.1" @@ -369,18 +418,35 @@ "node": ">=8" } }, - "node_modules/tinycolor2": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.5.1.tgz", - "integrity": "sha512-BHlrsGeYN2OpkRpfAgkEwCMu6w8Quq8JkK/mp4c55NZP7OwceJObR1CPZt62TqiA0Y3J5pwuDX+fXDqc35REtg==", + "node_modules/tinycolor": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/tinycolor/-/tinycolor-0.0.1.tgz", + "integrity": "sha512-+CorETse1kl98xg0WAzii8DTT4ABF4R3nquhrkIbVGcw1T8JYs5Gfx9xEfGINPUZGDj9C4BmOtuKeaTtuuRolg==", "engines": { - "node": "*" + "node": ">=0.4.0" } }, + "node_modules/tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" + }, "node_modules/tslib": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", - "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, + "node_modules/uglify-js": { + "version": "3.17.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", + "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==", + "optional": true, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } }, "node_modules/universalify": { "version": "2.0.0", @@ -406,349 +472,12 @@ "tslib": "^2.0.3" } }, - "node_modules/wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" - } - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "requires": { - "color-convert": "^2.0.1" - } - }, - "balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" - }, - "brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "camel-case": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", - "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", - "requires": { - "pascal-case": "^3.1.2", - "tslib": "^2.0.3" - } - }, - "capital-case": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", - "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case-first": "^2.0.2" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "change-case": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", - "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", - "requires": { - "camel-case": "^4.1.2", - "capital-case": "^1.0.4", - "constant-case": "^3.0.4", - "dot-case": "^3.0.4", - "header-case": "^2.0.4", - "no-case": "^3.0.4", - "param-case": "^3.0.4", - "pascal-case": "^3.1.2", - "path-case": "^3.0.4", - "sentence-case": "^3.0.4", - "snake-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "commander": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", - "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==" - }, - "concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" - }, - "constant-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", - "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case": "^2.0.2" - } - }, - "dot-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", - "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "fs-extra": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", - "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "requires": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - } - }, - "fs.realpath": { + "node_modules/wordwrap": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" }, - "glob": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", - "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.1.1", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "graceful-fs": { - "version": "4.2.10", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", - "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" - }, - "header-case": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", - "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", - "requires": { - "capital-case": "^1.0.4", - "tslib": "^2.0.3" - } - }, - "inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "requires": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" - }, - "json5": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.2.tgz", - "integrity": "sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==" - }, - "jsonc-parser": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", - "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==" - }, - "jsonfile": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", - "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", - "requires": { - "graceful-fs": "^4.1.6", - "universalify": "^2.0.0" - } - }, - "lodash": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" - }, - "lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "requires": { - "tslib": "^2.0.3" - } - }, - "minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "requires": { - "brace-expansion": "^1.1.7" - } - }, - "no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "requires": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, - "once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "requires": { - "wrappy": "1" - } - }, - "param-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", - "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", - "requires": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "pascal-case": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", - "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "path-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", - "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", - "requires": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==" - }, - "sentence-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", - "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case-first": "^2.0.2" - } - }, - "snake-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", - "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", - "requires": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "style-dictionary": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz", - "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==", - "requires": { - "chalk": "^4.0.0", - "change-case": "^4.1.2", - "commander": "^8.3.0", - "fs-extra": "^10.0.0", - "glob": "^7.2.0", - "json5": "^2.2.0", - "jsonc-parser": "^3.0.0", - "lodash": "^4.17.15", - "tinycolor2": "^1.4.1" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "requires": { - "has-flag": "^4.0.0" - } - }, - "tinycolor2": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.5.1.tgz", - "integrity": "sha512-BHlrsGeYN2OpkRpfAgkEwCMu6w8Quq8JkK/mp4c55NZP7OwceJObR1CPZt62TqiA0Y3J5pwuDX+fXDqc35REtg==" - }, - "tslib": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", - "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" - }, - "universalify": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", - "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" - }, - "upper-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", - "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", - "requires": { - "tslib": "^2.0.3" - } - }, - "upper-case-first": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", - "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", - "requires": { - "tslib": "^2.0.3" - } - }, - "wrappy": { + "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" diff --git a/package.json b/package.json index 0e171df..2cb3da9 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,9 @@ }, "homepage": "https://github.com/michaelmang/style-dictionary#readme", "dependencies": { - "style-dictionary": "^3.7.1" + "style-dictionary": "^3.7.1", + "@divriots/style-dictionary-to-figma": "^0.4.0", + "handlebars": "^4.0.11", + "tinycolor": "^0.0.1" } -} +} \ No newline at end of file