refactor: added missing tokens for the Nav component

openedx · Nov 15, 2023 · 01b666b · 01b666b
1 parent 666116b
commit 01b666b
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 21 deletions.
diff --git a/src/Nav/index.scss b/src/Nav/index.scss
@@ -55,7 +55,7 @@
     .nav-item.show .nav-link {
       color: var(--pgn-color-nav-pills-base-link-active-text);
       background-color: var(--pgn-color-nav-pills-base-link-active-bg);
-      border-color: var(--pgn-color-primary-base);
+      border-color: var(--pgn-color-nav-pills-base-link-active-border);
 
       &:focus {
         // stylelint-disable-next-line max-line-length
@@ -104,9 +104,9 @@
         background-color: var(--pgn-color-white);
 
         &:hover {
-          // background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-hover);
+          background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover);
           color: var(--pgn-color-nav-pills-inverse-link-text-active-focus);
-          // border-color: $nav-inverse-pills-link-active-focus-hover-border-color;
+          border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
         }
       }
     }
@@ -122,7 +122,7 @@
       border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom);
 
       .dropdown .dropdown-toggle {
-        border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
+        border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border);
 
         &:hover {
           border-bottom: none;
@@ -156,14 +156,14 @@
 }
 
 .nav-tabs {
-  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border);
+  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base);
 
   button.nav-link {
     border: none;
     border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border);
 
     &.disabled {
-      border-color: transparent;
+      border-color: var(--pgn-color-nav-tabs-base-text-disabled);
     }
   }
 
@@ -181,7 +181,7 @@
     }
 
     &:focus {
-      border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
+      border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus);
 
       @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus));
     }
@@ -238,7 +238,7 @@
 
 .nav-button-group {
   .nav-link {
-    border: solid 1px var(--pgn-color-nav-tabs-base-border);
+    border: solid 1px var(--pgn-color-nav-tabs-base-border-base);
 
     &:first-child {
       @include border-left-radius(var(--pgn-size-nav-pills-border-radius));

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 08:37:46 GMT
+ * Generated on Wed, 15 Nov 2023 19:14:34 GMT
  */
 
 :root {
@@ -156,7 +156,7 @@
   --pgn-spacing-navbar-toggler-padding-x: .75rem;
   --pgn-spacing-navbar-toggler-padding-y: .25rem;
   --pgn-spacing-navbar-padding-x-nav-link: .5rem;
-  --pgn-spacing-nav-link-distance-to-border: .313rem;
+  --pgn-spacing-nav-link-distance-to-border: 4px;
   --pgn-spacing-nav-link-padding-x: 1rem;
   --pgn-spacing-nav-link-padding-y: .5rem;
   --pgn-spacing-modal-dialog-margin: 1.5rem;

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 08:37:46 GMT
+ * Generated on Wed, 15 Nov 2023 19:14:35 GMT
  */
 
 :root {
@@ -37,6 +37,7 @@
   --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
   --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000;
   --pgn-color-nav-tabs-base-link-active-bg: #00000000;
+  --pgn-color-nav-tabs-base-bg-hover: #00000000;
   --pgn-color-nav-link-border: #00000000;
   --pgn-color-menu-item-bg: #00000000;
   --pgn-color-icon-button-text-primary-inverse-active-hover: #000000FF;
@@ -376,8 +377,13 @@
   --pgn-color-nav-light: #00000080;
   --pgn-color-nav-dark: #FFFFFF80;
   --pgn-color-nav-divider: var(--pgn-color-gray-100);
+  --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base);
   --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white);
+  --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white);
+  --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
   --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white);
+  --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover);
+  --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover);
   --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300);
   --pgn-color-nav-link-text-base: var(--pgn-color-gray-700);
   --pgn-color-modal-backdrop-bg: var(--pgn-color-black);
@@ -729,7 +735,7 @@
   --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus);
   --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300);
   --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
@@ -743,7 +749,7 @@
   --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300);
   --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500);
   --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400);
-  --pgn-color-nav-tabs-base-border: var(--pgn-color-light-400);
+  --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);
   --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
   --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500);
   --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary);
@@ -1125,7 +1131,7 @@
   --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
-  --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border);
+  --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
   --pgn-color-action-default-danger-900: #60161DFF;
   --pgn-color-action-default-danger-800: #691820FF;
   --pgn-color-action-default-danger-700: #731A22FF;
@@ -1193,7 +1199,7 @@
   --pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
   --pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
   --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active);
-  --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border);
+  --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base);
   --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active);
   --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom);
   --pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary);

diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
@@ -45,7 +45,7 @@
           "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
           "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
         },
-        "distance-to-border": { "value": ".313rem", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
+        "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
       },
       "divider": {
         "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" }

diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json
@@ -9,7 +9,7 @@
             "source": "$nav-tabs-link-active-border-color"
           },
           "hover": {
-            "value": "transparent transparent {color.nav.tabs.base.border}",
+            "value": "transparent transparent {color.nav.tabs.base.border.base}",
             "type": "color",
             "source": "$nav-tabs-link-hover-border-color"
           },
@@ -33,7 +33,16 @@
       },
       "tabs": {
         "base": {
-          "border": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
+          "text": {
+            "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" }
+          },
+          "bg": {
+            "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" }
+          },
+          "border": {
+            "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
+            "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" }
+          },
           "link": {
             "hover": {
               "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" }
@@ -64,6 +73,9 @@
               }
             },
           "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" }
+          },
+          "dropdown": {
+            "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" }
           }
         }
       },
@@ -72,9 +84,10 @@
           "link": {
             "active": {
               "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" },
-              "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" }
+              "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" },
+              "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" }
             },
-            "border": { "value": "{color.nav.tabs.base.border}", "type": "color", "source": "$nav-pills-link-border-color" }
+            "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" }
           }
         },
         "inverse": {
@@ -104,9 +117,14 @@
                 "source": "$nav-inverse-pills-link-active-hover-border-color"
               },
               "active-focus": {
-                "value": "{color.nav.pills.inverse.link.text.base}",
+                "value": "{color.primary.base}",
                 "type": "color",
                 "source": "$nav-inverse-pills-link-active-focus-border-color"
+              },
+              "focus-hover": {
+                "value": "{color.nav.pills.inverse.link.border.active-focus}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-focus-hover-border-color"
               }
             },
             "bg": {