From 780fdf7be027bfba3aa4a643969e024263e80ec6 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 6 Aug 2024 15:07:19 +0300 Subject: [PATCH] feat(primary-surface-color): new color token (#2300) --- .../{semantic-colors.jsx => semantic-colors.tsx} | 1 + packages/core/src/utils/colors-vars-map.ts | 4 ++++ packages/style/src/config/maps/themes/basic/keys/_keys.scss | 1 + .../src/config/maps/themes/black/keys/_black-theme-keys.scss | 1 + .../src/config/maps/themes/dark/keys/_dark-theme-keys.scss | 1 + .../config/maps/themes/hacker/keys/_hacker-theme-keys.scss | 1 + packages/style/src/config/tokens/themes/basic/keys/_keys.scss | 1 + .../config/tokens/themes/black/keys/_black-theme-keys.scss | 1 + .../src/config/tokens/themes/dark/keys/_dark-theme-keys.scss | 1 + .../config/tokens/themes/hacker/keys/_hacker-theme-keys.scss | 1 + packages/style/src/files/colors.json | 4 ++++ 11 files changed, 17 insertions(+) rename packages/core/src/storybook/stand-alone-documentaion/colors/semantic-colors/{semantic-colors.jsx => semantic-colors.tsx} (96%) diff --git a/packages/core/src/storybook/stand-alone-documentaion/colors/semantic-colors/semantic-colors.jsx b/packages/core/src/storybook/stand-alone-documentaion/colors/semantic-colors/semantic-colors.tsx similarity index 96% rename from packages/core/src/storybook/stand-alone-documentaion/colors/semantic-colors/semantic-colors.jsx rename to packages/core/src/storybook/stand-alone-documentaion/colors/semantic-colors/semantic-colors.tsx index e8b5f0dae8..32e64cd19d 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/colors/semantic-colors/semantic-colors.jsx +++ b/packages/core/src/storybook/stand-alone-documentaion/colors/semantic-colors/semantic-colors.tsx @@ -7,6 +7,7 @@ const colorKeys = [ "primary-selected-color", "primary-selected-hover-color", "primary-highlighted-color", + "primary-surface-color", "positive-color", "positive-color-hover", "positive-color-selected", diff --git a/packages/core/src/utils/colors-vars-map.ts b/packages/core/src/utils/colors-vars-map.ts index a7e3b02545..8b2199ff38 100644 --- a/packages/core/src/utils/colors-vars-map.ts +++ b/packages/core/src/utils/colors-vars-map.ts @@ -18,6 +18,10 @@ export const colorsMap = [ color: "--primary-highlighted-color", description: "Use this to indicate highlighted components of primary items" }, + { + color: "--primary-surface-color", + description: "Use this as the surface of the main layout appearance" + }, { color: "--primary-selected-on-secondary-color", description: "Use to indicate selected state of primary items on secondary background color" diff --git a/packages/style/src/config/maps/themes/basic/keys/_keys.scss b/packages/style/src/config/maps/themes/basic/keys/_keys.scss index 3a41757d2c..cc1849d6b2 100644 --- a/packages/style/src/config/maps/themes/basic/keys/_keys.scss +++ b/packages/style/src/config/maps/themes/basic/keys/_keys.scss @@ -10,6 +10,7 @@ $theme-basic-keys: ( primary-selected-color: $primary-selected-color, primary-selected-hover-color: $primary-selected-hover-color, primary-highlighted-color: $primary-highlighted-color, + primary-surface-color: $primary-surface-color, primary-text-color: $primary-text-color, text-color-on-primary: $text-color-on-primary, text-color-on-inverted: $text-color-on-inverted, diff --git a/packages/style/src/config/maps/themes/black/keys/_black-theme-keys.scss b/packages/style/src/config/maps/themes/black/keys/_black-theme-keys.scss index 3dc4c030d7..a3cd6021ca 100644 --- a/packages/style/src/config/maps/themes/black/keys/_black-theme-keys.scss +++ b/packages/style/src/config/maps/themes/black/keys/_black-theme-keys.scss @@ -9,6 +9,7 @@ $theme-black-keys: ( primary-selected-color: $theme-black-primary-selected-color, primary-selected-hover-color: $theme-black-primary-selected-hover-color, primary-highlighted-color: $theme-black-primary-highlighted-color, + primary-surface-color: $theme-black-primary-surface-color, primary-text-color: $theme-black-primary-text-color, text-color-on-primary: $theme-black-text-color-on-primary, text-color-on-inverted: $theme-black-text-color-on-inverted, diff --git a/packages/style/src/config/maps/themes/dark/keys/_dark-theme-keys.scss b/packages/style/src/config/maps/themes/dark/keys/_dark-theme-keys.scss index 1ed25d5997..5f035dfd65 100644 --- a/packages/style/src/config/maps/themes/dark/keys/_dark-theme-keys.scss +++ b/packages/style/src/config/maps/themes/dark/keys/_dark-theme-keys.scss @@ -11,6 +11,7 @@ $theme-dark-keys: ( primary-selected-color: $theme-dark-primary-selected-color, primary-selected-hover-color: $theme-dark-primary-selected-hover-color, primary-highlighted-color: $theme-dark-primary-highlighted-color, + primary-surface-color: $theme-dark-primary-surface-color, primary-text-color: $theme-dark-primary-text-color, text-color-on-primary: $theme-dark-text-color-on-primary, text-color-on-inverted: $theme-dark-text-color-on-inverted, diff --git a/packages/style/src/config/maps/themes/hacker/keys/_hacker-theme-keys.scss b/packages/style/src/config/maps/themes/hacker/keys/_hacker-theme-keys.scss index a12549147d..69b363db38 100644 --- a/packages/style/src/config/maps/themes/hacker/keys/_hacker-theme-keys.scss +++ b/packages/style/src/config/maps/themes/hacker/keys/_hacker-theme-keys.scss @@ -10,6 +10,7 @@ $theme-hacker-keys: ( primary-selected-color: $theme-hacker-primary-selected-color, primary-selected-hover-color: $theme-hacker-primary-selected-hover-color, primary-highlighted-color: $theme-hacker-primary-highlighted-color, + primary-surface-color: $theme-hacker-primary-surface-color, primary-text-color: $theme-hacker-primary-text-color, text-color-on-inverted: $theme-hacker-text-color-on-inverted, secondary-text-color: $theme-hacker-secondary-text-color, diff --git a/packages/style/src/config/tokens/themes/basic/keys/_keys.scss b/packages/style/src/config/tokens/themes/basic/keys/_keys.scss index c9f9c6b1a3..f8df5cdbee 100644 --- a/packages/style/src/config/tokens/themes/basic/keys/_keys.scss +++ b/packages/style/src/config/tokens/themes/basic/keys/_keys.scss @@ -19,6 +19,7 @@ $primary-hover-color: $color-dark_blue; $primary-selected-color: $color-highlight_blue; $primary-selected-hover-color: $color-sky_blue; $primary-highlighted-color: $color-alice_blue; +$primary-surface-color: #eceff8; $primary-text-color: $color-mud_black; $text-color-on-primary: $color-snow_white; diff --git a/packages/style/src/config/tokens/themes/black/keys/_black-theme-keys.scss b/packages/style/src/config/tokens/themes/black/keys/_black-theme-keys.scss index 1d61a77acd..d2d8a5964a 100644 --- a/packages/style/src/config/tokens/themes/black/keys/_black-theme-keys.scss +++ b/packages/style/src/config/tokens/themes/black/keys/_black-theme-keys.scss @@ -18,6 +18,7 @@ $theme-black-primary-hover-color: $primary-hover-color; $theme-black-primary-selected-color: $color-ocean_blue; $theme-black-primary-selected-hover-color: $color-deep_blue; $theme-black-primary-highlighted-color: $color-downriver; +$theme-black-primary-surface-color: $color-vanta; $theme-black-primary-text-color: $color-smog; $theme-black-text-color-on-primary: $text-color-on-primary; diff --git a/packages/style/src/config/tokens/themes/dark/keys/_dark-theme-keys.scss b/packages/style/src/config/tokens/themes/dark/keys/_dark-theme-keys.scss index b08da616cc..461b728c00 100644 --- a/packages/style/src/config/tokens/themes/dark/keys/_dark-theme-keys.scss +++ b/packages/style/src/config/tokens/themes/dark/keys/_dark-theme-keys.scss @@ -18,6 +18,7 @@ $theme-dark-primary-hover-color: $primary-hover-color; $theme-dark-primary-selected-color: $color-ocean_blue; $theme-dark-primary-selected-hover-color: $color-deep_blue; $theme-dark-primary-highlighted-color: $color-tyrian_blue; +$theme-dark-primary-surface-color: $color-midnight; $theme-dark-primary-text-color: $color-snow; $theme-dark-text-color-on-primary: $text-color-on-primary; // todo: fix, value from basic theme diff --git a/packages/style/src/config/tokens/themes/hacker/keys/_hacker-theme-keys.scss b/packages/style/src/config/tokens/themes/hacker/keys/_hacker-theme-keys.scss index 6eb2999891..46b3d8d973 100644 --- a/packages/style/src/config/tokens/themes/hacker/keys/_hacker-theme-keys.scss +++ b/packages/style/src/config/tokens/themes/hacker/keys/_hacker-theme-keys.scss @@ -20,6 +20,7 @@ $theme-hacker-primary-hover-color: #{color.adjust($color-pink-plastic, $lightnes $theme-hacker-primary-selected-color: $color-viola-vivid; $theme-hacker-primary-selected-hover-color: $color-deep_blue; $theme-hacker-primary-highlighted-color: $color-downriver; +$theme-hacker-primary-surface-color: $color-vanta; $theme-hacker-primary-text-color: $color-snow; $theme-hacker-text-color-on-inverted: $color-mud_black; // todo: fix, value from basic theme diff --git a/packages/style/src/files/colors.json b/packages/style/src/files/colors.json index ce56e41bcc..4a9a51b622 100644 --- a/packages/style/src/files/colors.json +++ b/packages/style/src/files/colors.json @@ -26,6 +26,7 @@ "primary-selected-color": "#cce5ff", "primary-selected-hover-color": "#aed4fc", "primary-highlighted-color": "#f0f7ff", + "primary-surface-color": "#eceff8", "primary-text-color": "#323338", "secondary-text-color": "#676879", "text-color-on-primary": "#ffffff", @@ -189,6 +190,7 @@ "primary-selected-color": "#133774", "primary-selected-hover-color": "#0d2e65", "primary-highlighted-color": "#0d2753", + "primary-surface-color": "#181b34", "primary-text-color": "#d5d8df", "text-color-on-primary": "#ffffff", "text-color-on-inverted": "#323338", @@ -352,6 +354,7 @@ "primary-selected-color": "#133774", "primary-selected-hover-color": "#0d2e65", "primary-highlighted-color": "#0b2858", + "primary-surface-color": "#111111", "primary-text-color": "#eeeeee", "text-color-on-primary": "#ffffff", "text-color-on-inverted": "#111111", @@ -517,6 +520,7 @@ "primary-selected-color-rgb": "#9f4077", "primary-selected-hover-color": "#0d2e65", "primary-highlighted-color": "#0b2858", + "primary-surface-color": "#111111", "primary-selected-on-secondary-color": "#9f4077", "primary-text-color": "#d5d8df", "primary-text-on-secondary-color": "#d5d8df",