Update notice tokens for new icon design (#330)

cds-snc · Oct 2, 2024 · 7393dc6 · 7393dc6
1 parent d9347f0
commit 7393dc6
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 108 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -3443,54 +3443,46 @@
             "value": "0.5625rem",
             "type": "spacing"
           }
-        },
-        "type": {
-          "font": {
-            "desktop": {
-              "value": {
-                "fontFamily": "\"Noto Sans\", sans-serif",
-                "fontWeight": "700",
-                "lineHeight": "120%",
-                "fontSize": "1.25rem"
-              },
-              "type": "typography"
-            },
-            "mobile": {
-              "value": {
-                "fontFamily": "\"Noto Sans\", sans-serif",
-                "fontWeight": "700",
-                "lineHeight": "150%",
-                "fontSize": "1rem"
-              },
-              "type": "typography"
-            }
-          },
-          "margin": {
-            "value": "-0.1875rem 0 0",
-            "type": "spacing"
-          }
         }
       },
-      "padding": {
-        "value": "0 0 0 0.75rem",
-        "type": "spacing"
-      },
-      "text": {
-        "value": "#333333",
-        "type": "color"
-      },
       "danger": {
         "text": {
           "value": "#A62A1E",
           "type": "color"
         }
       },
+      "icon": {
+        "afterHeight": {
+          "value": "calc(100% - (3rem + 0.5625rem))",
+          "type": "sizing"
+        },
+        "beforeHeight": {
+          "value": "1.125rem",
+          "type": "sizing"
+        },
+        "gap": {
+          "value": "0.9375rem",
+          "type": "spacing"
+        },
+        "margin": {
+          "value": "0.1875rem auto 0",
+          "type": "spacing"
+        },
+        "width": {
+          "value": "2.25rem",
+          "type": "sizing"
+        }
+      },
       "info": {
         "text": {
           "value": "#1E7B96",
           "type": "color"
         }
       },
