fix: created missing design tokens (#2811)

* refactor: created missing design tokens * refactor: added missing tokens for the Nav component * refactor: added missing tokens for the Tabs component * refactor: added missing tokens for the Breadcrumbs component * refactor: code refactoring
openedx · Aug 1, 2024 · d0f4428 · d0f4428
1 parent 5c68cb8
commit d0f4428
Show file tree

Hide file tree

Showing 19 changed files with 319 additions and 295 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Nav/index.scss b/src/Nav/index.scss
@@ -54,7 +54,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-nav-pills-base-link-active-bg);
+      border-color: var(--pgn-color-nav-pills-base-link-active-border);
 
       &:focus {
         @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus));
@@ -104,9 +104,9 @@
         background-color: var(--pgn-color-white);
 
         &:hover {
-          // background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-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: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
+          border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
         }
       }
     }
@@ -188,7 +188,6 @@
     &.disabled {
       color: var(--pgn-color-nav-link-text-disabled);
       background-color: var(--pgn-color-nav-tabs-base-text-disabled);
-      border-color: transparent;
     }
   }
 

diff --git a/src/Tabs/index.scss b/src/Tabs/index.scss
@@ -80,6 +80,14 @@
         color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
         background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
       }
+
+      &:focus {
+        @include nav-tabs-link-focus(
+          var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus),
+          var(--pgn-size-nav-tabs-border-radius),
+          var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance)
+        );
+      }
     }
   }
 

diff --git a/styles/css/core/index.css b/styles/css/core/index.css
@@ -1,3 +1,2 @@
-@import "~react-loading-skeleton/dist/skeleton.css";
 @import "custom-media-breakpoints.css";
 @import "variables.css";
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
@@ -67,7 +67,7 @@
         "vertical": {
           "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" }
         },
-        "border-radius": { "value": ".3125rem", "type": "dimension", "source": "$card-image-border-radius" }
+        "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" }
       },
       "logo": {
         "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" },

diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
@@ -11,7 +11,7 @@
         "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
         "height": {
           "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
-          "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
+          "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
         }
       },
       "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
@@ -27,7 +27,7 @@
       "base": {
         "value": "transform {transition.carousel.duration} ease-in-out",
         "type": "transition",
-        "source": "$carousel-transition-duration"
+        "source": "$carousel-transition"
       },
       "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
       "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },

diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
@@ -19,7 +19,7 @@
         "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" },
         "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" },
         "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" },
-        "cell": { "value": ".75rem", "type": "dimension", "source": "$data-table-cell-padding" }
+        "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" }
       },
       "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" }
     }

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/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
@@ -19,11 +19,6 @@
       "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" }
     }
   },
-  "elevation": {
-    "progress-bar": {
-      "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" }
-    }
-  },
   "spacing": {
     "progress-bar": {
       "hint": {

diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json
@@ -11,7 +11,8 @@
       },
       "inverse-tabs-link-dropdown-toggle": {
         "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" },
-        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" }
+        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" },
+        "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" }
       }
     }
   }

diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json
@@ -3,7 +3,6 @@
     "breadcrumb": {
       "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
       "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
-      "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" },
       "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
       "inverse": {
         "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },

diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
@@ -17,7 +17,12 @@
       "link": {
         "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" },
         "hover": {
-          "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" },
+          "base": { 
+            "value": "{color.gray.900}", 
+            "type": "color", 
+            "source": "$dropdown-link-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.5 }]
+          },
           "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" }
         },
         "active": {

diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
@@ -49,15 +49,15 @@
                 "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg"
               },
               "disabled": {
-                "value": "{color.primary.500}",
+                "value": "{color.primary.base}",
                 "type": "color",
                 "source": "$custom-control-indicator-checked-disabled-bg",
                 "modify": [{ "type": "alpha", "amount": 0.5 }]
               }
             },
             "border": {
               "base": {
-                "value": "{color.primary.500}",
+                "value": "{color.form.control.indicator.checked.base}",
                 "type": "color",
                 "source": "$custom-control-indicator-checked-border-color"
               },

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,14 +33,26 @@
       },
       "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" }
             },
             "active": {
               "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" },
               "bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" }
+            },
+            "disabled": {
+              "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" }
             }
           }
         },
@@ -64,6 +76,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 +87,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 +120,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": {

diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json
@@ -39,7 +39,7 @@
       },
       "danger": {
         "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" },
-        "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-danger-icon-color" }
+        "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" }
       }
     }
   },

diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json
@@ -4,8 +4,8 @@
       "checkpoint": {
         "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" },
         "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" },
-        "border": { "value": "{color.brand.500}", "type": "color", "source": "$checkpoint-border-color" },
-        "breadcrumb": { "value": "{color.primary.500}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
+        "border": { "value": "{color.brand.base}", "type": "color", "source": "$checkpoint-border-color" },
+        "breadcrumb": { "value": "{color.primary.base}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
         "box-shadow": {
           "value": "{color.black}",
           "type": "color",

diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json
@@ -48,8 +48,15 @@
             "type": "color",
             "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg"
           }
+        },
+        "border": {
+          "focus": {
+            "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
+            "type": "color",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color"
+          }
         }
       }
     }
   }
-}
+}