diff --git a/doc-site/.vitepress/theme/styles/nve_theme.css b/doc-site/.vitepress/theme/styles/nve_theme.css index 2ef5e378..25787d33 100644 --- a/doc-site/.vitepress/theme/styles/nve_theme.css +++ b/doc-site/.vitepress/theme/styles/nve_theme.css @@ -106,6 +106,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -247,7 +256,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: true; --boolean-brand-varsom: false; @@ -383,18 +392,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); @@ -654,48 +663,48 @@ --sizing-fixed-sizing-2x-large: var(--dimension-14x); --sizing-fixed-sizing-3x-large: var(--dimension-16x); --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family); - --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family); - --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family); + --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); + --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); --font-size-small: var(--dimension-4-5x); /** 16 px */ - --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family); + --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family); --font-size-2x-small: var(--dimension-3-5x); /** 12 px */ - --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); + --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); --font-size-x-small: var(--dimension-4x); /** 14 px */ --font-size-medium: var(--dimension-5x); /** 18 px */ --font-size-large: var(--dimension-6x); /** 20 px */ @@ -810,6 +819,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -951,7 +969,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: true; --boolean-brand-varsom: false; @@ -1087,18 +1105,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); diff --git a/doc-site/.vitepress/theme/styles/rme_theme.css b/doc-site/.vitepress/theme/styles/rme_theme.css index 46fc62d3..d10bc15a 100644 --- a/doc-site/.vitepress/theme/styles/rme_theme.css +++ b/doc-site/.vitepress/theme/styles/rme_theme.css @@ -106,6 +106,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -247,7 +256,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: false; --boolean-brand-varsom: false; @@ -383,18 +392,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); @@ -654,48 +663,48 @@ --sizing-fixed-sizing-2x-large: var(--dimension-14x); --sizing-fixed-sizing-3x-large: var(--dimension-16x); --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family); - --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family); - --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family); + --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); + --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); --font-size-small: var(--dimension-4-5x); /** 16 px */ - --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family); + --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family); --font-size-2x-small: var(--dimension-3-5x); /** 12 px */ - --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); + --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); --font-size-x-small: var(--dimension-4x); /** 14 px */ --font-size-medium: var(--dimension-5x); /** 18 px */ --font-size-large: var(--dimension-6x); /** 20 px */ @@ -810,6 +819,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -951,7 +969,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: false; --boolean-brand-varsom: false; @@ -1087,18 +1105,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); diff --git a/doc-site/.vitepress/theme/styles/varsom_theme.css b/doc-site/.vitepress/theme/styles/varsom_theme.css index f07942a7..029071be 100644 --- a/doc-site/.vitepress/theme/styles/varsom_theme.css +++ b/doc-site/.vitepress/theme/styles/varsom_theme.css @@ -106,6 +106,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -247,7 +256,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: false; --boolean-brand-varsom: true; @@ -383,18 +392,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); @@ -654,48 +663,48 @@ --sizing-fixed-sizing-2x-large: var(--dimension-14x); --sizing-fixed-sizing-3x-large: var(--dimension-16x); --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family); - --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family); - --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family); + --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); + --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); --font-size-small: var(--dimension-4-5x); /** 16 px */ - --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family); + --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family); --font-size-2x-small: var(--dimension-3-5x); /** 12 px */ - --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); + --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); --font-size-x-small: var(--dimension-4x); /** 14 px */ --font-size-medium: var(--dimension-5x); /** 18 px */ --font-size-large: var(--dimension-6x); /** 20 px */ @@ -810,6 +819,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -951,7 +969,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: false; --boolean-brand-varsom: true; @@ -1087,18 +1105,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); diff --git a/public/css/nve.css b/public/css/nve.css index ff9e6c14..c7e9cf2e 100644 --- a/public/css/nve.css +++ b/public/css/nve.css @@ -112,6 +112,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -253,7 +262,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: true; --boolean-brand-varsom: false; @@ -389,18 +398,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); @@ -660,48 +669,48 @@ --sizing-fixed-sizing-2x-large: var(--dimension-14x); --sizing-fixed-sizing-3x-large: var(--dimension-16x); --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family); - --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family); - --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family); + --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); + --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); --font-size-small: var(--dimension-4-5x); /** 16 px */ - --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family); + --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family); --font-size-2x-small: var(--dimension-3-5x); /** 12 px */ - --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); + --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); --font-size-x-small: var(--dimension-4x); /** 14 px */ --font-size-medium: var(--dimension-5x); /** 18 px */ --font-size-large: var(--dimension-6x); /** 20 px */ diff --git a/public/css/nve_dark.css b/public/css/nve_dark.css index 300477df..46852c30 100644 --- a/public/css/nve_dark.css +++ b/public/css/nve_dark.css @@ -112,6 +112,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -253,7 +262,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: true; --boolean-brand-varsom: false; @@ -389,18 +398,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); diff --git a/public/css/rme.css b/public/css/rme.css index 71c4b0f0..f10d3640 100644 --- a/public/css/rme.css +++ b/public/css/rme.css @@ -112,6 +112,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -253,7 +262,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: false; --boolean-brand-varsom: false; @@ -389,18 +398,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); @@ -660,48 +669,48 @@ --sizing-fixed-sizing-2x-large: var(--dimension-14x); --sizing-fixed-sizing-3x-large: var(--dimension-16x); --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family); - --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family); - --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family); + --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); + --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); --font-size-small: var(--dimension-4-5x); /** 16 px */ - --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family); + --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family); --font-size-2x-small: var(--dimension-3-5x); /** 12 px */ - --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); + --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); --font-size-x-small: var(--dimension-4x); /** 14 px */ --font-size-medium: var(--dimension-5x); /** 18 px */ --font-size-large: var(--dimension-6x); /** 20 px */ diff --git a/public/css/rme_dark.css b/public/css/rme_dark.css index 2a219000..53f9a4b9 100644 --- a/public/css/rme_dark.css +++ b/public/css/rme_dark.css @@ -112,6 +112,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -253,7 +262,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: false; --boolean-brand-varsom: false; @@ -389,18 +398,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); diff --git a/public/css/varsom.css b/public/css/varsom.css index 66a9ee8f..f83b2e35 100644 --- a/public/css/varsom.css +++ b/public/css/varsom.css @@ -112,6 +112,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -253,7 +262,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: false; --boolean-brand-varsom: true; @@ -389,18 +398,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); @@ -660,48 +669,48 @@ --sizing-fixed-sizing-2x-large: var(--dimension-14x); --sizing-fixed-sizing-3x-large: var(--dimension-16x); --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family); - --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family); - --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family); + --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/1.3 var(--font-family-primary-family); + --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/1.2 var(--font-family-primary-family); --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family); - --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family); - --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family); - --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); + --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/1.3 var(--font-family-primary-family); + --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family); + --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); --font-size-small: var(--dimension-4-5x); /** 16 px */ - --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family); - --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family); - --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family); - --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family); + --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/1.2 var(--font-family-primary-family); + --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family); + --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/1.5 var(--font-family-primary-family); + --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/1.1 var(--font-family-primary-family); + --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/1.1 var(--font-family-primary-family); + --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/1.1 var(--font-family-primary-family); + --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/1.1 var(--font-family-primary-family); --font-size-2x-small: var(--dimension-3-5x); /** 12 px */ - --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); - --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family); + --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); + --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family); --font-size-x-small: var(--dimension-4x); /** 14 px */ --font-size-medium: var(--dimension-5x); /** 18 px */ --font-size-large: var(--dimension-6x); /** 20 px */ diff --git a/public/css/varsom_dark.css b/public/css/varsom_dark.css index 268dfc4a..918dd23d 100644 --- a/public/css/varsom_dark.css +++ b/public/css/varsom_dark.css @@ -112,6 +112,15 @@ --color-shades-functional-red-999: #411616; --color-shades-functional-red-000: #ffebee; --color-shades-functional-red-050: #ffd8de; + --color-shades-functional-danger-100: #ffb8b8; + --color-shades-functional-danger-200: #ff8f8f; + --color-shades-functional-danger-400: #ff3333; + --color-shades-functional-danger-600: #e50000; + --color-shades-functional-danger-800: #b20000; + --color-shades-functional-danger-900: #800000; + --color-shades-functional-danger-999: #4d0000; + --color-shades-functional-danger-050: #ffd6d6; + --color-shades-functional-danger-000: #ffebeb; --color-shades-functional-orange-100: #ffe3c2; --color-shades-functional-orange-150: #ffd9ad; --color-shades-functional-orange-200: #ffc98a; @@ -253,7 +262,7 @@ --box-shadow-none: 0 0 0 0 rgba(0,0,0,0); --box-shadow-soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03); --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); - --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); + --box-shadow-header: 0 4px 32px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --boolean-brand-nve: false; --boolean-brand-varsom: true; @@ -389,18 +398,18 @@ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500); --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500); --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400); - --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500); - --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950); + --color-dangerlevel-background-default-level4: var(--color-shades-functional-danger-400); + --color-dangerlevel-background-default-level5: var(--color-shades-functional-danger-900); --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150); --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200); --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150); - --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050); - --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200); + --color-dangerlevel-background-mute-level4: var(--color-shades-functional-danger-050); + --color-dangerlevel-background-mute-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100); --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100); --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050); - --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000); - --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150); + --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-danger-000); + --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-danger-200); --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999); --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999); diff --git a/tokens/$themes.json b/tokens/$themes.json index 854dd7b0..28d2ff6a 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -478,6 +478,15 @@ "color-shades.functional.red.999": "6750904cab49daad63a31b7aa097d5e9d88dc4d8", "color-shades.functional.red.000": "ca99d84706b259993ebc7e3bc332f4906948bf2f", "color-shades.functional.red.050": "d97694c5de4c2da2774a8f4be96f0c0d7ed7fc41", + "color-shades.functional.danger.600": "ef3014cd8e4d9676a3acd8624a7c997f58e67d87", + "color-shades.functional.danger.400": "599d98cb3fcd61480af8f0fddfcbd2bcdd08c449", + "color-shades.functional.danger.200": "489ac3d2a5e8924b8c9a4ce4cd0731ebf4403885", + "color-shades.functional.danger.100": "5f6c9ffea2c6d9a1927175b1499f2d5aeab167bb", + "color-shades.functional.danger.050": "c68bd34720f1ef308112e236e4730869615e499c", + "color-shades.functional.danger.000": "630603418daf01c23ac5c9afb6cc5dd61aade426", + "color-shades.functional.danger.800": "f21dbb7148e9bf603d5f51cba5f57b29c0726641", + "color-shades.functional.danger.900": "f50820f7049e7f1f26cd54267dd8c96267312733", + "color-shades.functional.danger.999": "22965081b182e1895340c51b85564a7c25554af3", "color-shades.functional.orange.100": "9e5aa4d09e76f584bb6afb73afd00393dfe50569", "color-shades.functional.orange.150": "7e3788ea95c7c827c2982a783c55511a98fdda8b", "color-shades.functional.orange.200": "bb4c4767d8c6622894cf519abcf09d503c472e5d", @@ -870,6 +879,15 @@ "color-shades.functional.red.999": "6750904cab49daad63a31b7aa097d5e9d88dc4d8", "color-shades.functional.red.000": "ca99d84706b259993ebc7e3bc332f4906948bf2f", "color-shades.functional.red.050": "d97694c5de4c2da2774a8f4be96f0c0d7ed7fc41", + "color-shades.functional.danger.600": "ef3014cd8e4d9676a3acd8624a7c997f58e67d87", + "color-shades.functional.danger.400": "599d98cb3fcd61480af8f0fddfcbd2bcdd08c449", + "color-shades.functional.danger.200": "489ac3d2a5e8924b8c9a4ce4cd0731ebf4403885", + "color-shades.functional.danger.100": "5f6c9ffea2c6d9a1927175b1499f2d5aeab167bb", + "color-shades.functional.danger.050": "c68bd34720f1ef308112e236e4730869615e499c", + "color-shades.functional.danger.000": "630603418daf01c23ac5c9afb6cc5dd61aade426", + "color-shades.functional.danger.800": "f21dbb7148e9bf603d5f51cba5f57b29c0726641", + "color-shades.functional.danger.900": "f50820f7049e7f1f26cd54267dd8c96267312733", + "color-shades.functional.danger.999": "22965081b182e1895340c51b85564a7c25554af3", "color-shades.functional.orange.100": "9e5aa4d09e76f584bb6afb73afd00393dfe50569", "color-shades.functional.orange.150": "7e3788ea95c7c827c2982a783c55511a98fdda8b", "color-shades.functional.orange.200": "bb4c4767d8c6622894cf519abcf09d503c472e5d", @@ -1396,21 +1414,6 @@ "color.feedback.foreground.on-bg.emphasized.error": "3ca39558b9ed56b258e0558b42134e6223464836", "color.feedback.foreground.on-bg.emphasized.warning": "b65122d666410ebbf5bd69741bf2d3c852102ea4", "color.feedback.foreground.on-bg.emphasized.success": "cd07fe663b482b6271158aa67944df2cb01c9cda", - "color.feedback.foreground.default.neutral": "afc3ece46af9074c68452864a6070ffc6a405cf2", - "color.feedback.foreground.default.info": "ab56fa7e51abe5c6d26208f4b86634552a5dccb2", - "color.feedback.foreground.default.error": "1a6d951e1d150303d1be9ef5bd0df4f0e28bc67d", - "color.feedback.foreground.default.warning": "103e3dd078139d1a37e70227c79ec75f4cc6c244", - "color.feedback.foreground.default.success": "20f4ea1863056e57a4f20d04f07e93e515268595", - "color.feedback.foreground.subtle.neutral": "ac757af6a076f6d0e471d70316c6ffea73389104", - "color.feedback.foreground.subtle.info": "a7d4ce4506ca66b9f658f55b46eda34c4436302e", - "color.feedback.foreground.subtle.error": "eb22871f5451593ae1f722742586daa027f88e20", - "color.feedback.foreground.subtle.warning": "02624c6d6a67e8a2f2c8bf0a19efc9a6ddcbc2f5", - "color.feedback.foreground.subtle.success": "c5ae1fc0deaae17ce4e06c730c8fd8568c9c0ac6", - "color.feedback.foreground.emphasized.neutral": "808dd0f32876b20109850354f15cc783e140d5b0", - "color.feedback.foreground.emphasized.info": "fcd8fd89c9881f98215e8dd3ba0fd6a125a09218", - "color.feedback.foreground.emphasized.error": "324fc2c1094f73912a09240d293bdb1aebc415c0", - "color.feedback.foreground.emphasized.warning": "030c4c051d0244e6bcce81f5fa2da22d4534e965", - "color.feedback.foreground.emphasized.success": "aead4c2659d328aa33e955978fc7603c7acda13b", "color.feedback.border.subtle.neutral": "c6d19a77f9de67313d32219fcc2236dfc4682dff", "color.feedback.border.subtle.info": "7214478f9b170e3070390410336809681cd57275", "color.feedback.border.subtle.error": "8f0633dbba7b403a45341cab9d33dcc004615c7a", @@ -1768,21 +1771,6 @@ "color.feedback.foreground.on-bg.emphasized.error": "3ca39558b9ed56b258e0558b42134e6223464836", "color.feedback.foreground.on-bg.emphasized.warning": "b65122d666410ebbf5bd69741bf2d3c852102ea4", "color.feedback.foreground.on-bg.emphasized.success": "cd07fe663b482b6271158aa67944df2cb01c9cda", - "color.feedback.foreground.default.neutral": "afc3ece46af9074c68452864a6070ffc6a405cf2", - "color.feedback.foreground.default.info": "ab56fa7e51abe5c6d26208f4b86634552a5dccb2", - "color.feedback.foreground.default.error": "1a6d951e1d150303d1be9ef5bd0df4f0e28bc67d", - "color.feedback.foreground.default.warning": "103e3dd078139d1a37e70227c79ec75f4cc6c244", - "color.feedback.foreground.default.success": "20f4ea1863056e57a4f20d04f07e93e515268595", - "color.feedback.foreground.subtle.neutral": "ac757af6a076f6d0e471d70316c6ffea73389104", - "color.feedback.foreground.subtle.info": "a7d4ce4506ca66b9f658f55b46eda34c4436302e", - "color.feedback.foreground.subtle.error": "eb22871f5451593ae1f722742586daa027f88e20", - "color.feedback.foreground.subtle.warning": "02624c6d6a67e8a2f2c8bf0a19efc9a6ddcbc2f5", - "color.feedback.foreground.subtle.success": "c5ae1fc0deaae17ce4e06c730c8fd8568c9c0ac6", - "color.feedback.foreground.emphasized.neutral": "808dd0f32876b20109850354f15cc783e140d5b0", - "color.feedback.foreground.emphasized.info": "fcd8fd89c9881f98215e8dd3ba0fd6a125a09218", - "color.feedback.foreground.emphasized.error": "324fc2c1094f73912a09240d293bdb1aebc415c0", - "color.feedback.foreground.emphasized.warning": "030c4c051d0244e6bcce81f5fa2da22d4534e965", - "color.feedback.foreground.emphasized.success": "aead4c2659d328aa33e955978fc7603c7acda13b", "color.feedback.border.subtle.neutral": "c6d19a77f9de67313d32219fcc2236dfc4682dff", "color.feedback.border.subtle.info": "7214478f9b170e3070390410336809681cd57275", "color.feedback.border.subtle.error": "8f0633dbba7b403a45341cab9d33dcc004615c7a", @@ -2841,6 +2829,15 @@ "color-shades.functional.red.999": "6750904cab49daad63a31b7aa097d5e9d88dc4d8", "color-shades.functional.red.000": "ca99d84706b259993ebc7e3bc332f4906948bf2f", "color-shades.functional.red.050": "d97694c5de4c2da2774a8f4be96f0c0d7ed7fc41", + "color-shades.functional.danger.600": "ef3014cd8e4d9676a3acd8624a7c997f58e67d87", + "color-shades.functional.danger.400": "599d98cb3fcd61480af8f0fddfcbd2bcdd08c449", + "color-shades.functional.danger.200": "489ac3d2a5e8924b8c9a4ce4cd0731ebf4403885", + "color-shades.functional.danger.100": "5f6c9ffea2c6d9a1927175b1499f2d5aeab167bb", + "color-shades.functional.danger.050": "c68bd34720f1ef308112e236e4730869615e499c", + "color-shades.functional.danger.000": "630603418daf01c23ac5c9afb6cc5dd61aade426", + "color-shades.functional.danger.800": "f21dbb7148e9bf603d5f51cba5f57b29c0726641", + "color-shades.functional.danger.900": "f50820f7049e7f1f26cd54267dd8c96267312733", + "color-shades.functional.danger.999": "22965081b182e1895340c51b85564a7c25554af3", "color-shades.functional.orange.100": "9e5aa4d09e76f584bb6afb73afd00393dfe50569", "color-shades.functional.orange.150": "7e3788ea95c7c827c2982a783c55511a98fdda8b", "color-shades.functional.orange.200": "bb4c4767d8c6622894cf519abcf09d503c472e5d", diff --git a/tokens/brand/nve.json b/tokens/brand/nve.json index 69a1f987..171db8e5 100644 --- a/tokens/brand/nve.json +++ b/tokens/brand/nve.json @@ -460,6 +460,44 @@ "$value": "#ffd8de" } }, + "danger": { + "100": { + "$type": "color", + "$value": "#ffb8b8" + }, + "200": { + "$type": "color", + "$value": "#FF8F8F" + }, + "400": { + "$type": "color", + "$value": "#FF3333" + }, + "600": { + "$type": "color", + "$value": "#E50000" + }, + "800": { + "$type": "color", + "$value": "#B20000" + }, + "900": { + "$type": "color", + "$value": "#800000" + }, + "999": { + "$type": "color", + "$value": "#4D0000" + }, + "050": { + "$type": "color", + "$value": "#FFD6D6" + }, + "000": { + "$type": "color", + "$value": "#FFEBEB" + } + }, "orange": { "100": { "$type": "color", diff --git a/tokens/public/theme/dark.json b/tokens/public/theme/dark.json index fc579836..187b3e08 100644 --- a/tokens/public/theme/dark.json +++ b/tokens/public/theme/dark.json @@ -606,11 +606,11 @@ }, "level4": { "$type": "color", - "$value": "{color-shades.functional.red.500}" + "$value": "{color-shades.functional.danger.400}" }, "level5": { "$type": "color", - "$value": "{color-shades.functional.neutralgrey.950}" + "$value": "{color-shades.functional.danger.900}" } }, "mute": { @@ -628,11 +628,11 @@ }, "level4": { "$type": "color", - "$value": "{color-shades.functional.red.050}" + "$value": "{color-shades.functional.danger.050}" }, "level5": { "$type": "color", - "$value": "{color-shades.functional.neutralgrey.200}" + "$value": "{color-shades.functional.danger.200}" } }, "subtle": { @@ -650,11 +650,11 @@ }, "level4": { "$type": "color", - "$value": "{color-shades.functional.red.000}" + "$value": "{color-shades.functional.danger.000}" }, "level5": { "$type": "color", - "$value": "{color-shades.functional.neutralgrey.150}" + "$value": "{color-shades.functional.danger.200}" } } }, diff --git a/tokens/public/theme/light.json b/tokens/public/theme/light.json index 2094a974..a1d1368e 100644 --- a/tokens/public/theme/light.json +++ b/tokens/public/theme/light.json @@ -605,11 +605,11 @@ }, "level4": { "$type": "color", - "$value": "{color-shades.functional.red.500}" + "$value": "{color-shades.functional.danger.400}" }, "level5": { "$type": "color", - "$value": "{color-shades.functional.neutralgrey.950}" + "$value": "{color-shades.functional.danger.900}" } }, "mute": { @@ -627,11 +627,11 @@ }, "level4": { "$type": "color", - "$value": "{color-shades.functional.red.050}" + "$value": "{color-shades.functional.danger.050}" }, "level5": { "$type": "color", - "$value": "{color-shades.functional.neutralgrey.200}" + "$value": "{color-shades.functional.danger.200}" } }, "subtle": { @@ -649,11 +649,11 @@ }, "level4": { "$type": "color", - "$value": "{color-shades.functional.red.000}" + "$value": "{color-shades.functional.danger.000}" }, "level5": { "$type": "color", - "$value": "{color-shades.functional.neutralgrey.150}" + "$value": "{color-shades.functional.danger.200}" } } },