@alfalab/core-components 45.7.0 → 45.8.0

package/themes/corp.css

@@ -143,19 +143,19 @@
     --color-dark-accent-primary-inverted-hover: #e32a17;
     --color-dark-accent-primary-inverted-press: #d72505;
     --color-dark-accent-primary-press: #fd624e;
-    --color-dark-accent-secondary: #fff;
-    --color-dark-accent-secondary-hover: #e7e8eb;
-    --color-dark-accent-secondary-inverted: #0e0e0e;
-    --color-dark-accent-secondary-inverted-hover: #29292c;
-    --color-dark-accent-secondary-inverted-press: #2f2f32;
+    --color-dark-accent-secondary: #f2f3f5;
+    --color-dark-accent-secondary-hover: #dcdde1;
+    --color-dark-accent-secondary-inverted: #212124;
+    --color-dark-accent-secondary-inverted-hover: #2f2f32;
+    --color-dark-accent-secondary-inverted-press: #353539;
     --color-dark-accent-secondary-press: #d2d3d9;
-    --color-dark-base-bg-alt-primary: #0e0e0e;
+    --color-dark-base-bg-alt-primary: #121213;
     --color-dark-base-bg-alt-primary-inverted: #f2f3f5;
     --color-dark-base-bg-alt-secondary: #1c1c1e;
     --color-dark-base-bg-alt-secondary-inverted: #fff;
     --color-dark-base-bg-alt-tertiary: #29292c;
     --color-dark-base-bg-alt-tertiary-inverted: #f2f3f5;
-    --color-dark-base-bg-primary: #0e0e0e;
+    --color-dark-base-bg-primary: #121213;
     --color-dark-base-bg-primary-inverted: #fff;
     --color-dark-base-bg-secondary: #1c1c1e;
     --color-dark-base-bg-secondary-inverted: #f2f3f5;
@@ -214,7 +214,7 @@
     --color-dark-modal-bg-secondary-inverted: #f2f3f5;
     --color-dark-modal-bg-tertiary: #353539;
     --color-dark-modal-bg-tertiary-inverted: #fff;
-    --color-dark-neutral-0: #29292c;
+    --color-dark-neutral-0: #262629;
     --color-dark-neutral-0-hover: #2f2f32;
     --color-dark-neutral-0-inverted: #fff;
     --color-dark-neutral-0-inverted-hover: #e7e8eb;
@@ -228,7 +228,7 @@
     --color-dark-neutral-100-press: #29292c;
     --color-dark-neutral-1500: #fff;
     --color-dark-neutral-1500-hover: #babbc2;
-    --color-dark-neutral-1500-inverted: #0e0e0e;
+    --color-dark-neutral-1500-inverted: #121213;
     --color-dark-neutral-1500-inverted-hover: #3f3f45;
     --color-dark-neutral-1500-inverted-press: #5f5f66;
     --color-dark-neutral-1500-press: #a0a1a9;
@@ -274,6 +274,12 @@
     --color-dark-neutral-translucent-100-inverted-hover: rgba(15, 25, 55, 0.1);
     --color-dark-neutral-translucent-100-inverted-press: rgba(5, 12, 41, 0.14);
     --color-dark-neutral-translucent-100-press: rgba(222, 222, 238, 0.13);
+    --color-dark-neutral-translucent-1300: rgba(255, 255, 255, 0.94);
+    --color-dark-neutral-translucent-1300-hover: rgba(255, 255, 255, 0.7);
+    --color-dark-neutral-translucent-1300-inverted: rgba(3, 3, 6, 0.88);
+    --color-dark-neutral-translucent-1300-inverted-hover: rgba(3, 3, 8, 0.8);
+    --color-dark-neutral-translucent-1300-inverted-press: rgba(0, 0, 10, 0.71);
+    --color-dark-neutral-translucent-1300-press: rgba(255, 255, 255, 0.6);
     --color-dark-neutral-translucent-1500-hover: rgba(243, 245, 254, 0.75);
     --color-dark-neutral-translucent-1500-inverted-hover: rgba(2, 2, 10, 0.76);
     --color-dark-neutral-translucent-1500-inverted-press: rgba(1, 1, 12, 0.63);
@@ -333,59 +339,59 @@
     --color-dark-status-info-inverted-press: #2c64d4;
     --color-dark-status-info-press: #63aafd;
     --color-dark-status-muted-alt-attention: #412f22;
-    --color-dark-status-muted-alt-attention-hover: #4f3623;
+    --color-dark-status-muted-alt-attention-hover: #543a27;
     --color-dark-status-muted-alt-attention-inverted: #fde6c8;
     --color-dark-status-muted-alt-attention-inverted-hover: #f6d7af;
-    --color-dark-status-muted-alt-attention-inverted-press: #eec596;
-    --color-dark-status-muted-alt-attention-press: #634128;
+    --color-dark-status-muted-alt-attention-inverted-press: #f0c492;
+    --color-dark-status-muted-alt-attention-press: #6a462c;
     --color-dark-status-muted-alt-info: #293044;
