@primer/primitives 8.2.4-rc.fba4a4ab → 9.0.0-rc.02c27a21

package/dist/figma/themes/light-tritanopia.json

@@ -2172,6 +2172,22 @@
     "group": "semantic",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "fgColor/onInverse",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/onInverse",
+    "reference": "base/color/light/base/color/white",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "fgColor/onEmphasis",
     "value": {
@@ -6805,7 +6821,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/gray/color",
+    "name": "data/gray/color/emphasis",
     "value": {
       "r": 0.5019607843137255,
       "g": 0.5607843137254902,
@@ -6813,7 +6829,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/gray/color",
+    "refId": "mode/data/gray/color/emphasis",
     "reference": "base/color/light/base/display/color/gray/4",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -6837,7 +6853,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/red/color",
+    "name": "data/red/color/emphasis",
     "value": {
       "r": 0.8745098039215686,
       "g": 0.047058823529411764,
@@ -6845,7 +6861,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/red/color",
+    "refId": "mode/data/red/color/emphasis",
     "reference": "base/color/light/base/display/color/red/5",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -6869,7 +6885,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/pink/color",
+    "name": "data/pink/color/emphasis",
     "value": {
       "r": 0.807843137254902,
       "g": 0.17254901960784313,
@@ -6877,7 +6893,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/pink/color",
+    "refId": "mode/data/pink/color/emphasis",
     "reference": "base/color/light/base/display/color/pink/5",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -6901,7 +6917,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/purple/color",
+    "name": "data/purple/color/emphasis",
     "value": {
       "r": 0.5372549019607843,
       "g": 0.2980392156862745,
@@ -6909,7 +6925,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/purple/color",
+    "refId": "mode/data/purple/color/emphasis",
     "reference": "base/color/light/base/display/color/purple/5",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -6933,7 +6949,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/teal/color",
+    "name": "data/teal/color/emphasis",
     "value": {
       "r": 0.09019607843137255,
       "g": 0.6078431372549019,
@@ -6941,7 +6957,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/teal/color",
+    "refId": "mode/data/teal/color/emphasis",
     "reference": "base/color/light/base/display/color/teal/4",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -6965,7 +6981,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/green/color",
+    "name": "data/green/color/emphasis",
     "value": {
       "r": 0.18823529411764706,
       "g": 0.6313725490196078,
@@ -6973,7 +6989,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/green/color",
+    "refId": "mode/data/green/color/emphasis",
     "reference": "base/color/light/base/display/color/green/4",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -6997,7 +7013,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/yellow/color",
+    "name": "data/yellow/color/emphasis",
     "value": {
       "r": 0.7215686274509804,
       "g": 0.5294117647058824,
@@ -7005,7 +7021,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/yellow/color",
+    "refId": "mode/data/yellow/color/emphasis",
     "reference": "base/color/light/base/display/color/yellow/4",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -7029,7 +7045,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/orange/color",
+    "name": "data/orange/color/emphasis",
     "value": {
       "r": 0.9215686274509803,
       "g": 0.403921568627451,
@@ -7037,7 +7053,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/orange/color",
+    "refId": "mode/data/orange/color/emphasis",
     "reference": "base/color/light/base/display/color/orange/4",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -7061,7 +7077,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/auburn/color",
+    "name": "data/auburn/color/emphasis",
     "value": {
       "r": 0.615686274509804,
       "g": 0.3803921568627451,
@@ -7069,7 +7085,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/auburn/color",
+    "refId": "mode/data/auburn/color/emphasis",
     "reference": "base/color/light/base/display/color/auburn/5",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -7093,7 +7109,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/blue/color",
+    "name": "data/blue/color/emphasis",
     "value": {
       "r": 0,
       "g": 0.43137254901960786,
@@ -7101,7 +7117,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/blue/color",
+    "refId": "mode/data/blue/color/emphasis",
     "reference": "base/color/light/base/display/color/blue/5",
     "collection": "mode",
     "mode": "light tritanopia",
@@ -7631,6 +7647,38 @@
       "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
     }
   },
+  {
+    "name": "tooltip/fgColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/tooltip/fgColor",
+    "reference": "mode/fgColor/onEmphasis",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "component",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "tooltip/bgColor",
+    "value": {
+      "r": 0.1411764705882353,
+      "g": 0.1607843137254902,
+      "b": 0.1843137254901961,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/tooltip/bgColor",
+    "reference": "mode/bgColor/emphasis",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "card/bgColor",
     "value": {

package/dist/figma/themes/light.json

@@ -2020,6 +2020,22 @@
     "group": "semantic",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "fgColor/onInverse",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/fgColor/onInverse",
+    "reference": "base/color/light/base/color/white",
+    "collection": "mode",
+    "mode": "light",
+    "group": "semantic",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "fgColor/onEmphasis",
     "value": {
@@ -6653,7 +6669,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/gray/color",
+    "name": "data/gray/color/emphasis",
     "value": {
       "r": 0.5019607843137255,
       "g": 0.5607843137254902,
@@ -6661,7 +6677,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/gray/color",
+    "refId": "mode/data/gray/color/emphasis",
     "reference": "base/color/light/base/display/color/gray/4",
     "collection": "mode",
     "mode": "light",
@@ -6685,7 +6701,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/red/color",
+    "name": "data/red/color/emphasis",
     "value": {
       "r": 0.8745098039215686,
       "g": 0.047058823529411764,
@@ -6693,7 +6709,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/red/color",
+    "refId": "mode/data/red/color/emphasis",
     "reference": "base/color/light/base/display/color/red/5",
     "collection": "mode",
     "mode": "light",
@@ -6717,7 +6733,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/pink/color",
+    "name": "data/pink/color/emphasis",
     "value": {
       "r": 0.807843137254902,
       "g": 0.17254901960784313,
@@ -6725,7 +6741,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/pink/color",
+    "refId": "mode/data/pink/color/emphasis",
     "reference": "base/color/light/base/display/color/pink/5",
     "collection": "mode",
     "mode": "light",
@@ -6749,7 +6765,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/purple/color",
+    "name": "data/purple/color/emphasis",
     "value": {
       "r": 0.5372549019607843,
       "g": 0.2980392156862745,
@@ -6757,7 +6773,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/purple/color",
+    "refId": "mode/data/purple/color/emphasis",
     "reference": "base/color/light/base/display/color/purple/5",
     "collection": "mode",
     "mode": "light",
@@ -6781,7 +6797,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/teal/color",
+    "name": "data/teal/color/emphasis",
     "value": {
       "r": 0.09019607843137255,
       "g": 0.6078431372549019,
@@ -6789,7 +6805,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/teal/color",
+    "refId": "mode/data/teal/color/emphasis",
     "reference": "base/color/light/base/display/color/teal/4",
     "collection": "mode",
     "mode": "light",
@@ -6813,7 +6829,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/green/color",
+    "name": "data/green/color/emphasis",
     "value": {
       "r": 0.18823529411764706,
       "g": 0.6313725490196078,
@@ -6821,7 +6837,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/green/color",
+    "refId": "mode/data/green/color/emphasis",
     "reference": "base/color/light/base/display/color/green/4",
     "collection": "mode",
     "mode": "light",
@@ -6845,7 +6861,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/yellow/color",
+    "name": "data/yellow/color/emphasis",
     "value": {
       "r": 0.7215686274509804,
       "g": 0.5294117647058824,
@@ -6853,7 +6869,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/yellow/color",
+    "refId": "mode/data/yellow/color/emphasis",
     "reference": "base/color/light/base/display/color/yellow/4",
     "collection": "mode",
     "mode": "light",
@@ -6877,7 +6893,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/orange/color",
+    "name": "data/orange/color/emphasis",
     "value": {
       "r": 0.9215686274509803,
       "g": 0.403921568627451,
@@ -6885,7 +6901,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/orange/color",
+    "refId": "mode/data/orange/color/emphasis",
     "reference": "base/color/light/base/display/color/orange/4",
     "collection": "mode",
     "mode": "light",
@@ -6909,7 +6925,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/auburn/color",
+    "name": "data/auburn/color/emphasis",
     "value": {
       "r": 0.615686274509804,
       "g": 0.3803921568627451,
@@ -6917,7 +6933,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/auburn/color",
+    "refId": "mode/data/auburn/color/emphasis",
     "reference": "base/color/light/base/display/color/auburn/5",
     "collection": "mode",
     "mode": "light",
@@ -6941,7 +6957,7 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "data/blue/color",
+    "name": "data/blue/color/emphasis",
     "value": {
       "r": 0,
       "g": 0.43137254901960786,
@@ -6949,7 +6965,7 @@
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/data/blue/color",
+    "refId": "mode/data/blue/color/emphasis",
     "reference": "base/color/light/base/display/color/blue/5",
     "collection": "mode",
     "mode": "light",
@@ -7632,6 +7648,38 @@
       "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
     }
   },
+  {
+    "name": "tooltip/fgColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/tooltip/fgColor",
+    "reference": "mode/fgColor/onEmphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "tooltip/bgColor",
+    "value": {
+      "r": 0.1411764705882353,
+      "g": 0.1607843137254902,
+      "b": 0.1843137254901961,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/tooltip/bgColor",
+    "reference": "mode/bgColor/emphasis",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "card/bgColor",
     "value": {

package/dist/internalCss/dark-colorblind.css

@@ -327,25 +327,25 @@
   --header-borderColor-divider: #8b949e;
   --headerSearch-bgColor: #0d1117;
   --headerSearch-borderColor: #30363d;
-  --data-blue-color: #0576ff;
+  --data-blue-color-emphasis: #0576ff;
   --data-blue-color-muted: #001a47;
-  --data-auburn-color: #a86f6b;
+  --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
-  --data-orange-color: #984b10;
+  --data-orange-color-emphasis: #984b10;
   --data-orange-color-muted: #311708;
-  --data-yellow-color: #895906;
+  --data-yellow-color-emphasis: #895906;
   --data-yellow-color-muted: #2e1a00;
-  --data-green-color: #2f6f37;
+  --data-green-color-emphasis: #2f6f37;
   --data-green-color-muted: #122117;
-  --data-teal-color: #106c70;
+  --data-teal-color-emphasis: #106c70;
   --data-teal-color-muted: #041f25;
-  --data-purple-color: #975bf1;
+  --data-purple-color-emphasis: #975bf1;
   --data-purple-color-muted: #211047;
-  --data-pink-color: #d34591;
+  --data-pink-color-emphasis: #d34591;
   --data-pink-color-muted: #2d1524;
-  --data-red-color: #eb3342;
+  --data-red-color-emphasis: #eb3342;
   --data-red-color-muted: #3c0614;
-  --data-gray-color: #576270;
+  --data-gray-color-emphasis: #576270;
   --data-gray-color-muted: #1c1c1c;
   --display-blue-bgColor-muted: #001a47;
   --display-blue-bgColor-emphasis: #005bd1;
@@ -713,9 +713,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #6e7681;
+  --tooltip-fgColor: #ffffff;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;
@@ -1176,25 +1179,25 @@
     --header-borderColor-divider: #8b949e;
     --headerSearch-bgColor: #0d1117;
     --headerSearch-borderColor: #30363d;
-    --data-blue-color: #0576ff;
+    --data-blue-color-emphasis: #0576ff;
     --data-blue-color-muted: #001a47;
-    --data-auburn-color: #a86f6b;
+    --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
-    --data-orange-color: #984b10;
+    --data-orange-color-emphasis: #984b10;
     --data-orange-color-muted: #311708;
-    --data-yellow-color: #895906;
+    --data-yellow-color-emphasis: #895906;
     --data-yellow-color-muted: #2e1a00;
-    --data-green-color: #2f6f37;
+    --data-green-color-emphasis: #2f6f37;
     --data-green-color-muted: #122117;
-    --data-teal-color: #106c70;
+    --data-teal-color-emphasis: #106c70;
     --data-teal-color-muted: #041f25;
-    --data-purple-color: #975bf1;
+    --data-purple-color-emphasis: #975bf1;
     --data-purple-color-muted: #211047;
-    --data-pink-color: #d34591;
+    --data-pink-color-emphasis: #d34591;
     --data-pink-color-muted: #2d1524;
-    --data-red-color: #eb3342;
+    --data-red-color-emphasis: #eb3342;
     --data-red-color-muted: #3c0614;
-    --data-gray-color: #576270;
+    --data-gray-color-emphasis: #576270;
     --data-gray-color-muted: #1c1c1c;
     --display-blue-bgColor-muted: #001a47;
     --display-blue-bgColor-emphasis: #005bd1;
@@ -1562,9 +1565,12 @@
     --label-coral-fgColor-rest: #f7794b;
     --label-coral-fgColor-hover: #fa8c61;
     --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #6e7681;
+    --tooltip-fgColor: #ffffff;
     --fgColor-default: #e6edf3;
     --fgColor-muted: #8d96a0;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #010409;
     --fgColor-white: #ffffff;
     --fgColor-black: #010409;
     --fgColor-disabled: #6e7681;

package/dist/internalCss/dark-dimmed.css

@@ -327,25 +327,25 @@
   --header-borderColor-divider: #768390;
   --headerSearch-bgColor: #22272e;
   --headerSearch-borderColor: #444c56;
-  --data-blue-color: #0576ff;
+  --data-blue-color-emphasis: #0576ff;
   --data-blue-color-muted: #001a47;
-  --data-auburn-color: #a86f6b;
+  --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
-  --data-orange-color: #984b10;
+  --data-orange-color-emphasis: #984b10;
   --data-orange-color-muted: #311708;
-  --data-yellow-color: #895906;
+  --data-yellow-color-emphasis: #895906;
   --data-yellow-color-muted: #2e1a00;
-  --data-green-color: #2f6f37;
+  --data-green-color-emphasis: #2f6f37;
   --data-green-color-muted: #122117;
-  --data-teal-color: #106c70;
+  --data-teal-color-emphasis: #106c70;
   --data-teal-color-muted: #041f25;
-  --data-purple-color: #975bf1;
+  --data-purple-color-emphasis: #975bf1;
   --data-purple-color-muted: #211047;
-  --data-pink-color: #d34591;
+  --data-pink-color-emphasis: #d34591;
   --data-pink-color-muted: #2d1524;
-  --data-red-color: #eb3342;
+  --data-red-color-emphasis: #eb3342;
   --data-red-color-muted: #3c0614;
-  --data-gray-color: #576270;
+  --data-gray-color-emphasis: #576270;
   --data-gray-color-muted: #1c1c1c;
   --display-blue-bgColor-muted: #001a47;
   --display-blue-bgColor-emphasis: #005bd1;
@@ -713,9 +713,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #636e7b;
+  --tooltip-fgColor: #cdd9e5;
   --fgColor-default: #c5d1de;
   --fgColor-muted: #778491;
   --fgColor-onEmphasis: #cdd9e5;
+  --fgColor-onInverse: #1c2128;
   --fgColor-white: #cdd9e5;
   --fgColor-black: #1c2128;
   --fgColor-disabled: #636e7b;
@@ -1176,25 +1179,25 @@
     --header-borderColor-divider: #768390;
     --headerSearch-bgColor: #22272e;
     --headerSearch-borderColor: #444c56;
-    --data-blue-color: #0576ff;
+    --data-blue-color-emphasis: #0576ff;
     --data-blue-color-muted: #001a47;
-    --data-auburn-color: #a86f6b;
+    --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
-    --data-orange-color: #984b10;
+    --data-orange-color-emphasis: #984b10;
     --data-orange-color-muted: #311708;
-    --data-yellow-color: #895906;
+    --data-yellow-color-emphasis: #895906;
     --data-yellow-color-muted: #2e1a00;
-    --data-green-color: #2f6f37;
+    --data-green-color-emphasis: #2f6f37;
     --data-green-color-muted: #122117;
-    --data-teal-color: #106c70;
+    --data-teal-color-emphasis: #106c70;
     --data-teal-color-muted: #041f25;
-    --data-purple-color: #975bf1;
+    --data-purple-color-emphasis: #975bf1;
     --data-purple-color-muted: #211047;
-    --data-pink-color: #d34591;
+    --data-pink-color-emphasis: #d34591;
     --data-pink-color-muted: #2d1524;
-    --data-red-color: #eb3342;
+    --data-red-color-emphasis: #eb3342;
     --data-red-color-muted: #3c0614;
-    --data-gray-color: #576270;
+    --data-gray-color-emphasis: #576270;
     --data-gray-color-muted: #1c1c1c;
     --display-blue-bgColor-muted: #001a47;
     --display-blue-bgColor-emphasis: #005bd1;
@@ -1562,9 +1565,12 @@
     --label-coral-fgColor-rest: #f7794b;
     --label-coral-fgColor-hover: #fa8c61;
     --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #636e7b;
+    --tooltip-fgColor: #cdd9e5;
     --fgColor-default: #c5d1de;
     --fgColor-muted: #778491;
     --fgColor-onEmphasis: #cdd9e5;
+    --fgColor-onInverse: #1c2128;
     --fgColor-white: #cdd9e5;
     --fgColor-black: #1c2128;
     --fgColor-disabled: #636e7b;