new tokes for breadcrumbs and details components

cds-snc · Mar 29, 2023 · 3537ba5 · 3537ba5
1 parent 138c70d
commit 3537ba5
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 75 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -770,16 +770,38 @@
         "text": {
           "value": "#425A76",
           "type": "color"
+        },
+        "decoration": {
+          "thickness": {
+            "value": "0.0625rem",
+            "type": "borderWidth"
+          }
         }
       },
       "focus": {
         "background": {
           "value": "#303FC3",
           "type": "color"
         },
+        "border-radius": {
+          "value": "0.1875rem",
+          "type": "other"
+        },
         "text": {
           "value": "#FFF",
           "type": "color"
+        },
+        "box-shadow": {
+          "value": "0 0 0 0.125rem #FFF",
+          "type": "color"
+        },
+        "outline": {
+          "value": "0.1875rem solid #303FC3",
+          "type": "other"
+        },
+        "outline-offset": {
+          "value": "0.125rem",
+          "type": "borderWidth"
         }
       },
       "font": {
@@ -795,6 +817,12 @@
         "text": {
           "value": "#26374A",
           "type": "color"
+        },
+        "decoration": {
+          "thickness": {
+            "value": "0.125rem",
+            "type": "borderWidth"
+          }
         }
       },
       "item": {
@@ -1142,16 +1170,12 @@
         "text": {
           "value": "#425A76",
           "type": "color"
-        }
-      },
-      "active": {
-        "background": {
-          "value": "#000",
-          "type": "color"
         },
-        "text": {
-          "value": "#FFF",
-          "type": "color"
+        "decoration": {
+          "thickness": {
+            "value": "0.0625rem",
+            "type": "borderWidth"
+          }
         }
       },
       "focus": {
@@ -1162,6 +1186,22 @@
         "text": {
           "value": "#FFF",
           "type": "color"
+        },
+        "border-radius": {
+          "value": "0.1875rem",
+          "type": "other"
+        },
+        "box-shadow": {
+          "value": "0 0 0 0.125rem #FFF",
+          "type": "color"
+        },
+        "outline-offset": {
+          "value": "0.125rem",
+          "type": "borderWidth"
+        },
+        "outline": {
+          "value": "0.1875rem solid #303FC3",
+          "type": "other"
         }
       },
       "font": {
@@ -1186,6 +1226,12 @@
         "text": {
           "value": "#26374A",
           "type": "color"
+        },
+        "decoration": {
+          "thickness": {
+            "value": "0.125rem",
+            "type": "borderWidth"
+          }
         }
       },
       "panel": {

diff --git a/build/web/_variables.scss b/build/web/_variables.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 14 Mar 2023 21:47:29 GMT
+// Generated on Wed, 29 Mar 2023 16:56:18 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -156,10 +156,16 @@ $gcds-alert-warning-background: #faedd1;
 $gcds-alert-warning-icon: #b3800f;
 $gcds-alert-warning-text: #000000;
 $gcds-breadcrumbs-default-text: #425a76;
+$gcds-breadcrumbs-default-decoration-thickness: 0.0625rem;
 $gcds-breadcrumbs-focus-background: #303fc3;
+$gcds-breadcrumbs-focus-border-radius: 0.1875rem;
 $gcds-breadcrumbs-focus-text: #ffffff;
+$gcds-breadcrumbs-focus-box-shadow: 0 0 0 0.125rem #ffffff;
+$gcds-breadcrumbs-focus-outline: 0.1875rem solid #303fc3;
+$gcds-breadcrumbs-focus-outline-offset: 0.125rem;
 $gcds-breadcrumbs-font: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-breadcrumbs-hover-text: #26374a;
+$gcds-breadcrumbs-hover-decoration-thickness: 0.125rem;
 $gcds-breadcrumbs-item-arrow-top: 0.9375rem;
 $gcds-breadcrumbs-item-arrow-left: 0.1875rem;
 $gcds-breadcrumbs-item-first-child-margin: 0 0 0 -1.5rem;
@@ -219,13 +225,17 @@ $gcds-date-modified-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif
 $gcds-date-modified-margin: 3rem 0 1.5rem;
 $gcds-date-modified-text: #000000;
 $gcds-details-default-text: #425a76;
-$gcds-details-active-background: #000000;
-$gcds-details-active-text: #ffffff;
+$gcds-details-default-decoration-thickness: 0.0625rem;
 $gcds-details-focus-background: #303fc3;
 $gcds-details-focus-text: #ffffff;
+$gcds-details-focus-border-radius: 0.1875rem;
+$gcds-details-focus-box-shadow: 0 0 0 0.125rem #ffffff;
+$gcds-details-focus-outline-offset: 0.125rem;
+$gcds-details-focus-outline: 0.1875rem solid #303fc3;
 $gcds-details-font: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-details-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
 $gcds-details-hover-text: #26374a;
+$gcds-details-hover-decoration-thickness: 0.125rem;
 $gcds-details-panel-border-color: #7d828b;
 $gcds-details-panel-border-width: 0.375rem;
 $gcds-details-panel-margin: 0.375rem 0 0 0;