-    --color-dark-status-muted-alt-info-hover: #303a55;
+    --color-dark-status-muted-alt-info-hover: #2f3a55;
     --color-dark-status-muted-alt-info-inverted: #e4f0ff;
-    --color-dark-status-muted-alt-info-inverted-hover: #c4defa;
-    --color-dark-status-muted-alt-info-inverted-press: #aeccf1;
-    --color-dark-status-muted-alt-info-press: #3a456a;
+    --color-dark-status-muted-alt-info-inverted-hover: #c1dbf7;
+    --color-dark-status-muted-alt-info-inverted-press: #a7cbf2;
+    --color-dark-status-muted-alt-info-press: #38476c;
     --color-dark-status-muted-alt-negative: #442926;
-    --color-dark-status-muted-alt-negative-hover: #56302d;
+    --color-dark-status-muted-alt-negative-hover: #55312e;
     --color-dark-status-muted-alt-negative-inverted: #ffdfdf;
-    --color-dark-status-muted-alt-negative-inverted-hover: #faccca;
-    --color-dark-status-muted-alt-negative-inverted-press: #f1b7b0;
-    --color-dark-status-muted-alt-negative-press: #6c3b34;
+    --color-dark-status-muted-alt-negative-inverted-hover: #f9ccca;
+    --color-dark-status-muted-alt-negative-inverted-press: #f3b6af;
+    --color-dark-status-muted-alt-negative-press: #6b3b34;
     --color-dark-status-muted-alt-positive: #253528;
-    --color-dark-status-muted-alt-positive-hover: #283f2d;
+    --color-dark-status-muted-alt-positive-hover: #273f2d;
     --color-dark-status-muted-alt-positive-inverted: #d1f1d7;
-    --color-dark-status-muted-alt-positive-inverted-hover: #bae6c2;
-    --color-dark-status-muted-alt-positive-inverted-press: #a1d7a8;
-    --color-dark-status-muted-alt-positive-press: #2d4d32;
+    --color-dark-status-muted-alt-positive-inverted-hover: #bbe8c3;
+    --color-dark-status-muted-alt-positive-inverted-press: #a1dba8;
+    --color-dark-status-muted-alt-positive-press: #2d4e33;
     --color-dark-status-muted-attention: #36291f;
     --color-dark-status-muted-attention-hover: #412f22;
     --color-dark-status-muted-attention-inverted: #ffefd9;
     --color-dark-status-muted-attention-inverted-hover: #fde6c8;
     --color-dark-status-muted-attention-inverted-press: #f6d7af;
-    --color-dark-status-muted-attention-press: #4f3623;
+    --color-dark-status-muted-attention-press: #543a27;
     --color-dark-status-muted-info: #222a3e;
     --color-dark-status-muted-info-hover: #293044;
     --color-dark-status-muted-info-inverted: #e4f0ff;
     --color-dark-status-muted-info-inverted-hover: #d8eaff;
-    --color-dark-status-muted-info-inverted-press: #c4defa;
-    --color-dark-status-muted-info-press: #303a55;
+    --color-dark-status-muted-info-inverted-press: #c1dbf7;
+    --color-dark-status-muted-info-press: #2f3a55;
     --color-dark-status-muted-negative: #392523;
     --color-dark-status-muted-negative-hover: #442926;
     --color-dark-status-muted-negative-inverted: #ffebeb;
     --color-dark-status-muted-negative-inverted-hover: #ffdfdf;
-    --color-dark-status-muted-negative-inverted-press: #faccca;
-    --color-dark-status-muted-negative-press: #56302d;
+    --color-dark-status-muted-negative-inverted-press: #f9ccca;
+    --color-dark-status-muted-negative-press: #55312e;
     --color-dark-status-muted-positive: #232d25;
     --color-dark-status-muted-positive-hover: #253528;
     --color-dark-status-muted-positive-inverted: #dff8e5;
     --color-dark-status-muted-positive-inverted-hover: #d1f1d7;
-    --color-dark-status-muted-positive-inverted-press: #bae6c2;
-    --color-dark-status-muted-positive-press: #283f2d;
-    --color-dark-status-negative: #ff5431;
-    --color-dark-status-negative-hover: #ff7554;
-    --color-dark-status-negative-inverted: #ff5431;
-    --color-dark-status-negative-inverted-hover: #ec2e14;
-    --color-dark-status-negative-inverted-press: #c7251c;
-    --color-dark-status-negative-press: #ff8d73;
+    --color-dark-status-muted-positive-inverted-press: #bbe8c3;
+    --color-dark-status-muted-positive-press: #273f2d;
+    --color-dark-status-negative: #ff4837;
+    --color-dark-status-negative-hover: #ff755e;
+    --color-dark-status-negative-inverted: #ff4837;
+    --color-dark-status-negative-inverted-hover: #ec2d20;
+    --color-dark-status-negative-inverted-press: #c7241f;
+    --color-dark-status-negative-press: #ff8d79;
     --color-dark-status-positive: #17d055;
     --color-dark-status-positive-hover: #22e068;
     --color-dark-status-positive-inverted: #0cc44d;
