daisyui 1.22.2 → 1.23.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.23.0](https://github.com/saadeghi/daisyui/compare/v1.22.2...v1.23.0) (2022-01-15)
+
+
+### Features
+
+* add css variables to edit tab colors ([3598bd9](https://github.com/saadeghi/daisyui/commit/3598bd92282892b269a10bb89229420bc3565d80))
+
 ### [1.22.2](https://github.com/saadeghi/daisyui/compare/v1.22.1...v1.22.2) (2022-01-12)
 
 

package/README.md

@@ -79,7 +79,7 @@ Loading CSS files from CDN is not recommended for production. It's better to ins
 
   
 ```html
-<link href="https://cdn.jsdelivr.net/npm/daisyui@1.22.1/dist/full.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/daisyui@1.22.2/dist/full.css" rel="stylesheet" type="text/css" />
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
 ```
 
@@ -258,7 +258,7 @@ Read the documents for more info:
 [jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
 [build-url]: https://github.com/saadeghi/daisyui/actions
 [tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AUI%20Components%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
-[number-of-components]: https://badgen.net/badge/total%20components/40/green
+[number-of-components]: https://badgen.net/badge/total%20components/41/green
 
 [docs-url-install]: https://daisyui.com/docs/install
 [docs-url]: https://daisyui.com/

package/dist/full.css

@@ -2505,9 +2505,11 @@ html{
   line-height:1.25rem;
   line-height:2;
   --tab-padding:1rem;
-  --tw-text-opacity:1;
   --tw-text-opacity:0.5;
-  color:hsla(var(--bc) / var(--tw-text-opacity, 1));
+  --tab-color:hsla(var(--bc) / var(--tw-text-opacity, 1));
+  --tab-bg:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+  --tab-border-color:hsla(var(--b3) / var(--tw-bg-opacity, 1));
+  color:var(--tab-color);
   padding-left:var(--tab-padding, 1rem);
   padding-right:var(--tab-padding, 1rem);
 }
@@ -4568,8 +4570,6 @@ html{
 .tab.tab-active{
   border-color:hsla(var(--bc) / var(--tw-border-opacity, 1));
   --tw-border-opacity:1;
-  --tw-text-opacity:1;
-  color:hsla(var(--bc) / var(--tw-text-opacity, 1));
 }
 
 .tab:focus{
@@ -4593,22 +4593,21 @@ html{
   border-top-left-radius:var(--tab-radius, .5rem);
   border-top-right-radius:var(--tab-radius, .5rem);
   border:0 solid transparent;
-  border-bottom:var(--tab-border, 1px) solid hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+  border-bottom:var(--tab-border, 1px) solid var(--tab-border-color);
   padding-left:var(--tab-padding, 1rem);
   padding-right:var(--tab-padding, 1rem);
   padding-top:var(--tab-border, 1px);
 }
 
 .tab-lifted.tab-active{
-  --tw-bg-opacity:1;
-  background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+  background-color:var(--tab-bg);
   border-left-width:var(--tab-border, 1px);
   border-bottom-width:0;
   border-right-width:var(--tab-border, 1px);
   border-top-width:var(--tab-border, 1px);
-  border-left-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
-  border-right-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
-  border-top-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+  border-left-color:var(--tab-border-color);
+  border-right-color:var(--tab-border-color);
+  border-top-color:var(--tab-border-color);
   padding-left:calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
   padding-right:calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
   padding-bottom:var(--tab-border, 1px);
@@ -4627,9 +4626,9 @@ html{
   --tab-corner-bg:radial-gradient(
         circle at var(--circle-pos),
         transparent var(--tab-grad),
-        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + 0.3px),
-        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px)),
-        hsla(var(--b1) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
+        var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
+        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
+        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
       );
 }
 

package/dist/styled.css

@@ -3164,8 +3164,6 @@
     --tw-text-opacity:1;
     color:hsla(var(--b1) / var(--tw-text-opacity, 1));
   }.tab{
-  --tw-text-opacity:1;
-  color:hsla(var(--bc) / var(--tw-text-opacity, 1));
   --tw-text-opacity:0.5
 }
 
@@ -3174,6 +3172,10 @@
 }
 
 .tab{
+  --tab-color:hsla(var(--bc) / var(--tw-text-opacity, 1));
+  --tab-bg:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+  --tab-border-color:hsla(var(--b3) / var(--tw-bg-opacity, 1));
+  color:var(--tab-color);
   padding-left:var(--tab-padding, 1rem);
   padding-right:var(--tab-padding, 1rem);
 }
@@ -3181,8 +3183,6 @@
 .tab.tab-active{
     border-color:hsla(var(--bc) / var(--tw-border-opacity, 1));
     --tw-border-opacity:1;
-    --tw-text-opacity:1;
-    color:hsla(var(--bc) / var(--tw-text-opacity, 1));
   }
 
 .tab:focus{
@@ -3206,22 +3206,21 @@
   border-top-left-radius:var(--tab-radius, .5rem);
   border-top-right-radius:var(--tab-radius, .5rem);
   border:0 solid transparent;
-  border-bottom:var(--tab-border, 1px) solid hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+  border-bottom:var(--tab-border, 1px) solid var(--tab-border-color);
   padding-left:var(--tab-padding, 1rem);
   padding-right:var(--tab-padding, 1rem);
   padding-top:var(--tab-border, 1px);
 }
 
 .tab-lifted.tab-active{
-    --tw-bg-opacity:1;
-    background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+    background-color:var(--tab-bg);
     border-left-width:var(--tab-border, 1px);
     border-bottom-width:0;
     border-right-width:var(--tab-border, 1px);
     border-top-width:var(--tab-border, 1px);
-    border-left-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
-    border-right-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
-    border-top-color:hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+    border-left-color:var(--tab-border-color);
+    border-right-color:var(--tab-border-color);
+    border-top-color:var(--tab-border-color);
     padding-left:calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
     padding-right:calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
     padding-bottom:var(--tab-border, 1px);
@@ -3240,9 +3239,9 @@
       --tab-corner-bg:radial-gradient(
         circle at var(--circle-pos),
         transparent var(--tab-grad),
-        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + 0.3px),
-        hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px)),
-        hsla(var(--b1) / var(--tw-border-opacity, 1)) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
+        var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
+        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
+        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
       );
     }