feat: Add notice component tokens + new colours (#313)

build/figma/figma.tokens.json

@@ -14,6 +14,10 @@
           "value": "#33465c",
           "type": "color"
         },
+        "750": {
+          "value": "#1E7B96",
+          "type": "color"
+        },
         "800": {
           "value": "#2b4380",
           "type": "color"
@@ -85,6 +89,12 @@
           "type": "color"
         }
       },
+      "orange": {
+        "700": {
+          "value": "#BE5A00",
+          "type": "color"
+        }
+      },
       "red": {
         "100": {
           "value": "#FBDDDA",
@@ -3359,6 +3369,122 @@
         }
       }
     },
+    "notice": {
+      "border": {
+        "width": {
+          "value": "0.375rem",
+          "type": "borderWidth"
+        }
+      },
+      "content": {
+        "heading": {
+          "font": {
+            "desktop": {
+              "value": {
+                "fontFamily": "\"Lato\", sans-serif",
+                "fontWeight": "700",
+                "lineHeight": "124.85901539399482%",
+                "fontSize": "2.00225830078125rem"
+              },
+              "type": "typography"
+            },
+            "mobile": {
+              "value": {
+                "fontFamily": "\"Lato\", sans-serif",
+                "fontWeight": "700",
+                "lineHeight": "124.85901539399481%",
+                "fontSize": "1.601806640625rem"
+              },
+              "type": "typography"
+            }
+          }
+        },
+        "slotted": {
+          "font": {
+            "desktop": {
+              "value": {
+                "fontFamily": "\"Noto Sans\", sans-serif",
+                "fontWeight": "400",
+                "lineHeight": "120%",
+                "fontSize": "1.25rem"
+              },
+              "type": "typography"
+            },
+            "mobile": {
+              "value": {
+                "fontFamily": "\"Noto Sans\", sans-serif",
+                "fontWeight": "400",
+                "lineHeight": "150%",
+                "fontSize": "1rem"
+              },
+              "type": "typography"
+            }
+          },
+          "list": {
+            "margin": {
+              "value": "1.5rem",
+              "type": "spacing"
+            }
+          },
+          "margin": {
+            "value": "0.5625rem",
+            "type": "spacing"
+          }
+        },
+        "type": {
+          "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"
+          }
+        }
+      },
+      "padding": {
+        "value": "0 0 0 0.75rem",
+        "type": "spacing"
+      },
+      "text": {
+        "value": "#333333",
+        "type": "color"
+      },
+      "danger": {
+        "text": {
+          "value": "#A62A1E",
+          "type": "color"
+        }
+      },
+      "info": {
+        "text": {
+          "value": "#1E7B96",
+          "type": "color"
+        }
+      },
+      "success": {
+        "text": {
+          "value": "#03662A",
+          "type": "color"
+        }
+      },
+      "warning": {
+        "text": {
+          "value": "#BE5A00",
+          "type": "color"
+        }
+      }
+    },
     "pagination": {
       "active": {
         "text": {

build/web/css/.css

@@ -6,6 +6,7 @@
   --gcds-color-blue-100: #d7e5f5;
   --gcds-color-blue-500: #6584a6; /* Must contrast 3:1 with white */
   --gcds-color-blue-700: #33465c; /* Must contrast 7:1 with white */
+  --gcds-color-blue-750: #1e7b96;
   --gcds-color-blue-800: #2b4380;
   --gcds-color-blue-850: #0535d2; /* Focus and hover colour */
   --gcds-color-blue-900: #26374a;
@@ -22,6 +23,7 @@
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
   --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
+  --gcds-color-orange-700: #be5a00; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;
   --gcds-color-red-500: #d3080c; /* Must contrast 3:1 with white */
   --gcds-color-red-700: #a62a1e; /* Must contrast 7:1 with white */
@@ -622,6 +624,21 @@
   --gcds-nav-link-top-nav-padding: 1.125rem;
   --gcds-nav-link-top-nav-text: #333333;
   --gcds-nav-link-top-nav-margin: 0 0 0 0.1875rem;
+  --gcds-notice-border-width: 0.375rem;
+  --gcds-notice-content-heading-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
+  --gcds-notice-content-heading-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+  --gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --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-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-notice-content-type-mobile: 700 1rem/150% "Noto Sans", sans-serif;
+  --gcds-notice-padding: 0 0 0 0.75rem;
+  --gcds-notice-text: #333333;
+  --gcds-notice-danger-text: #a62a1e;
+  --gcds-notice-info-text: #1e7b96;
+  --gcds-notice-success-text: #03662a;
+  --gcds-notice-warning-text: #be5a00;
   --gcds-pagination-active-text: #ffffff;
   --gcds-pagination-active-background: #26374a;
   --gcds-pagination-border-radius: 0.1875rem;

build/web/css/base.css

@@ -6,6 +6,7 @@
   --gcds-color-blue-100: #d7e5f5;
   --gcds-color-blue-500: #6584a6; /* Must contrast 3:1 with white */
   --gcds-color-blue-700: #33465c; /* Must contrast 7:1 with white */
+  --gcds-color-blue-750: #1e7b96;
   --gcds-color-blue-800: #2b4380;
   --gcds-color-blue-850: #0535d2; /* Focus and hover colour */
   --gcds-color-blue-900: #26374a;
@@ -22,6 +23,7 @@
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
   --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
+  --gcds-color-orange-700: #be5a00; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;
   --gcds-color-red-500: #d3080c; /* Must contrast 3:1 with white */
   --gcds-color-red-700: #a62a1e; /* Must contrast 7:1 with white */

build/web/css/base/color.css

@@ -6,6 +6,7 @@
   --gcds-color-blue-100: #d7e5f5;
   --gcds-color-blue-500: #6584a6; /* Must contrast 3:1 with white */
   --gcds-color-blue-700: #33465c; /* Must contrast 7:1 with white */
+  --gcds-color-blue-750: #1e7b96;
   --gcds-color-blue-800: #2b4380;
   --gcds-color-blue-850: #0535d2; /* Focus and hover colour */
   --gcds-color-blue-900: #26374a;
@@ -22,6 +23,7 @@
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
   --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
+  --gcds-color-orange-700: #be5a00; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;
   --gcds-color-red-500: #d3080c; /* Must contrast 3:1 with white */
   --gcds-color-red-700: #a62a1e; /* Must contrast 7:1 with white */

build/web/css/components.css

@@ -478,6 +478,21 @@
   --gcds-nav-link-top-nav-padding: 1.125rem;
   --gcds-nav-link-top-nav-text: #333333;
   --gcds-nav-link-top-nav-margin: 0 0 0 0.1875rem;
+  --gcds-notice-border-width: 0.375rem;
+  --gcds-notice-content-heading-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
+  --gcds-notice-content-heading-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+  --gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --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-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-notice-content-type-mobile: 700 1rem/150% "Noto Sans", sans-serif;
+  --gcds-notice-padding: 0 0 0 0.75rem;
+  --gcds-notice-text: #333333;
+  --gcds-notice-danger-text: #a62a1e;
+  --gcds-notice-info-text: #1e7b96;
+  --gcds-notice-success-text: #03662a;
+  --gcds-notice-warning-text: #be5a00;
   --gcds-pagination-active-text: #ffffff;
   --gcds-pagination-active-background: #26374a;
   --gcds-pagination-border-radius: 0.1875rem;

build/web/css/components/notice.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly.
+ */
+
+:root {
+  --gcds-notice-border-width: 0.375rem;
+  --gcds-notice-content-heading-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
+  --gcds-notice-content-heading-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+  --gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --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-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-notice-content-type-mobile: 700 1rem/150% "Noto Sans", sans-serif;
+  --gcds-notice-padding: 0 0 0 0.75rem;
+  --gcds-notice-text: #333333;
+  --gcds-notice-danger-text: #a62a1e;
+  --gcds-notice-info-text: #1e7b96;
+  --gcds-notice-success-text: #03662a;
+  --gcds-notice-warning-text: #be5a00;
+}

build/web/css/tokens.css

@@ -6,6 +6,7 @@
   --gcds-color-blue-100: #d7e5f5;
   --gcds-color-blue-500: #6584a6; /* Must contrast 3:1 with white */
   --gcds-color-blue-700: #33465c; /* Must contrast 7:1 with white */
+  --gcds-color-blue-750: #1e7b96;
   --gcds-color-blue-800: #2b4380;
   --gcds-color-blue-850: #0535d2; /* Focus and hover colour */
   --gcds-color-blue-900: #26374a;
@@ -22,6 +23,7 @@
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
   --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
+  --gcds-color-orange-700: #be5a00; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;
   --gcds-color-red-500: #d3080c; /* Must contrast 3:1 with white */
   --gcds-color-red-700: #a62a1e; /* Must contrast 7:1 with white */
@@ -622,6 +624,21 @@
   --gcds-nav-link-top-nav-padding: 1.125rem;
   --gcds-nav-link-top-nav-text: #333333;
   --gcds-nav-link-top-nav-margin: 0 0 0 0.1875rem;
+  --gcds-notice-border-width: 0.375rem;
+  --gcds-notice-content-heading-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
+  --gcds-notice-content-heading-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+  --gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --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-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-notice-content-type-mobile: 700 1rem/150% "Noto Sans", sans-serif;
+  --gcds-notice-padding: 0 0 0 0.75rem;
+  --gcds-notice-text: #333333;
+  --gcds-notice-danger-text: #a62a1e;
+  --gcds-notice-info-text: #1e7b96;
+  --gcds-notice-success-text: #03662a;
+  --gcds-notice-warning-text: #be5a00;
   --gcds-pagination-active-text: #ffffff;
   --gcds-pagination-active-background: #26374a;
   --gcds-pagination-border-radius: 0.1875rem;

build/web/scss/.scss

@@ -4,6 +4,7 @@
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
 $gcds-color-blue-700: #33465c; // Must contrast 7:1 with white
+$gcds-color-blue-750: #1e7b96;
 $gcds-color-blue-800: #2b4380;
 $gcds-color-blue-850: #0535d2; // Focus and hover colour
 $gcds-color-blue-900: #26374a;
@@ -20,6 +21,7 @@ $gcds-color-green-100: #e6f6ec;
 $gcds-color-green-500: #289f58; // Must contrast 3:1 with white
 $gcds-color-green-700: #03662a; // Must contrast 7:1 with white
 $gcds-color-purple-700: #7532b8; // Must contrast 7:1 with white
+$gcds-color-orange-700: #be5a00; // Must contrast 7:1 with white
 $gcds-color-red-100: #fbddda;
 $gcds-color-red-500: #d3080c; // Must contrast 3:1 with white
 $gcds-color-red-700: #a62a1e; // Must contrast 7:1 with white
@@ -620,6 +622,21 @@ $gcds-nav-link-top-nav-home-padding: 0.9375rem 0.1875rem;
 $gcds-nav-link-top-nav-padding: 1.125rem;
 $gcds-nav-link-top-nav-text: #333333;
 $gcds-nav-link-top-nav-margin: 0 0 0 0.1875rem;
+$gcds-notice-border-width: 0.375rem;
+$gcds-notice-content-heading-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
+$gcds-notice-content-heading-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+$gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$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-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-notice-content-type-mobile: 700 1rem/150% "Noto Sans", sans-serif;
+$gcds-notice-padding: 0 0 0 0.75rem;
+$gcds-notice-text: #333333;
+$gcds-notice-danger-text: #a62a1e;
+$gcds-notice-info-text: #1e7b96;
+$gcds-notice-success-text: #03662a;
+$gcds-notice-warning-text: #be5a00;
 $gcds-pagination-active-text: #ffffff;
 $gcds-pagination-active-background: #26374a;
 $gcds-pagination-border-radius: 0.1875rem;

build/web/scss/base.scss

@@ -4,6 +4,7 @@
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
 $gcds-color-blue-700: #33465c; // Must contrast 7:1 with white
+$gcds-color-blue-750: #1e7b96;
 $gcds-color-blue-800: #2b4380;
 $gcds-color-blue-850: #0535d2; // Focus and hover colour
 $gcds-color-blue-900: #26374a;
@@ -20,6 +21,7 @@ $gcds-color-green-100: #e6f6ec;
 $gcds-color-green-500: #289f58; // Must contrast 3:1 with white
 $gcds-color-green-700: #03662a; // Must contrast 7:1 with white
 $gcds-color-purple-700: #7532b8; // Must contrast 7:1 with white
+$gcds-color-orange-700: #be5a00; // Must contrast 7:1 with white
 $gcds-color-red-100: #fbddda;
 $gcds-color-red-500: #d3080c; // Must contrast 3:1 with white
 $gcds-color-red-700: #a62a1e; // Must contrast 7:1 with white

build/web/scss/base/color.scss

@@ -4,6 +4,7 @@
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
 $gcds-color-blue-700: #33465c; // Must contrast 7:1 with white
+$gcds-color-blue-750: #1e7b96;
 $gcds-color-blue-800: #2b4380;
 $gcds-color-blue-850: #0535d2; // Focus and hover colour
 $gcds-color-blue-900: #26374a;
@@ -20,6 +21,7 @@ $gcds-color-green-100: #e6f6ec;
 $gcds-color-green-500: #289f58; // Must contrast 3:1 with white
 $gcds-color-green-700: #03662a; // Must contrast 7:1 with white
 $gcds-color-purple-700: #7532b8; // Must contrast 7:1 with white
+$gcds-color-orange-700: #be5a00; // Must contrast 7:1 with white
 $gcds-color-red-100: #fbddda;
 $gcds-color-red-500: #d3080c; // Must contrast 3:1 with white
 $gcds-color-red-700: #a62a1e; // Must contrast 7:1 with white

build/web/scss/components.scss

@@ -476,6 +476,21 @@ $gcds-nav-link-top-nav-home-padding: 0.9375rem 0.1875rem;
 $gcds-nav-link-top-nav-padding: 1.125rem;
 $gcds-nav-link-top-nav-text: #333333;
 $gcds-nav-link-top-nav-margin: 0 0 0 0.1875rem;
+$gcds-notice-border-width: 0.375rem;
+$gcds-notice-content-heading-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
+$gcds-notice-content-heading-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+$gcds-notice-content-slotted-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$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-desktop: 700 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-notice-content-type-mobile: 700 1rem/150% "Noto Sans", sans-serif;
+$gcds-notice-padding: 0 0 0 0.75rem;
+$gcds-notice-text: #333333;
+$gcds-notice-danger-text: #a62a1e;
+$gcds-notice-info-text: #1e7b96;
+$gcds-notice-success-text: #03662a;
+$gcds-notice-warning-text: #be5a00;
 $gcds-pagination-active-text: #ffffff;
 $gcds-pagination-active-background: #26374a;
 $gcds-pagination-border-radius: 0.1875rem;