@@ -408,24 +414,24 @@
     --color-dark-text-info-inverted-press: #2453b4;
     --color-dark-text-info-press: #7fb6ff;
     --color-dark-text-link: #4a9dfc;
-    --color-dark-text-negative: #ff5431;
-    --color-dark-text-negative-hover: #ff7554;
-    --color-dark-text-negative-inverted: #ec2e14;
-    --color-dark-text-negative-inverted-hover: #c7251c;
+    --color-dark-text-negative: #ff4837;
+    --color-dark-text-negative-hover: #ff755e;
+    --color-dark-text-negative-inverted: #ec2d20;
+    --color-dark-text-negative-inverted-hover: #c7241f;
     --color-dark-text-negative-inverted-press: #a6201e;
-    --color-dark-text-negative-press: #ff8d73;
+    --color-dark-text-negative-press: #ff8d79;
     --color-dark-text-positive: #0cc44d;
     --color-dark-text-positive-hover: #22e068;
     --color-dark-text-positive-inverted: #0d9336;
     --color-dark-text-positive-inverted-hover: #0a7d2c;
     --color-dark-text-positive-inverted-press: #036625;
     --color-dark-text-positive-press: #4ae777;
-    --color-dark-text-primary: #fff;
-    --color-dark-text-primary-hover: #babbc2;
-    --color-dark-text-primary-inverted: #0e0e0e;
-    --color-dark-text-primary-inverted-hover: #5f5f66;
-    --color-dark-text-primary-inverted-press: #75757d;
-    --color-dark-text-primary-press: #a0a1a9;
+    --color-dark-text-primary: rgba(255, 255, 255, 0.94);
+    --color-dark-text-primary-hover: rgba(255, 255, 255, 0.7);
+    --color-dark-text-primary-inverted: rgba(3, 3, 6, 0.88);
+    --color-dark-text-primary-inverted-hover: rgba(1, 1, 12, 0.63);
+    --color-dark-text-primary-inverted-press: rgba(4, 4, 19, 0.55);
+    --color-dark-text-primary-press: rgba(255, 255, 255, 0.6);
     --color-dark-text-quaternary: rgba(231, 231, 248, 0.18);
     --color-dark-text-quaternary-inverted: rgba(5, 11, 44, 0.18);
     --color-dark-text-secondary: rgba(238, 238, 251, 0.55);
@@ -451,20 +457,20 @@
     --color-light-accent-primary-inverted-hover: #ff503e;
     --color-light-accent-primary-inverted-press: #fd624e;
     --color-light-accent-primary-press: #d72505;
-    --color-light-accent-secondary: #0e0e0e;
-    --color-light-accent-secondary-hover: #29292c;
-    --color-light-accent-secondary-inverted: #fff;
-    --color-light-accent-secondary-inverted-hover: #e7e8eb;
+    --color-light-accent-secondary: #212124;
+    --color-light-accent-secondary-hover: #2f2f32;
+    --color-light-accent-secondary-inverted: #f2f3f5;
+    --color-light-accent-secondary-inverted-hover: #dcdde1;
     --color-light-accent-secondary-inverted-press: #d2d3d9;
-    --color-light-accent-secondary-press: #2f2f32;
+    --color-light-accent-secondary-press: #353539;
     --color-light-base-bg-alt-primary: #f2f3f5;
-    --color-light-base-bg-alt-primary-inverted: #0e0e0e;
+    --color-light-base-bg-alt-primary-inverted: #121213;
     --color-light-base-bg-alt-secondary: #fff;
     --color-light-base-bg-alt-secondary-inverted: #1c1c1e;
     --color-light-base-bg-alt-tertiary: #f2f3f5;
     --color-light-base-bg-alt-tertiary-inverted: #29292c;
     --color-light-base-bg-primary: #fff;
-    --color-light-base-bg-primary-inverted: #0e0e0e;
+    --color-light-base-bg-primary-inverted: #121213;
     --color-light-base-bg-secondary: #f2f3f5;
     --color-light-base-bg-secondary-inverted: #1c1c1e;
     --color-light-base-bg-tertiary: #fff;
@@ -524,7 +530,7 @@
     --color-light-modal-bg-tertiary-inverted: #353539;
     --color-light-neutral-0: #fff;
     --color-light-neutral-0-hover: #e7e8eb;
-    --color-light-neutral-0-inverted: #29292c;
+    --color-light-neutral-0-inverted: #262629;
     --color-light-neutral-0-inverted-hover: #2f2f32;
     --color-light-neutral-0-inverted-press: #353539;
     --color-light-neutral-0-press: #dcdde1;
