From 8268245c1890eb6cd1855126616c6796e9b6b0aa Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Mon, 18 Nov 2024 19:37:59 +0700 Subject: [PATCH] feat(vars): update ui-primitives --- .changeset/moody-bats-wait.md | 6 + package.json | 2 +- packages/themes/src/dark.css | 6 + packages/themes/src/mixins/dark.css | 6 + ...lay-background-color-props-sprite-snap.png | 4 +- packages/vars/src/colors-bluetint.css | 188 +++++++++-------- packages/vars/src/colors-indigo.css | 34 +++- packages/vars/src/colors-monochrome.css | 192 ++++++++++++++++++ packages/vars/src/colors-x5.css | 1 + yarn.lock | 8 +- 10 files changed, 347 insertions(+), 100 deletions(-) create mode 100644 .changeset/moody-bats-wait.md create mode 100644 packages/vars/src/colors-monochrome.css diff --git a/.changeset/moody-bats-wait.md b/.changeset/moody-bats-wait.md new file mode 100644 index 0000000000..8f5af24328 --- /dev/null +++ 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 index 49a8e7d911..45f2366707 100644 --- 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 index e2659bf09e..c00af57377 100644 --- 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 index baf7a9ae1c..4855853fc8 100644 --- 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/packages/underlay/src/__image_snapshots__/underlay-background-color-props-sprite-snap.png b/packages/underlay/src/__image_snapshots__/underlay-background-color-props-sprite-snap.png index fe472d72f9..c507ac7b43 100644 --- a/packages/underlay/src/__image_snapshots__/underlay-background-color-props-sprite-snap.png +++ b/packages/underlay/src/__image_snapshots__/underlay-background-color-props-sprite-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b1ec3120f58f1c36b145ab11a5cadb39d70677a0e460e87350d69acea11e5cb5 -size 22354 +oid sha256:de729b8aa7eb616273063fbc7991ba2f86ba5c3195b637c572d0f01b15780271 +size 23023 diff --git a/packages/vars/src/colors-bluetint.css b/packages/vars/src/colors-bluetint.css index 9f90e7273f..2a6afb370f 100644 --- a/packages/vars/src/colors-bluetint.css +++ b/packages/vars/src/colors-bluetint.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; @@ -98,8 +104,8 @@ --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-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); @@ -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); @@ -527,7 +539,7 @@ --color-static-accent-secondary-inverted-hover: #dcdde1; --color-static-accent-secondary-inverted-press: #d2d3d9; --color-static-accent-secondary-press: #353539; - --color-static-bg-primary-dark: #0e0e0e; + --color-static-bg-primary-dark: #121213; --color-static-neutral-0: #fff; --color-static-neutral-0-hover: #e7e8eb; --color-static-neutral-0-inverted: #262629; @@ -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); @@ -715,7 +733,7 @@ --color-dark-bg-opaque: rgba(255, 255, 255, 0.8); /* deprecated */ --color-dark-bg-overlay: rgba(0, 0, 0, 0.8); /* deprecated */ --color-dark-bg-positive-muted: #232d25; /* deprecated */ - --color-dark-bg-primary: #0e0e0e; /* deprecated */ + --color-dark-bg-primary: #121213; /* deprecated */ --color-dark-bg-primary-grouped: #1a1a1d; /* deprecated */ --color-dark-bg-primary-inverted: #fff; /* deprecated */ --color-dark-bg-quaternary: #36363a; /* deprecated */ @@ -744,8 +762,8 @@ --color-dark-graphic-negative: #ff5431; /* deprecated */ --color-dark-graphic-neutral: #2a2a2c; /* deprecated */ --color-dark-graphic-positive: #17d055; /* deprecated */ - --color-dark-graphic-primary: #fff; /* deprecated */ - --color-dark-graphic-primary-inverted: #0e0e0e; /* deprecated */ + --color-dark-graphic-primary: #f1f1f1; /* deprecated */ + --color-dark-graphic-primary-inverted: #212124; /* deprecated */ --color-dark-graphic-quaternary: #27272a; /* deprecated */ --color-dark-graphic-quaternary-inverted: #e7e8ec; /* deprecated */ --color-dark-graphic-secondary: #898991; /* deprecated */ @@ -788,7 +806,7 @@ --color-light-bg-positive-muted: #dff8e5; /* deprecated */ --color-light-bg-primary: #fff; /* deprecated */ --color-light-bg-primary-grouped: #f2f2f6; /* deprecated */ - --color-light-bg-primary-inverted: #0e0e0e; /* deprecated */ + --color-light-bg-primary-inverted: #121213; /* deprecated */ --color-light-bg-quaternary: #dcdee2; /* deprecated */ --color-light-bg-quaternary-inverted: #36363a; /* deprecated */ --color-light-bg-secondary: #f2f3f5; /* deprecated */ @@ -815,8 +833,8 @@ --color-light-graphic-negative: #ff5431; /* deprecated */ --color-light-graphic-neutral: #dcdcdd; /* deprecated */ --color-light-graphic-positive: #0cc44d; /* deprecated */ - --color-light-graphic-primary: #0e0e0e; /* deprecated */ - --color-light-graphic-primary-inverted: #fff; /* deprecated */ + --color-light-graphic-primary: #212124; /* deprecated */ + --color-light-graphic-primary-inverted: #f1f1f1; /* deprecated */ --color-light-graphic-quaternary: #e7e8ec; /* deprecated */ --color-light-graphic-quaternary-inverted: #27272a; /* deprecated */ --color-light-graphic-secondary: #898991; /* deprecated */ @@ -858,8 +876,8 @@ --color-static-bg-tertiary-light: #edeef0; /* deprecated */ --color-static-border-accent: #ef3124; /* deprecated */ --color-static-graphic-accent: #ef3124; /* deprecated */ - --color-static-graphic-dark: #0e0e0e; /* deprecated */ - --color-static-graphic-light: #fff; /* deprecated */ + --color-static-graphic-dark: #212124; /* deprecated */ + --color-static-graphic-light: #f1f1f1; /* deprecated */ --color-static-text-accent: #ef3124; /* deprecated */ --color-static-text-secondary-dark-transparent: rgba(3, 3, 16, 0.56); /* deprecated */ --color-static-text-secondary-light-transparent: rgba(235, 235, 245, 0.6); /* deprecated */ @@ -915,10 +933,10 @@ --color-light-text-secondary-shade-40: rgba(2, 2, 11, 0.73); /* deprecated */ --color-light-text-secondary-inverted-tint-20: rgba(241, 241, 252, 0.64); /* deprecated */ --color-light-text-secondary-inverted-tint-30: rgba(243, 243, 252, 0.685); /* deprecated */ - --color-static-bg-primary-dark-alpha-10: rgba(14, 14, 14, 0.1); /* deprecated */ - --color-static-bg-primary-dark-alpha-20: rgba(14, 14, 14, 0.2); /* deprecated */ - --color-static-bg-primary-dark-tint-15: rgb(50, 50, 50); /* deprecated */ - --color-static-bg-primary-dark-tint-20: rgb(62, 62, 62); /* deprecated */ + --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 19, 0.1); /* deprecated */ + --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 19, 0.2); /* deprecated */ + --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54); /* deprecated */ + --color-static-bg-primary-dark-tint-20: rgb(65, 65, 66); /* deprecated */ --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3); /* deprecated */ --color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3); /* deprecated */ --color-dark-bg-accent-shade-15: rgb(203, 42, 31); /* deprecated */ @@ -927,18 +945,18 @@ --color-dark-bg-accent-tint-10: rgb(241, 70, 58); /* deprecated */ --color-dark-bg-accent-tint-15: rgb(241, 80, 69); /* deprecated */ --color-dark-bg-accent-tint-30: rgb(244, 111, 102); /* deprecated */ - --color-dark-bg-primary-alpha-4: rgba(14, 14, 14, 0.04); /* deprecated */ - --color-dark-bg-primary-alpha-8: rgba(14, 14, 14, 0.08); /* deprecated */ - --color-dark-bg-primary-alpha-12: rgba(14, 14, 14, 0.12); /* deprecated */ - --color-dark-bg-primary-alpha-15: rgba(14, 14, 14, 0.15); /* deprecated */ - --color-dark-bg-primary-alpha-16: rgba(14, 14, 14, 0.16); /* deprecated */ - --color-dark-bg-primary-alpha-20: rgba(14, 14, 14, 0.2); /* deprecated */ - --color-dark-bg-primary-alpha-30: rgba(14, 14, 14, 0.3); /* deprecated */ - --color-dark-bg-primary-alpha-32: rgba(14, 14, 14, 0.32); /* deprecated */ - --color-dark-bg-primary-alpha-37: rgba(14, 14, 14, 0.37); /* deprecated */ - --color-dark-bg-primary-alpha-40: rgba(14, 14, 14, 0.4); /* deprecated */ - --color-dark-bg-primary-tint-7: rgb(31, 31, 31); /* deprecated */ - --color-dark-bg-primary-tint-15: rgb(50, 50, 50); /* deprecated */ + --color-dark-bg-primary-alpha-4: rgba(18, 18, 19, 0.04); /* deprecated */ + --color-dark-bg-primary-alpha-8: rgba(18, 18, 19, 0.08); /* deprecated */ + --color-dark-bg-primary-alpha-12: rgba(18, 18, 19, 0.12); /* deprecated */ + --color-dark-bg-primary-alpha-15: rgba(18, 18, 19, 0.15); /* deprecated */ + --color-dark-bg-primary-alpha-16: rgba(18, 18, 19, 0.16); /* deprecated */ + --color-dark-bg-primary-alpha-20: rgba(18, 18, 19, 0.2); /* deprecated */ + --color-dark-bg-primary-alpha-30: rgba(18, 18, 19, 0.3); /* deprecated */ + --color-dark-bg-primary-alpha-32: rgba(18, 18, 19, 0.32); /* deprecated */ + --color-dark-bg-primary-alpha-37: rgba(18, 18, 19, 0.37); /* deprecated */ + --color-dark-bg-primary-alpha-40: rgba(18, 18, 19, 0.4); /* deprecated */ + --color-dark-bg-primary-tint-7: rgb(35, 35, 36); /* deprecated */ + --color-dark-bg-primary-tint-15: rgb(54, 54, 54); /* deprecated */ --color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03); /* deprecated */ --color-dark-bg-primary-inverted-alpha-4: rgba(255, 255, 255, 0.04); /* deprecated */ --color-dark-bg-primary-inverted-alpha-5: rgba(255, 255, 255, 0.05); /* deprecated */ @@ -1000,23 +1018,23 @@ --color-dark-graphic-positive-alpha-10: rgba(23, 208, 85, 0.1); /* deprecated */ --color-dark-graphic-positive-tint-10: rgb(46, 213, 102); /* deprecated */ --color-dark-graphic-positive-tint-30: rgb(93, 222, 136); /* deprecated */ - --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3); /* deprecated */ - --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4); /* deprecated */ - --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5); /* deprecated */ - --color-dark-graphic-primary-alpha-60: rgba(255, 255, 255, 0.6); /* deprecated */ - --color-dark-graphic-primary-shade-15: rgb(217, 217, 217); /* deprecated */ - --color-dark-graphic-primary-shade-20: rgb(204, 204, 204); /* deprecated */ - --color-dark-graphic-primary-shade-30: rgb(179, 179, 179); /* deprecated */ - --color-dark-graphic-primary-tint-10: rgb(255, 255, 255); /* deprecated */ - --color-dark-graphic-primary-tint-30: rgb(255, 255, 255); /* deprecated */ - --color-dark-graphic-primary-inverted-alpha-30: rgba(14, 14, 14, 0.3); /* deprecated */ - --color-dark-graphic-primary-inverted-alpha-40: rgba(14, 14, 14, 0.4); /* deprecated */ - --color-dark-graphic-primary-inverted-alpha-50: rgba(14, 14, 14, 0.5); /* deprecated */ - --color-dark-graphic-primary-inverted-alpha-60: rgba(14, 14, 14, 0.6); /* deprecated */ - --color-dark-graphic-primary-inverted-tint-7: rgb(31, 31, 31); /* deprecated */ - --color-dark-graphic-primary-inverted-tint-10: rgb(38, 38, 38); /* deprecated */ - --color-dark-graphic-primary-inverted-tint-15: rgb(50, 50, 50); /* deprecated */ - --color-dark-graphic-primary-inverted-tint-30: rgb(86, 86, 86); /* deprecated */ + --color-dark-graphic-primary-alpha-30: rgba(241, 241, 241, 0.3); /* deprecated */ + --color-dark-graphic-primary-alpha-40: rgba(241, 241, 241, 0.4); /* deprecated */ + --color-dark-graphic-primary-alpha-50: rgba(241, 241, 241, 0.5); /* deprecated */ + --color-dark-graphic-primary-alpha-60: rgba(241, 241, 241, 0.6); /* deprecated */ + --color-dark-graphic-primary-shade-15: rgb(205, 205, 205); /* deprecated */ + --color-dark-graphic-primary-shade-20: rgb(193, 193, 193); /* deprecated */ + --color-dark-graphic-primary-shade-30: rgb(169, 169, 169); /* deprecated */ + --color-dark-graphic-primary-tint-10: rgb(242, 242, 242); /* deprecated */ + --color-dark-graphic-primary-tint-30: rgb(245, 245, 245); /* deprecated */ + --color-dark-graphic-primary-inverted-alpha-30: rgba(33, 33, 36, 0.3); /* deprecated */ + --color-dark-graphic-primary-inverted-alpha-40: rgba(33, 33, 36, 0.4); /* deprecated */ + --color-dark-graphic-primary-inverted-alpha-50: rgba(33, 33, 36, 0.5); /* deprecated */ + --color-dark-graphic-primary-inverted-alpha-60: rgba(33, 33, 36, 0.6); /* deprecated */ + --color-dark-graphic-primary-inverted-tint-7: rgb(49, 49, 51); /* deprecated */ + --color-dark-graphic-primary-inverted-tint-10: rgb(55, 55, 58); /* deprecated */ + --color-dark-graphic-primary-inverted-tint-15: rgb(66, 66, 69); /* deprecated */ + --color-dark-graphic-primary-inverted-tint-30: rgb(100, 100, 102); /* deprecated */ --color-dark-graphic-quaternary-tint-10: rgb(61, 61, 63); /* deprecated */ --color-dark-graphic-secondary-alpha-30: rgba(137, 137, 145, 0.3); /* deprecated */ --color-dark-graphic-secondary-tint-30: rgb(172, 172, 178); /* deprecated */ @@ -1076,24 +1094,24 @@ --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4); /* deprecated */ --color-light-bg-primary-shade-7: rgb(237, 237, 237); /* deprecated */ --color-light-bg-primary-shade-15: rgb(217, 217, 217); /* deprecated */ - --color-light-bg-primary-inverted-alpha-3: rgba(14, 14, 14, 0.03); /* deprecated */ - --color-light-bg-primary-inverted-alpha-4: rgba(14, 14, 14, 0.04); /* deprecated */ - --color-light-bg-primary-inverted-alpha-5: rgba(14, 14, 14, 0.05); /* deprecated */ - --color-light-bg-primary-inverted-alpha-7: rgba(14, 14, 14, 0.07); /* deprecated */ - --color-light-bg-primary-inverted-alpha-8: rgba(14, 14, 14, 0.08); /* deprecated */ - --color-light-bg-primary-inverted-alpha-10: rgba(14, 14, 14, 0.1); /* deprecated */ - --color-light-bg-primary-inverted-alpha-12: rgba(14, 14, 14, 0.12); /* deprecated */ - --color-light-bg-primary-inverted-alpha-15: rgba(14, 14, 14, 0.15); /* deprecated */ - --color-light-bg-primary-inverted-alpha-16: rgba(14, 14, 14, 0.16); /* deprecated */ - --color-light-bg-primary-inverted-alpha-20: rgba(14, 14, 14, 0.2); /* deprecated */ - --color-light-bg-primary-inverted-alpha-24: rgba(14, 14, 14, 0.24); /* deprecated */ - --color-light-bg-primary-inverted-alpha-30: rgba(14, 14, 14, 0.3); /* deprecated */ - --color-light-bg-primary-inverted-alpha-32: rgba(14, 14, 14, 0.32); /* deprecated */ - --color-light-bg-primary-inverted-alpha-40: rgba(14, 14, 14, 0.4); /* deprecated */ - --color-light-bg-primary-inverted-alpha-50: rgba(14, 14, 14, 0.5); /* deprecated */ - --color-light-bg-primary-inverted-tint-7: rgb(31, 31, 31); /* deprecated */ - --color-light-bg-primary-inverted-tint-15: rgb(50, 50, 50); /* deprecated */ - --color-light-bg-primary-inverted-tint-20: rgb(62, 62, 62); /* deprecated */ + --color-light-bg-primary-inverted-alpha-3: rgba(18, 18, 19, 0.03); /* deprecated */ + --color-light-bg-primary-inverted-alpha-4: rgba(18, 18, 19, 0.04); /* deprecated */ + --color-light-bg-primary-inverted-alpha-5: rgba(18, 18, 19, 0.05); /* deprecated */ + --color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 19, 0.07); /* deprecated */ + --color-light-bg-primary-inverted-alpha-8: rgba(18, 18, 19, 0.08); /* deprecated */ + --color-light-bg-primary-inverted-alpha-10: rgba(18, 18, 19, 0.1); /* deprecated */ + --color-light-bg-primary-inverted-alpha-12: rgba(18, 18, 19, 0.12); /* deprecated */ + --color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 19, 0.15); /* deprecated */ + --color-light-bg-primary-inverted-alpha-16: rgba(18, 18, 19, 0.16); /* deprecated */ + --color-light-bg-primary-inverted-alpha-20: rgba(18, 18, 19, 0.2); /* deprecated */ + --color-light-bg-primary-inverted-alpha-24: rgba(18, 18, 19, 0.24); /* deprecated */ + --color-light-bg-primary-inverted-alpha-30: rgba(18, 18, 19, 0.3); /* deprecated */ + --color-light-bg-primary-inverted-alpha-32: rgba(18, 18, 19, 0.32); /* deprecated */ + --color-light-bg-primary-inverted-alpha-40: rgba(18, 18, 19, 0.4); /* deprecated */ + --color-light-bg-primary-inverted-alpha-50: rgba(18, 18, 19, 0.5); /* deprecated */ + --color-light-bg-primary-inverted-tint-7: rgb(35, 35, 36); /* deprecated */ + --color-light-bg-primary-inverted-tint-15: rgb(54, 54, 54); /* deprecated */ + --color-light-bg-primary-inverted-tint-20: rgb(65, 65, 66); /* deprecated */ --color-light-bg-quaternary-alpha-30: rgba(220, 222, 226, 0.3); /* deprecated */ --color-light-bg-quaternary-shade-7: rgb(205, 206, 210); /* deprecated */ --color-light-bg-quaternary-shade-10: rgb(198, 200, 203); /* deprecated */ @@ -1137,23 +1155,23 @@ --color-light-graphic-positive-alpha-10: rgba(12, 196, 77, 0.1); /* deprecated */ --color-light-graphic-positive-shade-10: rgb(11, 176, 69); /* deprecated */ --color-light-graphic-positive-shade-30: rgb(8, 137, 54); /* deprecated */ - --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3); /* deprecated */ - --color-light-graphic-primary-alpha-40: rgba(14, 14, 14, 0.4); /* deprecated */ - --color-light-graphic-primary-alpha-50: rgba(14, 14, 14, 0.5); /* deprecated */ - --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6); /* deprecated */ - --color-light-graphic-primary-tint-15: rgb(50, 50, 50); /* deprecated */ - --color-light-graphic-primary-tint-20: rgb(62, 62, 62); /* deprecated */ - --color-light-graphic-primary-tint-30: rgb(86, 86, 86); /* deprecated */ - --color-light-graphic-primary-shade-10: rgb(13, 13, 13); /* deprecated */ - --color-light-graphic-primary-shade-30: rgb(10, 10, 10); /* deprecated */ - --color-light-graphic-primary-inverted-alpha-30: rgba(255, 255, 255, 0.3); /* deprecated */ - --color-light-graphic-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4); /* deprecated */ - --color-light-graphic-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5); /* deprecated */ - --color-light-graphic-primary-inverted-alpha-60: rgba(255, 255, 255, 0.6); /* deprecated */ - --color-light-graphic-primary-inverted-shade-7: rgb(237, 237, 237); /* deprecated */ - --color-light-graphic-primary-inverted-shade-10: rgb(230, 230, 230); /* deprecated */ - --color-light-graphic-primary-inverted-shade-15: rgb(217, 217, 217); /* deprecated */ - --color-light-graphic-primary-inverted-shade-30: rgb(179, 179, 179); /* deprecated */ + --color-light-graphic-primary-alpha-30: rgba(33, 33, 36, 0.3); /* deprecated */ + --color-light-graphic-primary-alpha-40: rgba(33, 33, 36, 0.4); /* deprecated */ + --color-light-graphic-primary-alpha-50: rgba(33, 33, 36, 0.5); /* deprecated */ + --color-light-graphic-primary-alpha-60: rgba(33, 33, 36, 0.6); /* deprecated */ + --color-light-graphic-primary-tint-15: rgb(66, 66, 69); /* deprecated */ + --color-light-graphic-primary-tint-20: rgb(77, 77, 80); /* deprecated */ + --color-light-graphic-primary-tint-30: rgb(100, 100, 102); /* deprecated */ + --color-light-graphic-primary-shade-10: rgb(30, 30, 32); /* deprecated */ + --color-light-graphic-primary-shade-30: rgb(23, 23, 25); /* deprecated */ + --color-light-graphic-primary-inverted-alpha-30: rgba(241, 241, 241, 0.3); /* deprecated */ + --color-light-graphic-primary-inverted-alpha-40: rgba(241, 241, 241, 0.4); /* deprecated */ + --color-light-graphic-primary-inverted-alpha-50: rgba(241, 241, 241, 0.5); /* deprecated */ + --color-light-graphic-primary-inverted-alpha-60: rgba(241, 241, 241, 0.6); /* deprecated */ + --color-light-graphic-primary-inverted-shade-7: rgb(224, 224, 224); /* deprecated */ + --color-light-graphic-primary-inverted-shade-10: rgb(217, 217, 217); /* deprecated */ + --color-light-graphic-primary-inverted-shade-15: rgb(205, 205, 205); /* deprecated */ + --color-light-graphic-primary-inverted-shade-30: rgb(169, 169, 169); /* deprecated */ --color-light-graphic-quaternary-shade-10: rgb(208, 209, 212); /* deprecated */ --color-light-graphic-secondary-alpha-30: rgba(137, 137, 145, 0.3); /* deprecated */ --color-light-graphic-secondary-shade-30: rgb(96, 96, 102); /* deprecated */ @@ -1194,6 +1212,6 @@ --color-light-text-link-tint-50: rgb(149, 187, 247); /* deprecated */ --color-light-text-link-shade-20: rgb(34, 95, 191); /* deprecated */ --color-light-text-link-shade-40: rgb(25, 71, 143); /* deprecated */ - --color-static-graphic-light-shade-7: rgb(237, 237, 237); /* deprecated */ - --color-static-graphic-light-shade-15: rgb(217, 217, 217); /* deprecated */ + --color-static-graphic-light-shade-7: rgb(224, 224, 224); /* deprecated */ + --color-static-graphic-light-shade-15: rgb(205, 205, 205); /* deprecated */ } diff --git a/packages/vars/src/colors-indigo.css b/packages/vars/src/colors-indigo.css index 3414e8d502..952fd6cf0d 100644 --- 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 new file mode 100644 index 0000000000..98455875d1 --- /dev/null +++ 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; +} diff --git a/packages/vars/src/colors-x5.css b/packages/vars/src/colors-x5.css index c8ca48c793..33c589bce5 100644 --- a/packages/vars/src/colors-x5.css +++ b/packages/vars/src/colors-x5.css @@ -1,4 +1,5 @@ :root { --color-static-brand-primary: #5faf2d; --color-static-brand-secondary: #00afff; + --color-static-brand-orange: #f76100; } diff --git a/yarn.lock b/yarn.lock index c734efd6df..3227de22e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21163,10 +21163,10 @@ ui-primitives@^13.19.0: resolved "https://registry.yarnpkg.com/ui-primitives/-/ui-primitives-13.19.0.tgz#1a7bfd2da12e49ae2b72b1705e86fadcd311cf8f" integrity sha512-MIrL0P4izg0wDVEZtHOHpxB41oD6gBpL504lRnkUoFc+UXa10NWIBqPLh0dOR4HU25Qjrg4n3knF4aR7SfbzhA== -ui-primitives@^20.8.0: - version "20.8.0" - resolved "https://registry.yarnpkg.com/ui-primitives/-/ui-primitives-20.8.0.tgz#30d73527924a213c92ede8d6990a21b1ca4f8f20" - integrity sha512-1yHxst0bWDErpjWZB5FNqv8eqg7hh523yIP8WtDdzc7TIaQhgL4YAwCwcHyWgClqs7djVudPnUUE5YGJwSrIkw== +ui-primitives@^22.7.0: + version "22.7.0" + resolved "https://registry.yarnpkg.com/ui-primitives/-/ui-primitives-22.7.0.tgz#cce0dce244b33b9fe465edd634ddecb145c45b80" + integrity sha512-cdbDvvxoe6/HLMSl3hIQFGi5QYiskAoVgC22xYjw1jCb7wdhqdsCW0llsk78dGnqtfHrRwi7BmHZwf3feeM8PQ== unbox-primitive@^1.0.2: version "1.0.2"