+      "text": {
+        "value": "#333333",
+        "type": "color"
+      },
       "success": {
         "text": {
           "value": "#03662A",

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -632,13 +632,14 @@
   --gcds-notice-content-slotted-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-notice-content-slotted-list-margin: 1.5rem;
   --gcds-notice-content-slotted-margin: 0.5625rem;
-  --gcds-notice-content-type-font-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
-  --gcds-notice-content-type-font-mobile: 700 1rem/150% "Noto Sans", sans-serif;
-  --gcds-notice-content-type-margin: -0.1875rem 0 0;
-  --gcds-notice-padding: 0 0 0 0.75rem;
-  --gcds-notice-text: #333333;
   --gcds-notice-danger-text: #a62a1e;
+  --gcds-notice-icon-after-height: calc(100% - (3rem + 0.5625rem));
+  --gcds-notice-icon-before-height: 1.125rem;
+  --gcds-notice-icon-gap: 0.9375rem;
+  --gcds-notice-icon-margin: 0.1875rem auto 0;
+  --gcds-notice-icon-width: 2.25rem;
   --gcds-notice-info-text: #1e7b96;
+  --gcds-notice-text: #333333;
   --gcds-notice-success-text: #03662a;
   --gcds-notice-warning-text: #be5a00;
   --gcds-pagination-active-text: #ffffff;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -486,13 +486,14 @@
   --gcds-notice-content-slotted-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-notice-content-slotted-list-margin: 1.5rem;
   --gcds-notice-content-slotted-margin: 0.5625rem;
-  --gcds-notice-content-type-font-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
-  --gcds-notice-content-type-font-mobile: 700 1rem/150% "Noto Sans", sans-serif;
-  --gcds-notice-content-type-margin: -0.1875rem 0 0;
-  --gcds-notice-padding: 0 0 0 0.75rem;
-  --gcds-notice-text: #333333;
   --gcds-notice-danger-text: #a62a1e;
+  --gcds-notice-icon-after-height: calc(100% - (3rem + 0.5625rem));
+  --gcds-notice-icon-before-height: 1.125rem;
+  --gcds-notice-icon-gap: 0.9375rem;
+  --gcds-notice-icon-margin: 0.1875rem auto 0;
+  --gcds-notice-icon-width: 2.25rem;
   --gcds-notice-info-text: #1e7b96;
+  --gcds-notice-text: #333333;
   --gcds-notice-success-text: #03662a;
   --gcds-notice-warning-text: #be5a00;
   --gcds-pagination-active-text: #ffffff;

diff --git a/build/web/css/components/notice.css b/build/web/css/components/notice.css
@@ -10,13 +10,14 @@
   --gcds-notice-content-slotted-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-notice-content-slotted-list-margin: 1.5rem;
   --gcds-notice-content-slotted-margin: 0.5625rem;
-  --gcds-notice-content-type-font-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
-  --gcds-notice-content-type-font-mobile: 700 1rem/150% "Noto Sans", sans-serif;
-  --gcds-notice-content-type-margin: -0.1875rem 0 0;
-  --gcds-notice-padding: 0 0 0 0.75rem;
-  --gcds-notice-text: #333333;
   --gcds-notice-danger-text: #a62a1e;
+  --gcds-notice-icon-after-height: calc(100% - (3rem + 0.5625rem));
+  --gcds-notice-icon-before-height: 1.125rem;
+  --gcds-notice-icon-gap: 0.9375rem;
+  --gcds-notice-icon-margin: 0.1875rem auto 0;
+  --gcds-notice-icon-width: 2.25rem;
   --gcds-notice-info-text: #1e7b96;
+  --gcds-notice-text: #333333;
   --gcds-notice-success-text: #03662a;
   --gcds-notice-warning-text: #be5a00;
 }
diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -632,13 +632,14 @@
   --gcds-notice-content-slotted-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-notice-content-slotted-list-margin: 1.5rem;
   --gcds-notice-content-slotted-margin: 0.5625rem;
-  --gcds-notice-content-type-font-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
-  --gcds-notice-content-type-font-mobile: 700 1rem/150% "Noto Sans", sans-serif;
-  --gcds-notice-content-type-margin: -0.1875rem 0 0;
-  --gcds-notice-padding: 0 0 0 0.75rem;
-  --gcds-notice-text: #333333;
   --gcds-notice-danger-text: #a62a1e;
+  --gcds-notice-icon-after-height: calc(100% - (3rem + 0.5625rem));
+  --gcds-notice-icon-before-height: 1.125rem;
+  --gcds-notice-icon-gap: 0.9375rem;
+  --gcds-notice-icon-margin: 0.1875rem auto 0;
+  --gcds-notice-icon-width: 2.25rem;
   --gcds-notice-info-text: #1e7b96;
+  --gcds-notice-text: #333333;
   --gcds-notice-success-text: #03662a;
   --gcds-notice-warning-text: #be5a00;
   --gcds-pagination-active-text: #ffffff;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -630,13 +630,14 @@ $gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-se
 $gcds-notice-content-slotted-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-notice-content-slotted-list-margin: 1.5rem;
 $gcds-notice-content-slotted-margin: 0.5625rem;
-$gcds-notice-content-type-font-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
-$gcds-notice-content-type-font-mobile: 700 1rem/150% "Noto Sans", sans-serif;
-$gcds-notice-content-type-margin: -0.1875rem 0 0;
-$gcds-notice-padding: 0 0 0 0.75rem;
-$gcds-notice-text: #333333;
 $gcds-notice-danger-text: #a62a1e;
+$gcds-notice-icon-after-height: calc(100% - (3rem + 0.5625rem));
+$gcds-notice-icon-before-height: 1.125rem;
+$gcds-notice-icon-gap: 0.9375rem;
+$gcds-notice-icon-margin: 0.1875rem auto 0;
+$gcds-notice-icon-width: 2.25rem;
 $gcds-notice-info-text: #1e7b96;
+$gcds-notice-text: #333333;
 $gcds-notice-success-text: #03662a;
 $gcds-notice-warning-text: #be5a00;
 $gcds-pagination-active-text: #ffffff;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -484,13 +484,14 @@ $gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-se
 $gcds-notice-content-slotted-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-notice-content-slotted-list-margin: 1.5rem;
 $gcds-notice-content-slotted-margin: 0.5625rem;
-$gcds-notice-content-type-font-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
-$gcds-notice-content-type-font-mobile: 700 1rem/150% "Noto Sans", sans-serif;
-$gcds-notice-content-type-margin: -0.1875rem 0 0;
-$gcds-notice-padding: 0 0 0 0.75rem;
-$gcds-notice-text: #333333;
 $gcds-notice-danger-text: #a62a1e;
+$gcds-notice-icon-after-height: calc(100% - (3rem + 0.5625rem));
+$gcds-notice-icon-before-height: 1.125rem;
+$gcds-notice-icon-gap: 0.9375rem;
+$gcds-notice-icon-margin: 0.1875rem auto 0;
+$gcds-notice-icon-width: 2.25rem;
 $gcds-notice-info-text: #1e7b96;
+$gcds-notice-text: #333333;
 $gcds-notice-success-text: #03662a;
 $gcds-notice-warning-text: #be5a00;
 $gcds-pagination-active-text: #ffffff;

diff --git a/build/web/scss/components/notice.scss b/build/web/scss/components/notice.scss
@@ -8,12 +8,13 @@ $gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-se
 $gcds-notice-content-slotted-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-notice-content-slotted-list-margin: 1.5rem;
 $gcds-notice-content-slotted-margin: 0.5625rem;
-$gcds-notice-content-type-font-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
-$gcds-notice-content-type-font-mobile: 700 1rem/150% "Noto Sans", sans-serif;
-$gcds-notice-content-type-margin: -0.1875rem 0 0;
-$gcds-notice-padding: 0 0 0 0.75rem;
-$gcds-notice-text: #333333;
 $gcds-notice-danger-text: #a62a1e;
+$gcds-notice-icon-after-height: calc(100% - (3rem + 0.5625rem));
+$gcds-notice-icon-before-height: 1.125rem;
+$gcds-notice-icon-gap: 0.9375rem;
+$gcds-notice-icon-margin: 0.1875rem auto 0;
+$gcds-notice-icon-width: 2.25rem;
 $gcds-notice-info-text: #1e7b96;
+$gcds-notice-text: #333333;
 $gcds-notice-success-text: #03662a;
 $gcds-notice-warning-text: #be5a00;
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -630,13 +630,14 @@ $gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-se
 $gcds-notice-content-slotted-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-notice-content-slotted-list-margin: 1.5rem;
 $gcds-notice-content-slotted-margin: 0.5625rem;
-$gcds-notice-content-type-font-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
-$gcds-notice-content-type-font-mobile: 700 1rem/150% "Noto Sans", sans-serif;
-$gcds-notice-content-type-margin: -0.1875rem 0 0;
-$gcds-notice-padding: 0 0 0 0.75rem;
-$gcds-notice-text: #333333;
 $gcds-notice-danger-text: #a62a1e;
+$gcds-notice-icon-after-height: calc(100% - (3rem + 0.5625rem));
+$gcds-notice-icon-before-height: 1.125rem;
+$gcds-notice-icon-gap: 0.9375rem;
+$gcds-notice-icon-margin: 0.1875rem auto 0;
+$gcds-notice-icon-width: 2.25rem;
 $gcds-notice-info-text: #1e7b96;
+$gcds-notice-text: #333333;
 $gcds-notice-success-text: #03662a;
 $gcds-notice-warning-text: #be5a00;
 $gcds-pagination-active-text: #ffffff;

diff --git a/tokens/components/notice/tokens.json b/tokens/components/notice/tokens.json
@@ -60,54 +60,46 @@
           "value": "{spacing.150.value}",
           "type": "spacing"
         }
