fix(ARCH-720): Design Token - add shadow info tokens

Talend · Aug 1, 2023 · 5256cfd · 5256cfd
1 parent fc50964
commit 5256cfd
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 0 deletions.
diff --git a/.changeset/loud-eagles-mix.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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))`,