@@ -534,7 +540,7 @@
     --color-light-neutral-100-inverted-hover: #212124;
     --color-light-neutral-100-inverted-press: #29292c;
     --color-light-neutral-100-press: #dcdde1;
-    --color-light-neutral-1500: #0e0e0e;
+    --color-light-neutral-1500: #121213;
     --color-light-neutral-1500-hover: #3f3f45;
     --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-1500-inverted-hover: #babbc2;
@@ -582,6 +588,12 @@
     --color-light-neutral-translucent-100-inverted-hover: rgba(222, 222, 238, 0.13);
     --color-light-neutral-translucent-100-inverted-press: rgba(234, 234, 248, 0.15);
     --color-light-neutral-translucent-100-press: rgba(5, 12, 41, 0.14);
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-hover: rgba(3, 3, 8, 0.8);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
+    --color-light-neutral-translucent-1300-inverted-hover: rgba(255, 255, 255, 0.7);
+    --color-light-neutral-translucent-1300-inverted-press: rgba(255, 255, 255, 0.6);
+    --color-light-neutral-translucent-1300-press: rgba(0, 0, 10, 0.71);
     --color-light-neutral-translucent-1500-hover: rgba(2, 2, 10, 0.76);
     --color-light-neutral-translucent-1500-inverted-hover: rgba(243, 245, 254, 0.75);
     --color-light-neutral-translucent-1500-inverted-press: rgba(239, 240, 252, 0.65);
@@ -643,57 +655,57 @@
     --color-light-status-muted-alt-attention: #fde6c8;
     --color-light-status-muted-alt-attention-hover: #f6d7af;
     --color-light-status-muted-alt-attention-inverted: #412f22;
-    --color-light-status-muted-alt-attention-inverted-hover: #4f3623;
-    --color-light-status-muted-alt-attention-inverted-press: #634128;
-    --color-light-status-muted-alt-attention-press: #eec596;
+    --color-light-status-muted-alt-attention-inverted-hover: #543a27;
+    --color-light-status-muted-alt-attention-inverted-press: #6a462c;
+    --color-light-status-muted-alt-attention-press: #f0c492;
     --color-light-status-muted-alt-info: #d8eaff;
-    --color-light-status-muted-alt-info-hover: #c4defa;
+    --color-light-status-muted-alt-info-hover: #c1dbf7;
     --color-light-status-muted-alt-info-inverted: #293044;
-    --color-light-status-muted-alt-info-inverted-hover: #303a55;
-    --color-light-status-muted-alt-info-inverted-press: #3a456a;
-    --color-light-status-muted-alt-info-press: #aeccf1;
+    --color-light-status-muted-alt-info-inverted-hover: #2f3a55;
+    --color-light-status-muted-alt-info-inverted-press: #38476c;
+    --color-light-status-muted-alt-info-press: #a7cbf2;
     --color-light-status-muted-alt-negative: #ffdfdf;
-    --color-light-status-muted-alt-negative-hover: #faccca;
+    --color-light-status-muted-alt-negative-hover: #f9ccca;
     --color-light-status-muted-alt-negative-inverted: #442926;
-    --color-light-status-muted-alt-negative-inverted-hover: #56302d;
-    --color-light-status-muted-alt-negative-inverted-press: #6c3b34;
-    --color-light-status-muted-alt-negative-press: #f1b7b0;
+    --color-light-status-muted-alt-negative-inverted-hover: #55312e;
+    --color-light-status-muted-alt-negative-inverted-press: #6b3b34;
+    --color-light-status-muted-alt-negative-press: #f3b6af;
     --color-light-status-muted-alt-positive: #d1f1d7;
-    --color-light-status-muted-alt-positive-hover: #bae6c2;
+    --color-light-status-muted-alt-positive-hover: #bbe8c3;
     --color-light-status-muted-alt-positive-inverted: #253528;
-    --color-light-status-muted-alt-positive-inverted-hover: #283f2d;
-    --color-light-status-muted-alt-positive-inverted-press: #2d4d32;
-    --color-light-status-muted-alt-positive-press: #a1d7a8;
+    --color-light-status-muted-alt-positive-inverted-hover: #273f2d;
+    --color-light-status-muted-alt-positive-inverted-press: #2d4e33;
+    --color-light-status-muted-alt-positive-press: #a1dba8;
     --color-light-status-muted-attention: #ffefd9;
     --color-light-status-muted-attention-hover: #fde6c8;
     --color-light-status-muted-attention-inverted: #36291f;
     --color-light-status-muted-attention-inverted-hover: #412f22;
-    --color-light-status-muted-attention-inverted-press: #4f3623;
+    --color-light-status-muted-attention-inverted-press: #543a27;
     --color-light-status-muted-attention-press: #f6d7af;
     --color-light-status-muted-info: #e4f0ff;
     --color-light-status-muted-info-hover: #d8eaff;
     --color-light-status-muted-info-inverted: #222a3e;
     --color-light-status-muted-info-inverted-hover: #293044;
