From f93591fb9b8882fd6017991d079eea79d3c74ec2 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Wed, 2 Oct 2024 14:56:36 -0400 Subject: [PATCH] Revert "Update notice tokens for new icon design (#330)" (#331) This reverts commit 7393dc650093cca7b0bdf49075e0e2accb48ee26. --- build/figma/figma.tokens.json | 60 +++++++++++++++------------ build/web/css/.css | 11 +++-- build/web/css/components.css | 11 +++-- build/web/css/components/notice.css | 11 +++-- build/web/css/tokens.css | 11 +++-- build/web/scss/.scss | 11 +++-- build/web/scss/components.scss | 11 +++-- build/web/scss/components/notice.scss | 11 +++-- build/web/scss/tokens.scss | 11 +++-- tokens/components/notice/tokens.json | 60 +++++++++++++++------------ 10 files changed, 108 insertions(+), 100 deletions(-) diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index cc5c249..c48c4fe 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -3443,46 +3443,54 @@ "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 index 856512c..d4b0eef 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -632,14 +632,13 @@ --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 index 0c15f1d..d533a13 100644 --- a/build/web/css/components.css +++ b/build/web/css/components.css @@ -486,14 +486,13 @@ --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 index c849ed9..9ea3ad0 100644 --- a/build/web/css/components/notice.css +++ b/build/web/css/components/notice.css @@ -10,14 +10,13 @@ --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 index 856512c..d4b0eef 100644 --- a/build/web/css/tokens.css +++ b/build/web/css/tokens.css @@ -632,14 +632,13 @@ --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 index b497469..f6a31e7 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -630,14 +630,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; $gcds-pagination-active-text: #ffffff; diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index d1aa156..d51509c 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -484,14 +484,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; $gcds-pagination-active-text: #ffffff; diff --git a/build/web/scss/components/notice.scss b/build/web/scss/components/notice.scss index 8342336..25125ad 100644 --- a/build/web/scss/components/notice.scss +++ b/build/web/scss/components/notice.scss @@ -8,13 +8,12 @@ $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 index b497469..f6a31e7 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -630,14 +630,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; $gcds-pagination-active-text: #ffffff; diff --git a/tokens/components/notice/tokens.json b/tokens/components/notice/tokens.json index 6390cb7..493384c 100644 --- a/tokens/components/notice/tokens.json +++ b/tokens/components/notice/tokens.json @@ -60,46 +60,54 @@ "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}",