diff --git a/packages/design-tokens/src/_tokens.scss b/packages/design-tokens/src/_tokens.scss index 5dfce6d5d20..c7203e81db7 100644 --- a/packages/design-tokens/src/_tokens.scss +++ b/packages/design-tokens/src/_tokens.scss @@ -270,9 +270,9 @@ $coral-color-brand-icon-inverted: #{var(--coral-color-brand-icon-inverted, hsla( $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-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)}; @@ -328,7 +328,10 @@ $coral-breakpoint-s: #{var(--coral-breakpoint-s, 40em)}; $coral-breakpoint-m: #{var(--coral-breakpoint-m, 48em)}; $coral-breakpoint-l: #{var(--coral-breakpoint-l, 64em)}; $coral-breakpoint-xl: #{var(--coral-breakpoint-xl, 80em)}; -$coral-branding-logo: #{var(--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-branding-logo: #{var( + --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: #{var(--coral-transition-instant, 100ms ease-out)}; $coral-transition-fast: #{var(--coral-transition-fast, 250ms ease-in-out)}; $coral-transition-normal: #{var(--coral-transition-normal, 300ms ease-in-out)}; diff --git a/packages/design-tokens/src/dark/_index.scss b/packages/design-tokens/src/dark/_index.scss index 409145da401..4add4b278b6 100644 --- a/packages/design-tokens/src/dark/_index.scss +++ b/packages/design-tokens/src/dark/_index.scss @@ -1,344 +1,352 @@ -[data-theme="dark"] { - --coral-color-neutral-text: hsla(0, 0%, 100%, 1); - --coral-color-neutral-text-inverted: hsla(210, 7%, 79%, 1); - --coral-color-neutral-text-weak: hsla(206, 17%, 82%, 1); - --coral-color-neutral-text-disabled: hsla(207, 11%, 64%, 1); - --coral-color-neutral-background: hsla(206, 17%, 18%, 1); - --coral-color-neutral-background-disabled: hsla(210, 17%, 16%, 1); - --coral-color-neutral-background-medium: hsla(208, 18%, 21%, 1); - --coral-color-neutral-background-strong: hsla(208, 18%, 14%, 1); - --coral-color-neutral-border: hsla(206, 17%, 82%, 1); - --coral-color-neutral-border-weak: hsla(207, 18%, 34%, 1); - --coral-color-neutral-border-weak-hover: hsla(207, 18%, 44%, 1); - --coral-color-neutral-border-disabled: hsla(208, 11%, 35%, 1); - --coral-color-accent-text: hsla(198, 72%, 65%, 1); - --coral-color-accent-text-hover: hsla(198, 72%, 55%, 1); - --coral-color-accent-text-active: hsla(198, 72%, 45%, 1); - --coral-color-accent-text-weak: hsla(207, 18%, 24%, 1); - --coral-color-accent-text-weak-hover: hsla(199, 71%, 15%, 1); - --coral-color-accent-text-weak-active: hsla(199, 73%, 10%, 1); - --coral-color-accent-text-strong: hsla(198, 72%, 75%, 1); - --coral-color-accent-text-strong-hover: hsla(198, 72%, 65%, 1); - --coral-color-accent-text-strong-active: hsla(198, 72%, 55%, 1); - --coral-color-accent-background: hsla(198, 72%, 25%, 1); - --coral-color-accent-background-hover: hsla(199, 78%, 20%, 1); - --coral-color-accent-background-active: hsla(199, 73%, 10%, 1); - --coral-color-accent-background-weak: hsla(207, 18%, 24%, 1); - --coral-color-accent-background-weak-hover: hsla(199, 71%, 15%, 1); - --coral-color-accent-background-weak-active: hsla(199, 73%, 10%, 1); - --coral-color-accent-background-strong: hsla(198, 72%, 75%, 1); - --coral-color-accent-background-strong-hover: hsla(198, 72%, 65%, 1); - --coral-color-accent-background-strong-active: hsla(198, 72%, 55%, 1); - --coral-color-accent-border: hsla(198, 72%, 75%, 1); - --coral-color-accent-border-hover: hsla(198, 72%, 65%, 1); - --coral-color-accent-border-active: hsla(199, 72%, 55%, 1); - --coral-color-danger-text: hsla(2, 95%, 74%, 1); - --coral-color-danger-text-hover: hsla(2, 95%, 69%, 1); - --coral-color-danger-text-active: hsla(2, 96%, 64%, 1); - --coral-color-danger-text-weak: hsla(207, 18%, 24%, 1); - --coral-color-danger-text-weak-hover: hsla(358, 96%, 18%, 1); - --coral-color-danger-text-weak-active: hsla(357, 97%, 13%, 1); - --coral-color-danger-text-strong: hsla(359, 100%, 78%, 1); - --coral-color-danger-text-strong-hover: hsla(359, 100%, 73%, 1); - --coral-color-danger-text-strong-active: hsla(359, 100%, 68%, 1); - --coral-color-danger-background: hsla(358, 96%, 18%, 1); - --coral-color-danger-background-hover: hsla(357, 97%, 13%, 1); - --coral-color-danger-background-active: hsla(358, 95%, 8%, 1); - --coral-color-danger-background-weak: hsla(207, 18%, 24%, 1); - --coral-color-danger-background-weak-hover: hsla(358, 96%, 18%, 1); - --coral-color-danger-background-weak-active: hsla(357, 97%, 13%, 1); - --coral-color-danger-background-strong: hsla(359, 100%, 78%, 1); - --coral-color-danger-background-strong-hover: hsla(359, 100%, 73%, 1); - --coral-color-danger-background-strong-active: hsla(359, 100%, 68%, 1); - --coral-color-danger-border: hsla(359, 100%, 78%, 1); - --coral-color-danger-border-hover: hsla(359, 100%, 73%, 1); - --coral-color-danger-border-active: hsla(359, 100%, 68%, 1); - --coral-color-success-text: hsla(110, 50%, 60%, 1); - --coral-color-success-text-hover: hsla(110, 45%, 50%, 1); - --coral-color-success-text-active: hsla(110, 45%, 40%, 1); - --coral-color-success-text-weak: hsla(207, 18%, 24%, 1); - --coral-color-success-text-weak-hover: hsla(109, 50%, 20%, 1); - --coral-color-success-text-weak-active: hsla(109, 51%, 15%, 1); - --coral-color-success-text-strong: hsla(110, 50%, 70%, 1); - --coral-color-success-text-strong-hover: hsla(110, 50%, 60%, 1); - --coral-color-success-text-strong-active: hsla(110, 50%, 50%, 1); - --coral-color-success-background: hsla(109, 50%, 20%, 1); - --coral-color-success-background-hover: hsla(109, 51%, 15%, 1); - --coral-color-success-background-active: hsla(110, 49%, 10%, 1); - --coral-color-success-background-weak: hsla(207, 18%, 24%, 1); - --coral-color-success-background-weak-hover: hsla(109, 50%, 20%, 1); - --coral-color-success-background-weak-active: hsla(109, 51%, 15%, 1); - --coral-color-success-background-strong: hsla(110, 50%, 70%, 1); - --coral-color-success-background-strong-hover: hsla(110, 50%, 60%, 1); - --coral-color-success-background-strong-active: hsla(110, 50%, 50%, 1); - --coral-color-success-border: hsla(110, 50%, 70%, 1); - --coral-color-success-border-hover: hsla(110, 50%, 60%, 1); - --coral-color-success-border-active: hsla(110, 50%, 50%, 1); - --coral-color-warning-text: hsla(27, 97%, 57%, 1); - --coral-color-warning-text-hover: hsla(27, 97%, 47%, 1); - --coral-color-warning-text-active: hsla(27, 97%, 37%, 1); - --coral-color-warning-text-weak: hsla(207, 18%, 24%, 1); - --coral-color-warning-text-weak-hover: hsla(22, 84%, 20%, 1); - --coral-color-warning-text-weak-active: hsla(23, 84%, 15%, 1); - --coral-color-warning-text-strong: hsla(27, 98%, 67%, 1); - --coral-color-warning-text-strong-hover: hsla(27, 97%, 57%, 1); - --coral-color-warning-text-strong-active: hsla(27, 98%, 47%, 1); - --coral-color-warning-background: hsla(22, 84%, 20%, 1); - --coral-color-warning-background-hover: hsla(22, 84%, 15%, 1); - --coral-color-warning-background-active: hsla(22, 84%, 10%, 1); - --coral-color-warning-background-weak: hsla(207, 18%, 24%, 1); - --coral-color-warning-background-weak-hover: hsla(22, 84%, 20%, 1); - --coral-color-warning-background-weak-active: hsla(23, 84%, 15%, 1); - --coral-color-warning-background-strong: hsla(27, 98%, 67%, 1); - --coral-color-warning-background-strong-hover: hsla(27, 97%, 57%, 1); - --coral-color-warning-background-strong-active: hsla(27, 98%, 47%, 1); - --coral-color-warning-border: hsla(27, 98%, 67%, 1); - --coral-color-warning-border-hover: hsla(27, 97%, 57%, 1); - --coral-color-warning-border-active: hsla(27, 98%, 47%, 1); - --coral-color-assistive-background: hsla(208, 20%, 83%, 1); - --coral-color-assistive-text: hsla(208, 18%, 14%, 1); - --coral-color-assistive-border: hsla(208, 20%, 63%, 1); - --coral-color-assistive-border-focus: hsla(256, 66%, 76%, 1); - --coral-color-branding-brand: hsla(359, 100%, 71%, 1); - --coral-color-neutral-border-hover: hsla(206, 17%, 92%, 1); - --coral-color-beta-text: hsla(280, 44%, 72%, 1); - --coral-color-beta-text-hover: hsla(280, 43%, 62%, 1); - --coral-color-beta-text-active: hsla(280, 44%, 52%, 1); - --coral-color-beta-icon: hsla(280, 68%, 61%, 1); - --coral-color-beta-icon-hover: hsla(280, 68%, 51%, 1); - --coral-color-beta-icon-active: hsla(280, 67%, 41%, 1); - --coral-color-beta-text-weak: hsla(207, 18%, 24%, 1); - --coral-color-beta-text-weak-hover: hsla(281, 65%, 24%, 1); - --coral-color-beta-text-weak-active: hsla(280, 64%, 14%, 1); - --coral-color-beta-text-strong: hsla(279, 34%, 78%, 1); - --coral-color-beta-text-strong-hover: hsla(279, 34%, 68%, 1); - --coral-color-beta-text-strong-active: hsla(280, 34%, 48%, 1); - --coral-color-beta-background: hsla(281, 65%, 24%, 1); - --coral-color-beta-background-hover: hsla(280, 64%, 14%, 1); - --coral-color-beta-background-active: hsla(277, 62%, 4%, 1); - --coral-color-beta-background-weak: hsla(207, 18%, 24%, 1); - --coral-color-beta-background-weak-hover: hsla(281, 65%, 24%, 1); - --coral-color-beta-background-weak-active: hsla(280, 64%, 14%, 1); - --coral-color-beta-background-strong: hsla(279, 34%, 78%, 1); - --coral-color-beta-background-strong-hover: hsla(279, 34%, 68%, 1); - --coral-color-beta-background-strong-active: hsla(279, 34%, 48%, 1); - --coral-color-beta-border: hsla(279, 34%, 78%, 1); - --coral-color-beta-border-hover: hsla(279, 34%, 68%, 1); - --coral-color-beta-border-active: hsla(279, 34%, 48%, 1); - --coral-color-accent-icon: hsla(198, 76%, 67%, 1); - --coral-color-accent-icon-hover: hsla(198, 76%, 57%, 1); - --coral-color-accent-icon-active: hsla(198, 77%, 47%, 1); - --coral-color-danger-icon: hsla(2, 96%, 67%, 1); - --coral-color-danger-icon-hover: hsla(2, 96%, 57%, 1); - --coral-color-danger-icon-active: hsla(2, 97%, 47%, 1); - --coral-color-success-icon-active: hsla(110, 61%, 36%, 1); - --coral-color-success-icon-hover: hsla(110, 62%, 46%, 1); - --coral-color-success-icon: hsla(110, 61%, 56%, 1); - --coral-color-warning-icon-active: hsla(27, 98%, 19%, 1); - --coral-color-warning-icon-hover: hsla(27, 99%, 29%, 1); - --coral-color-warning-icon: hsla(27, 99%, 49%, 1); - --coral-color-charts-neutral: hsla(0, 0%, 75%, 1); - --coral-color-charts-neutral-weak: hsla(206, 10%, 48%, 1); - --coral-color-charts-neutral-strong: hsla(0, 0%, 88%, 1); - --coral-color-charts-neutral-hover: hsla(0, 0%, 88%, 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-neutral-border-strong: hsla(0, 0%, 92%, 1); - --coral-color-neutral-border-strong-hover: hsla(216, 30%, 82%, 1); - --coral-color-neutral-icon: hsla(210, 17%, 93%, 1); - --coral-color-neutral-icon-inverted: hsla(210, 7%, 79%, 1); - --coral-color-neutral-icon-weak: hsla(206, 24%, 83%, 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(204, 18%, 11%, 1); - --coral-color-illustration-color-01: hsla(358, 40%, 53%, 1); - --coral-color-illustration-color-02: hsla(355, 39%, 61%, 1); - --coral-color-illustration-color-03: hsla(349, 15%, 71%, 1); - --coral-color-illustration-color-04: hsla(211, 54%, 15%, 1); - --coral-color-illustration-color-05: hsla(212, 28%, 37%, 1); - --coral-color-illustration-color-06: hsla(212, 29%, 61%, 1); - --coral-color-illustration-skintone-01: hsla(20, 29%, 66%, 1); - --coral-color-illustration-skintone-02: hsla(21, 23%, 49%, 1); - --coral-color-illustration-skintone-03: hsla(17, 29%, 22%, 1); - --coral-color-illustration-shadow: hsla(0, 0%, 0%, 0.1); - --coral-color-illustration-color-07: hsla(213, 13%, 35%, 1); - --coral-color-illustration-color-08: hsla(212, 13%, 19%, 1); - --coral-color-illustration-color-09: hsla(240, 3%, 12%, 1); - --coral-color-accent-background-selected: hsla(199, 73%, 13%, 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-text: hsla(198, 72%, 65%, 1); - --coral-color-info-text-hover: hsla(198, 72%, 55%, 1); - --coral-color-info-text-active: hsla(198, 72%, 45%, 1); - --coral-color-info-icon: hsla(198, 76%, 67%, 1); - --coral-color-info-text-weak: hsla(207, 18%, 24%, 1); - --coral-color-info-text-weak-hover: hsla(199, 71%, 15%, 1); - --coral-color-info-text-weak-active: hsla(199, 73%, 10%, 1); - --coral-color-info-text-strong: hsla(198, 72%, 75%, 1); - --coral-color-info-text-strong-hover: hsla(198, 72%, 65%, 1); - --coral-color-info-text-strong-active: hsla(198, 72%, 55%, 1); - --coral-color-info-background: hsla(198, 72%, 25%, 1); - --coral-color-info-background-hover: hsla(199, 78%, 20%, 1); - --coral-color-info-background-active: hsla(199, 73%, 10%, 1); - --coral-color-info-background-weak: hsla(207, 18%, 24%, 1); - --coral-color-info-background-weak-hover: hsla(199, 71%, 15%, 1); - --coral-color-info-background-weak-active: hsla(199, 73%, 10%, 1); - --coral-color-info-background-strong: hsla(198, 72%, 75%, 1); - --coral-color-info-background-strong-hover: hsla(198, 72%, 65%, 1); - --coral-color-info-background-strong-active: hsla(198, 72%, 55%, 1); - --coral-color-info-border: hsla(198, 72%, 75%, 1); - --coral-color-info-border-hover: hsla(198, 72%, 65%, 1); - --coral-color-info-border-active: hsla(199, 72%, 55%, 1); - --coral-color-info-icon-hover: hsla(198, 76%, 57%, 1); - --coral-color-info-icon-active: hsla(198, 77%, 47%, 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(226, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%); - --coral-color-branding-navigation: linear-gradient(133deg,hsla(222, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 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.5); - --coral-elevation-shadow-neutral-l: 0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.5); - --coral-elevation-shadow-accent: 0rem 0.1rem 0.1rem 0rem hsla(198, 72%, 75%, 0.3); - --coral-elevation-shadow-success: 0rem 0.1rem 0.1rem 0rem hsla(110, 50%, 70%, 0.3); - --coral-elevation-shadow-danger: 0rem 0.1rem 0.1rem 0rem hsla(359, 100%, 78%, 0.3); - --coral-elevation-shadow-warning: 0rem 0.1rem 0.1rem 0rem hsla(27, 98%, 67%, 0.3); - --coral-elevation-shadow-beta: 0rem 0.1rem 0.1rem 0rem hsla(279, 34%, 78%, 0.3); - --coral-elevation-shadow-neutral-inverted-m: 0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 2%, 0.5); - --coral-elevation-shadow-neutral-inverted-l: 0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 5%, 0.5); - --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%, 2%, 0.5); - --coral-heading-l: 600 1.8rem/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-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-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-dark-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite; - color-scheme: dark; +[data-theme='dark'] { + --coral-color-neutral-text: hsla(0, 0%, 100%, 1); + --coral-color-neutral-text-inverted: hsla(210, 7%, 79%, 1); + --coral-color-neutral-text-weak: hsla(206, 17%, 82%, 1); + --coral-color-neutral-text-disabled: hsla(207, 11%, 64%, 1); + --coral-color-neutral-background: hsla(206, 17%, 18%, 1); + --coral-color-neutral-background-disabled: hsla(210, 17%, 16%, 1); + --coral-color-neutral-background-medium: hsla(208, 18%, 21%, 1); + --coral-color-neutral-background-strong: hsla(208, 18%, 14%, 1); + --coral-color-neutral-border: hsla(206, 17%, 82%, 1); + --coral-color-neutral-border-weak: hsla(207, 18%, 34%, 1); + --coral-color-neutral-border-weak-hover: hsla(207, 18%, 44%, 1); + --coral-color-neutral-border-disabled: hsla(208, 11%, 35%, 1); + --coral-color-accent-text: hsla(198, 72%, 65%, 1); + --coral-color-accent-text-hover: hsla(198, 72%, 55%, 1); + --coral-color-accent-text-active: hsla(198, 72%, 45%, 1); + --coral-color-accent-text-weak: hsla(207, 18%, 24%, 1); + --coral-color-accent-text-weak-hover: hsla(199, 71%, 15%, 1); + --coral-color-accent-text-weak-active: hsla(199, 73%, 10%, 1); + --coral-color-accent-text-strong: hsla(198, 72%, 75%, 1); + --coral-color-accent-text-strong-hover: hsla(198, 72%, 65%, 1); + --coral-color-accent-text-strong-active: hsla(198, 72%, 55%, 1); + --coral-color-accent-background: hsla(198, 72%, 25%, 1); + --coral-color-accent-background-hover: hsla(199, 78%, 20%, 1); + --coral-color-accent-background-active: hsla(199, 73%, 10%, 1); + --coral-color-accent-background-weak: hsla(207, 18%, 24%, 1); + --coral-color-accent-background-weak-hover: hsla(199, 71%, 15%, 1); + --coral-color-accent-background-weak-active: hsla(199, 73%, 10%, 1); + --coral-color-accent-background-strong: hsla(198, 72%, 75%, 1); + --coral-color-accent-background-strong-hover: hsla(198, 72%, 65%, 1); + --coral-color-accent-background-strong-active: hsla(198, 72%, 55%, 1); + --coral-color-accent-border: hsla(198, 72%, 75%, 1); + --coral-color-accent-border-hover: hsla(198, 72%, 65%, 1); + --coral-color-accent-border-active: hsla(199, 72%, 55%, 1); + --coral-color-danger-text: hsla(2, 95%, 74%, 1); + --coral-color-danger-text-hover: hsla(2, 95%, 69%, 1); + --coral-color-danger-text-active: hsla(2, 96%, 64%, 1); + --coral-color-danger-text-weak: hsla(207, 18%, 24%, 1); + --coral-color-danger-text-weak-hover: hsla(358, 96%, 18%, 1); + --coral-color-danger-text-weak-active: hsla(357, 97%, 13%, 1); + --coral-color-danger-text-strong: hsla(359, 100%, 78%, 1); + --coral-color-danger-text-strong-hover: hsla(359, 100%, 73%, 1); + --coral-color-danger-text-strong-active: hsla(359, 100%, 68%, 1); + --coral-color-danger-background: hsla(358, 96%, 18%, 1); + --coral-color-danger-background-hover: hsla(357, 97%, 13%, 1); + --coral-color-danger-background-active: hsla(358, 95%, 8%, 1); + --coral-color-danger-background-weak: hsla(207, 18%, 24%, 1); + --coral-color-danger-background-weak-hover: hsla(358, 96%, 18%, 1); + --coral-color-danger-background-weak-active: hsla(357, 97%, 13%, 1); + --coral-color-danger-background-strong: hsla(359, 100%, 78%, 1); + --coral-color-danger-background-strong-hover: hsla(359, 100%, 73%, 1); + --coral-color-danger-background-strong-active: hsla(359, 100%, 68%, 1); + --coral-color-danger-border: hsla(359, 100%, 78%, 1); + --coral-color-danger-border-hover: hsla(359, 100%, 73%, 1); + --coral-color-danger-border-active: hsla(359, 100%, 68%, 1); + --coral-color-success-text: hsla(110, 50%, 60%, 1); + --coral-color-success-text-hover: hsla(110, 45%, 50%, 1); + --coral-color-success-text-active: hsla(110, 45%, 40%, 1); + --coral-color-success-text-weak: hsla(207, 18%, 24%, 1); + --coral-color-success-text-weak-hover: hsla(109, 50%, 20%, 1); + --coral-color-success-text-weak-active: hsla(109, 51%, 15%, 1); + --coral-color-success-text-strong: hsla(110, 50%, 70%, 1); + --coral-color-success-text-strong-hover: hsla(110, 50%, 60%, 1); + --coral-color-success-text-strong-active: hsla(110, 50%, 50%, 1); + --coral-color-success-background: hsla(109, 50%, 20%, 1); + --coral-color-success-background-hover: hsla(109, 51%, 15%, 1); + --coral-color-success-background-active: hsla(110, 49%, 10%, 1); + --coral-color-success-background-weak: hsla(207, 18%, 24%, 1); + --coral-color-success-background-weak-hover: hsla(109, 50%, 20%, 1); + --coral-color-success-background-weak-active: hsla(109, 51%, 15%, 1); + --coral-color-success-background-strong: hsla(110, 50%, 70%, 1); + --coral-color-success-background-strong-hover: hsla(110, 50%, 60%, 1); + --coral-color-success-background-strong-active: hsla(110, 50%, 50%, 1); + --coral-color-success-border: hsla(110, 50%, 70%, 1); + --coral-color-success-border-hover: hsla(110, 50%, 60%, 1); + --coral-color-success-border-active: hsla(110, 50%, 50%, 1); + --coral-color-warning-text: hsla(27, 97%, 57%, 1); + --coral-color-warning-text-hover: hsla(27, 97%, 47%, 1); + --coral-color-warning-text-active: hsla(27, 97%, 37%, 1); + --coral-color-warning-text-weak: hsla(207, 18%, 24%, 1); + --coral-color-warning-text-weak-hover: hsla(22, 84%, 20%, 1); + --coral-color-warning-text-weak-active: hsla(23, 84%, 15%, 1); + --coral-color-warning-text-strong: hsla(27, 98%, 67%, 1); + --coral-color-warning-text-strong-hover: hsla(27, 97%, 57%, 1); + --coral-color-warning-text-strong-active: hsla(27, 98%, 47%, 1); + --coral-color-warning-background: hsla(22, 84%, 20%, 1); + --coral-color-warning-background-hover: hsla(22, 84%, 15%, 1); + --coral-color-warning-background-active: hsla(22, 84%, 10%, 1); + --coral-color-warning-background-weak: hsla(207, 18%, 24%, 1); + --coral-color-warning-background-weak-hover: hsla(22, 84%, 20%, 1); + --coral-color-warning-background-weak-active: hsla(23, 84%, 15%, 1); + --coral-color-warning-background-strong: hsla(27, 98%, 67%, 1); + --coral-color-warning-background-strong-hover: hsla(27, 97%, 57%, 1); + --coral-color-warning-background-strong-active: hsla(27, 98%, 47%, 1); + --coral-color-warning-border: hsla(27, 98%, 67%, 1); + --coral-color-warning-border-hover: hsla(27, 97%, 57%, 1); + --coral-color-warning-border-active: hsla(27, 98%, 47%, 1); + --coral-color-assistive-background: hsla(208, 20%, 83%, 1); + --coral-color-assistive-text: hsla(208, 18%, 14%, 1); + --coral-color-assistive-border: hsla(208, 20%, 63%, 1); + --coral-color-assistive-border-focus: hsla(256, 66%, 76%, 1); + --coral-color-branding-brand: hsla(359, 100%, 71%, 1); + --coral-color-neutral-border-hover: hsla(206, 17%, 92%, 1); + --coral-color-beta-text: hsla(280, 44%, 72%, 1); + --coral-color-beta-text-hover: hsla(280, 43%, 62%, 1); + --coral-color-beta-text-active: hsla(280, 44%, 52%, 1); + --coral-color-beta-icon: hsla(280, 68%, 61%, 1); + --coral-color-beta-icon-hover: hsla(280, 68%, 51%, 1); + --coral-color-beta-icon-active: hsla(280, 67%, 41%, 1); + --coral-color-beta-text-weak: hsla(207, 18%, 24%, 1); + --coral-color-beta-text-weak-hover: hsla(281, 65%, 24%, 1); + --coral-color-beta-text-weak-active: hsla(280, 64%, 14%, 1); + --coral-color-beta-text-strong: hsla(279, 34%, 78%, 1); + --coral-color-beta-text-strong-hover: hsla(279, 34%, 68%, 1); + --coral-color-beta-text-strong-active: hsla(280, 34%, 48%, 1); + --coral-color-beta-background: hsla(281, 65%, 24%, 1); + --coral-color-beta-background-hover: hsla(280, 64%, 14%, 1); + --coral-color-beta-background-active: hsla(277, 62%, 4%, 1); + --coral-color-beta-background-weak: hsla(207, 18%, 24%, 1); + --coral-color-beta-background-weak-hover: hsla(281, 65%, 24%, 1); + --coral-color-beta-background-weak-active: hsla(280, 64%, 14%, 1); + --coral-color-beta-background-strong: hsla(279, 34%, 78%, 1); + --coral-color-beta-background-strong-hover: hsla(279, 34%, 68%, 1); + --coral-color-beta-background-strong-active: hsla(279, 34%, 48%, 1); + --coral-color-beta-border: hsla(279, 34%, 78%, 1); + --coral-color-beta-border-hover: hsla(279, 34%, 68%, 1); + --coral-color-beta-border-active: hsla(279, 34%, 48%, 1); + --coral-color-accent-icon: hsla(198, 76%, 67%, 1); + --coral-color-accent-icon-hover: hsla(198, 76%, 57%, 1); + --coral-color-accent-icon-active: hsla(198, 77%, 47%, 1); + --coral-color-danger-icon: hsla(2, 96%, 67%, 1); + --coral-color-danger-icon-hover: hsla(2, 96%, 57%, 1); + --coral-color-danger-icon-active: hsla(2, 97%, 47%, 1); + --coral-color-success-icon-active: hsla(110, 61%, 36%, 1); + --coral-color-success-icon-hover: hsla(110, 62%, 46%, 1); + --coral-color-success-icon: hsla(110, 61%, 56%, 1); + --coral-color-warning-icon-active: hsla(27, 98%, 19%, 1); + --coral-color-warning-icon-hover: hsla(27, 99%, 29%, 1); + --coral-color-warning-icon: hsla(27, 99%, 49%, 1); + --coral-color-charts-neutral: hsla(0, 0%, 75%, 1); + --coral-color-charts-neutral-weak: hsla(206, 10%, 48%, 1); + --coral-color-charts-neutral-strong: hsla(0, 0%, 88%, 1); + --coral-color-charts-neutral-hover: hsla(0, 0%, 88%, 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-neutral-border-strong: hsla(0, 0%, 92%, 1); + --coral-color-neutral-border-strong-hover: hsla(216, 30%, 82%, 1); + --coral-color-neutral-icon: hsla(210, 17%, 93%, 1); + --coral-color-neutral-icon-inverted: hsla(210, 7%, 79%, 1); + --coral-color-neutral-icon-weak: hsla(206, 24%, 83%, 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(204, 18%, 11%, 1); + --coral-color-illustration-color-01: hsla(358, 40%, 53%, 1); + --coral-color-illustration-color-02: hsla(355, 39%, 61%, 1); + --coral-color-illustration-color-03: hsla(349, 15%, 71%, 1); + --coral-color-illustration-color-04: hsla(211, 54%, 15%, 1); + --coral-color-illustration-color-05: hsla(212, 28%, 37%, 1); + --coral-color-illustration-color-06: hsla(212, 29%, 61%, 1); + --coral-color-illustration-skintone-01: hsla(20, 29%, 66%, 1); + --coral-color-illustration-skintone-02: hsla(21, 23%, 49%, 1); + --coral-color-illustration-skintone-03: hsla(17, 29%, 22%, 1); + --coral-color-illustration-shadow: hsla(0, 0%, 0%, 0.1); + --coral-color-illustration-color-07: hsla(213, 13%, 35%, 1); + --coral-color-illustration-color-08: hsla(212, 13%, 19%, 1); + --coral-color-illustration-color-09: hsla(240, 3%, 12%, 1); + --coral-color-accent-background-selected: hsla(199, 73%, 13%, 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-text: hsla(198, 72%, 65%, 1); + --coral-color-info-text-hover: hsla(198, 72%, 55%, 1); + --coral-color-info-text-active: hsla(198, 72%, 45%, 1); + --coral-color-info-icon: hsla(198, 76%, 67%, 1); + --coral-color-info-text-weak: hsla(207, 18%, 24%, 1); + --coral-color-info-text-weak-hover: hsla(199, 71%, 15%, 1); + --coral-color-info-text-weak-active: hsla(199, 73%, 10%, 1); + --coral-color-info-text-strong: hsla(198, 72%, 75%, 1); + --coral-color-info-text-strong-hover: hsla(198, 72%, 65%, 1); + --coral-color-info-text-strong-active: hsla(198, 72%, 55%, 1); + --coral-color-info-background: hsla(198, 72%, 25%, 1); + --coral-color-info-background-hover: hsla(199, 78%, 20%, 1); + --coral-color-info-background-active: hsla(199, 73%, 10%, 1); + --coral-color-info-background-weak: hsla(207, 18%, 24%, 1); + --coral-color-info-background-weak-hover: hsla(199, 71%, 15%, 1); + --coral-color-info-background-weak-active: hsla(199, 73%, 10%, 1); + --coral-color-info-background-strong: hsla(198, 72%, 75%, 1); + --coral-color-info-background-strong-hover: hsla(198, 72%, 65%, 1); + --coral-color-info-background-strong-active: hsla(198, 72%, 55%, 1); + --coral-color-info-border: hsla(198, 72%, 75%, 1); + --coral-color-info-border-hover: hsla(198, 72%, 65%, 1); + --coral-color-info-border-active: hsla(199, 72%, 55%, 1); + --coral-color-info-icon-hover: hsla(198, 76%, 57%, 1); + --coral-color-info-icon-active: hsla(198, 77%, 47%, 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(226, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%); + --coral-color-branding-navigation: linear-gradient(133deg, hsla(222, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 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.5); + --coral-elevation-shadow-neutral-l: 0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.5); + --coral-elevation-shadow-accent: 0rem 0.1rem 0.1rem 0rem hsla(198, 72%, 75%, 0.3); + --coral-elevation-shadow-success: 0rem 0.1rem 0.1rem 0rem hsla(110, 50%, 70%, 0.3); + --coral-elevation-shadow-danger: 0rem 0.1rem 0.1rem 0rem hsla(359, 100%, 78%, 0.3); + --coral-elevation-shadow-warning: 0rem 0.1rem 0.1rem 0rem hsla(27, 98%, 67%, 0.3); + --coral-elevation-shadow-beta: 0rem 0.1rem 0.1rem 0rem hsla(279, 34%, 78%, 0.3); + --coral-elevation-shadow-neutral-inverted-m: 0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 2%, 0.5); + --coral-elevation-shadow-neutral-inverted-l: 0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 5%, 0.5); + --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%, 2%, 0.5); + --coral-heading-l: 600 1.8rem/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-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-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-dark-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite; + color-scheme: dark; +} +@keyframes coral-dark-keyframes-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } } -@keyframes coral-dark-keyframes-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }; diff --git a/packages/design-tokens/src/dark/_tokens.scss b/packages/design-tokens/src/dark/_tokens.scss index 4340a9b71a3..4635a255354 100644 --- a/packages/design-tokens/src/dark/_tokens.scss +++ b/packages/design-tokens/src/dark/_tokens.scss @@ -270,9 +270,9 @@ $coral-color-brand-icon-inverted: #{var(--coral-color-brand-icon-inverted, hsla( $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(226, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%))}; -$coral-color-branding-navigation: #{var(--coral-color-branding-navigation, linear-gradient(133deg,hsla(222, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 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-color-branding-background: #{var(--coral-color-branding-background, linear-gradient(133deg, hsla(226, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%))}; +$coral-color-branding-navigation: #{var(--coral-color-branding-navigation, linear-gradient(133deg, hsla(222, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 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)}; @@ -328,7 +328,10 @@ $coral-breakpoint-s: #{var(--coral-breakpoint-s, 40em)}; $coral-breakpoint-m: #{var(--coral-breakpoint-m, 48em)}; $coral-breakpoint-l: #{var(--coral-breakpoint-l, 64em)}; $coral-breakpoint-xl: #{var(--coral-breakpoint-xl, 80em)}; -$coral-branding-logo: #{var(--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-branding-logo: #{var( + --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: #{var(--coral-transition-instant, 100ms ease-out)}; $coral-transition-fast: #{var(--coral-transition-fast, 250ms ease-in-out)}; $coral-transition-normal: #{var(--coral-transition-normal, 300ms ease-in-out)}; diff --git a/packages/design-tokens/src/light/_index.scss b/packages/design-tokens/src/light/_index.scss index 1f01bcd6cdf..fd5483603e2 100644 --- a/packages/design-tokens/src/light/_index.scss +++ b/packages/design-tokens/src/light/_index.scss @@ -1,344 +1,352 @@ -[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; +[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; } };