From edd6e0608e6b68dcde41d9d324550b88c6ef0fe1 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 29 Jul 2025 13:02:10 +0300 Subject: [PATCH 001/139] Unify DS tokens integration --- .storybook/preview.tsx | 2 +- package-lock.json | 12 +- package.json | 2 +- src/assets/css/colors.css | 528 +++++++ src/assets/css/index.css | 15 + src/assets/css/theme-dark.css | 324 ++++ src/assets/css/theme-light.css | 324 ++++ src/assets/css/tw/backgrounds.css | 3 + src/assets/css/tw/colors.css | 1988 ++++++++++++++++++++++++ src/assets/css/tw/fonts.css | 15 + src/assets/css/tw/main.css | 4 + src/assets/css/tw/shadows.css | 3 + src/index.css | 389 ----- src/utils/Theme/Theme.story.tsx | 7 +- src/utils/Theme/blocks/ColorBlocks.tsx | 73 +- 15 files changed, 3280 insertions(+), 409 deletions(-) create mode 100644 src/assets/css/colors.css create mode 100644 src/assets/css/index.css create mode 100644 src/assets/css/theme-dark.css create mode 100644 src/assets/css/theme-light.css create mode 100644 src/assets/css/tw/backgrounds.css create mode 100644 src/assets/css/tw/colors.css create mode 100644 src/assets/css/tw/fonts.css create mode 100644 src/assets/css/tw/main.css create mode 100644 src/assets/css/tw/shadows.css delete mode 100644 src/index.css diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 6e2c9b797..30e06bdb3 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -7,7 +7,7 @@ import { DocsContainer } from '@storybook/addon-docs'; import { ThemeProvider } from '../src/utils/Theme/ThemeProvider'; import { theme as reablocksTheme } from '../src/utils/Theme/themes/theme'; -import '../src/index.css'; +import '../src/assets/css/index.css'; const withProvider = (Story, context) => ( diff --git a/package-lock.json b/package-lock.json index 25f95da0e..d9f8735fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7041,6 +7041,12 @@ "vite": "^5.2.0 || ^6" } }, + "node_modules/@tailwindcss/vite/node_modules/tailwindcss": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0.tgz", + "integrity": "sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==", + "dev": true + }, "node_modules/@types/argparse": { "version": "1.0.38", "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz", @@ -18849,9 +18855,9 @@ } }, "node_modules/tailwindcss": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0.tgz", - "integrity": "sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==", + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz", + "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==", "dev": true }, "node_modules/tapable": { diff --git a/package.json b/package.json index 445cc0bc8..d47aa91b1 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "build": "npm run build:js && npm run build:styles && npm run rewrite:stories && npm run build:docs", "build-storybook": "storybook build", "build:js": "vite build --mode library", - "build:styles": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/index.css", + "build:styles": "npx @tailwindcss/cli -i src/assets/css/index.css -o ./dist/index.css", "build:docs": "node scripts/docs.js", "rewrite:stories": "node scripts/stories.cjs", "lint": "eslint --ext js,ts,tsx", diff --git a/src/assets/css/colors.css b/src/assets/css/colors.css new file mode 100644 index 000000000..24770c075 --- /dev/null +++ b/src/assets/css/colors.css @@ -0,0 +1,528 @@ +:root, +:host { + --neutrals-clear-dnt-clear: #ffffff00; + --neutrals-pure-black-dnt-50: #0000000a; + --neutrals-pure-black-dnt-100: #00000014; + --neutrals-pure-black-dnt-200: #0000001f; + --neutrals-pure-black-dnt-300: #00000033; + --neutrals-pure-black-dnt-400: #0000004d; + --neutrals-pure-black-dnt-500: #00000066; + --neutrals-pure-black-dnt-600: #00000080; + --neutrals-pure-black-dnt-700: #00000099; + --neutrals-pure-black-dnt-800: #000000b2; + --neutrals-pure-black-dnt-900: #000000cc; + --neutrals-pure-black-dnt-950: #000000e5; + --neutrals-pure-black-dnt-1000: #000000; + --neutrals-pure-white-dnt-50: #ffffff0a; + --neutrals-pure-white-dnt-100: #ffffff14; + --neutrals-pure-white-dnt-200: #ffffff1f; + --neutrals-pure-white-dnt-300: #ffffff33; + --neutrals-pure-white-dnt-400: #ffffff4d; + --neutrals-pure-white-dnt-500: #ffffff66; + --neutrals-pure-white-dnt-600: #ffffff80; + --neutrals-pure-white-dnt-700: #ffffff99; + --neutrals-pure-white-dnt-800: #ffffffb2; + --neutrals-pure-white-dnt-900: #ffffffcc; + --neutrals-pure-white-dnt-950: #ffffffe5; + --neutrals-pure-white-dnt-1000: #ffffff; + --neutrals-force-dusk-50: #f7f7fa; + --neutrals-force-dusk-100: #e6e6f0; + --neutrals-force-dusk-200: #c9c9d6; + --neutrals-force-dusk-300: #77778c; + --neutrals-force-dusk-400: #5c5c73; + --neutrals-force-dusk-500: #3a3a4d; + --neutrals-force-dusk-600: #242433; + --neutrals-force-dusk-700: #191927; + --neutrals-force-dusk-800: #11111f; + --neutrals-force-dusk-900: #02020f; + --neutrals-force-dusk-950: #010105; + --neutrals-force-dusk-1000: #000003; + --neutrals-darth-abyss-a-50: #0101050a; + --neutrals-darth-abyss-a-100: #01010514; + --neutrals-darth-abyss-a-200: #0101051f; + --neutrals-darth-abyss-a-300: #01010533; + --neutrals-darth-abyss-a-400: #0101054d; + --neutrals-darth-abyss-a-500: #01010566; + --neutrals-darth-abyss-a-600: #01010580; + --neutrals-darth-abyss-a-700: #01010599; + --neutrals-darth-abyss-a-800: #010105b2; + --neutrals-darth-abyss-a-900: #010105cc; + --neutrals-darth-abyss-a-950: #010105e5; + --neutrals-darth-abyss-a-1000: #010105; + --neutrals-nightblade-a-50: #0101010a; + --neutrals-nightblade-a-100: #01010114; + --neutrals-nightblade-a-200: #0101011f; + --neutrals-nightblade-a-300: #01010133; + --neutrals-nightblade-a-400: #0101014d; + --neutrals-nightblade-a-500: #01010166; + --neutrals-nightblade-a-600: #01010180; + --neutrals-nightblade-a-700: #01010199; + --neutrals-nightblade-a-800: #010101b2; + --neutrals-nightblade-a-900: #010101cc; + --neutrals-nightblade-a-950: #010101e5; + --neutrals-nightblade-a-1000: #010101; + --neutrals-darkstar-core-a-50: #0404060a; + --neutrals-duskwraith-a-50: #1b20230a; + --neutrals-duskwraith-a-100: #09090a14; + --neutrals-duskwraith-a-200: #09090a1f; + --neutrals-duskwraith-a-300: #09090a33; + --neutrals-duskwraith-a-400: #09090a4d; + --neutrals-duskwraith-a-500: #09090a66; + --neutrals-duskwraith-a-600: #09090a80; + --neutrals-duskwraith-a-700: #09090a99; + --neutrals-duskwraith-a-800: #09090ab2; + --neutrals-duskwraith-a-900: #09090acc; + --neutrals-duskwraith-a-950: #09090ae5; + --neutrals-duskwraith-a-1000: #09090a; + --neutrals-darkstar-core-a-100: #04040614; + --neutrals-darkstar-core-a-200: #0404061f; + --neutrals-darkstar-core-a-300: #04040633; + --neutrals-darkstar-core-a-400: #0404064d; + --neutrals-darkstar-core-a-500: #04040666; + --neutrals-darkstar-core-a-600: #04040680; + --neutrals-darkstar-core-a-700: #04040699; + --neutrals-darkstar-core-a-800: #040406b2; + --neutrals-darkstar-core-a-900: #040406cc; + --neutrals-darkstar-core-a-950: #040406e5; + --neutrals-darkstar-core-a-1000: #040406; + --neutrals-kyber-crystal-a-50: #e1e2e30a; + --neutrals-kyber-crystal-a-100: #e1e2e314; + --neutrals-kyber-crystal-a-200: #e1e2e31f; + --neutrals-kyber-crystal-a-300: #e1e2e333; + --neutrals-kyber-crystal-a-400: #e1e2e34d; + --neutrals-kyber-crystal-a-500: #e1e2e366; + --neutrals-kyber-crystal-a-600: #e1e2e380; + --neutrals-kyber-crystal-a-700: #e1e2e399; + --neutrals-kyber-crystal-a-800: #e1e2e3b2; + --neutrals-kyber-crystal-a-900: #e1e2e3cc; + --neutrals-kyber-crystal-a-950: #e1e2e3e5; + --neutrals-kyber-crystal-a-1000: #e1e2e3; + --blue-hyperstream-a-50: #105eff0a; + --blue-hyperstream-a-100: #105eff14; + --blue-hyperstream-a-200: #105eff1f; + --blue-hyperstream-a-300: #105eff33; + --blue-hyperstream-a-400: #105eff4d; + --blue-hyperstream-a-500: #105eff66; + --blue-hyperstream-a-600: #105eff80; + --blue-hyperstream-a-700: #105eff99; + --blue-hyperstream-a-800: #105effb2; + --blue-hyperstream-a-900: #105effcc; + --blue-hyperstream-a-950: #105effe5; + --blue-hyperstream-a-1000: #105eff; + --blue-hyperstream-50: #e7efff; + --blue-hyperstream-100: #c3d7ff; + --blue-hyperstream-200: #9fbfff; + --blue-hyperstream-300: #7ca6ff; + --blue-hyperstream-400: #588eff; + --blue-hyperstream-500: #3476ff; + --blue-hyperstream-600: #105eff; + --blue-hyperstream-700: #0c44b7; + --blue-hyperstream-800: #0a3793; + --blue-hyperstream-900: #082a70; + --blue-hyperstream-950: #061d4c; + --blue-hyperstream-1000: #041028; + --blue-astral-sabre-50: #d1e3ff; + --blue-astral-sabre-100: #93b5ff; + --blue-astral-sabre-200: #5471be; + --blue-astral-sabre-300: #5f7dcc; + --blue-astral-sabre-400: #4662ae; + --blue-astral-sabre-500: #38529c; + --blue-astral-sabre-600: #2b438d; + --blue-astral-sabre-700: #20377f; + --blue-astral-sabre-800: #162a71; + --blue-astral-sabre-900: #0c1c62; + --blue-astral-sabre-950: #050f45; + --blue-astral-sabre-1000: #030a35; + --blue-skybolt-a-50: #1c90e10a; + --blue-stellar-abyss-a-50: #050f450a; + --blue-stellar-abyss-a-100: #050f4514; + --blue-stellar-abyss-a-200: #050f451f; + --blue-stellar-abyss-a-300: #050f4533; + --blue-stellar-abyss-a-400: #050f454d; + --blue-stellar-abyss-a-500: #050f4566; + --blue-stellar-abyss-a-600: #050f4580; + --blue-stellar-abyss-a-700: #050f4599; + --blue-stellar-abyss-a-800: #050f45b2; + --blue-stellar-abyss-a-900: #050f45cc; + --blue-stellar-abyss-a-950: #050f45e5; + --blue-stellar-abyss-a-1000: #050f45; + --blue-skybolt-a-100: #1c90e114; + --blue-skybolt-a-200: #1c90e11f; + --blue-skybolt-a-300: #1c90e133; + --blue-skybolt-a-400: #1c90e14d; + --blue-skybolt-a-500: #1c90e166; + --blue-skybolt-a-600: #1c90e180; + --blue-skybolt-a-700: #1c90e199; + --blue-skybolt-a-800: #1c90e1b2; + --blue-skybolt-a-900: #1c90e1cc; + --blue-skybolt-a-950: #1c90e1e5; + --blue-skybolt-a-1000: #1c90e1; + --green-emerald-saber-a-50: #00c46f0a; + --green-emerald-saber-a-100: #00c46f14; + --green-emerald-saber-a-200: #00c46f1f; + --green-emerald-saber-a-300: #00c46f33; + --green-emerald-saber-a-400: #00c46f4d; + --green-emerald-saber-a-500: #00c46f66; + --green-emerald-saber-a-600: #00c46f80; + --green-emerald-saber-a-700: #00c46f99; + --green-emerald-saber-a-800: #00c46fb2; + --green-emerald-saber-a-900: #00c46fcc; + --green-emerald-saber-a-950: #00c46fe5; + --green-emerald-saber-a-1000: #00c46f; + --green-ion-sprout-50: #f4fae5; + --green-ion-sprout-100: #e3f3bf; + --green-ion-sprout-200: #c6e880; + --green-ion-sprout-300: #aadc40; + --green-ion-sprout-400: #8ed000; + --green-ion-sprout-500: #78b001; + --green-ion-sprout-600: #628f01; + --green-ion-sprout-700: #4c6f02; + --green-ion-sprout-800: #364e02; + --green-ion-sprout-900: #202e03; + --green-ion-sprout-950: #121a02; + --green-ion-sprout-1000: #050801; + --green-ion-sprout-a-50: #8ed0000a; + --green-ion-sprout-a-100: #8ed00014; + --green-ion-sprout-a-200: #8ed0001f; + --green-ion-sprout-a-300: #8ed00033; + --green-ion-sprout-a-400: #8ed0004d; + --green-ion-sprout-a-500: #8ed00066; + --green-ion-sprout-a-600: #8ed00080; + --green-ion-sprout-a-700: #8ed00099; + --green-ion-sprout-a-800: #8ed000b2; + --green-ion-sprout-a-900: #8ed000cc; + --green-ion-sprout-a-950: #8ed000e5; + --green-ion-sprout-a-1000: #8ed000; + --green-verdant-flux-50: #eef8e9; + --green-verdant-flux-100: #d5efc8; + --green-verdant-flux-200: #aadf91; + --green-verdant-flux-300: #80ce5b; + --green-verdant-flux-400: #55be24; + --green-verdant-flux-500: #469d1d; + --green-verdant-flux-600: #377c16; + --green-verdant-flux-700: #275c10; + --green-verdant-flux-800: #183b09; + --green-verdant-flux-900: #091a02; + --green-verdant-flux-950: #040d01; + --green-verdant-flux-1000: #020500; + --green-verdant-flux-a-50: #55be240a; + --green-verdant-flux-a-100: #55be2414; + --green-verdant-flux-a-200: #55be241f; + --green-verdant-flux-a-300: #55be2433; + --green-verdant-flux-a-400: #55be244d; + --green-verdant-flux-a-500: #55be2466; + --green-verdant-flux-a-600: #55be2480; + --green-verdant-flux-a-700: #55be2499; + --green-verdant-flux-a-800: #55be24b2; + --green-verdant-flux-a-900: #55be24cc; + --green-verdant-flux-a-950: #55be24e5; + --green-verdant-flux-a-1000: #55be24; + --red-infernal-blade-a-50: #fc12340a; + --red-infernal-blade-a-100: #fc123414; + --red-infernal-blade-a-200: #fc12341f; + --red-infernal-blade-a-300: #fc123433; + --red-infernal-blade-a-400: #fc12344d; + --red-infernal-blade-a-500: #fc123466; + --red-infernal-blade-a-600: #fc123480; + --red-infernal-blade-a-700: #fc123499; + --red-infernal-blade-a-800: #fc1234b2; + --red-infernal-blade-a-900: #fc1234cc; + --red-infernal-blade-a-950: #fc1234e5; + --red-infernal-blade-a-1000: #fc1234; + --red-malachor-50: #f7f2f2; + --red-malachor-100: #f0e4e4; + --red-malachor-200: #dfc6c6; + --red-malachor-300: #cda1a1; + --red-malachor-400: #ba7272; + --red-malachor-500: #a40808; + --red-malachor-600: #930707; + --red-malachor-700: #7f0606; + --red-malachor-800: #680505; + --red-malachor-900: #490404; + --red-malachor-950: #240202; + --red-malachor-1000: #0a0101; + --red-malachor-a-50: #a408080a; + --red-malachor-a-100: #a4080814; + --red-malachor-a-200: #a408081f; + --red-malachor-a-300: #a4080833; + --red-malachor-a-400: #a408084d; + --red-malachor-a-500: #a4080866; + --red-malachor-a-600: #a4080880; + --red-malachor-a-700: #a4080899; + --red-malachor-a-800: #a40808b2; + --red-malachor-a-900: #a40808cc; + --red-malachor-a-950: #a40808e5; + --red-malachor-a-1000: #a40808; + --red-crimson-wrath-50: #fce5e6; + --red-crimson-wrath-100: #f7bfc1; + --red-crimson-wrath-200: #f08083; + --red-crimson-wrath-300: #e84045; + --red-crimson-wrath-400: #e00007; + --red-crimson-wrath-500: #b70006; + --red-crimson-wrath-600: #8e0005; + --red-crimson-wrath-700: #660104; + --red-crimson-wrath-800: #3d0103; + --red-crimson-wrath-900: #200204; + --red-crimson-wrath-950: #140103; + --red-crimson-wrath-1000: #080001; + --red-crimson-wrath-a-50: #e000070a; + --red-crimson-wrath-a-100: #e0000714; + --red-crimson-wrath-a-200: #e000071f; + --red-crimson-wrath-a-300: #e0000733; + --red-crimson-wrath-a-400: #e000074d; + --red-crimson-wrath-a-500: #e0000766; + --red-crimson-wrath-a-600: #e0000780; + --red-crimson-wrath-a-700: #e0000799; + --red-crimson-wrath-a-800: #e00007b2; + --red-crimson-wrath-a-900: #e00007cc; + --red-crimson-wrath-a-950: #e00007e5; + --red-crimson-wrath-a-1000: #e00007; + --yellow-twin-sunlight-a-50: #ffc6000a; + --yellow-twin-sunlight-a-100: #ffc60014; + --yellow-twin-sunlight-a-200: #ffc6001f; + --yellow-twin-sunlight-a-300: #ffc60033; + --yellow-twin-sunlight-a-400: #ffc6004d; + --yellow-twin-sunlight-a-500: #ffc60066; + --yellow-twin-sunlight-a-600: #ffc60080; + --yellow-twin-sunlight-a-700: #ffc60099; + --yellow-twin-sunlight-a-800: #ffc600b2; + --yellow-twin-sunlight-a-900: #ffc600cc; + --yellow-twin-sunlight-a-950: #ffc600e5; + --yellow-twin-sunlight-a-1000: #ffc600; + --yellow-twin-sunlight-50: #fff9e5; + --yellow-twin-sunlight-100: #fff1bf; + --yellow-twin-sunlight-200: #ffe380; + --yellow-twin-sunlight-300: #ffd440; + --yellow-twin-sunlight-400: #ffc600; + --yellow-twin-sunlight-500: #d2a300; + --yellow-twin-sunlight-600: #a58001; + --yellow-twin-sunlight-700: #785e01; + --yellow-twin-sunlight-800: #4b3b02; + --yellow-twin-sunlight-900: #261f03; + --yellow-twin-sunlight-950: #1a1502; + --yellow-twin-sunlight-1000: #0a0801; + --yellow-stellar-amber-50: #fdf9e9; + --yellow-stellar-amber-100: #fbf2d0; + --yellow-stellar-amber-200: #faecb5; + --yellow-stellar-amber-300: #f8e594; + --yellow-stellar-amber-400: #f6de69; + --yellow-stellar-amber-500: #f4d70d; + --yellow-stellar-amber-600: #dfc40c; + --yellow-stellar-amber-700: #c7af0b; + --yellow-stellar-amber-800: #ad9809; + --yellow-stellar-amber-900: #8d7c08; + --yellow-stellar-amber-950: #635805; + --yellow-stellar-amber-1000: #4d4404; + --yellow-stellar-amber-a-50: #dfc40c0a; + --yellow-stellar-amber-a-100: #dfc40c14; + --yellow-stellar-amber-a-200: #dfc40c1f; + --yellow-stellar-amber-a-300: #dfc40c33; + --yellow-stellar-amber-a-400: #dfc40c4d; + --yellow-stellar-amber-a-500: #dfc40c66; + --yellow-stellar-amber-a-600: #dfc40c80; + --yellow-stellar-amber-a-700: #dfc40c99; + --yellow-stellar-amber-a-800: #dfc40cb2; + --yellow-stellar-amber-a-900: #dfc40ccc; + --yellow-stellar-amber-a-950: #dfc40ce5; + --yellow-stellar-amber-a-1000: #dfc40c; + --orange-sunstreak-a-50: #f685000a; + --orange-sunstreak-a-100: #f6850014; + --orange-sunstreak-a-200: #f685001f; + --orange-sunstreak-a-300: #f6850033; + --orange-sunstreak-a-400: #f685004d; + --orange-sunstreak-a-500: #f6850066; + --orange-sunstreak-a-600: #f6850080; + --orange-sunstreak-a-700: #f6850099; + --orange-sunstreak-a-800: #f68500b2; + --orange-sunstreak-a-900: #f68500cc; + --orange-sunstreak-a-950: #f68500e5; + --orange-sunstreak-a-1000: #f68500; + --orange-sunstreak-50: #fef3e5; + --orange-sunstreak-100: #fde1bf; + --orange-sunstreak-200: #fbc280; + --orange-sunstreak-300: #f8a340; + --orange-sunstreak-400: #f68500; + --orange-sunstreak-500: #cb6e00; + --orange-sunstreak-600: #9f5701; + --orange-sunstreak-700: #743f01; + --orange-sunstreak-800: #482802; + --orange-sunstreak-900: #251602; + --orange-sunstreak-950: #1a0f01; + --orange-sunstreak-1000: #0a0600; + --purple-voidshade-a-50: #601ef90a; + --purple-voidshade-a-100: #601ef914; + --purple-voidshade-a-200: #601ef91f; + --purple-voidshade-a-300: #601ef933; + --purple-voidshade-a-400: #601ef94d; + --purple-voidshade-a-500: #601ef966; + --purple-voidshade-a-600: #601ef980; + --purple-voidshade-a-700: #601ef999; + --purple-voidshade-a-800: #601ef9b2; + --purple-voidshade-a-900: #601ef9cc; + --purple-voidshade-a-950: #601ef9e5; + --purple-voidshade-a-1000: #601ef9; + --purple-nexus-50: #f0e8fd; + --purple-nexus-100: #dac5f9; + --purple-nexus-200: #b58bf3; + --purple-nexus-300: #9152ee; + --purple-nexus-400: #6c18e8; + --purple-nexus-500: #5b14c5; + --purple-nexus-600: #4b10a1; + --purple-nexus-700: #3a0d7e; + --purple-nexus-800: #2a095b; + --purple-nexus-900: #190537; + --purple-nexus-950: #0e031f; + --purple-nexus-1000: #06010d; + --purple-nexus-a-50: #6c18e80a; + --purple-nexus-a-100: #6c18e814; + --purple-nexus-a-200: #6c18e81f; + --purple-nexus-a-300: #6c18e833; + --purple-nexus-a-400: #6c18e84d; + --purple-nexus-a-500: #6c18e866; + --purple-nexus-a-600: #6c18e880; + --purple-nexus-a-700: #6c18e899; + --purple-nexus-a-800: #6c18e8b2; + --purple-nexus-a-900: #6c18e8cc; + --purple-nexus-a-950: #6c18e8e5; + --purple-nexus-a-1000: #6c18e8; + --pink-plasma-circuit-50: #fde5f1; + --pink-plasma-circuit-100: #f9bfdb; + --pink-plasma-circuit-200: #f480b7; + --pink-plasma-circuit-300: #ee4094; + --pink-plasma-circuit-400: #de006b; + --pink-plasma-circuit-500: #bb015a; + --pink-plasma-circuit-600: #98014a; + --pink-plasma-circuit-700: #740239; + --pink-plasma-circuit-800: #510229; + --pink-plasma-circuit-900: #2e0318; + --pink-plasma-circuit-950: #1f0210; + --pink-plasma-circuit-1000: #0d0107; + --pink-plasma-circuit-a-50: #de006b0a; + --pink-plasma-circuit-a-100: #de006b14; + --pink-plasma-circuit-a-200: #de006b1f; + --pink-plasma-circuit-a-300: #de006b33; + --pink-plasma-circuit-a-400: #de006b4d; + --pink-plasma-circuit-a-500: #de006b66; + --pink-plasma-circuit-a-600: #de006b80; + --pink-plasma-circuit-a-700: #de006b99; + --pink-plasma-circuit-a-800: #de006bb2; + --pink-plasma-circuit-a-900: #de006bcc; + --pink-plasma-circuit-a-950: #de006be5; + --pink-plasma-circuit-a-1000: #de006b; + --teal-sunspark-oasis-50: #e5fbf9; + --teal-sunspark-oasis-100: #bff6f0; + --teal-sunspark-oasis-200: #80ede0; + --teal-sunspark-oasis-300: #40e5d1; + --teal-sunspark-oasis-400: #00dcc2; + --teal-sunspark-oasis-500: #00c2ab; + --teal-sunspark-oasis-600: #019a88; + --teal-sunspark-oasis-700: #017365; + --teal-sunspark-oasis-800: #024b42; + --teal-sunspark-oasis-900: #02231f; + --teal-sunspark-oasis-950: #011412; + --teal-sunspark-oasis-1000: #010a09; + --teal-sunspark-oasis-a-50: #00dcc20a; + --teal-sunspark-oasis-a-100: #00dcc214; + --teal-sunspark-oasis-a-200: #00dcc21f; + --teal-sunspark-oasis-a-300: #00dcc233; + --teal-sunspark-oasis-a-400: #00dcc24d; + --teal-sunspark-oasis-a-500: #00dcc266; + --teal-sunspark-oasis-a-600: #00dcc280; + --teal-sunspark-oasis-a-700: #00dcc299; + --teal-sunspark-oasis-a-800: #00dcc2b2; + --teal-sunspark-oasis-a-900: #00dcc2cc; + --teal-sunspark-oasis-a-950: #00dcc2e5; + --teal-sunspark-oasis-a-1000: #00dcc2; + --purple-fuchsia-50: #f7f3fd; + --purple-fuchsia-100: #efecf9; + --purple-fuchsia-200: #d6cdee; + --purple-fuchsia-300: #bcafe4; + --purple-fuchsia-400: #a390da; + --purple-fuchsia-500: #8972d0; + --purple-fuchsia-600: #7053c5; + --purple-fuchsia-700: #6040bf; + --purple-fuchsia-800: #4b3295; + --purple-fuchsia-900: #3c2876; + --purple-fuchsia-950: #2c1d58; + --purple-fuchsia-1000: #1d1339; + --purple-fuchsia-a-50: #7053c50a; + --purple-fuchsia-a-100: #7053c514; + --purple-fuchsia-a-200: #7053c51f; + --purple-fuchsia-a-300: #7053c533; + --purple-fuchsia-a-400: #7053c54d; + --purple-fuchsia-a-500: #7053c566; + --purple-fuchsia-a-600: #7053c580; + --purple-fuchsia-a-700: #7053c599; + --purple-fuchsia-a-800: #7053c5b2; + --purple-fuchsia-a-900: #7053c5cc; + --purple-fuchsia-a-950: #7053c5e5; + --purple-fuchsia-a-1000: #7053c5; + --orange-molten-fang-a-50: #ee5e210a; + --orange-molten-fang-a-100: #ee5e2114; + --orange-molten-fang-a-200: #ee5e211f; + --orange-molten-fang-a-300: #ee5e2133; + --orange-molten-fang-a-400: #ee5e214d; + --orange-molten-fang-a-500: #ee5e2166; + --orange-molten-fang-a-600: #ee5e2180; + --orange-molten-fang-a-700: #ee5e2199; + --orange-molten-fang-a-800: #ee5e21b2; + --orange-molten-fang-a-900: #ee5e21cc; + --orange-molten-fang-a-950: #ee5e21e5; + --orange-molten-fang-a-1000: #ee5e21; + --neutrals-celestial-veil-a-50: #e7f2fc0a; + --neutrals-celestial-veil-a-100: #e7f2fc14; + --neutrals-celestial-veil-a-200: #e7f2fc1f; + --neutrals-celestial-veil-a-300: #e7f2fc33; + --neutrals-celestial-veil-a-400: #e7f2fc4d; + --neutrals-celestial-veil-a-500: #e7f2fc66; + --neutrals-celestial-veil-a-600: #e7f2fc80; + --neutrals-celestial-veil-a-700: #e7f2fc99; + --neutrals-celestial-veil-a-800: #e7f2fcb2; + --neutrals-celestial-veil-a-900: #e7f2fccc; + --neutrals-celestial-veil-a-950: #e7f2fce5; + --neutrals-celestial-veil-a-1000: #e7f2fc; + --neutrals-echo-light-a-50: #f5f5f50a; + --neutrals-echo-light-a-100: #f5f5f514; + --neutrals-echo-light-a-200: #f5f5f51f; + --neutrals-echo-light-a-300: #f5f5f533; + --neutrals-echo-light-a-400: #f5f5f54d; + --neutrals-echo-light-a-500: #f5f5f566; + --neutrals-echo-light-a-600: #f5f5f580; + --neutrals-echo-light-a-700: #f5f5f599; + --neutrals-echo-light-a-800: #f5f5f5b2; + --neutrals-echo-light-a-900: #f5f5f5cc; + --neutrals-echo-light-a-950: #f5f5f5e5; + --neutrals-echo-light-a-1000: #f5f5f5; + --teal-sunspark-oasis-50-2: #e5fbf9; + --teal-sunspark-oasis-100-2: #bff6f0; + --teal-sunspark-oasis-200-2: #80ede0; + --teal-sunspark-oasis-300-2: #40e5d1; + --teal-sunspark-oasis-400-2: #00dcc2; + --teal-sunspark-oasis-500-2: #00c2ab; + --teal-sunspark-oasis-600-2: #019a88; + --teal-sunspark-oasis-700-2: #017365; + --teal-sunspark-oasis-800-2: #024b42; + --teal-sunspark-oasis-900-2: #02231f; + --teal-sunspark-oasis-50-3: #e5fbf9; + --teal-sunspark-oasis-100-3: #bff6f0; + --teal-sunspark-oasis-200-3: #80ede0; + --teal-sunspark-oasis-300-3: #40e5d1; + --teal-sunspark-oasis-400-3: #00dcc2; + --teal-sunspark-oasis-500-3: #00c2ab; + --teal-sunspark-oasis-600-3: #019a88; + --teal-sunspark-oasis-700-3: #017365; + --teal-sunspark-oasis-800-3: #024b42; + --teal-sunspark-oasis-900-3: #02231f; + --pink-mew-mode-50: #e709730a; + --pink-mew-mode-100: #e7097314; + --pink-mew-mode-200: #e709731f; + --pink-mew-mode-300: #e7097333; + --pink-mew-mode-400: #e709734d; + --pink-mew-mode-500: #e7097366; + --pink-mew-mode-600: #e7097380; + --pink-mew-mode-700: #e7097399; + --pink-mew-mode-800: #e70973b2; + --pink-mew-mode-900: #e70973cc; + --pink-mew-mode-950: #e70973e5; + --pink-mew-mode-1000: #e70973; +} diff --git a/src/assets/css/index.css b/src/assets/css/index.css new file mode 100644 index 000000000..07c317136 --- /dev/null +++ b/src/assets/css/index.css @@ -0,0 +1,15 @@ +@import 'tailwindcss'; + +@import './colors.css'; +@import './theme-dark.css'; +@import './theme-light.css'; +@import './tw/main.css'; + +/* Custom variants */ +@custom-variant dark (&:where(.theme-dark, .theme-dark *, [data-theme=dark], [data-theme=dark] *)); +@custom-variant light (&:where(.theme-light, .theme-light *, [data-theme=light], [data-theme=light] *)); +@custom-variant disabled-within (&:has(input:is(:disabled), textarea:is(:disabled), button:is(:disabled))); + +body { + line-height: inherit; +} diff --git a/src/assets/css/theme-dark.css b/src/assets/css/theme-dark.css new file mode 100644 index 000000000..855362a16 --- /dev/null +++ b/src/assets/css/theme-dark.css @@ -0,0 +1,324 @@ +:root, +:host { + &.theme-dark { + --reablocks-theme: dark; + + --background-basic-clear: var(--neutrals-clear-dnt-clear); + --background-basic-black: var(--neutrals-pure-black-dnt-1000); + --background-basic-white: var(--neutrals-pure-white-dnt-1000); + --background-neutral-canvas-base: var(--neutrals-darth-abyss-a-1000); + --background-neutral-raised-base: var(--neutrals-kyber-crystal-a-1000); + --background-neutral-inverse-raised-base: var( + --neutrals-darth-abyss-a-1000 + ); + --background-neutral-inverse-raised-1: var(--neutrals-darth-abyss-a-900); + --background-neutral-inverse-raised-2: var(--neutrals-darth-abyss-a-600); + --background-neutral-inverse-raised-3: var(--neutrals-darth-abyss-a-400); + --background-neutral-inverse-raised-4: var(--neutrals-darth-abyss-a-300); + --background-neutral-inverse-raised-5: var(--neutrals-darth-abyss-a-100); + --background-neutral-inverse-raised-6: var(--neutrals-darth-abyss-a-50); + --background-neutral-raised-1: var(--neutrals-kyber-crystal-a-900); + --background-neutral-raised-2: var(--neutrals-kyber-crystal-a-600); + --background-neutral-raised-3: var(--neutrals-kyber-crystal-a-400); + --background-neutral-raised-4: var(--neutrals-kyber-crystal-a-300); + --background-neutral-raised-5: var(--neutrals-kyber-crystal-a-100); + --background-neutral-raised-6: var(--neutrals-kyber-crystal-a-50); + --background-brand-base: var(--blue-hyperstream-a-1000); + --background-brand-1: var(--blue-hyperstream-a-900); + --background-brand-2: var(--blue-hyperstream-a-700); + --background-brand-3: var(--blue-hyperstream-a-500); + --background-brand-4: var(--blue-hyperstream-a-400); + --background-brand-5: var(--blue-hyperstream-a-200); + --background-semantic-success-base: var(--green-emerald-saber-a-1000); + --background-semantic-warning-base: var(--orange-sunstreak-a-1000); + --background-semantic-warning-1: var(--orange-sunstreak-a-900); + --background-semantic-warning-2: var(--orange-sunstreak-a-700); + --background-semantic-warning-3: var(--orange-sunstreak-a-500); + --background-semantic-warning-4: var(--orange-sunstreak-a-400); + --background-semantic-warning-5: var(--orange-sunstreak-a-200); + --background-semantic-success-1: var(--green-emerald-saber-a-900); + --background-semantic-success-2: var(--green-emerald-saber-a-700); + --background-semantic-success-3: var(--green-emerald-saber-a-500); + --background-semantic-success-4: var(--green-emerald-saber-a-400); + --background-semantic-success-5: var(--green-emerald-saber-a-200); + --background-semantic-info-base: var(--blue-skybolt-a-1000); + --background-semantic-info-1: var(--blue-skybolt-a-900); + --background-semantic-info-2: var(--blue-skybolt-a-700); + --background-semantic-info-3: var(--blue-skybolt-a-500); + --background-semantic-info-4: var(--blue-skybolt-a-400); + --background-semantic-info-5: var(--blue-skybolt-a-200); + --background-semantic-error-base: var(--red-crimson-wrath-a-1000); + --background-semantic-error-1: var(--red-crimson-wrath-a-900); + --background-semantic-error-2: var(--red-crimson-wrath-a-700); + --background-semantic-error-3: var(--red-crimson-wrath-a-500); + --background-semantic-error-4: var(--red-crimson-wrath-a-400); + --background-semantic-error-5: var(--red-crimson-wrath-a-200); + --background-accent-1-base: var(--purple-nexus-a-1000); + --background-accent-1-1: var(--purple-nexus-a-900); + --background-accent-1-2: var(--purple-nexus-a-700); + --background-accent-1-3: var(--purple-nexus-a-500); + --background-accent-1-4: var(--purple-nexus-a-400); + --background-accent-1-5: var(--purple-nexus-a-200); + --background-accent-2-base: var(--pink-plasma-circuit-a-1000); + --background-accent-2-1: var(--pink-plasma-circuit-a-900); + --background-accent-2-2: var(--pink-plasma-circuit-a-700); + --background-accent-2-3: var(--pink-plasma-circuit-a-500); + --background-accent-2-4: var(--pink-plasma-circuit-a-400); + --background-accent-2-5: var(--pink-plasma-circuit-a-200); + --background-accent-3-base: var(--teal-sunspark-oasis-a-1000); + --background-accent-3-1: var(--teal-sunspark-oasis-a-900); + --background-accent-3-2: var(--teal-sunspark-oasis-a-700); + --background-accent-3-3: var(--teal-sunspark-oasis-a-500); + --background-accent-3-4: var(--teal-sunspark-oasis-a-400); + --background-accent-3-5: var(--teal-sunspark-oasis-a-200); + --stroke-basic-clear: var(--neutrals-clear-dnt-clear); + --content-text-basic-clear: var(--neutrals-clear-dnt-clear); + --gradient-neutral-50: var(--neutrals-kyber-crystal-a-50); + --gradient-neutral-100: var(--neutrals-kyber-crystal-a-100); + --gradient-neutral-200: var(--neutrals-kyber-crystal-a-200); + --gradient-neutral-300: var(--neutrals-kyber-crystal-a-300); + --gradient-neutral-400: var(--neutrals-kyber-crystal-a-400); + --gradient-neutral-500: var(--neutrals-kyber-crystal-a-500); + --gradient-neutral-700: var(--neutrals-kyber-crystal-a-700); + --gradient-neutral-1000: var(--neutrals-kyber-crystal-a-1000); + --gradient-brand-50: var(--blue-hyperstream-a-50); + --gradient-brand-100: var(--blue-hyperstream-a-100); + --gradient-brand-200: var(--blue-hyperstream-a-200); + --gradient-brand-300: var(--blue-hyperstream-a-300); + --gradient-brand-400: var(--blue-hyperstream-a-400); + --gradient-brand-500: var(--blue-hyperstream-a-500); + --gradient-brand-700: var(--blue-hyperstream-a-700); + --gradient-brand-1000: var(--blue-hyperstream-a-1000); + --content-text-basic-black: var(--neutrals-pure-black-dnt-1000); + --content-text-basic-white: var(--neutrals-pure-white-dnt-1000); + --content-text-neutral-base: var(--neutrals-kyber-crystal-a-1000); + --content-text-neutral-1: var(--neutrals-kyber-crystal-a-900); + --content-text-neutral-2: var(--neutrals-kyber-crystal-a-800); + --content-text-neutral-3: var(--neutrals-kyber-crystal-a-500); + --content-text-neutral-4: var(--neutrals-kyber-crystal-a-300); + --content-text-neutral-5: var(--neutrals-kyber-crystal-a-200); + --content-text-on-color-dark-dark: var(--neutrals-darth-abyss-a-1000); + --content-text-on-color-dark-light: var(--neutrals-darth-abyss-a-1000); + --content-text-on-color-light-dark: var(--neutrals-kyber-crystal-a-1000); + --content-text-on-color-light-light: var(--neutrals-kyber-crystal-a-1000); + --content-text-inverse-base: var(--neutrals-darth-abyss-a-1000); + --content-text-inverse-1: var(--neutrals-darth-abyss-a-900); + --content-text-inverse-2: var(--neutrals-darth-abyss-a-800); + --content-text-inverse-3: var(--neutrals-darth-abyss-a-500); + --content-text-inverse-4: var(--neutrals-darth-abyss-a-300); + --content-text-inverse-5: var(--neutrals-darth-abyss-a-200); + --content-text-brand-base: var(--blue-hyperstream-a-1000); + --content-text-brand-1: var(--blue-hyperstream-a-700); + --content-text-brand-2: var(--blue-hyperstream-a-300); + --content-text-brand-3: var(--blue-hyperstream-a-200); + --content-text-brand-4: var(--blue-hyperstream-a-100); + --content-text-brand-5: var(--blue-hyperstream-a-50); + --content-text-semantic-success-base: var(--green-emerald-saber-a-1000); + --content-text-semantic-success-1: var(--green-emerald-saber-a-700); + --content-text-semantic-success-2: var(--green-emerald-saber-a-300); + --content-text-semantic-success-3: var(--green-emerald-saber-a-200); + --content-text-semantic-success-4: var(--green-emerald-saber-a-100); + --content-text-semantic-success-5: var(--green-emerald-saber-a-50); + --content-text-semantic-warning-base: var(--orange-sunstreak-a-1000); + --content-text-semantic-warning-1: var(--orange-sunstreak-a-700); + --content-text-semantic-warning-2: var(--orange-sunstreak-a-300); + --content-text-semantic-warning-3: var(--orange-sunstreak-a-200); + --content-text-semantic-warning-4: var(--orange-sunstreak-a-100); + --content-text-semantic-warning-5: var(--orange-sunstreak-a-50); + --content-text-semantic-error-base: var(--red-crimson-wrath-a-1000); + --content-text-semantic-error-1: var(--red-crimson-wrath-a-700); + --content-text-semantic-error-2: var(--red-crimson-wrath-a-300); + --content-text-semantic-error-3: var(--red-crimson-wrath-a-200); + --content-text-semantic-error-4: var(--red-crimson-wrath-a-100); + --content-text-semantic-error-5: var(--red-crimson-wrath-a-50); + --content-text-semantic-info-base: var(--blue-skybolt-a-1000); + --content-text-semantic-info-1: var(--blue-skybolt-a-700); + --content-text-semantic-info-2: var(--blue-skybolt-a-300); + --content-text-semantic-info-3: var(--blue-skybolt-a-200); + --content-text-semantic-info-4: var(--blue-skybolt-a-100); + --content-text-semantic-info-5: var(--blue-skybolt-a-50); + --content-text-accent-1-base: var(--purple-nexus-a-1000); + --content-text-accent-1-1: var(--purple-nexus-a-700); + --content-text-accent-1-2: var(--purple-nexus-a-300); + --content-text-accent-1-3: var(--purple-nexus-a-200); + --content-text-accent-1-4: var(--purple-nexus-a-100); + --content-text-accent-1-5: var(--purple-nexus-a-50); + --content-text-accent-2-base: var(--pink-plasma-circuit-a-1000); + --content-text-accent-2-1: var(--pink-plasma-circuit-a-700); + --content-text-accent-2-2: var(--pink-plasma-circuit-a-300); + --content-text-accent-2-3: var(--pink-plasma-circuit-a-200); + --content-text-accent-2-4: var(--pink-plasma-circuit-a-100); + --content-text-accent-2-5: var(--pink-plasma-circuit-a-50); + --content-text-accent-3-base: var(--teal-sunspark-oasis-a-1000); + --content-text-accent-3-1: var(--teal-sunspark-oasis-a-700); + --content-text-accent-3-2: var(--teal-sunspark-oasis-a-300); + --content-text-accent-3-3: var(--teal-sunspark-oasis-a-200); + --content-text-accent-3-4: var(--teal-sunspark-oasis-a-100); + --content-text-accent-3-5: var(--teal-sunspark-oasis-a-50); + --content-assets-basic-clear: var(--neutrals-clear-dnt-clear); + --content-assets-basic-black: var(--neutrals-pure-black-dnt-1000); + --content-assets-basic-white: var(--neutrals-pure-white-dnt-1000); + --content-assets-neutral-base: var(--neutrals-kyber-crystal-a-1000); + --content-assets-neutral-1: var(--neutrals-kyber-crystal-a-900); + --content-assets-neutral-2: var(--neutrals-kyber-crystal-a-800); + --content-assets-neutral-3: var(--neutrals-kyber-crystal-a-500); + --content-assets-neutral-4: var(--neutrals-kyber-crystal-a-300); + --content-assets-neutral-5: var(--neutrals-kyber-crystal-a-200); + --content-assets-on-color-dark-dark: var(--neutrals-darth-abyss-a-1000); + --content-assets-on-color-dark-light: var(--neutrals-darth-abyss-a-1000); + --content-assets-on-color-light-dark: var(--neutrals-kyber-crystal-a-1000); + --content-assets-on-color-light-light: var(--neutrals-kyber-crystal-a-1000); + --content-assets-inverse-base: var(--neutrals-darth-abyss-a-1000); + --content-assets-inverse-1: var(--neutrals-darth-abyss-a-900); + --content-assets-inverse-2: var(--neutrals-darth-abyss-a-800); + --content-assets-inverse-3: var(--neutrals-darth-abyss-a-500); + --content-assets-inverse-4: var(--neutrals-darth-abyss-a-300); + --content-assets-inverse-5: var(--neutrals-darth-abyss-a-200); + --content-assets-brand-base: var(--blue-hyperstream-a-1000); + --content-assets-brand-1: var(--blue-hyperstream-a-700); + --content-assets-brand-2: var(--blue-hyperstream-a-300); + --content-assets-brand-3: var(--blue-hyperstream-a-200); + --content-assets-brand-4: var(--blue-hyperstream-a-100); + --content-assets-brand-5: var(--blue-hyperstream-a-50); + --content-assets-semantic-success-base: var(--green-emerald-saber-a-1000); + --content-assets-semantic-success-1: var(--green-emerald-saber-a-700); + --content-assets-semantic-success-2: var(--green-emerald-saber-a-300); + --content-assets-semantic-success-3: var(--green-emerald-saber-a-50); + --content-assets-semantic-success-4: var(--green-emerald-saber-a-50); + --content-assets-semantic-success-5: var(--green-emerald-saber-a-50); + --content-assets-semantic-warning-base: var(--orange-sunstreak-a-1000); + --content-assets-semantic-warning-1: var(--orange-sunstreak-a-700); + --content-assets-semantic-warning-2: var(--orange-sunstreak-a-300); + --content-assets-semantic-warning-3: var(--orange-sunstreak-a-50); + --content-assets-semantic-warning-4: var(--orange-sunstreak-a-50); + --content-assets-semantic-warning-5: var(--orange-sunstreak-a-50); + --content-assets-semantic-error-base: var(--red-crimson-wrath-a-1000); + --content-assets-semantic-error-1: var(--red-crimson-wrath-a-700); + --content-assets-semantic-error-2: var(--red-crimson-wrath-a-300); + --content-assets-semantic-error-3: var(--red-crimson-wrath-a-50); + --content-assets-semantic-error-4: var(--red-crimson-wrath-a-50); + --content-assets-semantic-error-5: var(--red-crimson-wrath-a-50); + --content-assets-semantic-info-base: var(--blue-skybolt-a-1000); + --content-assets-semantic-info-1: var(--blue-skybolt-a-700); + --content-assets-semantic-info-2: var(--blue-skybolt-a-300); + --content-assets-semantic-info-3: var(--blue-skybolt-a-50); + --content-assets-semantic-info-4: var(--blue-skybolt-a-50); + --content-assets-semantic-info-5: var(--blue-skybolt-a-50); + --content-assets-accent-1-base: var(--purple-nexus-a-1000); + --content-assets-accent-1-1: var(--purple-nexus-a-700); + --content-assets-accent-1-2: var(--purple-nexus-a-300); + --content-assets-accent-1-3: var(--purple-nexus-a-200); + --content-assets-accent-1-4: var(--purple-nexus-a-100); + --content-assets-accent-1-5: var(--purple-nexus-a-50); + --content-assets-accent-2-base: var(--pink-plasma-circuit-a-1000); + --content-assets-accent-2-1: var(--pink-plasma-circuit-a-700); + --content-assets-accent-2-2: var(--pink-plasma-circuit-a-300); + --content-assets-accent-2-3: var(--pink-plasma-circuit-a-200); + --content-assets-accent-2-4: var(--pink-plasma-circuit-a-100); + --content-assets-accent-2-5: var(--pink-plasma-circuit-a-50); + --content-assets-accent-3-base: var(--teal-sunspark-oasis-a-1000); + --content-assets-accent-3-1: var(--teal-sunspark-oasis-a-700); + --content-assets-accent-3-2: var(--teal-sunspark-oasis-a-300); + --content-assets-accent-3-3: var(--teal-sunspark-oasis-a-200); + --content-assets-accent-3-4: var(--teal-sunspark-oasis-a-100); + --content-assets-accent-3-5: var(--teal-sunspark-oasis-a-50); + --stroke-basic-black: var(--neutrals-pure-black-dnt-1000); + --stroke-basic-white: var(--neutrals-pure-white-dnt-1000); + --stroke-neutral-base: var(--neutrals-kyber-crystal-a-1000); + --stroke-neutral-1: var(--neutrals-kyber-crystal-a-700); + --stroke-neutral-2: var(--neutrals-kyber-crystal-a-500); + --stroke-neutral-3: var(--neutrals-kyber-crystal-a-300); + --stroke-neutral-4: var(--neutrals-kyber-crystal-a-200); + --stroke-neutral-5: var(--neutrals-kyber-crystal-a-100); + --stroke-neutral-6: var(--neutrals-kyber-crystal-a-100); + --stroke-brand-base: var(--blue-hyperstream-a-1000); + --stroke-brand-1: var(--blue-hyperstream-a-900); + --stroke-brand-2: var(--blue-hyperstream-a-800); + --stroke-brand-3: var(--blue-hyperstream-a-500); + --stroke-brand-4: var(--blue-hyperstream-a-200); + --stroke-brand-5: var(--blue-hyperstream-a-100); + --stroke-semantic-success-base: var(--green-emerald-saber-a-1000); + --stroke-focused-highlight: var(--blue-hyperstream-a-500); + --stroke-semantic-success-1: var(--green-emerald-saber-a-900); + --stroke-semantic-success-2: var(--green-emerald-saber-a-800); + --stroke-semantic-success-3: var(--green-emerald-saber-a-500); + --stroke-semantic-success-4: var(--green-emerald-saber-a-200); + --stroke-semantic-success-5: var(--green-emerald-saber-a-100); + --stroke-semantic-warning-base: var(--orange-sunstreak-a-1000); + --stroke-semantic-warning-1: var(--orange-sunstreak-a-900); + --stroke-semantic-warning-2: var(--orange-sunstreak-a-800); + --stroke-semantic-warning-3: var(--orange-sunstreak-a-500); + --stroke-semantic-warning-4: var(--orange-sunstreak-a-200); + --stroke-semantic-warning-5: var(--orange-sunstreak-a-100); + --stroke-semantic-error-base: var(--red-crimson-wrath-a-1000); + --stroke-semantic-error-1: var(--red-crimson-wrath-a-900); + --stroke-semantic-error-2: var(--red-crimson-wrath-a-800); + --stroke-semantic-error-3: var(--red-crimson-wrath-a-500); + --stroke-semantic-error-4: var(--red-crimson-wrath-a-200); + --stroke-semantic-error-5: var(--red-crimson-wrath-a-100); + --stroke-semantic-info-base: var(--blue-skybolt-a-1000); + --stroke-semantic-info-1: var(--blue-skybolt-a-900); + --stroke-semantic-info-2: var(--blue-skybolt-a-800); + --stroke-semantic-info-3: var(--blue-skybolt-a-500); + --stroke-semantic-info-4: var(--blue-skybolt-a-200); + --stroke-semantic-info-5: var(--blue-skybolt-a-100); + --stroke-accent-1-base: var(--purple-nexus-a-1000); + --stroke-accent-1-1: var(--purple-nexus-a-900); + --stroke-accent-1-2: var(--purple-nexus-a-800); + --stroke-accent-1-3: var(--purple-nexus-a-500); + --stroke-accent-1-4: var(--purple-nexus-a-200); + --stroke-accent-1-5: var(--purple-nexus-a-100); + --stroke-accent-2-base: var(--pink-plasma-circuit-a-1000); + --stroke-accent-2-1: var(--pink-plasma-circuit-a-900); + --stroke-accent-2-2: var(--pink-plasma-circuit-a-800); + --stroke-accent-2-3: var(--pink-plasma-circuit-a-500); + --stroke-accent-2-4: var(--pink-plasma-circuit-a-200); + --stroke-accent-2-5: var(--pink-plasma-circuit-a-100); + --stroke-accent-3-base: var(--teal-sunspark-oasis-a-1000); + --stroke-accent-3-1: var(--teal-sunspark-oasis-a-900); + --stroke-accent-3-2: var(--teal-sunspark-oasis-a-800); + --stroke-accent-3-3: var(--teal-sunspark-oasis-a-500); + --stroke-accent-3-4: var(--teal-sunspark-oasis-a-200); + --stroke-accent-3-5: var(--teal-sunspark-oasis-a-100); + --effects-focused-base: var(--blue-hyperstream-a-1000); + --effects-focused-secondary: var(--blue-hyperstream-a-400); + --effects-shadows-base-xs: var(--neutrals-darth-abyss-a-200); + --effects-shadows-base-sm: var(--neutrals-darth-abyss-a-300); + --effects-shadows-base-base: var(--neutrals-darth-abyss-a-400); + --effects-shadows-base-md: var(--neutrals-darth-abyss-a-500); + --effects-shadows-base-lg: var(--neutrals-darth-abyss-a-600); + --effects-shadows-base-xl: var(--neutrals-darth-abyss-a-700); + --effects-shadows-base-2-xl: var(--neutrals-darth-abyss-a-800); + --effects-shadows-inverse-xs: var(--neutrals-kyber-crystal-a-200); + --effects-shadows-inverse-sm: var(--neutrals-kyber-crystal-a-300); + --effects-shadows-inverse-base: var(--neutrals-kyber-crystal-a-400); + --effects-shadows-inverse-md: var(--neutrals-kyber-crystal-a-500); + --effects-shadows-inverse-lg: var(--neutrals-kyber-crystal-a-600); + --effects-shadows-inverse-xl: var(--neutrals-kyber-crystal-a-700); + --effects-shadows-inverse-2-xl: var(--neutrals-kyber-crystal-a-800); + --background-accent-4-base: var(--orange-sunstreak-a-1000); + --background-accent-4-1: var(--orange-sunstreak-a-900); + --background-accent-4-2: var(--orange-sunstreak-a-700); + --background-accent-4-3: var(--orange-sunstreak-a-500); + --background-accent-4-4: var(--orange-sunstreak-a-400); + --background-accent-4-5: var(--orange-sunstreak-a-200); + --stroke-accent-4-base: var(--orange-sunstreak-a-1000); + --stroke-accent-4-1: var(--orange-sunstreak-a-900); + --stroke-accent-4-2: var(--orange-sunstreak-a-800); + --stroke-accent-4-3: var(--orange-sunstreak-a-500); + --stroke-accent-4-4: var(--orange-sunstreak-a-200); + --stroke-accent-4-5: var(--orange-sunstreak-a-100); + --content-text-accent-4-base: var(--orange-sunstreak-a-1000); + --content-text-accent-4-1: var(--orange-sunstreak-a-700); + --content-text-accent-4-2: var(--orange-sunstreak-a-300); + --content-text-accent-4-3: var(--orange-sunstreak-a-200); + --content-text-accent-4-4: var(--orange-sunstreak-a-100); + --content-text-accent-4-5: var(--orange-sunstreak-a-50); + --content-assets-accent-4-base: var(--orange-sunstreak-a-1000); + --content-assets-accent-4-1: var(--orange-sunstreak-a-700); + --content-assets-accent-4-2: var(--orange-sunstreak-a-300); + --content-assets-accent-4-3: var(--orange-sunstreak-a-200); + --content-assets-accent-4-4: var(--orange-sunstreak-a-100); + --content-assets-accent-4-5: var(--orange-sunstreak-a-50); + } +} diff --git a/src/assets/css/theme-light.css b/src/assets/css/theme-light.css new file mode 100644 index 000000000..f74a31db8 --- /dev/null +++ b/src/assets/css/theme-light.css @@ -0,0 +1,324 @@ +:root, +:host { + &.theme-light { + --reablocks-theme: light; + + --background-basic-clear: var(--neutrals-clear-dnt-clear); + --background-basic-black: var(--neutrals-pure-black-dnt-1000); + --background-basic-white: var(--neutrals-pure-white-dnt-1000); + --background-neutral-canvas-base: var(--neutrals-kyber-crystal-a-1000); + --background-neutral-raised-base: var(--neutrals-darth-abyss-a-1000); + --background-neutral-inverse-raised-base: var( + --neutrals-kyber-crystal-a-1000 + ); + --background-neutral-inverse-raised-1: var(--neutrals-kyber-crystal-a-900); + --background-neutral-inverse-raised-2: var(--neutrals-kyber-crystal-a-600); + --background-neutral-inverse-raised-3: var(--neutrals-kyber-crystal-a-400); + --background-neutral-inverse-raised-4: var(--neutrals-kyber-crystal-a-300); + --background-neutral-inverse-raised-5: var(--neutrals-kyber-crystal-a-100); + --background-neutral-inverse-raised-6: var(--neutrals-kyber-crystal-a-50); + --background-neutral-raised-1: var(--neutrals-darth-abyss-a-900); + --background-neutral-raised-2: var(--neutrals-darth-abyss-a-600); + --background-neutral-raised-3: var(--neutrals-darth-abyss-a-400); + --background-neutral-raised-4: var(--neutrals-darth-abyss-a-300); + --background-neutral-raised-5: var(--neutrals-pure-white-dnt-1000); + --background-neutral-raised-6: var(--neutrals-pure-white-dnt-1000); + --background-brand-base: var(--blue-hyperstream-a-1000); + --background-brand-1: var(--blue-hyperstream-a-900); + --background-brand-2: var(--blue-hyperstream-a-700); + --background-brand-3: var(--blue-hyperstream-a-500); + --background-brand-4: var(--blue-hyperstream-a-400); + --background-brand-5: var(--blue-hyperstream-a-200); + --background-semantic-success-base: var(--green-emerald-saber-a-1000); + --background-semantic-warning-base: var(--orange-sunstreak-a-1000); + --background-semantic-warning-1: var(--orange-sunstreak-a-900); + --background-semantic-warning-2: var(--orange-sunstreak-a-700); + --background-semantic-warning-3: var(--orange-sunstreak-a-500); + --background-semantic-warning-4: var(--orange-sunstreak-a-400); + --background-semantic-warning-5: var(--orange-sunstreak-a-200); + --background-semantic-success-1: var(--green-emerald-saber-a-900); + --background-semantic-success-2: var(--green-emerald-saber-a-700); + --background-semantic-success-3: var(--green-emerald-saber-a-500); + --background-semantic-success-4: var(--green-emerald-saber-a-400); + --background-semantic-success-5: var(--green-emerald-saber-a-200); + --background-semantic-info-base: var(--blue-skybolt-a-1000); + --background-semantic-info-1: var(--blue-skybolt-a-900); + --background-semantic-info-2: var(--blue-skybolt-a-700); + --background-semantic-info-3: var(--blue-skybolt-a-500); + --background-semantic-info-4: var(--blue-skybolt-a-400); + --background-semantic-info-5: var(--blue-skybolt-a-200); + --background-semantic-error-base: var(--red-crimson-wrath-a-1000); + --background-semantic-error-1: var(--red-crimson-wrath-a-900); + --background-semantic-error-2: var(--red-crimson-wrath-a-700); + --background-semantic-error-3: var(--red-crimson-wrath-a-500); + --background-semantic-error-4: var(--red-crimson-wrath-a-400); + --background-semantic-error-5: var(--red-crimson-wrath-a-200); + --background-accent-1-base: var(--purple-nexus-a-1000); + --background-accent-1-1: var(--purple-nexus-a-900); + --background-accent-1-2: var(--purple-nexus-a-700); + --background-accent-1-3: var(--purple-nexus-a-500); + --background-accent-1-4: var(--purple-nexus-a-400); + --background-accent-1-5: var(--purple-nexus-a-200); + --background-accent-2-base: var(--pink-plasma-circuit-a-1000); + --background-accent-2-1: var(--pink-plasma-circuit-a-900); + --background-accent-2-2: var(--pink-plasma-circuit-a-700); + --background-accent-2-3: var(--pink-plasma-circuit-a-500); + --background-accent-2-4: var(--pink-plasma-circuit-a-400); + --background-accent-2-5: var(--pink-plasma-circuit-a-200); + --background-accent-3-base: var(--teal-sunspark-oasis-a-1000); + --background-accent-3-1: var(--teal-sunspark-oasis-a-900); + --background-accent-3-2: var(--teal-sunspark-oasis-a-700); + --background-accent-3-3: var(--teal-sunspark-oasis-a-500); + --background-accent-3-4: var(--teal-sunspark-oasis-a-400); + --background-accent-3-5: var(--teal-sunspark-oasis-a-200); + --stroke-basic-clear: var(--neutrals-clear-dnt-clear); + --content-text-basic-clear: var(--neutrals-clear-dnt-clear); + --gradient-neutral-50: var(--neutrals-darth-abyss-a-50); + --gradient-neutral-100: var(--neutrals-darth-abyss-a-100); + --gradient-neutral-200: var(--neutrals-darth-abyss-a-200); + --gradient-neutral-300: var(--neutrals-darth-abyss-a-300); + --gradient-neutral-400: var(--neutrals-darth-abyss-a-400); + --gradient-neutral-500: var(--neutrals-darth-abyss-a-500); + --gradient-neutral-700: var(--neutrals-darth-abyss-a-700); + --gradient-neutral-1000: var(--neutrals-darth-abyss-a-1000); + --gradient-brand-50: var(--blue-hyperstream-a-50); + --gradient-brand-100: var(--blue-hyperstream-a-100); + --gradient-brand-200: var(--blue-hyperstream-a-200); + --gradient-brand-300: var(--blue-hyperstream-a-300); + --gradient-brand-400: var(--blue-hyperstream-a-400); + --gradient-brand-500: var(--blue-hyperstream-a-500); + --gradient-brand-700: var(--blue-hyperstream-a-700); + --gradient-brand-1000: var(--blue-hyperstream-a-1000); + --content-text-basic-black: var(--neutrals-pure-black-dnt-1000); + --content-text-basic-white: var(--neutrals-pure-white-dnt-1000); + --content-text-neutral-base: var(--neutrals-darth-abyss-a-1000); + --content-text-neutral-1: var(--neutrals-darth-abyss-a-900); + --content-text-neutral-2: var(--neutrals-darth-abyss-a-800); + --content-text-neutral-3: var(--neutrals-darth-abyss-a-500); + --content-text-neutral-4: var(--neutrals-darth-abyss-a-300); + --content-text-neutral-5: var(--neutrals-darth-abyss-a-200); + --content-text-on-color-dark-dark: var(--neutrals-darth-abyss-a-1000); + --content-text-on-color-dark-light: var(--neutrals-kyber-crystal-a-1000); + --content-text-on-color-light-dark: var(--neutrals-darth-abyss-a-1000); + --content-text-on-color-light-light: var(--neutrals-kyber-crystal-a-1000); + --content-text-inverse-base: var(--neutrals-kyber-crystal-a-1000); + --content-text-inverse-1: var(--neutrals-kyber-crystal-a-900); + --content-text-inverse-2: var(--neutrals-kyber-crystal-a-800); + --content-text-inverse-3: var(--neutrals-kyber-crystal-a-500); + --content-text-inverse-4: var(--neutrals-kyber-crystal-a-300); + --content-text-inverse-5: var(--neutrals-kyber-crystal-a-200); + --content-text-brand-base: var(--blue-hyperstream-a-1000); + --content-text-brand-1: var(--blue-hyperstream-a-700); + --content-text-brand-2: var(--blue-hyperstream-a-300); + --content-text-brand-3: var(--blue-hyperstream-a-200); + --content-text-brand-4: var(--blue-hyperstream-a-100); + --content-text-brand-5: var(--blue-hyperstream-a-50); + --content-text-semantic-success-base: var(--green-emerald-saber-a-1000); + --content-text-semantic-success-1: var(--green-emerald-saber-a-700); + --content-text-semantic-success-2: var(--green-emerald-saber-a-300); + --content-text-semantic-success-3: var(--green-emerald-saber-a-200); + --content-text-semantic-success-4: var(--green-emerald-saber-a-100); + --content-text-semantic-success-5: var(--green-emerald-saber-a-50); + --content-text-semantic-warning-base: var(--orange-sunstreak-a-1000); + --content-text-semantic-warning-1: var(--orange-sunstreak-a-700); + --content-text-semantic-warning-2: var(--orange-sunstreak-a-300); + --content-text-semantic-warning-3: var(--orange-sunstreak-a-200); + --content-text-semantic-warning-4: var(--orange-sunstreak-a-100); + --content-text-semantic-warning-5: var(--orange-sunstreak-a-50); + --content-text-semantic-error-base: var(--red-crimson-wrath-a-1000); + --content-text-semantic-error-1: var(--red-crimson-wrath-a-700); + --content-text-semantic-error-2: var(--red-crimson-wrath-a-300); + --content-text-semantic-error-3: var(--red-crimson-wrath-a-200); + --content-text-semantic-error-4: var(--red-crimson-wrath-a-100); + --content-text-semantic-error-5: var(--red-crimson-wrath-a-50); + --content-text-semantic-info-base: var(--blue-skybolt-a-1000); + --content-text-semantic-info-1: var(--blue-skybolt-a-700); + --content-text-semantic-info-2: var(--blue-skybolt-a-300); + --content-text-semantic-info-3: var(--blue-skybolt-a-200); + --content-text-semantic-info-4: var(--blue-skybolt-a-100); + --content-text-semantic-info-5: var(--blue-skybolt-a-50); + --content-text-accent-1-base: var(--purple-nexus-a-1000); + --content-text-accent-1-1: var(--purple-nexus-a-700); + --content-text-accent-1-2: var(--purple-nexus-a-300); + --content-text-accent-1-3: var(--purple-nexus-a-200); + --content-text-accent-1-4: var(--purple-nexus-a-100); + --content-text-accent-1-5: var(--purple-nexus-a-50); + --content-text-accent-2-base: var(--pink-plasma-circuit-a-1000); + --content-text-accent-2-1: var(--pink-plasma-circuit-a-700); + --content-text-accent-2-2: var(--pink-plasma-circuit-a-300); + --content-text-accent-2-3: var(--pink-plasma-circuit-a-200); + --content-text-accent-2-4: var(--pink-plasma-circuit-a-100); + --content-text-accent-2-5: var(--pink-plasma-circuit-a-50); + --content-text-accent-3-base: var(--teal-sunspark-oasis-a-1000); + --content-text-accent-3-1: var(--teal-sunspark-oasis-a-700); + --content-text-accent-3-2: var(--teal-sunspark-oasis-a-300); + --content-text-accent-3-3: var(--teal-sunspark-oasis-a-200); + --content-text-accent-3-4: var(--teal-sunspark-oasis-a-100); + --content-text-accent-3-5: var(--teal-sunspark-oasis-a-50); + --content-assets-basic-clear: var(--neutrals-clear-dnt-clear); + --content-assets-basic-black: var(--neutrals-pure-black-dnt-1000); + --content-assets-basic-white: var(--neutrals-pure-white-dnt-1000); + --content-assets-neutral-base: var(--neutrals-darth-abyss-a-1000); + --content-assets-neutral-1: var(--neutrals-darth-abyss-a-900); + --content-assets-neutral-2: var(--neutrals-darth-abyss-a-800); + --content-assets-neutral-3: var(--neutrals-darth-abyss-a-500); + --content-assets-neutral-4: var(--neutrals-darth-abyss-a-300); + --content-assets-neutral-5: var(--neutrals-darth-abyss-a-200); + --content-assets-on-color-dark-dark: var(--neutrals-darth-abyss-a-1000); + --content-assets-on-color-dark-light: var(--neutrals-kyber-crystal-a-1000); + --content-assets-on-color-light-dark: var(--neutrals-darth-abyss-a-1000); + --content-assets-on-color-light-light: var(--neutrals-kyber-crystal-a-1000); + --content-assets-inverse-base: var(--neutrals-kyber-crystal-a-1000); + --content-assets-inverse-1: var(--neutrals-kyber-crystal-a-900); + --content-assets-inverse-2: var(--neutrals-kyber-crystal-a-800); + --content-assets-inverse-3: var(--neutrals-kyber-crystal-a-500); + --content-assets-inverse-4: var(--neutrals-kyber-crystal-a-300); + --content-assets-inverse-5: var(--neutrals-kyber-crystal-a-200); + --content-assets-brand-base: var(--blue-hyperstream-a-1000); + --content-assets-brand-1: var(--blue-hyperstream-a-700); + --content-assets-brand-2: var(--blue-hyperstream-a-300); + --content-assets-brand-3: var(--blue-hyperstream-a-200); + --content-assets-brand-4: var(--blue-hyperstream-a-100); + --content-assets-brand-5: var(--blue-hyperstream-a-50); + --content-assets-semantic-success-base: var(--green-emerald-saber-a-1000); + --content-assets-semantic-success-1: var(--green-emerald-saber-a-700); + --content-assets-semantic-success-2: var(--green-emerald-saber-a-300); + --content-assets-semantic-success-3: var(--green-emerald-saber-a-50); + --content-assets-semantic-success-4: var(--green-emerald-saber-a-50); + --content-assets-semantic-success-5: var(--green-emerald-saber-a-50); + --content-assets-semantic-warning-base: var(--orange-sunstreak-a-1000); + --content-assets-semantic-warning-1: var(--orange-sunstreak-a-700); + --content-assets-semantic-warning-2: var(--orange-sunstreak-a-300); + --content-assets-semantic-warning-3: var(--orange-sunstreak-a-50); + --content-assets-semantic-warning-4: var(--orange-sunstreak-a-50); + --content-assets-semantic-warning-5: var(--orange-sunstreak-a-50); + --content-assets-semantic-error-base: var(--red-crimson-wrath-a-1000); + --content-assets-semantic-error-1: var(--red-crimson-wrath-a-700); + --content-assets-semantic-error-2: var(--red-crimson-wrath-a-300); + --content-assets-semantic-error-3: var(--red-crimson-wrath-a-50); + --content-assets-semantic-error-4: var(--red-crimson-wrath-a-50); + --content-assets-semantic-error-5: var(--red-crimson-wrath-a-50); + --content-assets-semantic-info-base: var(--blue-skybolt-a-1000); + --content-assets-semantic-info-1: var(--blue-skybolt-a-700); + --content-assets-semantic-info-2: var(--blue-skybolt-a-300); + --content-assets-semantic-info-3: var(--blue-skybolt-a-50); + --content-assets-semantic-info-4: var(--blue-skybolt-a-50); + --content-assets-semantic-info-5: var(--blue-skybolt-a-50); + --content-assets-accent-1-base: var(--purple-nexus-a-1000); + --content-assets-accent-1-1: var(--purple-nexus-a-700); + --content-assets-accent-1-2: var(--purple-nexus-a-300); + --content-assets-accent-1-3: var(--purple-nexus-a-200); + --content-assets-accent-1-4: var(--purple-nexus-a-100); + --content-assets-accent-1-5: var(--purple-nexus-a-50); + --content-assets-accent-2-base: var(--pink-plasma-circuit-a-1000); + --content-assets-accent-2-1: var(--pink-plasma-circuit-a-700); + --content-assets-accent-2-2: var(--pink-plasma-circuit-a-300); + --content-assets-accent-2-3: var(--pink-plasma-circuit-a-200); + --content-assets-accent-2-4: var(--pink-plasma-circuit-a-100); + --content-assets-accent-2-5: var(--pink-plasma-circuit-a-50); + --content-assets-accent-3-base: var(--teal-sunspark-oasis-a-1000); + --content-assets-accent-3-1: var(--teal-sunspark-oasis-a-700); + --content-assets-accent-3-2: var(--teal-sunspark-oasis-a-300); + --content-assets-accent-3-3: var(--teal-sunspark-oasis-a-200); + --content-assets-accent-3-4: var(--teal-sunspark-oasis-a-100); + --content-assets-accent-3-5: var(--teal-sunspark-oasis-a-50); + --stroke-basic-black: var(--neutrals-pure-black-dnt-1000); + --stroke-basic-white: var(--neutrals-pure-white-dnt-1000); + --stroke-neutral-base: var(--neutrals-darth-abyss-a-1000); + --stroke-neutral-1: var(--neutrals-darth-abyss-a-700); + --stroke-neutral-2: var(--neutrals-darth-abyss-a-500); + --stroke-neutral-3: var(--neutrals-darth-abyss-a-300); + --stroke-neutral-4: var(--neutrals-darth-abyss-a-200); + --stroke-neutral-5: var(--neutrals-darth-abyss-a-100); + --stroke-neutral-6: var(--neutrals-darth-abyss-a-100); + --stroke-brand-base: var(--blue-hyperstream-a-1000); + --stroke-brand-1: var(--blue-hyperstream-a-900); + --stroke-brand-2: var(--blue-hyperstream-a-800); + --stroke-brand-3: var(--blue-hyperstream-a-500); + --stroke-brand-4: var(--blue-hyperstream-a-200); + --stroke-brand-5: var(--blue-hyperstream-a-100); + --stroke-semantic-success-base: var(--green-emerald-saber-a-1000); + --stroke-focused-highlight: var(--blue-hyperstream-a-500); + --stroke-semantic-success-1: var(--green-emerald-saber-a-900); + --stroke-semantic-success-2: var(--green-emerald-saber-a-800); + --stroke-semantic-success-3: var(--green-emerald-saber-a-500); + --stroke-semantic-success-4: var(--green-emerald-saber-a-200); + --stroke-semantic-success-5: var(--green-emerald-saber-a-100); + --stroke-semantic-warning-base: var(--orange-sunstreak-a-1000); + --stroke-semantic-warning-1: var(--orange-sunstreak-a-900); + --stroke-semantic-warning-2: var(--orange-sunstreak-a-600); + --stroke-semantic-warning-3: var(--orange-sunstreak-a-500); + --stroke-semantic-warning-4: var(--orange-sunstreak-a-200); + --stroke-semantic-warning-5: var(--orange-sunstreak-a-100); + --stroke-semantic-error-base: var(--red-crimson-wrath-a-1000); + --stroke-semantic-error-1: var(--red-crimson-wrath-a-900); + --stroke-semantic-error-2: var(--red-crimson-wrath-a-800); + --stroke-semantic-error-3: var(--red-crimson-wrath-a-500); + --stroke-semantic-error-4: var(--red-crimson-wrath-a-200); + --stroke-semantic-error-5: var(--red-crimson-wrath-a-100); + --stroke-semantic-info-base: var(--blue-skybolt-a-1000); + --stroke-semantic-info-1: var(--blue-skybolt-a-900); + --stroke-semantic-info-2: var(--blue-skybolt-a-800); + --stroke-semantic-info-3: var(--blue-skybolt-a-500); + --stroke-semantic-info-4: var(--blue-skybolt-a-200); + --stroke-semantic-info-5: var(--blue-skybolt-a-100); + --stroke-accent-1-base: var(--purple-nexus-a-1000); + --stroke-accent-1-1: var(--purple-nexus-a-900); + --stroke-accent-1-2: var(--purple-nexus-a-800); + --stroke-accent-1-3: var(--purple-nexus-a-500); + --stroke-accent-1-4: var(--purple-nexus-a-200); + --stroke-accent-1-5: var(--purple-nexus-a-100); + --stroke-accent-2-base: var(--pink-plasma-circuit-a-1000); + --stroke-accent-2-1: var(--pink-plasma-circuit-a-900); + --stroke-accent-2-2: var(--pink-plasma-circuit-a-800); + --stroke-accent-2-3: var(--pink-plasma-circuit-a-500); + --stroke-accent-2-4: var(--pink-plasma-circuit-a-200); + --stroke-accent-2-5: var(--pink-plasma-circuit-a-100); + --stroke-accent-3-base: var(--teal-sunspark-oasis-a-1000); + --stroke-accent-3-1: var(--teal-sunspark-oasis-a-900); + --stroke-accent-3-2: var(--teal-sunspark-oasis-a-800); + --stroke-accent-3-3: var(--teal-sunspark-oasis-a-500); + --stroke-accent-3-4: var(--teal-sunspark-oasis-a-200); + --stroke-accent-3-5: var(--teal-sunspark-oasis-a-100); + --effects-focused-base: var(--blue-hyperstream-a-1000); + --effects-focused-secondary: var(--blue-hyperstream-a-400); + --effects-shadows-base-xs: var(--neutrals-darth-abyss-a-200); + --effects-shadows-base-sm: var(--neutrals-darth-abyss-a-300); + --effects-shadows-base-base: var(--neutrals-darth-abyss-a-400); + --effects-shadows-base-md: var(--neutrals-darth-abyss-a-500); + --effects-shadows-base-lg: var(--neutrals-darth-abyss-a-600); + --effects-shadows-base-xl: var(--neutrals-darth-abyss-a-700); + --effects-shadows-base-2-xl: var(--neutrals-darth-abyss-a-800); + --effects-shadows-inverse-xs: var(--neutrals-darth-abyss-a-200); + --effects-shadows-inverse-sm: var(--neutrals-darth-abyss-a-300); + --effects-shadows-inverse-base: var(--neutrals-darth-abyss-a-400); + --effects-shadows-inverse-md: var(--neutrals-darth-abyss-a-500); + --effects-shadows-inverse-lg: var(--neutrals-darth-abyss-a-600); + --effects-shadows-inverse-xl: var(--neutrals-darth-abyss-a-700); + --effects-shadows-inverse-2-xl: var(--neutrals-darth-abyss-a-800); + --background-accent-4-base: var(--orange-sunstreak-a-1000); + --background-accent-4-1: var(--orange-sunstreak-a-900); + --background-accent-4-2: var(--orange-sunstreak-a-700); + --background-accent-4-3: var(--orange-sunstreak-a-500); + --background-accent-4-4: var(--orange-sunstreak-a-400); + --background-accent-4-5: var(--orange-sunstreak-a-200); + --stroke-accent-4-base: var(--orange-sunstreak-a-1000); + --stroke-accent-4-1: var(--orange-sunstreak-a-900); + --stroke-accent-4-2: var(--orange-sunstreak-a-800); + --stroke-accent-4-3: var(--orange-sunstreak-a-500); + --stroke-accent-4-4: var(--orange-sunstreak-a-200); + --stroke-accent-4-5: var(--orange-sunstreak-a-100); + --content-text-accent-4-base: var(--orange-sunstreak-a-1000); + --content-text-accent-4-1: var(--orange-sunstreak-a-700); + --content-text-accent-4-2: var(--orange-sunstreak-a-300); + --content-text-accent-4-3: var(--orange-sunstreak-a-200); + --content-text-accent-4-4: var(--orange-sunstreak-a-100); + --content-text-accent-4-5: var(--orange-sunstreak-a-50); + --content-assets-accent-4-base: var(--orange-sunstreak-a-1000); + --content-assets-accent-4-1: var(--orange-sunstreak-a-700); + --content-assets-accent-4-2: var(--orange-sunstreak-a-300); + --content-assets-accent-4-3: var(--orange-sunstreak-a-200); + --content-assets-accent-4-4: var(--orange-sunstreak-a-100); + --content-assets-accent-4-5: var(--orange-sunstreak-a-50); + } +} diff --git a/src/assets/css/tw/backgrounds.css b/src/assets/css/tw/backgrounds.css new file mode 100644 index 000000000..188859f74 --- /dev/null +++ b/src/assets/css/tw/backgrounds.css @@ -0,0 +1,3 @@ +@theme inline { + /* Backgrounds */ +} diff --git a/src/assets/css/tw/colors.css b/src/assets/css/tw/colors.css new file mode 100644 index 000000000..93e670736 --- /dev/null +++ b/src/assets/css/tw/colors.css @@ -0,0 +1,1988 @@ +@theme inline { + /* TW overrides */ + --color-red-*: initial; + --color-orange-*: initial; + --color-amber-*: initial; + --color-yellow-*: initial; + --color-lime-*: initial; + --color-green-*: initial; + --color-emerald-*: initial; + --color-teal-*: initial; + --color-cyan-*: initial; + --color-sky-*: initial; + --color-blue-*: initial; + --color-indigo-*: initial; + --color-violet-*: initial; + --color-purple-*: initial; + --color-fuchsia-*: initial; + --color-pink-*: initial; + --color-rose-*: initial; + --color-slate-*: initial; + --color-gray-*: initial; + --color-zinc-*: initial; + --color-neutral-*: initial; + --color-stone-*: initial; + + --color-white: var(--neutrals-pure-white-dnt-1000); + --color-black: var(--neutrals-pure-black-dnt-1000); + + /* Color tokens */ + --color-neutrals-clear-dnt-clear: var(--neutrals-clear-dnt-clear); + --color-neutrals-pure-black-dnt-50: var(--neutrals-pure-black-dnt-50); + --color-neutrals-pure-black-dnt-100: var(--neutrals-pure-black-dnt-100); + --color-neutrals-pure-black-dnt-200: var(--neutrals-pure-black-dnt-200); + --color-neutrals-pure-black-dnt-300: var(--neutrals-pure-black-dnt-300); + --color-neutrals-pure-black-dnt-400: var(--neutrals-pure-black-dnt-400); + --color-neutrals-pure-black-dnt-500: var(--neutrals-pure-black-dnt-500); + --color-neutrals-pure-black-dnt-600: var(--neutrals-pure-black-dnt-600); + --color-neutrals-pure-black-dnt-700: var(--neutrals-pure-black-dnt-700); + --color-neutrals-pure-black-dnt-800: var(--neutrals-pure-black-dnt-800); + --color-neutrals-pure-black-dnt-900: var(--neutrals-pure-black-dnt-900); + --color-neutrals-pure-black-dnt-950: var(--neutrals-pure-black-dnt-950); + --color-neutrals-pure-black-dnt-1000: var(--neutrals-pure-black-dnt-1000); + --color-neutrals-pure-white-dnt-50: var(--neutrals-pure-white-dnt-50); + --color-neutrals-pure-white-dnt-100: var(--neutrals-pure-white-dnt-100); + --color-neutrals-pure-white-dnt-200: var(--neutrals-pure-white-dnt-200); + --color-neutrals-pure-white-dnt-300: var(--neutrals-pure-white-dnt-300); + --color-neutrals-pure-white-dnt-400: var(--neutrals-pure-white-dnt-400); + --color-neutrals-pure-white-dnt-500: var(--neutrals-pure-white-dnt-500); + --color-neutrals-pure-white-dnt-600: var(--neutrals-pure-white-dnt-600); + --color-neutrals-pure-white-dnt-700: var(--neutrals-pure-white-dnt-700); + --color-neutrals-pure-white-dnt-800: var(--neutrals-pure-white-dnt-800); + --color-neutrals-pure-white-dnt-900: var(--neutrals-pure-white-dnt-900); + --color-neutrals-pure-white-dnt-950: var(--neutrals-pure-white-dnt-950); + --color-neutrals-pure-white-dnt-1000: var(--neutrals-pure-white-dnt-1000); + --color-neutrals-force-dusk-50: var(--neutrals-force-dusk-50); + --color-neutrals-force-dusk-100: var(--neutrals-force-dusk-100); + --color-neutrals-force-dusk-200: var(--neutrals-force-dusk-200); + --color-neutrals-force-dusk-300: var(--neutrals-force-dusk-300); + --color-neutrals-force-dusk-400: var(--neutrals-force-dusk-400); + --color-neutrals-force-dusk-500: var(--neutrals-force-dusk-500); + --color-neutrals-force-dusk-600: var(--neutrals-force-dusk-600); + --color-neutrals-force-dusk-700: var(--neutrals-force-dusk-700); + --color-neutrals-force-dusk-800: var(--neutrals-force-dusk-800); + --color-neutrals-force-dusk-900: var(--neutrals-force-dusk-900); + --color-neutrals-force-dusk-950: var(--neutrals-force-dusk-950); + --color-neutrals-force-dusk-1000: var(--neutrals-force-dusk-1000); + --color-neutrals-darth-abyss-a-50: var(--neutrals-darth-abyss-a-50); + --color-neutrals-darth-abyss-a-100: var(--neutrals-darth-abyss-a-100); + --color-neutrals-darth-abyss-a-200: var(--neutrals-darth-abyss-a-200); + --color-neutrals-darth-abyss-a-300: var(--neutrals-darth-abyss-a-300); + --color-neutrals-darth-abyss-a-400: var(--neutrals-darth-abyss-a-400); + --color-neutrals-darth-abyss-a-500: var(--neutrals-darth-abyss-a-500); + --color-neutrals-darth-abyss-a-600: var(--neutrals-darth-abyss-a-600); + --color-neutrals-darth-abyss-a-700: var(--neutrals-darth-abyss-a-700); + --color-neutrals-darth-abyss-a-800: var(--neutrals-darth-abyss-a-800); + --color-neutrals-darth-abyss-a-900: var(--neutrals-darth-abyss-a-900); + --color-neutrals-darth-abyss-a-950: var(--neutrals-darth-abyss-a-950); + --color-neutrals-darth-abyss-a-1000: var(--neutrals-darth-abyss-a-1000); + --color-neutrals-nightblade-a-50: var(--neutrals-nightblade-a-50); + --color-neutrals-nightblade-a-100: var(--neutrals-nightblade-a-100); + --color-neutrals-nightblade-a-200: var(--neutrals-nightblade-a-200); + --color-neutrals-nightblade-a-300: var(--neutrals-nightblade-a-300); + --color-neutrals-nightblade-a-400: var(--neutrals-nightblade-a-400); + --color-neutrals-nightblade-a-500: var(--neutrals-nightblade-a-500); + --color-neutrals-nightblade-a-600: var(--neutrals-nightblade-a-600); + --color-neutrals-nightblade-a-700: var(--neutrals-nightblade-a-700); + --color-neutrals-nightblade-a-800: var(--neutrals-nightblade-a-800); + --color-neutrals-nightblade-a-900: var(--neutrals-nightblade-a-900); + --color-neutrals-nightblade-a-950: var(--neutrals-nightblade-a-950); + --color-neutrals-nightblade-a-1000: var(--neutrals-nightblade-a-1000); + --color-neutrals-darkstar-core-a-50: var(--neutrals-darkstar-core-a-50); + --color-neutrals-duskwraith-a-50: var(--neutrals-duskwraith-a-50); + --color-neutrals-duskwraith-a-100: var(--neutrals-duskwraith-a-100); + --color-neutrals-duskwraith-a-200: var(--neutrals-duskwraith-a-200); + --color-neutrals-duskwraith-a-300: var(--neutrals-duskwraith-a-300); + --color-neutrals-duskwraith-a-400: var(--neutrals-duskwraith-a-400); + --color-neutrals-duskwraith-a-500: var(--neutrals-duskwraith-a-500); + --color-neutrals-duskwraith-a-600: var(--neutrals-duskwraith-a-600); + --color-neutrals-duskwraith-a-700: var(--neutrals-duskwraith-a-700); + --color-neutrals-duskwraith-a-800: var(--neutrals-duskwraith-a-800); + --color-neutrals-duskwraith-a-900: var(--neutrals-duskwraith-a-900); + --color-neutrals-duskwraith-a-950: var(--neutrals-duskwraith-a-950); + --color-neutrals-duskwraith-a-1000: var(--neutrals-duskwraith-a-1000); + --color-neutrals-darkstar-core-a-100: var(--neutrals-darkstar-core-a-100); + --color-neutrals-darkstar-core-a-200: var(--neutrals-darkstar-core-a-200); + --color-neutrals-darkstar-core-a-300: var(--neutrals-darkstar-core-a-300); + --color-neutrals-darkstar-core-a-400: var(--neutrals-darkstar-core-a-400); + --color-neutrals-darkstar-core-a-500: var(--neutrals-darkstar-core-a-500); + --color-neutrals-darkstar-core-a-600: var(--neutrals-darkstar-core-a-600); + --color-neutrals-darkstar-core-a-700: var(--neutrals-darkstar-core-a-700); + --color-neutrals-darkstar-core-a-800: var(--neutrals-darkstar-core-a-800); + --color-neutrals-darkstar-core-a-900: var(--neutrals-darkstar-core-a-900); + --color-neutrals-darkstar-core-a-950: var(--neutrals-darkstar-core-a-950); + --color-neutrals-darkstar-core-a-1000: var(--neutrals-darkstar-core-a-1000); + --color-neutrals-kyber-crystal-a-50: var(--neutrals-kyber-crystal-a-50); + --color-neutrals-kyber-crystal-a-100: var(--neutrals-kyber-crystal-a-100); + --color-neutrals-kyber-crystal-a-200: var(--neutrals-kyber-crystal-a-200); + --color-neutrals-kyber-crystal-a-300: var(--neutrals-kyber-crystal-a-300); + --color-neutrals-kyber-crystal-a-400: var(--neutrals-kyber-crystal-a-400); + --color-neutrals-kyber-crystal-a-500: var(--neutrals-kyber-crystal-a-500); + --color-neutrals-kyber-crystal-a-600: var(--neutrals-kyber-crystal-a-600); + --color-neutrals-kyber-crystal-a-700: var(--neutrals-kyber-crystal-a-700); + --color-neutrals-kyber-crystal-a-800: var(--neutrals-kyber-crystal-a-800); + --color-neutrals-kyber-crystal-a-900: var(--neutrals-kyber-crystal-a-900); + --color-neutrals-kyber-crystal-a-950: var(--neutrals-kyber-crystal-a-950); + --color-neutrals-kyber-crystal-a-1000: var(--neutrals-kyber-crystal-a-1000); + --color-blue-hyperstream-a-50: var(--blue-hyperstream-a-50); + --color-blue-hyperstream-a-100: var(--blue-hyperstream-a-100); + --color-blue-hyperstream-a-200: var(--blue-hyperstream-a-200); + --color-blue-hyperstream-a-300: var(--blue-hyperstream-a-300); + --color-blue-hyperstream-a-400: var(--blue-hyperstream-a-400); + --color-blue-hyperstream-a-500: var(--blue-hyperstream-a-500); + --color-blue-hyperstream-a-600: var(--blue-hyperstream-a-600); + --color-blue-hyperstream-a-700: var(--blue-hyperstream-a-700); + --color-blue-hyperstream-a-800: var(--blue-hyperstream-a-800); + --color-blue-hyperstream-a-900: var(--blue-hyperstream-a-900); + --color-blue-hyperstream-a-950: var(--blue-hyperstream-a-950); + --color-blue-hyperstream-a-1000: var(--blue-hyperstream-a-1000); + --color-blue-hyperstream-50: var(--blue-hyperstream-50); + --color-blue-hyperstream-100: var(--blue-hyperstream-100); + --color-blue-hyperstream-200: var(--blue-hyperstream-200); + --color-blue-hyperstream-300: var(--blue-hyperstream-300); + --color-blue-hyperstream-400: var(--blue-hyperstream-400); + --color-blue-hyperstream-500: var(--blue-hyperstream-500); + --color-blue-hyperstream-600: var(--blue-hyperstream-600); + --color-blue-hyperstream-700: var(--blue-hyperstream-700); + --color-blue-hyperstream-800: var(--blue-hyperstream-800); + --color-blue-hyperstream-900: var(--blue-hyperstream-900); + --color-blue-hyperstream-950: var(--blue-hyperstream-950); + --color-blue-hyperstream-1000: var(--blue-hyperstream-1000); + --color-blue-astral-sabre-50: var(--blue-astral-sabre-50); + --color-blue-astral-sabre-100: var(--blue-astral-sabre-100); + --color-blue-astral-sabre-200: var(--blue-astral-sabre-200); + --color-blue-astral-sabre-300: var(--blue-astral-sabre-300); + --color-blue-astral-sabre-400: var(--blue-astral-sabre-400); + --color-blue-astral-sabre-500: var(--blue-astral-sabre-500); + --color-blue-astral-sabre-600: var(--blue-astral-sabre-600); + --color-blue-astral-sabre-700: var(--blue-astral-sabre-700); + --color-blue-astral-sabre-800: var(--blue-astral-sabre-800); + --color-blue-astral-sabre-900: var(--blue-astral-sabre-900); + --color-blue-astral-sabre-950: var(--blue-astral-sabre-950); + --color-blue-astral-sabre-1000: var(--blue-astral-sabre-1000); + --color-blue-skybolt-a-50: var(--blue-skybolt-a-50); + --color-blue-stellar-abyss-a-50: var(--blue-stellar-abyss-a-50); + --color-blue-stellar-abyss-a-100: var(--blue-stellar-abyss-a-100); + --color-blue-stellar-abyss-a-200: var(--blue-stellar-abyss-a-200); + --color-blue-stellar-abyss-a-300: var(--blue-stellar-abyss-a-300); + --color-blue-stellar-abyss-a-400: var(--blue-stellar-abyss-a-400); + --color-blue-stellar-abyss-a-500: var(--blue-stellar-abyss-a-500); + --color-blue-stellar-abyss-a-600: var(--blue-stellar-abyss-a-600); + --color-blue-stellar-abyss-a-700: var(--blue-stellar-abyss-a-700); + --color-blue-stellar-abyss-a-800: var(--blue-stellar-abyss-a-800); + --color-blue-stellar-abyss-a-900: var(--blue-stellar-abyss-a-900); + --color-blue-stellar-abyss-a-950: var(--blue-stellar-abyss-a-950); + --color-blue-stellar-abyss-a-1000: var(--blue-stellar-abyss-a-1000); + --color-blue-skybolt-a-100: var(--blue-skybolt-a-100); + --color-blue-skybolt-a-200: var(--blue-skybolt-a-200); + --color-blue-skybolt-a-300: var(--blue-skybolt-a-300); + --color-blue-skybolt-a-400: var(--blue-skybolt-a-400); + --color-blue-skybolt-a-500: var(--blue-skybolt-a-500); + --color-blue-skybolt-a-600: var(--blue-skybolt-a-600); + --color-blue-skybolt-a-700: var(--blue-skybolt-a-700); + --color-blue-skybolt-a-800: var(--blue-skybolt-a-800); + --color-blue-skybolt-a-900: var(--blue-skybolt-a-900); + --color-blue-skybolt-a-950: var(--blue-skybolt-a-950); + --color-blue-skybolt-a-1000: var(--blue-skybolt-a-1000); + --color-green-emerald-saber-a-50: var(--green-emerald-saber-a-50); + --color-green-emerald-saber-a-100: var(--green-emerald-saber-a-100); + --color-green-emerald-saber-a-200: var(--green-emerald-saber-a-200); + --color-green-emerald-saber-a-300: var(--green-emerald-saber-a-300); + --color-green-emerald-saber-a-400: var(--green-emerald-saber-a-400); + --color-green-emerald-saber-a-500: var(--green-emerald-saber-a-500); + --color-green-emerald-saber-a-600: var(--green-emerald-saber-a-600); + --color-green-emerald-saber-a-700: var(--green-emerald-saber-a-700); + --color-green-emerald-saber-a-800: var(--green-emerald-saber-a-800); + --color-green-emerald-saber-a-900: var(--green-emerald-saber-a-900); + --color-green-emerald-saber-a-950: var(--green-emerald-saber-a-950); + --color-green-emerald-saber-a-1000: var(--green-emerald-saber-a-1000); + --color-green-ion-sprout-50: var(--green-ion-sprout-50); + --color-green-ion-sprout-100: var(--green-ion-sprout-100); + --color-green-ion-sprout-200: var(--green-ion-sprout-200); + --color-green-ion-sprout-300: var(--green-ion-sprout-300); + --color-green-ion-sprout-400: var(--green-ion-sprout-400); + --color-green-ion-sprout-500: var(--green-ion-sprout-500); + --color-green-ion-sprout-600: var(--green-ion-sprout-600); + --color-green-ion-sprout-700: var(--green-ion-sprout-700); + --color-green-ion-sprout-800: var(--green-ion-sprout-800); + --color-green-ion-sprout-900: var(--green-ion-sprout-900); + --color-green-ion-sprout-950: var(--green-ion-sprout-950); + --color-green-ion-sprout-1000: var(--green-ion-sprout-1000); + --color-green-ion-sprout-a-50: var(--green-ion-sprout-a-50); + --color-green-ion-sprout-a-100: var(--green-ion-sprout-a-100); + --color-green-ion-sprout-a-200: var(--green-ion-sprout-a-200); + --color-green-ion-sprout-a-300: var(--green-ion-sprout-a-300); + --color-green-ion-sprout-a-400: var(--green-ion-sprout-a-400); + --color-green-ion-sprout-a-500: var(--green-ion-sprout-a-500); + --color-green-ion-sprout-a-600: var(--green-ion-sprout-a-600); + --color-green-ion-sprout-a-700: var(--green-ion-sprout-a-700); + --color-green-ion-sprout-a-800: var(--green-ion-sprout-a-800); + --color-green-ion-sprout-a-900: var(--green-ion-sprout-a-900); + --color-green-ion-sprout-a-950: var(--green-ion-sprout-a-950); + --color-green-ion-sprout-a-1000: var(--green-ion-sprout-a-1000); + --color-green-verdant-flux-50: var(--green-verdant-flux-50); + --color-green-verdant-flux-100: var(--green-verdant-flux-100); + --color-green-verdant-flux-200: var(--green-verdant-flux-200); + --color-green-verdant-flux-300: var(--green-verdant-flux-300); + --color-green-verdant-flux-400: var(--green-verdant-flux-400); + --color-green-verdant-flux-500: var(--green-verdant-flux-500); + --color-green-verdant-flux-600: var(--green-verdant-flux-600); + --color-green-verdant-flux-700: var(--green-verdant-flux-700); + --color-green-verdant-flux-800: var(--green-verdant-flux-800); + --color-green-verdant-flux-900: var(--green-verdant-flux-900); + --color-green-verdant-flux-950: var(--green-verdant-flux-950); + --color-green-verdant-flux-1000: var(--green-verdant-flux-1000); + --color-green-verdant-flux-a-50: var(--green-verdant-flux-a-50); + --color-green-verdant-flux-a-100: var(--green-verdant-flux-a-100); + --color-green-verdant-flux-a-200: var(--green-verdant-flux-a-200); + --color-green-verdant-flux-a-300: var(--green-verdant-flux-a-300); + --color-green-verdant-flux-a-400: var(--green-verdant-flux-a-400); + --color-green-verdant-flux-a-500: var(--green-verdant-flux-a-500); + --color-green-verdant-flux-a-600: var(--green-verdant-flux-a-600); + --color-green-verdant-flux-a-700: var(--green-verdant-flux-a-700); + --color-green-verdant-flux-a-800: var(--green-verdant-flux-a-800); + --color-green-verdant-flux-a-900: var(--green-verdant-flux-a-900); + --color-green-verdant-flux-a-950: var(--green-verdant-flux-a-950); + --color-green-verdant-flux-a-1000: var(--green-verdant-flux-a-1000); + --color-red-infernal-blade-a-50: var(--red-infernal-blade-a-50); + --color-red-infernal-blade-a-100: var(--red-infernal-blade-a-100); + --color-red-infernal-blade-a-200: var(--red-infernal-blade-a-200); + --color-red-infernal-blade-a-300: var(--red-infernal-blade-a-300); + --color-red-infernal-blade-a-400: var(--red-infernal-blade-a-400); + --color-red-infernal-blade-a-500: var(--red-infernal-blade-a-500); + --color-red-infernal-blade-a-600: var(--red-infernal-blade-a-600); + --color-red-infernal-blade-a-700: var(--red-infernal-blade-a-700); + --color-red-infernal-blade-a-800: var(--red-infernal-blade-a-800); + --color-red-infernal-blade-a-900: var(--red-infernal-blade-a-900); + --color-red-infernal-blade-a-950: var(--red-infernal-blade-a-950); + --color-red-infernal-blade-a-1000: var(--red-infernal-blade-a-1000); + --color-red-malachor-50: var(--red-malachor-50); + --color-red-malachor-100: var(--red-malachor-100); + --color-red-malachor-200: var(--red-malachor-200); + --color-red-malachor-300: var(--red-malachor-300); + --color-red-malachor-400: var(--red-malachor-400); + --color-red-malachor-500: var(--red-malachor-500); + --color-red-malachor-600: var(--red-malachor-600); + --color-red-malachor-700: var(--red-malachor-700); + --color-red-malachor-800: var(--red-malachor-800); + --color-red-malachor-900: var(--red-malachor-900); + --color-red-malachor-950: var(--red-malachor-950); + --color-red-malachor-1000: var(--red-malachor-1000); + --color-red-malachor-a-50: var(--red-malachor-a-50); + --color-red-malachor-a-100: var(--red-malachor-a-100); + --color-red-malachor-a-200: var(--red-malachor-a-200); + --color-red-malachor-a-300: var(--red-malachor-a-300); + --color-red-malachor-a-400: var(--red-malachor-a-400); + --color-red-malachor-a-500: var(--red-malachor-a-500); + --color-red-malachor-a-600: var(--red-malachor-a-600); + --color-red-malachor-a-700: var(--red-malachor-a-700); + --color-red-malachor-a-800: var(--red-malachor-a-800); + --color-red-malachor-a-900: var(--red-malachor-a-900); + --color-red-malachor-a-950: var(--red-malachor-a-950); + --color-red-malachor-a-1000: var(--red-malachor-a-1000); + --color-red-crimson-wrath-50: var(--red-crimson-wrath-50); + --color-red-crimson-wrath-100: var(--red-crimson-wrath-100); + --color-red-crimson-wrath-200: var(--red-crimson-wrath-200); + --color-red-crimson-wrath-300: var(--red-crimson-wrath-300); + --color-red-crimson-wrath-400: var(--red-crimson-wrath-400); + --color-red-crimson-wrath-500: var(--red-crimson-wrath-500); + --color-red-crimson-wrath-600: var(--red-crimson-wrath-600); + --color-red-crimson-wrath-700: var(--red-crimson-wrath-700); + --color-red-crimson-wrath-800: var(--red-crimson-wrath-800); + --color-red-crimson-wrath-900: var(--red-crimson-wrath-900); + --color-red-crimson-wrath-950: var(--red-crimson-wrath-950); + --color-red-crimson-wrath-1000: var(--red-crimson-wrath-1000); + --color-red-crimson-wrath-a-50: var(--red-crimson-wrath-a-50); + --color-red-crimson-wrath-a-100: var(--red-crimson-wrath-a-100); + --color-red-crimson-wrath-a-200: var(--red-crimson-wrath-a-200); + --color-red-crimson-wrath-a-300: var(--red-crimson-wrath-a-300); + --color-red-crimson-wrath-a-400: var(--red-crimson-wrath-a-400); + --color-red-crimson-wrath-a-500: var(--red-crimson-wrath-a-500); + --color-red-crimson-wrath-a-600: var(--red-crimson-wrath-a-600); + --color-red-crimson-wrath-a-700: var(--red-crimson-wrath-a-700); + --color-red-crimson-wrath-a-800: var(--red-crimson-wrath-a-800); + --color-red-crimson-wrath-a-900: var(--red-crimson-wrath-a-900); + --color-red-crimson-wrath-a-950: var(--red-crimson-wrath-a-950); + --color-red-crimson-wrath-a-1000: var(--red-crimson-wrath-a-1000); + --color-yellow-twin-sunlight-a-50: var(--yellow-twin-sunlight-a-50); + --color-yellow-twin-sunlight-a-100: var(--yellow-twin-sunlight-a-100); + --color-yellow-twin-sunlight-a-200: var(--yellow-twin-sunlight-a-200); + --color-yellow-twin-sunlight-a-300: var(--yellow-twin-sunlight-a-300); + --color-yellow-twin-sunlight-a-400: var(--yellow-twin-sunlight-a-400); + --color-yellow-twin-sunlight-a-500: var(--yellow-twin-sunlight-a-500); + --color-yellow-twin-sunlight-a-600: var(--yellow-twin-sunlight-a-600); + --color-yellow-twin-sunlight-a-700: var(--yellow-twin-sunlight-a-700); + --color-yellow-twin-sunlight-a-800: var(--yellow-twin-sunlight-a-800); + --color-yellow-twin-sunlight-a-900: var(--yellow-twin-sunlight-a-900); + --color-yellow-twin-sunlight-a-950: var(--yellow-twin-sunlight-a-950); + --color-yellow-twin-sunlight-a-1000: var(--yellow-twin-sunlight-a-1000); + --color-yellow-twin-sunlight-50: var(--yellow-twin-sunlight-50); + --color-yellow-twin-sunlight-100: var(--yellow-twin-sunlight-100); + --color-yellow-twin-sunlight-200: var(--yellow-twin-sunlight-200); + --color-yellow-twin-sunlight-300: var(--yellow-twin-sunlight-300); + --color-yellow-twin-sunlight-400: var(--yellow-twin-sunlight-400); + --color-yellow-twin-sunlight-500: var(--yellow-twin-sunlight-500); + --color-yellow-twin-sunlight-600: var(--yellow-twin-sunlight-600); + --color-yellow-twin-sunlight-700: var(--yellow-twin-sunlight-700); + --color-yellow-twin-sunlight-800: var(--yellow-twin-sunlight-800); + --color-yellow-twin-sunlight-900: var(--yellow-twin-sunlight-900); + --color-yellow-twin-sunlight-950: var(--yellow-twin-sunlight-950); + --color-yellow-twin-sunlight-1000: var(--yellow-twin-sunlight-1000); + --color-yellow-stellar-amber-50: var(--yellow-stellar-amber-50); + --color-yellow-stellar-amber-100: var(--yellow-stellar-amber-100); + --color-yellow-stellar-amber-200: var(--yellow-stellar-amber-200); + --color-yellow-stellar-amber-300: var(--yellow-stellar-amber-300); + --color-yellow-stellar-amber-400: var(--yellow-stellar-amber-400); + --color-yellow-stellar-amber-500: var(--yellow-stellar-amber-500); + --color-yellow-stellar-amber-600: var(--yellow-stellar-amber-600); + --color-yellow-stellar-amber-700: var(--yellow-stellar-amber-700); + --color-yellow-stellar-amber-800: var(--yellow-stellar-amber-800); + --color-yellow-stellar-amber-900: var(--yellow-stellar-amber-900); + --color-yellow-stellar-amber-950: var(--yellow-stellar-amber-950); + --color-yellow-stellar-amber-1000: var(--yellow-stellar-amber-1000); + --color-yellow-stellar-amber-a-50: var(--yellow-stellar-amber-a-50); + --color-yellow-stellar-amber-a-100: var(--yellow-stellar-amber-a-100); + --color-yellow-stellar-amber-a-200: var(--yellow-stellar-amber-a-200); + --color-yellow-stellar-amber-a-300: var(--yellow-stellar-amber-a-300); + --color-yellow-stellar-amber-a-400: var(--yellow-stellar-amber-a-400); + --color-yellow-stellar-amber-a-500: var(--yellow-stellar-amber-a-500); + --color-yellow-stellar-amber-a-600: var(--yellow-stellar-amber-a-600); + --color-yellow-stellar-amber-a-700: var(--yellow-stellar-amber-a-700); + --color-yellow-stellar-amber-a-800: var(--yellow-stellar-amber-a-800); + --color-yellow-stellar-amber-a-900: var(--yellow-stellar-amber-a-900); + --color-yellow-stellar-amber-a-950: var(--yellow-stellar-amber-a-950); + --color-yellow-stellar-amber-a-1000: var(--yellow-stellar-amber-a-1000); + --color-orange-sunstreak-a-50: var(--orange-sunstreak-a-50); + --color-orange-sunstreak-a-100: var(--orange-sunstreak-a-100); + --color-orange-sunstreak-a-200: var(--orange-sunstreak-a-200); + --color-orange-sunstreak-a-300: var(--orange-sunstreak-a-300); + --color-orange-sunstreak-a-400: var(--orange-sunstreak-a-400); + --color-orange-sunstreak-a-500: var(--orange-sunstreak-a-500); + --color-orange-sunstreak-a-600: var(--orange-sunstreak-a-600); + --color-orange-sunstreak-a-700: var(--orange-sunstreak-a-700); + --color-orange-sunstreak-a-800: var(--orange-sunstreak-a-800); + --color-orange-sunstreak-a-900: var(--orange-sunstreak-a-900); + --color-orange-sunstreak-a-950: var(--orange-sunstreak-a-950); + --color-orange-sunstreak-a-1000: var(--orange-sunstreak-a-1000); + --color-orange-sunstreak-50: var(--orange-sunstreak-50); + --color-orange-sunstreak-100: var(--orange-sunstreak-100); + --color-orange-sunstreak-200: var(--orange-sunstreak-200); + --color-orange-sunstreak-300: var(--orange-sunstreak-300); + --color-orange-sunstreak-400: var(--orange-sunstreak-400); + --color-orange-sunstreak-500: var(--orange-sunstreak-500); + --color-orange-sunstreak-600: var(--orange-sunstreak-600); + --color-orange-sunstreak-700: var(--orange-sunstreak-700); + --color-orange-sunstreak-800: var(--orange-sunstreak-800); + --color-orange-sunstreak-900: var(--orange-sunstreak-900); + --color-orange-sunstreak-950: var(--orange-sunstreak-950); + --color-orange-sunstreak-1000: var(--orange-sunstreak-1000); + --color-purple-voidshade-a-50: var(--purple-voidshade-a-50); + --color-purple-voidshade-a-100: var(--purple-voidshade-a-100); + --color-purple-voidshade-a-200: var(--purple-voidshade-a-200); + --color-purple-voidshade-a-300: var(--purple-voidshade-a-300); + --color-purple-voidshade-a-400: var(--purple-voidshade-a-400); + --color-purple-voidshade-a-500: var(--purple-voidshade-a-500); + --color-purple-voidshade-a-600: var(--purple-voidshade-a-600); + --color-purple-voidshade-a-700: var(--purple-voidshade-a-700); + --color-purple-voidshade-a-800: var(--purple-voidshade-a-800); + --color-purple-voidshade-a-900: var(--purple-voidshade-a-900); + --color-purple-voidshade-a-950: var(--purple-voidshade-a-950); + --color-purple-voidshade-a-1000: var(--purple-voidshade-a-1000); + --color-purple-nexus-50: var(--purple-nexus-50); + --color-purple-nexus-100: var(--purple-nexus-100); + --color-purple-nexus-200: var(--purple-nexus-200); + --color-purple-nexus-300: var(--purple-nexus-300); + --color-purple-nexus-400: var(--purple-nexus-400); + --color-purple-nexus-500: var(--purple-nexus-500); + --color-purple-nexus-600: var(--purple-nexus-600); + --color-purple-nexus-700: var(--purple-nexus-700); + --color-purple-nexus-800: var(--purple-nexus-800); + --color-purple-nexus-900: var(--purple-nexus-900); + --color-purple-nexus-950: var(--purple-nexus-950); + --color-purple-nexus-1000: var(--purple-nexus-1000); + --color-purple-nexus-a-50: var(--purple-nexus-a-50); + --color-purple-nexus-a-100: var(--purple-nexus-a-100); + --color-purple-nexus-a-200: var(--purple-nexus-a-200); + --color-purple-nexus-a-300: var(--purple-nexus-a-300); + --color-purple-nexus-a-400: var(--purple-nexus-a-400); + --color-purple-nexus-a-500: var(--purple-nexus-a-500); + --color-purple-nexus-a-600: var(--purple-nexus-a-600); + --color-purple-nexus-a-700: var(--purple-nexus-a-700); + --color-purple-nexus-a-800: var(--purple-nexus-a-800); + --color-purple-nexus-a-900: var(--purple-nexus-a-900); + --color-purple-nexus-a-950: var(--purple-nexus-a-950); + --color-purple-nexus-a-1000: var(--purple-nexus-a-1000); + --color-pink-plasma-circuit-50: var(--pink-plasma-circuit-50); + --color-pink-plasma-circuit-100: var(--pink-plasma-circuit-100); + --color-pink-plasma-circuit-200: var(--pink-plasma-circuit-200); + --color-pink-plasma-circuit-300: var(--pink-plasma-circuit-300); + --color-pink-plasma-circuit-400: var(--pink-plasma-circuit-400); + --color-pink-plasma-circuit-500: var(--pink-plasma-circuit-500); + --color-pink-plasma-circuit-600: var(--pink-plasma-circuit-600); + --color-pink-plasma-circuit-700: var(--pink-plasma-circuit-700); + --color-pink-plasma-circuit-800: var(--pink-plasma-circuit-800); + --color-pink-plasma-circuit-900: var(--pink-plasma-circuit-900); + --color-pink-plasma-circuit-950: var(--pink-plasma-circuit-950); + --color-pink-plasma-circuit-1000: var(--pink-plasma-circuit-1000); + --color-pink-plasma-circuit-a-50: var(--pink-plasma-circuit-a-50); + --color-pink-plasma-circuit-a-100: var(--pink-plasma-circuit-a-100); + --color-pink-plasma-circuit-a-200: var(--pink-plasma-circuit-a-200); + --color-pink-plasma-circuit-a-300: var(--pink-plasma-circuit-a-300); + --color-pink-plasma-circuit-a-400: var(--pink-plasma-circuit-a-400); + --color-pink-plasma-circuit-a-500: var(--pink-plasma-circuit-a-500); + --color-pink-plasma-circuit-a-600: var(--pink-plasma-circuit-a-600); + --color-pink-plasma-circuit-a-700: var(--pink-plasma-circuit-a-700); + --color-pink-plasma-circuit-a-800: var(--pink-plasma-circuit-a-800); + --color-pink-plasma-circuit-a-900: var(--pink-plasma-circuit-a-900); + --color-pink-plasma-circuit-a-950: var(--pink-plasma-circuit-a-950); + --color-pink-plasma-circuit-a-1000: var(--pink-plasma-circuit-a-1000); + --color-teal-sunspark-oasis-50: var(--teal-sunspark-oasis-50); + --color-teal-sunspark-oasis-100: var(--teal-sunspark-oasis-100); + --color-teal-sunspark-oasis-200: var(--teal-sunspark-oasis-200); + --color-teal-sunspark-oasis-300: var(--teal-sunspark-oasis-300); + --color-teal-sunspark-oasis-400: var(--teal-sunspark-oasis-400); + --color-teal-sunspark-oasis-500: var(--teal-sunspark-oasis-500); + --color-teal-sunspark-oasis-600: var(--teal-sunspark-oasis-600); + --color-teal-sunspark-oasis-700: var(--teal-sunspark-oasis-700); + --color-teal-sunspark-oasis-800: var(--teal-sunspark-oasis-800); + --color-teal-sunspark-oasis-900: var(--teal-sunspark-oasis-900); + --color-teal-sunspark-oasis-950: var(--teal-sunspark-oasis-950); + --color-teal-sunspark-oasis-1000: var(--teal-sunspark-oasis-1000); + --color-teal-sunspark-oasis-a-50: var(--teal-sunspark-oasis-a-50); + --color-teal-sunspark-oasis-a-100: var(--teal-sunspark-oasis-a-100); + --color-teal-sunspark-oasis-a-200: var(--teal-sunspark-oasis-a-200); + --color-teal-sunspark-oasis-a-300: var(--teal-sunspark-oasis-a-300); + --color-teal-sunspark-oasis-a-400: var(--teal-sunspark-oasis-a-400); + --color-teal-sunspark-oasis-a-500: var(--teal-sunspark-oasis-a-500); + --color-teal-sunspark-oasis-a-600: var(--teal-sunspark-oasis-a-600); + --color-teal-sunspark-oasis-a-700: var(--teal-sunspark-oasis-a-700); + --color-teal-sunspark-oasis-a-800: var(--teal-sunspark-oasis-a-800); + --color-teal-sunspark-oasis-a-900: var(--teal-sunspark-oasis-a-900); + --color-teal-sunspark-oasis-a-950: var(--teal-sunspark-oasis-a-950); + --color-teal-sunspark-oasis-a-1000: var(--teal-sunspark-oasis-a-1000); + --color-purple-fuchsia-50: var(--purple-fuchsia-50); + --color-purple-fuchsia-100: var(--purple-fuchsia-100); + --color-purple-fuchsia-200: var(--purple-fuchsia-200); + --color-purple-fuchsia-300: var(--purple-fuchsia-300); + --color-purple-fuchsia-400: var(--purple-fuchsia-400); + --color-purple-fuchsia-500: var(--purple-fuchsia-500); + --color-purple-fuchsia-600: var(--purple-fuchsia-600); + --color-purple-fuchsia-700: var(--purple-fuchsia-700); + --color-purple-fuchsia-800: var(--purple-fuchsia-800); + --color-purple-fuchsia-900: var(--purple-fuchsia-900); + --color-purple-fuchsia-950: var(--purple-fuchsia-950); + --color-purple-fuchsia-1000: var(--purple-fuchsia-1000); + --color-purple-fuchsia-a-50: var(--purple-fuchsia-a-50); + --color-purple-fuchsia-a-100: var(--purple-fuchsia-a-100); + --color-purple-fuchsia-a-200: var(--purple-fuchsia-a-200); + --color-purple-fuchsia-a-300: var(--purple-fuchsia-a-300); + --color-purple-fuchsia-a-400: var(--purple-fuchsia-a-400); + --color-purple-fuchsia-a-500: var(--purple-fuchsia-a-500); + --color-purple-fuchsia-a-600: var(--purple-fuchsia-a-600); + --color-purple-fuchsia-a-700: var(--purple-fuchsia-a-700); + --color-purple-fuchsia-a-800: var(--purple-fuchsia-a-800); + --color-purple-fuchsia-a-900: var(--purple-fuchsia-a-900); + --color-purple-fuchsia-a-950: var(--purple-fuchsia-a-950); + --color-purple-fuchsia-a-1000: var(--purple-fuchsia-a-1000); + --color-orange-molten-fang-a-50: var(--orange-molten-fang-a-50); + --color-orange-molten-fang-a-100: var(--orange-molten-fang-a-100); + --color-orange-molten-fang-a-200: var(--orange-molten-fang-a-200); + --color-orange-molten-fang-a-300: var(--orange-molten-fang-a-300); + --color-orange-molten-fang-a-400: var(--orange-molten-fang-a-400); + --color-orange-molten-fang-a-500: var(--orange-molten-fang-a-500); + --color-orange-molten-fang-a-600: var(--orange-molten-fang-a-600); + --color-orange-molten-fang-a-700: var(--orange-molten-fang-a-700); + --color-orange-molten-fang-a-800: var(--orange-molten-fang-a-800); + --color-orange-molten-fang-a-900: var(--orange-molten-fang-a-900); + --color-orange-molten-fang-a-950: var(--orange-molten-fang-a-950); + --color-orange-molten-fang-a-1000: var(--orange-molten-fang-a-1000); + --color-neutrals-celestial-veil-a-50: var(--neutrals-celestial-veil-a-50); + --color-neutrals-celestial-veil-a-100: var(--neutrals-celestial-veil-a-100); + --color-neutrals-celestial-veil-a-200: var(--neutrals-celestial-veil-a-200); + --color-neutrals-celestial-veil-a-300: var(--neutrals-celestial-veil-a-300); + --color-neutrals-celestial-veil-a-400: var(--neutrals-celestial-veil-a-400); + --color-neutrals-celestial-veil-a-500: var(--neutrals-celestial-veil-a-500); + --color-neutrals-celestial-veil-a-600: var(--neutrals-celestial-veil-a-600); + --color-neutrals-celestial-veil-a-700: var(--neutrals-celestial-veil-a-700); + --color-neutrals-celestial-veil-a-800: var(--neutrals-celestial-veil-a-800); + --color-neutrals-celestial-veil-a-900: var(--neutrals-celestial-veil-a-900); + --color-neutrals-celestial-veil-a-950: var(--neutrals-celestial-veil-a-950); + --color-neutrals-celestial-veil-a-1000: var(--neutrals-celestial-veil-a-1000); + --color-neutrals-echo-light-a-50: var(--neutrals-echo-light-a-50); + --color-neutrals-echo-light-a-100: var(--neutrals-echo-light-a-100); + --color-neutrals-echo-light-a-200: var(--neutrals-echo-light-a-200); + --color-neutrals-echo-light-a-300: var(--neutrals-echo-light-a-300); + --color-neutrals-echo-light-a-400: var(--neutrals-echo-light-a-400); + --color-neutrals-echo-light-a-500: var(--neutrals-echo-light-a-500); + --color-neutrals-echo-light-a-600: var(--neutrals-echo-light-a-600); + --color-neutrals-echo-light-a-700: var(--neutrals-echo-light-a-700); + --color-neutrals-echo-light-a-800: var(--neutrals-echo-light-a-800); + --color-neutrals-echo-light-a-900: var(--neutrals-echo-light-a-900); + --color-neutrals-echo-light-a-950: var(--neutrals-echo-light-a-950); + --color-neutrals-echo-light-a-1000: var(--neutrals-echo-light-a-1000); + --color-teal-sunspark-oasis-50-2: var(--teal-sunspark-oasis-50-2); + --color-teal-sunspark-oasis-100-2: var(--teal-sunspark-oasis-100-2); + --color-teal-sunspark-oasis-200-2: var(--teal-sunspark-oasis-200-2); + --color-teal-sunspark-oasis-300-2: var(--teal-sunspark-oasis-300-2); + --color-teal-sunspark-oasis-400-2: var(--teal-sunspark-oasis-400-2); + --color-teal-sunspark-oasis-500-2: var(--teal-sunspark-oasis-500-2); + --color-teal-sunspark-oasis-600-2: var(--teal-sunspark-oasis-600-2); + --color-teal-sunspark-oasis-700-2: var(--teal-sunspark-oasis-700-2); + --color-teal-sunspark-oasis-800-2: var(--teal-sunspark-oasis-800-2); + --color-teal-sunspark-oasis-900-2: var(--teal-sunspark-oasis-900-2); + --color-teal-sunspark-oasis-50-3: var(--teal-sunspark-oasis-50-3); + --color-teal-sunspark-oasis-100-3: var(--teal-sunspark-oasis-100-3); + --color-teal-sunspark-oasis-200-3: var(--teal-sunspark-oasis-200-3); + --color-teal-sunspark-oasis-300-3: var(--teal-sunspark-oasis-300-3); + --color-teal-sunspark-oasis-400-3: var(--teal-sunspark-oasis-400-3); + --color-teal-sunspark-oasis-500-3: var(--teal-sunspark-oasis-500-3); + --color-teal-sunspark-oasis-600-3: var(--teal-sunspark-oasis-600-3); + --color-teal-sunspark-oasis-700-3: var(--teal-sunspark-oasis-700-3); + --color-teal-sunspark-oasis-800-3: var(--teal-sunspark-oasis-800-3); + --color-teal-sunspark-oasis-900-3: var(--teal-sunspark-oasis-900-3); + --color-pink-mew-mode-50: var(--pink-mew-mode-50); + --color-pink-mew-mode-100: var(--pink-mew-mode-100); + --color-pink-mew-mode-200: var(--pink-mew-mode-200); + --color-pink-mew-mode-300: var(--pink-mew-mode-300); + --color-pink-mew-mode-400: var(--pink-mew-mode-400); + --color-pink-mew-mode-500: var(--pink-mew-mode-500); + --color-pink-mew-mode-600: var(--pink-mew-mode-600); + --color-pink-mew-mode-700: var(--pink-mew-mode-700); + --color-pink-mew-mode-800: var(--pink-mew-mode-800); + --color-pink-mew-mode-900: var(--pink-mew-mode-900); + --color-pink-mew-mode-950: var(--pink-mew-mode-950); + --color-pink-mew-mode-1000: var(--pink-mew-mode-1000); + + /* Component tokens */ + --color-avatar-colors-background-container-resting: var( + --background-neutral-raised-5 + ); + --color-avatar-colors-background-container-hover: var(--background-brand-2); + --color-avatar-colors-background-container-selected: var( + --background-brand-1 + ); + --color-avatar-colors-background-status-success: var( + --background-semantic-success-base + ); + --color-avatar-colors-background-status-error: var( + --background-semantic-error-base + ); + --color-avatar-colors-stroke-container-resting: var( + --background-neutral-raised-4 + ); + --color-avatar-colors-assets-resting: var(--content-assets-neutral-1); + --color-avatar-colors-assets-hover: var(--content-assets-neutral-base); + --color-avatar-colors-assets-selected: var(--content-assets-neutral-base); + --color-avatar-colors-text-resting: var(--content-text-neutral-base); + --color-avatar-colors-text-hover: var(--content-text-neutral-base); + --color-avatar-colors-text-selected: var(--content-text-neutral-base); + --color-avatar-colors-stroke-container-hover: var(--stroke-brand-1); + --color-avatar-colors-stroke-container-selected: var(--stroke-brand-base); + --color-avatar-colors-stroke-status-cut-out: var( + --background-neutral-canvas-base + ); + --color-badges-colors-solid-brand-background-standard: var( + --background-brand-base + ); + --color-badges-colors-solid-brand-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-solid-brand-text-default: var( + --content-text-on-color-dark-light + ); + --color-badges-colors-solid-brand-assets-default: var( + --content-assets-on-color-dark-light + ); + --color-breadcrumbs-colors-primary-text-resting: var( + --content-text-neutral-3 + ); + --color-breadcrumbs-colors-primary-text-hover: var( + --content-text-neutral-base + ); + --color-breadcrumbs-colors-primary-text-selected: var( + --content-text-on-color-light-dark + ); + --color-breadcrumbs-colors-primary-assets-resting: var( + --content-assets-neutral-3 + ); + --color-breadcrumbs-colors-primary-assets-hover: var( + --content-assets-neutral-base + ); + --color-breadcrumbs-colors-primary-assets-selected: var( + --content-assets-brand-base + ); + --color-buttons-colors-core-icon-primary-background-resting: var( + --background-brand-base + ); + --color-buttons-colors-core-icon-primary-background-hover: var( + --background-brand-1 + ); + --color-buttons-colors-core-icon-primary-background-selected: var( + --background-brand-base + ); + --color-buttons-colors-core-icon-primary-stroke-resting: var( + --stroke-brand-base + ); + --color-buttons-colors-core-icon-primary-stroke-hover: var(--stroke-brand-1); + --color-buttons-colors-core-icon-primary-stroke-selected: var( + --stroke-brand-base + ); + --color-buttons-colors-core-icon-primary-text-resting: var( + --content-text-on-color-light-light + ); + --color-buttons-colors-core-icon-primary-text-hover: var( + --content-text-on-color-light-light + ); + --color-buttons-colors-core-icon-primary-text-selected: var( + --content-text-on-color-light-light + ); + --color-buttons-colors-core-icon-primary-assets-resting: var( + --content-assets-on-color-light-light + ); + --color-buttons-colors-core-icon-primary-assets-on-hover: var( + --content-assets-on-color-light-light + ); + --color-buttons-colors-core-icon-primary-assets-selected: var( + --content-assets-on-color-light-light + ); + --color-buttons-colors-core-icon-secondary-background-resting: var( + --background-neutral-raised-5 + ); + --color-buttons-colors-core-icon-secondary-background-hover: var( + --background-neutral-raised-3 + ); + --color-buttons-colors-core-icon-secondary-background-selected: var( + --background-neutral-raised-2 + ); + --color-buttons-colors-core-icon-secondary-stroke-resting: var( + --stroke-basic-clear + ); + --color-buttons-colors-core-icon-secondary-stroke-hover: var( + --stroke-basic-clear + ); + --color-buttons-colors-core-icon-secondary-stroke-selected: var( + --stroke-basic-clear + ); + --color-buttons-colors-core-icon-secondary-text-resting: var( + --content-text-neutral-base + ); + --color-buttons-colors-core-icon-secondary-text-hover: var( + --content-text-neutral-base + ); + --color-buttons-colors-core-icon-secondary-text-selected: var( + --content-text-neutral-base + ); + --color-buttons-colors-core-icon-secondary-assets-resting: var( + --content-assets-neutral-1 + ); + --color-buttons-colors-core-icon-secondary-assets-hover: var( + --content-assets-neutral-base + ); + --color-buttons-colors-core-icon-secondary-assets-selected: var( + --content-assets-neutral-base + ); + --color-buttons-colors-core-icon-outline-background-resting: var( + --background-basic-clear + ); + --color-buttons-colors-core-icon-outline-background-hover: var( + --background-basic-clear + ); + --color-buttons-colors-core-icon-outline-background-selected: var( + --background-basic-clear + ); + --color-buttons-colors-core-icon-outline-stroke-resting: var( + --stroke-neutral-2 + ); + --color-buttons-colors-core-icon-outline-stroke-hover: var(--stroke-brand-1); + --color-buttons-colors-core-icon-outline-stroke-selected: var( + --stroke-brand-base + ); + --color-buttons-colors-core-icon-outline-text-resting: var( + --content-text-neutral-1 + ); + --color-buttons-colors-core-icon-outline-text-hover: var( + --content-text-brand-base + ); + --color-buttons-colors-core-icon-outline-text-selected: var( + --content-text-brand-base + ); + --color-buttons-colors-core-icon-outline-assets-resting: var( + --content-assets-neutral-1 + ); + --color-buttons-colors-core-icon-outline-assets-hover: var( + --content-assets-brand-base + ); + --color-buttons-colors-core-icon-outline-assets-selected: var( + --content-assets-brand-base + ); + --color-buttons-colors-core-icon-ghost-background-resting: var( + --background-basic-clear + ); + --color-buttons-colors-core-icon-ghost-background-hover: var( + --background-brand-2 + ); + --color-buttons-colors-core-icon-ghost-background-selected: var( + --background-brand-1 + ); + --color-buttons-colors-core-icon-ghost-stroke-resting: var( + --stroke-basic-clear + ); + --color-buttons-colors-core-icon-ghost-stroke-hover: var( + --stroke-basic-clear + ); + --color-buttons-colors-core-icon-ghost-stroke-selected: var( + --stroke-basic-clear + ); + --color-buttons-colors-core-icon-ghost-text-resting: var( + --content-text-neutral-1 + ); + --color-buttons-colors-core-icon-ghost-text-hover: var( + --content-text-on-color-light-light + ); + --color-buttons-colors-core-icon-ghost-text-selected: var( + --content-text-on-color-light-light + ); + --color-buttons-colors-core-icon-ghost-assets-resting: var( + --content-assets-neutral-1 + ); + --color-buttons-colors-core-icon-ghost-assets-hover: var( + --content-assets-on-color-light-light + ); + --color-buttons-colors-core-icon-ghost-assets-selected: var( + --content-assets-on-color-light-light + ); + --color-buttons-colors-link-primary-underline-detail-resting: var( + --stroke-basic-clear + ); + --color-buttons-colors-link-primary-text-resting: var( + --content-text-brand-base + ); + --color-buttons-colors-link-primary-text-hover: var(--content-text-neutral-1); + --color-buttons-colors-link-primary-text-selected: var( + --content-text-neutral-base + ); + --color-buttons-colors-link-primary-assets-resting: var( + --content-assets-brand-base + ); + --color-buttons-colors-link-primary-assets-hover: var( + --content-assets-neutral-1 + ); + --color-buttons-colors-link-primary-assets-selected: var( + --content-assets-neutral-base + ); + --color-buttons-colors-link-primary-underline-detail-hover: var( + --stroke-basic-clear + ); + --color-buttons-colors-link-primary-underline-detail-selected: var( + --stroke-basic-clear + ); + --color-buttons-colors-link-secondary-underline-detail-resting: var( + --stroke-basic-clear + ); + --color-buttons-colors-link-secondary-text-resting: var( + --content-text-neutral-base + ); + --color-buttons-colors-link-secondary-text-hover: var( + --content-text-neutral-1 + ); + --color-buttons-colors-link-secondary-text-selected: var( + --content-text-neutral-base + ); + --color-buttons-colors-link-secondary-assets-resting: var( + --content-assets-neutral-base + ); + --color-buttons-colors-link-secondary-assets-hover: var( + --content-assets-neutral-1 + ); + --color-buttons-colors-link-secondary-assets-selected: var( + --content-assets-neutral-base + ); + --color-buttons-colors-link-destructive-underline-detail-resting: var( + --stroke-basic-clear + ); + --color-buttons-colors-link-destructive-underline-detail-hover: var( + --stroke-basic-clear + ); + --color-buttons-colors-link-destructive-underline-detail-selected: var( + --stroke-basic-clear + ); + --color-buttons-colors-link-destructive-text-resting: var( + --content-text-semantic-error-base + ); + --color-buttons-colors-link-destructive-text-hover: var( + --content-text-semantic-error-1 + ); + --color-buttons-colors-link-destructive-text-selected: var( + --content-text-semantic-error-2 + ); + --color-buttons-colors-link-destructive-assets-resting: var( + --content-assets-semantic-error-base + ); + --color-buttons-colors-link-destructive-assets-hover: var( + --content-assets-semantic-error-1 + ); + --color-buttons-colors-link-destructive-assets-selected: var( + --content-assets-semantic-error-2 + ); + --color-buttons-colors-link-secondary-underline-detail-hover: var( + --stroke-basic-clear + ); + --color-buttons-colors-link-secondary-underline-detail-selected: var( + --stroke-basic-clear + ); + --color-calendar-colors-container-background-default: var( + --background-neutral-inverse-raised-base + ); + --color-calendar-colors-container-stroke-default: var(--stroke-neutral-5); + --color-calendar-colors-header-text-default: var(--content-text-neutral-1); + --color-calendar-colors-label-text-default: var(--content-text-neutral-3); + --color-calendar-colors-date-background-resting: var( + --background-neutral-inverse-raised-base + ); + --color-calendar-colors-date-background-hover: var(--background-brand-2); + --color-calendar-colors-date-background-selected: var( + --background-brand-base + ); + --color-calendar-colors-date-background-today: var( + --background-neutral-inverse-raised-base + ); + --color-calendar-colors-date-background-range: var(--background-brand-4); + --color-calendar-colors-date-stroke-resting: var(--stroke-basic-clear); + --color-calendar-colors-date-stroke-hover: var(--stroke-basic-clear); + --color-calendar-colors-date-stroke-selected: var(--stroke-basic-clear); + --color-calendar-colors-date-stroke-today: var(--stroke-neutral-3); + --color-calendar-colors-date-text-resting: var(--content-text-neutral-1); + --color-calendar-colors-date-text-hover: var( + --content-text-on-color-light-dark + ); + --color-calendar-colors-date-text-selected: var( + --content-text-on-color-light-dark + ); + --color-calendar-colors-date-text-today: var( + --content-text-on-color-light-dark + ); + --color-inputs-colors-normal-background-resting: var( + --background-neutral-raised-6 + ); + --color-inputs-colors-normal-background-hover: var( + --background-neutral-raised-5 + ); + --color-inputs-colors-normal-background-selected: var(--background-brand-5); + --color-inputs-colors-normal-stroke-resting: var(--stroke-neutral-3); + --color-inputs-colors-normal-stroke-hover: var(--stroke-brand-base); + --color-inputs-colors-normal-stroke-selected: var(--stroke-brand-1); + --color-inputs-colors-normal-text-label-resting: var( + --content-text-neutral-3 + ); + --color-inputs-colors-normal-text-label-hover: var( + --content-text-neutral-base + ); + --color-inputs-colors-normal-text-label-selected: var( + --content-text-neutral-base + ); + --color-inputs-colors-normal-text-label-filled: var(--content-text-neutral-3); + --color-inputs-colors-normal-assets-input-resting: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-normal-assets-input-hover: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-normal-assets-input-selected: var( + --content-assets-neutral-base + ); + --color-indicators-colors-primary-background-resting: var( + --background-brand-3 + ); + --color-indicators-colors-primary-content-text-resting: var( + --content-text-on-color-light-light + ); + --color-navigation-colors-background-container-base: var( + --background-neutral-raised-6 + ); + --color-navigation-colors-stroke-container-base: var(--stroke-neutral-5); + --color-navigation-colors-text-resting: var(--content-text-neutral-2); + --color-navigation-colors-text-user-resting: var(--content-text-neutral-base); + --color-navigation-colors-text-hover: var(--content-text-neutral-base); + --color-navigation-colors-text-selected: var(--content-text-neutral-base); + --color-navigation-colors-text-static: var(--content-text-neutral-3); + --color-navigation-colors-assets-resting: var(--content-assets-neutral-1); + --color-navigation-colors-assets-hover: var(--content-assets-neutral-base); + --color-navigation-colors-assets-selected: var(--content-assets-neutral-base); + --color-navigation-colors-assets-static: var(--content-assets-neutral-2); + --color-notifications-colors-background-neutral-resting: var( + --background-neutral-raised-6 + ); + --color-notifications-colors-stroke-neutral-resting: var(--stroke-neutral-4); + --color-notifications-colors-stroke-neutral-hover: var( + --background-neutral-raised-3 + ); + --color-notifications-colors-stroke-error-resting: var( + --background-semantic-error-4 + ); + --color-notifications-colors-stroke-error-hover: var( + --background-semantic-error-3 + ); + --color-notifications-colors-stroke-success-resting: var( + --stroke-semantic-success-4 + ); + --color-notifications-colors-stroke-success-hover: var( + --stroke-semantic-success-3 + ); + --color-notifications-colors-stroke-warning-resting: var( + --stroke-semantic-warning-4 + ); + --color-notifications-colors-stroke-warning-hover: var( + --stroke-semantic-warning-3 + ); + --color-notifications-colors-stroke-info-resting: var( + --stroke-semantic-info-4 + ); + --color-notifications-colors-stroke-info-hover: var(--stroke-semantic-info-3); + --color-notifications-colors-background-neutral-hover: var( + --background-neutral-raised-5 + ); + --color-notifications-colors-background-error-resting: var( + --background-semantic-error-5 + ); + --color-notifications-colors-background-error-hover: var( + --background-semantic-error-4 + ); + --color-notifications-colors-background-success-resting: var( + --background-semantic-success-5 + ); + --color-notifications-colors-background-success-hover: var( + --background-semantic-success-4 + ); + --color-notifications-colors-text-title-resting: var( + --content-text-neutral-base + ); + --color-notifications-colors-text-normal-resting: var( + --content-text-neutral-3 + ); + --color-notifications-colors-text-static-resting: var( + --content-text-neutral-1 + ); + --color-notifications-colors-assets-normal-resting: var( + --content-assets-neutral-1 + ); + --color-notifications-colors-assets-neutral-static: var( + --content-assets-neutral-base + ); + --color-notifications-colors-assets-normal-hover: var( + --content-assets-neutral-base + ); + --color-notifications-colors-assets-normal-selected: var( + --content-assets-neutral-base + ); + --color-notifications-colors-assets-destructive-resting: var( + --content-assets-semantic-error-base + ); + --color-notifications-colors-assets-success-resting: var( + --content-assets-semantic-success-base + ); + --color-select-menu-items-color-item-background-container-base: var( + --background-neutral-raised-6 + ); + --color-select-menu-items-color-item-background-header-resting: var( + --background-basic-clear + ); + --color-select-menu-items-color-item-background-header-hover: var( + --background-basic-clear + ); + --color-select-menu-items-color-item-background-header-selected: var( + --background-basic-clear + ); + --color-select-menu-items-color-item-stroke-container-resting: var( + --stroke-neutral-5 + ); + --color-select-menu-items-color-item-stroke-header-resting: var( + --stroke-basic-clear + ); + --color-select-menu-items-color-item-stroke-header-hover: var( + --stroke-basic-clear + ); + --color-select-menu-items-color-item-stroke-header-selected: var( + --stroke-basic-clear + ); + --color-select-menu-items-color-item-text-header-resting: var( + --content-text-neutral-3 + ); + --color-select-menu-items-color-item-text-header-hover: var( + --content-text-neutral-4 + ); + --color-select-menu-items-color-item-text-header-selected: var( + --content-text-neutral-4 + ); + --color-select-menu-items-color-item-text-row-resting: var( + --content-text-neutral-2 + ); + --color-select-menu-items-color-item-text-row-hover: var( + --content-text-neutral-base + ); + --color-select-menu-items-color-item-text-row-selected: var( + --content-text-neutral-base + ); + --color-select-menu-items-color-item-text-row-alt-selected: var( + --content-text-brand-base + ); + --color-select-menu-items-color-item-text-row-static: var( + --content-text-neutral-3 + ); + --color-select-menu-items-color-item-assets-header-resting: var( + --content-assets-neutral-1 + ); + --color-select-menu-items-color-item-assets-header-hover: var( + --content-assets-neutral-base + ); + --color-select-menu-items-color-item-assets-header-selected: var( + --content-assets-neutral-base + ); + --color-select-menu-items-color-item-assets-row-resting: var( + --content-assets-neutral-base + ); + --color-select-menu-items-color-item-assets-row-hover: var( + --content-assets-neutral-base + ); + --color-select-menu-items-color-item-assets-row-selected: var( + --content-assets-neutral-base + ); + --color-select-menu-items-color-item-assets-row-alt-selected: var( + --content-assets-brand-base + ); + --color-select-menu-items-color-item-assets-row-trail-icon: var( + --content-assets-neutral-2 + ); + --color-selectors-colors-checkbox-not-selected-background-resting: var( + --background-neutral-raised-5 + ); + --color-selectors-colors-checkbox-not-selected-stroke-resting: var( + --stroke-neutral-4 + ); + --color-selectors-colors-checkbox-not-selected-stroke-hover: var( + --stroke-neutral-3 + ); + --color-selectors-colors-checkbox-not-selected-background-hover: var( + --background-neutral-raised-4 + ); + --color-selectors-colors-radio-not-selected-background-resting: var( + --background-neutral-raised-5 + ); + --color-selectors-colors-radio-not-selected-background-hover: var( + --background-neutral-raised-4 + ); + --color-selectors-colors-radio-not-selected-stroke-resting: var( + --stroke-neutral-4 + ); + --color-selectors-colors-radio-not-selected-stroke-hover: var( + --stroke-neutral-3 + ); + --color-selectors-colors-radio-selected-background-resting: var( + --background-basic-clear + ); + --color-selectors-colors-radio-selected-background-hover: var( + --background-brand-4 + ); + --color-selectors-colors-radio-selected-stroke-resting: var(--stroke-brand-3); + --color-selectors-colors-radio-selected-stroke-hover: var( + --stroke-brand-base + ); + --color-selectors-colors-radio-selected-assets-base: var( + --content-assets-brand-base + ); + --color-selectors-colors-toggle-off-background-resting: var( + --background-neutral-raised-5 + ); + --color-selectors-colors-toggle-off-background-hover: var( + --background-neutral-raised-4 + ); + --color-selectors-colors-toggle-off-stroke-resting: var(--stroke-neutral-4); + --color-selectors-colors-toggle-off-stroke-hover: var(--stroke-neutral-3); + --color-selectors-colors-toggle-off-assets-resting: var( + --content-assets-neutral-base + ); + --color-selectors-colors-toggle-off-assets-hover: var( + --content-assets-neutral-base + ); + --color-selectors-colors-toggle-on-background-resting: var( + --background-brand-2 + ); + --color-selectors-colors-toggle-on-background-hover: var( + --background-brand-base + ); + --color-selectors-colors-toggle-on-stroke-resting: var(--stroke-brand-3); + --color-selectors-colors-toggle-on-stroke-hover: var(--stroke-brand-3); + --color-selectors-colors-toggle-on-assets-resting: var( + --content-assets-on-color-light-light + ); + --color-selectors-colors-toggle-on-assets-hover: var( + --content-assets-on-color-light-light + ); + --color-selectors-colors-text-label-not-selected: var( + --content-text-neutral-base + ); + --color-selectors-colors-text-label-selected: var( + --content-text-neutral-base + ); + --color-tabs-colors-contained-background-resting: var( + --background-basic-clear + ); + --color-tabs-colors-contained-background-hover: var( + --background-neutral-raised-5 + ); + --color-tabs-colors-contained-background-selected: var(--background-brand-3); + --color-tabs-colors-contained-background-selected-hover: var( + --background-brand-2 + ); + --color-tabs-colors-contained-stroke-resting: var(--stroke-basic-clear); + --color-tabs-colors-contained-stroke-hover: var(--stroke-basic-clear); + --color-tabs-colors-contained-stroke-selected: var(--stroke-basic-clear); + --color-tabs-colors-contained-stroke-selected-hover: var( + --stroke-basic-clear + ); + --color-tabs-colors-contained-text-resting: var(--content-text-neutral-3); + --color-tabs-colors-contained-text-hover: var(--content-text-neutral-base); + --color-tabs-colors-contained-text-selected: var( + --content-text-on-color-light-light + ); + --color-tabs-colors-contained-text-selected-hover: var( + --content-text-on-color-light-light + ); + --color-tabs-colors-contained-assets-resting: var(--content-assets-neutral-3); + --color-tabs-colors-contained-assets-hover: var( + --content-assets-neutral-base + ); + --color-tabs-colors-contained-assets-selected: var( + --content-assets-on-color-light-light + ); + --color-tabs-colors-contained-assets-selected-hover: var( + --content-assets-on-color-light-light + ); + --color-table-colors-background-header-container-resting: var( + --background-neutral-raised-5 + ); + --color-table-colors-background-header-container-hover: var( + --background-neutral-raised-4 + ); + --color-table-colors-background-header-container-selected: var( + --background-neutral-raised-3 + ); + --color-table-colors-background-row-container-resting: var( + --background-basic-clear + ); + --color-table-colors-background-row-container-alternate-resting: var( + --background-basic-clear + ); + --color-table-colors-background-row-container-hover: var( + --background-neutral-raised-6 + ); + --color-table-colors-background-row-container-selected: var( + --background-brand-5 + ); + --color-table-colors-stroke-header-container-resting: var( + --stroke-basic-clear + ); + --color-table-colors-stroke-header-container-hover: var(--stroke-basic-clear); + --color-table-colors-stroke-header-container-selected: var( + --stroke-basic-clear + ); + --color-table-colors-stroke-row-container-resting: var(--stroke-basic-clear); + --color-table-colors-stroke-divider-base: var(--stroke-neutral-5); + --color-table-colors-stroke-row-container-hover: var(--stroke-basic-clear); + --color-table-colors-stroke-row-container-selected: var(--stroke-brand-5); + --color-table-colors-text-header-resting: var(--content-text-neutral-1); + --color-table-colors-text-header-hover: var(--content-text-neutral-base); + --color-table-colors-text-header-selected: var(--content-text-neutral-base); + --color-table-colors-text-row-primary: var(--content-text-neutral-base); + --color-table-colors-text-row-secondary: var(--content-text-neutral-2); + --color-table-colors-text-row-tertiary: var(--content-text-neutral-3); + --color-tags-colors-neutral-background-resting: var( + --background-neutral-raised-5 + ); + --color-tags-colors-neutral-background-hover: var( + --background-neutral-raised-4 + ); + --color-tags-colors-neutral-background-selected: var( + --background-neutral-raised-3 + ); + --color-tags-colors-neutral-stroke-resting: var(--stroke-neutral-4); + --color-tags-colors-neutral-stroke-hover: var(--stroke-neutral-3); + --color-tags-colors-neutral-stroke-selected: var(--stroke-neutral-2); + --color-tags-colors-neutral-text-label-base: var( + --content-text-on-color-light-dark + ); + --color-tags-colors-neutral-assets-lead-icon-base: var( + --content-assets-on-color-light-dark + ); + --color-notifications-colors-assets-info-resting: var( + --content-assets-semantic-info-base + ); + --color-notifications-colors-assets-warning-static: var( + --content-assets-semantic-warning-base + ); + --color-notifications-colors-background-warning-resting: var( + --background-semantic-warning-5 + ); + --color-notifications-colors-background-warning-hover: var( + --background-semantic-warning-4 + ); + --color-notifications-colors-background-info-resting: var( + --background-semantic-info-5 + ); + --color-notifications-colors-background-info-hover: var( + --background-semantic-info-4 + ); + --color-buttons-colors-core-icon-destructive-background-resting: var( + --background-semantic-error-2 + ); + --color-buttons-colors-core-icon-destructive-background-hover: var( + --background-semantic-error-1 + ); + --color-buttons-colors-core-icon-destructive-background-selected: var( + --background-semantic-error-base + ); + --color-buttons-colors-core-icon-destructive-stroke-resting: var( + --stroke-semantic-error-base + ); + --color-buttons-colors-core-icon-destructive-stroke-hover: var( + --stroke-semantic-error-1 + ); + --color-buttons-colors-core-icon-destructive-stroke-selected: var( + --stroke-semantic-error-base + ); + --color-buttons-colors-core-icon-destructive-text-resting: var( + --content-text-on-color-light-light + ); + --color-buttons-colors-core-icon-destructive-text-hover: var( + --content-text-on-color-light-light + ); + --color-buttons-colors-core-icon-destructive-text-selected: var( + --content-text-on-color-light-light + ); + --color-buttons-colors-core-icon-destructive-assets-resting: var( + --content-assets-on-color-light-light + ); + --color-buttons-colors-core-icon-destructive-assets-hover: var( + --content-assets-on-color-light-light + ); + --color-buttons-colors-core-icon-destructive-assets-selected: var( + --content-assets-on-color-light-light + ); + --color-badges-colors-solid-accent-background-standard: var( + --background-accent-1-base + ); + --color-badges-colors-solid-accent-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-solid-accent-text-default: var( + --content-text-on-color-dark-light + ); + --color-badges-colors-solid-accent-assets-default: var( + --content-assets-on-color-dark-light + ); + --color-badges-colors-solid-neutral-background-standard: var( + --background-neutral-raised-base + ); + --color-badges-colors-solid-neutral-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-solid-neutral-text-default: var( + --content-text-on-color-dark-light + ); + --color-badges-colors-solid-neutral-assets-default: var( + --content-assets-on-color-dark-light + ); + --color-badges-colors-solid-success-background-standard: var( + --background-semantic-success-base + ); + --color-badges-colors-solid-success-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-solid-success-text-default: var( + --content-text-on-color-dark-dark + ); + --color-badges-colors-solid-success-assets-default: var( + --content-assets-on-color-dark-dark + ); + --color-badges-colors-solid-warning-background-standard: var( + --background-semantic-warning-base + ); + --color-badges-colors-solid-warning-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-solid-warning-text-default: var( + --content-text-on-color-dark-dark + ); + --color-badges-colors-solid-warning-assets-default: var( + --content-assets-on-color-dark-dark + ); + --color-badges-colors-solid-error-background-standard: var( + --background-semantic-error-1 + ); + --color-badges-colors-solid-error-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-solid-error-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-solid-error-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-solid-info-background-standard: var( + --background-semantic-info-base + ); + --color-badges-colors-solid-info-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-solid-info-text-default: var( + --content-text-on-color-dark-dark + ); + --color-badges-colors-solid-info-assets-default: var( + --content-assets-on-color-dark-dark + ); + --color-badges-colors-outline-brand-background-standard: var( + --background-brand-5 + ); + --color-badges-colors-outline-brand-stroke-default: var(--stroke-brand-1); + --color-badges-colors-outline-brand-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-outline-brand-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-outline-accent-background-standard: var( + --background-accent-1-5 + ); + --color-badges-colors-outline-accent-stroke-default: var(--stroke-accent-1-1); + --color-badges-colors-outline-accent-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-outline-accent-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-outline-neutral-background-standard: var( + --background-neutral-raised-5 + ); + --color-badges-colors-outline-neutral-stroke-default: var(--stroke-neutral-1); + --color-badges-colors-outline-neutral-assets-default: var( + --content-assets-neutral-base + ); + --color-badges-colors-outline-neutral-text-default: var( + --content-text-neutral-base + ); + --color-badges-colors-outline-success-background-standard: var( + --background-semantic-success-5 + ); + --color-badges-colors-outline-success-stroke-default: var( + --stroke-semantic-success-1 + ); + --color-badges-colors-outline-success-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-outline-success-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-outline-warning-background-standard: var( + --background-semantic-warning-5 + ); + --color-badges-colors-outline-warning-stroke-default: var( + --stroke-semantic-warning-1 + ); + --color-badges-colors-outline-warning-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-outline-warning-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-outline-error-background-standard: var( + --background-semantic-error-5 + ); + --color-badges-colors-outline-error-stroke-default: var( + --stroke-semantic-error-1 + ); + --color-badges-colors-outline-error-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-outline-error-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-outline-info-background-standard: var( + --background-semantic-info-5 + ); + --color-badges-colors-outline-info-stroke-default: var( + --stroke-semantic-info-1 + ); + --color-badges-colors-outline-info-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-outline-info-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-subtle-brand-background-standard: var( + --background-brand-4 + ); + --color-badges-colors-subtle-brand-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-subtle-brand-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-subtle-brand-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-subtle-accent-background-standard: var( + --background-accent-1-4 + ); + --color-badges-colors-subtle-accent-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-subtle-accent-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-subtle-accent-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-subtle-neutral-background-standard: var( + --background-neutral-raised-4 + ); + --color-badges-colors-subtle-neutral-stroke-default: var( + --stroke-basic-clear + ); + --color-badges-colors-subtle-neutral-text-default: var( + --content-text-neutral-base + ); + --color-badges-colors-subtle-neutral-assets-default: var( + --content-assets-neutral-base + ); + --color-badges-colors-subtle-success-background-standard: var( + --background-semantic-success-4 + ); + --color-badges-colors-subtle-success-stroke-default: var( + --stroke-basic-clear + ); + --color-badges-colors-subtle-success-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-subtle-success-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-subtle-warning-background-standard: var( + --background-semantic-warning-4 + ); + --color-badges-colors-subtle-warning-stroke-default: var( + --stroke-basic-clear + ); + --color-badges-colors-subtle-warning-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-subtle-warning-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-subtle-error-background-standard: var( + --background-semantic-error-4 + ); + --color-badges-colors-subtle-error-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-subtle-error-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-subtle-error-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-badges-colors-subtle-info-background-standard: var( + --background-semantic-info-4 + ); + --color-badges-colors-subtle-info-stroke-default: var(--stroke-basic-clear); + --color-badges-colors-subtle-info-text-default: var( + --content-text-on-color-light-dark + ); + --color-badges-colors-subtle-info-assets-default: var( + --content-assets-on-color-light-dark + ); + --color-indicators-colors-neutral-background-resting: var( + --background-neutral-raised-5 + ); + --color-indicators-colors-neutral-content-text-resting: var( + --content-text-neutral-base + ); + --color-inputs-colors-normal-text-conditional-default: var( + --content-text-neutral-2 + ); + --color-inputs-colors-normal-text-input-text-resting: var( + --content-text-neutral-3 + ); + --color-inputs-colors-normal-text-input-text-hover: var( + --content-text-neutral-3 + ); + --color-inputs-colors-normal-text-input-text-selected: var( + --content-text-neutral-base + ); + --color-inputs-colors-normal-text-input-text-filled: var( + --content-text-neutral-base + ); + --color-inputs-colors-normal-text-static-text-default: var( + --content-text-neutral-1 + ); + --color-inputs-colors-normal-text-helper-default: var( + --content-text-neutral-3 + ); + --color-inputs-colors-normal-assets-tooltip-resting: var( + --content-assets-neutral-2 + ); + --color-inputs-colors-normal-assets-tooltip-hover: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-normal-assets-tooltip-selected: var( + --content-assets-neutral-base + ); + --color-inputs-colors-error-background-resting: var( + --background-semantic-error-5 + ); + --color-inputs-colors-error-background-hover: var( + --background-semantic-error-5 + ); + --color-inputs-colors-error-background-selected: var( + --background-semantic-error-4 + ); + --color-inputs-colors-error-stroke-resting: var(--stroke-semantic-error-3); + --color-inputs-colors-error-stroke-hover: var(--stroke-semantic-error-base); + --color-inputs-colors-error-stroke-selected: var( + --stroke-semantic-error-base + ); + --color-inputs-colors-error-text-label-resting: var(--content-text-neutral-3); + --color-inputs-colors-error-text-label-hover: var( + --content-text-neutral-base + ); + --color-inputs-colors-error-text-label-selected: var( + --content-text-neutral-base + ); + --color-inputs-colors-error-text-label-filled: var(--content-text-neutral-3); + --color-inputs-colors-error-assets-input-resting: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-error-assets-input-hover: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-error-assets-input-selected: var( + --content-assets-neutral-base + ); + --color-inputs-colors-error-text-conditional-default: var( + --content-text-neutral-3 + ); + --color-inputs-colors-error-text-input-text-resting: var( + --content-text-neutral-3 + ); + --color-inputs-colors-error-text-static-text-default: var( + --content-text-neutral-1 + ); + --color-inputs-colors-error-text-input-text-hover: var( + --content-text-neutral-3 + ); + --color-inputs-colors-error-text-input-text-selected: var( + --content-text-neutral-base + ); + --color-inputs-colors-error-text-input-text-filled: var( + --content-text-neutral-base + ); + --color-inputs-colors-error-text-helper-default: var( + --content-text-semantic-error-base + ); + --color-inputs-colors-error-assets-tooltip-resting: var( + --content-assets-neutral-2 + ); + --color-inputs-colors-error-assets-tooltip-hover: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-error-assets-tooltip-selected: var( + --content-assets-neutral-base + ); + --color-inputs-colors-success-background-resting: var( + --background-semantic-success-5 + ); + --color-inputs-colors-success-background-hover: var( + --background-semantic-success-5 + ); + --color-inputs-colors-success-background-selected: var( + --background-semantic-success-4 + ); + --color-inputs-colors-success-stroke-resting: var( + --stroke-semantic-success-3 + ); + --color-inputs-colors-success-stroke-hover: var( + --stroke-semantic-success-base + ); + --color-inputs-colors-success-stroke-selected: var( + --stroke-semantic-success-base + ); + --color-inputs-colors-success-text-label-resting: var( + --content-text-neutral-3 + ); + --color-inputs-colors-success-text-label-hover: var( + --content-text-neutral-base + ); + --color-inputs-colors-success-text-label-selected: var( + --content-text-neutral-base + ); + --color-inputs-colors-success-text-label-filled: var( + --content-text-neutral-3 + ); + --color-inputs-colors-success-assets-input-resting: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-success-assets-input-hover: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-success-assets-input-selected: var( + --content-assets-neutral-base + ); + --color-inputs-colors-success-text-conditional-default: var( + --content-text-neutral-3 + ); + --color-inputs-colors-success-text-input-text-resting: var( + --content-text-neutral-3 + ); + --color-inputs-colors-success-text-static-text-default: var( + --content-text-neutral-1 + ); + --color-inputs-colors-success-text-input-text-hover: var( + --content-text-neutral-3 + ); + --color-inputs-colors-success-text-input-text-selected: var( + --content-text-neutral-base + ); + --color-inputs-colors-success-text-input-text-filled: var( + --content-text-neutral-base + ); + --color-inputs-colors-success-text-helper-default: var( + --content-text-semantic-success-base + ); + --color-inputs-colors-success-assets-tooltip-resting: var( + --content-assets-neutral-2 + ); + --color-inputs-colors-success-assets-tooltip-hover: var( + --content-assets-neutral-1 + ); + --color-inputs-colors-success-assets-tooltip-selected: var( + --content-assets-neutral-base + ); + --color-selectors-colors-checkbox-selected-background-resting: var( + --background-brand-2 + ); + --color-selectors-colors-checkbox-selected-background-hover: var( + --background-brand-base + ); + --color-selectors-colors-checkbox-selected-stroke-resting: var( + --stroke-brand-3 + ); + --color-selectors-colors-checkbox-selected-stroke-hover: var( + --stroke-brand-3 + ); + --color-selectors-colors-checkbox-selected-assets-base: var( + --content-assets-on-color-light-light + ); + --color-selectors-colors-checkbox-selected-assets-hover: var( + --content-assets-on-color-light-light + ); + --color-selectors-colors-text-description-not-selected: var( + --content-text-neutral-3 + ); + --color-selectors-colors-text-description-selected: var( + --content-text-neutral-3 + ); + --color-tags-colors-neutral-text-static-base: var(--content-text-neutral-3); + --color-tags-colors-neutral-assets-close-base: var( + --content-assets-neutral-3 + ); + --color-tags-colors-brand-background-resting: var(--background-brand-5); + --color-tags-colors-brand-background-hover: var(--background-brand-4); + --color-tags-colors-brand-background-selected: var(--background-brand-3); + --color-tags-colors-brand-stroke-resting: var(--stroke-brand-4); + --color-tags-colors-brand-stroke-hover: var(--stroke-brand-3); + --color-tags-colors-brand-stroke-selected: var(--stroke-brand-2); + --color-tags-colors-brand-text-label-base: var( + --content-text-on-color-light-dark + ); + --color-tags-colors-brand-assets-lead-icon-base: var( + --content-assets-on-color-light-dark + ); + --color-tags-colors-brand-text-static-base: var(--content-text-neutral-3); + --color-tags-colors-brand-assets-close-base: var(--content-assets-neutral-3); + --color-tags-colors-accent-background-resting: var(--background-accent-3-5); + --color-tags-colors-accent-background-hover: var(--background-accent-3-4); + --color-tags-colors-accent-background-selected: var(--background-accent-3-3); + --color-tags-colors-accent-stroke-resting: var(--stroke-accent-3-4); + --color-tags-colors-accent-stroke-hover: var(--stroke-accent-3-3); + --color-tags-colors-accent-stroke-selected: var(--stroke-accent-3-2); + --color-tags-colors-accent-text-label-base: var( + --content-text-on-color-light-dark + ); + --color-tags-colors-accent-text-static-base: var(--content-text-neutral-3); + --color-tags-colors-accent-assets-lead-icon-base: var( + --content-assets-on-color-light-dark + ); + --color-tags-colors-accent-assets-close-base: var(--content-assets-neutral-3); + --color-tags-colors-info-background-resting: var( + --background-semantic-info-5 + ); + --color-tags-colors-info-background-hover: var(--background-semantic-info-4); + --color-tags-colors-info-background-selected: var( + --background-semantic-info-3 + ); + --color-tags-colors-info-stroke-resting: var(--stroke-semantic-info-4); + --color-tags-colors-info-stroke-hover: var(--stroke-semantic-info-3); + --color-tags-colors-info-stroke-selected: var(--stroke-semantic-info-2); + --color-tags-colors-info-text-label-base: var( + --content-text-on-color-light-dark + ); + --color-tags-colors-info-assets-lead-icon-base: var( + --content-assets-on-color-light-dark + ); + --color-tags-colors-info-text-static-base: var(--content-text-neutral-3); + --color-tags-colors-info-assets-close-base: var(--content-assets-neutral-3); + --color-tags-colors-success-background-resting: var( + --background-semantic-success-5 + ); + --color-tags-colors-success-background-hover: var( + --background-semantic-success-4 + ); + --color-tags-colors-success-background-selected: var( + --background-semantic-success-3 + ); + --color-tags-colors-success-stroke-resting: var(--stroke-semantic-success-4); + --color-tags-colors-success-stroke-hover: var(--stroke-semantic-success-3); + --color-tags-colors-success-stroke-selected: var(--stroke-semantic-success-2); + --color-tags-colors-success-text-label-base: var( + --content-text-on-color-light-dark + ); + --color-tags-colors-success-assets-lead-icon-base: var( + --content-assets-on-color-light-dark + ); + --color-tags-colors-success-text-static-base: var(--content-text-neutral-3); + --color-tags-colors-success-assets-close-base: var( + --content-assets-neutral-3 + ); + --color-tags-colors-warning-background-resting: var( + --background-semantic-warning-5 + ); + --color-tags-colors-warning-background-hover: var( + --background-semantic-warning-4 + ); + --color-tags-colors-warning-background-selected: var( + --background-semantic-warning-3 + ); + --color-tags-colors-warning-stroke-resting: var(--stroke-semantic-warning-4); + --color-tags-colors-warning-stroke-hover: var(--stroke-semantic-warning-3); + --color-tags-colors-warning-stroke-selected: var(--stroke-semantic-warning-2); + --color-tags-colors-warning-text-label-base: var( + --content-text-on-color-light-dark + ); + --color-tags-colors-warning-assets-lead-icon-base: var( + --content-assets-on-color-light-dark + ); + --color-tags-colors-warning-text-static-base: var(--content-text-neutral-3); + --color-tags-colors-warning-assets-close-base: var( + --content-assets-neutral-3 + ); + --color-tags-colors-error-background-resting: var( + --background-semantic-error-5 + ); + --color-tags-colors-error-background-hover: var( + --background-semantic-error-4 + ); + --color-tags-colors-error-background-selected: var( + --background-semantic-error-3 + ); + --color-tags-colors-error-stroke-resting: var(--stroke-semantic-error-4); + --color-tags-colors-error-stroke-hover: var(--stroke-semantic-error-3); + --color-tags-colors-error-stroke-selected: var(--stroke-semantic-error-2); + --color-tags-colors-error-text-label-base: var( + --content-text-on-color-light-dark + ); + --color-tags-colors-error-assets-lead-icon-base: var( + --content-assets-on-color-light-dark + ); + --color-tags-colors-error-text-static-base: var(--content-text-neutral-3); + --color-tags-colors-error-assets-close-base: var(--content-assets-neutral-3); + --color-tabs-colors-underline-background-resting: var( + --background-basic-clear + ); + --color-tabs-colors-underline-background-hover: var(--background-basic-clear); + --color-tabs-colors-underline-background-selected: var( + --background-basic-clear + ); + --color-tabs-colors-underline-background-selected-hover: var( + --background-basic-clear + ); + --color-tabs-colors-underline-stroke-resting: var(--stroke-basic-clear); + --color-tabs-colors-underline-stroke-hover: var(--stroke-basic-clear); + --color-tabs-colors-underline-stroke-selected: var(--stroke-brand-base); + --color-tabs-colors-underline-stroke-selected-hover: var(--stroke-brand-3); + --color-tabs-colors-underline-text-resting: var(--content-text-neutral-3); + --color-tabs-colors-underline-text-hover: var(--content-text-neutral-base); + --color-tabs-colors-underline-text-selected: var(--content-text-neutral-base); + --color-tabs-colors-underline-text-selected-hover: var( + --content-text-neutral-base + ); + --color-tabs-colors-underline-assets-resting: var(--content-assets-neutral-3); + --color-tabs-colors-underline-assets-hover: var( + --content-assets-neutral-base + ); + --color-tabs-colors-underline-assets-selected: var( + --content-assets-neutral-base + ); + --color-tabs-colors-underline-assets-selected-hover: var( + --content-assets-neutral-base + ); + --color-tabs-colors-outline-background-resting: var(--background-basic-clear); + --color-tabs-colors-outline-background-hover: var( + --background-neutral-raised-5 + ); + --color-tabs-colors-outline-background-selected: var( + --background-basic-clear + ); + --color-tabs-colors-outline-background-selected-hover: var( + --background-neutral-raised-5 + ); + --color-tabs-colors-outline-stroke-resting: var(--stroke-neutral-5); + --color-tabs-colors-outline-stroke-hover: var(--stroke-neutral-5); + --color-tabs-colors-outline-stroke-selected: var(--stroke-brand-base); + --color-tabs-colors-outline-stroke-selected-hover: var(--stroke-brand-3); + --color-tabs-colors-outline-text-resting: var(--content-text-neutral-3); + --color-tabs-colors-outline-text-hover: var(--content-text-neutral-base); + --color-tabs-colors-outline-text-selected: var(--content-text-neutral-base); + --color-tabs-colors-outline-text-selected-hover: var( + --content-text-neutral-base + ); + --color-tabs-colors-outline-assets-resting: var(--content-assets-neutral-3); + --color-tabs-colors-outline-assets-hover: var(--content-assets-neutral-base); + --color-tabs-colors-outline-assets-selected: var( + --content-assets-neutral-base + ); + --color-tabs-colors-outline-assets-selected-hover: var( + --content-assets-neutral-base + ); + --color-tabs-colors-text-only-background-resting: var( + --background-basic-clear + ); + --color-tabs-colors-text-only-background-hover: var(--background-basic-clear); + --color-tabs-colors-text-only-background-selected: var( + --background-basic-clear + ); + --color-tabs-colors-text-only-background-selected-hover: var( + --background-basic-clear + ); + --color-tabs-colors-text-only-text-resting: var(--content-text-neutral-3); + --color-tabs-colors-text-only-text-hover: var(--content-text-neutral-base); + --color-tabs-colors-text-only-text-selected: var(--content-text-brand-base); + --color-tabs-colors-text-only-text-selected-hover: var( + --content-text-brand-1 + ); + --color-tabs-colors-text-only-assets-resting: var(--content-assets-neutral-3); + --color-tabs-colors-text-only-assets-hover: var( + --content-assets-neutral-base + ); + --color-tabs-colors-text-only-assets-selected: var( + --content-assets-brand-base + ); + --color-tabs-colors-text-only-assets-selected-hover: var( + --content-assets-brand-1 + ); + --color-tooltip-colors-brand-background-default: var(--background-brand-3); + --color-tooltip-colors-brand-text-default: var( + --content-text-on-color-light-light + ); + --color-tooltip-colors-neutral-background-default: var( + --background-neutral-raised-5 + ); + --color-tooltip-colors-neutral-text-default: var(--content-text-neutral-base); + --color-json-tree-color-text-primary-resting: var(--content-text-brand-base); + --color-json-tree-color-text-primary-hover: var(--content-text-neutral-base); + --color-json-tree-color-text-secondary-resting: var(--content-text-neutral-2); + --color-json-tree-color-text-secondary-hover: var( + --content-text-neutral-base + ); + --color-json-tree-color-asset-resting: var(--content-assets-brand-base); + --color-json-tree-color-asset-hover: var(--content-assets-neutral-base); + --color-selectors-colors-range-handles-background-resting: var( + --background-neutral-raised-base + ); + --color-selectors-colors-range-handles-background-hover: var( + --background-brand-base + ); + --color-selectors-colors-range-handles-background-active: var( + --background-brand-base + ); + --color-selectors-colors-range-handles-stroke-resting: var( + --stroke-basic-clear + ); + --color-selectors-colors-range-handles-stroke-hover: var( + --stroke-basic-clear + ); + --color-selectors-colors-range-handles-stroke-active: var( + --stroke-basic-clear + ); + --color-selectors-colors-range-bar-background-base: var( + --background-neutral-raised-4 + ); + --color-selectors-colors-range-bar-background-hover: var( + --background-neutral-raised-3 + ); + --color-selectors-colors-range-bar-background-active: var( + --background-neutral-raised-3 + ); + --color-selectors-colors-range-bar-background-active-section: var( + --background-brand-base + ); + --color-table-colors-background-header-cell-resting: var( + --background-basic-clear + ); + --color-table-colors-background-header-cell-hover: var( + --background-neutral-raised-4 + ); + --color-table-colors-background-header-cell-selected: var( + --background-neutral-raised-3 + ); + --color-table-colors-background-row-cell-resting: var( + --background-basic-clear + ); + --color-table-colors-background-row-cell-hover: var(--background-basic-clear); + --color-table-colors-background-row-cell-selected: var( + --background-basic-clear + ); + --color-table-colors-stroke-header-cell-resting: var(--stroke-basic-clear); + --color-table-colors-stroke-header-cell-hover: var(--stroke-basic-clear); + --color-table-colors-stroke-header-cell-selected: var(--stroke-basic-clear); + --color-table-colors-stroke-row-cell-resting: var(--stroke-basic-clear); + --color-table-colors-stroke-row-cell-hover: var(--stroke-basic-clear); + --color-table-colors-stroke-row-cell-selected: var(--stroke-basic-clear); + --color-table-colors-asset-header-resting: var(--content-text-neutral-1); + --color-table-colors-asset-header-hover: var(--content-text-neutral-base); + --color-table-colors-asset-header-selected: var(--content-text-neutral-base); + --color-table-colors-asset-row-primary: var(--content-text-neutral-base); + --color-table-colors-asset-row-secondary: var(--content-text-neutral-2); + --color-table-colors-asset-row-tertiary: var(--content-text-neutral-3); + --color-select-menu-items-color-item-background-row-resting: var( + --background-basic-clear + ); + --color-select-menu-items-color-item-background-row-hover: var( + --background-neutral-raised-6 + ); + --color-select-menu-items-color-item-background-row-selected: var( + --background-brand-5 + ); + --color-select-menu-items-color-item-stroke-row-resting: var( + --stroke-basic-clear + ); + --color-select-menu-items-color-item-stroke-row-hover: var( + --stroke-neutral-6 + ); + --color-select-menu-items-color-item-stroke-row-selected: var( + --stroke-brand-5 + ); + --color-navigation-colors-background-row-items-resting: var( + --background-basic-clear + ); + --color-navigation-colors-background-row-items-hover: var( + --background-neutral-raised-5 + ); + --color-navigation-colors-background-row-items-selected: var( + --background-brand-3 + ); + --color-navigation-colors-background-row-items-top-nav-selected: var( + --background-basic-clear + ); + --color-navigation-colors-stroke-row-items-resting: var(--stroke-basic-clear); + --color-navigation-colors-stroke-row-items-hover: var(--stroke-neutral-6); + --color-navigation-colors-stroke-row-items-selected: var(--stroke-brand-3); + --color-navigation-colors-stroke-row-items-top-nav-selected: var( + --stroke-basic-clear + ); + --color-navigation-colors-stroke-detail-line-sub-menu: var( + --stroke-neutral-4 + ); + --color-navigation-colors-stroke-detail-line-resting: var( + --stroke-basic-clear + ); + --color-navigation-colors-stroke-detail-line-hover: var(--stroke-basic-clear); + --color-navigation-colors-stroke-detail-line-active: var(--stroke-brand-base); +} diff --git a/src/assets/css/tw/fonts.css b/src/assets/css/tw/fonts.css new file mode 100644 index 000000000..2f18fec38 --- /dev/null +++ b/src/assets/css/tw/fonts.css @@ -0,0 +1,15 @@ +@theme inline { + /* Fonts */ + --font-sans: Inter, sans-serif; + --font-mono: Fira Code, monospace; + + /* Font sizes */ + --text-xs: 0.625rem; /* 10px */ + --text-xs--line-height: 1rem; + --text-sm: 0.75rem; /* 12px */ + --text-sm--line-height: 1rem; + --text-base: 0.875rem; /* 14px */ + --text-base--line-height: 1.25rem; + --text-lg: 1rem; /* 16px */ + --text-lg--line-height: 1.5rem; +} diff --git a/src/assets/css/tw/main.css b/src/assets/css/tw/main.css new file mode 100644 index 000000000..da1dc38b7 --- /dev/null +++ b/src/assets/css/tw/main.css @@ -0,0 +1,4 @@ +@import './backgrounds.css'; +@import './colors.css'; +@import './fonts.css'; +@import './shadows.css'; diff --git a/src/assets/css/tw/shadows.css b/src/assets/css/tw/shadows.css new file mode 100644 index 000000000..f41b3a508 --- /dev/null +++ b/src/assets/css/tw/shadows.css @@ -0,0 +1,3 @@ +@theme inline { + /* Box shadow */ +} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index e864da732..000000000 --- a/src/index.css +++ /dev/null @@ -1,389 +0,0 @@ -@import 'tailwindcss'; - -/* Color palette */ -:root, -:host { - --reablocks-theme: dark; - - /* Primary colors */ - --primary: var(--color-blue-500); - --primary-active: var(--color-blue-500); - --primary-hover: var(--color-blue-400); - --primary-inactive: var(--color-blue-200); - - /* Secondary colors */ - --secondary: var(--color-charade); - --secondary-active: var(--color-charade); - --secondary-hover: var(--color-gray-700); - --secondary-inactive: var(--color-gray-600); - - /* Success colors */ - --success: var(--color-green-500); - --success-active: var(--color-green-500); - --success-hover: var(--color-green-400); - --success-background: var(--color-green-950); - - /* Error colors */ - --error: var(--color-red-500); - --error-active: var(--color-red-500); - --error-hover: var(--color-red-400); - --error-background: var(--color-red-950); - - /* Warning colors */ - --warning: var(--color-orange-500); - --warning-active: var(--color-orange-500); - --warning-hover: var(--color-orange-400); - --warning-background: var(--color-orange-950); - - /* Info colors */ - --info: var(--color-blue-500); - --info-active: var(--color-blue-500); - --info-hover: var(--color-blue-400); - --info-background: var(--color-blue-950); - - /* Panel colors */ - --panel: var(--color-black-pearl); - --panel-accent: var(--color-charade); - - /* Surface colors */ - --surface: var(--color-charade); - --surface-accent: var(--color-blue-500); - - /* Text colors */ - --text-primary: var(--color-athens-gray); - --text-secondary: var(--color-waterloo); - - /* Custom Backgrounds */ - --bottom-border-glow: radial-gradient( - circle at center, - var(--color-anakiwa) 0, - blue, - transparent 100% - ); - --button-gradient: linear-gradient( - 283deg, - #0808a5 0%, - rgba(8, 8, 165, 0) 100% - ); - --button-gradient-hover: linear-gradient( - 283deg, - #44f 0%, - rgba(23, 23, 255, 0.1) 100% - ); - --button-gradient-focus: linear-gradient( - 283deg, - #0d0dd2 0%, - rgba(23, 23, 255, 0.1) 100% - ); - - .theme-light, - &.theme-light, - [data-theme='light'], - &[data-theme='light'] { - --reablocks-theme: light; - - /* Primary colors */ - --primary: var(--color-blue-500); - --primary-active: var(--color-blue-500); - --primary-hover: var(--color-blue-600); - --primary-inactive: var(--color-gray-500); - - /* Secondary colors */ - --secondary: var(--color-blue-200); - --secondary-active: var(--color-blue-200); - --secondary-hover: var(--color-blue-300); - --secondary-inactive: var(--color-waterloo); - - /* Success colors */ - --success: var(--color-green-500); - --success-active: var(--color-green-500); - --success-hover: var(--color-green-600); - --success-background: var(--color-green-100); - - /* Error colors */ - --error: var(--color-red-500); - --error-active: var(--color-red-400); - --error-hover: var(--color-red-600); - --error-background: var(--color-red-100); - - /* Warning colors */ - --warning: var(--color-orange-500); - --warning-active: var(--color-orange-500); - --warning-hover: var(--color-orange-600); - --warning-background: var(--color-orange-100); - - /* Info colors */ - --info: var(--color-blue-500); - --info-active: var(--color-blue-500); - --info-hover: var(--color-blue-600); - --info-background: var(--color-blue-100); - - /* Panel colors */ - --panel: var(--color-white); - --panel-accent: var(--color-mystic); - - /* Surface colors */ - --surface: var(--color-gray-300); - --surface-accent: var(--color-blue-500); - - /* Text colors */ - --text-primary: var(--color-vulcan); - --text-secondary: var(--color-gray-700); - } -} - -/* Custom variants */ -@custom-variant dark (&:where(.theme-dark, .theme-dark *, [data-theme=dark], [data-theme=dark] *)); -@custom-variant light (&:where(.theme-light, .theme-light *, [data-theme=light], [data-theme=light] *)); -@custom-variant disabled-within (&:has(input:is(:disabled), textarea:is(:disabled), button:is(:disabled))); - -/* Define theme tokens */ -@theme inline { - /* Fonts */ - --font-sans: Inter, sans-serif; - --font-mono: Fira Code, monospace; - - /* Font sizes */ - --text-xs: 0.625rem; /* 10px */ - --text-xs--line-height: 1rem; - --text-sm: 0.75rem; /* 12px */ - --text-sm--line-height: 1rem; - --text-base: 0.875rem; /* 14px */ - --text-base--line-height: 1.25rem; - --text-lg: 1rem; /* 16px */ - --text-lg--line-height: 1.5rem; - - /* Primary colors */ - --color-primary: var(--primary); - --color-primary-active: var(--primary-active); - --color-primary-hover: var(--primary-hover); - --color-primary-inactive: var(--primary-inactive); - - /* Secondary colors */ - --color-secondary: var(--secondary); - --color-secondary-active: var(--secondary-active); - --color-secondary-hover: var(--secondary-hover); - --color-secondary-inactive: var(--secondary-inactive); - - /* Success colors */ - --color-success: var(--success); - --color-success-active: var(--success-active); - --color-success-hover: var(--success-hover); - --color-success-background: var(--success-background); - - /* Error colors */ - --color-error: var(--error); - --color-error-active: var(--error-active); - --color-error-hover: var(--error-hover); - --color-error-background: var(--error-background); - - /* Warning colors */ - --color-warning: var(--warning); - --color-warning-active: var(--warning-active); - --color-warning-hover: var(--warning-hover); - --color-warning-background: var(--warning-background); - - /* Info colors */ - --color-info: var(--info); - --color-info-active: var(--info-active); - --color-info-hover: var(--info-hover); - --color-info-background: var(--info-background); - - /* Panel colors */ - --color-panel: var(--panel); - --color-panel-accent: var(--panel-accent); - - /* Surface colors */ - --color-surface: var(--surface); - --color-surface-accent: var(--surface-accent); - - /* Text colors */ - --color-text-primary: var(--text-primary); - --color-text-secondary: var(--text-secondary); - - /* Base colors */ - --color-white: #ffffff; - --color-black: #000000; - - /* Gray scale */ - --color-gray-*: initial; - --color-gray-100: #f7f7fa; - --color-gray-200: #e6e6f0; - --color-gray-300: #c9c9d6; - --color-gray-400: #77778c; - --color-gray-500: #5c5c73; - --color-gray-600: #3d3d4d; - --color-gray-700: #242433; - --color-gray-800: #1e1e2e; - --color-gray-900: #11111f; - --color-gray-950: #02020f; - - /* Magenta */ - --color-magenta-*: initial; - --color-magenta-100: #fae5f6; - --color-magenta-200: #f1bfe9; - --color-magenta-300: #e480d3; - --color-magenta-400: #d740be; - --color-magenta-500: #c900a8; - --color-magenta-600: #ab018f; - --color-magenta-700: #8c0276; - --color-magenta-800: #6e025c; - --color-magenta-900: #4f0343; - --color-magenta-950: #31042a; - - /* Pink */ - --color-pink-*: initial; - --color-pink-100: #fde5f1; - --color-pink-200: #f9bfdb; - --color-pink-300: #f480b7; - --color-pink-400: #ee4094; - --color-pink-500: #de006b; - --color-pink-600: #bb015a; - --color-pink-700: #98014a; - --color-pink-800: #740239; - --color-pink-900: #510229; - --color-pink-950: #2e0318; - - /* Lime */ - --color-lime-*: initial; - --color-lime-100: #f4fae5; - --color-lime-200: #e3f3bf; - --color-lime-300: #c6e880; - --color-lime-400: #aadc40; - --color-lime-500: #8ed000; - --color-lime-600: #78b001; - --color-lime-700: #628f01; - --color-lime-800: #4c6f02; - --color-lime-900: #364e02; - --color-lime-950: #202e03; - - /* Teal */ - --color-teal-*: initial; - --color-teal-100: #e5fbf9; - --color-teal-200: #bff6f0; - --color-teal-300: #80ede0; - --color-teal-400: #40e5d1; - --color-teal-500: #00dcc2; - --color-teal-600: #00c2ab; - --color-teal-700: #019a88; - --color-teal-800: #017365; - --color-teal-900: #024b42; - --color-teal-950: #02231f; - - /* Cyan */ - --color-cyan-*: initial; - --color-cyan-100: #e5f9fe; - --color-cyan-200: #bff0fb; - --color-cyan-300: #80e2f8; - --color-cyan-400: #40d3f4; - --color-cyan-500: #00c5f0; - --color-cyan-600: #01a7cb; - --color-cyan-700: #0289a6; - --color-cyan-800: #036b82; - --color-cyan-900: #044d5d; - --color-cyan-950: #052f38; - - /* Violet */ - --color-violet-*: initial; - --color-violet-100: #f0e8fd; - --color-violet-200: #dac5f9; - --color-violet-300: #b58bf3; - --color-violet-400: #9152ee; - --color-violet-500: #6c18e8; - --color-violet-600: #5b14c5; - --color-violet-700: #4b10a1; - --color-violet-800: #3a0d7e; - --color-violet-900: #2a095b; - --color-violet-950: #190537; - - /* Purple */ - --color-purple-*: initial; - --color-purple-100: #f3e5fc; - --color-purple-200: #e2bff7; - --color-purple-300: #c580f0; - --color-purple-400: #a840e8; - --color-purple-500: #8b00e0; - --color-purple-600: #7501bc; - --color-purple-700: #5f0298; - --color-purple-800: #490274; - --color-purple-900: #330350; - --color-purple-950: #1d042d; - - /* Red */ - --color-red-*: initial; - --color-red-100: #fce5e6; - --color-red-200: #f7bfc1; - --color-red-300: #f08083; - --color-red-400: #e84045; - --color-red-500: #e00007; - --color-red-600: #b70006; - --color-red-700: #8e0005; - --color-red-800: #660104; - --color-red-900: #3d0103; - --color-red-950: #200204; - - /* Orange */ - --color-orange-*: initial; - --color-orange-100: #fef3e5; - --color-orange-200: #fde1bf; - --color-orange-300: #fbc280; - --color-orange-400: #f8a340; - --color-orange-500: #f68500; - --color-orange-600: #cb6e00; - --color-orange-700: #9f5701; - --color-orange-800: #743f01; - --color-orange-900: #482802; - --color-orange-950: #251602; - - /* Yellow */ - --color-yellow-*: initial; - --color-yellow-100: #fff9e5; - --color-yellow-200: #fff1bf; - --color-yellow-300: #ffe380; - --color-yellow-400: #ffd440; - --color-yellow-500: #ffc600; - --color-yellow-600: #d2a300; - --color-yellow-700: #a58001; - --color-yellow-800: #785e01; - --color-yellow-900: #4b3b02; - --color-yellow-950: #261f03; - - /* Green */ - --color-green-*: initial; - --color-green-100: #eef8e9; - --color-green-200: #d5efc8; - --color-green-300: #aadf91; - --color-green-400: #80ce5b; - --color-green-500: #55be24; - --color-green-600: #469d1d; - --color-green-700: #377c16; - --color-green-800: #275c10; - --color-green-900: #183b09; - --color-green-950: #091a02; - - /* Blue */ - --color-blue-*: initial; - --color-blue-100: #e7efff; - --color-blue-200: #c3d7ff; - --color-blue-300: #87aeff; - --color-blue-400: #4c86ff; - --color-blue-500: #105eff; - --color-blue-600: #0d4ed2; - --color-blue-700: #0a3da6; - --color-blue-800: #082d79; - --color-blue-900: #051c4c; - --color-blue-950: #041028; - - /* Named colors */ - --color-black-pearl: #02020f; - --color-athens-gray: #f7f7fa; - --color-mystic: #e6e6f0; - --color-vulcan: #11111f; - --color-charade: #242433; - --color-waterloo: #77778c; - --color-anakiwa: #93b6ff; -} - -body { - line-height: inherit; -} diff --git a/src/utils/Theme/Theme.story.tsx b/src/utils/Theme/Theme.story.tsx index 12ea735da..92c14a31b 100644 --- a/src/utils/Theme/Theme.story.tsx +++ b/src/utils/Theme/Theme.story.tsx @@ -15,7 +15,7 @@ import { extractTheme } from './themes/extractTheme'; export default { title: 'Components/Theme', decorators: [ - Story => { + (Story, context) => { const { tokens } = useTheme(); const { @@ -38,6 +38,7 @@ export default { fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight} + theme={context?.globals?.theme} /> ); @@ -45,8 +46,8 @@ export default { ] }; -export const Colors = (_: unknown, { colors }) => { - return ; +export const Colors = (_: unknown, { colors, theme }) => { + return ; }; export const Typography = ( diff --git a/src/utils/Theme/blocks/ColorBlocks.tsx b/src/utils/Theme/blocks/ColorBlocks.tsx index d986ff155..3dd3980a5 100644 --- a/src/utils/Theme/blocks/ColorBlocks.tsx +++ b/src/utils/Theme/blocks/ColorBlocks.tsx @@ -7,6 +7,20 @@ export interface ColorBlockProps { className?: string; } +const COLOR_TOKENS = [ + 'white', + 'black', + 'neutrals', + 'blue', + 'green', + 'orange', + 'pink', + 'purple', + 'red', + 'teal', + 'yellow' +]; + export const ColorBlock: FC = ({ name, color, className }) => (
= ({ name, color, className, - showName = true + showName = true, + theme = 'dark' }) => { let fontColor = 'var(--body-color)'; if (!name.includes('overlay')) { @@ -80,10 +96,13 @@ export const ColorPaletteBlock: FC = ({ if (valid) { const colorInstance = isOklch ? chroma.oklch(oklchColor) : chroma(color); + const luminance = colorInstance.luminance(); + const alpha = colorInstance.alpha(); + const effectiveLuminance = + alpha * luminance + (1 - alpha) * (theme === 'light' ? 1 : 0); + fontColor = - colorInstance.luminance() >= 0.3 - ? colorInstance.darken(100).css() - : colorInstance.brighten(100).css(); + effectiveLuminance > 0.5 ? 'var(--color-black)' : 'var(--color-white)'; } } @@ -92,7 +111,8 @@ export const ColorPaletteBlock: FC = ({ key={name} className={className} style={{ - borderRight: 'solid 1px var(--border-color)' + border: 'solid 1px var(--border-color)', + margin: '-0.5px' }} >
{ @@ -145,7 +166,8 @@ export const ColorPaletteBlocks: FC = ({ name, colors, className, - showNames = true + showNames = true, + theme }) => (
= ({ marginBottom: '24px' }} > -

{name}

+

+ {name} +

{typeof colors === 'string' && ( @@ -174,6 +198,7 @@ export const ColorPaletteBlocks: FC = ({ name={color.replace('--color-', '')} color={colors[color]} showName={showNames} + theme={theme} /> ))} @@ -185,7 +210,13 @@ export const ColorPaletteBlocks: FC = ({
); -export const ColorBlocks = ({ colors }: { colors: Record }) => { +export const ColorBlocks = ({ + colors, + theme +}: { + colors: Record; + theme: string; +}) => { const groupedColors = useMemo((): Record> => { const groups = Object.keys(colors).reduce( (acc, token) => { @@ -200,9 +231,26 @@ export const ColorBlocks = ({ colors }: { colors: Record }) => { {} as Record> ); - const sortedGroupNames = Object.keys(groups).sort( - (a, b) => Object.keys(groups[a]).length - Object.keys(groups[b]).length - ); + const sortedGroupNames = Object.keys(groups).sort((a, b) => { + const indexA = COLOR_TOKENS.indexOf(a); + const indexB = COLOR_TOKENS.indexOf(b); + + const aIsColor = indexA !== -1; + const bIsColor = indexB !== -1; + + // Both are colors → sort by token order + if (aIsColor && bIsColor) { + return indexA - indexB; + } + + // Only A is a color → A comes first + if (aIsColor) return -1; + + // Only B is a color → B comes first + if (bIsColor) return 1; + + return a.localeCompare(b); // both are non-color → sort alphabetically + }); return sortedGroupNames.reduce( (sorted, groupName) => { @@ -228,6 +276,7 @@ export const ColorBlocks = ({ colors }: { colors: Record }) => { key={key} name={extractColorName(key)} colors={groupedColors[key]} + theme={theme} /> ))} From d4f32fbdbedeb15f8cefbf4c5da8426d05448829 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 30 Jul 2025 16:03:32 +0300 Subject: [PATCH 002/139] Button theme updates --- src/elements/Button/Button.story.tsx | 233 ++++++++++++++----- src/elements/Button/Button.tsx | 13 +- src/elements/Button/ButtonGroup.story.tsx | 57 ++--- src/elements/Button/ButtonGroupContext.ts | 4 +- src/elements/Button/ButtonTheme.ts | 261 ++++++++-------------- src/utils/Theme/themes/theme.ts | 5 +- 6 files changed, 301 insertions(+), 272 deletions(-) diff --git a/src/elements/Button/Button.story.tsx b/src/elements/Button/Button.story.tsx index 5a8a76d51..a4b10f991 100644 --- a/src/elements/Button/Button.story.tsx +++ b/src/elements/Button/Button.story.tsx @@ -12,76 +12,193 @@ export default { }; export const Variants = () => ( -
- - - +
+ + + +
); export const Colors = () => ( -
- - - - - - - -
-); - -export const TextColors = () => ( -
- - + + +
Outlined
+ + + +
Text
+ - - - - -
); export const Disabled = () => ( -
- - - +
+
+ + + + +
+
+ + + + +
+
+ + + + +
); export const Sizes = () => (
- - - + + +
); export const FullWidth = () => ( -
- +
+
); @@ -124,17 +241,17 @@ export const CustomTheme = () => { const customTheme: PartialReablocksTheme = { components: { button: { - base: 'bg-lime-600 text-gray-300', + base: 'transition-colors text-neutrals-pure-white-dnt-900', sizes: { small: 'p-2', medium: 'p-3', large: 'p-4' }, colors: { - default: { - filled: 'bg-lime-600 hover:bg-lime-700', - outline: 'border-lime-600', - text: 'text-gray-300' + primary: { + filled: 'bg-green-ion-sprout-500 hover:bg-green-ion-sprout-700', + outline: 'border-green-ion-sprout-600', + text: 'text-neutrals-pure-white-dnt-900' } } } @@ -164,7 +281,8 @@ export const CustomColor = () => { button: { colors: { gradient: { - filled: 'bg-linear-to-r from-cyan-500 to-blue-500' + filled: + 'bg-linear-to-r from-blue-skybolt-a-500 to-blue-hyperstream-500' } } } @@ -186,12 +304,13 @@ export const CustomVariant = () => { gradient: 'border rounded-lg' }, colors: { - default: { - gradient: 'bg-linear-to-r from-cyan-500 to-blue-500 border-blue-500' - }, primary: { gradient: - 'bg-linear-to-r from-violet-500 to-fuchsia-500 border-violet-500' + 'bg-linear-to-r from-blue-skybolt-a-500 to-blue-hyperstream-500 border-blue-hyperstream-500' + }, + secondary: { + gradient: + 'bg-linear-to-r from-pink-plasma-circuit-500 to-purple-fuchsia-a-500 border-pink-plasma-circuit-500' } } } @@ -201,8 +320,10 @@ export const CustomVariant = () => { return (
- +
diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx index e37032d7b..4847bc884 100644 --- a/src/elements/Button/Button.tsx +++ b/src/elements/Button/Button.tsx @@ -13,19 +13,12 @@ export interface ButtonProps /** * Color variation of the button. */ - color?: - | 'default' - | 'primary' - | 'secondary' - | 'error' - | 'success' - | 'warning' - | string; + color?: 'primary' | 'secondary' | 'destructive' | string; /** * Style variant of the button. */ - variant?: 'filled' | 'outline' | 'text' | string; + variant?: 'filled' | 'outline' | 'text' | 'ghost' | string; /** * The size variation of the button. @@ -78,7 +71,7 @@ export interface ButtonRef { export const Button: FC = forwardRef( ( { - color = 'default', + color = 'primary', variant = 'filled', children, fullWidth, diff --git a/src/elements/Button/ButtonGroup.story.tsx b/src/elements/Button/ButtonGroup.story.tsx index b21666883..09ff8a734 100644 --- a/src/elements/Button/ButtonGroup.story.tsx +++ b/src/elements/Button/ButtonGroup.story.tsx @@ -49,6 +49,20 @@ export const Text = () => { ); }; +export const Ghost = () => { + return ( + <> + + + + + + + + + ); +}; + export const Single = () => { return ( <> @@ -65,6 +79,11 @@ export const Single = () => { +
+
+ + + ); }; @@ -88,43 +107,11 @@ export const Double = () => { - - ); -}; - -export const Colors = () => { - return ( - <> - - - - - - - - -

- - - - - - - - - -
-
- - - - - - - - + + + ); diff --git a/src/elements/Button/ButtonGroupContext.ts b/src/elements/Button/ButtonGroupContext.ts index a104d05fd..4028d23d0 100644 --- a/src/elements/Button/ButtonGroupContext.ts +++ b/src/elements/Button/ButtonGroupContext.ts @@ -1,10 +1,10 @@ -import { ReactNode, createContext } from 'react'; +import { createContext } from 'react'; export interface ButtonGroupContextProps { /** * Style variant of the buttons. */ - variant?: 'filled' | 'outline' | 'text'; + variant?: 'filled' | 'outline' | 'text' | 'ghost'; /** * The size variation of the buttons. diff --git a/src/elements/Button/ButtonTheme.ts b/src/elements/Button/ButtonTheme.ts index 703f4c9cf..45a75d91f 100644 --- a/src/elements/Button/ButtonTheme.ts +++ b/src/elements/Button/ButtonTheme.ts @@ -22,12 +22,6 @@ export interface ButtonTheme { [key: string]: string; }; colors: { - default: { - filled: string; - outline: string; - text: string; - [key: string]: string; - }; primary: { filled: string; outline: string; @@ -40,19 +34,7 @@ export interface ButtonTheme { text: string; [key: string]: string; }; - success: { - filled: string; - outline: string; - text: string; - [key: string]: string; - }; - warning: { - filled: string; - outline: string; - text: string; - [key: string]: string; - }; - error: { + destructive: { filled: string; outline: string; text: string; @@ -79,9 +61,16 @@ export interface ButtonTheme { }; } -const baseTheme: Partial = { - base: 'inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-1 rounded-xs font-sans cursor-pointer', - disabled: 'disabled:cursor-not-allowed', +export const buttonTheme: ButtonTheme = { + base: ` + inline-flex items-center justify-center px-2.5 py-1 rounded-xs font-sans + cursor-pointer text-text-primary font-semibold whitespace-nowrap + rounded-md font-semibold cursor-pointer select-none transition-colors [&_svg]:transition-all focus-visible:outline-none + `, + disabled: ` + disabled:opacity-40 disabled:cursor-not-allowed + data-[variant=filled]:disabled:bg-gray-600 disabled:text-gray-400 border-gray-500 + `, fullWidth: 'flex w-full', group: 'rounded-none first:rounded-s last:rounded-e border-s-0 first:border-s', @@ -89,165 +78,105 @@ const baseTheme: Partial = { 'border border-y-transparent border-l-transparent last:border-r-transparent hover:bg-initial', adornment: { base: 'flex', - start: 'pr-1', - end: 'pl-1', + start: 'pr-2', + end: 'pl-2', sizes: { - small: '[&>svg]:w-3 [&>svg]:h-3', - medium: '[&>svg]:w-4 [&>svg]:h-4', - large: '[&>svg]:w-5 [&>svg]:h-5' + small: '[&>svg]:size-4', + medium: '[&>svg]:size-4', + large: '[&>svg]:size-4.5' } }, sizes: { - small: 'text-sm px-2 py-1 leading-[normal]', - medium: 'text-base px-4 py-2 leading-[normal]', - large: 'text-xl px-5 py-2.5 leading-[normal]' + small: 'text-xs leading-4 px-2 py-[5px]', + medium: 'text-sm leading-4 px-3 py-[7px]', + large: 'text-base leading-4.5 px-4 py-2.5' }, iconSizes: { - small: 'px-2 py-1', - medium: 'px-4 py-2', - large: 'px-5 py-2.5' - } -}; - -export const buttonTheme: ButtonTheme = { - base: [baseTheme.base, 'text-text-primary font-semibold'].join(' '), - disabled: [ - baseTheme.disabled, - 'data-[variant=filled]:disabled:bg-gray-600 disabled:text-gray-400 border-gray-500' - ].join(' '), - fullWidth: baseTheme.fullWidth, - group: baseTheme.group, - groupText: baseTheme.groupText, - adornment: baseTheme.adornment, - sizes: baseTheme.sizes, - iconSizes: baseTheme.iconSizes, - variants: { - filled: - 'bg-secondary hover:bg-border-secondary-hover border-secondary light:text-gray-100', - outline: 'border-grey border', - text: 'border-0' - }, - colors: { - default: { - filled: 'bg-gray-800 hover:bg-gray-700 border-gray-800', - outline: 'border-secondary border', - text: 'text-text-primary' - }, - primary: { - filled: - 'bg-primary hover:bg-primary-hover border-primary text-text-primary', - outline: 'border border-primary', - text: 'text-primary hover:text-primary-hover' - }, - secondary: { - filled: 'bg-secondary hover:bg-secondary-hover text-text-primary!', - outline: 'border border-secondary', - text: 'text-secondary hover:text-secondary-hover' - }, - success: { - filled: - 'bg-success hover:bg-success-hover border-success text-text-primary', - outline: 'border border-success', - text: 'text-success hover:text-success-hover' - }, - warning: { - filled: - 'bg-warning hover:bg-warning-hover border-warning text-text-primary', - outline: 'border border-warning', - text: 'text-warning hover:text-warning-hover' - }, - error: { - filled: 'bg-error hover:bg-error-hover border-error text-text-primary', - outline: 'border border-error', - text: 'text-error hover:text-error-hover' - } - } -}; - -export const legacyButtonTheme: ButtonTheme = { - base: [ - baseTheme.base, - '[border:_var(--button-border)] rounded-[var(--button-border)] [font-family:_var(--button-font-family)] [font-weight:_var(--button-font-weight)]' - ].join(' '), - disabled: [ - baseTheme.disabled, - 'data-[variant=filled]:disabled:bg-[var(--disabled-background)] disabled:text-[var(--button-disabled-color-on-background)] border-[var(--disabled-background)]' - ].join(' '), - fullWidth: baseTheme.fullWidth, - group: baseTheme.group, - groupText: baseTheme.groupText, - sizes: { - small: '[font-size:_var(--font-size-sm)] p-[var(--button-spacing-sm)]', - medium: '[font-size:_var(--font-size-md)] p-[var(--button-spacing-md)]', - large: '[font-size:_var(--font-size-lg)] p-[var(--button-spacing-lg)]' - }, - iconSizes: { - small: '[font-size:_var(--font-size-sm)] p-[var(--button-spacing-sm)]', - medium: '[font-size:_var(--font-size-md)] p-[var(--button-spacing-md)]', - large: '[font-size:_var(--font-size-lg)] p-[var(--button-spacing-lg)]' - }, - adornment: { - ...baseTheme.adornment, - start: [ - baseTheme.adornment.start, - '[padding-right:_calc(var(--list-item-spacing)_/_2)]' - ].join(' '), - end: [ - baseTheme.adornment.start, - '[padding-left:_calc(var(--list-item-spacing)_/_2)]' - ].join(' '), - sizes: { - small: - '[&>svg]:w-[var(--button-adornment-size-sm)] [&>svg]:h-[var(--button-adornment-size-sm)]', - medium: - '[&>svg]:w-[var(--button-adornment-size-md)] [&>svg]:h-[var(--button-adornment-size-md)]', - large: - '[&>svg]:w-[var(--button-adornment-size-lg)] [&>svg]:h-[var(--button-adornment-size-lg)]' - } + xsmall: '[&>svg]:size-4 p-1', + small: '[&>svg]:size-4 p-[5px]', + medium: '[&>svg]:size-4 p-[7px]', + large: '[&>svg]:size-4.5 p-2.5' }, variants: { - filled: - 'bg-[var(--button-background)] text-[var(--button-color-on-background)] hover:bg-[var(--button-background-hover)] border-[var(--button-background)] hover:border-[var(--button-background-hover)]', - outline: - 'border-[var(--button-background)] hover:border-[var(--button-background-hover)] text-[var(--button-color)] hover:text-[var(--button-color-hover)] border', + filled: 'bg-secondary hover:bg-border-secondary-hover', + outline: 'border-grey border', text: 'border-0' }, colors: { - default: { - filled: - 'bg-[var(--button-background)] text-[var(--button-color-on-background)] hover:bg-[var(--button-background-hover)] border-[var(--button-background)] hover:border-[var(--button-background-hover)]', - outline: '', - text: 'text-[var(--button-color)] hover:text-[var(--button-color-hover)]' - }, primary: { - filled: - 'bg-[var(--primary-background)] hover:bg-[var(--primary-background-hover)] border-[var(--primary-background)] border-[var(--primary-background-hover)] text-[var(--button-color-on-background)]', - outline: '', - text: 'text-[var(--primary-color)] hover:text-[var(--primary-color-hover)]' + filled: ` + bg-buttons-colors-core-icon-primary-background-resting border-buttons-colors-core-icon-primary-stroke-resting text-buttons-colors-core-icon-primary-text-resting [&_svg]:fill-buttons-colors-core-icon-primary-assets-resting + hover:bg-buttons-colors-core-icon-primary-background-hover hover:border-buttons-colors-core-icon-primary-stroke-hover hover:text-buttons-colors-core-icon-primary-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-primary-assets-hover + focus-visible:bg-buttons-colors-core-icon-primary-background-selected focus-visible:border-buttons-colors-core-icon-primary-stroke-selected focus-visible:text-buttons-colors-core-icon-primary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-primary-assets-selected + disabled:bg-buttons-colors-core-icon-primary-background-resting disabled:border-buttons-colors-core-icon-primary-stroke-resting disabled:text-buttons-colors-core-icon-primary-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-primary-assets-resting + `, + outline: ` + bg-buttons-colors-core-icon-outline-background-resting border-buttons-colors-core-icon-outline-stroke-resting text-buttons-colors-core-icon-outline-text-resting [&_svg]:fill-buttons-colors-core-icon-outline-assets-resting + hover:bg-buttons-colors-core-icon-outline-background-hover hover:border-buttons-colors-core-icon-outline-stroke-hover hover:text-buttons-colors-core-icon-outline-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-outline-assets-hover + focus-visible:bg-buttons-colors-core-icon-outline-background-selected focus-visible:border-buttons-colors-core-icon-outline-stroke-selected focus-visible:text-buttons-colors-core-icon-outline-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-outline-assets-selected + disabled:bg-buttons-colors-core-icon-outline-background-resting disabled:border-buttons-colors-core-icon-outline-stroke-resting disabled:text-buttons-colors-core-icon-outline-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-outline-assets-resting + `, + text: ` + text-buttons-colors-link-primary-text-resting hover:text-buttons-colors-link-primary-text-hover focus-visible:text-buttons-colors-link-primary-text-selected + [&_svg]:fill-buttons-colors-link-primary-assets-resting hover:[&_svg]:fill-buttons-colors-link-primary-assets-hover focus-visible:[&_svg]:fill-buttons-colors-link-primary-assets-selected + disabled:text-buttons-colors-link-primary-text-resting disabled:[&_svg]:fill-buttons-colors-link-primary-assets-resting + `, + ghost: ` + bg-buttons-colors-core-icon-ghost-background-resting border-buttons-colors-core-icon-ghost-stroke-resting text-buttons-colors-core-icon-ghost-text-resting [&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting + hover:bg-buttons-colors-core-icon-ghost-background-hover hover:border-buttons-colors-core-icon-ghost-stroke-hover hover:text-buttons-colors-core-icon-ghost-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-hover + focus-visible:bg-buttons-colors-core-icon-ghost-background-selected focus-visible:border-buttons-colors-core-icon-ghost-stroke-selected focus-visible:text-buttons-colors-core-icon-ghost-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-selected + disabled:bg-buttons-colors-core-icon-ghost-background-resting disabled:border-buttons-colors-core-icon-ghost-stroke-resting disabled:text-buttons-colors-core-icon-ghost-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting + ` }, secondary: { - filled: - 'bg-[var(--secondary-background)] hover:bg-[var(--secondary-background-hover)] border-[var(--secondary-background)] hover:border-[var(--secondary-background-hover)] text-[var(--button-color-on-background)]', - outline: '', - text: 'text-[var(--secondary-color)] hover:text-[var(--secondary-color-hover)]' - }, - success: { - filled: - 'bg-[var(--success-background)] hover:bg-[var(--success-background-hover)] border-[var(--success-background)] hover:border-[var(--success-background-hover)] text-[var(--button-color-on-background)]', - outline: '', - text: 'text-[var(--success-color)] hover:text-[var(--success-color-hover)]' - }, - warning: { - filled: - 'bg-[var(--warning-background)] hover:bg-[var(--warning-background-hover)] border-[var(--warning-background)] hover:border-[var(--warning-background-hover)] text-[var(--button-color-on-background)]', - outline: '', - text: 'text-[var(--warning-color)] hover:text-[var(--warning-color-hover)]' + filled: ` + bg-buttons-colors-core-icon-secondary-background-resting border-buttons-colors-core-icon-secondary-stroke-resting text-buttons-colors-core-icon-secondary-text-resting [&_svg]:fill-buttons-colors-core-icon-secondary-assets-resting + hover:bg-buttons-colors-core-icon-secondary-background-hover hover:border-buttons-colors-core-icon-secondary-stroke-hover hover:text-buttons-colors-core-icon-secondary-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-hover + focus-visible:bg-buttons-colors-core-icon-secondary-background-selected focus-visible:border-buttons-colors-core-icon-secondary-stroke-selected focus-visible:text-buttons-colors-core-icon-secondary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-selected + disabled:bg-buttons-colors-core-icon-secondary-background-resting disabled:border-buttons-colors-core-icon-secondary-stroke-resting disabled:text-buttons-colors-core-icon-secondary-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-resting + `, + outline: ` + border-buttons-colors-core-icon-secondary-background-resting text-buttons-colors-core-icon-secondary-text-resting [&_svg]:fill-buttons-colors-core-icon-secondary-assets-resting + hover:border-buttons-colors-core-icon-secondary-background-hover hover:text-buttons-colors-core-icon-secondary-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-hover + focus-visible:border-buttons-colors-core-icon-secondary-background-selected focus-visible:text-buttons-colors-core-icon-secondary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-selected + disabled:border-buttons-colors-core-icon-secondary-background-resting disabled:text-buttons-colors-core-icon-secondary-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-resting + `, + text: ` + text-buttons-colors-link-secondary-text-resting hover:text-buttons-colors-link-secondary-text-hover focus-visible:text-buttons-colors-link-secondary-text-selected + [&_svg]:fill-buttons-colors-link-secondary-assets-resting hover:[&_svg]:fill-buttons-colors-link-secondary-assets-hover focus-visible:[&_svg]:fill-buttons-colors-link-secondary-assets-selected + disabled:text-buttons-colors-link-secondary-text-resting disabled:[&_svg]:fill-buttons-colors-link-secondary-assets-resting + `, + ghost: ` + bg-buttons-colors-core-icon-ghost-background-resting border-buttons-colors-core-icon-ghost-stroke-resting text-buttons-colors-core-icon-ghost-text-resting [&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting + hover:bg-buttons-colors-core-icon-secondary-background-hover hover:border-buttons-colors-core-icon-ghost-stroke-hover hover:text-buttons-colors-core-icon-secondary-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-hover + focus-visible:bg-buttons-colors-core-icon-ghost-background-selected focus-visible:border-buttons-colors-core-icon-ghost-stroke-selected focus-visible:-buttons-colors-core-icon-secondary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-selected + disabled:bg-buttons-colors-core-icon-ghost-background-resting disabled:border-buttons-colors-core-icon-ghost-stroke-resting disabled:text-buttons-colors-core-icon-secondary-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting + ` }, - error: { - filled: - 'bg-[var(--error-background)] hover:bg-[var(--error-background-hover)] border-[var(--error-background)] hover:border-[var(--error-background-hover)] text-[var(--button-color-on-background)]', - outline: '', - text: 'text-[var(--error-color)] hover:text-[var(--warning-error-hover)]' + destructive: { + filled: ` + bg-buttons-colors-core-icon-destructive-background-resting border-buttons-colors-core-icon-destructive-stroke-resting text-buttons-colors-core-icon-destructive-text-resting [&_svg]:fill-buttons-colors-core-icon-destructive-assets-resting + hover:bg-buttons-colors-core-icon-destructive-background-hover hover:border-buttons-colors-core-icon-destructive-stroke-hover hover:text-buttons-colors-core-icon-destructive-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-destructive-assets-hover + focus-visible:bg-buttons-colors-core-icon-destructive-background-selected focus-visible:border-buttons-colors-core-icon-destructive-stroke-selected focus-visible:text-buttons-colors-core-icon-primary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-destructive-assets-selected + disabled:bg-buttons-colors-core-icon-destructive-background-resting disabled:border-buttons-colors-core-icon-destructive-stroke-resting disabled:text-buttons-colors-core-icon-destructive-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-destructive-assets-resting + `, + outline: ` + border-buttons-colors-core-icon-destructive-stroke-resting text-buttons-colors-link-destructive-text-resting [&_svg]:fill-buttons-colors-link-destructive-assets-resting + hover:border-buttons-colors-core-icon-destructive-stroke-hover hover:text-buttons-colors-link-destructive-text-hover hover:[&_svg]:fill-buttons-colors-link-destructive-assets-hover + focus-visible:border-buttons-colors-core-icon-destructive-stroke-selected focus-visible:text-buttons-colors-link-destructive-text-selected focus-visible:[&_svg]:fill-buttons-colors-link-destructive-assets-selected + disabled:border-buttons-colors-core-icon-destructive-stroke-resting disabled:text-buttons-colors-link-destructive-text-resting disabled:[&_svg]:fill-buttons-colors-link-destructive-assets-resting + `, + text: ` + text-buttons-colors-link-destructive-text-resting hover:text-buttons-colors-link-destructive-text-hover focus-visible:text-buttons-colors-link-destructive-text-selected + [&_svg]:fill-buttons-colors-link-destructive-assets-resting hover:[&_svg]:fill-buttons-colors-link-destructive-assets-hover focus-visible:[&_svg]:fill-buttons-colors-link-destructive-assets-selected + disabled:text-buttons-colors-link-destructive-text-resting disabled:[&_svg]:fill-buttons-colors-link-destructive-assets-resting + `, + ghost: ` + bg-buttons-colors-core-icon-ghost-background-resting border-buttons-colors-core-icon-ghost-stroke-resting text-buttons-colors-core-icon-ghost-text-resting [&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting + hover:bg-buttons-colors-core-icon-destructive-background-hover hover:border-buttons-colors-core-icon-ghost-stroke-hover hover:text-buttons-colors-core-icon-ghost-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-hover + focus-visible:bg-buttons-colors-core-icon-ghost-background-selected focus-visible:border-buttons-colors-core-icon-ghost-stroke-selected focus-visible:text-buttons-colors-core-icon-ghost-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-selected + disabled:bg-buttons-colors-core-icon-ghost-background-resting disabled:border-buttons-colors-core-icon-ghost-stroke-resting disabled:text-buttons-colors-core-icon-ghost-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting + ` } } }; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index fedc5fffb..45295bc6f 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -21,7 +21,6 @@ import { legacyAvatarGroupTheme, legacyArrowTheme, legacyBadgeTheme, - legacyButtonTheme, legacyChipTheme, legacyLoaderTheme, legacyKbdTheme, @@ -153,6 +152,7 @@ import { legacyRedactTheme, legacyPagerTheme } from '@/data'; +import { DeepPartial } from 'react-hook-form'; export interface ReablocksTheme { components: { @@ -256,13 +256,12 @@ export const theme: ReablocksTheme = { } }; -export const legacyThemeVars: ReablocksTheme = { +export const legacyThemeVars: DeepPartial = { components: { avatar: legacyAvatarTheme, avatarGroup: legacyAvatarGroupTheme, arrow: legacyArrowTheme, badge: legacyBadgeTheme, - button: legacyButtonTheme, block: legacyBlockTheme, chip: legacyChipTheme, contextMenu: legacyContextMenuTheme, From 974d3ce772fb06d4e80a71d9b367d9c3c070396b Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 30 Jul 2025 16:25:20 +0300 Subject: [PATCH 003/139] IconButton stories updates --- src/elements/IconButton/IconButton.story.tsx | 90 ++++++++++---------- 1 file changed, 47 insertions(+), 43 deletions(-) diff --git a/src/elements/IconButton/IconButton.story.tsx b/src/elements/IconButton/IconButton.story.tsx index e75e11727..d4abb5ad7 100644 --- a/src/elements/IconButton/IconButton.story.tsx +++ b/src/elements/IconButton/IconButton.story.tsx @@ -24,6 +24,23 @@ const BellIcon = () => ( ); +export const Variants = () => ( +
+ + + + + + + + + + + + +
+); + export const Sizes = () => ( @@ -38,102 +55,89 @@ export const Sizes = () => ( ); -export const ColorsBackground = () => ( +export const ColorsFilled = () => (
- - - - + - +
+); + +export const ColorsOutline = () => ( +
+ - + - +
); -export const ColorsIcons = () => ( +export const ColorsText = () => (
- - - - - - - - - - - - - +
); -export const ColorsOutline = () => ( +export const ColorsGhost = () => (
- - - - + - - - - - - - - - - + - +
); -export const Variants = () => ( +export const Disabled = () => (
- + - + - + + + +
); -export const Square = () => { +export const Custom = () => { const iconTheme: PartialReablocksTheme = { components: { button: { + colors: { + primary: { + filled: + 'bg-pink-plasma-circuit-400 hover:bg-pink-plasma-circuit-600' + } + }, iconSizes: { small: 'p-1', medium: 'p-2', From a789b9a9db4e6653ad765b812a40a6a6175d99b4 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 30 Jul 2025 16:37:43 +0300 Subject: [PATCH 004/139] Avatar theme updates --- src/elements/Avatar/AvatarTheme.ts | 23 ++++++++--------------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/src/elements/Avatar/AvatarTheme.ts b/src/elements/Avatar/AvatarTheme.ts index d57a44d1b..545c69bea 100644 --- a/src/elements/Avatar/AvatarTheme.ts +++ b/src/elements/Avatar/AvatarTheme.ts @@ -3,20 +3,13 @@ export interface AvatarTheme { rounded: string; } -const baseTheme: AvatarTheme = { - base: 'flex justify-center items-center bg-cover bg-center font-bold', - rounded: 'rounded-[50%]' -}; - export const avatarTheme: AvatarTheme = { - ...baseTheme, - base: [baseTheme.base, 'text-white'].join(' ') -}; - -export const legacyAvatarTheme: AvatarTheme = { - ...baseTheme, - base: [ - baseTheme.base, - 'text-[var(--avatar-initials-color)] [border:_var(--avatar-border)]' - ].join(' ') + base: ` + relative flex justify-center items-center bg-cover bg-center font-bold transition-colors + after:absolute after:inset-0 after:border + bg-avatar-colors-background-container-resting + after:border-avatar-colors-stroke-container-resting + hover:bg-avatar-colors-background-container-hover hover:after:border-avatar-colors-stroke-container-hover + `, + rounded: 'rounded-full after:rounded-full' }; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 45295bc6f..cd5134010 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -17,7 +17,6 @@ import { arrowTheme, chipTheme, ChipTheme, - legacyAvatarTheme, legacyAvatarGroupTheme, legacyArrowTheme, legacyBadgeTheme, @@ -258,7 +257,6 @@ export const theme: ReablocksTheme = { export const legacyThemeVars: DeepPartial = { components: { - avatar: legacyAvatarTheme, avatarGroup: legacyAvatarGroupTheme, arrow: legacyArrowTheme, badge: legacyBadgeTheme, From 986b8d4f8ebc01f8e737ecaa04223f2848eace04 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 30 Jul 2025 17:03:51 +0300 Subject: [PATCH 005/139] AvatarGroup theme updates --- src/elements/Avatar/Avatar.story.tsx | 9 +++++++++ src/elements/Avatar/Avatar.tsx | 7 ++++++- src/elements/Avatar/AvatarTheme.ts | 4 +++- src/elements/AvatarGroup/AvatarGroupTheme.ts | 17 ++--------------- src/utils/Theme/themes/theme.ts | 2 -- 5 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/elements/Avatar/Avatar.story.tsx b/src/elements/Avatar/Avatar.story.tsx index 42ece4132..0268772e7 100644 --- a/src/elements/Avatar/Avatar.story.tsx +++ b/src/elements/Avatar/Avatar.story.tsx @@ -40,6 +40,15 @@ export const LargeRounded: StoryObj = { } }; +export const Clickable: StoryObj = { + args: { + name: 'Charlie', + size: 50, + rounded: true, + onClick: () => null + } +}; + export const MultipleAvatars: StoryObj = { render: args => (
diff --git a/src/elements/Avatar/Avatar.tsx b/src/elements/Avatar/Avatar.tsx index 1e2e89992..a5dacc2c0 100644 --- a/src/elements/Avatar/Avatar.tsx +++ b/src/elements/Avatar/Avatar.tsx @@ -98,7 +98,12 @@ export const Avatar: FC & AvatarRef = forwardRef< return (
= { components: { - avatarGroup: legacyAvatarGroupTheme, arrow: legacyArrowTheme, badge: legacyBadgeTheme, block: legacyBlockTheme, From c44e60e222c56014ca363e1a6e7dee71e791097a Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 30 Jul 2025 17:13:37 +0300 Subject: [PATCH 006/139] Block theme updates --- src/layout/Block/BlockTheme.ts | 38 ++++++--------------------------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 7 insertions(+), 33 deletions(-) diff --git a/src/layout/Block/BlockTheme.ts b/src/layout/Block/BlockTheme.ts index 141b27a7a..fe1368f36 100644 --- a/src/layout/Block/BlockTheme.ts +++ b/src/layout/Block/BlockTheme.ts @@ -14,43 +14,19 @@ export interface BlockTheme { }; } -const baseTheme: BlockTheme = { - base: 'mb-2.5', - disableMargin: 'mb-0', - label: 'text-sm', +export const blockTheme: BlockTheme = { + base: '', + disableMargin: 'm-0', + label: + 'text-sm leading-none font-semibold text-inputs-colors-normal-text-label-resting', centerAlign: 'items-center', endAlign: 'items-end', horizontal: { base: 'flex flex-row items-baseline', - label: 'mr-0.5 whitespace-nowrap' + label: 'mr-2 whitespace-nowrap' }, vertical: { base: 'block', - label: 'block mb-0.5' - } -}; - -export const blockTheme: BlockTheme = { - ...baseTheme -}; - -export const legacyBlockTheme: BlockTheme = { - ...baseTheme, - base: 'mb-[var(--block-spacing)]', - label: [ - baseTheme.label, - '[font-size:_var(--block-label-size)] [font-weight:_var(--block-label-weight)]' - ].join(' '), - horizontal: { - ...baseTheme.horizontal, - label: [baseTheme.horizontal.label, 'mr-[var(--block-label-spacing)]'].join( - ' ' - ) - }, - vertical: { - ...baseTheme.vertical, - label: [baseTheme.vertical.label, 'mb-[var(--block-label-spacing)]'].join( - ' ' - ) + label: 'block mb-2' } }; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 624b95de7..a57904add 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -99,7 +99,6 @@ import { TabsTheme, tabsTheme, TreeTheme, - legacyBlockTheme, legacyListTheme, verticalSpacerTheme, VerticalSpacerTheme, @@ -258,7 +257,6 @@ export const legacyThemeVars: DeepPartial = { components: { arrow: legacyArrowTheme, badge: legacyBadgeTheme, - block: legacyBlockTheme, chip: legacyChipTheme, contextMenu: legacyContextMenuTheme, checkbox: legacyCheckboxTheme, From e86c73e4894d87ef518ff0e8c8dc42c65a3ddb0d Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 30 Jul 2025 17:39:04 +0300 Subject: [PATCH 007/139] Avatar background update --- src/elements/Avatar/Avatar.story.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/elements/Avatar/Avatar.story.tsx b/src/elements/Avatar/Avatar.story.tsx index 0268772e7..427aaa02c 100644 --- a/src/elements/Avatar/Avatar.story.tsx +++ b/src/elements/Avatar/Avatar.story.tsx @@ -4,7 +4,10 @@ import { Avatar } from './Avatar'; export default { title: 'Components/Elements/Avatar', - component: Avatar + component: Avatar, + args: { + color: 'bg-avatar-colors-background-container-resting' + } } satisfies Meta; export const Simple: StoryObj = { From af9ec411b66522059f01b649e128b64d72d0667a Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Mon, 4 Aug 2025 13:47:53 +0300 Subject: [PATCH 008/139] Remove old tokens --- src/elements/Button/ButtonTheme.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/elements/Button/ButtonTheme.ts b/src/elements/Button/ButtonTheme.ts index 45a75d91f..78136fb8d 100644 --- a/src/elements/Button/ButtonTheme.ts +++ b/src/elements/Button/ButtonTheme.ts @@ -64,12 +64,11 @@ export interface ButtonTheme { export const buttonTheme: ButtonTheme = { base: ` inline-flex items-center justify-center px-2.5 py-1 rounded-xs font-sans - cursor-pointer text-text-primary font-semibold whitespace-nowrap + cursor-pointerfont-semibold whitespace-nowrap rounded-md font-semibold cursor-pointer select-none transition-colors [&_svg]:transition-all focus-visible:outline-none `, disabled: ` disabled:opacity-40 disabled:cursor-not-allowed - data-[variant=filled]:disabled:bg-gray-600 disabled:text-gray-400 border-gray-500 `, fullWidth: 'flex w-full', group: @@ -99,7 +98,7 @@ export const buttonTheme: ButtonTheme = { }, variants: { filled: 'bg-secondary hover:bg-border-secondary-hover', - outline: 'border-grey border', + outline: 'border', text: 'border-0' }, colors: { From 828bf1918ecc79a220b3860e94b2bdbd97e9bef9 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Mon, 4 Aug 2025 13:58:14 +0300 Subject: [PATCH 009/139] Checkbox theme updates --- src/form/Checkbox/CheckboxTheme.ts | 124 +++++++---------------------- src/utils/Theme/themes/theme.ts | 2 - 2 files changed, 27 insertions(+), 99 deletions(-) diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts index a9bd5217d..0e2fe43be 100644 --- a/src/form/Checkbox/CheckboxTheme.ts +++ b/src/form/Checkbox/CheckboxTheme.ts @@ -53,13 +53,16 @@ export interface CheckboxTheme { }; } -const baseTheme: Partial = { +export const checkboxTheme: CheckboxTheme = { base: 'inline-flex items-center w-full group', label: { - base: 'dark:text-gray-400 light:text-gray-700 ml-2.5 w-full', - checked: 'checked dark:text-gray-100 light:text-gray-900', - disabled: 'cursor-not-allowed dark:text-gray-600 light:text-gray-400', - clickable: 'cursor-pointer', + base: 'ml-3 w-full text-selectors-colors-text-description-not-selected whitespace-nowrap', + checked: 'checked text-selectors-colors-text-description-selected', + disabled: 'cursor-not-allowed opacity-40', + clickable: ` + cursor-pointer transition-colors + group-hover:text-selectors-colors-text-label-selected group-focus-within:text-selectors-colors-text-label-selected + `, sizes: { small: 'text-sm', medium: 'text-base', @@ -67,105 +70,32 @@ const baseTheme: Partial = { } }, check: { - base: 'stroke-white', + base: 'stroke-selectors-colors-checkbox-selected-assets-base group-hover:selectors-colors-checkbox-selected-assets-hover', checked: '', disabled: 'cursor-not-allowed' }, border: { - base: 'stroke-gray-400 light:stroke-gray-700', - checked: 'stroke-blue-500', - disabled: 'cursor-not-allowed stroke-gray-500' + base: '', + checked: '', + disabled: 'cursor-not-allowed' }, checkbox: { - base: 'fill-transparent flex items-center justify-center cursor-pointer focus-visible:outline-hidden', - checked: 'fill-blue-500 checked', - disabled: 'fill-transparent disabled' + base: ` + flex items-center justify-center cursor-pointer rounded border transition-colors focus-visible:outline-none + bg-selectors-colors-checkbox-not-selected-background-resting group-hover:bg-selectors-colors-checkbox-not-selected-background-hover group-focus-within:bg-selectors-colors-checkbox-not-selected-background-hover + border-selectors-colors-checkbox-not-selected-stroke-resting group-hover:border-selectors-colors-checkbox-not-selected-stroke-hover group-focus-within:border-selectors-colors-checkbox-not-selected-stroke-hover + [&>svg>path:first-child]:stroke-transparent [&>svg]:fill-transparent [&>svg]:outline-none + `, + checked: ` + bg-selectors-colors-checkbox-selected-background-resting group-hover:bg-selectors-colors-checkbox-selected-background-hover group-focus-within:bg-selectors-colors-checkbox-selected-background-hover + border-selectors-colors-checkbox-selected-stroke-resting group-hover:border-selectors-colors-checkbox-selected-stroke-hover group-focus-within:border-selectors-colors-checkbox-selected-stroke-hover + `, + disabled: + 'disabled cursor-not-allowed opacity-40 group-hover:bg-selectors-colors-checkbox-selected-resting' }, sizes: { - small: '[&>svg]:w-3 [&>svg]:h-3', - medium: '[&>svg]:w-4 [&>svg]:h-4', - large: '[&>svg]:w-5 [&>svg]:h-5' - } -}; -export const checkboxTheme: CheckboxTheme = { - ...baseTheme, - checkbox: { - ...baseTheme.checkbox, - base: [ - baseTheme.checkbox.base, - 'border border-surface', - '[&.checked.disabled]:fill-gray-400' - ].join(' '), - checked: [ - baseTheme.checkbox.checked, - 'group-hover:fill-blue-400', - 'light:group-hover:fill-blue-600', - 'light:group-hover:[&.disabled]:fill-gray-400' - ].join(' '), - disabled: [ - baseTheme.checkbox.disabled, - 'group-hover:transparent', - 'light:group-hover:transparent' - ].join(' ') - }, - check: { - ...baseTheme.check, - base: [ - baseTheme.check.base, - 'group-hover:stroke-black light:group-hover:stroke-white' - ].join(' '), - disabled: [ - baseTheme.check.disabled, - 'stroke-black light:stroke-white group-hover:stroke-black ' - ].join(' ') - }, - border: { - ...baseTheme.border, - base: [ - baseTheme.border.base, - 'dark:group-hover:stroke-blue-300', - 'light:group-hover:stroke-blue-600' - ].join(' '), - disabled: [ - baseTheme.border.disabled, - 'dark:group-hover:stroke-gray-500', - 'light:group-hover:stroke-gray-400' - ].join(' ') - }, - label: { - ...baseTheme.label, - base: [ - baseTheme.label.base, - 'text-text-primary dark:group-hover:text-blue-300 light:group-hover:text-blue-400' - ].join(' '), - checked: [baseTheme.label.checked, 'group-hover:text-gray-100'].join(' '), - disabled: [ - baseTheme.label.disabled, - 'light:group-hover:text-gray-400', - 'dark:group-hover:text-gray-600' - ].join(' ') - }, - boxVariants: { - hover: { - strokeWidth: 1 - }, - pressed: { scale: 0.95 } - } -} as CheckboxTheme; - -export const legacyCheckboxTheme: CheckboxTheme = { - ...baseTheme, - checkbox: { base: [baseTheme.checkbox, 'fill-transparent'].join(' ') }, - check: { - base: [baseTheme.check.base, 'stroke-[var(--checkbox-check-stroke)]'].join( - ' ' - ) - }, - label: { - ...baseTheme.label, - base: [ - baseTheme.label.base, - 'text-[var(--checkbox-label-color)] ml-[var(--spacing-md)]' - ].join(' ') + small: '[&>svg]:size-3', + medium: '[&>svg]:size-4', + large: '[&>svg]:size-4' } } as CheckboxTheme; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index a57904add..296ecc04d 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -44,7 +44,6 @@ import { calendarTheme, CalendarRangeTheme, calendarRangeTheme, - legacyCheckboxTheme, legacySelectTheme, legacyInputTheme, legacyCalendarTheme, @@ -259,7 +258,6 @@ export const legacyThemeVars: DeepPartial = { badge: legacyBadgeTheme, chip: legacyChipTheme, contextMenu: legacyContextMenuTheme, - checkbox: legacyCheckboxTheme, dateFormat: legacyDateFormatTheme, dialog: legacyDialogTheme, divider: legacyDividerTheme, From 9b5b8791b43051daac50f47c7917948696f3cce0 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Mon, 4 Aug 2025 14:14:09 +0300 Subject: [PATCH 010/139] Dialog theme updates --- src/layers/Dialog/Dialog.story.tsx | 5 ++-- src/layers/Dialog/DialogTheme.tsx | 42 +++++++++--------------------- src/utils/Theme/themes/theme.ts | 2 -- 3 files changed, 16 insertions(+), 33 deletions(-) diff --git a/src/layers/Dialog/Dialog.story.tsx b/src/layers/Dialog/Dialog.story.tsx index d9ad8d5b1..90a797f83 100644 --- a/src/layers/Dialog/Dialog.story.tsx +++ b/src/layers/Dialog/Dialog.story.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react'; -import { MotionProps } from 'motion/react'; import { Dialog } from './Dialog'; import { useDialog } from './useDialog'; import { Button } from '../../elements'; @@ -101,7 +100,9 @@ export const ConfirmDialog = () => { header="Whats up" footer={ - + } diff --git a/src/layers/Dialog/DialogTheme.tsx b/src/layers/Dialog/DialogTheme.tsx index 8606ef049..0fffd9b58 100644 --- a/src/layers/Dialog/DialogTheme.tsx +++ b/src/layers/Dialog/DialogTheme.tsx @@ -10,36 +10,20 @@ export interface DialogTheme { }; } -const baseTheme: DialogTheme = { - base: 'justify-center items-center flex pointer-events-none top-0 left-0 w-full h-full fixed will-change-transform will-change-opacity', - inner: - 'flex flex-col box-border outline-0 pointer-events-auto overflow-auto max-w-[80vw] max-h-[80vh]', - content: 'p-[20px] flex-auto overflow-auto', - footer: 'flex p-[20px] pb-[10px]', - header: { - base: 'flex justify-between pt-[20px] px-[20px] pb-[10px]', - text: 'flex-1 m-0 p-0 inline-flex text-3xl font-bold', - closeButton: - 'p-0 m-0 ml-[15px] opacity-80 h-auto w-auto inline-flex bg-none border-none cursor-pointer items-center text-[16px] focus:outline-hidden' - } -}; - export const dialogTheme: DialogTheme = { - ...baseTheme, - inner: [ - baseTheme.inner, - 'bg-panel text-text-primary border border-panel-accent rounded-sm shadow-2xl' - ].join(' '), + base: 'justify-center items-center flex pointer-events-none top-0 left-0 size-full fixed', + inner: ` + flex flex-col box-border outline-0 pointer-events-auto overflow-auto max-w-[80vw] max-h-[80vh] rounded-xl border backdrop-blur-lg + border-calendar-colors-container-stroke-default bg-calendar-colors-container-background-default + `, + content: 'p-4 flex-auto overflow-auto text-content-text-on-color-light-dark', + footer: 'flex flex-row-reverse gap-2 p-4', header: { - ...baseTheme.header, - closeButton: [baseTheme.header.closeButton, 'text-text-primary'].join(' ') + base: 'flex justify-between p-4', + text: 'flex-1 m-0 p-0 inline-flex text-xl leading-6 font-bold text-content-text-on-color-light-dark', + closeButton: ` + p-0 m-0 ml-[15px] size-auto inline-flex bg-none border-none cursor-pointer items-center text-[16px] focus:outline-hidden + text-color-content-assets-neutral-base + ` } }; - -export const legacyDialogTheme: DialogTheme = { - ...baseTheme, - inner: [ - baseTheme.inner, - 'bg-[var(--dialog-background)] text-[var(--dialog-color)]' - ].join(' ') -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 296ecc04d..7b1681271 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -60,7 +60,6 @@ import { import { ContextMenuTheme, legacyContextMenuTheme, - legacyDialogTheme, legacyDrawerTheme, legacyMenuTheme, legacyNotificationTheme, @@ -259,7 +258,6 @@ export const legacyThemeVars: DeepPartial = { chip: legacyChipTheme, contextMenu: legacyContextMenuTheme, dateFormat: legacyDateFormatTheme, - dialog: legacyDialogTheme, divider: legacyDividerTheme, dotsLoader: legacyLoaderTheme, drawer: legacyDrawerTheme, From 24239c72c113cfe1b34778bba3f8d799377a1bea Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Mon, 4 Aug 2025 14:50:01 +0300 Subject: [PATCH 011/139] Input and Textarea theme updates --- src/form/Input/InputTheme.ts | 89 +++++++++--------------------- src/form/Textarea/TextareaTheme.ts | 60 +++++++------------- src/utils/Theme/themes/theme.ts | 4 -- 3 files changed, 44 insertions(+), 109 deletions(-) diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts index ad7c3d7f8..b45d24597 100644 --- a/src/form/Input/InputTheme.ts +++ b/src/form/Input/InputTheme.ts @@ -19,74 +19,35 @@ export interface InputTheme { }; } -const baseTheme: InputTheme = { - base: 'flex relative flex-row items-center flex-nowrap box-border transition-colors rounded-xs', - focused: '', - input: - 'flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-hidden px-0.5 disabled:cursor-not-allowed disabled:text-disabled', +export const inputTheme: InputTheme = { + base: 'group flex relative flex-row items-center flex-nowrap transition-colors rounded-md border border-inputs-colors-normal-stroke-resting hover:border-inputs-colors-normal-stroke-hover', + focused: + 'border-inputs-colors-normal-stroke-selected bg-inputs-colors-normal-background-selected [&_svg]:fill-inputs-colors-normal-assets-input-selected!', + input: ` + flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-hidden disabled:cursor-not-allowed disabled:text-disabled transition-colors + placeholder:text-inputs-colors-normal-text-input-text-resting focus:placeholder:text-inputs-colors-normal-text-input-text-selected + `, inline: 'bg-transparent border-0 outline-hidden', - disabled: 'text-waterloo cursor-not-allowed', + disabled: 'cursor-not-allowed', fullWidth: 'w-full', - error: 'border-error', + error: ` + border-inputs-colors-error-stroke-resting bg-inputs-colors-error-background-resting [&>input]:text-inputs-colors-error-text-input-filled [&>input]:placeholder:text-inputs-colors-error-text-input-text-resting + hover:border-inputs-colors-error-stroke-hover hover:bg-inputs-colors-error-background-hover + focus-within:border-inputs-colors-error-stroke-selected focus-within:bg-inputs-colors-error-background-selected + `, sizes: { - small: '[&>input]:text-sm p-1 text-sm', - medium: '[&>input]:text-base px-2.5 py-1.5 text-base', - large: '[&>input]:text-lg p-5 text-lg' + small: + '[&>input]:text-xs [&>input]:leading-4 [&_svg]:size-4 px-2 py-[5px] gap-2', + medium: + '[&>input]:text-xs [&>input]:leading-4 [&_svg]:size-4 px-3 py-[7px] gap-2', + large: '[&>input]:text-small [&_svg]:size-4.5 px-3 py-[7px] gap-2' }, adornment: { - base: 'flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4 [&>svg]:current-color', - start: 'pr-1.5', - end: 'pl-1.5' - } -}; - -export const inputTheme: InputTheme = { - ...baseTheme, - base: [ - baseTheme.base, - 'bg-panel border border-panel-accent text-text-primary hover:border-panel-accent light:hover:border-panel-accent', - 'hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)]', - 'hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-2 hover:after:rounded-sm hover:after:-bottom-[1px] hover:after:inset-x-0.5' - ].join(' '), - focused: [ - baseTheme.focused, - 'focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)]', - 'focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-2 focus-within:after:rounded-sm focus-within:after:-bottom-[1px] focus-within:after:inset-x-0.5' - ].join(' '), - input: [baseTheme.input, 'placeholder-accent'].join(' '), - disabled: [ - baseTheme.disabled, - 'disabled-within:bg-dark-disabled disabled-within:after:content-none' - ].join(' '), - adornment: { - ...baseTheme.adornment, - base: [baseTheme.adornment.base, 'text-text-primary'].join(' ') + base: ` + flex items-center justify-center transition-colors + [&>svg]:fill-inputs-colors-normal-assets-input-resting group-hover:[&>svg]:fill-inputs-colors-normal-assets-input-hover + `, + start: '', + end: '' } }; - -export const legacyInputTheme: InputTheme = { - ...baseTheme, - base: [ - baseTheme.base, - 'bg-[var(--input-background)] rounded-[var(--input-border-radius)] [border:_var(--input-border)] focus-within:border-[var(--input-border-focus)]' - ].join(' '), - error: [baseTheme.error, 'border-[var(--error-background)]'].join(' '), - sizes: { - small: '[padding:_var(--input-spacing-sm)]', - medium: '[padding:_var(--input-spacing-md)]', - large: 'padding:_var(--input-spacing-lg)' - }, - adornment: { - base: [ - baseTheme.adornment.base, - '[&>svg]:w-[var(--input-adornment-size)] [&>svg]:h-[var(--input-adornment-size)] [&>svg]:fill-[var(--input-adornment-fill)]' - ].join(' '), - start: '[padding-right:_calc(var(--list-item-spacing)_/_2)]', - end: '[padding-left:_calc(var(--list-item-spacing)_/_2)]' - }, - input: [ - baseTheme.input, - 'placeholder-[var(--input-color-placeholder)] ' - ].join(' '), - disabled: [baseTheme.disabled, 'text-[var(--disabled-color)]'].join(' ') -}; diff --git a/src/form/Textarea/TextareaTheme.ts b/src/form/Textarea/TextareaTheme.ts index 7f2cc6fa8..cf4109187 100644 --- a/src/form/Textarea/TextareaTheme.ts +++ b/src/form/Textarea/TextareaTheme.ts @@ -1,5 +1,3 @@ -import { legacyInputTheme, inputTheme } from '@/form/Input/InputTheme'; - export interface TextareaTheme { base: string; input: string; @@ -14,46 +12,26 @@ export interface TextareaTheme { }; } -const baseTheme: Partial = { - input: 'resize-none read-only:cursor-not-allowed' -}; - export const textareaTheme: TextareaTheme = { - ...baseTheme, - base: [ - baseTheme.base, - inputTheme.base, - 'disabled-within:hover:after:content-none' - ].join(' '), - input: [baseTheme.input, inputTheme.input].join(' '), - disabled: [baseTheme.disabled, inputTheme.disabled].join(' '), - fullWidth: inputTheme.fullWidth, - error: inputTheme.error, - sizes: inputTheme.sizes -} as TextareaTheme; - -export const legacyTextareaTheme: TextareaTheme = { - ...baseTheme, - base: [ - baseTheme.base, - legacyInputTheme.base, - 'bg-[var(--textarea-background)] rounded-[var(--textarea-border-radius)] [border:_var(--textarea-border)] focus:border-[var(--textarea-border-focus)]' - ].join(' '), - input: [ - baseTheme.input, - legacyInputTheme.input, - '[font-family:_var(--font-family)] text-[var(--textarea-color)] placeholder-[var(--textarea-color-placeholder)]' - ].join(' '), - disabled: [ - baseTheme.disabled, - legacyInputTheme.disabled, - 'text-[var(--disabled-color)]' - ].join(' '), - fullWidth: legacyInputTheme.fullWidth, - error: legacyInputTheme.error, + base: ` + flex items-center transition-colors rounded-md border + border-inputs-colors-normal-stroke-resting bg-inputs-colors-normal-background-resting + hover:border-inputs-colors-normal-stroke-hover hover:bg-inputs-colors-normal-background-hover + focus-within:border-inputs-colors-normal-stroke-selected focus-within:bg-inputs-colors-normal-background-selected + disabled-within:hover:border-inputs-colors-normal-stroke-resting disabled-within:hover:bg-inputs-colors-normal-background-resting + `, + input: 'border-0 resize-none read-only:cursor-not-allowed outline-hidden', + fullWidth: 'w-full', + error: ` + border-inputs-colors-error-stroke-resting bg-inputs-colors-error-background-resting + hover:border-inputs-colors-error-stroke-hover hover:bg-inputs-colors-error-background-hover + focus-within:border-inputs-colors-error-stroke-selected focus-within:bg-inputs-colors-error-background-selected + disabled-within:hover:border-inputs-colors-error-stroke-resting disabled-within:hover:bg-inputs-colors-error-background-resting + `, + disabled: 'cursor-not-allowed opacity-40', sizes: { - small: '[padding:_var(--textarea-spacing-sm)]', - medium: '[padding: var(--textarea-spacing-md)]', - large: 'padding: var(--textarea-spacing-lg)' + small: '[&>textarea]:text-xs px-2 py-[3px]', + medium: '[&>textarea]:text-xs px-3 py-[7px]', + large: '[&>textarea]:text-small px-3 py-[7px]' } } as TextareaTheme; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 7b1681271..b1f6ad357 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -45,10 +45,8 @@ import { CalendarRangeTheme, calendarRangeTheme, legacySelectTheme, - legacyInputTheme, legacyCalendarTheme, legacyCalendarRangeTheme, - legacyTextareaTheme, legacyRadioTheme, legacyRangeTheme, legacyToggleTheme, @@ -271,13 +269,11 @@ export const legacyThemeVars: DeepPartial = { kbd: legacyKbdTheme, verticalSpacer: legacyVerticalSpacerTheme, notification: legacyNotificationTheme, - input: legacyInputTheme, dateInput: legacyDateInputTheme, calendar: legacyCalendarTheme, calendarRange: legacyCalendarRangeTheme, commandPalette: legacyCommandPaletteTheme, collapse: legacyCollapseTheme, - textarea: legacyTextareaTheme, typography: legacyTypographyTheme, radio: legacyRadioTheme, range: legacyRangeTheme, From a936b8baeb6120a7a397585efb244a332aa99ae2 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Mon, 4 Aug 2025 14:54:12 +0300 Subject: [PATCH 012/139] List theme updates --- src/layout/List/ListTheme.ts | 93 +++++---------------------------- src/utils/Theme/themes/theme.ts | 2 - 2 files changed, 12 insertions(+), 83 deletions(-) diff --git a/src/layout/List/ListTheme.ts b/src/layout/List/ListTheme.ts index 526f503a8..339837810 100644 --- a/src/layout/List/ListTheme.ts +++ b/src/layout/List/ListTheme.ts @@ -24,19 +24,22 @@ export interface ListTheme { }; } -const baseTheme: ListTheme = { - base: 'flex flex-col', - header: 'pl-2 pr-2', +export const listTheme = { + base: 'flex flex-col gap-1', + header: + 'px-1 py-2 border rounded-md border-select-menu-items-color-item-stroke-header-resting text-select-menu-items-color-item-text-header-resting bg-select-menu-items-color-item-background-header-resting text-xs font-semibold', listItem: { - base: 'items-center flex p-2.5 relative rounded-none', - disabled: 'cursor-not-allowed pointer-events-none', - active: '', + base: 'flex-1 px-3 py-2.5 whitespace-break-spaces break-words border border-select-menu-items-color-item-stroke-row-resting rounded-md text-sm outline-none', + disabled: + 'cursor-not-allowed opacity-40 hover:border-select-menu-items-color-item-stroke-row-resting hover:bg-select-menu-items-color-item-stroke-row-resting', + active: + 'border-select-menu-items-color-item-stroke-row-selected bg-select-menu-items-color-item-background-row-selected hover:border-select-menu-items-color-item-stroke-row-selected hover:bg-select-menu-items-color-item-background-row-selected', clickable: - 'cursor-pointer transition-color duration-300 ease-linear transition-bg duration-300 ease-linear hover:color-inherit hover:bg-transparent', + 'cursor-pointer hover:border-select-menu-items-color-item-stroke-row-hover hover:bg-select-menu-items-color-item-background-row-hover focus-visible:border-select-menu-items-color-item-stroke-row-hover focus-visible:bg-select-menu-items-color-item-background-row-hover', disablePadding: 'p-0', - disableGutters: 'pl-0 pr-0', + disableGutters: 'px-0', dense: { - base: 'p-1', + base: 'px-1', content: '', startAdornment: 'pr-[calc(5/2)]', endAdornment: 'pl-[calc(5/2)]' @@ -50,75 +53,3 @@ const baseTheme: ListTheme = { content: 'overflow-wrap break-word word-wrap break-all flex-1' } }; - -export const listTheme = { - ...baseTheme, - base: [baseTheme.base, 'text-text-primary'].join(' '), - header: [baseTheme.header, 'text-text-primary'].join(' '), - listItem: { - ...baseTheme.listItem, - base: [ - baseTheme.listItem.base, - 'hover:bg-panel-accent hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary [&:has(h3)]:hover:bg-transparent' - ].join(' '), - active: [ - baseTheme.listItem.active, - 'text-primary-active hover:text-mystic' - ].join(' '), - disabled: [ - baseTheme.listItem.disabled, - 'opacity-40 text-text-secondary' - ].join(' ') - } -}; - -export const legacyListTheme = { - ...baseTheme, - base: [baseTheme.base, 'text-[var(--list-item-color)]'].join(' '), - header: [ - baseTheme.header, - 'pl-[var(--spacing-md)] pr-[var(--spacing-md)]' - ].join(' '), - - listItem: { - ...baseTheme.listItem, - base: [ - baseTheme.listItem.base, - 'p-[var(--list-item-spacing)] text-[var(--list-item-color)] rounded-[var(--list-item-border-radius)]' - ].join(' '), - clickable: [ - baseTheme.listItem.clickable, - 'hover:text-[var(--list-item-color-active)] hover:bg-[var(--list-item-background-active)]' - ].join(' '), - dense: { - ...baseTheme.listItem.dense, - base: [ - baseTheme.listItem.dense.base, - '[padding:_var(--list-item-dense-spacing)]' - ].join(' '), - startAdornment: [ - baseTheme.listItem.dense.startAdornment, - '[padding-right:_calc(var(--spacing-md)_/_2)]' - ].join(' '), - endAdornment: [ - baseTheme.listItem.dense.endAdornment, - '[padding-left:_calc(var(--spacing-md)_/_2)]' - ].join(' ') - }, - adornment: { - ...baseTheme.listItem.adornment, - start: [ - baseTheme.listItem.adornment.start, - '[padding-right:_calc(var(--spacing-sm)_/_2)]' - ].join(' '), - end: [ - baseTheme.listItem.adornment.start, - '[padding-left:_calc(var(--spacing-sm)_/_2)]' - ].join(' '), - svg: [ - baseTheme.listItem.adornment.svg, - 'fill:[var(--list-item-adornment-fill)]' - ].join(' ') - } - } -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index b1f6ad357..66c895f7f 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -95,7 +95,6 @@ import { TabsTheme, tabsTheme, TreeTheme, - legacyListTheme, verticalSpacerTheme, VerticalSpacerTheme, CardTheme, @@ -261,7 +260,6 @@ export const legacyThemeVars: DeepPartial = { drawer: legacyDrawerTheme, ellipsis: legacyEllipsisTheme, select: legacySelectTheme, - list: legacyListTheme, menu: legacyMenuTheme, sort: legacySortTheme, stack: legacyStackTheme, From e5ffa87dd91d7b8feacf8942d4ed04e7d1431b50 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Mon, 4 Aug 2025 15:02:48 +0300 Subject: [PATCH 013/139] JSONTree theme updates --- src/layout/Tree/JsonTree/JsonTreeTheme.ts | 13 +++++-------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/layout/Tree/JsonTree/JsonTreeTheme.ts b/src/layout/Tree/JsonTree/JsonTreeTheme.ts index 3dcdf3820..c73dbffe4 100644 --- a/src/layout/Tree/JsonTree/JsonTreeTheme.ts +++ b/src/layout/Tree/JsonTree/JsonTreeTheme.ts @@ -11,15 +11,12 @@ export interface JsonTreeTheme { export const jsonTreeTheme: JsonTreeTheme = { node: { - label: 'font-mono text-anakiwa light:text-blue-500', - delimiter: 'pr-1', - symbol: 'px-1 opacity-50 font-mono', - value: '', + label: + 'font-mono text-sm font-normal text-json-tree-color-text-primary-resting', + delimiter: 'pr-1 text-sm font-normal', + symbol: 'px-1 opacity-50 font-mono text-sm font-normal', + value: 'text-json-tree-color-text-secondary-resting text-sm font-normal', count: 'opacity-50' }, pager: 'opacity-50 cursor-pointer pl-4' }; - -export const legacyJsonTreeTheme: JsonTreeTheme = { - ...jsonTreeTheme -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 66c895f7f..f25517ea6 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -112,7 +112,6 @@ import { legacyDividerTheme, JsonTreeTheme, jsonTreeTheme, - legacyJsonTreeTheme, breadcrumbsTheme, BreadcrumbsTheme, legacyBreadcrumbTheme, @@ -282,7 +281,6 @@ export const legacyThemeVars: DeepPartial = { popover: legacyPopoverTheme, pager: legacyPagerTheme, tabs: legacyTabsTheme, - jsonTree: legacyJsonTreeTheme, breadcrumbs: legacyBreadcrumbTheme, stepper: legacyStepperTheme, callout: legacyCalloutTheme, From 24999e016e464d2c8335d2141aeed952b45ac868 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Mon, 4 Aug 2025 15:30:21 +0300 Subject: [PATCH 014/139] Card and Menu theme updates --- src/layers/Menu/Menu.story.tsx | 60 ++++++++++++++++++--------------- src/layers/Menu/MenuTheme.tsx | 13 ++----- src/layout/Card/CardTheme.tsx | 21 ++---------- src/utils/Theme/themes/theme.ts | 4 --- 4 files changed, 36 insertions(+), 62 deletions(-) diff --git a/src/layers/Menu/Menu.story.tsx b/src/layers/Menu/Menu.story.tsx index 439b7223f..7d974c900 100644 --- a/src/layers/Menu/Menu.story.tsx +++ b/src/layers/Menu/Menu.story.tsx @@ -1,10 +1,10 @@ import React, { Fragment, useRef, useState } from 'react'; -import { Card } from '../../layout/Card'; -import { List, ListItem } from '../../layout/List'; +import { Card } from '@/layout'; +import { List, ListHeader, ListItem } from '@/layout'; import { Menu } from './Menu'; -import { NestedMenu, NestedMenuRef } from './NestedMenu'; -import { useMenu } from './useMenu'; -import { Button } from '../../elements/Button'; +import { NestedMenu, NestedMenuRef } from '@/layers'; +import { useMenu } from '@/layers'; +import { Button } from '@/elements'; export default { title: 'Components/Layers/Menu', @@ -14,6 +14,33 @@ export default { } }; +export const Simple = () => { + const { toggleOpen, ref, Menu: MenuComponent } = useMenu(); + + return ( +
+ + + + + List Header + List Itme + console.log('click')}> + Clickable Item + + Selected Item + console.log('click')} disabled> + Disabled Item + + + + +
+ ); +}; + export const Unstyled = () => { const { toggleOpen, ref, Menu: MenuComponent } = useMenu(); @@ -183,29 +210,6 @@ export const AutoWidthModifiers = () => { ); }; -export const Simple = () => { - const [open, setOpen] = useState(false); - const buttonRef = useRef(null); - - return ( - <> - - setOpen(false)} reference={buttonRef}> - - - }>Menu Item 1 - }>Menu Item 2 - }>Menu Item 3 - }>Menu Item 4 - - - - - ); -}; - export const Selectable = () => { const [open, setOpen] = useState(false); const buttonRef = useRef(null); diff --git a/src/layers/Menu/MenuTheme.tsx b/src/layers/Menu/MenuTheme.tsx index 89e064ecc..a2975c19b 100644 --- a/src/layers/Menu/MenuTheme.tsx +++ b/src/layers/Menu/MenuTheme.tsx @@ -3,16 +3,7 @@ export interface MenuTheme { inner: string; } -const baseTheme: MenuTheme = { - base: 'relative min-w-[112px] max-w-[500px] p-px', - inner: 'focus:outline-hidden' -}; - export const menuTheme: MenuTheme = { - ...baseTheme, - inner: [baseTheme.inner, 'text-text-primary bg-panel'].join(' ') -}; - -export const legacyMenuTheme: MenuTheme = { - ...baseTheme + base: 'relative min-w-[112px] max-w-[500px] border border-select-menu-items-color-item-stroke-container-resting rounded-md mt-2 bg-select-menu-items-color-item-background-container-base backdrop-blur-md', + inner: 'focus:outline-hidden' }; diff --git a/src/layout/Card/CardTheme.tsx b/src/layout/Card/CardTheme.tsx index 340f44410..084866750 100644 --- a/src/layout/Card/CardTheme.tsx +++ b/src/layout/Card/CardTheme.tsx @@ -6,27 +6,10 @@ export interface CardTheme { content: string; } -const baseTheme: CardTheme = { - base: 'relative flex flex-col p-7 rounded-xs', +export const cardTheme: CardTheme = { + base: 'relative flex flex-col p-1.5 rounded-md', disablePadding: 'p-0', header: 'flex items-center', headerText: 'text-sm font-medium mt-0 mb-1', content: 'flex-1' }; - -export const cardTheme: CardTheme = { - ...baseTheme, - base: [ - baseTheme.base, - 'bg-panel border border-panel-accent text-text-primary' - ].join(' ') -}; - -export const legacyCardTheme: CardTheme = { - ...baseTheme, - base: [ - baseTheme.base, - '[padding:_var(--card-spacing)] bg-[var(--card-background)] text-[var(--card-color)] [border:_var(--card-border)] rounded-[var(--card-border-radius)]' - ].join(' '), - headerText: [baseTheme.headerText, 'mb-[var(--spacing-md)]'].join(' ') -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index f25517ea6..b1c672c02 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -59,7 +59,6 @@ import { ContextMenuTheme, legacyContextMenuTheme, legacyDrawerTheme, - legacyMenuTheme, legacyNotificationTheme, legacyPopoverTheme, legacyTooltipTheme, @@ -104,7 +103,6 @@ import { stackTheme, StackTheme, legacyStackTheme, - legacyCardTheme, legacyVerticalSpacerTheme, legacyCollapseTheme, legacyTreeTheme, @@ -259,10 +257,8 @@ export const legacyThemeVars: DeepPartial = { drawer: legacyDrawerTheme, ellipsis: legacyEllipsisTheme, select: legacySelectTheme, - menu: legacyMenuTheme, sort: legacySortTheme, stack: legacyStackTheme, - card: legacyCardTheme, kbd: legacyKbdTheme, verticalSpacer: legacyVerticalSpacerTheme, notification: legacyNotificationTheme, From d5e8e26c90f43fadae35f107b084c2d5020bc644 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Mon, 4 Aug 2025 15:57:42 +0300 Subject: [PATCH 015/139] Notification theme updates --- .../Notification/Notification.story.tsx | 12 +-- src/layers/Notification/NotificationTheme.ts | 92 ++++++------------- src/utils/Theme/themes/theme.ts | 2 - 3 files changed, 32 insertions(+), 74 deletions(-) diff --git a/src/layers/Notification/Notification.story.tsx b/src/layers/Notification/Notification.story.tsx index ab664ff47..630cbf867 100644 --- a/src/layers/Notification/Notification.story.tsx +++ b/src/layers/Notification/Notification.story.tsx @@ -1,7 +1,7 @@ import React, { FC, Fragment } from 'react'; -import { NotificationComponentProps, Notifications } from './Notifications'; -import { NotificationsContext } from './NotificationsContext'; -import { Button } from '../../elements'; +import { NotificationComponentProps, Notifications } from '@/layers'; +import { NotificationsContext } from '@/layers'; +import { Button } from '@/elements'; export default { title: 'Components/Layers/Notification', @@ -106,21 +106,18 @@ export const Variants = () => ( }) => (
- + = ({ value={ isRange ? (rangeEnd ? rangeEnd : value?.[0]) : (value as Date) } + disabled={disabled} min={min} max={max === 'now' ? new Date() : max} theme={theme.time} diff --git a/src/form/Calendar/CalendarDays/CalendarDays.tsx b/src/form/Calendar/CalendarDays/CalendarDays.tsx index 477b8414d..9ae684506 100644 --- a/src/form/Calendar/CalendarDays/CalendarDays.tsx +++ b/src/form/Calendar/CalendarDays/CalendarDays.tsx @@ -212,7 +212,7 @@ export const CalendarDays: FC = ({ isPreviousWeekEmpty(day.date, currentRange, hidePrevMonthDays); // Determine the color variant of the button - const colorVariant = isActive ? 'primary' : 'default'; + const colorVariant = isActive ? 'primary' : 'secondary'; // Determine the button variant const buttonVariant = isActive ? 'filled' : 'text'; diff --git a/src/form/Calendar/CalendarMonths/CalendarMonths.tsx b/src/form/Calendar/CalendarMonths/CalendarMonths.tsx index 05381c98c..86684c0d2 100644 --- a/src/form/Calendar/CalendarMonths/CalendarMonths.tsx +++ b/src/form/Calendar/CalendarMonths/CalendarMonths.tsx @@ -34,7 +34,7 @@ export const CalendarMonths: FC = ({ + + + + +
{preset && ( <> @@ -313,96 +352,53 @@ export const Calendar: FC = ({ )} - -
-
- - - -
- - - - {view === 'days' && ( - - )} - {view === 'months' && ( - - )} - {view === 'years' && ( - - )} - - -
- + + + {view === 'days' && ( + + )} + {view === 'months' && ( + + )} + {view === 'years' && ( + + )} + + {showTime && ( Date: Tue, 5 Aug 2025 14:40:04 +0300 Subject: [PATCH 027/139] Fix build --- src/form/Calendar/CalendarRangeTheme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/form/Calendar/CalendarRangeTheme.ts b/src/form/Calendar/CalendarRangeTheme.ts index 447637899..0cdbd376b 100644 --- a/src/form/Calendar/CalendarRangeTheme.ts +++ b/src/form/Calendar/CalendarRangeTheme.ts @@ -20,6 +20,7 @@ export const calendarRangeTheme: CalendarRangeTheme = { header: baseTheme.header, title: baseTheme.title, content: baseTheme.content, + contentContainer: baseTheme.contentContainer, days: calendarTheme.days, time: calendarTheme.time, presets: { From f5b2699f6c1a30f02f65ab442c502a27460e9bf5 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 14:49:19 +0300 Subject: [PATCH 028/139] Breadcrumbs theme updates --- src/layout/Breadcrumbs/BreadcrumbsTheme.ts | 9 ++++----- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/layout/Breadcrumbs/BreadcrumbsTheme.ts b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts index deb4144cc..e019a6bd5 100644 --- a/src/layout/Breadcrumbs/BreadcrumbsTheme.ts +++ b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts @@ -7,11 +7,10 @@ export interface BreadcrumbsTheme { } export const breadcrumbsTheme: BreadcrumbsTheme = { - base: '', + base: 'text-breadcrumbs-colors-primary-text-resting', separator: '[&>svg]:size-3.5', list: 'flex gap-2 items-center', - link: 'hover:text-text-primary text-text-secondary transition-colors', - activePage: 'text-primary pointer-events-none' + link: 'hover:text-breadcrumbs-colors-primary-text-hover transition-colors', + activePage: + 'text-breadcrumbs-colors-primary-text-selected pointer-events-none' }; - -export const legacyBreadcrumbTheme: BreadcrumbsTheme = breadcrumbsTheme; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 7de352bed..c495fe8da 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -103,7 +103,6 @@ import { jsonTreeTheme, breadcrumbsTheme, BreadcrumbsTheme, - legacyBreadcrumbTheme, StepperTheme, stepperTheme, legacyStepperTheme @@ -257,7 +256,6 @@ export const legacyThemeVars: DeepPartial = { redact: legacyRedactTheme, tooltip: legacyTooltipTheme, popover: legacyPopoverTheme, - breadcrumbs: legacyBreadcrumbTheme, stepper: legacyStepperTheme, callout: legacyCalloutTheme, backdrop: legacyBackdropTheme From 9ddef0570afe709c4cda48e3e8177c85728b8c2e Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 14:59:45 +0300 Subject: [PATCH 029/139] Stack theme updates --- src/layout/Stack/StackTheme.ts | 13 +------------ src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/src/layout/Stack/StackTheme.ts b/src/layout/Stack/StackTheme.ts index e5c715c8f..20cc64ba7 100644 --- a/src/layout/Stack/StackTheme.ts +++ b/src/layout/Stack/StackTheme.ts @@ -22,7 +22,7 @@ export interface StackTheme { }; } -const baseTheme: StackTheme = { +export const stackTheme: StackTheme = { base: 'flex items-center gap-2.5', dense: 'gap-1', inline: 'inline-flex', @@ -45,14 +45,3 @@ const baseTheme: StackTheme = { spaceBetween: 'justify-between' } }; - -export const stackTheme = { - ...baseTheme, - base: [baseTheme.base, 'text-text-primary'].join(' ') -}; - -export const legacyStackTheme = { - ...baseTheme, - base: [baseTheme.base, 'gap-[var(--stack-gap)]'].join(' '), - dense: [baseTheme.dense, 'gap-[var(--stack-dense-gap)]'].join(' ') -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index c495fe8da..753d1a7e9 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -95,7 +95,6 @@ import { ListTheme, stackTheme, StackTheme, - legacyStackTheme, legacyVerticalSpacerTheme, legacyCollapseTheme, legacyDividerTheme, @@ -246,7 +245,6 @@ export const legacyThemeVars: DeepPartial = { drawer: legacyDrawerTheme, ellipsis: legacyEllipsisTheme, sort: legacySortTheme, - stack: legacyStackTheme, kbd: legacyKbdTheme, verticalSpacer: legacyVerticalSpacerTheme, dateInput: legacyDateInputTheme, From 24431c19e2e0f8e8523ab464832a009e84237dbd Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 15:01:13 +0300 Subject: [PATCH 030/139] Backdrop theme updates --- src/layers/Backdrop/BackdropTheme.tsx | 5 ----- src/utils/Theme/themes/theme.ts | 6 ++---- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/layers/Backdrop/BackdropTheme.tsx b/src/layers/Backdrop/BackdropTheme.tsx index da2720165..63afa5661 100644 --- a/src/layers/Backdrop/BackdropTheme.tsx +++ b/src/layers/Backdrop/BackdropTheme.tsx @@ -7,8 +7,3 @@ export const backdropTheme: BackdropTheme = { base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-black', opacity: 0.8 }; - -export const legacyBackdropTheme: BackdropTheme = { - base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-[var(--color-layer-transparent)]', - opacity: 0.8 -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 753d1a7e9..702928bf9 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -72,8 +72,7 @@ import { calloutTheme, legacyCalloutTheme, BackdropTheme, - backdropTheme, - legacyBackdropTheme + backdropTheme } from '@/layers'; import { @@ -255,7 +254,6 @@ export const legacyThemeVars: DeepPartial = { tooltip: legacyTooltipTheme, popover: legacyPopoverTheme, stepper: legacyStepperTheme, - callout: legacyCalloutTheme, - backdrop: legacyBackdropTheme + callout: legacyCalloutTheme } }; From 439ea474821ce855455ab741100ff349e2a546f2 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 15:21:21 +0300 Subject: [PATCH 031/139] Callout theme updates --- src/layers/Callout/CalloutTheme.ts | 28 +++++++++++++++------------- src/utils/Theme/themes/theme.ts | 4 +--- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/layers/Callout/CalloutTheme.ts b/src/layers/Callout/CalloutTheme.ts index 787b88cdb..de46687e5 100644 --- a/src/layers/Callout/CalloutTheme.ts +++ b/src/layers/Callout/CalloutTheme.ts @@ -28,24 +28,26 @@ export const calloutTheme: CalloutTheme = { base: { common: 'px-4 py-3 border-b', variant: { - default: 'bg-panel-background border-panel-accent', - success: 'bg-success-background border-success', - error: 'bg-error-background border-error', - warning: 'bg-warning-background border-warning', - info: 'bg-info-background border-info' + default: + 'bg-notifications-colors-background-neutral-resting border-notifications-colors-stroke-neutral-resting', + success: + 'bg-notifications-colors-background-success-resting border-notifications-colors-stroke-success-resting', + error: + 'bg-notifications-colors-background-error-resting border-notifications-colors-stroke-error-resting', + warning: + 'bg-notifications-colors-background-warning-resting border-notifications-colors-stroke-warning-resting', + info: 'bg-notifications-colors-background-info-resting border-notifications-colors-stroke-info-resting' } }, icon: { common: '', variant: { - default: '', - success: 'text-success', - error: 'text-error', - warning: 'text-warning', - info: 'text-info' + default: 'text-notifications-colors-assets-neutral-resting', + success: 'text-notifications-colors-assets-success-resting', + error: 'text-notifications-colors-assets-destructive-resting', + warning: 'text-notifications-colors-assets-warning-static', + info: 'text-notifications-colors-assets-info-resting' } }, - text: 'text-base' + text: 'text-notifications-colors-text-title-resting' }; - -export const legacyCalloutTheme: CalloutTheme = calloutTheme; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 702928bf9..b92fb62a1 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -70,7 +70,6 @@ import { TooltipTheme, CalloutTheme, calloutTheme, - legacyCalloutTheme, BackdropTheme, backdropTheme } from '@/layers'; @@ -253,7 +252,6 @@ export const legacyThemeVars: DeepPartial = { redact: legacyRedactTheme, tooltip: legacyTooltipTheme, popover: legacyPopoverTheme, - stepper: legacyStepperTheme, - callout: legacyCalloutTheme + stepper: legacyStepperTheme } }; From db9290427d7e09a25a1cff18e411faa92c627633 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 15:25:37 +0300 Subject: [PATCH 032/139] Popover theme updates --- src/layers/Popover/PopoverTheme.ts | 15 +-------------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 1 insertion(+), 16 deletions(-) diff --git a/src/layers/Popover/PopoverTheme.ts b/src/layers/Popover/PopoverTheme.ts index 06436d3b8..903ee0608 100644 --- a/src/layers/Popover/PopoverTheme.ts +++ b/src/layers/Popover/PopoverTheme.ts @@ -3,20 +3,7 @@ export interface PopoverTheme { disablePadding: string; } -const baseTheme: PopoverTheme = { +export const popoverTheme: PopoverTheme = { base: 'whitespace-nowrap text-center will-change-[transform,opacity] p-1.5 rounded-sm', disablePadding: 'p-0' }; - -export const popoverTheme: PopoverTheme = { - ...baseTheme, - base: [baseTheme.base, 'bg-panel text-text-primary'].join(' ') -}; - -export const legacyPopoverTheme: PopoverTheme = { - ...baseTheme, - base: [ - baseTheme.base, - 'text-[color:var(--popover-color)] rounded-[var(--popover-border-radius)] pt-[var(--popover-spacing)] pr-[var(--popover-spacing)] pb-[var(--popover-spacing)] pl-[var(--popover-spacing)] bg-[var(--popover-background)]' - ].join(' ') -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index b92fb62a1..840a2f543 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -53,7 +53,6 @@ import { ContextMenuTheme, legacyContextMenuTheme, legacyDrawerTheme, - legacyPopoverTheme, legacyTooltipTheme, contextMenuTheme, dialogTheme, @@ -251,7 +250,6 @@ export const legacyThemeVars: DeepPartial = { typography: legacyTypographyTheme, redact: legacyRedactTheme, tooltip: legacyTooltipTheme, - popover: legacyPopoverTheme, stepper: legacyStepperTheme } }; From fcb4377aa0062fdb4c1925fbce7240d6dc2e30ee Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 15:57:01 +0300 Subject: [PATCH 033/139] Tooltip theme updates --- src/layers/Tooltip/TooltipTheme.ts | 17 ++--------------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/layers/Tooltip/TooltipTheme.ts b/src/layers/Tooltip/TooltipTheme.ts index 1341b79fe..7c91650dc 100644 --- a/src/layers/Tooltip/TooltipTheme.ts +++ b/src/layers/Tooltip/TooltipTheme.ts @@ -3,20 +3,7 @@ export interface TooltipTheme { disablePointer: string; } -const baseTheme: TooltipTheme = { - base: 'whitespace-nowrap text-center will-change-[transform,opacity] p-1.5 rounded-sm', - disablePointer: 'pointer-events-none' -}; - export const tooltipTheme: TooltipTheme = { - ...baseTheme, - base: [baseTheme.base, 'bg-panel-accent text-text-primary'].join(' ') -}; - -export const legacyTooltipTheme: TooltipTheme = { - ...baseTheme, - base: [ - baseTheme.base, - 'text-[color:var(--tooltip-color)] rounded-[var(--tooltip-border-radius)] border-[length:var(--tooltip-border)] pt-[var(--tooltip-spacing)] pr-[var(--tooltip-spacing)] pb-[var(--tooltip-spacing)] pl-[var(--tooltip-spacing)] bg-[var(--tooltip-background)]' - ].join(' ') + base: 'text-tooltip-colors-neutral-text-default bg-tooltip-colors-neutral-background-default whitespace-nowrap text-center will-change-[transform,opacity] p-1.5 rounded-sm', + disablePointer: 'pointer-events-none' }; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 840a2f543..5716cbdd0 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -53,7 +53,6 @@ import { ContextMenuTheme, legacyContextMenuTheme, legacyDrawerTheme, - legacyTooltipTheme, contextMenuTheme, dialogTheme, drawerTheme, @@ -249,7 +248,6 @@ export const legacyThemeVars: DeepPartial = { collapse: legacyCollapseTheme, typography: legacyTypographyTheme, redact: legacyRedactTheme, - tooltip: legacyTooltipTheme, stepper: legacyStepperTheme } }; From 3da7d0dfd9b7c355505e1d4aa0acd0d19b1ac5c8 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 15:59:48 +0300 Subject: [PATCH 034/139] Collapse theme updates --- src/layout/Collapse/CollapseTheme.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/layout/Collapse/CollapseTheme.ts b/src/layout/Collapse/CollapseTheme.ts index 22eb41112..898bfb3ef 100644 --- a/src/layout/Collapse/CollapseTheme.ts +++ b/src/layout/Collapse/CollapseTheme.ts @@ -2,14 +2,6 @@ export interface CollapseTheme { base: string; } -const baseTheme: CollapseTheme = { - base: 'will-change-[height,opacity] overflow-hidden' -}; - export const collapseTheme: CollapseTheme = { - ...baseTheme -}; - -export const legacyCollapseTheme: CollapseTheme = { - ...baseTheme + base: 'will-change-[height,opacity] overflow-hidden' }; From 085db67e672907ee7126e7368f58d46bd8ee8c59 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:00:15 +0300 Subject: [PATCH 035/139] Collapse theme updates --- src/utils/Theme/themes/theme.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 5716cbdd0..ddf73ab55 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -92,7 +92,6 @@ import { stackTheme, StackTheme, legacyVerticalSpacerTheme, - legacyCollapseTheme, legacyDividerTheme, JsonTreeTheme, jsonTreeTheme, @@ -245,7 +244,6 @@ export const legacyThemeVars: DeepPartial = { verticalSpacer: legacyVerticalSpacerTheme, dateInput: legacyDateInputTheme, commandPalette: legacyCommandPaletteTheme, - collapse: legacyCollapseTheme, typography: legacyTypographyTheme, redact: legacyRedactTheme, stepper: legacyStepperTheme From 5991d43757424a54cde2f5373118e7e5532ffe36 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:17:09 +0300 Subject: [PATCH 036/139] DateInput theme updates --- src/form/DateInput/DateInput.tsx | 4 ++-- src/form/DateInput/DateInputTheme.ts | 8 +++----- src/form/Input/InputTheme.ts | 10 ++++++---- src/utils/Theme/themes/theme.ts | 4 +--- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx index a7506efee..afe5bbe52 100644 --- a/src/form/DateInput/DateInput.tsx +++ b/src/form/DateInput/DateInput.tsx @@ -21,7 +21,7 @@ import CalendarIcon from '@/assets/icons/calendar.svg?react'; import { List, ListItem } from '@/layout'; import { cn, useComponentTheme } from '@/utils'; import { isPresetActive } from '@/form/Calendar/utils'; -import { DateInputTheme } from './DateInputTheme'; +import { DateInputTheme } from '@/form'; export type DateInputProps = Omit & { /** @@ -176,7 +176,7 @@ export const DateInput: FC = ({ theme={theme.input} endAdornment={ setOpen(true)} > diff --git a/src/form/DateInput/DateInputTheme.ts b/src/form/DateInput/DateInputTheme.ts index eaa75e63a..8817a3619 100644 --- a/src/form/DateInput/DateInputTheme.ts +++ b/src/form/DateInput/DateInputTheme.ts @@ -17,12 +17,10 @@ export const dateInputTheme: DateInputTheme = { input: inputTheme, calendar: calendarTheme, preset: { - list: 'w-full border border-panel-accent', + list: 'w-full', option: { - base: 'hover:bg-vulcan hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary', - active: 'bg-vulcan hover:text-mystic' + base: '', + active: '' } } }; - -export const legacyDateInputTheme: DateInputTheme = dateInputTheme; diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts index b45d24597..3b31bcecc 100644 --- a/src/form/Input/InputTheme.ts +++ b/src/form/Input/InputTheme.ts @@ -28,7 +28,8 @@ export const inputTheme: InputTheme = { placeholder:text-inputs-colors-normal-text-input-text-resting focus:placeholder:text-inputs-colors-normal-text-input-text-selected `, inline: 'bg-transparent border-0 outline-hidden', - disabled: 'cursor-not-allowed', + disabled: + 'cursor-not-allowed opacity-40 hover:border-inputs-colors-normal-stroke-resting', fullWidth: 'w-full', error: ` border-inputs-colors-error-stroke-resting bg-inputs-colors-error-background-resting [&>input]:text-inputs-colors-error-text-input-filled [&>input]:placeholder:text-inputs-colors-error-text-input-text-resting @@ -37,10 +38,11 @@ export const inputTheme: InputTheme = { `, sizes: { small: - '[&>input]:text-xs [&>input]:leading-4 [&_svg]:size-4 px-2 py-[5px] gap-2', + '[&>input]:text-sm [&>input]:leading-4 [&_svg]:size-4 px-2 py-[5px] gap-2', medium: - '[&>input]:text-xs [&>input]:leading-4 [&_svg]:size-4 px-3 py-[7px] gap-2', - large: '[&>input]:text-small [&_svg]:size-4.5 px-3 py-[7px] gap-2' + '[&>input]:text-md [&>input]:leading-4.5 [&_svg]:size-4.5 px-3 py-[7px] gap-2', + large: + '[&>input]:text-md [&>input]:leading-6 [&_svg]:size-6 px-3 py-[7px] gap-2' }, adornment: { base: ` diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index ddf73ab55..be373b752 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -45,8 +45,7 @@ import { CalendarRangeTheme, calendarRangeTheme, DateInputTheme, - dateInputTheme, - legacyDateInputTheme + dateInputTheme } from '@/form'; import { @@ -242,7 +241,6 @@ export const legacyThemeVars: DeepPartial = { sort: legacySortTheme, kbd: legacyKbdTheme, verticalSpacer: legacyVerticalSpacerTheme, - dateInput: legacyDateInputTheme, commandPalette: legacyCommandPaletteTheme, typography: legacyTypographyTheme, redact: legacyRedactTheme, From da83a329308d4f211b90b46b2630a7a63ad76d6c Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:18:33 +0300 Subject: [PATCH 037/139] Input text size --- src/form/Input/InputTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts index 3b31bcecc..82cf45047 100644 --- a/src/form/Input/InputTheme.ts +++ b/src/form/Input/InputTheme.ts @@ -40,7 +40,7 @@ export const inputTheme: InputTheme = { small: '[&>input]:text-sm [&>input]:leading-4 [&_svg]:size-4 px-2 py-[5px] gap-2', medium: - '[&>input]:text-md [&>input]:leading-4.5 [&_svg]:size-4.5 px-3 py-[7px] gap-2', + '[&>input]:text-sm [&>input]:leading-4.5 [&_svg]:size-4.5 px-3 py-[7px] gap-2', large: '[&>input]:text-md [&>input]:leading-6 [&_svg]:size-6 px-3 py-[7px] gap-2' }, From d10bdceba2a4ee5d15b6385a5a769249091613af Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:21:52 +0300 Subject: [PATCH 038/139] DotsLoader theme updates --- src/elements/Loader/DotsLoaderTheme.ts | 17 +---------------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 1 insertion(+), 18 deletions(-) diff --git a/src/elements/Loader/DotsLoaderTheme.ts b/src/elements/Loader/DotsLoaderTheme.ts index b88c8c218..a3c5f1f1b 100644 --- a/src/elements/Loader/DotsLoaderTheme.ts +++ b/src/elements/Loader/DotsLoaderTheme.ts @@ -9,7 +9,7 @@ export interface DotsLoaderTheme { }; } -const baseTheme: DotsLoaderTheme = { +export const dotsLoaderTheme: DotsLoaderTheme = { base: 'flex', dot: 'rounded-[50%]', sizes: { @@ -18,18 +18,3 @@ const baseTheme: DotsLoaderTheme = { large: 'w-2 h-2 m-2' } }; - -export const dotsLoaderTheme: DotsLoaderTheme = { - ...baseTheme, - dot: [baseTheme.dot, 'light:bg-gray-900 dark:bg-gray-100'].join(' ') -}; - -export const legacyLoaderTheme: DotsLoaderTheme = { - ...baseTheme, - dot: [baseTheme.dot, 'bg-[var(--loader-background)]'].join(' '), - sizes: { - small: 'w-1 h-1 ml-[var(--spacing-sm)]', - medium: 'w-1.5 h-1.5 ml-[var(--spacing-md)]', - large: 'w-2 h-2 ml-[var(--spacing-lg)]' - } -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index be373b752..244abb19e 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -20,7 +20,6 @@ import { legacyArrowTheme, legacyBadgeTheme, legacyChipTheme, - legacyLoaderTheme, legacyKbdTheme, legacyCommandPaletteTheme } from '@/elements'; @@ -235,7 +234,6 @@ export const legacyThemeVars: DeepPartial = { contextMenu: legacyContextMenuTheme, dateFormat: legacyDateFormatTheme, divider: legacyDividerTheme, - dotsLoader: legacyLoaderTheme, drawer: legacyDrawerTheme, ellipsis: legacyEllipsisTheme, sort: legacySortTheme, From 97518921df9361e7c9a9d0b7f0044f16789678c0 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:22:32 +0300 Subject: [PATCH 039/139] ContextMenu theme updates --- src/layers/ContextMenu/ContextMenuTheme.ts | 10 +--------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/layers/ContextMenu/ContextMenuTheme.ts b/src/layers/ContextMenu/ContextMenuTheme.ts index 8b1722a0a..31270ee7a 100644 --- a/src/layers/ContextMenu/ContextMenuTheme.ts +++ b/src/layers/ContextMenu/ContextMenuTheme.ts @@ -2,14 +2,6 @@ export interface ContextMenuTheme { enabled: string; } -const baseTheme: ContextMenuTheme = { - enabled: 'cursor-context-menu' -}; - export const contextMenuTheme: ContextMenuTheme = { - ...baseTheme -}; - -export const legacyContextMenuTheme: ContextMenuTheme = { - ...baseTheme + enabled: 'cursor-context-menu' }; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 244abb19e..d091ecb8e 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -49,7 +49,6 @@ import { import { ContextMenuTheme, - legacyContextMenuTheme, legacyDrawerTheme, contextMenuTheme, dialogTheme, @@ -231,7 +230,6 @@ export const legacyThemeVars: DeepPartial = { arrow: legacyArrowTheme, badge: legacyBadgeTheme, chip: legacyChipTheme, - contextMenu: legacyContextMenuTheme, dateFormat: legacyDateFormatTheme, divider: legacyDividerTheme, drawer: legacyDrawerTheme, From e4c31accaa185db321495adf6ea0c5f13d0c912c Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:28:13 +0300 Subject: [PATCH 040/139] Redact theme updates --- src/data/Redact/RedactTheme.ts | 11 +---------- src/utils/Theme/themes/theme.ts | 4 +--- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/src/data/Redact/RedactTheme.ts b/src/data/Redact/RedactTheme.ts index 5464ab23e..9a1a3598c 100644 --- a/src/data/Redact/RedactTheme.ts +++ b/src/data/Redact/RedactTheme.ts @@ -3,16 +3,7 @@ export interface RedactTheme { interactive: string; } -const baseTheme: RedactTheme = { +export const redactTheme: RedactTheme = { base: 'cursor-text', interactive: 'cursor-pointer hover:underline' }; - -export const redactTheme: RedactTheme = { - ...baseTheme, - base: [baseTheme.base, 'text-text-primary'].join(' ') -}; - -export const legacyRedactTheme: RedactTheme = { - ...baseTheme -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index d091ecb8e..da876870b 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -118,8 +118,7 @@ import { dateFormatTheme, legacyDateFormatTheme, legacyEllipsisTheme, - legacySortTheme, - legacyRedactTheme + legacySortTheme } from '@/data'; import { DeepPartial } from 'react-hook-form'; @@ -239,7 +238,6 @@ export const legacyThemeVars: DeepPartial = { verticalSpacer: legacyVerticalSpacerTheme, commandPalette: legacyCommandPaletteTheme, typography: legacyTypographyTheme, - redact: legacyRedactTheme, stepper: legacyStepperTheme } }; From bfa13a23ffab0f515be25189c5a1a6913bf5456f Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:30:12 +0300 Subject: [PATCH 041/139] Drawer theme updates --- src/layers/Drawer/DrawerTheme.ts | 19 +------------------ src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 1 insertion(+), 20 deletions(-) diff --git a/src/layers/Drawer/DrawerTheme.ts b/src/layers/Drawer/DrawerTheme.ts index 59d408438..b4fb3925d 100644 --- a/src/layers/Drawer/DrawerTheme.ts +++ b/src/layers/Drawer/DrawerTheme.ts @@ -18,7 +18,7 @@ export interface DrawerTheme { }; } -const baseTheme: DrawerTheme = { +export const drawerTheme: DrawerTheme = { base: 'fixed overflow-y-auto overflow-x-hidden', header: { base: 'flex items-center justify-between px-8 py-5 text-3xl font-bold', @@ -37,20 +37,3 @@ const baseTheme: DrawerTheme = { start: 'h-full inset-y-0 left-0' } }; - -export const drawerTheme: DrawerTheme = { - ...baseTheme, - base: [baseTheme.base, 'bg-panel text-text-primary'].join(' ') -}; - -export const legacyDrawerTheme: DrawerTheme = { - ...baseTheme, - base: [ - baseTheme.base, - 'bg-[var(--drawer-background)] text-[var(--drawer-color)]' - ].join(' '), - closeButton: { - ...baseTheme.closeButton, - base: [baseTheme.closeButton.base, 'text-[var(--drawer-color)]'].join(' ') - } -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index da876870b..82a708ae3 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -49,7 +49,6 @@ import { import { ContextMenuTheme, - legacyDrawerTheme, contextMenuTheme, dialogTheme, drawerTheme, @@ -231,7 +230,6 @@ export const legacyThemeVars: DeepPartial = { chip: legacyChipTheme, dateFormat: legacyDateFormatTheme, divider: legacyDividerTheme, - drawer: legacyDrawerTheme, ellipsis: legacyEllipsisTheme, sort: legacySortTheme, kbd: legacyKbdTheme, From d906fce2cfbaa5181adcf4f6e295bf994d9708c6 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:34:16 +0300 Subject: [PATCH 042/139] VerticalSpacer theme updates --- .../VerticalSpacer/VerticalSpacerTheme.ts | 18 +----------------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/src/layout/VerticalSpacer/VerticalSpacerTheme.ts b/src/layout/VerticalSpacer/VerticalSpacerTheme.ts index 383087477..24d18e8ef 100644 --- a/src/layout/VerticalSpacer/VerticalSpacerTheme.ts +++ b/src/layout/VerticalSpacer/VerticalSpacerTheme.ts @@ -11,7 +11,7 @@ export interface VerticalSpacerTheme { }; } -const baseTheme: VerticalSpacerTheme = { +export const verticalSpacerTheme = { base: '', size: { xs: 'h-0.5', @@ -22,19 +22,3 @@ const baseTheme: VerticalSpacerTheme = { xxl: 'h-8' } }; - -export const verticalSpacerTheme = { - ...baseTheme -}; - -export const legacyVerticalSpacerTheme = { - ...baseTheme, - size: { - xs: 'h-[var(--spacing-xs)]', - sm: 'h-[var(--spacing-sm)]', - md: 'h-[var(--spacing-md)]', - lg: 'h-[var(--spacing-lg)]', - xl: 'h-[var(--spacing-xl)]', - xxl: 'h-[var(--spacing-xxl)]' - } -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 82a708ae3..f7199d7f8 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -87,7 +87,6 @@ import { ListTheme, stackTheme, StackTheme, - legacyVerticalSpacerTheme, legacyDividerTheme, JsonTreeTheme, jsonTreeTheme, @@ -233,7 +232,6 @@ export const legacyThemeVars: DeepPartial = { ellipsis: legacyEllipsisTheme, sort: legacySortTheme, kbd: legacyKbdTheme, - verticalSpacer: legacyVerticalSpacerTheme, commandPalette: legacyCommandPaletteTheme, typography: legacyTypographyTheme, stepper: legacyStepperTheme From 5ed0caada469d04c47019b8d0d1eb397541512cd Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:49:33 +0300 Subject: [PATCH 043/139] DateFormat theme updates --- src/data/DateFormat/DateFormatTheme.ts | 11 +---------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/src/data/DateFormat/DateFormatTheme.ts b/src/data/DateFormat/DateFormatTheme.ts index 8183d5578..6be1c85d1 100644 --- a/src/data/DateFormat/DateFormatTheme.ts +++ b/src/data/DateFormat/DateFormatTheme.ts @@ -3,16 +3,7 @@ export interface DateFormatTheme { interactive: string; } -const baseTheme: DateFormatTheme = { +export const dateFormatTheme: DateFormatTheme = { base: 'cursor-text', interactive: 'cursor-pointer hover:underline' }; - -export const dateFormatTheme: DateFormatTheme = { - ...baseTheme -}; - -export const legacyDateFormatTheme: DateFormatTheme = { - ...baseTheme, - base: [baseTheme.base, 'text-[var(--color-primary)]'].join(' ') -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index f7199d7f8..4130ee046 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -114,7 +114,6 @@ import { sortTheme, DateFormatTheme, dateFormatTheme, - legacyDateFormatTheme, legacyEllipsisTheme, legacySortTheme } from '@/data'; @@ -227,7 +226,6 @@ export const legacyThemeVars: DeepPartial = { arrow: legacyArrowTheme, badge: legacyBadgeTheme, chip: legacyChipTheme, - dateFormat: legacyDateFormatTheme, divider: legacyDividerTheme, ellipsis: legacyEllipsisTheme, sort: legacySortTheme, From 9d90277ef433dc85866672c2ded709f982750868 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:51:19 +0300 Subject: [PATCH 044/139] Ellipsis theme updates --- src/data/Ellipsis/EllipsisTheme.ts | 10 +--------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/data/Ellipsis/EllipsisTheme.ts b/src/data/Ellipsis/EllipsisTheme.ts index ce8b51441..fcac003e7 100644 --- a/src/data/Ellipsis/EllipsisTheme.ts +++ b/src/data/Ellipsis/EllipsisTheme.ts @@ -2,14 +2,6 @@ export interface EllipsisTheme { dots: string; } -const baseTheme: EllipsisTheme = { - dots: 'cursor-pointer opacity-50 text-[unset] p-0 border-[none] outline-hidden' -}; - export const ellipsisTheme: EllipsisTheme = { - ...baseTheme -}; - -export const legacyEllipsisTheme: EllipsisTheme = { - ...baseTheme + dots: 'cursor-pointer opacity-50 text-[unset] p-0 border-[none] outline-hidden' }; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 4130ee046..944fc54b1 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -114,7 +114,6 @@ import { sortTheme, DateFormatTheme, dateFormatTheme, - legacyEllipsisTheme, legacySortTheme } from '@/data'; import { DeepPartial } from 'react-hook-form'; @@ -227,7 +226,6 @@ export const legacyThemeVars: DeepPartial = { badge: legacyBadgeTheme, chip: legacyChipTheme, divider: legacyDividerTheme, - ellipsis: legacyEllipsisTheme, sort: legacySortTheme, kbd: legacyKbdTheme, commandPalette: legacyCommandPaletteTheme, From f74113c5df7657a72451d86c0c99e513f935356e Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:53:15 +0300 Subject: [PATCH 045/139] Sort theme updates --- src/data/Sort/SortTheme.ts | 15 +-------------- src/utils/Theme/themes/theme.ts | 4 +--- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/data/Sort/SortTheme.ts b/src/data/Sort/SortTheme.ts index bba8e2f5e..ecd3ebabb 100644 --- a/src/data/Sort/SortTheme.ts +++ b/src/data/Sort/SortTheme.ts @@ -8,7 +8,7 @@ export interface SortTheme { }; } -const baseTheme: SortTheme = { +export const sortTheme: SortTheme = { base: 'cursor-pointer select-none flex items-center relative', disabled: 'cursor-[initial]', hasValue: 'cursor-not-allowed', @@ -17,16 +17,3 @@ const baseTheme: SortTheme = { ascending: 'rotate-180' } }; - -export const sortTheme: SortTheme = { - ...baseTheme, - base: [baseTheme.base, 'text-text-primary'].join(' ') -}; - -export const legacySortTheme: SortTheme = { - ...baseTheme, - icon: { - ...baseTheme.icon, - base: 'h-[var(--sort-icon-size)] w-[var(--sort-icon-size)] mx-[var(--spacing-sm)] fill-[var(--sort-icon-color)]' - } -}; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 944fc54b1..4f05ff42e 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -113,8 +113,7 @@ import { SortTheme, sortTheme, DateFormatTheme, - dateFormatTheme, - legacySortTheme + dateFormatTheme } from '@/data'; import { DeepPartial } from 'react-hook-form'; @@ -226,7 +225,6 @@ export const legacyThemeVars: DeepPartial = { badge: legacyBadgeTheme, chip: legacyChipTheme, divider: legacyDividerTheme, - sort: legacySortTheme, kbd: legacyKbdTheme, commandPalette: legacyCommandPaletteTheme, typography: legacyTypographyTheme, From e6ff8e5736b437d1345637f24547dec507d04c1a Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 5 Aug 2025 16:56:25 +0300 Subject: [PATCH 046/139] Kbd theme updates --- src/elements/Kbd/KbdTheme.ts | 17 ++--------------- src/utils/Theme/themes/theme.ts | 2 -- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/elements/Kbd/KbdTheme.ts b/src/elements/Kbd/KbdTheme.ts index d08c951e4..153465269 100644 --- a/src/elements/Kbd/KbdTheme.ts +++ b/src/elements/Kbd/KbdTheme.ts @@ -3,20 +3,7 @@ export interface KbdTheme { chip: string; } -const baseTheme: KbdTheme = { - base: 'inline-flex gap-1 items-center', - chip: 'whitespace-nowrap rounded-sm font-mono' -}; - export const kbdTheme: KbdTheme = { - ...baseTheme -}; - -export const legacyKbdTheme: KbdTheme = { - ...baseTheme, - base: [baseTheme.base, 'gap-[var(--spacing-sm)]'].join(' '), - chip: [ - baseTheme.chip, - 'rounded-[var(--border-radius-sm)] [font-family:_var(--mono-font-family)]' - ].join(' ') + base: 'inline-flex gap-1 items-center', + chip: 'whitespace-nowrap rounded-sm font-mono border-none bg-indicators-colors-primary-background-resting' }; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 4f05ff42e..c741d1e36 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -20,7 +20,6 @@ import { legacyArrowTheme, legacyBadgeTheme, legacyChipTheme, - legacyKbdTheme, legacyCommandPaletteTheme } from '@/elements'; @@ -225,7 +224,6 @@ export const legacyThemeVars: DeepPartial = { badge: legacyBadgeTheme, chip: legacyChipTheme, divider: legacyDividerTheme, - kbd: legacyKbdTheme, commandPalette: legacyCommandPaletteTheme, typography: legacyTypographyTheme, stepper: legacyStepperTheme From 57690fb1600cf1d3bae2d8208c9df80fac616fe1 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 6 Aug 2025 12:23:10 +0300 Subject: [PATCH 047/139] Stepper theme updates --- src/layout/Stepper/Stepper.story.tsx | 139 +++++++++++++++++---------- src/layout/Stepper/Stepper.tsx | 72 +++++++------- src/layout/Stepper/StepperTheme.tsx | 39 ++++++-- 3 files changed, 155 insertions(+), 95 deletions(-) diff --git a/src/layout/Stepper/Stepper.story.tsx b/src/layout/Stepper/Stepper.story.tsx index cae8b1678..bf88753a2 100644 --- a/src/layout/Stepper/Stepper.story.tsx +++ b/src/layout/Stepper/Stepper.story.tsx @@ -1,4 +1,4 @@ -import { Stepper } from './Stepper'; +import { Stepper } from '@/layout'; import { Step } from './Step'; export default { @@ -10,12 +10,12 @@ export const Markers = () => (
- + 03/01/2024, 8:00 AM Austin{' '} - + created ticket @@ -23,20 +23,23 @@ export const Markers = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} Backlog - to In - Progress + + {' '} + to{' '} + + In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -45,17 +48,21 @@ export const Markers = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} In Progress - to Done + + {' '} + to{' '} + + Done
@@ -66,12 +73,12 @@ export const Numbered = () => (
- + 03/01/2024, 8:00 AM Austin{' '} - + created ticket @@ -79,20 +86,23 @@ export const Numbered = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} Backlog - to In - Progress + + {' '} + to{' '} + + In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -101,17 +111,21 @@ export const Numbered = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} In Progress - to Done + + {' '} + to{' '} + + Done
@@ -119,15 +133,15 @@ export const Numbered = () => ( ); export const Labels = () => ( - +
- + 03/01/2024, 8:00 AM Austin{' '} - + created ticket @@ -135,20 +149,23 @@ export const Labels = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} Backlog - to In - Progress + + {' '} + to{' '} + + In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -157,17 +174,21 @@ export const Labels = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} In Progress - to Done + + {' '} + to{' '} + + Done
@@ -178,12 +199,12 @@ export const Mixed = () => (
- + 03/01/2024, 8:00 AM Austin{' '} - + created ticket @@ -191,20 +212,23 @@ export const Mixed = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} Backlog - to In - Progress + + {' '} + to{' '} + + In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -213,17 +237,21 @@ export const Mixed = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} In Progress - to Done + + {' '} + to{' '} + + Done
@@ -234,12 +262,12 @@ export const Animated = () => (
- + 03/01/2024, 8:00 AM Austin{' '} - + created ticket @@ -247,20 +275,23 @@ export const Animated = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} Backlog - to In - Progress + + {' '} + to{' '} + + In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -269,17 +300,21 @@ export const Animated = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} In Progress - to Done + + {' '} + to{' '} + + Done
diff --git a/src/layout/Stepper/Stepper.tsx b/src/layout/Stepper/Stepper.tsx index f499cacb1..1e5415440 100644 --- a/src/layout/Stepper/Stepper.tsx +++ b/src/layout/Stepper/Stepper.tsx @@ -62,47 +62,53 @@ export const Stepper: FC = ({ {childrenStepProps.map((props: StepProps, index) => (
- -
- {/* Numbered marker */} - {variant === 'numbered' && ( -
- {index + 1} -
- )} - {/* Labeled marker */} - {variant !== 'numbered' && props.label && ( -
-
- {props.label} -
- )} - {/* Dot marker */} - {variant !== 'numbered' && !props.label && ( + + {/* Numbered marker */} + {variant === 'numbered' && ( +
+ {index + 1} +
+ )} + {/* Labeled marker */} + {variant !== 'numbered' && props.label && ( +
- )} -
+ {props.label} +
+ )} + {/* Dot marker */} + {variant !== 'numbered' && !props.label && ( +
+ )}
diff --git a/src/layout/Stepper/StepperTheme.tsx b/src/layout/Stepper/StepperTheme.tsx index c66024042..e8ccad239 100644 --- a/src/layout/Stepper/StepperTheme.tsx +++ b/src/layout/Stepper/StepperTheme.tsx @@ -1,9 +1,17 @@ export interface StepperTheme { base: string; step: { - base: string; + base: { + common: string; + dot: string; + circle: string; + }; marker: { - container: string; + container: { + common: string; + dot: string; + circle: string; + }; base: string; active: string; label: { @@ -19,18 +27,29 @@ export interface StepperTheme { export const stepperTheme: StepperTheme = { base: 'grid grid-cols-[min-content_1fr] gap-x-3', step: { - base: 'border-l border-solid border-panel-accent translate-x-1/2', + base: { + common: + 'border-l border-solid border-buttons-colors-core-icon-outline-stroke-resting translate-x-1/2', + dot: 'mt-4', + circle: 'mt-10' + }, marker: { - base: 'rounded-full w-[9px] h-[9px] bg-surface', - container: - 'w-max pt-1 pb-0.5 backdrop-blur-md -translate-x-[calc(50%+0.5px)]', - active: 'bg-info', + base: 'rounded-full w-2.5 h-2.5 bg-tags-colors-brand-assets-close-base', + container: { + common: + 'text-badges-colors-outline-brand-text-default w-max relative bg-transparent -translate-x-[calc(50%+0.5px)]', + dot: '-top-3', + circle: '-top-8.5' + }, + active: + 'border border-badges-colors-outline-brand-stroke-default bg-badges-colors-solid-brand-background-standard', label: { - base: 'flex flex-row items-center gap-1 border border-solid border-surface px-3 py-1 rounded-[20px]', - active: 'border-info bg-info-background' + base: 'flex flex-row items-center gap-1 border border-tags-colors-brand-assets-close-base px-3 py-1 rounded-[20px]', + active: + 'border-badges-colors-outline-brand-stroke-default bg-badges-colors-outline-brand-background-standard' } }, - active: 'border-primary', + active: 'border-badges-colors-outline-brand-stroke-default', content: 'pb-6' } }; From a644f03b84a6b7d614091093102a282628220cdf Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 6 Aug 2025 12:24:16 +0300 Subject: [PATCH 048/139] Remove legacy Stepper theme --- src/layout/Stepper/StepperTheme.tsx | 2 -- src/utils/Theme/themes/theme.ts | 6 ++---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/layout/Stepper/StepperTheme.tsx b/src/layout/Stepper/StepperTheme.tsx index e8ccad239..bcd7eb039 100644 --- a/src/layout/Stepper/StepperTheme.tsx +++ b/src/layout/Stepper/StepperTheme.tsx @@ -53,5 +53,3 @@ export const stepperTheme: StepperTheme = { content: 'pb-6' } }; - -export const legacyStepperTheme: StepperTheme = stepperTheme; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index c741d1e36..a9f1523ff 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -92,8 +92,7 @@ import { breadcrumbsTheme, BreadcrumbsTheme, StepperTheme, - stepperTheme, - legacyStepperTheme + stepperTheme } from '@/layout'; import { @@ -225,7 +224,6 @@ export const legacyThemeVars: DeepPartial = { chip: legacyChipTheme, divider: legacyDividerTheme, commandPalette: legacyCommandPaletteTheme, - typography: legacyTypographyTheme, - stepper: legacyStepperTheme + typography: legacyTypographyTheme } }; From 42ed77e32710961d10a944f85658c5641422bc37 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Wed, 6 Aug 2025 12:49:26 +0300 Subject: [PATCH 049/139] Update variables and timeline blocks --- docs/blocks/foundation/Timeline.story.tsx | 56 +-- src/assets/css/tw/colors.css | 414 ++++++++++++++++++++++ src/layout/Stepper/StepperTheme.tsx | 15 +- 3 files changed, 448 insertions(+), 37 deletions(-) diff --git a/docs/blocks/foundation/Timeline.story.tsx b/docs/blocks/foundation/Timeline.story.tsx index 62f023f51..0348067e8 100644 --- a/docs/blocks/foundation/Timeline.story.tsx +++ b/docs/blocks/foundation/Timeline.story.tsx @@ -21,16 +21,16 @@ export const ActivityTimeline = () => ( animate={{ y: 0, opacity: 1 }} className="mt-10 sm:mx-auto sm:w-full md:w-[820px]" > - +
- + 03/01/2024, 8:00 AM Austin{' '} - + created ticket @@ -38,17 +38,17 @@ export const ActivityTimeline = () => (
- + 03/02/2024, 10:00 AM Austin - + {' '} changed statues from{' '} Backlog - + {' '} to{' '} @@ -58,18 +58,18 @@ export const ActivityTimeline = () => (
- + 03/03/2024, 10:15 AM Austin - + {' '} left a comment{' '} -
-
+
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -98,17 +98,17 @@ export const ActivityTimeline = () => (
- + 03/01/2024, 8:00 AM Austin - + {' '} changed statues from{' '} In Progress - + {' '} to{' '} @@ -118,7 +118,7 @@ export const ActivityTimeline = () => ( -
+