@epxing/theme 0.0.0-stage → 5.3.0-beta.2

package/src/theme/utils/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'epx';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';

package/src/theme/utils/function.scss

@@ -0,0 +1,44 @@
+@import "config";
+
+/* BEM support Func
+ -------------------------- */
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + $state-prefix) {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}

package/src/theme/utils/mixins.scss

@@ -0,0 +1,354 @@
+@import "function";
+@import "./var.scss";
+
+/*****BEM*********/
+@mixin b($block) {
+  $B: $namespace+'-'+$block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block+$element-separator+$element+$modifierCombo} {
+        @content
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+$theme: (
+  purple: $--color-primary-purple,
+  palevioletred: $--color-primary-palevioletred,
+  forestgreen: $--color-primary-forestgreen,
+  deepblue: $--color-primary-deepblue,
+  orange: $--color-primary-orange,
+  skyblue: $--color-primary-skyblue,
+  aurorablue: $--color-primary-aurorablue,
+  tiffanyblue: $--color-primary-tiffanyblue,
+  tsinghuapurple:$--color-primary-tsinghuapurple,
+  creativeblue:$--color-primary-creativeblue,
+  njhkht:$--color-primary-njhkht,
+  custom: var(--color-primary)
+);
+
+// ⚠️ 本文件经 additionalData 注入到每个 scss 编译单元——只允许 @mixin/@function/$变量，
+// 禁止任何顶层 CSS 发射（会被复制 N 份进产物）。--color-primary 的 :root/[data-theme]
+// 定义块在 theme/tokens.scss（index.scss 只编译一次）。
+
+/* 主题色 mixin —— 已塌缩为 CSS 变量单条规则
+   原实现每个 mixin 经 @each 展开 12 套 [data-theme=x] 规则，346 个调用点 ≈4500 条规则，
+   是组件库 CSS 体积大头。现依赖上方每套主题的 --color-primary（RGB 三元组）：
+   透明度走 rgba(var(--color-primary), a)；混合色走原生 color-mix（同 EP tokens 先例，
+   平台 Chrome 支持）。签名不变，346 个调用点零改动。
+ -------------------------- */
+@mixin font_color_primary($opacity: 1, $color: $--color-primary) {
+  color: rgba(var(--color-primary), $opacity);
+  &:hover {
+    @include font_color_primary_mixin(.2)
+  }
+}
+
+@mixin font_color_primary_mixin($opacity: 1, $color: $--color-white) {
+  color: color-mix(in srgb, rgb(var(--color-primary)) #{(1 - $opacity) * 100%}, #fff);
+}
+
+@mixin bg_color_primary($opacity: 1, $color: $--color-primary) {
+  background-color: rgba(var(--color-primary), $opacity);
+}
+
+@mixin bg_color_primary_mixin($opacity: 1, $color: $--color-white) {
+  background-color: color-mix(in srgb, rgb(var(--color-primary)) #{(1 - $opacity) * 100%}, #fff);
+}
+
+@mixin border_color_primary($opacity: 1, $position: null, $color: $--color-primary) {
+  @if $position {
+    border-#{$position}-color: rgba(var(--color-primary), $opacity);
+  } @else {
+    border-color: rgba(var(--color-primary), $opacity);
+  }
+}
+
+@mixin border_color_primary_mixin($opacity: 1, $color: $--color-white) {
+  border-color: color-mix(in srgb, rgb(var(--color-primary)) #{(1 - $opacity) * 100%}, #fff);
+}
+
+@mixin stroke_color_primary($opacity: 1, $color: $--color-primary) {
+  stroke: rgba(var(--color-primary), $opacity);
+}
+
+@mixin border_primary($width: 1px, $position: null, $type: solid, $opacity: 1, $color: $--color-primary) {
+  @if $position {
+    border-#{$position}: $width $type rgba(var(--color-primary), $opacity);
+  } @else {
+    border: $width $type rgba(var(--color-primary), $opacity);
+  }
+}
+
+@mixin box_shadow_primary($hShadow, $vShadow, $blur, $spread, $opacity, $args...) {
+  box-shadow: $hShadow $vShadow $blur $spread rgba(var(--color-primary), $opacity) $args;
+}
+
+/* Break-points
+ -------------------------- */
+@mixin res($key, $map: $--breakpoints) {
+  // 循环断点Map，如果存在则返回
+  @if map-has-key($map, $key) {
+    @media only screen and #{inspect(map-get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefeined points: `#{$map}`";
+  }
+}
+
+/* Scrollbar
+ -------------------------- */
+@mixin scroll-bar {
+  $--scrollbar-thumb-background: #b4bccc;
+  $--scrollbar-track-background: #fff;
+
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+
+    &:horizontal {
+      height: 6px;
+    }
+
+    &-thumb {
+      border-radius: 5px;
+      width: 6px;
+      background: $--scrollbar-thumb-background;
+    }
+
+    &-corner {
+      background: $--scrollbar-track-background;
+    }
+
+    &-track {
+      background: $--scrollbar-track-background;
+
+      &-piece {
+        background: $--scrollbar-track-background;
+        width: 6px;
+      }
+    }
+  }
+}
+
+/* Placeholder
+ -------------------------- */
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content
+  }
+
+  &::-moz-placeholder {
+    @content
+  }
+
+  &:-ms-input-placeholder {
+    @content
+  }
+}
+
+/* BEM
+ -------------------------- */
+@mixin b($block) {
+  $B: $namespace+'-'+$block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+  $selector: &;
+  $interpolation: '';
+
+  @if $E-flag {
+    $interpolation: $element-separator + $E-flag;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$B+$interpolation+$modifier-separator+$modifier} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
+      @content
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block+$element-separator+$element+$modifierCombo} {
+        @content
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin extend-rule($name) {
+  @extend #{'%shared-'+$name};
+}
+
+@mixin share-rule($name) {
+  $rule-name: '%shared-'+$name;
+
+  @at-root #{$rule-name} {
+    @content
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content
+  }
+}
+
+
+// ── epx 设计令牌语义封装（P1，令牌定义见 theme/tokens.scss；本文件已全局注入免 import）──
+// 卡片容器：底色/圆角/内边距/边框 一把抓（暗黑自动跟随令牌）
+@mixin epx-card {
+  background: var(--epx-bg-card);
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+  padding: var(--epx-space-4);
+  color: var(--epx-text);
+}
+
+// 字号档位：s/base/l/xl（次要文字传 $secondary: true 带次要色）
+@mixin epx-text($size: base, $secondary: false) {
+  font-size: var(--epx-font-size-#{$size});
+  @if $secondary {
+    color: var(--epx-text-secondary);
+  } @else {
+    color: var(--epx-text);
+  }
+}

package/src/theme/utils/var.scss

@@ -0,0 +1,117 @@
+// 默认主题色
+$--color-primary: #0874E7!default; 
+// 薰衣草紫主题色
+$--color-primary-purple: #7569E2!default;
+// 霞红主题色
+$--color-primary-palevioletred: #CE4545!default;
+// 森绿主题色
+$--color-primary-forestgreen: #3D8A50!default;
+// 海蓝主题色
+$--color-primary-deepblue: #0F5FBD!default;
+// 橙橘
+$--color-primary-orange: #EA6000!default;
+// 星空蓝
+$--color-primary-skyblue: #1A4586!default;
+// 极光蓝
+$--color-primary-aurorablue: #383B9E!default;
+// 蒂芙尼蓝
+$--color-primary-tiffanyblue: #00AAAD!default;
+// 清华紫
+$--color-primary-tsinghuapurple: #5F2167!default;
+// 创想蓝
+$--color-primary-creativeblue: #418CFF!default;
+// 南京航空航天主题色
+$--color-primary-njhkht: #1D2088!default;
+// 成功色
+$--color-success: #67C23A !default;
+// 警告色
+$--color-warning: #E6A23C !default;
+// 危险色
+$--color-danger: #F56C6C !default;
+// color|1|Background Color|4
+$--color-white: #FFFFFF !default;
+/// color|1|Background Color|4
+$--color-black: #000000 !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+// 默认文本色
+$--color-text-primary: #333 !default;
+// 文本辅助色
+$--color-text-regular: #666 !default;
+// 次要文本色
+$--color-text-secondary: #999 !default;
+// 提示色
+$--color-text-placeholder: #C0C4CC !default;
+
+// 边框色
+$--border-color-base: #E3E3E3 !default;
+/// color|1|Border Color|3
+$--border-color-light: #E4E7ED !default;
+/// color|1|Border Color|3
+$--border-color-lighter: #EBEEF5 !default;
+/// color|1|Border Color|3
+$--border-color-extra-light: #F2F6FC !default;
+
+// 背景色
+$--background-color-base: #F5F7FA !default;
+
+/* 链接颜色
+-------------------------- */
+$--link-color: $--color-primary-light-2 !default;
+$--link-hover-color: $--color-primary !default;
+
+/* Border
+-------------------------- */
+$--border-width-base: 1px !default;
+$--border-style-base: solid !default;
+$--border-color-hover: $--color-text-placeholder !default;
+$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
+/// borderRadius|1|Radius|0
+$--border-radius-base: 4px !default;
+/// borderRadius|1|Radius|0
+$--border-radius-small: 2px !default;
+/// borderRadius|1|Radius|0
+$--border-radius-circle: 100% !default;
+/// borderRadius|1|Radius|0
+$--border-radius-zero: 0 !default;
+
+// 字体大小
+/// fontSize|1|Font Size|0
+$--font-size-extra-large: 20px !default;
+/// fontSize|1|Font Size|0
+$--font-size-large: 18px !default;
+/// fontSize|1|Font Size|0
+$--font-size-medium: 16px !default;
+/// fontSize|1|Font Size|0
+$--font-size-base: 14px !default;
+/// fontSize|1|Font Size|0
+$--font-size-small: 13px !default;
+/// fontSize|1|Font Size|0
+$--font-size-extra-small: 12px !default;
+/// fontLineHeight|1|Line Height|2
+$--font-line-height-primary: 24px !default;
+/// fontLineHeight|1|Line Height|2
+$--font-line-height-secondary: 16px !default;
+$--font-color-disabled-base: #bbb !default;
+
+// 默认内边距
+$--padding-base: 16px!default;
+// 小边距
+$--padding-small: 10px!default;
+// 大边距
+$--padding-large: 24px!default;
+
+// 默认外边距
+$--margin-base: 16px!default;
+// 小边距
+$--margin-small: 10px!default;
+// 大边距
+$--margin-large: 24px!default;