Updating dark theme background and overlay colors

src/colors/index.ts

@@ -198,8 +198,8 @@ const colors: Colors = {
   },
   dark: {
     background: {
-      default: '#141618',
-      alternative: '#24272A',
+      default: '#24272A',
+      alternative: '#141618',
     },
     text: {
       default: '#FFFFFF',
@@ -215,9 +215,9 @@ const colors: Colors = {
       muted: '#3B4046',
     },
     overlay: {
-      default: '#FFFFFF66',
-      inverse: '#24272A',
-      alternative: '#FFFFFFCC',
+      default: '#00000099',
+      inverse: '#FCFCFC',
+      alternative: '#000000CC',
     },
     primary: {
       default: '#1098FC',

src/css/design-tokens.css

@@ -126,18 +126,18 @@
  */
 
 [data-theme='dark'] {
-  --color-background-default: var(--brand-colors-grey-grey900);
-  --color-background-alternative: var(--brand-colors-grey-grey800);
+  --color-background-default: var(--brand-colors-grey-grey800);
+  --color-background-alternative: var(--brand-colors-grey-grey900);
   --color-text-default: var(--brand-colors-white-white000);
   --color-text-alternative: var(--brand-colors-grey-grey030);
   --color-text-muted: var(--brand-colors-grey-grey400);
   --color-icon-default: var(--brand-colors-grey-grey040);
   --color-icon-muted: var(--brand-colors-grey-grey400);
   --color-border-default: var(--brand-colors-grey-grey400);
   --color-border-muted: var(--brand-colors-grey-grey700);
-  --color-overlay-default: #ffffff99;
-  --color-overlay-alternative: #ffffffcc;
-  --color-overlay-inverse: var(--brand-colors-grey-grey800);
+  --color-overlay-default: #00000099;
+  --color-overlay-alternative: #000000cc;
+  --color-overlay-inverse: var(--brand-colors-white-white010);
   --color-primary-default: var(--brand-colors-blue-blue400);
   --color-primary-alternative: var(--brand-colors-blue-blue300);
   --color-primary-muted: #1098fc26;

src/figma/tokens.json

@@ -564,13 +564,13 @@
     "colors": {
       "background": {
         "default": {
-          "value": "#141618",
-          "description": "(grey900: #141618) text.alternative should be used for all general text used on background.default or background.alternative that takes less priority in the information hierarchy than text.default",
+          "value": "#24272A",
+          "description": "(grey900: #24272A) background.default should be used as the default background color for any neutral type components.",
           "type": "color"
         },
         "alternative": {
-          "value": "#24272A",
-          "description": "(grey800: #24272A) text.default should be used for all general text used on background.default or background.alternative that takes main priority in the information hierarchy.",
+          "value": "#141618",
+          "description": "(grey800: #141618) background.alternative should be used as an alternative background for any neutral type components that require some slight contrast to background.default.",
           "type": "color"
         }
       },
@@ -617,18 +617,18 @@
       },
       "overlay": {
         "default": {
-          "value": "#FFFFFF99",
-          "description": "(white000: #FFFFFF 60% opacity) overlay.default should be used for all general overlay backgrounds",
+          "value": "#00000099",
+          "description": "(black000: #000000 60% opacity) overlay.default should be used for all general overlay backgrounds",
           "type": "color"
         },
         "alternative": {
-          "value": "#FFFFFFCC",
-          "description": "(white000: #FFFFFF 80% opacity) overlay.alternative should be used for all general overlay backgrounds that need a higher contrast than overlay.default",
+          "value": "#000000CC",
+          "description": "(black000: #000000 80% opacity) overlay.alternative should be used for all general overlay backgrounds that need a higher contrast than overlay.default",
           "type": "color"
         },
         "inverse": {
-          "value": "#24272A",
-          "description": "(grey800: #24272A) overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons",
+          "value": "#FCFCFC",
+          "description": "(white010: #FCFCFC) overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons",
           "type": "color"
         }
       },