-      },
-      "type": {
-        "font": {
-          "desktop": {
-            "value": {
-              "fontFamily": "{fontFamilies.body}",
-              "fontWeight": "{fontWeights.bold}",
-              "lineHeight": "{lineHeights.text}",
-              "fontSize": "{fontSizes.text}"
-            },
-            "type": "typography"
-          },
-          "mobile": {
-            "value": {
-              "fontFamily": "{fontFamilies.body}",
-              "fontWeight": "{fontWeights.bold}",
-              "lineHeight": "{lineHeights.textMobile}",
-              "fontSize": "{fontSizes.textMobile}"
-            },
-            "type": "typography"
-          }
-        },
-        "margin": {
-          "value": "-{spacing.50.value} 0 0",
-          "type": "spacing"
-        }
       }
     },
-    "padding": {
-      "value": "0 0 0 {spacing.200.value}",
-      "type": "spacing"
-    },
-    "text": {
-      "value": "{text.primary.value}",
-      "type": "color"
-    },
     "danger": {
       "text": {
         "value": "{danger.text.value}",
         "type": "color"
       }
     },
+    "icon": {
+      "afterHeight": {
+        "value": "calc(100% - ({spacing.500.value} + {spacing.150.value}))",
+        "type": "sizing"
+      },
+      "beforeHeight": {
+        "value": "{spacing.300.value}",
+        "type": "sizing"
+      },
+      "gap": {
+        "value": "{spacing.250.value}",
+        "type": "spacing"
+      },
+      "margin": {
+        "value": "{spacing.50.value} auto 0",
+        "type": "spacing"
+      },
+      "width": {
+        "value": "{spacing.450.value}",
+        "type": "sizing"
+      }
+    },
     "info": {
       "text": {
         "value": "{color.blue.750.value}",
         "type": "color"
       }
     },
+    "text": {
+      "value": "{text.primary.value}",
+      "type": "color"
+    },
     "success": {
       "text": {
         "value": "{color.green.700.value}",