fix: remove padding from borderless stat-tabs, extend varTheme (#470)

* fix: remove padding from borderless stat-tabs, extend varTheme * fix: clean up scss variables for text colors * fix: cleanup additional scss vars * fix: add proper rtl support in StatTabs
EightfoldAI · Dec 19, 2022 · c70f2dd · c70f2dd
1 parent 3554159
commit c70f2dd
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 37 deletions.
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
@@ -1,2 +1,6 @@
+# To leverage this file and skip commits marked for ignore by git blame,
+# use command `git config blame.ignoreRevsFile .git-blame-ignore-revs`
+# to configure git to skip the below commits.
+
 # Moving to two space indent
 2b2c5710fe8160604ef78fa3bc1a1f3752e5e255
diff --git a/src/CONTRIBUTING.md b/src/CONTRIBUTING.md
@@ -47,6 +47,7 @@ One-time setup activities to start contributing:
 - Choose a local folder for the cloned files
 - Clone the repository to your local machine
 - Configure the upstream remote value
+- Configure git to ignore specified commits via `git config blame.ignoreRevsFile .git-blame-ignore-revs`
 
 ### Overview
 

diff --git a/src/components/Card/card.module.scss b/src/components/Card/card.module.scss
@@ -68,7 +68,7 @@
         margin-right: $space-l;
         padding: $disabled-zero;
         padding-bottom: $space-s;
-        background-color: $background-color-white;
+        background-color: var(--card-background-color);
       }
 
       &-buttons {
@@ -104,7 +104,7 @@
     .button-icon {
       position: absolute;
       right: $disabled-zero;
-      background-color: $background-color-white;
+      background-color: var(--card-background-color);
     }
   }
 

diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss
@@ -296,7 +296,7 @@
       transition: all 0.3s;
 
       &:hover {
-        color: $text-color-secondary;
+        color: var(--text-secondary-color);
         background: $table-header-filter-active-background-color;
       }
 

diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
@@ -14,6 +14,7 @@
     align-items: center;
     border: none;
     color: var(--tab-label);
+    background: var(--tab-background);
     cursor: pointer;
     display: flex;
     font-family: $octuple-font-family;
@@ -126,12 +127,12 @@
     --tab-hover-label: var(--tab-pill-hover-label);
     background-color: var(--tab-pill-background);
     width: fit-content;
