feat(vars): update ui-primitives

core-ds · Nov 18, 2024 · 8268245 · 8268245
1 parent 131972b
commit 8268245
Show file tree

Hide file tree

Showing 10 changed files with 347 additions and 100 deletions.
diff --git a/.changeset/moody-bats-wait.md b/.changeset/moody-bats-wait.md
@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-themes': minor
+'@alfalab/core-components-vars': minor
+---
+
+Обновление цветовых палитр
diff --git a/package.json b/package.json
@@ -104,7 +104,7 @@
         "swiper": "^6.8.2",
         "text-mask-core": "^5.1.2",
         "tslib": "^2.4.0",
-        "ui-primitives": "^20.8.0"
+        "ui-primitives": "^22.7.0"
     },
     "devDependencies": {
         "@alfalab/rollup-plugin-postcss": "^3.6.1",

diff --git a/packages/themes/src/dark.css b/packages/themes/src/dark.css
@@ -53,6 +53,12 @@
     --color-light-neutral-100-inverted-hover: var(--color-dark-neutral-100-inverted-hover);
     --color-light-neutral-100-inverted-press: var(--color-dark-neutral-100-inverted-press);
     --color-light-neutral-100-press: var(--color-dark-neutral-100-press);
+    --color-light-neutral-1300: var(--color-dark-neutral-1300);
+    --color-light-neutral-1300-hover: var(--color-dark-neutral-1300-hover);
+    --color-light-neutral-1300-inverted: var(--color-dark-neutral-1300-inverted);
+    --color-light-neutral-1300-inverted-hover: var(--color-dark-neutral-1300-inverted-hover);
+    --color-light-neutral-1300-inverted-press: var(--color-dark-neutral-1300-inverted-press);
+    --color-light-neutral-1300-press: var(--color-dark-neutral-1300-press);
     --color-light-neutral-1500: var(--color-dark-neutral-1500);
     --color-light-neutral-1500-hover: var(--color-dark-neutral-1500-hover);
     --color-light-neutral-1500-inverted: var(--color-dark-neutral-1500-inverted);

diff --git a/packages/themes/src/mixins/dark.css b/packages/themes/src/mixins/dark.css
@@ -53,6 +53,12 @@
     --color-light-neutral-100-inverted-hover: var(--color-dark-neutral-100-inverted-hover);
     --color-light-neutral-100-inverted-press: var(--color-dark-neutral-100-inverted-press);
     --color-light-neutral-100-press: var(--color-dark-neutral-100-press);
+    --color-light-neutral-1300: var(--color-dark-neutral-1300);
+    --color-light-neutral-1300-hover: var(--color-dark-neutral-1300-hover);
+    --color-light-neutral-1300-inverted: var(--color-dark-neutral-1300-inverted);
+    --color-light-neutral-1300-inverted-hover: var(--color-dark-neutral-1300-inverted-hover);
+    --color-light-neutral-1300-inverted-press: var(--color-dark-neutral-1300-inverted-press);
+    --color-light-neutral-1300-press: var(--color-dark-neutral-1300-press);
     --color-light-neutral-1500: var(--color-dark-neutral-1500);
     --color-light-neutral-1500-hover: var(--color-dark-neutral-1500-hover);
     --color-light-neutral-1500-inverted: var(--color-dark-neutral-1500-inverted);

diff --git a/...nderlay/src/__image_snapshots__/underlay-background-color-props-sprite-snap.png b/...nderlay/src/__image_snapshots__/underlay-background-color-props-sprite-snap.png
diff --git a/packages/vars/src/colors-bluetint.css b/packages/vars/src/colors-bluetint.css
diff --git a/packages/vars/src/colors-indigo.css b/packages/vars/src/colors-indigo.css
@@ -47,6 +47,12 @@
     --color-dark-neutral-100-inverted-hover: #e7e8eb;
     --color-dark-neutral-100-inverted-press: #dcdde1;
     --color-dark-neutral-100-press: #29292c;
+    --color-dark-neutral-1300: #f2f3f5;
+    --color-dark-neutral-1300-hover: #d2d3d9;
+    --color-dark-neutral-1300-inverted: #212124;
+    --color-dark-neutral-1300-inverted-hover: #3f3f45;
+    --color-dark-neutral-1300-inverted-press: #5f5f66;
+    --color-dark-neutral-1300-press: #babbc2;
     --color-dark-neutral-1500: #fff;
     --color-dark-neutral-1500-hover: #babbc2;
     --color-dark-neutral-1500-inverted: #121213;
@@ -96,11 +102,11 @@
     --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(245, 246, 253, 0.85);
+    --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(243, 245, 254, 0.75);
+    --color-dark-neutral-translucent-1300-inverted-hover: rgba(2, 2, 10, 0.76);
+    --color-dark-neutral-translucent-1300-inverted-press: rgba(1, 1, 12, 0.63);
+    --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);
@@ -305,6 +311,12 @@
     --color-light-neutral-100-inverted-hover: #212124;
     --color-light-neutral-100-inverted-press: #29292c;
     --color-light-neutral-100-press: #dcdde1;
