feat: button component add light variant style.

riazer-lab · Mar 7, 2023 · 2fcb30a · 2fcb30a · vercel · Mar 7, 2023
1 parent 243bb3a
commit 2fcb30a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 1 deletion.
diff --git a/apps/experiments/src/index.html b/apps/experiments/src/index.html
@@ -93,7 +93,7 @@ <h1 class="text-3xl col-span-full">Colors</h1>
         <div class="p-4 rounded-lg bg-danger-1100 text-bw-50">danger-1100</div>
       </div>
     </div>
-    <div class="grid grid-cols-6 gap-4 p-4 has-border rounded-xl">
+    <div class="grid grid-cols-7 gap-4 p-4 has-border rounded-xl">
       <h1 class="text-3xl col-span-full">Button</h1>
       <div class="">
         <h2 class="text-xl">Colors</h2>
@@ -125,6 +125,16 @@ <h2 class="text-xl">Ghost</h2>
           <button class="btn ghost danger">Danger</button>
         </div>
       </div>
+      <div class="">
+        <h2 class="text-xl">Light</h2>
+        <div class="grid gap-4">
+          <button class="btn light bw">BW</button>
+          <button class="btn light info">Info</button>
+          <button class="btn light success">Success</button>
+          <button class="btn light warn">Warn</button>
+          <button class="btn light danger">Danger</button>
+        </div>
+      </div>
       <div class="">
         <h2 class="text-xl">Sizes</h2>
         <div class="grid gap-4">

diff --git a/apps/website/pages/docs/components/button.en.mdx b/apps/website/pages/docs/components/button.en.mdx
@@ -9,6 +9,7 @@ Button colors.
 <CodeDemo>
   <div className="flex flex-wrap gap-2">
     <button className="btn solid bw">BW</button>
+    <button className="btn solid info">Info</button>
     <button className="btn solid success">Success</button>
     <button className="btn solid warn">Warn</button>
     <button className="btn solid danger">Danger</button>
@@ -26,6 +27,7 @@ Button colors.
 <CodeDemo>
   <div className="flex flex-wrap gap-2">
     <button className="btn outline bw">BW</button>
+    <button className="btn outline info">Info</button>
     <button className="btn outline success">Success</button>
     <button className="btn outline warn">Warn</button>
     <button className="btn outline danger">Danger</button>
@@ -37,12 +39,25 @@ Button colors.
 <CodeDemo>
   <div className="flex flex-wrap gap-2">
     <button className="btn ghost bw">BW</button>
+    <button className="btn ghost info">Info</button>
     <button className="btn ghost success">Success</button>
     <button className="btn ghost warn">Warn</button>
     <button className="btn ghost danger">Danger</button>
   </div>
 </CodeDemo>
 
+### Light
+
+<CodeDemo>
+  <div className="flex flex-wrap gap-2">
+    <button className="btn light bw">BW</button>
+    <button className="btn light info">Info</button>
+    <button className="btn light success">Success</button>
+    <button className="btn light warn">Warn</button>
+    <button className="btn light danger">Danger</button>
+  </div>
+</CodeDemo>
+
 ### Sizes
 
 <CodeDemo>

diff --git a/apps/website/pages/docs/components/button.zh.mdx b/apps/website/pages/docs/components/button.zh.mdx
@@ -7,6 +7,7 @@ import { CodeDemo } from '../../../components/demo/code';
 <CodeDemo>
   <div className="flex flex-wrap gap-2">
     <button className="btn solid bw">BW</button>
+    <button className="btn solid info">Info</button>
     <button className="btn solid success">Success</button>
     <button className="btn solid warn">Warn</button>
     <button className="btn solid danger">Danger</button>
@@ -24,6 +25,7 @@ import { CodeDemo } from '../../../components/demo/code';
 <CodeDemo>
   <div className="flex flex-wrap gap-2">
     <button className="btn outline bw">BW</button>
+    <button className="btn outline info">Info</button>
     <button className="btn outline success">Success</button>
     <button className="btn outline warn">Warn</button>
     <button className="btn outline danger">Danger</button>
@@ -35,12 +37,25 @@ import { CodeDemo } from '../../../components/demo/code';
 <CodeDemo>
   <div className="flex flex-wrap gap-2">
     <button className="btn ghost bw">BW</button>
+    <button className="btn ghost info">Info</button>
     <button className="btn ghost success">Success</button>
     <button className="btn ghost warn">Warn</button>
     <button className="btn ghost danger">Danger</button>
   </div>
 </CodeDemo>
 
+### 轻量按钮
+
+<CodeDemo>
+  <div className="flex flex-wrap gap-2">
+    <button className="btn light bw">BW</button>
+    <button className="btn light info">Info</button>
+    <button className="btn light success">Success</button>
+    <button className="btn light warn">Warn</button>
+    <button className="btn light danger">Danger</button>
+  </div>
+</CodeDemo>
+
 ### 尺寸
 
 <CodeDemo>

diff --git a/packages/tailwind/src/style/components/button.css b/packages/tailwind/src/style/components/button.css
@@ -49,6 +49,21 @@
   color: rgba(var(--sira-color-800-contrast), var(--tw-text-opacity));
 }
 
+/* light */
+.btn.light {
+  --tw-ring-color: rgba(var(--sira-color-200), var(--tw-ring-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--sira-color-200), var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(var(--sira-color-900), var(--tw-text-opacity));
+  @apply border-none;
+}
+
+.btn.light:hover {
+  background-color: rgba(var(--sira-color-300), var(--tw-bg-opacity));
+  color: rgba(var(--sira-color-1000), var(--tw-text-opacity));
+}
+
 /* Button Sizes */
 .btn.xs {
   @apply h-[1.5rem] min-h-[1.5rem] rounded-[7px] px-2 text-[0.5rem] leading-[0.5rem] font-normal;