From 5256cfded54d53ad08126906dd189cf0a4a22bd2 Mon Sep 17 00:00:00 2001 From: Geoffroy Baccarini Date: Tue, 1 Aug 2023 17:57:04 +0200 Subject: [PATCH] fix(ARCH-720): Design Token - add shadow info tokens --- .changeset/loud-eagles-mix.md | 5 +++++ packages/design-tokens/package.json | 1 + packages/design-tokens/src/_tokens.scss | 1 + packages/design-tokens/src/dark/_index.scss | 1 + packages/design-tokens/src/dark/_tokens.scss | 1 + packages/design-tokens/src/dark/dictionary.ts | 7 +++++++ packages/design-tokens/src/dark/index.ts | 1 + packages/design-tokens/src/light/_index.scss | 1 + packages/design-tokens/src/light/dictionary.ts | 7 +++++++ packages/design-tokens/src/light/index.ts | 1 + 10 files changed, 26 insertions(+) create mode 100644 .changeset/loud-eagles-mix.md diff --git a/.changeset/loud-eagles-mix.md b/.changeset/loud-eagles-mix.md new file mode 100644 index 00000000000..a3269e72e35 --- /dev/null +++ b/.changeset/loud-eagles-mix.md @@ -0,0 +1,5 @@ +--- +'@talend/design-tokens': patch +--- + +Design Tokens : Add shadow info tokens similar to accent shadow diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 8bf7812460d..f9fa57fc6a3 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -10,6 +10,7 @@ "build:umd:dev": "talend-scripts build --umd --dev", "build:umd:prod": "talend-scripts build --umd", "build:lib": "talend-scripts build && yarn build:umd:dev && yarn build:umd:prod && yarn test:umd", + "watch": "talend-scripts build --watch", "test": "echo no test for @talend/design-tokens", "test:cov": "echo no test for @talend/design-tokens", "test:umd": "jest scripts/umd.test.js", diff --git a/packages/design-tokens/src/_tokens.scss b/packages/design-tokens/src/_tokens.scss index 5b71572683c..b895ce68a82 100644 --- a/packages/design-tokens/src/_tokens.scss +++ b/packages/design-tokens/src/_tokens.scss @@ -292,6 +292,7 @@ $coral-sizing-xxxl: #{var(--coral-sizing-xxxl, 22rem)}; $coral-sizing-maximal: #{var(--coral-sizing-maximal, 32rem)}; $coral-elevation-shadow-neutral-m: #{var(--coral-elevation-shadow-neutral-m, 0 0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3))}; $coral-elevation-shadow-accent: #{var(--coral-elevation-shadow-accent, 0 0.1rem 0.1rem 0 hsla(204, 95%, 31%, 0.3))}; +$coral-elevation-shadow-info: #{var(--coral-elevation-shadow-info, 0 0.1rem 0.1rem 0 hsla(204, 95%, 31%, 0.3))}; $coral-elevation-shadow-success: #{var(--coral-elevation-shadow-success, 0 0.1rem 0.1rem 0 hsla(111, 49%, 34%, 0.3))}; $coral-elevation-shadow-danger: #{var(--coral-elevation-shadow-danger, 0 0.1rem 0.1rem 0 hsla(359, 51%, 53%, 0.3))}; $coral-elevation-shadow-warning: #{var(--coral-elevation-shadow-warning, 0 0.1rem 0.1rem 0 hsla(22, 93%, 41%, 0.3))}; diff --git a/packages/design-tokens/src/dark/_index.scss b/packages/design-tokens/src/dark/_index.scss index df7af2bfbbf..d3ddd398046 100644 --- a/packages/design-tokens/src/dark/_index.scss +++ b/packages/design-tokens/src/dark/_index.scss @@ -292,6 +292,7 @@ --coral-elevation-shadow-neutral-m: 0 0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.5); --coral-elevation-shadow-neutral-l: 0 0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.5); --coral-elevation-shadow-accent: 0 0.1rem 0.1rem 0 hsla(198, 72%, 75%, 0.3); + --coral-elevation-shadow-info: 0 0.1rem 0.1rem 0 hsla(198, 72%, 75%, 0.3); --coral-elevation-shadow-success: 0 0.1rem 0.1rem 0 hsla(110, 50%, 70%, 0.3); --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); diff --git a/packages/design-tokens/src/dark/_tokens.scss b/packages/design-tokens/src/dark/_tokens.scss index 0ebacaa7605..209c35d9066 100644 --- a/packages/design-tokens/src/dark/_tokens.scss +++ b/packages/design-tokens/src/dark/_tokens.scss @@ -293,6 +293,7 @@ $coral-sizing-maximal: #{var(--coral-sizing-maximal, 32rem)}; $coral-elevation-shadow-neutral-m: #{var(--coral-elevation-shadow-neutral-m, 0 0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.5))}; $coral-elevation-shadow-neutral-l: #{var(--coral-elevation-shadow-neutral-l, 0 0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.5))}; $coral-elevation-shadow-accent: #{var(--coral-elevation-shadow-accent, 0 0.1rem 0.1rem 0 hsla(198, 72%, 75%, 0.3))}; +$coral-elevation-shadow-info: #{var(--coral-elevation-shadow-info, 0 0.1rem 0.1rem 0 hsla(198, 72%, 75%, 0.3))}; $coral-elevation-shadow-success: #{var(--coral-elevation-shadow-success, 0 0.1rem 0.1rem 0 hsla(110, 50%, 70%, 0.3))}; $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))}; diff --git a/packages/design-tokens/src/dark/dictionary.ts b/packages/design-tokens/src/dark/dictionary.ts index 1b38dd76311..a731f5752f2 100644 --- a/packages/design-tokens/src/dark/dictionary.ts +++ b/packages/design-tokens/src/dark/dictionary.ts @@ -2587,6 +2587,13 @@ const dictionary = [ value: '0rem 0.4rem 0.8rem 0rem hsla(0, 0%, 0%, 0.5)', id: 'S:8bf21eea402fda80510e8657d5d8db538640bd02,:shadow:0', }, + { + name: 'coralElevationShadowInfo', + type: 'shadow', + description: '', + value: '0rem 0.1rem 0.1rem 0rem hsla(198, 72%, 75%, 0.3)', + id: 'S:fe0699876a0912d91d178c69d81969b011a5eb59,:shadow:0', + }, { name: 'coralElevationShadowAccent', type: 'shadow', diff --git a/packages/design-tokens/src/dark/index.ts b/packages/design-tokens/src/dark/index.ts index e47579f7803..954621c7d52 100644 --- a/packages/design-tokens/src/dark/index.ts +++ b/packages/design-tokens/src/dark/index.ts @@ -292,6 +292,7 @@ const tokens = { 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))`, + coralElevationShadowInfo: `var(--coral-elevation-shadow-info, 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))`, diff --git a/packages/design-tokens/src/light/_index.scss b/packages/design-tokens/src/light/_index.scss index e77e8e0a4d1..e9c6cb53456 100644 --- a/packages/design-tokens/src/light/_index.scss +++ b/packages/design-tokens/src/light/_index.scss @@ -291,6 +291,7 @@ --coral-sizing-maximal: 32rem; --coral-elevation-shadow-neutral-m: 0 0.2rem 0.6rem 0 hsla(0, 0%, 0%, 0.3); --coral-elevation-shadow-accent: 0 0.1rem 0.1rem 0 hsla(204, 95%, 31%, 0.3); + --coral-elevation-shadow-info: 0 0.1rem 0.1rem 0 hsla(204, 95%, 31%, 0.3); --coral-elevation-shadow-success: 0 0.1rem 0.1rem 0 hsla(111, 49%, 34%, 0.3); --coral-elevation-shadow-danger: 0 0.1rem 0.1rem 0 hsla(359, 51%, 53%, 0.3); --coral-elevation-shadow-warning: 0 0.1rem 0.1rem 0 hsla(22, 93%, 41%, 0.3); diff --git a/packages/design-tokens/src/light/dictionary.ts b/packages/design-tokens/src/light/dictionary.ts index 4aa0d04d243..b7fef2b4603 100644 --- a/packages/design-tokens/src/light/dictionary.ts +++ b/packages/design-tokens/src/light/dictionary.ts @@ -2621,6 +2621,13 @@ const dictionary = [ value: '0rem 0.2rem 0.6rem 0rem hsla(0, 0%, 0%, 0.3)', id: 'S:34a756f910ffc665554a228b44d5eec1e9c463cb,:shadow:0', }, + { + name: 'coralElevationShadowInfo', + type: 'shadow', + description: 'Shadow with an info tint. Use for subtle highlights. Ex: InlineMessage', + value: '0rem 0.1rem 0.1rem 0rem hsla(204, 95%, 31%, 0.3)', + id: 'S:6361d40b509d112c733483b262d9b4929ad0e1a8,:shadow:0', + }, { name: 'coralElevationShadowAccent', type: 'shadow', diff --git a/packages/design-tokens/src/light/index.ts b/packages/design-tokens/src/light/index.ts index 81d1b8e5999..0d65103c9b4 100644 --- a/packages/design-tokens/src/light/index.ts +++ b/packages/design-tokens/src/light/index.ts @@ -291,6 +291,7 @@ const tokens = { 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))`, + coralElevationShadowInfo: `var(--coral-elevation-shadow-info, 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))`,