From 93382d76d949634b4bef2b55189cdd99264d8d15 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Tue, 27 Aug 2024 14:48:00 -0400 Subject: [PATCH] feat: Add notice component tokens + new colours --- build/figma/figma.tokens.json | 126 ++++++++++++++++++++++++++ build/web/css/.css | 17 ++++ build/web/css/base.css | 2 + build/web/css/base/color.css | 2 + build/web/css/components.css | 15 +++ build/web/css/components/notice.css | 21 +++++ build/web/css/tokens.css | 17 ++++ build/web/scss/.scss | 17 ++++ build/web/scss/base.scss | 2 + build/web/scss/base/color.scss | 2 + build/web/scss/components.scss | 15 +++ build/web/scss/components/notice.scss | 18 ++++ build/web/scss/tokens.scss | 17 ++++ tokens/base/color/tokens.json | 11 +++ tokens/components/notice/tokens.json | 118 ++++++++++++++++++++++++ 15 files changed, 400 insertions(+) create mode 100644 build/web/css/components/notice.css create mode 100644 build/web/scss/components/notice.scss create mode 100644 tokens/components/notice/tokens.json diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 3002fc8..f689ab5 100644 --- a/build/figma/figma.tokens.json +++ b/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": { diff --git a/build/web/css/.css b/build/web/css/.css index f8a526c..4a2b5d2 100644 --- a/build/web/css/.css +++ b/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; diff --git a/build/web/css/base.css b/build/web/css/base.css index 701de60..2a9f36f 100644 --- a/build/web/css/base.css +++ b/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 */ diff --git a/build/web/css/base/color.css b/build/web/css/base/color.css index 701de60..2a9f36f 100644 --- a/build/web/css/base/color.css +++ b/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 */ diff --git a/build/web/css/components.css b/build/web/css/components.css index fad1857..183834d 100644 --- a/build/web/css/components.css +++ b/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; diff --git a/build/web/css/components/notice.css b/build/web/css/components/notice.css new file mode 100644 index 0000000..ba6059a --- /dev/null +++ b/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; +} diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css index f8a526c..4a2b5d2 100644 --- a/build/web/css/tokens.css +++ b/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; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index 9aca205..34c708c 100644 --- a/build/web/scss/.scss +++ b/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; diff --git a/build/web/scss/base.scss b/build/web/scss/base.scss index bf35c1d..f35810c 100644 --- a/build/web/scss/base.scss +++ b/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 diff --git a/build/web/scss/base/color.scss b/build/web/scss/base/color.scss index bf35c1d..f35810c 100644 --- a/build/web/scss/base/color.scss +++ b/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 diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index 53e63dc..1387f9f 100644 --- a/build/web/scss/components.scss +++ b/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; diff --git a/build/web/scss/components/notice.scss b/build/web/scss/components/notice.scss new file mode 100644 index 0000000..3407a1f --- /dev/null +++ b/build/web/scss/components/notice.scss @@ -0,0 +1,18 @@ + +// Do not edit directly. + +$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; diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss index 9aca205..34c708c 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.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; diff --git a/tokens/base/color/tokens.json b/tokens/base/color/tokens.json index fdef089..d6175e6 100644 --- a/tokens/base/color/tokens.json +++ b/tokens/base/color/tokens.json @@ -15,6 +15,10 @@ "type": "color", "comment": "Must contrast 7:1 with white" }, + "750": { + "value": "#1E7B96", + "type": "color" + }, "800": { "value": "#2b4380", "type": "color" @@ -92,6 +96,13 @@ "comment": "Must contrast 7:1 with white" } }, + "orange": { + "700": { + "value": "#BE5A00", + "type": "color", + "comment": "Must contrast 7:1 with white" + } + }, "red": { "flag": { "value": "#FF0000", diff --git a/tokens/components/notice/tokens.json b/tokens/components/notice/tokens.json new file mode 100644 index 0000000..44f5953 --- /dev/null +++ b/tokens/components/notice/tokens.json @@ -0,0 +1,118 @@ +{ + "notice": { + "border": { + "width": { + "value": "{border.width.xl.value}", + "type": "borderWidth" + } + }, + "content": { + "heading": { + "font": { + "desktop": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.bold}", + "lineHeight": "{lineHeights.h3}", + "fontSize": "{fontSizes.h3}" + }, + "type": "typography" + }, + "mobile": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.bold}", + "lineHeight": "{lineHeights.h3Mobile}", + "fontSize": "{fontSizes.h3Mobile}" + }, + "type": "typography" + } + } + }, + "slotted": { + "font": { + "desktop": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.text}", + "fontSize": "{fontSizes.text}" + }, + "type": "typography" + }, + "mobile": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.textMobile}", + "fontSize": "{fontSizes.textMobile}" + }, + "type": "typography" + } + }, + "list": { + "margin": { + "value": "{spacing.400.value}", + "type": "spacing" + } + }, + "margin": { + "value": "{spacing.150.value}", + "type": "spacing" + } + }, + "type": { + "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" + } + } + }, + "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" + } + }, + "info": { + "text": { + "value": "{color.blue.750.value}", + "type": "color" + } + }, + "success": { + "text": { + "value": "{color.green.700.value}", + "type": "color" + } + }, + "warning": { + "text": { + "value": "{color.orange.700.value}", + "type": "color" + } + } + } +}