@gct-paas/scss 0.0.1-dev.9 → 0.0.1

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

@@ -0,0 +1,262 @@
+@use '../../global.scss' as *;
+
+:root.light {
+  #{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;
+
+  // 危险色
+  #{getCssVarName(red, 1)}: 254, 236, 221;
+  #{getCssVarName(red, 2)}: 252, 197, 198;
+  #{getCssVarName(red, 3)}: 250, 169, 170;
+  #{getCssVarName(red, 4)}: 248, 130, 132;
+  #{getCssVarName(red, 5)}: 247, 106, 108;
+  #{getCssVarName(red, 6)}: 245, 69, 71;
+  #{getCssVarName(red, 7)}: 219, 34, 28;
+  #{getCssVarName(red, 8)}: 197, 31, 25;
+  #{getCssVarName(red, 9)}: 164, 26, 21;
+  #{getCssVarName(red, 10)}: 131, 20, 17;
+  #{getCssVarName(red, 11)}: 99, 15, 13;
+  #{getCssVarName(red, 12)}: 77, 12, 10;
+
+  // 成功色
+  #{getCssVarName(green, 1)}: 237, 249, 239;
+  #{getCssVarName(green, 2)}: 211, 241, 216;
+  #{getCssVarName(green, 3)}: 176, 230, 185;
+  #{getCssVarName(green, 4)}: 140, 219, 152;
+  #{getCssVarName(green, 5)}: 105, 208, 121;
+  #{getCssVarName(green, 6)}: 72, 198, 92;
+  #{getCssVarName(green, 7)}: 65, 178, 83;
+  #{getCssVarName(green, 8)}: 58, 158, 74;
+  #{getCssVarName(green, 9)}: 54, 149, 69;
+  #{getCssVarName(green, 10)}: 43, 119, 55;
+  #{getCssVarName(green, 11)}: 32, 89, 41;
+  #{getCssVarName(green, 12)}: 25, 69, 32;
+
+  // 警告色
+  #{getCssVarName(orange, 1)}: 255, 244, 236;
+  #{getCssVarName(orange, 2)}: 255, 229, 210;
+  #{getCssVarName(orange, 3)}: 255, 209, 174;
+  #{getCssVarName(orange, 4)}: 255, 188, 136;
+  #{getCssVarName(orange, 5)}: 255, 167, 100;
+  #{getCssVarName(orange, 6)}: 255, 148, 66;
+  #{getCssVarName(orange, 7)}: 230, 133, 59;
+  #{getCssVarName(orange, 8)}: 204, 118, 53;
+  #{getCssVarName(orange, 9)}: 191, 111, 50;
+  #{getCssVarName(orange, 10)}: 153, 89, 40;
+  #{getCssVarName(orange, 11)}: 115, 67, 30;
+  #{getCssVarName(orange, 12)}: 89, 52, 23;
+
+  // 品牌灰度
+  #{getCssVarName(pr-gray, 1)}: 252, 252, 253;
+  #{getCssVarName(pr-gray, 2)}: 249, 250, 251;
+  #{getCssVarName(pr-gray, 3)}: 242, 245, 248;
+  #{getCssVarName(pr-gray, 4)}: 224, 227, 234;
+  #{getCssVarName(pr-gray, 5)}: 202, 207, 216;
+  #{getCssVarName(pr-gray, 6)}: 169, 175, 188;
+  #{getCssVarName(pr-gray, 7)}: 134, 138, 150;
+  #{getCssVarName(pr-gray, 8)}: 113, 118, 131;
+  #{getCssVarName(pr-gray, 9)}: 90, 95, 107;
+  #{getCssVarName(pr-gray, 10)}: 67, 72, 85;
+  #{getCssVarName(pr-gray, 11)}: 44, 51, 68;
+  #{getCssVarName(pr-gray, 12)}: 26, 29, 35;
+
+  // 灰色
+  #{getCssVarName(gray, 1)}: 255, 255, 255;
+  #{getCssVarName(gray, 2)}: 243, 243, 243;
+  #{getCssVarName(gray, 3)}: 232, 232, 232;
+  #{getCssVarName(gray, 4)}: 221, 221, 221;
+  #{getCssVarName(gray, 5)}: 198, 198, 198;
+  #{getCssVarName(gray, 6)}: 166, 166, 166;
+  #{getCssVarName(gray, 7)}: 139, 139, 139;
+  #{getCssVarName(gray, 8)}: 119, 119, 119;
+  #{getCssVarName(gray, 9)}: 94, 94, 94;
+  #{getCssVarName(gray, 10)}: 71, 71, 71;
+  #{getCssVarName(gray, 11)}: 56, 56, 56;
+  #{getCssVarName(gray, 12)}: 36, 36, 36;
+
+  // 主要颜色
+  #{getCssVarName(color, primary)}: rgba(var(#{getCssVarName(blue, 8)}), 1);
+  #{getCssVarName(color, primary, hover)}: rgba(var(#{getCssVarName(blue, 9)}), 1);
+  #{getCssVarName(color, primary, active)}: rgba(var(#{getCssVarName(blue, 10)}), 1);
+  #{getCssVarName(color, primary, disabled)}: rgba(var(#{getCssVarName(blue, 4)}), 1);
+  #{getCssVarName(color, primary, light)}: rgba(var(#{getCssVarName(blue, 1)}), 1);
+  #{getCssVarName(color, primary, light, hover)}: rgba(var(#{getCssVarName(blue, 2)}), 1);
+  #{getCssVarName(color, primary, light, active)}: rgba(var(#{getCssVarName(blue, 3)}), 1);
+
+  // 第二颜色
+  // #{getCssVarName(color, secondary)}: rgba(var(#{getCssVarName(pr-gray, 10)}), 1);
+  // #{getCssVarName(color, secondary, hover)}: rgba(var(#{getCssVarName(pr-gray, 11)}), 1);
+  // #{getCssVarName(color, secondary, active)}: rgba(var(#{getCssVarName(pr-gray, 12)}), 1);
+  // #{getCssVarName(color, secondary, disabled)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
+  // #{getCssVarName(color, secondary, light)}: rgba(var(#{getCssVarName(pr-gray, 4)}), 1);
+  // #{getCssVarName(color, secondary, light, hover)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
+  // #{getCssVarName(color, secondary, light, active)}: rgba(var(#{getCssVarName(pr-gray, 6)}), 1);
+
+  // 第三颜色
+  #{getCssVarName(color, tertiary)}: rgba(var(#{getCssVarName(pr-gray, 5)}), 1);
+  #{getCssVarName(color, tertiary, hover)}: rgba(var(#{getCssVarName(pr-gray, 6)}), 1);
+  #{getCssVarName(color, tertiary, active)}: rgba(var(#{getCssVarName(pr-gray, 7)}), 1);
+  #{getCssVarName(color, tertiary, light)}: rgba(var(#{getCssVarName(pr-gray, 1)}), 1);
+  #{getCssVarName(color, tertiary, light, hover)}: rgba(var(#{getCssVarName(pr-gray, 2)}), 1);
+  #{getCssVarName(color, tertiary, light, active)}: rgba(var(#{getCssVarName(pr-gray, 3)}), 1);
+
+  // 信息色
+  #{getCssVarName(color, info)}: rgba(var(#{getCssVarName(blue, 8)}), 1);
+  #{getCssVarName(color, info, hover)}: rgba(var(#{getCssVarName(blue, 9)}), 1);
+  #{getCssVarName(color, info, active)}: rgba(var(#{getCssVarName(blue, 10)}), 1);
+  #{getCssVarName(color, info, disabled)}: rgba(var(#{getCssVarName(blue, 4)}), 1);
+  #{getCssVarName(color, info, light)}: rgba(var(#{getCssVarName(blue, 1)}), 1);
+  #{getCssVarName(color, info, light, hover)}: rgba(var(#{getCssVarName(blue, 2)}), 1);
+  #{getCssVarName(color, info, light, active)}: rgba(var(#{getCssVarName(blue, 3)}), 1);
+
+  // 成功色
+  #{getCssVarName(color, success)}: rgba(var(#{getCssVarName(green, 6)}), 1);
+  #{getCssVarName(color, success, hover)}: rgba(var(#{getCssVarName(green, 7)}), 1);
+  #{getCssVarName(color, success, active)}: rgba(var(#{getCssVarName(green, 8)}), 1);
+  #{getCssVarName(color, success, disabled)}: rgba(var(#{getCssVarName(green, 3)}), 1);
+  #{getCssVarName(color, success, light)}: rgba(var(#{getCssVarName(green, 1)}), 1);
+  #{getCssVarName(color, success, light, hover)}: rgba(var(#{getCssVarName(green, 2)}), 1);
+  #{getCssVarName(color, success, light, active)}: rgba(var(#{getCssVarName(green, 3)}), 1);
+
+  // 警示色
+  #{getCssVarName(color, warning)}: rgba(var(#{getCssVarName(orange, 6)}),1);
+  #{getCssVarName(color, warning, hover)}: rgba(var(#{getCssVarName(orange, 7)}),1);
+  #{getCssVarName(color, warning, active)}: rgba(var(#{getCssVarName(orange, 8)}),1);
+  #{getCssVarName(color, warning, disabled)}: rgba(var(#{getCssVarName(orange, 4)}),1);
+  #{getCssVarName(color, warning, light, default)}: rgba(var(#{getCssVarName(orange, 1)}),1);
+  #{getCssVarName(color, warning, light, hover)}: rgba(var(#{getCssVarName(orange, 2)}),1);
+  #{getCssVarName(color, warning, light, active)}: rgba(var(#{getCssVarName(orange, 3)}),1);
+
+  // 危险色
+  #{getCssVarName(color, danger)}: rgba(var(#{getCssVarName(red, 6)}),1);
+  #{getCssVarName(color, danger, hover)}: rgba(var(#{getCssVarName(red, 7)}),1);
+  #{getCssVarName(color, danger, active)}: rgba(var(#{getCssVarName(red, 8)}),1);
+  #{getCssVarName(color, danger, disabled)}: rgba(var(#{getCssVarName(red, 4)}),1);
+  #{getCssVarName(color, danger, light, default)}: rgba(var(#{getCssVarName(red, 1)}),1);
+  #{getCssVarName(color, danger, light, hover)}: rgba(var(#{getCssVarName(red, 2)}),1);
+  #{getCssVarName(color, danger, light, active)}: rgba(var(#{getCssVarName(red, 3)}),1);
+
+  // 文本/图标颜色
+  #{getCssVarName(color, text)}: rgba(var(#{getCssVarName(gray, 1)}),1);
+  #{getCssVarName(color, text, 1)}: rgba(var(#{getCssVarName(gray, 12)}),1);
+  #{getCssVarName(color, text, 2)}: rgba(var(#{getCssVarName(gray, 11)}),1);
+  #{getCssVarName(color, text, 3)}: rgba(var(#{getCssVarName(gray, 10)}),1);
+  #{getCssVarName(color, text, 4)}: rgba(var(#{getCssVarName(gray, 7)}),1);
+  #{getCssVarName(color, text, 5)}: rgba(var(#{getCssVarName(gray, 5)}),1);
+  #{getCssVarName(color, text, 6)}: rgba(var(#{getCssVarName(blue, 6)}),1);
+
+  // 链接颜色
+  #{getCssVarName(color, link)}: rgba(var(#{getCssVarName(blue, 8)}),1);
+  #{getCssVarName(color, link, hover)}: rgba(var(#{getCssVarName(blue, 9)}),1);
+  #{getCssVarName(color, link, active)}: rgba(var(#{getCssVarName(blue, 10)}),1);
+  #{getCssVarName(color, link, visited)}: rgba(var(#{getCssVarName(blue, 10)}),1);
+  #{getCssVarName(color, link, disabled)}: rgba(var(#{getCssVarName(blue, 4)}),1);
+
+  // 背景色
+  #{getCssVarName(color, bg, 1)}: rgba(var(#{getCssVarName(pr-gray, 1)}),1);
+  #{getCssVarName(color, bg, 2)}: rgba(var(#{getCssVarName(pr-gray, 2)}),1);
+  #{getCssVarName(color, bg, 3)}: rgba(var(#{getCssVarName(pr-gray, 3)}),1);
+  #{getCssVarName(color, bg, 4)}: rgba(var(#{getCssVarName(gray, 1)}),1);
+  #{getCssVarName(color, bg, 5)}: rgba(var(#{getCssVarName(pr-gray, 4)}),1);
+  #{getCssVarName(color, bg, 6)}: rgba(var(#{getCssVarName(pr-gray, 5)}),0.5);
+
+  // 描边色
+  #{getCssVarName(color, border)}: rgba(var(#{getCssVarName(gray, 4)}),1);
+  #{getCssVarName(color, border, hover)}: rgba(var(#{getCssVarName(blue, 8)}),1);
+  #{getCssVarName(color, border, active)}: rgba(var(#{getCssVarName(blue, 9)}),1);
+  #{getCssVarName(color, border, disabled)}: rgba(var(#{getCssVarName(gray, 4)}),1);
+
+  // 圆角
+  #{getCssVarName(border, radius, xs)}: 2px;
+  #{getCssVarName(border, radius, s)}: 4px;
+  #{getCssVarName(border, radius, m)}: 6px;
+  #{getCssVarName(border, radius, l)}: 8px;
+  #{getCssVarName(border, radius, xl)}: 10px;
+  #{getCssVarName(border, radius, xxl)}: 12px;
+  #{getCssVarName(border, radius, circle)}: 50%;
+  #{getCssVarName(border, radius, full)}: 9999px;
+
+  // 描边尺寸
+  #{getCssVarName(border, thickness, s)}: 1px;
+  #{getCssVarName(border, thickness, m)}: 2px;
+  #{getCssVarName(border, thickness, l)}: 4px;
+  #{getCssVarName(border, thickness, xl)}: 6px;
+  #{getCssVarName(border, thickness, xxl)}: 8px;
+
+  // 图标尺寸
+  #{getCssVarName(icon, xs)}: 8px;
+  #{getCssVarName(icon, s)}: 12px;
+  #{getCssVarName(icon, m)}: 12px;
+  #{getCssVarName(icon, l)}: 12px;
+  #{getCssVarName(icon, xl)}: 12px;
+
+  // 间距
+  #{getCssVarName(spacing, 1)}: 2px;
+  #{getCssVarName(spacing, 2)}: 4px;
+  #{getCssVarName(spacing, 3)}: 6px;
+  #{getCssVarName(spacing, 4)}: 8px;
+  #{getCssVarName(spacing, 5)}: 10px;
+  #{getCssVarName(spacing, 6)}: 12px;
+  #{getCssVarName(spacing, 7)}: 16px;
+  #{getCssVarName(spacing, 8)}: 20px;
+  #{getCssVarName(spacing, 9)}: 24px;
+  #{getCssVarName(spacing, 10)}: 28px;
+  #{getCssVarName(spacing, 11)}: 32px;
+  #{getCssVarName(spacing, 12)}: 36px;
+
+  // padding
+  #{getCssVarName(padding, 1)}: 2px;
+  #{getCssVarName(padding, 2)}: 4px;
+  #{getCssVarName(padding, 3)}: 6px;
+  #{getCssVarName(padding, 4)}: 8px;
+  #{getCssVarName(padding, 5)}: 10px;
+  #{getCssVarName(padding, 6)}: 12px;
+  #{getCssVarName(padding, 7)}: 16px;
+  #{getCssVarName(padding, 8)}: 20px;
+  #{getCssVarName(padding, 9)}: 24px;
+  #{getCssVarName(padding, 10)}: 28px;
+  #{getCssVarName(padding, 11)}: 32px;
+  #{getCssVarName(padding, 12)}: 36px;
+
+  // 字体大小
+  #{getCssVarName(font, 1)}: 10px;
+  #{getCssVarName(font, 2)}: 12px;
+  #{getCssVarName(font, 3)}: 14px;
+  #{getCssVarName(font, 4)}: 16px;
+  #{getCssVarName(font, 5)}: 18px;
+  #{getCssVarName(font, 6)}: 20px;
+  #{getCssVarName(font, 7)}: 22px;
+  #{getCssVarName(font, 8)}: 24px;
+  #{getCssVarName(font, 9)}: 28px;
+  #{getCssVarName(font, 10)}: 32px;
+  #{getCssVarName(font, 11)}: 36px;
+  #{getCssVarName(font, 12)}: 40px;
+
+  // line-height ps: 和字体大小一一对应
+  #{getCssVarName(line, height, 1)}: 14px;
+  #{getCssVarName(line, height, 2)}: 16px;
+  #{getCssVarName(line, height, 3)}: 22px;
+  #{getCssVarName(line, height, 4)}: 24px;
+  #{getCssVarName(line, height, 5)}: 26px;
+  #{getCssVarName(line, height, 6)}: 28px;
+  #{getCssVarName(line, height, 7)}: 30px;
+  #{getCssVarName(line, height, 8)}: 32px;
+  #{getCssVarName(line, height, 9)}: 36px;
+  #{getCssVarName(line, height, 10)}: 42px;
+  #{getCssVarName(line, height, 11)}: 48px;
+  #{getCssVarName(line, height, 12)}: 54px;
+}

