fix: tabs: pill variant color contrast fix up (#642)

EightfoldAI · Jun 20, 2023 · 33646f6 · 33646f6
1 parent 5353f90
commit 33646f6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
@@ -124,17 +124,20 @@
     --tab-label: var(--tab-pill-label);
     --tab-active-label: var(--tab-pill-active-label);
     --tab-active-background: var(--tab-pill-active-background);
+    --tab-active-border: var(--tab-pill-active-border);
     --tab-hover-label: var(--tab-pill-hover-label);
     background-color: var(--tab-pill-background);
-    width: fit-content;
     border-radius: var(--tab-pill-border-radius);
     padding: var(--tab-pill-medium-padding);
+    width: fit-content;
 
     .tab {
-      padding: $button-padding-vertical-medium $button-padding-horizontal-medium;
+      border: var(--tab-pill-border);
       border-radius: var(--tab-pill-border-radius);
+      padding: $button-padding-vertical-medium $button-padding-horizontal-medium;
 
       &.active {
+        border: var(--tab-pill-active-border);
         .badge {
           background-color: var(--primary-background1-color);
         }

diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss
@@ -427,9 +427,19 @@
   --tab-pill-large-padding: 8px;
   --tab-pill-medium-padding: 6px;
   --tab-pill-small-padding: 4px;
+  --tab-pill-border-color: var(--grey-background1-color);
+  --tab-pill-border-style: solid;
+  --tab-pill-border-width: 1px;
+  --tab-pill-border: var(--tab-pill-border-width) var(--tab-pill-border-style)
+    var(--tab-pill-border-color);
   --tab-pill-label: var(--text-secondary-color);
   --tab-pill-active-label: var(--primary-color);
   --tab-pill-active-background: var(--primary-background2-color);
+  --tab-pill-active-border-color: var(--primary-tertiary-color);
+  --tab-pill-active-border-style: solid;
+  --tab-pill-active-border-width: 1px;
+  --tab-pill-active-border: var(--tab-pill-active-border-width)
+    var(--tab-pill-active-border-style) var(--tab-pill-active-border-color);
   --tab-pill-hover-label: var(--primary-color);
   --tab-pill-background: var(--grey-background1-color);
   --tab-underline: var(--border-color);