+    --color-light-neutral-1300: #212124;
+    --color-light-neutral-1300-hover: #3f3f45;
+    --color-light-neutral-1300-inverted: #f2f3f5;
+    --color-light-neutral-1300-inverted-hover: #d2d3d9;
+    --color-light-neutral-1300-inverted-press: #babbc2;
+    --color-light-neutral-1300-press: #5f5f66;
     --color-light-neutral-1500: #121213;
     --color-light-neutral-1500-hover: #3f3f45;
     --color-light-neutral-1500-inverted: #fff;
@@ -354,11 +366,11 @@
     --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-hover: rgba(2, 2, 10, 0.76);
     --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-1300-press: rgba(1, 1, 12, 0.63);
     --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);
@@ -540,6 +552,12 @@
     --color-static-neutral-100-inverted-hover: #212124;
     --color-static-neutral-100-inverted-press: #29292c;
     --color-static-neutral-100-press: #dcdde1;
+    --color-static-neutral-1300: #212124;
+    --color-static-neutral-1300-hover: #3f3f45;
+    --color-static-neutral-1300-inverted: #f2f3f5;
+    --color-static-neutral-1300-inverted-hover: #d2d3d9;
+    --color-static-neutral-1300-inverted-press: #babbc2;
+    --color-static-neutral-1300-press: #5f5f66;
     --color-static-neutral-1500: #121213;
     --color-static-neutral-1500-hover: #3f3f45;
     --color-static-neutral-1500-inverted: #fff;
@@ -589,11 +607,11 @@
     --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-hover: rgba(2, 2, 10, 0.76);
     --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-1300-press: rgba(1, 1, 12, 0.63);
     --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);

