diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index c48c4fe..cc5c249 100644 --- 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 index d4b0eef..856512c 100644 --- 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 index d533a13..0c15f1d 100644 --- 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 index 9ea3ad0..c849ed9 100644 --- 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 index d4b0eef..856512c 100644 --- 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 index f6a31e7..b497469 100644 --- 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 index d51509c..d1aa156 100644 --- 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 index 25125ad..8342336 100644 --- 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 index f6a31e7..b497469 100644 --- 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 index 493384c..6390cb7 100644 --- 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}",