@anker-in/headless-ui 1.1.9-temp-120108 → 1.1.9-temp-120801

package/dist/tokens/base.css

@@ -1,76 +1,54 @@
 :root {
-  --btn-text-color: #ffffff;
   --btn-bg-active-color: #00a7e1;
   --btn-bg-disabled-color: #ccdfe850;
   --btn-text-active-color: #ffffff;
 
 
   --btn-bg-secondary-color: transparent;
-  --btn-text-secondary-color: #1D1D1F;
-  --btn-tsxt-secondary-active-color: #ffffff;
   --btn-bg-secondary-disabled-color: #f5f5f550;
 
   /* 浅色背景 */
-  --success-color-0: #34C759;
-  --success-color-1: #5dd27a;
-  --success-color-2: #85dd9b;
-  --success-color-3: #aee9bd;
-  --success-color-4: #D6F4DE;
+  --success-color-0: #30D158;
+  --success-color-1: #D6F4DE;
+
 
   --warning-color-0: #FFC24D;
-  --warning-color-1: #fdcc6e;
-  --warning-color-2: #fbd68f;
-  --warning-color-3: #f8e0af;
-  --warning-color-4: #F6EAD0;
+  --warning-color-1: #F6EAD0;
+
 
   --error-color-0: #FF4D4D;
-  --error-color-1: #F6D3D0;
-  --error-color-2: #fb908f;
-  --error-color-3: #f8b1af;
-  --error-color-4: #f6dbd8;
-
-  --info-primary-color: #1D1D1F;
-  --info-secondary-color: #86868C;
-  --info-tertiary-color: #B6B6BA;
-  --info-quaternary-color: #DDDDDD;
+  --error-color-1: #F6DBD8;
+
+  --marketing-color-0: #FF6B35;
+  --marketing-color-1: #FF9741;
+
+
+  --info-primary-color: #080A0F;
+  --info-secondary-color: #2A2C32;
+  --info-tertiary-color: #4A4C56;
+  --info-quaternary-color: #767880;
   --info-white-color: #FFFFFF;
 
   --container-primary-color: #ffffff;
-  --container-secondary-color-0: #f5f5f7;
+  --container-secondary-color-0: #F5F6F7;
   --container-secondary-color-1: #EAEAEC;
-  --container-tertiary-color: #EAEAEC;
 
-  --bg-color-0: #f5f5f7;
+  --bg-color-0: #F5F6F7;
   --bg-color-1: #ffffff;
-  --bg-color-2: rgba(0, 190, 250, 0.08);
-  --lines-color: #cececf;
-  --masks-color-0: rgba(29, 29, 31, 0.2);
-  --masks-color-1: rgba(29, 29, 31, 0.6);
-  --tab-word-color-0: #ff9900;
-  --tab-stroke-color-0: #ffcf87;
-  --tab-fill-color-0: #fff7eb;
-  --tab-word-color-1: #00aaff;
-  --tab-stroke-color-1: #88d7ff;
-  --tab-fill-color-1: #ebf8ff;
-  --tab-word-color-2: #ff4d4d;
-  --tab-stroke-color-2: #ff8a8a;
-  --tab-fill-color-2: #fff1f1;
+
+  
+  --masks-color-0: rgba(0, 0, 0, 0.2);
+  --masks-color-1: rgba(0, 0, 0, 0.6);
 
   --secondary-brand-color-1: #042637;
   --secondary-brand-color-2: #b3ecfb;
   --secondary-brand-color-3: #f8f7f6; 
 
-  --bg-color-1: #f4f4f1;
-  --bg-color-2: #efefec;
-
+  --lines-color: #DADCE0;
   --line-color: #e9e9e9;
   --line-color-1: #ddd;
   --line-color-2: #1d1d1f;
 
-  --masks-color-1: hsla(0, 0%, 0%, 0.5);
-  --masks-color-2: hsla(0, 0%, 0%, 0.85);
-
-
   --line-height-base: 1.2;
 
   --letter-spacing-normal: -0.02em;
@@ -85,61 +63,48 @@
 
 
 .aiui-dark {
-  --btn-text-color: #1D1D1F;
   --btn-text-active-color: #ffffff;
+  --btn-bg-secondary-color: transparent;
 
+   /* 深色背景 */
+  --success-color-0: #2BBC4F;
+  --success-color-1: #204028;
 
-  --btn-bg-secondary-color: transparent;
-  --btn-text-secondary-color: #ffffff;
-  --btn-tsxt-secondary-active-color: #1D1D1F;
+  --warning-color-0: #E6AF45;
+  --warning-color-1: #33270F;
 
+  --error-color-0: #E64545;
+  --error-color-1: #330F0F;
 
-   /* 深色背景 */
-  --success-color-0: #34C759;
-  --success-color-1: #2cad4c;
-  --success-color-2: #288940;
-  --success-color-3: #246434;
-  --success-color-4: #D6F4DE;
-  --warning-color-0: #FFC24D;
-  --warning-color-1: #cc9b3e;
-  --warning-color-2: #99742e;
-  --warning-color-3: #664e1f;
-  --warning-color-4: #33270f;
-  --error-color-0: #FF4D4D;
-  --error-color-1: #F6D3D0;
-  --error-color-2: #992e2e;
-  --error-color-3: #661f1f;
-  --error-color-4: #330f0f;
-
-  --info-primary-color: #FFFFFF;
-  --info-secondary-color: #B6B6BA;
-  --info-tertiary-color: #86868C;
-  --info-quaternary-color: #353537;
-  --info-white-color: #1D1D1F;
-
-  --container-primary-color: #1d1d1f;
-  --container-secondary-color-0: #353537;
-  --container-secondary-color-1: #F7F8F9;
-  --container-tertiary-color: #F7F8F9;
+  --marketing-color-0: #FF6B35;
+  --marketing-color-1: #FF9741;
+
+
+  --info-primary-color: #F5F6F7;
+  --info-secondary-color: #B5B7BB;
+  --info-tertiary-color: #8A8D92;
+  --info-quaternary-color: #75787F;
+  --info-white-color: #1E2024;
+
+  --container-primary-color: #1E2024;
+  --container-secondary-color-0: #373A40;
+  --container-secondary-color-1: #F5F6F7;
 
   
   --bg-color-0: #000000;
-  --bg-color-1: #1d1d1f;
-  --lines-color: #3d3d3d;
+  --bg-color-1: #1E2024;
+
+  --lines-color: #3A3C40;
+
   --line-masks-color-0: rgba(245, 245, 247, 0.2);
   --line-masks-color-1: rgba(245, 245, 247, 0.6);
-  --tab-word-color-0: #ff9900;
-  --tab-stroke-color-0: #663d00;
-  --tab-fill-color-0: #331f00;
-  --tab-word-color-1: #00aaff;
-  --tab-stroke-color-1: #004466;
-  --tab-fill-color-1: #002233;
-  --tab-word-color-2: #ff4d4d;
-  --tab-stroke-color-2: #661f1f;
-  --tab-fill-color-2: #330f0f;
 
   --tabs-list-bg-color: var(--container-primary-color);
 
+
+  --masks-color-0: rgba(255, 255, 255, 0.2);
+  --masks-color-1: rgba(255, 255, 255, 0.6);
+
   --box-radius: 12px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.1.9-temp-120108",
+  "version": "1.1.9-temp-120801",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -90,7 +90,8 @@
     "postcss-prefix-selector": "^2.1.1",
     "prettier": "^3.5.3",
     "react-test-renderer": "^18.3.1",
-    "stylelint": "^16.6.0"
+    "stylelint": "^16.6.0",
+    "@testing-library/dom": "^10.4.1"
   },
   "dependencies": {
     "@payloadcms/richtext-lexical": "^3.62.1",
@@ -104,8 +105,6 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-visually-hidden": "^1.2.3",
-    "@testing-library/dom": "^10.4.1",
-    "@types/lodash": "^4.17.20",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -121,12 +120,11 @@
     "framer-motion": "^12.23.24",
     "jump.js": "^1.0.2",
     "lexical": "^0.38.2",
-    "postcss": "^8.4.38",
     "react-fast-marquee": "^1.6.5",
     "react-intersection-observer": "^9.4.0",
     "react-responsive": "10.0.1",
     "react-youtube": "^10.1.0",
-    "swiper": "^11.1.3",
+    "swiper": "^11.2.10",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "typescript": "5.4.5",
@@ -153,8 +151,9 @@
     "build:js:esm": "node esbuild-esm.mjs",
     "build:js:esm:types": "tsc --outdir dist/esm",
     "build:css": "postcss src/styles/global.css -o style.css",
-    "lint": "eslint \"src/**/*.ts*\" --quiet",
+    "lint": "eslint \"src/**/*.ts*\"",
     "lint:fix": "eslint \"src/**/*.ts*\" --fix",
+    "lint:quiet": "eslint \"src/**/*.ts*\" --quiet",
     "test": "jest",
     "test:snapshots:update": "jest -u",
     "test:coverage": "jest --coverage && jest-coverage-badges output \"./badges\"",

package/style.css

@@ -1001,13 +1001,13 @@ video {
 .border-primary {
   border-color: var(--brand-color-0);
 }
-.\!bg-\[\#1D1D1F\] {
+.\!bg-\[\#080A0F\] {
   --tw-bg-opacity: 1 !important;
-  background-color: rgb(29 29 31 / var(--tw-bg-opacity, 1)) !important;
+  background-color: rgb(8 10 15 / var(--tw-bg-opacity, 1)) !important;
 }
-.bg-\[\#1D1D1F\] {
+.bg-\[\#080A0F\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(29 29 31 / var(--tw-bg-opacity, 1));
+  background-color: rgb(8 10 15 / var(--tw-bg-opacity, 1));
 }
 .bg-\[\#86868C\] {
   --tw-bg-opacity: 1;
@@ -1058,15 +1058,6 @@ video {
 .bg-error-1 {
   background-color: var(--error-color-1);
 }
-.bg-error-2 {
-  background-color: var(--error-color-2);
-}
-.bg-error-3 {
-  background-color: var(--error-color-3);
-}
-.bg-error-4 {
-  background-color: var(--error-color-4);
-}
 .bg-info-primary {
   background-color: var(--info-primary-color);
 }
@@ -1092,7 +1083,7 @@ video {
   background-color: var(--masks-color-1);
 }
 .bg-primary-foreground {
-  background-color: var(--btn-text-color);
+  background-color: var(--info-white-color);
 }
 .bg-skeleton {
   background-color: var(--info-tertiary-color);
@@ -1103,42 +1094,6 @@ video {
 .bg-success-1 {
   background-color: var(--success-color-1);
 }
-.bg-success-2 {
-  background-color: var(--success-color-2);
-}
-.bg-success-3 {
-  background-color: var(--success-color-3);
-}
-.bg-success-4 {
-  background-color: var(--success-color-4);
-}
-.bg-tab-fill-0 {
-  background-color: var(--tab-fill-color-0);
-}
-.bg-tab-fill-1 {
-  background-color: var(--tab-fill-color-1);
-}
-.bg-tab-fill-2 {
-  background-color: var(--tab-fill-color-2);
-}
-.bg-tab-stroke-0 {
-  background-color: var(--tab-stroke-color-0);
-}
-.bg-tab-stroke-1 {
-  background-color: var(--tab-stroke-color-1);
-}
-.bg-tab-stroke-2 {
-  background-color: var(--tab-stroke-color-2);
-}
-.bg-tab-word-0 {
-  background-color: var(--tab-word-color-0);
-}
-.bg-tab-word-1 {
-  background-color: var(--tab-word-color-1);
-}
-.bg-tab-word-2 {
-  background-color: var(--tab-word-color-2);
-}
 .bg-tabs-list-bg {
   background-color: var(--tabs-list-bg-color);
 }
@@ -1151,15 +1106,6 @@ video {
 .bg-warning-1 {
   background-color: var(--warning-color-1);
 }
-.bg-warning-2 {
-  background-color: var(--warning-color-2);
-}
-.bg-warning-3 {
-  background-color: var(--warning-color-3);
-}
-.bg-warning-4 {
-  background-color: var(--warning-color-4);
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -1178,10 +1124,10 @@ video {
   fill: currentColor;
 }
 .stroke-btn-primary-foreground {
-  stroke: var(--btn-text-color);
+  stroke: var(--info-white-color);
 }
 .stroke-btn-secondary-foreground {
-  stroke: var(--btn-text-secondary-color);
+  stroke: var(--info-primary-color);
 }
 .stroke-primary {
   stroke: var(--brand-color-0);
@@ -1397,10 +1343,10 @@ video {
   color: var(--brand-color-0);
 }
 .text-btn-primary-foreground {
-  color: var(--btn-text-color);
+  color: var(--info-white-color);
 }
 .text-btn-secondary-foreground {
-  color: var(--btn-text-secondary-color);
+  color: var(--info-primary-color);
 }
 .text-current {
   color: currentColor;
@@ -1631,10 +1577,10 @@ video {
   color: var(--btn-text-active-color);
 }
 .hover\:text-btn-primary-foreground:hover {
-  color: var(--btn-text-color);
+  color: var(--info-white-color);
 }
 .hover\:text-btn-secondary-active-foreground:hover {
-  color: var(--btn-tsxt-secondary-active-color);
+  color: var(--info-white-color);
 }
 .hover\:text-info-primary:hover {
   color: var(--info-primary-color);
@@ -1794,12 +1740,12 @@ video {
 .data-\[inline-skeleton\=true\]\:leading-\[0\][data-inline-skeleton="true"] {
   line-height: 0;
 }
-.data-\[state\=active\]\:text-\[\#1d1d1d\][data-state="active"] {
+.data-\[state\=active\]\:text-\[\#080A0F\][data-state="active"] {
   --tw-text-opacity: 1;
-  color: rgb(29 29 29 / var(--tw-text-opacity, 1));
+  color: rgb(8 10 15 / var(--tw-text-opacity, 1));
 }
 .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
-  color: var(--btn-text-color);
+  color: var(--info-white-color);
 }
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;

package/tailwind.config.js

@@ -29,8 +29,8 @@ module.exports = {
           '100%': { transform: 'translateY(0)' },
         },
         'progress-bar': {
-          from: { transform: 'translate3d(-100%, -2px, 0)' },
-          to: { transform: 'translate3d(0, -2px, 0)' },
+          from: { transform: 'translate3d(-100%, 0, 0)' },
+          to: { transform: 'translate3d(0, 0, 0)' },
         },
       },
       animation: {
@@ -49,23 +49,18 @@ module.exports = {
         success: {
           0: 'var(--success-color-0)',
           1: 'var(--success-color-1)',
-          2: 'var(--success-color-2)',
-          3: 'var(--success-color-3)',
-          4: 'var(--success-color-4)',
         },
         error: {
           0: 'var(--error-color-0)',
           1: 'var(--error-color-1)',
-          2: 'var(--error-color-2)',
-          3: 'var(--error-color-3)',
-          4: 'var(--error-color-4)',
         },
         warning: {
           0: 'var(--warning-color-0)',
           1: 'var(--warning-color-1)',
-          2: 'var(--warning-color-2)',
-          3: 'var(--warning-color-3)',
-          4: 'var(--warning-color-4)',
+        },
+        marketing: {
+          0: 'var(--marketing-color-0)',
+          1: 'var(--marketing-color-1)',
         },
         info: {
           primary: 'var(--info-primary-color)',
@@ -91,7 +86,6 @@ module.exports = {
         bg: {
           0: 'var(--bg-color-0)',
           1: 'var(--bg-color-1)',
-          2: 'var(--bg-color-2)',
         },
         lines: {
           DEFAULT: 'var(--lines-color)',
@@ -105,31 +99,14 @@ module.exports = {
           0: 'var(--masks-color-0)',
           1: 'var(--masks-color-1)',
         },
-        tab: {
-          word: {
-            0: 'var(--tab-word-color-0)',
-            1: 'var(--tab-word-color-1)',
-            2: 'var(--tab-word-color-2)',
-          },
-          stroke: {
-            0: 'var(--tab-stroke-color-0)',
-            1: 'var(--tab-stroke-color-1)',
-            2: 'var(--tab-stroke-color-2)',
-          },
-          fill: {
-            0: 'var(--tab-fill-color-0)',
-            1: 'var(--tab-fill-color-1)',
-            2: 'var(--tab-fill-color-2)',
-          },
-        },
         primary: {
           DEFAULT: 'var(--brand-color-0)',
-          foreground: 'var(--btn-text-color)',
+          foreground: 'var(--info-white-color)',
         },
         btn: {
           primary: {
             DEFAULT: 'var(--info-primary-color)',
-            foreground: 'var(--btn-text-color)',
+            foreground: 'var(--info-white-color)',
             active: {
               DEFAULT: 'var(--brand-color-0)',
               foreground: 'var(--btn-text-active-color)',
@@ -145,10 +122,10 @@ module.exports = {
           },
           secondary: {
             DEFAULT: 'var(--btn-bg-secondary-color)',
-            foreground: 'var(--btn-text-secondary-color)',
+            foreground: 'var(--info-primary-color)',
             active: {
               DEFAULT: 'var(--info-primary-color)',
-              foreground: 'var(--btn-tsxt-secondary-active-color)',
+              foreground: 'var(--info-white-color)',
             },
             disabled: {
               DEFAULT: 'var(--info-white-color)',