-    --color-light-status-muted-info-inverted-press: #303a55;
-    --color-light-status-muted-info-press: #c4defa;
+    --color-light-status-muted-info-inverted-press: #2f3a55;
+    --color-light-status-muted-info-press: #c1dbf7;
     --color-light-status-muted-negative: #ffebeb;
     --color-light-status-muted-negative-hover: #ffdfdf;
     --color-light-status-muted-negative-inverted: #392523;
     --color-light-status-muted-negative-inverted-hover: #442926;
-    --color-light-status-muted-negative-inverted-press: #56302d;
-    --color-light-status-muted-negative-press: #faccca;
+    --color-light-status-muted-negative-inverted-press: #55312e;
+    --color-light-status-muted-negative-press: #f9ccca;
     --color-light-status-muted-positive: #dff8e5;
     --color-light-status-muted-positive-hover: #d1f1d7;
     --color-light-status-muted-positive-inverted: #232d25;
     --color-light-status-muted-positive-inverted-hover: #253528;
-    --color-light-status-muted-positive-inverted-press: #283f2d;
-    --color-light-status-muted-positive-press: #bae6c2;
-    --color-light-status-negative: #ff5431;
-    --color-light-status-negative-hover: #ec2e14;
-    --color-light-status-negative-inverted: #ff5431;
-    --color-light-status-negative-inverted-hover: #ff7554;
-    --color-light-status-negative-inverted-press: #ff8d73;
-    --color-light-status-negative-press: #c7251c;
+    --color-light-status-muted-positive-inverted-press: #273f2d;
+    --color-light-status-muted-positive-press: #bbe8c3;
+    --color-light-status-negative: #ff4837;
+    --color-light-status-negative-hover: #ec2d20;
+    --color-light-status-negative-inverted: #ff4837;
+    --color-light-status-negative-inverted-hover: #ff755e;
+    --color-light-status-negative-inverted-press: #ff8d79;
+    --color-light-status-negative-press: #c7241f;
     --color-light-status-positive: #0cc44d;
     --color-light-status-positive-hover: #04b545;
     --color-light-status-positive-inverted: #17d055;
@@ -716,11 +728,11 @@
     --color-light-text-info-inverted-press: #7fb6ff;
     --color-light-text-info-press: #2453b4;
     --color-light-text-link: #2a77ef;
-    --color-light-text-negative: #ec2e14;
-    --color-light-text-negative-hover: #c7251c;
-    --color-light-text-negative-inverted: #ff5431;
-    --color-light-text-negative-inverted-hover: #ff7554;
-    --color-light-text-negative-inverted-press: #ff8d73;
+    --color-light-text-negative: #ec2d20;
+    --color-light-text-negative-hover: #c7241f;
+    --color-light-text-negative-inverted: #ff4837;
+    --color-light-text-negative-inverted-hover: #ff755e;
+    --color-light-text-negative-inverted-press: #ff8d79;
     --color-light-text-negative-press: #a6201e;
     --color-light-text-positive: #0d9336;
     --color-light-text-positive-hover: #0a7d2c;
@@ -728,12 +740,12 @@
     --color-light-text-positive-inverted-hover: #22e068;
     --color-light-text-positive-inverted-press: #4ae777;
     --color-light-text-positive-press: #036625;
-    --color-light-text-primary: #0e0e0e;
-    --color-light-text-primary-hover: #5f5f66;
-    --color-light-text-primary-inverted: #fff;
-    --color-light-text-primary-inverted-hover: #babbc2;
-    --color-light-text-primary-inverted-press: #a0a1a9;
-    --color-light-text-primary-press: #75757d;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-text-primary-hover: rgba(1, 1, 12, 0.63);
+    --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
+    --color-light-text-primary-inverted-hover: rgba(255, 255, 255, 0.7);
+    --color-light-text-primary-inverted-press: rgba(255, 255, 255, 0.6);
+    --color-light-text-primary-press: rgba(4, 4, 19, 0.55);
     --color-light-text-quaternary: rgba(5, 11, 44, 0.18);
     --color-light-text-quaternary-inverted: rgba(231, 231, 248, 0.18);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55);
@@ -759,12 +771,12 @@
     --color-static-accent-primary-inverted-hover: #ff503e;
     --color-static-accent-primary-inverted-press: #fd624e;
     --color-static-accent-primary-press: #d72505;
-    --color-static-accent-secondary: #0e0e0e;
-    --color-static-accent-secondary-hover: #29292c;
-    --color-static-accent-secondary-inverted: #fff;
-    --color-static-accent-secondary-inverted-hover: #e7e8eb;
+    --color-static-accent-secondary: #212124;
+    --color-static-accent-secondary-hover: #2f2f32;
+    --color-static-accent-secondary-inverted: #f2f3f5;
+    --color-static-accent-secondary-inverted-hover: #dcdde1;
     --color-static-accent-secondary-inverted-press: #d2d3d9;