diff --git a/packages/vars/src/colors-monochrome.css b/packages/vars/src/colors-monochrome.css
@@ -0,0 +1,192 @@
+:root {
+    --color-static-monochrome-black-2: rgba(0, 0, 0, 0.02);
+    --color-static-monochrome-black-4: rgba(0, 0, 0, 0.04);
+    --color-static-monochrome-black-6: rgba(0, 0, 0, 0.06);
+    --color-static-monochrome-black-8: rgba(0, 0, 0, 0.08);
+    --color-static-monochrome-black-10: rgba(0, 0, 0, 0.1);
+    --color-static-monochrome-black-12: rgba(0, 0, 0, 0.12);
+    --color-static-monochrome-black-16: rgba(0, 0, 0, 0.16);
+    --color-static-monochrome-black-20: rgba(0, 0, 0, 0.2);
+    --color-static-monochrome-black-24: rgba(0, 0, 0, 0.24);
+    --color-static-monochrome-black-32: rgba(0, 0, 0, 0.32);
+    --color-static-monochrome-black-40: rgba(0, 0, 0, 0.4);
+    --color-static-monochrome-black-44: rgba(0, 0, 0, 0.44);
+    --color-static-monochrome-black-48: rgba(0, 0, 0, 0.48);
+    --color-static-monochrome-black-56: rgba(0, 0, 0, 0.56);
+    --color-static-monochrome-black-64: rgba(0, 0, 0, 0.64);
+    --color-static-monochrome-black-72: rgba(0, 0, 0, 0.72);
+    --color-static-monochrome-black-80: rgba(0, 0, 0, 0.8);
+    --color-static-monochrome-black-88: rgba(0, 0, 0, 0.88);
+    --color-static-monochrome-black-100: #000;
+    --color-static-monochrome-white-2: rgba(255, 255, 255, 0.02);
+    --color-static-monochrome-white-4: rgba(255, 255, 255, 0.04);
+    --color-static-monochrome-white-6: rgba(255, 255, 255, 0.06);
+    --color-static-monochrome-white-8: rgba(255, 255, 255, 0.08);
+    --color-static-monochrome-white-10: rgba(255, 255, 255, 0.1);
+    --color-static-monochrome-white-12: rgba(255, 255, 255, 0.12);
+    --color-static-monochrome-white-16: rgba(255, 255, 255, 0.16);
+    --color-static-monochrome-white-20: rgba(255, 255, 255, 0.2);
+    --color-static-monochrome-white-24: rgba(255, 255, 255, 0.24);
+    --color-static-monochrome-white-32: rgba(255, 255, 255, 0.32);
+    --color-static-monochrome-white-40: rgba(255, 255, 255, 0.4);
+    --color-static-monochrome-white-44: rgba(255, 255, 255, 0.44);
+    --color-static-monochrome-white-48: rgba(255, 255, 255, 0.48);
+    --color-static-monochrome-white-56: rgba(255, 255, 255, 0.56);
+    --color-static-monochrome-white-64: rgba(255, 255, 255, 0.64);
+    --color-static-monochrome-white-72: rgba(255, 255, 255, 0.72);
+    --color-static-monochrome-white-80: rgba(255, 255, 255, 0.8);
+    --color-static-monochrome-white-88: rgba(255, 255, 255, 0.88);
+    --color-static-monochrome-white-100: #fff;
+    --color-light-monochrome-black-2: rgba(0, 0, 0, 0.02);
+    --color-light-monochrome-black-2-inverted: rgba(255, 255, 255, 0.02);
+    --color-light-monochrome-black-4: rgba(0, 0, 0, 0.04);
+    --color-light-monochrome-black-4-inverted: rgba(255, 255, 255, 0.04);
+    --color-light-monochrome-black-6: rgba(0, 0, 0, 0.06);
+    --color-light-monochrome-black-6-inverted: rgba(255, 255, 255, 0.06);
+    --color-light-monochrome-black-8: rgba(0, 0, 0, 0.08);
+    --color-light-monochrome-black-8-inverted: rgba(255, 255, 255, 0.08);
+    --color-light-monochrome-black-10: rgba(0, 0, 0, 0.1);
+    --color-light-monochrome-black-10-inverted: rgba(255, 255, 255, 0.1);
+    --color-light-monochrome-black-12: rgba(0, 0, 0, 0.12);
+    --color-light-monochrome-black-12-inverted: rgba(255, 255, 255, 0.12);
+    --color-light-monochrome-black-16: rgba(0, 0, 0, 0.16);
+    --color-light-monochrome-black-16-inverted: rgba(255, 255, 255, 0.16);
+    --color-light-monochrome-black-20: rgba(0, 0, 0, 0.2);
+    --color-light-monochrome-black-20-inverted: rgba(255, 255, 255, 0.2);
+    --color-light-monochrome-black-24: rgba(0, 0, 0, 0.24);
+    --color-light-monochrome-black-24-inverted: rgba(255, 255, 255, 0.24);
+    --color-light-monochrome-black-32: rgba(0, 0, 0, 0.32);
+    --color-light-monochrome-black-32-inverted: rgba(255, 255, 255, 0.32);
+    --color-light-monochrome-black-40: rgba(0, 0, 0, 0.4);
+    --color-light-monochrome-black-40-inverted: rgba(255, 255, 255, 0.4);
+    --color-light-monochrome-black-44: rgba(0, 0, 0, 0.44);
+    --color-light-monochrome-black-44-inverted: rgba(255, 255, 255, 0.44);
+    --color-light-monochrome-black-48: rgba(0, 0, 0, 0.48);
+    --color-light-monochrome-black-48-inverted: rgba(255, 255, 255, 0.48);
+    --color-light-monochrome-black-56: rgba(0, 0, 0, 0.56);
+    --color-light-monochrome-black-56-inverted: rgba(255, 255, 255, 0.56);
+    --color-light-monochrome-black-64: rgba(0, 0, 0, 0.64);
+    --color-light-monochrome-black-64-inverted: rgba(255, 255, 255, 0.64);
+    --color-light-monochrome-black-72: rgba(0, 0, 0, 0.72);
+    --color-light-monochrome-black-72-inverted: rgba(255, 255, 255, 0.72);
+    --color-light-monochrome-black-80: rgba(0, 0, 0, 0.8);
+    --color-light-monochrome-black-80-inverted: rgba(255, 255, 255, 0.8);
+    --color-light-monochrome-black-88: rgba(0, 0, 0, 0.88);
+    --color-light-monochrome-black-88-inverted: rgba(255, 255, 255, 0.88);
+    --color-light-monochrome-black-100: #000;
+    --color-light-monochrome-black-100-inverted: #fff;
+    --color-light-monochrome-white-2: rgba(255, 255, 255, 0.02);
+    --color-light-monochrome-white-2-inverted: rgba(0, 0, 0, 0.02);
+    --color-light-monochrome-white-4: rgba(255, 255, 255, 0.04);
+    --color-light-monochrome-white-4-inverted: rgba(0, 0, 0, 0.04);
+    --color-light-monochrome-white-6: rgba(255, 255, 255, 0.06);
+    --color-light-monochrome-white-6-inverted: rgba(0, 0, 0, 0.06);
+    --color-light-monochrome-white-8: rgba(255, 255, 255, 0.08);
+    --color-light-monochrome-white-8-inverted: rgba(0, 0, 0, 0.08);
+    --color-light-monochrome-white-10: rgba(255, 255, 255, 0.1);
+    --color-light-monochrome-white-10-inverted: rgba(0, 0, 0, 0.1);
+    --color-light-monochrome-white-12: rgba(255, 255, 255, 0.12);
+    --color-light-monochrome-white-12-inverted: rgba(0, 0, 0, 0.12);
+    --color-light-monochrome-white-16: rgba(255, 255, 255, 0.16);
+    --color-light-monochrome-white-16-inverted: rgba(0, 0, 0, 0.16);
+    --color-light-monochrome-white-20: rgba(255, 255, 255, 0.2);
+    --color-light-monochrome-white-20-inverted: rgba(0, 0, 0, 0.2);
+    --color-light-monochrome-white-24: rgba(255, 255, 255, 0.24);
+    --color-light-monochrome-white-24-inverted: rgba(0, 0, 0, 0.24);
+    --color-light-monochrome-white-32: rgba(255, 255, 255, 0.32);
+    --color-light-monochrome-white-32-inverted: rgba(0, 0, 0, 0.32);
+    --color-light-monochrome-white-40: rgba(255, 255, 255, 0.4);
+    --color-light-monochrome-white-40-inverted: rgba(0, 0, 0, 0.4);
+    --color-light-monochrome-white-44: rgba(255, 255, 255, 0.44);
+    --color-light-monochrome-white-44-inverted: rgba(0, 0, 0, 0.44);
+    --color-light-monochrome-white-48: rgba(255, 255, 255, 0.48);
+    --color-light-monochrome-white-48-inverted: rgba(0, 0, 0, 0.48);
+    --color-light-monochrome-white-56: rgba(255, 255, 255, 0.56);
+    --color-light-monochrome-white-56-inverted: rgba(0, 0, 0, 0.56);
+    --color-light-monochrome-white-64: rgba(255, 255, 255, 0.64);
+    --color-light-monochrome-white-64-inverted: rgba(0, 0, 0, 0.64);
+    --color-light-monochrome-white-72: rgba(255, 255, 255, 0.72);
+    --color-light-monochrome-white-72-inverted: rgba(0, 0, 0, 0.72);
+    --color-light-monochrome-white-80: rgba(255, 255, 255, 0.8);
+    --color-light-monochrome-white-80-inverted: rgba(0, 0, 0, 0.8);
+    --color-light-monochrome-white-88: rgba(255, 255, 255, 0.88);
+    --color-light-monochrome-white-88-inverted: rgba(0, 0, 0, 0.88);
+    --color-light-monochrome-white-100: #fff;
+    --color-light-monochrome-white-100-inverted: #000;
+    --color-dark-monochrome-black-2: rgba(255, 255, 255, 0.02);
+    --color-dark-monochrome-black-2-inverted: rgba(0, 0, 0, 0.02);
+    --color-dark-monochrome-black-4: rgba(255, 255, 255, 0.04);
+    --color-dark-monochrome-black-4-inverted: rgba(0, 0, 0, 0.04);
+    --color-dark-monochrome-black-6: rgba(255, 255, 255, 0.06);
+    --color-dark-monochrome-black-6-inverted: rgba(0, 0, 0, 0.06);
+    --color-dark-monochrome-black-8: rgba(255, 255, 255, 0.08);
+    --color-dark-monochrome-black-8-inverted: rgba(0, 0, 0, 0.08);
+    --color-dark-monochrome-black-10: rgba(255, 255, 255, 0.1);
+    --color-dark-monochrome-black-10-inverted: rgba(0, 0, 0, 0.1);
+    --color-dark-monochrome-black-12: rgba(255, 255, 255, 0.12);
+    --color-dark-monochrome-black-12-inverted: rgba(0, 0, 0, 0.12);
+    --color-dark-monochrome-black-16: rgba(255, 255, 255, 0.16);
+    --color-dark-monochrome-black-16-inverted: rgba(0, 0, 0, 0.16);
+    --color-dark-monochrome-black-20: rgba(255, 255, 255, 0.2);
+    --color-dark-monochrome-black-20-inverted: rgba(0, 0, 0, 0.2);
+    --color-dark-monochrome-black-24: rgba(255, 255, 255, 0.24);
+    --color-dark-monochrome-black-24-inverted: rgba(0, 0, 0, 0.24);
+    --color-dark-monochrome-black-32: rgba(255, 255, 255, 0.32);
+    --color-dark-monochrome-black-32-inverted: rgba(0, 0, 0, 0.32);
+    --color-dark-monochrome-black-40: rgba(255, 255, 255, 0.4);
+    --color-dark-monochrome-black-40-inverted: rgba(0, 0, 0, 0.4);
+    --color-dark-monochrome-black-44: rgba(255, 255, 255, 0.44);
+    --color-dark-monochrome-black-44-inverted: rgba(0, 0, 0, 0.44);
+    --color-dark-monochrome-black-48: rgba(255, 255, 255, 0.48);
+    --color-dark-monochrome-black-48-inverted: rgba(0, 0, 0, 0.48);
+    --color-dark-monochrome-black-56: rgba(255, 255, 255, 0.56);
+    --color-dark-monochrome-black-56-inverted: rgba(0, 0, 0, 0.56);
+    --color-dark-monochrome-black-64: rgba(255, 255, 255, 0.64);
+    --color-dark-monochrome-black-64-inverted: rgba(0, 0, 0, 0.64);
+    --color-dark-monochrome-black-72: rgba(255, 255, 255, 0.72);
+    --color-dark-monochrome-black-72-inverted: rgba(0, 0, 0, 0.72);
+    --color-dark-monochrome-black-80: rgba(255, 255, 255, 0.8);
+    --color-dark-monochrome-black-80-inverted: rgba(0, 0, 0, 0.8);
+    --color-dark-monochrome-black-88: rgba(255, 255, 255, 0.88);
+    --color-dark-monochrome-black-88-inverted: rgba(0, 0, 0, 0.88);
+    --color-dark-monochrome-black-100: #fff;
+    --color-dark-monochrome-black-100-inverted: #000;
+    --color-dark-monochrome-white-2: rgba(0, 0, 0, 0.02);
+    --color-dark-monochrome-white-2-inverted: rgba(255, 255, 255, 0.02);
+    --color-dark-monochrome-white-4: rgba(0, 0, 0, 0.04);
+    --color-dark-monochrome-white-4-inverted: rgba(255, 255, 255, 0.04);
+    --color-dark-monochrome-white-6: rgba(0, 0, 0, 0.06);
+    --color-dark-monochrome-white-6-inverted: rgba(255, 255, 255, 0.06);
+    --color-dark-monochrome-white-8: rgba(0, 0, 0, 0.08);
+    --color-dark-monochrome-white-8-inverted: rgba(255, 255, 255, 0.08);
+    --color-dark-monochrome-white-10: rgba(0, 0, 0, 0.1);
+    --color-dark-monochrome-white-10-inverted: rgba(255, 255, 255, 0.1);
+    --color-dark-monochrome-white-12: rgba(0, 0, 0, 0.12);
+    --color-dark-monochrome-white-12-inverted: rgba(255, 255, 255, 0.12);
+    --color-dark-monochrome-white-16: rgba(0, 0, 0, 0.16);
+    --color-dark-monochrome-white-16-inverted: rgba(255, 255, 255, 0.16);
+    --color-dark-monochrome-white-20: rgba(0, 0, 0, 0.2);
+    --color-dark-monochrome-white-20-inverted: rgba(255, 255, 255, 0.2);
+    --color-dark-monochrome-white-24: rgba(0, 0, 0, 0.24);
+    --color-dark-monochrome-white-24-inverted: rgba(255, 255, 255, 0.24);
+    --color-dark-monochrome-white-32: rgba(0, 0, 0, 0.32);
+    --color-dark-monochrome-white-32-inverted: rgba(255, 255, 255, 0.32);
+    --color-dark-monochrome-white-40: rgba(0, 0, 0, 0.4);
+    --color-dark-monochrome-white-40-inverted: rgba(255, 255, 255, 0.4);
+    --color-dark-monochrome-white-44: rgba(0, 0, 0, 0.44);
+    --color-dark-monochrome-white-44-inverted: rgba(255, 255, 255, 0.44);
+    --color-dark-monochrome-white-48: rgba(0, 0, 0, 0.48);
+    --color-dark-monochrome-white-48-inverted: rgba(255, 255, 255, 0.48);
+    --color-dark-monochrome-white-56: rgba(0, 0, 0, 0.56);
+    --color-dark-monochrome-white-56-inverted: rgba(255, 255, 255, 0.56);
+    --color-dark-monochrome-white-64: rgba(0, 0, 0, 0.64);
+    --color-dark-monochrome-white-64-inverted: rgba(255, 255, 255, 0.64);
+    --color-dark-monochrome-white-72: rgba(0, 0, 0, 0.72);
+    --color-dark-monochrome-white-72-inverted: rgba(255, 255, 255, 0.72);
+    --color-dark-monochrome-white-80: rgba(0, 0, 0, 0.8);
+    --color-dark-monochrome-white-80-inverted: rgba(255, 255, 255, 0.8);
+    --color-dark-monochrome-white-88: rgba(0, 0, 0, 0.88);
+    --color-dark-monochrome-white-88-inverted: rgba(255, 255, 255, 0.88);
+    --color-dark-monochrome-white-100: #000;
+    --color-dark-monochrome-white-100-inverted: #fff;
+}