@rainbow-oh/yee-c 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "yee basic components",
   "keywords": [
     "react",
@@ -39,6 +39,7 @@
     "./color.blue.css": "./dist/esm/style/color.blue.css",
     "./color.crimson.css": "./dist/esm/style/color.crimson.css",
     "./color.dark.css": "./dist/esm/style/color.dark.css",
+    "./color.gemini.css": "./dist/esm/style/color.gemini.css",
     "./color.green.css": "./dist/esm/style/color.green.css",
     "./color.jam.css": "./dist/esm/style/color.jam.css",
     "./color.navy.css": "./dist/esm/style/color.navy.css",
@@ -137,9 +138,10 @@
     "doctor": "father doctor",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
-    "lint": "npm run lint:es && npm run lint:css",
+    "lint": "npm run lint:es && npm run lint:css && npm run lint:tokens",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\" --ignore-pattern \"src/style/color.*.css\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "lint:tokens": "node scripts/check-token-naming.js",
     "start": "npm run dev",
     "test": "vitest run",
     "watch": "father dev"

package/src/Anchor/style/index.less

@@ -207,15 +207,15 @@
     }
 
     &-error {
-      color: var(--yee-error-color);
+      color: var(--yee-color-error);
     }
 
     &-success {
-      color: var(--yee-success-color);
+      color: var(--yee-color-success);
     }
 
     &-warning {
-      color: var(--yee-warning-color);
+      color: var(--yee-color-warning);
     }
 
     &:hover {

package/src/Button/style/index.less

@@ -62,15 +62,23 @@
 
   // 背景颜色，字体白色
   &-solid {
-    color: var(--yee-btn-primary-color);
+    color: var(--yee-btn-solid-color);
     background-color: var(--m-btn-color);
 
     &:not(@{pls}-disabled):hover {
-      background-color: color-mix(in srgb, var(--m-btn-color), black 12%);
+      background-color: color-mix(
+        in srgb,
+        var(--m-btn-color),
+        black var(--yee-btn-solid-hover-darken)
+      );
     }
 
     &:not(@{pls}-disabled):active {
-      background-color: color-mix(in srgb, var(--m-btn-color), black 20%);
+      background-color: color-mix(
+        in srgb,
+        var(--m-btn-color),
+        black var(--yee-btn-solid-active-darken)
+      );
       box-shadow: var(--yee-btn-solid-active-box-shadow)
         var(--m-btn-active-shadow-color);
     }
@@ -79,14 +87,26 @@
   // 字体颜色，背景是字体颜色的浅色
   &-filled {
     color: var(--m-btn-color);
-    background-color: color-mix(in srgb, var(--m-btn-color) 10%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--m-btn-color) var(--yee-btn-filled-bg-alpha),
+      transparent
+    );
 
     &:not(@{pls}-disabled):hover {
-      background-color: color-mix(in srgb, var(--m-btn-color) 16%, transparent);
+      background-color: color-mix(
+        in srgb,
+        var(--m-btn-color) var(--yee-btn-filled-hover-bg-alpha),
+        transparent
+      );
     }
 
     &:not(@{pls}-disabled):active {
-      background-color: color-mix(in srgb, var(--m-btn-color) 22%, transparent);
+      background-color: color-mix(
+        in srgb,
+        var(--m-btn-color) var(--yee-btn-filled-active-bg-alpha),
+        transparent
+      );
     }
   }
 
@@ -153,67 +173,67 @@
   }
 
   // ---- color ------
