@anker-in/headless-ui 0.0.24 → 0.0.26

package/src/stories/text.stories.tsx

@@ -26,7 +26,7 @@ const meta = {
         defaultValue: { summary: 'none' },
       },
     },
-    weights: {
+    weight: {
       control: {
         type: 'select',
       },
@@ -59,6 +59,13 @@ const meta = {
         defaultValue: { summary: 'span' },
       },
     },
+    lineHeights: {
+      control: {
+        type: 'select',
+      },
+      description: '字体行高，tight是1.2、normal是1.4、loose是1.6',
+      options: ['tight', 'normal', 'loose'],
+    },
     html: {
       type: 'string',
       description: '相当于 dangerouslySetInnerHTML',
@@ -66,8 +73,9 @@ const meta = {
   },
   args: {
     size: 'none',
-    weights: 'normal',
+    weight: 'normal',
     align: 'left',
+    lineHeights: 'normal',
     html: '',
     as: 'p',
   },
@@ -80,7 +88,7 @@ export const Default: Story = {
   args: {
     children: ' The quick brown fox jumps over the lazy dog.',
     size: 'none',
-    weights: 'normal',
+    weight: 'normal',
   },
 }
 
@@ -102,14 +110,26 @@ export const Sizes: Story = {
   },
 }
 
-export const Weights: Story = {
+export const weight: Story = {
+  render() {
+    return (
+      <div className="ai-flex ai-flex-col">
+        <Text weight="light">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weight="normal">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weight="medium">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weight="bold">The quick brown fox jumps over the lazy dog.</Text>
+      </div>
+    )
+  },
+}
+
+export const LineHeights: Story = {
   render() {
     return (
       <div className="ai-flex ai-flex-col">
-        <Text weights="light">The quick brown fox jumps over the lazy dog.</Text>
-        <Text weights="normal">The quick brown fox jumps over the lazy dog.</Text>
-        <Text weights="medium">The quick brown fox jumps over the lazy dog.</Text>
-        <Text weights="bold">The quick brown fox jumps over the lazy dog.</Text>
+        <Text lineHeights="tight">The quick brown fox jumps over the lazy dog.</Text>
+        <Text lineHeights="normal">The quick brown fox jumps over the lazy dog.</Text>
+        <Text lineHeights="loose">The quick brown fox jumps over the lazy dog.</Text>
       </div>
     )
   },

package/src/styles/global.css

@@ -65,19 +65,25 @@
 }
 
 :root[data-brand-theme='anker'] {
-  --btn-bg-color: #00a7e1;
+  --btn-bg-color: #00befa;
   --btn-text-color: #ffffff;
-  --btn-bg-active-color: #02b8f4;
-  --btn-bg-disabled-color: #ccdfe850;
+  --btn-bg-active-color: #00aaff;
+  --btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
 
   --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f550;
+  --btn-text-secondary-color: #1d1d1f;
+  --btn-bg-secondary-active-color: #6e6e73;
+  --btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
+  --btn-border-secondary-border-color: #acacac;
 
-  --btn-radius: 9999px;
+  --btn-radius: 0;
 
   --radius: 0em;
+
+  --letter-spacing-normal: -0.02em;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.4;
+  --line-height-loose: 1.6;
 }
 
 :root[data-brand-theme='eufy'] {

package/style.css

@@ -515,9 +515,6 @@ video {
 .\!ai-pointer-events-none {
   pointer-events: none !important;
 }
-.\!ai-pointer-events-auto {
-  pointer-events: auto !important;
-}
 .ai-fixed {
   position: fixed;
 }
@@ -645,9 +642,6 @@ video {
 .\!ai-cursor-default {
   cursor: default !important;
 }
-.\!ai-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .\!ai-select-none {
   -webkit-user-select: none !important;
      -moz-user-select: none !important;
@@ -848,9 +842,21 @@ video {
 .ai-font-semibold {
   font-weight: 600;
 }
+.ai-leading-loose {
+  line-height: var(--line-height-loose);
+}
 .ai-leading-none {
   line-height: 1;
 }
+.ai-leading-normal {
+  line-height: var(--line-height-normal);
+}
+.ai-leading-tight {
+  line-height: var(--line-height-tight);
+}
+.ai-tracking {
+  letter-spacing: var(--letter-spacing-normal);
+}
 .ai-tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -981,19 +987,25 @@ video {
 }
 
 :root[data-brand-theme='anker'] {
-  --btn-bg-color: #00a7e1;
+  --btn-bg-color: #00befa;
   --btn-text-color: #ffffff;
-  --btn-bg-active-color: #02b8f4;
-  --btn-bg-disabled-color: #ccdfe850;
+  --btn-bg-active-color: #00aaff;
+  --btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
 
   --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f550;
+  --btn-text-secondary-color: #1d1d1f;
+  --btn-bg-secondary-active-color: #6e6e73;
+  --btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
+  --btn-border-secondary-border-color: #acacac;
 
-  --btn-radius: 9999px;
+  --btn-radius: 0;
 
   --radius: 0em;
+
+  --letter-spacing-normal: -0.02em;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.4;
+  --line-height-loose: 1.6;
 }
 
 :root[data-brand-theme='eufy'] {
@@ -1293,7 +1305,7 @@ video {
 }
 
 .disabled\:ai-text-btn-secondary-disabled-foreground:disabled {
-  color: var(--quaternary-color);
+  color: var(--btn-border-secondary-border-color);
 }
 
 .disabled\:ai-opacity-50:disabled {