From 253784d98cb86c42b50bc63827567fa2beca20af Mon Sep 17 00:00:00 2001 From: Supernova Bot Date: Fri, 28 Jul 2023 09:26:28 +0000 Subject: [PATCH] Updated styles and tokens --- packages/design-tokens/src/_tokens.scss | 105 ++- packages/design-tokens/src/light/_index.scss | 636 ++++++++++-------- .../design-tokens/src/light/dictionary.ts | 492 +++++++++++++- packages/design-tokens/src/light/index.ts | 51 ++ 4 files changed, 954 insertions(+), 330 deletions(-) diff --git a/packages/design-tokens/src/_tokens.scss b/packages/design-tokens/src/_tokens.scss index e00474baa54..5dfce6d5d20 100644 --- a/packages/design-tokens/src/_tokens.scss +++ b/packages/design-tokens/src/_tokens.scss @@ -1,15 +1,15 @@ $coral-color-neutral-text: #{var(--coral-color-neutral-text, hsla(0, 0%, 13%, 1))}; $coral-color-neutral-text-weak: #{var(--coral-color-neutral-text-weak, hsla(0, 0%, 38%, 1))}; $coral-color-neutral-text-disabled: #{var(--coral-color-neutral-text-disabled, hsla(0, 0%, 44%, 1))}; -$coral-color-neutral-text-inverted: #{var(--coral-color-neutral-text-inverted, white)}; -$coral-color-neutral-background: #{var(--coral-color-neutral-background, white)}; +$coral-color-neutral-text-inverted: #{var(--coral-color-neutral-text-inverted, hsla(0, 0%, 100%, 1))}; +$coral-color-neutral-background: #{var(--coral-color-neutral-background, hsla(0, 0%, 100%, 1))}; $coral-color-neutral-background-medium: #{var(--coral-color-neutral-background-medium, hsla(0, 0%, 97%, 1))}; $coral-color-neutral-background-strong: #{var(--coral-color-neutral-background-strong, hsla(0, 0%, 88%, 1))}; $coral-color-neutral-background-disabled: #{var(--coral-color-neutral-background-disabled, hsla(0, 0%, 88%, 1))}; $coral-color-neutral-border: #{var(--coral-color-neutral-border, hsla(0, 0%, 55%, 1))}; $coral-color-neutral-border-weak: #{var(--coral-color-neutral-border-weak, hsla(0, 0%, 82%, 1))}; $coral-color-neutral-border-hover: #{var(--coral-color-neutral-border-hover, hsla(0, 0%, 40%, 1))}; -$coral-color-accent-text-weak: #{var(--coral-color-accent-text-weak, white)}; +$coral-color-accent-text-weak: #{var(--coral-color-accent-text-weak, hsla(0, 0%, 100%, 1))}; $coral-color-accent-text-weak-hover: #{var(--coral-color-accent-text-weak-hover, hsla(204, 59%, 88%, 1))}; $coral-color-accent-text-weak-active: #{var(--coral-color-accent-text-weak-active, hsla(205, 60%, 75%, 1))}; $coral-color-accent-text: #{var(--coral-color-accent-text, hsla(204, 95%, 31%, 1))}; @@ -18,7 +18,7 @@ $coral-color-accent-text-active: #{var(--coral-color-accent-text-active, hsla(20 $coral-color-accent-background: #{var(--coral-color-accent-background, hsla(204, 59%, 88%, 1))}; $coral-color-accent-background-hover: #{var(--coral-color-accent-background-hover, hsla(205, 60%, 75%, 1))}; $coral-color-accent-background-active: #{var(--coral-color-accent-background-active, hsla(204, 60%, 63%, 1))}; -$coral-color-accent-background-weak: #{var(--coral-color-accent-background-weak, white)}; +$coral-color-accent-background-weak: #{var(--coral-color-accent-background-weak, hsla(0, 0%, 100%, 1))}; $coral-color-accent-background-weak-hover: #{var(--coral-color-accent-background-weak-hover, hsla(204, 59%, 88%, 1))}; $coral-color-accent-background-weak-active: #{var(--coral-color-accent-background-weak-active, hsla(205, 60%, 75%, 1))}; $coral-color-accent-background-strong: #{var(--coral-color-accent-background-strong, hsla(204, 95%, 31%, 1))}; @@ -26,7 +26,7 @@ $coral-color-accent-background-strong-hover: #{var(--coral-color-accent-backgrou $coral-color-accent-background-strong-active: #{var(--coral-color-accent-background-strong-active, hsla(205, 95%, 15%, 1))}; $coral-color-accent-border-hover: #{var(--coral-color-accent-border-hover, hsla(204, 95%, 23%, 1))}; $coral-color-accent-border-active: #{var(--coral-color-accent-border-active, hsla(205, 95%, 15%, 1))}; -$coral-color-danger-text-weak: #{var(--coral-color-danger-text-weak, white)}; +$coral-color-danger-text-weak: #{var(--coral-color-danger-text-weak, hsla(0, 0%, 100%, 1))}; $coral-color-danger-text-weak-hover: #{var(--coral-color-danger-text-weak-hover, hsla(358, 100%, 94%, 1))}; $coral-color-danger-text-weak-active: #{var(--coral-color-danger-text-weak-active, hsla(359, 100%, 88%, 1))}; $coral-color-danger-text: #{var(--coral-color-danger-text, hsla(359, 51%, 53%, 1))}; @@ -35,10 +35,10 @@ $coral-color-danger-text-active: #{var(--coral-color-danger-text-active, hsla(35 $coral-color-danger-background: #{var(--coral-color-danger-background, hsla(0, 100%, 96%, 1))}; $coral-color-danger-background-hover: #{var(--coral-color-danger-background-hover, hsla(359, 100%, 88%, 1))}; $coral-color-danger-background-active: #{var(--coral-color-danger-background-active, hsla(359, 100%, 83%, 1))}; -$coral-color-danger-background-weak: #{var(--coral-color-danger-background-weak, white)}; +$coral-color-danger-background-weak: #{var(--coral-color-danger-background-weak, hsla(0, 0%, 100%, 1))}; $coral-color-danger-background-weak-hover: #{var(--coral-color-danger-background-weak-hover, hsla(358, 100%, 94%, 1))}; $coral-color-danger-background-weak-active: #{var(--coral-color-danger-background-weak-active, hsla(359, 100%, 88%, 1))}; -$coral-color-success-text-weak: #{var(--coral-color-success-text-weak, white)}; +$coral-color-success-text-weak: #{var(--coral-color-success-text-weak, hsla(0, 0%, 100%, 1))}; $coral-color-success-text-weak-hover: #{var(--coral-color-success-text-weak-hover, hsla(110, 49%, 90%, 1))}; $coral-color-success-text-weak-active: #{var(--coral-color-success-text-weak-active, hsla(110, 48%, 85%, 1))}; $coral-color-success-text: #{var(--coral-color-success-text, hsla(111, 49%, 34%, 1))}; @@ -53,13 +53,13 @@ $coral-color-success-background-hover: #{var(--coral-color-success-background-ho $coral-color-danger-border-hover: #{var(--coral-color-danger-border-hover, hsla(359, 54%, 38%, 1))}; $coral-color-success-background-active: #{var(--coral-color-success-background-active, hsla(110, 49%, 80%, 1))}; $coral-color-danger-border-active: #{var(--coral-color-danger-border-active, hsla(359, 54%, 33%, 1))}; -$coral-color-success-background-weak: #{var(--coral-color-success-background-weak, white)}; +$coral-color-success-background-weak: #{var(--coral-color-success-background-weak, hsla(0, 0%, 100%, 1))}; $coral-color-success-background-weak-hover: #{var(--coral-color-success-background-weak-hover, hsla(110, 49%, 90%, 1))}; $coral-color-success-background-weak-active: #{var(--coral-color-success-background-weak-active, hsla(110, 48%, 85%, 1))}; $coral-color-success-background-strong: #{var(--coral-color-success-background-strong, hsla(111, 49%, 34%, 1))}; $coral-color-success-background-strong-hover: #{var(--coral-color-success-background-strong-hover, hsla(111, 49%, 29%, 1))}; $coral-color-success-background-strong-active: #{var(--coral-color-success-background-strong-active, hsla(111, 49%, 24%, 1))}; -$coral-color-warning-text-weak: #{var(--coral-color-warning-text-weak, white)}; +$coral-color-warning-text-weak: #{var(--coral-color-warning-text-weak, hsla(0, 0%, 100%, 1))}; $coral-color-warning-text-weak-hover: #{var(--coral-color-warning-text-weak-hover, hsla(22, 85%, 92%, 1))}; $coral-color-warning-text-weak-active: #{var(--coral-color-warning-text-weak-active, hsla(22, 85%, 82%, 1))}; $coral-color-success-border: #{var(--coral-color-success-border, hsla(111, 49%, 34%, 1))}; @@ -71,8 +71,8 @@ $coral-color-success-border-hover: #{var(--coral-color-success-border-hover, hsl $coral-color-warning-background-hover: #{var(--coral-color-warning-background-hover, hsla(22, 85%, 82%, 1))}; $coral-color-success-border-active: #{var(--coral-color-success-border-active, hsla(111, 49%, 24%, 1))}; $coral-color-warning-background-active: #{var(--coral-color-warning-background-active, hsla(22, 85%, 72%, 1))}; -$coral-color-warning-background-weak: #{var(--coral-color-warning-background-weak, white)}; -$coral-color-assistive-text: #{var(--coral-color-assistive-text, white)}; +$coral-color-warning-background-weak: #{var(--coral-color-warning-background-weak, hsla(0, 0%, 100%, 1))}; +$coral-color-assistive-text: #{var(--coral-color-assistive-text, hsla(0, 0%, 100%, 1))}; $coral-color-warning-background-weak-hover: #{var(--coral-color-warning-background-weak-hover, hsla(22, 85%, 92%, 1))}; $coral-color-warning-background-weak-active: #{var(--coral-color-warning-background-weak-active, hsla(22, 85%, 82%, 1))}; $coral-color-assistive-background: #{var(--coral-color-assistive-background, hsla(210, 62%, 5%, 1))}; @@ -105,7 +105,7 @@ $coral-color-beta-text-active: #{var(--coral-color-beta-text-active, hsla(281, 5 $coral-color-beta-icon: #{var(--coral-color-beta-icon, hsla(280, 80%, 54%, 1))}; $coral-color-beta-icon-hover: #{var(--coral-color-beta-icon-hover, hsla(280, 80%, 44%, 1))}; $coral-color-beta-icon-active: #{var(--coral-color-beta-icon-active, hsla(280, 80%, 34%, 1))}; -$coral-color-beta-text-weak: #{var(--coral-color-beta-text-weak, white)}; +$coral-color-beta-text-weak: #{var(--coral-color-beta-text-weak, hsla(0, 0%, 100%, 1))}; $coral-color-beta-text-weak-hover: #{var(--coral-color-beta-text-weak-hover, hsla(280, 56%, 83%, 1))}; $coral-color-beta-text-weak-active: #{var(--coral-color-beta-text-weak-active, hsla(280, 57%, 73%, 1))}; $coral-color-beta-text-strong: #{var(--coral-color-beta-text-strong, hsla(281, 58%, 29%, 1))}; @@ -114,7 +114,7 @@ $coral-color-beta-text-strong-active: #{var(--coral-color-beta-text-strong-activ $coral-color-beta-background: #{var(--coral-color-beta-background, hsla(279, 57%, 90%, 1))}; $coral-color-beta-background-hover: #{var(--coral-color-beta-background-hover, hsla(279, 57%, 81%, 1))}; $coral-color-beta-background-active: #{var(--coral-color-beta-background-active, hsla(279, 57%, 71%, 1))}; -$coral-color-beta-background-weak: #{var(--coral-color-beta-background-weak, white)}; +$coral-color-beta-background-weak: #{var(--coral-color-beta-background-weak, hsla(0, 0%, 100%, 1))}; $coral-color-beta-background-weak-hover: #{var(--coral-color-beta-background-weak-hover, hsla(279, 57%, 90%, 1))}; $coral-color-beta-background-weak-active: #{var(--coral-color-beta-background-weak-active, hsla(279, 57%, 80%, 1))}; $coral-color-beta-background-strong: #{var(--coral-color-beta-background-strong, hsla(281, 58%, 29%, 1))}; @@ -125,7 +125,7 @@ $coral-color-beta-border-hover: #{var(--coral-color-beta-border-hover, hsla(282, $coral-color-beta-border-active: #{var(--coral-color-beta-border-active, hsla(282, 57%, 9%, 1))}; $coral-color-neutral-border-strong: #{var(--coral-color-neutral-border-strong, hsla(0, 0%, 25%, 1))}; $coral-color-neutral-border-strong-hover: #{var(--coral-color-neutral-border-strong-hover, hsla(0, 0%, 15%, 1))}; -$coral-color-neutral-icon-inverted: #{var(--coral-color-neutral-icon-inverted, white)}; +$coral-color-neutral-icon-inverted: #{var(--coral-color-neutral-icon-inverted, hsla(0, 0%, 100%, 1))}; $coral-color-neutral-icon: #{var(--coral-color-neutral-icon, hsla(0, 0%, 13%, 1))}; $coral-color-neutral-icon-weak: #{var(--coral-color-neutral-icon-weak, hsla(0, 0%, 38%, 1))}; $coral-color-accent-icon: #{var(--coral-color-accent-icon, hsla(204, 88%, 40%, 1))}; @@ -222,8 +222,57 @@ $coral-color-illustration-color-07: #{var(--coral-color-illustration-color-07, h $coral-color-illustration-color-08: #{var(--coral-color-illustration-color-08, hsla(211, 23%, 74%, 1))}; $coral-color-illustration-color-09: #{var(--coral-color-illustration-color-09, hsla(245, 10%, 23%, 1))}; $coral-color-accent-background-selected: #{var(--coral-color-accent-background-selected, hsla(204, 100%, 95%, 1))}; -$coral-color-branding-background: #{var(--coral-color-branding-background, linear-gradient(133deg, hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))}; -$coral-color-branding-navigation: #{var(--coral-color-branding-navigation, linear-gradient(133deg, hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))}; +$coral-color-info-text: #{var(--coral-color-info-text, hsla(204, 95%, 31%, 1))}; +$coral-color-info-text-hover: #{var(--coral-color-info-text-hover, hsla(204, 96%, 18%, 1))}; +$coral-color-info-text-active: #{var(--coral-color-info-text-active, hsla(205, 94%, 13%, 1))}; +$coral-color-info-text-weak: #{var(--coral-color-info-text-weak, hsla(0, 0%, 100%, 1))}; +$coral-color-info-text-weak-hover: #{var(--coral-color-info-text-weak-hover, hsla(204, 59%, 88%, 1))}; +$coral-color-info-text-weak-active: #{var(--coral-color-info-text-weak-active, hsla(205, 60%, 75%, 1))}; +$coral-color-info-text-strong: #{var(--coral-color-info-text-strong, hsla(204, 96%, 18%, 1))}; +$coral-color-info-text-strong-hover: #{var(--coral-color-info-text-strong-hover, hsla(204, 97%, 13%, 1))}; +$coral-color-info-text-strong-active: #{var(--coral-color-info-text-strong-active, hsla(205, 95%, 8%, 1))}; +$coral-color-info-background-hover: #{var(--coral-color-info-background-hover, hsla(205, 60%, 75%, 1))}; +$coral-color-info-background-active: #{var(--coral-color-info-background-active, hsla(204, 60%, 63%, 1))}; +$coral-color-info-background-weak: #{var(--coral-color-info-background-weak, hsla(0, 0%, 100%, 1))}; +$coral-color-info-background-weak-hover: #{var(--coral-color-info-background-weak-hover, hsla(204, 59%, 88%, 1))}; +$coral-color-info-background-weak-active: #{var(--coral-color-info-background-weak-active, hsla(205, 60%, 75%, 1))}; +$coral-color-info-background-strong: #{var(--coral-color-info-background-strong, hsla(204, 95%, 31%, 1))}; +$coral-color-info-background-strong-hover: #{var(--coral-color-info-background-strong-hover, hsla(204, 95%, 23%, 1))}; +$coral-color-info-background-strong-active: #{var(--coral-color-info-background-strong-active, hsla(205, 95%, 15%, 1))}; +$coral-color-info-border: #{var(--coral-color-info-border, hsla(204, 95%, 31%, 1))}; +$coral-color-info-border-hover: #{var(--coral-color-info-border-hover, hsla(204, 95%, 23%, 1))}; +$coral-color-info-border-active: #{var(--coral-color-info-border-active, hsla(205, 95%, 15%, 1))}; +$coral-color-info-icon: #{var(--coral-color-info-icon, hsla(204, 88%, 40%, 1))}; +$coral-color-info-icon-hover: #{var(--coral-color-info-icon-hover, hsla(204, 88%, 30%, 1))}; +$coral-color-info-icon-active: #{var(--coral-color-info-icon-active, hsla(205, 88%, 20%, 1))}; +$coral-color-brand-text: #{var(--coral-color-brand-text, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-text-hover: #{var(--coral-color-brand-text-hover, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-text-active: #{var(--coral-color-brand-text-active, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-text-inverted: #{var(--coral-color-brand-text-inverted, hsla(0, 0%, 38%, 1))}; +$coral-color-brand-text-inverted-hover: #{var(--coral-color-brand-text-inverted-hover, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-text-inverted-active: #{var(--coral-color-brand-text-inverted-active, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-text-selected: #{var(--coral-color-brand-text-selected, hsla(204, 96%, 18%, 1))}; +$coral-color-brand-background-weak: #{var(--coral-color-brand-background-weak, hsla(0, 0%, 100%, 0))}; +$coral-color-brand-background-weak-hover: #{var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 100%, 0.1))}; +$coral-color-brand-background-weak-active: #{var(--coral-color-brand-background-weak-active, hsla(0, 0%, 100%, 0.1))}; +$coral-color-brand-background-selected: #{var(--coral-color-brand-background-selected, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-background-inverted: #{var(--coral-color-brand-background-inverted, hsla(0, 0%, 13%, 0))}; +$coral-color-brand-background-inverted-hover: #{var(--coral-color-brand-background-inverted-hover, hsla(0, 0%, 13%, 0.1))}; +$coral-color-brand-background-inverted-active: #{var(--coral-color-brand-background-inverted-active, hsla(0, 0%, 13%, 0.1))}; +$coral-color-brand-border: #{var(--coral-color-brand-border, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-border-hover: #{var(--coral-color-brand-border-hover, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-border-active: #{var(--coral-color-brand-border-active, hsla(0, 0%, 100%, 1))}; +$coral-color-info-background: #{var(--coral-color-info-background, hsla(204, 59%, 88%, 1))}; +$coral-color-brand-icon: #{var(--coral-color-brand-icon, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-icon-hover: #{var(--coral-color-brand-icon-hover, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-icon-active: #{var(--coral-color-brand-icon-active, hsla(0, 0%, 100%, 1))}; +$coral-color-brand-icon-inverted: #{var(--coral-color-brand-icon-inverted, hsla(0, 0%, 38%, 1))}; +$coral-color-brand-icon-inverted-hover: #{var(--coral-color-brand-icon-inverted-hover, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-icon-inverted-active: #{var(--coral-color-brand-icon-inverted-active, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-icon-selected: #{var(--coral-color-brand-icon-selected, hsla(204, 96%, 18%, 1))}; +$coral-color-branding-background: #{var(--coral-color-branding-background, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))}; +$coral-color-branding-navigation: #{var(--coral-color-branding-navigation, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))}; +$coral-color-brand-background: #{var(--coral-color-brand-background, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))}; $coral-spacing-xxs: #{var(--coral-spacing-xxs, 0.4rem)}; $coral-spacing-xs: #{var(--coral-spacing-xs, 0.8rem)}; $coral-spacing-s: #{var(--coral-spacing-s, 1.2rem)}; @@ -239,17 +288,17 @@ $coral-sizing-m: #{var(--coral-sizing-m, 3.6rem)}; $coral-sizing-l: #{var(--coral-sizing-l, 4rem)}; $coral-sizing-xxxl: #{var(--coral-sizing-xxxl, 22rem)}; $coral-sizing-maximal: #{var(--coral-sizing-maximal, 32rem)}; -$coral-elevation-shadow-neutral-m: #{var(--coral-elevation-shadow-neutral-m, 0 0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3))}; -$coral-elevation-shadow-accent: #{var(--coral-elevation-shadow-accent, 0 0.1rem 0.1rem 0 hsla(204, 95%, 31%, 0.3))}; -$coral-elevation-shadow-success: #{var(--coral-elevation-shadow-success, 0 0.1rem 0.1rem 0 hsla(111, 49%, 34%, 0.3))}; -$coral-elevation-shadow-danger: #{var(--coral-elevation-shadow-danger, 0 0.1rem 0.1rem 0 hsla(359, 51%, 53%, 0.3))}; -$coral-elevation-shadow-warning: #{var(--coral-elevation-shadow-warning, 0 0.1rem 0.1rem 0 hsla(22, 93%, 41%, 0.3))}; -$coral-elevation-shadow-beta: #{var(--coral-elevation-shadow-beta, 0 0.1rem 0.1rem 0 hsla(281, 58%, 29%, 0.3))}; -$coral-elevation-shadow-neutral-inverted-m: #{var(--coral-elevation-shadow-neutral-inverted-m, 0 -0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3))}; // stylelint-disable scss/operator-no-unspaced -$coral-elevation-shadow-neutral-inverted-l: #{var(--coral-elevation-shadow-neutral-inverted-l, 0 -0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.3))}; -$coral-elevation-shadow-neutral-l: #{var(--coral-elevation-shadow-neutral-l, 0 0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.3))}; -$coral-elevation-shadow-neutral-s: #{var(--coral-elevation-shadow-neutral-s, 0 0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.5))}; -$coral-elevation-shadow-neutral-inverted-s: #{var(--coral-elevation-shadow-neutral-inverted-s, 0 -0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.3))}; +$coral-elevation-shadow-neutral-m: #{var(--coral-elevation-shadow-neutral-m, 0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3))}; +$coral-elevation-shadow-accent: #{var(--coral-elevation-shadow-accent, 0rem 0.1rem 0.1rem 0rem hsla(204, 95%, 31%, 0.3))}; +$coral-elevation-shadow-success: #{var(--coral-elevation-shadow-success, 0rem 0.1rem 0.1rem 0rem hsla(111, 49%, 34%, 0.3))}; +$coral-elevation-shadow-danger: #{var(--coral-elevation-shadow-danger, 0rem 0.1rem 0.1rem 0rem hsla(359, 51%, 53%, 0.3))}; +$coral-elevation-shadow-warning: #{var(--coral-elevation-shadow-warning, 0rem 0.1rem 0.1rem 0rem hsla(22, 93%, 41%, 0.3))}; +$coral-elevation-shadow-beta: #{var(--coral-elevation-shadow-beta, 0rem 0.1rem 0.1rem 0rem hsla(281, 58%, 29%, 0.3))}; +$coral-elevation-shadow-neutral-inverted-m: #{var(--coral-elevation-shadow-neutral-inverted-m, 0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3))}; +$coral-elevation-shadow-neutral-inverted-l: #{var(--coral-elevation-shadow-neutral-inverted-l, 0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3))}; +$coral-elevation-shadow-neutral-l: #{var(--coral-elevation-shadow-neutral-l, 0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3))}; +$coral-elevation-shadow-neutral-s: #{var(--coral-elevation-shadow-neutral-s, 0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5))}; +$coral-elevation-shadow-neutral-inverted-s: #{var(--coral-elevation-shadow-neutral-inverted-s, 0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.3))}; $coral-heading-l: #{var(--coral-heading-l, 600 1.8rem/140% 'Source Sans Pro')}; $coral-paragraph-m: #{var(--coral-paragraph-m, 400 1.4rem/140% 'Source Sans Pro')}; $coral-paragraph-m-bold: #{var(--coral-paragraph-m-bold, 600 1.4rem/140% 'Source Sans Pro')}; @@ -262,6 +311,8 @@ $coral-data-m-bold: #{var(--coral-data-m-bold, 700 1.4rem/140% 'Inconsolata')}; $coral-link-m-underlined: #{var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')}; $coral-link-m: #{var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')}; $coral-data-xl: #{var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')}; +$coral-link-s: #{var(--coral-link-s, 600 1.2rem/140% 'Source Sans Pro')}; +$coral-link-s-underlined: #{var(--coral-link-s-underlined, 600 1.2rem/140% 'Source Sans Pro')}; $coral-radius-m: #{var(--coral-radius-m, 0.8rem)}; $coral-radius-l: #{var(--coral-radius-l, 1.6rem)}; $coral-radius-round: #{var(--coral-radius-round, 9999.9rem)}; diff --git a/packages/design-tokens/src/light/_index.scss b/packages/design-tokens/src/light/_index.scss index 776fd2fe5cf..1f01bcd6cdf 100644 --- a/packages/design-tokens/src/light/_index.scss +++ b/packages/design-tokens/src/light/_index.scss @@ -1,294 +1,344 @@ -[data-theme='light'] { - --coral-color-neutral-text: hsla(0, 0%, 13%, 1); - --coral-color-neutral-text-weak: hsla(0, 0%, 38%, 1); - --coral-color-neutral-text-disabled: hsla(0, 0%, 44%, 1); - --coral-color-neutral-text-inverted: white; - --coral-color-neutral-background: white; - --coral-color-neutral-background-medium: hsla(0, 0%, 97%, 1); - --coral-color-neutral-background-strong: hsla(0, 0%, 88%, 1); - --coral-color-neutral-background-disabled: hsla(0, 0%, 88%, 1); - --coral-color-neutral-border: hsla(0, 0%, 55%, 1); - --coral-color-neutral-border-weak: hsla(0, 0%, 82%, 1); - --coral-color-neutral-border-hover: hsla(0, 0%, 40%, 1); - --coral-color-accent-text-weak: white; - --coral-color-accent-text-weak-hover: hsla(204, 59%, 88%, 1); - --coral-color-accent-text-weak-active: hsla(205, 60%, 75%, 1); - --coral-color-accent-text: hsla(204, 95%, 31%, 1); - --coral-color-accent-text-hover: hsla(204, 96%, 18%, 1); - --coral-color-accent-text-active: hsla(205, 94%, 13%, 1); - --coral-color-accent-background: hsla(204, 59%, 88%, 1); - --coral-color-accent-background-hover: hsla(205, 60%, 75%, 1); - --coral-color-accent-background-active: hsla(204, 60%, 63%, 1); - --coral-color-accent-background-weak: white; - --coral-color-accent-background-weak-hover: hsla(204, 59%, 88%, 1); - --coral-color-accent-background-weak-active: hsla(205, 60%, 75%, 1); - --coral-color-accent-background-strong: hsla(204, 95%, 31%, 1); - --coral-color-accent-background-strong-hover: hsla(204, 95%, 23%, 1); - --coral-color-accent-background-strong-active: hsla(205, 95%, 15%, 1); - --coral-color-accent-border-hover: hsla(204, 95%, 23%, 1); - --coral-color-accent-border-active: hsla(205, 95%, 15%, 1); - --coral-color-danger-text-weak: white; - --coral-color-danger-text-weak-hover: hsla(358, 100%, 94%, 1); - --coral-color-danger-text-weak-active: hsla(359, 100%, 88%, 1); - --coral-color-danger-text: hsla(359, 51%, 53%, 1); - --coral-color-danger-text-hover: hsla(359, 52%, 43%, 1); - --coral-color-danger-text-active: hsla(359, 51%, 33%, 1); - --coral-color-danger-background: hsla(0, 100%, 96%, 1); - --coral-color-danger-background-hover: hsla(359, 100%, 88%, 1); - --coral-color-danger-background-active: hsla(359, 100%, 83%, 1); - --coral-color-danger-background-weak: white; - --coral-color-danger-background-weak-hover: hsla(358, 100%, 94%, 1); - --coral-color-danger-background-weak-active: hsla(359, 100%, 88%, 1); - --coral-color-success-text-weak: white; - --coral-color-success-text-weak-hover: hsla(110, 49%, 90%, 1); - --coral-color-success-text-weak-active: hsla(110, 48%, 85%, 1); - --coral-color-success-text: hsla(111, 49%, 34%, 1); - --coral-color-success-text-hover: hsla(111, 49%, 29%, 1); - --coral-color-success-text-active: hsla(111, 49%, 24%, 1); - --coral-color-success-background: hsla(110, 49%, 90%, 1); - --coral-color-danger-background-strong: hsla(359, 51%, 53%, 1); - --coral-color-danger-background-strong-hover: hsla(359, 54%, 38%, 1); - --coral-color-danger-background-strong-active: hsla(359, 54%, 33%, 1); - --coral-color-danger-border: hsla(359, 51%, 53%, 1); - --coral-color-success-background-hover: hsla(110, 48%, 85%, 1); - --coral-color-danger-border-hover: hsla(359, 54%, 38%, 1); - --coral-color-success-background-active: hsla(110, 49%, 80%, 1); - --coral-color-danger-border-active: hsla(359, 54%, 33%, 1); - --coral-color-success-background-weak: white; - --coral-color-success-background-weak-hover: hsla(110, 49%, 90%, 1); - --coral-color-success-background-weak-active: hsla(110, 48%, 85%, 1); - --coral-color-success-background-strong: hsla(111, 49%, 34%, 1); - --coral-color-success-background-strong-hover: hsla(111, 49%, 29%, 1); - --coral-color-success-background-strong-active: hsla(111, 49%, 24%, 1); - --coral-color-warning-text-weak: white; - --coral-color-warning-text-weak-hover: hsla(22, 85%, 92%, 1); - --coral-color-warning-text-weak-active: hsla(22, 85%, 82%, 1); - --coral-color-success-border: hsla(111, 49%, 34%, 1); - --coral-color-warning-text: hsla(22, 93%, 41%, 1); - --coral-color-warning-text-hover: hsla(21, 94%, 31%, 1); - --coral-color-warning-text-active: hsla(21, 93%, 21%, 1); - --coral-color-warning-background: hsla(22, 85%, 92%, 1); - --coral-color-success-border-hover: hsla(111, 49%, 29%, 1); - --coral-color-warning-background-hover: hsla(22, 85%, 82%, 1); - --coral-color-success-border-active: hsla(111, 49%, 24%, 1); - --coral-color-warning-background-active: hsla(22, 85%, 72%, 1); - --coral-color-warning-background-weak: white; - --coral-color-assistive-text: white; - --coral-color-warning-background-weak-hover: hsla(22, 85%, 92%, 1); - --coral-color-warning-background-weak-active: hsla(22, 85%, 82%, 1); - --coral-color-assistive-background: hsla(210, 62%, 5%, 1); - --coral-color-warning-background-strong: hsla(22, 93%, 41%, 1); - --coral-color-warning-background-strong-hover: hsla(21, 94%, 31%, 1); - --coral-color-warning-background-strong-active: hsla(21, 93%, 21%, 1); - --coral-color-warning-border: hsla(22, 93%, 41%, 1); - --coral-color-assistive-border: hsla(0, 0%, 47%, 1); - --coral-color-warning-border-hover: hsla(21, 94%, 31%, 1); - --coral-color-warning-border-active: hsla(21, 93%, 21%, 1); - --coral-color-branding-brand: hsla(359, 100%, 71%, 1); - --coral-color-neutral-border-disabled: hsla(0, 0%, 65%, 1); - --coral-color-neutral-border-weak-hover: hsla(0, 0%, 72%, 1); - --coral-color-assistive-border-focus: hsla(241, 54%, 61%, 1); - --coral-color-accent-text-strong: hsla(204, 96%, 18%, 1); - --coral-color-accent-text-strong-hover: hsla(204, 97%, 13%, 1); - --coral-color-accent-text-strong-active: hsla(205, 95%, 8%, 1); - --coral-color-danger-text-strong: hsla(359, 47%, 44%, 1); - --coral-color-danger-text-strong-hover: hsla(359, 54%, 38%, 1); - --coral-color-danger-text-strong-active: hsla(359, 54%, 33%, 1); - --coral-color-success-text-strong: hsla(111, 49%, 29%, 1); - --coral-color-success-text-strong-hover: hsla(110, 49%, 24%, 1); - --coral-color-success-text-strong-active: hsla(111, 48%, 19%, 1); - --coral-color-warning-text-strong: hsla(22, 86%, 27%, 1); - --coral-color-warning-text-strong-hover: hsla(23, 86%, 22%, 1); - --coral-color-warning-text-strong-active: hsla(23, 86%, 17%, 1); - --coral-color-beta-text: hsla(280, 57%, 49%, 1); - --coral-color-beta-text-hover: hsla(281, 58%, 39%, 1); - --coral-color-beta-text-active: hsla(281, 58%, 29%, 1); - --coral-color-beta-icon: hsla(280, 80%, 54%, 1); - --coral-color-beta-icon-hover: hsla(280, 80%, 44%, 1); - --coral-color-beta-icon-active: hsla(280, 80%, 34%, 1); - --coral-color-beta-text-weak: white; - --coral-color-beta-text-weak-hover: hsla(280, 56%, 83%, 1); - --coral-color-beta-text-weak-active: hsla(280, 57%, 73%, 1); - --coral-color-beta-text-strong: hsla(281, 58%, 29%, 1); - --coral-color-beta-text-strong-hover: hsla(282, 58%, 19%, 1); - --coral-color-beta-text-strong-active: hsla(282, 57%, 9%, 1); - --coral-color-beta-background: hsla(279, 57%, 90%, 1); - --coral-color-beta-background-hover: hsla(279, 57%, 81%, 1); - --coral-color-beta-background-active: hsla(279, 57%, 71%, 1); - --coral-color-beta-background-weak: white; - --coral-color-beta-background-weak-hover: hsla(279, 57%, 90%, 1); - --coral-color-beta-background-weak-active: hsla(279, 57%, 80%, 1); - --coral-color-beta-background-strong: hsla(281, 58%, 29%, 1); - --coral-color-beta-background-strong-hover: hsla(282, 58%, 19%, 1); - --coral-color-beta-background-strong-active: hsla(282, 57%, 9%, 1); - --coral-color-beta-border: hsla(281, 58%, 29%, 1); - --coral-color-beta-border-hover: hsla(282, 58%, 19%, 1); - --coral-color-beta-border-active: hsla(282, 57%, 9%, 1); - --coral-color-neutral-border-strong: hsla(0, 0%, 25%, 1); - --coral-color-neutral-border-strong-hover: hsla(0, 0%, 15%, 1); - --coral-color-neutral-icon-inverted: white; - --coral-color-neutral-icon: hsla(0, 0%, 13%, 1); - --coral-color-neutral-icon-weak: hsla(0, 0%, 38%, 1); - --coral-color-accent-icon: hsla(204, 88%, 40%, 1); - --coral-color-accent-icon-hover: hsla(204, 88%, 30%, 1); - --coral-color-accent-icon-active: hsla(205, 88%, 20%, 1); - --coral-color-danger-icon: hsla(359, 69%, 53%, 1); - --coral-color-danger-icon-hover: hsla(359, 69%, 43%, 1); - --coral-color-danger-icon-active: hsla(359, 69%, 33%, 1); - --coral-color-success-icon: hsla(111, 53%, 40%, 1); - --coral-color-success-icon-hover: hsla(111, 53%, 30%, 1); - --coral-color-success-icon-active: hsla(111, 53%, 20%, 1); - --coral-color-warning-icon: hsla(22, 87%, 47%, 1); - --coral-color-warning-icon-hover: hsla(22, 87%, 37%, 1); - --coral-color-warning-icon-active: hsla(22, 87%, 27%, 1); - --coral-color-charts-neutral: hsla(0, 0%, 22%, 1); - --coral-color-charts-neutral-weak: hsla(0, 0%, 83%, 1); - --coral-color-charts-neutral-strong: hsla(0, 0%, 12%, 1); - --coral-color-charts-neutral-hover: hsla(0, 0%, 12%, 1); - --coral-color-charts-success: hsla(148, 87%, 40%, 1); - --coral-color-charts-success-weak: hsla(130, 52%, 91%, 1); - --coral-color-charts-success-strong: hsla(139, 50%, 22%, 1); - --coral-color-charts-success-hover: hsla(139, 50%, 22%, 1); - --coral-color-charts-danger: hsla(4, 89%, 49%, 1); - --coral-color-charts-danger-weak: hsla(359, 69%, 73%, 1); - --coral-color-charts-danger-strong: hsla(359, 62%, 43%, 1); - --coral-color-charts-danger-hover: hsla(359, 62%, 43%, 1); - --coral-color-charts-warning: hsla(32, 100%, 56%, 1); - --coral-color-charts-warning-weak: hsla(22, 88%, 84%, 1); - --coral-color-charts-warning-strong: hsla(22, 75%, 42%, 1); - --coral-color-charts-warning-hover: hsla(22, 75%, 42%, 1); - --coral-color-charts-default: hsla(216, 82%, 48%, 1); - --coral-color-charts-default-weak: hsla(204, 59%, 73%, 1); - --coral-color-charts-default-strong: hsla(204, 92%, 29%, 1); - --coral-color-charts-default-hover: hsla(204, 92%, 29%, 1); - --coral-color-charts-color-00: hsla(48, 100%, 50%, 1); - --coral-color-charts-color-00-weak: hsla(51, 91%, 82%, 1); - --coral-color-charts-color-00-strong: hsla(48, 82%, 45%, 1); - --coral-color-charts-color-00-hover: hsla(48, 82%, 45%, 1); - --coral-color-charts-color-01: hsla(216, 82%, 48%, 1); - --coral-color-charts-color-01-weak: hsla(204, 59%, 73%, 1); - --coral-color-charts-color-01-strong: hsla(204, 92%, 29%, 1); - --coral-color-charts-color-01-hover: hsla(204, 92%, 29%, 1); - --coral-color-charts-color-02: hsla(194, 92%, 50%, 1); - --coral-color-charts-color-02-weak: hsla(194, 91%, 91%, 1); - --coral-color-charts-color-02-strong: hsla(194, 93%, 32%, 1); - --coral-color-charts-color-02-hover: hsla(194, 93%, 32%, 1); - --coral-color-charts-color-03: hsla(140, 39%, 79%, 1); - --coral-color-charts-color-03-weak: hsla(138, 40%, 92%, 1); - --coral-color-charts-color-03-strong: hsla(139, 11%, 35%, 1); - --coral-color-charts-color-03-hover: hsla(139, 11%, 35%, 1); - --coral-color-charts-color-04: hsla(148, 87%, 40%, 1); - --coral-color-charts-color-04-weak: hsla(130, 52%, 91%, 1); - --coral-color-charts-color-04-strong: hsla(139, 50%, 22%, 1); - --coral-color-charts-color-04-hover: hsla(139, 50%, 22%, 1); - --coral-color-charts-color-05: hsla(324, 68%, 71%, 1); - --coral-color-charts-color-05-weak: hsla(323, 69%, 95%, 1); - --coral-color-charts-color-05-strong: hsla(324, 28%, 49%, 1); - --coral-color-charts-color-05-hover: hsla(324, 28%, 49%, 1); - --coral-color-charts-color-06: hsla(280, 75%, 58%, 1); - --coral-color-charts-color-06-weak: hsla(279, 77%, 88%, 1); - --coral-color-charts-color-06-strong: hsla(280, 54%, 36%, 1); - --coral-color-charts-color-06-hover: hsla(280, 54%, 36%, 1); - --coral-color-charts-color-07: hsla(4, 89%, 49%, 1); - --coral-color-charts-color-07-weak: hsla(359, 69%, 73%, 1); - --coral-color-charts-color-07-strong: hsla(359, 62%, 43%, 1); - --coral-color-charts-color-07-hover: hsla(359, 62%, 43%, 1); - --coral-color-charts-color-08: hsla(22, 88%, 54%, 1); - --coral-color-charts-color-08-weak: hsla(22, 88%, 84%, 1); - --coral-color-charts-color-08-strong: hsla(22, 75%, 42%, 1); - --coral-color-charts-color-08-hover: hsla(22, 75%, 42%, 1); - --coral-color-charts-color-09: hsla(34, 34%, 45%, 1); - --coral-color-charts-color-09-weak: hsla(35, 28%, 82%, 1); - --coral-color-charts-color-09-strong: hsla(35, 34%, 27%, 1); - --coral-color-charts-color-09-hover: hsla(35, 34%, 27%, 1); - --coral-color-accent-border: hsla(204, 95%, 31%, 1); - --coral-color-charts-default-text: hsla(205, 87%, 94%, 1); - --coral-color-charts-default-text-strong: hsla(205, 93%, 22%, 1); - --coral-color-charts-default-text-weak: hsla(207, 93%, 94%, 1); - --coral-color-charts-color-09-text: hsla(36, 36%, 5%, 1); - --coral-color-charts-color-09-text-strong: hsla(36, 36%, 5%, 1); - --coral-color-charts-color-09-text-weak: hsla(35, 28%, 82%, 1); - --coral-color-neutral-background-heavy: hsla(0, 0%, 78%, 1); - --coral-color-illustration-color-01: hsla(211, 62%, 26%, 1); - --coral-color-illustration-color-02: hsla(211, 43%, 47%, 1); - --coral-color-illustration-color-03: hsla(201, 31%, 85%, 1); - --coral-color-illustration-color-05: hsla(359, 82%, 81%, 1); - --coral-color-illustration-color-04: hsla(359, 100%, 72%, 1); - --coral-color-illustration-color-06: hsla(358, 100%, 93%, 1); - --coral-color-illustration-skintone-01: hsla(20, 91%, 83%, 1); - --coral-color-illustration-skintone-02: hsla(21, 34%, 55%, 1); - --coral-color-illustration-skintone-03: hsla(17, 33%, 28%, 1); - --coral-color-illustration-shadow: hsla(0, 0%, 0%, 0.1); - --coral-color-illustration-color-07: hsla(192, 33%, 97%, 1); - --coral-color-illustration-color-08: hsla(211, 23%, 74%, 1); - --coral-color-illustration-color-09: hsla(245, 10%, 23%, 1); - --coral-color-accent-background-selected: hsla(204, 100%, 95%, 1); - --coral-color-branding-background: linear-gradient(133deg, hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%); - --coral-color-branding-navigation: linear-gradient(133deg, hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%); - --coral-spacing-xxs: 0.4rem; - --coral-spacing-xs: 0.8rem; - --coral-spacing-s: 1.2rem; - --coral-spacing-m: 1.6rem; - --coral-spacing-l: 2.8rem; - --coral-spacing-xl: 3.6rem; - --coral-sizing-minimal: 1.2rem; - --coral-sizing-xxxs: 1.6rem; - --coral-sizing-xxs: 2rem; - --coral-sizing-xs: 2.4rem; - --coral-sizing-s: 2.8rem; - --coral-sizing-m: 3.6rem; - --coral-sizing-l: 4rem; - --coral-sizing-xxxl: 22rem; - --coral-sizing-maximal: 32rem; - --coral-elevation-shadow-neutral-m: 0 0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3); - --coral-elevation-shadow-accent: 0 0.1rem 0.1rem 0 hsla(204, 95%, 31%, 0.3); - --coral-elevation-shadow-success: 0 0.1rem 0.1rem 0 hsla(111, 49%, 34%, 0.3); - --coral-elevation-shadow-danger: 0 0.1rem 0.1rem 0 hsla(359, 51%, 53%, 0.3); - --coral-elevation-shadow-warning: 0 0.1rem 0.1rem 0 hsla(22, 93%, 41%, 0.3); - --coral-elevation-shadow-beta: 0 0.1rem 0.1rem 0 hsla(281, 58%, 29%, 0.3); - --coral-elevation-shadow-neutral-inverted-m: 0 -0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3); // stylelint-disable scss/operator-no-unspaced - --coral-elevation-shadow-neutral-inverted-l: 0 -0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.3); - --coral-elevation-shadow-neutral-l: 0 0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.3); - --coral-elevation-shadow-neutral-s: 0 0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.5); - --coral-elevation-shadow-neutral-inverted-s: 0 -0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.3); - --coral-heading-l: 600 1.8rem/140% 'Source Sans Pro'; - --coral-paragraph-m: 400 1.4rem/140% 'Source Sans Pro'; - --coral-paragraph-m-bold: 600 1.4rem/140% 'Source Sans Pro'; - --coral-paragraph-s: 400 1.2rem/140% 'Source Sans Pro'; - --coral-paragraph-s-bold: 600 1.2rem/140% 'Source Sans Pro'; - --coral-heading-m: 600 1.6rem/140% 'Source Sans Pro'; - --coral-heading-s: 600 1.4rem/140% 'Source Sans Pro'; - --coral-data-m: 400 1.4rem/140% 'Inconsolata'; - --coral-data-m-bold: 700 1.4rem/140% 'Inconsolata'; - --coral-link-m-underlined: 600 1.4rem/140% 'Source Sans Pro'; - --coral-link-m: 600 1.4rem/140% 'Source Sans Pro'; - --coral-data-xl: 400 2.4rem/140% 'Inconsolata'; - --coral-radius-m: 0.8rem; - --coral-radius-l: 1.6rem; - --coral-radius-round: 9999.9rem; - --coral-radius-s: 0.4rem; - --coral-border-s-solid: 1px solid; - --coral-border-m-solid: 2px solid; - --coral-border-s-dashed: 1px dashed; - --coral-border-m-dashed: 2px dashed; - --coral-opacity-l: 0.2; - --coral-opacity-m: 0.4; - --coral-opacity-s: 0.6; - --coral-breakpoint-s: 40em; - --coral-breakpoint-m: 48em; - --coral-breakpoint-l: 64em; - --coral-breakpoint-xl: 80em; - --coral-branding-logo: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQ3SURBVHgB7Zu/UxNBFMe/e6ahQ0qxiBpaQWfUTjM0aqMMnWMh1iJEeyHBXiLqjDM6IP+A0Dk2Gkq0EMaxkhmuADsgNmZGgfW9vZz5dUcul938uPGbCbnb+5H95L3bu33vIaBZMpXqxT6GADEIIYcgaFmilzbFq3a1aZtN2/KQIkdHrovn2Rw0S0CDilBJOtskrRKcAgqjPL1zEGJZzM0uQoOaAlRghwQlkUJ4KD/ZYNg/yIiXWRshFQrQMFjN11EvM/iNxTCgDQPK8dQIHbUA82DV2iTXzTTquoEBldUkpslyKbRTFmap1zMim80H2T0QIMHFCWyJAIfQGdqka3M4iMvWBVRwB/iI2mG+3QoEeSRgB8O5qgvpC9gFcK6OhPQEVAPKAb6g8+EcCeqrRZAeA4/leQCPlt0Cx5I4R+8pr001FpT3U2P0sYDuk6TXKD3PLpc3VlhQXXdQ1jOn61eBvj4YkKDXE3V5lanSRQ9xByZd89IFArwGDJyBIZ2ih/6KB5F/gMp6EmmYUk+PA2daAhPlVixZcN8gHMuca1breLkVS4ACV2BKDJc0d/oalVlRARZHzjhMiOFa4ZqVoumcUL+oa8Gb0C2+5m7fagccS0DKSWcByoJ70DW/Y7DkZccledlLGxvAzm5l2y6tv3sPjdrDMZyO0QQ2CV1woyN0K7joD+YqkaB3VdvOjm5AFfyKqTmeltATnFFya9tZHkj471coAL8KlW1fv0G7JANaGkfP1/POJ4OmH/nv93YJWP0MwxLEdpYHmVbHVloniskyYBxRFQWcow1IbBYirv+A3S4GtBFd2ZZKX0VVkgGBdURVAj/ZgmuIpiSFYFYsoowqIFtwzUJMAUbxOsxzStwqRoOjaMUV/uPcByWeIlqSnOfnBQcwRrnwVrqp+eia7WaCFaByU51W5AltoeC/PeExGU5QMLi/H5qUcxdiKC1lKaPEgZrm54cMxzN7v1k9t3NAiuMwHN5g4JME951iNc9eoElJSqfNuCsVwQqKz6SpRU9ugt1w4l5wd+Qf5dW8E5BqRhIZGj3T7mrlwzZbkROKOsTWmSNrrH7iL/UXg3GwKf24eTju+z7elDfUps+cMpEl6BRbUbnhiVLEbesHsL2tA8oVj5x3q8tMvDO84yku1WhvuUijksiSaz6obvaeD8aQUWnh7tGm6rOHPAHVbcPCKHRdj2blFCH4FAYFKSP5AE4sdqbCl5G46mDIQIVAdWMyZHqbkhjD6CR35fEhYClXoKBTEfI8j1Q4+q5mXtwHKxgcq/FySidZyjUprXbZTYJ7WF0mUk9hC2Lj9MQwRkdPhT1HA3ImAvSUFbSEslzNljQz6HQxvx+HXtimwFxp65ByXYkbdMYkSjOSRs+fLwbBGCzXDBhCdiCQilnjQXqzZXvpW+KotbCtYrIc9JJijf+tgONDOqDK9RfJ1nAWmpwCzwAAAABJRU5ErkJggg=='); - --coral-transition-instant: 100ms ease-out; - --coral-transition-fast: 250ms ease-in-out; - --coral-transition-normal: 300ms ease-in-out; - --coral-transition-slow: 400ms ease-in; - --coral-elevation-layer-flat: 0; - --coral-elevation-layer-standard-front: 4; - --coral-elevation-layer-interactive-front: 8; - --coral-elevation-layer-overlay: 16; - --coral-animation-heartbeat: coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite; - color-scheme: light; +[data-theme="light"] { + --coral-color-neutral-text: hsla(0, 0%, 13%, 1); + --coral-color-neutral-text-weak: hsla(0, 0%, 38%, 1); + --coral-color-neutral-text-disabled: hsla(0, 0%, 44%, 1); + --coral-color-neutral-text-inverted: hsla(0, 0%, 100%, 1); + --coral-color-neutral-background: hsla(0, 0%, 100%, 1); + --coral-color-neutral-background-medium: hsla(0, 0%, 97%, 1); + --coral-color-neutral-background-strong: hsla(0, 0%, 88%, 1); + --coral-color-neutral-background-disabled: hsla(0, 0%, 88%, 1); + --coral-color-neutral-border: hsla(0, 0%, 55%, 1); + --coral-color-neutral-border-weak: hsla(0, 0%, 82%, 1); + --coral-color-neutral-border-hover: hsla(0, 0%, 40%, 1); + --coral-color-accent-text-weak: hsla(0, 0%, 100%, 1); + --coral-color-accent-text-weak-hover: hsla(204, 59%, 88%, 1); + --coral-color-accent-text-weak-active: hsla(205, 60%, 75%, 1); + --coral-color-accent-text: hsla(204, 95%, 31%, 1); + --coral-color-accent-text-hover: hsla(204, 96%, 18%, 1); + --coral-color-accent-text-active: hsla(205, 94%, 13%, 1); + --coral-color-accent-background: hsla(204, 59%, 88%, 1); + --coral-color-accent-background-hover: hsla(205, 60%, 75%, 1); + --coral-color-accent-background-active: hsla(204, 60%, 63%, 1); + --coral-color-accent-background-weak: hsla(0, 0%, 100%, 1); + --coral-color-accent-background-weak-hover: hsla(204, 59%, 88%, 1); + --coral-color-accent-background-weak-active: hsla(205, 60%, 75%, 1); + --coral-color-accent-background-strong: hsla(204, 95%, 31%, 1); + --coral-color-accent-background-strong-hover: hsla(204, 95%, 23%, 1); + --coral-color-accent-background-strong-active: hsla(205, 95%, 15%, 1); + --coral-color-accent-border-hover: hsla(204, 95%, 23%, 1); + --coral-color-accent-border-active: hsla(205, 95%, 15%, 1); + --coral-color-danger-text-weak: hsla(0, 0%, 100%, 1); + --coral-color-danger-text-weak-hover: hsla(358, 100%, 94%, 1); + --coral-color-danger-text-weak-active: hsla(359, 100%, 88%, 1); + --coral-color-danger-text: hsla(359, 51%, 53%, 1); + --coral-color-danger-text-hover: hsla(359, 52%, 43%, 1); + --coral-color-danger-text-active: hsla(359, 51%, 33%, 1); + --coral-color-danger-background: hsla(0, 100%, 96%, 1); + --coral-color-danger-background-hover: hsla(359, 100%, 88%, 1); + --coral-color-danger-background-active: hsla(359, 100%, 83%, 1); + --coral-color-danger-background-weak: hsla(0, 0%, 100%, 1); + --coral-color-danger-background-weak-hover: hsla(358, 100%, 94%, 1); + --coral-color-danger-background-weak-active: hsla(359, 100%, 88%, 1); + --coral-color-success-text-weak: hsla(0, 0%, 100%, 1); + --coral-color-success-text-weak-hover: hsla(110, 49%, 90%, 1); + --coral-color-success-text-weak-active: hsla(110, 48%, 85%, 1); + --coral-color-success-text: hsla(111, 49%, 34%, 1); + --coral-color-success-text-hover: hsla(111, 49%, 29%, 1); + --coral-color-success-text-active: hsla(111, 49%, 24%, 1); + --coral-color-success-background: hsla(110, 49%, 90%, 1); + --coral-color-danger-background-strong: hsla(359, 51%, 53%, 1); + --coral-color-danger-background-strong-hover: hsla(359, 54%, 38%, 1); + --coral-color-danger-background-strong-active: hsla(359, 54%, 33%, 1); + --coral-color-danger-border: hsla(359, 51%, 53%, 1); + --coral-color-success-background-hover: hsla(110, 48%, 85%, 1); + --coral-color-danger-border-hover: hsla(359, 54%, 38%, 1); + --coral-color-success-background-active: hsla(110, 49%, 80%, 1); + --coral-color-danger-border-active: hsla(359, 54%, 33%, 1); + --coral-color-success-background-weak: hsla(0, 0%, 100%, 1); + --coral-color-success-background-weak-hover: hsla(110, 49%, 90%, 1); + --coral-color-success-background-weak-active: hsla(110, 48%, 85%, 1); + --coral-color-success-background-strong: hsla(111, 49%, 34%, 1); + --coral-color-success-background-strong-hover: hsla(111, 49%, 29%, 1); + --coral-color-success-background-strong-active: hsla(111, 49%, 24%, 1); + --coral-color-warning-text-weak: hsla(0, 0%, 100%, 1); + --coral-color-warning-text-weak-hover: hsla(22, 85%, 92%, 1); + --coral-color-warning-text-weak-active: hsla(22, 85%, 82%, 1); + --coral-color-success-border: hsla(111, 49%, 34%, 1); + --coral-color-warning-text: hsla(22, 93%, 41%, 1); + --coral-color-warning-text-hover: hsla(21, 94%, 31%, 1); + --coral-color-warning-text-active: hsla(21, 93%, 21%, 1); + --coral-color-warning-background: hsla(22, 85%, 92%, 1); + --coral-color-success-border-hover: hsla(111, 49%, 29%, 1); + --coral-color-warning-background-hover: hsla(22, 85%, 82%, 1); + --coral-color-success-border-active: hsla(111, 49%, 24%, 1); + --coral-color-warning-background-active: hsla(22, 85%, 72%, 1); + --coral-color-warning-background-weak: hsla(0, 0%, 100%, 1); + --coral-color-assistive-text: hsla(0, 0%, 100%, 1); + --coral-color-warning-background-weak-hover: hsla(22, 85%, 92%, 1); + --coral-color-warning-background-weak-active: hsla(22, 85%, 82%, 1); + --coral-color-assistive-background: hsla(210, 62%, 5%, 1); + --coral-color-warning-background-strong: hsla(22, 93%, 41%, 1); + --coral-color-warning-background-strong-hover: hsla(21, 94%, 31%, 1); + --coral-color-warning-background-strong-active: hsla(21, 93%, 21%, 1); + --coral-color-warning-border: hsla(22, 93%, 41%, 1); + --coral-color-assistive-border: hsla(0, 0%, 47%, 1); + --coral-color-warning-border-hover: hsla(21, 94%, 31%, 1); + --coral-color-warning-border-active: hsla(21, 93%, 21%, 1); + --coral-color-branding-brand: hsla(359, 100%, 71%, 1); + --coral-color-neutral-border-disabled: hsla(0, 0%, 65%, 1); + --coral-color-neutral-border-weak-hover: hsla(0, 0%, 72%, 1); + --coral-color-assistive-border-focus: hsla(241, 54%, 61%, 1); + --coral-color-accent-text-strong: hsla(204, 96%, 18%, 1); + --coral-color-accent-text-strong-hover: hsla(204, 97%, 13%, 1); + --coral-color-accent-text-strong-active: hsla(205, 95%, 8%, 1); + --coral-color-danger-text-strong: hsla(359, 47%, 44%, 1); + --coral-color-danger-text-strong-hover: hsla(359, 54%, 38%, 1); + --coral-color-danger-text-strong-active: hsla(359, 54%, 33%, 1); + --coral-color-success-text-strong: hsla(111, 49%, 29%, 1); + --coral-color-success-text-strong-hover: hsla(110, 49%, 24%, 1); + --coral-color-success-text-strong-active: hsla(111, 48%, 19%, 1); + --coral-color-warning-text-strong: hsla(22, 86%, 27%, 1); + --coral-color-warning-text-strong-hover: hsla(23, 86%, 22%, 1); + --coral-color-warning-text-strong-active: hsla(23, 86%, 17%, 1); + --coral-color-beta-text: hsla(280, 57%, 49%, 1); + --coral-color-beta-text-hover: hsla(281, 58%, 39%, 1); + --coral-color-beta-text-active: hsla(281, 58%, 29%, 1); + --coral-color-beta-icon: hsla(280, 80%, 54%, 1); + --coral-color-beta-icon-hover: hsla(280, 80%, 44%, 1); + --coral-color-beta-icon-active: hsla(280, 80%, 34%, 1); + --coral-color-beta-text-weak: hsla(0, 0%, 100%, 1); + --coral-color-beta-text-weak-hover: hsla(280, 56%, 83%, 1); + --coral-color-beta-text-weak-active: hsla(280, 57%, 73%, 1); + --coral-color-beta-text-strong: hsla(281, 58%, 29%, 1); + --coral-color-beta-text-strong-hover: hsla(282, 58%, 19%, 1); + --coral-color-beta-text-strong-active: hsla(282, 57%, 9%, 1); + --coral-color-beta-background: hsla(279, 57%, 90%, 1); + --coral-color-beta-background-hover: hsla(279, 57%, 81%, 1); + --coral-color-beta-background-active: hsla(279, 57%, 71%, 1); + --coral-color-beta-background-weak: hsla(0, 0%, 100%, 1); + --coral-color-beta-background-weak-hover: hsla(279, 57%, 90%, 1); + --coral-color-beta-background-weak-active: hsla(279, 57%, 80%, 1); + --coral-color-beta-background-strong: hsla(281, 58%, 29%, 1); + --coral-color-beta-background-strong-hover: hsla(282, 58%, 19%, 1); + --coral-color-beta-background-strong-active: hsla(282, 57%, 9%, 1); + --coral-color-beta-border: hsla(281, 58%, 29%, 1); + --coral-color-beta-border-hover: hsla(282, 58%, 19%, 1); + --coral-color-beta-border-active: hsla(282, 57%, 9%, 1); + --coral-color-neutral-border-strong: hsla(0, 0%, 25%, 1); + --coral-color-neutral-border-strong-hover: hsla(0, 0%, 15%, 1); + --coral-color-neutral-icon-inverted: hsla(0, 0%, 100%, 1); + --coral-color-neutral-icon: hsla(0, 0%, 13%, 1); + --coral-color-neutral-icon-weak: hsla(0, 0%, 38%, 1); + --coral-color-accent-icon: hsla(204, 88%, 40%, 1); + --coral-color-accent-icon-hover: hsla(204, 88%, 30%, 1); + --coral-color-accent-icon-active: hsla(205, 88%, 20%, 1); + --coral-color-danger-icon: hsla(359, 69%, 53%, 1); + --coral-color-danger-icon-hover: hsla(359, 69%, 43%, 1); + --coral-color-danger-icon-active: hsla(359, 69%, 33%, 1); + --coral-color-success-icon: hsla(111, 53%, 40%, 1); + --coral-color-success-icon-hover: hsla(111, 53%, 30%, 1); + --coral-color-success-icon-active: hsla(111, 53%, 20%, 1); + --coral-color-warning-icon: hsla(22, 87%, 47%, 1); + --coral-color-warning-icon-hover: hsla(22, 87%, 37%, 1); + --coral-color-warning-icon-active: hsla(22, 87%, 27%, 1); + --coral-color-charts-neutral: hsla(0, 0%, 22%, 1); + --coral-color-charts-neutral-weak: hsla(0, 0%, 83%, 1); + --coral-color-charts-neutral-strong: hsla(0, 0%, 12%, 1); + --coral-color-charts-neutral-hover: hsla(0, 0%, 12%, 1); + --coral-color-charts-success: hsla(148, 87%, 40%, 1); + --coral-color-charts-success-weak: hsla(130, 52%, 91%, 1); + --coral-color-charts-success-strong: hsla(139, 50%, 22%, 1); + --coral-color-charts-success-hover: hsla(139, 50%, 22%, 1); + --coral-color-charts-danger: hsla(4, 89%, 49%, 1); + --coral-color-charts-danger-weak: hsla(359, 69%, 73%, 1); + --coral-color-charts-danger-strong: hsla(359, 62%, 43%, 1); + --coral-color-charts-danger-hover: hsla(359, 62%, 43%, 1); + --coral-color-charts-warning: hsla(32, 100%, 56%, 1); + --coral-color-charts-warning-weak: hsla(22, 88%, 84%, 1); + --coral-color-charts-warning-strong: hsla(22, 75%, 42%, 1); + --coral-color-charts-warning-hover: hsla(22, 75%, 42%, 1); + --coral-color-charts-default: hsla(216, 82%, 48%, 1); + --coral-color-charts-default-weak: hsla(204, 59%, 73%, 1); + --coral-color-charts-default-strong: hsla(204, 92%, 29%, 1); + --coral-color-charts-default-hover: hsla(204, 92%, 29%, 1); + --coral-color-charts-color-00: hsla(48, 100%, 50%, 1); + --coral-color-charts-color-00-weak: hsla(51, 91%, 82%, 1); + --coral-color-charts-color-00-strong: hsla(48, 82%, 45%, 1); + --coral-color-charts-color-00-hover: hsla(48, 82%, 45%, 1); + --coral-color-charts-color-01: hsla(216, 82%, 48%, 1); + --coral-color-charts-color-01-weak: hsla(204, 59%, 73%, 1); + --coral-color-charts-color-01-strong: hsla(204, 92%, 29%, 1); + --coral-color-charts-color-01-hover: hsla(204, 92%, 29%, 1); + --coral-color-charts-color-02: hsla(194, 92%, 50%, 1); + --coral-color-charts-color-02-weak: hsla(194, 91%, 91%, 1); + --coral-color-charts-color-02-strong: hsla(194, 93%, 32%, 1); + --coral-color-charts-color-02-hover: hsla(194, 93%, 32%, 1); + --coral-color-charts-color-03: hsla(140, 39%, 79%, 1); + --coral-color-charts-color-03-weak: hsla(138, 40%, 92%, 1); + --coral-color-charts-color-03-strong: hsla(139, 11%, 35%, 1); + --coral-color-charts-color-03-hover: hsla(139, 11%, 35%, 1); + --coral-color-charts-color-04: hsla(148, 87%, 40%, 1); + --coral-color-charts-color-04-weak: hsla(130, 52%, 91%, 1); + --coral-color-charts-color-04-strong: hsla(139, 50%, 22%, 1); + --coral-color-charts-color-04-hover: hsla(139, 50%, 22%, 1); + --coral-color-charts-color-05: hsla(324, 68%, 71%, 1); + --coral-color-charts-color-05-weak: hsla(323, 69%, 95%, 1); + --coral-color-charts-color-05-strong: hsla(324, 28%, 49%, 1); + --coral-color-charts-color-05-hover: hsla(324, 28%, 49%, 1); + --coral-color-charts-color-06: hsla(280, 75%, 58%, 1); + --coral-color-charts-color-06-weak: hsla(279, 77%, 88%, 1); + --coral-color-charts-color-06-strong: hsla(280, 54%, 36%, 1); + --coral-color-charts-color-06-hover: hsla(280, 54%, 36%, 1); + --coral-color-charts-color-07: hsla(4, 89%, 49%, 1); + --coral-color-charts-color-07-weak: hsla(359, 69%, 73%, 1); + --coral-color-charts-color-07-strong: hsla(359, 62%, 43%, 1); + --coral-color-charts-color-07-hover: hsla(359, 62%, 43%, 1); + --coral-color-charts-color-08: hsla(22, 88%, 54%, 1); + --coral-color-charts-color-08-weak: hsla(22, 88%, 84%, 1); + --coral-color-charts-color-08-strong: hsla(22, 75%, 42%, 1); + --coral-color-charts-color-08-hover: hsla(22, 75%, 42%, 1); + --coral-color-charts-color-09: hsla(34, 34%, 45%, 1); + --coral-color-charts-color-09-weak: hsla(35, 28%, 82%, 1); + --coral-color-charts-color-09-strong: hsla(35, 34%, 27%, 1); + --coral-color-charts-color-09-hover: hsla(35, 34%, 27%, 1); + --coral-color-accent-border: hsla(204, 95%, 31%, 1); + --coral-color-charts-default-text: hsla(205, 87%, 94%, 1); + --coral-color-charts-default-text-strong: hsla(205, 93%, 22%, 1); + --coral-color-charts-default-text-weak: hsla(207, 93%, 94%, 1); + --coral-color-charts-color-09-text: hsla(36, 36%, 5%, 1); + --coral-color-charts-color-09-text-strong: hsla(36, 36%, 5%, 1); + --coral-color-charts-color-09-text-weak: hsla(35, 28%, 82%, 1); + --coral-color-neutral-background-heavy: hsla(0, 0%, 78%, 1); + --coral-color-illustration-color-01: hsla(211, 62%, 26%, 1); + --coral-color-illustration-color-02: hsla(211, 43%, 47%, 1); + --coral-color-illustration-color-03: hsla(201, 31%, 85%, 1); + --coral-color-illustration-color-05: hsla(359, 82%, 81%, 1); + --coral-color-illustration-color-04: hsla(359, 100%, 72%, 1); + --coral-color-illustration-color-06: hsla(358, 100%, 93%, 1); + --coral-color-illustration-skintone-01: hsla(20, 91%, 83%, 1); + --coral-color-illustration-skintone-02: hsla(21, 34%, 55%, 1); + --coral-color-illustration-skintone-03: hsla(17, 33%, 28%, 1); + --coral-color-illustration-shadow: hsla(0, 0%, 0%, 0.1); + --coral-color-illustration-color-07: hsla(192, 33%, 97%, 1); + --coral-color-illustration-color-08: hsla(211, 23%, 74%, 1); + --coral-color-illustration-color-09: hsla(245, 10%, 23%, 1); + --coral-color-accent-background-selected: hsla(204, 100%, 95%, 1); + --coral-color-info-text: hsla(204, 95%, 31%, 1); + --coral-color-info-text-hover: hsla(204, 96%, 18%, 1); + --coral-color-info-text-active: hsla(205, 94%, 13%, 1); + --coral-color-info-text-weak: hsla(0, 0%, 100%, 1); + --coral-color-info-text-weak-hover: hsla(204, 59%, 88%, 1); + --coral-color-info-text-weak-active: hsla(205, 60%, 75%, 1); + --coral-color-info-text-strong: hsla(204, 96%, 18%, 1); + --coral-color-info-text-strong-hover: hsla(204, 97%, 13%, 1); + --coral-color-info-text-strong-active: hsla(205, 95%, 8%, 1); + --coral-color-info-background-hover: hsla(205, 60%, 75%, 1); + --coral-color-info-background-active: hsla(204, 60%, 63%, 1); + --coral-color-info-background-weak: hsla(0, 0%, 100%, 1); + --coral-color-info-background-weak-hover: hsla(204, 59%, 88%, 1); + --coral-color-info-background-weak-active: hsla(205, 60%, 75%, 1); + --coral-color-info-background-strong: hsla(204, 95%, 31%, 1); + --coral-color-info-background-strong-hover: hsla(204, 95%, 23%, 1); + --coral-color-info-background-strong-active: hsla(205, 95%, 15%, 1); + --coral-color-info-border: hsla(204, 95%, 31%, 1); + --coral-color-info-border-hover: hsla(204, 95%, 23%, 1); + --coral-color-info-border-active: hsla(205, 95%, 15%, 1); + --coral-color-info-icon: hsla(204, 88%, 40%, 1); + --coral-color-info-icon-hover: hsla(204, 88%, 30%, 1); + --coral-color-info-icon-active: hsla(205, 88%, 20%, 1); + --coral-color-brand-text: hsla(0, 0%, 100%, 1); + --coral-color-brand-text-hover: hsla(0, 0%, 100%, 1); + --coral-color-brand-text-active: hsla(0, 0%, 100%, 1); + --coral-color-brand-text-inverted: hsla(0, 0%, 38%, 1); + --coral-color-brand-text-inverted-hover: hsla(0, 0%, 13%, 1); + --coral-color-brand-text-inverted-active: hsla(0, 0%, 13%, 1); + --coral-color-brand-text-selected: hsla(204, 96%, 18%, 1); + --coral-color-brand-background-weak: hsla(0, 0%, 100%, 0); + --coral-color-brand-background-weak-hover: hsla(0, 0%, 100%, 0.1); + --coral-color-brand-background-weak-active: hsla(0, 0%, 100%, 0.1); + --coral-color-brand-background-selected: hsla(0, 0%, 100%, 1); + --coral-color-brand-background-inverted: hsla(0, 0%, 13%, 0); + --coral-color-brand-background-inverted-hover: hsla(0, 0%, 13%, 0.1); + --coral-color-brand-background-inverted-active: hsla(0, 0%, 13%, 0.1); + --coral-color-brand-border: hsla(0, 0%, 100%, 1); + --coral-color-brand-border-hover: hsla(0, 0%, 100%, 1); + --coral-color-brand-border-active: hsla(0, 0%, 100%, 1); + --coral-color-info-background: hsla(204, 59%, 88%, 1); + --coral-color-brand-icon: hsla(0, 0%, 100%, 1); + --coral-color-brand-icon-hover: hsla(0, 0%, 100%, 1); + --coral-color-brand-icon-active: hsla(0, 0%, 100%, 1); + --coral-color-brand-icon-inverted: hsla(0, 0%, 38%, 1); + --coral-color-brand-icon-inverted-hover: hsla(0, 0%, 13%, 1); + --coral-color-brand-icon-inverted-active: hsla(0, 0%, 13%, 1); + --coral-color-brand-icon-selected: hsla(204, 96%, 18%, 1); + --coral-color-branding-background: linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%); + --coral-color-branding-navigation: linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%); + --coral-color-brand-background: linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%); + --coral-spacing-xxs: 0.4rem; + --coral-spacing-xs: 0.8rem; + --coral-spacing-s: 1.2rem; + --coral-spacing-m: 1.6rem; + --coral-spacing-l: 2.8rem; + --coral-spacing-xl: 3.6rem; + --coral-sizing-minimal: 1.2rem; + --coral-sizing-xxxs: 1.6rem; + --coral-sizing-xxs: 2rem; + --coral-sizing-xs: 2.4rem; + --coral-sizing-s: 2.8rem; + --coral-sizing-m: 3.6rem; + --coral-sizing-l: 4rem; + --coral-sizing-xxxl: 22rem; + --coral-sizing-maximal: 32rem; + --coral-elevation-shadow-neutral-m: 0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3); + --coral-elevation-shadow-accent: 0rem 0.1rem 0.1rem 0rem hsla(204, 95%, 31%, 0.3); + --coral-elevation-shadow-success: 0rem 0.1rem 0.1rem 0rem hsla(111, 49%, 34%, 0.3); + --coral-elevation-shadow-danger: 0rem 0.1rem 0.1rem 0rem hsla(359, 51%, 53%, 0.3); + --coral-elevation-shadow-warning: 0rem 0.1rem 0.1rem 0rem hsla(22, 93%, 41%, 0.3); + --coral-elevation-shadow-beta: 0rem 0.1rem 0.1rem 0rem hsla(281, 58%, 29%, 0.3); + --coral-elevation-shadow-neutral-inverted-m: 0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3); + --coral-elevation-shadow-neutral-inverted-l: 0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3); + --coral-elevation-shadow-neutral-l: 0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3); + --coral-elevation-shadow-neutral-s: 0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5); + --coral-elevation-shadow-neutral-inverted-s: 0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.3); + --coral-heading-l: 600 1.8rem/140% 'Source Sans Pro'; + --coral-paragraph-m: 400 1.4rem/140% 'Source Sans Pro'; + --coral-paragraph-m-bold: 600 1.4rem/140% 'Source Sans Pro'; + --coral-paragraph-s: 400 1.2rem/140% 'Source Sans Pro'; + --coral-paragraph-s-bold: 600 1.2rem/140% 'Source Sans Pro'; + --coral-heading-m: 600 1.6rem/140% 'Source Sans Pro'; + --coral-heading-s: 600 1.4rem/140% 'Source Sans Pro'; + --coral-data-m: 400 1.4rem/140% 'Inconsolata'; + --coral-data-m-bold: 700 1.4rem/140% 'Inconsolata'; + --coral-link-m-underlined: 600 1.4rem/140% 'Source Sans Pro'; + --coral-link-m: 600 1.4rem/140% 'Source Sans Pro'; + --coral-data-xl: 400 2.4rem/140% 'Inconsolata'; + --coral-link-s: 600 1.2rem/140% 'Source Sans Pro'; + --coral-link-s-underlined: 600 1.2rem/140% 'Source Sans Pro'; + --coral-radius-m: 0.8rem; + --coral-radius-l: 1.6rem; + --coral-radius-round: 9999.9rem; + --coral-radius-s: 0.4rem; + --coral-border-s-solid: 1px solid; + --coral-border-m-solid: 2px solid; + --coral-border-s-dashed: 1px dashed; + --coral-border-m-dashed: 2px dashed; + --coral-opacity-l: 0.2; + --coral-opacity-m: 0.4; + --coral-opacity-s: 0.6; + --coral-breakpoint-s: 40em; + --coral-breakpoint-m: 48em; + --coral-breakpoint-l: 64em; + --coral-breakpoint-xl: 80em; + --coral-branding-logo: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQ3SURBVHgB7Zu/UxNBFMe/e6ahQ0qxiBpaQWfUTjM0aqMMnWMh1iJEeyHBXiLqjDM6IP+A0Dk2Gkq0EMaxkhmuADsgNmZGgfW9vZz5dUcul938uPGbCbnb+5H95L3bu33vIaBZMpXqxT6GADEIIYcgaFmilzbFq3a1aZtN2/KQIkdHrovn2Rw0S0CDilBJOtskrRKcAgqjPL1zEGJZzM0uQoOaAlRghwQlkUJ4KD/ZYNg/yIiXWRshFQrQMFjN11EvM/iNxTCgDQPK8dQIHbUA82DV2iTXzTTquoEBldUkpslyKbRTFmap1zMim80H2T0QIMHFCWyJAIfQGdqka3M4iMvWBVRwB/iI2mG+3QoEeSRgB8O5qgvpC9gFcK6OhPQEVAPKAb6g8+EcCeqrRZAeA4/leQCPlt0Cx5I4R+8pr001FpT3U2P0sYDuk6TXKD3PLpc3VlhQXXdQ1jOn61eBvj4YkKDXE3V5lanSRQ9xByZd89IFArwGDJyBIZ2ih/6KB5F/gMp6EmmYUk+PA2daAhPlVixZcN8gHMuca1breLkVS4ACV2BKDJc0d/oalVlRARZHzjhMiOFa4ZqVoumcUL+oa8Gb0C2+5m7fagccS0DKSWcByoJ70DW/Y7DkZccledlLGxvAzm5l2y6tv3sPjdrDMZyO0QQ2CV1woyN0K7joD+YqkaB3VdvOjm5AFfyKqTmeltATnFFya9tZHkj471coAL8KlW1fv0G7JANaGkfP1/POJ4OmH/nv93YJWP0MwxLEdpYHmVbHVloniskyYBxRFQWcow1IbBYirv+A3S4GtBFd2ZZKX0VVkgGBdURVAj/ZgmuIpiSFYFYsoowqIFtwzUJMAUbxOsxzStwqRoOjaMUV/uPcByWeIlqSnOfnBQcwRrnwVrqp+eia7WaCFaByU51W5AltoeC/PeExGU5QMLi/H5qUcxdiKC1lKaPEgZrm54cMxzN7v1k9t3NAiuMwHN5g4JME951iNc9eoElJSqfNuCsVwQqKz6SpRU9ugt1w4l5wd+Qf5dW8E5BqRhIZGj3T7mrlwzZbkROKOsTWmSNrrH7iL/UXg3GwKf24eTju+z7elDfUps+cMpEl6BRbUbnhiVLEbesHsL2tA8oVj5x3q8tMvDO84yku1WhvuUijksiSaz6obvaeD8aQUWnh7tGm6rOHPAHVbcPCKHRdj2blFCH4FAYFKSP5AE4sdqbCl5G46mDIQIVAdWMyZHqbkhjD6CR35fEhYClXoKBTEfI8j1Q4+q5mXtwHKxgcq/FySidZyjUprXbZTYJ7WF0mUk9hC2Lj9MQwRkdPhT1HA3ImAvSUFbSEslzNljQz6HQxvx+HXtimwFxp65ByXYkbdMYkSjOSRs+fLwbBGCzXDBhCdiCQilnjQXqzZXvpW+KotbCtYrIc9JJijf+tgONDOqDK9RfJ1nAWmpwCzwAAAABJRU5ErkJggg=='); + --coral-transition-instant: 100ms ease-out; + --coral-transition-fast: 250ms ease-in-out; + --coral-transition-normal: 300ms ease-in-out; + --coral-transition-slow: 400ms ease-in; + --coral-elevation-layer-flat: 0; + --coral-elevation-layer-standard-front: 4; + --coral-elevation-layer-interactive-front: 8; + --coral-elevation-layer-overlay: 16; + --coral-animation-heartbeat: coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite; + color-scheme: light; } -@keyframes coral-light-keyframes-blink { 0%, - 100% { opacity: 1; } 50% { opacity: 0.5; } }; +@keyframes coral-light-keyframes-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }; diff --git a/packages/design-tokens/src/light/dictionary.ts b/packages/design-tokens/src/light/dictionary.ts index 6b33ca9b3af..f50f2284edf 100644 --- a/packages/design-tokens/src/light/dictionary.ts +++ b/packages/design-tokens/src/light/dictionary.ts @@ -198,7 +198,7 @@ Ex: InlineMessage`, { name: 'coralColorAccentBackgroundHover', type: 'color', - description: `Accent background color by default, on mouseover. `, + description: `Accent background color by default, on mouseover.`, hsla: 'hsla(205, 60%, 75%, 1)', hex: '#9bc7e6', value: 'hsla(205, 60%, 75%, 1)', @@ -350,7 +350,7 @@ Use for text content without background that must carry a negative semantic valu { name: 'coralColorDangerTextHover', type: 'color', - description: `Danger text color on mouseover, if interactive. `, + description: `Danger text color on mouseover, if interactive.`, hsla: 'hsla(359, 52%, 43%, 1)', hex: '#a63537', value: 'hsla(359, 52%, 43%, 1)', @@ -359,7 +359,7 @@ Use for text content without background that must carry a negative semantic valu { name: 'coralColorDangerTextActive', type: 'color', - description: `Danger text color while pressing, if interactive. `, + description: `Danger text color while pressing, if interactive.`, hsla: 'hsla(359, 51%, 33%, 1)', hex: '#7f292a', value: 'hsla(359, 51%, 33%, 1)', @@ -379,7 +379,7 @@ Ex: InlineMessage`, { name: 'coralColorDangerBackgroundHover', type: 'color', - description: `Danger background on mouseover. `, + description: `Danger background on mouseover.`, hsla: 'hsla(359, 100%, 88%, 1)', hex: '#ffc4c5', value: 'hsla(359, 100%, 88%, 1)', @@ -408,7 +408,7 @@ Use as placeholder to indicate that you want danger-tinted interactive states.`, { name: 'coralColorDangerBackgroundWeakHover', type: 'color', - description: `Weakest danger background color on mouseover. `, + description: `Weakest danger background color on mouseover.`, hsla: 'hsla(358, 100%, 94%, 1)', hex: '#ffe1e2', value: 'hsla(358, 100%, 94%, 1)', @@ -496,7 +496,7 @@ Ex: InlineMessage `, type: 'color', description: `Strongest danger background color. Use on strong interactive elements with a negative semantic attached. Use with text-weak. -Ex: ButtonDestructive `, +Ex: ButtonDestructive`, hsla: 'hsla(359, 51%, 53%, 1)', hex: '#c4484a', value: 'hsla(359, 51%, 53%, 1)', @@ -670,7 +670,7 @@ Use as placeholder to indicate that you want success-tinted interactive states.` { name: 'coralColorWarningText', type: 'color', - description: `Waring text color. + description: `Warning text color. Use for text content without background that must carry a warning semantic value on its own. Ex: StatusWarning`, @@ -928,7 +928,7 @@ Ex: Buttons on focus`, { name: 'coralColorDangerTextStrong', type: 'color', - description: `Danger text color on danger-background. `, + description: `Danger text color on danger-background.`, hsla: 'hsla(359, 47%, 44%, 1)', hex: '#a43b3d', value: 'hsla(359, 47%, 44%, 1)', @@ -937,7 +937,7 @@ Ex: Buttons on focus`, { name: 'coralColorDangerTextStrongHover', type: 'color', - description: `Danger text color on mouseover. `, + description: `Danger text color on mouseover.`, hsla: 'hsla(359, 54%, 38%, 1)', hex: '#952d2f', value: 'hsla(359, 54%, 38%, 1)', @@ -946,7 +946,7 @@ Ex: Buttons on focus`, { name: 'coralColorDangerTextStrongActive', type: 'color', - description: `Danger text color while pressing. `, + description: `Danger text color while pressing.`, hsla: 'hsla(359, 54%, 33%, 1)', hex: '#812729', value: 'hsla(359, 54%, 33%, 1)', @@ -2192,6 +2192,447 @@ Ex: Selected column or line in a datagrid.`, value: 'hsla(204, 100%, 95%, 1)', id: 'S:8e41c9f17635925c89f424569bb6ac93eb5c008e,' }, + { + name: 'coralColorInfoText', + type: 'color', + description: `Information text color. +Use for text content without background that must carry a information semantic value on its own. + +Ex: StatusInfo`, + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:b2deed4800e24fca6ad29d1edb555f2b66874b47,' + }, + { + name: 'coralColorInfoTextHover', + type: 'color', + description: `Info text color on mouseover, if interactive.`, + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:1312ba264139ae787d57ffe659b91c732fe1dfc5,' + }, + { + name: 'coralColorInfoTextActive', + type: 'color', + description: `Info text color while pressing, if interactive.`, + hsla: 'hsla(205, 94%, 13%, 1)', + hex: '#022741', + value: 'hsla(205, 94%, 13%, 1)', + id: 'S:987f732a250f767a4cad2e168eb626ab47b986bf,' + }, + { + name: 'coralColorInfoTextWeak', + type: 'color', + description: `Info text color on infor-background-strong. `, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:5dcdc37bb6cec31f97c5d4b31f222c625b7b2c16,' + }, + { + name: 'coralColorInfoTextWeakHover', + type: 'color', + description: `Info text color on mouseover. `, + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:7c28ac736af6a8c18b4c48d0a67fe2fc1ac4789d,' + }, + { + name: 'coralColorInfoTextWeakActive', + type: 'color', + description: `Info text color while pressing.`, + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:e4b2ba1853d230f03d2753da85e902d8befed989,' + }, + { + name: 'coralColorInfoTextStrong', + type: 'color', + description: `Infor text color on info-background.`, + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:92d7f8304451a4270a28b05924fcecb25f5da398,' + }, + { + name: 'coralColorInfoTextStrongHover', + type: 'color', + description: `Info text color on mouseover.`, + hsla: 'hsla(204, 97%, 13%, 1)', + hex: '#012741', + value: 'hsla(204, 97%, 13%, 1)', + id: 'S:fcebcc7ffb00f0701b1038f855b846c461d55fd5,' + }, + { + name: 'coralColorInfoTextStrongActive', + type: 'color', + description: `Info text color while pressing.`, + hsla: 'hsla(205, 95%, 8%, 1)', + hex: '#011828', + value: 'hsla(205, 95%, 8%, 1)', + id: 'S:be89a1c086681b7883654f5c6c12de293b62ef87,' + }, + { + name: 'coralColorInfoBackgroundHover', + type: 'color', + description: `Accent background color by default, on mouseover.`, + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:76dd12ff860c032d39c29b31877c087cf2df12a9,' + }, + { + name: 'coralColorInfoBackgroundActive', + type: 'color', + description: `Info background while pressing.`, + hsla: 'hsla(204, 60%, 63%, 1)', + hex: '#69acd9', + value: 'hsla(204, 60%, 63%, 1)', + id: 'S:3029ecf251020fd474796f0c4991fc2d2375c8d0,' + }, + { + name: 'coralColorInfoBackgroundWeak', + type: 'color', + description: `Weakest info background color. Same color as neutral-background but with info-tinted hover and active. + +Use as placeholder to indicate that you want info-tinted interactive states.`, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:c394fd25f49d3093fe0d900d6a27b274ead01cd4,' + }, + { + name: 'coralColorInfoBackgroundWeakHover', + type: 'color', + description: `Weakest info background color on mouseover.`, + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:a8068fbc1d0bee44cf3e9b6bdb8578d66dc7bb8a,' + }, + { + name: 'coralColorInfoBackgroundWeakActive', + type: 'color', + description: `Weakest info background color while pressed.`, + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:5d9a6c09ecad18c5b633f4d849c9600df0701bf7,' + }, + { + name: 'coralColorInfoBackgroundStrong', + type: 'color', + description: `Strongest info background color. Use on strong interactive elements with a informative semantic attached. Use with text-weak.`, + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:f99a4555800d50aeb484d7073fce6d241075cc1d,' + }, + { + name: 'coralColorInfoBackgroundStrongHover', + type: 'color', + description: `Strongest info background color on mouseover.`, + hsla: 'hsla(204, 95%, 23%, 1)', + hex: '#034673', + value: 'hsla(204, 95%, 23%, 1)', + id: 'S:2bcd08c5570401e31e78d51532fc19f96b986612,' + }, + { + name: 'coralColorInfoBackgroundStrongActive', + type: 'color', + description: `Strongest info background color while pressed.`, + hsla: 'hsla(205, 95%, 15%, 1)', + hex: '#022e4d', + value: 'hsla(205, 95%, 15%, 1)', + id: 'S:4c34e648ed8bf1a55a6ac17bf2f5f9a886ae4a94,' + }, + { + name: 'coralColorInfoBorder', + type: 'color', + description: `Border color with info semantic.`, + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:01e0a0965fe6476498642d0603889a131018fb36,' + }, + { + name: 'coralColorInfoBorderHover', + type: 'color', + description: `Border color with info semantic on mouseover.`, + hsla: 'hsla(204, 95%, 23%, 1)', + hex: '#034673', + value: 'hsla(204, 95%, 23%, 1)', + id: 'S:d5a7dfbf532630af47dbbbd9a427d66155ecad57,' + }, + { + name: 'coralColorInfoBorderActive', + type: 'color', + description: `Border color with info semantic while pressing.`, + hsla: 'hsla(205, 95%, 15%, 1)', + hex: '#022e4d', + value: 'hsla(205, 95%, 15%, 1)', + id: 'S:6e7f204ea4f482d1c67d4a5e1e6c9459ae4e2d05,' + }, + { + name: 'coralColorInfoIcon', + type: 'color', + description: `Icon with info color. + +Ex: StatusInprogress`, + hsla: 'hsla(204, 88%, 40%, 1)', + hex: '#0c78c2', + value: 'hsla(204, 88%, 40%, 1)', + id: 'S:467a79e6f77a857d9bc7c32c5650b47e74097460,' + }, + { + name: 'coralColorInfoIconHover', + type: 'color', + description: `Icon with info color, on mouseover.`, + hsla: 'hsla(204, 88%, 30%, 1)', + hex: '#095990', + value: 'hsla(204, 88%, 30%, 1)', + id: 'S:3ff5b003395fa4cd87faa69f7f5f943e0845be49,' + }, + { + name: 'coralColorInfoIconActive', + type: 'color', + description: `Icon with info color, while pressed.`, + hsla: 'hsla(205, 88%, 20%, 1)', + hex: '#063b60', + value: 'hsla(205, 88%, 20%, 1)', + id: 'S:d0a6491ad3b0f809155269842dd86a21437edf22,' + }, + { + name: 'coralColorBrandText', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:6d9fa075aa9c22bbcc20b40c57df885385390edd,' + }, + { + name: 'coralColorBrandTextHover', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:7d436fb42c27efda21ee7536005d6e3b04eb4785,' + }, + { + name: 'coralColorBrandTextActive', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:5c176377aead0caca8154ef2e1ede4f43cd9fee1,' + }, + { + name: 'coralColorBrandTextInverted', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 38%, 1)', + hex: '#616161', + value: 'hsla(0, 0%, 38%, 1)', + id: 'S:ae3cfc09978e97b8633571201dddb836a19c2967,' + }, + { + name: 'coralColorBrandTextInvertedHover', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:19f4e2da901af5156394f8f9a449324d054653a4,' + }, + { + name: 'coralColorBrandTextInvertedActive', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:2d031bb5dc1a6b2be354fa54490bc60396d4a99f,' + }, + { + name: 'coralColorBrandTextSelected', + type: 'color', + description: ``, + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:63362b1e8a368acaec1ca43ad2854ccc6a294478,' + }, + { + name: 'coralColorBrandBackgroundWeak', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 0)', + hex: '#ffffff00', + value: 'hsla(0, 0%, 100%, 0)', + id: 'S:2a8e319abe82b350fa7c7e3895d8e5435dd54288,' + }, + { + name: 'coralColorBrandBackgroundWeakHover', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 0.1)', + hex: '#ffffff1f', + value: 'hsla(0, 0%, 100%, 0.1)', + id: 'S:1ffe230baf83e7d843d64e76f52a00ef330066e0,' + }, + { + name: 'coralColorBrandBackgroundWeakActive', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 0.1)', + hex: '#ffffff1f', + value: 'hsla(0, 0%, 100%, 0.1)', + id: 'S:46182537a6afcca61653e328ee22cb5e120f04b9,' + }, + { + name: 'coralColorBrandBackgroundSelected', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:c370ea7d697d90a829088818fc429f756cbe15d9,' + }, + { + name: 'coralColorBrandBackgroundInverted', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 13%, 0)', + hex: '#20202000', + value: 'hsla(0, 0%, 13%, 0)', + id: 'S:97574a65cb605798a9efe63f4cfb914a3e186326,' + }, + { + name: 'coralColorBrandBackgroundInvertedHover', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 13%, 0.1)', + hex: '#2020201f', + value: 'hsla(0, 0%, 13%, 0.1)', + id: 'S:e6c7b7cfeac0f2eaea1a4646ab8fa46ed67a77bf,' + }, + { + name: 'coralColorBrandBackgroundInvertedActive', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 13%, 0.1)', + hex: '#2020201f', + value: 'hsla(0, 0%, 13%, 0.1)', + id: 'S:08b06b83beb4951a1546b253f10e06f2a72149fe,' + }, + { + name: 'coralColorBrandBorder', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:d7590ff56f5769e88f26503e22ce1660599513ae,' + }, + { + name: 'coralColorBrandBorderHover', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:1c1fbad3ca7e87defa986b7b87fc98849bca965a,' + }, + { + name: 'coralColorBrandBorderActive', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:b8ed097f35fb2ece933fa1335e1083a1893cedbf,' + }, + { + name: 'coralColorInfoBackground', + type: 'color', + description: `Info background color by default. Use with text-strong. + +Ex: InlineMessage`, + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:b64f52d5aa8e883f55d824a82ab8d279a53c53a7,' + }, + { + name: 'coralColorBrandIcon', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:029c4aa63f689fb7abee6a26e818ac8318429f82,' + }, + { + name: 'coralColorBrandIconHover', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:55f38783aebb3574786c8f95d09aed86797e0db3,' + }, + { + name: 'coralColorBrandIconActive', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:29c8c7280f33a19009c3c68debf4210525c118ef,' + }, + { + name: 'coralColorBrandIconInverted', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 38%, 1)', + hex: '#616161', + value: 'hsla(0, 0%, 38%, 1)', + id: 'S:6569f93308869ec1cd44cfbfdf47e09e8a4d8d66,' + }, + { + name: 'coralColorBrandIconInvertedHover', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:9576289e1e05d18ecd11f2d71dc117371705c07c,' + }, + { + name: 'coralColorBrandIconInvertedActive', + type: 'color', + description: ``, + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:d53391b85e4493ad39a05255192884673f72d87f,' + }, + { + name: 'coralColorBrandIconSelected', + type: 'color', + description: ``, + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:1471f76ec8a42951247f6ecb12a56c6975806991,' + }, { name: 'coralColorBrandingBackground', type: 'gradient', @@ -2206,6 +2647,13 @@ Ex: Selected column or line in a datagrid.`, value: 'linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%)', id: 'S:901ebd713b6444217424da171789495f7e32c8d2,' }, + { + name: 'coralColorBrandBackground', + type: 'gradient', + description: ``, + value: 'linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%)', + id: 'S:f25b5ea68800b1905f1842313f1c767700a92380,' + }, { name: 'coralSpacingXxs', type: 'measure', @@ -2577,6 +3025,30 @@ Developers: use Link component instead, you do not need to recreate styles.`, fontFamily: 'Inconsolata', id: 'S:6136688c80e14f3c6a44576a2d5b943c6ce76121,' }, + { + name: 'coralLinkS', + type: 'typography', + description: `For links included in paragraphs using paragraph/S or for small breadcrumbs`, + value: `600 1.2rem/140% 'Source Sans Pro'`, + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:6fe023511d622ae1addba3ad36962df23dcdf736,' + }, + { + name: 'coralLinkSUnderlined', + type: 'typography', + description: `For links included in paragraphs using paragraph/S or for small breadcrumbs`, + value: `600 1.2rem/140% 'Source Sans Pro'`, + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:92f8c230bf3768ccc26f706abcfd5db498c78984,' + }, { name: 'coralRadiusM', type: 'radius', diff --git a/packages/design-tokens/src/light/index.ts b/packages/design-tokens/src/light/index.ts index 1da74121be2..dfdb10b4cf7 100644 --- a/packages/design-tokens/src/light/index.ts +++ b/packages/design-tokens/src/light/index.ts @@ -223,8 +223,57 @@ const tokens = { coralColorIllustrationColor08: `var(--coral-color-illustration-color-08, hsla(211, 23%, 74%, 1))`, coralColorIllustrationColor09: `var(--coral-color-illustration-color-09, hsla(245, 10%, 23%, 1))`, coralColorAccentBackgroundSelected: `var(--coral-color-accent-background-selected, hsla(204, 100%, 95%, 1))`, + coralColorInfoText: `var(--coral-color-info-text, hsla(204, 95%, 31%, 1))`, + coralColorInfoTextHover: `var(--coral-color-info-text-hover, hsla(204, 96%, 18%, 1))`, + coralColorInfoTextActive: `var(--coral-color-info-text-active, hsla(205, 94%, 13%, 1))`, + coralColorInfoTextWeak: `var(--coral-color-info-text-weak, hsla(0, 0%, 100%, 1))`, + coralColorInfoTextWeakHover: `var(--coral-color-info-text-weak-hover, hsla(204, 59%, 88%, 1))`, + coralColorInfoTextWeakActive: `var(--coral-color-info-text-weak-active, hsla(205, 60%, 75%, 1))`, + coralColorInfoTextStrong: `var(--coral-color-info-text-strong, hsla(204, 96%, 18%, 1))`, + coralColorInfoTextStrongHover: `var(--coral-color-info-text-strong-hover, hsla(204, 97%, 13%, 1))`, + coralColorInfoTextStrongActive: `var(--coral-color-info-text-strong-active, hsla(205, 95%, 8%, 1))`, + coralColorInfoBackgroundHover: `var(--coral-color-info-background-hover, hsla(205, 60%, 75%, 1))`, + coralColorInfoBackgroundActive: `var(--coral-color-info-background-active, hsla(204, 60%, 63%, 1))`, + coralColorInfoBackgroundWeak: `var(--coral-color-info-background-weak, hsla(0, 0%, 100%, 1))`, + coralColorInfoBackgroundWeakHover: `var(--coral-color-info-background-weak-hover, hsla(204, 59%, 88%, 1))`, + coralColorInfoBackgroundWeakActive: `var(--coral-color-info-background-weak-active, hsla(205, 60%, 75%, 1))`, + coralColorInfoBackgroundStrong: `var(--coral-color-info-background-strong, hsla(204, 95%, 31%, 1))`, + coralColorInfoBackgroundStrongHover: `var(--coral-color-info-background-strong-hover, hsla(204, 95%, 23%, 1))`, + coralColorInfoBackgroundStrongActive: `var(--coral-color-info-background-strong-active, hsla(205, 95%, 15%, 1))`, + coralColorInfoBorder: `var(--coral-color-info-border, hsla(204, 95%, 31%, 1))`, + coralColorInfoBorderHover: `var(--coral-color-info-border-hover, hsla(204, 95%, 23%, 1))`, + coralColorInfoBorderActive: `var(--coral-color-info-border-active, hsla(205, 95%, 15%, 1))`, + coralColorInfoIcon: `var(--coral-color-info-icon, hsla(204, 88%, 40%, 1))`, + coralColorInfoIconHover: `var(--coral-color-info-icon-hover, hsla(204, 88%, 30%, 1))`, + coralColorInfoIconActive: `var(--coral-color-info-icon-active, hsla(205, 88%, 20%, 1))`, + coralColorBrandText: `var(--coral-color-brand-text, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextHover: `var(--coral-color-brand-text-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextActive: `var(--coral-color-brand-text-active, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextInverted: `var(--coral-color-brand-text-inverted, hsla(0, 0%, 38%, 1))`, + coralColorBrandTextInvertedHover: `var(--coral-color-brand-text-inverted-hover, hsla(0, 0%, 13%, 1))`, + coralColorBrandTextInvertedActive: `var(--coral-color-brand-text-inverted-active, hsla(0, 0%, 13%, 1))`, + coralColorBrandTextSelected: `var(--coral-color-brand-text-selected, hsla(204, 96%, 18%, 1))`, + coralColorBrandBackgroundWeak: `var(--coral-color-brand-background-weak, hsla(0, 0%, 100%, 0))`, + coralColorBrandBackgroundWeakHover: `var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 100%, 0.1))`, + coralColorBrandBackgroundWeakActive: `var(--coral-color-brand-background-weak-active, hsla(0, 0%, 100%, 0.1))`, + coralColorBrandBackgroundSelected: `var(--coral-color-brand-background-selected, hsla(0, 0%, 100%, 1))`, + coralColorBrandBackgroundInverted: `var(--coral-color-brand-background-inverted, hsla(0, 0%, 13%, 0))`, + coralColorBrandBackgroundInvertedHover: `var(--coral-color-brand-background-inverted-hover, hsla(0, 0%, 13%, 0.1))`, + coralColorBrandBackgroundInvertedActive: `var(--coral-color-brand-background-inverted-active, hsla(0, 0%, 13%, 0.1))`, + coralColorBrandBorder: `var(--coral-color-brand-border, hsla(0, 0%, 100%, 1))`, + coralColorBrandBorderHover: `var(--coral-color-brand-border-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandBorderActive: `var(--coral-color-brand-border-active, hsla(0, 0%, 100%, 1))`, + coralColorInfoBackground: `var(--coral-color-info-background, hsla(204, 59%, 88%, 1))`, + coralColorBrandIcon: `var(--coral-color-brand-icon, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconHover: `var(--coral-color-brand-icon-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconActive: `var(--coral-color-brand-icon-active, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconInverted: `var(--coral-color-brand-icon-inverted, hsla(0, 0%, 38%, 1))`, + coralColorBrandIconInvertedHover: `var(--coral-color-brand-icon-inverted-hover, hsla(0, 0%, 13%, 1))`, + coralColorBrandIconInvertedActive: `var(--coral-color-brand-icon-inverted-active, hsla(0, 0%, 13%, 1))`, + coralColorBrandIconSelected: `var(--coral-color-brand-icon-selected, hsla(204, 96%, 18%, 1))`, coralColorBrandingBackground: `var(--coral-color-branding-background, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, coralColorBrandingNavigation: `var(--coral-color-branding-navigation, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, + coralColorBrandBackground: `var(--coral-color-brand-background, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, coralSpacingXxs: `var(--coral-spacing-xxs, 0.4rem)`, coralSpacingXs: `var(--coral-spacing-xs, 0.8rem)`, coralSpacingS: `var(--coral-spacing-s, 1.2rem)`, @@ -263,6 +312,8 @@ const tokens = { coralLinkMUnderlined: `var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')`, coralLinkM: `var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')`, coralDataXl: `var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')`, + coralLinkS: `var(--coral-link-s, 600 1.2rem/140% 'Source Sans Pro')`, + coralLinkSUnderlined: `var(--coral-link-s-underlined, 600 1.2rem/140% 'Source Sans Pro')`, coralRadiusM: `var(--coral-radius-m, 0.8rem)`, coralRadiusL: `var(--coral-radius-l, 1.6rem)`, coralRadiusRound: `var(--coral-radius-round, 9999.9rem)`,