@gct-paas/scss 0.0.1-dev.15 → 0.0.1-dev.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.min.cjs +1 -0
  2. package/dist/index.min.css +1 -1
  3. package/dist/index.min.css.map +1 -1
  4. package/dist/index.system.min.js +1 -0
  5. package/dist/scss.css +1 -0
  6. package/package.json +16 -4
  7. package/style/theme/dark/dark-theme.scss +258 -0
  8. package/style/theme/index.scss +2 -1
  9. package/style/theme/light/light-theme.scss +258 -0
  10. package/style/tools/utils.scss +76 -1
  11. package/style/theme/default/default-theme.scss +0 -402
package/dist/index.min.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";var u=Object.defineProperty;var l=(r,t,s)=>t in r?u(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s;var d=(r,t,s)=>l(r,typeof t!="symbol"?t+"":t,s);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),h="gct",m="is-";function o(r,t,s,a,n){let c=`${r}-${t}`;return s&&(c+=`-${s}`),a&&(c+=`__${a}`),n&&(c+=`--${n}`),c}class p{constructor(t,s){d(this,"namespace");this.block=t,this.namespace=s||h}b(t=""){return o(this.namespace,this.block,t,"","")}e(t){return t?o(this.namespace,this.block,"",t,""):""}m(t){return t?o(this.namespace,this.block,"","",t):""}be(t,s){return t&&s?o(this.namespace,this.block,t,s,""):""}em(t,s){return t&&s?o(this.namespace,this.block,"",t,s):""}bm(t,s){return t&&s?o(this.namespace,this.block,t,"",s):""}bem(t,s,a){return t&&s&&a?o(this.namespace,this.block,t,s,a):""}is(t,s){return t&&s?`${m}${t}`:""}cssVar(t){const s={};for(const a in t)t[a]&&(s[this.cssVarName(a)]=t[a]);return s}cssVarBlock(t){const s={};for(const a in t)t[a]&&(s[this.cssVarBlockName(a)]=t[a]);return s}cssVarName(t){return`--${this.namespace}-${t}`}cssVarBlockName(t){return`--${this.namespace}-${this.block}-${t}`}}const i=e.defineComponent({name:"ThemeExample",setup(){const r=new p("theme-example"),t=e.ref("light"),s=document.getElementsByTagName("html").item(0);return e.watch(t,(a,n)=>{s&&(s.classList.remove(n),s.classList.add(a))}),{ns:r,theme:t}},render(){return e.createVNode("div",{class:this.ns.b()},[e.createVNode("div",{class:this.ns.e("action")},[e.createVNode(e.resolveComponent("a-radio-group"),{value:this.theme,"onUpdate:value":r=>this.theme=r,"button-style":"solid"},{default:()=>[e.createVNode(e.resolveComponent("a-radio-button"),{value:"light"},{default:()=>[e.createTextVNode("亮色")]}),e.createVNode(e.resolveComponent("a-radio-button"),{value:"dark"},{default:()=>[e.createTextVNode("暗色")]})]})]),e.createVNode("div",{class:this.ns.e("block")},[e.createVNode("div",{class:this.ns.e("header")},[e.createVNode("div",{class:this.ns.e("title")},[e.createTextVNode("主题色")])]),e.createVNode("div",{class:this.ns.e("container")},[e.createVNode("div",{class:this.ns.e("primary")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary"},{default:()=>[e.createTextVNode("主题色")]})]),e.createVNode("div",{class:this.ns.e("info")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary"},{default:()=>[e.createTextVNode("信息色")]})]),e.createVNode("div",{class:this.ns.e("success")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary"},{default:()=>[e.createTextVNode("成功色")]})]),e.createVNode("div",{class:this.ns.e("warning")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary"},{default:()=>[e.createTextVNode("警示色")]})]),e.createVNode("div",{class:this.ns.e("danger")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary"},{default:()=>[e.createTextVNode("危险色")]})])])]),e.createVNode("div",{class:this.ns.e("block")},[e.createVNode("div",{class:this.ns.e("header")},[e.createVNode("div",{class:this.ns.e("title")},[e.createTextVNode("主题色(禁用)")])]),e.createVNode("div",{class:this.ns.e("container")},[e.createVNode("div",{class:this.ns.e("primary")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary",disabled:!0},{default:()=>[e.createTextVNode("主题色")]})]),e.createVNode("div",{class:this.ns.e("info")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary",disabled:!0},{default:()=>[e.createTextVNode("信息色")]})]),e.createVNode("div",{class:this.ns.e("success")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary",disabled:!0},{default:()=>[e.createTextVNode("成功色")]})]),e.createVNode("div",{class:this.ns.e("warning")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary",disabled:!0},{default:()=>[e.createTextVNode("警示色")]})]),e.createVNode("div",{class:this.ns.e("danger")},[e.createVNode(e.resolveComponent("a-button"),{type:"primary",disabled:!0},{default:()=>[e.createTextVNode("危险色")]})])])])])}}),N={install(r){r.component(i.name,i)}};exports.default=N;
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:auto}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:auto;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root.default{--gct-red-0:254,242,237;--gct-red-1:254,221,210;--gct-red-2:253,183,164;--gct-red-3:251,144,120;--gct-red-4:250,102,75;--gct-red-5:249,57,31;--gct-red-6:213,37,20;--gct-red-7:177,20,13;--gct-red-8:142,7,5;--gct-red-9:106,2,3;--gct-pink-0:253,236,239;--gct-pink-1:251,207,216;--gct-pink-2:246,160,181;--gct-pink-3:242,115,150;--gct-pink-4:238,72,122;--gct-pink-5:233,31,99;--gct-pink-6:197,18,86;--gct-pink-7:162,11,72;--gct-pink-8:126,4,58;--gct-pink-9:90,1,44;--gct-purple-0:247,233,247;--gct-purple-1:239,202,239;--gct-purple-2:221,155,224;--gct-purple-3:201,112,209;--gct-purple-4:180,73,194;--gct-purple-5:158,40,179;--gct-purple-6:135,30,159;--gct-purple-7:112,23,138;--gct-purple-8:92,14,117;--gct-purple-9:72,11,97;--gct-violet-0:243,237,249;--gct-violet-1:226,209,244;--gct-violet-2:196,167,233;--gct-violet-3:166,126,221;--gct-violet-4:136,91,210;--gct-violet-5:106,58,199;--gct-violet-6:87,47,179;--gct-violet-7:70,36,158;--gct-violet-8:54,28,138;--gct-violet-9:40,20,117;--gct-indigo-0:237,239,248;--gct-indigo-1:209,216,240;--gct-indigo-2:167,179,225;--gct-indigo-3:128,144,211;--gct-indigo-4:94,111,196;--gct-indigo-5:63,81,181;--gct-indigo-6:51,66,161;--gct-indigo-7:41,52,140;--gct-indigo-8:31,40,120;--gct-indigo-9:23,29,99;--gct-blue-0:234,245,255;--gct-blue-1:203,231,254;--gct-blue-2:152,205,253;--gct-blue-3:101,179,252;--gct-blue-4:51,149,252;--gct-blue-5:3,118,250;--gct-blue-6:2,97,214;--gct-blue-7:2,79,179;--gct-blue-8:0,61,143;--gct-blue-9:0,44,107;--gct-light-blue-0:234,247,253;--gct-light-blue-1:202,236,252;--gct-light-blue-2:149,216,248;--gct-light-blue-3:97,195,245;--gct-light-blue-4:48,172,241;--gct-light-blue-5:0,149,238;--gct-light-blue-6:0,123,202;--gct-light-blue-7:0,99,167;--gct-light-blue-8:0,75,131;--gct-light-blue-9:0,53,95;--gct-cyan-0:229,247,248;--gct-cyan-1:194,239,240;--gct-cyan-2:138,221,225;--gct-cyan-3:87,203,211;--gct-cyan-4:44,184,197;--gct-cyan-5:6,164,182;--gct-cyan-6:3,134,152;--gct-cyan-7:2,105,121;--gct-cyan-8:0,77,91;--gct-cyan-9:1,50,61;--gct-teal-0:227,247,244;--gct-teal-1:192,240,232;--gct-teal-2:135,224,211;--gct-teal-3:84,209,193;--gct-teal-4:39,194,176;--gct-teal-5:5,179,161;--gct-teal-6:0,149,137;--gct-teal-7:0,119,111;--gct-teal-8:0,90,85;--gct-teal-9:1,60,58;--gct-green-0:236,246,236;--gct-green-1:208,240,208;--gct-green-2:164,224,167;--gct-green-3:126,209,130;--gct-green-4:90,194,98;--gct-green-5:59,179,70;--gct-green-6:49,149,58;--gct-green-7:37,119,47;--gct-green-8:26,89,36;--gct-green-9:18,60,24;--gct-light-green-0:243,248,236;--gct-light-green-1:226,240,208;--gct-light-green-2:200,225,165;--gct-light-green-3:173,211,127;--gct-light-green-4:147,197,91;--gct-light-green-5:123,182,60;--gct-light-green-6:100,152,47;--gct-light-green-7:79,121,38;--gct-light-green-8:57,91,27;--gct-light-green-9:36,61,18;--gct-lime-0:241,250,230;--gct-lime-1:227,246,197;--gct-lime-2:203,237,142;--gct-lime-3:183,226,91;--gct-lime-4:168,218,44;--gct-lime-5:154,209,0;--gct-lime-6:125,174,0;--gct-lime-7:99,139,2;--gct-lime-8:72,104,0;--gct-lime-9:47,70,0;--gct-yellow-0:255,253,234;--gct-yellow-1:255,250,203;--gct-yellow-2:253,243,152;--gct-yellow-3:252,231,101;--gct-yellow-4:251,218,49;--gct-yellow-5:249,200,0;--gct-yellow-6:208,170,0;--gct-yellow-7:167,139,0;--gct-yellow-8:125,106,0;--gct-yellow-9:83,72,0;--gct-amber-0:255,251,236;--gct-amber-1:252,245,206;--gct-amber-2:249,232,158;--gct-amber-3:246,216,110;--gct-amber-4:243,198,65;--gct-amber-5:240,177,20;--gct-amber-6:200,138,16;--gct-amber-7:160,102,10;--gct-amber-8:120,70,5;--gct-amber-9:80,43,3;--gct-orange-0:255,243,224;--gct-orange-1:255,223,177;--gct-orange-2:255,204,128;--gct-orange-3:254,183,77;--gct-orange-4:255,167,38;--gct-orange-5:255,152,0;--gct-orange-6:250,141,0;--gct-orange-7:245,124,2;--gct-orange-8:239,108,0;--gct-orange-9:230,81,0;--gct-grey-0:249,249,249;--gct-grey-1:230,232,234;--gct-grey-2:198,202,205;--gct-grey-3:167,171,175;--gct-grey-4:136,141,145;--gct-grey-5:107,102,116;--gct-grey-6:85,91,97;--gct-grey-7:65,70,76;--gct-grey-8:46,50,55;--gct-grey-9:29,31,35;--gct-blue-cyan-0:217,236,255;--gct-blue-cyan-1:164,201,238;--gct-blue-cyan-2:131,171,212;--gct-blue-cyan-3:105,148,190;--gct-blue-cyan-4:85,125,165;--gct-blue-cyan-5:70,107,144;--gct-blue-cyan-6:48,81,115;--gct-blue-cyan-7:36,65,96;--gct-blue-cyan-8:26,52,79;--gct-blue-cyan-9:16,41,68;--gct-white:255,255,255;--gct-black:0,0,0;--gct-color-white:rgba(var(--gct-white), 1);--gct-color-black:rgba(var(--gct-black), 1);--gct-color-primary:rgba(var(--gct-blue-cyan-4), 1);--gct-color-primary-text:rgba(var(--gct-white), 1);--gct-color-primary-hover:rgba(var(--gct-blue-cyan-3), 1);--gct-color-primary-hover-text:rgba(var(--gct-white), 1);--gct-color-primary-active:rgba(var(--gct-blue-cyan-5), 1);--gct-color-primary-active-text:rgba(var(--gct-white), 1);--gct-color-primary-disabled:rgba(var(--gct-blue-cyan-2), 1);--gct-color-primary-disabled-text:rgba(var(--gct-white), 1);--gct-color-primary-light-default:rgba(var(--gct-blue-cyan-0), 1);--gct-color-primary-light-hover:rgba(var(--gct-blue-cyan-1), 1);--gct-color-primary-light-active:rgba(var(--gct-blue-cyan-2), 1);--gct-color-secondary:rgba(var(--gct-light-blue-5), 1);--gct-color-secondary-text:rgba(var(--gct-white), 1);--gct-color-secondary-hover:rgba(var(--gct-light-blue-6), 1);--gct-color-secondary-hover-text:rgba(var(--gct-white), 1);--gct-color-secondary-active:rgba(var(--gct-light-blue-7), 1);--gct-color-secondary-active-text:rgba(var(--gct-white), 1);--gct-color-secondary-disabled:rgba(var(--gct-light-blue-2), 1);--gct-color-secondary-disabled-text:rgba(var(--gct-white), 1);--gct-color-secondary-light-default:rgba(var(--gct-light-blue-0), 1);--gct-color-secondary-light-hover:rgba(var(--gct-light-blue-1), 1);--gct-color-secondary-light-active:rgba(var(--gct-light-blue-2), 1);--gct-color-tertiary:rgba(var(--gct-grey-5), 1);--gct-color-tertiary-text:rgba(var(--gct-white), 1);--gct-color-tertiary-hover:rgba(var(--gct-grey-4), 1);--gct-color-tertiary-hover-text:rgba(var(--gct-white), 1);--gct-color-tertiary-active:rgba(var(--gct-grey-6), 1);--gct-color-tertiary-active-text:rgba(var(--gct-white), 1);--gct-color-tertiary-light-default:rgba(var(--gct-grey-0), 1);--gct-color-tertiary-light-hover:rgba(var(--gct-grey-1), 1);--gct-color-tertiary-light-active:rgba(var(--gct-grey-2), 1);--gct-color-info:rgba(var(--gct-blue-cyan-4), 1);--gct-color-info-text:rgba(var(--gct-white), 1);--gct-color-info-hover:rgba(var(--gct-blue-cyan-3), 1);--gct-color-info-hover-text:rgba(var(--gct-white), 1);--gct-color-info-active:rgba(var(--gct-blue-cyan-5), 1);--gct-color-info-active-text:rgba(var(--gct-white), 1);--gct-color-info-disabled:rgba(var(--gct-blue-cyan-2), 1);--gct-color-info-disabled-text:rgba(var(--gct-white), 1);--gct-color-info-light-default:rgba(var(--gct-blue-cyan-0), 1);--gct-color-info-light-hover:rgba(var(--gct-blue-cyan-1), 1);--gct-color-info-light-active:rgba(var(--gct-blue-cyan-2), 1);--gct-color-success:rgba(var(--gct-green-5), 1);--gct-color-success-text:rgba(var(--gct-white), 1);--gct-color-success-hover:rgba(var(--gct-green-4), 1);--gct-color-success-hover-text:rgba(var(--gct-white), 1);--gct-color-success-active:rgba(var(--gct-green-6), 1);--gct-color-success-active-text:rgba(var(--gct-white), 1);--gct-color-success-disabled:rgba(var(--gct-green-2), 1);--gct-color-success-disabled-text:rgba(var(--gct-white), 1);--gct-color-success-light-default:rgba(var(--gct-green-0), 1);--gct-color-success-light-hover:rgba(var(--gct-green-1), 1);--gct-color-success-light-active:rgba(var(--gct-green-2), 1);--gct-color-warning:rgba(var(--gct-orange-5), 1);--gct-color-warning-text:rgba(var(--gct-white), 1);--gct-color-warning-hover:rgba(var(--gct-orange-4), 1);--gct-color-warning-hover-text:rgba(var(--gct-white), 1);--gct-color-warning-active:rgba(var(--gct-orange-6), 1);--gct-color-warning-active-text:rgba(var(--gct-white), 1);--gct-color-warning-light-default:rgba(var(--gct-orange-0), 1);--gct-color-warning-light-hover:rgba(var(--gct-orange-1), 1);--gct-color-warning-light-active:rgba(var(--gct-orange-2), 1);--gct-color-danger:rgba(var(--gct-red-5), 1);--gct-color-danger-text:rgba(var(--gct-white), 1);--gct-color-danger-hover:rgba(var(--gct-red-4), 1);--gct-color-danger-hover-text:rgba(var(--gct-white), 1);--gct-color-danger-active:rgba(var(--gct-red-6), 1);--gct-color-danger-active-text:rgba(var(--gct-white), 1);--gct-color-danger-light-default:rgba(var(--gct-red-0), 1);--gct-color-danger-light-hover:rgba(var(--gct-red-1), 1);--gct-color-danger-light-active:rgba(var(--gct-red-2), 1);--gct-color-text-0:rgba(var(--gct-grey-9), 1);--gct-color-text-1:rgba(var(--gct-grey-7), 1);--gct-color-text-2:rgba(var(--gct-grey-6), 1);--gct-color-text-3:rgba(var(--gct-grey-4), 1);--gct-color-text-5:#dbe4ec;--gct-color-text-menu:#dbe4ec;--gct-color-icon-0:#65b3fc;--gct-color-icon-1:#cbe7fe;--gct-color-link:rgba(var(--gct-blue-cyan-5), 1);--gct-color-link-hover:rgba(var(--gct-blue-cyan-4), 1);--gct-color-link-active:rgba(var(--gct-blue-cyan-6), 1);--gct-color-link-visited:rgba(var(--gct-blue-cyan-5), 1);--gct-color-bg-0:rgba(var(--gct-grey-0), 1);--gct-color-bg-1:rgba(var(--gct-white), 1);--gct-color-bg-2:rgba(var(--gct-white), 1);--gct-color-bg-3:rgba(var(--gct-white), 1);--gct-color-bg-4:rgba(var(--gct-white), 1);--gct-color-bg-5:rgba(var(--gct-blue-cyan-3), 0.6);--gct-color-bg-overlay:rgba(var(--gct-black), 0.5);--gct-color-fill-0:rgba(var(--gct-grey-8), 0.05);--gct-color-fill-1:rgba(var(--gct-grey-8), 0.1);--gct-color-fill-2:rgba(var(--gct-grey-8), 0.13);--gct-color-scroll-menu:rgba(132,165,198,.4);--gct-color-border:rgba(var(--gct-grey-9), 0.1);--gct-color-disabled-text:rgba(var(--gct-grey-9), 0.35);--gct-color-disabled-border:rgba(var(--gct-grey-1), 1);--gct-color-disabled-bg:rgba(var(--gct-grey-1), 1);--gct-color-disabled-fill:rgba(var(--gct-grey-8), 0.04);--gct-color-shadow:rgba(var(--gct-black), 0.04);--gct-shadow-elevated:0 0 1px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.1);--gct-font-size-small:12px;--gct-font-size-regular:14px;--gct-font-size-header-6:16px;--gct-font-size-header-5:18px;--gct-font-size-header-4:20px;--gct-font-size-header-3:24px;--gct-font-size-header-2:28px;--gct-font-size-header-1:32px;--gct-font-weight-light:200;--gct-font-weight-regular:400;--gct-font-weight-bold:800;--gct-border-radius-extra-small:2px;--gct-border-radius-small:4px;--gct-border-radius-medium:8px;--gct-border-radius-large:12px;--gct-border-radius-circle:50%;--gct-border-radius-full:9999px;--gct-height-control-small:24px;--gct-height-control-default:32px;--gct-height-control-large:40px;--gct-border-thickness:0;--gct-border-thickness-control:1px;--gct-border-thickness-control-focus:1px;--gct-width-icon-extra-small:8px;--gct-width-icon-small:12px;--gct-width-icon-medium:16px;--gct-width-icon-large:20px;--gct-width-icon-extra-large:24px;--gct-spacing-none:0;--gct-spacing-super-tight:2px;--gct-spacing-extra-tight:4px;--gct-spacing-tight:8px;--gct-spacing-base-tight:12px;--gct-spacing-base:16px;--gct-spacing-base-loose:20px;--gct-spacing-loose:24px;--gct-spacing-extra-loose:32px;--gct-spacing-super-loose:40px}/*# sourceMappingURL=index.min.css.map */
1
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:auto}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:auto;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root.dark{--gct-blue-1:246,248,254;--gct-blue-2:236,242,253;--gct-blue-3:222,232,252;--gct-blue-4:205,224,255;--gct-blue-5:168,199,255;--gct-blue-6:128,166,246;--gct-blue-7:86,131,239;--gct-blue-8:49,104,236;--gct-blue-9:42,88,201;--gct-blue-10:35,74,168;--gct-blue-11:28,59,135;--gct-blue-12:22,47,106;--gct-red-1:254,236,221;--gct-red-2:252,197,198;--gct-red-3:250,169,170;--gct-red-4:248,130,132;--gct-red-5:247,106,108;--gct-red-6:245,69,71;--gct-red-7:219,34,28;--gct-red-8:197,31,25;--gct-red-9:164,26,21;--gct-red-10:131,20,17;--gct-red-11:99,15,13;--gct-red-12:77,12,10;--gct-green-1:237,249,239;--gct-green-2:211,241,216;--gct-green-3:176,230,185;--gct-green-4:140,219,152;--gct-green-5:105,208,121;--gct-green-6:72,198,92;--gct-green-7:65,178,83;--gct-green-8:58,158,74;--gct-green-9:54,149,69;--gct-green-10:43,119,55;--gct-green-11:32,89,41;--gct-green-12:25,69,32;--gct-orange-1:255,244,236;--gct-orange-2:255,229,210;--gct-orange-3:255,209,174;--gct-orange-4:255,188,136;--gct-orange-5:255,167,100;--gct-orange-6:255,148,66;--gct-orange-7:230,133,59;--gct-orange-8:204,118,53;--gct-orange-9:191,111,50;--gct-orange-10:153,89,40;--gct-orange-11:115,67,30;--gct-orange-12:89,52,23;--gct-pr-gray-1:30,34,43;--gct-pr-gray-2:46,49,56;--gct-pr-gray-3:67,72,85;--gct-pr-gray-4:90,95,107;--gct-pr-gray-5:113,118,131;--gct-pr-gray-6:134,138,150;--gct-pr-gray-7:169,175,188;--gct-pr-gray-8:202,207,216;--gct-pr-gray-9:143,150,163;--gct-pr-gray-10:242,245,248;--gct-pr-gray-11:249,250,251;--gct-pr-gray-12:252,252,253;--gct-gray-1:255,255,255;--gct-gray-2:243,243,243;--gct-gray-3:232,232,232;--gct-gray-4:221,221,221;--gct-gray-5:198,198,198;--gct-gray-6:166,166,166;--gct-gray-7:139,139,139;--gct-gray-8:119,119,119;--gct-gray-9:94,94,94;--gct-gray-10:71,71,71;--gct-gray-11:56,56,56;--gct-gray-12:36,36,36;--gct-color-primary:rgba(var(--gct-blue-8), 1);--gct-color-primary-hover:rgba(var(--gct-blue-9), 1);--gct-color-primary-active:rgba(var(--gct-blue-10), 1);--gct-color-primary-disabled:rgba(var(--gct-blue-4), 1);--gct-color-primary-light:rgba(var(--gct-blue-1), 1);--gct-color-primary-light-hover:rgba(var(--gct-blue-2), 1);--gct-color-primary-light-active:rgba(var(--gct-blue-3), 1);--gct-color-tertiary:rgba(var(--gct-pr-gray-5), 1);--gct-color-tertiary-hover:rgba(var(--gct-pr-gray-6), 1);--gct-color-tertiary-active:rgba(var(--gct-pr-gray-7), 1);--gct-color-tertiary-light:rgba(var(--gct-pr-gray-1), 1);--gct-color-tertiary-light-hover:rgba(var(--gct-pr-gray-2), 1);--gct-color-tertiary-light-active:rgba(var(--gct-pr-gray-3), 1);--gct-color-info:rgba(var(--gct-blue-8), 1);--gct-color-info-hover:rgba(var(--gct-blue-9), 1);--gct-color-info-active:rgba(var(--gct-blue-10), 1);--gct-color-info-disabled:rgba(var(--gct-blue-4), 1);--gct-color-info-light:rgba(var(--gct-blue-1), 1);--gct-color-info-light-hover:rgba(var(--gct-blue-2), 1);--gct-color-info-light-active:rgba(var(--gct-blue-3), 1);--gct-color-success:rgba(var(--gct-green-6), 1);--gct-color-success-hover:rgba(var(--gct-green-7), 1);--gct-color-success-active:rgba(var(--gct-green-8), 1);--gct-color-success-disabled:rgba(var(--gct-green-3), 1);--gct-color-success-light:rgba(var(--gct-green-1), 1);--gct-color-success-light-hover:rgba(var(--gct-green-2), 1);--gct-color-success-light-active:rgba(var(--gct-green-3), 1);--gct-color-warning:rgba(var(--gct-orange-6), 1);--gct-color-warning-hover:rgba(var(--gct-orange-7), 1);--gct-color-warning-active:rgba(var(--gct-orange-8), 1);--gct-color-warning-disabled:rgba(var(--gct-orange-4), 1);--gct-color-warning-light-default:rgba(var(--gct-orange-1), 1);--gct-color-warning-light-hover:rgba(var(--gct-orange-2), 1);--gct-color-warning-light-active:rgba(var(--gct-orange-3), 1);--gct-color-danger:rgba(var(--gct-red-6), 1);--gct-color-danger-hover:rgba(var(--gct-red-7), 1);--gct-color-danger-active:rgba(var(--gct-red-8), 1);--gct-color-danger-disabled:rgba(var(--gct-red-4), 1);--gct-color-danger-light-default:rgba(var(--gct-red-1), 1);--gct-color-danger-light-hover:rgba(var(--gct-red-2), 1);--gct-color-danger-light-active:rgba(var(--gct-red-3), 1);--gct-color-text-1:rgba(var(--gct-gray-12), 1);--gct-color-text-2:rgba(var(--gct-gray-11), 1);--gct-color-text-3:rgba(var(--gct-gray-10), 1);--gct-color-text-4:rgba(var(--gct-gray-7), 1);--gct-color-text-5:rgba(var(--gct-gray-5), 1);--gct-color-text-6:rgba(var(--gct-blue-6), 1);--gct-color-link:rgba(var(--gct-blue-8), 1);--gct-color-link-hover:rgba(var(--gct-blue-9), 1);--gct-color-link-active:rgba(var(--gct-blue-10), 1);--gct-color-link-visited:rgba(var(--gct-blue-10), 1);--gct-color-link-disabled:rgba(var(--gct-blue-4), 1);--gct-color-bg-1:rgba(var(--gct-pr-gray-1), 1);--gct-color-bg-2:rgba(var(--gct-pr-gray-2), 1);--gct-color-bg-3:rgba(var(--gct-pr-gray-3), 1);--gct-color-bg-4:rgba(var(--gct-gray-1), 1);--gct-color-bg-5:rgba(var(--gct-pr-gray-4), 1);--gct-color-bg-6:rgba(var(--gct-pr-gray-5), 0.5);--gct-color-border:rgba(var(--gct-gray-4), 1);--gct-color-border-hover:rgba(var(--gct-blue-8), 1);--gct-color-border-active:rgba(var(--gct-blue-9), 1);--gct-color-border-disabled:rgba(var(--gct-gray-4), 1);--gct-border-radius-xs:2px;--gct-border-radius-s:4px;--gct-border-radius-m:6px;--gct-border-radius-l:8px;--gct-border-radius-xl:10px;--gct-border-radius-xxl:12px;--gct-border-radius-circle:50%;--gct-border-radius-full:9999px;--gct-border-thickness-s:1px;--gct-border-thickness-m:2px;--gct-border-thickness-l:4px;--gct-border-thickness-xl:6px;--gct-border-thickness-xxl:8px;--gct-icon-xs:8px;--gct-icon-s:12px;--gct-icon-m:12px;--gct-icon-l:12px;--gct-icon-xl:12px;--gct-spacing-1:2px;--gct-spacing-2:4px;--gct-spacing-3:6px;--gct-spacing-4:8px;--gct-spacing-5:10px;--gct-spacing-6:12px;--gct-spacing-7:16px;--gct-spacing-8:20px;--gct-spacing-9:24px;--gct-spacing-10:28px;--gct-spacing-11:32px;--gct-spacing-12:36px;--gct-padding-1:2px;--gct-padding-2:4px;--gct-padding-3:6px;--gct-padding-4:8px;--gct-padding-5:10px;--gct-padding-6:12px;--gct-padding-7:16px;--gct-padding-8:20px;--gct-padding-9:24px;--gct-padding-10:28px;--gct-padding-11:32px;--gct-padding-12:36px;--gct-font-1:10px;--gct-font-2:12px;--gct-font-3:14px;--gct-font-4:16px;--gct-font-5:18px;--gct-font-6:20px;--gct-font-7:22px;--gct-font-8:24px;--gct-font-9:28px;--gct-font-10:32px;--gct-font-11:36px;--gct-font-12:40px;--gct-line-height-1:14px;--gct-line-height-2:16px;--gct-line-height-3:22px;--gct-line-height-4:24px;--gct-line-height-5:26px;--gct-line-height-6:28px;--gct-line-height-7:30px;--gct-line-height-8:32px;--gct-line-height-9:36px;--gct-line-height-10:42px;--gct-line-height-11:48px;--gct-line-height-12:54px}:root.light{--gct-blue-1:246,248,254;--gct-blue-2:236,242,253;--gct-blue-3:222,232,252;--gct-blue-4:205,224,255;--gct-blue-5:168,199,255;--gct-blue-6:128,166,246;--gct-blue-7:86,131,239;--gct-blue-8:49,104,236;--gct-blue-9:42,88,201;--gct-blue-10:35,74,168;--gct-blue-11:28,59,135;--gct-blue-12:22,47,106;--gct-red-1:254,236,221;--gct-red-2:252,197,198;--gct-red-3:250,169,170;--gct-red-4:248,130,132;--gct-red-5:247,106,108;--gct-red-6:245,69,71;--gct-red-7:219,34,28;--gct-red-8:197,31,25;--gct-red-9:164,26,21;--gct-red-10:131,20,17;--gct-red-11:99,15,13;--gct-red-12:77,12,10;--gct-green-1:237,249,239;--gct-green-2:211,241,216;--gct-green-3:176,230,185;--gct-green-4:140,219,152;--gct-green-5:105,208,121;--gct-green-6:72,198,92;--gct-green-7:65,178,83;--gct-green-8:58,158,74;--gct-green-9:54,149,69;--gct-green-10:43,119,55;--gct-green-11:32,89,41;--gct-green-12:25,69,32;--gct-orange-1:255,244,236;--gct-orange-2:255,229,210;--gct-orange-3:255,209,174;--gct-orange-4:255,188,136;--gct-orange-5:255,167,100;--gct-orange-6:255,148,66;--gct-orange-7:230,133,59;--gct-orange-8:204,118,53;--gct-orange-9:191,111,50;--gct-orange-10:153,89,40;--gct-orange-11:115,67,30;--gct-orange-12:89,52,23;--gct-pr-gray-1:252,252,253;--gct-pr-gray-2:249,250,251;--gct-pr-gray-3:247,248,250;--gct-pr-gray-4:230,233,239;--gct-pr-gray-5:202,207,216;--gct-pr-gray-6:169,175,188;--gct-pr-gray-7:134,138,150;--gct-pr-gray-8:113,118,131;--gct-pr-gray-9:90,95,107;--gct-pr-gray-10:67,72,85;--gct-pr-gray-11:44,51,68;--gct-pr-gray-12:30,34,43;--gct-gray-1:255,255,255;--gct-gray-2:243,243,243;--gct-gray-3:232,232,232;--gct-gray-4:221,221,221;--gct-gray-5:198,198,198;--gct-gray-6:166,166,166;--gct-gray-7:139,139,139;--gct-gray-8:119,119,119;--gct-gray-9:94,94,94;--gct-gray-10:71,71,71;--gct-gray-11:56,56,56;--gct-gray-12:36,36,36;--gct-color-primary:rgba(var(--gct-blue-8), 1);--gct-color-primary-hover:rgba(var(--gct-blue-9), 1);--gct-color-primary-active:rgba(var(--gct-blue-10), 1);--gct-color-primary-disabled:rgba(var(--gct-blue-4), 1);--gct-color-primary-light:rgba(var(--gct-blue-1), 1);--gct-color-primary-light-hover:rgba(var(--gct-blue-2), 1);--gct-color-primary-light-active:rgba(var(--gct-blue-3), 1);--gct-color-tertiary:rgba(var(--gct-pr-gray-5), 1);--gct-color-tertiary-hover:rgba(var(--gct-pr-gray-6), 1);--gct-color-tertiary-active:rgba(var(--gct-pr-gray-7), 1);--gct-color-tertiary-light:rgba(var(--gct-pr-gray-1), 1);--gct-color-tertiary-light-hover:rgba(var(--gct-pr-gray-2), 1);--gct-color-tertiary-light-active:rgba(var(--gct-pr-gray-3), 1);--gct-color-info:rgba(var(--gct-blue-8), 1);--gct-color-info-hover:rgba(var(--gct-blue-9), 1);--gct-color-info-active:rgba(var(--gct-blue-10), 1);--gct-color-info-disabled:rgba(var(--gct-blue-4), 1);--gct-color-info-light:rgba(var(--gct-blue-1), 1);--gct-color-info-light-hover:rgba(var(--gct-blue-2), 1);--gct-color-info-light-active:rgba(var(--gct-blue-3), 1);--gct-color-success:rgba(var(--gct-green-6), 1);--gct-color-success-hover:rgba(var(--gct-green-7), 1);--gct-color-success-active:rgba(var(--gct-green-8), 1);--gct-color-success-disabled:rgba(var(--gct-green-3), 1);--gct-color-success-light:rgba(var(--gct-green-1), 1);--gct-color-success-light-hover:rgba(var(--gct-green-2), 1);--gct-color-success-light-active:rgba(var(--gct-green-3), 1);--gct-color-warning:rgba(var(--gct-orange-6), 1);--gct-color-warning-hover:rgba(var(--gct-orange-7), 1);--gct-color-warning-active:rgba(var(--gct-orange-8), 1);--gct-color-warning-disabled:rgba(var(--gct-orange-4), 1);--gct-color-warning-light-default:rgba(var(--gct-orange-1), 1);--gct-color-warning-light-hover:rgba(var(--gct-orange-2), 1);--gct-color-warning-light-active:rgba(var(--gct-orange-3), 1);--gct-color-danger:rgba(var(--gct-red-6), 1);--gct-color-danger-hover:rgba(var(--gct-red-7), 1);--gct-color-danger-active:rgba(var(--gct-red-8), 1);--gct-color-danger-disabled:rgba(var(--gct-red-4), 1);--gct-color-danger-light-default:rgba(var(--gct-red-1), 1);--gct-color-danger-light-hover:rgba(var(--gct-red-2), 1);--gct-color-danger-light-active:rgba(var(--gct-red-3), 1);--gct-color-text-1:rgba(var(--gct-gray-12), 1);--gct-color-text-2:rgba(var(--gct-gray-11), 1);--gct-color-text-3:rgba(var(--gct-gray-10), 1);--gct-color-text-4:rgba(var(--gct-gray-7), 1);--gct-color-text-5:rgba(var(--gct-gray-5), 1);--gct-color-text-6:rgba(var(--gct-blue-6), 1);--gct-color-link:rgba(var(--gct-blue-8), 1);--gct-color-link-hover:rgba(var(--gct-blue-9), 1);--gct-color-link-active:rgba(var(--gct-blue-10), 1);--gct-color-link-visited:rgba(var(--gct-blue-10), 1);--gct-color-link-disabled:rgba(var(--gct-blue-4), 1);--gct-color-bg-1:rgba(var(--gct-pr-gray-1), 1);--gct-color-bg-2:rgba(var(--gct-pr-gray-2), 1);--gct-color-bg-3:rgba(var(--gct-pr-gray-3), 1);--gct-color-bg-4:rgba(var(--gct-gray-1), 1);--gct-color-bg-5:rgba(var(--gct-pr-gray-4), 1);--gct-color-bg-6:rgba(var(--gct-pr-gray-5), 0.5);--gct-color-border:rgba(var(--gct-gray-4), 1);--gct-color-border-hover:rgba(var(--gct-blue-8), 1);--gct-color-border-active:rgba(var(--gct-blue-9), 1);--gct-color-border-disabled:rgba(var(--gct-gray-4), 1);--gct-border-radius-xs:2px;--gct-border-radius-s:4px;--gct-border-radius-m:6px;--gct-border-radius-l:8px;--gct-border-radius-xl:10px;--gct-border-radius-xxl:12px;--gct-border-radius-circle:50%;--gct-border-radius-full:9999px;--gct-border-thickness-s:1px;--gct-border-thickness-m:2px;--gct-border-thickness-l:4px;--gct-border-thickness-xl:6px;--gct-border-thickness-xxl:8px;--gct-icon-xs:8px;--gct-icon-s:12px;--gct-icon-m:12px;--gct-icon-l:12px;--gct-icon-xl:12px;--gct-spacing-1:2px;--gct-spacing-2:4px;--gct-spacing-3:6px;--gct-spacing-4:8px;--gct-spacing-5:10px;--gct-spacing-6:12px;--gct-spacing-7:16px;--gct-spacing-8:20px;--gct-spacing-9:24px;--gct-spacing-10:28px;--gct-spacing-11:32px;--gct-spacing-12:36px;--gct-padding-1:2px;--gct-padding-2:4px;--gct-padding-3:6px;--gct-padding-4:8px;--gct-padding-5:10px;--gct-padding-6:12px;--gct-padding-7:16px;--gct-padding-8:20px;--gct-padding-9:24px;--gct-padding-10:28px;--gct-padding-11:32px;--gct-padding-12:36px;--gct-font-1:10px;--gct-font-2:12px;--gct-font-3:14px;--gct-font-4:16px;--gct-font-5:18px;--gct-font-6:20px;--gct-font-7:22px;--gct-font-8:24px;--gct-font-9:28px;--gct-font-10:32px;--gct-font-11:36px;--gct-font-12:40px;--gct-line-height-1:14px;--gct-line-height-2:16px;--gct-line-height-3:22px;--gct-line-height-4:24px;--gct-line-height-5:26px;--gct-line-height-6:28px;--gct-line-height-7:30px;--gct-line-height-8:32px;--gct-line-height-9:36px;--gct-line-height-10:42px;--gct-line-height-11:48px;--gct-line-height-12:54px}/*# sourceMappingURL=index.min.css.map */
package/dist/index.min.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../style/generic/reset.scss","../style/theme/default/default-theme.scss"],"names":[],"mappings":"AAGA,4EAUA,KACE,iBACA,sBAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,+BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,gBAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,qBACA,oBAOF,yCACE,gBAQF,6BACE,gBACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aC5VF,cAEE,wBACA,wBACA,wBACA,wBACA,uBACA,sBACA,sBACA,sBACA,oBACA,oBAGA,yBACA,yBACA,yBACA,yBACA,wBACA,uBACA,uBACA,uBACA,sBACA,qBAGA,2BACA,2BACA,2BACA,2BACA,0BACA,0BACA,0BACA,0BACA,yBACA,wBAGA,2BACA,2BACA,2BACA,2BACA,0BACA,0BACA,yBACA,yBACA,yBACA,yBAGA,2BACA,2BACA,2BACA,2BACA,0BACA,yBACA,yBACA,yBACA,yBACA,wBAGA,yBACA,yBACA,yBACA,yBACA,wBACA,uBACA,sBACA,sBACA,sBACA,sBAGA,+BACA,+BACA,+BACA,8BACA,8BACA,6BACA,6BACA,4BACA,4BACA,2BAGA,yBACA,yBACA,yBACA,wBACA,wBACA,uBACA,uBACA,uBACA,qBACA,qBAGA,yBACA,yBACA,yBACA,wBACA,wBACA,uBACA,uBACA,uBACA,qBACA,qBAGA,0BACA,0BACA,0BACA,0BACA,wBACA,wBACA,wBACA,wBACA,uBACA,uBAGA,gCACA,gCACA,gCACA,gCACA,+BACA,+BACA,+BACA,8BACA,6BACA,6BAGA,yBACA,yBACA,yBACA,wBACA,wBACA,uBACA,uBACA,sBACA,sBACA,qBAGA,2BACA,2BACA,2BACA,2BACA,0BACA,yBACA,yBACA,yBACA,yBACA,uBAGA,0BACA,0BACA,0BACA,0BACA,yBACA,yBACA,yBACA,yBACA,uBACA,sBAGA,2BACA,2BACA,2BACA,0BACA,0BACA,yBACA,yBACA,yBACA,yBACA,wBAGA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,sBACA,sBACA,sBACA,sBAIA,8BACA,8BACA,8BACA,8BACA,6BACA,6BACA,4BACA,2BACA,2BACA,2BAGA,wBACA,kBAGA,4CACA,4CAGA,oDACA,mDACA,0DACA,yDACA,2DACA,0DACA,6DACA,4DACA,kEACA,gEACA,iEAGA,uDACA,qDACA,6DACA,2DACA,8DACA,4DACA,gEACA,8DACA,qEACA,mEACA,oEAGA,gDACA,oDACA,sDACA,0DACA,uDACA,2DACA,8DACA,4DACA,6DAGA,iDACA,gDACA,uDACA,sDACA,wDACA,uDACA,0DACA,yDACA,+DACA,6DACA,8DAGA,gDACA,mDACA,sDACA,yDACA,uDACA,0DACA,yDACA,4DACA,8DACA,4DACA,6DAGA,iDACA,mDACA,uDACA,yDACA,wDACA,0DACA,+DACA,6DACA,8DAGA,6CACA,kDACA,mDACA,wDACA,oDACA,yDACA,2DACA,yDACA,0DAGA,8CACA,8CACA,8CACA,8CACA,2BACA,8BAGA,2BACA,2BAGA,iDACA,uDACA,wDACA,yDAGA,4CACA,2CACA,2CACA,2CACA,2CACA,mDACA,mDAGA,iDACA,gDACA,iDACA,6CAIA,gDAGA,wDACA,uDACA,mDACA,wDAGA,gDACA,sBACE,iDAIF,2BACA,6BACA,8BACA,8BACA,8BACA,8BACA,8BACA,8BAGA,4BACA,8BACA,2BAGA,oCACA,8BACA,+BACA,+BACA,+BACA,gCAGA,gCACA,kCACA,gCAGA,yBACA,mCACA,yCAGA,iCACA,4BACA,6BACA,4BACA,kCAGA,qBACA,8BACA,8BACA,wBACA,8BACA,wBACA,8BACA,yBACA,+BACA","file":"index.min.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../style/generic/reset.scss","../style/theme/dark/dark-theme.scss","../style/theme/light/light-theme.scss"],"names":[],"mappings":"AAGA,4EAUA,KACE,iBACA,sBAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,+BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,gBAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,qBACA,oBAOF,yCACE,gBAQF,6BACE,gBACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aC5VF,WAEE,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,wBACA,wBACA,uBACA,wBACA,wBACA,wBAGA,wBACA,wBACA,wBACA,wBACA,wBACA,sBACA,sBACA,sBACA,sBACA,uBACA,sBACA,sBAGA,0BACA,0BACA,0BACA,0BACA,0BACA,wBACA,wBACA,wBACA,wBACA,yBACA,wBACA,wBAGA,2BACA,2BACA,2BACA,2BACA,2BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,yBAGA,yBACA,yBACA,yBACA,0BACA,4BACA,4BACA,4BACA,4BACA,4BACA,6BACA,6BACA,6BAGA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,sBACA,uBACA,uBACA,uBAGA,+CACA,qDACA,uDACA,wDACA,qDACA,2DACA,4DAYA,mDACA,yDACA,0DACA,yDACA,+DACA,gEAGA,4CACA,kDACA,oDACA,qDACA,kDACA,wDACA,yDAGA,gDACA,sDACA,uDACA,yDACA,sDACA,4DACA,6DAGA,iDACA,uDACA,wDACA,0DACA,+DACA,6DACA,8DAGA,6CACA,mDACA,oDACA,sDACA,2DACA,yDACA,0DAGA,+CACA,+CACA,+CACA,8CACA,8CACA,8CAGA,4CACA,kDACA,oDACA,qDACA,qDAGA,+CACA,+CACA,+CACA,4CACA,+CACA,iDAGA,8CACA,oDACA,qDACA,uDAGA,2BACA,0BACA,0BACA,0BACA,4BACA,6BACA,+BACA,gCAGA,6BACA,6BACA,6BACA,8BACA,+BAGA,kBACA,kBACA,kBACA,kBACA,mBAGA,oBACA,oBACA,oBACA,oBACA,qBACA,qBACA,qBACA,qBACA,qBACA,sBACA,sBACA,sBAGA,oBACA,oBACA,oBACA,oBACA,qBACA,qBACA,qBACA,qBACA,qBACA,sBACA,sBACA,sBAGA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,mBACA,mBACA,mBAGA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,0BACA,0BACA,0BC9PF,YAEE,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,wBACA,wBACA,uBACA,wBACA,wBACA,wBAGA,wBACA,wBACA,wBACA,wBACA,wBACA,sBACA,sBACA,sBACA,sBACA,uBACA,sBACA,sBAGA,0BACA,0BACA,0BACA,0BACA,0BACA,wBACA,wBACA,wBACA,wBACA,yBACA,wBACA,wBAGA,2BACA,2BACA,2BACA,2BACA,2BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,yBAGA,4BACA,4BACA,4BACA,4BACA,4BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BAGA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,sBACA,uBACA,uBACA,uBAGA,+CACA,qDACA,uDACA,wDACA,qDACA,2DACA,4DAYA,mDACA,yDACA,0DACA,yDACA,+DACA,gEAGA,4CACA,kDACA,oDACA,qDACA,kDACA,wDACA,yDAGA,gDACA,sDACA,uDACA,yDACA,sDACA,4DACA,6DAGA,iDACA,uDACA,wDACA,0DACA,+DACA,6DACA,8DAGA,6CACA,mDACA,oDACA,sDACA,2DACA,yDACA,0DAGA,+CACA,+CACA,+CACA,8CACA,8CACA,8CAGA,4CACA,kDACA,oDACA,qDACA,qDAGA,+CACA,+CACA,+CACA,4CACA,+CACA,iDAGA,8CACA,oDACA,qDACA,uDAGA,2BACA,0BACA,0BACA,0BACA,4BACA,6BACA,+BACA,gCAGA,6BACA,6BACA,6BACA,8BACA,+BAGA,kBACA,kBACA,kBACA,kBACA,mBAGA,oBACA,oBACA,oBACA,oBACA,qBACA,qBACA,qBACA,qBACA,qBACA,sBACA,sBACA,sBAGA,oBACA,oBACA,oBACA,oBACA,qBACA,qBACA,qBACA,qBACA,qBACA,sBACA,sBACA,sBAGA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBACA,mBACA,mBACA,mBAGA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,0BACA,0BACA","file":"index.min.css"}
package/dist/index.system.min.js ADDED
@@ -0,0 +1 @@
1
+ var k=Object.defineProperty;var $=(l,u,h)=>u in l?k(l,u,{enumerable:!0,configurable:!0,writable:!0,value:h}):l[u]=h;var b=(l,u,h)=>$(l,typeof u!="symbol"?u+"":u,h);System.register(["vue"],function(l,u){"use strict";var h,t,i,a,m,v;return{setters:[r=>{h=r.defineComponent,t=r.createVNode,i=r.resolveComponent,a=r.createTextVNode,m=r.ref,v=r.watch}],execute:function(){const r="gct",f="is-";function o(c,s,e,n,d){let p=`${c}-${s}`;return e&&(p+=`-${e}`),n&&(p+=`__${n}`),d&&(p+=`--${d}`),p}class E{constructor(s,e){b(this,"namespace");this.block=s,this.namespace=e||r}b(s=""){return o(this.namespace,this.block,s,"","")}e(s){return s?o(this.namespace,this.block,"",s,""):""}m(s){return s?o(this.namespace,this.block,"","",s):""}be(s,e){return s&&e?o(this.namespace,this.block,s,e,""):""}em(s,e){return s&&e?o(this.namespace,this.block,"",s,e):""}bm(s,e){return s&&e?o(this.namespace,this.block,s,"",e):""}bem(s,e,n){return s&&e&&n?o(this.namespace,this.block,s,e,n):""}is(s,e){return s&&e?`${f}${s}`:""}cssVar(s){const e={};for(const n in s)s[n]&&(e[this.cssVarName(n)]=s[n]);return e}cssVarBlock(s){const e={};for(const n in s)s[n]&&(e[this.cssVarBlockName(n)]=s[n]);return e}cssVarName(s){return`--${this.namespace}-${s}`}cssVarBlockName(s){return`--${this.namespace}-${this.block}-${s}`}}const y=h({name:"ThemeExample",setup(){const c=new E("theme-example"),s=m("light"),e=document.getElementsByTagName("html").item(0);return v(s,(n,d)=>{e&&(e.classList.remove(d),e.classList.add(n))}),{ns:c,theme:s}},render(){return t("div",{class:this.ns.b()},[t("div",{class:this.ns.e("action")},[t(i("a-radio-group"),{value:this.theme,"onUpdate:value":c=>this.theme=c,"button-style":"solid"},{default:()=>[t(i("a-radio-button"),{value:"light"},{default:()=>[a("亮色")]}),t(i("a-radio-button"),{value:"dark"},{default:()=>[a("暗色")]})]})]),t("div",{class:this.ns.e("block")},[t("div",{class:this.ns.e("header")},[t("div",{class:this.ns.e("title")},[a("主题色")])]),t("div",{class:this.ns.e("container")},[t("div",{class:this.ns.e("primary")},[t(i("a-button"),{type:"primary"},{default:()=>[a("主题色")]})]),t("div",{class:this.ns.e("info")},[t(i("a-button"),{type:"primary"},{default:()=>[a("信息色")]})]),t("div",{class:this.ns.e("success")},[t(i("a-button"),{type:"primary"},{default:()=>[a("成功色")]})]),t("div",{class:this.ns.e("warning")},[t(i("a-button"),{type:"primary"},{default:()=>[a("警示色")]})]),t("div",{class:this.ns.e("danger")},[t(i("a-button"),{type:"primary"},{default:()=>[a("危险色")]})])])]),t("div",{class:this.ns.e("block")},[t("div",{class:this.ns.e("header")},[t("div",{class:this.ns.e("title")},[a("主题色(禁用)")])]),t("div",{class:this.ns.e("container")},[t("div",{class:this.ns.e("primary")},[t(i("a-button"),{type:"primary",disabled:!0},{default:()=>[a("主题色")]})]),t("div",{class:this.ns.e("info")},[t(i("a-button"),{type:"primary",disabled:!0},{default:()=>[a("信息色")]})]),t("div",{class:this.ns.e("success")},[t(i("a-button"),{type:"primary",disabled:!0},{default:()=>[a("成功色")]})]),t("div",{class:this.ns.e("warning")},[t(i("a-button"),{type:"primary",disabled:!0},{default:()=>[a("警示色")]})]),t("div",{class:this.ns.e("danger")},[t(i("a-button"),{type:"primary",disabled:!0},{default:()=>[a("危险色")]})])])])])}}),g=l("default",{install(c){c.component(y.name,y)}})}}});
package/dist/scss.css ADDED
@@ -0,0 +1 @@
1
+ .gct-theme-example{height:100%;background-color:var(--gct-color-bg-1);padding:var(--gct-padding-4)}.gct-theme-example__action .ant-radio-button-wrapper-checked:focus-visible{outline:0}.gct-theme-example__action .ant-radio-button-wrapper-checked:focus-within{box-shadow:0}.gct-theme-example__action .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within{box-shadow:none}.gct-theme-example__header{font-size:32px;line-height:42px;color:rgb(var(--gct-pr-gray-12));margin-bottom:var(--gct-spacing-4)}.gct-theme-example__container{display:flex;gap:8px}.gct-theme-example__primary .ant-btn-primary{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-primary);background:var(--gct-color-primary)}.gct-theme-example__primary .ant-btn-primary:hover{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-primary-hover);background:var(--gct-color-primary-hover)}.gct-theme-example__primary .ant-btn-primary:disabled{border-color:var(--gct-color-primary-disabled);background:var(--gct-color-primary-disabled)}.gct-theme-example__primary .ant-btn-primary:not([disabled]):active{border-color:var(--gct-color-primary-active);background:var(--gct-color-primary-active)}.gct-theme-example__info .ant-btn-primary{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-info);background:var(--gct-color-info)}.gct-theme-example__info .ant-btn-primary:hover{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-info-hover);background:var(--gct-color-info-hover)}.gct-theme-example__info .ant-btn-primary:disabled{border-color:var(--gct-color-info-disabled);background:var(--gct-color-info-disabled)}.gct-theme-example__info .ant-btn-primary:not([disabled]):active{border-color:var(--gct-color-info-active);background:var(--gct-color-info-active)}.gct-theme-example__success .ant-btn-primary{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-success);background:var(--gct-color-success)}.gct-theme-example__success .ant-btn-primary:hover{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-success-hover);background:var(--gct-color-success-hover)}.gct-theme-example__success .ant-btn-primary:disabled{border-color:var(--gct-color-success-disabled);background:var(--gct-color-success-disabled)}.gct-theme-example__success .ant-btn-primary:not([disabled]):active{border-color:var(--gct-color-success-active);background:var(--gct-color-success-active)}.gct-theme-example__warning .ant-btn-primary{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-warning);background:var(--gct-color-warning)}.gct-theme-example__warning .ant-btn-primary:hover{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-warning-hover);background:var(--gct-color-warning-hover)}.gct-theme-example__warning .ant-btn-primary:disabled{border-color:var(--gct-color-warning-disabled);background:var(--gct-color-warning-disabled)}.gct-theme-example__warning .ant-btn-primary:not([disabled]):active{border-color:var(--gct-color-warning-active);background:var(--gct-color-warning-active)}.gct-theme-example__danger .ant-btn-primary{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-danger);background:var(--gct-color-danger)}.gct-theme-example__danger .ant-btn-primary:hover{color:rgb(var(--gct-gray-1));border-color:var(--gct-color-danger-hover);background:var(--gct-color-danger-hover)}.gct-theme-example__danger .ant-btn-primary:disabled{border-color:var(--gct-color-danger-disabled);background:var(--gct-color-danger-disabled)}.gct-theme-example__danger .ant-btn-primary:not([disabled]):active{border-color:var(--gct-color-danger-active);background:var(--gct-color-danger-active)}
package/package.json CHANGED
@@ -1,10 +1,18 @@
1
1
  {
2
2
  "name": "@gct-paas/scss",
3
- "version": "0.0.1-dev.15",
3
+ "version": "0.0.1-dev.16",
4
4
  "type": "module",
5
5
  "description": "paas 平台样式框架包",
6
- "main": "./src/index.ts",
6
+ "main": "dist/index.min.cjs",
7
+ "module": "es/index.mjs",
8
+ "types": "es/index.d.ts",
9
+ "system": "dist/index.system.min.js",
7
10
  "exports": {
11
+ ".": {
12
+ "types": "./es/index.d.ts",
13
+ "import": "./es/index.mjs",
14
+ "require": "./dist/index.min.cjs"
15
+ },
8
16
  "./style/global.scss": "./style/global.scss",
9
17
  "./style/index.scss": "./style/index.scss",
10
18
  "./style/global": "./style/global.scss",
@@ -30,7 +38,8 @@
30
38
  "license": "MIT",
31
39
  "author": "gct",
32
40
  "scripts": {
33
- "build": "sass style/index.scss dist/index.min.css --style=compressed",
41
+ "dev": "rollup -c -w --environment=NODE_ENV:development",
42
+ "build": "rollup -c --environment=NODE_ENV:production && vite build --mode production --config vite.config.ts && sass style/index.scss dist/index.min.css --style=compressed",
34
43
  "publish:next": "npm run build && npm publish --access public --tag=next --registry=https://registry.npmjs.org/",
35
44
  "publish:dev": "npm run build && npm publish --access public --tag=dev --registry=https://registry.npmjs.org/",
36
45
  "publish:alpha": "npm run build && npm publish --access public --tag=alpha --registry=https://registry.npmjs.org/",
@@ -39,7 +48,10 @@
39
48
  },
40
49
  "dependencies": {
41
50
  "normalize.css": "^8.0.1",
51
+ "vue": "^3.5.13"
52
+ },
53
+ "devDependencies": {
42
54
  "sass": "^1.84.0"
43
55
  },
44
- "gitHead": "cff2e1934fb89e6ca59da3baa5281d34b695ded4"
56
+ "gitHead": "3f734811e73d13f92b0ef823fa0b9866da212d9c"
45
57
  }
package/style/theme/dark/dark-theme.scss ADDED
@@ -0,0 +1,258 @@
1
+ @use '../../global.scss' as *;
2
+
3
+ :root.dark {
4
+ // 主色
5
+ #{getCssVarName(blue, 1)}: 246, 248, 254;
6
+ #{getCssVarName(blue, 2)}: 236, 242, 253;
7
+ #{getCssVarName(blue, 3)}: 222, 232, 252;
8
+ #{getCssVarName(blue, 4)}: 205, 224, 255;
9
+ #{getCssVarName(blue, 5)}: 168, 199, 255;
10
+ #{getCssVarName(blue, 6)}: 128, 166, 246;
11
+ #{getCssVarName(blue, 7)}: 86, 131, 239;
12
+ #{getCssVarName(blue, 8)}: 49, 104, 236;
13
+ #{getCssVarName(blue, 9)}: 42, 88, 201;
14
+ #{getCssVarName(blue, 10)}: 35, 74, 168;
15
+ #{getCssVarName(blue, 11)}: 28, 59, 135;
16
+ #{getCssVarName(blue, 12)}: 22, 47, 106;
17
+
18
+ // 危险色
19
+ #{getCssVarName(red, 1)}: 254, 236, 221;
20
+ #{getCssVarName(red, 2)}: 252, 197, 198;
21
+ #{getCssVarName(red, 3)}: 250, 169, 170;
22
+ #{getCssVarName(red, 4)}: 248, 130, 132;
23
+ #{getCssVarName(red, 5)}: 247, 106, 108;
24
+ #{getCssVarName(red, 6)}: 245, 69, 71;
25
+ #{getCssVarName(red, 7)}: 219, 34, 28;
26
+ #{getCssVarName(red, 8)}: 197, 31, 25;
27
+ #{getCssVarName(red, 9)}: 164, 26, 21;
28
+ #{getCssVarName(red, 10)}: 131, 20, 17;
29
+ #{getCssVarName(red, 11)}: 99, 15, 13;
30
+ #{getCssVarName(red, 12)}: 77, 12, 10;
31
+
32
+ // 成功色
33
+ #{getCssVarName(green, 1)}: 237, 249, 239;
34
+ #{getCssVarName(green, 2)}: 211, 241, 216;
35
+ #{getCssVarName(green, 3)}: 176, 230, 185;
36
+ #{getCssVarName(green, 4)}: 140, 219, 152;
37
+ #{getCssVarName(green, 5)}: 105, 208, 121;
38
+ #{getCssVarName(green, 6)}: 72, 198, 92;
39
+ #{getCssVarName(green, 7)}: 65, 178, 83;
40
+ #{getCssVarName(green, 8)}: 58, 158, 74;
41
+ #{getCssVarName(green, 9)}: 54, 149, 69;
42
+ #{getCssVarName(green, 10)}: 43, 119, 55;
43
+ #{getCssVarName(green, 11)}: 32, 89, 41;
44
+ #{getCssVarName(green, 12)}: 25, 69, 32;
45
+
46
+ // 警告色
47
+ #{getCssVarName(orange, 1)}: 255, 244, 236;
48
+ #{getCssVarName(orange, 2)}: 255, 229, 210;
49
+ #{getCssVarName(orange, 3)}: 255, 209, 174;
50
+ #{getCssVarName(orange, 4)}: 255, 188, 136;
51
+ #{getCssVarName(orange, 5)}: 255, 167, 100;
52
+ #{getCssVarName(orange, 6)}: 255, 148, 66;
53
+ #{getCssVarName(orange, 7)}: 230, 133, 59;
54
+ #{getCssVarName(orange, 8)}: 204, 118, 53;
55
+ #{getCssVarName(orange, 9)}: 191, 111, 50;
56
+ #{getCssVarName(orange, 10)}: 153, 89, 40;
57
+ #{getCssVarName(orange, 11)}: 115, 67, 30;
58
+ #{getCssVarName(orange, 12)}: 89, 52, 23;
59
+
60
+ // 品牌灰度
61
+ #{getCssVarName(pr-gray, 1)}: 30, 34, 43;
62
+ #{getCssVarName(pr-gray, 2)}: 46, 49, 56;
63
+ #{getCssVarName(pr-gray, 3)}: 67, 72, 85;
64
+ #{getCssVarName(pr-gray, 4)}: 90, 95, 107;
65
+ #{getCssVarName(pr-gray, 5)}: 113, 118, 131;
66
+ #{getCssVarName(pr-gray, 6)}: 134, 138, 150;
67
+ #{getCssVarName(pr-gray, 7)}: 169, 175, 188;
68
+ #{getCssVarName(pr-gray, 8)}: 202, 207, 216;
69
+ #{getCssVarName(pr-gray, 9)}: 143, 150, 163;
70
+ #{getCssVarName(pr-gray, 10)}: 242, 245, 248;
71
+ #{getCssVarName(pr-gray, 11)}: 249, 250, 251;
72
+ #{getCssVarName(pr-gray, 12)}: 252, 252, 253;
73
+
74
+ // 灰色
75
+ #{getCssVarName(gray, 1)}: 255, 255, 255;
76
+ #{getCssVarName(gray, 2)}: 243, 243, 243;
77
+ #{getCssVarName(gray, 3)}: 232, 232, 232;
78
+ #{getCssVarName(gray, 4)}: 221, 221, 221;
79
+ #{getCssVarName(gray, 5)}: 198, 198, 198;
80
+ #{getCssVarName(gray, 6)}: 166, 166, 166;
81
+ #{getCssVarName(gray, 7)}: 139, 139, 139;
82
+ #{getCssVarName(gray, 8)}: 119, 119, 119;
83
+ #{getCssVarName(gray, 9)}: 94, 94, 94;
84
+ #{getCssVarName(gray, 10)}: 71, 71, 71;
85
+ #{getCssVarName(gray, 11)}: 56, 56, 56;
86
+ #{getCssVarName(gray, 12)}: 36, 36, 36;
87
+
88
+ // 主要颜色
89
+ #{getCssVarName(color, primary)}: rgba(var(#{getCssVarName(blue, 8)}), 1);
90
+ #{getCssVarName(color, primary, hover)}: rgba(var(#{getCssVarName(blue, 9)}), 1);
91
+ #{getCssVarName(color, primary, active)}: rgba(var(#{getCssVarName(blue, 10)}), 1);
92
+ #{getCssVarName(color, primary, disabled)}: rgba(var(#{getCssVarName(blue, 4)}), 1);
93
+ #{getCssVarName(color, primary, light)}: rgba(var(#{getCssVarName(blue, 1)}), 1);
94
+ #{getCssVarName(color, primary, light, hover)}: rgba(var(#{getCssVarName(blue, 2)}), 1);
95
+ #{getCssVarName(color, primary, light, active)}: rgba(var(#{getCssVarName(blue, 3)}), 1);
96
+
97
+ // 第二颜色
98
+ // #{getCssVarName(color, secondary)}: rgba(var(#{getCssVarName(pr-gray, 10)}), 1);
99
+ // #{getCssVarName(color, secondary, hover)}: rgba(var(#{getCssVarName(pr-gray, 11)}), 1);
100
+ // #{getCssVarName(color, secondary, active)}: rgba(var(#{getCssVarName(pr-gray, 12)}), 1);
101
+ // #{getCssVarName(color, secondary, disabled)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
102
+ // #{getCssVarName(color, secondary, light)}: rgba(var(#{getCssVarName(pr-gray, 4)}), 1);
103
+ // #{getCssVarName(color, secondary, light, hover)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
104
+ // #{getCssVarName(color, secondary, light, active)}: rgba(var(#{getCssVarName(pr-gray, 6)}), 1);
105
+
106
+ // 第三颜色
107
+ #{getCssVarName(color, tertiary)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
108
+ #{getCssVarName(color, tertiary, hover)}: rgba(var(#{getCssVarName(pr-gray, 6)}), 1);
109
+ #{getCssVarName(color, tertiary, active)}: rgba(var(#{getCssVarName(pr-gray, 7)}), 1);
110
+ #{getCssVarName(color, tertiary, light)}: rgba(var(#{getCssVarName(pr-gray, 1)}), 1);
111
+ #{getCssVarName(color, tertiary, light, hover)}: rgba(var(#{getCssVarName(pr-gray, 2)}), 1);
112
+ #{getCssVarName(color, tertiary, light, active)}: rgba(var(#{getCssVarName(pr-gray, 3)}), 1);
113
+
114
+ // 信息色
115
+ #{getCssVarName(color, info)}: rgba(var(#{getCssVarName(blue, 8)}), 1);
116
+ #{getCssVarName(color, info, hover)}: rgba(var(#{getCssVarName(blue, 9)}), 1);
117
+ #{getCssVarName(color, info, active)}: rgba(var(#{getCssVarName(blue, 10)}), 1);
118
+ #{getCssVarName(color, info, disabled)}: rgba(var(#{getCssVarName(blue, 4)}), 1);
119
+ #{getCssVarName(color, info, light)}: rgba(var(#{getCssVarName(blue, 1)}), 1);
120
+ #{getCssVarName(color, info, light, hover)}: rgba(var(#{getCssVarName(blue, 2)}), 1);
121
+ #{getCssVarName(color, info, light, active)}: rgba(var(#{getCssVarName(blue, 3)}), 1);
122
+
123
+ // 成功色
124
+ #{getCssVarName(color, success)}: rgba(var(#{getCssVarName(green, 6)}), 1);
125
+ #{getCssVarName(color, success, hover)}: rgba(var(#{getCssVarName(green, 7)}), 1);
126
+ #{getCssVarName(color, success, active)}: rgba(var(#{getCssVarName(green, 8)}), 1);
127
+ #{getCssVarName(color, success, disabled)}: rgba(var(#{getCssVarName(green, 3)}), 1);
128
+ #{getCssVarName(color, success, light)}: rgba(var(#{getCssVarName(green, 1)}), 1);
129
+ #{getCssVarName(color, success, light, hover)}: rgba(var(#{getCssVarName(green, 2)}), 1);
130
+ #{getCssVarName(color, success, light, active)}: rgba(var(#{getCssVarName(green, 3)}), 1);
131
+
132
+ // 警示色
133
+ #{getCssVarName(color, warning)}: rgba(var(#{getCssVarName(orange, 6)}),1);
134
+ #{getCssVarName(color, warning, hover)}: rgba(var(#{getCssVarName(orange, 7)}),1);
135
+ #{getCssVarName(color, warning, active)}: rgba(var(#{getCssVarName(orange, 8)}),1);
136
+ #{getCssVarName(color, warning, disabled)}: rgba(var(#{getCssVarName(orange, 4)}),1);
137
+ #{getCssVarName(color, warning, light, default)}: rgba(var(#{getCssVarName(orange, 1)}),1);
138
+ #{getCssVarName(color, warning, light, hover)}: rgba(var(#{getCssVarName(orange, 2)}),1);
139
+ #{getCssVarName(color, warning, light, active)}: rgba(var(#{getCssVarName(orange, 3)}),1);
140
+
141
+ // 危险色
142
+ #{getCssVarName(color, danger)}: rgba(var(#{getCssVarName(red, 6)}),1);
143
+ #{getCssVarName(color, danger, hover)}: rgba(var(#{getCssVarName(red, 7)}),1);
144
+ #{getCssVarName(color, danger, active)}: rgba(var(#{getCssVarName(red, 8)}),1);
145
+ #{getCssVarName(color, danger, disabled)}: rgba(var(#{getCssVarName(red, 4)}),1);
146
+ #{getCssVarName(color, danger, light, default)}: rgba(var(#{getCssVarName(red, 1)}),1);
147
+ #{getCssVarName(color, danger, light, hover)}: rgba(var(#{getCssVarName(red, 2)}),1);
148
+ #{getCssVarName(color, danger, light, active)}: rgba(var(#{getCssVarName(red, 3)}),1);
149
+
150
+ // 文本/图标颜色
151
+ #{getCssVarName(color, text, 1)}: rgba(var(#{getCssVarName(gray, 12)}),1);
152
+ #{getCssVarName(color, text, 2)}: rgba(var(#{getCssVarName(gray, 11)}),1);
153
+ #{getCssVarName(color, text, 3)}: rgba(var(#{getCssVarName(gray, 10)}),1);
154
+ #{getCssVarName(color, text, 4)}: rgba(var(#{getCssVarName(gray, 7)}),1);
155
+ #{getCssVarName(color, text, 5)}: rgba(var(#{getCssVarName(gray, 5)}),1);
156
+ #{getCssVarName(color, text, 6)}: rgba(var(#{getCssVarName(blue, 6)}),1);
157
+
158
+ // 链接颜色
159
+ #{getCssVarName(color, link)}: rgba(var(#{getCssVarName(blue, 8)}),1);
160
+ #{getCssVarName(color, link, hover)}: rgba(var(#{getCssVarName(blue, 9)}),1);
161
+ #{getCssVarName(color, link, active)}: rgba(var(#{getCssVarName(blue, 10)}),1);
162
+ #{getCssVarName(color, link, visited)}: rgba(var(#{getCssVarName(blue, 10)}),1);
163
+ #{getCssVarName(color, link, disabled)}: rgba(var(#{getCssVarName(blue, 4)}),1);
164
+
165
+ // 背景色
166
+ #{getCssVarName(color, bg, 1)}: rgba(var(#{getCssVarName(pr-gray, 1)}),1);
167
+ #{getCssVarName(color, bg, 2)}: rgba(var(#{getCssVarName(pr-gray, 2)}),1);
168
+ #{getCssVarName(color, bg, 3)}: rgba(var(#{getCssVarName(pr-gray, 3)}),1);
169
+ #{getCssVarName(color, bg, 4)}: rgba(var(#{getCssVarName(gray, 1)}),1);
170
+ #{getCssVarName(color, bg, 5)}: rgba(var(#{getCssVarName(pr-gray, 4)}),1);
171
+ #{getCssVarName(color, bg, 6)}: rgba(var(#{getCssVarName(pr-gray, 5)}),0.5);
172
+
173
+ // 描边色
174
+ #{getCssVarName(color, border)}: rgba(var(#{getCssVarName(gray, 4)}),1);
175
+ #{getCssVarName(color, border, hover)}: rgba(var(#{getCssVarName(blue, 8)}),1);
176
+ #{getCssVarName(color, border, active)}: rgba(var(#{getCssVarName(blue, 9)}),1);
177
+ #{getCssVarName(color, border, disabled)}: rgba(var(#{getCssVarName(gray, 4)}),1);
178
+
179
+ // 圆角
180
+ #{getCssVarName(border, radius, xs)}: 2px;
181
+ #{getCssVarName(border, radius, s)}: 4px;
182
+ #{getCssVarName(border, radius, m)}: 6px;
183
+ #{getCssVarName(border, radius, l)}: 8px;
184
+ #{getCssVarName(border, radius, xl)}: 10px;
185
+ #{getCssVarName(border, radius, xxl)}: 12px;
186
+ #{getCssVarName(border, radius, circle)}: 50%;
187
+ #{getCssVarName(border, radius, full)}: 9999px;
188
+
189
+ // 描边尺寸
190
+ #{getCssVarName(border, thickness, s)}: 1px;
191
+ #{getCssVarName(border, thickness, m)}: 2px;
192
+ #{getCssVarName(border, thickness, l)}: 4px;
193
+ #{getCssVarName(border, thickness, xl)}: 6px;
194
+ #{getCssVarName(border, thickness, xxl)}: 8px;
195
+
196
+ // 图标尺寸
197
+ #{getCssVarName(icon, xs)}: 8px;
198
+ #{getCssVarName(icon, s)}: 12px;
199
+ #{getCssVarName(icon, m)}: 12px;
200
+ #{getCssVarName(icon, l)}: 12px;
201
+ #{getCssVarName(icon, xl)}: 12px;
202
+
203
+ // 间距
204
+ #{getCssVarName(spacing, 1)}: 2px;
205
+ #{getCssVarName(spacing, 2)}: 4px;
206
+ #{getCssVarName(spacing, 3)}: 6px;
207
+ #{getCssVarName(spacing, 4)}: 8px;
208
+ #{getCssVarName(spacing, 5)}: 10px;
209
+ #{getCssVarName(spacing, 6)}: 12px;
210
+ #{getCssVarName(spacing, 7)}: 16px;
211
+ #{getCssVarName(spacing, 8)}: 20px;
212
+ #{getCssVarName(spacing, 9)}: 24px;
213
+ #{getCssVarName(spacing, 10)}: 28px;
214
+ #{getCssVarName(spacing, 11)}: 32px;
215
+ #{getCssVarName(spacing, 12)}: 36px;
216
+
217
+ // padding
218
+ #{getCssVarName(padding, 1)}: 2px;
219
+ #{getCssVarName(padding, 2)}: 4px;
220
+ #{getCssVarName(padding, 3)}: 6px;
221
+ #{getCssVarName(padding, 4)}: 8px;
222
+ #{getCssVarName(padding, 5)}: 10px;
223
+ #{getCssVarName(padding, 6)}: 12px;
224
+ #{getCssVarName(padding, 7)}: 16px;
225
+ #{getCssVarName(padding, 8)}: 20px;
226
+ #{getCssVarName(padding, 9)}: 24px;
227
+ #{getCssVarName(padding, 10)}: 28px;
228
+ #{getCssVarName(padding, 11)}: 32px;
229
+ #{getCssVarName(padding, 12)}: 36px;
230
+
231
+ // 字体大小
232
+ #{getCssVarName(font, 1)}: 10px;
233
+ #{getCssVarName(font, 2)}: 12px;
234
+ #{getCssVarName(font, 3)}: 14px;
235
+ #{getCssVarName(font, 4)}: 16px;
236
+ #{getCssVarName(font, 5)}: 18px;
237
+ #{getCssVarName(font, 6)}: 20px;
238
+ #{getCssVarName(font, 7)}: 22px;
239
+ #{getCssVarName(font, 8)}: 24px;
240
+ #{getCssVarName(font, 9)}: 28px;
241
+ #{getCssVarName(font, 10)}: 32px;
242
+ #{getCssVarName(font, 11)}: 36px;
243
+ #{getCssVarName(font, 12)}: 40px;
244
+
245
+ // line-height ps: 和字体大小一一对应
246
+ #{getCssVarName(line, height, 1)}: 14px;
247
+ #{getCssVarName(line, height, 2)}: 16px;
248
+ #{getCssVarName(line, height, 3)}: 22px;
249
+ #{getCssVarName(line, height, 4)}: 24px;
250
+ #{getCssVarName(line, height, 5)}: 26px;
251
+ #{getCssVarName(line, height, 6)}: 28px;
252
+ #{getCssVarName(line, height, 7)}: 30px;
253
+ #{getCssVarName(line, height, 8)}: 32px;
254
+ #{getCssVarName(line, height, 9)}: 36px;
255
+ #{getCssVarName(line, height, 10)}: 42px;
256
+ #{getCssVarName(line, height, 11)}: 48px;
257
+ #{getCssVarName(line, height, 12)}: 54px;
258
+ }
package/style/theme/index.scss CHANGED
@@ -1 +1,2 @@
1
- @forward './default/default-theme';
1
+ @forward './dark/dark-theme';
2
+ @forward './light/light-theme';
package/style/theme/light/light-theme.scss ADDED
@@ -0,0 +1,258 @@
1
+ @use '../../global.scss' as *;
2
+
3
+ :root.light {
4
+ // 主色
5
+ #{getCssVarName(blue, 1)}: 246, 248, 254;
6
+ #{getCssVarName(blue, 2)}: 236, 242, 253;
7
+ #{getCssVarName(blue, 3)}: 222, 232, 252;
8
+ #{getCssVarName(blue, 4)}: 205, 224, 255;
9
+ #{getCssVarName(blue, 5)}: 168, 199, 255;
10
+ #{getCssVarName(blue, 6)}: 128, 166, 246;
11
+ #{getCssVarName(blue, 7)}: 86, 131, 239;
12
+ #{getCssVarName(blue, 8)}: 49, 104, 236;
13
+ #{getCssVarName(blue, 9)}: 42, 88, 201;
14
+ #{getCssVarName(blue, 10)}: 35, 74, 168;
15
+ #{getCssVarName(blue, 11)}: 28, 59, 135;
16
+ #{getCssVarName(blue, 12)}: 22, 47, 106;
17
+
18
+ // 危险色
19
+ #{getCssVarName(red, 1)}: 254, 236, 221;
20
+ #{getCssVarName(red, 2)}: 252, 197, 198;
21
+ #{getCssVarName(red, 3)}: 250, 169, 170;
22
+ #{getCssVarName(red, 4)}: 248, 130, 132;
23
+ #{getCssVarName(red, 5)}: 247, 106, 108;
24
+ #{getCssVarName(red, 6)}: 245, 69, 71;
25
+ #{getCssVarName(red, 7)}: 219, 34, 28;
26
+ #{getCssVarName(red, 8)}: 197, 31, 25;
27
+ #{getCssVarName(red, 9)}: 164, 26, 21;
28
+ #{getCssVarName(red, 10)}: 131, 20, 17;
29
+ #{getCssVarName(red, 11)}: 99, 15, 13;
30
+ #{getCssVarName(red, 12)}: 77, 12, 10;
31
+
32
+ // 成功色
33
+ #{getCssVarName(green, 1)}: 237, 249, 239;
34
+ #{getCssVarName(green, 2)}: 211, 241, 216;
35
+ #{getCssVarName(green, 3)}: 176, 230, 185;
36
+ #{getCssVarName(green, 4)}: 140, 219, 152;
37
+ #{getCssVarName(green, 5)}: 105, 208, 121;
38
+ #{getCssVarName(green, 6)}: 72, 198, 92;
39
+ #{getCssVarName(green, 7)}: 65, 178, 83;
40
+ #{getCssVarName(green, 8)}: 58, 158, 74;
41
+ #{getCssVarName(green, 9)}: 54, 149, 69;
42
+ #{getCssVarName(green, 10)}: 43, 119, 55;
43
+ #{getCssVarName(green, 11)}: 32, 89, 41;
44
+ #{getCssVarName(green, 12)}: 25, 69, 32;
45
+
46
+ // 警告色
47
+ #{getCssVarName(orange, 1)}: 255, 244, 236;
48
+ #{getCssVarName(orange, 2)}: 255, 229, 210;
49
+ #{getCssVarName(orange, 3)}: 255, 209, 174;
50
+ #{getCssVarName(orange, 4)}: 255, 188, 136;
51
+ #{getCssVarName(orange, 5)}: 255, 167, 100;
52
+ #{getCssVarName(orange, 6)}: 255, 148, 66;
53
+ #{getCssVarName(orange, 7)}: 230, 133, 59;
54
+ #{getCssVarName(orange, 8)}: 204, 118, 53;
55
+ #{getCssVarName(orange, 9)}: 191, 111, 50;
56
+ #{getCssVarName(orange, 10)}: 153, 89, 40;
57
+ #{getCssVarName(orange, 11)}: 115, 67, 30;
58
+ #{getCssVarName(orange, 12)}: 89, 52, 23;
59
+
60
+ // 品牌灰度
61
+ #{getCssVarName(pr-gray, 1)}: 252, 252, 253;
62
+ #{getCssVarName(pr-gray, 2)}: 249, 250, 251;
63
+ #{getCssVarName(pr-gray, 3)}: 247, 248, 250;
64
+ #{getCssVarName(pr-gray, 4)}: 230, 233, 239;
65
+ #{getCssVarName(pr-gray, 5)}: 202, 207, 216;
66
+ #{getCssVarName(pr-gray, 6)}: 169, 175, 188;
67
+ #{getCssVarName(pr-gray, 7)}: 134, 138, 150;
68
+ #{getCssVarName(pr-gray, 8)}: 113, 118, 131;
69
+ #{getCssVarName(pr-gray, 9)}: 90, 95, 107;
70
+ #{getCssVarName(pr-gray, 10)}: 67, 72, 85;
71
+ #{getCssVarName(pr-gray, 11)}: 44, 51, 68;
72
+ #{getCssVarName(pr-gray, 12)}: 30, 34, 43;
73
+
74
+ // 灰色
75
+ #{getCssVarName(gray, 1)}: 255, 255, 255;
76
+ #{getCssVarName(gray, 2)}: 243, 243, 243;
77
+ #{getCssVarName(gray, 3)}: 232, 232, 232;
78
+ #{getCssVarName(gray, 4)}: 221, 221, 221;
79
+ #{getCssVarName(gray, 5)}: 198, 198, 198;
80
+ #{getCssVarName(gray, 6)}: 166, 166, 166;
81
+ #{getCssVarName(gray, 7)}: 139, 139, 139;
82
+ #{getCssVarName(gray, 8)}: 119, 119, 119;
83
+ #{getCssVarName(gray, 9)}: 94, 94, 94;
84
+ #{getCssVarName(gray, 10)}: 71, 71, 71;
85
+ #{getCssVarName(gray, 11)}: 56, 56, 56;
86
+ #{getCssVarName(gray, 12)}: 36, 36, 36;
87
+
88
+ // 主要颜色
89
+ #{getCssVarName(color, primary)}: rgba(var(#{getCssVarName(blue, 8)}), 1);
90
+ #{getCssVarName(color, primary, hover)}: rgba(var(#{getCssVarName(blue, 9)}), 1);
91
+ #{getCssVarName(color, primary, active)}: rgba(var(#{getCssVarName(blue, 10)}), 1);
92
+ #{getCssVarName(color, primary, disabled)}: rgba(var(#{getCssVarName(blue, 4)}), 1);
93
+ #{getCssVarName(color, primary, light)}: rgba(var(#{getCssVarName(blue, 1)}), 1);
94
+ #{getCssVarName(color, primary, light, hover)}: rgba(var(#{getCssVarName(blue, 2)}), 1);
95
+ #{getCssVarName(color, primary, light, active)}: rgba(var(#{getCssVarName(blue, 3)}), 1);
96
+
97
+ // 第二颜色
98
+ // #{getCssVarName(color, secondary)}: rgba(var(#{getCssVarName(pr-gray, 10)}), 1);
99
+ // #{getCssVarName(color, secondary, hover)}: rgba(var(#{getCssVarName(pr-gray, 11)}), 1);
100
+ // #{getCssVarName(color, secondary, active)}: rgba(var(#{getCssVarName(pr-gray, 12)}), 1);
101
+ // #{getCssVarName(color, secondary, disabled)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
102
+ // #{getCssVarName(color, secondary, light)}: rgba(var(#{getCssVarName(pr-gray, 4)}), 1);
103
+ // #{getCssVarName(color, secondary, light, hover)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
104
+ // #{getCssVarName(color, secondary, light, active)}: rgba(var(#{getCssVarName(pr-gray, 6)}), 1);
105
+
106
+ // 第三颜色
107
+ #{getCssVarName(color, tertiary)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
108
+ #{getCssVarName(color, tertiary, hover)}: rgba(var(#{getCssVarName(pr-gray, 6)}), 1);
109
+ #{getCssVarName(color, tertiary, active)}: rgba(var(#{getCssVarName(pr-gray, 7)}), 1);
110
+ #{getCssVarName(color, tertiary, light)}: rgba(var(#{getCssVarName(pr-gray, 1)}), 1);
111
+ #{getCssVarName(color, tertiary, light, hover)}: rgba(var(#{getCssVarName(pr-gray, 2)}), 1);
112
+ #{getCssVarName(color, tertiary, light, active)}: rgba(var(#{getCssVarName(pr-gray, 3)}), 1);
113
+
114
+ // 信息色
115
+ #{getCssVarName(color, info)}: rgba(var(#{getCssVarName(blue, 8)}), 1);
116
+ #{getCssVarName(color, info, hover)}: rgba(var(#{getCssVarName(blue, 9)}), 1);
117
+ #{getCssVarName(color, info, active)}: rgba(var(#{getCssVarName(blue, 10)}), 1);
118
+ #{getCssVarName(color, info, disabled)}: rgba(var(#{getCssVarName(blue, 4)}), 1);
119
+ #{getCssVarName(color, info, light)}: rgba(var(#{getCssVarName(blue, 1)}), 1);
120
+ #{getCssVarName(color, info, light, hover)}: rgba(var(#{getCssVarName(blue, 2)}), 1);
121
+ #{getCssVarName(color, info, light, active)}: rgba(var(#{getCssVarName(blue, 3)}), 1);
122
+
123
+ // 成功色
124
+ #{getCssVarName(color, success)}: rgba(var(#{getCssVarName(green, 6)}), 1);
125
+ #{getCssVarName(color, success, hover)}: rgba(var(#{getCssVarName(green, 7)}), 1);
126
+ #{getCssVarName(color, success, active)}: rgba(var(#{getCssVarName(green, 8)}), 1);
127
+ #{getCssVarName(color, success, disabled)}: rgba(var(#{getCssVarName(green, 3)}), 1);
128
+ #{getCssVarName(color, success, light)}: rgba(var(#{getCssVarName(green, 1)}), 1);
129
+ #{getCssVarName(color, success, light, hover)}: rgba(var(#{getCssVarName(green, 2)}), 1);
130
+ #{getCssVarName(color, success, light, active)}: rgba(var(#{getCssVarName(green, 3)}), 1);
131
+
132
+ // 警示色
133
+ #{getCssVarName(color, warning)}: rgba(var(#{getCssVarName(orange, 6)}),1);
134
+ #{getCssVarName(color, warning, hover)}: rgba(var(#{getCssVarName(orange, 7)}),1);
135
+ #{getCssVarName(color, warning, active)}: rgba(var(#{getCssVarName(orange, 8)}),1);
136
+ #{getCssVarName(color, warning, disabled)}: rgba(var(#{getCssVarName(orange, 4)}),1);
137
+ #{getCssVarName(color, warning, light, default)}: rgba(var(#{getCssVarName(orange, 1)}),1);
138
+ #{getCssVarName(color, warning, light, hover)}: rgba(var(#{getCssVarName(orange, 2)}),1);
139
+ #{getCssVarName(color, warning, light, active)}: rgba(var(#{getCssVarName(orange, 3)}),1);
140
+
141
+ // 危险色
142
+ #{getCssVarName(color, danger)}: rgba(var(#{getCssVarName(red, 6)}),1);
143
+ #{getCssVarName(color, danger, hover)}: rgba(var(#{getCssVarName(red, 7)}),1);
144
+ #{getCssVarName(color, danger, active)}: rgba(var(#{getCssVarName(red, 8)}),1);
145
+ #{getCssVarName(color, danger, disabled)}: rgba(var(#{getCssVarName(red, 4)}),1);
146
+ #{getCssVarName(color, danger, light, default)}: rgba(var(#{getCssVarName(red, 1)}),1);
147
+ #{getCssVarName(color, danger, light, hover)}: rgba(var(#{getCssVarName(red, 2)}),1);
148
+ #{getCssVarName(color, danger, light, active)}: rgba(var(#{getCssVarName(red, 3)}),1);
149
+
150
+ // 文本/图标颜色
151
+ #{getCssVarName(color, text, 1)}: rgba(var(#{getCssVarName(gray, 12)}),1);
152
+ #{getCssVarName(color, text, 2)}: rgba(var(#{getCssVarName(gray, 11)}),1);
153
+ #{getCssVarName(color, text, 3)}: rgba(var(#{getCssVarName(gray, 10)}),1);
154
+ #{getCssVarName(color, text, 4)}: rgba(var(#{getCssVarName(gray, 7)}),1);
155
+ #{getCssVarName(color, text, 5)}: rgba(var(#{getCssVarName(gray, 5)}),1);
156
+ #{getCssVarName(color, text, 6)}: rgba(var(#{getCssVarName(blue, 6)}),1);
157
+
158
+ // 链接颜色
159
+ #{getCssVarName(color, link)}: rgba(var(#{getCssVarName(blue, 8)}),1);
160
+ #{getCssVarName(color, link, hover)}: rgba(var(#{getCssVarName(blue, 9)}),1);
161
+ #{getCssVarName(color, link, active)}: rgba(var(#{getCssVarName(blue, 10)}),1);
162
+ #{getCssVarName(color, link, visited)}: rgba(var(#{getCssVarName(blue, 10)}),1);
163
+ #{getCssVarName(color, link, disabled)}: rgba(var(#{getCssVarName(blue, 4)}),1);
164
+
165
+ // 背景色
166
+ #{getCssVarName(color, bg, 1)}: rgba(var(#{getCssVarName(pr-gray, 1)}),1);
167
+ #{getCssVarName(color, bg, 2)}: rgba(var(#{getCssVarName(pr-gray, 2)}),1);
168
+ #{getCssVarName(color, bg, 3)}: rgba(var(#{getCssVarName(pr-gray, 3)}),1);
169
+ #{getCssVarName(color, bg, 4)}: rgba(var(#{getCssVarName(gray, 1)}),1);
170
+ #{getCssVarName(color, bg, 5)}: rgba(var(#{getCssVarName(pr-gray, 4)}),1);
171
+ #{getCssVarName(color, bg, 6)}: rgba(var(#{getCssVarName(pr-gray, 5)}),0.5);
172
+
173
+ // 描边色
174
+ #{getCssVarName(color, border)}: rgba(var(#{getCssVarName(gray, 4)}),1);
175
+ #{getCssVarName(color, border, hover)}: rgba(var(#{getCssVarName(blue, 8)}),1);
176
+ #{getCssVarName(color, border, active)}: rgba(var(#{getCssVarName(blue, 9)}),1);
177
+ #{getCssVarName(color, border, disabled)}: rgba(var(#{getCssVarName(gray, 4)}),1);
178
+
179
+ // 圆角
180
+ #{getCssVarName(border, radius, xs)}: 2px;
181
+ #{getCssVarName(border, radius, s)}: 4px;
182
+ #{getCssVarName(border, radius, m)}: 6px;
183
+ #{getCssVarName(border, radius, l)}: 8px;
184
+ #{getCssVarName(border, radius, xl)}: 10px;
185
+ #{getCssVarName(border, radius, xxl)}: 12px;
186
+ #{getCssVarName(border, radius, circle)}: 50%;
187
+ #{getCssVarName(border, radius, full)}: 9999px;
188
+
189
+ // 描边尺寸
190
+ #{getCssVarName(border, thickness, s)}: 1px;
191
+ #{getCssVarName(border, thickness, m)}: 2px;
192
+ #{getCssVarName(border, thickness, l)}: 4px;
193
+ #{getCssVarName(border, thickness, xl)}: 6px;
194
+ #{getCssVarName(border, thickness, xxl)}: 8px;
195
+
196
+ // 图标尺寸
197
+ #{getCssVarName(icon, xs)}: 8px;
198
+ #{getCssVarName(icon, s)}: 12px;
199
+ #{getCssVarName(icon, m)}: 12px;
200
+ #{getCssVarName(icon, l)}: 12px;
201
+ #{getCssVarName(icon, xl)}: 12px;
202
+
203
+ // 间距
204
+ #{getCssVarName(spacing, 1)}: 2px;
205
+ #{getCssVarName(spacing, 2)}: 4px;
206
+ #{getCssVarName(spacing, 3)}: 6px;
207
+ #{getCssVarName(spacing, 4)}: 8px;
208
+ #{getCssVarName(spacing, 5)}: 10px;
209
+ #{getCssVarName(spacing, 6)}: 12px;
210
+ #{getCssVarName(spacing, 7)}: 16px;
211
+ #{getCssVarName(spacing, 8)}: 20px;
212
+ #{getCssVarName(spacing, 9)}: 24px;
213
+ #{getCssVarName(spacing, 10)}: 28px;
214
+ #{getCssVarName(spacing, 11)}: 32px;
215
+ #{getCssVarName(spacing, 12)}: 36px;
216
+
217
+ // padding
218
+ #{getCssVarName(padding, 1)}: 2px;
219
+ #{getCssVarName(padding, 2)}: 4px;
220
+ #{getCssVarName(padding, 3)}: 6px;
221
+ #{getCssVarName(padding, 4)}: 8px;
222
+ #{getCssVarName(padding, 5)}: 10px;
223
+ #{getCssVarName(padding, 6)}: 12px;
224
+ #{getCssVarName(padding, 7)}: 16px;
225
+ #{getCssVarName(padding, 8)}: 20px;
226
+ #{getCssVarName(padding, 9)}: 24px;
227
+ #{getCssVarName(padding, 10)}: 28px;
228
+ #{getCssVarName(padding, 11)}: 32px;
229
+ #{getCssVarName(padding, 12)}: 36px;
230
+
231
+ // 字体大小
232
+ #{getCssVarName(font, 1)}: 10px;
233
+ #{getCssVarName(font, 2)}: 12px;
234
+ #{getCssVarName(font, 3)}: 14px;
235
+ #{getCssVarName(font, 4)}: 16px;
236
+ #{getCssVarName(font, 5)}: 18px;
237
+ #{getCssVarName(font, 6)}: 20px;
238
+ #{getCssVarName(font, 7)}: 22px;
239
+ #{getCssVarName(font, 8)}: 24px;
240
+ #{getCssVarName(font, 9)}: 28px;
241
+ #{getCssVarName(font, 10)}: 32px;
242
+ #{getCssVarName(font, 11)}: 36px;
243
+ #{getCssVarName(font, 12)}: 40px;
244
+
245
+ // line-height ps: 和字体大小一一对应
246
+ #{getCssVarName(line, height, 1)}: 14px;
247
+ #{getCssVarName(line, height, 2)}: 16px;
248
+ #{getCssVarName(line, height, 3)}: 22px;
249
+ #{getCssVarName(line, height, 4)}: 24px;
250
+ #{getCssVarName(line, height, 5)}: 26px;
251
+ #{getCssVarName(line, height, 6)}: 28px;
252
+ #{getCssVarName(line, height, 7)}: 30px;
253
+ #{getCssVarName(line, height, 8)}: 32px;
254
+ #{getCssVarName(line, height, 9)}: 36px;
255
+ #{getCssVarName(line, height, 10)}: 42px;
256
+ #{getCssVarName(line, height, 11)}: 48px;
257
+ #{getCssVarName(line, height, 12)}: 54px;
258
+ }
package/style/tools/utils.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use './function.scss' as *;
2
+
1
3
  // 完全容器居中
2
4
  @mixin flex-center {
3
5
  display: flex;
@@ -12,6 +14,79 @@
12
14
  white-space: nowrap;
13
15
  }
14
16
 
17
+ // 字体大小与行高匹配复用
18
+ @mixin font-1 {
19
+ font-size: 10px;
20
+ line-height: 14px;
21
+ color: rgb(#{getCssVar(pr-gray, 12)});
22
+ }
23
+
24
+ @mixin font-2 {
25
+ font-size: 12px;
26
+ line-height: 16px;
27
+ color: rgb(#{getCssVar(pr-gray, 12)});
28
+ }
29
+
30
+ @mixin font-3 {
31
+ font-size: 14px;
32
+ line-height: 22px;
33
+ color: rgb(#{getCssVar(pr-gray, 12)});
34
+ }
35
+
36
+ @mixin font-4 {
37
+ font-size: 16px;
38
+ line-height: 24px;
39
+ color: rgb(#{getCssVar(pr-gray, 12)});
40
+ }
41
+
42
+ @mixin font-5 {
43
+ font-size: 18px;
44
+ line-height: 26px;
45
+ color: rgb(#{getCssVar(pr-gray, 12)});
46
+ }
47
+
48
+ @mixin font-6 {
49
+ font-size: 20px;
50
+ line-height: 28px;
51
+ color: rgb(#{getCssVar(pr-gray, 12)});
52
+ }
53
+
54
+ @mixin font-7 {
55
+ font-size: 22px;
56
+ line-height: 30px;
57
+ color: rgb(#{getCssVar(pr-gray, 12)});
58
+ }
59
+
60
+ @mixin font-8 {
61
+ font-size: 24px;
62
+ line-height: 32px;
63
+ color: rgb(#{getCssVar(pr-gray, 12)});
64
+ }
65
+
66
+ @mixin font-9 {
67
+ font-size: 28px;
68
+ line-height: 36px;
69
+ color: rgb(#{getCssVar(pr-gray, 12)});
70
+ }
71
+
72
+ @mixin font-10 {
73
+ font-size: 32px;
74
+ line-height: 42px;
75
+ color: rgb(#{getCssVar(pr-gray, 12)});
76
+ }
77
+
78
+ @mixin font-11 {
79
+ font-size: 36px;
80
+ line-height: 48px;
81
+ color: rgb(#{getCssVar(pr-gray, 12)});
82
+ }
83
+
84
+ @mixin font-12 {
85
+ font-size: 40px;
86
+ line-height: 54px;
87
+ color: rgb(#{getCssVar(pr-gray, 12)});
88
+ }
89
+
15
90
  // flex样式复用
16
91
  @mixin flex(
17
92
  $direction: row,
@@ -55,7 +130,7 @@
55
130
  }
56
131
 
57
132
  // 超出自动换行，识别换行空白符
58
- @mixin overflow-wrap{
133
+ @mixin overflow-wrap {
59
134
  /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
60
135
  word-break: break-word;
61
136
  white-space: pre-wrap;
package/style/theme/default/default-theme.scss DELETED
@@ -1,402 +0,0 @@
1
- @use '../../global.scss' as *;
2
-
3
- :root.default {
4
- // 红色
5
- #{getCssVarName(red, 0)}: 254, 242, 237;
6
- #{getCssVarName(red, 1)}: 254, 221, 210;
7
- #{getCssVarName(red, 2)}: 253, 183, 164;
8
- #{getCssVarName(red, 3)}: 251, 144, 120;
9
- #{getCssVarName(red, 4)}: 250, 102, 75;
10
- #{getCssVarName(red, 5)}: 249, 57, 31;
11
- #{getCssVarName(red, 6)}: 213, 37, 20;
12
- #{getCssVarName(red, 7)}: 177, 20, 13;
13
- #{getCssVarName(red, 8)}: 142, 7, 5;
14
- #{getCssVarName(red, 9)}: 106, 2, 3;
15
-
16
- // 粉色
17
- #{getCssVarName(pink, 0)}: 253, 236, 239;
18
- #{getCssVarName(pink, 1)}: 251, 207, 216;
19
- #{getCssVarName(pink, 2)}: 246, 160, 181;
20
- #{getCssVarName(pink, 3)}: 242, 115, 150;
21
- #{getCssVarName(pink, 4)}: 238, 72, 122;
22
- #{getCssVarName(pink, 5)}: 233, 31, 99;
23
- #{getCssVarName(pink, 6)}: 197, 18, 86;
24
- #{getCssVarName(pink, 7)}: 162, 11, 72;
25
- #{getCssVarName(pink, 8)}: 126, 4, 58;
26
- #{getCssVarName(pink, 9)}: 90, 1, 44;
27
-
28
- // 紫色
29
- #{getCssVarName(purple, 0)}: 247, 233, 247;
30
- #{getCssVarName(purple, 1)}: 239, 202, 239;
31
- #{getCssVarName(purple, 2)}: 221, 155, 224;
32
- #{getCssVarName(purple, 3)}: 201, 112, 209;
33
- #{getCssVarName(purple, 4)}: 180, 73, 194;
34
- #{getCssVarName(purple, 5)}: 158, 40, 179;
35
- #{getCssVarName(purple, 6)}: 135, 30, 159;
36
- #{getCssVarName(purple, 7)}: 112, 23, 138;
37
- #{getCssVarName(purple, 8)}: 92, 14, 117;
38
- #{getCssVarName(purple, 9)}: 72, 11, 97;
39
-
40
- // 紫罗兰色
41
- #{getCssVarName(violet, 0)}: 243, 237, 249;
42
- #{getCssVarName(violet, 1)}: 226, 209, 244;
43
- #{getCssVarName(violet, 2)}: 196, 167, 233;
44
- #{getCssVarName(violet, 3)}: 166, 126, 221;
45
- #{getCssVarName(violet, 4)}: 136, 91, 210;
46
- #{getCssVarName(violet, 5)}: 106, 58, 199;
47
- #{getCssVarName(violet, 6)}: 87, 47, 179;
48
- #{getCssVarName(violet, 7)}: 70, 36, 158;
49
- #{getCssVarName(violet, 8)}: 54, 28, 138;
50
- #{getCssVarName(violet, 9)}: 40, 20, 117;
51
-
52
- // 靛蓝
53
- #{getCssVarName(indigo, 0)}: 237, 239, 248;
54
- #{getCssVarName(indigo, 1)}: 209, 216, 240;
55
- #{getCssVarName(indigo, 2)}: 167, 179, 225;
56
- #{getCssVarName(indigo, 3)}: 128, 144, 211;
57
- #{getCssVarName(indigo, 4)}: 94, 111, 196;
58
- #{getCssVarName(indigo, 5)}: 63, 81, 181;
59
- #{getCssVarName(indigo, 6)}: 51, 66, 161;
60
- #{getCssVarName(indigo, 7)}: 41, 52, 140;
61
- #{getCssVarName(indigo, 8)}: 31, 40, 120;
62
- #{getCssVarName(indigo, 9)}: 23, 29, 99;
63
-
64
- // 蓝色
65
- #{getCssVarName(blue, 0)}: 234, 245, 255;
66
- #{getCssVarName(blue, 1)}: 203, 231, 254;
67
- #{getCssVarName(blue, 2)}: 152, 205, 253;
68
- #{getCssVarName(blue, 3)}: 101, 179, 252;
69
- #{getCssVarName(blue, 4)}: 51, 149, 252;
70
- #{getCssVarName(blue, 5)}: 3, 118, 250;
71
- #{getCssVarName(blue, 6)}: 2, 97, 214;
72
- #{getCssVarName(blue, 7)}: 2, 79, 179;
73
- #{getCssVarName(blue, 8)}: 0, 61, 143;
74
- #{getCssVarName(blue, 9)}: 0, 44, 107;
75
-
76
- // 浅蓝色
77
- #{getCssVarName(light, blue, 0)}: 234, 247, 253;
78
- #{getCssVarName(light, blue, 1)}: 202, 236, 252;
79
- #{getCssVarName(light, blue, 2)}: 149, 216, 248;
80
- #{getCssVarName(light, blue, 3)}: 97, 195, 245;
81
- #{getCssVarName(light, blue, 4)}: 48, 172, 241;
82
- #{getCssVarName(light, blue, 5)}: 0, 149, 238;
83
- #{getCssVarName(light, blue, 6)}: 0, 123, 202;
84
- #{getCssVarName(light, blue, 7)}: 0, 99, 167;
85
- #{getCssVarName(light, blue, 8)}: 0, 75, 131;
86
- #{getCssVarName(light, blue, 9)}: 0, 53, 95;
87
-
88
- // 青色
89
- #{getCssVarName(cyan, 0)}: 229, 247, 248;
90
- #{getCssVarName(cyan, 1)}: 194, 239, 240;
91
- #{getCssVarName(cyan, 2)}: 138, 221, 225;
92
- #{getCssVarName(cyan, 3)}: 87, 203, 211;
93
- #{getCssVarName(cyan, 4)}: 44, 184, 197;
94
- #{getCssVarName(cyan, 5)}: 6, 164, 182;
95
- #{getCssVarName(cyan, 6)}: 3, 134, 152;
96
- #{getCssVarName(cyan, 7)}: 2, 105, 121;
97
- #{getCssVarName(cyan, 8)}: 0, 77, 91;
98
- #{getCssVarName(cyan, 9)}: 1, 50, 61;
99
-
100
- // 蓝绿色
101
- #{getCssVarName(teal, 0)}: 227, 247, 244;
102
- #{getCssVarName(teal, 1)}: 192, 240, 232;
103
- #{getCssVarName(teal, 2)}: 135, 224, 211;
104
- #{getCssVarName(teal, 3)}: 84, 209, 193;
105
- #{getCssVarName(teal, 4)}: 39, 194, 176;
106
- #{getCssVarName(teal, 5)}: 5, 179, 161;
107
- #{getCssVarName(teal, 6)}: 0, 149, 137;
108
- #{getCssVarName(teal, 7)}: 0, 119, 111;
109
- #{getCssVarName(teal, 8)}: 0, 90, 85;
110
- #{getCssVarName(teal, 9)}: 1, 60, 58;
111
-
112
- // 绿色
113
- #{getCssVarName(green, 0)}: 236, 246, 236;
114
- #{getCssVarName(green, 1)}: 208, 240, 208;
115
- #{getCssVarName(green, 2)}: 164, 224, 167;
116
- #{getCssVarName(green, 3)}: 126, 209, 130;
117
- #{getCssVarName(green, 4)}: 90, 194, 98;
118
- #{getCssVarName(green, 5)}: 59, 179, 70;
119
- #{getCssVarName(green, 6)}: 49, 149, 58;
120
- #{getCssVarName(green, 7)}: 37, 119, 47;
121
- #{getCssVarName(green, 8)}: 26, 89, 36;
122
- #{getCssVarName(green, 9)}: 18, 60, 24;
123
-
124
- // 浅绿色
125
- #{getCssVarName(light, green, 0)}: 243, 248, 236;
126
- #{getCssVarName(light, green, 1)}: 226, 240, 208;
127
- #{getCssVarName(light, green, 2)}: 200, 225, 165;
128
- #{getCssVarName(light, green, 3)}: 173, 211, 127;
129
- #{getCssVarName(light, green, 4)}: 147, 197, 91;
130
- #{getCssVarName(light, green, 5)}: 123, 182, 60;
131
- #{getCssVarName(light, green, 6)}: 100, 152, 47;
132
- #{getCssVarName(light, green, 7)}: 79, 121, 38;
133
- #{getCssVarName(light, green, 8)}: 57, 91, 27;
134
- #{getCssVarName(light, green, 9)}: 36, 61, 18;
135
-
136
- // 清柠色
137
- #{getCssVarName(lime, 0)}: 241, 250, 230;
138
- #{getCssVarName(lime, 1)}: 227, 246, 197;
139
- #{getCssVarName(lime, 2)}: 203, 237, 142;
140
- #{getCssVarName(lime, 3)}: 183, 226, 91;
141
- #{getCssVarName(lime, 4)}: 168, 218, 44;
142
- #{getCssVarName(lime, 5)}: 154, 209, 0;
143
- #{getCssVarName(lime, 6)}: 125, 174, 0;
144
- #{getCssVarName(lime, 7)}: 99, 139, 2;
145
- #{getCssVarName(lime, 8)}: 72, 104, 0;
146
- #{getCssVarName(lime, 9)}: 47, 70, 0;
147
-
148
- // 黄色
149
- #{getCssVarName(yellow, 0)}: 255, 253, 234;
150
- #{getCssVarName(yellow, 1)}: 255, 250, 203;
151
- #{getCssVarName(yellow, 2)}: 253, 243, 152;
152
- #{getCssVarName(yellow, 3)}: 252, 231, 101;
153
- #{getCssVarName(yellow, 4)}: 251, 218, 49;
154
- #{getCssVarName(yellow, 5)}: 249, 200, 0;
155
- #{getCssVarName(yellow, 6)}: 208, 170, 0;
156
- #{getCssVarName(yellow, 7)}: 167, 139, 0;
157
- #{getCssVarName(yellow, 8)}: 125, 106, 0;
158
- #{getCssVarName(yellow, 9)}: 83, 72, 0;
159
-
160
- // 琥珀色
161
- #{getCssVarName(amber, 0)}: 255, 251, 236;
162
- #{getCssVarName(amber, 1)}: 252, 245, 206;
163
- #{getCssVarName(amber, 2)}: 249, 232, 158;
164
- #{getCssVarName(amber, 3)}: 246, 216, 110;
165
- #{getCssVarName(amber, 4)}: 243, 198, 65;
166
- #{getCssVarName(amber, 5)}: 240, 177, 20;
167
- #{getCssVarName(amber, 6)}: 200, 138, 16;
168
- #{getCssVarName(amber, 7)}: 160, 102, 10;
169
- #{getCssVarName(amber, 8)}: 120, 70, 5;
170
- #{getCssVarName(amber, 9)}: 80, 43, 3;
171
-
172
- // 橙色
173
- #{getCssVarName(orange, 0)}: 255, 243, 224;
174
- #{getCssVarName(orange, 1)}: 255, 223, 177;
175
- #{getCssVarName(orange, 2)}: 255, 204, 128;
176
- #{getCssVarName(orange, 3)}: 254, 183, 77;
177
- #{getCssVarName(orange, 4)}: 255, 167, 38;
178
- #{getCssVarName(orange, 5)}: 255, 152, 0;
179
- #{getCssVarName(orange, 6)}: 250, 141, 0;
180
- #{getCssVarName(orange, 7)}: 245, 124, 2;
181
- #{getCssVarName(orange, 8)}: 239, 108, 0;
182
- #{getCssVarName(orange, 9)}: 230, 81, 0;
183
-
184
- // 灰色
185
- #{getCssVarName(grey, 0)}: 249, 249, 249;
186
- #{getCssVarName(grey, 1)}: 230, 232, 234;
187
- #{getCssVarName(grey, 2)}: 198, 202, 205;
188
- #{getCssVarName(grey, 3)}: 167, 171, 175;
189
- #{getCssVarName(grey, 4)}: 136, 141, 145;
190
- #{getCssVarName(grey, 5)}: 107, 102, 116;
191
- #{getCssVarName(grey, 6)}: 85, 91, 97;
192
- #{getCssVarName(grey, 7)}: 65, 70, 76;
193
- #{getCssVarName(grey, 8)}: 46, 50, 55;
194
- #{getCssVarName(grey, 9)}: 29, 31, 35;
195
-
196
-
197
- // 蓝青色
198
- #{getCssVarName(blue, cyan, 0)}: 217, 236, 255;
199
- #{getCssVarName(blue, cyan, 1)}: 164, 201, 238;
200
- #{getCssVarName(blue, cyan, 2)}: 131, 171, 212;
201
- #{getCssVarName(blue, cyan, 3)}: 105, 148, 190;
202
- #{getCssVarName(blue, cyan, 4)}: 85, 125, 165;
203
- #{getCssVarName(blue, cyan, 5)}: 70, 107, 144;
204
- #{getCssVarName(blue, cyan, 6)}: 48, 81, 115;
205
- #{getCssVarName(blue, cyan, 7)}: 36, 65, 96;
206
- #{getCssVarName(blue, cyan, 8)}: 26, 52, 79;
207
- #{getCssVarName(blue, cyan, 9)}: 16, 41, 68;
208
-
209
- // 黑、白色
210
- #{getCssVarName(white)}: 255, 255, 255;
211
- #{getCssVarName(black)}: 0, 0, 0;
212
-
213
- // 功能色
214
- #{getCssVarName(color, white)}: rgba(var(#{getCssVarName(white)}),1); // 浅色模式下深色背景内容Inverse
215
- #{getCssVarName(color, black)}: rgba(var(#{getCssVarName(black)}),1); // 深色模式下浅色背景内容Inverse
216
-
217
- // 主要颜色
218
- #{getCssVarName(color, primary)}: rgba(var(#{getCssVarName(blue, cyan, 4)}),1); // 主要颜色。仅在需要非常强调的情况下使用。
219
- #{getCssVarName(color, primary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
220
- #{getCssVarName(color, primary, hover)}: rgba(var(#{getCssVarName(blue, cyan, 3)}),1); // 主要颜色悬浮态
221
- #{getCssVarName(color, primary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
222
- #{getCssVarName(color, primary, active)}: rgba(var(#{getCssVarName(blue, cyan, 5)}),1); // 主要颜色激活态
223
- #{getCssVarName(color, primary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
224
- #{getCssVarName(color, primary, disabled)}: rgba(var(#{getCssVarName(blue, cyan, 2)}),1); // 主要颜色禁用态
225
- #{getCssVarName(color, primary, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
226
- #{getCssVarName(color, primary, light, default)}: rgba(var(#{getCssVarName(blue, cyan, 0)}),1); // 浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用。
227
- #{getCssVarName(color, primary, light, hover)}: rgba(var(#{getCssVarName(blue, cyan, 1)}),1); // 浅版主要颜色悬浮态
228
- #{getCssVarName(color, primary, light, active)}: rgba(var(#{getCssVarName(blue, cyan, 2)}),1); // 浅版主要颜色激活态
229
-
230
- // 次要颜色
231
- #{getCssVarName(color, secondary)}: rgba(var(#{getCssVarName(light, blue, 5)}),1); // 次要颜色。强调作用次于主要颜色，但仍然具有强调作用。
232
- #{getCssVarName(color, secondary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
233
- #{getCssVarName(color, secondary, hover)}: rgba(var(#{getCssVarName(light, blue, 6)}),1); // 次要颜色悬浮态
234
- #{getCssVarName(color, secondary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
235
- #{getCssVarName(color, secondary, active)}: rgba(var(#{getCssVarName(light, blue, 7)}),1); // 次要颜色激活态
236
- #{getCssVarName(color, secondary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
237
- #{getCssVarName(color, secondary, disabled)}: rgba(var(#{getCssVarName(light, blue, 2)}),1); // 次要颜色禁用态
238
- #{getCssVarName(color, secondary, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
239
- #{getCssVarName(color, secondary, light, default)}: rgba(var(#{getCssVarName(light, blue, 0)}),1); // 浅版次要颜色（多用于背景）。强调作用次于主要颜色，但仍然具有强调作用。
240
- #{getCssVarName(color, secondary, light, hover)}: rgba(var(#{getCssVarName(light, blue, 1)}),1); // 浅版次要颜色悬浮态
241
- #{getCssVarName(color, secondary, light, active)}: rgba(var(#{getCssVarName(light, blue, 2)}),1); // 浅版次要颜色激活态
242
-
243
- // 第三颜色
244
- #{getCssVarName(color, tertiary)}: rgba(var(#{getCssVarName(grey, 5)}),1); // 第三颜色，可以在页面上多次使用
245
- #{getCssVarName(color, tertiary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
246
- #{getCssVarName(color, tertiary, hover)}: rgba(var(#{getCssVarName(grey, 4)}),1); // 第三颜色悬浮态
247
- #{getCssVarName(color, tertiary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
248
- #{getCssVarName(color, tertiary, active)}: rgba(var(#{getCssVarName(grey, 6)}),1); // 第三颜色激活态
249
- #{getCssVarName(color, tertiary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
250
- #{getCssVarName(color, tertiary, light, default)}: rgba(var(#{getCssVarName(grey, 0)}),1); // 浅版第三颜色（多用于背景），可以在页面上多次使用
251
- #{getCssVarName(color, tertiary, light, hover)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 浅版第三颜色悬浮态
252
- #{getCssVarName(color, tertiary, light, active)}: rgba(var(#{getCssVarName(grey, 2)}),1); // 浅版第三颜色激活态
253
-
254
- // 信息色
255
- #{getCssVarName(color, info)}: rgba(var(#{getCssVarName(blue, cyan, 4)}),1); // 信息色, 通常用于表达客观、中立信息
256
- #{getCssVarName(color, info, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
257
- #{getCssVarName(color, info, hover)}: rgba(var(#{getCssVarName(blue, cyan, 3)}),1); // 信息色悬浮态
258
- #{getCssVarName(color, info, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
259
- #{getCssVarName(color, info, active)}: rgba(var(#{getCssVarName(blue, cyan, 5)}),1); // 信息色激活态
260
- #{getCssVarName(color, info, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
261
- #{getCssVarName(color, info, disabled)}: rgba(var(#{getCssVarName(blue, cyan, 2)}),1); // 信息色禁用态
262
- #{getCssVarName(color, info, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
263
- #{getCssVarName(color, info, light, default)}: rgba(var(#{getCssVarName(blue, cyan, 0)}),1); // 浅版信息色（多用于背景），通常用于表达客观、中立信息
264
- #{getCssVarName(color, info, light, hover)}: rgba(var(#{getCssVarName(blue, cyan, 1)}),1); // 浅版信息色悬浮态
265
- #{getCssVarName(color, info, light, active)}: rgba(var(#{getCssVarName(blue, cyan, 2)}),1); // 浅版信息色激活态
266
-
267
- // 成功色
268
- #{getCssVarName(color, success)}: rgba(var(#{getCssVarName(green, 5)}),1); // 成功色，表示安全、成功、开启的状态
269
- #{getCssVarName(color, success, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
270
- #{getCssVarName(color, success, hover)}: rgba(var(#{getCssVarName(green, 4)}),1); // 成功色悬浮态
271
- #{getCssVarName(color, success, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
272
- #{getCssVarName(color, success, active)}: rgba(var(#{getCssVarName(green, 6)}),1); // 成功色激活态
273
- #{getCssVarName(color, success, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
274
- #{getCssVarName(color, success, disabled)}: rgba(var(#{getCssVarName(green, 2)}),1); // 成功色禁用态
275
- #{getCssVarName(color, success, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
276
- #{getCssVarName(color, success, light, default)}: rgba(var(#{getCssVarName(green, 0)}),1); // 浅版成功色（多用于背景），表示安全、成功、开启的状态
277
- #{getCssVarName(color, success, light, hover)}: rgba(var(#{getCssVarName(green, 1)}),1); // 浅版成功色悬浮态
278
- #{getCssVarName(color, success, light, active)}: rgba(var(#{getCssVarName(green, 2)}),1); // 浅版成功色激活态
279
-
280
- // 警示色
281
- #{getCssVarName(color, warning)}: rgba(var(#{getCssVarName(orange, 5)}),1); // 警示色，表示警告、不安全的状态
282
- #{getCssVarName(color, warning, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
283
- #{getCssVarName(color, warning, hover)}: rgba(var(#{getCssVarName(orange, 4)}),1); // 警示色悬浮态
284
- #{getCssVarName(color, warning, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
285
- #{getCssVarName(color, warning, active)}: rgba(var(#{getCssVarName(orange, 6)}),1); // 警示色激活态
286
- #{getCssVarName(color, warning, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
287
- #{getCssVarName(color, warning, light, default)}: rgba(var(#{getCssVarName(orange, 0)}),1); // 浅版警示色（多用于背景），表示警告、不安全的状态
288
- #{getCssVarName(color, warning, light, hover)}: rgba(var(#{getCssVarName(orange, 1)}),1); // 浅版警示色悬浮态
289
- #{getCssVarName(color, warning, light, active)}: rgba(var(#{getCssVarName(orange, 2)}),1); // 浅版警示色激活态
290
-
291
- // 危险色
292
- #{getCssVarName(color, danger)}: rgba(var(#{getCssVarName(red, 5)}),1); // 危险色，表示危险的操作、或需要特别注意的危险信息
293
- #{getCssVarName(color, danger, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
294
- #{getCssVarName(color, danger, hover)}: rgba(var(#{getCssVarName(red, 4)}),1); // 危险色悬浮态
295
- #{getCssVarName(color, danger, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
296
- #{getCssVarName(color, danger, active)}: rgba(var(#{getCssVarName(red, 6)}),1); // 危险色激活态
297
- #{getCssVarName(color, danger, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
298
- #{getCssVarName(color, danger, light, default)}: rgba(var(#{getCssVarName(red, 0)}),1); // 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息
299
- #{getCssVarName(color, danger, light, hover)}: rgba(var(#{getCssVarName(red, 1)}),1); // 浅版危险色悬浮态
300
- #{getCssVarName(color, danger, light, active)}: rgba(var(#{getCssVarName(red, 2)}),1); // 浅版危险色激活态
301
-
302
- // 文本/图标颜色
303
- #{getCssVarName(color, text, 0)}: rgba(var(#{getCssVarName(grey, 9)}),1); // 文本/图标颜色 - 最主要
304
- #{getCssVarName(color, text, 1)}: rgba(var(#{getCssVarName(grey, 7)}),1); // 文本/图标颜色 - 稍次要
305
- #{getCssVarName(color, text, 2)}: rgba(var(#{getCssVarName(grey, 6)}),1); // 文本/图标颜色 - 次要
306
- #{getCssVarName(color, text, 3)}: rgba(var(#{getCssVarName(grey, 4)}),1); // 文本/图标颜色 - 最次要
307
- #{getCssVarName(color, text, 5)}: rgb(219 228 236); // 文本色(特殊) - 应用搜索框使用
308
- #{getCssVarName(color, text, menu)}: rgb(219 228 236); // 文本 - 特殊-菜单颜色
309
-
310
- // 图标颜色
311
- #{getCssVarName(color, icon, 0)}: #65B3FC; // 图标颜色 - 最主要
312
- #{getCssVarName(color, icon, 1)}: #CBE7FE; // 图标颜色 - 次要
313
-
314
- // 链接颜色
315
- #{getCssVarName(color, link)}: rgba(var(#{getCssVarName(blue, cyan, 5)}),1); // 链接颜色
316
- #{getCssVarName(color, link, hover)}: rgba(var(#{getCssVarName(blue, cyan, 4)}),1); // 链接颜色 - 悬浮态
317
- #{getCssVarName(color, link, active)}: rgba(var(#{getCssVarName(blue, cyan, 6)}),1); // 链接颜色 - 激活态
318
- #{getCssVarName(color, link, visited)}: rgba(var(#{getCssVarName(blue, cyan, 5)}),1); // 链接颜色 - 已访问
319
-
320
- // 背景色
321
- #{getCssVarName(color, bg, 0)}: rgba(var(#{getCssVarName(grey, 0)}),1); // 背景色 - 最下层（底部页面）
322
- #{getCssVarName(color, bg, 1)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 次下层（页面中需要提升的内容）
323
- #{getCssVarName(color, bg, 2)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 中间层（模态等容器）
324
- #{getCssVarName(color, bg, 3)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 次上层（通知，Toast等）
325
- #{getCssVarName(color, bg, 4)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 最上层（特殊）
326
- #{getCssVarName(color, bg, 5)}: rgba(var(#{getCssVarName(blue, cyan, 3)}),0.6); // 背景色(特殊) - 应用搜索框使用
327
- #{getCssVarName(color, bg, overlay)}: rgba(var(#{getCssVarName(black)}),0.5); // 蒙层背景色
328
-
329
- // 填充色
330
- #{getCssVarName(color, fill, 0)}: rgba(var(#{getCssVarName(grey, 8)}),0.05); // 填充色 - 默认态
331
- #{getCssVarName(color, fill, 1)}: rgba(var(#{getCssVarName(grey, 8)}),0.1); // 填充色 - 悬浮态
332
- #{getCssVarName(color, fill, 2)}: rgba(var(#{getCssVarName(grey, 8), }),0.13); // 填充色 - 激活态
333
- #{getCssVarName(color, scroll, menu)}: rgb(132 165 198 / 40%); // 填充色 - 特殊-菜单滚动条颜色
334
-
335
-
336
- // 边框
337
- #{getCssVarName(color, border)}: rgba(var(#{getCssVarName(grey, 9)}),0.1); // 默认描边颜色
338
-
339
- // 禁用态
340
- #{getCssVarName(color, disabled, text)}: rgba(var(#{getCssVarName(grey, 9)}), 0.35); // 禁用态 - 文字
341
- #{getCssVarName(color, disabled, border)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 禁用态 - 描边
342
- #{getCssVarName(color, disabled, bg)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 禁用态 - 背景
343
- #{getCssVarName(color, disabled, fill)}: rgba(var(#{getCssVarName(grey, 8)}),0.04); // 禁用态 - 填充
344
-
345
- // 阴影
346
- #{getCssVarName(color, shadow)}: rgba(var(#{getCssVarName(black)}),0.04); // 用于模拟描边的阴影颜色
347
- #{getCssVarName(shadow, elevated)}:
348
- 0 0 1px rgba(0 0 0 / 30%),
349
- 0 4px 14px rgba(0 0 0 / 10%); // 用于toast, modal, popover等需要提升层级的界面元素
350
-
351
- // 字号
352
- #{getCssVarName('font-size', 'small')}: 12px;
353
- #{getCssVarName('font-size', 'regular')}: 14px;
354
- #{getCssVarName('font-size', 'header-6')}: 16px;
355
- #{getCssVarName('font-size', 'header-5')}: 18px;
356
- #{getCssVarName('font-size', 'header-4')}: 20px;
357
- #{getCssVarName('font-size', 'header-3')}: 24px;
358
- #{getCssVarName('font-size', 'header-2')}: 28px;
359
- #{getCssVarName('font-size', 'header-1')}: 32px;
360
-
361
- // 字重
362
- #{getCssVarName('font-weight', 'light')}: 200;
363
- #{getCssVarName('font-weight', 'regular')}: 400;
364
- #{getCssVarName('font-weight', 'bold')}: 800;
365
-
366
- // 圆角
367
- #{getCssVarName(border, radius, extra, small)}: 2px; // 超小圆角，用于 checkbox 内圆角
368
- #{getCssVarName(border, radius, small)}: 4px; // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用
369
- #{getCssVarName(border, radius, medium)}: 8px; // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件
370
- #{getCssVarName(border, radius, large)}: 12px; // 大圆角, 用于 modal
371
- #{getCssVarName(border, radius, circle)}: 50%; // 全圆角, 用于 avatar, badge 等组件
372
- #{getCssVarName(border, radius, full)}: 9999px; // 用于创建全尺寸圆角，如胶囊标签等
373
-
374
- // 高度
375
- #{getCssVarName('height-control', 'small')}: 24px;
376
- #{getCssVarName('height-control', 'default')}: 32px;
377
- #{getCssVarName('height-control', 'large')}: 40px;
378
-
379
- // 描边尺寸
380
- #{getCssVarName('border-thickness')}: 0;
381
- #{getCssVarName('border-thickness', 'control')}: 1px;
382
- #{getCssVarName('border-thickness', 'control-focus')}: 1px;
383
-
384
- // 图标尺寸
385
- #{getCssVarName('width-icon', 'extra-small')}: 8px;
386
- #{getCssVarName('width-icon', 'small')}: 12px;
387
- #{getCssVarName('width-icon', 'medium')}: 16px;
388
- #{getCssVarName('width-icon', 'large')}: 20px;
389
- #{getCssVarName('width-icon', 'extra-large')}: 24px;
390
-
391
- // 间距
392
- #{getCssVarName('spacing', 'none')}: 0;
393
- #{getCssVarName('spacing', 'super-tight')}: 2px;
394
- #{getCssVarName('spacing', 'extra-tight')}: 4px;
395
- #{getCssVarName('spacing', 'tight')}: 8px;
396
- #{getCssVarName('spacing', 'base-tight')}: 12px;
397
- #{getCssVarName('spacing', 'base')}: 16px;
398
- #{getCssVarName('spacing', 'base-loose')}: 20px;
399
- #{getCssVarName('spacing', 'loose')}: 24px;
400
- #{getCssVarName('spacing', 'extra-loose')}: 32px;
401
- #{getCssVarName('spacing', 'super-loose')}: 40px;
402
- }