feat: add css variables to edit tab colors

saadeghi · Jan 15, 2022 · 3598bd9 · 3598bd9
1 parent aa99eb2
commit 3598bd9
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/src/components/styled/tab.css b/src/components/styled/tab.css
@@ -1,9 +1,13 @@
 .tab{
-  @apply text-base-content text-opacity-50 hover:text-opacity-100;
+  @apply text-opacity-50 hover:text-opacity-100;
+  --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);
   &.tab-active{
-    @apply text-base-content border-base-content border-opacity-100;
+    @apply border-base-content border-opacity-100;
   }
   &:focus {
     @apply outline-none;
@@ -22,16 +26,16 @@
   border-width: 0 0 var(--tab-border, 1px) 0;
   border-top-left-radius: var(--tab-radius, .5rem);
   border-top-right-radius: var(--tab-radius, .5rem);
-  border-bottom-color: hsla(var(--border-color, var(--b3)) / var(--tw-border-opacity, 1));
+  border-bottom-color: var(--tab-border-color);
   padding-left: var(--tab-padding, 1rem);
   padding-right: var(--tab-padding, 1rem);
   padding-top: var(--tab-border, 1px);
   &.tab-active{
-    @apply bg-base-100;
+    background-color: var(--tab-bg);
     border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 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);
@@ -49,9 +53,9 @@
       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) + .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) + .3px)
+        var(--tab-border-color) calc(var(--tab-grad) + .3px),
+        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px) ),
+        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + .3px)
       );
     }
     &:before{