@itshixun/qst-ui-system 0.0.1

package/README.md

@@ -0,0 +1,59 @@
+# qst-ui-system
+QST前端UI基础库：
+1. 对接设计端定制的颜色/间距/风格(圆角/边框)等主题规范，作为UI设计和前端开发之间的“接口”;
+2. 将设计端定制的主题规范 关联到常用组件库的主题配置上;
+3. 将设计端定制的主题规范 关联到常用css框架的配置上;
+4. 通用的normalize(reset)样式和其他全局样式;
+## 主要功能
+- [x] 基于element-plus的css变量，生成主题变量配置：颜色/字色/背景色/圆角/间距/组件尺寸 等等，
+- [x] 全局初始化样式：normalize，全局文字配置(字体/抗锯齿等)
+- [ ] 组件库适配主题变量配置(样式覆盖)
+  - [x] element-plus
+  - [ ] element-ui
+  - [ ] ant-design / ant-design-vue
+  - [ ] vant
+- [ ] css框架适配主题变量配置
+  - [x] unocss
+  - [ ] windicss
+  - [ ] tailwind
+- [ ] 整合夜间模式切换功能
+
+## 对接&使用说明
+设计端：
+  1. 设计师使用[主题编辑器](https://mutueye.github.io/vite-vue3-scaffold/#/themeeditor)配置并导出json格式的主题列表
+  2. 在UI设计的过程中遵循配置好的主题进行设计
+前端：
+  1. 在项目入口(main.js/main.ts)调用`initQstTheme()`初始化主题样式，引入设计端定制好的主题(不传则使用默认主题列表)
+    ```js
+    import { initQstTheme } from 'qst-ui-system';
+    // 初始化qst主题，不传参数使用默认配置
+    initQstTheme();
+    // 参数示例：
+    initQstTheme({
+      /** css变量命名空间，如果使用element-plus切修改了element-plus的命名空间，需要和element-plus统一 */
+      namespace: '--el',
+      /** 主题列表，可以传入设计师定制的主题列表，不传使用默认主题列表 */
+      themeList?: UITheme[];
+      /** 主题样式设置完成后的回调函数 */
+      onStylesSet?: () => void;
+      /** 是否包含css重置样式(reset/normalize) 默认true */
+      cssReset?: boolean;
+      /** 需要适配的组件库(进行样式覆盖/主题定制)，默认'element-plus'  */
+      uiLibs?: UILib | UILib[];
+    })
+    ```
+  2. 如果使用element-plus组件库，则element组件自动适配引入的主题配置；其他组件库需要额外的步骤(WIP)
+  3. 使用css框架(比如unocss)，可以方便的调用主题配置进行样式编写(需要在相应的配置文件中引入主题配置 WIP)。
+    ```js
+    import { generateUnocssTheme } from 'qst-ui-system';
+     // unocss配置
+     {
+      ...
+      presets: [...],
+      safelist: [...],
+      transformers: [...]
+      // 生成主题配置 参数为namespace，默认'--el'
+      theme: generateUnocssTheme('--el'),
+      ...
+    }
+    ```

package/dist/index.common.js

@@ -0,0 +1 @@
+"use strict";var e=require("color2k");const r=[{name:"athena",config:{light:{color:{primary:"#217aff",success:"#67c23a",warning:"#f2711c",danger:"#db2828",info:"#96979c"},"text-color":{primary:"#131b26",regular:"#5f6165",secondary:"#96979c",placeholder:"#cacbd0",disabled:"#c0c4cc"},"bg-color":{DEFAULT:"#ffffff",page:"#f7f8fd",secondary:"#eef0f8"},"border-color":{"extra-light":"#f2f6fc",lighter:"#ebeef5",light:"#e4e7ed",DEFAULT:"#dcdfe6",dark:"#d4d7de",darker:"#cdd0d6"},"fill-color":{blank:"#ffffff","extra-light":"#fafcff",lighter:"#f8fafc",light:"#f5f7fa",DEFAULT:"#f0f2f5",dark:"#ebedf0",darker:"#e6e8eb"},"border-radius":{small:"2px",base:"4px",large:"6px",huge:"8px",round:"20px",circle:"100%"},space:{xxxs:"4px",xxs:"8px",xs:"12px",sm:"16px",md:"20px",DEFAULT:"24px",lg:"28px",xl:"32px",xxl:"36px",xxxl:"40px"},"font-size":{"extra-small":"12px",small:"13px",base:"14px",medium:"16px",large:"18px","extra-large":"20px"},"component-size":{mini:"24px",small:"28px",DEFAULT:"36px",large:"40px"}},dark:{color:{primary:"#217aff",success:"#67c23a",warning:"#f2711c",danger:"#db2828",info:"#96979c"},"text-color":{primary:"#ffffff",regular:"#cfd3dc",secondary:"#a3a6ad",placeholder:"#8d9095",disabled:"#6c6e72"},"bg-color":{DEFAULT:"#28303d",page:"#1b2431",secondary:"#171f2b"},"border-color":{"extra-light":"#313a47",lighter:"#3a4554",light:"#444f5e",DEFAULT:"#576273",dark:"#677282",darker:"#707b8c"},"fill-color":{blank:"transparent","extra-light":"#252c38",lighter:"#222b38",light:"#1f2733",DEFAULT:"#1e2633",dark:"#1a222e",darker:"#171e29"},"border-radius":{small:"2px",base:"4px",large:"6px",huge:"8px",round:"20px",circle:"100%"},space:{xxxs:"4px",xxs:"8px",xs:"12px",sm:"16px",md:"20px",DEFAULT:"24px",lg:"28px",xl:"32px",xxl:"36px",xxxl:"40px"},"font-size":{"extra-small":"12px",small:"13px",base:"14px",medium:"16px",large:"18px","extra-large":"20px"},"component-size":{mini:"24px",small:"28px",DEFAULT:"36px",large:"40px"}}}},{name:"uplus",config:{light:{color:{primary:"#67aef7",success:"#62d65c",warning:"#f39800",danger:"#fc7373",info:"#969eb3"},"text-color":{primary:"#222222",regular:"#666666",secondary:"#999999",placeholder:"#bbbbbb",disabled:"#cccccc"},"bg-color":{DEFAULT:"#ffffff",page:"#f8f9fa",secondary:"#f2f3f4"},"border-color":{"extra-light":"#f2f6fc",lighter:"#ebeef5",light:"#e4e7ed",DEFAULT:"#dcdfe6",dark:"#d4d7de",darker:"#cdd0d6"},"fill-color":{blank:"#ffffff","extra-light":"#fafcff",lighter:"#fafafa",light:"#f5f7fa",DEFAULT:"#f0f2f5",dark:"#ebedf0",darker:"#e6e8eb"},"border-radius":{small:"2px",base:"4px",large:"6px",huge:"8px",round:"20px",circle:"100%"},space:{xxxs:"4px",xxs:"8px",xs:"12px",sm:"16px",md:"20px",DEFAULT:"24px",lg:"28px",xl:"32px",xxl:"36px",xxxl:"40px"},"font-size":{"extra-small":"12px",small:"13px",base:"14px",medium:"16px",large:"18px","extra-large":"20px"},"component-size":{mini:"24px",small:"32px",DEFAULT:"40px",large:"48px"}},dark:{color:{primary:"#67aef7",success:"#62d65c",warning:"#f39800",danger:"#fc7373",info:"#969eb3"},"text-color":{primary:"#e5eaf3",regular:"#cfd3dc",secondary:"#a3a6ad",placeholder:"#8d9095",disabled:"#6c6e72"},"bg-color":{DEFAULT:"#252525",page:"#181818",secondary:"#111111"},"border-color":{"extra-light":"#2B2B2C",lighter:"#363637",light:"#414243",DEFAULT:"#4C4D4F",dark:"#58585B",darker:"#636466"},"fill-color":{blank:"transparent","extra-light":"#191919",lighter:"#1D1D1D",light:"#262727",DEFAULT:"#303030",dark:"#39393A",darker:"#424243"},"border-radius":{small:"2px",base:"4px",large:"6px",huge:"8px",round:"20px",circle:"100%"},space:{xxxs:"4px",xxs:"8px",xs:"12px",sm:"16px",md:"20px",DEFAULT:"24px",lg:"28px",xl:"32px",xxl:"36px",xxxl:"40px"},"font-size":{"extra-small":"12px",small:"13px",base:"14px",medium:"16px",large:"18px","extra-large":"20px"},"component-size":{mini:"24px",small:"32px",DEFAULT:"40px",large:"48px"}}}}];var a,o,l;exports.ThemeCategory=void 0,(a=exports.ThemeCategory||(exports.ThemeCategory={})).Color="color",a.TextColor="text-color",a.BgColor="bg-color",a.BorderColor="border-color",a.FillColor="fill-color",a.BorderRadius="border-radius",a.Space="space",a.FontSize="font-size",a.ComponentSize="component-size",exports.DayNightModeEnum=void 0,(o=exports.DayNightModeEnum||(exports.DayNightModeEnum={})).light="light",o.dark="dark",exports.MixModeEnum=void 0,(l=exports.MixModeEnum||(exports.MixModeEnum={})).light="light",l.dark="dark";const t={[exports.ThemeCategory.Color]:["primary","success","warning","danger","info"],[exports.ThemeCategory.TextColor]:["primary","regular","secondary","placeholder","disabled"],[exports.ThemeCategory.BgColor]:["DEFAULT","page","secondary"],[exports.ThemeCategory.BorderColor]:["extra-light","lighter","light","DEFAULT","dark","darker"],[exports.ThemeCategory.FillColor]:["blank","extra-light","lighter","light","DEFAULT","dark","darker"],[exports.ThemeCategory.BorderRadius]:["small","base","large","huge","round","circle"],[exports.ThemeCategory.Space]:["xxxs","xxs","xs","sm","md","DEFAULT","lg","xl","xxl","xxxl"],[exports.ThemeCategory.FontSize]:["extra-small","small","base","medium","large","extra-large"],[exports.ThemeCategory.ComponentSize]:["small","DEFAULT","large","mini"]},s={[exports.DayNightModeEnum.light]:{light:"#FFFFFF",dark:"#000000"},[exports.DayNightModeEnum.dark]:{light:"#000000",dark:"#FFFFFF"}},i={namespace:"--el",themeList:r,cssReset:!0,uiLibs:"element-plus"},n=[],c=e=>{const r=Object.assign({},i,e||{});n.length=0,n.push(...r.themeList);const a=document.head.querySelector("#theme");let o="";const{namespace:l,themeList:t}=r;t.forEach((e=>{Object.keys(exports.DayNightModeEnum).forEach((r=>{const a=x({namespace:l,targetTheme:e,mode:r});r===exports.DayNightModeEnum.light?o+=`.${e.name} { ${a} }`:o+=`.${e.name}.${r} { ${a} }`}))})),a.innerText=`${d(r)} ${o}`,r&&"function"==typeof r.onStylesSet&&r.onStylesSet()},d=e=>{const{namespace:r,cssReset:a,uiLibs:o}=e;let l=`${a?'html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video,details,summary{padding:0;margin:0;vertical-align:baseline;background:transparent;border-style:solid;border-width:0;}main,article,aside,figure,footer,header,nav,section,details,summary{display:block;}html{box-sizing:border-box;}*,*::before,*::after{box-sizing:inherit;}img,object,embed{max-width:100%;}ul{list-style:none;}a{padding:0;margin:0;font-size:100%;vertical-align:baseline;background:transparent;}table{font:100%;font-size:inherit;border-spacing:0;border-collapse:separate;}table th{font-weight:bold;vertical-align:bottom;}table td{font-weight:normal;vertical-align:top;}table td img{vertical-align:top;}button,input,select,textarea{margin:0;}.clearfix::after{display:block;clear:both;content:\' \';}html{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",SimSun,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}':""} body { font-size: var(${r}-font-size-base); background-color: var(${r}-bg-color-page); }`;return("string"==typeof o?[o]:o).includes("element-plus")&&(l+="body{--el-menu-bg-color:transparent;--el-menu-base-level-padding:var(--el-space);--el-menu-level-padding:var(--el-space-sm);}.el-button{--el-button-size:var(--el-component-size);height:var(--el-button-size);padding:0 var(--el-space-sm);}.el-button--small{--el-button-size:var(--el-component-size-small);padding:0 var(--el-space-xs);}.el-button--large{--el-button-size:var(--el-component-size-large);padding:0 var(--el-space);}.el-dialog{--el-dialog-border-radius:var(--el-border-radius-base);}.el-dialog .el-dialog__body{padding:var(--el-space-md);}.el-collapse{--el-collapse-header-text-color:var(--el-text-color-secondary);}.el-message-box{--el-messagebox-border-radius:var(--el-border-radius-base);}.el-tooltip__trigger:focus-visible{outline:none;}.el-form-item__label{height:var(--el-component-size);line-height:var(--el-component-size);}.el-form-item--large .el-form-item__label{height:var(--el-component-size-large);line-height:var(--el-component-size-large);}.el-form-item--small .el-form-item__label{height:var(--el-component-size-small);line-height:var(--el-component-size-small);}".replace("--el-",`${r}-`)),l+="html { --el-color-white: #ffffff; --el-color-black: #000000; }",l},x=({namespace:r,targetTheme:a,mode:o})=>{const l=a.config[o];let t,i="";for(t in l){const a=l[t];Object.keys(a).forEach((l=>{const n="DEFAULT"===l?`${r}-${t}`:`${r}-${t}-${l}`;i+=`${n}: ${a[l]}; `,t===exports.ThemeCategory.Color&&Object.keys(exports.MixModeEnum).forEach((r=>{for(let t=1;t<10;t++)i+=`${n}-${r}-${t}: ${e.toHex(e.mix(a[l],s[o][r],.1*t))}; `}))}))}return i=i.concat(" ",`${r}-color-error: var(${r}-color-danger);`),i=i.concat(" ",`${r}-bg-color-overlay: var(${r}-bg-color);`),i},p=e=>{if(e>n.length-1)return;const r=document.getElementsByTagName("html")[0],a=n[e].name;n.forEach((e=>{r.classList.contains(e.name)&&e.name!==a&&r.classList.remove(e.name)})),r.classList.contains(a)||r.classList.add(a)},g=e=>{const r={},a=[];return e.forEach((e=>{const o=e.split("-");if(o.length>1){const e=o.shift(),l=g(o);r[e]?r[e].push(...l):(r[e]=l,a.push({[e]:r[e]}))}else a.push(e)})),a},m=(()=>{const e={};for(const r in t)r.includes("color")?e[r]=g(t[r]):e[r]=t[r];return e})(),f=e=>{const r={};return m.color.forEach((a=>{r[a]={DEFAULT:`var(${e}-color-${a})`};["light","dark"].forEach((o=>{const l={};for(let r=1;r<10;r++)l[r]=`var(${e}-color-${a}-${o}-${r})`;r[a][o]=l}))})),r},h=(e,r,a,o="")=>{const l={},t=e[r];return t&&t.forEach((e=>{if("string"==typeof e)"DEFAULT"===e?l[o||e]=`var(${a}-${r})`:l[o?o+"-"+e:e]=`var(${a}-${r}-${e})`;else{const t=Object.keys(e)[0];l[o?o+"-"+t:t]=h(e,t,`${a}-${r}`)}})),l},b=e=>({...h(m,"space",e,"space"),...h(m,"component-size",e,"component-size"),header:"72px","left-menu":"300px"});exports.cssVarCodex=t,exports.currentThemeList=n,exports.defaultThemeList=r,exports.generateUnocssTheme=(e="--el")=>({width:b(e),height:b(e),spacing:b(e),borderRadius:{...h(m,"border-radius",e)},colors:{theme:`var(${e}-color-primary)`,...f(e),text:h(m,"text-color",e),bg:h(m,"bg-color",e),border:h(m,"border-color",e),fill:h(m,"fill-color",e)},fontSize:{...h(m,"font-size",e)}}),exports.initQstTheme=e=>{const r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");r.appendChild(a),a.setAttribute("id","theme"),c(e),p(0)},exports.injectThemeStyle=c,exports.mixModeBaseColors=s,exports.setThemeClassByIndex=p;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme/defaultThemeList';
+export * from './theme/theme';
+export * from './theme/themeForUnocss';

package/dist/index.es.js

@@ -0,0 +1 @@
+import{toHex as e,mix as r}from"color2k";const a=[{name:"athena",config:{light:{color:{primary:"#217aff",success:"#67c23a",warning:"#f2711c",danger:"#db2828",info:"#96979c"},"text-color":{primary:"#131b26",regular:"#5f6165",secondary:"#96979c",placeholder:"#cacbd0",disabled:"#c0c4cc"},"bg-color":{DEFAULT:"#ffffff",page:"#f7f8fd",secondary:"#eef0f8"},"border-color":{"extra-light":"#f2f6fc",lighter:"#ebeef5",light:"#e4e7ed",DEFAULT:"#dcdfe6",dark:"#d4d7de",darker:"#cdd0d6"},"fill-color":{blank:"#ffffff","extra-light":"#fafcff",lighter:"#f8fafc",light:"#f5f7fa",DEFAULT:"#f0f2f5",dark:"#ebedf0",darker:"#e6e8eb"},"border-radius":{small:"2px",base:"4px",large:"6px",huge:"8px",round:"20px",circle:"100%"},space:{xxxs:"4px",xxs:"8px",xs:"12px",sm:"16px",md:"20px",DEFAULT:"24px",lg:"28px",xl:"32px",xxl:"36px",xxxl:"40px"},"font-size":{"extra-small":"12px",small:"13px",base:"14px",medium:"16px",large:"18px","extra-large":"20px"},"component-size":{mini:"24px",small:"28px",DEFAULT:"36px",large:"40px"}},dark:{color:{primary:"#217aff",success:"#67c23a",warning:"#f2711c",danger:"#db2828",info:"#96979c"},"text-color":{primary:"#ffffff",regular:"#cfd3dc",secondary:"#a3a6ad",placeholder:"#8d9095",disabled:"#6c6e72"},"bg-color":{DEFAULT:"#28303d",page:"#1b2431",secondary:"#171f2b"},"border-color":{"extra-light":"#313a47",lighter:"#3a4554",light:"#444f5e",DEFAULT:"#576273",dark:"#677282",darker:"#707b8c"},"fill-color":{blank:"transparent","extra-light":"#252c38",lighter:"#222b38",light:"#1f2733",DEFAULT:"#1e2633",dark:"#1a222e",darker:"#171e29"},"border-radius":{small:"2px",base:"4px",large:"6px",huge:"8px",round:"20px",circle:"100%"},space:{xxxs:"4px",xxs:"8px",xs:"12px",sm:"16px",md:"20px",DEFAULT:"24px",lg:"28px",xl:"32px",xxl:"36px",xxxl:"40px"},"font-size":{"extra-small":"12px",small:"13px",base:"14px",medium:"16px",large:"18px","extra-large":"20px"},"component-size":{mini:"24px",small:"28px",DEFAULT:"36px",large:"40px"}}}},{name:"uplus",config:{light:{color:{primary:"#67aef7",success:"#62d65c",warning:"#f39800",danger:"#fc7373",info:"#969eb3"},"text-color":{primary:"#222222",regular:"#666666",secondary:"#999999",placeholder:"#bbbbbb",disabled:"#cccccc"},"bg-color":{DEFAULT:"#ffffff",page:"#f8f9fa",secondary:"#f2f3f4"},"border-color":{"extra-light":"#f2f6fc",lighter:"#ebeef5",light:"#e4e7ed",DEFAULT:"#dcdfe6",dark:"#d4d7de",darker:"#cdd0d6"},"fill-color":{blank:"#ffffff","extra-light":"#fafcff",lighter:"#fafafa",light:"#f5f7fa",DEFAULT:"#f0f2f5",dark:"#ebedf0",darker:"#e6e8eb"},"border-radius":{small:"2px",base:"4px",large:"6px",huge:"8px",round:"20px",circle:"100%"},space:{xxxs:"4px",xxs:"8px",xs:"12px",sm:"16px",md:"20px",DEFAULT:"24px",lg:"28px",xl:"32px",xxl:"36px",xxxl:"40px"},"font-size":{"extra-small":"12px",small:"13px",base:"14px",medium:"16px",large:"18px","extra-large":"20px"},"component-size":{mini:"24px",small:"32px",DEFAULT:"40px",large:"48px"}},dark:{color:{primary:"#67aef7",success:"#62d65c",warning:"#f39800",danger:"#fc7373",info:"#969eb3"},"text-color":{primary:"#e5eaf3",regular:"#cfd3dc",secondary:"#a3a6ad",placeholder:"#8d9095",disabled:"#6c6e72"},"bg-color":{DEFAULT:"#252525",page:"#181818",secondary:"#111111"},"border-color":{"extra-light":"#2B2B2C",lighter:"#363637",light:"#414243",DEFAULT:"#4C4D4F",dark:"#58585B",darker:"#636466"},"fill-color":{blank:"transparent","extra-light":"#191919",lighter:"#1D1D1D",light:"#262727",DEFAULT:"#303030",dark:"#39393A",darker:"#424243"},"border-radius":{small:"2px",base:"4px",large:"6px",huge:"8px",round:"20px",circle:"100%"},space:{xxxs:"4px",xxs:"8px",xs:"12px",sm:"16px",md:"20px",DEFAULT:"24px",lg:"28px",xl:"32px",xxl:"36px",xxxl:"40px"},"font-size":{"extra-small":"12px",small:"13px",base:"14px",medium:"16px",large:"18px","extra-large":"20px"},"component-size":{mini:"24px",small:"32px",DEFAULT:"40px",large:"48px"}}}}];var l,o,t;!function(e){e.Color="color",e.TextColor="text-color",e.BgColor="bg-color",e.BorderColor="border-color",e.FillColor="fill-color",e.BorderRadius="border-radius",e.Space="space",e.FontSize="font-size",e.ComponentSize="component-size"}(l||(l={})),function(e){e.light="light",e.dark="dark"}(o||(o={})),function(e){e.light="light",e.dark="dark"}(t||(t={}));const i={[l.Color]:["primary","success","warning","danger","info"],[l.TextColor]:["primary","regular","secondary","placeholder","disabled"],[l.BgColor]:["DEFAULT","page","secondary"],[l.BorderColor]:["extra-light","lighter","light","DEFAULT","dark","darker"],[l.FillColor]:["blank","extra-light","lighter","light","DEFAULT","dark","darker"],[l.BorderRadius]:["small","base","large","huge","round","circle"],[l.Space]:["xxxs","xxs","xs","sm","md","DEFAULT","lg","xl","xxl","xxxl"],[l.FontSize]:["extra-small","small","base","medium","large","extra-large"],[l.ComponentSize]:["small","DEFAULT","large","mini"]},s={[o.light]:{light:"#FFFFFF",dark:"#000000"},[o.dark]:{light:"#000000",dark:"#FFFFFF"}},n={namespace:"--el",themeList:a,cssReset:!0,uiLibs:"element-plus"},c=[],d=e=>{const r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");r.appendChild(a),a.setAttribute("id","theme"),p(e),g(0)},p=e=>{const r=Object.assign({},n,e||{});c.length=0,c.push(...r.themeList);const a=document.head.querySelector("#theme");let l="";const{namespace:t,themeList:i}=r;i.forEach((e=>{Object.keys(o).forEach((r=>{const a=f({namespace:t,targetTheme:e,mode:r});r===o.light?l+=`.${e.name} { ${a} }`:l+=`.${e.name}.${r} { ${a} }`}))})),a.innerText=`${x(r)} ${l}`,r&&"function"==typeof r.onStylesSet&&r.onStylesSet()},x=e=>{const{namespace:r,cssReset:a,uiLibs:l}=e;let o=`${a?'html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video,details,summary{padding:0;margin:0;vertical-align:baseline;background:transparent;border-style:solid;border-width:0;}main,article,aside,figure,footer,header,nav,section,details,summary{display:block;}html{box-sizing:border-box;}*,*::before,*::after{box-sizing:inherit;}img,object,embed{max-width:100%;}ul{list-style:none;}a{padding:0;margin:0;font-size:100%;vertical-align:baseline;background:transparent;}table{font:100%;font-size:inherit;border-spacing:0;border-collapse:separate;}table th{font-weight:bold;vertical-align:bottom;}table td{font-weight:normal;vertical-align:top;}table td img{vertical-align:top;}button,input,select,textarea{margin:0;}.clearfix::after{display:block;clear:both;content:\' \';}html{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",SimSun,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}':""} body { font-size: var(${r}-font-size-base); background-color: var(${r}-bg-color-page); }`;return("string"==typeof l?[l]:l).includes("element-plus")&&(o+="body{--el-menu-bg-color:transparent;--el-menu-base-level-padding:var(--el-space);--el-menu-level-padding:var(--el-space-sm);}.el-button{--el-button-size:var(--el-component-size);height:var(--el-button-size);padding:0 var(--el-space-sm);}.el-button--small{--el-button-size:var(--el-component-size-small);padding:0 var(--el-space-xs);}.el-button--large{--el-button-size:var(--el-component-size-large);padding:0 var(--el-space);}.el-dialog{--el-dialog-border-radius:var(--el-border-radius-base);}.el-dialog .el-dialog__body{padding:var(--el-space-md);}.el-collapse{--el-collapse-header-text-color:var(--el-text-color-secondary);}.el-message-box{--el-messagebox-border-radius:var(--el-border-radius-base);}.el-tooltip__trigger:focus-visible{outline:none;}.el-form-item__label{height:var(--el-component-size);line-height:var(--el-component-size);}.el-form-item--large .el-form-item__label{height:var(--el-component-size-large);line-height:var(--el-component-size-large);}.el-form-item--small .el-form-item__label{height:var(--el-component-size-small);line-height:var(--el-component-size-small);}".replace("--el-",`${r}-`)),o+="html { --el-color-white: #ffffff; --el-color-black: #000000; }",o},f=({namespace:a,targetTheme:o,mode:i})=>{const n=o.config[i];let c,d="";for(c in n){const o=n[c];Object.keys(o).forEach((n=>{const p="DEFAULT"===n?`${a}-${c}`:`${a}-${c}-${n}`;d+=`${p}: ${o[n]}; `,c===l.Color&&Object.keys(t).forEach((a=>{for(let l=1;l<10;l++)d+=`${p}-${a}-${l}: ${e(r(o[n],s[i][a],.1*l))}; `}))}))}return d=d.concat(" ",`${a}-color-error: var(${a}-color-danger);`),d=d.concat(" ",`${a}-bg-color-overlay: var(${a}-bg-color);`),d},g=e=>{if(e>c.length-1)return;const r=document.getElementsByTagName("html")[0],a=c[e].name;c.forEach((e=>{r.classList.contains(e.name)&&e.name!==a&&r.classList.remove(e.name)})),r.classList.contains(a)||r.classList.add(a)},m=e=>{const r={},a=[];return e.forEach((e=>{const l=e.split("-");if(l.length>1){const e=l.shift(),o=m(l);r[e]?r[e].push(...o):(r[e]=o,a.push({[e]:r[e]}))}else a.push(e)})),a},b=(()=>{const e={};for(const r in i)r.includes("color")?e[r]=m(i[r]):e[r]=i[r];return e})(),h=e=>{const r={};return b.color.forEach((a=>{r[a]={DEFAULT:`var(${e}-color-${a})`};["light","dark"].forEach((l=>{const o={};for(let r=1;r<10;r++)o[r]=`var(${e}-color-${a}-${l}-${r})`;r[a][l]=o}))})),r},u=(e,r,a,l="")=>{const o={},t=e[r];return t&&t.forEach((e=>{if("string"==typeof e)"DEFAULT"===e?o[l||e]=`var(${a}-${r})`:o[l?l+"-"+e:e]=`var(${a}-${r}-${e})`;else{const t=Object.keys(e)[0];o[l?l+"-"+t:t]=u(e,t,`${a}-${r}`)}})),o},k=e=>({...u(b,"space",e,"space"),...u(b,"component-size",e,"component-size"),header:"72px","left-menu":"300px"}),y=(e="--el")=>({width:k(e),height:k(e),spacing:k(e),borderRadius:{...u(b,"border-radius",e)},colors:{theme:`var(${e}-color-primary)`,...h(e),text:u(b,"text-color",e),bg:u(b,"bg-color",e),border:u(b,"border-color",e),fill:u(b,"fill-color",e)},fontSize:{...u(b,"font-size",e)}});export{o as DayNightModeEnum,t as MixModeEnum,l as ThemeCategory,i as cssVarCodex,c as currentThemeList,a as defaultThemeList,y as generateUnocssTheme,d as initQstTheme,p as injectThemeStyle,s as mixModeBaseColors,g as setThemeClassByIndex};

package/dist/theme/defaultThemeList.d.ts

@@ -0,0 +1,2 @@
+import type { UITheme } from './theme';
+export declare const defaultThemeList: UITheme[];

package/dist/theme/theme.d.ts

@@ -0,0 +1,71 @@
+export declare enum ThemeCategory {
+    Color = "color",
+    TextColor = "text-color",
+    BgColor = "bg-color",
+    BorderColor = "border-color",
+    FillColor = "fill-color",
+    BorderRadius = "border-radius",
+    Space = "space",
+    FontSize = "font-size",
+    ComponentSize = "component-size"
+}
+export declare enum DayNightModeEnum {
+    light = "light",
+    dark = "dark"
+}
+export declare enum MixModeEnum {
+    light = "light",
+    dark = "dark"
+}
+export declare const cssVarCodex: {
+    readonly color: readonly ["primary", "success", "warning", "danger", "info"];
+    readonly "text-color": readonly ["primary", "regular", "secondary", "placeholder", "disabled"];
+    readonly "bg-color": readonly ["DEFAULT", "page", "secondary"];
+    readonly "border-color": readonly ["extra-light", "lighter", "light", "DEFAULT", "dark", "darker"];
+    readonly "fill-color": readonly ["blank", "extra-light", "lighter", "light", "DEFAULT", "dark", "darker"];
+    readonly "border-radius": readonly ["small", "base", "large", "huge", "round", "circle"];
+    readonly space: readonly ["xxxs", "xxs", "xs", "sm", "md", "DEFAULT", "lg", "xl", "xxl", "xxxl"];
+    readonly "font-size": readonly ["extra-small", "small", "base", "medium", "large", "extra-large"];
+    readonly "component-size": readonly ["small", "DEFAULT", "large", "mini"];
+};
+export type ThemeConfig = {
+    [K in ThemeCategory]: Record<(typeof cssVarCodex)[K][number], string>;
+};
+export interface UITheme {
+    name: string;
+    config: {
+        [T in DayNightModeEnum]: ThemeConfig;
+    };
+}
+export declare const mixModeBaseColors: {
+    light: {
+        light: string;
+        dark: string;
+    };
+    dark: {
+        light: string;
+        dark: string;
+    };
+};
+export type UILib = 'element-ui' | 'element-plus' | 'ant-design-vue' | 'ant-design' | 'vant';
+/** 主题选项 */
+export interface ThemeOption {
+    /** 主题css变量命名空间 默认--el */
+    namespace?: string;
+    /** 主题列表 */
+    themeList?: UITheme[];
+    /** 主题样式设置完成后的回调函数 */
+    onStylesSet?: () => void;
+    /** 是否包含css重置样式(reset/normalize) 默认是 */
+    cssReset?: boolean;
+    /** 需要适配的组件库(进行样式覆盖/主题定制)  */
+    uiLibs?: UILib | UILib[];
+}
+export declare const currentThemeList: UITheme[];
+/**
+ * 初始化QstUI
+ * @param option {ThemeOption} UI主题选项
+ */
+export declare const initQstTheme: (option?: ThemeOption) => void;
+export declare const injectThemeStyle: (option: ThemeOption) => void;
+export declare const setThemeClassByIndex: (themeIndex: number) => void;

package/dist/theme/themeForUnocss.d.ts

@@ -0,0 +1,31 @@
+export type CssVarConfigType = Record<string, (string | CssVarConfigType)[]>;
+export interface ConfigList {
+    [key: string]: ConfigList | string;
+}
+export declare const generateUnocssTheme: (namespace?: string) => {
+    width: {
+        header: string;
+        'left-menu': string;
+    };
+    height: {
+        header: string;
+        'left-menu': string;
+    };
+    spacing: {
+        header: string;
+        'left-menu': string;
+    };
+    borderRadius: {
+        [x: string]: string;
+    };
+    colors: {
+        text: ConfigList;
+        bg: ConfigList;
+        border: ConfigList;
+        fill: ConfigList;
+        theme: string;
+    };
+    fontSize: {
+        [x: string]: string;
+    };
+};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@itshixun/qst-ui-system",
+  "version": "0.0.1",
+  "packageManager": "pnpm@8.3.0",
+  "description": "qst ui system",
+  "author": "mutueye <mutuyueniao@gmail.com>",
+  "license": "MIT",
+  "main": "dist/index.common.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "qst",
+    "ui",
+    "system",
+    "ui-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:lib": "rimraf dist && rollup -c",
+    "watch": "imraf dist && rollup -cw",
+    "lint": "npx lint-staged",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
+    "lint:es": "eslint --ext .js,.ts --ignore-path .eslintignore --fix src",
+    "lint:es:check": "eslint --ext .js,.ts --ignore-path .eslintignore src",
+    "lint:style": "stylelint ./src/**/*.{vue,css,scss} --fix",
+    "lint:style:check": "stylelint ./src/**/*.{vue,css,scss}"
+  },
+  "dependencies": {
+    "color2k": "^2.0.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.2.1",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@types/lodash-es": "^4.17.6",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "element-theme-chalk": "^2.15.13",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "gh-pages": "^4.0.0",
+    "glob": "^8.0.3",
+    "lint-staged": "^13.1.0",
+    "postcss": "^8.4.20",
+    "postcss-html": "^1.5.0",
+    "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^3.9.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-import-css": "^3.2.1",
+    "rollup-plugin-scss": "^4.0.0",
+    "sass": "^1.60.0",
+    "stylelint": "^15.3.0",
+    "stylelint-config-css-modules": "^4.2.0",
+    "stylelint-config-recess-order": "^4.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-scss": "^4.3.0",
+    "typescript": "^4.9.4"
+  },
+  "lint-staged": {
+    "./**/*.{vue,js,ts,jsx,tsx,json}": "eslint --ignore-path .eslintignore --fix",
+    "./**/*.{vue,js,ts,jsx,tsx,md,json,scss,css,html}": "prettier . --write",
+    "./**/*.{scss,css,vue}": "stylelint --fix"
+  }
+}