-    --color-static-accent-secondary-press: #2f2f32;
+    --color-static-accent-secondary-press: #353539;
     --color-static-bg-accent: #ef3124;
     --color-static-bg-primary-dark: #0e0e0e;
     --color-static-bg-primary-light: #fff;
@@ -780,7 +792,7 @@
     --color-static-graphic-light: #fff;
     --color-static-neutral-0: #fff;
     --color-static-neutral-0-hover: #e7e8eb;
-    --color-static-neutral-0-inverted: #29292c;
+    --color-static-neutral-0-inverted: #262629;
     --color-static-neutral-0-inverted-hover: #2f2f32;
     --color-static-neutral-0-inverted-press: #353539;
     --color-static-neutral-0-press: #dcdde1;
@@ -790,7 +802,7 @@
     --color-static-neutral-100-inverted-hover: #212124;
     --color-static-neutral-100-inverted-press: #29292c;
     --color-static-neutral-100-press: #dcdde1;
-    --color-static-neutral-1500: #0e0e0e;
+    --color-static-neutral-1500: #121213;
     --color-static-neutral-1500-hover: #3f3f45;
     --color-static-neutral-1500-inverted: #fff;
     --color-static-neutral-1500-inverted-hover: #babbc2;
@@ -803,7 +815,11 @@
     --color-static-neutral-200-inverted-press: #2f2f32;
     --color-static-neutral-200-press: #dcdde1;
     --color-static-neutral-300: #e7e8eb;
+    --color-static-neutral-300-hover: #dcdde1;
     --color-static-neutral-300-inverted: #29292c;
+    --color-static-neutral-300-inverted-hover: #2f2f32;
+    --color-static-neutral-300-inverted-press: #353539;
+    --color-static-neutral-300-press: #d2d3d9;
     --color-static-neutral-400: #d2d3d9;
     --color-static-neutral-400-hover: #babbc2;
     --color-static-neutral-400-inverted: #353539;
@@ -834,6 +850,12 @@
     --color-static-neutral-translucent-100-inverted-hover: rgba(222, 222, 238, 0.13);
     --color-static-neutral-translucent-100-inverted-press: rgba(234, 234, 248, 0.15);
     --color-static-neutral-translucent-100-press: rgba(5, 12, 41, 0.14);
+    --color-static-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-static-neutral-translucent-1300-hover: rgba(3, 3, 8, 0.8);
+    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
+    --color-static-neutral-translucent-1300-inverted-hover: rgba(255, 255, 255, 0.7);
+    --color-static-neutral-translucent-1300-inverted-press: rgba(255, 255, 255, 0.6);
+    --color-static-neutral-translucent-1300-press: rgba(0, 0, 10, 0.71);
     --color-static-neutral-translucent-1500-hover: rgba(2, 2, 10, 0.76);
     --color-static-neutral-translucent-1500-inverted-hover: rgba(243, 245, 254, 0.75);
     --color-static-neutral-translucent-1500-inverted-press: rgba(239, 240, 252, 0.65);
@@ -845,7 +867,11 @@
     --color-static-neutral-translucent-200-inverted-press: rgba(234, 234, 248, 0.15);
     --color-static-neutral-translucent-200-press: rgba(5, 12, 41, 0.14);
     --color-static-neutral-translucent-300: rgba(15, 25, 55, 0.1);
+    --color-static-neutral-translucent-300-hover: rgba(5, 12, 41, 0.14);
     --color-static-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13);
+    --color-static-neutral-translucent-300-inverted-hover: rgba(234, 234, 248, 0.15);
+    --color-static-neutral-translucent-300-inverted-press: rgba(231, 231, 248, 0.18);
+    --color-static-neutral-translucent-300-press: rgba(5, 11, 44, 0.18);
     --color-static-neutral-translucent-400: rgba(5, 11, 44, 0.18);
     --color-static-neutral-translucent-400-hover: rgba(9, 12, 37, 0.28);
     --color-static-neutral-translucent-400-inverted: rgba(231, 231, 248, 0.18);
@@ -884,8 +910,8 @@
     --color-static-status-muted-negative-inverted: #392523;
     --color-static-status-muted-positive: #dff8e5;
     --color-static-status-muted-positive-inverted: #232d25;
-    --color-static-status-negative: #ff5431;
-    --color-static-status-negative-inverted: #ff5431;
+    --color-static-status-negative: #ff4837;
+    --color-static-status-negative-inverted: #ff4837;
     --color-static-status-positive: #0cc44d;
     --color-static-status-positive-inverted: #17d055;
     --color-static-text-accent: #ef3124;