package/style/tools/utils.scss

@@ -1,3 +1,5 @@
+@use './function.scss' as *;
+
 // 完全容器居中
 @mixin flex-center {
   display: flex;
@@ -12,6 +14,79 @@
   white-space: nowrap;
 }
 
+// 字体大小与行高匹配复用
+@mixin font-1 {
+  font-size: 10px;
+  line-height: 14px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-2 {
+  font-size: 12px;
+  line-height: 16px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-3 {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-4 {
+  font-size: 16px;
+  line-height: 24px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-5 {
+  font-size: 18px;
+  line-height: 26px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-6 {
+  font-size: 20px;
+  line-height: 28px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-7 {
+  font-size: 22px;
+  line-height: 30px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-8 {
+  font-size: 24px;
+  line-height: 32px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-9 {
+  font-size: 28px;
+  line-height: 36px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-10 {
+  font-size: 32px;
+  line-height: 42px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-11 {
+  font-size: 36px;
+  line-height: 48px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
+@mixin font-12 {
+  font-size: 40px;
+  line-height: 54px;
+  color: rgb(#{getCssVar(pr-gray, 12)});
+}
+
 // flex样式复用
 @mixin flex(
   $direction: row,
@@ -55,7 +130,8 @@
 }
 
 // 超出自动换行，识别换行空白符
-@mixin overflow-wrap{
+@mixin overflow-wrap {
+  /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
   word-break: break-word;
   white-space: pre-wrap;
 }