Add fixed-light-color and fixed-dark-color tokens

src/config/maps/themes/basic/keys/_keys.scss

@@ -18,6 +18,8 @@ $theme-basic-keys: (
   placeholder-color: $placeholder-color,
   icon-color: $icon-color,
   link-color: $link-color,
+  fixed-light-color: $fixed-light-color,
+  fixed-dark-color: $fixed-dark-color,
   primary-background-color: $primary-background-color,
   primary-background-hover-color: $primary-background-hover-color,
   secondary-background-color: $secondary-background-color,

src/config/maps/themes/black/keys/_black-theme-keys.scss

@@ -17,6 +17,8 @@ $theme-black-keys: (
   placeholder-color: $theme-black-placeholder-color,
   icon-color: $theme-black-icon-color,
   link-color: $theme-black-link-color,
+  fixed-light-color: $theme-black-fixed-light-color,
+  fixed-dark-color: $theme-black-fixed-dark-color,
   primary-background-color: $theme-black-primary-background-color,
   primary-background-hover-color: $theme-black-primary-background-hover-color,
   secondary-background-color: $theme-black-secondary-background-color,

src/config/maps/themes/dark/keys/_dark-theme-keys.scss

@@ -19,6 +19,8 @@ $theme-dark-keys: (
   placeholder-color: $theme-dark-placeholder-color,
   icon-color: $theme-dark-icon-color,
   link-color: $theme-dark-link-color,
+  fixed-light-color: $theme-dark-fixed-light-color,
+  fixed-dark-color: $theme-dark-fixed-dark-color,
   primary-background-color: $theme-dark-primary-background-color,
   primary-background-hover-color: $theme-dark-primary-background-hover-color,
   secondary-background-color: $theme-dark-secondary-background-color,

src/config/maps/themes/hacker/keys/_hacker-theme-keys.scss

@@ -17,6 +17,8 @@ $theme-hacker-keys: (
   placeholder-color: $theme-hacker-placeholder-color,
   icon-color: $theme-hacker-icon-color,
   link-color: $theme-hacker-link-color,
+  fixed-light-color: $theme-hacker-fixed-light-color,
+  fixed-dark-color: $theme-hacker-fixed-dark-color,
   primary-background-color: $theme-hacker-primary-background-color,
   primary-background-hover-color: $theme-hacker-primary-background-hover-color,
   secondary-background-color: $theme-hacker-secondary-background-color,

src/config/tokens/themes/basic/keys/_keys.scss

@@ -9,6 +9,10 @@
 // - When several key has the same value and have a connection
 // - We either use $token or var(--token) depending on connection logic and value type.
 
+// Fixed colors
+$fixed-light-color: $color-snow_white;
+$fixed-dark-color: $color-mud_black;
+
 // Text colors
 $primary-color: $color-basic_blue;
 $primary-hover-color: $color-dark_blue;

src/config/tokens/themes/black/keys/_black-theme-keys.scss

@@ -8,6 +8,10 @@
 // - When several key has the same value and have a connection
 // - We either use $theme-dark token or var(--token) depending on connection logic and value type.
 
+// Fixed colors
+$theme-black-fixed-light-color: $color-snow_white;
+$theme-black-fixed-dark-color: $color-vanta;
+
 // Text colors
 $theme-black-primary-color: $primary-color;
 $theme-black-primary-hover-color: $primary-hover-color;

src/config/tokens/themes/dark/keys/_dark-theme-keys.scss

@@ -8,6 +8,10 @@
 // - When several key has the same value and have a connection
 // - We either use $theme-dark token or var(--token) depending on connection logic and value type.
 
+// Fixed colors
+$theme-dark-fixed-light-color: $color-snow_white;
+$theme-dark-fixed-dark-color: $color-mud_black;
+
 // Text colors
 $theme-dark-primary-color: $primary-color;
 $theme-dark-primary-hover-color: $primary-hover-color;

src/config/tokens/themes/hacker/keys/_hacker-theme-keys.scss

@@ -10,6 +10,10 @@
 
 @use "sass:color";
 
+// Fixed colors
+$theme-hacker-fixed-light-color: $color-snow_white;
+$theme-hacker-fixed-dark-color: $color-mud_black;
+
 // Text colors
 $theme-hacker-primary-color: $color-pink-plastic;
 $theme-hacker-primary-hover-color: #{color.adjust($color-pink-plastic, $lightness: -6%)};

src/files/colors.json

@@ -34,6 +34,8 @@
     "placeholder-color": "#676879",
     "icon-color": "#676879",
     "link-color": "#1f76c2",
+    "fixed-light-color": "#ffffff",
+    "fixed-dark-color": "#323338",
     "primary-background-color": "#ffffff",
     "primary-background-hover-color": "#dcdfec",
     "secondary-background-color": "#ffffff",
@@ -191,6 +193,8 @@
     "placeholder-color": "#c3c6d4",
     "icon-color": "#c3c6d4",
     "link-color": "#69a7ef",
+    "fixed-light-color": "#ffffff",
+    "fixed-dark-color": "#323338",
     "primary-background-color": "#181b34",
     "primary-background-hover-color": "#4b4e69",
     "secondary-background-color": "#30324e",
@@ -348,6 +352,8 @@
     "placeholder-color": "#aaaaaa",
     "icon-color": "#aaaaaa",
     "link-color": "#69a7ef",
+    "fixed-light-color": "#ffffff",
+    "fixed-dark-color": "#111111",
     "primary-background-color": "#111111",
     "primary-background-hover-color": "#636363",
     "secondary-background-color": "#2c2c2c",
@@ -501,6 +507,8 @@
     "primary-selected-on-secondary-color": "#9f4077",
     "primary-text-color": "#d5d8df",
     "primary-text-on-secondary-color": "#d5d8df",
+    "fixed-light-color": "#ffffff",
+    "fixed-dark-color": "#323338",
     "primary-background-color": "#282a36",
     "primary-background-color-rgb": "#282a36",
     "primary-background-hover-color": "#4b4e69",