feat(primary-surface-color): new color token (#2300)

mondaycom · Aug 6, 2024 · 780fdf7 · 780fdf7
1 parent a64d7f9
commit 780fdf7
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 0 deletions.
diff --git a/...olors/semantic-colors/semantic-colors.jsx → ...olors/semantic-colors/semantic-colors.tsx b/...olors/semantic-colors/semantic-colors.jsx → ...olors/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",