@@ -901,11 +927,11 @@
     --color-static-text-info-inverted-hover: #63aafd;
     --color-static-text-info-inverted-press: #7fb6ff;
     --color-static-text-info-press: #2453b4;
-    --color-static-text-negative: #ec2e14;
-    --color-static-text-negative-hover: #c7251c;
-    --color-static-text-negative-inverted: #ff5431;
-    --color-static-text-negative-inverted-hover: #ff7554;
-    --color-static-text-negative-inverted-press: #ff8d73;
+    --color-static-text-negative: #ec2d20;
+    --color-static-text-negative-hover: #c7241f;
+    --color-static-text-negative-inverted: #ff4837;
+    --color-static-text-negative-inverted-hover: #ff755e;
+    --color-static-text-negative-inverted-press: #ff8d79;
     --color-static-text-negative-press: #a6201e;
     --color-static-text-positive: #0d9336;
     --color-static-text-positive-hover: #0a7d2c;
@@ -913,14 +939,14 @@
     --color-static-text-positive-inverted-hover: #22e068;
     --color-static-text-positive-inverted-press: #4ae777;
     --color-static-text-positive-press: #036625;
-    --color-static-text-primary: #0e0e0e;
+    --color-static-text-primary: rgba(3, 3, 6, 0.88);
     --color-static-text-primary-dark: #0e0e0e;
-    --color-static-text-primary-hover: #5f5f66;
-    --color-static-text-primary-inverted: #fff;
-    --color-static-text-primary-inverted-hover: #babbc2;
-    --color-static-text-primary-inverted-press: #a0a1a9;
+    --color-static-text-primary-hover: rgba(1, 1, 12, 0.63);
+    --color-static-text-primary-inverted: rgba(255, 255, 255, 0.94);
+    --color-static-text-primary-inverted-hover: rgba(255, 255, 255, 0.7);
+    --color-static-text-primary-inverted-press: rgba(255, 255, 255, 0.6);
     --color-static-text-primary-light: #fff;
-    --color-static-text-primary-press: #75757d;
+    --color-static-text-primary-press: rgba(4, 4, 19, 0.55);
     --color-static-text-quaternary: rgba(5, 11, 44, 0.18);
     --color-static-text-quaternary-inverted: rgba(231, 231, 248, 0.18);
     --color-static-text-secondary: rgba(4, 4, 19, 0.55);
@@ -1117,22 +1143,22 @@
     --color-dark-text-link-tint-20: rgb(110, 177, 253);
     --color-dark-text-link-tint-40: rgb(146, 196, 253);
     --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
-    --color-dark-text-primary-shade-24: rgb(194, 194, 194);
-    --color-dark-text-primary-shade-30: rgb(179, 179, 179);
-    --color-dark-text-primary-shade-40: rgb(153, 153, 153);
-    --color-dark-text-primary-shade-50: rgb(128, 128, 128);
-    --color-dark-text-primary-tint-20: rgb(255, 255, 255);
-    --color-dark-text-primary-tint-40: rgb(255, 255, 255);
-    --color-dark-text-primary-inverted-alpha-30: rgba(14, 14, 14, 0.3);
-    --color-dark-text-primary-inverted-alpha-40: rgba(14, 14, 14, 0.4);
-    --color-dark-text-primary-inverted-shade-20: rgb(11, 11, 11);
-    --color-dark-text-primary-inverted-shade-30: rgb(10, 10, 10);
-    --color-dark-text-primary-inverted-tint-7: rgb(31, 31, 31);
-    --color-dark-text-primary-inverted-tint-15: rgb(50, 50, 50);
-    --color-dark-text-primary-inverted-tint-24: rgb(72, 72, 72);
-    --color-dark-text-primary-inverted-tint-30: rgb(86, 86, 86);
-    --color-dark-text-primary-inverted-tint-40: rgb(110, 110, 110);
-    --color-dark-text-primary-inverted-tint-50: rgb(135, 135, 135);
+    --color-dark-text-primary-shade-24: rgba(194, 194, 194, 0.9544);
+    --color-dark-text-primary-shade-30: rgba(179, 179, 179, 0.958);
+    --color-dark-text-primary-shade-40: rgba(153, 153, 153, 0.964);
+    --color-dark-text-primary-shade-50: rgba(128, 128, 128, 0.97);
+    --color-dark-text-primary-tint-20: rgba(255, 255, 255, 0.952);
+    --color-dark-text-primary-tint-40: rgba(255, 255, 255, 0.964);
+    --color-dark-text-primary-inverted-alpha-30: rgba(3, 3, 6, 0.3);
+    --color-dark-text-primary-inverted-alpha-40: rgba(3, 3, 6, 0.4);
+    --color-dark-text-primary-inverted-shade-20: rgba(2, 2, 5, 0.904);
+    --color-dark-text-primary-inverted-shade-30: rgba(2, 2, 4, 0.916);
+    --color-dark-text-primary-inverted-tint-7: rgba(21, 21, 23, 0.8884);
+    --color-dark-text-primary-inverted-tint-15: rgba(41, 41, 43, 0.898);
+    --color-dark-text-primary-inverted-tint-24: rgba(63, 63, 66, 0.9088);
+    --color-dark-text-primary-inverted-tint-30: rgba(79, 79, 81, 0.916);
+    --color-dark-text-primary-inverted-tint-40: rgba(104, 104, 106, 0.928);
+    --color-dark-text-primary-inverted-tint-50: rgba(129, 129, 131, 0.94);
     --color-dark-text-secondary-shade-20: rgba(190, 190, 201, 0.64);
     --color-dark-text-secondary-shade-30: rgba(167, 167, 176, 0.685);
     --color-dark-text-secondary-tint-20: rgba(241, 241, 252, 0.64);
