Skip to content

Commit

Permalink
Dark Tokens & Styles (Exporter for Talend) (#4837)
Browse files Browse the repository at this point in the history
  • Loading branch information
@supernovaio
supernovaio[bot] authored Aug 4, 2023
1 parent 6391fc8 commit 3cfe509
Show file tree
Hide file tree
Showing 9 changed files with 1,084 additions and 859 deletions.
5 changes: 5 additions & 0 deletions .changeset/friendly-meals-beam.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/design-tokens': minor
---

feat: update design tokens to add shadow info tokens
29 changes: 15 additions & 14 deletions packages/design-tokens/src/_tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,20 +301,21 @@ $coral-elevation-shadow-neutral-inverted-l: #{var(--coral-elevation-shadow-neutr
$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-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-elevation-shadow-info: #{var(--coral-elevation-shadow-info, 0 0.1rem 0.1rem 0 hsla(204, 95%, 31%, 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-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 Down
30 changes: 16 additions & 14 deletions packages/design-tokens/src/dark/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// stylelint-disable scss/operator-no-unspaced
[data-theme='dark'] {
--coral-color-neutral-text: white;
--coral-color-neutral-text-inverted: hsla(210, 7%, 79%, 1);
Expand Down Expand Up @@ -300,20 +301,21 @@
--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-link-s: 600 1.2rem / 140% 'Source Sans Pro';
--coral-link-s-underlined: 600 1.2rem / 140% 'Source Sans Pro';
--coral-elevation-shadow-info: 0 0.1rem 0.1rem 0 hsla(198, 72%, 75%, 0.3);
--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
29 changes: 15 additions & 14 deletions packages/design-tokens/src/dark/_tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,20 +301,21 @@ $coral-elevation-shadow-neutral-inverted-m: #{var(--coral-elevation-shadow-neutr
$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-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-elevation-shadow-info: #{var(--coral-elevation-shadow-info, 0 0.1rem 0.1rem 0 hsla(198, 72%, 75%, 0.3))};
$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)};
Expand Down
Loading

0 comments on commit 3cfe509

Please sign in to comment.