-    border-radius: $border-radius-xl;
-    padding: calc(#{$space-xs} - #{$space-xxxs});
+    border-radius: var(--tab-pill-border-radius);
+    padding: var(--tab-pill-medium-padding);
 
     .tab {
       padding: $button-padding-vertical-medium $button-padding-horizontal-medium;
-      border-radius: $border-radius-xl;
+      border-radius: var(--tab-pill-border-radius);
 
       &.active {
         .badge {
@@ -147,7 +148,7 @@
 
   &.large {
     &.pill {
-      padding: $space-xs;
+      padding: var(--tab-pill-large-padding);
 
       .tab {
         padding: $button-padding-vertical-large $button-padding-horizontal-large;
@@ -169,7 +170,7 @@
 
   &.medium {
     &.pill {
-      padding: calc(#{$space-xs} - #{$space-xxxs});
+      padding: var(--tab-pill-medium-padding);
 
       .tab {
         padding: $button-padding-vertical-medium
@@ -192,7 +193,7 @@
 
   &.small {
     &.pill {
-      padding: $space-xxs;
+      padding: var(--tab-pill-small-padding);
 
       .tab {
         padding: $button-padding-vertical-small $button-padding-horizontal-small;
@@ -228,21 +229,46 @@
       border-color: var(--border);
     }
 
+    &:not(.bordered) {
+      padding: 0;
+
+      &.divider {
+        padding: 0;
+
+        .tab:not(.tab-rtl) {
+          &:first-of-type {
+            margin-left: 0;
+          }
+          &:last-of-type {
+            margin-right: 0;
+          }
+        }
+        .tab-rtl {
+          &:first-of-type {
+            margin-right: 0;
+          }
+          &:last-of-type {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+
     .tab {
-      --active-border: var(--grey-color-60);
-      --bg: var(--background-color);
-      --border: var(--background-color);
-      --border-radius: 40px;
+      --active-border: var(stat-tab-active-border-color);
+      --bg: var(--stat-tab-background-color);
+      --border: var(--stat-tab-border-color);
+      --border-radius: var(--stat-tab-border-radius);
       --divider-height: 84px;
       --divider-width: 1px;
       --height: 116px;
-      --hover-bg: var(--grey-color-20);
-      --hover-border: var(--grey-color-20);
-      --icon: var(--grey-color-70);
-      --icon-bg: var(--grey-color-20);
+      --hover-bg: var(--stat-tab-hover-background-color);
+      --hover-border: var(--stat-tab-hover-border-color);
+      --icon: var(--stat-tab-icon-color);
+      --icon-bg: var(--stat-tab-icon-background-color);
       --icon-height: 72px;
       --icon-width: 72px;
-      --label: var(--text-secondary-color);
+      --label: var(--stat-tab-label-color);
       --width: 200px;
       background: var(--bg);
       border: var(--border-width) solid var(--border);
@@ -437,15 +463,17 @@
       .tab {
         margin: 0 $space-ml;
 
-        &:not(:last-of-type) {
-          &:after {
-            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23d9dce1' stroke-width='1' stroke-dasharray='2' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
-            content: ' ';
-            height: var(--divider-height);
-            position: absolute;
-            right: calc(calc($space-ml + 1px) * -1);
-            width: var(--divider-width);
-          }
+        &:not(:last-of-type):after {
+          background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23d9dce1' stroke-width='1' stroke-dasharray='2' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
+          content: ' ';
+          height: var(--divider-height);
+          position: absolute;
+          right: calc(calc($space-ml + 1px) * -1);
+          width: var(--divider-width);
+        }
+        &-rtl:not(:last-of-type):after {
+          right: auto;
+          left: calc(calc($space-ml + 1px) * -1);
         }
       }
     }

diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
@@ -130,7 +130,7 @@
 }
 
 @mixin octuple-hr {
-  background-color: $divider-line-color;
+  background-color: var(--horizontal-rule-color);
   width: 100%;
 }
 

diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss
@@ -184,6 +184,7 @@
   --backdrop-filter: blur(5px);
 
   --anchor-color: var(--primary-color-70);
+  --horizontal-rule-color: var(--grey-color-40);
 
   --border-radius-xs: 2px;
   --border-radius-s: 4px;
@@ -193,13 +194,18 @@
 
   // ------ Tabs theme ------
   --tab-label: var(--text-secondary-color);
+  --tab-background: transparent;
   --tab-active-label: var(--primary-color-70);
   --tab-active-background: transparent;
   --tab-hover-label: var(--primary-color);
   --tab-hover-background: transparent;
   --tab-indicator-color: var(--primary-color-70);
   --tab-small-active-background: transparent;
   --tab-small-hover-background: transparent;
+  --tab-pill-border-radius: var(--border-radius-xl);
+  --tab-pill-large-padding: 8px;
+  --tab-pill-medium-padding: 6px;
+  --tab-pill-small-padding: 4px;
   --tab-pill-label: var(--text-secondary-color);
   --tab-pill-active-label: var(--primary-color-80);
   --tab-pill-active-background: var(--primary-color-20);
@@ -208,6 +214,25 @@
   --tab-underline: var(--border-color);
   // ------ Tabs theme ------
 
+  // ------ Stat tab theme ------
+  --stat-tabs-border-radius: var(--border-radius-xl);
+  --stat-tabs-border-width: 1px;
+  --stat-tabs-border-style: solid;
+  --stat-tabs-border-color: var(--border-color);
+
+  // Individual tabs
+  --stat-tab-border-radius: 40px;
+  --stat-tab-label-color: var(--text-secondary-color);
+  --stat-tab-background-color: var(--background-color);
+  --stat-tab-border-color: var(--stat-tab-background-color);
+  --stat-tab-icon-color: var(--grey-color-70);
+  --stat-tab-icon-background-color: var(--grey-color-20);
+  --stat-tab-active-border-color: var(--grey-color-60);
+  --stat-tab-hover-background-color: var(--grey-color-20);
+  --stat-tab-hover-border-color: var(--grey-color-20);
+
+  // ------ Stat tab theme ------
+
   // ------ Navbar theme ------
   --navbar-background: var(--primary-color-80);
   --navbar-text-color: var(--text-inverse-color);

diff --git a/src/styles/themes/_definitions.scss b/src/styles/themes/_definitions.scss
@@ -54,16 +54,8 @@ $color-tertiary-blue: var(--blue-color-60);
 $color-tertiary-violet: var(--violet-color-60);
 $color-tertiary-grey: var(--grey-color-60);
 
-$text-color-primary: var(--grey-color-90);
-$text-color-secondary: var(--grey-color-80);
-
-$card-background-color: var(--background-color);
-$background-color-white: var(--background-color);
-
 $input-field-color-enabled: var(--grey-color-40);
 
-$divider-line-color: var(--grey-color-40);
-
 // Gradient Definitions
 
 $eightfold-logo-gradient: linear-gradient(
@@ -92,7 +84,7 @@ $expandable-header-gradient: linear-gradient(
   270deg,
   hsla(0, 0%, 100%, 0) 22.25%,
   hsla(0, 0%, 100%, 0.995) 41.17%,
-  $background-color-white 80.83%
+  var(--background-color) 80.83%
 );
 
 // Shadow Definitions