@@ -1278,23 +1304,23 @@
     --color-light-text-link-tint-50: rgb(149, 187, 247);
     --color-light-text-link-shade-20: rgb(34, 95, 191);
     --color-light-text-link-shade-40: rgb(25, 71, 143);
-    --color-light-text-primary-alpha-30: rgba(14, 14, 14, 0.3);
-    --color-light-text-primary-tint-24: rgb(72, 72, 72);
-    --color-light-text-primary-tint-30: rgb(86, 86, 86);
-    --color-light-text-primary-tint-40: rgb(110, 110, 110);
-    --color-light-text-primary-tint-50: rgb(135, 135, 135);
-    --color-light-text-primary-shade-20: rgb(11, 11, 11);
-    --color-light-text-primary-shade-40: rgb(8, 8, 8);
+    --color-light-text-primary-alpha-30: rgba(3, 3, 6, 0.3);
+    --color-light-text-primary-tint-24: rgba(63, 63, 66, 0.9088);
+    --color-light-text-primary-tint-30: rgba(79, 79, 81, 0.916);
+    --color-light-text-primary-tint-40: rgba(104, 104, 106, 0.928);
+    --color-light-text-primary-tint-50: rgba(129, 129, 131, 0.94);
+    --color-light-text-primary-shade-20: rgba(2, 2, 5, 0.904);
+    --color-light-text-primary-shade-40: rgba(2, 2, 4, 0.928);
     --color-light-text-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3);
     --color-light-text-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
-    --color-light-text-primary-inverted-tint-20: rgb(255, 255, 255);
-    --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
-    --color-light-text-primary-inverted-shade-7: rgb(237, 237, 237);
-    --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
-    --color-light-text-primary-inverted-shade-24: rgb(194, 194, 194);
-    --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
-    --color-light-text-primary-inverted-shade-40: rgb(153, 153, 153);
-    --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
+    --color-light-text-primary-inverted-tint-20: rgba(255, 255, 255, 0.952);
+    --color-light-text-primary-inverted-tint-30: rgba(255, 255, 255, 0.958);
+    --color-light-text-primary-inverted-shade-7: rgba(237, 237, 237, 0.9442);
+    --color-light-text-primary-inverted-shade-15: rgba(217, 217, 217, 0.949);
+    --color-light-text-primary-inverted-shade-24: rgba(194, 194, 194, 0.9544);
+    --color-light-text-primary-inverted-shade-30: rgba(179, 179, 179, 0.958);
+    --color-light-text-primary-inverted-shade-40: rgba(153, 153, 153, 0.964);
+    --color-light-text-primary-inverted-shade-50: rgba(128, 128, 128, 0.97);
     --color-light-text-secondary-tint-20: rgba(54, 54, 66, 0.64);
     --color-light-text-secondary-tint-30: rgba(79, 79, 90, 0.685);
     --color-light-text-secondary-shade-20: rgba(3, 3, 15, 0.64);

package/themes/dark.css

@@ -151,6 +151,18 @@
         --color-dark-neutral-translucent-100-inverted-press
     );
     --color-light-neutral-translucent-100-press: var(--color-dark-neutral-translucent-100-press);
+    --color-light-neutral-translucent-1300: var(--color-dark-neutral-translucent-1300);
+    --color-light-neutral-translucent-1300-hover: var(--color-dark-neutral-translucent-1300-hover);
+    --color-light-neutral-translucent-1300-inverted: var(
+        --color-dark-neutral-translucent-1300-inverted
+    );
+    --color-light-neutral-translucent-1300-inverted-hover: var(
+        --color-dark-neutral-translucent-1300-inverted-hover
+    );
+    --color-light-neutral-translucent-1300-inverted-press: var(
+        --color-dark-neutral-translucent-1300-inverted-press
+    );
+    --color-light-neutral-translucent-1300-press: var(--color-dark-neutral-translucent-1300-press);
     --color-light-neutral-translucent-1500-hover: var(--color-dark-neutral-translucent-1500-hover);
     --color-light-neutral-translucent-1500-inverted-hover: var(
         --color-dark-neutral-translucent-1500-inverted-hover