@anker-in/headless-ui 1.1.12 → 1.1.14

package/dist/tokens/base.css

@@ -1,74 +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;
-  --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;
@@ -83,60 +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;
+  --marketing-color-0: #FF6B35;
+  --marketing-color-1: #FF9741;
 
-  --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;
+  --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.12",
+  "version": "1.1.14",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -149,8 +149,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

@@ -104,7 +104,7 @@
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 } /*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
 */ /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -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-none {
   background-image: none !important;
 }
@@ -1174,10 +1120,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);
@@ -1393,10 +1339,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;
@@ -1485,7 +1431,6 @@ video {
 }
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .transition-colors {
@@ -1622,10 +1567,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);
@@ -1785,12 +1730,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

@@ -44,23 +44,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)',
@@ -84,7 +79,6 @@ module.exports = {
         bg: {
           0: 'var(--bg-color-0)',
           1: 'var(--bg-color-1)',
-          2: 'var(--bg-color-2)',
         },
         lines: {
           DEFAULT: 'var(--lines-color)',
@@ -98,31 +92,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)',
@@ -138,10 +115,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)',