daisyui 1.22.1 → 1.24.0

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.24.0](https://github.com/saadeghi/daisyui/compare/v1.23.1...v1.24.0) (2022-01-17)
+
+
+### Features
+
+* add responsive classes for `menu` ,fix: [#392](https://github.com/saadeghi/daisyui/issues/392) ([f825aea](https://github.com/saadeghi/daisyui/commit/f825aeab7fed82130e639e713d3de5707233ac02))
+
+### [1.23.1](https://github.com/saadeghi/daisyui/compare/v1.23.0...v1.23.1) (2022-01-17)
+
+
+### Bug Fixes
+
+* card-side css property ([9908352](https://github.com/saadeghi/daisyui/commit/9908352d932fa458762c7b4815563e54583401d5))
+
+## [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)
+
+
+### Bug Fixes
+
+* [#321](https://github.com/saadeghi/daisyui/issues/321) (modal overscroll-behavior) ([fc5000e](https://github.com/saadeghi/daisyui/commit/fc5000e8996f2a9d1a7a5971400f119494ebe1c7))
+
 ### [1.22.1](https://github.com/saadeghi/daisyui/compare/v1.22.0...v1.22.1) (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.0/dist/full.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/daisyui@1.23.1/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

@@ -2111,6 +2111,10 @@ html{
 
 .menu :where(li)>a{
   cursor:pointer;
+  -webkit-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
 }
 
 .menu :where(li)>a:focus{
@@ -2177,6 +2181,9 @@ html{
   transition-duration:.15s;
   transition-duration:.2s;
   transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  overflow-y:hidden;
+  -ms-scroll-chaining:none;
+  overscroll-behavior:contain;
 }
 
 @media (min-width:640px){
@@ -2196,6 +2203,33 @@ html{
   }
 }
 
+.modal-box{
+  max-height:calc(100vh - 5em);
+  --tw-bg-opacity:1;
+  background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
+  padding:1.5rem;
+  width:100%;
+  --tw-translate-x:0;
+  --tw-translate-y:0;
+  --tw-translate-y:2.5rem;
+  --tw-rotate:0;
+  --tw-skew-x:0;
+  --tw-skew-y:0;
+  --tw-scale-x:1;
+  --tw-scale-y:1;
+  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-duration:.15s;
+  transition-duration:.2s;
+  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  border-top-left-radius:var(--rounded-box, 1rem);
+  border-top-right-radius:var(--rounded-box, 1rem);
+  box-shadow:0 25px 50px -12px rgba(0, 0, 0, .25);
+  overflow-y:auto;
+  -ms-scroll-chaining:none;
+  overscroll-behavior:contain;
+}
+
 .modal-open,.modal-toggle:checked+.modal,.modal:target{
   opacity:1;
   pointer-events:auto;
@@ -2475,9 +2509,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);
 }
@@ -3792,6 +3828,12 @@ html{
   border-radius:var(--rounded-btn, .5rem);
 }
 
+.menu :where(li.bordered>a),.menu :where(li.bordered>span){
+  --tw-border-opacity:1;
+  border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
+  border-left-width:4px;
+}
+
 .menu li>:where(a),.menu li>:where(span){
   padding:.75rem 1.25rem;
   color:currentColor;
@@ -3827,12 +3869,6 @@ html{
   color:hsla(var(--bc) / var(--tw-text-opacity, 1));
 }
 
-.menu li.bordered a,.menu li.bordered span{
-  --tw-border-opacity:1;
-  border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
-  border-left-width:4px;
-}
-
 .menu li.hover-bordered a{
   border-color:transparent;
   border-left-width:4px;
@@ -3944,29 +3980,6 @@ html{
   margin-top:-25px;
 }
 
-.modal-box{
-  --tw-bg-opacity:1;
-  background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
-  padding:1.5rem;
-  width:100%;
-  --tw-translate-x:0;
-  --tw-translate-y:0;
-  --tw-translate-y:2.5rem;
-  --tw-rotate:0;
-  --tw-skew-x:0;
-  --tw-skew-y:0;
-  --tw-scale-x:1;
-  --tw-scale-y:1;
-  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  transition-property:background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-  transition-duration:.15s;
-  transition-duration:.2s;
-  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
-  border-top-left-radius:var(--rounded-box, 1rem);
-  border-top-right-radius:var(--rounded-box, 1rem);
-  box-shadow:0 25px 50px -12px rgba(0, 0, 0, .25);
-}
-
 .modal-open .modal-box,.modal-toggle:checked+.modal .modal-box,.modal:target .modal-box{
   --tw-scale-x:1;
   --tw-scale-y:1;
@@ -4417,6 +4430,11 @@ html{
   color:hsla(var(--bc) / var(--tw-placeholder-opacity, 1));
 }
 
+.select-multiple,.select[multiple]{
+  background-image:none;
+  padding-right:1rem;
+}
+
 .stat+.stat{
   --tw-border-opacity:1;
   --tw-border-opacity:0.1;
@@ -4561,8 +4579,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{
@@ -4586,22 +4602,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);
@@ -4620,9 +4635,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)
       );
 }
 
@@ -9373,6 +9388,23 @@ html{
   min-width:2.5em;
 }
 
+.menu-vertical{
+  flex-direction:column;
+}
+
+.menu-vertical :where(li){
+  flex-direction:column;
+}
+
+.menu-horizontal{
+  display:inline-flex;
+  flex-direction:row;
+}
+
+.menu-horizontal :where(li){
+  flex-direction:row;
+}
+
 .radio-xs{
   height:1rem;
   width:1rem;
@@ -9834,6 +9866,30 @@ html{
   margin-top:1rem;
 }
 
+.menu-vertical :where(li.bordered>a),.menu-vertical :where(li.bordered>span){
+  border-bottom-width:0;
+  border-left-width:4px;
+}
+
+.menu-horizontal :where(li.bordered>a),.menu-horizontal :where(li.bordered>span){
+  border-left-width:0;
+  border-bottom-width:4px;
+}
+
+.menu-normal :where(li>a),.menu-normal :where(li>span){
+  font-size:1rem;
+  line-height:1.5rem;
+  padding-top:.75rem;
+  padding-bottom:.75rem;
+}
+
+.menu-compact :where(li>a),.menu-compact :where(li>span){
+  font-size:.875rem;
+  line-height:1.25rem;
+  padding-top:.5rem;
+  padding-bottom:.5rem;
+}
+
 .steps-horizontal [class~=step]{
   grid-template-rows:40px 1fr;
   grid-template-columns:auto;
@@ -14118,6 +14174,23 @@ html{
     min-width:2.5em;
   }
 
+  .sm\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .sm\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .sm\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .sm\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .sm\:radio-xs{
     height:1rem;
     width:1rem;
@@ -14579,6 +14652,30 @@ html{
     margin-top:1rem;
   }
 
+  .sm\:menu-vertical :where(li.bordered>a),.sm\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .sm\:menu-horizontal :where(li.bordered>a),.sm\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .sm\:menu-normal :where(li>a),.sm\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .sm\:menu-compact :where(li>a),.sm\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .sm\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;
@@ -18864,6 +18961,23 @@ html{
     min-width:2.5em;
   }
 
+  .md\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .md\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .md\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .md\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .md\:radio-xs{
     height:1rem;
     width:1rem;
@@ -19325,6 +19439,30 @@ html{
     margin-top:1rem;
   }
 
+  .md\:menu-vertical :where(li.bordered>a),.md\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .md\:menu-horizontal :where(li.bordered>a),.md\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .md\:menu-normal :where(li>a),.md\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .md\:menu-compact :where(li>a),.md\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .md\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;
@@ -23610,6 +23748,23 @@ html{
     min-width:2.5em;
   }
 
+  .lg\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .lg\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .lg\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .lg\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .lg\:radio-xs{
     height:1rem;
     width:1rem;
@@ -24071,6 +24226,30 @@ html{
     margin-top:1rem;
   }
 
+  .lg\:menu-vertical :where(li.bordered>a),.lg\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .lg\:menu-horizontal :where(li.bordered>a),.lg\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .lg\:menu-normal :where(li>a),.lg\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .lg\:menu-compact :where(li>a),.lg\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .lg\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;
@@ -28356,6 +28535,23 @@ html{
     min-width:2.5em;
   }
 
+  .xl\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .xl\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .xl\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .xl\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .xl\:radio-xs{
     height:1rem;
     width:1rem;
@@ -28817,6 +29013,30 @@ html{
     margin-top:1rem;
   }
 
+  .xl\:menu-vertical :where(li.bordered>a),.xl\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .xl\:menu-horizontal :where(li.bordered>a),.xl\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .xl\:menu-normal :where(li>a),.xl\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .xl\:menu-compact :where(li>a),.xl\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .xl\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;
@@ -33102,6 +33322,23 @@ html{
     min-width:2.5em;
   }
 
+  .\32xl\:menu-vertical{
+    flex-direction:column;
+  }
+
+  .\32xl\:menu-vertical :where(li){
+    flex-direction:column;
+  }
+
+  .\32xl\:menu-horizontal{
+    display:inline-flex;
+    flex-direction:row;
+  }
+
+  .\32xl\:menu-horizontal :where(li){
+    flex-direction:row;
+  }
+
   .\32xl\:radio-xs{
     height:1rem;
     width:1rem;
@@ -33563,6 +33800,30 @@ html{
     margin-top:1rem;
   }
 
+  .\32xl\:menu-vertical :where(li.bordered>a),.\32xl\:menu-vertical :where(li.bordered>span){
+    border-bottom-width:0;
+    border-left-width:4px;
+  }
+
+  .\32xl\:menu-horizontal :where(li.bordered>a),.\32xl\:menu-horizontal :where(li.bordered>span){
+    border-left-width:0;
+    border-bottom-width:4px;
+  }
+
+  .\32xl\:menu-normal :where(li>a),.\32xl\:menu-normal :where(li>span){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding-top:.75rem;
+    padding-bottom:.75rem;
+  }
+
+  .\32xl\:menu-compact :where(li>a),.\32xl\:menu-compact :where(li>span){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding-top:.5rem;
+    padding-bottom:.5rem;
+  }
+
   .\32xl\:steps-horizontal [class~=step]{
     grid-template-rows:40px 1fr;
     grid-template-columns:auto;

package/dist/styled.css

@@ -767,6 +767,10 @@
     }
   .menu :where(li)>a{
       cursor:pointer;
+      -webkit-user-select:none;
+         -moz-user-select:none;
+          -ms-user-select:none;
+              user-select:none;
     }
   .menu :where(li)>a:focus{
         outline:2px solid transparent;
@@ -818,6 +822,10 @@
   z-index:999;
 }
 
+.modal-box{
+  max-height:calc(100vh - 5em);
+}
+
 .modal-open,.modal-toggle:checked+.modal,.modal:target{
   opacity:1;
   pointer-events:auto;
@@ -2340,6 +2348,11 @@
   .menu[class*=p-] li a{
     border-radius:var(--rounded-btn, .5rem);
   }
+  .menu :where(li.bordered>a),.menu :where(li.bordered>span){
+    --tw-border-opacity:1;
+    border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
+    border-left-width:4px;
+  }
   .menu li>:where(a),.menu li>:where(span){
       padding:.75rem 1.25rem;
       color:currentColor;
@@ -2369,11 +2382,6 @@
         color:hsla(var(--bc) / var(--tw-text-opacity, 1));
         --tw-text-opacity:0.2;
       }
-  .menu li.bordered a,.menu li.bordered span{
-        --tw-border-opacity:1;
-        border-color:hsla(var(--p) / var(--tw-border-opacity, 1));
-        border-left-width:4px;
-      }
   .menu li.hover-bordered a{
         border-color:transparent;
       }
@@ -2499,6 +2507,9 @@
   transition-duration:.15s;
   transition-timing-function:cubic-bezier(.4, 0, .2, 1);
   transition-duration:.2s;
+  overflow-y:hidden;
+  -ms-scroll-chaining:none;
+      overscroll-behavior:contain;
 }
 
 .modal-box{
@@ -2536,6 +2547,9 @@
 
 .modal-box{
   box-shadow:0 25px 50px -12px rgba(0, 0, 0, .25);
+  overflow-y:auto;
+  -ms-scroll-chaining:none;
+      overscroll-behavior:contain;
 }
 
 .modal-open .modal-box,.modal-toggle:checked+.modal .modal-box,.modal:target .modal-box{
@@ -2983,6 +2997,10 @@
   .select-disabled,.select[disabled]{
     --tw-text-opacity:0.2;
   }
+  .select-multiple,.select[multiple]{
+    background-image:none;
+    padding-right:1rem;
+  }
 .stack{
   place-items:center;
   align-items:flex-end;
@@ -3154,8 +3172,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
 }
 
@@ -3164,6 +3180,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);
 }
@@ -3171,8 +3191,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{
@@ -3196,22 +3214,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);
@@ -3230,9 +3247,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)
       );
     }