diff --git a/.changeset/old-onions-remain.md b/.changeset/old-onions-remain.md new file mode 100644 index 00000000000..44b8ec6bea6 --- /dev/null +++ b/.changeset/old-onions-remain.md @@ -0,0 +1,5 @@ +--- +'@talend/design-tokens': minor +--- + +feat: add brand & info tokens diff --git a/packages/design-tokens/.eslintrc.json b/packages/design-tokens/.eslintrc.json index 3f455118522..b15edc02df4 100644 --- a/packages/design-tokens/.eslintrc.json +++ b/packages/design-tokens/.eslintrc.json @@ -2,6 +2,7 @@ "root": true, "extends": ["@talend"], "rules": { - "react/display-name": "warn" + "react/display-name": "warn", + "@typescript-eslint/quotes": "off" } } diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 2bf6ce6b8d0..d68337b32b5 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -13,7 +13,7 @@ "test": "echo no test for @talend/design-tokens", "test:cov": "echo no test for @talend/design-tokens", "test:umd": "jest scripts/umd.test.js", - "lint": "talend-scripts lint ./src ./scripts" + "lint": "talend-scripts lint" }, "keywords": [ "talend", diff --git a/packages/design-tokens/src/_tokens.scss b/packages/design-tokens/src/_tokens.scss index e00474baa54..5b71572683c 100644 --- a/packages/design-tokens/src/_tokens.scss +++ b/packages/design-tokens/src/_tokens.scss @@ -1,3 +1,5 @@ +// stylelint-disable indentation +// stylelint-disable scss/operator-no-unspaced $coral-color-neutral-text: #{var(--coral-color-neutral-text, hsla(0, 0%, 13%, 1))}; $coral-color-neutral-text-weak: #{var(--coral-color-neutral-text-weak, hsla(0, 0%, 38%, 1))}; $coral-color-neutral-text-disabled: #{var(--coral-color-neutral-text-disabled, hsla(0, 0%, 44%, 1))}; @@ -222,8 +224,57 @@ $coral-color-illustration-color-07: #{var(--coral-color-illustration-color-07, h $coral-color-illustration-color-08: #{var(--coral-color-illustration-color-08, hsla(211, 23%, 74%, 1))}; $coral-color-illustration-color-09: #{var(--coral-color-illustration-color-09, hsla(245, 10%, 23%, 1))}; $coral-color-accent-background-selected: #{var(--coral-color-accent-background-selected, hsla(204, 100%, 95%, 1))}; +$coral-color-info-text: #{var(--coral-color-info-text, hsla(204, 95%, 31%, 1))}; +$coral-color-info-text-hover: #{var(--coral-color-info-text-hover, hsla(204, 96%, 18%, 1))}; +$coral-color-info-text-active: #{var(--coral-color-info-text-active, hsla(205, 94%, 13%, 1))}; +$coral-color-info-text-weak: #{var(--coral-color-info-text-weak, white)}; +$coral-color-info-text-weak-hover: #{var(--coral-color-info-text-weak-hover, hsla(204, 59%, 88%, 1))}; +$coral-color-info-text-weak-active: #{var(--coral-color-info-text-weak-active, hsla(205, 60%, 75%, 1))}; +$coral-color-info-text-strong: #{var(--coral-color-info-text-strong, hsla(204, 96%, 18%, 1))}; +$coral-color-info-text-strong-hover: #{var(--coral-color-info-text-strong-hover, hsla(204, 97%, 13%, 1))}; +$coral-color-info-text-strong-active: #{var(--coral-color-info-text-strong-active, hsla(205, 95%, 8%, 1))}; +$coral-color-info-background-hover: #{var(--coral-color-info-background-hover, hsla(205, 60%, 75%, 1))}; +$coral-color-info-background-active: #{var(--coral-color-info-background-active, hsla(204, 60%, 63%, 1))}; +$coral-color-info-background-weak: #{var(--coral-color-info-background-weak, white)}; +$coral-color-info-background-weak-hover: #{var(--coral-color-info-background-weak-hover, hsla(204, 59%, 88%, 1))}; +$coral-color-info-background-weak-active: #{var(--coral-color-info-background-weak-active, hsla(205, 60%, 75%, 1))}; +$coral-color-info-background-strong: #{var(--coral-color-info-background-strong, hsla(204, 95%, 31%, 1))}; +$coral-color-info-background-strong-hover: #{var(--coral-color-info-background-strong-hover, hsla(204, 95%, 23%, 1))}; +$coral-color-info-background-strong-active: #{var(--coral-color-info-background-strong-active, hsla(205, 95%, 15%, 1))}; +$coral-color-info-border: #{var(--coral-color-info-border, hsla(204, 95%, 31%, 1))}; +$coral-color-info-border-hover: #{var(--coral-color-info-border-hover, hsla(204, 95%, 23%, 1))}; +$coral-color-info-border-active: #{var(--coral-color-info-border-active, hsla(205, 95%, 15%, 1))}; +$coral-color-info-icon: #{var(--coral-color-info-icon, hsla(204, 88%, 40%, 1))}; +$coral-color-info-icon-hover: #{var(--coral-color-info-icon-hover, hsla(204, 88%, 30%, 1))}; +$coral-color-info-icon-active: #{var(--coral-color-info-icon-active, hsla(205, 88%, 20%, 1))}; +$coral-color-brand-text: #{var(--coral-color-brand-text, white)}; +$coral-color-brand-text-hover: #{var(--coral-color-brand-text-hover, white)}; +$coral-color-brand-text-active: #{var(--coral-color-brand-text-active, white)}; +$coral-color-brand-text-inverted: #{var(--coral-color-brand-text-inverted, hsla(0, 0%, 38%, 1))}; +$coral-color-brand-text-inverted-hover: #{var(--coral-color-brand-text-inverted-hover, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-text-inverted-active: #{var(--coral-color-brand-text-inverted-active, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-text-selected: #{var(--coral-color-brand-text-selected, hsla(204, 96%, 18%, 1))}; +$coral-color-brand-background-weak: #{var(--coral-color-brand-background-weak, hsla(0, 0%, 100%, 0))}; +$coral-color-brand-background-weak-hover: #{var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 100%, 0.1))}; +$coral-color-brand-background-weak-active: #{var(--coral-color-brand-background-weak-active, hsla(0, 0%, 100%, 0.1))}; +$coral-color-brand-background-selected: #{var(--coral-color-brand-background-selected, white)}; +$coral-color-brand-background-inverted: #{var(--coral-color-brand-background-inverted, hsla(0, 0%, 13%, 0))}; +$coral-color-brand-background-inverted-hover: #{var(--coral-color-brand-background-inverted-hover, hsla(0, 0%, 13%, 0.1))}; +$coral-color-brand-background-inverted-active: #{var(--coral-color-brand-background-inverted-active, hsla(0, 0%, 13%, 0.1))}; +$coral-color-brand-border: #{var(--coral-color-brand-border, white)}; +$coral-color-brand-border-hover: #{var(--coral-color-brand-border-hover, white)}; +$coral-color-brand-border-active: #{var(--coral-color-brand-border-active, white)}; +$coral-color-info-background: #{var(--coral-color-info-background, hsla(204, 59%, 88%, 1))}; +$coral-color-brand-icon: #{var(--coral-color-brand-icon, white)}; +$coral-color-brand-icon-hover: #{var(--coral-color-brand-icon-hover, white)}; +$coral-color-brand-icon-active: #{var(--coral-color-brand-icon-active, white)}; +$coral-color-brand-icon-inverted: #{var(--coral-color-brand-icon-inverted, hsla(0, 0%, 38%, 1))}; +$coral-color-brand-icon-inverted-hover: #{var(--coral-color-brand-icon-inverted-hover, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-icon-inverted-active: #{var(--coral-color-brand-icon-inverted-active, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-icon-selected: #{var(--coral-color-brand-icon-selected, hsla(204, 96%, 18%, 1))}; $coral-color-branding-background: #{var(--coral-color-branding-background, linear-gradient(133deg, hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))}; $coral-color-branding-navigation: #{var(--coral-color-branding-navigation, linear-gradient(133deg, hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))}; +$coral-color-brand-background: #{var(--coral-color-brand-background, linear-gradient(133deg, hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))}; $coral-spacing-xxs: #{var(--coral-spacing-xxs, 0.4rem)}; $coral-spacing-xs: #{var(--coral-spacing-xs, 0.8rem)}; $coral-spacing-s: #{var(--coral-spacing-s, 1.2rem)}; @@ -245,23 +296,25 @@ $coral-elevation-shadow-success: #{var(--coral-elevation-shadow-success, 0 0.1re $coral-elevation-shadow-danger: #{var(--coral-elevation-shadow-danger, 0 0.1rem 0.1rem 0 hsla(359, 51%, 53%, 0.3))}; $coral-elevation-shadow-warning: #{var(--coral-elevation-shadow-warning, 0 0.1rem 0.1rem 0 hsla(22, 93%, 41%, 0.3))}; $coral-elevation-shadow-beta: #{var(--coral-elevation-shadow-beta, 0 0.1rem 0.1rem 0 hsla(281, 58%, 29%, 0.3))}; -$coral-elevation-shadow-neutral-inverted-m: #{var(--coral-elevation-shadow-neutral-inverted-m, 0 -0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3))}; // stylelint-disable scss/operator-no-unspaced +$coral-elevation-shadow-neutral-inverted-m: #{var(--coral-elevation-shadow-neutral-inverted-m, 0 -0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3))}; $coral-elevation-shadow-neutral-inverted-l: #{var(--coral-elevation-shadow-neutral-inverted-l, 0 -0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.3))}; $coral-elevation-shadow-neutral-l: #{var(--coral-elevation-shadow-neutral-l, 0 0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.3))}; $coral-elevation-shadow-neutral-s: #{var(--coral-elevation-shadow-neutral-s, 0 0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.5))}; $coral-elevation-shadow-neutral-inverted-s: #{var(--coral-elevation-shadow-neutral-inverted-s, 0 -0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.3))}; -$coral-heading-l: #{var(--coral-heading-l, 600 1.8rem/140% 'Source Sans Pro')}; -$coral-paragraph-m: #{var(--coral-paragraph-m, 400 1.4rem/140% 'Source Sans Pro')}; -$coral-paragraph-m-bold: #{var(--coral-paragraph-m-bold, 600 1.4rem/140% 'Source Sans Pro')}; -$coral-paragraph-s: #{var(--coral-paragraph-s, 400 1.2rem/140% 'Source Sans Pro')}; -$coral-paragraph-s-bold: #{var(--coral-paragraph-s-bold, 600 1.2rem/140% 'Source Sans Pro')}; -$coral-heading-m: #{var(--coral-heading-m, 600 1.6rem/140% 'Source Sans Pro')}; -$coral-heading-s: #{var(--coral-heading-s, 600 1.4rem/140% 'Source Sans Pro')}; -$coral-data-m: #{var(--coral-data-m, 400 1.4rem/140% 'Inconsolata')}; -$coral-data-m-bold: #{var(--coral-data-m-bold, 700 1.4rem/140% 'Inconsolata')}; -$coral-link-m-underlined: #{var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')}; -$coral-link-m: #{var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')}; -$coral-data-xl: #{var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')}; +$coral-heading-l: #{var(--coral-heading-l, 600 1.8rem / 140% 'Source Sans Pro')}; +$coral-paragraph-m: #{var(--coral-paragraph-m, 400 1.4rem / 140% 'Source Sans Pro')}; +$coral-paragraph-m-bold: #{var(--coral-paragraph-m-bold, 600 1.4rem / 140% 'Source Sans Pro')}; +$coral-paragraph-s: #{var(--coral-paragraph-s, 400 1.2rem / 140% 'Source Sans Pro')}; +$coral-paragraph-s-bold: #{var(--coral-paragraph-s-bold, 600 1.2rem / 140% 'Source Sans Pro')}; +$coral-heading-m: #{var(--coral-heading-m, 600 1.6rem / 140% 'Source Sans Pro')}; +$coral-heading-s: #{var(--coral-heading-s, 600 1.4rem / 140% 'Source Sans Pro')}; +$coral-data-m: #{var(--coral-data-m, 400 1.4rem / 140% 'Inconsolata')}; +$coral-data-m-bold: #{var(--coral-data-m-bold, 700 1.4rem / 140% 'Inconsolata')}; +$coral-link-m-underlined: #{var(--coral-link-m-underlined, 600 1.4rem / 140% 'Source Sans Pro')}; +$coral-link-m: #{var(--coral-link-m, 600 1.4rem / 140% 'Source Sans Pro')}; +$coral-data-xl: #{var(--coral-data-xl, 400 2.4rem / 140% 'Inconsolata')}; +$coral-link-s: #{var(--coral-link-s, 600 1.2rem / 140% 'Source Sans Pro')}; +$coral-link-s-underlined: #{var(--coral-link-s-underlined, 600 1.2rem / 140% 'Source Sans Pro')}; $coral-radius-m: #{var(--coral-radius-m, 0.8rem)}; $coral-radius-l: #{var(--coral-radius-l, 1.6rem)}; $coral-radius-round: #{var(--coral-radius-round, 9999.9rem)}; @@ -277,7 +330,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 373c52ce489..df7af2bfbbf 100644 --- a/packages/design-tokens/src/dark/_index.scss +++ b/packages/design-tokens/src/dark/_index.scss @@ -223,8 +223,57 @@ --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: white; + --coral-color-brand-text-hover: white; + --coral-color-brand-text-active: white; + --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: white; + --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: white; + --coral-color-brand-border-hover: white; + --coral-color-brand-border-active: white; + --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: white; + --coral-color-brand-icon-hover: white; + --coral-color-brand-icon-active: white; + --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; @@ -247,22 +296,24 @@ --coral-elevation-shadow-danger: 0 0.1rem 0.1rem 0 hsla(359, 100%, 78%, 0.3); --coral-elevation-shadow-warning: 0 0.1rem 0.1rem 0 hsla(27, 98%, 67%, 0.3); --coral-elevation-shadow-beta: 0 0.1rem 0.1rem 0 hsla(279, 34%, 78%, 0.3); - --coral-elevation-shadow-neutral-inverted-m: 0 -0.2rem 0.6rem 0 hsla(0, 0%, 2%, 0.5); // stylelint-disable scss/operator-no-unspaced + --coral-elevation-shadow-neutral-inverted-m: 0 -0.2rem 0.6rem 0 hsla(0, 0%, 2%, 0.5); --coral-elevation-shadow-neutral-inverted-l: 0 -0.4rem 0.8rem 0 hsla(0, 0%, 5%, 0.5); --coral-elevation-shadow-neutral-s: 0 0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.5); --coral-elevation-shadow-neutral-inverted-s: 0 -0.1rem 0.2rem 0 hsla(0, 0%, 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-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; @@ -290,5 +341,14 @@ --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 ad636d2fc6d..0ebacaa7605 100644 --- a/packages/design-tokens/src/dark/_tokens.scss +++ b/packages/design-tokens/src/dark/_tokens.scss @@ -1,3 +1,5 @@ +// stylelint-disable indentation +// stylelint-disable scss/operator-no-unspaced $coral-color-neutral-text: #{var(--coral-color-neutral-text, white)}; $coral-color-neutral-text-inverted: #{var(--coral-color-neutral-text-inverted, hsla(210, 7%, 79%, 1))}; $coral-color-neutral-text-weak: #{var(--coral-color-neutral-text-weak, hsla(206, 17%, 82%, 1))}; @@ -222,8 +224,57 @@ $coral-color-illustration-color-07: #{var(--coral-color-illustration-color-07, h $coral-color-illustration-color-08: #{var(--coral-color-illustration-color-08, hsla(212, 13%, 19%, 1))}; $coral-color-illustration-color-09: #{var(--coral-color-illustration-color-09, hsla(240, 3%, 12%, 1))}; $coral-color-accent-background-selected: #{var(--coral-color-accent-background-selected, hsla(199, 73%, 13%, 1))}; +$coral-color-brand-text: #{var(--coral-color-brand-text, white)}; +$coral-color-brand-text-hover: #{var(--coral-color-brand-text-hover, white)}; +$coral-color-brand-text-active: #{var(--coral-color-brand-text-active, white)}; +$coral-color-brand-text-inverted: #{var(--coral-color-brand-text-inverted, hsla(0, 0%, 38%, 1))}; +$coral-color-brand-text-inverted-hover: #{var(--coral-color-brand-text-inverted-hover, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-text-inverted-active: #{var(--coral-color-brand-text-inverted-active, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-text-selected: #{var(--coral-color-brand-text-selected, hsla(204, 96%, 18%, 1))}; +$coral-color-brand-background-weak: #{var(--coral-color-brand-background-weak, hsla(0, 0%, 100%, 0))}; +$coral-color-brand-background-weak-hover: #{var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 100%, 0.1))}; +$coral-color-brand-background-weak-active: #{var(--coral-color-brand-background-weak-active, hsla(0, 0%, 100%, 0.1))}; +$coral-color-brand-background-selected: #{var(--coral-color-brand-background-selected, white)}; +$coral-color-brand-background-inverted: #{var(--coral-color-brand-background-inverted, hsla(0, 0%, 13%, 0))}; +$coral-color-brand-background-inverted-hover: #{var(--coral-color-brand-background-inverted-hover, hsla(0, 0%, 13%, 0.1))}; +$coral-color-brand-background-inverted-active: #{var(--coral-color-brand-background-inverted-active, hsla(0, 0%, 13%, 0.1))}; +$coral-color-brand-border: #{var(--coral-color-brand-border, white)}; +$coral-color-brand-border-hover: #{var(--coral-color-brand-border-hover, white)}; +$coral-color-brand-border-active: #{var(--coral-color-brand-border-active, white)}; +$coral-color-info-text: #{var(--coral-color-info-text, hsla(198, 72%, 65%, 1))}; +$coral-color-info-text-hover: #{var(--coral-color-info-text-hover, hsla(198, 72%, 55%, 1))}; +$coral-color-info-text-active: #{var(--coral-color-info-text-active, hsla(198, 72%, 45%, 1))}; +$coral-color-info-icon: #{var(--coral-color-info-icon, hsla(198, 76%, 67%, 1))}; +$coral-color-info-text-weak: #{var(--coral-color-info-text-weak, hsla(207, 18%, 24%, 1))}; +$coral-color-info-text-weak-hover: #{var(--coral-color-info-text-weak-hover, hsla(199, 71%, 15%, 1))}; +$coral-color-info-text-weak-active: #{var(--coral-color-info-text-weak-active, hsla(199, 73%, 10%, 1))}; +$coral-color-info-text-strong: #{var(--coral-color-info-text-strong, hsla(198, 72%, 75%, 1))}; +$coral-color-info-text-strong-hover: #{var(--coral-color-info-text-strong-hover, hsla(198, 72%, 65%, 1))}; +$coral-color-info-text-strong-active: #{var(--coral-color-info-text-strong-active, hsla(198, 72%, 55%, 1))}; +$coral-color-info-background: #{var(--coral-color-info-background, hsla(198, 72%, 25%, 1))}; +$coral-color-info-background-hover: #{var(--coral-color-info-background-hover, hsla(199, 78%, 20%, 1))}; +$coral-color-info-background-active: #{var(--coral-color-info-background-active, hsla(199, 73%, 10%, 1))}; +$coral-color-info-background-weak: #{var(--coral-color-info-background-weak, hsla(207, 18%, 24%, 1))}; +$coral-color-info-background-weak-hover: #{var(--coral-color-info-background-weak-hover, hsla(199, 71%, 15%, 1))}; +$coral-color-info-background-weak-active: #{var(--coral-color-info-background-weak-active, hsla(199, 73%, 10%, 1))}; +$coral-color-info-background-strong: #{var(--coral-color-info-background-strong, hsla(198, 72%, 75%, 1))}; +$coral-color-info-background-strong-hover: #{var(--coral-color-info-background-strong-hover, hsla(198, 72%, 65%, 1))}; +$coral-color-info-background-strong-active: #{var(--coral-color-info-background-strong-active, hsla(198, 72%, 55%, 1))}; +$coral-color-info-border: #{var(--coral-color-info-border, hsla(198, 72%, 75%, 1))}; +$coral-color-info-border-hover: #{var(--coral-color-info-border-hover, hsla(198, 72%, 65%, 1))}; +$coral-color-info-border-active: #{var(--coral-color-info-border-active, hsla(199, 72%, 55%, 1))}; +$coral-color-info-icon-hover: #{var(--coral-color-info-icon-hover, hsla(198, 76%, 57%, 1))}; +$coral-color-info-icon-active: #{var(--coral-color-info-icon-active, hsla(198, 77%, 47%, 1))}; +$coral-color-brand-icon: #{var(--coral-color-brand-icon, white)}; +$coral-color-brand-icon-hover: #{var(--coral-color-brand-icon-hover, white)}; +$coral-color-brand-icon-active: #{var(--coral-color-brand-icon-active, white)}; +$coral-color-brand-icon-inverted: #{var(--coral-color-brand-icon-inverted, hsla(0, 0%, 38%, 1))}; +$coral-color-brand-icon-inverted-hover: #{var(--coral-color-brand-icon-inverted-hover, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-icon-inverted-active: #{var(--coral-color-brand-icon-inverted-active, hsla(0, 0%, 13%, 1))}; +$coral-color-brand-icon-selected: #{var(--coral-color-brand-icon-selected, hsla(204, 96%, 18%, 1))}; $coral-color-branding-background: #{var(--coral-color-branding-background, linear-gradient(133deg, hsla(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)}; @@ -246,22 +297,24 @@ $coral-elevation-shadow-success: #{var(--coral-elevation-shadow-success, 0 0.1re $coral-elevation-shadow-danger: #{var(--coral-elevation-shadow-danger, 0 0.1rem 0.1rem 0 hsla(359, 100%, 78%, 0.3))}; $coral-elevation-shadow-warning: #{var(--coral-elevation-shadow-warning, 0 0.1rem 0.1rem 0 hsla(27, 98%, 67%, 0.3))}; $coral-elevation-shadow-beta: #{var(--coral-elevation-shadow-beta, 0 0.1rem 0.1rem 0 hsla(279, 34%, 78%, 0.3))}; -$coral-elevation-shadow-neutral-inverted-m: #{var(--coral-elevation-shadow-neutral-inverted-m, 0 -0.2rem 0.6rem 0 hsla(0, 0%, 2%, 0.5))}; // stylelint-disable scss/operator-no-unspaced +$coral-elevation-shadow-neutral-inverted-m: #{var(--coral-elevation-shadow-neutral-inverted-m, 0 -0.2rem 0.6rem 0 hsla(0, 0%, 2%, 0.5))}; $coral-elevation-shadow-neutral-inverted-l: #{var(--coral-elevation-shadow-neutral-inverted-l, 0 -0.4rem 0.8rem 0 hsla(0, 0%, 5%, 0.5))}; $coral-elevation-shadow-neutral-s: #{var(--coral-elevation-shadow-neutral-s, 0 0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.5))}; $coral-elevation-shadow-neutral-inverted-s: #{var(--coral-elevation-shadow-neutral-inverted-s, 0 -0.1rem 0.2rem 0 hsla(0, 0%, 2%, 0.5))}; -$coral-heading-l: #{var(--coral-heading-l, 600 1.8rem/140% 'Source Sans Pro')}; -$coral-heading-m: #{var(--coral-heading-m, 600 1.6rem/140% 'Source Sans Pro')}; -$coral-heading-s: #{var(--coral-heading-s, 600 1.4rem/140% 'Source Sans Pro')}; -$coral-paragraph-m: #{var(--coral-paragraph-m, 400 1.4rem/140% 'Source Sans Pro')}; -$coral-paragraph-m-bold: #{var(--coral-paragraph-m-bold, 600 1.4rem/140% 'Source Sans Pro')}; -$coral-paragraph-s: #{var(--coral-paragraph-s, 400 1.2rem/140% 'Source Sans Pro')}; -$coral-paragraph-s-bold: #{var(--coral-paragraph-s-bold, 600 1.2rem/140% 'Source Sans Pro')}; -$coral-data-m: #{var(--coral-data-m, 400 1.4rem/140% 'Inconsolata')}; -$coral-data-m-bold: #{var(--coral-data-m-bold, 700 1.4rem/140% 'Inconsolata')}; -$coral-link-m-underlined: #{var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')}; -$coral-link-m: #{var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')}; -$coral-data-xl: #{var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')}; +$coral-heading-l: #{var(--coral-heading-l, 600 1.8rem / 140% 'Source Sans Pro')}; +$coral-heading-m: #{var(--coral-heading-m, 600 1.6rem / 140% 'Source Sans Pro')}; +$coral-heading-s: #{var(--coral-heading-s, 600 1.4rem / 140% 'Source Sans Pro')}; +$coral-paragraph-m: #{var(--coral-paragraph-m, 400 1.4rem / 140% 'Source Sans Pro')}; +$coral-paragraph-m-bold: #{var(--coral-paragraph-m-bold, 600 1.4rem / 140% 'Source Sans Pro')}; +$coral-paragraph-s: #{var(--coral-paragraph-s, 400 1.2rem / 140% 'Source Sans Pro')}; +$coral-paragraph-s-bold: #{var(--coral-paragraph-s-bold, 600 1.2rem / 140% 'Source Sans Pro')}; +$coral-data-m: #{var(--coral-data-m, 400 1.4rem / 140% 'Inconsolata')}; +$coral-data-m-bold: #{var(--coral-data-m-bold, 700 1.4rem / 140% 'Inconsolata')}; +$coral-link-m-underlined: #{var(--coral-link-m-underlined, 600 1.4rem / 140% 'Source Sans Pro')}; +$coral-link-m: #{var(--coral-link-m, 600 1.4rem / 140% 'Source Sans Pro')}; +$coral-data-xl: #{var(--coral-data-xl, 400 2.4rem / 140% 'Inconsolata')}; +$coral-link-s: #{var(--coral-link-s, 600 1.2rem / 140% 'Source Sans Pro')}; +$coral-link-s-underlined: #{var(--coral-link-s-underlined, 600 1.2rem / 140% 'Source Sans Pro')}; $coral-radius-m: #{var(--coral-radius-m, 0.8rem)}; $coral-radius-l: #{var(--coral-radius-l, 1.6rem)}; $coral-radius-round: #{var(--coral-radius-round, 9999.9rem)}; @@ -277,7 +330,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/dictionary.ts b/packages/design-tokens/src/dark/dictionary.ts index 4b3a5e5a69d..1b38dd76311 100644 --- a/packages/design-tokens/src/dark/dictionary.ts +++ b/packages/design-tokens/src/dark/dictionary.ts @@ -1,2535 +1,2999 @@ const dictionary = [ - { - name: 'coralColorNeutralText', - type: 'color', - description: ``, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:33b4829a83b57d2a91a7e31128d6c6e730ac8c2e,' - }, - { - name: 'coralColorNeutralTextInverted', - type: 'color', - description: ``, - hsla: 'hsla(210, 7%, 79%, 1)', - hex: '#c5c9cd', - value: 'hsla(210, 7%, 79%, 1)', - id: 'S:b71edb12b01e59e0e4639aa156b4dd1cf7159ecd,' - }, - { - name: 'coralColorNeutralTextWeak', - type: 'color', - description: ``, - hsla: 'hsla(206, 17%, 82%, 1)', - hex: '#c9d2d9', - value: 'hsla(206, 17%, 82%, 1)', - id: 'S:e5707bfe4926aac1b3c73b09e06bf34bbcfff67e,' - }, - { - name: 'coralColorNeutralTextDisabled', - type: 'color', - description: ``, - hsla: 'hsla(207, 11%, 64%, 1)', - hex: '#99a4ad', - value: 'hsla(207, 11%, 64%, 1)', - id: 'S:cdb1ac42dc5c74e95ba1ad58d75c4dcbf9a8d0a8,' - }, - { - name: 'coralColorNeutralBackground', - type: 'color', - description: ``, - hsla: 'hsla(206, 17%, 18%, 1)', - hex: '#262f36', - value: 'hsla(206, 17%, 18%, 1)', - id: 'S:9ef16391a1cd63272e12e6e559a07e1bdde8d98c,' - }, - { - name: 'coralColorNeutralBackgroundDisabled', - type: 'color', - description: ``, - hsla: 'hsla(210, 17%, 16%, 1)', - hex: '#222930', - value: 'hsla(210, 17%, 16%, 1)', - id: 'S:e8339f431f04d742f8db2e6c2beced31402ffd3e,' - }, - { - name: 'coralColorNeutralBackgroundMedium', - type: 'color', - description: ``, - hsla: 'hsla(208, 18%, 21%, 1)', - hex: '#2c363f', - value: 'hsla(208, 18%, 21%, 1)', - id: 'S:608470870204c2776675f5d5745fc81ae3136466,' - }, - { - name: 'coralColorNeutralBackgroundStrong', - type: 'color', - description: ``, - hsla: 'hsla(208, 18%, 14%, 1)', - hex: '#1d242a', - value: 'hsla(208, 18%, 14%, 1)', - id: 'S:1ab9d51f56f73bcdf1669ac742476f4153bc4081,' - }, - { - name: 'coralColorNeutralBorder', - type: 'color', - description: ``, - hsla: 'hsla(206, 17%, 82%, 1)', - hex: '#c9d2d9', - value: 'hsla(206, 17%, 82%, 1)', - id: 'S:6bf9d120b89396822b4ef521cd8835a00af20a67,' - }, - { - name: 'coralColorNeutralBorderWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 34%, 1)', - hex: '#475866', - value: 'hsla(207, 18%, 34%, 1)', - id: 'S:4cad0f16d923abe960465c5632c01d0c583cf1b1,' - }, - { - name: 'coralColorNeutralBorderWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 44%, 1)', - hex: '#5c7284', - value: 'hsla(207, 18%, 44%, 1)', - id: 'S:21009d87761d33a94890fa531c68a1a2b844a4e9,' - }, - { - name: 'coralColorNeutralBorderDisabled', - type: 'color', - description: ``, - hsla: 'hsla(208, 11%, 35%, 1)', - hex: '#505a63', - value: 'hsla(208, 11%, 35%, 1)', - id: 'S:7f7f778874b7664a5544e2bfb2dc3eeb6541764c,' - }, - { - name: 'coralColorAccentText', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 65%, 1)', - hex: '#66bfe6', - value: 'hsla(198, 72%, 65%, 1)', - id: 'S:08cc47c47088d53c52531343029ad926dc510f9a,' - }, - { - name: 'coralColorAccentTextHover', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 55%, 1)', - hex: '#3aaddf', - value: 'hsla(198, 72%, 55%, 1)', - id: 'S:cb35f0ed6b95b863d8ab60b2094ec97f540d4b57,' - }, - { - name: 'coralColorAccentTextActive', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 45%, 1)', - hex: '#2093c5', - value: 'hsla(198, 72%, 45%, 1)', - id: 'S:25709adb7388e4e36887f4e186ed83363ccfdab2,' - }, - { - name: 'coralColorAccentTextWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:d7d4b99d4b04146e8756a987ed5829affe0ecb3e,' - }, - { - name: 'coralColorAccentTextWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(199, 71%, 15%, 1)', - hex: '#0b3142', - value: 'hsla(199, 71%, 15%, 1)', - id: 'S:aba0eb56f534ab5d12de536fac73fc502b102a8e,' - }, - { - name: 'coralColorAccentTextWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(199, 73%, 10%, 1)', - hex: '#07202c', - value: 'hsla(199, 73%, 10%, 1)', - id: 'S:dc054ee71c9ba3d9c308762bd2a498dec7c66cf0,' - }, - { - name: 'coralColorAccentTextStrong', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 75%, 1)', - hex: '#91d1ed', - value: 'hsla(198, 72%, 75%, 1)', - id: 'S:6859abb1d07943abbfc8d9aa3df44b8c9fdf1f3e,' - }, - { - name: 'coralColorAccentTextStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 65%, 1)', - hex: '#66bfe6', - value: 'hsla(198, 72%, 65%, 1)', - id: 'S:d7afea39d1cbc3b2eff9428c58ac8b080f9881d3,' - }, - { - name: 'coralColorAccentTextStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 55%, 1)', - hex: '#3aaddf', - value: 'hsla(198, 72%, 55%, 1)', - id: 'S:e56ee16357f44629bccdcdcacab8dae6387e9933,' - }, - { - name: 'coralColorAccentBackground', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 25%, 1)', - hex: '#12516d', - value: 'hsla(198, 72%, 25%, 1)', - id: 'S:d0bc41ad3ff985739cc159963538d13d49b68d3e,' - }, - { - name: 'coralColorAccentBackgroundHover', - type: 'color', - description: ``, - hsla: 'hsla(199, 78%, 20%, 1)', - hex: '#0b425b', - value: 'hsla(199, 78%, 20%, 1)', - id: 'S:d207ec73a23f1ed631122c5586e13266a8445538,' - }, - { - name: 'coralColorAccentBackgroundActive', - type: 'color', - description: ``, - hsla: 'hsla(199, 73%, 10%, 1)', - hex: '#07202c', - value: 'hsla(199, 73%, 10%, 1)', - id: 'S:6417c23a879b7dbfd822c317ac052bac965cc359,' - }, - { - name: 'coralColorAccentBackgroundWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:90cc9c9957316ceecd890fdd0e2d522611937f8f,' - }, - { - name: 'coralColorAccentBackgroundWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(199, 71%, 15%, 1)', - hex: '#0b3142', - value: 'hsla(199, 71%, 15%, 1)', - id: 'S:e2831e1903246c2edf0fc8c5923cd3da3a9f1689,' - }, - { - name: 'coralColorAccentBackgroundWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(199, 73%, 10%, 1)', - hex: '#07202c', - value: 'hsla(199, 73%, 10%, 1)', - id: 'S:fa263d6acd99cc673c83d414bbe7f7edb790950f,' - }, - { - name: 'coralColorAccentBackgroundStrong', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 75%, 1)', - hex: '#91d1ed', - value: 'hsla(198, 72%, 75%, 1)', - id: 'S:b5b4e2fdc443b96425a226e8fb6e9c48a0274ba5,' - }, - { - name: 'coralColorAccentBackgroundStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 65%, 1)', - hex: '#66bfe6', - value: 'hsla(198, 72%, 65%, 1)', - id: 'S:d63101a73ff03405385f907600450a8ce06960be,' - }, - { - name: 'coralColorAccentBackgroundStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 55%, 1)', - hex: '#3aaddf', - value: 'hsla(198, 72%, 55%, 1)', - id: 'S:96cf73d9f20b39a9d95916fcb05cddee14924948,' - }, - { - name: 'coralColorAccentBorder', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 75%, 1)', - hex: '#91d1ed', - value: 'hsla(198, 72%, 75%, 1)', - id: 'S:774e5e42c3eea5b3365ec43a61207f077866b031,' - }, - { - name: 'coralColorAccentBorderHover', - type: 'color', - description: ``, - hsla: 'hsla(198, 72%, 65%, 1)', - hex: '#66bfe6', - value: 'hsla(198, 72%, 65%, 1)', - id: 'S:851b249f5bcea2d55cbe21f82081cbe6f5c3e43a,' - }, - { - name: 'coralColorAccentBorderActive', - type: 'color', - description: ``, - hsla: 'hsla(199, 72%, 55%, 1)', - hex: '#3aacdf', - value: 'hsla(199, 72%, 55%, 1)', - id: 'S:d6f90237a2053850f92758d916244747eedbe2ff,' - }, - { - name: 'coralColorDangerText', - type: 'color', - description: ``, - hsla: 'hsla(2, 95%, 74%, 1)', - hex: '#fc827e', - value: 'hsla(2, 95%, 74%, 1)', - id: 'S:5b9635ad4f2e4ee60dee9881a5f465e9dac2de12,' - }, - { - name: 'coralColorDangerTextHover', - type: 'color', - description: ``, - hsla: 'hsla(2, 95%, 69%, 1)', - hex: '#fb6964', - value: 'hsla(2, 95%, 69%, 1)', - id: 'S:cd14f48a94af225223a3bd795c6c1b08552a3638,' - }, - { - name: 'coralColorDangerTextActive', - type: 'color', - description: ``, - hsla: 'hsla(2, 96%, 64%, 1)', - hex: '#fb514c', - value: 'hsla(2, 96%, 64%, 1)', - id: 'S:d5a4ccb7904bb51f3737379e8b1963bd1b5ce1f1,' - }, - { - name: 'coralColorDangerTextWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:262b86066bc2a1bd3392903a4fa89219f54de1e5,' - }, - { - name: 'coralColorDangerTextWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(358, 96%, 18%, 1)', - hex: '#590205', - value: 'hsla(358, 96%, 18%, 1)', - id: 'S:8cc42ad3d76e34a7e82a06c02e212315af6205d5,' - }, - { - name: 'coralColorDangerTextWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(357, 97%, 13%, 1)', - hex: '#410104', - value: 'hsla(357, 97%, 13%, 1)', - id: 'S:dff099effde644c9686227fead9ec34d060fed6b,' - }, - { - name: 'coralColorDangerTextStrong', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 78%, 1)', - hex: '#ff8f91', - value: 'hsla(359, 100%, 78%, 1)', - id: 'S:4a03b0a2376fe5b4b5d7a518cbe228a106e2509c,' - }, - { - name: 'coralColorDangerTextStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 73%, 1)', - hex: '#ff7578', - value: 'hsla(359, 100%, 73%, 1)', - id: 'S:482fe4c679a7df1ea0bab272ea9981626bf29954,' - }, - { - name: 'coralColorDangerTextStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 68%, 1)', - hex: '#ff5c5f', - value: 'hsla(359, 100%, 68%, 1)', - id: 'S:1c90229b88a04809e5aafe15040a2a4a2ff0014b,' - }, - { - name: 'coralColorDangerBackground', - type: 'color', - description: ``, - hsla: 'hsla(358, 96%, 18%, 1)', - hex: '#590205', - value: 'hsla(358, 96%, 18%, 1)', - id: 'S:30752ec1928f789f0cdae58ef69ce17eba4f5d14,' - }, - { - name: 'coralColorDangerBackgroundHover', - type: 'color', - description: ``, - hsla: 'hsla(357, 97%, 13%, 1)', - hex: '#410104', - value: 'hsla(357, 97%, 13%, 1)', - id: 'S:5d28e3bfceaffdcb7eed504fd2a61881346db2ab,' - }, - { - name: 'coralColorDangerBackgroundActive', - type: 'color', - description: ``, - hsla: 'hsla(358, 95%, 8%, 1)', - hex: '#280102', - value: 'hsla(358, 95%, 8%, 1)', - id: 'S:28091ca1f7f258e3747e85bef0fd785b7993c41b,' - }, - { - name: 'coralColorDangerBackgroundWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:3aac206c50736c0b809b2ce622eda1614e2c390a,' - }, - { - name: 'coralColorDangerBackgroundWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(358, 96%, 18%, 1)', - hex: '#590205', - value: 'hsla(358, 96%, 18%, 1)', - id: 'S:59e6211c6964e6d40a75e79c3cbd7a641983287e,' - }, - { - name: 'coralColorDangerBackgroundWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(357, 97%, 13%, 1)', - hex: '#410104', - value: 'hsla(357, 97%, 13%, 1)', - id: 'S:cf173dbfeb69ff1be2c2979b7dd24ea59eeaee95,' - }, - { - name: 'coralColorDangerBackgroundStrong', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 78%, 1)', - hex: '#ff8f91', - value: 'hsla(359, 100%, 78%, 1)', - id: 'S:7951ddfe01c38d9291184437ad1ce6f3e4f421f6,' - }, - { - name: 'coralColorDangerBackgroundStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 73%, 1)', - hex: '#ff7578', - value: 'hsla(359, 100%, 73%, 1)', - id: 'S:d778c6465e775ecabe4636a6c3ace83f16da03bb,' - }, - { - name: 'coralColorDangerBackgroundStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 68%, 1)', - hex: '#ff5c5f', - value: 'hsla(359, 100%, 68%, 1)', - id: 'S:efe81f0518b0281e48adcabe71640a0feb6f47de,' - }, - { - name: 'coralColorDangerBorder', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 78%, 1)', - hex: '#ff8f91', - value: 'hsla(359, 100%, 78%, 1)', - id: 'S:0cec2ca3a831fbc28fd9a065f38c4844d9b9c153,' - }, - { - name: 'coralColorDangerBorderHover', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 73%, 1)', - hex: '#ff7578', - value: 'hsla(359, 100%, 73%, 1)', - id: 'S:8693225af66ed3a86bab3985fe0ba6f3b9ce5f20,' - }, - { - name: 'coralColorDangerBorderActive', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 68%, 1)', - hex: '#ff5c5f', - value: 'hsla(359, 100%, 68%, 1)', - id: 'S:b27aec96b54b0e2fd3dabd0127812d3821c3b3a6,' - }, - { - name: 'coralColorSuccessText', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 60%, 1)', - hex: '#77cc66', - value: 'hsla(110, 50%, 60%, 1)', - id: 'S:ddc24cf38b47116105cdbdde83e916a6e88191f6,' - }, - { - name: 'coralColorSuccessTextHover', - type: 'color', - description: ``, - hsla: 'hsla(110, 45%, 50%, 1)', - hex: '#59b946', - value: 'hsla(110, 45%, 50%, 1)', - id: 'S:afc5e78d6b0188edc09b91af776a861ca87bd15a,' - }, - { - name: 'coralColorSuccessTextActive', - type: 'color', - description: ``, - hsla: 'hsla(110, 45%, 40%, 1)', - hex: '#479438', - value: 'hsla(110, 45%, 40%, 1)', - id: 'S:3e16d2a4a600780f62ef6e619d79f01110ffac52,' - }, - { - name: 'coralColorSuccessTextWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:2207e6ca2ae20e6ccf66df42a0747dc886fc64cd,' - }, - { - name: 'coralColorSuccessTextWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(109, 50%, 20%, 1)', - hex: '#224c19', - value: 'hsla(109, 50%, 20%, 1)', - id: 'S:f053a69fac1c95dc1fa240a5e358fb13d1441df0,' - }, - { - name: 'coralColorSuccessTextWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(109, 51%, 15%, 1)', - hex: '#1a3a13', - value: 'hsla(109, 51%, 15%, 1)', - id: 'S:4eaa477af134fb81a339c90fca411f546c823186,' - }, - { - name: 'coralColorSuccessTextStrong', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 70%, 1)', - hex: '#99d98c', - value: 'hsla(110, 50%, 70%, 1)', - id: 'S:4bb64d21d4806350f9bb8c7648bf54ca8b778336,' - }, - { - name: 'coralColorSuccessTextStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 60%, 1)', - hex: '#77cc66', - value: 'hsla(110, 50%, 60%, 1)', - id: 'S:08280353077826711ef7e299b5b78d52244e69f4,' - }, - { - name: 'coralColorSuccessTextStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 50%, 1)', - hex: '#55bf40', - value: 'hsla(110, 50%, 50%, 1)', - id: 'S:ef7aa00f229b0d521e9ad9fd67fff4adf9632a5f,' - }, - { - name: 'coralColorSuccessBackground', - type: 'color', - description: ``, - hsla: 'hsla(109, 50%, 20%, 1)', - hex: '#224c19', - value: 'hsla(109, 50%, 20%, 1)', - id: 'S:c0f06ce2d8287de9df9faec5f1bee0fb2239970b,' - }, - { - name: 'coralColorSuccessBackgroundHover', - type: 'color', - description: ``, - hsla: 'hsla(109, 51%, 15%, 1)', - hex: '#1a3a13', - value: 'hsla(109, 51%, 15%, 1)', - id: 'S:87355975e174a30e50368b9810808dce64711190,' - }, - { - name: 'coralColorSuccessBackgroundActive', - type: 'color', - description: ``, - hsla: 'hsla(110, 49%, 10%, 1)', - hex: '#11260d', - value: 'hsla(110, 49%, 10%, 1)', - id: 'S:8ee02349b9dddba7739fb10be04bc72fe0767f29,' - }, - { - name: 'coralColorSuccessBackgroundWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:990829d6c422d85d4ef6d244ea63143d54b0e270,' - }, - { - name: 'coralColorSuccessBackgroundWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(109, 50%, 20%, 1)', - hex: '#224c19', - value: 'hsla(109, 50%, 20%, 1)', - id: 'S:2c9006c27dab2aa4eb3fee3b4da90acc2d010e79,' - }, - { - name: 'coralColorSuccessBackgroundWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(109, 51%, 15%, 1)', - hex: '#1a3a13', - value: 'hsla(109, 51%, 15%, 1)', - id: 'S:496d934784ba9739f504e57450048c6dd5a98f85,' - }, - { - name: 'coralColorSuccessBackgroundStrong', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 70%, 1)', - hex: '#99d98c', - value: 'hsla(110, 50%, 70%, 1)', - id: 'S:caab7cb7fd3ef273fb588427f064bb6cdb1f301c,' - }, - { - name: 'coralColorSuccessBackgroundStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 60%, 1)', - hex: '#77cc66', - value: 'hsla(110, 50%, 60%, 1)', - id: 'S:46b7fdb7686322364dc0ffb4f642c7ab1a6b01c2,' - }, - { - name: 'coralColorSuccessBackgroundStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 50%, 1)', - hex: '#55bf40', - value: 'hsla(110, 50%, 50%, 1)', - id: 'S:0b2c05a33bc22a49e5838779a45b5a1d40d75c76,' - }, - { - name: 'coralColorSuccessBorder', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 70%, 1)', - hex: '#99d98c', - value: 'hsla(110, 50%, 70%, 1)', - id: 'S:41f3cf4696b9214ee67657de66222c9bc1473ddf,' - }, - { - name: 'coralColorSuccessBorderHover', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 60%, 1)', - hex: '#77cc66', - value: 'hsla(110, 50%, 60%, 1)', - id: 'S:65ba39beb6bb171796560228fbdf7d0e755a6f81,' - }, - { - name: 'coralColorSuccessBorderActive', - type: 'color', - description: ``, - hsla: 'hsla(110, 50%, 50%, 1)', - hex: '#55bf40', - value: 'hsla(110, 50%, 50%, 1)', - id: 'S:8a4ea54bac2ed4c8774f5053161ff60c25903537,' - }, - { - name: 'coralColorWarningText', - type: 'color', - description: ``, - hsla: 'hsla(27, 97%, 57%, 1)', - hex: '#fc8727', - value: 'hsla(27, 97%, 57%, 1)', - id: 'S:16027484efef3f9d9e75cdbcc7d28420ce0a322c,' - }, - { - name: 'coralColorWarningTextHover', - type: 'color', - description: ``, - hsla: 'hsla(27, 97%, 47%, 1)', - hex: '#ec6c03', - value: 'hsla(27, 97%, 47%, 1)', - id: 'S:7610f674bcb4286e88dc19c597fbef3927d806a9,' - }, - { - name: 'coralColorWarningTextActive', - type: 'color', - description: ``, - hsla: 'hsla(27, 97%, 37%, 1)', - hex: '#ba5503', - value: 'hsla(27, 97%, 37%, 1)', - id: 'S:e16312eb45e61db89e72b655be0026dd92d5d4c7,' - }, - { - name: 'coralColorWarningTextWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:26a1a656869cfda9e0da9790a8ae579ed538a74c,' - }, - { - name: 'coralColorWarningTextWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(22, 84%, 20%, 1)', - hex: '#5e2808', - value: 'hsla(22, 84%, 20%, 1)', - id: 'S:9e653f60207acf7fd4fe7b21a18b5fbcd9f19856,' - }, - { - name: 'coralColorWarningTextWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(23, 84%, 15%, 1)', - hex: '#461e06', - value: 'hsla(23, 84%, 15%, 1)', - id: 'S:3e429b2bad134796e748d9639c4690161cde60ea,' - }, - { - name: 'coralColorWarningTextStrong', - type: 'color', - description: ``, - hsla: 'hsla(27, 98%, 67%, 1)', - hex: '#fda359', - value: 'hsla(27, 98%, 67%, 1)', - id: 'S:a2e0dc891484bf912ec383de90e726821e3dc002,' - }, - { - name: 'coralColorWarningTextStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(27, 97%, 57%, 1)', - hex: '#fc8726', - value: 'hsla(27, 97%, 57%, 1)', - id: 'S:2583276100160b22daf298171af37e9774ae6681,' - }, - { - name: 'coralColorWarningTextStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(27, 98%, 47%, 1)', - hex: '#ed6c03', - value: 'hsla(27, 98%, 47%, 1)', - id: 'S:b78bea54c885ecc8465bdcd3b2fbabe63d85e5a5,' - }, - { - name: 'coralColorWarningBackground', - type: 'color', - description: ``, - hsla: 'hsla(22, 84%, 20%, 1)', - hex: '#5e2808', - value: 'hsla(22, 84%, 20%, 1)', - id: 'S:8ece51a0dfa9d134906a5e31bf75989cdf39bbab,' - }, - { - name: 'coralColorWarningBackgroundHover', - type: 'color', - description: ``, - hsla: 'hsla(22, 84%, 15%, 1)', - hex: '#471e06', - value: 'hsla(22, 84%, 15%, 1)', - id: 'S:fe246dabb565c77eb07dbf4346bc565b5684d3de,' - }, - { - name: 'coralColorWarningBackgroundActive', - type: 'color', - description: ``, - hsla: 'hsla(22, 84%, 10%, 1)', - hex: '#2f1404', - value: 'hsla(22, 84%, 10%, 1)', - id: 'S:4daa31745b723bc4edec0700f40b2313aeeb602e,' - }, - { - name: 'coralColorWarningBackgroundWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:503dcdd815de63f67e968186311f4571a06516e8,' - }, - { - name: 'coralColorWarningBackgroundWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(22, 84%, 20%, 1)', - hex: '#5e2808', - value: 'hsla(22, 84%, 20%, 1)', - id: 'S:a2ac0699848d6414310a07d8ca6d9e0baca0b974,' - }, - { - name: 'coralColorWarningBackgroundWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(23, 84%, 15%, 1)', - hex: '#461e06', - value: 'hsla(23, 84%, 15%, 1)', - id: 'S:1783820c5bd551fb4f2a92b2fa48e3eb10b0d6c1,' - }, - { - name: 'coralColorWarningBackgroundStrong', - type: 'color', - description: ``, - hsla: 'hsla(27, 98%, 67%, 1)', - hex: '#fda359', - value: 'hsla(27, 98%, 67%, 1)', - id: 'S:690a5fe2838c1fc9561bca63efa47b989dfb014d,' - }, - { - name: 'coralColorWarningBackgroundStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(27, 97%, 57%, 1)', - hex: '#fc8726', - value: 'hsla(27, 97%, 57%, 1)', - id: 'S:719efa488a12d4c1fe27c69be12cf88d9fb50170,' - }, - { - name: 'coralColorWarningBackgroundStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(27, 98%, 47%, 1)', - hex: '#ed6c03', - value: 'hsla(27, 98%, 47%, 1)', - id: 'S:c2f433c1cb7d81090205f58a9681988fde520fdf,' - }, - { - name: 'coralColorWarningBorder', - type: 'color', - description: ``, - hsla: 'hsla(27, 98%, 67%, 1)', - hex: '#fda359', - value: 'hsla(27, 98%, 67%, 1)', - id: 'S:f51e9dc45e26cdd9230760ef5b2ae40fe0559843,' - }, - { - name: 'coralColorWarningBorderHover', - type: 'color', - description: ``, - hsla: 'hsla(27, 97%, 57%, 1)', - hex: '#fc8726', - value: 'hsla(27, 97%, 57%, 1)', - id: 'S:a6b63647daef2a00a3b2f13d7bc355e183bc6445,' - }, - { - name: 'coralColorWarningBorderActive', - type: 'color', - description: ``, - hsla: 'hsla(27, 98%, 47%, 1)', - hex: '#ed6c03', - value: 'hsla(27, 98%, 47%, 1)', - id: 'S:1dafbe51ed80a7f2c9939ea49bb062a2e0380e4c,' - }, - { - name: 'coralColorAssistiveBackground', - type: 'color', - description: ``, - hsla: 'hsla(208, 20%, 83%, 1)', - hex: '#ccd5dd', - value: 'hsla(208, 20%, 83%, 1)', - id: 'S:2c2c18f8f6baff8d9055995a8f6179e4d7c828f7,' - }, - { - name: 'coralColorAssistiveText', - type: 'color', - description: ``, - hsla: 'hsla(208, 18%, 14%, 1)', - hex: '#1d242a', - value: 'hsla(208, 18%, 14%, 1)', - id: 'S:4a279ca6a60e96f9e6497beef63c1e09d834e3f3,' - }, - { - name: 'coralColorAssistiveBorder', - type: 'color', - description: ``, - hsla: 'hsla(208, 20%, 63%, 1)', - hex: '#8ea2b4', - value: 'hsla(208, 20%, 63%, 1)', - id: 'S:4339e41773e974fd338ff75e87112f16f3a250de,' - }, - { - name: 'coralColorAssistiveBorderFocus', - type: 'color', - description: ``, - hsla: 'hsla(256, 66%, 76%, 1)', - hex: '#af9aea', - value: 'hsla(256, 66%, 76%, 1)', - id: 'S:621e143a2844d1f22688e443488456f2537855f7,' - }, - { - name: 'coralColorBrandingBrand', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 71%, 1)', - hex: '#ff6d70', - value: 'hsla(359, 100%, 71%, 1)', - id: 'S:a63d2ce05b0960d899aada51ec3b1a3a25c29cd4,' - }, - { - name: 'coralColorNeutralBorderHover', - type: 'color', - description: ``, - hsla: 'hsla(206, 17%, 92%, 1)', - hex: '#e7ebee', - value: 'hsla(206, 17%, 92%, 1)', - id: 'S:98967449e63946677235590ad8acd3b5700468aa,' - }, - { - name: 'coralColorBetaText', - type: 'color', - description: ``, - hsla: 'hsla(280, 44%, 72%, 1)', - hex: '#c299d7', - value: 'hsla(280, 44%, 72%, 1)', - id: 'S:b948bdc96136c3f6b38375a4b912e9ce5134bf05,' - }, - { - name: 'coralColorBetaTextHover', - type: 'color', - description: ``, - hsla: 'hsla(280, 43%, 62%, 1)', - hex: '#ac74c8', - value: 'hsla(280, 43%, 62%, 1)', - id: 'S:bcf2508c6278f94fa3686fe01c981c47c9b65b9d,' - }, - { - name: 'coralColorBetaTextActive', - type: 'color', - description: ``, - hsla: 'hsla(280, 44%, 52%, 1)', - hex: '#974fba', - value: 'hsla(280, 44%, 52%, 1)', - id: 'S:4f1a6e2da5a044f3bb69749ebefe4c3925541876,' - }, - { - name: 'coralColorBetaIcon', - type: 'color', - description: ``, - hsla: 'hsla(280, 68%, 61%, 1)', - hex: '#b258df', - value: 'hsla(280, 68%, 61%, 1)', - id: 'S:defe72bbfa67005e161dc6f946d8906858d8ea88,' - }, - { - name: 'coralColorBetaIconHover', - type: 'color', - description: ``, - hsla: 'hsla(280, 68%, 51%, 1)', - hex: '#9e2dd7', - value: 'hsla(280, 68%, 51%, 1)', - id: 'S:95185feb45d5644ea910487a4eea77456beb3a9a,' - }, - { - name: 'coralColorBetaIconActive', - type: 'color', - description: ``, - hsla: 'hsla(280, 67%, 41%, 1)', - hex: '#8022af', - value: 'hsla(280, 67%, 41%, 1)', - id: 'S:3d531b2e194ad4e0a4fd3dea5e4577178b1a3b46,' - }, - { - name: 'coralColorBetaTextWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:9050183d33129b35a164a22e99290643248f24f4,' - }, - { - name: 'coralColorBetaTextWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(281, 65%, 24%, 1)', - hex: '#4d1666', - value: 'hsla(281, 65%, 24%, 1)', - id: 'S:f474060639634c5ebf098da1a63271693103d8d2,' - }, - { - name: 'coralColorBetaTextWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(280, 64%, 14%, 1)', - hex: '#2c0d3b', - value: 'hsla(280, 64%, 14%, 1)', - id: 'S:8025b590b94570cd48c1d7004b7b04746098c6a0,' - }, - { - name: 'coralColorBetaTextStrong', - type: 'color', - description: ``, - hsla: 'hsla(279, 34%, 78%, 1)', - hex: '#cdb4da', - value: 'hsla(279, 34%, 78%, 1)', - id: 'S:50c309d492c16c903c26b15a3b7e62780f15095d,' - }, - { - name: 'coralColorBetaTextStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(279, 34%, 68%, 1)', - hex: '#b692c9', - value: 'hsla(279, 34%, 68%, 1)', - id: 'S:9be5f28883b389866ba4c1a1549131ba23daf88a,' - }, - { - name: 'coralColorBetaTextStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(280, 34%, 48%, 1)', - hex: '#8851a4', - value: 'hsla(280, 34%, 48%, 1)', - id: 'S:14684ec034fca592e35fac3b01b4651f479c8816,' - }, - { - name: 'coralColorBetaBackground', - type: 'color', - description: ``, - hsla: 'hsla(281, 65%, 24%, 1)', - hex: '#4d1666', - value: 'hsla(281, 65%, 24%, 1)', - id: 'S:76b6f1eda003d080b8c65f75c5ca84d07a828766,' - }, - { - name: 'coralColorBetaBackgroundHover', - type: 'color', - description: ``, - hsla: 'hsla(280, 64%, 14%, 1)', - hex: '#2c0d3b', - value: 'hsla(280, 64%, 14%, 1)', - id: 'S:47ca987054b92e001c13068c1b18aad101d121ea,' - }, - { - name: 'coralColorBetaBackgroundActive', - type: 'color', - description: ``, - hsla: 'hsla(277, 62%, 4%, 1)', - hex: '#0c0411', - value: 'hsla(277, 62%, 4%, 1)', - id: 'S:f161284ccf3e2d852e678cd9d22f9d35d92378e3,' - }, - { - name: 'coralColorBetaBackgroundWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 18%, 24%, 1)', - hex: '#323e48', - value: 'hsla(207, 18%, 24%, 1)', - id: 'S:d12a6c9704d384c9e3c427b24731463361a6226c,' - }, - { - name: 'coralColorBetaBackgroundWeakHover', - type: 'color', - description: ``, - hsla: 'hsla(281, 65%, 24%, 1)', - hex: '#4d1666', - value: 'hsla(281, 65%, 24%, 1)', - id: 'S:990df853093263f6b7631d5fcfae2641a5841687,' - }, - { - name: 'coralColorBetaBackgroundWeakActive', - type: 'color', - description: ``, - hsla: 'hsla(280, 64%, 14%, 1)', - hex: '#2c0d3b', - value: 'hsla(280, 64%, 14%, 1)', - id: 'S:81938abf28b8a9e267b12f51ddc2dc896f1a0129,' - }, - { - name: 'coralColorBetaBackgroundStrong', - type: 'color', - description: ``, - hsla: 'hsla(279, 34%, 78%, 1)', - hex: '#cdb4da', - value: 'hsla(279, 34%, 78%, 1)', - id: 'S:fff57956fe2ef00037830bfacbb0b2dd14de5f7a,' - }, - { - name: 'coralColorBetaBackgroundStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(279, 34%, 68%, 1)', - hex: '#b692c9', - value: 'hsla(279, 34%, 68%, 1)', - id: 'S:dd2ba9092ed88e93f12c4a8f799cedb06ae7c6fc,' - }, - { - name: 'coralColorBetaBackgroundStrongActive', - type: 'color', - description: ``, - hsla: 'hsla(279, 34%, 48%, 1)', - hex: '#8751a4', - value: 'hsla(279, 34%, 48%, 1)', - id: 'S:79aa01dc99d8a54619b2ac9c3a5e53d3ed0842da,' - }, - { - name: 'coralColorBetaBorder', - type: 'color', - description: ``, - hsla: 'hsla(279, 34%, 78%, 1)', - hex: '#cdb4da', - value: 'hsla(279, 34%, 78%, 1)', - id: 'S:6dafe8de2afdf691eb9e2c9fd891604168ce4811,' - }, - { - name: 'coralColorBetaBorderHover', - type: 'color', - description: ``, - hsla: 'hsla(279, 34%, 68%, 1)', - hex: '#b692c9', - value: 'hsla(279, 34%, 68%, 1)', - id: 'S:26f9bcc36e2de268604aca546c255dd666a72951,' - }, - { - name: 'coralColorBetaBorderActive', - type: 'color', - description: ``, - hsla: 'hsla(279, 34%, 48%, 1)', - hex: '#8751a4', - value: 'hsla(279, 34%, 48%, 1)', - id: 'S:446e25f7ed2d99158809e43c5e70771fb904cdb4,' - }, - { - name: 'coralColorAccentIcon', - type: 'color', - description: ``, - hsla: 'hsla(198, 76%, 67%, 1)', - hex: '#69c4eb', - value: 'hsla(198, 76%, 67%, 1)', - id: 'S:0a511b6c26174e70fa690557e04392239f185fba,' - }, - { - name: 'coralColorAccentIconHover', - type: 'color', - description: ``, - hsla: 'hsla(198, 76%, 57%, 1)', - hex: '#3eb2e5', - value: 'hsla(198, 76%, 57%, 1)', - id: 'S:4c354076f65713ad230f2917b5ceaff14732a33e,' - }, - { - name: 'coralColorAccentIconActive', - type: 'color', - description: ``, - hsla: 'hsla(198, 77%, 47%, 1)', - hex: '#1c9bd3', - value: 'hsla(198, 77%, 47%, 1)', - id: 'S:313a92a79ede7488535525a7babefa5f6ca6a08f,' - }, - { - name: 'coralColorDangerIcon', - type: 'color', - description: ``, - hsla: 'hsla(2, 96%, 67%, 1)', - hex: '#fc5d58', - value: 'hsla(2, 96%, 67%, 1)', - id: 'S:0a53ae71956e65051b401603352731ff7c307cc8,' - }, - { - name: 'coralColorDangerIconHover', - type: 'color', - description: ``, - hsla: 'hsla(2, 96%, 57%, 1)', - hex: '#fb2f28', - value: 'hsla(2, 96%, 57%, 1)', - id: 'S:84635db99dad36ac4176917f9f06853ad77e7128,' - }, - { - name: 'coralColorDangerIconActive', - type: 'color', - description: ``, - hsla: 'hsla(2, 97%, 47%, 1)', - hex: '#eb0c04', - value: 'hsla(2, 97%, 47%, 1)', - id: 'S:a264361d3eee07a1fb417fa991479b91baf5badf,' - }, - { - name: 'coralColorSuccessIconActive', - type: 'color', - description: ``, - hsla: 'hsla(110, 61%, 36%, 1)', - hex: '#369424', - value: 'hsla(110, 61%, 36%, 1)', - id: 'S:712126970bb11c2b0eee24e4d2f7a14974a73614,' - }, - { - name: 'coralColorSuccessIconHover', - type: 'color', - description: ``, - hsla: 'hsla(110, 62%, 46%, 1)', - hex: '#45bd2d', - value: 'hsla(110, 62%, 46%, 1)', - id: 'S:5bf9f5e0c27fe5a6b99fbe623d9c44441ba092e4,' - }, - { - name: 'coralColorSuccessIcon', - type: 'color', - description: ``, - hsla: 'hsla(110, 61%, 56%, 1)', - hex: '#62d44b', - value: 'hsla(110, 61%, 56%, 1)', - id: 'S:2846c4b1447ee8cd3c62bda922faacfa92ebe354,' - }, - { - name: 'coralColorWarningIconActive', - type: 'color', - description: ``, - hsla: 'hsla(27, 98%, 19%, 1)', - hex: '#602c01', - value: 'hsla(27, 98%, 19%, 1)', - id: 'S:df78eadc193fc0af351fbcdf92fb5191cee83015,' - }, - { - name: 'coralColorWarningIconHover', - type: 'color', - description: ``, - hsla: 'hsla(27, 99%, 29%, 1)', - hex: '#934301', - value: 'hsla(27, 99%, 29%, 1)', - id: 'S:b76056223e9150e85641eacc579c8eb270dd27e2,' - }, - { - name: 'coralColorWarningIcon', - type: 'color', - description: ``, - hsla: 'hsla(27, 99%, 49%, 1)', - hex: '#f87001', - value: 'hsla(27, 99%, 49%, 1)', - id: 'S:eeb2b3b50b34a139f61b90c7d250dde2941fb805,' - }, - { - name: 'coralColorChartsNeutral', - type: 'color', - description: ``, - hsla: 'hsla(0, 0%, 75%, 1)', - hex: '#bebebe', - value: 'hsla(0, 0%, 75%, 1)', - id: 'S:3286222654ca1fa189b4f6d23ef6444b269c7eb4,' - }, - { - name: 'coralColorChartsNeutralWeak', - type: 'color', - description: ``, - hsla: 'hsla(206, 10%, 48%, 1)', - hex: '#6e7c87', - value: 'hsla(206, 10%, 48%, 1)', - id: 'S:41b6028767eb8edd4748bf68f3faf58540b22964,' - }, - { - name: 'coralColorChartsNeutralStrong', - type: 'color', - description: ``, - hsla: 'hsla(0, 0%, 88%, 1)', - hex: '#e0e0e0', - value: 'hsla(0, 0%, 88%, 1)', - id: 'S:2d4a8333d042992c165cdf64f4a902843777a48f,' - }, - { - name: 'coralColorChartsNeutralHover', - type: 'color', - description: ``, - hsla: 'hsla(0, 0%, 88%, 1)', - hex: '#e0e0e0', - value: 'hsla(0, 0%, 88%, 1)', - id: 'S:7b8e676d8686f34954848519062ec0bb5e5f1b83,' - }, - { - name: 'coralColorChartsSuccess', - type: 'color', - description: ``, - hsla: 'hsla(148, 87%, 40%, 1)', - hex: '#0dbd5e', - value: 'hsla(148, 87%, 40%, 1)', - id: 'S:3a91f690ea607ab3aef56e74cf8dddc57ab0bc2a,' - }, - { - name: 'coralColorChartsSuccessWeak', - type: 'color', - description: ``, - hsla: 'hsla(130, 52%, 91%, 1)', - hex: '#dcf4e0', - value: 'hsla(130, 52%, 91%, 1)', - id: 'S:223780a9a5f2a5cb182c34ca07f2742a04cb4304,' - }, - { - name: 'coralColorChartsSuccessStrong', - type: 'color', - description: ``, - hsla: 'hsla(139, 50%, 22%, 1)', - hex: '#1c552e', - value: 'hsla(139, 50%, 22%, 1)', - id: 'S:5463753f1a581f81bd8256b71ed7f54214bb6b7a,' - }, - { - name: 'coralColorChartsSuccessHover', - type: 'color', - description: ``, - hsla: 'hsla(139, 50%, 22%, 1)', - hex: '#1c552e', - value: 'hsla(139, 50%, 22%, 1)', - id: 'S:52b9e9b667e956ec97eefa4de49adaa04feb76f2,' - }, - { - name: 'coralColorChartsDanger', - type: 'color', - description: ``, - hsla: 'hsla(4, 89%, 49%, 1)', - hex: '#ea1b0e', - value: 'hsla(4, 89%, 49%, 1)', - id: 'S:8aa39eb7d256925072987a8d3e163188873e9071,' - }, - { - name: 'coralColorChartsDangerWeak', - type: 'color', - description: ``, - hsla: 'hsla(359, 69%, 73%, 1)', - hex: '#e9898a', - value: 'hsla(359, 69%, 73%, 1)', - id: 'S:b84cc981e657d448a9ed95cf85ba87d084797c03,' - }, - { - name: 'coralColorChartsDangerStrong', - type: 'color', - description: ``, - hsla: 'hsla(359, 62%, 43%, 1)', - hex: '#b32a2c', - value: 'hsla(359, 62%, 43%, 1)', - id: 'S:dd0a23f2abf32c4ab2a239ee9c0a07b56c88acd3,' - }, - { - name: 'coralColorChartsDangerHover', - type: 'color', - description: ``, - hsla: 'hsla(359, 62%, 43%, 1)', - hex: '#b32a2c', - value: 'hsla(359, 62%, 43%, 1)', - id: 'S:985f55d1e23f8a03b5037d12f8744d31aa6c2f7d,' - }, - { - name: 'coralColorChartsWarning', - type: 'color', - description: ``, - hsla: 'hsla(32, 100%, 56%, 1)', - hex: '#ff9820', - value: 'hsla(32, 100%, 56%, 1)', - id: 'S:3d666ee4ebbec7f8205c44a4045e006f2c96af57,' - }, - { - name: 'coralColorChartsWarningWeak', - type: 'color', - description: ``, - hsla: 'hsla(22, 88%, 84%, 1)', - hex: '#facbb0', - value: 'hsla(22, 88%, 84%, 1)', - id: 'S:47beb2ff8bf803a898ebfb47d1f14ef7e75f7939,' - }, - { - name: 'coralColorChartsWarningStrong', - type: 'color', - description: ``, - hsla: 'hsla(22, 75%, 42%, 1)', - hex: '#b9541b', - value: 'hsla(22, 75%, 42%, 1)', - id: 'S:427d041b69ecae991aadf370279e07fa91fb651d,' - }, - { - name: 'coralColorChartsWarningHover', - type: 'color', - description: ``, - hsla: 'hsla(22, 75%, 42%, 1)', - hex: '#b9541b', - value: 'hsla(22, 75%, 42%, 1)', - id: 'S:f8ddcb4ad465def3975ac99310865a7bac62f871,' - }, - { - name: 'coralColorChartsDefault', - type: 'color', - description: ``, - hsla: 'hsla(216, 82%, 48%, 1)', - hex: '#1667df', - value: 'hsla(216, 82%, 48%, 1)', - id: 'S:60a1a68446864f3cda20f69892d512f45d257c3e,' - }, - { - name: 'coralColorChartsDefaultWeak', - type: 'color', - description: ``, - hsla: 'hsla(204, 59%, 73%, 1)', - hex: '#91c2e3', - value: 'hsla(204, 59%, 73%, 1)', - id: 'S:40cda1f835eb18ac2dbb9c25e3766a3c4a795470,' - }, - { - name: 'coralColorChartsDefaultStrong', - type: 'color', - description: ``, - hsla: 'hsla(204, 92%, 29%, 1)', - hex: '#06568d', - value: 'hsla(204, 92%, 29%, 1)', - id: 'S:360384632f423ad97b3599a78203948f4d88668c,' - }, - { - name: 'coralColorChartsDefaultHover', - type: 'color', - description: ``, - hsla: 'hsla(204, 92%, 29%, 1)', - hex: '#06568d', - value: 'hsla(204, 92%, 29%, 1)', - id: 'S:10a7a14035bba005a39f0f50879d431cb2ea20b6,' - }, - { - name: 'coralColorChartsColor00', - type: 'color', - description: ``, - hsla: 'hsla(48, 100%, 50%, 1)', - hex: '#ffcc00', - value: 'hsla(48, 100%, 50%, 1)', - id: 'S:6444c98e0c1e7f319436947d28bf99a63e614912,' - }, - { - name: 'coralColorChartsColor00Weak', - type: 'color', - description: ``, - hsla: 'hsla(51, 91%, 82%, 1)', - hex: '#fbefa9', - value: 'hsla(51, 91%, 82%, 1)', - id: 'S:4537a26c9b6ea684a4d29538bfb786b3811000ae,' - }, - { - name: 'coralColorChartsColor00Strong', - type: 'color', - description: ``, - hsla: 'hsla(48, 82%, 45%, 1)', - hex: '#d2ad15', - value: 'hsla(48, 82%, 45%, 1)', - id: 'S:7f9a6149aeb3d7bad9b69304b971eaf65f2a5e00,' - }, - { - name: 'coralColorChartsColor00Hover', - type: 'color', - description: ``, - hsla: 'hsla(48, 82%, 45%, 1)', - hex: '#d2ad15', - value: 'hsla(48, 82%, 45%, 1)', - id: 'S:64444911ef40365ca1cf6a66c7ab9033faaf483d,' - }, - { - name: 'coralColorChartsColor01', - type: 'color', - description: ``, - hsla: 'hsla(216, 82%, 48%, 1)', - hex: '#1667df', - value: 'hsla(216, 82%, 48%, 1)', - id: 'S:0808a61f22964ce3a98da38fed10198b83b4f4d7,' - }, - { - name: 'coralColorChartsColor01Weak', - type: 'color', - description: ``, - hsla: 'hsla(204, 59%, 73%, 1)', - hex: '#91c2e3', - value: 'hsla(204, 59%, 73%, 1)', - id: 'S:b1d02ff88d90d6d40c020511a5f866f9fd7fc8d5,' - }, - { - name: 'coralColorChartsColor01Strong', - type: 'color', - description: ``, - hsla: 'hsla(204, 92%, 29%, 1)', - hex: '#06568d', - value: 'hsla(204, 92%, 29%, 1)', - id: 'S:31acb2e4dc4822b60c188dab643f43a5fe2413a5,' - }, - { - name: 'coralColorChartsColor01Hover', - type: 'color', - description: ``, - hsla: 'hsla(204, 92%, 29%, 1)', - hex: '#06568d', - value: 'hsla(204, 92%, 29%, 1)', - id: 'S:ad2a4cb1a59b1747fd3cd56e8867ec500e7958a7,' - }, - { - name: 'coralColorChartsColor02', - type: 'color', - description: ``, - hsla: 'hsla(194, 92%, 50%, 1)', - hex: '#0abef5', - value: 'hsla(194, 92%, 50%, 1)', - id: 'S:e8c6c0bfb82c701c4ee7a2314d0920cee5a1912a,' - }, - { - name: 'coralColorChartsColor02Weak', - type: 'color', - description: ``, - hsla: 'hsla(194, 91%, 91%, 1)', - hex: '#d2f3fd', - value: 'hsla(194, 91%, 91%, 1)', - id: 'S:d52b809a2b0af6cadd2490dd09b8bab83d2c8623,' - }, - { - name: 'coralColorChartsColor02Strong', - type: 'color', - description: ``, - hsla: 'hsla(194, 93%, 32%, 1)', - hex: '#067b9f', - value: 'hsla(194, 93%, 32%, 1)', - id: 'S:128c8c2ee55669ab88695daaf39aa87f43468058,' - }, - { - name: 'coralColorChartsColor02Hover', - type: 'color', - description: ``, - hsla: 'hsla(194, 93%, 32%, 1)', - hex: '#067b9f', - value: 'hsla(194, 93%, 32%, 1)', - id: 'S:607e8d26b6d1386d63ac448ef541ab132a1ebd93,' - }, - { - name: 'coralColorChartsColor03', - type: 'color', - description: ``, - hsla: 'hsla(140, 39%, 79%, 1)', - hex: '#b3dec1', - value: 'hsla(140, 39%, 79%, 1)', - id: 'S:f997b6392d59d4dff2b95c9c7501decd969f9b2d,' - }, - { - name: 'coralColorChartsColor03Weak', - type: 'color', - description: ``, - hsla: 'hsla(138, 40%, 92%, 1)', - hex: '#e1f2e6', - value: 'hsla(138, 40%, 92%, 1)', - id: 'S:66fe7016f8ffa3f4056cab1a9e790b1ab19f4c3f,' - }, - { - name: 'coralColorChartsColor03Strong', - type: 'color', - description: ``, - hsla: 'hsla(139, 11%, 35%, 1)', - hex: '#506356', - value: 'hsla(139, 11%, 35%, 1)', - id: 'S:566bd60e0980fef9f6fb4c66ca5ec4bf75273eea,' - }, - { - name: 'coralColorChartsColor03Hover', - type: 'color', - description: ``, - hsla: 'hsla(139, 11%, 35%, 1)', - hex: '#506356', - value: 'hsla(139, 11%, 35%, 1)', - id: 'S:827e12c4ea2c3eb405b87a80317edcaeddd9fcd2,' - }, - { - name: 'coralColorChartsColor04', - type: 'color', - description: ``, - hsla: 'hsla(148, 87%, 40%, 1)', - hex: '#0dbd5e', - value: 'hsla(148, 87%, 40%, 1)', - id: 'S:9dd7ece1a4c571a01bf0b20f94a339489e78ee3d,' - }, - { - name: 'coralColorChartsColor04Weak', - type: 'color', - description: ``, - hsla: 'hsla(130, 52%, 91%, 1)', - hex: '#dcf4e0', - value: 'hsla(130, 52%, 91%, 1)', - id: 'S:a2deb1f02d45c65774c398d6cb83d955ca01de76,' - }, - { - name: 'coralColorChartsColor04Strong', - type: 'color', - description: ``, - hsla: 'hsla(139, 50%, 22%, 1)', - hex: '#1c552e', - value: 'hsla(139, 50%, 22%, 1)', - id: 'S:96c0194808536731f972be77edcb091b1342c181,' - }, - { - name: 'coralColorChartsColor04Hover', - type: 'color', - description: ``, - hsla: 'hsla(139, 50%, 22%, 1)', - hex: '#1c552e', - value: 'hsla(139, 50%, 22%, 1)', - id: 'S:2022ae101dbead5faca0847a872f4a13fd65ed2c,' - }, - { - name: 'coralColorChartsColor05', - type: 'color', - description: ``, - hsla: 'hsla(324, 68%, 71%, 1)', - hex: '#e884c0', - value: 'hsla(324, 68%, 71%, 1)', - id: 'S:c4842c962e6ed3bb8cc392ffef69be86fa4c487c,' - }, - { - name: 'coralColorChartsColor05Weak', - type: 'color', - description: ``, - hsla: 'hsla(323, 69%, 95%, 1)', - hex: '#fbe9f4', - value: 'hsla(323, 69%, 95%, 1)', - id: 'S:8898cfa3b0a395430151caaba0953352a6f10a70,' - }, - { - name: 'coralColorChartsColor05Strong', - type: 'color', - description: ``, - hsla: 'hsla(324, 28%, 49%, 1)', - hex: '#a15b85', - value: 'hsla(324, 28%, 49%, 1)', - id: 'S:3be3187416a5ab4f68fbe498bd56435968b7b95e,' - }, - { - name: 'coralColorChartsColor05Hover', - type: 'color', - description: ``, - hsla: 'hsla(324, 28%, 49%, 1)', - hex: '#a15b85', - value: 'hsla(324, 28%, 49%, 1)', - id: 'S:af379e2e5aecaee277a7935b6ebd594fbd7d77f9,' - }, - { - name: 'coralColorChartsColor06', - type: 'color', - description: ``, - hsla: 'hsla(280, 75%, 58%, 1)', - hex: '#b045e5', - value: 'hsla(280, 75%, 58%, 1)', - id: 'S:b28f4af5673ace257313261d28057f2b48e44882,' - }, - { - name: 'coralColorChartsColor06Weak', - type: 'color', - description: ``, - hsla: 'hsla(279, 77%, 88%, 1)', - hex: '#e8caf8', - value: 'hsla(279, 77%, 88%, 1)', - id: 'S:d28944e5d2a0d6513385e36f2d2a29f4c736fd67,' - }, - { - name: 'coralColorChartsColor06Strong', - type: 'color', - description: ``, - hsla: 'hsla(280, 54%, 36%, 1)', - hex: '#6e2b8f', - value: 'hsla(280, 54%, 36%, 1)', - id: 'S:470f28a6ce87fee5f7de1ce57f6378da2d9172aa,' - }, - { - name: 'coralColorChartsColor06Hover', - type: 'color', - description: ``, - hsla: 'hsla(280, 54%, 36%, 1)', - hex: '#6e2b8f', - value: 'hsla(280, 54%, 36%, 1)', - id: 'S:77b1ffc55e4d9589312ddce873657d4e56457b1f,' - }, - { - name: 'coralColorChartsColor07', - type: 'color', - description: ``, - hsla: 'hsla(4, 89%, 49%, 1)', - hex: '#ea1b0e', - value: 'hsla(4, 89%, 49%, 1)', - id: 'S:2a7a643c04df162767b950d50085852ec82b3465,' - }, - { - name: 'coralColorChartsColor07Weak', - type: 'color', - description: ``, - hsla: 'hsla(359, 69%, 73%, 1)', - hex: '#e9898a', - value: 'hsla(359, 69%, 73%, 1)', - id: 'S:d060bb5d7716de1d5811173ae39fe440d17fedab,' - }, - { - name: 'coralColorChartsColor07Strong', - type: 'color', - description: ``, - hsla: 'hsla(359, 62%, 43%, 1)', - hex: '#b32a2c', - value: 'hsla(359, 62%, 43%, 1)', - id: 'S:d26fe825f80405e1247e46220e44ebacd760b0bc,' - }, - { - name: 'coralColorChartsColor07Hover', - type: 'color', - description: ``, - hsla: 'hsla(359, 62%, 43%, 1)', - hex: '#b32a2c', - value: 'hsla(359, 62%, 43%, 1)', - id: 'S:a9c71244bf611ee9f67a0254890a505184b78f6a,' - }, - { - name: 'coralColorChartsColor08', - type: 'color', - description: ``, - hsla: 'hsla(22, 88%, 54%, 1)', - hex: '#f16e23', - value: 'hsla(22, 88%, 54%, 1)', - id: 'S:e5b08742c7524533d54ed8b92417168cbb0d48b9,' - }, - { - name: 'coralColorChartsColor08Weak', - type: 'color', - description: ``, - hsla: 'hsla(22, 88%, 84%, 1)', - hex: '#facbb0', - value: 'hsla(22, 88%, 84%, 1)', - id: 'S:713a1ef8a20fa6aed2d1c434dc927f17e0d834bd,' - }, - { - name: 'coralColorChartsColor08Strong', - type: 'color', - description: ``, - hsla: 'hsla(22, 75%, 42%, 1)', - hex: '#b9541b', - value: 'hsla(22, 75%, 42%, 1)', - id: 'S:e5f922fd5942f5527ca496a0b5d7ef1112080036,' - }, - { - name: 'coralColorChartsColor08Hover', - type: 'color', - description: ``, - hsla: 'hsla(22, 75%, 42%, 1)', - hex: '#b9541b', - value: 'hsla(22, 75%, 42%, 1)', - id: 'S:ff9e7d61eea874a0d2fa0697f64ccbcb869d7bcf,' - }, - { - name: 'coralColorChartsColor09', - type: 'color', - description: ``, - hsla: 'hsla(34, 34%, 45%, 1)', - hex: '#99784c', - value: 'hsla(34, 34%, 45%, 1)', - id: 'S:3459f99731f6e21a0c346c703ce03d9662b31774,' - }, - { - name: 'coralColorChartsColor09Weak', - type: 'color', - description: ``, - hsla: 'hsla(35, 28%, 82%, 1)', - hex: '#ded3c4', - value: 'hsla(35, 28%, 82%, 1)', - id: 'S:0103d0ce726aa335bee66c373fc6c7c68314e42e,' - }, - { - name: 'coralColorChartsColor09Strong', - type: 'color', - description: ``, - hsla: 'hsla(35, 34%, 27%, 1)', - hex: '#5b482d', - value: 'hsla(35, 34%, 27%, 1)', - id: 'S:8e0e06029d5d12b605e62886ecba9ed9a23c6555,' - }, - { - name: 'coralColorChartsColor09Hover', - type: 'color', - description: ``, - hsla: 'hsla(35, 34%, 27%, 1)', - hex: '#5b482d', - value: 'hsla(35, 34%, 27%, 1)', - id: 'S:33467da234d07a52f1a321d511604be0085ee053,' - }, - { - name: 'coralColorNeutralBorderStrong', - type: 'color', - description: ``, - hsla: 'hsla(0, 0%, 92%, 1)', - hex: '#ebebeb', - value: 'hsla(0, 0%, 92%, 1)', - id: 'S:6cf482087de363ed74112bb720849d3cae540491,' - }, - { - name: 'coralColorNeutralBorderStrongHover', - type: 'color', - description: ``, - hsla: 'hsla(216, 30%, 82%, 1)', - hex: '#c3cedf', - value: 'hsla(216, 30%, 82%, 1)', - id: 'S:c9cdc827cbbdf0cd33bb0dfc754ed507ce7ec904,' - }, - { - name: 'coralColorNeutralIcon', - type: 'color', - description: ``, - hsla: 'hsla(210, 17%, 93%, 1)', - hex: '#eaedf0', - value: 'hsla(210, 17%, 93%, 1)', - id: 'S:ea491de561b1aad44427eab1639b4f67ed6af9cc,' - }, - { - name: 'coralColorNeutralIconInverted', - type: 'color', - description: ``, - hsla: 'hsla(210, 7%, 79%, 1)', - hex: '#c5c9cd', - value: 'hsla(210, 7%, 79%, 1)', - id: 'S:be4a8493d880e2ce69feb90d8d04e9251fefa640,' - }, - { - name: 'coralColorNeutralIconWeak', - type: 'color', - description: ``, - hsla: 'hsla(206, 24%, 83%, 1)', - hex: '#c8d4dd', - value: 'hsla(206, 24%, 83%, 1)', - id: 'S:193d2d0604570ca986711e869ecd6df674cba1bd,' - }, - { - name: 'coralColorChartsDefaultText', - type: 'color', - description: ``, - hsla: 'hsla(205, 87%, 94%, 1)', - hex: '#e3f2fd', - value: 'hsla(205, 87%, 94%, 1)', - id: 'S:95feb6e5caef73a4f8be717f657a0620cfe8c242,' - }, - { - name: 'coralColorChartsDefaultTextStrong', - type: 'color', - description: ``, - hsla: 'hsla(205, 93%, 22%, 1)', - hex: '#04426d', - value: 'hsla(205, 93%, 22%, 1)', - id: 'S:54d0b282048baf9da510f9fcbb010db00c1de5d3,' - }, - { - name: 'coralColorChartsDefaultTextWeak', - type: 'color', - description: ``, - hsla: 'hsla(207, 93%, 94%, 1)', - hex: '#e3f2fe', - value: 'hsla(207, 93%, 94%, 1)', - id: 'S:6a7d2aac345613dc7dc5cb90ed1a81654301fb77,' - }, - { - name: 'coralColorChartsColor09Text', - type: 'color', - description: ``, - hsla: 'hsla(36, 36%, 5%, 1)', - hex: '#130f09', - value: 'hsla(36, 36%, 5%, 1)', - id: 'S:659455accf5760a197feff3f6d718f5930787051,' - }, - { - name: 'coralColorChartsColor09TextStrong', - type: 'color', - description: ``, - hsla: 'hsla(36, 36%, 5%, 1)', - hex: '#130f09', - value: 'hsla(36, 36%, 5%, 1)', - id: 'S:236b1f146be3434b33302601113fb092484766bf,' - }, - { - name: 'coralColorChartsColor09TextWeak', - type: 'color', - description: ``, - hsla: 'hsla(35, 28%, 82%, 1)', - hex: '#ded3c4', - value: 'hsla(35, 28%, 82%, 1)', - id: 'S:7f2e610507e21b509888d51144abd8403c443ae4,' - }, - { - name: 'coralColorNeutralBackgroundHeavy', - type: 'color', - description: ``, - hsla: 'hsla(204, 18%, 11%, 1)', - hex: '#171d21', - value: 'hsla(204, 18%, 11%, 1)', - id: 'S:65df702aa0cdfdc3cac4d78123da59c2f4d83519,' - }, - { - name: 'coralColorIllustrationColor01', - type: 'color', - description: ``, - hsla: 'hsla(358, 40%, 53%, 1)', - hex: '#b8585c', - value: 'hsla(358, 40%, 53%, 1)', - id: 'S:4ba3c464f3e7a635ab7640ae0ebf5bf5839c4a2a,' - }, - { - name: 'coralColorIllustrationColor02', - type: 'color', - description: ``, - hsla: 'hsla(355, 39%, 61%, 1)', - hex: '#c2747a', - value: 'hsla(355, 39%, 61%, 1)', - id: 'S:37f1eae01dbb8626bfc383ac4645c148da5f13ed,' - }, - { - name: 'coralColorIllustrationColor03', - type: 'color', - description: ``, - hsla: 'hsla(349, 15%, 71%, 1)', - hex: '#c1abaf', - value: 'hsla(349, 15%, 71%, 1)', - id: 'S:9b29963cb9e511f47e652388948df4a65b6aa581,' - }, - { - name: 'coralColorIllustrationColor04', - type: 'color', - description: ``, - hsla: 'hsla(211, 54%, 15%, 1)', - hex: '#12273d', - value: 'hsla(211, 54%, 15%, 1)', - id: 'S:cd6ec85e18157192a80497e75669741be5033fca,' - }, - { - name: 'coralColorIllustrationColor05', - type: 'color', - description: ``, - hsla: 'hsla(212, 28%, 37%, 1)', - hex: '#455e7a', - value: 'hsla(212, 28%, 37%, 1)', - id: 'S:880a64f54ec715cf822e645d790b40a6c575db9e,' - }, - { - name: 'coralColorIllustrationColor06', - type: 'color', - description: ``, - hsla: 'hsla(212, 29%, 61%, 1)', - hex: '#7d99b8', - value: 'hsla(212, 29%, 61%, 1)', - id: 'S:6827b5c2ad9331c08b9057f3b4175bce503f6fb1,' - }, - { - name: 'coralColorIllustrationSkintone01', - type: 'color', - description: ``, - hsla: 'hsla(20, 29%, 66%, 1)', - hex: '#c2a08f', - value: 'hsla(20, 29%, 66%, 1)', - id: 'S:0efbd574980a36ce591b5448477b1172d1229bd8,' - }, - { - name: 'coralColorIllustrationSkintone02', - type: 'color', - description: ``, - hsla: 'hsla(21, 23%, 49%, 1)', - hex: '#99735f', - value: 'hsla(21, 23%, 49%, 1)', - id: 'S:22fe9c447a404340023bc84d572c0f9d2c8cb4e4,' - }, - { - name: 'coralColorIllustrationSkintone03', - type: 'color', - description: ``, - hsla: 'hsla(17, 29%, 22%, 1)', - hex: '#473027', - value: 'hsla(17, 29%, 22%, 1)', - id: 'S:277c7f8c53f16c317a3c8b02619b58bd887ee941,' - }, - { - name: 'coralColorIllustrationShadow', - type: 'color', - description: ``, - hsla: 'hsla(0, 0%, 0%, 0.1)', - hex: '#0000001f', - value: 'hsla(0, 0%, 0%, 0.1)', - id: 'S:c2d4a5aff8da216258237cee236516287b4430cf,' - }, - { - name: 'coralColorIllustrationColor07', - type: 'color', - description: ``, - hsla: 'hsla(213, 13%, 35%, 1)', - hex: '#4e5966', - value: 'hsla(213, 13%, 35%, 1)', - id: 'S:e6a32f9ebcd47f377de4f76b9f20cb98315cf209,' - }, - { - name: 'coralColorIllustrationColor08', - type: 'color', - description: ``, - hsla: 'hsla(212, 13%, 19%, 1)', - hex: '#2b3138', - value: 'hsla(212, 13%, 19%, 1)', - id: 'S:9ae7b3af0160051362455a2168ff8645a42f703b,' - }, - { - name: 'coralColorIllustrationColor09', - type: 'color', - description: ``, - hsla: 'hsla(240, 3%, 12%, 1)', - hex: '#1d1d1f', - value: 'hsla(240, 3%, 12%, 1)', - id: 'S:e73f099a6ec3332931b3c1f961795360426572a3,' - }, - { - name: 'coralColorAccentBackgroundSelected', - type: 'color', - description: ``, - hsla: 'hsla(199, 73%, 13%, 1)', - hex: '#092a39', - value: 'hsla(199, 73%, 13%, 1)', - id: 'S:e90340e641ca4e9da503dbae26e63f01ee15ba6a,' - }, - { - name: 'coralColorBrandingBackground', - type: 'gradient', - description: ``, - value: 'linear-gradient(133deg,hsla(226, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%)', - id: 'S:bf314fa1e5204e02f67ed4064f24d642d1fc9efa,' - }, - { - name: 'coralColorBrandingNavigation', - type: 'gradient', - description: ``, - value: 'linear-gradient(133deg,hsla(222, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%)', - id: 'S:1fa5a7a976d98a462474b9f529662749f847cdd0,' - }, - { - name: 'coralSpacingXxs', - type: 'measure', - description: ``, - value: '0.4rem', - id: 'c1e38f11-415e-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralSpacingXs', - type: 'measure', - description: ``, - value: '0.8rem', - id: '7b7551d0-b4d6-11ec-a885-f33e1144cd00' - }, - { - name: 'coralSpacingS', - type: 'measure', - description: ``, - value: '1.2rem', - id: '7ee76e20-b4d6-11ec-80ec-81d7ed62932a' - }, - { - name: 'coralSpacingM', - type: 'measure', - description: ``, - value: '1.6rem', - id: '86ce70c0-b4d6-11ec-b76b-3da590a15504' - }, - { - name: 'coralSpacingL', - type: 'measure', - description: ``, - value: '2.8rem', - id: '8aa3bbb0-b4d6-11ec-b930-0b6aacdff92c' - }, - { - name: 'coralSpacingXl', - type: 'measure', - description: ``, - value: '3.6rem', - id: '8f1ac4e0-b4d6-11ec-9806-69893358e985' - }, - { - name: 'coralSizingMinimal', - type: 'measure', - description: ``, - value: '1.2rem', - id: '9981e2b0-b4d6-11ec-ac1e-2b6d1d6a2c7f' - }, - { - name: 'coralSizingXxxs', - type: 'measure', - description: ``, - value: '1.6rem', - id: 'bfda7990-b4d6-11ec-9c65-b1b879a05039' - }, - { - name: 'coralSizingXxs', - type: 'measure', - description: ``, - value: '2rem', - id: 'c350b490-b4d6-11ec-9d5d-ad9dbd31768f' - }, - { - name: 'coralSizingXs', - type: 'measure', - description: ``, - value: '2.4rem', - id: 'c8c1ae20-b4d6-11ec-a8ef-9de523cb52d2' - }, - { - name: 'coralSizingS', - type: 'measure', - description: ``, - value: '2.8rem', - id: 'cc3b6b90-b4d6-11ec-8b31-1791d0a18d04' - }, - { - name: 'coralSizingM', - type: 'measure', - description: ``, - value: '3.6rem', - id: 'd5d26820-b4d6-11ec-b6e7-13f783838bd4' - }, - { - name: 'coralSizingL', - type: 'measure', - description: ``, - value: '4rem', - id: 'd9cb1990-b4d6-11ec-868e-75c32f231580' - }, - { - name: 'coralSizingXxxl', - type: 'measure', - description: ``, - value: '22rem', - id: 'dddb71b0-b4d6-11ec-a762-a9e3930b8774' - }, - { - name: 'coralSizingMaximal', - type: 'measure', - description: ``, - value: '32rem', - id: 'e21f0ed0-b4d6-11ec-bb22-090b530f3237' - }, - { - name: 'coralElevationShadowNeutralM', - type: 'shadow', - description: ``, - value: '0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.5)', - id: 'S:1e46bcc3593665ea527e656cb28e857f111e6864,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralL', - type: 'shadow', - description: ``, - value: '0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.5)', - id: 'S:8bf21eea402fda80510e8657d5d8db538640bd02,:shadow:0' - }, - { - name: 'coralElevationShadowAccent', - type: 'shadow', - description: ``, - value: '0rem 0.1rem 0.1rem 0rem hsla(198, 72%, 75%, 0.3)', - id: 'S:fe0699876a0912d91d178c69d81969b011a5eb58,:shadow:0' - }, - { - name: 'coralElevationShadowSuccess', - type: 'shadow', - description: ``, - value: '0rem 0.1rem 0.1rem 0rem hsla(110, 50%, 70%, 0.3)', - id: 'S:9ca8c51ead5e415ff9677d8bb4aeb39b28a7cb21,:shadow:0' - }, - { - name: 'coralElevationShadowDanger', - type: 'shadow', - description: ``, - value: '0rem 0.1rem 0.1rem 0rem hsla(359, 100%, 78%, 0.3)', - id: 'S:96007327fd92b029a90eca0a30ca2b30249911e1,:shadow:0' - }, - { - name: 'coralElevationShadowWarning', - type: 'shadow', - description: ``, - value: '0rem 0.1rem 0.1rem 0rem hsla(27, 98%, 67%, 0.3)', - id: 'S:f112889f1f57915b2f906b24fc07133ad0da4705,:shadow:0' - }, - { - name: 'coralElevationShadowBeta', - type: 'shadow', - description: ``, - value: '0rem 0.1rem 0.1rem 0rem hsla(279, 34%, 78%, 0.3)', - id: 'S:2f8bea6090298b26e6c486703d4285e7b76433fc,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralInvertedM', - type: 'shadow', - description: ``, - value: '0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 2%, 0.5)', - id: 'S:a5099a594218ccacd1f632af854309e6422c7f83,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralInvertedL', - type: 'shadow', - description: ``, - value: '0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 5%, 0.5)', - id: 'S:4a469b9d512c8d4b89bd6f9cf8c40fc2a40b921d,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralS', - type: 'shadow', - description: ``, - value: '0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5)', - id: 'S:c248e5315e126cc17860b114f6516a07a7832de1,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralInvertedS', - type: 'shadow', - description: ``, - value: '0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 2%, 0.5)', - id: 'S:87123d2a6072733369a2eff12b6c5ddfbe208320,:shadow:0' - }, - { - name: 'coralHeadingL', - type: 'typography', - description: ``, - value: `600 1.8rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.8rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:3e880348927c5dafc591f6ea24c9583b5372a076,' - }, - { - name: 'coralHeadingM', - type: 'typography', - description: ``, - value: `600 1.6rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.6rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:fd2a41bdd7889fa1dcca1d3725ba080f235deb8d,' - }, - { - name: 'coralHeadingS', - type: 'typography', - description: ``, - value: `600 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:a64f9cf77e1f6963661c1715744ad848e5da28bf,' - }, - { - name: 'coralParagraphM', - type: 'typography', - description: ``, - value: `400 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '400', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:917d3089d5c99880f093dedfe802634dc734e627,' - }, - { - name: 'coralParagraphMBold', - type: 'typography', - description: ``, - value: `600 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:9c15e3df6a89629144480cfd86b06a8a351e6abf,' - }, - { - name: 'coralParagraphS', - type: 'typography', - description: ``, - value: `400 1.2rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '400', - fontSize: '1.2rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:9cba41ba25fb01755b4d07eb823f6707a0cd6d4e,' - }, - { - name: 'coralParagraphSBold', - type: 'typography', - description: ``, - value: `600 1.2rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.2rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:db3cc8d49445a71b0dfd4909d1e1dea7f9f9bfc2,' - }, - { - name: 'coralDataM', - type: 'typography', - description: ``, - value: `400 1.4rem/140% 'Inconsolata'`, - fontStyle: 'normal', - fontWeight: '400', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Inconsolata', - id: 'S:ea21655f2b042b6b265a99861bf271192c475900,' - }, - { - name: 'coralDataMBold', - type: 'typography', - description: ``, - value: `700 1.4rem/140% 'Inconsolata'`, - fontStyle: 'normal', - fontWeight: '700', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Inconsolata', - id: 'S:f2c5af46bfeef76f4e644aa0384b2994709f09d6,' - }, - { - name: 'coralLinkMUnderlined', - type: 'typography', - description: ``, - value: `600 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:0459de0ba9f93a99351a262ad56b37a7141df5db,' - }, - { - name: 'coralLinkM', - type: 'typography', - description: ``, - value: `600 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:f8714939f99dbb050689d7a9439bbd3d805d3248,' - }, - { - name: 'coralDataXl', - type: 'typography', - description: ``, - value: `400 2.4rem/140% 'Inconsolata'`, - fontStyle: 'normal', - fontWeight: '400', - fontSize: '2.4rem', - lineHeight: '140%', - fontFamily: 'Inconsolata', - id: 'S:7a19acd294788646fc2263162aa038f44307a9bb,' - }, - { - name: 'coralRadiusM', - type: 'radius', - description: ``, - value: '0.8rem', - id: '85681e80-415d-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralRadiusL', - type: 'radius', - description: ``, - value: '1.6rem', - id: '95ba6ef0-415d-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralRadiusRound', - type: 'radius', - description: ``, - value: '9999.9rem', - id: '9bbf9231-415d-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralRadiusS', - type: 'radius', - description: ``, - value: '0.4rem', - id: '65982381-4783-11ec-a826-6db8532cd4e8' - }, - { - name: 'coralBorderSSolid', - type: 'border', - description: ``, - value: `1px solid`, - id: 'e53f87c1-415e-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBorderMSolid', - type: 'border', - description: ``, - value: `2px solid`, - id: 'e9d78671-415e-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBorderSDashed', - type: 'border', - description: ``, - value: `1px dashed`, - id: 'ee9dc111-415e-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBorderMDashed', - type: 'border', - description: ``, - value: `2px dashed`, - id: 'f6993610-415e-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralOpacityL', - type: 'opacity', - description: ``, - value: `0.2`, - id: '0c7b52b0-415f-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralOpacityM', - type: 'opacity', - description: ``, - value: `0.4`, - id: '10bd9041-415f-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralOpacityS', - type: 'opacity', - description: ``, - value: `0.6`, - id: '15f35591-415f-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBreakpointS', - type: 'breakpoint', - description: ``, - value: `40em`, - id: '20cb0f81-415f-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBreakpointM', - type: 'breakpoint', - description: ``, - value: `48em`, - id: '27f774b1-415f-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBreakpointL', - type: 'breakpoint', - description: ``, - value: `64em`, - id: '2dc50d31-415f-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBreakpointXl', - type: 'breakpoint', - description: ``, - value: `80em`, - id: '36958571-415f-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBrandingLogo', - type: 'branding', - description: ``, - value: `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==')`, - id: 'bc401250-4789-11ec-a826-6db8532cd4e8' - }, - { - name: 'coralTransitionInstant', - type: 'transition', - description: ``, - value: `100ms ease-out`, - id: 'c40577a1-5d8c-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralTransitionFast', - type: 'transition', - description: ``, - value: `250ms ease-in-out`, - id: 'cc39d6f1-5d8c-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralTransitionNormal', - type: 'transition', - description: ``, - value: `300ms ease-in-out`, - id: 'd342ae91-5d8c-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralTransitionSlow', - type: 'transition', - description: ``, - value: `400ms ease-in`, - id: 'e0c90dc1-5d8c-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralElevationLayerFlat', - type: 'elevation', - description: ``, - value: `0`, - id: '058a62d1-5d8d-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralElevationLayerStandardFront', - type: 'elevation', - description: ``, - value: `4`, - id: '1356f2c1-5d8d-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralElevationLayerInteractiveFront', - type: 'elevation', - description: ``, - value: `8`, - id: '1aefae51-5d8d-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralElevationLayerOverlay', - type: 'elevation', - description: ``, - value: `16`, - id: '2096d311-5d8d-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralAnimationHeartbeat', - type: 'animation', - description: ``, - value: `coral-dark-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite`, - id: '1410db90-9401-11ec-a001-db4d7ae8c1be' - }, + { + name: 'coralColorNeutralText', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:33b4829a83b57d2a91a7e31128d6c6e730ac8c2e,', + }, + { + name: 'coralColorNeutralTextInverted', + type: 'color', + description: '', + hsla: 'hsla(210, 7%, 79%, 1)', + hex: '#c5c9cd', + value: 'hsla(210, 7%, 79%, 1)', + id: 'S:b71edb12b01e59e0e4639aa156b4dd1cf7159ecd,', + }, + { + name: 'coralColorNeutralTextWeak', + type: 'color', + description: '', + hsla: 'hsla(206, 17%, 82%, 1)', + hex: '#c9d2d9', + value: 'hsla(206, 17%, 82%, 1)', + id: 'S:e5707bfe4926aac1b3c73b09e06bf34bbcfff67e,', + }, + { + name: 'coralColorNeutralTextDisabled', + type: 'color', + description: '', + hsla: 'hsla(207, 11%, 64%, 1)', + hex: '#99a4ad', + value: 'hsla(207, 11%, 64%, 1)', + id: 'S:cdb1ac42dc5c74e95ba1ad58d75c4dcbf9a8d0a8,', + }, + { + name: 'coralColorNeutralBackground', + type: 'color', + description: '', + hsla: 'hsla(206, 17%, 18%, 1)', + hex: '#262f36', + value: 'hsla(206, 17%, 18%, 1)', + id: 'S:9ef16391a1cd63272e12e6e559a07e1bdde8d98c,', + }, + { + name: 'coralColorNeutralBackgroundDisabled', + type: 'color', + description: '', + hsla: 'hsla(210, 17%, 16%, 1)', + hex: '#222930', + value: 'hsla(210, 17%, 16%, 1)', + id: 'S:e8339f431f04d742f8db2e6c2beced31402ffd3e,', + }, + { + name: 'coralColorNeutralBackgroundMedium', + type: 'color', + description: '', + hsla: 'hsla(208, 18%, 21%, 1)', + hex: '#2c363f', + value: 'hsla(208, 18%, 21%, 1)', + id: 'S:608470870204c2776675f5d5745fc81ae3136466,', + }, + { + name: 'coralColorNeutralBackgroundStrong', + type: 'color', + description: '', + hsla: 'hsla(208, 18%, 14%, 1)', + hex: '#1d242a', + value: 'hsla(208, 18%, 14%, 1)', + id: 'S:1ab9d51f56f73bcdf1669ac742476f4153bc4081,', + }, + { + name: 'coralColorNeutralBorder', + type: 'color', + description: '', + hsla: 'hsla(206, 17%, 82%, 1)', + hex: '#c9d2d9', + value: 'hsla(206, 17%, 82%, 1)', + id: 'S:6bf9d120b89396822b4ef521cd8835a00af20a67,', + }, + { + name: 'coralColorNeutralBorderWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 34%, 1)', + hex: '#475866', + value: 'hsla(207, 18%, 34%, 1)', + id: 'S:4cad0f16d923abe960465c5632c01d0c583cf1b1,', + }, + { + name: 'coralColorNeutralBorderWeakHover', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 44%, 1)', + hex: '#5c7284', + value: 'hsla(207, 18%, 44%, 1)', + id: 'S:21009d87761d33a94890fa531c68a1a2b844a4e9,', + }, + { + name: 'coralColorNeutralBorderDisabled', + type: 'color', + description: '', + hsla: 'hsla(208, 11%, 35%, 1)', + hex: '#505a63', + value: 'hsla(208, 11%, 35%, 1)', + id: 'S:7f7f778874b7664a5544e2bfb2dc3eeb6541764c,', + }, + { + name: 'coralColorAccentText', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 65%, 1)', + hex: '#66bfe6', + value: 'hsla(198, 72%, 65%, 1)', + id: 'S:08cc47c47088d53c52531343029ad926dc510f9a,', + }, + { + name: 'coralColorAccentTextHover', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 55%, 1)', + hex: '#3aaddf', + value: 'hsla(198, 72%, 55%, 1)', + id: 'S:cb35f0ed6b95b863d8ab60b2094ec97f540d4b57,', + }, + { + name: 'coralColorAccentTextActive', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 45%, 1)', + hex: '#2093c5', + value: 'hsla(198, 72%, 45%, 1)', + id: 'S:25709adb7388e4e36887f4e186ed83363ccfdab2,', + }, + { + name: 'coralColorAccentTextWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:d7d4b99d4b04146e8756a987ed5829affe0ecb3e,', + }, + { + name: 'coralColorAccentTextWeakHover', + type: 'color', + description: '', + hsla: 'hsla(199, 71%, 15%, 1)', + hex: '#0b3142', + value: 'hsla(199, 71%, 15%, 1)', + id: 'S:aba0eb56f534ab5d12de536fac73fc502b102a8e,', + }, + { + name: 'coralColorAccentTextWeakActive', + type: 'color', + description: '', + hsla: 'hsla(199, 73%, 10%, 1)', + hex: '#07202c', + value: 'hsla(199, 73%, 10%, 1)', + id: 'S:dc054ee71c9ba3d9c308762bd2a498dec7c66cf0,', + }, + { + name: 'coralColorAccentTextStrong', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 75%, 1)', + hex: '#91d1ed', + value: 'hsla(198, 72%, 75%, 1)', + id: 'S:6859abb1d07943abbfc8d9aa3df44b8c9fdf1f3e,', + }, + { + name: 'coralColorAccentTextStrongHover', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 65%, 1)', + hex: '#66bfe6', + value: 'hsla(198, 72%, 65%, 1)', + id: 'S:d7afea39d1cbc3b2eff9428c58ac8b080f9881d3,', + }, + { + name: 'coralColorAccentTextStrongActive', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 55%, 1)', + hex: '#3aaddf', + value: 'hsla(198, 72%, 55%, 1)', + id: 'S:e56ee16357f44629bccdcdcacab8dae6387e9933,', + }, + { + name: 'coralColorAccentBackground', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 25%, 1)', + hex: '#12516d', + value: 'hsla(198, 72%, 25%, 1)', + id: 'S:d0bc41ad3ff985739cc159963538d13d49b68d3e,', + }, + { + name: 'coralColorAccentBackgroundHover', + type: 'color', + description: '', + hsla: 'hsla(199, 78%, 20%, 1)', + hex: '#0b425b', + value: 'hsla(199, 78%, 20%, 1)', + id: 'S:d207ec73a23f1ed631122c5586e13266a8445538,', + }, + { + name: 'coralColorAccentBackgroundActive', + type: 'color', + description: '', + hsla: 'hsla(199, 73%, 10%, 1)', + hex: '#07202c', + value: 'hsla(199, 73%, 10%, 1)', + id: 'S:6417c23a879b7dbfd822c317ac052bac965cc359,', + }, + { + name: 'coralColorAccentBackgroundWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:90cc9c9957316ceecd890fdd0e2d522611937f8f,', + }, + { + name: 'coralColorAccentBackgroundWeakHover', + type: 'color', + description: '', + hsla: 'hsla(199, 71%, 15%, 1)', + hex: '#0b3142', + value: 'hsla(199, 71%, 15%, 1)', + id: 'S:e2831e1903246c2edf0fc8c5923cd3da3a9f1689,', + }, + { + name: 'coralColorAccentBackgroundWeakActive', + type: 'color', + description: '', + hsla: 'hsla(199, 73%, 10%, 1)', + hex: '#07202c', + value: 'hsla(199, 73%, 10%, 1)', + id: 'S:fa263d6acd99cc673c83d414bbe7f7edb790950f,', + }, + { + name: 'coralColorAccentBackgroundStrong', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 75%, 1)', + hex: '#91d1ed', + value: 'hsla(198, 72%, 75%, 1)', + id: 'S:b5b4e2fdc443b96425a226e8fb6e9c48a0274ba5,', + }, + { + name: 'coralColorAccentBackgroundStrongHover', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 65%, 1)', + hex: '#66bfe6', + value: 'hsla(198, 72%, 65%, 1)', + id: 'S:d63101a73ff03405385f907600450a8ce06960be,', + }, + { + name: 'coralColorAccentBackgroundStrongActive', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 55%, 1)', + hex: '#3aaddf', + value: 'hsla(198, 72%, 55%, 1)', + id: 'S:96cf73d9f20b39a9d95916fcb05cddee14924948,', + }, + { + name: 'coralColorAccentBorder', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 75%, 1)', + hex: '#91d1ed', + value: 'hsla(198, 72%, 75%, 1)', + id: 'S:774e5e42c3eea5b3365ec43a61207f077866b031,', + }, + { + name: 'coralColorAccentBorderHover', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 65%, 1)', + hex: '#66bfe6', + value: 'hsla(198, 72%, 65%, 1)', + id: 'S:851b249f5bcea2d55cbe21f82081cbe6f5c3e43a,', + }, + { + name: 'coralColorAccentBorderActive', + type: 'color', + description: '', + hsla: 'hsla(199, 72%, 55%, 1)', + hex: '#3aacdf', + value: 'hsla(199, 72%, 55%, 1)', + id: 'S:d6f90237a2053850f92758d916244747eedbe2ff,', + }, + { + name: 'coralColorDangerText', + type: 'color', + description: '', + hsla: 'hsla(2, 95%, 74%, 1)', + hex: '#fc827e', + value: 'hsla(2, 95%, 74%, 1)', + id: 'S:5b9635ad4f2e4ee60dee9881a5f465e9dac2de12,', + }, + { + name: 'coralColorDangerTextHover', + type: 'color', + description: '', + hsla: 'hsla(2, 95%, 69%, 1)', + hex: '#fb6964', + value: 'hsla(2, 95%, 69%, 1)', + id: 'S:cd14f48a94af225223a3bd795c6c1b08552a3638,', + }, + { + name: 'coralColorDangerTextActive', + type: 'color', + description: '', + hsla: 'hsla(2, 96%, 64%, 1)', + hex: '#fb514c', + value: 'hsla(2, 96%, 64%, 1)', + id: 'S:d5a4ccb7904bb51f3737379e8b1963bd1b5ce1f1,', + }, + { + name: 'coralColorDangerTextWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:262b86066bc2a1bd3392903a4fa89219f54de1e5,', + }, + { + name: 'coralColorDangerTextWeakHover', + type: 'color', + description: '', + hsla: 'hsla(358, 96%, 18%, 1)', + hex: '#590205', + value: 'hsla(358, 96%, 18%, 1)', + id: 'S:8cc42ad3d76e34a7e82a06c02e212315af6205d5,', + }, + { + name: 'coralColorDangerTextWeakActive', + type: 'color', + description: '', + hsla: 'hsla(357, 97%, 13%, 1)', + hex: '#410104', + value: 'hsla(357, 97%, 13%, 1)', + id: 'S:dff099effde644c9686227fead9ec34d060fed6b,', + }, + { + name: 'coralColorDangerTextStrong', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 78%, 1)', + hex: '#ff8f91', + value: 'hsla(359, 100%, 78%, 1)', + id: 'S:4a03b0a2376fe5b4b5d7a518cbe228a106e2509c,', + }, + { + name: 'coralColorDangerTextStrongHover', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 73%, 1)', + hex: '#ff7578', + value: 'hsla(359, 100%, 73%, 1)', + id: 'S:482fe4c679a7df1ea0bab272ea9981626bf29954,', + }, + { + name: 'coralColorDangerTextStrongActive', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 68%, 1)', + hex: '#ff5c5f', + value: 'hsla(359, 100%, 68%, 1)', + id: 'S:1c90229b88a04809e5aafe15040a2a4a2ff0014b,', + }, + { + name: 'coralColorDangerBackground', + type: 'color', + description: '', + hsla: 'hsla(358, 96%, 18%, 1)', + hex: '#590205', + value: 'hsla(358, 96%, 18%, 1)', + id: 'S:30752ec1928f789f0cdae58ef69ce17eba4f5d14,', + }, + { + name: 'coralColorDangerBackgroundHover', + type: 'color', + description: '', + hsla: 'hsla(357, 97%, 13%, 1)', + hex: '#410104', + value: 'hsla(357, 97%, 13%, 1)', + id: 'S:5d28e3bfceaffdcb7eed504fd2a61881346db2ab,', + }, + { + name: 'coralColorDangerBackgroundActive', + type: 'color', + description: '', + hsla: 'hsla(358, 95%, 8%, 1)', + hex: '#280102', + value: 'hsla(358, 95%, 8%, 1)', + id: 'S:28091ca1f7f258e3747e85bef0fd785b7993c41b,', + }, + { + name: 'coralColorDangerBackgroundWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:3aac206c50736c0b809b2ce622eda1614e2c390a,', + }, + { + name: 'coralColorDangerBackgroundWeakHover', + type: 'color', + description: '', + hsla: 'hsla(358, 96%, 18%, 1)', + hex: '#590205', + value: 'hsla(358, 96%, 18%, 1)', + id: 'S:59e6211c6964e6d40a75e79c3cbd7a641983287e,', + }, + { + name: 'coralColorDangerBackgroundWeakActive', + type: 'color', + description: '', + hsla: 'hsla(357, 97%, 13%, 1)', + hex: '#410104', + value: 'hsla(357, 97%, 13%, 1)', + id: 'S:cf173dbfeb69ff1be2c2979b7dd24ea59eeaee95,', + }, + { + name: 'coralColorDangerBackgroundStrong', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 78%, 1)', + hex: '#ff8f91', + value: 'hsla(359, 100%, 78%, 1)', + id: 'S:7951ddfe01c38d9291184437ad1ce6f3e4f421f6,', + }, + { + name: 'coralColorDangerBackgroundStrongHover', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 73%, 1)', + hex: '#ff7578', + value: 'hsla(359, 100%, 73%, 1)', + id: 'S:d778c6465e775ecabe4636a6c3ace83f16da03bb,', + }, + { + name: 'coralColorDangerBackgroundStrongActive', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 68%, 1)', + hex: '#ff5c5f', + value: 'hsla(359, 100%, 68%, 1)', + id: 'S:efe81f0518b0281e48adcabe71640a0feb6f47de,', + }, + { + name: 'coralColorDangerBorder', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 78%, 1)', + hex: '#ff8f91', + value: 'hsla(359, 100%, 78%, 1)', + id: 'S:0cec2ca3a831fbc28fd9a065f38c4844d9b9c153,', + }, + { + name: 'coralColorDangerBorderHover', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 73%, 1)', + hex: '#ff7578', + value: 'hsla(359, 100%, 73%, 1)', + id: 'S:8693225af66ed3a86bab3985fe0ba6f3b9ce5f20,', + }, + { + name: 'coralColorDangerBorderActive', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 68%, 1)', + hex: '#ff5c5f', + value: 'hsla(359, 100%, 68%, 1)', + id: 'S:b27aec96b54b0e2fd3dabd0127812d3821c3b3a6,', + }, + { + name: 'coralColorSuccessText', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 60%, 1)', + hex: '#77cc66', + value: 'hsla(110, 50%, 60%, 1)', + id: 'S:ddc24cf38b47116105cdbdde83e916a6e88191f6,', + }, + { + name: 'coralColorSuccessTextHover', + type: 'color', + description: '', + hsla: 'hsla(110, 45%, 50%, 1)', + hex: '#59b946', + value: 'hsla(110, 45%, 50%, 1)', + id: 'S:afc5e78d6b0188edc09b91af776a861ca87bd15a,', + }, + { + name: 'coralColorSuccessTextActive', + type: 'color', + description: '', + hsla: 'hsla(110, 45%, 40%, 1)', + hex: '#479438', + value: 'hsla(110, 45%, 40%, 1)', + id: 'S:3e16d2a4a600780f62ef6e619d79f01110ffac52,', + }, + { + name: 'coralColorSuccessTextWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:2207e6ca2ae20e6ccf66df42a0747dc886fc64cd,', + }, + { + name: 'coralColorSuccessTextWeakHover', + type: 'color', + description: '', + hsla: 'hsla(109, 50%, 20%, 1)', + hex: '#224c19', + value: 'hsla(109, 50%, 20%, 1)', + id: 'S:f053a69fac1c95dc1fa240a5e358fb13d1441df0,', + }, + { + name: 'coralColorSuccessTextWeakActive', + type: 'color', + description: '', + hsla: 'hsla(109, 51%, 15%, 1)', + hex: '#1a3a13', + value: 'hsla(109, 51%, 15%, 1)', + id: 'S:4eaa477af134fb81a339c90fca411f546c823186,', + }, + { + name: 'coralColorSuccessTextStrong', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 70%, 1)', + hex: '#99d98c', + value: 'hsla(110, 50%, 70%, 1)', + id: 'S:4bb64d21d4806350f9bb8c7648bf54ca8b778336,', + }, + { + name: 'coralColorSuccessTextStrongHover', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 60%, 1)', + hex: '#77cc66', + value: 'hsla(110, 50%, 60%, 1)', + id: 'S:08280353077826711ef7e299b5b78d52244e69f4,', + }, + { + name: 'coralColorSuccessTextStrongActive', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 50%, 1)', + hex: '#55bf40', + value: 'hsla(110, 50%, 50%, 1)', + id: 'S:ef7aa00f229b0d521e9ad9fd67fff4adf9632a5f,', + }, + { + name: 'coralColorSuccessBackground', + type: 'color', + description: '', + hsla: 'hsla(109, 50%, 20%, 1)', + hex: '#224c19', + value: 'hsla(109, 50%, 20%, 1)', + id: 'S:c0f06ce2d8287de9df9faec5f1bee0fb2239970b,', + }, + { + name: 'coralColorSuccessBackgroundHover', + type: 'color', + description: '', + hsla: 'hsla(109, 51%, 15%, 1)', + hex: '#1a3a13', + value: 'hsla(109, 51%, 15%, 1)', + id: 'S:87355975e174a30e50368b9810808dce64711190,', + }, + { + name: 'coralColorSuccessBackgroundActive', + type: 'color', + description: '', + hsla: 'hsla(110, 49%, 10%, 1)', + hex: '#11260d', + value: 'hsla(110, 49%, 10%, 1)', + id: 'S:8ee02349b9dddba7739fb10be04bc72fe0767f29,', + }, + { + name: 'coralColorSuccessBackgroundWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:990829d6c422d85d4ef6d244ea63143d54b0e270,', + }, + { + name: 'coralColorSuccessBackgroundWeakHover', + type: 'color', + description: '', + hsla: 'hsla(109, 50%, 20%, 1)', + hex: '#224c19', + value: 'hsla(109, 50%, 20%, 1)', + id: 'S:2c9006c27dab2aa4eb3fee3b4da90acc2d010e79,', + }, + { + name: 'coralColorSuccessBackgroundWeakActive', + type: 'color', + description: '', + hsla: 'hsla(109, 51%, 15%, 1)', + hex: '#1a3a13', + value: 'hsla(109, 51%, 15%, 1)', + id: 'S:496d934784ba9739f504e57450048c6dd5a98f85,', + }, + { + name: 'coralColorSuccessBackgroundStrong', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 70%, 1)', + hex: '#99d98c', + value: 'hsla(110, 50%, 70%, 1)', + id: 'S:caab7cb7fd3ef273fb588427f064bb6cdb1f301c,', + }, + { + name: 'coralColorSuccessBackgroundStrongHover', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 60%, 1)', + hex: '#77cc66', + value: 'hsla(110, 50%, 60%, 1)', + id: 'S:46b7fdb7686322364dc0ffb4f642c7ab1a6b01c2,', + }, + { + name: 'coralColorSuccessBackgroundStrongActive', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 50%, 1)', + hex: '#55bf40', + value: 'hsla(110, 50%, 50%, 1)', + id: 'S:0b2c05a33bc22a49e5838779a45b5a1d40d75c76,', + }, + { + name: 'coralColorSuccessBorder', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 70%, 1)', + hex: '#99d98c', + value: 'hsla(110, 50%, 70%, 1)', + id: 'S:41f3cf4696b9214ee67657de66222c9bc1473ddf,', + }, + { + name: 'coralColorSuccessBorderHover', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 60%, 1)', + hex: '#77cc66', + value: 'hsla(110, 50%, 60%, 1)', + id: 'S:65ba39beb6bb171796560228fbdf7d0e755a6f81,', + }, + { + name: 'coralColorSuccessBorderActive', + type: 'color', + description: '', + hsla: 'hsla(110, 50%, 50%, 1)', + hex: '#55bf40', + value: 'hsla(110, 50%, 50%, 1)', + id: 'S:8a4ea54bac2ed4c8774f5053161ff60c25903537,', + }, + { + name: 'coralColorWarningText', + type: 'color', + description: '', + hsla: 'hsla(27, 97%, 57%, 1)', + hex: '#fc8727', + value: 'hsla(27, 97%, 57%, 1)', + id: 'S:16027484efef3f9d9e75cdbcc7d28420ce0a322c,', + }, + { + name: 'coralColorWarningTextHover', + type: 'color', + description: '', + hsla: 'hsla(27, 97%, 47%, 1)', + hex: '#ec6c03', + value: 'hsla(27, 97%, 47%, 1)', + id: 'S:7610f674bcb4286e88dc19c597fbef3927d806a9,', + }, + { + name: 'coralColorWarningTextActive', + type: 'color', + description: '', + hsla: 'hsla(27, 97%, 37%, 1)', + hex: '#ba5503', + value: 'hsla(27, 97%, 37%, 1)', + id: 'S:e16312eb45e61db89e72b655be0026dd92d5d4c7,', + }, + { + name: 'coralColorWarningTextWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:26a1a656869cfda9e0da9790a8ae579ed538a74c,', + }, + { + name: 'coralColorWarningTextWeakHover', + type: 'color', + description: '', + hsla: 'hsla(22, 84%, 20%, 1)', + hex: '#5e2808', + value: 'hsla(22, 84%, 20%, 1)', + id: 'S:9e653f60207acf7fd4fe7b21a18b5fbcd9f19856,', + }, + { + name: 'coralColorWarningTextWeakActive', + type: 'color', + description: '', + hsla: 'hsla(23, 84%, 15%, 1)', + hex: '#461e06', + value: 'hsla(23, 84%, 15%, 1)', + id: 'S:3e429b2bad134796e748d9639c4690161cde60ea,', + }, + { + name: 'coralColorWarningTextStrong', + type: 'color', + description: '', + hsla: 'hsla(27, 98%, 67%, 1)', + hex: '#fda359', + value: 'hsla(27, 98%, 67%, 1)', + id: 'S:a2e0dc891484bf912ec383de90e726821e3dc002,', + }, + { + name: 'coralColorWarningTextStrongHover', + type: 'color', + description: '', + hsla: 'hsla(27, 97%, 57%, 1)', + hex: '#fc8726', + value: 'hsla(27, 97%, 57%, 1)', + id: 'S:2583276100160b22daf298171af37e9774ae6681,', + }, + { + name: 'coralColorWarningTextStrongActive', + type: 'color', + description: '', + hsla: 'hsla(27, 98%, 47%, 1)', + hex: '#ed6c03', + value: 'hsla(27, 98%, 47%, 1)', + id: 'S:b78bea54c885ecc8465bdcd3b2fbabe63d85e5a5,', + }, + { + name: 'coralColorWarningBackground', + type: 'color', + description: '', + hsla: 'hsla(22, 84%, 20%, 1)', + hex: '#5e2808', + value: 'hsla(22, 84%, 20%, 1)', + id: 'S:8ece51a0dfa9d134906a5e31bf75989cdf39bbab,', + }, + { + name: 'coralColorWarningBackgroundHover', + type: 'color', + description: '', + hsla: 'hsla(22, 84%, 15%, 1)', + hex: '#471e06', + value: 'hsla(22, 84%, 15%, 1)', + id: 'S:fe246dabb565c77eb07dbf4346bc565b5684d3de,', + }, + { + name: 'coralColorWarningBackgroundActive', + type: 'color', + description: '', + hsla: 'hsla(22, 84%, 10%, 1)', + hex: '#2f1404', + value: 'hsla(22, 84%, 10%, 1)', + id: 'S:4daa31745b723bc4edec0700f40b2313aeeb602e,', + }, + { + name: 'coralColorWarningBackgroundWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:503dcdd815de63f67e968186311f4571a06516e8,', + }, + { + name: 'coralColorWarningBackgroundWeakHover', + type: 'color', + description: '', + hsla: 'hsla(22, 84%, 20%, 1)', + hex: '#5e2808', + value: 'hsla(22, 84%, 20%, 1)', + id: 'S:a2ac0699848d6414310a07d8ca6d9e0baca0b974,', + }, + { + name: 'coralColorWarningBackgroundWeakActive', + type: 'color', + description: '', + hsla: 'hsla(23, 84%, 15%, 1)', + hex: '#461e06', + value: 'hsla(23, 84%, 15%, 1)', + id: 'S:1783820c5bd551fb4f2a92b2fa48e3eb10b0d6c1,', + }, + { + name: 'coralColorWarningBackgroundStrong', + type: 'color', + description: '', + hsla: 'hsla(27, 98%, 67%, 1)', + hex: '#fda359', + value: 'hsla(27, 98%, 67%, 1)', + id: 'S:690a5fe2838c1fc9561bca63efa47b989dfb014d,', + }, + { + name: 'coralColorWarningBackgroundStrongHover', + type: 'color', + description: '', + hsla: 'hsla(27, 97%, 57%, 1)', + hex: '#fc8726', + value: 'hsla(27, 97%, 57%, 1)', + id: 'S:719efa488a12d4c1fe27c69be12cf88d9fb50170,', + }, + { + name: 'coralColorWarningBackgroundStrongActive', + type: 'color', + description: '', + hsla: 'hsla(27, 98%, 47%, 1)', + hex: '#ed6c03', + value: 'hsla(27, 98%, 47%, 1)', + id: 'S:c2f433c1cb7d81090205f58a9681988fde520fdf,', + }, + { + name: 'coralColorWarningBorder', + type: 'color', + description: '', + hsla: 'hsla(27, 98%, 67%, 1)', + hex: '#fda359', + value: 'hsla(27, 98%, 67%, 1)', + id: 'S:f51e9dc45e26cdd9230760ef5b2ae40fe0559843,', + }, + { + name: 'coralColorWarningBorderHover', + type: 'color', + description: '', + hsla: 'hsla(27, 97%, 57%, 1)', + hex: '#fc8726', + value: 'hsla(27, 97%, 57%, 1)', + id: 'S:a6b63647daef2a00a3b2f13d7bc355e183bc6445,', + }, + { + name: 'coralColorWarningBorderActive', + type: 'color', + description: '', + hsla: 'hsla(27, 98%, 47%, 1)', + hex: '#ed6c03', + value: 'hsla(27, 98%, 47%, 1)', + id: 'S:1dafbe51ed80a7f2c9939ea49bb062a2e0380e4c,', + }, + { + name: 'coralColorAssistiveBackground', + type: 'color', + description: '', + hsla: 'hsla(208, 20%, 83%, 1)', + hex: '#ccd5dd', + value: 'hsla(208, 20%, 83%, 1)', + id: 'S:2c2c18f8f6baff8d9055995a8f6179e4d7c828f7,', + }, + { + name: 'coralColorAssistiveText', + type: 'color', + description: '', + hsla: 'hsla(208, 18%, 14%, 1)', + hex: '#1d242a', + value: 'hsla(208, 18%, 14%, 1)', + id: 'S:4a279ca6a60e96f9e6497beef63c1e09d834e3f3,', + }, + { + name: 'coralColorAssistiveBorder', + type: 'color', + description: '', + hsla: 'hsla(208, 20%, 63%, 1)', + hex: '#8ea2b4', + value: 'hsla(208, 20%, 63%, 1)', + id: 'S:4339e41773e974fd338ff75e87112f16f3a250de,', + }, + { + name: 'coralColorAssistiveBorderFocus', + type: 'color', + description: '', + hsla: 'hsla(256, 66%, 76%, 1)', + hex: '#af9aea', + value: 'hsla(256, 66%, 76%, 1)', + id: 'S:621e143a2844d1f22688e443488456f2537855f7,', + }, + { + name: 'coralColorBrandingBrand', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 71%, 1)', + hex: '#ff6d70', + value: 'hsla(359, 100%, 71%, 1)', + id: 'S:a63d2ce05b0960d899aada51ec3b1a3a25c29cd4,', + }, + { + name: 'coralColorNeutralBorderHover', + type: 'color', + description: '', + hsla: 'hsla(206, 17%, 92%, 1)', + hex: '#e7ebee', + value: 'hsla(206, 17%, 92%, 1)', + id: 'S:98967449e63946677235590ad8acd3b5700468aa,', + }, + { + name: 'coralColorBetaText', + type: 'color', + description: '', + hsla: 'hsla(280, 44%, 72%, 1)', + hex: '#c299d7', + value: 'hsla(280, 44%, 72%, 1)', + id: 'S:b948bdc96136c3f6b38375a4b912e9ce5134bf05,', + }, + { + name: 'coralColorBetaTextHover', + type: 'color', + description: '', + hsla: 'hsla(280, 43%, 62%, 1)', + hex: '#ac74c8', + value: 'hsla(280, 43%, 62%, 1)', + id: 'S:bcf2508c6278f94fa3686fe01c981c47c9b65b9d,', + }, + { + name: 'coralColorBetaTextActive', + type: 'color', + description: '', + hsla: 'hsla(280, 44%, 52%, 1)', + hex: '#974fba', + value: 'hsla(280, 44%, 52%, 1)', + id: 'S:4f1a6e2da5a044f3bb69749ebefe4c3925541876,', + }, + { + name: 'coralColorBetaIcon', + type: 'color', + description: '', + hsla: 'hsla(280, 68%, 61%, 1)', + hex: '#b258df', + value: 'hsla(280, 68%, 61%, 1)', + id: 'S:defe72bbfa67005e161dc6f946d8906858d8ea88,', + }, + { + name: 'coralColorBetaIconHover', + type: 'color', + description: '', + hsla: 'hsla(280, 68%, 51%, 1)', + hex: '#9e2dd7', + value: 'hsla(280, 68%, 51%, 1)', + id: 'S:95185feb45d5644ea910487a4eea77456beb3a9a,', + }, + { + name: 'coralColorBetaIconActive', + type: 'color', + description: '', + hsla: 'hsla(280, 67%, 41%, 1)', + hex: '#8022af', + value: 'hsla(280, 67%, 41%, 1)', + id: 'S:3d531b2e194ad4e0a4fd3dea5e4577178b1a3b46,', + }, + { + name: 'coralColorBetaTextWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:9050183d33129b35a164a22e99290643248f24f4,', + }, + { + name: 'coralColorBetaTextWeakHover', + type: 'color', + description: '', + hsla: 'hsla(281, 65%, 24%, 1)', + hex: '#4d1666', + value: 'hsla(281, 65%, 24%, 1)', + id: 'S:f474060639634c5ebf098da1a63271693103d8d2,', + }, + { + name: 'coralColorBetaTextWeakActive', + type: 'color', + description: '', + hsla: 'hsla(280, 64%, 14%, 1)', + hex: '#2c0d3b', + value: 'hsla(280, 64%, 14%, 1)', + id: 'S:8025b590b94570cd48c1d7004b7b04746098c6a0,', + }, + { + name: 'coralColorBetaTextStrong', + type: 'color', + description: '', + hsla: 'hsla(279, 34%, 78%, 1)', + hex: '#cdb4da', + value: 'hsla(279, 34%, 78%, 1)', + id: 'S:50c309d492c16c903c26b15a3b7e62780f15095d,', + }, + { + name: 'coralColorBetaTextStrongHover', + type: 'color', + description: '', + hsla: 'hsla(279, 34%, 68%, 1)', + hex: '#b692c9', + value: 'hsla(279, 34%, 68%, 1)', + id: 'S:9be5f28883b389866ba4c1a1549131ba23daf88a,', + }, + { + name: 'coralColorBetaTextStrongActive', + type: 'color', + description: '', + hsla: 'hsla(280, 34%, 48%, 1)', + hex: '#8851a4', + value: 'hsla(280, 34%, 48%, 1)', + id: 'S:14684ec034fca592e35fac3b01b4651f479c8816,', + }, + { + name: 'coralColorBetaBackground', + type: 'color', + description: '', + hsla: 'hsla(281, 65%, 24%, 1)', + hex: '#4d1666', + value: 'hsla(281, 65%, 24%, 1)', + id: 'S:76b6f1eda003d080b8c65f75c5ca84d07a828766,', + }, + { + name: 'coralColorBetaBackgroundHover', + type: 'color', + description: '', + hsla: 'hsla(280, 64%, 14%, 1)', + hex: '#2c0d3b', + value: 'hsla(280, 64%, 14%, 1)', + id: 'S:47ca987054b92e001c13068c1b18aad101d121ea,', + }, + { + name: 'coralColorBetaBackgroundActive', + type: 'color', + description: '', + hsla: 'hsla(277, 62%, 4%, 1)', + hex: '#0c0411', + value: 'hsla(277, 62%, 4%, 1)', + id: 'S:f161284ccf3e2d852e678cd9d22f9d35d92378e3,', + }, + { + name: 'coralColorBetaBackgroundWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:d12a6c9704d384c9e3c427b24731463361a6226c,', + }, + { + name: 'coralColorBetaBackgroundWeakHover', + type: 'color', + description: '', + hsla: 'hsla(281, 65%, 24%, 1)', + hex: '#4d1666', + value: 'hsla(281, 65%, 24%, 1)', + id: 'S:990df853093263f6b7631d5fcfae2641a5841687,', + }, + { + name: 'coralColorBetaBackgroundWeakActive', + type: 'color', + description: '', + hsla: 'hsla(280, 64%, 14%, 1)', + hex: '#2c0d3b', + value: 'hsla(280, 64%, 14%, 1)', + id: 'S:81938abf28b8a9e267b12f51ddc2dc896f1a0129,', + }, + { + name: 'coralColorBetaBackgroundStrong', + type: 'color', + description: '', + hsla: 'hsla(279, 34%, 78%, 1)', + hex: '#cdb4da', + value: 'hsla(279, 34%, 78%, 1)', + id: 'S:fff57956fe2ef00037830bfacbb0b2dd14de5f7a,', + }, + { + name: 'coralColorBetaBackgroundStrongHover', + type: 'color', + description: '', + hsla: 'hsla(279, 34%, 68%, 1)', + hex: '#b692c9', + value: 'hsla(279, 34%, 68%, 1)', + id: 'S:dd2ba9092ed88e93f12c4a8f799cedb06ae7c6fc,', + }, + { + name: 'coralColorBetaBackgroundStrongActive', + type: 'color', + description: '', + hsla: 'hsla(279, 34%, 48%, 1)', + hex: '#8751a4', + value: 'hsla(279, 34%, 48%, 1)', + id: 'S:79aa01dc99d8a54619b2ac9c3a5e53d3ed0842da,', + }, + { + name: 'coralColorBetaBorder', + type: 'color', + description: '', + hsla: 'hsla(279, 34%, 78%, 1)', + hex: '#cdb4da', + value: 'hsla(279, 34%, 78%, 1)', + id: 'S:6dafe8de2afdf691eb9e2c9fd891604168ce4811,', + }, + { + name: 'coralColorBetaBorderHover', + type: 'color', + description: '', + hsla: 'hsla(279, 34%, 68%, 1)', + hex: '#b692c9', + value: 'hsla(279, 34%, 68%, 1)', + id: 'S:26f9bcc36e2de268604aca546c255dd666a72951,', + }, + { + name: 'coralColorBetaBorderActive', + type: 'color', + description: '', + hsla: 'hsla(279, 34%, 48%, 1)', + hex: '#8751a4', + value: 'hsla(279, 34%, 48%, 1)', + id: 'S:446e25f7ed2d99158809e43c5e70771fb904cdb4,', + }, + { + name: 'coralColorAccentIcon', + type: 'color', + description: '', + hsla: 'hsla(198, 76%, 67%, 1)', + hex: '#69c4eb', + value: 'hsla(198, 76%, 67%, 1)', + id: 'S:0a511b6c26174e70fa690557e04392239f185fba,', + }, + { + name: 'coralColorAccentIconHover', + type: 'color', + description: '', + hsla: 'hsla(198, 76%, 57%, 1)', + hex: '#3eb2e5', + value: 'hsla(198, 76%, 57%, 1)', + id: 'S:4c354076f65713ad230f2917b5ceaff14732a33e,', + }, + { + name: 'coralColorAccentIconActive', + type: 'color', + description: '', + hsla: 'hsla(198, 77%, 47%, 1)', + hex: '#1c9bd3', + value: 'hsla(198, 77%, 47%, 1)', + id: 'S:313a92a79ede7488535525a7babefa5f6ca6a08f,', + }, + { + name: 'coralColorDangerIcon', + type: 'color', + description: '', + hsla: 'hsla(2, 96%, 67%, 1)', + hex: '#fc5d58', + value: 'hsla(2, 96%, 67%, 1)', + id: 'S:0a53ae71956e65051b401603352731ff7c307cc8,', + }, + { + name: 'coralColorDangerIconHover', + type: 'color', + description: '', + hsla: 'hsla(2, 96%, 57%, 1)', + hex: '#fb2f28', + value: 'hsla(2, 96%, 57%, 1)', + id: 'S:84635db99dad36ac4176917f9f06853ad77e7128,', + }, + { + name: 'coralColorDangerIconActive', + type: 'color', + description: '', + hsla: 'hsla(2, 97%, 47%, 1)', + hex: '#eb0c04', + value: 'hsla(2, 97%, 47%, 1)', + id: 'S:a264361d3eee07a1fb417fa991479b91baf5badf,', + }, + { + name: 'coralColorSuccessIconActive', + type: 'color', + description: '', + hsla: 'hsla(110, 61%, 36%, 1)', + hex: '#369424', + value: 'hsla(110, 61%, 36%, 1)', + id: 'S:712126970bb11c2b0eee24e4d2f7a14974a73614,', + }, + { + name: 'coralColorSuccessIconHover', + type: 'color', + description: '', + hsla: 'hsla(110, 62%, 46%, 1)', + hex: '#45bd2d', + value: 'hsla(110, 62%, 46%, 1)', + id: 'S:5bf9f5e0c27fe5a6b99fbe623d9c44441ba092e4,', + }, + { + name: 'coralColorSuccessIcon', + type: 'color', + description: '', + hsla: 'hsla(110, 61%, 56%, 1)', + hex: '#62d44b', + value: 'hsla(110, 61%, 56%, 1)', + id: 'S:2846c4b1447ee8cd3c62bda922faacfa92ebe354,', + }, + { + name: 'coralColorWarningIconActive', + type: 'color', + description: '', + hsla: 'hsla(27, 98%, 19%, 1)', + hex: '#602c01', + value: 'hsla(27, 98%, 19%, 1)', + id: 'S:df78eadc193fc0af351fbcdf92fb5191cee83015,', + }, + { + name: 'coralColorWarningIconHover', + type: 'color', + description: '', + hsla: 'hsla(27, 99%, 29%, 1)', + hex: '#934301', + value: 'hsla(27, 99%, 29%, 1)', + id: 'S:b76056223e9150e85641eacc579c8eb270dd27e2,', + }, + { + name: 'coralColorWarningIcon', + type: 'color', + description: '', + hsla: 'hsla(27, 99%, 49%, 1)', + hex: '#f87001', + value: 'hsla(27, 99%, 49%, 1)', + id: 'S:eeb2b3b50b34a139f61b90c7d250dde2941fb805,', + }, + { + name: 'coralColorChartsNeutral', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 75%, 1)', + hex: '#bebebe', + value: 'hsla(0, 0%, 75%, 1)', + id: 'S:3286222654ca1fa189b4f6d23ef6444b269c7eb4,', + }, + { + name: 'coralColorChartsNeutralWeak', + type: 'color', + description: '', + hsla: 'hsla(206, 10%, 48%, 1)', + hex: '#6e7c87', + value: 'hsla(206, 10%, 48%, 1)', + id: 'S:41b6028767eb8edd4748bf68f3faf58540b22964,', + }, + { + name: 'coralColorChartsNeutralStrong', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 88%, 1)', + hex: '#e0e0e0', + value: 'hsla(0, 0%, 88%, 1)', + id: 'S:2d4a8333d042992c165cdf64f4a902843777a48f,', + }, + { + name: 'coralColorChartsNeutralHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 88%, 1)', + hex: '#e0e0e0', + value: 'hsla(0, 0%, 88%, 1)', + id: 'S:7b8e676d8686f34954848519062ec0bb5e5f1b83,', + }, + { + name: 'coralColorChartsSuccess', + type: 'color', + description: '', + hsla: 'hsla(148, 87%, 40%, 1)', + hex: '#0dbd5e', + value: 'hsla(148, 87%, 40%, 1)', + id: 'S:3a91f690ea607ab3aef56e74cf8dddc57ab0bc2a,', + }, + { + name: 'coralColorChartsSuccessWeak', + type: 'color', + description: '', + hsla: 'hsla(130, 52%, 91%, 1)', + hex: '#dcf4e0', + value: 'hsla(130, 52%, 91%, 1)', + id: 'S:223780a9a5f2a5cb182c34ca07f2742a04cb4304,', + }, + { + name: 'coralColorChartsSuccessStrong', + type: 'color', + description: '', + hsla: 'hsla(139, 50%, 22%, 1)', + hex: '#1c552e', + value: 'hsla(139, 50%, 22%, 1)', + id: 'S:5463753f1a581f81bd8256b71ed7f54214bb6b7a,', + }, + { + name: 'coralColorChartsSuccessHover', + type: 'color', + description: '', + hsla: 'hsla(139, 50%, 22%, 1)', + hex: '#1c552e', + value: 'hsla(139, 50%, 22%, 1)', + id: 'S:52b9e9b667e956ec97eefa4de49adaa04feb76f2,', + }, + { + name: 'coralColorChartsDanger', + type: 'color', + description: '', + hsla: 'hsla(4, 89%, 49%, 1)', + hex: '#ea1b0e', + value: 'hsla(4, 89%, 49%, 1)', + id: 'S:8aa39eb7d256925072987a8d3e163188873e9071,', + }, + { + name: 'coralColorChartsDangerWeak', + type: 'color', + description: '', + hsla: 'hsla(359, 69%, 73%, 1)', + hex: '#e9898a', + value: 'hsla(359, 69%, 73%, 1)', + id: 'S:b84cc981e657d448a9ed95cf85ba87d084797c03,', + }, + { + name: 'coralColorChartsDangerStrong', + type: 'color', + description: '', + hsla: 'hsla(359, 62%, 43%, 1)', + hex: '#b32a2c', + value: 'hsla(359, 62%, 43%, 1)', + id: 'S:dd0a23f2abf32c4ab2a239ee9c0a07b56c88acd3,', + }, + { + name: 'coralColorChartsDangerHover', + type: 'color', + description: '', + hsla: 'hsla(359, 62%, 43%, 1)', + hex: '#b32a2c', + value: 'hsla(359, 62%, 43%, 1)', + id: 'S:985f55d1e23f8a03b5037d12f8744d31aa6c2f7d,', + }, + { + name: 'coralColorChartsWarning', + type: 'color', + description: '', + hsla: 'hsla(32, 100%, 56%, 1)', + hex: '#ff9820', + value: 'hsla(32, 100%, 56%, 1)', + id: 'S:3d666ee4ebbec7f8205c44a4045e006f2c96af57,', + }, + { + name: 'coralColorChartsWarningWeak', + type: 'color', + description: '', + hsla: 'hsla(22, 88%, 84%, 1)', + hex: '#facbb0', + value: 'hsla(22, 88%, 84%, 1)', + id: 'S:47beb2ff8bf803a898ebfb47d1f14ef7e75f7939,', + }, + { + name: 'coralColorChartsWarningStrong', + type: 'color', + description: '', + hsla: 'hsla(22, 75%, 42%, 1)', + hex: '#b9541b', + value: 'hsla(22, 75%, 42%, 1)', + id: 'S:427d041b69ecae991aadf370279e07fa91fb651d,', + }, + { + name: 'coralColorChartsWarningHover', + type: 'color', + description: '', + hsla: 'hsla(22, 75%, 42%, 1)', + hex: '#b9541b', + value: 'hsla(22, 75%, 42%, 1)', + id: 'S:f8ddcb4ad465def3975ac99310865a7bac62f871,', + }, + { + name: 'coralColorChartsDefault', + type: 'color', + description: '', + hsla: 'hsla(216, 82%, 48%, 1)', + hex: '#1667df', + value: 'hsla(216, 82%, 48%, 1)', + id: 'S:60a1a68446864f3cda20f69892d512f45d257c3e,', + }, + { + name: 'coralColorChartsDefaultWeak', + type: 'color', + description: '', + hsla: 'hsla(204, 59%, 73%, 1)', + hex: '#91c2e3', + value: 'hsla(204, 59%, 73%, 1)', + id: 'S:40cda1f835eb18ac2dbb9c25e3766a3c4a795470,', + }, + { + name: 'coralColorChartsDefaultStrong', + type: 'color', + description: '', + hsla: 'hsla(204, 92%, 29%, 1)', + hex: '#06568d', + value: 'hsla(204, 92%, 29%, 1)', + id: 'S:360384632f423ad97b3599a78203948f4d88668c,', + }, + { + name: 'coralColorChartsDefaultHover', + type: 'color', + description: '', + hsla: 'hsla(204, 92%, 29%, 1)', + hex: '#06568d', + value: 'hsla(204, 92%, 29%, 1)', + id: 'S:10a7a14035bba005a39f0f50879d431cb2ea20b6,', + }, + { + name: 'coralColorChartsColor00', + type: 'color', + description: '', + hsla: 'hsla(48, 100%, 50%, 1)', + hex: '#ffcc00', + value: 'hsla(48, 100%, 50%, 1)', + id: 'S:6444c98e0c1e7f319436947d28bf99a63e614912,', + }, + { + name: 'coralColorChartsColor00Weak', + type: 'color', + description: '', + hsla: 'hsla(51, 91%, 82%, 1)', + hex: '#fbefa9', + value: 'hsla(51, 91%, 82%, 1)', + id: 'S:4537a26c9b6ea684a4d29538bfb786b3811000ae,', + }, + { + name: 'coralColorChartsColor00Strong', + type: 'color', + description: '', + hsla: 'hsla(48, 82%, 45%, 1)', + hex: '#d2ad15', + value: 'hsla(48, 82%, 45%, 1)', + id: 'S:7f9a6149aeb3d7bad9b69304b971eaf65f2a5e00,', + }, + { + name: 'coralColorChartsColor00Hover', + type: 'color', + description: '', + hsla: 'hsla(48, 82%, 45%, 1)', + hex: '#d2ad15', + value: 'hsla(48, 82%, 45%, 1)', + id: 'S:64444911ef40365ca1cf6a66c7ab9033faaf483d,', + }, + { + name: 'coralColorChartsColor01', + type: 'color', + description: '', + hsla: 'hsla(216, 82%, 48%, 1)', + hex: '#1667df', + value: 'hsla(216, 82%, 48%, 1)', + id: 'S:0808a61f22964ce3a98da38fed10198b83b4f4d7,', + }, + { + name: 'coralColorChartsColor01Weak', + type: 'color', + description: '', + hsla: 'hsla(204, 59%, 73%, 1)', + hex: '#91c2e3', + value: 'hsla(204, 59%, 73%, 1)', + id: 'S:b1d02ff88d90d6d40c020511a5f866f9fd7fc8d5,', + }, + { + name: 'coralColorChartsColor01Strong', + type: 'color', + description: '', + hsla: 'hsla(204, 92%, 29%, 1)', + hex: '#06568d', + value: 'hsla(204, 92%, 29%, 1)', + id: 'S:31acb2e4dc4822b60c188dab643f43a5fe2413a5,', + }, + { + name: 'coralColorChartsColor01Hover', + type: 'color', + description: '', + hsla: 'hsla(204, 92%, 29%, 1)', + hex: '#06568d', + value: 'hsla(204, 92%, 29%, 1)', + id: 'S:ad2a4cb1a59b1747fd3cd56e8867ec500e7958a7,', + }, + { + name: 'coralColorChartsColor02', + type: 'color', + description: '', + hsla: 'hsla(194, 92%, 50%, 1)', + hex: '#0abef5', + value: 'hsla(194, 92%, 50%, 1)', + id: 'S:e8c6c0bfb82c701c4ee7a2314d0920cee5a1912a,', + }, + { + name: 'coralColorChartsColor02Weak', + type: 'color', + description: '', + hsla: 'hsla(194, 91%, 91%, 1)', + hex: '#d2f3fd', + value: 'hsla(194, 91%, 91%, 1)', + id: 'S:d52b809a2b0af6cadd2490dd09b8bab83d2c8623,', + }, + { + name: 'coralColorChartsColor02Strong', + type: 'color', + description: '', + hsla: 'hsla(194, 93%, 32%, 1)', + hex: '#067b9f', + value: 'hsla(194, 93%, 32%, 1)', + id: 'S:128c8c2ee55669ab88695daaf39aa87f43468058,', + }, + { + name: 'coralColorChartsColor02Hover', + type: 'color', + description: '', + hsla: 'hsla(194, 93%, 32%, 1)', + hex: '#067b9f', + value: 'hsla(194, 93%, 32%, 1)', + id: 'S:607e8d26b6d1386d63ac448ef541ab132a1ebd93,', + }, + { + name: 'coralColorChartsColor03', + type: 'color', + description: '', + hsla: 'hsla(140, 39%, 79%, 1)', + hex: '#b3dec1', + value: 'hsla(140, 39%, 79%, 1)', + id: 'S:f997b6392d59d4dff2b95c9c7501decd969f9b2d,', + }, + { + name: 'coralColorChartsColor03Weak', + type: 'color', + description: '', + hsla: 'hsla(138, 40%, 92%, 1)', + hex: '#e1f2e6', + value: 'hsla(138, 40%, 92%, 1)', + id: 'S:66fe7016f8ffa3f4056cab1a9e790b1ab19f4c3f,', + }, + { + name: 'coralColorChartsColor03Strong', + type: 'color', + description: '', + hsla: 'hsla(139, 11%, 35%, 1)', + hex: '#506356', + value: 'hsla(139, 11%, 35%, 1)', + id: 'S:566bd60e0980fef9f6fb4c66ca5ec4bf75273eea,', + }, + { + name: 'coralColorChartsColor03Hover', + type: 'color', + description: '', + hsla: 'hsla(139, 11%, 35%, 1)', + hex: '#506356', + value: 'hsla(139, 11%, 35%, 1)', + id: 'S:827e12c4ea2c3eb405b87a80317edcaeddd9fcd2,', + }, + { + name: 'coralColorChartsColor04', + type: 'color', + description: '', + hsla: 'hsla(148, 87%, 40%, 1)', + hex: '#0dbd5e', + value: 'hsla(148, 87%, 40%, 1)', + id: 'S:9dd7ece1a4c571a01bf0b20f94a339489e78ee3d,', + }, + { + name: 'coralColorChartsColor04Weak', + type: 'color', + description: '', + hsla: 'hsla(130, 52%, 91%, 1)', + hex: '#dcf4e0', + value: 'hsla(130, 52%, 91%, 1)', + id: 'S:a2deb1f02d45c65774c398d6cb83d955ca01de76,', + }, + { + name: 'coralColorChartsColor04Strong', + type: 'color', + description: '', + hsla: 'hsla(139, 50%, 22%, 1)', + hex: '#1c552e', + value: 'hsla(139, 50%, 22%, 1)', + id: 'S:96c0194808536731f972be77edcb091b1342c181,', + }, + { + name: 'coralColorChartsColor04Hover', + type: 'color', + description: '', + hsla: 'hsla(139, 50%, 22%, 1)', + hex: '#1c552e', + value: 'hsla(139, 50%, 22%, 1)', + id: 'S:2022ae101dbead5faca0847a872f4a13fd65ed2c,', + }, + { + name: 'coralColorChartsColor05', + type: 'color', + description: '', + hsla: 'hsla(324, 68%, 71%, 1)', + hex: '#e884c0', + value: 'hsla(324, 68%, 71%, 1)', + id: 'S:c4842c962e6ed3bb8cc392ffef69be86fa4c487c,', + }, + { + name: 'coralColorChartsColor05Weak', + type: 'color', + description: '', + hsla: 'hsla(323, 69%, 95%, 1)', + hex: '#fbe9f4', + value: 'hsla(323, 69%, 95%, 1)', + id: 'S:8898cfa3b0a395430151caaba0953352a6f10a70,', + }, + { + name: 'coralColorChartsColor05Strong', + type: 'color', + description: '', + hsla: 'hsla(324, 28%, 49%, 1)', + hex: '#a15b85', + value: 'hsla(324, 28%, 49%, 1)', + id: 'S:3be3187416a5ab4f68fbe498bd56435968b7b95e,', + }, + { + name: 'coralColorChartsColor05Hover', + type: 'color', + description: '', + hsla: 'hsla(324, 28%, 49%, 1)', + hex: '#a15b85', + value: 'hsla(324, 28%, 49%, 1)', + id: 'S:af379e2e5aecaee277a7935b6ebd594fbd7d77f9,', + }, + { + name: 'coralColorChartsColor06', + type: 'color', + description: '', + hsla: 'hsla(280, 75%, 58%, 1)', + hex: '#b045e5', + value: 'hsla(280, 75%, 58%, 1)', + id: 'S:b28f4af5673ace257313261d28057f2b48e44882,', + }, + { + name: 'coralColorChartsColor06Weak', + type: 'color', + description: '', + hsla: 'hsla(279, 77%, 88%, 1)', + hex: '#e8caf8', + value: 'hsla(279, 77%, 88%, 1)', + id: 'S:d28944e5d2a0d6513385e36f2d2a29f4c736fd67,', + }, + { + name: 'coralColorChartsColor06Strong', + type: 'color', + description: '', + hsla: 'hsla(280, 54%, 36%, 1)', + hex: '#6e2b8f', + value: 'hsla(280, 54%, 36%, 1)', + id: 'S:470f28a6ce87fee5f7de1ce57f6378da2d9172aa,', + }, + { + name: 'coralColorChartsColor06Hover', + type: 'color', + description: '', + hsla: 'hsla(280, 54%, 36%, 1)', + hex: '#6e2b8f', + value: 'hsla(280, 54%, 36%, 1)', + id: 'S:77b1ffc55e4d9589312ddce873657d4e56457b1f,', + }, + { + name: 'coralColorChartsColor07', + type: 'color', + description: '', + hsla: 'hsla(4, 89%, 49%, 1)', + hex: '#ea1b0e', + value: 'hsla(4, 89%, 49%, 1)', + id: 'S:2a7a643c04df162767b950d50085852ec82b3465,', + }, + { + name: 'coralColorChartsColor07Weak', + type: 'color', + description: '', + hsla: 'hsla(359, 69%, 73%, 1)', + hex: '#e9898a', + value: 'hsla(359, 69%, 73%, 1)', + id: 'S:d060bb5d7716de1d5811173ae39fe440d17fedab,', + }, + { + name: 'coralColorChartsColor07Strong', + type: 'color', + description: '', + hsla: 'hsla(359, 62%, 43%, 1)', + hex: '#b32a2c', + value: 'hsla(359, 62%, 43%, 1)', + id: 'S:d26fe825f80405e1247e46220e44ebacd760b0bc,', + }, + { + name: 'coralColorChartsColor07Hover', + type: 'color', + description: '', + hsla: 'hsla(359, 62%, 43%, 1)', + hex: '#b32a2c', + value: 'hsla(359, 62%, 43%, 1)', + id: 'S:a9c71244bf611ee9f67a0254890a505184b78f6a,', + }, + { + name: 'coralColorChartsColor08', + type: 'color', + description: '', + hsla: 'hsla(22, 88%, 54%, 1)', + hex: '#f16e23', + value: 'hsla(22, 88%, 54%, 1)', + id: 'S:e5b08742c7524533d54ed8b92417168cbb0d48b9,', + }, + { + name: 'coralColorChartsColor08Weak', + type: 'color', + description: '', + hsla: 'hsla(22, 88%, 84%, 1)', + hex: '#facbb0', + value: 'hsla(22, 88%, 84%, 1)', + id: 'S:713a1ef8a20fa6aed2d1c434dc927f17e0d834bd,', + }, + { + name: 'coralColorChartsColor08Strong', + type: 'color', + description: '', + hsla: 'hsla(22, 75%, 42%, 1)', + hex: '#b9541b', + value: 'hsla(22, 75%, 42%, 1)', + id: 'S:e5f922fd5942f5527ca496a0b5d7ef1112080036,', + }, + { + name: 'coralColorChartsColor08Hover', + type: 'color', + description: '', + hsla: 'hsla(22, 75%, 42%, 1)', + hex: '#b9541b', + value: 'hsla(22, 75%, 42%, 1)', + id: 'S:ff9e7d61eea874a0d2fa0697f64ccbcb869d7bcf,', + }, + { + name: 'coralColorChartsColor09', + type: 'color', + description: '', + hsla: 'hsla(34, 34%, 45%, 1)', + hex: '#99784c', + value: 'hsla(34, 34%, 45%, 1)', + id: 'S:3459f99731f6e21a0c346c703ce03d9662b31774,', + }, + { + name: 'coralColorChartsColor09Weak', + type: 'color', + description: '', + hsla: 'hsla(35, 28%, 82%, 1)', + hex: '#ded3c4', + value: 'hsla(35, 28%, 82%, 1)', + id: 'S:0103d0ce726aa335bee66c373fc6c7c68314e42e,', + }, + { + name: 'coralColorChartsColor09Strong', + type: 'color', + description: '', + hsla: 'hsla(35, 34%, 27%, 1)', + hex: '#5b482d', + value: 'hsla(35, 34%, 27%, 1)', + id: 'S:8e0e06029d5d12b605e62886ecba9ed9a23c6555,', + }, + { + name: 'coralColorChartsColor09Hover', + type: 'color', + description: '', + hsla: 'hsla(35, 34%, 27%, 1)', + hex: '#5b482d', + value: 'hsla(35, 34%, 27%, 1)', + id: 'S:33467da234d07a52f1a321d511604be0085ee053,', + }, + { + name: 'coralColorNeutralBorderStrong', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 92%, 1)', + hex: '#ebebeb', + value: 'hsla(0, 0%, 92%, 1)', + id: 'S:6cf482087de363ed74112bb720849d3cae540491,', + }, + { + name: 'coralColorNeutralBorderStrongHover', + type: 'color', + description: '', + hsla: 'hsla(216, 30%, 82%, 1)', + hex: '#c3cedf', + value: 'hsla(216, 30%, 82%, 1)', + id: 'S:c9cdc827cbbdf0cd33bb0dfc754ed507ce7ec904,', + }, + { + name: 'coralColorNeutralIcon', + type: 'color', + description: '', + hsla: 'hsla(210, 17%, 93%, 1)', + hex: '#eaedf0', + value: 'hsla(210, 17%, 93%, 1)', + id: 'S:ea491de561b1aad44427eab1639b4f67ed6af9cc,', + }, + { + name: 'coralColorNeutralIconInverted', + type: 'color', + description: '', + hsla: 'hsla(210, 7%, 79%, 1)', + hex: '#c5c9cd', + value: 'hsla(210, 7%, 79%, 1)', + id: 'S:be4a8493d880e2ce69feb90d8d04e9251fefa640,', + }, + { + name: 'coralColorNeutralIconWeak', + type: 'color', + description: '', + hsla: 'hsla(206, 24%, 83%, 1)', + hex: '#c8d4dd', + value: 'hsla(206, 24%, 83%, 1)', + id: 'S:193d2d0604570ca986711e869ecd6df674cba1bd,', + }, + { + name: 'coralColorChartsDefaultText', + type: 'color', + description: '', + hsla: 'hsla(205, 87%, 94%, 1)', + hex: '#e3f2fd', + value: 'hsla(205, 87%, 94%, 1)', + id: 'S:95feb6e5caef73a4f8be717f657a0620cfe8c242,', + }, + { + name: 'coralColorChartsDefaultTextStrong', + type: 'color', + description: '', + hsla: 'hsla(205, 93%, 22%, 1)', + hex: '#04426d', + value: 'hsla(205, 93%, 22%, 1)', + id: 'S:54d0b282048baf9da510f9fcbb010db00c1de5d3,', + }, + { + name: 'coralColorChartsDefaultTextWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 93%, 94%, 1)', + hex: '#e3f2fe', + value: 'hsla(207, 93%, 94%, 1)', + id: 'S:6a7d2aac345613dc7dc5cb90ed1a81654301fb77,', + }, + { + name: 'coralColorChartsColor09Text', + type: 'color', + description: '', + hsla: 'hsla(36, 36%, 5%, 1)', + hex: '#130f09', + value: 'hsla(36, 36%, 5%, 1)', + id: 'S:659455accf5760a197feff3f6d718f5930787051,', + }, + { + name: 'coralColorChartsColor09TextStrong', + type: 'color', + description: '', + hsla: 'hsla(36, 36%, 5%, 1)', + hex: '#130f09', + value: 'hsla(36, 36%, 5%, 1)', + id: 'S:236b1f146be3434b33302601113fb092484766bf,', + }, + { + name: 'coralColorChartsColor09TextWeak', + type: 'color', + description: '', + hsla: 'hsla(35, 28%, 82%, 1)', + hex: '#ded3c4', + value: 'hsla(35, 28%, 82%, 1)', + id: 'S:7f2e610507e21b509888d51144abd8403c443ae4,', + }, + { + name: 'coralColorNeutralBackgroundHeavy', + type: 'color', + description: '', + hsla: 'hsla(204, 18%, 11%, 1)', + hex: '#171d21', + value: 'hsla(204, 18%, 11%, 1)', + id: 'S:65df702aa0cdfdc3cac4d78123da59c2f4d83519,', + }, + { + name: 'coralColorIllustrationColor01', + type: 'color', + description: '', + hsla: 'hsla(358, 40%, 53%, 1)', + hex: '#b8585c', + value: 'hsla(358, 40%, 53%, 1)', + id: 'S:4ba3c464f3e7a635ab7640ae0ebf5bf5839c4a2a,', + }, + { + name: 'coralColorIllustrationColor02', + type: 'color', + description: '', + hsla: 'hsla(355, 39%, 61%, 1)', + hex: '#c2747a', + value: 'hsla(355, 39%, 61%, 1)', + id: 'S:37f1eae01dbb8626bfc383ac4645c148da5f13ed,', + }, + { + name: 'coralColorIllustrationColor03', + type: 'color', + description: '', + hsla: 'hsla(349, 15%, 71%, 1)', + hex: '#c1abaf', + value: 'hsla(349, 15%, 71%, 1)', + id: 'S:9b29963cb9e511f47e652388948df4a65b6aa581,', + }, + { + name: 'coralColorIllustrationColor04', + type: 'color', + description: '', + hsla: 'hsla(211, 54%, 15%, 1)', + hex: '#12273d', + value: 'hsla(211, 54%, 15%, 1)', + id: 'S:cd6ec85e18157192a80497e75669741be5033fca,', + }, + { + name: 'coralColorIllustrationColor05', + type: 'color', + description: '', + hsla: 'hsla(212, 28%, 37%, 1)', + hex: '#455e7a', + value: 'hsla(212, 28%, 37%, 1)', + id: 'S:880a64f54ec715cf822e645d790b40a6c575db9e,', + }, + { + name: 'coralColorIllustrationColor06', + type: 'color', + description: '', + hsla: 'hsla(212, 29%, 61%, 1)', + hex: '#7d99b8', + value: 'hsla(212, 29%, 61%, 1)', + id: 'S:6827b5c2ad9331c08b9057f3b4175bce503f6fb1,', + }, + { + name: 'coralColorIllustrationSkintone01', + type: 'color', + description: '', + hsla: 'hsla(20, 29%, 66%, 1)', + hex: '#c2a08f', + value: 'hsla(20, 29%, 66%, 1)', + id: 'S:0efbd574980a36ce591b5448477b1172d1229bd8,', + }, + { + name: 'coralColorIllustrationSkintone02', + type: 'color', + description: '', + hsla: 'hsla(21, 23%, 49%, 1)', + hex: '#99735f', + value: 'hsla(21, 23%, 49%, 1)', + id: 'S:22fe9c447a404340023bc84d572c0f9d2c8cb4e4,', + }, + { + name: 'coralColorIllustrationSkintone03', + type: 'color', + description: '', + hsla: 'hsla(17, 29%, 22%, 1)', + hex: '#473027', + value: 'hsla(17, 29%, 22%, 1)', + id: 'S:277c7f8c53f16c317a3c8b02619b58bd887ee941,', + }, + { + name: 'coralColorIllustrationShadow', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 0%, 0.1)', + hex: '#0000001f', + value: 'hsla(0, 0%, 0%, 0.1)', + id: 'S:c2d4a5aff8da216258237cee236516287b4430cf,', + }, + { + name: 'coralColorIllustrationColor07', + type: 'color', + description: '', + hsla: 'hsla(213, 13%, 35%, 1)', + hex: '#4e5966', + value: 'hsla(213, 13%, 35%, 1)', + id: 'S:e6a32f9ebcd47f377de4f76b9f20cb98315cf209,', + }, + { + name: 'coralColorIllustrationColor08', + type: 'color', + description: '', + hsla: 'hsla(212, 13%, 19%, 1)', + hex: '#2b3138', + value: 'hsla(212, 13%, 19%, 1)', + id: 'S:9ae7b3af0160051362455a2168ff8645a42f703b,', + }, + { + name: 'coralColorIllustrationColor09', + type: 'color', + description: '', + hsla: 'hsla(240, 3%, 12%, 1)', + hex: '#1d1d1f', + value: 'hsla(240, 3%, 12%, 1)', + id: 'S:e73f099a6ec3332931b3c1f961795360426572a3,', + }, + { + name: 'coralColorAccentBackgroundSelected', + type: 'color', + description: '', + hsla: 'hsla(199, 73%, 13%, 1)', + hex: '#092a39', + value: 'hsla(199, 73%, 13%, 1)', + id: 'S:e90340e641ca4e9da503dbae26e63f01ee15ba6a,', + }, + { + name: 'coralColorBrandText', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:d9b4db049df4a13c6505a8245821011e32bed010,', + }, + { + name: 'coralColorBrandTextHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:d1b7e7720cf0ed2ebe5dfa995b395f2fc051c72b,', + }, + { + name: 'coralColorBrandTextActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:36357afae4a057baed96e9840d274a9798039129,', + }, + { + name: 'coralColorBrandTextInverted', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 38%, 1)', + hex: '#616161', + value: 'hsla(0, 0%, 38%, 1)', + id: 'S:c1b0dcc4dfb5b0e6507f17eb566806be0437aba9,', + }, + { + name: 'coralColorBrandTextInvertedHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:8b1aa5c9b617e6064abfa4ed095acdc6eb1e2865,', + }, + { + name: 'coralColorBrandTextInvertedActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:cb0de99f17eb720080ebd854678df271d7c3c21a,', + }, + { + name: 'coralColorBrandTextSelected', + type: 'color', + description: '', + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:d5964e997b2bf6332dc2b3fc4e636e0e2246f372,', + }, + { + name: 'coralColorBrandBackgroundWeak', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 0)', + hex: '#ffffff00', + value: 'hsla(0, 0%, 100%, 0)', + id: 'S:c3391e758de221c656756f472678d07818b8dcb8,', + }, + { + name: 'coralColorBrandBackgroundWeakHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 0.1)', + hex: '#ffffff1f', + value: 'hsla(0, 0%, 100%, 0.1)', + id: 'S:46cd1240cbbd51a4920df09d91017e89614d2435,', + }, + { + name: 'coralColorBrandBackgroundWeakActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 0.1)', + hex: '#ffffff1f', + value: 'hsla(0, 0%, 100%, 0.1)', + id: 'S:4056934c0f92ed878b14dcc69f1d06d43ca94315,', + }, + { + name: 'coralColorBrandBackgroundSelected', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:12204f8141b2d867b7ed1fd4896c7899ca49a842,', + }, + { + name: 'coralColorBrandBackgroundInverted', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 0)', + hex: '#20202000', + value: 'hsla(0, 0%, 13%, 0)', + id: 'S:4c6023974e1efb6fd9605ded5061dbe21efc52ac,', + }, + { + name: 'coralColorBrandBackgroundInvertedHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 0.1)', + hex: '#2020201f', + value: 'hsla(0, 0%, 13%, 0.1)', + id: 'S:be496e916a988be4cd89a66c076f3d2a23eef370,', + }, + { + name: 'coralColorBrandBackgroundInvertedActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 0.1)', + hex: '#2020201f', + value: 'hsla(0, 0%, 13%, 0.1)', + id: 'S:2f60f448e96ff45d0fd7e1b8c49d7255392e7216,', + }, + { + name: 'coralColorBrandBorder', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:e9153d96d1349962e95db1a4420ee72e488c157a,', + }, + { + name: 'coralColorBrandBorderHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:679f24a1a554ab833b1794ac795d6744c9252ca2,', + }, + { + name: 'coralColorBrandBorderActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:55ca3f97765aa81f970cc305772d974d929094f9,', + }, + { + name: 'coralColorInfoText', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 65%, 1)', + hex: '#66bfe6', + value: 'hsla(198, 72%, 65%, 1)', + id: 'S:6f3db30a46ffd296ab16f6ed8dc25bc2e03e697f,', + }, + { + name: 'coralColorInfoTextHover', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 55%, 1)', + hex: '#3aaddf', + value: 'hsla(198, 72%, 55%, 1)', + id: 'S:7030b2c6e7b7e00b33aa9876cd64f3ffac9d291b,', + }, + { + name: 'coralColorInfoTextActive', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 45%, 1)', + hex: '#2093c5', + value: 'hsla(198, 72%, 45%, 1)', + id: 'S:29a4e8bbd556ae686e212cfdec63568445c038f4,', + }, + { + name: 'coralColorInfoIcon', + type: 'color', + description: '', + hsla: 'hsla(198, 76%, 67%, 1)', + hex: '#69c4eb', + value: 'hsla(198, 76%, 67%, 1)', + id: 'S:2646d355a4861045e9c49269b5c31f576f958685,', + }, + { + name: 'coralColorInfoTextWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:a8f7a13273f34a14fae5a21486d6b88f21ea78fd,', + }, + { + name: 'coralColorInfoTextWeakHover', + type: 'color', + description: '', + hsla: 'hsla(199, 71%, 15%, 1)', + hex: '#0b3142', + value: 'hsla(199, 71%, 15%, 1)', + id: 'S:a5c0f4e8600a443d2ad88e00fe975ba3d0897715,', + }, + { + name: 'coralColorInfoTextWeakActive', + type: 'color', + description: '', + hsla: 'hsla(199, 73%, 10%, 1)', + hex: '#07202c', + value: 'hsla(199, 73%, 10%, 1)', + id: 'S:4676af4e2e6f128d0d91a964f73b5007b3a95991,', + }, + { + name: 'coralColorInfoTextStrong', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 75%, 1)', + hex: '#91d1ed', + value: 'hsla(198, 72%, 75%, 1)', + id: 'S:9e79b3bdb022d479d862a328bea43869139fc5f6,', + }, + { + name: 'coralColorInfoTextStrongHover', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 65%, 1)', + hex: '#66bfe6', + value: 'hsla(198, 72%, 65%, 1)', + id: 'S:2c61daf455b5d7b8f9d0079e2ed0bd86446c68ac,', + }, + { + name: 'coralColorInfoTextStrongActive', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 55%, 1)', + hex: '#3aaddf', + value: 'hsla(198, 72%, 55%, 1)', + id: 'S:18cc5561d241cdcbde631bd6ce83cff5cfb66570,', + }, + { + name: 'coralColorInfoBackground', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 25%, 1)', + hex: '#12516d', + value: 'hsla(198, 72%, 25%, 1)', + id: 'S:14870d03624d16eb044d220b5682225813fd667c,', + }, + { + name: 'coralColorInfoBackgroundHover', + type: 'color', + description: '', + hsla: 'hsla(199, 78%, 20%, 1)', + hex: '#0b425b', + value: 'hsla(199, 78%, 20%, 1)', + id: 'S:1af64da0d0a40561f4d06788de331cfc2727ead9,', + }, + { + name: 'coralColorInfoBackgroundActive', + type: 'color', + description: '', + hsla: 'hsla(199, 73%, 10%, 1)', + hex: '#07202c', + value: 'hsla(199, 73%, 10%, 1)', + id: 'S:5e66ec2e17b9a7538606b594e71c5ea4b921fb3b,', + }, + { + name: 'coralColorInfoBackgroundWeak', + type: 'color', + description: '', + hsla: 'hsla(207, 18%, 24%, 1)', + hex: '#323e48', + value: 'hsla(207, 18%, 24%, 1)', + id: 'S:44020aee41cc9e6d79b3ffdc66e6ffbbfde3cdc7,', + }, + { + name: 'coralColorInfoBackgroundWeakHover', + type: 'color', + description: '', + hsla: 'hsla(199, 71%, 15%, 1)', + hex: '#0b3142', + value: 'hsla(199, 71%, 15%, 1)', + id: 'S:e5dc43139c3c12f4678023973e64d2a0b26b037a,', + }, + { + name: 'coralColorInfoBackgroundWeakActive', + type: 'color', + description: '', + hsla: 'hsla(199, 73%, 10%, 1)', + hex: '#07202c', + value: 'hsla(199, 73%, 10%, 1)', + id: 'S:9cc0c50389fcf2dafdf264e7ee6dee355388161b,', + }, + { + name: 'coralColorInfoBackgroundStrong', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 75%, 1)', + hex: '#91d1ed', + value: 'hsla(198, 72%, 75%, 1)', + id: 'S:39a095f257498829c89e0388367390aa0f7b709d,', + }, + { + name: 'coralColorInfoBackgroundStrongHover', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 65%, 1)', + hex: '#66bfe6', + value: 'hsla(198, 72%, 65%, 1)', + id: 'S:09d37ecaf187980c51ccfcbb4ecf7eae4618ebc4,', + }, + { + name: 'coralColorInfoBackgroundStrongActive', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 55%, 1)', + hex: '#3aaddf', + value: 'hsla(198, 72%, 55%, 1)', + id: 'S:b57fa6cbea76791efcd07bac6cf2ff5deb6c35c0,', + }, + { + name: 'coralColorInfoBorder', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 75%, 1)', + hex: '#91d1ed', + value: 'hsla(198, 72%, 75%, 1)', + id: 'S:452a566bdcbe14b34791b553864b0ac722e1ad43,', + }, + { + name: 'coralColorInfoBorderHover', + type: 'color', + description: '', + hsla: 'hsla(198, 72%, 65%, 1)', + hex: '#66bfe6', + value: 'hsla(198, 72%, 65%, 1)', + id: 'S:a25ce8d97f9486f8d747293df4b73c6ffa88c6a1,', + }, + { + name: 'coralColorInfoBorderActive', + type: 'color', + description: '', + hsla: 'hsla(199, 72%, 55%, 1)', + hex: '#3aacdf', + value: 'hsla(199, 72%, 55%, 1)', + id: 'S:a265bcbee6415fa251e00d2622acb4112913c5db,', + }, + { + name: 'coralColorInfoIconHover', + type: 'color', + description: '', + hsla: 'hsla(198, 76%, 57%, 1)', + hex: '#3eb2e5', + value: 'hsla(198, 76%, 57%, 1)', + id: 'S:a10cbc0cfc8b0dcaebcdbec609557949e24bd24f,', + }, + { + name: 'coralColorInfoIconActive', + type: 'color', + description: '', + hsla: 'hsla(198, 77%, 47%, 1)', + hex: '#1c9bd3', + value: 'hsla(198, 77%, 47%, 1)', + id: 'S:1101791c5475660c12c0360031f1bbbb9af53864,', + }, + { + name: 'coralColorBrandIcon', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:b7e520cce22bea7edc6e062c7e54e77fcd959940,', + }, + { + name: 'coralColorBrandIconHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:09e7d13ffd997d1059f6030f05c4423ef16c4847,', + }, + { + name: 'coralColorBrandIconActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:41d8fb8ddaed9dfdc9eb801dcb4e0886ef5dea6d,', + }, + { + name: 'coralColorBrandIconInverted', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 38%, 1)', + hex: '#616161', + value: 'hsla(0, 0%, 38%, 1)', + id: 'S:b1f2e9c5e470901288e952e0bd2ea2467c1635f8,', + }, + { + name: 'coralColorBrandIconInvertedHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:99b04f690cc807d8305f91a422dab138cf6e0ac4,', + }, + { + name: 'coralColorBrandIconInvertedActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:47e36a0519e66c66b2c8258757f1dbc0cc1727ea,', + }, + { + name: 'coralColorBrandIconSelected', + type: 'color', + description: '', + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:4f82d9b559d3c5db18c692a3869cc7e52657367c,', + }, + { + name: 'coralColorBrandingBackground', + type: 'gradient', + description: '', + value: 'linear-gradient(133deg,hsla(226, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%)', + id: 'S:bf314fa1e5204e02f67ed4064f24d642d1fc9efa,', + }, + { + name: 'coralColorBrandingNavigation', + type: 'gradient', + description: '', + value: 'linear-gradient(133deg,hsla(222, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%)', + id: 'S:1fa5a7a976d98a462474b9f529662749f847cdd0,', + }, + { + name: 'coralColorBrandBackground', + type: 'gradient', + description: '', + value: 'linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%)', + id: 'S:f3b995fb9442e71d002302b49f324dd0a277fbc3,', + }, + { + name: 'coralSpacingXxs', + type: 'measure', + description: '', + value: '0.4rem', + id: 'c1e38f11-415e-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralSpacingXs', + type: 'measure', + description: '', + value: '0.8rem', + id: '7b7551d0-b4d6-11ec-a885-f33e1144cd00', + }, + { + name: 'coralSpacingS', + type: 'measure', + description: '', + value: '1.2rem', + id: '7ee76e20-b4d6-11ec-80ec-81d7ed62932a', + }, + { + name: 'coralSpacingM', + type: 'measure', + description: '', + value: '1.6rem', + id: '86ce70c0-b4d6-11ec-b76b-3da590a15504', + }, + { + name: 'coralSpacingL', + type: 'measure', + description: '', + value: '2.8rem', + id: '8aa3bbb0-b4d6-11ec-b930-0b6aacdff92c', + }, + { + name: 'coralSpacingXl', + type: 'measure', + description: '', + value: '3.6rem', + id: '8f1ac4e0-b4d6-11ec-9806-69893358e985', + }, + { + name: 'coralSizingMinimal', + type: 'measure', + description: '', + value: '1.2rem', + id: '9981e2b0-b4d6-11ec-ac1e-2b6d1d6a2c7f', + }, + { + name: 'coralSizingXxxs', + type: 'measure', + description: '', + value: '1.6rem', + id: 'bfda7990-b4d6-11ec-9c65-b1b879a05039', + }, + { + name: 'coralSizingXxs', + type: 'measure', + description: '', + value: '2rem', + id: 'c350b490-b4d6-11ec-9d5d-ad9dbd31768f', + }, + { + name: 'coralSizingXs', + type: 'measure', + description: '', + value: '2.4rem', + id: 'c8c1ae20-b4d6-11ec-a8ef-9de523cb52d2', + }, + { + name: 'coralSizingS', + type: 'measure', + description: '', + value: '2.8rem', + id: 'cc3b6b90-b4d6-11ec-8b31-1791d0a18d04', + }, + { + name: 'coralSizingM', + type: 'measure', + description: '', + value: '3.6rem', + id: 'd5d26820-b4d6-11ec-b6e7-13f783838bd4', + }, + { + name: 'coralSizingL', + type: 'measure', + description: '', + value: '4rem', + id: 'd9cb1990-b4d6-11ec-868e-75c32f231580', + }, + { + name: 'coralSizingXxxl', + type: 'measure', + description: '', + value: '22rem', + id: 'dddb71b0-b4d6-11ec-a762-a9e3930b8774', + }, + { + name: 'coralSizingMaximal', + type: 'measure', + description: '', + value: '32rem', + id: 'e21f0ed0-b4d6-11ec-bb22-090b530f3237', + }, + { + name: 'coralElevationShadowNeutralM', + type: 'shadow', + description: '', + value: '0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.5)', + id: 'S:1e46bcc3593665ea527e656cb28e857f111e6864,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralL', + type: 'shadow', + description: '', + value: '0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.5)', + id: 'S:8bf21eea402fda80510e8657d5d8db538640bd02,:shadow:0', + }, + { + name: 'coralElevationShadowAccent', + type: 'shadow', + description: '', + value: '0rem 0.1rem 0.1rem 0rem hsla(198, 72%, 75%, 0.3)', + id: 'S:fe0699876a0912d91d178c69d81969b011a5eb58,:shadow:0', + }, + { + name: 'coralElevationShadowSuccess', + type: 'shadow', + description: '', + value: '0rem 0.1rem 0.1rem 0rem hsla(110, 50%, 70%, 0.3)', + id: 'S:9ca8c51ead5e415ff9677d8bb4aeb39b28a7cb21,:shadow:0', + }, + { + name: 'coralElevationShadowDanger', + type: 'shadow', + description: '', + value: '0rem 0.1rem 0.1rem 0rem hsla(359, 100%, 78%, 0.3)', + id: 'S:96007327fd92b029a90eca0a30ca2b30249911e1,:shadow:0', + }, + { + name: 'coralElevationShadowWarning', + type: 'shadow', + description: '', + value: '0rem 0.1rem 0.1rem 0rem hsla(27, 98%, 67%, 0.3)', + id: 'S:f112889f1f57915b2f906b24fc07133ad0da4705,:shadow:0', + }, + { + name: 'coralElevationShadowBeta', + type: 'shadow', + description: '', + value: '0rem 0.1rem 0.1rem 0rem hsla(279, 34%, 78%, 0.3)', + id: 'S:2f8bea6090298b26e6c486703d4285e7b76433fc,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralInvertedM', + type: 'shadow', + description: '', + value: '0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 2%, 0.5)', + id: 'S:a5099a594218ccacd1f632af854309e6422c7f83,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralInvertedL', + type: 'shadow', + description: '', + value: '0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 5%, 0.5)', + id: 'S:4a469b9d512c8d4b89bd6f9cf8c40fc2a40b921d,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralS', + type: 'shadow', + description: '', + value: '0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5)', + id: 'S:c248e5315e126cc17860b114f6516a07a7832de1,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralInvertedS', + type: 'shadow', + description: '', + value: '0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 2%, 0.5)', + id: 'S:87123d2a6072733369a2eff12b6c5ddfbe208320,:shadow:0', + }, + { + name: 'coralHeadingL', + type: 'typography', + description: '', + value: '600 1.8rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.8rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:3e880348927c5dafc591f6ea24c9583b5372a076,', + }, + { + name: 'coralHeadingM', + type: 'typography', + description: '', + value: '600 1.6rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.6rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:fd2a41bdd7889fa1dcca1d3725ba080f235deb8d,', + }, + { + name: 'coralHeadingS', + type: 'typography', + description: '', + value: '600 1.4rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:a64f9cf77e1f6963661c1715744ad848e5da28bf,', + }, + { + name: 'coralParagraphM', + type: 'typography', + description: '', + value: '400 1.4rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '400', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:917d3089d5c99880f093dedfe802634dc734e627,', + }, + { + name: 'coralParagraphMBold', + type: 'typography', + description: '', + value: '600 1.4rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:9c15e3df6a89629144480cfd86b06a8a351e6abf,', + }, + { + name: 'coralParagraphS', + type: 'typography', + description: '', + value: '400 1.2rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '400', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:9cba41ba25fb01755b4d07eb823f6707a0cd6d4e,', + }, + { + name: 'coralParagraphSBold', + type: 'typography', + description: '', + value: '600 1.2rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:db3cc8d49445a71b0dfd4909d1e1dea7f9f9bfc2,', + }, + { + name: 'coralDataM', + type: 'typography', + description: '', + value: "400 1.4rem/140% 'Inconsolata'", + fontStyle: 'normal', + fontWeight: '400', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Inconsolata', + id: 'S:ea21655f2b042b6b265a99861bf271192c475900,', + }, + { + name: 'coralDataMBold', + type: 'typography', + description: '', + value: "700 1.4rem/140% 'Inconsolata'", + fontStyle: 'normal', + fontWeight: '700', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Inconsolata', + id: 'S:f2c5af46bfeef76f4e644aa0384b2994709f09d6,', + }, + { + name: 'coralLinkMUnderlined', + type: 'typography', + description: '', + value: '600 1.4rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:0459de0ba9f93a99351a262ad56b37a7141df5db,', + }, + { + name: 'coralLinkM', + type: 'typography', + description: '', + value: '600 1.4rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:f8714939f99dbb050689d7a9439bbd3d805d3248,', + }, + { + name: 'coralDataXl', + type: 'typography', + description: '', + value: "400 2.4rem/140% 'Inconsolata'", + fontStyle: 'normal', + fontWeight: '400', + fontSize: '2.4rem', + lineHeight: '140%', + fontFamily: 'Inconsolata', + id: 'S:7a19acd294788646fc2263162aa038f44307a9bb,', + }, + { + name: 'coralLinkS', + type: 'typography', + description: '', + value: '600 1.2rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:6a212dca74018c7d3a3c6b15de797bfdac01fbf4,', + }, + { + name: 'coralLinkSUnderlined', + type: 'typography', + description: '', + value: '600 1.2rem/140% "Source Sans Pro"', + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:c3d95ef306b71418c1519b0d7f1b51e7862ff56a,', + }, + { + name: 'coralRadiusM', + type: 'radius', + description: '', + value: '0.8rem', + id: '85681e80-415d-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralRadiusL', + type: 'radius', + description: '', + value: '1.6rem', + id: '95ba6ef0-415d-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralRadiusRound', + type: 'radius', + description: '', + value: '9999.9rem', + id: '9bbf9231-415d-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralRadiusS', + type: 'radius', + description: '', + value: '0.4rem', + id: '65982381-4783-11ec-a826-6db8532cd4e8', + }, + { + name: 'coralBorderSSolid', + type: 'border', + description: '', + value: '1px solid', + id: 'e53f87c1-415e-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBorderMSolid', + type: 'border', + description: '', + value: '2px solid', + id: 'e9d78671-415e-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBorderSDashed', + type: 'border', + description: '', + value: '1px dashed', + id: 'ee9dc111-415e-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBorderMDashed', + type: 'border', + description: '', + value: '2px dashed', + id: 'f6993610-415e-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralOpacityL', + type: 'opacity', + description: '', + value: '0.2', + id: '0c7b52b0-415f-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralOpacityM', + type: 'opacity', + description: '', + value: '0.4', + id: '10bd9041-415f-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralOpacityS', + type: 'opacity', + description: '', + value: '0.6', + id: '15f35591-415f-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBreakpointS', + type: 'breakpoint', + description: '', + value: '40em', + id: '20cb0f81-415f-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBreakpointM', + type: 'breakpoint', + description: '', + value: '48em', + id: '27f774b1-415f-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBreakpointL', + type: 'breakpoint', + description: '', + value: '64em', + id: '2dc50d31-415f-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBreakpointXl', + type: 'breakpoint', + description: '', + value: '80em', + id: '36958571-415f-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBrandingLogo', + type: 'branding', + description: '', + value: + "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==')", + id: 'bc401250-4789-11ec-a826-6db8532cd4e8', + }, + { + name: 'coralTransitionInstant', + type: 'transition', + description: '', + value: '100ms ease-out', + id: 'c40577a1-5d8c-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralTransitionFast', + type: 'transition', + description: '', + value: '250ms ease-in-out', + id: 'cc39d6f1-5d8c-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralTransitionNormal', + type: 'transition', + description: '', + value: '300ms ease-in-out', + id: 'd342ae91-5d8c-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralTransitionSlow', + type: 'transition', + description: '', + value: '400ms ease-in', + id: 'e0c90dc1-5d8c-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralElevationLayerFlat', + type: 'elevation', + description: '', + value: '0', + id: '058a62d1-5d8d-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralElevationLayerStandardFront', + type: 'elevation', + description: '', + value: '4', + id: '1356f2c1-5d8d-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralElevationLayerInteractiveFront', + type: 'elevation', + description: '', + value: '8', + id: '1aefae51-5d8d-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralElevationLayerOverlay', + type: 'elevation', + description: '', + value: '16', + id: '2096d311-5d8d-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralAnimationHeartbeat', + type: 'animation', + description: '', + value: 'coral-dark-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite', + id: '1410db90-9401-11ec-a001-db4d7ae8c1be', + }, ]; -export default dictionary; \ No newline at end of file +export default dictionary; diff --git a/packages/design-tokens/src/dark/index.ts b/packages/design-tokens/src/dark/index.ts index d325b0e85ce..e47579f7803 100644 --- a/packages/design-tokens/src/dark/index.ts +++ b/packages/design-tokens/src/dark/index.ts @@ -1,293 +1,344 @@ const tokens = { - coralColorNeutralText: `var(--coral-color-neutral-text, hsla(0, 0%, 100%, 1))`, - coralColorNeutralTextInverted: `var(--coral-color-neutral-text-inverted, hsla(210, 7%, 79%, 1))`, - coralColorNeutralTextWeak: `var(--coral-color-neutral-text-weak, hsla(206, 17%, 82%, 1))`, - coralColorNeutralTextDisabled: `var(--coral-color-neutral-text-disabled, hsla(207, 11%, 64%, 1))`, - coralColorNeutralBackground: `var(--coral-color-neutral-background, hsla(206, 17%, 18%, 1))`, - coralColorNeutralBackgroundDisabled: `var(--coral-color-neutral-background-disabled, hsla(210, 17%, 16%, 1))`, - coralColorNeutralBackgroundMedium: `var(--coral-color-neutral-background-medium, hsla(208, 18%, 21%, 1))`, - coralColorNeutralBackgroundStrong: `var(--coral-color-neutral-background-strong, hsla(208, 18%, 14%, 1))`, - coralColorNeutralBorder: `var(--coral-color-neutral-border, hsla(206, 17%, 82%, 1))`, - coralColorNeutralBorderWeak: `var(--coral-color-neutral-border-weak, hsla(207, 18%, 34%, 1))`, - coralColorNeutralBorderWeakHover: `var(--coral-color-neutral-border-weak-hover, hsla(207, 18%, 44%, 1))`, - coralColorNeutralBorderDisabled: `var(--coral-color-neutral-border-disabled, hsla(208, 11%, 35%, 1))`, - coralColorAccentText: `var(--coral-color-accent-text, hsla(198, 72%, 65%, 1))`, - coralColorAccentTextHover: `var(--coral-color-accent-text-hover, hsla(198, 72%, 55%, 1))`, - coralColorAccentTextActive: `var(--coral-color-accent-text-active, hsla(198, 72%, 45%, 1))`, - coralColorAccentTextWeak: `var(--coral-color-accent-text-weak, hsla(207, 18%, 24%, 1))`, - coralColorAccentTextWeakHover: `var(--coral-color-accent-text-weak-hover, hsla(199, 71%, 15%, 1))`, - coralColorAccentTextWeakActive: `var(--coral-color-accent-text-weak-active, hsla(199, 73%, 10%, 1))`, - coralColorAccentTextStrong: `var(--coral-color-accent-text-strong, hsla(198, 72%, 75%, 1))`, - coralColorAccentTextStrongHover: `var(--coral-color-accent-text-strong-hover, hsla(198, 72%, 65%, 1))`, - coralColorAccentTextStrongActive: `var(--coral-color-accent-text-strong-active, hsla(198, 72%, 55%, 1))`, - coralColorAccentBackground: `var(--coral-color-accent-background, hsla(198, 72%, 25%, 1))`, - coralColorAccentBackgroundHover: `var(--coral-color-accent-background-hover, hsla(199, 78%, 20%, 1))`, - coralColorAccentBackgroundActive: `var(--coral-color-accent-background-active, hsla(199, 73%, 10%, 1))`, - coralColorAccentBackgroundWeak: `var(--coral-color-accent-background-weak, hsla(207, 18%, 24%, 1))`, - coralColorAccentBackgroundWeakHover: `var(--coral-color-accent-background-weak-hover, hsla(199, 71%, 15%, 1))`, - coralColorAccentBackgroundWeakActive: `var(--coral-color-accent-background-weak-active, hsla(199, 73%, 10%, 1))`, - coralColorAccentBackgroundStrong: `var(--coral-color-accent-background-strong, hsla(198, 72%, 75%, 1))`, - coralColorAccentBackgroundStrongHover: `var(--coral-color-accent-background-strong-hover, hsla(198, 72%, 65%, 1))`, - coralColorAccentBackgroundStrongActive: `var(--coral-color-accent-background-strong-active, hsla(198, 72%, 55%, 1))`, - coralColorAccentBorder: `var(--coral-color-accent-border, hsla(198, 72%, 75%, 1))`, - coralColorAccentBorderHover: `var(--coral-color-accent-border-hover, hsla(198, 72%, 65%, 1))`, - coralColorAccentBorderActive: `var(--coral-color-accent-border-active, hsla(199, 72%, 55%, 1))`, - coralColorDangerText: `var(--coral-color-danger-text, hsla(2, 95%, 74%, 1))`, - coralColorDangerTextHover: `var(--coral-color-danger-text-hover, hsla(2, 95%, 69%, 1))`, - coralColorDangerTextActive: `var(--coral-color-danger-text-active, hsla(2, 96%, 64%, 1))`, - coralColorDangerTextWeak: `var(--coral-color-danger-text-weak, hsla(207, 18%, 24%, 1))`, - coralColorDangerTextWeakHover: `var(--coral-color-danger-text-weak-hover, hsla(358, 96%, 18%, 1))`, - coralColorDangerTextWeakActive: `var(--coral-color-danger-text-weak-active, hsla(357, 97%, 13%, 1))`, - coralColorDangerTextStrong: `var(--coral-color-danger-text-strong, hsla(359, 100%, 78%, 1))`, - coralColorDangerTextStrongHover: `var(--coral-color-danger-text-strong-hover, hsla(359, 100%, 73%, 1))`, - coralColorDangerTextStrongActive: `var(--coral-color-danger-text-strong-active, hsla(359, 100%, 68%, 1))`, - coralColorDangerBackground: `var(--coral-color-danger-background, hsla(358, 96%, 18%, 1))`, - coralColorDangerBackgroundHover: `var(--coral-color-danger-background-hover, hsla(357, 97%, 13%, 1))`, - coralColorDangerBackgroundActive: `var(--coral-color-danger-background-active, hsla(358, 95%, 8%, 1))`, - coralColorDangerBackgroundWeak: `var(--coral-color-danger-background-weak, hsla(207, 18%, 24%, 1))`, - coralColorDangerBackgroundWeakHover: `var(--coral-color-danger-background-weak-hover, hsla(358, 96%, 18%, 1))`, - coralColorDangerBackgroundWeakActive: `var(--coral-color-danger-background-weak-active, hsla(357, 97%, 13%, 1))`, - coralColorDangerBackgroundStrong: `var(--coral-color-danger-background-strong, hsla(359, 100%, 78%, 1))`, - coralColorDangerBackgroundStrongHover: `var(--coral-color-danger-background-strong-hover, hsla(359, 100%, 73%, 1))`, - coralColorDangerBackgroundStrongActive: `var(--coral-color-danger-background-strong-active, hsla(359, 100%, 68%, 1))`, - coralColorDangerBorder: `var(--coral-color-danger-border, hsla(359, 100%, 78%, 1))`, - coralColorDangerBorderHover: `var(--coral-color-danger-border-hover, hsla(359, 100%, 73%, 1))`, - coralColorDangerBorderActive: `var(--coral-color-danger-border-active, hsla(359, 100%, 68%, 1))`, - coralColorSuccessText: `var(--coral-color-success-text, hsla(110, 50%, 60%, 1))`, - coralColorSuccessTextHover: `var(--coral-color-success-text-hover, hsla(110, 45%, 50%, 1))`, - coralColorSuccessTextActive: `var(--coral-color-success-text-active, hsla(110, 45%, 40%, 1))`, - coralColorSuccessTextWeak: `var(--coral-color-success-text-weak, hsla(207, 18%, 24%, 1))`, - coralColorSuccessTextWeakHover: `var(--coral-color-success-text-weak-hover, hsla(109, 50%, 20%, 1))`, - coralColorSuccessTextWeakActive: `var(--coral-color-success-text-weak-active, hsla(109, 51%, 15%, 1))`, - coralColorSuccessTextStrong: `var(--coral-color-success-text-strong, hsla(110, 50%, 70%, 1))`, - coralColorSuccessTextStrongHover: `var(--coral-color-success-text-strong-hover, hsla(110, 50%, 60%, 1))`, - coralColorSuccessTextStrongActive: `var(--coral-color-success-text-strong-active, hsla(110, 50%, 50%, 1))`, - coralColorSuccessBackground: `var(--coral-color-success-background, hsla(109, 50%, 20%, 1))`, - coralColorSuccessBackgroundHover: `var(--coral-color-success-background-hover, hsla(109, 51%, 15%, 1))`, - coralColorSuccessBackgroundActive: `var(--coral-color-success-background-active, hsla(110, 49%, 10%, 1))`, - coralColorSuccessBackgroundWeak: `var(--coral-color-success-background-weak, hsla(207, 18%, 24%, 1))`, - coralColorSuccessBackgroundWeakHover: `var(--coral-color-success-background-weak-hover, hsla(109, 50%, 20%, 1))`, - coralColorSuccessBackgroundWeakActive: `var(--coral-color-success-background-weak-active, hsla(109, 51%, 15%, 1))`, - coralColorSuccessBackgroundStrong: `var(--coral-color-success-background-strong, hsla(110, 50%, 70%, 1))`, - coralColorSuccessBackgroundStrongHover: `var(--coral-color-success-background-strong-hover, hsla(110, 50%, 60%, 1))`, - coralColorSuccessBackgroundStrongActive: `var(--coral-color-success-background-strong-active, hsla(110, 50%, 50%, 1))`, - coralColorSuccessBorder: `var(--coral-color-success-border, hsla(110, 50%, 70%, 1))`, - coralColorSuccessBorderHover: `var(--coral-color-success-border-hover, hsla(110, 50%, 60%, 1))`, - coralColorSuccessBorderActive: `var(--coral-color-success-border-active, hsla(110, 50%, 50%, 1))`, - coralColorWarningText: `var(--coral-color-warning-text, hsla(27, 97%, 57%, 1))`, - coralColorWarningTextHover: `var(--coral-color-warning-text-hover, hsla(27, 97%, 47%, 1))`, - coralColorWarningTextActive: `var(--coral-color-warning-text-active, hsla(27, 97%, 37%, 1))`, - coralColorWarningTextWeak: `var(--coral-color-warning-text-weak, hsla(207, 18%, 24%, 1))`, - coralColorWarningTextWeakHover: `var(--coral-color-warning-text-weak-hover, hsla(22, 84%, 20%, 1))`, - coralColorWarningTextWeakActive: `var(--coral-color-warning-text-weak-active, hsla(23, 84%, 15%, 1))`, - coralColorWarningTextStrong: `var(--coral-color-warning-text-strong, hsla(27, 98%, 67%, 1))`, - coralColorWarningTextStrongHover: `var(--coral-color-warning-text-strong-hover, hsla(27, 97%, 57%, 1))`, - coralColorWarningTextStrongActive: `var(--coral-color-warning-text-strong-active, hsla(27, 98%, 47%, 1))`, - coralColorWarningBackground: `var(--coral-color-warning-background, hsla(22, 84%, 20%, 1))`, - coralColorWarningBackgroundHover: `var(--coral-color-warning-background-hover, hsla(22, 84%, 15%, 1))`, - coralColorWarningBackgroundActive: `var(--coral-color-warning-background-active, hsla(22, 84%, 10%, 1))`, - coralColorWarningBackgroundWeak: `var(--coral-color-warning-background-weak, hsla(207, 18%, 24%, 1))`, - coralColorWarningBackgroundWeakHover: `var(--coral-color-warning-background-weak-hover, hsla(22, 84%, 20%, 1))`, - coralColorWarningBackgroundWeakActive: `var(--coral-color-warning-background-weak-active, hsla(23, 84%, 15%, 1))`, - coralColorWarningBackgroundStrong: `var(--coral-color-warning-background-strong, hsla(27, 98%, 67%, 1))`, - coralColorWarningBackgroundStrongHover: `var(--coral-color-warning-background-strong-hover, hsla(27, 97%, 57%, 1))`, - coralColorWarningBackgroundStrongActive: `var(--coral-color-warning-background-strong-active, hsla(27, 98%, 47%, 1))`, - coralColorWarningBorder: `var(--coral-color-warning-border, hsla(27, 98%, 67%, 1))`, - coralColorWarningBorderHover: `var(--coral-color-warning-border-hover, hsla(27, 97%, 57%, 1))`, - coralColorWarningBorderActive: `var(--coral-color-warning-border-active, hsla(27, 98%, 47%, 1))`, - coralColorAssistiveBackground: `var(--coral-color-assistive-background, hsla(208, 20%, 83%, 1))`, - coralColorAssistiveText: `var(--coral-color-assistive-text, hsla(208, 18%, 14%, 1))`, - coralColorAssistiveBorder: `var(--coral-color-assistive-border, hsla(208, 20%, 63%, 1))`, - coralColorAssistiveBorderFocus: `var(--coral-color-assistive-border-focus, hsla(256, 66%, 76%, 1))`, - coralColorBrandingBrand: `var(--coral-color-branding-brand, hsla(359, 100%, 71%, 1))`, - coralColorNeutralBorderHover: `var(--coral-color-neutral-border-hover, hsla(206, 17%, 92%, 1))`, - coralColorBetaText: `var(--coral-color-beta-text, hsla(280, 44%, 72%, 1))`, - coralColorBetaTextHover: `var(--coral-color-beta-text-hover, hsla(280, 43%, 62%, 1))`, - coralColorBetaTextActive: `var(--coral-color-beta-text-active, hsla(280, 44%, 52%, 1))`, - coralColorBetaIcon: `var(--coral-color-beta-icon, hsla(280, 68%, 61%, 1))`, - coralColorBetaIconHover: `var(--coral-color-beta-icon-hover, hsla(280, 68%, 51%, 1))`, - coralColorBetaIconActive: `var(--coral-color-beta-icon-active, hsla(280, 67%, 41%, 1))`, - coralColorBetaTextWeak: `var(--coral-color-beta-text-weak, hsla(207, 18%, 24%, 1))`, - coralColorBetaTextWeakHover: `var(--coral-color-beta-text-weak-hover, hsla(281, 65%, 24%, 1))`, - coralColorBetaTextWeakActive: `var(--coral-color-beta-text-weak-active, hsla(280, 64%, 14%, 1))`, - coralColorBetaTextStrong: `var(--coral-color-beta-text-strong, hsla(279, 34%, 78%, 1))`, - coralColorBetaTextStrongHover: `var(--coral-color-beta-text-strong-hover, hsla(279, 34%, 68%, 1))`, - coralColorBetaTextStrongActive: `var(--coral-color-beta-text-strong-active, hsla(280, 34%, 48%, 1))`, - coralColorBetaBackground: `var(--coral-color-beta-background, hsla(281, 65%, 24%, 1))`, - coralColorBetaBackgroundHover: `var(--coral-color-beta-background-hover, hsla(280, 64%, 14%, 1))`, - coralColorBetaBackgroundActive: `var(--coral-color-beta-background-active, hsla(277, 62%, 4%, 1))`, - coralColorBetaBackgroundWeak: `var(--coral-color-beta-background-weak, hsla(207, 18%, 24%, 1))`, - coralColorBetaBackgroundWeakHover: `var(--coral-color-beta-background-weak-hover, hsla(281, 65%, 24%, 1))`, - coralColorBetaBackgroundWeakActive: `var(--coral-color-beta-background-weak-active, hsla(280, 64%, 14%, 1))`, - coralColorBetaBackgroundStrong: `var(--coral-color-beta-background-strong, hsla(279, 34%, 78%, 1))`, - coralColorBetaBackgroundStrongHover: `var(--coral-color-beta-background-strong-hover, hsla(279, 34%, 68%, 1))`, - coralColorBetaBackgroundStrongActive: `var(--coral-color-beta-background-strong-active, hsla(279, 34%, 48%, 1))`, - coralColorBetaBorder: `var(--coral-color-beta-border, hsla(279, 34%, 78%, 1))`, - coralColorBetaBorderHover: `var(--coral-color-beta-border-hover, hsla(279, 34%, 68%, 1))`, - coralColorBetaBorderActive: `var(--coral-color-beta-border-active, hsla(279, 34%, 48%, 1))`, - coralColorAccentIcon: `var(--coral-color-accent-icon, hsla(198, 76%, 67%, 1))`, - coralColorAccentIconHover: `var(--coral-color-accent-icon-hover, hsla(198, 76%, 57%, 1))`, - coralColorAccentIconActive: `var(--coral-color-accent-icon-active, hsla(198, 77%, 47%, 1))`, - coralColorDangerIcon: `var(--coral-color-danger-icon, hsla(2, 96%, 67%, 1))`, - coralColorDangerIconHover: `var(--coral-color-danger-icon-hover, hsla(2, 96%, 57%, 1))`, - coralColorDangerIconActive: `var(--coral-color-danger-icon-active, hsla(2, 97%, 47%, 1))`, - coralColorSuccessIconActive: `var(--coral-color-success-icon-active, hsla(110, 61%, 36%, 1))`, - coralColorSuccessIconHover: `var(--coral-color-success-icon-hover, hsla(110, 62%, 46%, 1))`, - coralColorSuccessIcon: `var(--coral-color-success-icon, hsla(110, 61%, 56%, 1))`, - coralColorWarningIconActive: `var(--coral-color-warning-icon-active, hsla(27, 98%, 19%, 1))`, - coralColorWarningIconHover: `var(--coral-color-warning-icon-hover, hsla(27, 99%, 29%, 1))`, - coralColorWarningIcon: `var(--coral-color-warning-icon, hsla(27, 99%, 49%, 1))`, - coralColorChartsNeutral: `var(--coral-color-charts-neutral, hsla(0, 0%, 75%, 1))`, - coralColorChartsNeutralWeak: `var(--coral-color-charts-neutral-weak, hsla(206, 10%, 48%, 1))`, - coralColorChartsNeutralStrong: `var(--coral-color-charts-neutral-strong, hsla(0, 0%, 88%, 1))`, - coralColorChartsNeutralHover: `var(--coral-color-charts-neutral-hover, hsla(0, 0%, 88%, 1))`, - coralColorChartsSuccess: `var(--coral-color-charts-success, hsla(148, 87%, 40%, 1))`, - coralColorChartsSuccessWeak: `var(--coral-color-charts-success-weak, hsla(130, 52%, 91%, 1))`, - coralColorChartsSuccessStrong: `var(--coral-color-charts-success-strong, hsla(139, 50%, 22%, 1))`, - coralColorChartsSuccessHover: `var(--coral-color-charts-success-hover, hsla(139, 50%, 22%, 1))`, - coralColorChartsDanger: `var(--coral-color-charts-danger, hsla(4, 89%, 49%, 1))`, - coralColorChartsDangerWeak: `var(--coral-color-charts-danger-weak, hsla(359, 69%, 73%, 1))`, - coralColorChartsDangerStrong: `var(--coral-color-charts-danger-strong, hsla(359, 62%, 43%, 1))`, - coralColorChartsDangerHover: `var(--coral-color-charts-danger-hover, hsla(359, 62%, 43%, 1))`, - coralColorChartsWarning: `var(--coral-color-charts-warning, hsla(32, 100%, 56%, 1))`, - coralColorChartsWarningWeak: `var(--coral-color-charts-warning-weak, hsla(22, 88%, 84%, 1))`, - coralColorChartsWarningStrong: `var(--coral-color-charts-warning-strong, hsla(22, 75%, 42%, 1))`, - coralColorChartsWarningHover: `var(--coral-color-charts-warning-hover, hsla(22, 75%, 42%, 1))`, - coralColorChartsDefault: `var(--coral-color-charts-default, hsla(216, 82%, 48%, 1))`, - coralColorChartsDefaultWeak: `var(--coral-color-charts-default-weak, hsla(204, 59%, 73%, 1))`, - coralColorChartsDefaultStrong: `var(--coral-color-charts-default-strong, hsla(204, 92%, 29%, 1))`, - coralColorChartsDefaultHover: `var(--coral-color-charts-default-hover, hsla(204, 92%, 29%, 1))`, - coralColorChartsColor00: `var(--coral-color-charts-color-00, hsla(48, 100%, 50%, 1))`, - coralColorChartsColor00Weak: `var(--coral-color-charts-color-00-weak, hsla(51, 91%, 82%, 1))`, - coralColorChartsColor00Strong: `var(--coral-color-charts-color-00-strong, hsla(48, 82%, 45%, 1))`, - coralColorChartsColor00Hover: `var(--coral-color-charts-color-00-hover, hsla(48, 82%, 45%, 1))`, - coralColorChartsColor01: `var(--coral-color-charts-color-01, hsla(216, 82%, 48%, 1))`, - coralColorChartsColor01Weak: `var(--coral-color-charts-color-01-weak, hsla(204, 59%, 73%, 1))`, - coralColorChartsColor01Strong: `var(--coral-color-charts-color-01-strong, hsla(204, 92%, 29%, 1))`, - coralColorChartsColor01Hover: `var(--coral-color-charts-color-01-hover, hsla(204, 92%, 29%, 1))`, - coralColorChartsColor02: `var(--coral-color-charts-color-02, hsla(194, 92%, 50%, 1))`, - coralColorChartsColor02Weak: `var(--coral-color-charts-color-02-weak, hsla(194, 91%, 91%, 1))`, - coralColorChartsColor02Strong: `var(--coral-color-charts-color-02-strong, hsla(194, 93%, 32%, 1))`, - coralColorChartsColor02Hover: `var(--coral-color-charts-color-02-hover, hsla(194, 93%, 32%, 1))`, - coralColorChartsColor03: `var(--coral-color-charts-color-03, hsla(140, 39%, 79%, 1))`, - coralColorChartsColor03Weak: `var(--coral-color-charts-color-03-weak, hsla(138, 40%, 92%, 1))`, - coralColorChartsColor03Strong: `var(--coral-color-charts-color-03-strong, hsla(139, 11%, 35%, 1))`, - coralColorChartsColor03Hover: `var(--coral-color-charts-color-03-hover, hsla(139, 11%, 35%, 1))`, - coralColorChartsColor04: `var(--coral-color-charts-color-04, hsla(148, 87%, 40%, 1))`, - coralColorChartsColor04Weak: `var(--coral-color-charts-color-04-weak, hsla(130, 52%, 91%, 1))`, - coralColorChartsColor04Strong: `var(--coral-color-charts-color-04-strong, hsla(139, 50%, 22%, 1))`, - coralColorChartsColor04Hover: `var(--coral-color-charts-color-04-hover, hsla(139, 50%, 22%, 1))`, - coralColorChartsColor05: `var(--coral-color-charts-color-05, hsla(324, 68%, 71%, 1))`, - coralColorChartsColor05Weak: `var(--coral-color-charts-color-05-weak, hsla(323, 69%, 95%, 1))`, - coralColorChartsColor05Strong: `var(--coral-color-charts-color-05-strong, hsla(324, 28%, 49%, 1))`, - coralColorChartsColor05Hover: `var(--coral-color-charts-color-05-hover, hsla(324, 28%, 49%, 1))`, - coralColorChartsColor06: `var(--coral-color-charts-color-06, hsla(280, 75%, 58%, 1))`, - coralColorChartsColor06Weak: `var(--coral-color-charts-color-06-weak, hsla(279, 77%, 88%, 1))`, - coralColorChartsColor06Strong: `var(--coral-color-charts-color-06-strong, hsla(280, 54%, 36%, 1))`, - coralColorChartsColor06Hover: `var(--coral-color-charts-color-06-hover, hsla(280, 54%, 36%, 1))`, - coralColorChartsColor07: `var(--coral-color-charts-color-07, hsla(4, 89%, 49%, 1))`, - coralColorChartsColor07Weak: `var(--coral-color-charts-color-07-weak, hsla(359, 69%, 73%, 1))`, - coralColorChartsColor07Strong: `var(--coral-color-charts-color-07-strong, hsla(359, 62%, 43%, 1))`, - coralColorChartsColor07Hover: `var(--coral-color-charts-color-07-hover, hsla(359, 62%, 43%, 1))`, - coralColorChartsColor08: `var(--coral-color-charts-color-08, hsla(22, 88%, 54%, 1))`, - coralColorChartsColor08Weak: `var(--coral-color-charts-color-08-weak, hsla(22, 88%, 84%, 1))`, - coralColorChartsColor08Strong: `var(--coral-color-charts-color-08-strong, hsla(22, 75%, 42%, 1))`, - coralColorChartsColor08Hover: `var(--coral-color-charts-color-08-hover, hsla(22, 75%, 42%, 1))`, - coralColorChartsColor09: `var(--coral-color-charts-color-09, hsla(34, 34%, 45%, 1))`, - coralColorChartsColor09Weak: `var(--coral-color-charts-color-09-weak, hsla(35, 28%, 82%, 1))`, - coralColorChartsColor09Strong: `var(--coral-color-charts-color-09-strong, hsla(35, 34%, 27%, 1))`, - coralColorChartsColor09Hover: `var(--coral-color-charts-color-09-hover, hsla(35, 34%, 27%, 1))`, - coralColorNeutralBorderStrong: `var(--coral-color-neutral-border-strong, hsla(0, 0%, 92%, 1))`, - coralColorNeutralBorderStrongHover: `var(--coral-color-neutral-border-strong-hover, hsla(216, 30%, 82%, 1))`, - coralColorNeutralIcon: `var(--coral-color-neutral-icon, hsla(210, 17%, 93%, 1))`, - coralColorNeutralIconInverted: `var(--coral-color-neutral-icon-inverted, hsla(210, 7%, 79%, 1))`, - coralColorNeutralIconWeak: `var(--coral-color-neutral-icon-weak, hsla(206, 24%, 83%, 1))`, - coralColorChartsDefaultText: `var(--coral-color-charts-default-text, hsla(205, 87%, 94%, 1))`, - coralColorChartsDefaultTextStrong: `var(--coral-color-charts-default-text-strong, hsla(205, 93%, 22%, 1))`, - coralColorChartsDefaultTextWeak: `var(--coral-color-charts-default-text-weak, hsla(207, 93%, 94%, 1))`, - coralColorChartsColor09Text: `var(--coral-color-charts-color-09-text, hsla(36, 36%, 5%, 1))`, - coralColorChartsColor09TextStrong: `var(--coral-color-charts-color-09-text-strong, hsla(36, 36%, 5%, 1))`, - coralColorChartsColor09TextWeak: `var(--coral-color-charts-color-09-text-weak, hsla(35, 28%, 82%, 1))`, - coralColorNeutralBackgroundHeavy: `var(--coral-color-neutral-background-heavy, hsla(204, 18%, 11%, 1))`, - coralColorIllustrationColor01: `var(--coral-color-illustration-color-01, hsla(358, 40%, 53%, 1))`, - coralColorIllustrationColor02: `var(--coral-color-illustration-color-02, hsla(355, 39%, 61%, 1))`, - coralColorIllustrationColor03: `var(--coral-color-illustration-color-03, hsla(349, 15%, 71%, 1))`, - coralColorIllustrationColor04: `var(--coral-color-illustration-color-04, hsla(211, 54%, 15%, 1))`, - coralColorIllustrationColor05: `var(--coral-color-illustration-color-05, hsla(212, 28%, 37%, 1))`, - coralColorIllustrationColor06: `var(--coral-color-illustration-color-06, hsla(212, 29%, 61%, 1))`, - coralColorIllustrationSkintone01: `var(--coral-color-illustration-skintone-01, hsla(20, 29%, 66%, 1))`, - coralColorIllustrationSkintone02: `var(--coral-color-illustration-skintone-02, hsla(21, 23%, 49%, 1))`, - coralColorIllustrationSkintone03: `var(--coral-color-illustration-skintone-03, hsla(17, 29%, 22%, 1))`, - coralColorIllustrationShadow: `var(--coral-color-illustration-shadow, hsla(0, 0%, 0%, 0.1))`, - coralColorIllustrationColor07: `var(--coral-color-illustration-color-07, hsla(213, 13%, 35%, 1))`, - coralColorIllustrationColor08: `var(--coral-color-illustration-color-08, hsla(212, 13%, 19%, 1))`, - coralColorIllustrationColor09: `var(--coral-color-illustration-color-09, hsla(240, 3%, 12%, 1))`, - coralColorAccentBackgroundSelected: `var(--coral-color-accent-background-selected, hsla(199, 73%, 13%, 1))`, - coralColorBrandingBackground: `var(--coral-color-branding-background, linear-gradient(133deg,hsla(226, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%))`, - coralColorBrandingNavigation: `var(--coral-color-branding-navigation, linear-gradient(133deg,hsla(222, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%))`, - coralSpacingXxs: `var(--coral-spacing-xxs, 0.4rem)`, - coralSpacingXs: `var(--coral-spacing-xs, 0.8rem)`, - coralSpacingS: `var(--coral-spacing-s, 1.2rem)`, - coralSpacingM: `var(--coral-spacing-m, 1.6rem)`, - coralSpacingL: `var(--coral-spacing-l, 2.8rem)`, - coralSpacingXl: `var(--coral-spacing-xl, 3.6rem)`, - coralSizingMinimal: `var(--coral-sizing-minimal, 1.2rem)`, - coralSizingXxxs: `var(--coral-sizing-xxxs, 1.6rem)`, - coralSizingXxs: `var(--coral-sizing-xxs, 2rem)`, - coralSizingXs: `var(--coral-sizing-xs, 2.4rem)`, - coralSizingS: `var(--coral-sizing-s, 2.8rem)`, - coralSizingM: `var(--coral-sizing-m, 3.6rem)`, - coralSizingL: `var(--coral-sizing-l, 4rem)`, - coralSizingXxxl: `var(--coral-sizing-xxxl, 22rem)`, - coralSizingMaximal: `var(--coral-sizing-maximal, 32rem)`, - coralElevationShadowNeutralM: `var(--coral-elevation-shadow-neutral-m, 0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.5))`, - coralElevationShadowNeutralL: `var(--coral-elevation-shadow-neutral-l, 0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.5))`, - coralElevationShadowAccent: `var(--coral-elevation-shadow-accent, 0rem 0.1rem 0.1rem 0rem hsla(198, 72%, 75%, 0.3))`, - coralElevationShadowSuccess: `var(--coral-elevation-shadow-success, 0rem 0.1rem 0.1rem 0rem hsla(110, 50%, 70%, 0.3))`, - coralElevationShadowDanger: `var(--coral-elevation-shadow-danger, 0rem 0.1rem 0.1rem 0rem hsla(359, 100%, 78%, 0.3))`, - coralElevationShadowWarning: `var(--coral-elevation-shadow-warning, 0rem 0.1rem 0.1rem 0rem hsla(27, 98%, 67%, 0.3))`, - coralElevationShadowBeta: `var(--coral-elevation-shadow-beta, 0rem 0.1rem 0.1rem 0rem hsla(279, 34%, 78%, 0.3))`, - coralElevationShadowNeutralInvertedM: `var(--coral-elevation-shadow-neutral-inverted-m, 0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 2%, 0.5))`, - coralElevationShadowNeutralInvertedL: `var(--coral-elevation-shadow-neutral-inverted-l, 0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 5%, 0.5))`, - coralElevationShadowNeutralS: `var(--coral-elevation-shadow-neutral-s, 0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5))`, - coralElevationShadowNeutralInvertedS: `var(--coral-elevation-shadow-neutral-inverted-s, 0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 2%, 0.5))`, - coralHeadingL: `var(--coral-heading-l, 600 1.8rem/140% 'Source Sans Pro')`, - coralHeadingM: `var(--coral-heading-m, 600 1.6rem/140% 'Source Sans Pro')`, - coralHeadingS: `var(--coral-heading-s, 600 1.4rem/140% 'Source Sans Pro')`, - coralParagraphM: `var(--coral-paragraph-m, 400 1.4rem/140% 'Source Sans Pro')`, - coralParagraphMBold: `var(--coral-paragraph-m-bold, 600 1.4rem/140% 'Source Sans Pro')`, - coralParagraphS: `var(--coral-paragraph-s, 400 1.2rem/140% 'Source Sans Pro')`, - coralParagraphSBold: `var(--coral-paragraph-s-bold, 600 1.2rem/140% 'Source Sans Pro')`, - coralDataM: `var(--coral-data-m, 400 1.4rem/140% 'Inconsolata')`, - coralDataMBold: `var(--coral-data-m-bold, 700 1.4rem/140% 'Inconsolata')`, - coralLinkMUnderlined: `var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')`, - coralLinkM: `var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')`, - coralDataXl: `var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')`, - coralRadiusM: `var(--coral-radius-m, 0.8rem)`, - coralRadiusL: `var(--coral-radius-l, 1.6rem)`, - coralRadiusRound: `var(--coral-radius-round, 9999.9rem)`, - coralRadiusS: `var(--coral-radius-s, 0.4rem)`, - coralBorderSSolid: `var(--coral-border-s-solid, 1px solid)`, - coralBorderMSolid: `var(--coral-border-m-solid, 2px solid)`, - coralBorderSDashed: `var(--coral-border-s-dashed, 1px dashed)`, - coralBorderMDashed: `var(--coral-border-m-dashed, 2px dashed)`, - coralOpacityL: `var(--coral-opacity-l, 0.2)`, - coralOpacityM: `var(--coral-opacity-m, 0.4)`, - coralOpacityS: `var(--coral-opacity-s, 0.6)`, - coralBreakpointS: `var(--coral-breakpoint-s, 40em)`, - coralBreakpointM: `var(--coral-breakpoint-m, 48em)`, - coralBreakpointL: `var(--coral-breakpoint-l, 64em)`, - coralBreakpointXl: `var(--coral-breakpoint-xl, 80em)`, - coralBrandingLogo: `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=='))`, - coralTransitionInstant: `var(--coral-transition-instant, 100ms ease-out)`, - coralTransitionFast: `var(--coral-transition-fast, 250ms ease-in-out)`, - coralTransitionNormal: `var(--coral-transition-normal, 300ms ease-in-out)`, - coralTransitionSlow: `var(--coral-transition-slow, 400ms ease-in)`, - coralElevationLayerFlat: `var(--coral-elevation-layer-flat, 0)`, - coralElevationLayerStandardFront: `var(--coral-elevation-layer-standard-front, 4)`, - coralElevationLayerInteractiveFront: `var(--coral-elevation-layer-interactive-front, 8)`, - coralElevationLayerOverlay: `var(--coral-elevation-layer-overlay, 16)`, - coralAnimationHeartbeat: `var(--coral-animation-heartbeat, coral-dark-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite)`, + coralColorNeutralText: `var(--coral-color-neutral-text, hsla(0, 0%, 100%, 1))`, + coralColorNeutralTextInverted: `var(--coral-color-neutral-text-inverted, hsla(210, 7%, 79%, 1))`, + coralColorNeutralTextWeak: `var(--coral-color-neutral-text-weak, hsla(206, 17%, 82%, 1))`, + coralColorNeutralTextDisabled: `var(--coral-color-neutral-text-disabled, hsla(207, 11%, 64%, 1))`, + coralColorNeutralBackground: `var(--coral-color-neutral-background, hsla(206, 17%, 18%, 1))`, + coralColorNeutralBackgroundDisabled: `var(--coral-color-neutral-background-disabled, hsla(210, 17%, 16%, 1))`, + coralColorNeutralBackgroundMedium: `var(--coral-color-neutral-background-medium, hsla(208, 18%, 21%, 1))`, + coralColorNeutralBackgroundStrong: `var(--coral-color-neutral-background-strong, hsla(208, 18%, 14%, 1))`, + coralColorNeutralBorder: `var(--coral-color-neutral-border, hsla(206, 17%, 82%, 1))`, + coralColorNeutralBorderWeak: `var(--coral-color-neutral-border-weak, hsla(207, 18%, 34%, 1))`, + coralColorNeutralBorderWeakHover: `var(--coral-color-neutral-border-weak-hover, hsla(207, 18%, 44%, 1))`, + coralColorNeutralBorderDisabled: `var(--coral-color-neutral-border-disabled, hsla(208, 11%, 35%, 1))`, + coralColorAccentText: `var(--coral-color-accent-text, hsla(198, 72%, 65%, 1))`, + coralColorAccentTextHover: `var(--coral-color-accent-text-hover, hsla(198, 72%, 55%, 1))`, + coralColorAccentTextActive: `var(--coral-color-accent-text-active, hsla(198, 72%, 45%, 1))`, + coralColorAccentTextWeak: `var(--coral-color-accent-text-weak, hsla(207, 18%, 24%, 1))`, + coralColorAccentTextWeakHover: `var(--coral-color-accent-text-weak-hover, hsla(199, 71%, 15%, 1))`, + coralColorAccentTextWeakActive: `var(--coral-color-accent-text-weak-active, hsla(199, 73%, 10%, 1))`, + coralColorAccentTextStrong: `var(--coral-color-accent-text-strong, hsla(198, 72%, 75%, 1))`, + coralColorAccentTextStrongHover: `var(--coral-color-accent-text-strong-hover, hsla(198, 72%, 65%, 1))`, + coralColorAccentTextStrongActive: `var(--coral-color-accent-text-strong-active, hsla(198, 72%, 55%, 1))`, + coralColorAccentBackground: `var(--coral-color-accent-background, hsla(198, 72%, 25%, 1))`, + coralColorAccentBackgroundHover: `var(--coral-color-accent-background-hover, hsla(199, 78%, 20%, 1))`, + coralColorAccentBackgroundActive: `var(--coral-color-accent-background-active, hsla(199, 73%, 10%, 1))`, + coralColorAccentBackgroundWeak: `var(--coral-color-accent-background-weak, hsla(207, 18%, 24%, 1))`, + coralColorAccentBackgroundWeakHover: `var(--coral-color-accent-background-weak-hover, hsla(199, 71%, 15%, 1))`, + coralColorAccentBackgroundWeakActive: `var(--coral-color-accent-background-weak-active, hsla(199, 73%, 10%, 1))`, + coralColorAccentBackgroundStrong: `var(--coral-color-accent-background-strong, hsla(198, 72%, 75%, 1))`, + coralColorAccentBackgroundStrongHover: `var(--coral-color-accent-background-strong-hover, hsla(198, 72%, 65%, 1))`, + coralColorAccentBackgroundStrongActive: `var(--coral-color-accent-background-strong-active, hsla(198, 72%, 55%, 1))`, + coralColorAccentBorder: `var(--coral-color-accent-border, hsla(198, 72%, 75%, 1))`, + coralColorAccentBorderHover: `var(--coral-color-accent-border-hover, hsla(198, 72%, 65%, 1))`, + coralColorAccentBorderActive: `var(--coral-color-accent-border-active, hsla(199, 72%, 55%, 1))`, + coralColorDangerText: `var(--coral-color-danger-text, hsla(2, 95%, 74%, 1))`, + coralColorDangerTextHover: `var(--coral-color-danger-text-hover, hsla(2, 95%, 69%, 1))`, + coralColorDangerTextActive: `var(--coral-color-danger-text-active, hsla(2, 96%, 64%, 1))`, + coralColorDangerTextWeak: `var(--coral-color-danger-text-weak, hsla(207, 18%, 24%, 1))`, + coralColorDangerTextWeakHover: `var(--coral-color-danger-text-weak-hover, hsla(358, 96%, 18%, 1))`, + coralColorDangerTextWeakActive: `var(--coral-color-danger-text-weak-active, hsla(357, 97%, 13%, 1))`, + coralColorDangerTextStrong: `var(--coral-color-danger-text-strong, hsla(359, 100%, 78%, 1))`, + coralColorDangerTextStrongHover: `var(--coral-color-danger-text-strong-hover, hsla(359, 100%, 73%, 1))`, + coralColorDangerTextStrongActive: `var(--coral-color-danger-text-strong-active, hsla(359, 100%, 68%, 1))`, + coralColorDangerBackground: `var(--coral-color-danger-background, hsla(358, 96%, 18%, 1))`, + coralColorDangerBackgroundHover: `var(--coral-color-danger-background-hover, hsla(357, 97%, 13%, 1))`, + coralColorDangerBackgroundActive: `var(--coral-color-danger-background-active, hsla(358, 95%, 8%, 1))`, + coralColorDangerBackgroundWeak: `var(--coral-color-danger-background-weak, hsla(207, 18%, 24%, 1))`, + coralColorDangerBackgroundWeakHover: `var(--coral-color-danger-background-weak-hover, hsla(358, 96%, 18%, 1))`, + coralColorDangerBackgroundWeakActive: `var(--coral-color-danger-background-weak-active, hsla(357, 97%, 13%, 1))`, + coralColorDangerBackgroundStrong: `var(--coral-color-danger-background-strong, hsla(359, 100%, 78%, 1))`, + coralColorDangerBackgroundStrongHover: `var(--coral-color-danger-background-strong-hover, hsla(359, 100%, 73%, 1))`, + coralColorDangerBackgroundStrongActive: `var(--coral-color-danger-background-strong-active, hsla(359, 100%, 68%, 1))`, + coralColorDangerBorder: `var(--coral-color-danger-border, hsla(359, 100%, 78%, 1))`, + coralColorDangerBorderHover: `var(--coral-color-danger-border-hover, hsla(359, 100%, 73%, 1))`, + coralColorDangerBorderActive: `var(--coral-color-danger-border-active, hsla(359, 100%, 68%, 1))`, + coralColorSuccessText: `var(--coral-color-success-text, hsla(110, 50%, 60%, 1))`, + coralColorSuccessTextHover: `var(--coral-color-success-text-hover, hsla(110, 45%, 50%, 1))`, + coralColorSuccessTextActive: `var(--coral-color-success-text-active, hsla(110, 45%, 40%, 1))`, + coralColorSuccessTextWeak: `var(--coral-color-success-text-weak, hsla(207, 18%, 24%, 1))`, + coralColorSuccessTextWeakHover: `var(--coral-color-success-text-weak-hover, hsla(109, 50%, 20%, 1))`, + coralColorSuccessTextWeakActive: `var(--coral-color-success-text-weak-active, hsla(109, 51%, 15%, 1))`, + coralColorSuccessTextStrong: `var(--coral-color-success-text-strong, hsla(110, 50%, 70%, 1))`, + coralColorSuccessTextStrongHover: `var(--coral-color-success-text-strong-hover, hsla(110, 50%, 60%, 1))`, + coralColorSuccessTextStrongActive: `var(--coral-color-success-text-strong-active, hsla(110, 50%, 50%, 1))`, + coralColorSuccessBackground: `var(--coral-color-success-background, hsla(109, 50%, 20%, 1))`, + coralColorSuccessBackgroundHover: `var(--coral-color-success-background-hover, hsla(109, 51%, 15%, 1))`, + coralColorSuccessBackgroundActive: `var(--coral-color-success-background-active, hsla(110, 49%, 10%, 1))`, + coralColorSuccessBackgroundWeak: `var(--coral-color-success-background-weak, hsla(207, 18%, 24%, 1))`, + coralColorSuccessBackgroundWeakHover: `var(--coral-color-success-background-weak-hover, hsla(109, 50%, 20%, 1))`, + coralColorSuccessBackgroundWeakActive: `var(--coral-color-success-background-weak-active, hsla(109, 51%, 15%, 1))`, + coralColorSuccessBackgroundStrong: `var(--coral-color-success-background-strong, hsla(110, 50%, 70%, 1))`, + coralColorSuccessBackgroundStrongHover: `var(--coral-color-success-background-strong-hover, hsla(110, 50%, 60%, 1))`, + coralColorSuccessBackgroundStrongActive: `var(--coral-color-success-background-strong-active, hsla(110, 50%, 50%, 1))`, + coralColorSuccessBorder: `var(--coral-color-success-border, hsla(110, 50%, 70%, 1))`, + coralColorSuccessBorderHover: `var(--coral-color-success-border-hover, hsla(110, 50%, 60%, 1))`, + coralColorSuccessBorderActive: `var(--coral-color-success-border-active, hsla(110, 50%, 50%, 1))`, + coralColorWarningText: `var(--coral-color-warning-text, hsla(27, 97%, 57%, 1))`, + coralColorWarningTextHover: `var(--coral-color-warning-text-hover, hsla(27, 97%, 47%, 1))`, + coralColorWarningTextActive: `var(--coral-color-warning-text-active, hsla(27, 97%, 37%, 1))`, + coralColorWarningTextWeak: `var(--coral-color-warning-text-weak, hsla(207, 18%, 24%, 1))`, + coralColorWarningTextWeakHover: `var(--coral-color-warning-text-weak-hover, hsla(22, 84%, 20%, 1))`, + coralColorWarningTextWeakActive: `var(--coral-color-warning-text-weak-active, hsla(23, 84%, 15%, 1))`, + coralColorWarningTextStrong: `var(--coral-color-warning-text-strong, hsla(27, 98%, 67%, 1))`, + coralColorWarningTextStrongHover: `var(--coral-color-warning-text-strong-hover, hsla(27, 97%, 57%, 1))`, + coralColorWarningTextStrongActive: `var(--coral-color-warning-text-strong-active, hsla(27, 98%, 47%, 1))`, + coralColorWarningBackground: `var(--coral-color-warning-background, hsla(22, 84%, 20%, 1))`, + coralColorWarningBackgroundHover: `var(--coral-color-warning-background-hover, hsla(22, 84%, 15%, 1))`, + coralColorWarningBackgroundActive: `var(--coral-color-warning-background-active, hsla(22, 84%, 10%, 1))`, + coralColorWarningBackgroundWeak: `var(--coral-color-warning-background-weak, hsla(207, 18%, 24%, 1))`, + coralColorWarningBackgroundWeakHover: `var(--coral-color-warning-background-weak-hover, hsla(22, 84%, 20%, 1))`, + coralColorWarningBackgroundWeakActive: `var(--coral-color-warning-background-weak-active, hsla(23, 84%, 15%, 1))`, + coralColorWarningBackgroundStrong: `var(--coral-color-warning-background-strong, hsla(27, 98%, 67%, 1))`, + coralColorWarningBackgroundStrongHover: `var(--coral-color-warning-background-strong-hover, hsla(27, 97%, 57%, 1))`, + coralColorWarningBackgroundStrongActive: `var(--coral-color-warning-background-strong-active, hsla(27, 98%, 47%, 1))`, + coralColorWarningBorder: `var(--coral-color-warning-border, hsla(27, 98%, 67%, 1))`, + coralColorWarningBorderHover: `var(--coral-color-warning-border-hover, hsla(27, 97%, 57%, 1))`, + coralColorWarningBorderActive: `var(--coral-color-warning-border-active, hsla(27, 98%, 47%, 1))`, + coralColorAssistiveBackground: `var(--coral-color-assistive-background, hsla(208, 20%, 83%, 1))`, + coralColorAssistiveText: `var(--coral-color-assistive-text, hsla(208, 18%, 14%, 1))`, + coralColorAssistiveBorder: `var(--coral-color-assistive-border, hsla(208, 20%, 63%, 1))`, + coralColorAssistiveBorderFocus: `var(--coral-color-assistive-border-focus, hsla(256, 66%, 76%, 1))`, + coralColorBrandingBrand: `var(--coral-color-branding-brand, hsla(359, 100%, 71%, 1))`, + coralColorNeutralBorderHover: `var(--coral-color-neutral-border-hover, hsla(206, 17%, 92%, 1))`, + coralColorBetaText: `var(--coral-color-beta-text, hsla(280, 44%, 72%, 1))`, + coralColorBetaTextHover: `var(--coral-color-beta-text-hover, hsla(280, 43%, 62%, 1))`, + coralColorBetaTextActive: `var(--coral-color-beta-text-active, hsla(280, 44%, 52%, 1))`, + coralColorBetaIcon: `var(--coral-color-beta-icon, hsla(280, 68%, 61%, 1))`, + coralColorBetaIconHover: `var(--coral-color-beta-icon-hover, hsla(280, 68%, 51%, 1))`, + coralColorBetaIconActive: `var(--coral-color-beta-icon-active, hsla(280, 67%, 41%, 1))`, + coralColorBetaTextWeak: `var(--coral-color-beta-text-weak, hsla(207, 18%, 24%, 1))`, + coralColorBetaTextWeakHover: `var(--coral-color-beta-text-weak-hover, hsla(281, 65%, 24%, 1))`, + coralColorBetaTextWeakActive: `var(--coral-color-beta-text-weak-active, hsla(280, 64%, 14%, 1))`, + coralColorBetaTextStrong: `var(--coral-color-beta-text-strong, hsla(279, 34%, 78%, 1))`, + coralColorBetaTextStrongHover: `var(--coral-color-beta-text-strong-hover, hsla(279, 34%, 68%, 1))`, + coralColorBetaTextStrongActive: `var(--coral-color-beta-text-strong-active, hsla(280, 34%, 48%, 1))`, + coralColorBetaBackground: `var(--coral-color-beta-background, hsla(281, 65%, 24%, 1))`, + coralColorBetaBackgroundHover: `var(--coral-color-beta-background-hover, hsla(280, 64%, 14%, 1))`, + coralColorBetaBackgroundActive: `var(--coral-color-beta-background-active, hsla(277, 62%, 4%, 1))`, + coralColorBetaBackgroundWeak: `var(--coral-color-beta-background-weak, hsla(207, 18%, 24%, 1))`, + coralColorBetaBackgroundWeakHover: `var(--coral-color-beta-background-weak-hover, hsla(281, 65%, 24%, 1))`, + coralColorBetaBackgroundWeakActive: `var(--coral-color-beta-background-weak-active, hsla(280, 64%, 14%, 1))`, + coralColorBetaBackgroundStrong: `var(--coral-color-beta-background-strong, hsla(279, 34%, 78%, 1))`, + coralColorBetaBackgroundStrongHover: `var(--coral-color-beta-background-strong-hover, hsla(279, 34%, 68%, 1))`, + coralColorBetaBackgroundStrongActive: `var(--coral-color-beta-background-strong-active, hsla(279, 34%, 48%, 1))`, + coralColorBetaBorder: `var(--coral-color-beta-border, hsla(279, 34%, 78%, 1))`, + coralColorBetaBorderHover: `var(--coral-color-beta-border-hover, hsla(279, 34%, 68%, 1))`, + coralColorBetaBorderActive: `var(--coral-color-beta-border-active, hsla(279, 34%, 48%, 1))`, + coralColorAccentIcon: `var(--coral-color-accent-icon, hsla(198, 76%, 67%, 1))`, + coralColorAccentIconHover: `var(--coral-color-accent-icon-hover, hsla(198, 76%, 57%, 1))`, + coralColorAccentIconActive: `var(--coral-color-accent-icon-active, hsla(198, 77%, 47%, 1))`, + coralColorDangerIcon: `var(--coral-color-danger-icon, hsla(2, 96%, 67%, 1))`, + coralColorDangerIconHover: `var(--coral-color-danger-icon-hover, hsla(2, 96%, 57%, 1))`, + coralColorDangerIconActive: `var(--coral-color-danger-icon-active, hsla(2, 97%, 47%, 1))`, + coralColorSuccessIconActive: `var(--coral-color-success-icon-active, hsla(110, 61%, 36%, 1))`, + coralColorSuccessIconHover: `var(--coral-color-success-icon-hover, hsla(110, 62%, 46%, 1))`, + coralColorSuccessIcon: `var(--coral-color-success-icon, hsla(110, 61%, 56%, 1))`, + coralColorWarningIconActive: `var(--coral-color-warning-icon-active, hsla(27, 98%, 19%, 1))`, + coralColorWarningIconHover: `var(--coral-color-warning-icon-hover, hsla(27, 99%, 29%, 1))`, + coralColorWarningIcon: `var(--coral-color-warning-icon, hsla(27, 99%, 49%, 1))`, + coralColorChartsNeutral: `var(--coral-color-charts-neutral, hsla(0, 0%, 75%, 1))`, + coralColorChartsNeutralWeak: `var(--coral-color-charts-neutral-weak, hsla(206, 10%, 48%, 1))`, + coralColorChartsNeutralStrong: `var(--coral-color-charts-neutral-strong, hsla(0, 0%, 88%, 1))`, + coralColorChartsNeutralHover: `var(--coral-color-charts-neutral-hover, hsla(0, 0%, 88%, 1))`, + coralColorChartsSuccess: `var(--coral-color-charts-success, hsla(148, 87%, 40%, 1))`, + coralColorChartsSuccessWeak: `var(--coral-color-charts-success-weak, hsla(130, 52%, 91%, 1))`, + coralColorChartsSuccessStrong: `var(--coral-color-charts-success-strong, hsla(139, 50%, 22%, 1))`, + coralColorChartsSuccessHover: `var(--coral-color-charts-success-hover, hsla(139, 50%, 22%, 1))`, + coralColorChartsDanger: `var(--coral-color-charts-danger, hsla(4, 89%, 49%, 1))`, + coralColorChartsDangerWeak: `var(--coral-color-charts-danger-weak, hsla(359, 69%, 73%, 1))`, + coralColorChartsDangerStrong: `var(--coral-color-charts-danger-strong, hsla(359, 62%, 43%, 1))`, + coralColorChartsDangerHover: `var(--coral-color-charts-danger-hover, hsla(359, 62%, 43%, 1))`, + coralColorChartsWarning: `var(--coral-color-charts-warning, hsla(32, 100%, 56%, 1))`, + coralColorChartsWarningWeak: `var(--coral-color-charts-warning-weak, hsla(22, 88%, 84%, 1))`, + coralColorChartsWarningStrong: `var(--coral-color-charts-warning-strong, hsla(22, 75%, 42%, 1))`, + coralColorChartsWarningHover: `var(--coral-color-charts-warning-hover, hsla(22, 75%, 42%, 1))`, + coralColorChartsDefault: `var(--coral-color-charts-default, hsla(216, 82%, 48%, 1))`, + coralColorChartsDefaultWeak: `var(--coral-color-charts-default-weak, hsla(204, 59%, 73%, 1))`, + coralColorChartsDefaultStrong: `var(--coral-color-charts-default-strong, hsla(204, 92%, 29%, 1))`, + coralColorChartsDefaultHover: `var(--coral-color-charts-default-hover, hsla(204, 92%, 29%, 1))`, + coralColorChartsColor00: `var(--coral-color-charts-color-00, hsla(48, 100%, 50%, 1))`, + coralColorChartsColor00Weak: `var(--coral-color-charts-color-00-weak, hsla(51, 91%, 82%, 1))`, + coralColorChartsColor00Strong: `var(--coral-color-charts-color-00-strong, hsla(48, 82%, 45%, 1))`, + coralColorChartsColor00Hover: `var(--coral-color-charts-color-00-hover, hsla(48, 82%, 45%, 1))`, + coralColorChartsColor01: `var(--coral-color-charts-color-01, hsla(216, 82%, 48%, 1))`, + coralColorChartsColor01Weak: `var(--coral-color-charts-color-01-weak, hsla(204, 59%, 73%, 1))`, + coralColorChartsColor01Strong: `var(--coral-color-charts-color-01-strong, hsla(204, 92%, 29%, 1))`, + coralColorChartsColor01Hover: `var(--coral-color-charts-color-01-hover, hsla(204, 92%, 29%, 1))`, + coralColorChartsColor02: `var(--coral-color-charts-color-02, hsla(194, 92%, 50%, 1))`, + coralColorChartsColor02Weak: `var(--coral-color-charts-color-02-weak, hsla(194, 91%, 91%, 1))`, + coralColorChartsColor02Strong: `var(--coral-color-charts-color-02-strong, hsla(194, 93%, 32%, 1))`, + coralColorChartsColor02Hover: `var(--coral-color-charts-color-02-hover, hsla(194, 93%, 32%, 1))`, + coralColorChartsColor03: `var(--coral-color-charts-color-03, hsla(140, 39%, 79%, 1))`, + coralColorChartsColor03Weak: `var(--coral-color-charts-color-03-weak, hsla(138, 40%, 92%, 1))`, + coralColorChartsColor03Strong: `var(--coral-color-charts-color-03-strong, hsla(139, 11%, 35%, 1))`, + coralColorChartsColor03Hover: `var(--coral-color-charts-color-03-hover, hsla(139, 11%, 35%, 1))`, + coralColorChartsColor04: `var(--coral-color-charts-color-04, hsla(148, 87%, 40%, 1))`, + coralColorChartsColor04Weak: `var(--coral-color-charts-color-04-weak, hsla(130, 52%, 91%, 1))`, + coralColorChartsColor04Strong: `var(--coral-color-charts-color-04-strong, hsla(139, 50%, 22%, 1))`, + coralColorChartsColor04Hover: `var(--coral-color-charts-color-04-hover, hsla(139, 50%, 22%, 1))`, + coralColorChartsColor05: `var(--coral-color-charts-color-05, hsla(324, 68%, 71%, 1))`, + coralColorChartsColor05Weak: `var(--coral-color-charts-color-05-weak, hsla(323, 69%, 95%, 1))`, + coralColorChartsColor05Strong: `var(--coral-color-charts-color-05-strong, hsla(324, 28%, 49%, 1))`, + coralColorChartsColor05Hover: `var(--coral-color-charts-color-05-hover, hsla(324, 28%, 49%, 1))`, + coralColorChartsColor06: `var(--coral-color-charts-color-06, hsla(280, 75%, 58%, 1))`, + coralColorChartsColor06Weak: `var(--coral-color-charts-color-06-weak, hsla(279, 77%, 88%, 1))`, + coralColorChartsColor06Strong: `var(--coral-color-charts-color-06-strong, hsla(280, 54%, 36%, 1))`, + coralColorChartsColor06Hover: `var(--coral-color-charts-color-06-hover, hsla(280, 54%, 36%, 1))`, + coralColorChartsColor07: `var(--coral-color-charts-color-07, hsla(4, 89%, 49%, 1))`, + coralColorChartsColor07Weak: `var(--coral-color-charts-color-07-weak, hsla(359, 69%, 73%, 1))`, + coralColorChartsColor07Strong: `var(--coral-color-charts-color-07-strong, hsla(359, 62%, 43%, 1))`, + coralColorChartsColor07Hover: `var(--coral-color-charts-color-07-hover, hsla(359, 62%, 43%, 1))`, + coralColorChartsColor08: `var(--coral-color-charts-color-08, hsla(22, 88%, 54%, 1))`, + coralColorChartsColor08Weak: `var(--coral-color-charts-color-08-weak, hsla(22, 88%, 84%, 1))`, + coralColorChartsColor08Strong: `var(--coral-color-charts-color-08-strong, hsla(22, 75%, 42%, 1))`, + coralColorChartsColor08Hover: `var(--coral-color-charts-color-08-hover, hsla(22, 75%, 42%, 1))`, + coralColorChartsColor09: `var(--coral-color-charts-color-09, hsla(34, 34%, 45%, 1))`, + coralColorChartsColor09Weak: `var(--coral-color-charts-color-09-weak, hsla(35, 28%, 82%, 1))`, + coralColorChartsColor09Strong: `var(--coral-color-charts-color-09-strong, hsla(35, 34%, 27%, 1))`, + coralColorChartsColor09Hover: `var(--coral-color-charts-color-09-hover, hsla(35, 34%, 27%, 1))`, + coralColorNeutralBorderStrong: `var(--coral-color-neutral-border-strong, hsla(0, 0%, 92%, 1))`, + coralColorNeutralBorderStrongHover: `var(--coral-color-neutral-border-strong-hover, hsla(216, 30%, 82%, 1))`, + coralColorNeutralIcon: `var(--coral-color-neutral-icon, hsla(210, 17%, 93%, 1))`, + coralColorNeutralIconInverted: `var(--coral-color-neutral-icon-inverted, hsla(210, 7%, 79%, 1))`, + coralColorNeutralIconWeak: `var(--coral-color-neutral-icon-weak, hsla(206, 24%, 83%, 1))`, + coralColorChartsDefaultText: `var(--coral-color-charts-default-text, hsla(205, 87%, 94%, 1))`, + coralColorChartsDefaultTextStrong: `var(--coral-color-charts-default-text-strong, hsla(205, 93%, 22%, 1))`, + coralColorChartsDefaultTextWeak: `var(--coral-color-charts-default-text-weak, hsla(207, 93%, 94%, 1))`, + coralColorChartsColor09Text: `var(--coral-color-charts-color-09-text, hsla(36, 36%, 5%, 1))`, + coralColorChartsColor09TextStrong: `var(--coral-color-charts-color-09-text-strong, hsla(36, 36%, 5%, 1))`, + coralColorChartsColor09TextWeak: `var(--coral-color-charts-color-09-text-weak, hsla(35, 28%, 82%, 1))`, + coralColorNeutralBackgroundHeavy: `var(--coral-color-neutral-background-heavy, hsla(204, 18%, 11%, 1))`, + coralColorIllustrationColor01: `var(--coral-color-illustration-color-01, hsla(358, 40%, 53%, 1))`, + coralColorIllustrationColor02: `var(--coral-color-illustration-color-02, hsla(355, 39%, 61%, 1))`, + coralColorIllustrationColor03: `var(--coral-color-illustration-color-03, hsla(349, 15%, 71%, 1))`, + coralColorIllustrationColor04: `var(--coral-color-illustration-color-04, hsla(211, 54%, 15%, 1))`, + coralColorIllustrationColor05: `var(--coral-color-illustration-color-05, hsla(212, 28%, 37%, 1))`, + coralColorIllustrationColor06: `var(--coral-color-illustration-color-06, hsla(212, 29%, 61%, 1))`, + coralColorIllustrationSkintone01: `var(--coral-color-illustration-skintone-01, hsla(20, 29%, 66%, 1))`, + coralColorIllustrationSkintone02: `var(--coral-color-illustration-skintone-02, hsla(21, 23%, 49%, 1))`, + coralColorIllustrationSkintone03: `var(--coral-color-illustration-skintone-03, hsla(17, 29%, 22%, 1))`, + coralColorIllustrationShadow: `var(--coral-color-illustration-shadow, hsla(0, 0%, 0%, 0.1))`, + coralColorIllustrationColor07: `var(--coral-color-illustration-color-07, hsla(213, 13%, 35%, 1))`, + coralColorIllustrationColor08: `var(--coral-color-illustration-color-08, hsla(212, 13%, 19%, 1))`, + coralColorIllustrationColor09: `var(--coral-color-illustration-color-09, hsla(240, 3%, 12%, 1))`, + coralColorAccentBackgroundSelected: `var(--coral-color-accent-background-selected, hsla(199, 73%, 13%, 1))`, + coralColorBrandText: `var(--coral-color-brand-text, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextHover: `var(--coral-color-brand-text-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextActive: `var(--coral-color-brand-text-active, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextInverted: `var(--coral-color-brand-text-inverted, hsla(0, 0%, 38%, 1))`, + coralColorBrandTextInvertedHover: `var(--coral-color-brand-text-inverted-hover, hsla(0, 0%, 13%, 1))`, + coralColorBrandTextInvertedActive: `var(--coral-color-brand-text-inverted-active, hsla(0, 0%, 13%, 1))`, + coralColorBrandTextSelected: `var(--coral-color-brand-text-selected, hsla(204, 96%, 18%, 1))`, + coralColorBrandBackgroundWeak: `var(--coral-color-brand-background-weak, hsla(0, 0%, 100%, 0))`, + coralColorBrandBackgroundWeakHover: `var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 100%, 0.1))`, + coralColorBrandBackgroundWeakActive: `var(--coral-color-brand-background-weak-active, hsla(0, 0%, 100%, 0.1))`, + coralColorBrandBackgroundSelected: `var(--coral-color-brand-background-selected, hsla(0, 0%, 100%, 1))`, + coralColorBrandBackgroundInverted: `var(--coral-color-brand-background-inverted, hsla(0, 0%, 13%, 0))`, + coralColorBrandBackgroundInvertedHover: `var(--coral-color-brand-background-inverted-hover, hsla(0, 0%, 13%, 0.1))`, + coralColorBrandBackgroundInvertedActive: `var(--coral-color-brand-background-inverted-active, hsla(0, 0%, 13%, 0.1))`, + coralColorBrandBorder: `var(--coral-color-brand-border, hsla(0, 0%, 100%, 1))`, + coralColorBrandBorderHover: `var(--coral-color-brand-border-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandBorderActive: `var(--coral-color-brand-border-active, hsla(0, 0%, 100%, 1))`, + coralColorInfoText: `var(--coral-color-info-text, hsla(198, 72%, 65%, 1))`, + coralColorInfoTextHover: `var(--coral-color-info-text-hover, hsla(198, 72%, 55%, 1))`, + coralColorInfoTextActive: `var(--coral-color-info-text-active, hsla(198, 72%, 45%, 1))`, + coralColorInfoIcon: `var(--coral-color-info-icon, hsla(198, 76%, 67%, 1))`, + coralColorInfoTextWeak: `var(--coral-color-info-text-weak, hsla(207, 18%, 24%, 1))`, + coralColorInfoTextWeakHover: `var(--coral-color-info-text-weak-hover, hsla(199, 71%, 15%, 1))`, + coralColorInfoTextWeakActive: `var(--coral-color-info-text-weak-active, hsla(199, 73%, 10%, 1))`, + coralColorInfoTextStrong: `var(--coral-color-info-text-strong, hsla(198, 72%, 75%, 1))`, + coralColorInfoTextStrongHover: `var(--coral-color-info-text-strong-hover, hsla(198, 72%, 65%, 1))`, + coralColorInfoTextStrongActive: `var(--coral-color-info-text-strong-active, hsla(198, 72%, 55%, 1))`, + coralColorInfoBackground: `var(--coral-color-info-background, hsla(198, 72%, 25%, 1))`, + coralColorInfoBackgroundHover: `var(--coral-color-info-background-hover, hsla(199, 78%, 20%, 1))`, + coralColorInfoBackgroundActive: `var(--coral-color-info-background-active, hsla(199, 73%, 10%, 1))`, + coralColorInfoBackgroundWeak: `var(--coral-color-info-background-weak, hsla(207, 18%, 24%, 1))`, + coralColorInfoBackgroundWeakHover: `var(--coral-color-info-background-weak-hover, hsla(199, 71%, 15%, 1))`, + coralColorInfoBackgroundWeakActive: `var(--coral-color-info-background-weak-active, hsla(199, 73%, 10%, 1))`, + coralColorInfoBackgroundStrong: `var(--coral-color-info-background-strong, hsla(198, 72%, 75%, 1))`, + coralColorInfoBackgroundStrongHover: `var(--coral-color-info-background-strong-hover, hsla(198, 72%, 65%, 1))`, + coralColorInfoBackgroundStrongActive: `var(--coral-color-info-background-strong-active, hsla(198, 72%, 55%, 1))`, + coralColorInfoBorder: `var(--coral-color-info-border, hsla(198, 72%, 75%, 1))`, + coralColorInfoBorderHover: `var(--coral-color-info-border-hover, hsla(198, 72%, 65%, 1))`, + coralColorInfoBorderActive: `var(--coral-color-info-border-active, hsla(199, 72%, 55%, 1))`, + coralColorInfoIconHover: `var(--coral-color-info-icon-hover, hsla(198, 76%, 57%, 1))`, + coralColorInfoIconActive: `var(--coral-color-info-icon-active, hsla(198, 77%, 47%, 1))`, + coralColorBrandIcon: `var(--coral-color-brand-icon, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconHover: `var(--coral-color-brand-icon-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconActive: `var(--coral-color-brand-icon-active, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconInverted: `var(--coral-color-brand-icon-inverted, hsla(0, 0%, 38%, 1))`, + coralColorBrandIconInvertedHover: `var(--coral-color-brand-icon-inverted-hover, hsla(0, 0%, 13%, 1))`, + coralColorBrandIconInvertedActive: `var(--coral-color-brand-icon-inverted-active, hsla(0, 0%, 13%, 1))`, + coralColorBrandIconSelected: `var(--coral-color-brand-icon-selected, hsla(204, 96%, 18%, 1))`, + coralColorBrandingBackground: `var(--coral-color-branding-background, linear-gradient(133deg,hsla(226, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%))`, + coralColorBrandingNavigation: `var(--coral-color-branding-navigation, linear-gradient(133deg,hsla(222, 49%, 14%, 1) 0%, hsla(253, 46%, 8%, 1) 100%))`, + coralColorBrandBackground: `var(--coral-color-brand-background, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, + coralSpacingXxs: `var(--coral-spacing-xxs, 0.4rem)`, + coralSpacingXs: `var(--coral-spacing-xs, 0.8rem)`, + coralSpacingS: `var(--coral-spacing-s, 1.2rem)`, + coralSpacingM: `var(--coral-spacing-m, 1.6rem)`, + coralSpacingL: `var(--coral-spacing-l, 2.8rem)`, + coralSpacingXl: `var(--coral-spacing-xl, 3.6rem)`, + coralSizingMinimal: `var(--coral-sizing-minimal, 1.2rem)`, + coralSizingXxxs: `var(--coral-sizing-xxxs, 1.6rem)`, + coralSizingXxs: `var(--coral-sizing-xxs, 2rem)`, + coralSizingXs: `var(--coral-sizing-xs, 2.4rem)`, + coralSizingS: `var(--coral-sizing-s, 2.8rem)`, + coralSizingM: `var(--coral-sizing-m, 3.6rem)`, + coralSizingL: `var(--coral-sizing-l, 4rem)`, + coralSizingXxxl: `var(--coral-sizing-xxxl, 22rem)`, + coralSizingMaximal: `var(--coral-sizing-maximal, 32rem)`, + coralElevationShadowNeutralM: `var(--coral-elevation-shadow-neutral-m, 0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.5))`, + coralElevationShadowNeutralL: `var(--coral-elevation-shadow-neutral-l, 0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.5))`, + coralElevationShadowAccent: `var(--coral-elevation-shadow-accent, 0rem 0.1rem 0.1rem 0rem hsla(198, 72%, 75%, 0.3))`, + coralElevationShadowSuccess: `var(--coral-elevation-shadow-success, 0rem 0.1rem 0.1rem 0rem hsla(110, 50%, 70%, 0.3))`, + coralElevationShadowDanger: `var(--coral-elevation-shadow-danger, 0rem 0.1rem 0.1rem 0rem hsla(359, 100%, 78%, 0.3))`, + coralElevationShadowWarning: `var(--coral-elevation-shadow-warning, 0rem 0.1rem 0.1rem 0rem hsla(27, 98%, 67%, 0.3))`, + coralElevationShadowBeta: `var(--coral-elevation-shadow-beta, 0rem 0.1rem 0.1rem 0rem hsla(279, 34%, 78%, 0.3))`, + coralElevationShadowNeutralInvertedM: `var(--coral-elevation-shadow-neutral-inverted-m, 0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 2%, 0.5))`, + coralElevationShadowNeutralInvertedL: `var(--coral-elevation-shadow-neutral-inverted-l, 0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 5%, 0.5))`, + coralElevationShadowNeutralS: `var(--coral-elevation-shadow-neutral-s, 0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5))`, + coralElevationShadowNeutralInvertedS: `var(--coral-elevation-shadow-neutral-inverted-s, 0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 2%, 0.5))`, + coralHeadingL: `var(--coral-heading-l, 600 1.8rem/140% 'Source Sans Pro')`, + coralHeadingM: `var(--coral-heading-m, 600 1.6rem/140% 'Source Sans Pro')`, + coralHeadingS: `var(--coral-heading-s, 600 1.4rem/140% 'Source Sans Pro')`, + coralParagraphM: `var(--coral-paragraph-m, 400 1.4rem/140% 'Source Sans Pro')`, + coralParagraphMBold: `var(--coral-paragraph-m-bold, 600 1.4rem/140% 'Source Sans Pro')`, + coralParagraphS: `var(--coral-paragraph-s, 400 1.2rem/140% 'Source Sans Pro')`, + coralParagraphSBold: `var(--coral-paragraph-s-bold, 600 1.2rem/140% 'Source Sans Pro')`, + coralDataM: `var(--coral-data-m, 400 1.4rem/140% 'Inconsolata')`, + coralDataMBold: `var(--coral-data-m-bold, 700 1.4rem/140% 'Inconsolata')`, + coralLinkMUnderlined: `var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')`, + coralLinkM: `var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')`, + coralDataXl: `var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')`, + coralLinkS: `var(--coral-link-s, 600 1.2rem/140% 'Source Sans Pro')`, + coralLinkSUnderlined: `var(--coral-link-s-underlined, 600 1.2rem/140% 'Source Sans Pro')`, + coralRadiusM: `var(--coral-radius-m, 0.8rem)`, + coralRadiusL: `var(--coral-radius-l, 1.6rem)`, + coralRadiusRound: `var(--coral-radius-round, 9999.9rem)`, + coralRadiusS: `var(--coral-radius-s, 0.4rem)`, + coralBorderSSolid: `var(--coral-border-s-solid, 1px solid)`, + coralBorderMSolid: `var(--coral-border-m-solid, 2px solid)`, + coralBorderSDashed: `var(--coral-border-s-dashed, 1px dashed)`, + coralBorderMDashed: `var(--coral-border-m-dashed, 2px dashed)`, + coralOpacityL: `var(--coral-opacity-l, 0.2)`, + coralOpacityM: `var(--coral-opacity-m, 0.4)`, + coralOpacityS: `var(--coral-opacity-s, 0.6)`, + coralBreakpointS: `var(--coral-breakpoint-s, 40em)`, + coralBreakpointM: `var(--coral-breakpoint-m, 48em)`, + coralBreakpointL: `var(--coral-breakpoint-l, 64em)`, + coralBreakpointXl: `var(--coral-breakpoint-xl, 80em)`, + coralBrandingLogo: `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=='))`, + coralTransitionInstant: `var(--coral-transition-instant, 100ms ease-out)`, + coralTransitionFast: `var(--coral-transition-fast, 250ms ease-in-out)`, + coralTransitionNormal: `var(--coral-transition-normal, 300ms ease-in-out)`, + coralTransitionSlow: `var(--coral-transition-slow, 400ms ease-in)`, + coralElevationLayerFlat: `var(--coral-elevation-layer-flat, 0)`, + coralElevationLayerStandardFront: `var(--coral-elevation-layer-standard-front, 4)`, + coralElevationLayerInteractiveFront: `var(--coral-elevation-layer-interactive-front, 8)`, + coralElevationLayerOverlay: `var(--coral-elevation-layer-overlay, 16)`, + coralAnimationHeartbeat: `var(--coral-animation-heartbeat, coral-dark-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite)`, }; -export default tokens; \ No newline at end of file +export default tokens; diff --git a/packages/design-tokens/src/light/_index.scss b/packages/design-tokens/src/light/_index.scss index 776fd2fe5cf..e77e8e0a4d1 100644 --- a/packages/design-tokens/src/light/_index.scss +++ b/packages/design-tokens/src/light/_index.scss @@ -223,8 +223,57 @@ --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: white; + --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: white; + --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: white; + --coral-color-brand-text-hover: white; + --coral-color-brand-text-active: white; + --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: white; + --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: white; + --coral-color-brand-border-hover: white; + --coral-color-brand-border-active: white; + --coral-color-info-background: hsla(204, 59%, 88%, 1); + --coral-color-brand-icon: white; + --coral-color-brand-icon-hover: white; + --coral-color-brand-icon-active: white; + --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; @@ -246,23 +295,25 @@ --coral-elevation-shadow-danger: 0 0.1rem 0.1rem 0 hsla(359, 51%, 53%, 0.3); --coral-elevation-shadow-warning: 0 0.1rem 0.1rem 0 hsla(22, 93%, 41%, 0.3); --coral-elevation-shadow-beta: 0 0.1rem 0.1rem 0 hsla(281, 58%, 29%, 0.3); - --coral-elevation-shadow-neutral-inverted-m: 0 -0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3); // stylelint-disable scss/operator-no-unspaced + --coral-elevation-shadow-neutral-inverted-m: 0 -0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3); --coral-elevation-shadow-neutral-inverted-l: 0 -0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.3); --coral-elevation-shadow-neutral-l: 0 0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.3); --coral-elevation-shadow-neutral-s: 0 0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.5); --coral-elevation-shadow-neutral-inverted-s: 0 -0.1rem 0.2rem 0 hsla(0, 0%, 0%, 0.3); - --coral-heading-l: 600 1.8rem/140% 'Source Sans Pro'; - --coral-paragraph-m: 400 1.4rem/140% 'Source Sans Pro'; - --coral-paragraph-m-bold: 600 1.4rem/140% 'Source Sans Pro'; - --coral-paragraph-s: 400 1.2rem/140% 'Source Sans Pro'; - --coral-paragraph-s-bold: 600 1.2rem/140% 'Source Sans Pro'; - --coral-heading-m: 600 1.6rem/140% 'Source Sans Pro'; - --coral-heading-s: 600 1.4rem/140% 'Source Sans Pro'; - --coral-data-m: 400 1.4rem/140% 'Inconsolata'; - --coral-data-m-bold: 700 1.4rem/140% 'Inconsolata'; - --coral-link-m-underlined: 600 1.4rem/140% 'Source Sans Pro'; - --coral-link-m: 600 1.4rem/140% 'Source Sans Pro'; - --coral-data-xl: 400 2.4rem/140% 'Inconsolata'; + --coral-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; @@ -290,5 +341,14 @@ --coral-animation-heartbeat: coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite; color-scheme: light; } -@keyframes coral-light-keyframes-blink { 0%, - 100% { opacity: 1; } 50% { opacity: 0.5; } }; + +@keyframes coral-light-keyframes-blink { + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } +} diff --git a/packages/design-tokens/src/light/dictionary.ts b/packages/design-tokens/src/light/dictionary.ts index 6b33ca9b3af..4aa0d04d243 100644 --- a/packages/design-tokens/src/light/dictionary.ts +++ b/packages/design-tokens/src/light/dictionary.ts @@ -1,2777 +1,3050 @@ const dictionary = [ - { - name: 'coralColorNeutralText', - type: 'color', - description: `Default text color. if you don't know which color to pick for text, then this is the safest bet.`, - hsla: 'hsla(0, 0%, 13%, 1)', - hex: '#202020', - value: 'hsla(0, 0%, 13%, 1)', - id: 'S:10c999cb93ee06de292f4d9709f22283fe62af43,' - }, - { - name: 'coralColorNeutralTextWeak', - type: 'color', - description: `Weak text color. -Best used when there is regular neutral-text next to it.`, - hsla: 'hsla(0, 0%, 38%, 1)', - hex: '#616161', - value: 'hsla(0, 0%, 38%, 1)', - id: 'S:d0d891a26f776586e59edbc79fc8b5044c4c1d67,' - }, - { - name: 'coralColorNeutralTextDisabled', - type: 'color', - description: `Disabled text color. -Only use for interactive elements in their disabled state. -`, - hsla: 'hsla(0, 0%, 44%, 1)', - hex: '#707070', - value: 'hsla(0, 0%, 44%, 1)', - id: 'S:ea3a5293bbd8868883f2210e9463b273d587ddd6,' - }, - { - name: 'coralColorNeutralTextInverted', - type: 'color', - description: `Inverted text color. -Only use on dark backgrounds. -`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:94a7c158b80c973456d5cc992e5ddce6d240a006,' - }, - { - name: 'coralColorNeutralBackground', - type: 'color', - description: `Default background color. If there's no reason for a semantic background, then that is the one to use.`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:c1a0034c50a38e51ca164bfd5e3d6b880bed6da7,' - }, - { - name: 'coralColorNeutralBackgroundMedium', - type: 'color', - description: `Medium contrasting background color. - -Ex: SubHeader`, - hsla: 'hsla(0, 0%, 97%, 1)', - hex: '#f7f7f7', - value: 'hsla(0, 0%, 97%, 1)', - id: 'S:67c8eb054cae339d5e6968f69f30900b6e096e5d,' - }, - { - name: 'coralColorNeutralBackgroundStrong', - type: 'color', - description: `Strongly contrasting background color. -Use sparingly. - -Ex: SubHeader back button.`, - hsla: 'hsla(0, 0%, 88%, 1)', - hex: '#e0e0e0', - value: 'hsla(0, 0%, 88%, 1)', - id: 'S:e860bbcf429d1a19f1528c7bddf304ec2a9b3b9a,' - }, - { - name: 'coralColorNeutralBackgroundDisabled', - type: 'color', - description: `Background color for disabled interactive elements only. - -Ex: Buttons`, - hsla: 'hsla(0, 0%, 88%, 1)', - hex: '#e0e0e0', - value: 'hsla(0, 0%, 88%, 1)', - id: 'S:200fc7c7a285466db40c8c5b5c308f9a0c22150e,' - }, - { - name: 'coralColorNeutralBorder', - type: 'color', - description: `Default border color. - -Ex: Inputs`, - hsla: 'hsla(0, 0%, 55%, 1)', - hex: '#8c8c8c', - value: 'hsla(0, 0%, 55%, 1)', - id: 'S:4f74b76b2783c3621c34c2c99bc6a59ba7420755,' - }, - { - name: 'coralColorNeutralBorderWeak', - type: 'color', - description: `Weaker border color, for discreet separators - -Ex: Dividers`, - hsla: 'hsla(0, 0%, 82%, 1)', - hex: '#d2d2d2', - value: 'hsla(0, 0%, 82%, 1)', - id: 'S:8e2cbe7a09479ac7528c901ca941659681239da3,' - }, - { - name: 'coralColorNeutralBorderHover', - type: 'color', - description: `Default border color, on mouseover. - -Ex: Inputs`, - hsla: 'hsla(0, 0%, 40%, 1)', - hex: '#666666', - value: 'hsla(0, 0%, 40%, 1)', - id: 'S:3aba03f6504578f37ae1623a909f59cba423d6f6,' - }, - { - name: 'coralColorAccentTextWeak', - type: 'color', - description: `Accent text color on accent-background-strong. - -Ex: ButtonPrimary`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:b161248608415cdb43f2b1effbf88c1c54e16247,' - }, - { - name: 'coralColorAccentTextWeakHover', - type: 'color', - description: `Accent text color on accent-background-strong, on mouseover. - -Ex: ButtonPrimary -`, - hsla: 'hsla(204, 59%, 88%, 1)', - hex: '#cde3f2', - value: 'hsla(204, 59%, 88%, 1)', - id: 'S:3b1aeb6600fd22b67debbf33ae3192c684ef564f,' - }, - { - name: 'coralColorAccentTextWeakActive', - type: 'color', - description: `Accent text color on accent-background-strong, while pressing. - -Ex: ButtonPrimary`, - hsla: 'hsla(205, 60%, 75%, 1)', - hex: '#9bc7e6', - value: 'hsla(205, 60%, 75%, 1)', - id: 'S:74ac7e3ea8a4211e464a52cc801c95aa98b88538,' - }, - { - name: 'coralColorAccentText', - type: 'color', - description: `Accent text color. -Use for interactive text content without background. - -Ex: Links`, - hsla: 'hsla(204, 95%, 31%, 1)', - hex: '#045d9a', - value: 'hsla(204, 95%, 31%, 1)', - id: 'S:4718b804e881a63c4d941b7c3e8a596f90e42364,' - }, - { - name: 'coralColorAccentTextHover', - type: 'color', - description: `Accent text color on mouseover. - -Ex: Links`, - hsla: 'hsla(204, 96%, 18%, 1)', - hex: '#023659', - value: 'hsla(204, 96%, 18%, 1)', - id: 'S:a6c8553b1ca97e0d2434639f226b3a3d6fa578bd,' - }, - { - name: 'coralColorAccentTextActive', - type: 'color', - description: `Accent text color while pressed. - -Ex: Links`, - hsla: 'hsla(205, 94%, 13%, 1)', - hex: '#022741', - value: 'hsla(205, 94%, 13%, 1)', - id: 'S:fc5e1ef075ba0395d985f5872660aee140c9db57,' - }, - { - name: 'coralColorAccentBackground', - type: 'color', - description: `Accent background color by default. Use with text-strong. - -Ex: InlineMessage`, - hsla: 'hsla(204, 59%, 88%, 1)', - hex: '#cde3f2', - value: 'hsla(204, 59%, 88%, 1)', - id: 'S:5a77c353aa9249ef687e53f4e30bba7a1b5bcf30,' - }, - { - name: 'coralColorAccentBackgroundHover', - type: 'color', - description: `Accent background color by default, on mouseover. `, - hsla: 'hsla(205, 60%, 75%, 1)', - hex: '#9bc7e6', - value: 'hsla(205, 60%, 75%, 1)', - id: 'S:f4591b46991fec51fa06fe0cdd8a283ced81f2e5,' - }, - { - name: 'coralColorAccentBackgroundActive', - type: 'color', - description: `Accent background color by default, while pressing. `, - hsla: 'hsla(204, 60%, 63%, 1)', - hex: '#69acd9', - value: 'hsla(204, 60%, 63%, 1)', - id: 'S:5b24749cb2dfdc31bedb6b0863660dfbeb30957b,' - }, - { - name: 'coralColorAccentBackgroundWeak', - type: 'color', - description: `Weakest accent background color. Same color as neutral-background but with accent-tinted hover and active. - -Use as placeholder to indicate that you want accent-tinted interactive states. - -Ex: ButtonTertiary`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:4ab71633a34bb81f90ab2a240d920a3a596d7aa1,' - }, - { - name: 'coralColorAccentBackgroundWeakHover', - type: 'color', - description: `Weakest accent background color on mouseover. - -Ex: ButtonTertiary`, - hsla: 'hsla(204, 59%, 88%, 1)', - hex: '#cde3f2', - value: 'hsla(204, 59%, 88%, 1)', - id: 'S:da9c12d0c5f2671f98fa54cff3e5526386839759,' - }, - { - name: 'coralColorAccentBackgroundWeakActive', - type: 'color', - description: `Weakest accent background color on press. - -Ex: ButtonTertiary`, - hsla: 'hsla(205, 60%, 75%, 1)', - hex: '#9bc7e6', - value: 'hsla(205, 60%, 75%, 1)', - id: 'S:e5ee6ad30225946448c18cd3d1b1674c0ded4b3c,' - }, - { - name: 'coralColorAccentBackgroundStrong', - type: 'color', - description: `Strongest accent background color. -Use for primary interactive items. Use with text-weak. - -Ex: ButtonPrimary`, - hsla: 'hsla(204, 95%, 31%, 1)', - hex: '#045d9a', - value: 'hsla(204, 95%, 31%, 1)', - id: 'S:61f362d892cc32bebc531aee4ef65aa01fa92844,' - }, - { - name: 'coralColorAccentBackgroundStrongHover', - type: 'color', - description: `Strongest accent background color on mouseover - -Ex: ButtonPrimary`, - hsla: 'hsla(204, 95%, 23%, 1)', - hex: '#034673', - value: 'hsla(204, 95%, 23%, 1)', - id: 'S:4c25100f44e0ed2470e2b94876cd890269b6438f,' - }, - { - name: 'coralColorAccentBackgroundStrongActive', - type: 'color', - description: `Strongest accent background color on press. - -Ex: ButtonPrimary`, - hsla: 'hsla(205, 95%, 15%, 1)', - hex: '#022e4d', - value: 'hsla(205, 95%, 15%, 1)', - id: 'S:6d0c3f163cac914d4e6d4b106f6ea9c8105a4c3f,' - }, - { - name: 'coralColorAccentBorderHover', - type: 'color', - description: `Border with accent color on mouseover. - -Ex: ButtonSecondary`, - hsla: 'hsla(204, 95%, 23%, 1)', - hex: '#034673', - value: 'hsla(204, 95%, 23%, 1)', - id: 'S:f1a7e54acba6696923d222eb71f2558121e59af4,' - }, - { - name: 'coralColorAccentBorderActive', - type: 'color', - description: `Border with accent color while pressing. - -Ex: ButtonSecondary`, - hsla: 'hsla(205, 95%, 15%, 1)', - hex: '#022e4d', - value: 'hsla(205, 95%, 15%, 1)', - id: 'S:bf65f82ea1ee9f963e885936067a5ad8ee5cb512,' - }, - { - name: 'coralColorDangerTextWeak', - type: 'color', - description: `Danger text color on danger-background-strong. - -Ex: ButtonDestructive`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:699bc0d4356f52927fc72f3ba9df43c2a9354d0b,' - }, - { - name: 'coralColorDangerTextWeakHover', - type: 'color', - description: `Danger text color on mouseover. - -Ex: ButtonDestructive`, - hsla: 'hsla(358, 100%, 94%, 1)', - hex: '#ffe1e2', - value: 'hsla(358, 100%, 94%, 1)', - id: 'S:fb762bea2ac42ac749119d549e114110e583f251,' - }, - { - name: 'coralColorDangerTextWeakActive', - type: 'color', - description: `Danger text color while pressing. - -Ex: ButtonDestructive`, - hsla: 'hsla(359, 100%, 88%, 1)', - hex: '#ffc4c5', - value: 'hsla(359, 100%, 88%, 1)', - id: 'S:67f0688f82f99baff4f7421e390a717e97f0afdf,' - }, - { - name: 'coralColorDangerText', - type: 'color', - description: `Danger text color. -Use for text content without background that must carry a negative semantic value on its own. `, - hsla: 'hsla(359, 51%, 53%, 1)', - hex: '#c4484a', - value: 'hsla(359, 51%, 53%, 1)', - id: 'S:c820445413c284b94cd3dca8c2978a97b8ebff2c,' - }, - { - name: 'coralColorDangerTextHover', - type: 'color', - description: `Danger text color on mouseover, if interactive. `, - hsla: 'hsla(359, 52%, 43%, 1)', - hex: '#a63537', - value: 'hsla(359, 52%, 43%, 1)', - id: 'S:cd4d1dcbba3ab13b836fb099611ff04fe0f63273,' - }, - { - name: 'coralColorDangerTextActive', - type: 'color', - description: `Danger text color while pressing, if interactive. `, - hsla: 'hsla(359, 51%, 33%, 1)', - hex: '#7f292a', - value: 'hsla(359, 51%, 33%, 1)', - id: 'S:32990ab88145c7d9e59b3f7adf70301c13015d39,' - }, - { - name: 'coralColorDangerBackground', - type: 'color', - description: `Danger background color by default. Use with text-strong. - -Ex: InlineMessage`, - hsla: 'hsla(0, 100%, 96%, 1)', - hex: '#ffebeb', - value: 'hsla(0, 100%, 96%, 1)', - id: 'S:dff3ff5e6251f3c293f017442816109091f44798,' - }, - { - name: 'coralColorDangerBackgroundHover', - type: 'color', - description: `Danger background on mouseover. `, - hsla: 'hsla(359, 100%, 88%, 1)', - hex: '#ffc4c5', - value: 'hsla(359, 100%, 88%, 1)', - id: 'S:88db13990c405e9d3f53532c6faf0f06c43f27ae,' - }, - { - name: 'coralColorDangerBackgroundActive', - type: 'color', - description: `Danger background while pressing.`, - hsla: 'hsla(359, 100%, 83%, 1)', - hex: '#ffa7a9', - value: 'hsla(359, 100%, 83%, 1)', - id: 'S:e6fa6b9051912500cd95000470dfd6b149823e0e,' - }, - { - name: 'coralColorDangerBackgroundWeak', - type: 'color', - description: `Weakest danger background color. Same color as neutral-background but with danger-tinted hover and active. - -Use as placeholder to indicate that you want danger-tinted interactive states.`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:3ddd20e98abac1a33a90eb12b9ff53edf0be431f,' - }, - { - name: 'coralColorDangerBackgroundWeakHover', - type: 'color', - description: `Weakest danger background color on mouseover. `, - hsla: 'hsla(358, 100%, 94%, 1)', - hex: '#ffe1e2', - value: 'hsla(358, 100%, 94%, 1)', - id: 'S:982e6680ebf84ece47e2221f5ef20d5e01284e9b,' - }, - { - name: 'coralColorDangerBackgroundWeakActive', - type: 'color', - description: `Weakest danger background color while pressed.`, - hsla: 'hsla(359, 100%, 88%, 1)', - hex: '#ffc4c5', - value: 'hsla(359, 100%, 88%, 1)', - id: 'S:5627ea1b6c645efc5068f2c3fc978b10791afd89,' - }, - { - name: 'coralColorSuccessTextWeak', - type: 'color', - description: `Success text color on success-background-strong. `, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:b418e852c5d1b8a6fe42acbed221985cb3f127f2,' - }, - { - name: 'coralColorSuccessTextWeakHover', - type: 'color', - description: `Success text color on mouseover. `, - hsla: 'hsla(110, 49%, 90%, 1)', - hex: '#ddf2d9', - value: 'hsla(110, 49%, 90%, 1)', - id: 'S:96b23b9fb65d55713eb4e3ceae9a927546b0e690,' - }, - { - name: 'coralColorSuccessTextWeakActive', - type: 'color', - description: `Success text color while pressed. `, - hsla: 'hsla(110, 48%, 85%, 1)', - hex: '#ccebc6', - value: 'hsla(110, 48%, 85%, 1)', - id: 'S:e94294b66324c3f46fe667d78ff4c3f8fa96c99a,' - }, - { - name: 'coralColorSuccessText', - type: 'color', - description: `Success text color. -Use for text content without background that must carry a positive semantic value on its own. - -Ex: StatusSuccessful`, - hsla: 'hsla(111, 49%, 34%, 1)', - hex: '#39812c', - value: 'hsla(111, 49%, 34%, 1)', - id: 'S:ffbfadc3dddedcc0961f945fcaa519892b76fe76,' - }, - { - name: 'coralColorSuccessTextHover', - type: 'color', - description: `Success text color on mouseover.`, - hsla: 'hsla(111, 49%, 29%, 1)', - hex: '#316e26', - value: 'hsla(111, 49%, 29%, 1)', - id: 'S:9ca8fcfbd8bbabe88daa5ad242511536f1a01aa1,' - }, - { - name: 'coralColorSuccessTextActive', - type: 'color', - description: `Success text color while pressed.`, - hsla: 'hsla(111, 49%, 24%, 1)', - hex: '#285b1f', - value: 'hsla(111, 49%, 24%, 1)', - id: 'S:c9960ec8e0fbb72b3176fe3dac962ef632cd97f1,' - }, - { - name: 'coralColorSuccessBackground', - type: 'color', - description: `Success background color by default. Use with text-strong. - -Ex: InlineMessage `, - hsla: 'hsla(110, 49%, 90%, 1)', - hex: '#ddf2d9', - value: 'hsla(110, 49%, 90%, 1)', - id: 'S:95830782a3ee2a02fb9be61ad9eca89b03d5f2e1,' - }, - { - name: 'coralColorDangerBackgroundStrong', - type: 'color', - description: `Strongest danger background color. Use on strong interactive elements with a negative semantic attached. Use with text-weak. - -Ex: ButtonDestructive `, - hsla: 'hsla(359, 51%, 53%, 1)', - hex: '#c4484a', - value: 'hsla(359, 51%, 53%, 1)', - id: 'S:b67b75c7937d3e89670b0b2e706cbe597a294709,' - }, - { - name: 'coralColorDangerBackgroundStrongHover', - type: 'color', - description: `Strongest danger background color on mouseover. - -Ex: ButtonDestructive`, - hsla: 'hsla(359, 54%, 38%, 1)', - hex: '#952d2f', - value: 'hsla(359, 54%, 38%, 1)', - id: 'S:cf0d1e51df9ed2ac0a3b80db051c2d9e1562ead0,' - }, - { - name: 'coralColorDangerBackgroundStrongActive', - type: 'color', - description: `Strongest danger background color while pressed. - -Ex: ButtonDestructive`, - hsla: 'hsla(359, 54%, 33%, 1)', - hex: '#812729', - value: 'hsla(359, 54%, 33%, 1)', - id: 'S:8dee3c9010fcd0e28be2b28cd915bd29fa2e2514,' - }, - { - name: 'coralColorDangerBorder', - type: 'color', - description: `Border color with danger semantic. - -Ex: Input in error state`, - hsla: 'hsla(359, 51%, 53%, 1)', - hex: '#c4484a', - value: 'hsla(359, 51%, 53%, 1)', - id: 'S:c87e7f1d145d085db0a232155acde5157e3fb3be,' - }, - { - name: 'coralColorSuccessBackgroundHover', - type: 'color', - description: `Success background color on mouseover. `, - hsla: 'hsla(110, 48%, 85%, 1)', - hex: '#ccebc6', - value: 'hsla(110, 48%, 85%, 1)', - id: 'S:a5648f39d5fd8c269fe9719eb0492879d051d3f4,' - }, - { - name: 'coralColorDangerBorderHover', - type: 'color', - description: `Border color with danger semantic on mouseover. - -Ex: Input in error state`, - hsla: 'hsla(359, 54%, 38%, 1)', - hex: '#952d2f', - value: 'hsla(359, 54%, 38%, 1)', - id: 'S:bb30957d53cb31c1c8141f1d572b99c3673db665,' - }, - { - name: 'coralColorSuccessBackgroundActive', - type: 'color', - description: `Success background color while pressed. `, - hsla: 'hsla(110, 49%, 80%, 1)', - hex: '#bbe5b3', - value: 'hsla(110, 49%, 80%, 1)', - id: 'S:33f82dbd9c654c29d0338f4de5007e483d475869,' - }, - { - name: 'coralColorDangerBorderActive', - type: 'color', - description: `Border color with danger semantic while pressing. - -Ex: Input in error state`, - hsla: 'hsla(359, 54%, 33%, 1)', - hex: '#812729', - value: 'hsla(359, 54%, 33%, 1)', - id: 'S:28931ad27aebb4371a9503277f095449aecb9bcb,' - }, - { - name: 'coralColorSuccessBackgroundWeak', - type: 'color', - description: `Weakest success background color. Same color as neutral-background but with success-tinted hover and active. - -Use as placeholder to indicate that you want success-tinted interactive states.`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:1d01add3e1aeec82426acb8d5b1246bdc29374d9,' - }, - { - name: 'coralColorSuccessBackgroundWeakHover', - type: 'color', - description: `Weakest success background color on mouseover.`, - hsla: 'hsla(110, 49%, 90%, 1)', - hex: '#ddf2d9', - value: 'hsla(110, 49%, 90%, 1)', - id: 'S:0b3d3ce6caa17154f21666351cd3c513ce65227b,' - }, - { - name: 'coralColorSuccessBackgroundWeakActive', - type: 'color', - description: `Weakest success background color while pressed.`, - hsla: 'hsla(110, 48%, 85%, 1)', - hex: '#ccebc6', - value: 'hsla(110, 48%, 85%, 1)', - id: 'S:0bede902379e0c55643d9f69a3c65a474d3ced38,' - }, - { - name: 'coralColorSuccessBackgroundStrong', - type: 'color', - description: `Strongest success background color. Use on strong interactive elements with a positive semantic attached. Use with text-weak.`, - hsla: 'hsla(111, 49%, 34%, 1)', - hex: '#39812c', - value: 'hsla(111, 49%, 34%, 1)', - id: 'S:b9943215670849a4f73933c228f323731d8ee407,' - }, - { - name: 'coralColorSuccessBackgroundStrongHover', - type: 'color', - description: `Strongest success background color on mouseover.`, - hsla: 'hsla(111, 49%, 29%, 1)', - hex: '#316e26', - value: 'hsla(111, 49%, 29%, 1)', - id: 'S:21c0dc76d97d31b7c5b98e3b19dcaf53ea1c818b,' - }, - { - name: 'coralColorSuccessBackgroundStrongActive', - type: 'color', - description: `Strongest success background color while pressed.`, - hsla: 'hsla(111, 49%, 24%, 1)', - hex: '#285b1f', - value: 'hsla(111, 49%, 24%, 1)', - id: 'S:e8adfa814ca367a2f65295d34477c37c10f818bb,' - }, - { - name: 'coralColorWarningTextWeak', - type: 'color', - description: `Warning text color on warning-background-strong. `, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:6dce8ae9ef0c12b7c6bca860dddca142d7f2c7c5,' - }, - { - name: 'coralColorWarningTextWeakHover', - type: 'color', - description: `Warning weak text color, on mouseover. `, - hsla: 'hsla(22, 85%, 92%, 1)', - hex: '#fce6d9', - value: 'hsla(22, 85%, 92%, 1)', - id: 'S:52d6dba6cfb3636d31269644277ca9b5a31963b4,' - }, - { - name: 'coralColorWarningTextWeakActive', - type: 'color', - description: `Warning weak text color, while pressed. `, - hsla: 'hsla(22, 85%, 82%, 1)', - hex: '#f8c7aa', - value: 'hsla(22, 85%, 82%, 1)', - id: 'S:ab9ff7e264b328e73d5b4c8e4ae4788d51c8a584,' - }, - { - name: 'coralColorSuccessBorder', - type: 'color', - description: `Border color with success semantic.`, - hsla: 'hsla(111, 49%, 34%, 1)', - hex: '#39812c', - value: 'hsla(111, 49%, 34%, 1)', - id: 'S:f78ebf0292cb1ad038d65aad96eebec270474f2a,' - }, - { - name: 'coralColorWarningText', - type: 'color', - description: `Waring text color. -Use for text content without background that must carry a warning semantic value on its own. - -Ex: StatusWarning`, - hsla: 'hsla(22, 93%, 41%, 1)', - hex: '#ca4d07', - value: 'hsla(22, 93%, 41%, 1)', - id: 'S:205803f0d35b940890c48c6565e1877dfc6db950,' - }, - { - name: 'coralColorWarningTextHover', - type: 'color', - description: `Waring text color, on mouseover.`, - hsla: 'hsla(21, 94%, 31%, 1)', - hex: '#993a05', - value: 'hsla(21, 94%, 31%, 1)', - id: 'S:8ea61eed299497beb4c9134308f544c16b11b191,' - }, - { - name: 'coralColorWarningTextActive', - type: 'color', - description: `Warning text color, while pressed.`, - hsla: 'hsla(21, 93%, 21%, 1)', - hex: '#682704', - value: 'hsla(21, 93%, 21%, 1)', - id: 'S:9b770e1c4b8e97ea0db856067c4d377fbbca6676,' - }, - { - name: 'coralColorWarningBackground', - type: 'color', - description: `Warning background color by default. Use with text-strong. - -Ex: InlineMessage`, - hsla: 'hsla(22, 85%, 92%, 1)', - hex: '#fce6d9', - value: 'hsla(22, 85%, 92%, 1)', - id: 'S:1dc621d9136e162ff9ea67764bf7b8f82b280a3c,' - }, - { - name: 'coralColorSuccessBorderHover', - type: 'color', - description: `Border color with success semantic, on mouseover.`, - hsla: 'hsla(111, 49%, 29%, 1)', - hex: '#316e26', - value: 'hsla(111, 49%, 29%, 1)', - id: 'S:7e93b8436eae345924a36ab81f809a0200f103a0,' - }, - { - name: 'coralColorWarningBackgroundHover', - type: 'color', - description: `Warning background color, on mouseover.`, - hsla: 'hsla(22, 85%, 82%, 1)', - hex: '#f8c7aa', - value: 'hsla(22, 85%, 82%, 1)', - id: 'S:ca0b064fde13f49c3efae291c3ffa8a3ea76d640,' - }, - { - name: 'coralColorSuccessBorderActive', - type: 'color', - description: `Border color with success semantic, while pressed.`, - hsla: 'hsla(111, 49%, 24%, 1)', - hex: '#285b1f', - value: 'hsla(111, 49%, 24%, 1)', - id: 'S:a0612979717038bd19818c9628055ef6778d0b41,' - }, - { - name: 'coralColorWarningBackgroundActive', - type: 'color', - description: `Warning background color, while pressed.`, - hsla: 'hsla(22, 85%, 72%, 1)', - hex: '#f4a87b', - value: 'hsla(22, 85%, 72%, 1)', - id: 'S:83e3662f59e3b023111f946a9772ac4652ebdd46,' - }, - { - name: 'coralColorWarningBackgroundWeak', - type: 'color', - description: `Weakest warning background color. Same color as neutral-background but with warning-tinted hover and active. - -Use as placeholder to indicate that you want warning-tinted interactive states.`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:a8fae482d49c8aebd35d856b0904f199dca4be7d,' - }, - { - name: 'coralColorAssistiveText', - type: 'color', - description: `Text for assistive elements. Use with assistive-background. - -Ex: Tooltip`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:0e7226809b08a34855c21052d9eba6ab6653fef0,' - }, - { - name: 'coralColorWarningBackgroundWeakHover', - type: 'color', - description: `Weakest warning background color, on mouseover.`, - hsla: 'hsla(22, 85%, 92%, 1)', - hex: '#fce6d9', - value: 'hsla(22, 85%, 92%, 1)', - id: 'S:115c644edd2868ad52b23d576e20ab8d1faa08d8,' - }, - { - name: 'coralColorWarningBackgroundWeakActive', - type: 'color', - description: `Weakest warning background color, while pressed.`, - hsla: 'hsla(22, 85%, 82%, 1)', - hex: '#f8c7aa', - value: 'hsla(22, 85%, 82%, 1)', - id: 'S:a0ee19e8777403147f0c81dfa683044f0b5cb2db,' - }, - { - name: 'coralColorAssistiveBackground', - type: 'color', - description: `Background for assistive elements. Use with assistive-text. - -Ex: Tooltip`, - hsla: 'hsla(210, 62%, 5%, 1)', - hex: '#050d15', - value: 'hsla(210, 62%, 5%, 1)', - id: 'S:f4a6fcb9f0533a453c37d323c82b6d52f4ec6bbc,' - }, - { - name: 'coralColorWarningBackgroundStrong', - type: 'color', - description: `Strongest warning background color. Use on strong interactive elements with a warning semantic attached. Use with text-weak.`, - hsla: 'hsla(22, 93%, 41%, 1)', - hex: '#ca4d07', - value: 'hsla(22, 93%, 41%, 1)', - id: 'S:51ccf9fa318e01e4c14968f239d096fad3260814,' - }, - { - name: 'coralColorWarningBackgroundStrongHover', - type: 'color', - description: `Strongest warning background color, on mouseover.`, - hsla: 'hsla(21, 94%, 31%, 1)', - hex: '#993a05', - value: 'hsla(21, 94%, 31%, 1)', - id: 'S:4eb56341e158a49f5b0d838089c8a8c18325ef55,' - }, - { - name: 'coralColorWarningBackgroundStrongActive', - type: 'color', - description: `Strongest warning background color, while pressed.`, - hsla: 'hsla(21, 93%, 21%, 1)', - hex: '#672704', - value: 'hsla(21, 93%, 21%, 1)', - id: 'S:88f29da5ec9704b5877e8ff58b2b018df64fe32c,' - }, - { - name: 'coralColorWarningBorder', - type: 'color', - description: `Border color with warning semantic.`, - hsla: 'hsla(22, 93%, 41%, 1)', - hex: '#ca4d07', - value: 'hsla(22, 93%, 41%, 1)', - id: 'S:bc12ace2f349e8b65c07bfb3b0647abbfbdc4f53,' - }, - { - name: 'coralColorAssistiveBorder', - type: 'color', - description: `Border for assistive elements. `, - hsla: 'hsla(0, 0%, 47%, 1)', - hex: '#797979', - value: 'hsla(0, 0%, 47%, 1)', - id: 'S:edc8f94e951e1a0fff555b30785298f191557a30,' - }, - { - name: 'coralColorWarningBorderHover', - type: 'color', - description: `Border color with warning semantic, on mouseover.`, - hsla: 'hsla(21, 94%, 31%, 1)', - hex: '#993a05', - value: 'hsla(21, 94%, 31%, 1)', - id: 'S:b6180ebd12bb4c6eaeb01bfadca62bed1d41ad00,' - }, - { - name: 'coralColorWarningBorderActive', - type: 'color', - description: `Border color with warning semantic, while pressed.`, - hsla: 'hsla(21, 93%, 21%, 1)', - hex: '#672704', - value: 'hsla(21, 93%, 21%, 1)', - id: 'S:0761e87f4a918be02b5867c09a06313aa004dec4,' - }, - { - name: 'coralColorBrandingBrand', - type: 'color', - description: `Main brand color. Used for logo.`, - hsla: 'hsla(359, 100%, 71%, 1)', - hex: '#ff6d70', - value: 'hsla(359, 100%, 71%, 1)', - id: 'S:6ec49ff780aa1ffdc439a65b477d377404ee0cba,' - }, - { - name: 'coralColorNeutralBorderDisabled', - type: 'color', - description: `Disabled border color for interactive elements - -Ex: Inputs`, - hsla: 'hsla(0, 0%, 65%, 1)', - hex: '#a6a6a6', - value: 'hsla(0, 0%, 65%, 1)', - id: 'S:9e515084692abf10acca4375ef1fee10b6b802ae,' - }, - { - name: 'coralColorNeutralBorderWeakHover', - type: 'color', - description: `Weaker border color on mouseover.`, - hsla: 'hsla(0, 0%, 72%, 1)', - hex: '#b8b8b8', - value: 'hsla(0, 0%, 72%, 1)', - id: 'S:a9d69c47fb18d002925ef03ce29d04c9a1912a2d,' - }, - { - name: 'coralColorAssistiveBorderFocus', - type: 'color', - description: `Focus color for focus rings across the products. - -Ex: Buttons on focus`, - hsla: 'hsla(241, 54%, 61%, 1)', - hex: '#6664d1', - value: 'hsla(241, 54%, 61%, 1)', - id: 'S:291a7efc9bc12a252e0c41ec95c0edf270728ba4,' - }, - { - name: 'coralColorAccentTextStrong', - type: 'color', - description: `Accent text color on accent-background.`, - hsla: 'hsla(204, 96%, 18%, 1)', - hex: '#023659', - value: 'hsla(204, 96%, 18%, 1)', - id: 'S:f80bab3d3a5c4169db07daaa142cba7a8c319bbf,' - }, - { - name: 'coralColorAccentTextStrongHover', - type: 'color', - description: `Accent text color on mouseover.`, - hsla: 'hsla(204, 97%, 13%, 1)', - hex: '#012741', - value: 'hsla(204, 97%, 13%, 1)', - id: 'S:09d4f5976437b18847136f6e78ddef914d6b1c4c,' - }, - { - name: 'coralColorAccentTextStrongActive', - type: 'color', - description: `Accent text color while pressed.`, - hsla: 'hsla(205, 95%, 8%, 1)', - hex: '#011828', - value: 'hsla(205, 95%, 8%, 1)', - id: 'S:1f612fe19d4a6f7b40f07ab6b359950695c372b3,' - }, - { - name: 'coralColorDangerTextStrong', - type: 'color', - description: `Danger text color on danger-background. `, - hsla: 'hsla(359, 47%, 44%, 1)', - hex: '#a43b3d', - value: 'hsla(359, 47%, 44%, 1)', - id: 'S:0daf7e338da469d7273cc3387f64769e5561bba6,' - }, - { - name: 'coralColorDangerTextStrongHover', - type: 'color', - description: `Danger text color on mouseover. `, - hsla: 'hsla(359, 54%, 38%, 1)', - hex: '#952d2f', - value: 'hsla(359, 54%, 38%, 1)', - id: 'S:130f15e66ec11629b190e8a054d7ae2f3067aa89,' - }, - { - name: 'coralColorDangerTextStrongActive', - type: 'color', - description: `Danger text color while pressing. `, - hsla: 'hsla(359, 54%, 33%, 1)', - hex: '#812729', - value: 'hsla(359, 54%, 33%, 1)', - id: 'S:e114ebc6d803ac76389920edfdb0263d8ebfac0b,' - }, - { - name: 'coralColorSuccessTextStrong', - type: 'color', - description: `Success text color on success-background. `, - hsla: 'hsla(111, 49%, 29%, 1)', - hex: '#316e26', - value: 'hsla(111, 49%, 29%, 1)', - id: 'S:f70b76be155a581e83a2653e3e42262698233ad0,' - }, - { - name: 'coralColorSuccessTextStrongHover', - type: 'color', - description: `Success text color on mouseover. `, - hsla: 'hsla(110, 49%, 24%, 1)', - hex: '#295b1f', - value: 'hsla(110, 49%, 24%, 1)', - id: 'S:98750920b619bb58f2925e3f7cba6223b58e6449,' - }, - { - name: 'coralColorSuccessTextStrongActive', - type: 'color', - description: `Success text color while pressed. `, - hsla: 'hsla(111, 48%, 19%, 1)', - hex: '#204819', - value: 'hsla(111, 48%, 19%, 1)', - id: 'S:f33802276e544153ba2839a331b0854974edcb00,' - }, - { - name: 'coralColorWarningTextStrong', - type: 'color', - description: `Warning text color on warning-background.`, - hsla: 'hsla(22, 86%, 27%, 1)', - hex: '#80360a', - value: 'hsla(22, 86%, 27%, 1)', - id: 'S:3fc8b5aff756feefa5ffd273245d54ac12d4292d,' - }, - { - name: 'coralColorWarningTextStrongHover', - type: 'color', - description: `Warning strong text color, on mouseover. `, - hsla: 'hsla(23, 86%, 22%, 1)', - hex: '#682c08', - value: 'hsla(23, 86%, 22%, 1)', - id: 'S:cbe0b9dbb86da3cd74ddb50b5aea7e3900e307b8,' - }, - { - name: 'coralColorWarningTextStrongActive', - type: 'color', - description: `Warning strong text color, while pressed.`, - hsla: 'hsla(23, 86%, 17%, 1)', - hex: '#502206', - value: 'hsla(23, 86%, 17%, 1)', - id: 'S:e39493d2ad527926e2080d02fd12225fe8543bcc,' - }, - { - name: 'coralColorBetaText', - type: 'color', - description: `Beta text color, for things that are new or temporary. -Use for text content without background that must carry a beta semantic value on its own. `, - hsla: 'hsla(280, 57%, 49%, 1)', - hex: '#9435c3', - value: 'hsla(280, 57%, 49%, 1)', - id: 'S:227ff46cc42d2ad216c72fa2494d8794dfdb604b,' - }, - { - name: 'coralColorBetaTextHover', - type: 'color', - description: `Beta text color, on mouseover.`, - hsla: 'hsla(281, 58%, 39%, 1)', - hex: '#772a9c', - value: 'hsla(281, 58%, 39%, 1)', - id: 'S:1860f4ec7fc795c6494c68844e682141ed03a626,' - }, - { - name: 'coralColorBetaTextActive', - type: 'color', - description: `Beta text color, while pressed.`, - hsla: 'hsla(281, 58%, 29%, 1)', - hex: '#591f74', - value: 'hsla(281, 58%, 29%, 1)', - id: 'S:cd9326dc6997b00ac83a24f221e1e3890489be14,' - }, - { - name: 'coralColorBetaIcon', - type: 'color', - description: `Icon with beta color. - -Ex: InlineMessage`, - hsla: 'hsla(280, 80%, 54%, 1)', - hex: '#aa2de8', - value: 'hsla(280, 80%, 54%, 1)', - id: 'S:db56e1eff68394f2df0a24020f98004dee0b6fe4,' - }, - { - name: 'coralColorBetaIconHover', - type: 'color', - description: `Icon with beta color, on mouseover.`, - hsla: 'hsla(280, 80%, 44%, 1)', - hex: '#8e16ca', - value: 'hsla(280, 80%, 44%, 1)', - id: 'S:0cd332fba92a693d38790f24ec3c3c77a5627d2c,' - }, - { - name: 'coralColorBetaIconActive', - type: 'color', - description: `Icon with beta color, while pressed.`, - hsla: 'hsla(280, 80%, 34%, 1)', - hex: '#6e119c', - value: 'hsla(280, 80%, 34%, 1)', - id: 'S:211e8a73a29e403dc16e7fd6c780060a81e2fffd,' - }, - { - name: 'coralColorBetaTextWeak', - type: 'color', - description: `Beta text color on beta-background-strong. `, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:3f576fd0d0c74680649087517d2449c5c57c72c0,' - }, - { - name: 'coralColorBetaTextWeakHover', - type: 'color', - description: `Beta weak text color, on mouseover.`, - hsla: 'hsla(280, 56%, 83%, 1)', - hex: '#dcbbec', - value: 'hsla(280, 56%, 83%, 1)', - id: 'S:20a77c0154975086869873e522e9a9e80348c26b,' - }, - { - name: 'coralColorBetaTextWeakActive', - type: 'color', - description: `Beta weak text color, while pressed.`, - hsla: 'hsla(280, 57%, 73%, 1)', - hex: '#c793e1', - value: 'hsla(280, 57%, 73%, 1)', - id: 'S:3485af3105644545dd9f11b518c3fd5cf6566299,' - }, - { - name: 'coralColorBetaTextStrong', - type: 'color', - description: `Beta text color on beta-background.`, - hsla: 'hsla(281, 58%, 29%, 1)', - hex: '#591f74', - value: 'hsla(281, 58%, 29%, 1)', - id: 'S:a6e7bfcd281bcc4752a1c9c25ff3c60a733fd578,' - }, - { - name: 'coralColorBetaTextStrongHover', - type: 'color', - description: `Beta strong text color, on mouseover. `, - hsla: 'hsla(282, 58%, 19%, 1)', - hex: '#3b144c', - value: 'hsla(282, 58%, 19%, 1)', - id: 'S:2e5cc532ac4389ce61fe097c688cf8bb569ee0c8,' - }, - { - name: 'coralColorBetaTextStrongActive', - type: 'color', - description: `Beta strong text color, while pressed. `, - hsla: 'hsla(282, 57%, 9%, 1)', - hex: '#1c0a24', - value: 'hsla(282, 57%, 9%, 1)', - id: 'S:fe383ab935ac26dd5db4dbe7793e6ee1f80c812f,' - }, - { - name: 'coralColorBetaBackground', - type: 'color', - description: `Beta background color by default. Use with text-strong. - -Ex: InlineMessage`, - hsla: 'hsla(279, 57%, 90%, 1)', - hex: '#ead7f4', - value: 'hsla(279, 57%, 90%, 1)', - id: 'S:1ec184206ed55d016a3f514a77eee1900a8ed873,' - }, - { - name: 'coralColorBetaBackgroundHover', - type: 'color', - description: `Beta background color, on mouseover.`, - hsla: 'hsla(279, 57%, 81%, 1)', - hex: '#d7b3ea', - value: 'hsla(279, 57%, 81%, 1)', - id: 'S:4876d5505ea073060ad802c1a066185940aeca5e,' - }, - { - name: 'coralColorBetaBackgroundActive', - type: 'color', - description: `Beta background color, while pressed.`, - hsla: 'hsla(279, 57%, 71%, 1)', - hex: '#c28bdf', - value: 'hsla(279, 57%, 71%, 1)', - id: 'S:067a9d2c3e499ecbf1a79ef6364ee32821b0eefe,' - }, - { - name: 'coralColorBetaBackgroundWeak', - type: 'color', - description: `Weakest beta background color. Same color as neutral-background but with beta-tinted hover and active. - -Use as placeholder to indicate that you want beta-tinted interactive states.`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:d1f61dd2c3cad1846e4f57e79fcde1f58634cc06,' - }, - { - name: 'coralColorBetaBackgroundWeakHover', - type: 'color', - description: `Weakest beta background color, on mouseover.`, - hsla: 'hsla(279, 57%, 90%, 1)', - hex: '#ead7f4', - value: 'hsla(279, 57%, 90%, 1)', - id: 'S:240afbe15e900b300118e38db2ee01f4d48fe034,' - }, - { - name: 'coralColorBetaBackgroundWeakActive', - type: 'color', - description: `Weakest beta background color, while pressed.`, - hsla: 'hsla(279, 57%, 80%, 1)', - hex: '#d5afe9', - value: 'hsla(279, 57%, 80%, 1)', - id: 'S:f2cce1ec920b37548ed3fdde169a89ec229f5e34,' - }, - { - name: 'coralColorBetaBackgroundStrong', - type: 'color', - description: `Strongest beta background color. Use on strong interactive elements with a beta semantic attached. Use with text-weak.`, - hsla: 'hsla(281, 58%, 29%, 1)', - hex: '#591f74', - value: 'hsla(281, 58%, 29%, 1)', - id: 'S:86b2e9b8edcaf46e38b62483a44c25615ce7aab1,' - }, - { - name: 'coralColorBetaBackgroundStrongHover', - type: 'color', - description: `Strongest beta background color, on mouseover.`, - hsla: 'hsla(282, 58%, 19%, 1)', - hex: '#3b144c', - value: 'hsla(282, 58%, 19%, 1)', - id: 'S:f5aedf911101596e26aaaab0e5858f60aebaf8b6,' - }, - { - name: 'coralColorBetaBackgroundStrongActive', - type: 'color', - description: `Strongest beta background color, while pressed.`, - hsla: 'hsla(282, 57%, 9%, 1)', - hex: '#1c0a24', - value: 'hsla(282, 57%, 9%, 1)', - id: 'S:bd666021047c26d8a7af952f7a2ba3ca1997ba10,' - }, - { - name: 'coralColorBetaBorder', - type: 'color', - description: `Border color with beta semantic.`, - hsla: 'hsla(281, 58%, 29%, 1)', - hex: '#591f74', - value: 'hsla(281, 58%, 29%, 1)', - id: 'S:7eee30677af86804bf5963bfd0e139ee793fb003,' - }, - { - name: 'coralColorBetaBorderHover', - type: 'color', - description: `Border color with beta semantic, on mouseover.`, - hsla: 'hsla(282, 58%, 19%, 1)', - hex: '#3b144c', - value: 'hsla(282, 58%, 19%, 1)', - id: 'S:da4c4bc68c80bc856b7e5e7b25966fe21631e5cf,' - }, - { - name: 'coralColorBetaBorderActive', - type: 'color', - description: `Border color with beta semantic, while pressed.`, - hsla: 'hsla(282, 57%, 9%, 1)', - hex: '#1c0a24', - value: 'hsla(282, 57%, 9%, 1)', - id: 'S:f802feaadec404388ce6b63f6a389106de317b25,' - }, - { - name: 'coralColorNeutralBorderStrong', - type: 'color', - description: `Strongest border color. - -Use on strong backgrounds (neutral-background-medium, -strong or -heavy).`, - hsla: 'hsla(0, 0%, 25%, 1)', - hex: '#404040', - value: 'hsla(0, 0%, 25%, 1)', - id: 'S:6d67f79c3f09a6c80192085883e78fe0c551a570,' - }, - { - name: 'coralColorNeutralBorderStrongHover', - type: 'color', - description: `Strongest border color on mouseover.`, - hsla: 'hsla(0, 0%, 15%, 1)', - hex: '#262626', - value: 'hsla(0, 0%, 15%, 1)', - id: 'S:7dab05073b0b6865ef824c49b6324eaba3ed4f1a,' - }, - { - name: 'coralColorNeutralIconInverted', - type: 'color', - description: `Neutral icon color on dark backgrounds.`, - hsla: 'hsla(0, 0%, 100%, 1)', - hex: '#ffffff', - value: 'hsla(0, 0%, 100%, 1)', - id: 'S:1475bba2bab6ad7cc2e50c844ee79e9423b0fec6,' - }, - { - name: 'coralColorNeutralIcon', - type: 'color', - description: `Default icon color. - -Best used when the icon doesn't expect interactivity. `, - hsla: 'hsla(0, 0%, 13%, 1)', - hex: '#202020', - value: 'hsla(0, 0%, 13%, 1)', - id: 'S:b20caee1566e1478fe5cada2ef7fb319dde974b1,' - }, - { - name: 'coralColorNeutralIconWeak', - type: 'color', - description: `Weakly contrasting icon color. - -Best used when there is regular neutral-text or neutral-icon colors nearby for efficient hierarchy.`, - hsla: 'hsla(0, 0%, 38%, 1)', - hex: '#616161', - value: 'hsla(0, 0%, 38%, 1)', - id: 'S:18981cf4fdba64a29264f759d65ce2a1c0e475c7,' - }, - { - name: 'coralColorAccentIcon', - type: 'color', - description: `Icon with accent color. - -Ex: ButtonIcon`, - hsla: 'hsla(204, 88%, 40%, 1)', - hex: '#0c78c2', - value: 'hsla(204, 88%, 40%, 1)', - id: 'S:b949f744154da7eadf2b84b481546390c6cfd276,' - }, - { - name: 'coralColorAccentIconHover', - type: 'color', - description: `Icon with accent color on mouseover. - -Ex: ButtonIcon`, - hsla: 'hsla(204, 88%, 30%, 1)', - hex: '#095990', - value: 'hsla(204, 88%, 30%, 1)', - id: 'S:360013e4e6ea521bceba7d4d104abb9dce876688,' - }, - { - name: 'coralColorAccentIconActive', - type: 'color', - description: `Icon with accent color while pressing. - -Ex: ButtonIcon`, - hsla: 'hsla(205, 88%, 20%, 1)', - hex: '#063b60', - value: 'hsla(205, 88%, 20%, 1)', - id: 'S:243e03c059ebd2b791db15d88463272ace4ab8c2,' - }, - { - name: 'coralColorDangerIcon', - type: 'color', - description: `Icon with danger color. - -Ex: Status`, - hsla: 'hsla(359, 69%, 53%, 1)', - hex: '#d93335', - value: 'hsla(359, 69%, 53%, 1)', - id: 'S:d8da6f95b630b6e5acddafafba8baf666115f8f7,' - }, - { - name: 'coralColorDangerIconHover', - type: 'color', - description: `Icon with danger color on mouseover.`, - hsla: 'hsla(359, 69%, 43%, 1)', - hex: '#b92224', - value: 'hsla(359, 69%, 43%, 1)', - id: 'S:d180d32a8e90a5865b56db7c104066b033dc493a,' - }, - { - name: 'coralColorDangerIconActive', - type: 'color', - description: `Icon with danger color while pressed.`, - hsla: 'hsla(359, 69%, 33%, 1)', - hex: '#8e1a1c', - value: 'hsla(359, 69%, 33%, 1)', - id: 'S:400548167d29a3f203b837d7eb75cbedf0387938,' - }, - { - name: 'coralColorSuccessIcon', - type: 'color', - description: `Icon with success color. - -Ex: StatusSuccessful`, - hsla: 'hsla(111, 53%, 40%, 1)', - hex: '#409c30', - value: 'hsla(111, 53%, 40%, 1)', - id: 'S:422500a652ca311e96539523813e80ec52f1d560,' - }, - { - name: 'coralColorSuccessIconHover', - type: 'color', - description: `Icon with success color, on mouseover.`, - hsla: 'hsla(111, 53%, 30%, 1)', - hex: '#307524', - value: 'hsla(111, 53%, 30%, 1)', - id: 'S:03176e2626a76ecde06c048a3ea82b099bc294a0,' - }, - { - name: 'coralColorSuccessIconActive', - type: 'color', - description: `Icon with success color, while pressed.`, - hsla: 'hsla(111, 53%, 20%, 1)', - hex: '#204e18', - value: 'hsla(111, 53%, 20%, 1)', - id: 'S:5bb84b4b5ef68dc153685366aef659cb2f56dbb0,' - }, - { - name: 'coralColorWarningIcon', - type: 'color', - description: `Icon with warning color. - -Ex: StatusWarning`, - hsla: 'hsla(22, 87%, 47%, 1)', - hex: '#e25c10', - value: 'hsla(22, 87%, 47%, 1)', - id: 'S:b281fb7af34bebfa8e71f5d5b3565a3c0e5b82fc,' - }, - { - name: 'coralColorWarningIconHover', - type: 'color', - description: `Icon with warning color, on mouseover.`, - hsla: 'hsla(22, 87%, 37%, 1)', - hex: '#b0480c', - value: 'hsla(22, 87%, 37%, 1)', - id: 'S:8c34d03b898d022052f45ca687fb59433dce7b5d,' - }, - { - name: 'coralColorWarningIconActive', - type: 'color', - description: `Icon with warning color, while pressed.`, - hsla: 'hsla(22, 87%, 27%, 1)', - hex: '#813409', - value: 'hsla(22, 87%, 27%, 1)', - id: 'S:0215678f15ac5deae83c0f1c58e700b8baee4f3a,' - }, - { - name: 'coralColorChartsNeutral', - type: 'color', - description: `Chart color: Neutral. -Use for neutral / empty semantic values. - -Ex: QualityBar`, - hsla: 'hsla(0, 0%, 22%, 1)', - hex: '#383838', - value: 'hsla(0, 0%, 22%, 1)', - id: 'S:a3d498a33ebeff2f580391259314ab9246358c4f,' - }, - { - name: 'coralColorChartsNeutralWeak', - type: 'color', - description: `Chart color: Neutral-weak. -Weak contrast for neutral / empty semantic values.`, - hsla: 'hsla(0, 0%, 83%, 1)', - hex: '#d4d4d4', - value: 'hsla(0, 0%, 83%, 1)', - id: 'S:95d1f769d53a6d21d966229e5213e8cc38bf9677,' - }, - { - name: 'coralColorChartsNeutralStrong', - type: 'color', - description: `Chart color: Neutral-strong. -Strong contrast for neutral / empty semantic values.`, - hsla: 'hsla(0, 0%, 12%, 1)', - hex: '#1f1f1f', - value: 'hsla(0, 0%, 12%, 1)', - id: 'S:e0a7b477ff9221f3efbcc06a30879f78d6d722f2,' - }, - { - name: 'coralColorChartsNeutralHover', - type: 'color', - description: `Chart color: Neutral on mouseover for interactive charts.`, - hsla: 'hsla(0, 0%, 12%, 1)', - hex: '#1f1f1f', - value: 'hsla(0, 0%, 12%, 1)', - id: 'S:dd28a6a4590f44fca8a6f21e5cc25641f662c426,' - }, - { - name: 'coralColorChartsSuccess', - type: 'color', - description: `Chart color: Success. -Use for success / positive semantic values. - -Ex: QualityBar`, - hsla: 'hsla(148, 87%, 40%, 1)', - hex: '#0dbd5e', - value: 'hsla(148, 87%, 40%, 1)', - id: 'S:33025d53ef61e6b730f35a93b6f7206094ef9385,' - }, - { - name: 'coralColorChartsSuccessWeak', - type: 'color', - description: `Chart color: Success-weak. -Weak contrast for positive / success semantic values.`, - hsla: 'hsla(130, 52%, 91%, 1)', - hex: '#dcf4e0', - value: 'hsla(130, 52%, 91%, 1)', - id: 'S:5ef8fc9a63f09034cbe7326b3c064772a27dc9fc,' - }, - { - name: 'coralColorChartsSuccessStrong', - type: 'color', - description: `Chart color: Success-strong. -Strong contrast for positive / success semantic values.`, - hsla: 'hsla(139, 50%, 22%, 1)', - hex: '#1c552e', - value: 'hsla(139, 50%, 22%, 1)', - id: 'S:8f8789e4b3e00968e8d720c29d8361fc314d5298,' - }, - { - name: 'coralColorChartsSuccessHover', - type: 'color', - description: `Chart color: Success on mouseover for interactive charts.`, - hsla: 'hsla(139, 50%, 22%, 1)', - hex: '#1c552e', - value: 'hsla(139, 50%, 22%, 1)', - id: 'S:cbf8d1b32e257667381b0602f227ddbba010c349,' - }, - { - name: 'coralColorChartsDanger', - type: 'color', - description: `Chart color: Danger. -Use for danger / negative semantic values. - -Ex: QualityBar`, - hsla: 'hsla(4, 89%, 49%, 1)', - hex: '#ea1b0e', - value: 'hsla(4, 89%, 49%, 1)', - id: 'S:c09c28e8f588fa65453e69c7c60435ac96c2b90c,' - }, - { - name: 'coralColorChartsDangerWeak', - type: 'color', - description: `Chart color: Danger-weak. -Weak contrast for negative / danger semantic values.`, - hsla: 'hsla(359, 69%, 73%, 1)', - hex: '#e9898a', - value: 'hsla(359, 69%, 73%, 1)', - id: 'S:9d2762507c6cfcd4c38cbdaa2b22353b183cdb6c,' - }, - { - name: 'coralColorChartsDangerStrong', - type: 'color', - description: `Chart color: Danger-strong. -Strong contrast for negative / danger semantic values.`, - hsla: 'hsla(359, 62%, 43%, 1)', - hex: '#b32a2c', - value: 'hsla(359, 62%, 43%, 1)', - id: 'S:a92bc8f79e8062726ea5c2a8e885ca92c01200d5,' - }, - { - name: 'coralColorChartsDangerHover', - type: 'color', - description: `Chart color: Danger on mouseover for interactive charts.`, - hsla: 'hsla(359, 62%, 43%, 1)', - hex: '#b32a2c', - value: 'hsla(359, 62%, 43%, 1)', - id: 'S:c1ce6adfead2561c6db73e0e3deba74cd961c53d,' - }, - { - name: 'coralColorChartsWarning', - type: 'color', - description: `Chart color: Warning. -Use for warning semantic values.`, - hsla: 'hsla(32, 100%, 56%, 1)', - hex: '#ff9820', - value: 'hsla(32, 100%, 56%, 1)', - id: 'S:25b2f6f66ea8a91c5c39eee7f51b5608693a4193,' - }, - { - name: 'coralColorChartsWarningWeak', - type: 'color', - description: `Chart color: Warning-weak. -Weak contrast for warning semantic values.`, - hsla: 'hsla(22, 88%, 84%, 1)', - hex: '#facbb0', - value: 'hsla(22, 88%, 84%, 1)', - id: 'S:169501744af03fdec2df5369469fdfabaa29d76f,' - }, - { - name: 'coralColorChartsWarningStrong', - type: 'color', - description: `Chart color: Warning-strong. -Strong contrast for warning semantic values.`, - hsla: 'hsla(22, 75%, 42%, 1)', - hex: '#b9541b', - value: 'hsla(22, 75%, 42%, 1)', - id: 'S:817044da616057f5e3106cde6fe45658c35e72b0,' - }, - { - name: 'coralColorChartsWarningHover', - type: 'color', - description: `Chart color: Warning on mouseover for interactive charts.`, - hsla: 'hsla(22, 75%, 42%, 1)', - hex: '#b9541b', - value: 'hsla(22, 75%, 42%, 1)', - id: 'S:d3ba5833d0e04af5ac82b406b0f60576962f6d53,' - }, - { - name: 'coralColorChartsDefault', - type: 'color', - description: `Chart color by default. -If the chart only has one set of value, and not a semantic (danger / warning / success) then use this colorset.`, - hsla: 'hsla(216, 82%, 48%, 1)', - hex: '#1667df', - value: 'hsla(216, 82%, 48%, 1)', - id: 'S:f916a19d4c11fc0a456321af7491e482ec9c982a,' - }, - { - name: 'coralColorChartsDefaultWeak', - type: 'color', - description: `Chart color: default-weak. -Weak contrast for basic chart values.`, - hsla: 'hsla(204, 59%, 73%, 1)', - hex: '#91c2e3', - value: 'hsla(204, 59%, 73%, 1)', - id: 'S:2b7a826d26354a36c8d2445d8a95b5e73f41e57d,' - }, - { - name: 'coralColorChartsDefaultStrong', - type: 'color', - description: `Chart color: default-strong. -Strong contrast for basic chart values. `, - hsla: 'hsla(204, 92%, 29%, 1)', - hex: '#06568d', - value: 'hsla(204, 92%, 29%, 1)', - id: 'S:6dab7b28417521c28a18b973701dc041c71f7a9b,' - }, - { - name: 'coralColorChartsDefaultHover', - type: 'color', - description: `Chart color: default on mouseover for interactive charts. - -if there is text on top if this, use default-text-weak.`, - hsla: 'hsla(204, 92%, 29%, 1)', - hex: '#06568d', - value: 'hsla(204, 92%, 29%, 1)', - id: 'S:52999beffff9eacf26bfed083486644be6b75d29,' - }, - { - name: 'coralColorChartsColor00', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(48, 100%, 50%, 1)', - hex: '#ffcc00', - value: 'hsla(48, 100%, 50%, 1)', - id: 'S:9505c4d1a23e896b95e637f2ef3666e55b02843c,' - }, - { - name: 'coralColorChartsColor00Weak', - type: 'color', - description: ``, - hsla: 'hsla(51, 91%, 82%, 1)', - hex: '#fbefa9', - value: 'hsla(51, 91%, 82%, 1)', - id: 'S:6ddd5f3350267fc82b40ac74c11496ca58792644,' - }, - { - name: 'coralColorChartsColor00Strong', - type: 'color', - description: ``, - hsla: 'hsla(48, 82%, 45%, 1)', - hex: '#d2ad15', - value: 'hsla(48, 82%, 45%, 1)', - id: 'S:e9d116f4a613f1a63cbd8d0184dc7317a699976c,' - }, - { - name: 'coralColorChartsColor00Hover', - type: 'color', - description: ``, - hsla: 'hsla(48, 82%, 45%, 1)', - hex: '#d2ad15', - value: 'hsla(48, 82%, 45%, 1)', - id: 'S:fe75e8b14455819f62530cac887c281db3cf5ecd,' - }, - { - name: 'coralColorChartsColor01', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(216, 82%, 48%, 1)', - hex: '#1667df', - value: 'hsla(216, 82%, 48%, 1)', - id: 'S:a720129992c4db38acc63651e44288d9dbe51dcd,' - }, - { - name: 'coralColorChartsColor01Weak', - type: 'color', - description: ``, - hsla: 'hsla(204, 59%, 73%, 1)', - hex: '#91c2e3', - value: 'hsla(204, 59%, 73%, 1)', - id: 'S:8d7bb5282649e7a36537bc19a112e6c4ff832dab,' - }, - { - name: 'coralColorChartsColor01Strong', - type: 'color', - description: ``, - hsla: 'hsla(204, 92%, 29%, 1)', - hex: '#06568d', - value: 'hsla(204, 92%, 29%, 1)', - id: 'S:6d5d6816f5e9af2400c4b36d7a1b0b2c89b5272b,' - }, - { - name: 'coralColorChartsColor01Hover', - type: 'color', - description: ``, - hsla: 'hsla(204, 92%, 29%, 1)', - hex: '#06568d', - value: 'hsla(204, 92%, 29%, 1)', - id: 'S:6a5ff3408046cc1276db9d4361741f502906d96f,' - }, - { - name: 'coralColorChartsColor02', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(194, 92%, 50%, 1)', - hex: '#0abef5', - value: 'hsla(194, 92%, 50%, 1)', - id: 'S:d0045a8ff307816f958b16732e55b0f5a823cd0d,' - }, - { - name: 'coralColorChartsColor02Weak', - type: 'color', - description: ``, - hsla: 'hsla(194, 91%, 91%, 1)', - hex: '#d2f3fd', - value: 'hsla(194, 91%, 91%, 1)', - id: 'S:1d99aef8c9cf2e2c44d9d652f8e1e791b68801d6,' - }, - { - name: 'coralColorChartsColor02Strong', - type: 'color', - description: ``, - hsla: 'hsla(194, 93%, 32%, 1)', - hex: '#067b9f', - value: 'hsla(194, 93%, 32%, 1)', - id: 'S:ef3900e5ddc1f8e7c72e0688f376f6cd46530124,' - }, - { - name: 'coralColorChartsColor02Hover', - type: 'color', - description: ``, - hsla: 'hsla(194, 93%, 32%, 1)', - hex: '#067b9f', - value: 'hsla(194, 93%, 32%, 1)', - id: 'S:fb8ac038db8ff8aaa626f292f8143e4ad5c106ba,' - }, - { - name: 'coralColorChartsColor03', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(140, 39%, 79%, 1)', - hex: '#b3dec1', - value: 'hsla(140, 39%, 79%, 1)', - id: 'S:d64422d228b90d9fa28c5227dc2effc6991f8b5e,' - }, - { - name: 'coralColorChartsColor03Weak', - type: 'color', - description: ``, - hsla: 'hsla(138, 40%, 92%, 1)', - hex: '#e1f2e6', - value: 'hsla(138, 40%, 92%, 1)', - id: 'S:3bcdcc34660e6fa4139952f2347bc8e14ee80a2d,' - }, - { - name: 'coralColorChartsColor03Strong', - type: 'color', - description: ``, - hsla: 'hsla(139, 11%, 35%, 1)', - hex: '#506356', - value: 'hsla(139, 11%, 35%, 1)', - id: 'S:3b8fc5892438a939aea3ceae27a42db6279f5c9d,' - }, - { - name: 'coralColorChartsColor03Hover', - type: 'color', - description: ``, - hsla: 'hsla(139, 11%, 35%, 1)', - hex: '#506356', - value: 'hsla(139, 11%, 35%, 1)', - id: 'S:4378d021b834eb01b63ab96dfdfe758d18c46d78,' - }, - { - name: 'coralColorChartsColor04', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(148, 87%, 40%, 1)', - hex: '#0dbd5e', - value: 'hsla(148, 87%, 40%, 1)', - id: 'S:449b70e4010307677623f7fa4ca30851c86f37c5,' - }, - { - name: 'coralColorChartsColor04Weak', - type: 'color', - description: ``, - hsla: 'hsla(130, 52%, 91%, 1)', - hex: '#dcf4e0', - value: 'hsla(130, 52%, 91%, 1)', - id: 'S:f8ca9fb1cd5602615e6c904437343600b1a92877,' - }, - { - name: 'coralColorChartsColor04Strong', - type: 'color', - description: ``, - hsla: 'hsla(139, 50%, 22%, 1)', - hex: '#1c552e', - value: 'hsla(139, 50%, 22%, 1)', - id: 'S:662a45487ae84c81c9ce13bac5aa32a2dd45e3d4,' - }, - { - name: 'coralColorChartsColor04Hover', - type: 'color', - description: ``, - hsla: 'hsla(139, 50%, 22%, 1)', - hex: '#1c552e', - value: 'hsla(139, 50%, 22%, 1)', - id: 'S:0da97488b7d438b02f2b872a18f7849d87f45e18,' - }, - { - name: 'coralColorChartsColor05', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(324, 68%, 71%, 1)', - hex: '#e884c0', - value: 'hsla(324, 68%, 71%, 1)', - id: 'S:b507bc0b849c50c9e60f4cb1c6b6e1d2a8ab6b66,' - }, - { - name: 'coralColorChartsColor05Weak', - type: 'color', - description: ``, - hsla: 'hsla(323, 69%, 95%, 1)', - hex: '#fbe9f4', - value: 'hsla(323, 69%, 95%, 1)', - id: 'S:84add423fc3c8a7f4fe5c3a774837bce3592d8d4,' - }, - { - name: 'coralColorChartsColor05Strong', - type: 'color', - description: ``, - hsla: 'hsla(324, 28%, 49%, 1)', - hex: '#a15b85', - value: 'hsla(324, 28%, 49%, 1)', - id: 'S:4214d17cb1ac1f2dea182c0e280d9c4cbe422229,' - }, - { - name: 'coralColorChartsColor05Hover', - type: 'color', - description: ``, - hsla: 'hsla(324, 28%, 49%, 1)', - hex: '#a15b85', - value: 'hsla(324, 28%, 49%, 1)', - id: 'S:00b56df15db6fedad4d91f4580aa73c3ab286422,' - }, - { - name: 'coralColorChartsColor06', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(280, 75%, 58%, 1)', - hex: '#b045e5', - value: 'hsla(280, 75%, 58%, 1)', - id: 'S:772945b3afc20071f0ae1e950f79358e5b3ad299,' - }, - { - name: 'coralColorChartsColor06Weak', - type: 'color', - description: ``, - hsla: 'hsla(279, 77%, 88%, 1)', - hex: '#e8caf8', - value: 'hsla(279, 77%, 88%, 1)', - id: 'S:998de68b1713f2c044aa5832c6cc327e58c5c444,' - }, - { - name: 'coralColorChartsColor06Strong', - type: 'color', - description: ``, - hsla: 'hsla(280, 54%, 36%, 1)', - hex: '#6e2b8f', - value: 'hsla(280, 54%, 36%, 1)', - id: 'S:0cab8edb4e986bdaca01029ef186a669ba9f8fd9,' - }, - { - name: 'coralColorChartsColor06Hover', - type: 'color', - description: ``, - hsla: 'hsla(280, 54%, 36%, 1)', - hex: '#6e2b8f', - value: 'hsla(280, 54%, 36%, 1)', - id: 'S:d37dfa3b2b250227d761d2e7c09b7703e396ce07,' - }, - { - name: 'coralColorChartsColor07', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(4, 89%, 49%, 1)', - hex: '#ea1b0e', - value: 'hsla(4, 89%, 49%, 1)', - id: 'S:c87f3de2572d12b7e9b00abecd2ecbb637e25d61,' - }, - { - name: 'coralColorChartsColor07Weak', - type: 'color', - description: ``, - hsla: 'hsla(359, 69%, 73%, 1)', - hex: '#e9898a', - value: 'hsla(359, 69%, 73%, 1)', - id: 'S:12f0499ea53fd49d90fbca59b38aa0cb4d759afa,' - }, - { - name: 'coralColorChartsColor07Strong', - type: 'color', - description: ``, - hsla: 'hsla(359, 62%, 43%, 1)', - hex: '#b32a2c', - value: 'hsla(359, 62%, 43%, 1)', - id: 'S:3972a1f74060849362fb18e23512a5c2279f3d88,' - }, - { - name: 'coralColorChartsColor07Hover', - type: 'color', - description: ``, - hsla: 'hsla(359, 62%, 43%, 1)', - hex: '#b32a2c', - value: 'hsla(359, 62%, 43%, 1)', - id: 'S:e22df6931d25e17ab33f853a637361ea04c2d6ef,' - }, - { - name: 'coralColorChartsColor08', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(22, 88%, 54%, 1)', - hex: '#f16e23', - value: 'hsla(22, 88%, 54%, 1)', - id: 'S:1f2255d330755c5c0791f2dbefba6708e6572c96,' - }, - { - name: 'coralColorChartsColor08Weak', - type: 'color', - description: ``, - hsla: 'hsla(22, 88%, 84%, 1)', - hex: '#facbb0', - value: 'hsla(22, 88%, 84%, 1)', - id: 'S:d579c1dabfd78618df9d1f2331ce493aecda0fcd,' - }, - { - name: 'coralColorChartsColor08Strong', - type: 'color', - description: ``, - hsla: 'hsla(22, 75%, 42%, 1)', - hex: '#b9541b', - value: 'hsla(22, 75%, 42%, 1)', - id: 'S:98aba11850cb841b7b47d27d4f4f58635e6cf3f4,' - }, - { - name: 'coralColorChartsColor08Hover', - type: 'color', - description: ``, - hsla: 'hsla(22, 75%, 42%, 1)', - hex: '#b9541b', - value: 'hsla(22, 75%, 42%, 1)', - id: 'S:fbd775d6781100ab78f34e1739b17eadefc93d12,' - }, - { - name: 'coralColorChartsColor09', - type: 'color', - description: `Chart color used in combinations with the other numerical chart colors. - -Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.`, - hsla: 'hsla(34, 34%, 45%, 1)', - hex: '#99784c', - value: 'hsla(34, 34%, 45%, 1)', - id: 'S:c36693434b12e24c60496af7e5069a405ac6c7e3,' - }, - { - name: 'coralColorChartsColor09Weak', - type: 'color', - description: ``, - hsla: 'hsla(35, 28%, 82%, 1)', - hex: '#ded3c4', - value: 'hsla(35, 28%, 82%, 1)', - id: 'S:f4224d0f302d3c637cf25f6c877926357b09f5fd,' - }, - { - name: 'coralColorChartsColor09Strong', - type: 'color', - description: ``, - hsla: 'hsla(35, 34%, 27%, 1)', - hex: '#5b482d', - value: 'hsla(35, 34%, 27%, 1)', - id: 'S:7ad3e194bd337aa2cdd3e0f14519b7dbeeb997db,' - }, - { - name: 'coralColorChartsColor09Hover', - type: 'color', - description: ``, - hsla: 'hsla(35, 34%, 27%, 1)', - hex: '#5b482d', - value: 'hsla(35, 34%, 27%, 1)', - id: 'S:72d13f5101e61b0cbc51cb43d69f6130f3401cc6,' - }, - { - name: 'coralColorAccentBorder', - type: 'color', - description: `Border with accent color. -Use for interactive items. - -Ex: ButtonSecondary`, - hsla: 'hsla(204, 95%, 31%, 1)', - hex: '#045d9a', - value: 'hsla(204, 95%, 31%, 1)', - id: 'S:42634bfd0b5232c9141eeca48dcb3e68f4fa539c,' - }, - { - name: 'coralColorChartsDefaultText', - type: 'color', - description: `Text color for chart-default. - -Text on a chart is discouraged, but if you must, then use this with chart-default.`, - hsla: 'hsla(205, 87%, 94%, 1)', - hex: '#e3f2fd', - value: 'hsla(205, 87%, 94%, 1)', - id: 'S:4053126865c4a29f156c4510e949fe1dc7acb1cb,' - }, - { - name: 'coralColorChartsDefaultTextStrong', - type: 'color', - description: `Strong text color for chart-default-weak. - -Text on a chart is discouraged, but if you must, then use this with chart-default-weak.`, - hsla: 'hsla(205, 93%, 22%, 1)', - hex: '#04426d', - value: 'hsla(205, 93%, 22%, 1)', - id: 'S:32f8872c35f7aef21e55d005702eee76f6900f79,' - }, - { - name: 'coralColorChartsDefaultTextWeak', - type: 'color', - description: `Weak text color for chart-default-strong. - -Text on a chart is discouraged, but if you must, then use this with chart-default-strong.`, - hsla: 'hsla(207, 93%, 94%, 1)', - hex: '#e3f2fe', - value: 'hsla(207, 93%, 94%, 1)', - id: 'S:26c5c4563fd31c901e561c0c5ea588dfdfad27af,' - }, - { - name: 'coralColorChartsColor09Text', - type: 'color', - description: ``, - hsla: 'hsla(36, 36%, 5%, 1)', - hex: '#130f09', - value: 'hsla(36, 36%, 5%, 1)', - id: 'S:25b5c8aaf3d73df7f9c85c67f7e0b1ae80e36d96,' - }, - { - name: 'coralColorChartsColor09TextStrong', - type: 'color', - description: ``, - hsla: 'hsla(36, 36%, 5%, 1)', - hex: '#130f09', - value: 'hsla(36, 36%, 5%, 1)', - id: 'S:64fe115052f5128efc8808e4604fb4916f95aa2b,' - }, - { - name: 'coralColorChartsColor09TextWeak', - type: 'color', - description: ``, - hsla: 'hsla(35, 28%, 82%, 1)', - hex: '#ded3c4', - value: 'hsla(35, 28%, 82%, 1)', - id: 'S:06b63dfa38fd3587b0d9ac36e39aa42ee105af9f,' - }, - { - name: 'coralColorNeutralBackgroundHeavy', - type: 'color', - description: ``, - hsla: 'hsla(0, 0%, 78%, 1)', - hex: '#c7c7c7', - value: 'hsla(0, 0%, 78%, 1)', - id: 'S:68962413973388b6bbd8a7289c8a6663b0a0f181,' - }, - { - name: 'coralColorIllustrationColor01', - type: 'color', - description: ``, - hsla: 'hsla(211, 62%, 26%, 1)', - hex: '#19416c', - value: 'hsla(211, 62%, 26%, 1)', - id: 'S:762d0c0efa6779e5cdc76d66f776e14ee71a025b,' - }, - { - name: 'coralColorIllustrationColor02', - type: 'color', - description: ``, - hsla: 'hsla(211, 43%, 47%, 1)', - hex: '#4577ac', - value: 'hsla(211, 43%, 47%, 1)', - id: 'S:837b9aebd89eab69c43d006ede8092ef135bf95b,' - }, - { - name: 'coralColorIllustrationColor03', - type: 'color', - description: ``, - hsla: 'hsla(201, 31%, 85%, 1)', - hex: '#cedde5', - value: 'hsla(201, 31%, 85%, 1)', - id: 'S:9e47f29eb4617ca185e105e34389f738cf219851,' - }, - { - name: 'coralColorIllustrationColor05', - type: 'color', - description: ``, - hsla: 'hsla(359, 82%, 81%, 1)', - hex: '#f6a5a6', - value: 'hsla(359, 82%, 81%, 1)', - id: 'S:daf383f79d6e42fd6a76b0c742d1ca53479fa80f,' - }, - { - name: 'coralColorIllustrationColor04', - type: 'color', - description: ``, - hsla: 'hsla(359, 100%, 72%, 1)', - hex: '#ff6e70', - value: 'hsla(359, 100%, 72%, 1)', - id: 'S:149abb7212b5f90ed8fd51b42d0c1b0c041c41ce,' - }, - { - name: 'coralColorIllustrationColor06', - type: 'color', - description: ``, - hsla: 'hsla(358, 100%, 93%, 1)', - hex: '#ffdadb', - value: 'hsla(358, 100%, 93%, 1)', - id: 'S:ab2775175f55f85408df3dd7d669ac917ce9eadb,' - }, - { - name: 'coralColorIllustrationSkintone01', - type: 'color', - description: ``, - hsla: 'hsla(20, 91%, 83%, 1)', - hex: '#fbc6ab', - value: 'hsla(20, 91%, 83%, 1)', - id: 'S:f7567796748717162af5198cb896f4ed96ee4742,' - }, - { - name: 'coralColorIllustrationSkintone02', - type: 'color', - description: ``, - hsla: 'hsla(21, 34%, 55%, 1)', - hex: '#b27f64', - value: 'hsla(21, 34%, 55%, 1)', - id: 'S:0b0d80721bce8ed6c2f64ebdb7c3090a42424c9e,' - }, - { - name: 'coralColorIllustrationSkintone03', - type: 'color', - description: ``, - hsla: 'hsla(17, 33%, 28%, 1)', - hex: '#5f3d30', - value: 'hsla(17, 33%, 28%, 1)', - id: 'S:c35a128779db152d6cf8e6bff417efeac92e6a06,' - }, - { - name: 'coralColorIllustrationShadow', - type: 'color', - description: ``, - hsla: 'hsla(0, 0%, 0%, 0.1)', - hex: '#0000001a', - value: 'hsla(0, 0%, 0%, 0.1)', - id: 'S:172b785f68dba8621e1a503f9d7ae87479f49167,' - }, - { - name: 'coralColorIllustrationColor07', - type: 'color', - description: ``, - hsla: 'hsla(192, 33%, 97%, 1)', - hex: '#f5f9fa', - value: 'hsla(192, 33%, 97%, 1)', - id: 'S:a057cff7a96776950911855a2cfdc6908bea927e,' - }, - { - name: 'coralColorIllustrationColor08', - type: 'color', - description: ``, - hsla: 'hsla(211, 23%, 74%, 1)', - hex: '#adbccc', - value: 'hsla(211, 23%, 74%, 1)', - id: 'S:939faa25bd307250cd34b2b27dea01b5798ec269,' - }, - { - name: 'coralColorIllustrationColor09', - type: 'color', - description: ``, - hsla: 'hsla(245, 10%, 23%, 1)', - hex: '#35343f', - value: 'hsla(245, 10%, 23%, 1)', - id: 'S:603e1e228ae66fa1496162cb8cdbec5a70580da9,' - }, - { - name: 'coralColorAccentBackgroundSelected', - type: 'color', - description: `Accent background for currently selected elements: - -Ex: Selected column or line in a datagrid.`, - hsla: 'hsla(204, 100%, 95%, 1)', - hex: '#e3f4ff', - value: 'hsla(204, 100%, 95%, 1)', - id: 'S:8e41c9f17635925c89f424569bb6ac93eb5c008e,' - }, - { - name: 'coralColorBrandingBackground', - type: 'gradient', - description: `Main brand background. Used for heroes.`, - value: 'linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%)', - id: 'S:48da8b40c9b41977ec986642cfb91febb77cc536,' - }, - { - name: 'coralColorBrandingNavigation', - type: 'gradient', - description: `Main navigation background. Used for TopBar and branded Sidebar.`, - value: 'linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%)', - id: 'S:901ebd713b6444217424da171789495f7e32c8d2,' - }, - { - name: 'coralSpacingXxs', - type: 'measure', - description: `Use for paddings or margins`, - value: '0.4rem', - id: '16bfe560-b4c3-11ec-8521-cbbf4c303d59' - }, - { - name: 'coralSpacingXs', - type: 'measure', - description: `Use for paddings or margins`, - value: '0.8rem', - id: '1ca7bca0-b4c3-11ec-b522-2f15f0dfcaeb' - }, - { - name: 'coralSpacingS', - type: 'measure', - description: `Use for paddings or margins`, - value: '1.2rem', - id: '2c35d2b0-b4c3-11ec-96ab-01d033d945fb' - }, - { - name: 'coralSpacingM', - type: 'measure', - description: `Use for paddings or margins`, - value: '1.6rem', - id: '35c79f20-b4c3-11ec-84df-e5bfacc479f2' - }, - { - name: 'coralSpacingL', - type: 'measure', - description: `Use for margins, paddings of really necessary`, - value: '2.8rem', - id: '3b3dc8d0-b4c3-11ec-b3c9-73d93683841a' - }, - { - name: 'coralSpacingXl', - type: 'measure', - description: `Use for margins, paddings of really necessary`, - value: '3.6rem', - id: '4247b1e0-b4c3-11ec-8804-23bba7614e8e' - }, - { - name: 'coralSizingMinimal', - type: 'measure', - description: `Use for fixed-size elements`, - value: '1.2rem', - id: 'c3717da0-b4c3-11ec-8909-db885780505b' - }, - { - name: 'coralSizingXxxs', - type: 'measure', - description: `For fixed-size elements. Minimal size for interactive elements.`, - value: '1.6rem', - id: 'ed784f70-b4c3-11ec-b3b5-d3127ac3649e' - }, - { - name: 'coralSizingXxs', - type: 'measure', - description: `Use for fixed-size elements`, - value: '2rem', - id: '08dc2e80-b4c4-11ec-8350-c9f2819e7422' - }, - { - name: 'coralSizingXs', - type: 'measure', - description: `Use for fixed-size elements`, - value: '2.4rem', - id: '0e48e250-b4c4-11ec-b383-adf02fe16153' - }, - { - name: 'coralSizingS', - type: 'measure', - description: `Use for fixed-size elements. - -Ex: Small Buttons`, - value: '2.8rem', - id: '12bf4f40-b4c4-11ec-ae8c-a93a8912678c' - }, - { - name: 'coralSizingM', - type: 'measure', - description: `Use for fixed-size elements. - -Ex: Buttons`, - value: '3.6rem', - id: '1c14d600-b4c4-11ec-9b40-6fc6b8a4ad7a' - }, - { - name: 'coralSizingL', - type: 'measure', - description: `Use for fixed-size elements. - -Ex: Icon illustration`, - value: '4rem', - id: '21129b60-b4c4-11ec-a702-27e439bbf696' - }, - { - name: 'coralSizingXxxl', - type: 'measure', - description: `Use for fixed-size elements. - -Ex: Spot illustration height`, - value: '22rem', - id: '292e1b80-b4c4-11ec-800e-5bc0e3562a54' - }, - { - name: 'coralSizingMaximal', - type: 'measure', - description: `Use for fixed-size elements. - -Ex: Spot illustration width`, - value: '32rem', - id: '2e751ee0-b4c4-11ec-9f9f-75ac4ca4ac00' - }, - { - name: 'coralElevationShadowNeutralM', - type: 'shadow', - description: `Default shadow. - -Use on "first layer" of elevation. `, - value: '0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3)', - id: 'S:34a756f910ffc665554a228b44d5eec1e9c463cb,:shadow:0' - }, - { - name: 'coralElevationShadowAccent', - type: 'shadow', - description: `Shadow with an accent tint. - -Use for subtle highlights. - -Ex: InlineMessage`, - value: '0rem 0.1rem 0.1rem 0rem hsla(204, 95%, 31%, 0.3)', - id: 'S:6361d40b509d112c733483b262d9b4929ad0e1a9,:shadow:0' - }, - { - name: 'coralElevationShadowSuccess', - type: 'shadow', - description: `Shadow with a success tint. - -Use for subtle highlights. - -Ex: InlineMessage`, - value: '0rem 0.1rem 0.1rem 0rem hsla(111, 49%, 34%, 0.3)', - id: 'S:1ccb355087e7a77695f62496bf7eb5c597e51b63,:shadow:0' - }, - { - name: 'coralElevationShadowDanger', - type: 'shadow', - description: `Shadow with a danger tint. - -Use for subtle highlights. - -Ex: InlineMessage`, - value: '0rem 0.1rem 0.1rem 0rem hsla(359, 51%, 53%, 0.3)', - id: 'S:127a019202b5a99380f18aeda574499aa518d902,:shadow:0' - }, - { - name: 'coralElevationShadowWarning', - type: 'shadow', - description: `Shadow with a warning tint. - -Use for subtle highlights. - -Ex: InlineMessage`, - value: '0rem 0.1rem 0.1rem 0rem hsla(22, 93%, 41%, 0.3)', - id: 'S:b336004b0f814ea5dea03c146da768f78dbe6495,:shadow:0' - }, - { - name: 'coralElevationShadowBeta', - type: 'shadow', - description: `Shadow with a beta tint. - -Use for subtle highlights. - -Ex: InlineMessage`, - value: '0rem 0.1rem 0.1rem 0rem hsla(281, 58%, 29%, 0.3)', - id: 'S:8b514aff6b0d1ad3862f3d1f04d9f0a7d9ee6f3e,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralInvertedM', - type: 'shadow', - description: `Default shadow. - -Use on "first layer" of elevation. Reserve it for elements sticking to the bottom of the viewport.`, - value: '0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3)', - id: 'S:1402e349bd668e8e2765a70a5b3c9d4aa261f6ac,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralInvertedL', - type: 'shadow', - description: `Large shadow. - -Use on "second layer" of elevation - something that need to be "above" anything else. -Reserve it for elements sticking to the bottom of the viewport.`, - value: '0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3)', - id: 'S:2442aa4ab53dacae61024bae62200ad42e042707,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralL', - type: 'shadow', - description: `Large shadow. - -Use on "second layer" of elevation - something that need to be "above" anything else.`, - value: '0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3)', - id: 'S:a2f6e4c6b17f0f6fcf8525d14fbd34f992350375,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralS', - type: 'shadow', - description: `Small shadow. - -Use for small elements such as accordion.`, - value: '0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5)', - id: 'S:c1c3ef7a3bd771214c8c2dbaa2991e62a9f42f60,:shadow:0' - }, - { - name: 'coralElevationShadowNeutralInvertedS', - type: 'shadow', - description: ``, - value: '0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.3)', - id: 'S:42035c14a5e1e8cc9bf3ce9173099f5df7f59780,:shadow:0' - }, - { - name: 'coralHeadingL', - type: 'typography', - description: `Heading text - Use for highest level headings.`, - value: `600 1.8rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.8rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:6bb115f27ce676bc5491994efd88dc26e42f8278,' - }, - { - name: 'coralParagraphM', - type: 'typography', - description: `Paragraph text - Standard size.`, - value: `400 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '400', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:5f86329d644f421531e3b10ecd2c2ddc9aab7534,' - }, - { - name: 'coralParagraphMBold', - type: 'typography', - description: `Paragraph text - Standard size, bold.`, - value: `600 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:d0051bcd9176315ca785dcd5f4f38cae78fc3365,' - }, - { - name: 'coralParagraphS', - type: 'typography', - description: `Paragraph text - Small size.`, - value: `400 1.2rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '400', - fontSize: '1.2rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:b65ed5e12e3bdbcd4e4d5c671e5e0c4e9c036508,' - }, - { - name: 'coralParagraphSBold', - type: 'typography', - description: `Paragraph text - Standard size bold.`, - value: `600 1.2rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.2rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:d1431673fbf2f45ad943eadb6059a7772f5e6135,' - }, - { - name: 'coralHeadingM', - type: 'typography', - description: `Heading text - Use for medium level headings, most current ones.`, - value: `600 1.6rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.6rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:66b449607e413393608bc764de806198cd9c823c,' - }, - { - name: 'coralHeadingS', - type: 'typography', - description: `Heading text - Use for small level headings. Use with caution, this can clash with bold paragraphs.`, - value: `600 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:3dd149175fbc721e3fb89a0b02bcfd5d52ac651e,' - }, - { - name: 'coralDataM', - type: 'typography', - description: ``, - value: `400 1.4rem/140% 'Inconsolata'`, - fontStyle: 'normal', - fontWeight: '400', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Inconsolata', - id: 'S:1237da4bc0c13b10a30023cb0076edbfc83f79e8,' - }, - { - name: 'coralDataMBold', - type: 'typography', - description: ``, - value: `700 1.4rem/140% 'Inconsolata'`, - fontStyle: 'normal', - fontWeight: '700', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Inconsolata', - id: 'S:4d7b8461e5b594b28d6d64272b468b810ff31e92,' - }, - { - name: 'coralLinkMUnderlined', - type: 'typography', - description: `Use only with accent/text-hover - -Developers: use Link component instead, you do not need to recreate styles.`, - value: `600 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:3a35dcf2dc13003c2de78b3720430ace5a5dcd77,' - }, - { - name: 'coralLinkM', - type: 'typography', - description: `Use only with accent/text. - -Developers: use Link component instead, you do not need to recreate styles.`, - value: `600 1.4rem/140% 'Source Sans Pro'`, - fontStyle: 'normal', - fontWeight: '600', - fontSize: '1.4rem', - lineHeight: '140%', - fontFamily: 'Source Sans Pro', - id: 'S:14231707ce62ba7e59d9fa51c7398fc916879560,' - }, - { - name: 'coralDataXl', - type: 'typography', - description: `Data text style - use for large display of metrics.`, - value: `400 2.4rem/140% 'Inconsolata'`, - fontStyle: 'normal', - fontWeight: '400', - fontSize: '2.4rem', - lineHeight: '140%', - fontFamily: 'Inconsolata', - id: 'S:6136688c80e14f3c6a44576a2d5b943c6ce76121,' - }, - { - name: 'coralRadiusM', - type: 'radius', - description: `Radius for molecules (Accordion, Fieldset, Popover, etc.)`, - value: '0.8rem', - id: '73293f90-3e58-11ec-94da-6d5db9104cfa' - }, - { - name: 'coralRadiusL', - type: 'radius', - description: `Radius for layout components (Card, Modal, etc.)`, - value: '1.6rem', - id: '7ba9c311-3e58-11ec-94da-6d5db9104cfa' - }, - { - name: 'coralRadiusRound', - type: 'radius', - description: `Radius for immediate actions (badges, switch, etc.)`, - value: '9999.9rem', - id: '887c1481-3e58-11ec-94da-6d5db9104cfa' - }, - { - name: 'coralRadiusS', - type: 'radius', - description: `Radius for atomic components (button, tag, tooltip, etc.) `, - value: '0.4rem', - id: '52824640-4783-11ec-a826-6db8532cd4e8' - }, - { - name: 'coralBorderSSolid', - type: 'border', - description: `Solid border to visually separate elements`, - value: `1px solid`, - id: '2856c970-40b4-11ec-a696-dbb292a77d6e' - }, - { - name: 'coralBorderMSolid', - type: 'border', - description: `Solid border to visually identify a selection`, - value: `2px solid`, - id: '3105aff1-40b4-11ec-a696-dbb292a77d6e' - }, - { - name: 'coralBorderSDashed', - type: 'border', - description: `Dashed border to visually identify potentially interactive components. - -Ex: Droppable zone`, - value: `1px dashed`, - id: '37916851-40b4-11ec-a696-dbb292a77d6e' - }, - { - name: 'coralBorderMDashed', - type: 'border', - description: `Dashed border to visually identify a possible selection. - -Ex: Ongoing mapper link`, - value: `2px dashed`, - id: '43602c71-40b4-11ec-a696-dbb292a77d6e' - }, - { - name: 'coralOpacityL', - type: 'opacity', - description: `Very transparent. - -Opacity for components that are not currently enabled.`, - value: `0.2`, - id: 'ddfa9d50-40b5-11ec-a696-dbb292a77d6e' - }, - { - name: 'coralOpacityM', - type: 'opacity', - description: `Transparent. - -Opacity for components that are only temporarily disabled.`, - value: `0.4`, - id: 'e9be8c01-40b5-11ec-a696-dbb292a77d6e' - }, - { - name: 'coralOpacityS', - type: 'opacity', - description: `Barely transparent.`, - value: `0.6`, - id: 'f65d4a51-40b5-11ec-a696-dbb292a77d6e' - }, - { - name: 'coralBreakpointS', - type: 'breakpoint', - description: `Small screen (Portrait)`, - value: `40em`, - id: 'e8d1aad0-4140-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBreakpointM', - type: 'breakpoint', - description: `Small screen (Landscape)`, - value: `48em`, - id: 'f70c8cf1-4140-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBreakpointL', - type: 'breakpoint', - description: `Wide screen (Portrait)`, - value: `64em`, - id: '034adbc1-4141-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBreakpointXl', - type: 'breakpoint', - description: `Wide screen (Landscape)`, - value: `80em`, - id: '12525cb1-4141-11ec-8de5-f7dcd20b9ace' - }, - { - name: 'coralBrandingLogo', - type: 'branding', - description: `Brand logo in App heading`, - value: `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==')`, - id: 'ee8df300-4787-11ec-a826-6db8532cd4e8' - }, - { - name: 'coralTransitionInstant', - type: 'transition', - description: `Instant transition for hovering effects (opacity, color...)`, - value: `100ms ease-out`, - id: 'fde4cb70-5d8b-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralTransitionFast', - type: 'transition', - description: `Fast transition for "out" effects (closing menu, hide modal...)`, - value: `250ms ease-in-out`, - id: '087f7c61-5d8c-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralTransitionNormal', - type: 'transition', - description: `Normal transition for "in" effects (opening menu, show modal...)`, - value: `300ms ease-in-out`, - id: '1f78fc71-5d8c-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralTransitionSlow', - type: 'transition', - description: `Slow transition for background illustrations with movement.`, - value: `400ms ease-in`, - id: '31b8ec11-5d8c-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralElevationLayerFlat', - type: 'elevation', - description: `Default content elevation`, - value: `0`, - id: '26c8aba1-5d8d-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralElevationLayerStandardFront', - type: 'elevation', - description: `First elevation layer. - -Just above the default content (Drawer, Modal, Fixed layout...)`, - value: `4`, - id: '2d995c41-5d8d-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralElevationLayerInteractiveFront', - type: 'elevation', - description: `Second elevation layer. - -For elements above any layout (Dropdown, Popover).`, - value: `8`, - id: '334e63b1-5d8d-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralElevationLayerOverlay', - type: 'elevation', - description: `Topmost layer. - -For items that stand on top of anything (Alert, Confirm, Tooltip, etc.)`, - value: `16`, - id: '3853ca31-5d8d-11ec-9f08-61882f73ab2c' - }, - { - name: 'coralAnimationHeartbeat', - type: 'animation', - description: `Heartbeat animation. - -Ex: Skeletons - -Usage: - -animate: tokens.$animation-heartbeat;`, - value: `coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite`, - id: '4c3ea510-93cf-11ec-969d-2dcd5665e329' - }, + { + name: 'coralColorNeutralText', + type: 'color', + description: + "Default text color. if you don't know which color to pick for text, then this is the safest bet.", + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:10c999cb93ee06de292f4d9709f22283fe62af43,', + }, + { + name: 'coralColorNeutralTextWeak', + type: 'color', + description: 'Weak text color. Best used when there is regular neutral-text next to it.', + hsla: 'hsla(0, 0%, 38%, 1)', + hex: '#616161', + value: 'hsla(0, 0%, 38%, 1)', + id: 'S:d0d891a26f776586e59edbc79fc8b5044c4c1d67,', + }, + { + name: 'coralColorNeutralTextDisabled', + type: 'color', + description: 'Disabled text color. Only use for interactive elements in their disabled state.', + hsla: 'hsla(0, 0%, 44%, 1)', + hex: '#707070', + value: 'hsla(0, 0%, 44%, 1)', + id: 'S:ea3a5293bbd8868883f2210e9463b273d587ddd6,', + }, + { + name: 'coralColorNeutralTextInverted', + type: 'color', + description: 'Inverted text color. Only use on dark backgrounds.', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:94a7c158b80c973456d5cc992e5ddce6d240a006,', + }, + { + name: 'coralColorNeutralBackground', + type: 'color', + description: + "Default background color. If there's no reason for a semantic background, then that is the one to use.", + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:c1a0034c50a38e51ca164bfd5e3d6b880bed6da7,', + }, + { + name: 'coralColorNeutralBackgroundMedium', + type: 'color', + description: 'Medium contrasting background color. Ex: SubHeader', + hsla: 'hsla(0, 0%, 97%, 1)', + hex: '#f7f7f7', + value: 'hsla(0, 0%, 97%, 1)', + id: 'S:67c8eb054cae339d5e6968f69f30900b6e096e5d,', + }, + { + name: 'coralColorNeutralBackgroundStrong', + type: 'color', + description: 'Strongly contrasting background color. Use sparingly. Ex: SubHeader back button.', + hsla: 'hsla(0, 0%, 88%, 1)', + hex: '#e0e0e0', + value: 'hsla(0, 0%, 88%, 1)', + id: 'S:e860bbcf429d1a19f1528c7bddf304ec2a9b3b9a,', + }, + { + name: 'coralColorNeutralBackgroundDisabled', + type: 'color', + description: 'Background color for disabled interactive elements only. Ex: Buttons', + hsla: 'hsla(0, 0%, 88%, 1)', + hex: '#e0e0e0', + value: 'hsla(0, 0%, 88%, 1)', + id: 'S:200fc7c7a285466db40c8c5b5c308f9a0c22150e,', + }, + { + name: 'coralColorNeutralBorder', + type: 'color', + description: 'Default border color. Ex: Inputs', + hsla: 'hsla(0, 0%, 55%, 1)', + hex: '#8c8c8c', + value: 'hsla(0, 0%, 55%, 1)', + id: 'S:4f74b76b2783c3621c34c2c99bc6a59ba7420755,', + }, + { + name: 'coralColorNeutralBorderWeak', + type: 'color', + description: 'Weaker border color, for discreet separatorsEx: Dividers', + hsla: 'hsla(0, 0%, 82%, 1)', + hex: '#d2d2d2', + value: 'hsla(0, 0%, 82%, 1)', + id: 'S:8e2cbe7a09479ac7528c901ca941659681239da3,', + }, + { + name: 'coralColorNeutralBorderHover', + type: 'color', + description: 'Default border color, on mouseover. Ex: Inputs', + hsla: 'hsla(0, 0%, 40%, 1)', + hex: '#666666', + value: 'hsla(0, 0%, 40%, 1)', + id: 'S:3aba03f6504578f37ae1623a909f59cba423d6f6,', + }, + { + name: 'coralColorAccentTextWeak', + type: 'color', + description: 'Accent text color on accent-background-strong. Ex: ButtonPrimary', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:b161248608415cdb43f2b1effbf88c1c54e16247,', + }, + { + name: 'coralColorAccentTextWeakHover', + type: 'color', + description: 'Accent text color on accent-background-strong, on mouseover. Ex: ButtonPrimary', + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:3b1aeb6600fd22b67debbf33ae3192c684ef564f,', + }, + { + name: 'coralColorAccentTextWeakActive', + type: 'color', + description: 'Accent text color on accent-background-strong, while pressing. Ex: ButtonPrimary', + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:74ac7e3ea8a4211e464a52cc801c95aa98b88538,', + }, + { + name: 'coralColorAccentText', + type: 'color', + description: + 'Accent text color. Use for interactive text content without background. Ex: Links', + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:4718b804e881a63c4d941b7c3e8a596f90e42364,', + }, + { + name: 'coralColorAccentTextHover', + type: 'color', + description: 'Accent text color on mouseover. Ex: Links', + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:a6c8553b1ca97e0d2434639f226b3a3d6fa578bd,', + }, + { + name: 'coralColorAccentTextActive', + type: 'color', + description: 'Accent text color while pressed. Ex: Links', + hsla: 'hsla(205, 94%, 13%, 1)', + hex: '#022741', + value: 'hsla(205, 94%, 13%, 1)', + id: 'S:fc5e1ef075ba0395d985f5872660aee140c9db57,', + }, + { + name: 'coralColorAccentBackground', + type: 'color', + description: 'Accent background color by default. Use with text-strong. Ex: InlineMessage', + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:5a77c353aa9249ef687e53f4e30bba7a1b5bcf30,', + }, + { + name: 'coralColorAccentBackgroundHover', + type: 'color', + description: 'Accent background color by default, on mouseover.', + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:f4591b46991fec51fa06fe0cdd8a283ced81f2e5,', + }, + { + name: 'coralColorAccentBackgroundActive', + type: 'color', + description: 'Accent background color by default, while pressing. ', + hsla: 'hsla(204, 60%, 63%, 1)', + hex: '#69acd9', + value: 'hsla(204, 60%, 63%, 1)', + id: 'S:5b24749cb2dfdc31bedb6b0863660dfbeb30957b,', + }, + { + name: 'coralColorAccentBackgroundWeak', + type: 'color', + description: + 'Weakest accent background color. Same color as neutral-background but with accent-tinted hover and active. Use as placeholder to indicate that you want accent-tinted interactive states. Ex: ButtonTertiary', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:4ab71633a34bb81f90ab2a240d920a3a596d7aa1,', + }, + { + name: 'coralColorAccentBackgroundWeakHover', + type: 'color', + description: 'Weakest accent background color on mouseover. Ex: ButtonTertiary', + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:da9c12d0c5f2671f98fa54cff3e5526386839759,', + }, + { + name: 'coralColorAccentBackgroundWeakActive', + type: 'color', + description: 'Weakest accent background color on press. Ex: ButtonTertiary', + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:e5ee6ad30225946448c18cd3d1b1674c0ded4b3c,', + }, + { + name: 'coralColorAccentBackgroundStrong', + type: 'color', + description: + 'Strongest accent background color. Use for primary interactive items. Use with text-weak. Ex: ButtonPrimary', + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:61f362d892cc32bebc531aee4ef65aa01fa92844,', + }, + { + name: 'coralColorAccentBackgroundStrongHover', + type: 'color', + description: 'Strongest accent background color on mouseover Ex: ButtonPrimary', + hsla: 'hsla(204, 95%, 23%, 1)', + hex: '#034673', + value: 'hsla(204, 95%, 23%, 1)', + id: 'S:4c25100f44e0ed2470e2b94876cd890269b6438f,', + }, + { + name: 'coralColorAccentBackgroundStrongActive', + type: 'color', + description: 'Strongest accent background color on press. Ex: ButtonPrimary', + hsla: 'hsla(205, 95%, 15%, 1)', + hex: '#022e4d', + value: 'hsla(205, 95%, 15%, 1)', + id: 'S:6d0c3f163cac914d4e6d4b106f6ea9c8105a4c3f,', + }, + { + name: 'coralColorAccentBorderHover', + type: 'color', + description: 'Border with accent color on mouseover. Ex: ButtonSecondary', + hsla: 'hsla(204, 95%, 23%, 1)', + hex: '#034673', + value: 'hsla(204, 95%, 23%, 1)', + id: 'S:f1a7e54acba6696923d222eb71f2558121e59af4,', + }, + { + name: 'coralColorAccentBorderActive', + type: 'color', + description: 'Border with accent color while pressing. Ex: ButtonSecondary', + hsla: 'hsla(205, 95%, 15%, 1)', + hex: '#022e4d', + value: 'hsla(205, 95%, 15%, 1)', + id: 'S:bf65f82ea1ee9f963e885936067a5ad8ee5cb512,', + }, + { + name: 'coralColorDangerTextWeak', + type: 'color', + description: 'Danger text color on danger-background-strong. Ex: ButtonDestructive', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:699bc0d4356f52927fc72f3ba9df43c2a9354d0b,', + }, + { + name: 'coralColorDangerTextWeakHover', + type: 'color', + description: 'Danger text color on mouseover. Ex: ButtonDestructive', + hsla: 'hsla(358, 100%, 94%, 1)', + hex: '#ffe1e2', + value: 'hsla(358, 100%, 94%, 1)', + id: 'S:fb762bea2ac42ac749119d549e114110e583f251,', + }, + { + name: 'coralColorDangerTextWeakActive', + type: 'color', + description: 'Danger text color while pressing. Ex: ButtonDestructive', + hsla: 'hsla(359, 100%, 88%, 1)', + hex: '#ffc4c5', + value: 'hsla(359, 100%, 88%, 1)', + id: 'S:67f0688f82f99baff4f7421e390a717e97f0afdf,', + }, + { + name: 'coralColorDangerText', + type: 'color', + description: + 'Danger text color. Use for text content without background that must carry a negative semantic value on its own. ', + hsla: 'hsla(359, 51%, 53%, 1)', + hex: '#c4484a', + value: 'hsla(359, 51%, 53%, 1)', + id: 'S:c820445413c284b94cd3dca8c2978a97b8ebff2c,', + }, + { + name: 'coralColorDangerTextHover', + type: 'color', + description: 'Danger text color on mouseover, if interactive.', + hsla: 'hsla(359, 52%, 43%, 1)', + hex: '#a63537', + value: 'hsla(359, 52%, 43%, 1)', + id: 'S:cd4d1dcbba3ab13b836fb099611ff04fe0f63273,', + }, + { + name: 'coralColorDangerTextActive', + type: 'color', + description: 'Danger text color while pressing, if interactive.', + hsla: 'hsla(359, 51%, 33%, 1)', + hex: '#7f292a', + value: 'hsla(359, 51%, 33%, 1)', + id: 'S:32990ab88145c7d9e59b3f7adf70301c13015d39,', + }, + { + name: 'coralColorDangerBackground', + type: 'color', + description: 'Danger background color by default. Use with text-strong. Ex: InlineMessage', + hsla: 'hsla(0, 100%, 96%, 1)', + hex: '#ffebeb', + value: 'hsla(0, 100%, 96%, 1)', + id: 'S:dff3ff5e6251f3c293f017442816109091f44798,', + }, + { + name: 'coralColorDangerBackgroundHover', + type: 'color', + description: 'Danger background on mouseover.', + hsla: 'hsla(359, 100%, 88%, 1)', + hex: '#ffc4c5', + value: 'hsla(359, 100%, 88%, 1)', + id: 'S:88db13990c405e9d3f53532c6faf0f06c43f27ae,', + }, + { + name: 'coralColorDangerBackgroundActive', + type: 'color', + description: 'Danger background while pressing.', + hsla: 'hsla(359, 100%, 83%, 1)', + hex: '#ffa7a9', + value: 'hsla(359, 100%, 83%, 1)', + id: 'S:e6fa6b9051912500cd95000470dfd6b149823e0e,', + }, + { + name: 'coralColorDangerBackgroundWeak', + type: 'color', + description: + 'Weakest danger background color. Same color as neutral-background but with danger-tinted hover and active. Use as placeholder to indicate that you want danger-tinted interactive states.', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:3ddd20e98abac1a33a90eb12b9ff53edf0be431f,', + }, + { + name: 'coralColorDangerBackgroundWeakHover', + type: 'color', + description: 'Weakest danger background color on mouseover.', + hsla: 'hsla(358, 100%, 94%, 1)', + hex: '#ffe1e2', + value: 'hsla(358, 100%, 94%, 1)', + id: 'S:982e6680ebf84ece47e2221f5ef20d5e01284e9b,', + }, + { + name: 'coralColorDangerBackgroundWeakActive', + type: 'color', + description: 'Weakest danger background color while pressed.', + hsla: 'hsla(359, 100%, 88%, 1)', + hex: '#ffc4c5', + value: 'hsla(359, 100%, 88%, 1)', + id: 'S:5627ea1b6c645efc5068f2c3fc978b10791afd89,', + }, + { + name: 'coralColorSuccessTextWeak', + type: 'color', + description: 'Success text color on success-background-strong. ', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:b418e852c5d1b8a6fe42acbed221985cb3f127f2,', + }, + { + name: 'coralColorSuccessTextWeakHover', + type: 'color', + description: 'Success text color on mouseover. ', + hsla: 'hsla(110, 49%, 90%, 1)', + hex: '#ddf2d9', + value: 'hsla(110, 49%, 90%, 1)', + id: 'S:96b23b9fb65d55713eb4e3ceae9a927546b0e690,', + }, + { + name: 'coralColorSuccessTextWeakActive', + type: 'color', + description: 'Success text color while pressed. ', + hsla: 'hsla(110, 48%, 85%, 1)', + hex: '#ccebc6', + value: 'hsla(110, 48%, 85%, 1)', + id: 'S:e94294b66324c3f46fe667d78ff4c3f8fa96c99a,', + }, + { + name: 'coralColorSuccessText', + type: 'color', + description: + 'Success text color. Use for text content without background that must carry a positive semantic value on its own. Ex: StatusSuccessful', + hsla: 'hsla(111, 49%, 34%, 1)', + hex: '#39812c', + value: 'hsla(111, 49%, 34%, 1)', + id: 'S:ffbfadc3dddedcc0961f945fcaa519892b76fe76,', + }, + { + name: 'coralColorSuccessTextHover', + type: 'color', + description: 'Success text color on mouseover.', + hsla: 'hsla(111, 49%, 29%, 1)', + hex: '#316e26', + value: 'hsla(111, 49%, 29%, 1)', + id: 'S:9ca8fcfbd8bbabe88daa5ad242511536f1a01aa1,', + }, + { + name: 'coralColorSuccessTextActive', + type: 'color', + description: 'Success text color while pressed.', + hsla: 'hsla(111, 49%, 24%, 1)', + hex: '#285b1f', + value: 'hsla(111, 49%, 24%, 1)', + id: 'S:c9960ec8e0fbb72b3176fe3dac962ef632cd97f1,', + }, + { + name: 'coralColorSuccessBackground', + type: 'color', + description: 'Success background color by default. Use with text-strong. Ex: InlineMessage ', + hsla: 'hsla(110, 49%, 90%, 1)', + hex: '#ddf2d9', + value: 'hsla(110, 49%, 90%, 1)', + id: 'S:95830782a3ee2a02fb9be61ad9eca89b03d5f2e1,', + }, + { + name: 'coralColorDangerBackgroundStrong', + type: 'color', + description: + 'Strongest danger background color. Use on strong interactive elements with a negative semantic attached. Use with text-weak. Ex: ButtonDestructive', + hsla: 'hsla(359, 51%, 53%, 1)', + hex: '#c4484a', + value: 'hsla(359, 51%, 53%, 1)', + id: 'S:b67b75c7937d3e89670b0b2e706cbe597a294709,', + }, + { + name: 'coralColorDangerBackgroundStrongHover', + type: 'color', + description: 'Strongest danger background color on mouseover. Ex: ButtonDestructive', + hsla: 'hsla(359, 54%, 38%, 1)', + hex: '#952d2f', + value: 'hsla(359, 54%, 38%, 1)', + id: 'S:cf0d1e51df9ed2ac0a3b80db051c2d9e1562ead0,', + }, + { + name: 'coralColorDangerBackgroundStrongActive', + type: 'color', + description: 'Strongest danger background color while pressed. Ex: ButtonDestructive', + hsla: 'hsla(359, 54%, 33%, 1)', + hex: '#812729', + value: 'hsla(359, 54%, 33%, 1)', + id: 'S:8dee3c9010fcd0e28be2b28cd915bd29fa2e2514,', + }, + { + name: 'coralColorDangerBorder', + type: 'color', + description: 'Border color with danger semantic. Ex: Input in error state', + hsla: 'hsla(359, 51%, 53%, 1)', + hex: '#c4484a', + value: 'hsla(359, 51%, 53%, 1)', + id: 'S:c87e7f1d145d085db0a232155acde5157e3fb3be,', + }, + { + name: 'coralColorSuccessBackgroundHover', + type: 'color', + description: 'Success background color on mouseover. ', + hsla: 'hsla(110, 48%, 85%, 1)', + hex: '#ccebc6', + value: 'hsla(110, 48%, 85%, 1)', + id: 'S:a5648f39d5fd8c269fe9719eb0492879d051d3f4,', + }, + { + name: 'coralColorDangerBorderHover', + type: 'color', + description: 'Border color with danger semantic on mouseover. Ex: Input in error state', + hsla: 'hsla(359, 54%, 38%, 1)', + hex: '#952d2f', + value: 'hsla(359, 54%, 38%, 1)', + id: 'S:bb30957d53cb31c1c8141f1d572b99c3673db665,', + }, + { + name: 'coralColorSuccessBackgroundActive', + type: 'color', + description: 'Success background color while pressed. ', + hsla: 'hsla(110, 49%, 80%, 1)', + hex: '#bbe5b3', + value: 'hsla(110, 49%, 80%, 1)', + id: 'S:33f82dbd9c654c29d0338f4de5007e483d475869,', + }, + { + name: 'coralColorDangerBorderActive', + type: 'color', + description: 'Border color with danger semantic while pressing. Ex: Input in error state', + hsla: 'hsla(359, 54%, 33%, 1)', + hex: '#812729', + value: 'hsla(359, 54%, 33%, 1)', + id: 'S:28931ad27aebb4371a9503277f095449aecb9bcb,', + }, + { + name: 'coralColorSuccessBackgroundWeak', + type: 'color', + description: + 'Weakest success background color. Same color as neutral-background but with success-tinted hover and active. Use as placeholder to indicate that you want success-tinted interactive states.', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:1d01add3e1aeec82426acb8d5b1246bdc29374d9,', + }, + { + name: 'coralColorSuccessBackgroundWeakHover', + type: 'color', + description: 'Weakest success background color on mouseover.', + hsla: 'hsla(110, 49%, 90%, 1)', + hex: '#ddf2d9', + value: 'hsla(110, 49%, 90%, 1)', + id: 'S:0b3d3ce6caa17154f21666351cd3c513ce65227b,', + }, + { + name: 'coralColorSuccessBackgroundWeakActive', + type: 'color', + description: 'Weakest success background color while pressed.', + hsla: 'hsla(110, 48%, 85%, 1)', + hex: '#ccebc6', + value: 'hsla(110, 48%, 85%, 1)', + id: 'S:0bede902379e0c55643d9f69a3c65a474d3ced38,', + }, + { + name: 'coralColorSuccessBackgroundStrong', + type: 'color', + description: + 'Strongest success background color. Use on strong interactive elements with a positive semantic attached. Use with text-weak.', + hsla: 'hsla(111, 49%, 34%, 1)', + hex: '#39812c', + value: 'hsla(111, 49%, 34%, 1)', + id: 'S:b9943215670849a4f73933c228f323731d8ee407,', + }, + { + name: 'coralColorSuccessBackgroundStrongHover', + type: 'color', + description: 'Strongest success background color on mouseover.', + hsla: 'hsla(111, 49%, 29%, 1)', + hex: '#316e26', + value: 'hsla(111, 49%, 29%, 1)', + id: 'S:21c0dc76d97d31b7c5b98e3b19dcaf53ea1c818b,', + }, + { + name: 'coralColorSuccessBackgroundStrongActive', + type: 'color', + description: 'Strongest success background color while pressed.', + hsla: 'hsla(111, 49%, 24%, 1)', + hex: '#285b1f', + value: 'hsla(111, 49%, 24%, 1)', + id: 'S:e8adfa814ca367a2f65295d34477c37c10f818bb,', + }, + { + name: 'coralColorWarningTextWeak', + type: 'color', + description: 'Warning text color on warning-background-strong. ', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:6dce8ae9ef0c12b7c6bca860dddca142d7f2c7c5,', + }, + { + name: 'coralColorWarningTextWeakHover', + type: 'color', + description: 'Warning weak text color, on mouseover. ', + hsla: 'hsla(22, 85%, 92%, 1)', + hex: '#fce6d9', + value: 'hsla(22, 85%, 92%, 1)', + id: 'S:52d6dba6cfb3636d31269644277ca9b5a31963b4,', + }, + { + name: 'coralColorWarningTextWeakActive', + type: 'color', + description: 'Warning weak text color, while pressed. ', + hsla: 'hsla(22, 85%, 82%, 1)', + hex: '#f8c7aa', + value: 'hsla(22, 85%, 82%, 1)', + id: 'S:ab9ff7e264b328e73d5b4c8e4ae4788d51c8a584,', + }, + { + name: 'coralColorSuccessBorder', + type: 'color', + description: 'Border color with success semantic.', + hsla: 'hsla(111, 49%, 34%, 1)', + hex: '#39812c', + value: 'hsla(111, 49%, 34%, 1)', + id: 'S:f78ebf0292cb1ad038d65aad96eebec270474f2a,', + }, + { + name: 'coralColorWarningText', + type: 'color', + description: + 'Warning text color. Use for text content without background that must carry a warning semantic value on its own. Ex: StatusWarning', + hsla: 'hsla(22, 93%, 41%, 1)', + hex: '#ca4d07', + value: 'hsla(22, 93%, 41%, 1)', + id: 'S:205803f0d35b940890c48c6565e1877dfc6db950,', + }, + { + name: 'coralColorWarningTextHover', + type: 'color', + description: 'Waring text color, on mouseover.', + hsla: 'hsla(21, 94%, 31%, 1)', + hex: '#993a05', + value: 'hsla(21, 94%, 31%, 1)', + id: 'S:8ea61eed299497beb4c9134308f544c16b11b191,', + }, + { + name: 'coralColorWarningTextActive', + type: 'color', + description: 'Warning text color, while pressed.', + hsla: 'hsla(21, 93%, 21%, 1)', + hex: '#682704', + value: 'hsla(21, 93%, 21%, 1)', + id: 'S:9b770e1c4b8e97ea0db856067c4d377fbbca6676,', + }, + { + name: 'coralColorWarningBackground', + type: 'color', + description: 'Warning background color by default. Use with text-strong. Ex: InlineMessage', + hsla: 'hsla(22, 85%, 92%, 1)', + hex: '#fce6d9', + value: 'hsla(22, 85%, 92%, 1)', + id: 'S:1dc621d9136e162ff9ea67764bf7b8f82b280a3c,', + }, + { + name: 'coralColorSuccessBorderHover', + type: 'color', + description: 'Border color with success semantic, on mouseover.', + hsla: 'hsla(111, 49%, 29%, 1)', + hex: '#316e26', + value: 'hsla(111, 49%, 29%, 1)', + id: 'S:7e93b8436eae345924a36ab81f809a0200f103a0,', + }, + { + name: 'coralColorWarningBackgroundHover', + type: 'color', + description: 'Warning background color, on mouseover.', + hsla: 'hsla(22, 85%, 82%, 1)', + hex: '#f8c7aa', + value: 'hsla(22, 85%, 82%, 1)', + id: 'S:ca0b064fde13f49c3efae291c3ffa8a3ea76d640,', + }, + { + name: 'coralColorSuccessBorderActive', + type: 'color', + description: 'Border color with success semantic, while pressed.', + hsla: 'hsla(111, 49%, 24%, 1)', + hex: '#285b1f', + value: 'hsla(111, 49%, 24%, 1)', + id: 'S:a0612979717038bd19818c9628055ef6778d0b41,', + }, + { + name: 'coralColorWarningBackgroundActive', + type: 'color', + description: 'Warning background color, while pressed.', + hsla: 'hsla(22, 85%, 72%, 1)', + hex: '#f4a87b', + value: 'hsla(22, 85%, 72%, 1)', + id: 'S:83e3662f59e3b023111f946a9772ac4652ebdd46,', + }, + { + name: 'coralColorWarningBackgroundWeak', + type: 'color', + description: + 'Weakest warning background color. Same color as neutral-background but with warning-tinted hover and active. Use as placeholder to indicate that you want warning-tinted interactive states.', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:a8fae482d49c8aebd35d856b0904f199dca4be7d,', + }, + { + name: 'coralColorAssistiveText', + type: 'color', + description: 'Text for assistive elements. Use with assistive-background. Ex: Tooltip', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:0e7226809b08a34855c21052d9eba6ab6653fef0,', + }, + { + name: 'coralColorWarningBackgroundWeakHover', + type: 'color', + description: 'Weakest warning background color, on mouseover.', + hsla: 'hsla(22, 85%, 92%, 1)', + hex: '#fce6d9', + value: 'hsla(22, 85%, 92%, 1)', + id: 'S:115c644edd2868ad52b23d576e20ab8d1faa08d8,', + }, + { + name: 'coralColorWarningBackgroundWeakActive', + type: 'color', + description: 'Weakest warning background color, while pressed.', + hsla: 'hsla(22, 85%, 82%, 1)', + hex: '#f8c7aa', + value: 'hsla(22, 85%, 82%, 1)', + id: 'S:a0ee19e8777403147f0c81dfa683044f0b5cb2db,', + }, + { + name: 'coralColorAssistiveBackground', + type: 'color', + description: 'Background for assistive elements. Use with assistive-text. Ex: Tooltip', + hsla: 'hsla(210, 62%, 5%, 1)', + hex: '#050d15', + value: 'hsla(210, 62%, 5%, 1)', + id: 'S:f4a6fcb9f0533a453c37d323c82b6d52f4ec6bbc,', + }, + { + name: 'coralColorWarningBackgroundStrong', + type: 'color', + description: + 'Strongest warning background color. Use on strong interactive elements with a warning semantic attached. Use with text-weak.', + hsla: 'hsla(22, 93%, 41%, 1)', + hex: '#ca4d07', + value: 'hsla(22, 93%, 41%, 1)', + id: 'S:51ccf9fa318e01e4c14968f239d096fad3260814,', + }, + { + name: 'coralColorWarningBackgroundStrongHover', + type: 'color', + description: 'Strongest warning background color, on mouseover.', + hsla: 'hsla(21, 94%, 31%, 1)', + hex: '#993a05', + value: 'hsla(21, 94%, 31%, 1)', + id: 'S:4eb56341e158a49f5b0d838089c8a8c18325ef55,', + }, + { + name: 'coralColorWarningBackgroundStrongActive', + type: 'color', + description: 'Strongest warning background color, while pressed.', + hsla: 'hsla(21, 93%, 21%, 1)', + hex: '#672704', + value: 'hsla(21, 93%, 21%, 1)', + id: 'S:88f29da5ec9704b5877e8ff58b2b018df64fe32c,', + }, + { + name: 'coralColorWarningBorder', + type: 'color', + description: 'Border color with warning semantic.', + hsla: 'hsla(22, 93%, 41%, 1)', + hex: '#ca4d07', + value: 'hsla(22, 93%, 41%, 1)', + id: 'S:bc12ace2f349e8b65c07bfb3b0647abbfbdc4f53,', + }, + { + name: 'coralColorAssistiveBorder', + type: 'color', + description: 'Border for assistive elements. ', + hsla: 'hsla(0, 0%, 47%, 1)', + hex: '#797979', + value: 'hsla(0, 0%, 47%, 1)', + id: 'S:edc8f94e951e1a0fff555b30785298f191557a30,', + }, + { + name: 'coralColorWarningBorderHover', + type: 'color', + description: 'Border color with warning semantic, on mouseover.', + hsla: 'hsla(21, 94%, 31%, 1)', + hex: '#993a05', + value: 'hsla(21, 94%, 31%, 1)', + id: 'S:b6180ebd12bb4c6eaeb01bfadca62bed1d41ad00,', + }, + { + name: 'coralColorWarningBorderActive', + type: 'color', + description: 'Border color with warning semantic, while pressed.', + hsla: 'hsla(21, 93%, 21%, 1)', + hex: '#672704', + value: 'hsla(21, 93%, 21%, 1)', + id: 'S:0761e87f4a918be02b5867c09a06313aa004dec4,', + }, + { + name: 'coralColorBrandingBrand', + type: 'color', + description: 'Main brand color. Used for logo.', + hsla: 'hsla(359, 100%, 71%, 1)', + hex: '#ff6d70', + value: 'hsla(359, 100%, 71%, 1)', + id: 'S:6ec49ff780aa1ffdc439a65b477d377404ee0cba,', + }, + { + name: 'coralColorNeutralBorderDisabled', + type: 'color', + description: 'Disabled border color for interactive elements Ex: Inputs', + hsla: 'hsla(0, 0%, 65%, 1)', + hex: '#a6a6a6', + value: 'hsla(0, 0%, 65%, 1)', + id: 'S:9e515084692abf10acca4375ef1fee10b6b802ae,', + }, + { + name: 'coralColorNeutralBorderWeakHover', + type: 'color', + description: 'Weaker border color on mouseover.', + hsla: 'hsla(0, 0%, 72%, 1)', + hex: '#b8b8b8', + value: 'hsla(0, 0%, 72%, 1)', + id: 'S:a9d69c47fb18d002925ef03ce29d04c9a1912a2d,', + }, + { + name: 'coralColorAssistiveBorderFocus', + type: 'color', + description: 'Focus color for focus rings across the products. Ex: Buttons on focus', + hsla: 'hsla(241, 54%, 61%, 1)', + hex: '#6664d1', + value: 'hsla(241, 54%, 61%, 1)', + id: 'S:291a7efc9bc12a252e0c41ec95c0edf270728ba4,', + }, + { + name: 'coralColorAccentTextStrong', + type: 'color', + description: 'Accent text color on accent-background.', + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:f80bab3d3a5c4169db07daaa142cba7a8c319bbf,', + }, + { + name: 'coralColorAccentTextStrongHover', + type: 'color', + description: 'Accent text color on mouseover.', + hsla: 'hsla(204, 97%, 13%, 1)', + hex: '#012741', + value: 'hsla(204, 97%, 13%, 1)', + id: 'S:09d4f5976437b18847136f6e78ddef914d6b1c4c,', + }, + { + name: 'coralColorAccentTextStrongActive', + type: 'color', + description: 'Accent text color while pressed.', + hsla: 'hsla(205, 95%, 8%, 1)', + hex: '#011828', + value: 'hsla(205, 95%, 8%, 1)', + id: 'S:1f612fe19d4a6f7b40f07ab6b359950695c372b3,', + }, + { + name: 'coralColorDangerTextStrong', + type: 'color', + description: 'Danger text color on danger-background.', + hsla: 'hsla(359, 47%, 44%, 1)', + hex: '#a43b3d', + value: 'hsla(359, 47%, 44%, 1)', + id: 'S:0daf7e338da469d7273cc3387f64769e5561bba6,', + }, + { + name: 'coralColorDangerTextStrongHover', + type: 'color', + description: 'Danger text color on mouseover.', + hsla: 'hsla(359, 54%, 38%, 1)', + hex: '#952d2f', + value: 'hsla(359, 54%, 38%, 1)', + id: 'S:130f15e66ec11629b190e8a054d7ae2f3067aa89,', + }, + { + name: 'coralColorDangerTextStrongActive', + type: 'color', + description: 'Danger text color while pressing.', + hsla: 'hsla(359, 54%, 33%, 1)', + hex: '#812729', + value: 'hsla(359, 54%, 33%, 1)', + id: 'S:e114ebc6d803ac76389920edfdb0263d8ebfac0b,', + }, + { + name: 'coralColorSuccessTextStrong', + type: 'color', + description: 'Success text color on success-background. ', + hsla: 'hsla(111, 49%, 29%, 1)', + hex: '#316e26', + value: 'hsla(111, 49%, 29%, 1)', + id: 'S:f70b76be155a581e83a2653e3e42262698233ad0,', + }, + { + name: 'coralColorSuccessTextStrongHover', + type: 'color', + description: 'Success text color on mouseover. ', + hsla: 'hsla(110, 49%, 24%, 1)', + hex: '#295b1f', + value: 'hsla(110, 49%, 24%, 1)', + id: 'S:98750920b619bb58f2925e3f7cba6223b58e6449,', + }, + { + name: 'coralColorSuccessTextStrongActive', + type: 'color', + description: 'Success text color while pressed. ', + hsla: 'hsla(111, 48%, 19%, 1)', + hex: '#204819', + value: 'hsla(111, 48%, 19%, 1)', + id: 'S:f33802276e544153ba2839a331b0854974edcb00,', + }, + { + name: 'coralColorWarningTextStrong', + type: 'color', + description: 'Warning text color on warning-background.', + hsla: 'hsla(22, 86%, 27%, 1)', + hex: '#80360a', + value: 'hsla(22, 86%, 27%, 1)', + id: 'S:3fc8b5aff756feefa5ffd273245d54ac12d4292d,', + }, + { + name: 'coralColorWarningTextStrongHover', + type: 'color', + description: 'Warning strong text color, on mouseover. ', + hsla: 'hsla(23, 86%, 22%, 1)', + hex: '#682c08', + value: 'hsla(23, 86%, 22%, 1)', + id: 'S:cbe0b9dbb86da3cd74ddb50b5aea7e3900e307b8,', + }, + { + name: 'coralColorWarningTextStrongActive', + type: 'color', + description: 'Warning strong text color, while pressed.', + hsla: 'hsla(23, 86%, 17%, 1)', + hex: '#502206', + value: 'hsla(23, 86%, 17%, 1)', + id: 'S:e39493d2ad527926e2080d02fd12225fe8543bcc,', + }, + { + name: 'coralColorBetaText', + type: 'color', + description: + 'Beta text color, for things that are new or temporary. Use for text content without background that must carry a beta semantic value on its own. ', + hsla: 'hsla(280, 57%, 49%, 1)', + hex: '#9435c3', + value: 'hsla(280, 57%, 49%, 1)', + id: 'S:227ff46cc42d2ad216c72fa2494d8794dfdb604b,', + }, + { + name: 'coralColorBetaTextHover', + type: 'color', + description: 'Beta text color, on mouseover.', + hsla: 'hsla(281, 58%, 39%, 1)', + hex: '#772a9c', + value: 'hsla(281, 58%, 39%, 1)', + id: 'S:1860f4ec7fc795c6494c68844e682141ed03a626,', + }, + { + name: 'coralColorBetaTextActive', + type: 'color', + description: 'Beta text color, while pressed.', + hsla: 'hsla(281, 58%, 29%, 1)', + hex: '#591f74', + value: 'hsla(281, 58%, 29%, 1)', + id: 'S:cd9326dc6997b00ac83a24f221e1e3890489be14,', + }, + { + name: 'coralColorBetaIcon', + type: 'color', + description: 'Icon with beta color. Ex: InlineMessage', + hsla: 'hsla(280, 80%, 54%, 1)', + hex: '#aa2de8', + value: 'hsla(280, 80%, 54%, 1)', + id: 'S:db56e1eff68394f2df0a24020f98004dee0b6fe4,', + }, + { + name: 'coralColorBetaIconHover', + type: 'color', + description: 'Icon with beta color, on mouseover.', + hsla: 'hsla(280, 80%, 44%, 1)', + hex: '#8e16ca', + value: 'hsla(280, 80%, 44%, 1)', + id: 'S:0cd332fba92a693d38790f24ec3c3c77a5627d2c,', + }, + { + name: 'coralColorBetaIconActive', + type: 'color', + description: 'Icon with beta color, while pressed.', + hsla: 'hsla(280, 80%, 34%, 1)', + hex: '#6e119c', + value: 'hsla(280, 80%, 34%, 1)', + id: 'S:211e8a73a29e403dc16e7fd6c780060a81e2fffd,', + }, + { + name: 'coralColorBetaTextWeak', + type: 'color', + description: 'Beta text color on beta-background-strong. ', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:3f576fd0d0c74680649087517d2449c5c57c72c0,', + }, + { + name: 'coralColorBetaTextWeakHover', + type: 'color', + description: 'Beta weak text color, on mouseover.', + hsla: 'hsla(280, 56%, 83%, 1)', + hex: '#dcbbec', + value: 'hsla(280, 56%, 83%, 1)', + id: 'S:20a77c0154975086869873e522e9a9e80348c26b,', + }, + { + name: 'coralColorBetaTextWeakActive', + type: 'color', + description: 'Beta weak text color, while pressed.', + hsla: 'hsla(280, 57%, 73%, 1)', + hex: '#c793e1', + value: 'hsla(280, 57%, 73%, 1)', + id: 'S:3485af3105644545dd9f11b518c3fd5cf6566299,', + }, + { + name: 'coralColorBetaTextStrong', + type: 'color', + description: 'Beta text color on beta-background.', + hsla: 'hsla(281, 58%, 29%, 1)', + hex: '#591f74', + value: 'hsla(281, 58%, 29%, 1)', + id: 'S:a6e7bfcd281bcc4752a1c9c25ff3c60a733fd578,', + }, + { + name: 'coralColorBetaTextStrongHover', + type: 'color', + description: 'Beta strong text color, on mouseover. ', + hsla: 'hsla(282, 58%, 19%, 1)', + hex: '#3b144c', + value: 'hsla(282, 58%, 19%, 1)', + id: 'S:2e5cc532ac4389ce61fe097c688cf8bb569ee0c8,', + }, + { + name: 'coralColorBetaTextStrongActive', + type: 'color', + description: 'Beta strong text color, while pressed. ', + hsla: 'hsla(282, 57%, 9%, 1)', + hex: '#1c0a24', + value: 'hsla(282, 57%, 9%, 1)', + id: 'S:fe383ab935ac26dd5db4dbe7793e6ee1f80c812f,', + }, + { + name: 'coralColorBetaBackground', + type: 'color', + description: 'Beta background color by default. Use with text-strong. Ex: InlineMessage', + hsla: 'hsla(279, 57%, 90%, 1)', + hex: '#ead7f4', + value: 'hsla(279, 57%, 90%, 1)', + id: 'S:1ec184206ed55d016a3f514a77eee1900a8ed873,', + }, + { + name: 'coralColorBetaBackgroundHover', + type: 'color', + description: 'Beta background color, on mouseover.', + hsla: 'hsla(279, 57%, 81%, 1)', + hex: '#d7b3ea', + value: 'hsla(279, 57%, 81%, 1)', + id: 'S:4876d5505ea073060ad802c1a066185940aeca5e,', + }, + { + name: 'coralColorBetaBackgroundActive', + type: 'color', + description: 'Beta background color, while pressed.', + hsla: 'hsla(279, 57%, 71%, 1)', + hex: '#c28bdf', + value: 'hsla(279, 57%, 71%, 1)', + id: 'S:067a9d2c3e499ecbf1a79ef6364ee32821b0eefe,', + }, + { + name: 'coralColorBetaBackgroundWeak', + type: 'color', + description: + 'Weakest beta background color. Same color as neutral-background but with beta-tinted hover and active. Use as placeholder to indicate that you want beta-tinted interactive states.', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:d1f61dd2c3cad1846e4f57e79fcde1f58634cc06,', + }, + { + name: 'coralColorBetaBackgroundWeakHover', + type: 'color', + description: 'Weakest beta background color, on mouseover.', + hsla: 'hsla(279, 57%, 90%, 1)', + hex: '#ead7f4', + value: 'hsla(279, 57%, 90%, 1)', + id: 'S:240afbe15e900b300118e38db2ee01f4d48fe034,', + }, + { + name: 'coralColorBetaBackgroundWeakActive', + type: 'color', + description: 'Weakest beta background color, while pressed.', + hsla: 'hsla(279, 57%, 80%, 1)', + hex: '#d5afe9', + value: 'hsla(279, 57%, 80%, 1)', + id: 'S:f2cce1ec920b37548ed3fdde169a89ec229f5e34,', + }, + { + name: 'coralColorBetaBackgroundStrong', + type: 'color', + description: + 'Strongest beta background color. Use on strong interactive elements with a beta semantic attached. Use with text-weak.', + hsla: 'hsla(281, 58%, 29%, 1)', + hex: '#591f74', + value: 'hsla(281, 58%, 29%, 1)', + id: 'S:86b2e9b8edcaf46e38b62483a44c25615ce7aab1,', + }, + { + name: 'coralColorBetaBackgroundStrongHover', + type: 'color', + description: 'Strongest beta background color, on mouseover.', + hsla: 'hsla(282, 58%, 19%, 1)', + hex: '#3b144c', + value: 'hsla(282, 58%, 19%, 1)', + id: 'S:f5aedf911101596e26aaaab0e5858f60aebaf8b6,', + }, + { + name: 'coralColorBetaBackgroundStrongActive', + type: 'color', + description: 'Strongest beta background color, while pressed.', + hsla: 'hsla(282, 57%, 9%, 1)', + hex: '#1c0a24', + value: 'hsla(282, 57%, 9%, 1)', + id: 'S:bd666021047c26d8a7af952f7a2ba3ca1997ba10,', + }, + { + name: 'coralColorBetaBorder', + type: 'color', + description: 'Border color with beta semantic.', + hsla: 'hsla(281, 58%, 29%, 1)', + hex: '#591f74', + value: 'hsla(281, 58%, 29%, 1)', + id: 'S:7eee30677af86804bf5963bfd0e139ee793fb003,', + }, + { + name: 'coralColorBetaBorderHover', + type: 'color', + description: 'Border color with beta semantic, on mouseover.', + hsla: 'hsla(282, 58%, 19%, 1)', + hex: '#3b144c', + value: 'hsla(282, 58%, 19%, 1)', + id: 'S:da4c4bc68c80bc856b7e5e7b25966fe21631e5cf,', + }, + { + name: 'coralColorBetaBorderActive', + type: 'color', + description: 'Border color with beta semantic, while pressed.', + hsla: 'hsla(282, 57%, 9%, 1)', + hex: '#1c0a24', + value: 'hsla(282, 57%, 9%, 1)', + id: 'S:f802feaadec404388ce6b63f6a389106de317b25,', + }, + { + name: 'coralColorNeutralBorderStrong', + type: 'color', + description: + 'Strongest border color. Use on strong backgrounds (neutral-background-medium, -strong or -heavy).', + hsla: 'hsla(0, 0%, 25%, 1)', + hex: '#404040', + value: 'hsla(0, 0%, 25%, 1)', + id: 'S:6d67f79c3f09a6c80192085883e78fe0c551a570,', + }, + { + name: 'coralColorNeutralBorderStrongHover', + type: 'color', + description: 'Strongest border color on mouseover.', + hsla: 'hsla(0, 0%, 15%, 1)', + hex: '#262626', + value: 'hsla(0, 0%, 15%, 1)', + id: 'S:7dab05073b0b6865ef824c49b6324eaba3ed4f1a,', + }, + { + name: 'coralColorNeutralIconInverted', + type: 'color', + description: 'Neutral icon color on dark backgrounds.', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:1475bba2bab6ad7cc2e50c844ee79e9423b0fec6,', + }, + { + name: 'coralColorNeutralIcon', + type: 'color', + description: "Default icon color. Best used when the icon doesn't expect interactivity. ", + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:b20caee1566e1478fe5cada2ef7fb319dde974b1,', + }, + { + name: 'coralColorNeutralIconWeak', + type: 'color', + description: + 'Weakly contrasting icon color. Best used when there is regular neutral-text or neutral-icon colors nearby for efficient hierarchy.', + hsla: 'hsla(0, 0%, 38%, 1)', + hex: '#616161', + value: 'hsla(0, 0%, 38%, 1)', + id: 'S:18981cf4fdba64a29264f759d65ce2a1c0e475c7,', + }, + { + name: 'coralColorAccentIcon', + type: 'color', + description: 'Icon with accent color. Ex: ButtonIcon', + hsla: 'hsla(204, 88%, 40%, 1)', + hex: '#0c78c2', + value: 'hsla(204, 88%, 40%, 1)', + id: 'S:b949f744154da7eadf2b84b481546390c6cfd276,', + }, + { + name: 'coralColorAccentIconHover', + type: 'color', + description: 'Icon with accent color on mouseover. Ex: ButtonIcon', + hsla: 'hsla(204, 88%, 30%, 1)', + hex: '#095990', + value: 'hsla(204, 88%, 30%, 1)', + id: 'S:360013e4e6ea521bceba7d4d104abb9dce876688,', + }, + { + name: 'coralColorAccentIconActive', + type: 'color', + description: 'Icon with accent color while pressing. Ex: ButtonIcon', + hsla: 'hsla(205, 88%, 20%, 1)', + hex: '#063b60', + value: 'hsla(205, 88%, 20%, 1)', + id: 'S:243e03c059ebd2b791db15d88463272ace4ab8c2,', + }, + { + name: 'coralColorDangerIcon', + type: 'color', + description: 'Icon with danger color. Ex: Status', + hsla: 'hsla(359, 69%, 53%, 1)', + hex: '#d93335', + value: 'hsla(359, 69%, 53%, 1)', + id: 'S:d8da6f95b630b6e5acddafafba8baf666115f8f7,', + }, + { + name: 'coralColorDangerIconHover', + type: 'color', + description: 'Icon with danger color on mouseover.', + hsla: 'hsla(359, 69%, 43%, 1)', + hex: '#b92224', + value: 'hsla(359, 69%, 43%, 1)', + id: 'S:d180d32a8e90a5865b56db7c104066b033dc493a,', + }, + { + name: 'coralColorDangerIconActive', + type: 'color', + description: 'Icon with danger color while pressed.', + hsla: 'hsla(359, 69%, 33%, 1)', + hex: '#8e1a1c', + value: 'hsla(359, 69%, 33%, 1)', + id: 'S:400548167d29a3f203b837d7eb75cbedf0387938,', + }, + { + name: 'coralColorSuccessIcon', + type: 'color', + description: 'Icon with success color. Ex: StatusSuccessful', + hsla: 'hsla(111, 53%, 40%, 1)', + hex: '#409c30', + value: 'hsla(111, 53%, 40%, 1)', + id: 'S:422500a652ca311e96539523813e80ec52f1d560,', + }, + { + name: 'coralColorSuccessIconHover', + type: 'color', + description: 'Icon with success color, on mouseover.', + hsla: 'hsla(111, 53%, 30%, 1)', + hex: '#307524', + value: 'hsla(111, 53%, 30%, 1)', + id: 'S:03176e2626a76ecde06c048a3ea82b099bc294a0,', + }, + { + name: 'coralColorSuccessIconActive', + type: 'color', + description: 'Icon with success color, while pressed.', + hsla: 'hsla(111, 53%, 20%, 1)', + hex: '#204e18', + value: 'hsla(111, 53%, 20%, 1)', + id: 'S:5bb84b4b5ef68dc153685366aef659cb2f56dbb0,', + }, + { + name: 'coralColorWarningIcon', + type: 'color', + description: 'Icon with warning color. Ex: StatusWarning', + hsla: 'hsla(22, 87%, 47%, 1)', + hex: '#e25c10', + value: 'hsla(22, 87%, 47%, 1)', + id: 'S:b281fb7af34bebfa8e71f5d5b3565a3c0e5b82fc,', + }, + { + name: 'coralColorWarningIconHover', + type: 'color', + description: 'Icon with warning color, on mouseover.', + hsla: 'hsla(22, 87%, 37%, 1)', + hex: '#b0480c', + value: 'hsla(22, 87%, 37%, 1)', + id: 'S:8c34d03b898d022052f45ca687fb59433dce7b5d,', + }, + { + name: 'coralColorWarningIconActive', + type: 'color', + description: 'Icon with warning color, while pressed.', + hsla: 'hsla(22, 87%, 27%, 1)', + hex: '#813409', + value: 'hsla(22, 87%, 27%, 1)', + id: 'S:0215678f15ac5deae83c0f1c58e700b8baee4f3a,', + }, + { + name: 'coralColorChartsNeutral', + type: 'color', + description: 'Chart color: Neutral. Use for neutral / empty semantic values. Ex: QualityBar', + hsla: 'hsla(0, 0%, 22%, 1)', + hex: '#383838', + value: 'hsla(0, 0%, 22%, 1)', + id: 'S:a3d498a33ebeff2f580391259314ab9246358c4f,', + }, + { + name: 'coralColorChartsNeutralWeak', + type: 'color', + description: 'Chart color: Neutral-weak. Weak contrast for neutral / empty semantic values.', + hsla: 'hsla(0, 0%, 83%, 1)', + hex: '#d4d4d4', + value: 'hsla(0, 0%, 83%, 1)', + id: 'S:95d1f769d53a6d21d966229e5213e8cc38bf9677,', + }, + { + name: 'coralColorChartsNeutralStrong', + type: 'color', + description: + 'Chart color: Neutral-strong. Strong contrast for neutral / empty semantic values.', + hsla: 'hsla(0, 0%, 12%, 1)', + hex: '#1f1f1f', + value: 'hsla(0, 0%, 12%, 1)', + id: 'S:e0a7b477ff9221f3efbcc06a30879f78d6d722f2,', + }, + { + name: 'coralColorChartsNeutralHover', + type: 'color', + description: 'Chart color: Neutral on mouseover for interactive charts.', + hsla: 'hsla(0, 0%, 12%, 1)', + hex: '#1f1f1f', + value: 'hsla(0, 0%, 12%, 1)', + id: 'S:dd28a6a4590f44fca8a6f21e5cc25641f662c426,', + }, + { + name: 'coralColorChartsSuccess', + type: 'color', + description: 'Chart color: Success. Use for success / positive semantic values. Ex: QualityBar', + hsla: 'hsla(148, 87%, 40%, 1)', + hex: '#0dbd5e', + value: 'hsla(148, 87%, 40%, 1)', + id: 'S:33025d53ef61e6b730f35a93b6f7206094ef9385,', + }, + { + name: 'coralColorChartsSuccessWeak', + type: 'color', + description: 'Chart color: Success-weak. Weak contrast for positive / success semantic values.', + hsla: 'hsla(130, 52%, 91%, 1)', + hex: '#dcf4e0', + value: 'hsla(130, 52%, 91%, 1)', + id: 'S:5ef8fc9a63f09034cbe7326b3c064772a27dc9fc,', + }, + { + name: 'coralColorChartsSuccessStrong', + type: 'color', + description: + 'Chart color: Success-strong. Strong contrast for positive / success semantic values.', + hsla: 'hsla(139, 50%, 22%, 1)', + hex: '#1c552e', + value: 'hsla(139, 50%, 22%, 1)', + id: 'S:8f8789e4b3e00968e8d720c29d8361fc314d5298,', + }, + { + name: 'coralColorChartsSuccessHover', + type: 'color', + description: 'Chart color: Success on mouseover for interactive charts.', + hsla: 'hsla(139, 50%, 22%, 1)', + hex: '#1c552e', + value: 'hsla(139, 50%, 22%, 1)', + id: 'S:cbf8d1b32e257667381b0602f227ddbba010c349,', + }, + { + name: 'coralColorChartsDanger', + type: 'color', + description: 'Chart color: Danger. Use for danger / negative semantic values. Ex: QualityBar', + hsla: 'hsla(4, 89%, 49%, 1)', + hex: '#ea1b0e', + value: 'hsla(4, 89%, 49%, 1)', + id: 'S:c09c28e8f588fa65453e69c7c60435ac96c2b90c,', + }, + { + name: 'coralColorChartsDangerWeak', + type: 'color', + description: 'Chart color: Danger-weak. Weak contrast for negative / danger semantic values.', + hsla: 'hsla(359, 69%, 73%, 1)', + hex: '#e9898a', + value: 'hsla(359, 69%, 73%, 1)', + id: 'S:9d2762507c6cfcd4c38cbdaa2b22353b183cdb6c,', + }, + { + name: 'coralColorChartsDangerStrong', + type: 'color', + description: + 'Chart color: Danger-strong. Strong contrast for negative / danger semantic values.', + hsla: 'hsla(359, 62%, 43%, 1)', + hex: '#b32a2c', + value: 'hsla(359, 62%, 43%, 1)', + id: 'S:a92bc8f79e8062726ea5c2a8e885ca92c01200d5,', + }, + { + name: 'coralColorChartsDangerHover', + type: 'color', + description: 'Chart color: Danger on mouseover for interactive charts.', + hsla: 'hsla(359, 62%, 43%, 1)', + hex: '#b32a2c', + value: 'hsla(359, 62%, 43%, 1)', + id: 'S:c1ce6adfead2561c6db73e0e3deba74cd961c53d,', + }, + { + name: 'coralColorChartsWarning', + type: 'color', + description: 'Chart color: Warning. Use for warning semantic values.', + hsla: 'hsla(32, 100%, 56%, 1)', + hex: '#ff9820', + value: 'hsla(32, 100%, 56%, 1)', + id: 'S:25b2f6f66ea8a91c5c39eee7f51b5608693a4193,', + }, + { + name: 'coralColorChartsWarningWeak', + type: 'color', + description: 'Chart color: Warning-weak. Weak contrast for warning semantic values.', + hsla: 'hsla(22, 88%, 84%, 1)', + hex: '#facbb0', + value: 'hsla(22, 88%, 84%, 1)', + id: 'S:169501744af03fdec2df5369469fdfabaa29d76f,', + }, + { + name: 'coralColorChartsWarningStrong', + type: 'color', + description: 'Chart color: Warning-strong. Strong contrast for warning semantic values.', + hsla: 'hsla(22, 75%, 42%, 1)', + hex: '#b9541b', + value: 'hsla(22, 75%, 42%, 1)', + id: 'S:817044da616057f5e3106cde6fe45658c35e72b0,', + }, + { + name: 'coralColorChartsWarningHover', + type: 'color', + description: 'Chart color: Warning on mouseover for interactive charts.', + hsla: 'hsla(22, 75%, 42%, 1)', + hex: '#b9541b', + value: 'hsla(22, 75%, 42%, 1)', + id: 'S:d3ba5833d0e04af5ac82b406b0f60576962f6d53,', + }, + { + name: 'coralColorChartsDefault', + type: 'color', + description: + 'Chart color by default. If the chart only has one set of value, and not a semantic (danger / warning / success) then use this colorset.', + hsla: 'hsla(216, 82%, 48%, 1)', + hex: '#1667df', + value: 'hsla(216, 82%, 48%, 1)', + id: 'S:f916a19d4c11fc0a456321af7491e482ec9c982a,', + }, + { + name: 'coralColorChartsDefaultWeak', + type: 'color', + description: 'Chart color: default-weak. Weak contrast for basic chart values.', + hsla: 'hsla(204, 59%, 73%, 1)', + hex: '#91c2e3', + value: 'hsla(204, 59%, 73%, 1)', + id: 'S:2b7a826d26354a36c8d2445d8a95b5e73f41e57d,', + }, + { + name: 'coralColorChartsDefaultStrong', + type: 'color', + description: 'Chart color: default-strong. Strong contrast for basic chart values. ', + hsla: 'hsla(204, 92%, 29%, 1)', + hex: '#06568d', + value: 'hsla(204, 92%, 29%, 1)', + id: 'S:6dab7b28417521c28a18b973701dc041c71f7a9b,', + }, + { + name: 'coralColorChartsDefaultHover', + type: 'color', + description: + 'Chart color: default on mouseover for interactive charts. if there is text on top if this, use default-text-weak.', + hsla: 'hsla(204, 92%, 29%, 1)', + hex: '#06568d', + value: 'hsla(204, 92%, 29%, 1)', + id: 'S:52999beffff9eacf26bfed083486644be6b75d29,', + }, + { + name: 'coralColorChartsColor00', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(48, 100%, 50%, 1)', + hex: '#ffcc00', + value: 'hsla(48, 100%, 50%, 1)', + id: 'S:9505c4d1a23e896b95e637f2ef3666e55b02843c,', + }, + { + name: 'coralColorChartsColor00Weak', + type: 'color', + description: '', + hsla: 'hsla(51, 91%, 82%, 1)', + hex: '#fbefa9', + value: 'hsla(51, 91%, 82%, 1)', + id: 'S:6ddd5f3350267fc82b40ac74c11496ca58792644,', + }, + { + name: 'coralColorChartsColor00Strong', + type: 'color', + description: '', + hsla: 'hsla(48, 82%, 45%, 1)', + hex: '#d2ad15', + value: 'hsla(48, 82%, 45%, 1)', + id: 'S:e9d116f4a613f1a63cbd8d0184dc7317a699976c,', + }, + { + name: 'coralColorChartsColor00Hover', + type: 'color', + description: '', + hsla: 'hsla(48, 82%, 45%, 1)', + hex: '#d2ad15', + value: 'hsla(48, 82%, 45%, 1)', + id: 'S:fe75e8b14455819f62530cac887c281db3cf5ecd,', + }, + { + name: 'coralColorChartsColor01', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(216, 82%, 48%, 1)', + hex: '#1667df', + value: 'hsla(216, 82%, 48%, 1)', + id: 'S:a720129992c4db38acc63651e44288d9dbe51dcd,', + }, + { + name: 'coralColorChartsColor01Weak', + type: 'color', + description: '', + hsla: 'hsla(204, 59%, 73%, 1)', + hex: '#91c2e3', + value: 'hsla(204, 59%, 73%, 1)', + id: 'S:8d7bb5282649e7a36537bc19a112e6c4ff832dab,', + }, + { + name: 'coralColorChartsColor01Strong', + type: 'color', + description: '', + hsla: 'hsla(204, 92%, 29%, 1)', + hex: '#06568d', + value: 'hsla(204, 92%, 29%, 1)', + id: 'S:6d5d6816f5e9af2400c4b36d7a1b0b2c89b5272b,', + }, + { + name: 'coralColorChartsColor01Hover', + type: 'color', + description: '', + hsla: 'hsla(204, 92%, 29%, 1)', + hex: '#06568d', + value: 'hsla(204, 92%, 29%, 1)', + id: 'S:6a5ff3408046cc1276db9d4361741f502906d96f,', + }, + { + name: 'coralColorChartsColor02', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(194, 92%, 50%, 1)', + hex: '#0abef5', + value: 'hsla(194, 92%, 50%, 1)', + id: 'S:d0045a8ff307816f958b16732e55b0f5a823cd0d,', + }, + { + name: 'coralColorChartsColor02Weak', + type: 'color', + description: '', + hsla: 'hsla(194, 91%, 91%, 1)', + hex: '#d2f3fd', + value: 'hsla(194, 91%, 91%, 1)', + id: 'S:1d99aef8c9cf2e2c44d9d652f8e1e791b68801d6,', + }, + { + name: 'coralColorChartsColor02Strong', + type: 'color', + description: '', + hsla: 'hsla(194, 93%, 32%, 1)', + hex: '#067b9f', + value: 'hsla(194, 93%, 32%, 1)', + id: 'S:ef3900e5ddc1f8e7c72e0688f376f6cd46530124,', + }, + { + name: 'coralColorChartsColor02Hover', + type: 'color', + description: '', + hsla: 'hsla(194, 93%, 32%, 1)', + hex: '#067b9f', + value: 'hsla(194, 93%, 32%, 1)', + id: 'S:fb8ac038db8ff8aaa626f292f8143e4ad5c106ba,', + }, + { + name: 'coralColorChartsColor03', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(140, 39%, 79%, 1)', + hex: '#b3dec1', + value: 'hsla(140, 39%, 79%, 1)', + id: 'S:d64422d228b90d9fa28c5227dc2effc6991f8b5e,', + }, + { + name: 'coralColorChartsColor03Weak', + type: 'color', + description: '', + hsla: 'hsla(138, 40%, 92%, 1)', + hex: '#e1f2e6', + value: 'hsla(138, 40%, 92%, 1)', + id: 'S:3bcdcc34660e6fa4139952f2347bc8e14ee80a2d,', + }, + { + name: 'coralColorChartsColor03Strong', + type: 'color', + description: '', + hsla: 'hsla(139, 11%, 35%, 1)', + hex: '#506356', + value: 'hsla(139, 11%, 35%, 1)', + id: 'S:3b8fc5892438a939aea3ceae27a42db6279f5c9d,', + }, + { + name: 'coralColorChartsColor03Hover', + type: 'color', + description: '', + hsla: 'hsla(139, 11%, 35%, 1)', + hex: '#506356', + value: 'hsla(139, 11%, 35%, 1)', + id: 'S:4378d021b834eb01b63ab96dfdfe758d18c46d78,', + }, + { + name: 'coralColorChartsColor04', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(148, 87%, 40%, 1)', + hex: '#0dbd5e', + value: 'hsla(148, 87%, 40%, 1)', + id: 'S:449b70e4010307677623f7fa4ca30851c86f37c5,', + }, + { + name: 'coralColorChartsColor04Weak', + type: 'color', + description: '', + hsla: 'hsla(130, 52%, 91%, 1)', + hex: '#dcf4e0', + value: 'hsla(130, 52%, 91%, 1)', + id: 'S:f8ca9fb1cd5602615e6c904437343600b1a92877,', + }, + { + name: 'coralColorChartsColor04Strong', + type: 'color', + description: '', + hsla: 'hsla(139, 50%, 22%, 1)', + hex: '#1c552e', + value: 'hsla(139, 50%, 22%, 1)', + id: 'S:662a45487ae84c81c9ce13bac5aa32a2dd45e3d4,', + }, + { + name: 'coralColorChartsColor04Hover', + type: 'color', + description: '', + hsla: 'hsla(139, 50%, 22%, 1)', + hex: '#1c552e', + value: 'hsla(139, 50%, 22%, 1)', + id: 'S:0da97488b7d438b02f2b872a18f7849d87f45e18,', + }, + { + name: 'coralColorChartsColor05', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(324, 68%, 71%, 1)', + hex: '#e884c0', + value: 'hsla(324, 68%, 71%, 1)', + id: 'S:b507bc0b849c50c9e60f4cb1c6b6e1d2a8ab6b66,', + }, + { + name: 'coralColorChartsColor05Weak', + type: 'color', + description: '', + hsla: 'hsla(323, 69%, 95%, 1)', + hex: '#fbe9f4', + value: 'hsla(323, 69%, 95%, 1)', + id: 'S:84add423fc3c8a7f4fe5c3a774837bce3592d8d4,', + }, + { + name: 'coralColorChartsColor05Strong', + type: 'color', + description: '', + hsla: 'hsla(324, 28%, 49%, 1)', + hex: '#a15b85', + value: 'hsla(324, 28%, 49%, 1)', + id: 'S:4214d17cb1ac1f2dea182c0e280d9c4cbe422229,', + }, + { + name: 'coralColorChartsColor05Hover', + type: 'color', + description: '', + hsla: 'hsla(324, 28%, 49%, 1)', + hex: '#a15b85', + value: 'hsla(324, 28%, 49%, 1)', + id: 'S:00b56df15db6fedad4d91f4580aa73c3ab286422,', + }, + { + name: 'coralColorChartsColor06', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(280, 75%, 58%, 1)', + hex: '#b045e5', + value: 'hsla(280, 75%, 58%, 1)', + id: 'S:772945b3afc20071f0ae1e950f79358e5b3ad299,', + }, + { + name: 'coralColorChartsColor06Weak', + type: 'color', + description: '', + hsla: 'hsla(279, 77%, 88%, 1)', + hex: '#e8caf8', + value: 'hsla(279, 77%, 88%, 1)', + id: 'S:998de68b1713f2c044aa5832c6cc327e58c5c444,', + }, + { + name: 'coralColorChartsColor06Strong', + type: 'color', + description: '', + hsla: 'hsla(280, 54%, 36%, 1)', + hex: '#6e2b8f', + value: 'hsla(280, 54%, 36%, 1)', + id: 'S:0cab8edb4e986bdaca01029ef186a669ba9f8fd9,', + }, + { + name: 'coralColorChartsColor06Hover', + type: 'color', + description: '', + hsla: 'hsla(280, 54%, 36%, 1)', + hex: '#6e2b8f', + value: 'hsla(280, 54%, 36%, 1)', + id: 'S:d37dfa3b2b250227d761d2e7c09b7703e396ce07,', + }, + { + name: 'coralColorChartsColor07', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(4, 89%, 49%, 1)', + hex: '#ea1b0e', + value: 'hsla(4, 89%, 49%, 1)', + id: 'S:c87f3de2572d12b7e9b00abecd2ecbb637e25d61,', + }, + { + name: 'coralColorChartsColor07Weak', + type: 'color', + description: '', + hsla: 'hsla(359, 69%, 73%, 1)', + hex: '#e9898a', + value: 'hsla(359, 69%, 73%, 1)', + id: 'S:12f0499ea53fd49d90fbca59b38aa0cb4d759afa,', + }, + { + name: 'coralColorChartsColor07Strong', + type: 'color', + description: '', + hsla: 'hsla(359, 62%, 43%, 1)', + hex: '#b32a2c', + value: 'hsla(359, 62%, 43%, 1)', + id: 'S:3972a1f74060849362fb18e23512a5c2279f3d88,', + }, + { + name: 'coralColorChartsColor07Hover', + type: 'color', + description: '', + hsla: 'hsla(359, 62%, 43%, 1)', + hex: '#b32a2c', + value: 'hsla(359, 62%, 43%, 1)', + id: 'S:e22df6931d25e17ab33f853a637361ea04c2d6ef,', + }, + { + name: 'coralColorChartsColor08', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(22, 88%, 54%, 1)', + hex: '#f16e23', + value: 'hsla(22, 88%, 54%, 1)', + id: 'S:1f2255d330755c5c0791f2dbefba6708e6572c96,', + }, + { + name: 'coralColorChartsColor08Weak', + type: 'color', + description: '', + hsla: 'hsla(22, 88%, 84%, 1)', + hex: '#facbb0', + value: 'hsla(22, 88%, 84%, 1)', + id: 'S:d579c1dabfd78618df9d1f2331ce493aecda0fcd,', + }, + { + name: 'coralColorChartsColor08Strong', + type: 'color', + description: '', + hsla: 'hsla(22, 75%, 42%, 1)', + hex: '#b9541b', + value: 'hsla(22, 75%, 42%, 1)', + id: 'S:98aba11850cb841b7b47d27d4f4f58635e6cf3f4,', + }, + { + name: 'coralColorChartsColor08Hover', + type: 'color', + description: '', + hsla: 'hsla(22, 75%, 42%, 1)', + hex: '#b9541b', + value: 'hsla(22, 75%, 42%, 1)', + id: 'S:fbd775d6781100ab78f34e1739b17eadefc93d12,', + }, + { + name: 'coralColorChartsColor09', + type: 'color', + description: + 'Chart color used in combinations with the other numerical chart colors. Ex: Chart with three types of values? use chart-color-00, chart-color-01 and chart-color-03.', + hsla: 'hsla(34, 34%, 45%, 1)', + hex: '#99784c', + value: 'hsla(34, 34%, 45%, 1)', + id: 'S:c36693434b12e24c60496af7e5069a405ac6c7e3,', + }, + { + name: 'coralColorChartsColor09Weak', + type: 'color', + description: '', + hsla: 'hsla(35, 28%, 82%, 1)', + hex: '#ded3c4', + value: 'hsla(35, 28%, 82%, 1)', + id: 'S:f4224d0f302d3c637cf25f6c877926357b09f5fd,', + }, + { + name: 'coralColorChartsColor09Strong', + type: 'color', + description: '', + hsla: 'hsla(35, 34%, 27%, 1)', + hex: '#5b482d', + value: 'hsla(35, 34%, 27%, 1)', + id: 'S:7ad3e194bd337aa2cdd3e0f14519b7dbeeb997db,', + }, + { + name: 'coralColorChartsColor09Hover', + type: 'color', + description: '', + hsla: 'hsla(35, 34%, 27%, 1)', + hex: '#5b482d', + value: 'hsla(35, 34%, 27%, 1)', + id: 'S:72d13f5101e61b0cbc51cb43d69f6130f3401cc6,', + }, + { + name: 'coralColorAccentBorder', + type: 'color', + description: 'Border with accent color. Use for interactive items. Ex: ButtonSecondary', + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:42634bfd0b5232c9141eeca48dcb3e68f4fa539c,', + }, + { + name: 'coralColorChartsDefaultText', + type: 'color', + description: + 'Text color for chart-default. Text on a chart is discouraged, but if you must, then use this with chart-default.', + hsla: 'hsla(205, 87%, 94%, 1)', + hex: '#e3f2fd', + value: 'hsla(205, 87%, 94%, 1)', + id: 'S:4053126865c4a29f156c4510e949fe1dc7acb1cb,', + }, + { + name: 'coralColorChartsDefaultTextStrong', + type: 'color', + description: + 'Strong text color for chart-default-weak. Text on a chart is discouraged, but if you must, then use this with chart-default-weak.', + hsla: 'hsla(205, 93%, 22%, 1)', + hex: '#04426d', + value: 'hsla(205, 93%, 22%, 1)', + id: 'S:32f8872c35f7aef21e55d005702eee76f6900f79,', + }, + { + name: 'coralColorChartsDefaultTextWeak', + type: 'color', + description: + 'Weak text color for chart-default-strong. Text on a chart is discouraged, but if you must, then use this with chart-default-strong.', + hsla: 'hsla(207, 93%, 94%, 1)', + hex: '#e3f2fe', + value: 'hsla(207, 93%, 94%, 1)', + id: 'S:26c5c4563fd31c901e561c0c5ea588dfdfad27af,', + }, + { + name: 'coralColorChartsColor09Text', + type: 'color', + description: '', + hsla: 'hsla(36, 36%, 5%, 1)', + hex: '#130f09', + value: 'hsla(36, 36%, 5%, 1)', + id: 'S:25b5c8aaf3d73df7f9c85c67f7e0b1ae80e36d96,', + }, + { + name: 'coralColorChartsColor09TextStrong', + type: 'color', + description: '', + hsla: 'hsla(36, 36%, 5%, 1)', + hex: '#130f09', + value: 'hsla(36, 36%, 5%, 1)', + id: 'S:64fe115052f5128efc8808e4604fb4916f95aa2b,', + }, + { + name: 'coralColorChartsColor09TextWeak', + type: 'color', + description: '', + hsla: 'hsla(35, 28%, 82%, 1)', + hex: '#ded3c4', + value: 'hsla(35, 28%, 82%, 1)', + id: 'S:06b63dfa38fd3587b0d9ac36e39aa42ee105af9f,', + }, + { + name: 'coralColorNeutralBackgroundHeavy', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 78%, 1)', + hex: '#c7c7c7', + value: 'hsla(0, 0%, 78%, 1)', + id: 'S:68962413973388b6bbd8a7289c8a6663b0a0f181,', + }, + { + name: 'coralColorIllustrationColor01', + type: 'color', + description: '', + hsla: 'hsla(211, 62%, 26%, 1)', + hex: '#19416c', + value: 'hsla(211, 62%, 26%, 1)', + id: 'S:762d0c0efa6779e5cdc76d66f776e14ee71a025b,', + }, + { + name: 'coralColorIllustrationColor02', + type: 'color', + description: '', + hsla: 'hsla(211, 43%, 47%, 1)', + hex: '#4577ac', + value: 'hsla(211, 43%, 47%, 1)', + id: 'S:837b9aebd89eab69c43d006ede8092ef135bf95b,', + }, + { + name: 'coralColorIllustrationColor03', + type: 'color', + description: '', + hsla: 'hsla(201, 31%, 85%, 1)', + hex: '#cedde5', + value: 'hsla(201, 31%, 85%, 1)', + id: 'S:9e47f29eb4617ca185e105e34389f738cf219851,', + }, + { + name: 'coralColorIllustrationColor05', + type: 'color', + description: '', + hsla: 'hsla(359, 82%, 81%, 1)', + hex: '#f6a5a6', + value: 'hsla(359, 82%, 81%, 1)', + id: 'S:daf383f79d6e42fd6a76b0c742d1ca53479fa80f,', + }, + { + name: 'coralColorIllustrationColor04', + type: 'color', + description: '', + hsla: 'hsla(359, 100%, 72%, 1)', + hex: '#ff6e70', + value: 'hsla(359, 100%, 72%, 1)', + id: 'S:149abb7212b5f90ed8fd51b42d0c1b0c041c41ce,', + }, + { + name: 'coralColorIllustrationColor06', + type: 'color', + description: '', + hsla: 'hsla(358, 100%, 93%, 1)', + hex: '#ffdadb', + value: 'hsla(358, 100%, 93%, 1)', + id: 'S:ab2775175f55f85408df3dd7d669ac917ce9eadb,', + }, + { + name: 'coralColorIllustrationSkintone01', + type: 'color', + description: '', + hsla: 'hsla(20, 91%, 83%, 1)', + hex: '#fbc6ab', + value: 'hsla(20, 91%, 83%, 1)', + id: 'S:f7567796748717162af5198cb896f4ed96ee4742,', + }, + { + name: 'coralColorIllustrationSkintone02', + type: 'color', + description: '', + hsla: 'hsla(21, 34%, 55%, 1)', + hex: '#b27f64', + value: 'hsla(21, 34%, 55%, 1)', + id: 'S:0b0d80721bce8ed6c2f64ebdb7c3090a42424c9e,', + }, + { + name: 'coralColorIllustrationSkintone03', + type: 'color', + description: '', + hsla: 'hsla(17, 33%, 28%, 1)', + hex: '#5f3d30', + value: 'hsla(17, 33%, 28%, 1)', + id: 'S:c35a128779db152d6cf8e6bff417efeac92e6a06,', + }, + { + name: 'coralColorIllustrationShadow', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 0%, 0.1)', + hex: '#0000001a', + value: 'hsla(0, 0%, 0%, 0.1)', + id: 'S:172b785f68dba8621e1a503f9d7ae87479f49167,', + }, + { + name: 'coralColorIllustrationColor07', + type: 'color', + description: '', + hsla: 'hsla(192, 33%, 97%, 1)', + hex: '#f5f9fa', + value: 'hsla(192, 33%, 97%, 1)', + id: 'S:a057cff7a96776950911855a2cfdc6908bea927e,', + }, + { + name: 'coralColorIllustrationColor08', + type: 'color', + description: '', + hsla: 'hsla(211, 23%, 74%, 1)', + hex: '#adbccc', + value: 'hsla(211, 23%, 74%, 1)', + id: 'S:939faa25bd307250cd34b2b27dea01b5798ec269,', + }, + { + name: 'coralColorIllustrationColor09', + type: 'color', + description: '', + hsla: 'hsla(245, 10%, 23%, 1)', + hex: '#35343f', + value: 'hsla(245, 10%, 23%, 1)', + id: 'S:603e1e228ae66fa1496162cb8cdbec5a70580da9,', + }, + { + name: 'coralColorAccentBackgroundSelected', + type: 'color', + description: + 'Accent background for currently selected elements: Ex: Selected column or line in a datagrid.', + hsla: 'hsla(204, 100%, 95%, 1)', + hex: '#e3f4ff', + value: 'hsla(204, 100%, 95%, 1)', + id: 'S:8e41c9f17635925c89f424569bb6ac93eb5c008e,', + }, + { + name: 'coralColorInfoText', + type: 'color', + description: + 'Information text color. Use for text content without background that must carry a information semantic value on its own. Ex: StatusInfo', + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:b2deed4800e24fca6ad29d1edb555f2b66874b47,', + }, + { + name: 'coralColorInfoTextHover', + type: 'color', + description: 'Info text color on mouseover, if interactive.', + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:1312ba264139ae787d57ffe659b91c732fe1dfc5,', + }, + { + name: 'coralColorInfoTextActive', + type: 'color', + description: 'Info text color while pressing, if interactive.', + hsla: 'hsla(205, 94%, 13%, 1)', + hex: '#022741', + value: 'hsla(205, 94%, 13%, 1)', + id: 'S:987f732a250f767a4cad2e168eb626ab47b986bf,', + }, + { + name: 'coralColorInfoTextWeak', + type: 'color', + description: 'Info text color on infor-background-strong. ', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:5dcdc37bb6cec31f97c5d4b31f222c625b7b2c16,', + }, + { + name: 'coralColorInfoTextWeakHover', + type: 'color', + description: 'Info text color on mouseover. ', + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:7c28ac736af6a8c18b4c48d0a67fe2fc1ac4789d,', + }, + { + name: 'coralColorInfoTextWeakActive', + type: 'color', + description: 'Info text color while pressing.', + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:e4b2ba1853d230f03d2753da85e902d8befed989,', + }, + { + name: 'coralColorInfoTextStrong', + type: 'color', + description: 'Infor text color on info-background.', + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:92d7f8304451a4270a28b05924fcecb25f5da398,', + }, + { + name: 'coralColorInfoTextStrongHover', + type: 'color', + description: 'Info text color on mouseover.', + hsla: 'hsla(204, 97%, 13%, 1)', + hex: '#012741', + value: 'hsla(204, 97%, 13%, 1)', + id: 'S:fcebcc7ffb00f0701b1038f855b846c461d55fd5,', + }, + { + name: 'coralColorInfoTextStrongActive', + type: 'color', + description: 'Info text color while pressing.', + hsla: 'hsla(205, 95%, 8%, 1)', + hex: '#011828', + value: 'hsla(205, 95%, 8%, 1)', + id: 'S:be89a1c086681b7883654f5c6c12de293b62ef87,', + }, + { + name: 'coralColorInfoBackgroundHover', + type: 'color', + description: 'Accent background color by default, on mouseover.', + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:76dd12ff860c032d39c29b31877c087cf2df12a9,', + }, + { + name: 'coralColorInfoBackgroundActive', + type: 'color', + description: 'Info background while pressing.', + hsla: 'hsla(204, 60%, 63%, 1)', + hex: '#69acd9', + value: 'hsla(204, 60%, 63%, 1)', + id: 'S:3029ecf251020fd474796f0c4991fc2d2375c8d0,', + }, + { + name: 'coralColorInfoBackgroundWeak', + type: 'color', + description: + 'Weakest info background color. Same color as neutral-background but with info-tinted hover and active. Use as placeholder to indicate that you want info-tinted interactive states.', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:c394fd25f49d3093fe0d900d6a27b274ead01cd4,', + }, + { + name: 'coralColorInfoBackgroundWeakHover', + type: 'color', + description: 'Weakest info background color on mouseover.', + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:a8068fbc1d0bee44cf3e9b6bdb8578d66dc7bb8a,', + }, + { + name: 'coralColorInfoBackgroundWeakActive', + type: 'color', + description: 'Weakest info background color while pressed.', + hsla: 'hsla(205, 60%, 75%, 1)', + hex: '#9bc7e6', + value: 'hsla(205, 60%, 75%, 1)', + id: 'S:5d9a6c09ecad18c5b633f4d849c9600df0701bf7,', + }, + { + name: 'coralColorInfoBackgroundStrong', + type: 'color', + description: + 'Strongest info background color. Use on strong interactive elements with a informative semantic attached. Use with text-weak.', + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:f99a4555800d50aeb484d7073fce6d241075cc1d,', + }, + { + name: 'coralColorInfoBackgroundStrongHover', + type: 'color', + description: 'Strongest info background color on mouseover.', + hsla: 'hsla(204, 95%, 23%, 1)', + hex: '#034673', + value: 'hsla(204, 95%, 23%, 1)', + id: 'S:2bcd08c5570401e31e78d51532fc19f96b986612,', + }, + { + name: 'coralColorInfoBackgroundStrongActive', + type: 'color', + description: 'Strongest info background color while pressed.', + hsla: 'hsla(205, 95%, 15%, 1)', + hex: '#022e4d', + value: 'hsla(205, 95%, 15%, 1)', + id: 'S:4c34e648ed8bf1a55a6ac17bf2f5f9a886ae4a94,', + }, + { + name: 'coralColorInfoBorder', + type: 'color', + description: 'Border color with info semantic.', + hsla: 'hsla(204, 95%, 31%, 1)', + hex: '#045d9a', + value: 'hsla(204, 95%, 31%, 1)', + id: 'S:01e0a0965fe6476498642d0603889a131018fb36,', + }, + { + name: 'coralColorInfoBorderHover', + type: 'color', + description: 'Border color with info semantic on mouseover.', + hsla: 'hsla(204, 95%, 23%, 1)', + hex: '#034673', + value: 'hsla(204, 95%, 23%, 1)', + id: 'S:d5a7dfbf532630af47dbbbd9a427d66155ecad57,', + }, + { + name: 'coralColorInfoBorderActive', + type: 'color', + description: 'Border color with info semantic while pressing.', + hsla: 'hsla(205, 95%, 15%, 1)', + hex: '#022e4d', + value: 'hsla(205, 95%, 15%, 1)', + id: 'S:6e7f204ea4f482d1c67d4a5e1e6c9459ae4e2d05,', + }, + { + name: 'coralColorInfoIcon', + type: 'color', + description: 'Icon with info color. Ex: StatusInprogress', + hsla: 'hsla(204, 88%, 40%, 1)', + hex: '#0c78c2', + value: 'hsla(204, 88%, 40%, 1)', + id: 'S:467a79e6f77a857d9bc7c32c5650b47e74097460,', + }, + { + name: 'coralColorInfoIconHover', + type: 'color', + description: 'Icon with info color, on mouseover.', + hsla: 'hsla(204, 88%, 30%, 1)', + hex: '#095990', + value: 'hsla(204, 88%, 30%, 1)', + id: 'S:3ff5b003395fa4cd87faa69f7f5f943e0845be49,', + }, + { + name: 'coralColorInfoIconActive', + type: 'color', + description: 'Icon with info color, while pressed.', + hsla: 'hsla(205, 88%, 20%, 1)', + hex: '#063b60', + value: 'hsla(205, 88%, 20%, 1)', + id: 'S:d0a6491ad3b0f809155269842dd86a21437edf22,', + }, + { + name: 'coralColorBrandText', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:6d9fa075aa9c22bbcc20b40c57df885385390edd,', + }, + { + name: 'coralColorBrandTextHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:7d436fb42c27efda21ee7536005d6e3b04eb4785,', + }, + { + name: 'coralColorBrandTextActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:5c176377aead0caca8154ef2e1ede4f43cd9fee1,', + }, + { + name: 'coralColorBrandTextInverted', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 38%, 1)', + hex: '#616161', + value: 'hsla(0, 0%, 38%, 1)', + id: 'S:ae3cfc09978e97b8633571201dddb836a19c2967,', + }, + { + name: 'coralColorBrandTextInvertedHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:19f4e2da901af5156394f8f9a449324d054653a4,', + }, + { + name: 'coralColorBrandTextInvertedActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:2d031bb5dc1a6b2be354fa54490bc60396d4a99f,', + }, + { + name: 'coralColorBrandTextSelected', + type: 'color', + description: '', + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:63362b1e8a368acaec1ca43ad2854ccc6a294478,', + }, + { + name: 'coralColorBrandBackgroundWeak', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 0)', + hex: '#ffffff00', + value: 'hsla(0, 0%, 100%, 0)', + id: 'S:2a8e319abe82b350fa7c7e3895d8e5435dd54288,', + }, + { + name: 'coralColorBrandBackgroundWeakHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 0.1)', + hex: '#ffffff1f', + value: 'hsla(0, 0%, 100%, 0.1)', + id: 'S:1ffe230baf83e7d843d64e76f52a00ef330066e0,', + }, + { + name: 'coralColorBrandBackgroundWeakActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 0.1)', + hex: '#ffffff1f', + value: 'hsla(0, 0%, 100%, 0.1)', + id: 'S:46182537a6afcca61653e328ee22cb5e120f04b9,', + }, + { + name: 'coralColorBrandBackgroundSelected', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:c370ea7d697d90a829088818fc429f756cbe15d9,', + }, + { + name: 'coralColorBrandBackgroundInverted', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 0)', + hex: '#20202000', + value: 'hsla(0, 0%, 13%, 0)', + id: 'S:97574a65cb605798a9efe63f4cfb914a3e186326,', + }, + { + name: 'coralColorBrandBackgroundInvertedHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 0.1)', + hex: '#2020201f', + value: 'hsla(0, 0%, 13%, 0.1)', + id: 'S:e6c7b7cfeac0f2eaea1a4646ab8fa46ed67a77bf,', + }, + { + name: 'coralColorBrandBackgroundInvertedActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 0.1)', + hex: '#2020201f', + value: 'hsla(0, 0%, 13%, 0.1)', + id: 'S:08b06b83beb4951a1546b253f10e06f2a72149fe,', + }, + { + name: 'coralColorBrandBorder', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:d7590ff56f5769e88f26503e22ce1660599513ae,', + }, + { + name: 'coralColorBrandBorderHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:1c1fbad3ca7e87defa986b7b87fc98849bca965a,', + }, + { + name: 'coralColorBrandBorderActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:b8ed097f35fb2ece933fa1335e1083a1893cedbf,', + }, + { + name: 'coralColorInfoBackground', + type: 'color', + description: 'Info background color by default. Use with text-strong. Ex: InlineMessage', + hsla: 'hsla(204, 59%, 88%, 1)', + hex: '#cde3f2', + value: 'hsla(204, 59%, 88%, 1)', + id: 'S:b64f52d5aa8e883f55d824a82ab8d279a53c53a7,', + }, + { + name: 'coralColorBrandIcon', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:029c4aa63f689fb7abee6a26e818ac8318429f82,', + }, + { + name: 'coralColorBrandIconHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:55f38783aebb3574786c8f95d09aed86797e0db3,', + }, + { + name: 'coralColorBrandIconActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 100%, 1)', + hex: '#ffffff', + value: 'hsla(0, 0%, 100%, 1)', + id: 'S:29c8c7280f33a19009c3c68debf4210525c118ef,', + }, + { + name: 'coralColorBrandIconInverted', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 38%, 1)', + hex: '#616161', + value: 'hsla(0, 0%, 38%, 1)', + id: 'S:6569f93308869ec1cd44cfbfdf47e09e8a4d8d66,', + }, + { + name: 'coralColorBrandIconInvertedHover', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:9576289e1e05d18ecd11f2d71dc117371705c07c,', + }, + { + name: 'coralColorBrandIconInvertedActive', + type: 'color', + description: '', + hsla: 'hsla(0, 0%, 13%, 1)', + hex: '#202020', + value: 'hsla(0, 0%, 13%, 1)', + id: 'S:d53391b85e4493ad39a05255192884673f72d87f,', + }, + { + name: 'coralColorBrandIconSelected', + type: 'color', + description: '', + hsla: 'hsla(204, 96%, 18%, 1)', + hex: '#023659', + value: 'hsla(204, 96%, 18%, 1)', + id: 'S:1471f76ec8a42951247f6ecb12a56c6975806991,', + }, + { + name: 'coralColorBrandingBackground', + type: 'gradient', + description: 'Main brand background. Used for heroes.', + value: 'linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%)', + id: 'S:48da8b40c9b41977ec986642cfb91febb77cc536,', + }, + { + name: 'coralColorBrandingNavigation', + type: 'gradient', + description: 'Main navigation background. Used for TopBar and branded Sidebar.', + value: 'linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%)', + id: 'S:901ebd713b6444217424da171789495f7e32c8d2,', + }, + { + name: 'coralColorBrandBackground', + type: 'gradient', + description: '', + value: 'linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%)', + id: 'S:f25b5ea68800b1905f1842313f1c767700a92380,', + }, + { + name: 'coralSpacingXxs', + type: 'measure', + description: 'Use for paddings or margins', + value: '0.4rem', + id: '16bfe560-b4c3-11ec-8521-cbbf4c303d59', + }, + { + name: 'coralSpacingXs', + type: 'measure', + description: 'Use for paddings or margins', + value: '0.8rem', + id: '1ca7bca0-b4c3-11ec-b522-2f15f0dfcaeb', + }, + { + name: 'coralSpacingS', + type: 'measure', + description: 'Use for paddings or margins', + value: '1.2rem', + id: '2c35d2b0-b4c3-11ec-96ab-01d033d945fb', + }, + { + name: 'coralSpacingM', + type: 'measure', + description: 'Use for paddings or margins', + value: '1.6rem', + id: '35c79f20-b4c3-11ec-84df-e5bfacc479f2', + }, + { + name: 'coralSpacingL', + type: 'measure', + description: 'Use for margins, paddings of really necessary', + value: '2.8rem', + id: '3b3dc8d0-b4c3-11ec-b3c9-73d93683841a', + }, + { + name: 'coralSpacingXl', + type: 'measure', + description: 'Use for margins, paddings of really necessary', + value: '3.6rem', + id: '4247b1e0-b4c3-11ec-8804-23bba7614e8e', + }, + { + name: 'coralSizingMinimal', + type: 'measure', + description: 'Use for fixed-size elements', + value: '1.2rem', + id: 'c3717da0-b4c3-11ec-8909-db885780505b', + }, + { + name: 'coralSizingXxxs', + type: 'measure', + description: 'For fixed-size elements. Minimal size for interactive elements.', + value: '1.6rem', + id: 'ed784f70-b4c3-11ec-b3b5-d3127ac3649e', + }, + { + name: 'coralSizingXxs', + type: 'measure', + description: 'Use for fixed-size elements', + value: '2rem', + id: '08dc2e80-b4c4-11ec-8350-c9f2819e7422', + }, + { + name: 'coralSizingXs', + type: 'measure', + description: 'Use for fixed-size elements', + value: '2.4rem', + id: '0e48e250-b4c4-11ec-b383-adf02fe16153', + }, + { + name: 'coralSizingS', + type: 'measure', + description: 'Use for fixed-size elements. Ex: Small Buttons', + value: '2.8rem', + id: '12bf4f40-b4c4-11ec-ae8c-a93a8912678c', + }, + { + name: 'coralSizingM', + type: 'measure', + description: 'Use for fixed-size elements. Ex: Buttons', + value: '3.6rem', + id: '1c14d600-b4c4-11ec-9b40-6fc6b8a4ad7a', + }, + { + name: 'coralSizingL', + type: 'measure', + description: 'Use for fixed-size elements. Ex: Icon illustration', + value: '4rem', + id: '21129b60-b4c4-11ec-a702-27e439bbf696', + }, + { + name: 'coralSizingXxxl', + type: 'measure', + description: 'Use for fixed-size elements. Ex: Spot illustration height', + value: '22rem', + id: '292e1b80-b4c4-11ec-800e-5bc0e3562a54', + }, + { + name: 'coralSizingMaximal', + type: 'measure', + description: 'Use for fixed-size elements. Ex: Spot illustration width', + value: '32rem', + id: '2e751ee0-b4c4-11ec-9f9f-75ac4ca4ac00', + }, + { + name: 'coralElevationShadowNeutralM', + type: 'shadow', + description: 'Default shadow. Use on "first layer" of elevation.', + value: '0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3)', + id: 'S:34a756f910ffc665554a228b44d5eec1e9c463cb,:shadow:0', + }, + { + name: 'coralElevationShadowAccent', + type: 'shadow', + description: 'Shadow with an accent tint. Use for subtle highlights. Ex: InlineMessage', + value: '0rem 0.1rem 0.1rem 0rem hsla(204, 95%, 31%, 0.3)', + id: 'S:6361d40b509d112c733483b262d9b4929ad0e1a9,:shadow:0', + }, + { + name: 'coralElevationShadowSuccess', + type: 'shadow', + description: 'Shadow with a success tint. Use for subtle highlights. Ex: InlineMessage', + value: '0rem 0.1rem 0.1rem 0rem hsla(111, 49%, 34%, 0.3)', + id: 'S:1ccb355087e7a77695f62496bf7eb5c597e51b63,:shadow:0', + }, + { + name: 'coralElevationShadowDanger', + type: 'shadow', + description: 'Shadow with a danger tint. Use for subtle highlights. Ex: InlineMessage', + value: '0rem 0.1rem 0.1rem 0rem hsla(359, 51%, 53%, 0.3)', + id: 'S:127a019202b5a99380f18aeda574499aa518d902,:shadow:0', + }, + { + name: 'coralElevationShadowWarning', + type: 'shadow', + description: 'Shadow with a warning tint. Use for subtle highlights. Ex: InlineMessage', + value: '0rem 0.1rem 0.1rem 0rem hsla(22, 93%, 41%, 0.3)', + id: 'S:b336004b0f814ea5dea03c146da768f78dbe6495,:shadow:0', + }, + { + name: 'coralElevationShadowBeta', + type: 'shadow', + description: 'Shadow with a beta tint. Use for subtle highlights. Ex: InlineMessage', + value: '0rem 0.1rem 0.1rem 0rem hsla(281, 58%, 29%, 0.3)', + id: 'S:8b514aff6b0d1ad3862f3d1f04d9f0a7d9ee6f3e,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralInvertedM', + type: 'shadow', + description: + 'Default shadow. Use on "first layer" of elevation. Reserve it for elements sticking to the bottom of the viewport.', + value: '0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3)', + id: 'S:1402e349bd668e8e2765a70a5b3c9d4aa261f6ac,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralInvertedL', + type: 'shadow', + description: + 'Large shadow. Use on "second layer" of elevation - something that need to be "above" anything else. Reserve it for elements sticking to the bottom of the viewport.', + value: '0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3)', + id: 'S:2442aa4ab53dacae61024bae62200ad42e042707,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralL', + type: 'shadow', + description: + 'Large shadow. Use on "second layer" of elevation - something that need to be "above" anything else.', + value: '0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3)', + id: 'S:a2f6e4c6b17f0f6fcf8525d14fbd34f992350375,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralS', + type: 'shadow', + description: 'Small shadow. Use for small elements such as accordion.', + value: '0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5)', + id: 'S:c1c3ef7a3bd771214c8c2dbaa2991e62a9f42f60,:shadow:0', + }, + { + name: 'coralElevationShadowNeutralInvertedS', + type: 'shadow', + description: '', + value: '0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.3)', + id: 'S:42035c14a5e1e8cc9bf3ce9173099f5df7f59780,:shadow:0', + }, + { + name: 'coralHeadingL', + type: 'typography', + description: 'Heading text - Use for highest level headings.', + value: "600 1.8rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.8rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:6bb115f27ce676bc5491994efd88dc26e42f8278,', + }, + { + name: 'coralParagraphM', + type: 'typography', + description: 'Paragraph text - Standard size.', + value: "400 1.4rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '400', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:5f86329d644f421531e3b10ecd2c2ddc9aab7534,', + }, + { + name: 'coralParagraphMBold', + type: 'typography', + description: 'Paragraph text - Standard size, bold.', + value: "600 1.4rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:d0051bcd9176315ca785dcd5f4f38cae78fc3365,', + }, + { + name: 'coralParagraphS', + type: 'typography', + description: 'Paragraph text - Small size.', + value: "400 1.2rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '400', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:b65ed5e12e3bdbcd4e4d5c671e5e0c4e9c036508,', + }, + { + name: 'coralParagraphSBold', + type: 'typography', + description: 'Paragraph text - Standard size bold.', + value: "600 1.2rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:d1431673fbf2f45ad943eadb6059a7772f5e6135,', + }, + { + name: 'coralHeadingM', + type: 'typography', + description: 'Heading text - Use for medium level headings, most current ones.', + value: "600 1.6rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.6rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:66b449607e413393608bc764de806198cd9c823c,', + }, + { + name: 'coralHeadingS', + type: 'typography', + description: + 'Heading text - Use for small level headings. Use with caution, this can clash with bold paragraphs.', + value: "600 1.4rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:3dd149175fbc721e3fb89a0b02bcfd5d52ac651e,', + }, + { + name: 'coralDataM', + type: 'typography', + description: '', + value: "400 1.4rem/140% 'Inconsolata'", + fontStyle: 'normal', + fontWeight: '400', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Inconsolata', + id: 'S:1237da4bc0c13b10a30023cb0076edbfc83f79e8,', + }, + { + name: 'coralDataMBold', + type: 'typography', + description: '', + value: "700 1.4rem/140% 'Inconsolata'", + fontStyle: 'normal', + fontWeight: '700', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Inconsolata', + id: 'S:4d7b8461e5b594b28d6d64272b468b810ff31e92,', + }, + { + name: 'coralLinkMUnderlined', + type: 'typography', + description: + 'Use only with accent/text-hover Developers: use Link component instead, you do not need to recreate styles.', + value: "600 1.4rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:3a35dcf2dc13003c2de78b3720430ace5a5dcd77,', + }, + { + name: 'coralLinkM', + type: 'typography', + description: + 'Use only with accent/text. Developers: use Link component instead, you do not need to recreate styles.', + value: "600 1.4rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.4rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:14231707ce62ba7e59d9fa51c7398fc916879560,', + }, + { + name: 'coralDataXl', + type: 'typography', + description: 'Data text style - use for large display of metrics.', + value: "400 2.4rem/140% 'Inconsolata'", + fontStyle: 'normal', + fontWeight: '400', + fontSize: '2.4rem', + lineHeight: '140%', + fontFamily: 'Inconsolata', + id: 'S:6136688c80e14f3c6a44576a2d5b943c6ce76121,', + }, + { + name: 'coralLinkS', + type: 'typography', + description: 'For links included in paragraphs using paragraph/S or for small breadcrumbs', + value: "600 1.2rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:6fe023511d622ae1addba3ad36962df23dcdf736,', + }, + { + name: 'coralLinkSUnderlined', + type: 'typography', + description: 'For links included in paragraphs using paragraph/S or for small breadcrumbs', + value: "600 1.2rem/140% 'Source Sans Pro'", + fontStyle: 'normal', + fontWeight: '600', + fontSize: '1.2rem', + lineHeight: '140%', + fontFamily: 'Source Sans Pro', + id: 'S:92f8c230bf3768ccc26f706abcfd5db498c78984,', + }, + { + name: 'coralRadiusM', + type: 'radius', + description: 'Radius for molecules (Accordion, Fieldset, Popover, etc.)', + value: '0.8rem', + id: '73293f90-3e58-11ec-94da-6d5db9104cfa', + }, + { + name: 'coralRadiusL', + type: 'radius', + description: 'Radius for layout components (Card, Modal, etc.)', + value: '1.6rem', + id: '7ba9c311-3e58-11ec-94da-6d5db9104cfa', + }, + { + name: 'coralRadiusRound', + type: 'radius', + description: 'Radius for immediate actions (badges, switch, etc.)', + value: '9999.9rem', + id: '887c1481-3e58-11ec-94da-6d5db9104cfa', + }, + { + name: 'coralRadiusS', + type: 'radius', + description: 'Radius for atomic components (button, tag, tooltip, etc.) ', + value: '0.4rem', + id: '52824640-4783-11ec-a826-6db8532cd4e8', + }, + { + name: 'coralBorderSSolid', + type: 'border', + description: 'Solid border to visually separate elements', + value: '1px solid', + id: '2856c970-40b4-11ec-a696-dbb292a77d6e', + }, + { + name: 'coralBorderMSolid', + type: 'border', + description: 'Solid border to visually identify a selection', + value: '2px solid', + id: '3105aff1-40b4-11ec-a696-dbb292a77d6e', + }, + { + name: 'coralBorderSDashed', + type: 'border', + description: + 'Dashed border to visually identify potentially interactive components. Ex: Droppable zone', + value: '1px dashed', + id: '37916851-40b4-11ec-a696-dbb292a77d6e', + }, + { + name: 'coralBorderMDashed', + type: 'border', + description: 'Dashed border to visually identify a possible selection. Ex: Ongoing mapper link', + value: '2px dashed', + id: '43602c71-40b4-11ec-a696-dbb292a77d6e', + }, + { + name: 'coralOpacityL', + type: 'opacity', + description: 'Very transparent. Opacity for components that are not currently enabled.', + value: '0.2', + id: 'ddfa9d50-40b5-11ec-a696-dbb292a77d6e', + }, + { + name: 'coralOpacityM', + type: 'opacity', + description: 'Transparent. Opacity for components that are only temporarily disabled.', + value: '0.4', + id: 'e9be8c01-40b5-11ec-a696-dbb292a77d6e', + }, + { + name: 'coralOpacityS', + type: 'opacity', + description: 'Barely transparent.', + value: '0.6', + id: 'f65d4a51-40b5-11ec-a696-dbb292a77d6e', + }, + { + name: 'coralBreakpointS', + type: 'breakpoint', + description: 'Small screen (Portrait)', + value: '40em', + id: 'e8d1aad0-4140-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBreakpointM', + type: 'breakpoint', + description: 'Small screen (Landscape)', + value: '48em', + id: 'f70c8cf1-4140-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBreakpointL', + type: 'breakpoint', + description: 'Wide screen (Portrait)', + value: '64em', + id: '034adbc1-4141-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBreakpointXl', + type: 'breakpoint', + description: 'Wide screen (Landscape)', + value: '80em', + id: '12525cb1-4141-11ec-8de5-f7dcd20b9ace', + }, + { + name: 'coralBrandingLogo', + type: 'branding', + description: 'Brand logo in App heading', + value: + "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==')", + id: 'ee8df300-4787-11ec-a826-6db8532cd4e8', + }, + { + name: 'coralTransitionInstant', + type: 'transition', + description: 'Instant transition for hovering effects (opacity, color...)', + value: '100ms ease-out', + id: 'fde4cb70-5d8b-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralTransitionFast', + type: 'transition', + description: 'Fast transition for "out" effects (closing menu, hide modal...)', + value: '250ms ease-in-out', + id: '087f7c61-5d8c-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralTransitionNormal', + type: 'transition', + description: 'Normal transition for "in" effects (opening menu, show modal...)', + value: '300ms ease-in-out', + id: '1f78fc71-5d8c-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralTransitionSlow', + type: 'transition', + description: 'Slow transition for background illustrations with movement.', + value: '400ms ease-in', + id: '31b8ec11-5d8c-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralElevationLayerFlat', + type: 'elevation', + description: 'Default content elevation', + value: '0', + id: '26c8aba1-5d8d-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralElevationLayerStandardFront', + type: 'elevation', + description: + 'First elevation layer. Just above the default content (Drawer, Modal, Fixed layout...)', + value: '4', + id: '2d995c41-5d8d-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralElevationLayerInteractiveFront', + type: 'elevation', + description: 'Second elevation layer. For elements above any layout (Dropdown, Popover).', + value: '8', + id: '334e63b1-5d8d-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralElevationLayerOverlay', + type: 'elevation', + description: + 'Topmost layer. For items that stand on top of anything (Alert, Confirm, Tooltip, etc.)', + value: '16', + id: '3853ca31-5d8d-11ec-9f08-61882f73ab2c', + }, + { + name: 'coralAnimationHeartbeat', + type: 'animation', + description: + 'Heartbeat animation. Ex: Skeletons : Usage: animate: tokens.$animation-heartbeat;', + value: 'coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite', + id: '4c3ea510-93cf-11ec-969d-2dcd5665e329', + }, ]; -export default dictionary; \ No newline at end of file +export default dictionary; diff --git a/packages/design-tokens/src/light/index.ts b/packages/design-tokens/src/light/index.ts index 1da74121be2..81d1b8e5999 100644 --- a/packages/design-tokens/src/light/index.ts +++ b/packages/design-tokens/src/light/index.ts @@ -1,293 +1,344 @@ const tokens = { - coralColorNeutralText: `var(--coral-color-neutral-text, hsla(0, 0%, 13%, 1))`, - coralColorNeutralTextWeak: `var(--coral-color-neutral-text-weak, hsla(0, 0%, 38%, 1))`, - coralColorNeutralTextDisabled: `var(--coral-color-neutral-text-disabled, hsla(0, 0%, 44%, 1))`, - coralColorNeutralTextInverted: `var(--coral-color-neutral-text-inverted, hsla(0, 0%, 100%, 1))`, - coralColorNeutralBackground: `var(--coral-color-neutral-background, hsla(0, 0%, 100%, 1))`, - coralColorNeutralBackgroundMedium: `var(--coral-color-neutral-background-medium, hsla(0, 0%, 97%, 1))`, - coralColorNeutralBackgroundStrong: `var(--coral-color-neutral-background-strong, hsla(0, 0%, 88%, 1))`, - coralColorNeutralBackgroundDisabled: `var(--coral-color-neutral-background-disabled, hsla(0, 0%, 88%, 1))`, - coralColorNeutralBorder: `var(--coral-color-neutral-border, hsla(0, 0%, 55%, 1))`, - coralColorNeutralBorderWeak: `var(--coral-color-neutral-border-weak, hsla(0, 0%, 82%, 1))`, - coralColorNeutralBorderHover: `var(--coral-color-neutral-border-hover, hsla(0, 0%, 40%, 1))`, - coralColorAccentTextWeak: `var(--coral-color-accent-text-weak, hsla(0, 0%, 100%, 1))`, - coralColorAccentTextWeakHover: `var(--coral-color-accent-text-weak-hover, hsla(204, 59%, 88%, 1))`, - coralColorAccentTextWeakActive: `var(--coral-color-accent-text-weak-active, hsla(205, 60%, 75%, 1))`, - coralColorAccentText: `var(--coral-color-accent-text, hsla(204, 95%, 31%, 1))`, - coralColorAccentTextHover: `var(--coral-color-accent-text-hover, hsla(204, 96%, 18%, 1))`, - coralColorAccentTextActive: `var(--coral-color-accent-text-active, hsla(205, 94%, 13%, 1))`, - coralColorAccentBackground: `var(--coral-color-accent-background, hsla(204, 59%, 88%, 1))`, - coralColorAccentBackgroundHover: `var(--coral-color-accent-background-hover, hsla(205, 60%, 75%, 1))`, - coralColorAccentBackgroundActive: `var(--coral-color-accent-background-active, hsla(204, 60%, 63%, 1))`, - coralColorAccentBackgroundWeak: `var(--coral-color-accent-background-weak, hsla(0, 0%, 100%, 1))`, - coralColorAccentBackgroundWeakHover: `var(--coral-color-accent-background-weak-hover, hsla(204, 59%, 88%, 1))`, - coralColorAccentBackgroundWeakActive: `var(--coral-color-accent-background-weak-active, hsla(205, 60%, 75%, 1))`, - coralColorAccentBackgroundStrong: `var(--coral-color-accent-background-strong, hsla(204, 95%, 31%, 1))`, - coralColorAccentBackgroundStrongHover: `var(--coral-color-accent-background-strong-hover, hsla(204, 95%, 23%, 1))`, - coralColorAccentBackgroundStrongActive: `var(--coral-color-accent-background-strong-active, hsla(205, 95%, 15%, 1))`, - coralColorAccentBorderHover: `var(--coral-color-accent-border-hover, hsla(204, 95%, 23%, 1))`, - coralColorAccentBorderActive: `var(--coral-color-accent-border-active, hsla(205, 95%, 15%, 1))`, - coralColorDangerTextWeak: `var(--coral-color-danger-text-weak, hsla(0, 0%, 100%, 1))`, - coralColorDangerTextWeakHover: `var(--coral-color-danger-text-weak-hover, hsla(358, 100%, 94%, 1))`, - coralColorDangerTextWeakActive: `var(--coral-color-danger-text-weak-active, hsla(359, 100%, 88%, 1))`, - coralColorDangerText: `var(--coral-color-danger-text, hsla(359, 51%, 53%, 1))`, - coralColorDangerTextHover: `var(--coral-color-danger-text-hover, hsla(359, 52%, 43%, 1))`, - coralColorDangerTextActive: `var(--coral-color-danger-text-active, hsla(359, 51%, 33%, 1))`, - coralColorDangerBackground: `var(--coral-color-danger-background, hsla(0, 100%, 96%, 1))`, - coralColorDangerBackgroundHover: `var(--coral-color-danger-background-hover, hsla(359, 100%, 88%, 1))`, - coralColorDangerBackgroundActive: `var(--coral-color-danger-background-active, hsla(359, 100%, 83%, 1))`, - coralColorDangerBackgroundWeak: `var(--coral-color-danger-background-weak, hsla(0, 0%, 100%, 1))`, - coralColorDangerBackgroundWeakHover: `var(--coral-color-danger-background-weak-hover, hsla(358, 100%, 94%, 1))`, - coralColorDangerBackgroundWeakActive: `var(--coral-color-danger-background-weak-active, hsla(359, 100%, 88%, 1))`, - coralColorSuccessTextWeak: `var(--coral-color-success-text-weak, hsla(0, 0%, 100%, 1))`, - coralColorSuccessTextWeakHover: `var(--coral-color-success-text-weak-hover, hsla(110, 49%, 90%, 1))`, - coralColorSuccessTextWeakActive: `var(--coral-color-success-text-weak-active, hsla(110, 48%, 85%, 1))`, - coralColorSuccessText: `var(--coral-color-success-text, hsla(111, 49%, 34%, 1))`, - coralColorSuccessTextHover: `var(--coral-color-success-text-hover, hsla(111, 49%, 29%, 1))`, - coralColorSuccessTextActive: `var(--coral-color-success-text-active, hsla(111, 49%, 24%, 1))`, - coralColorSuccessBackground: `var(--coral-color-success-background, hsla(110, 49%, 90%, 1))`, - coralColorDangerBackgroundStrong: `var(--coral-color-danger-background-strong, hsla(359, 51%, 53%, 1))`, - coralColorDangerBackgroundStrongHover: `var(--coral-color-danger-background-strong-hover, hsla(359, 54%, 38%, 1))`, - coralColorDangerBackgroundStrongActive: `var(--coral-color-danger-background-strong-active, hsla(359, 54%, 33%, 1))`, - coralColorDangerBorder: `var(--coral-color-danger-border, hsla(359, 51%, 53%, 1))`, - coralColorSuccessBackgroundHover: `var(--coral-color-success-background-hover, hsla(110, 48%, 85%, 1))`, - coralColorDangerBorderHover: `var(--coral-color-danger-border-hover, hsla(359, 54%, 38%, 1))`, - coralColorSuccessBackgroundActive: `var(--coral-color-success-background-active, hsla(110, 49%, 80%, 1))`, - coralColorDangerBorderActive: `var(--coral-color-danger-border-active, hsla(359, 54%, 33%, 1))`, - coralColorSuccessBackgroundWeak: `var(--coral-color-success-background-weak, hsla(0, 0%, 100%, 1))`, - coralColorSuccessBackgroundWeakHover: `var(--coral-color-success-background-weak-hover, hsla(110, 49%, 90%, 1))`, - coralColorSuccessBackgroundWeakActive: `var(--coral-color-success-background-weak-active, hsla(110, 48%, 85%, 1))`, - coralColorSuccessBackgroundStrong: `var(--coral-color-success-background-strong, hsla(111, 49%, 34%, 1))`, - coralColorSuccessBackgroundStrongHover: `var(--coral-color-success-background-strong-hover, hsla(111, 49%, 29%, 1))`, - coralColorSuccessBackgroundStrongActive: `var(--coral-color-success-background-strong-active, hsla(111, 49%, 24%, 1))`, - coralColorWarningTextWeak: `var(--coral-color-warning-text-weak, hsla(0, 0%, 100%, 1))`, - coralColorWarningTextWeakHover: `var(--coral-color-warning-text-weak-hover, hsla(22, 85%, 92%, 1))`, - coralColorWarningTextWeakActive: `var(--coral-color-warning-text-weak-active, hsla(22, 85%, 82%, 1))`, - coralColorSuccessBorder: `var(--coral-color-success-border, hsla(111, 49%, 34%, 1))`, - coralColorWarningText: `var(--coral-color-warning-text, hsla(22, 93%, 41%, 1))`, - coralColorWarningTextHover: `var(--coral-color-warning-text-hover, hsla(21, 94%, 31%, 1))`, - coralColorWarningTextActive: `var(--coral-color-warning-text-active, hsla(21, 93%, 21%, 1))`, - coralColorWarningBackground: `var(--coral-color-warning-background, hsla(22, 85%, 92%, 1))`, - coralColorSuccessBorderHover: `var(--coral-color-success-border-hover, hsla(111, 49%, 29%, 1))`, - coralColorWarningBackgroundHover: `var(--coral-color-warning-background-hover, hsla(22, 85%, 82%, 1))`, - coralColorSuccessBorderActive: `var(--coral-color-success-border-active, hsla(111, 49%, 24%, 1))`, - coralColorWarningBackgroundActive: `var(--coral-color-warning-background-active, hsla(22, 85%, 72%, 1))`, - coralColorWarningBackgroundWeak: `var(--coral-color-warning-background-weak, hsla(0, 0%, 100%, 1))`, - coralColorAssistiveText: `var(--coral-color-assistive-text, hsla(0, 0%, 100%, 1))`, - coralColorWarningBackgroundWeakHover: `var(--coral-color-warning-background-weak-hover, hsla(22, 85%, 92%, 1))`, - coralColorWarningBackgroundWeakActive: `var(--coral-color-warning-background-weak-active, hsla(22, 85%, 82%, 1))`, - coralColorAssistiveBackground: `var(--coral-color-assistive-background, hsla(210, 62%, 5%, 1))`, - coralColorWarningBackgroundStrong: `var(--coral-color-warning-background-strong, hsla(22, 93%, 41%, 1))`, - coralColorWarningBackgroundStrongHover: `var(--coral-color-warning-background-strong-hover, hsla(21, 94%, 31%, 1))`, - coralColorWarningBackgroundStrongActive: `var(--coral-color-warning-background-strong-active, hsla(21, 93%, 21%, 1))`, - coralColorWarningBorder: `var(--coral-color-warning-border, hsla(22, 93%, 41%, 1))`, - coralColorAssistiveBorder: `var(--coral-color-assistive-border, hsla(0, 0%, 47%, 1))`, - coralColorWarningBorderHover: `var(--coral-color-warning-border-hover, hsla(21, 94%, 31%, 1))`, - coralColorWarningBorderActive: `var(--coral-color-warning-border-active, hsla(21, 93%, 21%, 1))`, - coralColorBrandingBrand: `var(--coral-color-branding-brand, hsla(359, 100%, 71%, 1))`, - coralColorNeutralBorderDisabled: `var(--coral-color-neutral-border-disabled, hsla(0, 0%, 65%, 1))`, - coralColorNeutralBorderWeakHover: `var(--coral-color-neutral-border-weak-hover, hsla(0, 0%, 72%, 1))`, - coralColorAssistiveBorderFocus: `var(--coral-color-assistive-border-focus, hsla(241, 54%, 61%, 1))`, - coralColorAccentTextStrong: `var(--coral-color-accent-text-strong, hsla(204, 96%, 18%, 1))`, - coralColorAccentTextStrongHover: `var(--coral-color-accent-text-strong-hover, hsla(204, 97%, 13%, 1))`, - coralColorAccentTextStrongActive: `var(--coral-color-accent-text-strong-active, hsla(205, 95%, 8%, 1))`, - coralColorDangerTextStrong: `var(--coral-color-danger-text-strong, hsla(359, 47%, 44%, 1))`, - coralColorDangerTextStrongHover: `var(--coral-color-danger-text-strong-hover, hsla(359, 54%, 38%, 1))`, - coralColorDangerTextStrongActive: `var(--coral-color-danger-text-strong-active, hsla(359, 54%, 33%, 1))`, - coralColorSuccessTextStrong: `var(--coral-color-success-text-strong, hsla(111, 49%, 29%, 1))`, - coralColorSuccessTextStrongHover: `var(--coral-color-success-text-strong-hover, hsla(110, 49%, 24%, 1))`, - coralColorSuccessTextStrongActive: `var(--coral-color-success-text-strong-active, hsla(111, 48%, 19%, 1))`, - coralColorWarningTextStrong: `var(--coral-color-warning-text-strong, hsla(22, 86%, 27%, 1))`, - coralColorWarningTextStrongHover: `var(--coral-color-warning-text-strong-hover, hsla(23, 86%, 22%, 1))`, - coralColorWarningTextStrongActive: `var(--coral-color-warning-text-strong-active, hsla(23, 86%, 17%, 1))`, - coralColorBetaText: `var(--coral-color-beta-text, hsla(280, 57%, 49%, 1))`, - coralColorBetaTextHover: `var(--coral-color-beta-text-hover, hsla(281, 58%, 39%, 1))`, - coralColorBetaTextActive: `var(--coral-color-beta-text-active, hsla(281, 58%, 29%, 1))`, - coralColorBetaIcon: `var(--coral-color-beta-icon, hsla(280, 80%, 54%, 1))`, - coralColorBetaIconHover: `var(--coral-color-beta-icon-hover, hsla(280, 80%, 44%, 1))`, - coralColorBetaIconActive: `var(--coral-color-beta-icon-active, hsla(280, 80%, 34%, 1))`, - coralColorBetaTextWeak: `var(--coral-color-beta-text-weak, hsla(0, 0%, 100%, 1))`, - coralColorBetaTextWeakHover: `var(--coral-color-beta-text-weak-hover, hsla(280, 56%, 83%, 1))`, - coralColorBetaTextWeakActive: `var(--coral-color-beta-text-weak-active, hsla(280, 57%, 73%, 1))`, - coralColorBetaTextStrong: `var(--coral-color-beta-text-strong, hsla(281, 58%, 29%, 1))`, - coralColorBetaTextStrongHover: `var(--coral-color-beta-text-strong-hover, hsla(282, 58%, 19%, 1))`, - coralColorBetaTextStrongActive: `var(--coral-color-beta-text-strong-active, hsla(282, 57%, 9%, 1))`, - coralColorBetaBackground: `var(--coral-color-beta-background, hsla(279, 57%, 90%, 1))`, - coralColorBetaBackgroundHover: `var(--coral-color-beta-background-hover, hsla(279, 57%, 81%, 1))`, - coralColorBetaBackgroundActive: `var(--coral-color-beta-background-active, hsla(279, 57%, 71%, 1))`, - coralColorBetaBackgroundWeak: `var(--coral-color-beta-background-weak, hsla(0, 0%, 100%, 1))`, - coralColorBetaBackgroundWeakHover: `var(--coral-color-beta-background-weak-hover, hsla(279, 57%, 90%, 1))`, - coralColorBetaBackgroundWeakActive: `var(--coral-color-beta-background-weak-active, hsla(279, 57%, 80%, 1))`, - coralColorBetaBackgroundStrong: `var(--coral-color-beta-background-strong, hsla(281, 58%, 29%, 1))`, - coralColorBetaBackgroundStrongHover: `var(--coral-color-beta-background-strong-hover, hsla(282, 58%, 19%, 1))`, - coralColorBetaBackgroundStrongActive: `var(--coral-color-beta-background-strong-active, hsla(282, 57%, 9%, 1))`, - coralColorBetaBorder: `var(--coral-color-beta-border, hsla(281, 58%, 29%, 1))`, - coralColorBetaBorderHover: `var(--coral-color-beta-border-hover, hsla(282, 58%, 19%, 1))`, - coralColorBetaBorderActive: `var(--coral-color-beta-border-active, hsla(282, 57%, 9%, 1))`, - coralColorNeutralBorderStrong: `var(--coral-color-neutral-border-strong, hsla(0, 0%, 25%, 1))`, - coralColorNeutralBorderStrongHover: `var(--coral-color-neutral-border-strong-hover, hsla(0, 0%, 15%, 1))`, - coralColorNeutralIconInverted: `var(--coral-color-neutral-icon-inverted, hsla(0, 0%, 100%, 1))`, - coralColorNeutralIcon: `var(--coral-color-neutral-icon, hsla(0, 0%, 13%, 1))`, - coralColorNeutralIconWeak: `var(--coral-color-neutral-icon-weak, hsla(0, 0%, 38%, 1))`, - coralColorAccentIcon: `var(--coral-color-accent-icon, hsla(204, 88%, 40%, 1))`, - coralColorAccentIconHover: `var(--coral-color-accent-icon-hover, hsla(204, 88%, 30%, 1))`, - coralColorAccentIconActive: `var(--coral-color-accent-icon-active, hsla(205, 88%, 20%, 1))`, - coralColorDangerIcon: `var(--coral-color-danger-icon, hsla(359, 69%, 53%, 1))`, - coralColorDangerIconHover: `var(--coral-color-danger-icon-hover, hsla(359, 69%, 43%, 1))`, - coralColorDangerIconActive: `var(--coral-color-danger-icon-active, hsla(359, 69%, 33%, 1))`, - coralColorSuccessIcon: `var(--coral-color-success-icon, hsla(111, 53%, 40%, 1))`, - coralColorSuccessIconHover: `var(--coral-color-success-icon-hover, hsla(111, 53%, 30%, 1))`, - coralColorSuccessIconActive: `var(--coral-color-success-icon-active, hsla(111, 53%, 20%, 1))`, - coralColorWarningIcon: `var(--coral-color-warning-icon, hsla(22, 87%, 47%, 1))`, - coralColorWarningIconHover: `var(--coral-color-warning-icon-hover, hsla(22, 87%, 37%, 1))`, - coralColorWarningIconActive: `var(--coral-color-warning-icon-active, hsla(22, 87%, 27%, 1))`, - coralColorChartsNeutral: `var(--coral-color-charts-neutral, hsla(0, 0%, 22%, 1))`, - coralColorChartsNeutralWeak: `var(--coral-color-charts-neutral-weak, hsla(0, 0%, 83%, 1))`, - coralColorChartsNeutralStrong: `var(--coral-color-charts-neutral-strong, hsla(0, 0%, 12%, 1))`, - coralColorChartsNeutralHover: `var(--coral-color-charts-neutral-hover, hsla(0, 0%, 12%, 1))`, - coralColorChartsSuccess: `var(--coral-color-charts-success, hsla(148, 87%, 40%, 1))`, - coralColorChartsSuccessWeak: `var(--coral-color-charts-success-weak, hsla(130, 52%, 91%, 1))`, - coralColorChartsSuccessStrong: `var(--coral-color-charts-success-strong, hsla(139, 50%, 22%, 1))`, - coralColorChartsSuccessHover: `var(--coral-color-charts-success-hover, hsla(139, 50%, 22%, 1))`, - coralColorChartsDanger: `var(--coral-color-charts-danger, hsla(4, 89%, 49%, 1))`, - coralColorChartsDangerWeak: `var(--coral-color-charts-danger-weak, hsla(359, 69%, 73%, 1))`, - coralColorChartsDangerStrong: `var(--coral-color-charts-danger-strong, hsla(359, 62%, 43%, 1))`, - coralColorChartsDangerHover: `var(--coral-color-charts-danger-hover, hsla(359, 62%, 43%, 1))`, - coralColorChartsWarning: `var(--coral-color-charts-warning, hsla(32, 100%, 56%, 1))`, - coralColorChartsWarningWeak: `var(--coral-color-charts-warning-weak, hsla(22, 88%, 84%, 1))`, - coralColorChartsWarningStrong: `var(--coral-color-charts-warning-strong, hsla(22, 75%, 42%, 1))`, - coralColorChartsWarningHover: `var(--coral-color-charts-warning-hover, hsla(22, 75%, 42%, 1))`, - coralColorChartsDefault: `var(--coral-color-charts-default, hsla(216, 82%, 48%, 1))`, - coralColorChartsDefaultWeak: `var(--coral-color-charts-default-weak, hsla(204, 59%, 73%, 1))`, - coralColorChartsDefaultStrong: `var(--coral-color-charts-default-strong, hsla(204, 92%, 29%, 1))`, - coralColorChartsDefaultHover: `var(--coral-color-charts-default-hover, hsla(204, 92%, 29%, 1))`, - coralColorChartsColor00: `var(--coral-color-charts-color-00, hsla(48, 100%, 50%, 1))`, - coralColorChartsColor00Weak: `var(--coral-color-charts-color-00-weak, hsla(51, 91%, 82%, 1))`, - coralColorChartsColor00Strong: `var(--coral-color-charts-color-00-strong, hsla(48, 82%, 45%, 1))`, - coralColorChartsColor00Hover: `var(--coral-color-charts-color-00-hover, hsla(48, 82%, 45%, 1))`, - coralColorChartsColor01: `var(--coral-color-charts-color-01, hsla(216, 82%, 48%, 1))`, - coralColorChartsColor01Weak: `var(--coral-color-charts-color-01-weak, hsla(204, 59%, 73%, 1))`, - coralColorChartsColor01Strong: `var(--coral-color-charts-color-01-strong, hsla(204, 92%, 29%, 1))`, - coralColorChartsColor01Hover: `var(--coral-color-charts-color-01-hover, hsla(204, 92%, 29%, 1))`, - coralColorChartsColor02: `var(--coral-color-charts-color-02, hsla(194, 92%, 50%, 1))`, - coralColorChartsColor02Weak: `var(--coral-color-charts-color-02-weak, hsla(194, 91%, 91%, 1))`, - coralColorChartsColor02Strong: `var(--coral-color-charts-color-02-strong, hsla(194, 93%, 32%, 1))`, - coralColorChartsColor02Hover: `var(--coral-color-charts-color-02-hover, hsla(194, 93%, 32%, 1))`, - coralColorChartsColor03: `var(--coral-color-charts-color-03, hsla(140, 39%, 79%, 1))`, - coralColorChartsColor03Weak: `var(--coral-color-charts-color-03-weak, hsla(138, 40%, 92%, 1))`, - coralColorChartsColor03Strong: `var(--coral-color-charts-color-03-strong, hsla(139, 11%, 35%, 1))`, - coralColorChartsColor03Hover: `var(--coral-color-charts-color-03-hover, hsla(139, 11%, 35%, 1))`, - coralColorChartsColor04: `var(--coral-color-charts-color-04, hsla(148, 87%, 40%, 1))`, - coralColorChartsColor04Weak: `var(--coral-color-charts-color-04-weak, hsla(130, 52%, 91%, 1))`, - coralColorChartsColor04Strong: `var(--coral-color-charts-color-04-strong, hsla(139, 50%, 22%, 1))`, - coralColorChartsColor04Hover: `var(--coral-color-charts-color-04-hover, hsla(139, 50%, 22%, 1))`, - coralColorChartsColor05: `var(--coral-color-charts-color-05, hsla(324, 68%, 71%, 1))`, - coralColorChartsColor05Weak: `var(--coral-color-charts-color-05-weak, hsla(323, 69%, 95%, 1))`, - coralColorChartsColor05Strong: `var(--coral-color-charts-color-05-strong, hsla(324, 28%, 49%, 1))`, - coralColorChartsColor05Hover: `var(--coral-color-charts-color-05-hover, hsla(324, 28%, 49%, 1))`, - coralColorChartsColor06: `var(--coral-color-charts-color-06, hsla(280, 75%, 58%, 1))`, - coralColorChartsColor06Weak: `var(--coral-color-charts-color-06-weak, hsla(279, 77%, 88%, 1))`, - coralColorChartsColor06Strong: `var(--coral-color-charts-color-06-strong, hsla(280, 54%, 36%, 1))`, - coralColorChartsColor06Hover: `var(--coral-color-charts-color-06-hover, hsla(280, 54%, 36%, 1))`, - coralColorChartsColor07: `var(--coral-color-charts-color-07, hsla(4, 89%, 49%, 1))`, - coralColorChartsColor07Weak: `var(--coral-color-charts-color-07-weak, hsla(359, 69%, 73%, 1))`, - coralColorChartsColor07Strong: `var(--coral-color-charts-color-07-strong, hsla(359, 62%, 43%, 1))`, - coralColorChartsColor07Hover: `var(--coral-color-charts-color-07-hover, hsla(359, 62%, 43%, 1))`, - coralColorChartsColor08: `var(--coral-color-charts-color-08, hsla(22, 88%, 54%, 1))`, - coralColorChartsColor08Weak: `var(--coral-color-charts-color-08-weak, hsla(22, 88%, 84%, 1))`, - coralColorChartsColor08Strong: `var(--coral-color-charts-color-08-strong, hsla(22, 75%, 42%, 1))`, - coralColorChartsColor08Hover: `var(--coral-color-charts-color-08-hover, hsla(22, 75%, 42%, 1))`, - coralColorChartsColor09: `var(--coral-color-charts-color-09, hsla(34, 34%, 45%, 1))`, - coralColorChartsColor09Weak: `var(--coral-color-charts-color-09-weak, hsla(35, 28%, 82%, 1))`, - coralColorChartsColor09Strong: `var(--coral-color-charts-color-09-strong, hsla(35, 34%, 27%, 1))`, - coralColorChartsColor09Hover: `var(--coral-color-charts-color-09-hover, hsla(35, 34%, 27%, 1))`, - coralColorAccentBorder: `var(--coral-color-accent-border, hsla(204, 95%, 31%, 1))`, - coralColorChartsDefaultText: `var(--coral-color-charts-default-text, hsla(205, 87%, 94%, 1))`, - coralColorChartsDefaultTextStrong: `var(--coral-color-charts-default-text-strong, hsla(205, 93%, 22%, 1))`, - coralColorChartsDefaultTextWeak: `var(--coral-color-charts-default-text-weak, hsla(207, 93%, 94%, 1))`, - coralColorChartsColor09Text: `var(--coral-color-charts-color-09-text, hsla(36, 36%, 5%, 1))`, - coralColorChartsColor09TextStrong: `var(--coral-color-charts-color-09-text-strong, hsla(36, 36%, 5%, 1))`, - coralColorChartsColor09TextWeak: `var(--coral-color-charts-color-09-text-weak, hsla(35, 28%, 82%, 1))`, - coralColorNeutralBackgroundHeavy: `var(--coral-color-neutral-background-heavy, hsla(0, 0%, 78%, 1))`, - coralColorIllustrationColor01: `var(--coral-color-illustration-color-01, hsla(211, 62%, 26%, 1))`, - coralColorIllustrationColor02: `var(--coral-color-illustration-color-02, hsla(211, 43%, 47%, 1))`, - coralColorIllustrationColor03: `var(--coral-color-illustration-color-03, hsla(201, 31%, 85%, 1))`, - coralColorIllustrationColor05: `var(--coral-color-illustration-color-05, hsla(359, 82%, 81%, 1))`, - coralColorIllustrationColor04: `var(--coral-color-illustration-color-04, hsla(359, 100%, 72%, 1))`, - coralColorIllustrationColor06: `var(--coral-color-illustration-color-06, hsla(358, 100%, 93%, 1))`, - coralColorIllustrationSkintone01: `var(--coral-color-illustration-skintone-01, hsla(20, 91%, 83%, 1))`, - coralColorIllustrationSkintone02: `var(--coral-color-illustration-skintone-02, hsla(21, 34%, 55%, 1))`, - coralColorIllustrationSkintone03: `var(--coral-color-illustration-skintone-03, hsla(17, 33%, 28%, 1))`, - coralColorIllustrationShadow: `var(--coral-color-illustration-shadow, hsla(0, 0%, 0%, 0.1))`, - coralColorIllustrationColor07: `var(--coral-color-illustration-color-07, hsla(192, 33%, 97%, 1))`, - coralColorIllustrationColor08: `var(--coral-color-illustration-color-08, hsla(211, 23%, 74%, 1))`, - coralColorIllustrationColor09: `var(--coral-color-illustration-color-09, hsla(245, 10%, 23%, 1))`, - coralColorAccentBackgroundSelected: `var(--coral-color-accent-background-selected, hsla(204, 100%, 95%, 1))`, - coralColorBrandingBackground: `var(--coral-color-branding-background, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, - coralColorBrandingNavigation: `var(--coral-color-branding-navigation, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, - coralSpacingXxs: `var(--coral-spacing-xxs, 0.4rem)`, - coralSpacingXs: `var(--coral-spacing-xs, 0.8rem)`, - coralSpacingS: `var(--coral-spacing-s, 1.2rem)`, - coralSpacingM: `var(--coral-spacing-m, 1.6rem)`, - coralSpacingL: `var(--coral-spacing-l, 2.8rem)`, - coralSpacingXl: `var(--coral-spacing-xl, 3.6rem)`, - coralSizingMinimal: `var(--coral-sizing-minimal, 1.2rem)`, - coralSizingXxxs: `var(--coral-sizing-xxxs, 1.6rem)`, - coralSizingXxs: `var(--coral-sizing-xxs, 2rem)`, - coralSizingXs: `var(--coral-sizing-xs, 2.4rem)`, - coralSizingS: `var(--coral-sizing-s, 2.8rem)`, - coralSizingM: `var(--coral-sizing-m, 3.6rem)`, - coralSizingL: `var(--coral-sizing-l, 4rem)`, - coralSizingXxxl: `var(--coral-sizing-xxxl, 22rem)`, - coralSizingMaximal: `var(--coral-sizing-maximal, 32rem)`, - coralElevationShadowNeutralM: `var(--coral-elevation-shadow-neutral-m, 0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3))`, - coralElevationShadowAccent: `var(--coral-elevation-shadow-accent, 0rem 0.1rem 0.1rem 0rem hsla(204, 95%, 31%, 0.3))`, - coralElevationShadowSuccess: `var(--coral-elevation-shadow-success, 0rem 0.1rem 0.1rem 0rem hsla(111, 49%, 34%, 0.3))`, - coralElevationShadowDanger: `var(--coral-elevation-shadow-danger, 0rem 0.1rem 0.1rem 0rem hsla(359, 51%, 53%, 0.3))`, - coralElevationShadowWarning: `var(--coral-elevation-shadow-warning, 0rem 0.1rem 0.1rem 0rem hsla(22, 93%, 41%, 0.3))`, - coralElevationShadowBeta: `var(--coral-elevation-shadow-beta, 0rem 0.1rem 0.1rem 0rem hsla(281, 58%, 29%, 0.3))`, - coralElevationShadowNeutralInvertedM: `var(--coral-elevation-shadow-neutral-inverted-m, 0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3))`, - coralElevationShadowNeutralInvertedL: `var(--coral-elevation-shadow-neutral-inverted-l, 0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3))`, - coralElevationShadowNeutralL: `var(--coral-elevation-shadow-neutral-l, 0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3))`, - coralElevationShadowNeutralS: `var(--coral-elevation-shadow-neutral-s, 0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5))`, - coralElevationShadowNeutralInvertedS: `var(--coral-elevation-shadow-neutral-inverted-s, 0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.3))`, - coralHeadingL: `var(--coral-heading-l, 600 1.8rem/140% 'Source Sans Pro')`, - coralParagraphM: `var(--coral-paragraph-m, 400 1.4rem/140% 'Source Sans Pro')`, - coralParagraphMBold: `var(--coral-paragraph-m-bold, 600 1.4rem/140% 'Source Sans Pro')`, - coralParagraphS: `var(--coral-paragraph-s, 400 1.2rem/140% 'Source Sans Pro')`, - coralParagraphSBold: `var(--coral-paragraph-s-bold, 600 1.2rem/140% 'Source Sans Pro')`, - coralHeadingM: `var(--coral-heading-m, 600 1.6rem/140% 'Source Sans Pro')`, - coralHeadingS: `var(--coral-heading-s, 600 1.4rem/140% 'Source Sans Pro')`, - coralDataM: `var(--coral-data-m, 400 1.4rem/140% 'Inconsolata')`, - coralDataMBold: `var(--coral-data-m-bold, 700 1.4rem/140% 'Inconsolata')`, - coralLinkMUnderlined: `var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')`, - coralLinkM: `var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')`, - coralDataXl: `var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')`, - coralRadiusM: `var(--coral-radius-m, 0.8rem)`, - coralRadiusL: `var(--coral-radius-l, 1.6rem)`, - coralRadiusRound: `var(--coral-radius-round, 9999.9rem)`, - coralRadiusS: `var(--coral-radius-s, 0.4rem)`, - coralBorderSSolid: `var(--coral-border-s-solid, 1px solid)`, - coralBorderMSolid: `var(--coral-border-m-solid, 2px solid)`, - coralBorderSDashed: `var(--coral-border-s-dashed, 1px dashed)`, - coralBorderMDashed: `var(--coral-border-m-dashed, 2px dashed)`, - coralOpacityL: `var(--coral-opacity-l, 0.2)`, - coralOpacityM: `var(--coral-opacity-m, 0.4)`, - coralOpacityS: `var(--coral-opacity-s, 0.6)`, - coralBreakpointS: `var(--coral-breakpoint-s, 40em)`, - coralBreakpointM: `var(--coral-breakpoint-m, 48em)`, - coralBreakpointL: `var(--coral-breakpoint-l, 64em)`, - coralBreakpointXl: `var(--coral-breakpoint-xl, 80em)`, - coralBrandingLogo: `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=='))`, - coralTransitionInstant: `var(--coral-transition-instant, 100ms ease-out)`, - coralTransitionFast: `var(--coral-transition-fast, 250ms ease-in-out)`, - coralTransitionNormal: `var(--coral-transition-normal, 300ms ease-in-out)`, - coralTransitionSlow: `var(--coral-transition-slow, 400ms ease-in)`, - coralElevationLayerFlat: `var(--coral-elevation-layer-flat, 0)`, - coralElevationLayerStandardFront: `var(--coral-elevation-layer-standard-front, 4)`, - coralElevationLayerInteractiveFront: `var(--coral-elevation-layer-interactive-front, 8)`, - coralElevationLayerOverlay: `var(--coral-elevation-layer-overlay, 16)`, - coralAnimationHeartbeat: `var(--coral-animation-heartbeat, coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite)`, + coralColorNeutralText: `var(--coral-color-neutral-text, hsla(0, 0%, 13%, 1))`, + coralColorNeutralTextWeak: `var(--coral-color-neutral-text-weak, hsla(0, 0%, 38%, 1))`, + coralColorNeutralTextDisabled: `var(--coral-color-neutral-text-disabled, hsla(0, 0%, 44%, 1))`, + coralColorNeutralTextInverted: `var(--coral-color-neutral-text-inverted, hsla(0, 0%, 100%, 1))`, + coralColorNeutralBackground: `var(--coral-color-neutral-background, hsla(0, 0%, 100%, 1))`, + coralColorNeutralBackgroundMedium: `var(--coral-color-neutral-background-medium, hsla(0, 0%, 97%, 1))`, + coralColorNeutralBackgroundStrong: `var(--coral-color-neutral-background-strong, hsla(0, 0%, 88%, 1))`, + coralColorNeutralBackgroundDisabled: `var(--coral-color-neutral-background-disabled, hsla(0, 0%, 88%, 1))`, + coralColorNeutralBorder: `var(--coral-color-neutral-border, hsla(0, 0%, 55%, 1))`, + coralColorNeutralBorderWeak: `var(--coral-color-neutral-border-weak, hsla(0, 0%, 82%, 1))`, + coralColorNeutralBorderHover: `var(--coral-color-neutral-border-hover, hsla(0, 0%, 40%, 1))`, + coralColorAccentTextWeak: `var(--coral-color-accent-text-weak, hsla(0, 0%, 100%, 1))`, + coralColorAccentTextWeakHover: `var(--coral-color-accent-text-weak-hover, hsla(204, 59%, 88%, 1))`, + coralColorAccentTextWeakActive: `var(--coral-color-accent-text-weak-active, hsla(205, 60%, 75%, 1))`, + coralColorAccentText: `var(--coral-color-accent-text, hsla(204, 95%, 31%, 1))`, + coralColorAccentTextHover: `var(--coral-color-accent-text-hover, hsla(204, 96%, 18%, 1))`, + coralColorAccentTextActive: `var(--coral-color-accent-text-active, hsla(205, 94%, 13%, 1))`, + coralColorAccentBackground: `var(--coral-color-accent-background, hsla(204, 59%, 88%, 1))`, + coralColorAccentBackgroundHover: `var(--coral-color-accent-background-hover, hsla(205, 60%, 75%, 1))`, + coralColorAccentBackgroundActive: `var(--coral-color-accent-background-active, hsla(204, 60%, 63%, 1))`, + coralColorAccentBackgroundWeak: `var(--coral-color-accent-background-weak, hsla(0, 0%, 100%, 1))`, + coralColorAccentBackgroundWeakHover: `var(--coral-color-accent-background-weak-hover, hsla(204, 59%, 88%, 1))`, + coralColorAccentBackgroundWeakActive: `var(--coral-color-accent-background-weak-active, hsla(205, 60%, 75%, 1))`, + coralColorAccentBackgroundStrong: `var(--coral-color-accent-background-strong, hsla(204, 95%, 31%, 1))`, + coralColorAccentBackgroundStrongHover: `var(--coral-color-accent-background-strong-hover, hsla(204, 95%, 23%, 1))`, + coralColorAccentBackgroundStrongActive: `var(--coral-color-accent-background-strong-active, hsla(205, 95%, 15%, 1))`, + coralColorAccentBorderHover: `var(--coral-color-accent-border-hover, hsla(204, 95%, 23%, 1))`, + coralColorAccentBorderActive: `var(--coral-color-accent-border-active, hsla(205, 95%, 15%, 1))`, + coralColorDangerTextWeak: `var(--coral-color-danger-text-weak, hsla(0, 0%, 100%, 1))`, + coralColorDangerTextWeakHover: `var(--coral-color-danger-text-weak-hover, hsla(358, 100%, 94%, 1))`, + coralColorDangerTextWeakActive: `var(--coral-color-danger-text-weak-active, hsla(359, 100%, 88%, 1))`, + coralColorDangerText: `var(--coral-color-danger-text, hsla(359, 51%, 53%, 1))`, + coralColorDangerTextHover: `var(--coral-color-danger-text-hover, hsla(359, 52%, 43%, 1))`, + coralColorDangerTextActive: `var(--coral-color-danger-text-active, hsla(359, 51%, 33%, 1))`, + coralColorDangerBackground: `var(--coral-color-danger-background, hsla(0, 100%, 96%, 1))`, + coralColorDangerBackgroundHover: `var(--coral-color-danger-background-hover, hsla(359, 100%, 88%, 1))`, + coralColorDangerBackgroundActive: `var(--coral-color-danger-background-active, hsla(359, 100%, 83%, 1))`, + coralColorDangerBackgroundWeak: `var(--coral-color-danger-background-weak, hsla(0, 0%, 100%, 1))`, + coralColorDangerBackgroundWeakHover: `var(--coral-color-danger-background-weak-hover, hsla(358, 100%, 94%, 1))`, + coralColorDangerBackgroundWeakActive: `var(--coral-color-danger-background-weak-active, hsla(359, 100%, 88%, 1))`, + coralColorSuccessTextWeak: `var(--coral-color-success-text-weak, hsla(0, 0%, 100%, 1))`, + coralColorSuccessTextWeakHover: `var(--coral-color-success-text-weak-hover, hsla(110, 49%, 90%, 1))`, + coralColorSuccessTextWeakActive: `var(--coral-color-success-text-weak-active, hsla(110, 48%, 85%, 1))`, + coralColorSuccessText: `var(--coral-color-success-text, hsla(111, 49%, 34%, 1))`, + coralColorSuccessTextHover: `var(--coral-color-success-text-hover, hsla(111, 49%, 29%, 1))`, + coralColorSuccessTextActive: `var(--coral-color-success-text-active, hsla(111, 49%, 24%, 1))`, + coralColorSuccessBackground: `var(--coral-color-success-background, hsla(110, 49%, 90%, 1))`, + coralColorDangerBackgroundStrong: `var(--coral-color-danger-background-strong, hsla(359, 51%, 53%, 1))`, + coralColorDangerBackgroundStrongHover: `var(--coral-color-danger-background-strong-hover, hsla(359, 54%, 38%, 1))`, + coralColorDangerBackgroundStrongActive: `var(--coral-color-danger-background-strong-active, hsla(359, 54%, 33%, 1))`, + coralColorDangerBorder: `var(--coral-color-danger-border, hsla(359, 51%, 53%, 1))`, + coralColorSuccessBackgroundHover: `var(--coral-color-success-background-hover, hsla(110, 48%, 85%, 1))`, + coralColorDangerBorderHover: `var(--coral-color-danger-border-hover, hsla(359, 54%, 38%, 1))`, + coralColorSuccessBackgroundActive: `var(--coral-color-success-background-active, hsla(110, 49%, 80%, 1))`, + coralColorDangerBorderActive: `var(--coral-color-danger-border-active, hsla(359, 54%, 33%, 1))`, + coralColorSuccessBackgroundWeak: `var(--coral-color-success-background-weak, hsla(0, 0%, 100%, 1))`, + coralColorSuccessBackgroundWeakHover: `var(--coral-color-success-background-weak-hover, hsla(110, 49%, 90%, 1))`, + coralColorSuccessBackgroundWeakActive: `var(--coral-color-success-background-weak-active, hsla(110, 48%, 85%, 1))`, + coralColorSuccessBackgroundStrong: `var(--coral-color-success-background-strong, hsla(111, 49%, 34%, 1))`, + coralColorSuccessBackgroundStrongHover: `var(--coral-color-success-background-strong-hover, hsla(111, 49%, 29%, 1))`, + coralColorSuccessBackgroundStrongActive: `var(--coral-color-success-background-strong-active, hsla(111, 49%, 24%, 1))`, + coralColorWarningTextWeak: `var(--coral-color-warning-text-weak, hsla(0, 0%, 100%, 1))`, + coralColorWarningTextWeakHover: `var(--coral-color-warning-text-weak-hover, hsla(22, 85%, 92%, 1))`, + coralColorWarningTextWeakActive: `var(--coral-color-warning-text-weak-active, hsla(22, 85%, 82%, 1))`, + coralColorSuccessBorder: `var(--coral-color-success-border, hsla(111, 49%, 34%, 1))`, + coralColorWarningText: `var(--coral-color-warning-text, hsla(22, 93%, 41%, 1))`, + coralColorWarningTextHover: `var(--coral-color-warning-text-hover, hsla(21, 94%, 31%, 1))`, + coralColorWarningTextActive: `var(--coral-color-warning-text-active, hsla(21, 93%, 21%, 1))`, + coralColorWarningBackground: `var(--coral-color-warning-background, hsla(22, 85%, 92%, 1))`, + coralColorSuccessBorderHover: `var(--coral-color-success-border-hover, hsla(111, 49%, 29%, 1))`, + coralColorWarningBackgroundHover: `var(--coral-color-warning-background-hover, hsla(22, 85%, 82%, 1))`, + coralColorSuccessBorderActive: `var(--coral-color-success-border-active, hsla(111, 49%, 24%, 1))`, + coralColorWarningBackgroundActive: `var(--coral-color-warning-background-active, hsla(22, 85%, 72%, 1))`, + coralColorWarningBackgroundWeak: `var(--coral-color-warning-background-weak, hsla(0, 0%, 100%, 1))`, + coralColorAssistiveText: `var(--coral-color-assistive-text, hsla(0, 0%, 100%, 1))`, + coralColorWarningBackgroundWeakHover: `var(--coral-color-warning-background-weak-hover, hsla(22, 85%, 92%, 1))`, + coralColorWarningBackgroundWeakActive: `var(--coral-color-warning-background-weak-active, hsla(22, 85%, 82%, 1))`, + coralColorAssistiveBackground: `var(--coral-color-assistive-background, hsla(210, 62%, 5%, 1))`, + coralColorWarningBackgroundStrong: `var(--coral-color-warning-background-strong, hsla(22, 93%, 41%, 1))`, + coralColorWarningBackgroundStrongHover: `var(--coral-color-warning-background-strong-hover, hsla(21, 94%, 31%, 1))`, + coralColorWarningBackgroundStrongActive: `var(--coral-color-warning-background-strong-active, hsla(21, 93%, 21%, 1))`, + coralColorWarningBorder: `var(--coral-color-warning-border, hsla(22, 93%, 41%, 1))`, + coralColorAssistiveBorder: `var(--coral-color-assistive-border, hsla(0, 0%, 47%, 1))`, + coralColorWarningBorderHover: `var(--coral-color-warning-border-hover, hsla(21, 94%, 31%, 1))`, + coralColorWarningBorderActive: `var(--coral-color-warning-border-active, hsla(21, 93%, 21%, 1))`, + coralColorBrandingBrand: `var(--coral-color-branding-brand, hsla(359, 100%, 71%, 1))`, + coralColorNeutralBorderDisabled: `var(--coral-color-neutral-border-disabled, hsla(0, 0%, 65%, 1))`, + coralColorNeutralBorderWeakHover: `var(--coral-color-neutral-border-weak-hover, hsla(0, 0%, 72%, 1))`, + coralColorAssistiveBorderFocus: `var(--coral-color-assistive-border-focus, hsla(241, 54%, 61%, 1))`, + coralColorAccentTextStrong: `var(--coral-color-accent-text-strong, hsla(204, 96%, 18%, 1))`, + coralColorAccentTextStrongHover: `var(--coral-color-accent-text-strong-hover, hsla(204, 97%, 13%, 1))`, + coralColorAccentTextStrongActive: `var(--coral-color-accent-text-strong-active, hsla(205, 95%, 8%, 1))`, + coralColorDangerTextStrong: `var(--coral-color-danger-text-strong, hsla(359, 47%, 44%, 1))`, + coralColorDangerTextStrongHover: `var(--coral-color-danger-text-strong-hover, hsla(359, 54%, 38%, 1))`, + coralColorDangerTextStrongActive: `var(--coral-color-danger-text-strong-active, hsla(359, 54%, 33%, 1))`, + coralColorSuccessTextStrong: `var(--coral-color-success-text-strong, hsla(111, 49%, 29%, 1))`, + coralColorSuccessTextStrongHover: `var(--coral-color-success-text-strong-hover, hsla(110, 49%, 24%, 1))`, + coralColorSuccessTextStrongActive: `var(--coral-color-success-text-strong-active, hsla(111, 48%, 19%, 1))`, + coralColorWarningTextStrong: `var(--coral-color-warning-text-strong, hsla(22, 86%, 27%, 1))`, + coralColorWarningTextStrongHover: `var(--coral-color-warning-text-strong-hover, hsla(23, 86%, 22%, 1))`, + coralColorWarningTextStrongActive: `var(--coral-color-warning-text-strong-active, hsla(23, 86%, 17%, 1))`, + coralColorBetaText: `var(--coral-color-beta-text, hsla(280, 57%, 49%, 1))`, + coralColorBetaTextHover: `var(--coral-color-beta-text-hover, hsla(281, 58%, 39%, 1))`, + coralColorBetaTextActive: `var(--coral-color-beta-text-active, hsla(281, 58%, 29%, 1))`, + coralColorBetaIcon: `var(--coral-color-beta-icon, hsla(280, 80%, 54%, 1))`, + coralColorBetaIconHover: `var(--coral-color-beta-icon-hover, hsla(280, 80%, 44%, 1))`, + coralColorBetaIconActive: `var(--coral-color-beta-icon-active, hsla(280, 80%, 34%, 1))`, + coralColorBetaTextWeak: `var(--coral-color-beta-text-weak, hsla(0, 0%, 100%, 1))`, + coralColorBetaTextWeakHover: `var(--coral-color-beta-text-weak-hover, hsla(280, 56%, 83%, 1))`, + coralColorBetaTextWeakActive: `var(--coral-color-beta-text-weak-active, hsla(280, 57%, 73%, 1))`, + coralColorBetaTextStrong: `var(--coral-color-beta-text-strong, hsla(281, 58%, 29%, 1))`, + coralColorBetaTextStrongHover: `var(--coral-color-beta-text-strong-hover, hsla(282, 58%, 19%, 1))`, + coralColorBetaTextStrongActive: `var(--coral-color-beta-text-strong-active, hsla(282, 57%, 9%, 1))`, + coralColorBetaBackground: `var(--coral-color-beta-background, hsla(279, 57%, 90%, 1))`, + coralColorBetaBackgroundHover: `var(--coral-color-beta-background-hover, hsla(279, 57%, 81%, 1))`, + coralColorBetaBackgroundActive: `var(--coral-color-beta-background-active, hsla(279, 57%, 71%, 1))`, + coralColorBetaBackgroundWeak: `var(--coral-color-beta-background-weak, hsla(0, 0%, 100%, 1))`, + coralColorBetaBackgroundWeakHover: `var(--coral-color-beta-background-weak-hover, hsla(279, 57%, 90%, 1))`, + coralColorBetaBackgroundWeakActive: `var(--coral-color-beta-background-weak-active, hsla(279, 57%, 80%, 1))`, + coralColorBetaBackgroundStrong: `var(--coral-color-beta-background-strong, hsla(281, 58%, 29%, 1))`, + coralColorBetaBackgroundStrongHover: `var(--coral-color-beta-background-strong-hover, hsla(282, 58%, 19%, 1))`, + coralColorBetaBackgroundStrongActive: `var(--coral-color-beta-background-strong-active, hsla(282, 57%, 9%, 1))`, + coralColorBetaBorder: `var(--coral-color-beta-border, hsla(281, 58%, 29%, 1))`, + coralColorBetaBorderHover: `var(--coral-color-beta-border-hover, hsla(282, 58%, 19%, 1))`, + coralColorBetaBorderActive: `var(--coral-color-beta-border-active, hsla(282, 57%, 9%, 1))`, + coralColorNeutralBorderStrong: `var(--coral-color-neutral-border-strong, hsla(0, 0%, 25%, 1))`, + coralColorNeutralBorderStrongHover: `var(--coral-color-neutral-border-strong-hover, hsla(0, 0%, 15%, 1))`, + coralColorNeutralIconInverted: `var(--coral-color-neutral-icon-inverted, hsla(0, 0%, 100%, 1))`, + coralColorNeutralIcon: `var(--coral-color-neutral-icon, hsla(0, 0%, 13%, 1))`, + coralColorNeutralIconWeak: `var(--coral-color-neutral-icon-weak, hsla(0, 0%, 38%, 1))`, + coralColorAccentIcon: `var(--coral-color-accent-icon, hsla(204, 88%, 40%, 1))`, + coralColorAccentIconHover: `var(--coral-color-accent-icon-hover, hsla(204, 88%, 30%, 1))`, + coralColorAccentIconActive: `var(--coral-color-accent-icon-active, hsla(205, 88%, 20%, 1))`, + coralColorDangerIcon: `var(--coral-color-danger-icon, hsla(359, 69%, 53%, 1))`, + coralColorDangerIconHover: `var(--coral-color-danger-icon-hover, hsla(359, 69%, 43%, 1))`, + coralColorDangerIconActive: `var(--coral-color-danger-icon-active, hsla(359, 69%, 33%, 1))`, + coralColorSuccessIcon: `var(--coral-color-success-icon, hsla(111, 53%, 40%, 1))`, + coralColorSuccessIconHover: `var(--coral-color-success-icon-hover, hsla(111, 53%, 30%, 1))`, + coralColorSuccessIconActive: `var(--coral-color-success-icon-active, hsla(111, 53%, 20%, 1))`, + coralColorWarningIcon: `var(--coral-color-warning-icon, hsla(22, 87%, 47%, 1))`, + coralColorWarningIconHover: `var(--coral-color-warning-icon-hover, hsla(22, 87%, 37%, 1))`, + coralColorWarningIconActive: `var(--coral-color-warning-icon-active, hsla(22, 87%, 27%, 1))`, + coralColorChartsNeutral: `var(--coral-color-charts-neutral, hsla(0, 0%, 22%, 1))`, + coralColorChartsNeutralWeak: `var(--coral-color-charts-neutral-weak, hsla(0, 0%, 83%, 1))`, + coralColorChartsNeutralStrong: `var(--coral-color-charts-neutral-strong, hsla(0, 0%, 12%, 1))`, + coralColorChartsNeutralHover: `var(--coral-color-charts-neutral-hover, hsla(0, 0%, 12%, 1))`, + coralColorChartsSuccess: `var(--coral-color-charts-success, hsla(148, 87%, 40%, 1))`, + coralColorChartsSuccessWeak: `var(--coral-color-charts-success-weak, hsla(130, 52%, 91%, 1))`, + coralColorChartsSuccessStrong: `var(--coral-color-charts-success-strong, hsla(139, 50%, 22%, 1))`, + coralColorChartsSuccessHover: `var(--coral-color-charts-success-hover, hsla(139, 50%, 22%, 1))`, + coralColorChartsDanger: `var(--coral-color-charts-danger, hsla(4, 89%, 49%, 1))`, + coralColorChartsDangerWeak: `var(--coral-color-charts-danger-weak, hsla(359, 69%, 73%, 1))`, + coralColorChartsDangerStrong: `var(--coral-color-charts-danger-strong, hsla(359, 62%, 43%, 1))`, + coralColorChartsDangerHover: `var(--coral-color-charts-danger-hover, hsla(359, 62%, 43%, 1))`, + coralColorChartsWarning: `var(--coral-color-charts-warning, hsla(32, 100%, 56%, 1))`, + coralColorChartsWarningWeak: `var(--coral-color-charts-warning-weak, hsla(22, 88%, 84%, 1))`, + coralColorChartsWarningStrong: `var(--coral-color-charts-warning-strong, hsla(22, 75%, 42%, 1))`, + coralColorChartsWarningHover: `var(--coral-color-charts-warning-hover, hsla(22, 75%, 42%, 1))`, + coralColorChartsDefault: `var(--coral-color-charts-default, hsla(216, 82%, 48%, 1))`, + coralColorChartsDefaultWeak: `var(--coral-color-charts-default-weak, hsla(204, 59%, 73%, 1))`, + coralColorChartsDefaultStrong: `var(--coral-color-charts-default-strong, hsla(204, 92%, 29%, 1))`, + coralColorChartsDefaultHover: `var(--coral-color-charts-default-hover, hsla(204, 92%, 29%, 1))`, + coralColorChartsColor00: `var(--coral-color-charts-color-00, hsla(48, 100%, 50%, 1))`, + coralColorChartsColor00Weak: `var(--coral-color-charts-color-00-weak, hsla(51, 91%, 82%, 1))`, + coralColorChartsColor00Strong: `var(--coral-color-charts-color-00-strong, hsla(48, 82%, 45%, 1))`, + coralColorChartsColor00Hover: `var(--coral-color-charts-color-00-hover, hsla(48, 82%, 45%, 1))`, + coralColorChartsColor01: `var(--coral-color-charts-color-01, hsla(216, 82%, 48%, 1))`, + coralColorChartsColor01Weak: `var(--coral-color-charts-color-01-weak, hsla(204, 59%, 73%, 1))`, + coralColorChartsColor01Strong: `var(--coral-color-charts-color-01-strong, hsla(204, 92%, 29%, 1))`, + coralColorChartsColor01Hover: `var(--coral-color-charts-color-01-hover, hsla(204, 92%, 29%, 1))`, + coralColorChartsColor02: `var(--coral-color-charts-color-02, hsla(194, 92%, 50%, 1))`, + coralColorChartsColor02Weak: `var(--coral-color-charts-color-02-weak, hsla(194, 91%, 91%, 1))`, + coralColorChartsColor02Strong: `var(--coral-color-charts-color-02-strong, hsla(194, 93%, 32%, 1))`, + coralColorChartsColor02Hover: `var(--coral-color-charts-color-02-hover, hsla(194, 93%, 32%, 1))`, + coralColorChartsColor03: `var(--coral-color-charts-color-03, hsla(140, 39%, 79%, 1))`, + coralColorChartsColor03Weak: `var(--coral-color-charts-color-03-weak, hsla(138, 40%, 92%, 1))`, + coralColorChartsColor03Strong: `var(--coral-color-charts-color-03-strong, hsla(139, 11%, 35%, 1))`, + coralColorChartsColor03Hover: `var(--coral-color-charts-color-03-hover, hsla(139, 11%, 35%, 1))`, + coralColorChartsColor04: `var(--coral-color-charts-color-04, hsla(148, 87%, 40%, 1))`, + coralColorChartsColor04Weak: `var(--coral-color-charts-color-04-weak, hsla(130, 52%, 91%, 1))`, + coralColorChartsColor04Strong: `var(--coral-color-charts-color-04-strong, hsla(139, 50%, 22%, 1))`, + coralColorChartsColor04Hover: `var(--coral-color-charts-color-04-hover, hsla(139, 50%, 22%, 1))`, + coralColorChartsColor05: `var(--coral-color-charts-color-05, hsla(324, 68%, 71%, 1))`, + coralColorChartsColor05Weak: `var(--coral-color-charts-color-05-weak, hsla(323, 69%, 95%, 1))`, + coralColorChartsColor05Strong: `var(--coral-color-charts-color-05-strong, hsla(324, 28%, 49%, 1))`, + coralColorChartsColor05Hover: `var(--coral-color-charts-color-05-hover, hsla(324, 28%, 49%, 1))`, + coralColorChartsColor06: `var(--coral-color-charts-color-06, hsla(280, 75%, 58%, 1))`, + coralColorChartsColor06Weak: `var(--coral-color-charts-color-06-weak, hsla(279, 77%, 88%, 1))`, + coralColorChartsColor06Strong: `var(--coral-color-charts-color-06-strong, hsla(280, 54%, 36%, 1))`, + coralColorChartsColor06Hover: `var(--coral-color-charts-color-06-hover, hsla(280, 54%, 36%, 1))`, + coralColorChartsColor07: `var(--coral-color-charts-color-07, hsla(4, 89%, 49%, 1))`, + coralColorChartsColor07Weak: `var(--coral-color-charts-color-07-weak, hsla(359, 69%, 73%, 1))`, + coralColorChartsColor07Strong: `var(--coral-color-charts-color-07-strong, hsla(359, 62%, 43%, 1))`, + coralColorChartsColor07Hover: `var(--coral-color-charts-color-07-hover, hsla(359, 62%, 43%, 1))`, + coralColorChartsColor08: `var(--coral-color-charts-color-08, hsla(22, 88%, 54%, 1))`, + coralColorChartsColor08Weak: `var(--coral-color-charts-color-08-weak, hsla(22, 88%, 84%, 1))`, + coralColorChartsColor08Strong: `var(--coral-color-charts-color-08-strong, hsla(22, 75%, 42%, 1))`, + coralColorChartsColor08Hover: `var(--coral-color-charts-color-08-hover, hsla(22, 75%, 42%, 1))`, + coralColorChartsColor09: `var(--coral-color-charts-color-09, hsla(34, 34%, 45%, 1))`, + coralColorChartsColor09Weak: `var(--coral-color-charts-color-09-weak, hsla(35, 28%, 82%, 1))`, + coralColorChartsColor09Strong: `var(--coral-color-charts-color-09-strong, hsla(35, 34%, 27%, 1))`, + coralColorChartsColor09Hover: `var(--coral-color-charts-color-09-hover, hsla(35, 34%, 27%, 1))`, + coralColorAccentBorder: `var(--coral-color-accent-border, hsla(204, 95%, 31%, 1))`, + coralColorChartsDefaultText: `var(--coral-color-charts-default-text, hsla(205, 87%, 94%, 1))`, + coralColorChartsDefaultTextStrong: `var(--coral-color-charts-default-text-strong, hsla(205, 93%, 22%, 1))`, + coralColorChartsDefaultTextWeak: `var(--coral-color-charts-default-text-weak, hsla(207, 93%, 94%, 1))`, + coralColorChartsColor09Text: `var(--coral-color-charts-color-09-text, hsla(36, 36%, 5%, 1))`, + coralColorChartsColor09TextStrong: `var(--coral-color-charts-color-09-text-strong, hsla(36, 36%, 5%, 1))`, + coralColorChartsColor09TextWeak: `var(--coral-color-charts-color-09-text-weak, hsla(35, 28%, 82%, 1))`, + coralColorNeutralBackgroundHeavy: `var(--coral-color-neutral-background-heavy, hsla(0, 0%, 78%, 1))`, + coralColorIllustrationColor01: `var(--coral-color-illustration-color-01, hsla(211, 62%, 26%, 1))`, + coralColorIllustrationColor02: `var(--coral-color-illustration-color-02, hsla(211, 43%, 47%, 1))`, + coralColorIllustrationColor03: `var(--coral-color-illustration-color-03, hsla(201, 31%, 85%, 1))`, + coralColorIllustrationColor05: `var(--coral-color-illustration-color-05, hsla(359, 82%, 81%, 1))`, + coralColorIllustrationColor04: `var(--coral-color-illustration-color-04, hsla(359, 100%, 72%, 1))`, + coralColorIllustrationColor06: `var(--coral-color-illustration-color-06, hsla(358, 100%, 93%, 1))`, + coralColorIllustrationSkintone01: `var(--coral-color-illustration-skintone-01, hsla(20, 91%, 83%, 1))`, + coralColorIllustrationSkintone02: `var(--coral-color-illustration-skintone-02, hsla(21, 34%, 55%, 1))`, + coralColorIllustrationSkintone03: `var(--coral-color-illustration-skintone-03, hsla(17, 33%, 28%, 1))`, + coralColorIllustrationShadow: `var(--coral-color-illustration-shadow, hsla(0, 0%, 0%, 0.1))`, + coralColorIllustrationColor07: `var(--coral-color-illustration-color-07, hsla(192, 33%, 97%, 1))`, + coralColorIllustrationColor08: `var(--coral-color-illustration-color-08, hsla(211, 23%, 74%, 1))`, + coralColorIllustrationColor09: `var(--coral-color-illustration-color-09, hsla(245, 10%, 23%, 1))`, + coralColorAccentBackgroundSelected: `var(--coral-color-accent-background-selected, hsla(204, 100%, 95%, 1))`, + coralColorInfoText: `var(--coral-color-info-text, hsla(204, 95%, 31%, 1))`, + coralColorInfoTextHover: `var(--coral-color-info-text-hover, hsla(204, 96%, 18%, 1))`, + coralColorInfoTextActive: `var(--coral-color-info-text-active, hsla(205, 94%, 13%, 1))`, + coralColorInfoTextWeak: `var(--coral-color-info-text-weak, hsla(0, 0%, 100%, 1))`, + coralColorInfoTextWeakHover: `var(--coral-color-info-text-weak-hover, hsla(204, 59%, 88%, 1))`, + coralColorInfoTextWeakActive: `var(--coral-color-info-text-weak-active, hsla(205, 60%, 75%, 1))`, + coralColorInfoTextStrong: `var(--coral-color-info-text-strong, hsla(204, 96%, 18%, 1))`, + coralColorInfoTextStrongHover: `var(--coral-color-info-text-strong-hover, hsla(204, 97%, 13%, 1))`, + coralColorInfoTextStrongActive: `var(--coral-color-info-text-strong-active, hsla(205, 95%, 8%, 1))`, + coralColorInfoBackgroundHover: `var(--coral-color-info-background-hover, hsla(205, 60%, 75%, 1))`, + coralColorInfoBackgroundActive: `var(--coral-color-info-background-active, hsla(204, 60%, 63%, 1))`, + coralColorInfoBackgroundWeak: `var(--coral-color-info-background-weak, hsla(0, 0%, 100%, 1))`, + coralColorInfoBackgroundWeakHover: `var(--coral-color-info-background-weak-hover, hsla(204, 59%, 88%, 1))`, + coralColorInfoBackgroundWeakActive: `var(--coral-color-info-background-weak-active, hsla(205, 60%, 75%, 1))`, + coralColorInfoBackgroundStrong: `var(--coral-color-info-background-strong, hsla(204, 95%, 31%, 1))`, + coralColorInfoBackgroundStrongHover: `var(--coral-color-info-background-strong-hover, hsla(204, 95%, 23%, 1))`, + coralColorInfoBackgroundStrongActive: `var(--coral-color-info-background-strong-active, hsla(205, 95%, 15%, 1))`, + coralColorInfoBorder: `var(--coral-color-info-border, hsla(204, 95%, 31%, 1))`, + coralColorInfoBorderHover: `var(--coral-color-info-border-hover, hsla(204, 95%, 23%, 1))`, + coralColorInfoBorderActive: `var(--coral-color-info-border-active, hsla(205, 95%, 15%, 1))`, + coralColorInfoIcon: `var(--coral-color-info-icon, hsla(204, 88%, 40%, 1))`, + coralColorInfoIconHover: `var(--coral-color-info-icon-hover, hsla(204, 88%, 30%, 1))`, + coralColorInfoIconActive: `var(--coral-color-info-icon-active, hsla(205, 88%, 20%, 1))`, + coralColorBrandText: `var(--coral-color-brand-text, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextHover: `var(--coral-color-brand-text-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextActive: `var(--coral-color-brand-text-active, hsla(0, 0%, 100%, 1))`, + coralColorBrandTextInverted: `var(--coral-color-brand-text-inverted, hsla(0, 0%, 38%, 1))`, + coralColorBrandTextInvertedHover: `var(--coral-color-brand-text-inverted-hover, hsla(0, 0%, 13%, 1))`, + coralColorBrandTextInvertedActive: `var(--coral-color-brand-text-inverted-active, hsla(0, 0%, 13%, 1))`, + coralColorBrandTextSelected: `var(--coral-color-brand-text-selected, hsla(204, 96%, 18%, 1))`, + coralColorBrandBackgroundWeak: `var(--coral-color-brand-background-weak, hsla(0, 0%, 100%, 0))`, + coralColorBrandBackgroundWeakHover: `var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 100%, 0.1))`, + coralColorBrandBackgroundWeakActive: `var(--coral-color-brand-background-weak-active, hsla(0, 0%, 100%, 0.1))`, + coralColorBrandBackgroundSelected: `var(--coral-color-brand-background-selected, hsla(0, 0%, 100%, 1))`, + coralColorBrandBackgroundInverted: `var(--coral-color-brand-background-inverted, hsla(0, 0%, 13%, 0))`, + coralColorBrandBackgroundInvertedHover: `var(--coral-color-brand-background-inverted-hover, hsla(0, 0%, 13%, 0.1))`, + coralColorBrandBackgroundInvertedActive: `var(--coral-color-brand-background-inverted-active, hsla(0, 0%, 13%, 0.1))`, + coralColorBrandBorder: `var(--coral-color-brand-border, hsla(0, 0%, 100%, 1))`, + coralColorBrandBorderHover: `var(--coral-color-brand-border-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandBorderActive: `var(--coral-color-brand-border-active, hsla(0, 0%, 100%, 1))`, + coralColorInfoBackground: `var(--coral-color-info-background, hsla(204, 59%, 88%, 1))`, + coralColorBrandIcon: `var(--coral-color-brand-icon, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconHover: `var(--coral-color-brand-icon-hover, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconActive: `var(--coral-color-brand-icon-active, hsla(0, 0%, 100%, 1))`, + coralColorBrandIconInverted: `var(--coral-color-brand-icon-inverted, hsla(0, 0%, 38%, 1))`, + coralColorBrandIconInvertedHover: `var(--coral-color-brand-icon-inverted-hover, hsla(0, 0%, 13%, 1))`, + coralColorBrandIconInvertedActive: `var(--coral-color-brand-icon-inverted-active, hsla(0, 0%, 13%, 1))`, + coralColorBrandIconSelected: `var(--coral-color-brand-icon-selected, hsla(204, 96%, 18%, 1))`, + coralColorBrandingBackground: `var(--coral-color-branding-background, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, + coralColorBrandingNavigation: `var(--coral-color-branding-navigation, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, + coralColorBrandBackground: `var(--coral-color-brand-background, linear-gradient(133deg,hsla(210, 62%, 26%, 1) 0%, hsla(254, 47%, 23%, 1) 100%))`, + coralSpacingXxs: `var(--coral-spacing-xxs, 0.4rem)`, + coralSpacingXs: `var(--coral-spacing-xs, 0.8rem)`, + coralSpacingS: `var(--coral-spacing-s, 1.2rem)`, + coralSpacingM: `var(--coral-spacing-m, 1.6rem)`, + coralSpacingL: `var(--coral-spacing-l, 2.8rem)`, + coralSpacingXl: `var(--coral-spacing-xl, 3.6rem)`, + coralSizingMinimal: `var(--coral-sizing-minimal, 1.2rem)`, + coralSizingXxxs: `var(--coral-sizing-xxxs, 1.6rem)`, + coralSizingXxs: `var(--coral-sizing-xxs, 2rem)`, + coralSizingXs: `var(--coral-sizing-xs, 2.4rem)`, + coralSizingS: `var(--coral-sizing-s, 2.8rem)`, + coralSizingM: `var(--coral-sizing-m, 3.6rem)`, + coralSizingL: `var(--coral-sizing-l, 4rem)`, + coralSizingXxxl: `var(--coral-sizing-xxxl, 22rem)`, + coralSizingMaximal: `var(--coral-sizing-maximal, 32rem)`, + coralElevationShadowNeutralM: `var(--coral-elevation-shadow-neutral-m, 0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3))`, + coralElevationShadowAccent: `var(--coral-elevation-shadow-accent, 0rem 0.1rem 0.1rem 0rem hsla(204, 95%, 31%, 0.3))`, + coralElevationShadowSuccess: `var(--coral-elevation-shadow-success, 0rem 0.1rem 0.1rem 0rem hsla(111, 49%, 34%, 0.3))`, + coralElevationShadowDanger: `var(--coral-elevation-shadow-danger, 0rem 0.1rem 0.1rem 0rem hsla(359, 51%, 53%, 0.3))`, + coralElevationShadowWarning: `var(--coral-elevation-shadow-warning, 0rem 0.1rem 0.1rem 0rem hsla(22, 93%, 41%, 0.3))`, + coralElevationShadowBeta: `var(--coral-elevation-shadow-beta, 0rem 0.1rem 0.1rem 0rem hsla(281, 58%, 29%, 0.3))`, + coralElevationShadowNeutralInvertedM: `var(--coral-elevation-shadow-neutral-inverted-m, 0rem -0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3))`, + coralElevationShadowNeutralInvertedL: `var(--coral-elevation-shadow-neutral-inverted-l, 0rem -0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3))`, + coralElevationShadowNeutralL: `var(--coral-elevation-shadow-neutral-l, 0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.3))`, + coralElevationShadowNeutralS: `var(--coral-elevation-shadow-neutral-s, 0rem 0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.5))`, + coralElevationShadowNeutralInvertedS: `var(--coral-elevation-shadow-neutral-inverted-s, 0rem -0.1rem 0.2rem 0rem hsla(0, 0%, 0%, 0.3))`, + coralHeadingL: `var(--coral-heading-l, 600 1.8rem/140% 'Source Sans Pro')`, + coralParagraphM: `var(--coral-paragraph-m, 400 1.4rem/140% 'Source Sans Pro')`, + coralParagraphMBold: `var(--coral-paragraph-m-bold, 600 1.4rem/140% 'Source Sans Pro')`, + coralParagraphS: `var(--coral-paragraph-s, 400 1.2rem/140% 'Source Sans Pro')`, + coralParagraphSBold: `var(--coral-paragraph-s-bold, 600 1.2rem/140% 'Source Sans Pro')`, + coralHeadingM: `var(--coral-heading-m, 600 1.6rem/140% 'Source Sans Pro')`, + coralHeadingS: `var(--coral-heading-s, 600 1.4rem/140% 'Source Sans Pro')`, + coralDataM: `var(--coral-data-m, 400 1.4rem/140% 'Inconsolata')`, + coralDataMBold: `var(--coral-data-m-bold, 700 1.4rem/140% 'Inconsolata')`, + coralLinkMUnderlined: `var(--coral-link-m-underlined, 600 1.4rem/140% 'Source Sans Pro')`, + coralLinkM: `var(--coral-link-m, 600 1.4rem/140% 'Source Sans Pro')`, + coralDataXl: `var(--coral-data-xl, 400 2.4rem/140% 'Inconsolata')`, + coralLinkS: `var(--coral-link-s, 600 1.2rem/140% 'Source Sans Pro')`, + coralLinkSUnderlined: `var(--coral-link-s-underlined, 600 1.2rem/140% 'Source Sans Pro')`, + coralRadiusM: `var(--coral-radius-m, 0.8rem)`, + coralRadiusL: `var(--coral-radius-l, 1.6rem)`, + coralRadiusRound: `var(--coral-radius-round, 9999.9rem)`, + coralRadiusS: `var(--coral-radius-s, 0.4rem)`, + coralBorderSSolid: `var(--coral-border-s-solid, 1px solid)`, + coralBorderMSolid: `var(--coral-border-m-solid, 2px solid)`, + coralBorderSDashed: `var(--coral-border-s-dashed, 1px dashed)`, + coralBorderMDashed: `var(--coral-border-m-dashed, 2px dashed)`, + coralOpacityL: `var(--coral-opacity-l, 0.2)`, + coralOpacityM: `var(--coral-opacity-m, 0.4)`, + coralOpacityS: `var(--coral-opacity-s, 0.6)`, + coralBreakpointS: `var(--coral-breakpoint-s, 40em)`, + coralBreakpointM: `var(--coral-breakpoint-m, 48em)`, + coralBreakpointL: `var(--coral-breakpoint-l, 64em)`, + coralBreakpointXl: `var(--coral-breakpoint-xl, 80em)`, + coralBrandingLogo: `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=='))`, + coralTransitionInstant: `var(--coral-transition-instant, 100ms ease-out)`, + coralTransitionFast: `var(--coral-transition-fast, 250ms ease-in-out)`, + coralTransitionNormal: `var(--coral-transition-normal, 300ms ease-in-out)`, + coralTransitionSlow: `var(--coral-transition-slow, 400ms ease-in)`, + coralElevationLayerFlat: `var(--coral-elevation-layer-flat, 0)`, + coralElevationLayerStandardFront: `var(--coral-elevation-layer-standard-front, 4)`, + coralElevationLayerInteractiveFront: `var(--coral-elevation-layer-interactive-front, 8)`, + coralElevationLayerOverlay: `var(--coral-elevation-layer-overlay, 16)`, + coralAnimationHeartbeat: `var(--coral-animation-heartbeat, coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite)`, }; -export default tokens; \ No newline at end of file +export default tokens;