@gct-paas/scss 0.1.6-dev.27 → 0.1.6-dev.28

package/dist/index.esm.min.js

@@ -1,2 +1,2 @@
-/*! @gct-paas/scss v0.1.6-dev.27 */
+/*! @gct-paas/scss v0.1.6-dev.28 */
 function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(e,r,n){return(r=function(e){var r=function(e){if("object"!=t(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!=t(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==t(r)?r:r+""}(r))in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function r(t,e,r,n,o){let s=`${t}-${e}`;return r&&(s+=`-${r}`),n&&(s+=`__${n}`),o&&(s+=`--${o}`),s}var n=class{constructor(t,r){e(this,"block",void 0),e(this,"namespace",void 0),this.block=t,this.namespace=r||"gct"}b(t=""){return r(this.namespace,this.block,t,"","")}e(t){return t?r(this.namespace,this.block,"",t,""):""}m(t){return t?r(this.namespace,this.block,"","",t):""}be(t,e){return t&&e?r(this.namespace,this.block,t,e,""):""}em(t,e){return t&&e?r(this.namespace,this.block,"",t,e):""}bm(t,e){return t&&e?r(this.namespace,this.block,t,"",e):""}bem(t,e,n){return t&&e&&n?r(this.namespace,this.block,t,e,n):""}is(t,e){return t&&e?`is-${t}`:""}cssVar(t){const e={};for(const r in t)t[r]&&(e[this.cssVarName(r)]=t[r]);return e}cssVarBlock(t){const e={};for(const r in t)t[r]&&(e[this.cssVarBlockName(r)]=t[r]);return e}cssVarName(t){return`--${this.namespace}-${t}`}cssVarBlockName(t){return`--${this.namespace}-${this.block}-${t}`}};function o(t){return new n(t)}export{n as Namespace,o as useNamespace};

package/docs/theme-tokens.md

@@ -24,6 +24,36 @@ This document outlines all design tokens available in the light theme.
 | `--gct--blue-11` | RGB(1, 60, 114) |
 | `--gct--blue-12` | RGB(1, 48, 90) |
 
+#### Runtime Theme Color (Light)
+
+Light theme supports two pre-defined primary palettes, switched via CSS class on `html`:
+
+| `themeSetting.themeColor` | Class on `html` | Blue-8 (Primary) |
+|---------------------------|-----------------|------------------|
+| `#026AC8` (default) | _(none)_ | RGB(2, 106, 200) |
+| `#0DAA9C` | `theme-color-teal` | RGB(13, 170, 156) |
+
+When `theme-color-teal` is present on `.light` / `.light-theme`, only `--gct-blue-1` through `--gct-blue-12` are overridden. Semantic tokens (`--gct-color-primary`, info, link, border hover/active) cascade automatically.
+
+**Teal palette** (`theme-color-teal`):
+
+| Token | Value |
+|-------|-------|
+| `--gct--blue-1` | RGB(248, 252, 252) |
+| `--gct--blue-2` | RGB(233, 247, 246) |
+| `--gct--blue-3` | RGB(211, 240, 237) |
+| `--gct--blue-4` | RGB(207, 238, 235) |
+| `--gct--blue-5` | RGB(170, 225, 220) |
+| `--gct--blue-6` | RGB(134, 213, 206) |
+| `--gct--blue-7` | RGB(66, 189, 178) |
+| `--gct--blue-8` | RGB(13, 170, 156) |
+| `--gct--blue-9` | RGB(12, 156, 144) |
+| `--gct--blue-10` | RGB(11, 139, 128) |
+| `--gct--blue-11` | RGB(9, 122, 112) |
+| `--gct--blue-12` | RGB(8, 109, 100) |
+
+Switching is handled by `useThemeSetting` in `@gct-paas/core` — set `themeSetting.themeColor` to one of `THEME_COLORS` (`#026AC8` | `#0DAA9C`).
+
 ### Red (Danger)
 | Token | Value |
 |-------|-------|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gct-paas/scss",
-  "version": "0.1.6-dev.27",
+  "version": "0.1.6-dev.28",
   "type": "module",
   "loader": "dist/index.esm.min.js",
   "description": "paas 平台样式框架包",

package/style/theme/light/_blue-palettes.scss

@@ -0,0 +1,33 @@
+@use '../../global.scss' as *;
+
+// 默认主色 #026AC8
+@mixin blue-palette-blue {
+  #{getCssVarName(blue, 1)}: 246, 250, 253;
+  #{getCssVarName(blue, 2)}: 226, 238, 249;
+  #{getCssVarName(blue, 3)}: 200, 223, 243;
+  #{getCssVarName(blue, 4)}: 191, 216, 242;
+  #{getCssVarName(blue, 5)}: 144, 187, 233;
+  #{getCssVarName(blue, 6)}: 91, 156, 225;
+  #{getCssVarName(blue, 7)}: 48, 126, 210;
+  #{getCssVarName(blue, 8)}: 2, 106, 200;
+  #{getCssVarName(blue, 9)}: 2, 90, 170;
+  #{getCssVarName(blue, 10)}: 1, 75, 142;
+  #{getCssVarName(blue, 11)}: 1, 60, 114;
+  #{getCssVarName(blue, 12)}: 1, 48, 90;
+}
+
+// 青绿主色 #0DAA9C
+@mixin blue-palette-teal {
+  #{getCssVarName(blue, 1)}: 248, 252, 252;
+  #{getCssVarName(blue, 2)}: 233, 247, 246;
+  #{getCssVarName(blue, 3)}: 211, 240, 237;
+  #{getCssVarName(blue, 4)}: 207, 238, 235;
+  #{getCssVarName(blue, 5)}: 170, 225, 220;
+  #{getCssVarName(blue, 6)}: 134, 213, 206;
+  #{getCssVarName(blue, 7)}: 66, 189, 178;
+  #{getCssVarName(blue, 8)}: 13, 170, 156;
+  #{getCssVarName(blue, 9)}: 12, 156, 144;
+  #{getCssVarName(blue, 10)}: 11, 139, 128;
+  #{getCssVarName(blue, 11)}: 9, 122, 112;
+  #{getCssVarName(blue, 12)}: 8, 109, 100;
+}

package/style/theme/light/light-theme.scss

@@ -1,22 +1,11 @@
 @use '../../global.scss' as *;
+@use './blue-palettes' as *;
 
 .light, .light-theme {
   #{getCssVarName(color, white)}: white;
   #{getCssVarName(color, black)}: black;
 
-  // 主色
-  #{getCssVarName(blue, 1)}: 246, 250, 253;
-  #{getCssVarName(blue, 2)}: 226, 238, 249;
-  #{getCssVarName(blue, 3)}: 200, 223, 243;
-  #{getCssVarName(blue, 4)}: 191, 216, 242;
-  #{getCssVarName(blue, 5)}: 144, 187, 233;
-  #{getCssVarName(blue, 6)}: 91, 156, 225;
-  #{getCssVarName(blue, 7)}: 48, 126, 210;
-  #{getCssVarName(blue, 8)}: 2, 106, 200;
-  #{getCssVarName(blue, 9)}: 2, 90, 170;
-  #{getCssVarName(blue, 10)}: 1, 75, 142;
-  #{getCssVarName(blue, 11)}: 1, 60, 114;
-  #{getCssVarName(blue, 12)}: 1, 48, 90;
+  @include blue-palette-blue;
 
   // 危险色
   #{getCssVarName(red, 1)}: 254, 236, 221;
@@ -280,3 +269,8 @@
   #{getCssVarName(z-index, l)}: 2000;
   #{getCssVarName(z-index, xl)}: 9999;
 }
+
+.light.theme-color-teal,
+.light-theme.theme-color-teal {
+  @include blue-palette-teal;
+}