+  // 颜色维度只负责把 token 映射到局部槽位，变体决定这些槽怎么用
   &-default {
-    --m-btn-color: var(--yee-text-color);
-    --m-btn-hover-color: var(--yee-primary-color);
-    --m-btn-border-color: var(--yee-border-color);
-    --m-btn-border-hover-color: var(--yee-primary-color);
+    --m-btn-color: var(--yee-btn-default-color);
+    --m-btn-hover-color: var(--yee-btn-default-hover-color);
+    --m-btn-active-color: var(--yee-btn-default-active-color);
     --m-btn-bg-color: var(--yee-btn-default-bg-color);
-    --m-btn-hover-bg-color: var(--yee-text-color-auxiliary);
-    --m-btn-border-active-color: var(--yee-primary-color-active);
-    --m-btn-active-color: var(--yee-primary-color-active);
-    --m-btn-active-bg-color: var(--yee-text-color-auxiliary);
-    --m-btn-active-shadow-color: var(--yee-primary-color-active);
+    --m-btn-hover-bg-color: var(--yee-btn-default-hover-bg-color);
+    --m-btn-active-bg-color: var(--yee-btn-default-active-bg-color);
+    --m-btn-border-color: var(--yee-btn-default-border-color);
+    --m-btn-border-hover-color: var(--yee-btn-default-hover-border-color);
+    --m-btn-border-active-color: var(--yee-btn-default-active-border-color);
+    --m-btn-active-shadow-color: var(--yee-btn-default-active-shadow-color);
   }
 
   &-primary {
-    --m-btn-color: var(--yee-primary-color);
-    --m-btn-hover-color: var(--yee-primary-color-hover);
-    --m-btn-active-color: var(--yee-primary-color-active);
+    --m-btn-color: var(--yee-btn-primary-color);
+    --m-btn-hover-color: var(--yee-btn-primary-hover-color);
+    --m-btn-active-color: var(--yee-btn-primary-active-color);
     --m-btn-bg-color: var(--yee-btn-primary-bg-color);
-    --m-btn-hover-bg-color: var(--yee-primary-color-border);
-    --m-btn-active-bg-color: var(--yee-primary-color-active);
-    --m-btn-border-color: var(--yee-primary-color);
-    --m-btn-border-hover-color: var(--yee-primary-color-hover);
-    --m-btn-border-active-color: var(--yee-primary-color-active);
-    --m-btn-active-shadow-color: var(--yee-primary-color-active);
+    --m-btn-hover-bg-color: var(--yee-btn-primary-hover-bg-color);
+    --m-btn-active-bg-color: var(--yee-btn-primary-active-bg-color);
+    --m-btn-border-color: var(--yee-btn-primary-border-color);
+    --m-btn-border-hover-color: var(--yee-btn-primary-hover-border-color);
+    --m-btn-border-active-color: var(--yee-btn-primary-active-border-color);
+    --m-btn-active-shadow-color: var(--yee-btn-primary-active-shadow-color);
   }
 
   &-success {
-    --m-btn-color: var(--yee-success-color);
-    --m-btn-hover-color: var(--yee-success-color-hover);
-    --m-btn-active-color: var(--yee-success-color-active);
-    --m-btn-border-color: var(--yee-success-color);
-    --m-btn-border-hover-color: var(--yee-success-color-hover);
-    --m-btn-border-active-color: var(--yee-success-color-active);
-    --m-btn-hover-bg-color: var(--yee-success-color-border);
-    --m-btn-active-bg-color: var(--yee-success-color-active);
-    --m-btn-active-shadow-color: var(--yee-success-color-active);
+    --m-btn-color: var(--yee-btn-success-color);
+    --m-btn-hover-color: var(--yee-btn-success-hover-color);
+    --m-btn-active-color: var(--yee-btn-success-active-color);
+    --m-btn-hover-bg-color: var(--yee-btn-success-hover-bg-color);
+    --m-btn-active-bg-color: var(--yee-btn-success-active-bg-color);
+    --m-btn-border-color: var(--yee-btn-success-border-color);
+    --m-btn-border-hover-color: var(--yee-btn-success-hover-border-color);
+    --m-btn-border-active-color: var(--yee-btn-success-active-border-color);
+    --m-btn-active-shadow-color: var(--yee-btn-success-active-shadow-color);
   }
 
   &-danger {
-    --m-btn-color: var(--yee-error-color);
-    --m-btn-hover-color: var(--yee-error-color-hover);
-    --m-btn-active-color: var(--yee-error-color-active);
-    --m-btn-border-color: var(--yee-error-color);
-    --m-btn-border-hover-color: var(--yee-error-color-hover);
-    --m-btn-border-active-color: var(--yee-error-color-active);
-    // --m-btn-hover-bg-color: var(--yee-error-color-hover);
-    --m-btn-hover-bg-color: var(--yee-error-color-border);
-    --m-btn-active-bg-color: var(--yee-error-color-active);
-    --m-btn-active-shadow-color: var(--yee-error-color-active);
+    --m-btn-color: var(--yee-btn-danger-color);
+    --m-btn-hover-color: var(--yee-btn-danger-hover-color);
+    --m-btn-active-color: var(--yee-btn-danger-active-color);
+    --m-btn-hover-bg-color: var(--yee-btn-danger-hover-bg-color);
+    --m-btn-active-bg-color: var(--yee-btn-danger-active-bg-color);
+    --m-btn-border-color: var(--yee-btn-danger-border-color);
+    --m-btn-border-hover-color: var(--yee-btn-danger-hover-border-color);
+    --m-btn-border-active-color: var(--yee-btn-danger-active-border-color);
+    --m-btn-active-shadow-color: var(--yee-btn-danger-active-shadow-color);
   }
 
   &-warning {
-    --m-btn-color: var(--yee-warning-color);
-    --m-btn-hover-color: var(--yee-warning-color-hover);
-    --m-btn-active-color: var(--yee-warning-color-active);
-    --m-btn-border-color: var(--yee-warning-color);
-    --m-btn-border-hover-color: var(--yee-warning-color-hover);
-    --m-btn-border-active-color: var(--yee-warning-color-active);
-    --m-btn-hover-bg-color: var(--yee-warning-color-border);
-    --m-btn-active-bg-color: var(--yee-warning-color-active);
-    --m-btn-active-shadow-color: var(--yee-warning-color-active);
+    --m-btn-color: var(--yee-btn-warning-color);
+    --m-btn-hover-color: var(--yee-btn-warning-hover-color);
+    --m-btn-active-color: var(--yee-btn-warning-active-color);
+    --m-btn-hover-bg-color: var(--yee-btn-warning-hover-bg-color);
+    --m-btn-active-bg-color: var(--yee-btn-warning-active-bg-color);
+    --m-btn-border-color: var(--yee-btn-warning-border-color);
+    --m-btn-border-hover-color: var(--yee-btn-warning-hover-border-color);
+    --m-btn-border-active-color: var(--yee-btn-warning-active-border-color);
+    --m-btn-active-shadow-color: var(--yee-btn-warning-active-shadow-color);
   }
 
   &-disabled {

package/src/DatePicker/style/mobile.less

@@ -68,7 +68,7 @@
     position: absolute;
     left: 4px;
     right: 4px;
-    border: 1px solid var(--yee-primary-color, #1677ff);
+    border: 1px solid var(--yee-color-primary, #1677ff);
     border-right: none;
     border-left: none;
     background: rgba(22, 119, 255, 4%);

package/src/Descriptions/style/index.less

@@ -3,7 +3,7 @@
 @{pls} {
   font-size: var(--yee-descriptions-font-size, 14px);
   line-height: var(--yee-descriptions-line-height, 1.5714);
-  color: var(--yee-descriptions-color, var(--yee-text-color));
+  color: var(--yee-descriptions-color, var(--yee-color-text));
 
   &-header {
     display: flex;
@@ -14,7 +14,7 @@
   &-title {
     flex: 1;
     overflow: hidden;
-    color: var(--yee-descriptions-title-color, var(--yee-text-color));
+    color: var(--yee-descriptions-title-color, var(--yee-color-text));
     font-weight: var(--yee-descriptions-title-font-weight, 600);
     font-size: var(--yee-descriptions-title-font-size, 16px);
     white-space: nowrap;
@@ -23,7 +23,7 @@
 
   &-extra {
     margin-left: auto;
-    color: var(--yee-descriptions-extra-color, var(--yee-text-color));
+    color: var(--yee-descriptions-extra-color, var(--yee-color-text));
     font-size: var(--yee-descriptions-extra-font-size, 14px);
   }
 
@@ -44,7 +44,7 @@
     padding: var(--yee-descriptions-label-padding, 12px 16px 12px 0);
     color: var(
       --yee-descriptions-label-color,
-      var(--yee-text-color-description)
+      var(--yee-color-text-description)
     );
     font-weight: normal;
     font-size: inherit;
@@ -55,7 +55,7 @@
 
   &-item-content {
     padding: var(--yee-descriptions-content-padding, 12px 0);
-    color: var(--yee-descriptions-content-color, var(--yee-text-color));
+    color: var(--yee-descriptions-content-color, var(--yee-color-text));
     font-weight: normal;
     font-size: inherit;
     line-height: inherit;
@@ -66,7 +66,7 @@
     padding: var(--yee-descriptions-vertical-label-padding, 8px 0);
     color: var(
       --yee-descriptions-label-color,
-      var(--yee-text-color-description)
+      var(--yee-color-text-description)
     );
   }
 

package/src/FloatButton/style/index.less

@@ -112,11 +112,11 @@
 //     position: absolute;
 //     top: 48px;
 //     z-index: 999;
-//     max-height: var(--yee-float-button-menu-container-max-height, 251px);
+//     max-height: var(--yee-float-btn-menu-container-max-height, 251px);
 //     padding: 4px 0;
 //     overflow: auto;
 //     color: var(--yee-color-text);
-//     background-color: var(--yee-float-button-menu-bg-color);
+//     background-color: var(--yee-float-btn-menu-bg-color);
 //     border-radius: 4px;
 //     box-shadow: 0 8px 24px 0 var(--yee-box-shadow-color);
 // }

package/src/Form/style/index.less

@@ -65,7 +65,7 @@
       margin-inline-start: 4px;
       color: var(
         --yee-form-item-tooltip-icon-color,
-        var(--yee-text-color-secondary, #999)
+        var(--yee-color-text-secondary, #999)
       );
       cursor: pointer;
     }
@@ -77,19 +77,19 @@
       position: absolute;
 
       &-error {
-        color: var(--yee-error-color);
+        color: var(--yee-color-error);
       }
 
       &-warning {
-        color: var(--yee-warning-color);
+        color: var(--yee-color-warning);
       }
 
       &-success {
-        color: var(--yee-success-color);
+        color: var(--yee-color-success);
       }
 
       &-info {
-        color: var(--yee-info-color);
+        color: var(--yee-color-info);
       }
     }
 
@@ -97,31 +97,31 @@
     // 后代里的 Input / Selector / InputNumber / TextArea 等通过 CSS 变量继承自动变色，
     // 无需在每个组件里重复 .yee-form-item-error 块，也不存在 specificity / !important 问题。
     &&-error {
-      --yee-input-border-color: var(--yee-error-color);
-      --yee-input-hover-border-color: var(--yee-error-color-hover);
-      --yee-input-focus-bs-color: var(--yee-error-color-border);
-      --yee-checkbox-border-color: var(--yee-error-color);
+      --yee-input-border-color: var(--yee-color-error);
+      --yee-input-hover-border-color: var(--yee-color-error-hover);
+      --yee-input-focus-bs-color: var(--yee-color-error-border);
+      --yee-checkbox-border-color: var(--yee-color-error);
     }
 
     &&-warning {
-      --yee-input-border-color: var(--yee-warning-color);
-      --yee-input-hover-border-color: var(--yee-warning-color-hover);
-      --yee-input-focus-bs-color: var(--yee-warning-color-border);
-      --yee-checkbox-border-color: var(--yee-warning-color);
+      --yee-input-border-color: var(--yee-color-warning);
+      --yee-input-hover-border-color: var(--yee-color-warning-hover);
+      --yee-input-focus-bs-color: var(--yee-color-warning-border);
+      --yee-checkbox-border-color: var(--yee-color-warning);
     }
 
     &&-success {
-      --yee-input-border-color: var(--yee-success-color);
-      --yee-input-hover-border-color: var(--yee-success-color-hover);
-      --yee-input-focus-bs-color: var(--yee-success-color-border);
-      --yee-checkbox-border-color: var(--yee-success-color);
+      --yee-input-border-color: var(--yee-color-success);
+      --yee-input-hover-border-color: var(--yee-color-success-hover);
+      --yee-input-focus-bs-color: var(--yee-color-success-border);
+      --yee-checkbox-border-color: var(--yee-color-success);
     }
 
     &&-info {
-      --yee-input-border-color: var(--yee-info-color);
-      --yee-input-hover-border-color: var(--yee-info-color-hover);
-      --yee-input-focus-bs-color: var(--yee-info-color-border);
-      --yee-checkbox-border-color: var(--yee-info-color);
+      --yee-input-border-color: var(--yee-color-info);
+      --yee-input-hover-border-color: var(--yee-color-info-hover);
+      --yee-input-focus-bs-color: var(--yee-color-info-border);
+      --yee-checkbox-border-color: var(--yee-color-info);
     }
   }
 }

package/src/ImageViewer/style/index.less

@@ -4,18 +4,18 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background: var(--yee-image-preview-viewer-bg-color);
+  background: var(--yee-image-viewer-viewer-bg-color);
   overflow: hidden;
 
   &-popup {
     position: fixed;
     inset: 0;
-    z-index: var(--yee-image-preview-popup-zindex);
+    z-index: var(--yee-image-viewer-popup-zindex);
 
     &-mask {
       position: absolute;
       inset: 0;
-      background-color: var(--yee-image-preview-mask-bg-color);
+      background-color: var(--yee-image-viewer-mask-bg-color);
     }
 
     &-content {
@@ -34,19 +34,19 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      color: var(--yee-image-preview-close-icon-color);
-      background-color: var(--yee-image-preview-close-icon-bg-color);
+      color: var(--yee-image-viewer-close-icon-color);
+      background-color: var(--yee-image-viewer-close-icon-bg-color);
       border: none;
       border-radius: 4px;
       cursor: pointer;
 
       &:hover {
-        color: var(--yee-image-preview-close-icon-hover-color);
+        color: var(--yee-image-viewer-close-icon-hover-color);
       }
 
       &:focus {
         outline-color: var(
-          --yee-image-preview-close-icon-focus-color,
+          --yee-image-viewer-close-icon-focus-color,
           var(--yee-tab-active-border-color)
         );
       }
@@ -69,29 +69,29 @@
     padding: 0 32px;
     border-radius: 24px;
     height: 48px;
-    background: var(--yee-image-preview-toolbar-bg-color);
+    background: var(--yee-image-viewer-toolbar-bg-color);
 
     .yee-btn {
       width: 20px;
       height: 20px;
-      color: var(--yee-image-preview-toolbar-color);
+      color: var(--yee-image-viewer-toolbar-color);
 
       &:not(.yee-btn-disabled):not(.yee-btn-loading):hover {
-        color: var(--yee-image-preview-toolbar-hover-color);
+        color: var(--yee-image-viewer-toolbar-hover-color);
       }
 
       &.yee-btn-disabled {
-        color: var(--yee-image-preview-toolbar-disabled-color);
+        color: var(--yee-image-viewer-toolbar-disabled-color);
       }
     }
 
     .yee-divider-vertical {
-      background-color: var(--yee-image-preview-toolbar-split-color);
+      background-color: var(--yee-image-viewer-toolbar-split-color);
     }
   }
 
   &-zoom {
-    color: var(--yee-image-preview-toolbar-zoom-color);
+    color: var(--yee-image-viewer-toolbar-zoom-color);
     display: inline-block;
     width: 48px;
     text-align: center;

package/src/Input/style/index.less

@@ -112,5 +112,5 @@ input[type='number']::-webkit-outer-spin-button {
 }
 
 input::placeholder {
-  color: var(--yee-placeholder-color);
+  color: var(--yee-color-placeholder);
 }

package/src/InputNumber/style/index.less

@@ -27,7 +27,7 @@
     display: inline-flex;
     align-items: center;
     margin-right: 4px;
-    color: var(--yee-text-color-description);
+    color: var(--yee-color-text-description);
   }
 
   &-suffix {
@@ -53,7 +53,7 @@
     outline: none;
 
     &::placeholder {
-      color: var(--yee-placeholder-color);
+      color: var(--yee-color-placeholder);
     }
   }
 
@@ -70,7 +70,7 @@
     transition: all 0.3s;
 
     &:hover {
-      color: var(--yee-text-color-secondary);
+      color: var(--yee-color-text-secondary);
     }
   }
 
@@ -87,7 +87,7 @@
     width: 22px;
     height: 100%;
     border-left: 1px solid var(--yee-input-border-color);
-    background-color: var(--yee-inputnumber-handler-wrap-bg-color);
+    background-color: var(--yee-input-number-handler-wrap-bg-color);
     border-radius: 0 4px 4px 0;
   }
 
@@ -103,15 +103,15 @@
 
     &:hover:not(&-disabled) {
       color: var(--yee-input-number-icon-hover-color);
-      background-color: var(--yee-inputnumber-handler-hover-bg-color);
+      background-color: var(--yee-input-number-handler-hover-bg-color);
     }
 
     &:active:not(&-disabled) {
-      background-color: var(--yee-inputnumber-handler-active-bg-color);
+      background-color: var(--yee-input-number-handler-active-bg-color);
     }
 
     &-disabled {
-      color: var(--yee-inputnumber-disabled-font-color);
+      color: var(--yee-input-number-disabled-font-color);
       cursor: not-allowed;
     }
 
@@ -126,7 +126,7 @@
   }
 
   &-disabled {
-    color: var(--yee-inputnumber-disabled-font-color);
+    color: var(--yee-input-number-disabled-font-color);
     background-color: var(--yee-input-disabled-bg-color);
     cursor: not-allowed;
 
@@ -139,7 +139,7 @@
     }
 
     @{pls}-handler {
-      color: var(--yee-inputnumber-disabled-font-color);
+      color: var(--yee-input-number-disabled-font-color);
       cursor: not-allowed;
     }
   }

package/src/Menu/style/index.less

@@ -107,7 +107,7 @@
     margin: var(--yee-menu-item-divider-margin, 4px 0);
     border-top: var(
       --yee-menu-item-divider-border,
-      1px solid var(--yee-border-color)
+      1px solid var(--yee-color-border)
     );
   }
 

