Skip to content

Commit

Permalink
Merge branch 'master' of github.com:Talend/ui into jmfrancois/chore/e…
Browse files Browse the repository at this point in the history 
…levation-tokens
  • Loading branch information
@inna-i
inna-i committed Jul 31, 2023
2 parents aefa554 + b36165a commit 8b2301a
Show file tree
Hide file tree
Showing 11 changed files with 7,023 additions and 5,946 deletions.
5 changes: 5 additions & 0 deletions .changeset/old-onions-remain.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/design-tokens': minor
---

feat: add brand & info tokens
3 changes: 2 additions & 1 deletion packages/design-tokens/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"root": true,
"extends": ["@talend"],
"rules": {
"react/display-name": "warn"
"react/display-name": "warn",
"@typescript-eslint/quotes": "off"
}
}
2 changes: 1 addition & 1 deletion packages/design-tokens/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
84 changes: 70 additions & 14 deletions packages/design-tokens/src/_tokens.scss
View file
Original file line number Diff line number Diff line change
@@ -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))};
Expand Down Expand Up @@ -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)};
Expand All @@ -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)};
Expand All @@ -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)};
Expand Down
90 changes: 75 additions & 15 deletions packages/design-tokens/src/dark/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}
Loading

0 comments on commit 8b2301a

Please sign in to comment.