package/src/PickerPanel/style/index.less

@@ -374,9 +374,9 @@
       width: 100%;
       height: var(--yee-picker-range-hover-after-height);
       border-top: var(--yee-picker-range-hover-after-border-width) dashed
-        var(--yee-rangepicker-hover-border-color);
+        var(--yee-range-picker-hover-border-color);
       border-bottom: var(--yee-picker-range-hover-after-border-width) dashed
-        var(--yee-rangepicker-hover-border-color);
+        var(--yee-range-picker-hover-border-color);
       transform: translateY(-50%);
       content: '';
     }
@@ -401,7 +401,7 @@
     &::after {
       z-index: 2;
       border-right: var(--yee-picker-range-hover-after-border-width) dashed
-        var(--yee-rangepicker-hover-border-color);
+        var(--yee-range-picker-hover-border-color);
       border-top-right-radius: var(
         --yee-picker-range-hover-after-border-radius
       );
@@ -417,7 +417,7 @@
     &::after {
       z-index: 2;
       border-left: var(--yee-picker-range-hover-after-border-width) dashed
-        var(--yee-rangepicker-hover-border-color);
+        var(--yee-range-picker-hover-border-color);
       border-top-left-radius: var(--yee-picker-range-hover-after-border-radius);
       border-bottom-left-radius: var(
         --yee-picker-range-hover-after-border-radius
@@ -455,7 +455,7 @@
 
     &:not(@{cellPrefixCls}-not-in-view) {
       &::before {
-        background-color: var(--yee-rangepicker-checked-bg-color);
+        background-color: var(--yee-range-picker-checked-bg-color);
       }
     }
   }