From d8d0cf724f37b07035947eb25f203013467b64e2 Mon Sep 17 00:00:00 2001 From: Oksamies Date: Tue, 17 Sep 2024 20:57:13 +0300 Subject: [PATCH] Backwards compat for old components --- apps/cyberstorm-remix/app/Error.module.css | 4 +- apps/cyberstorm-remix/app/Markdown.module.css | 2 +- .../CategoryTagCloud.module.css | 6 +- .../FilterMenus/CollapsibleMenu.module.css | 4 +- .../FilterMenus/FilterMenu.module.css | 4 +- apps/cyberstorm-remix/app/p/Tabs.module.css | 6 +- .../app/p/dependants/Dependants.module.css | 2 +- .../app/settings/teams/team/Tabs.module.css | 6 +- .../app/settings/user/Tabs.module.css | 6 +- .../PackageFormatDocs.module.css | 2 +- .../navigation/Navigation.module.css | 4 - .../.storybook/preview.js | 2 +- .../stories/components/Tooltip.stories.tsx | 2 +- .../cyberstorm-styles/src/styles/colors.css | 83 +++++++++++++++++++ .../cyberstorm-styles/src/styles/theme.css | 57 +++++++------ packages/cyberstorm/README.md | 2 +- .../src/components/Avatar/Avatar.module.css | 2 +- .../BreadCrumbs/BreadCrumbs.module.css | 2 +- .../src/components/Button/Button.module.css | 30 +++---- .../CommunityCard/CommunityCard.module.css | 2 +- .../ImageWithFallback.module.css | 4 +- .../components/Markdown/Markdown.module.css | 2 +- .../MultiSelectSearch.module.css | 8 +- .../src/components/NewTabs/Tabs.module.css | 6 +- .../SelectSearch/SelectSearch.module.css | 8 +- .../src/components/Tag/Tag.module.css | 12 +-- .../components/TextInput/TextInput.module.css | 8 +- 27 files changed, 177 insertions(+), 99 deletions(-) diff --git a/apps/cyberstorm-remix/app/Error.module.css b/apps/cyberstorm-remix/app/Error.module.css index 82747fc0c..0006e9bed 100644 --- a/apps/cyberstorm-remix/app/Error.module.css +++ b/apps/cyberstorm-remix/app/Error.module.css @@ -5,8 +5,8 @@ align-items: center; justify-content: center; - --glitch-color-1: var(--color-cyber-green--50); - --glitch-color-2: var(--color-pink--50); + --glitch-color-1: var(--old--color-cyber-green--50); + --glitch-color-2: var(--old--color-pink--50); } .description { diff --git a/apps/cyberstorm-remix/app/Markdown.module.css b/apps/cyberstorm-remix/app/Markdown.module.css index 8249431df..5ef7478c9 100644 --- a/apps/cyberstorm-remix/app/Markdown.module.css +++ b/apps/cyberstorm-remix/app/Markdown.module.css @@ -96,7 +96,7 @@ color: #f5f5f6; } -.root a { color: var(--color-cyber-green--50); } +.root a { color: var(--old--color-cyber-green--50); } .root blockquote { display: flex; diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css index ff13160cd..c7065d428 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css @@ -16,8 +16,8 @@ } .tag.exclude { - --text-color: var(--color-red--3); - --bg-color: var(--color-red--10); + --text-color: var(--old--color-red--3); + --bg-color: var(--old--color-red--10); } .icon { @@ -26,5 +26,5 @@ } .tag.exclude .icon { - --text-color: var(--color-red--3); + --text-color: var(--old--color-red--3); } diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css index 3004478a4..1b9d47f99 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css @@ -32,13 +32,13 @@ transition: var(--animation-length-xs); user-select: none; - --mark-color: var(--color-purple--6); + --mark-color: var(--old--color-purple--6); } .label:hover { background-color: var(--color-surface--4); - --mark-color: var(--color-purple--2); + --mark-color: var(--old--color-purple--2); } .checkbox { diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css index 6888683a6..2e15a516a 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css @@ -26,13 +26,13 @@ transition: var(--animation-length-xs); user-select: none; - --mark-color: var(--color-purple--6); + --mark-color: var(--old--color-purple--6); } .label:hover { background-color: var(--color-surface--4); - --mark-color: var(--color-purple--2); + --mark-color: var(--old--color-purple--2); } .checkbox { diff --git a/apps/cyberstorm-remix/app/p/Tabs.module.css b/apps/cyberstorm-remix/app/p/Tabs.module.css index 5e4036fe1..913bfebda 100644 --- a/apps/cyberstorm-remix/app/p/Tabs.module.css +++ b/apps/cyberstorm-remix/app/p/Tabs.module.css @@ -7,7 +7,7 @@ .buttons { display: flex; - border-bottom: 3px solid var(--color-purple--5); + border-bottom: 3px solid var(--old--color-purple--5); } .button { @@ -20,7 +20,7 @@ margin-bottom: -3px; padding: var(--space--12) var(--space--16); - border-bottom: 3px solid var(--color-purple--5); + border-bottom: 3px solid var(--old--color-purple--5); color: var(--tab-color); background-color: transparent; @@ -30,7 +30,7 @@ .button.active { border-color: var(--tab-color); - --tab-color: var(--color-green--5); + --tab-color: var(--old--color-green--5); } .button:disabled { diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css b/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css index 13efecaea..977281272 100644 --- a/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css +++ b/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css @@ -46,5 +46,5 @@ } .header a { - color: var(--color-cyber-green--60); + color: var(--old--color-cyber-green--60); } diff --git a/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css b/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css index 5e4036fe1..913bfebda 100644 --- a/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css +++ b/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css @@ -7,7 +7,7 @@ .buttons { display: flex; - border-bottom: 3px solid var(--color-purple--5); + border-bottom: 3px solid var(--old--color-purple--5); } .button { @@ -20,7 +20,7 @@ margin-bottom: -3px; padding: var(--space--12) var(--space--16); - border-bottom: 3px solid var(--color-purple--5); + border-bottom: 3px solid var(--old--color-purple--5); color: var(--tab-color); background-color: transparent; @@ -30,7 +30,7 @@ .button.active { border-color: var(--tab-color); - --tab-color: var(--color-green--5); + --tab-color: var(--old--color-green--5); } .button:disabled { diff --git a/apps/cyberstorm-remix/app/settings/user/Tabs.module.css b/apps/cyberstorm-remix/app/settings/user/Tabs.module.css index 5e4036fe1..913bfebda 100644 --- a/apps/cyberstorm-remix/app/settings/user/Tabs.module.css +++ b/apps/cyberstorm-remix/app/settings/user/Tabs.module.css @@ -7,7 +7,7 @@ .buttons { display: flex; - border-bottom: 3px solid var(--color-purple--5); + border-bottom: 3px solid var(--old--color-purple--5); } .button { @@ -20,7 +20,7 @@ margin-bottom: -3px; padding: var(--space--12) var(--space--16); - border-bottom: 3px solid var(--color-purple--5); + border-bottom: 3px solid var(--old--color-purple--5); color: var(--tab-color); background-color: transparent; @@ -30,7 +30,7 @@ .button.active { border-color: var(--tab-color); - --tab-color: var(--color-green--5); + --tab-color: var(--old--color-green--5); } .button:disabled { diff --git a/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css b/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css index d5bd7ec4c..d1390fb3a 100644 --- a/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css +++ b/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css @@ -6,5 +6,5 @@ .greenWrap { height: 1rem; - color: var(--color-cyber-green--60); + color: var(--old--color-cyber-green--60); } diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css index 19bae619a..71cb192f0 100644 --- a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css +++ b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css @@ -174,10 +174,6 @@ height: 2.79rem; } -.TSLoginLogo > svg { - fill: var(--color-cyber-green--60); -} - .loginTitle { color: #f5f5f6; font-weight: 700; diff --git a/apps/cyberstorm-storybook/.storybook/preview.js b/apps/cyberstorm-storybook/.storybook/preview.js index f0a11c774..374281c5e 100644 --- a/apps/cyberstorm-storybook/.storybook/preview.js +++ b/apps/cyberstorm-storybook/.storybook/preview.js @@ -8,7 +8,7 @@ export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, backgrounds: { default: "thunderstore", - values: [{ name: "thunderstore", value: "var(--color-background)" }], + values: [{ name: "thunderstore", value: "var(--body-bg-color)" }], }, controls: { matchers: { diff --git a/apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx b/apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx index c3e2da2db..d34810097 100644 --- a/apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx +++ b/apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx @@ -13,7 +13,7 @@ const Template: StoryFn = (args) => ( display: "flex", flexDirection: "column", gap: "var(--gap--4)", - backgroundColor: "var(--color-cyber-green--40)", + backgroundColor: "var(--old--color-cyber-green--40)", padding: "var(--space--16)", }} > diff --git a/packages/cyberstorm-styles/src/styles/colors.css b/packages/cyberstorm-styles/src/styles/colors.css index 315f46b33..aa55a8699 100644 --- a/packages/cyberstorm-styles/src/styles/colors.css +++ b/packages/cyberstorm-styles/src/styles/colors.css @@ -1,4 +1,87 @@ :root { + /* OLD COLORS FOR COMPATIBILITY UNTIL ALL PAGES ARE CONVERTED */ + --old--color-purple--0: rgb(13 13 28); + --old--color-purple--1: rgb(18 18 38); + --old--color-purple--2: rgb(21 21 45); + --old--color-purple--3: rgb(25 25 56); + --old--color-purple--4: rgb(29 29 68); + --old--color-purple--5: rgb(33 33 79); + --old--color-purple--6: rgb(39 39 93); + --old--color-purple--7: rgb(48 48 115); + --old--color-purple--8: rgb(55 55 134); + --old--color-purple--9: rgb(67 67 163); + --old--color-purple--10: rgb(75 54 161); + --old--color-cyber-green--90: rgb(211 255 239); + --old--color-cyber-green--80: rgb(145 255 216); + --old--color-cyber-green--70: rgb(123 255 208); + --old--color-cyber-green--60: rgb(79 255 192); + --old--color-cyber-green--50: rgb(35 255 176); + --old--color-cyber-green--40: rgb(28 204 141); + --old--color-cyber-green--30: rgb(21 153 106); + --old--color-cyber-green--20: rgb(14 102 70); + --old--color-cyber-green--10: rgb(3 25 18); + --old--color-blue--90: rgb(232 246 254); + --old--color-blue--80: rgb(187 227 252); + --old--color-blue--70: rgb(119 200 249); + --old--color-blue--60: rgb(73 181 247); + --old--color-blue--50: rgb(28 163 245); + --old--color-blue--40: rgb(22 130 196); + --old--color-blue--30: rgb(17 98 147); + --old--color-blue--20: rgb(11 65 98); + --old--color-blue--10: rgb(6 33 49); + --old--color-green--1: rgb(220 247 236); + --old--color-green--2: rgb(185 240 217); + --old--color-green--3: rgb(150 232 197); + --old--color-green--4: rgb(115 225 178); + --old--color-green--5: rgb(80 217 159); + --old--color-green--6: rgb(64 174 127); + --old--color-green--7: rgb(48 130 95); + --old--color-green--8: rgb(32 87 64); + --old--color-green--9: rgb(24 65 48); + --old--color-green--10: rgb(16 43 32); + --old--color-green--11: rgba(8 22 16); + --old--color-yellow--1: rgb(253 245 220); + --old--color-yellow--2: rgb(250 236 185); + --old--color-yellow--3: rgb(248 226 149); + --old--color-yellow--4: rgb(245 217 114); + --old--color-yellow--5: rgb(243 207 79); + --old--color-yellow--6: rgb(194 166 63); + --old--color-yellow--7: rgb(146 124 47); + --old--color-yellow--8: rgb(97 83 32); + --old--color-yellow--9: rgb(73 62 24); + --old--color-yellow--10: rgb(49 41 16); + --old--color-yellow--11: rgb(24 21 8); + --old--color-orange--90: rgb(253 225 217); + --old--color-orange--80: rgb(251 196 178); + --old--color-orange--70: rgb(250 166 140); + --old--color-orange--60: rgb(248 137 101); + --old--color-orange--50: rgb(246 107 63); + --old--color-orange--40: rgb(197 86 50); + --old--color-orange--30: rgb(148 64 38); + --old--color-orange--20: rgb(98 43 25); + --old--color-orange--10: rgb(49 21 13); + --old--color-pink--90: rgb(249 221 246); + --old--color-pink--80: rgb(242 187 237); + --old--color-pink--70: rgb(236 154 227); + --old--color-pink--60: rgb(229 120 218); + --old--color-pink--50: rgb(223 86 209); + --old--color-pink--40: rgb(178 69 167); + --old--color-pink--30: rgb(134 52 125); + --old--color-pink--20: rgb(89 34 84); + --old--color-pink--10: rgb(45 17 42); + --old--color-red--1: rgb(252 215 222); + --old--color-red--2: rgb(249 175 189); + --old--color-red--3: rgb(247 136 156); + --old--color-red--4: rgb(244 96 123); + --old--color-red--5: rgb(241 56 90); + --old--color-red--6: rgb(193 45 72); + --old--color-red--7: rgb(145 34 54); + --old--color-red--8: rgb(96 22 36); + --old--color-red--9: rgb(72 17 27); + --old--color-red--10: rgb(48 11 18); + --old--color-red--11: rgb(24 6 9); + + /* NEW COLORS */ --color-black: rgb(0 0 0); --color-white: rgb(255 255 255); --color-primary: hsl(240deg 5% 96% / 1); diff --git a/packages/cyberstorm-styles/src/styles/theme.css b/packages/cyberstorm-styles/src/styles/theme.css index 2de8485bb..aaaf8420b 100644 --- a/packages/cyberstorm-styles/src/styles/theme.css +++ b/packages/cyberstorm-styles/src/styles/theme.css @@ -3,33 +3,32 @@ --body-bg-color-a: hsl(240deg 39% 13% / 0.85); /* OLD STYLES FROM THIS POINT ONWARDS */ - --color-danger: var(--color-red--5); - --color-danger-background: var(--color-red--8); - --color-danger-background--hover: var(--color-red--9); - --color-danger--hover: var(--color-red--6); - --color-danger-text: var(--color-red--1); - --color-warning-text: var(--color-yellow--1); - --color-warning-background: var(--color-yellow--8); - --color-warning-background--hover: var(--color-yellow--9); - --color-success-text: var(--color-green--1); - --color-success-background: var(--color-green--8); - --color-success-background--hover: var(--color-green--9); - --color-crown: var(--color-yellow--5); - --color-info: var(--color-blue--70); - --color-info-background: var(--color-blue--10); - - /* --color-surface--0: var(--color-purple--0); - --color-surface--1: var(--color-purple--1); - --color-surface--2: var(--color-purple--2); - --color-surface--3: var(--color-purple--3); - --color-surface--4: var(--color-purple--4); - --color-surface--5: var(--color-purple--5); - --color-surface--6: var(--color-purple--6); - --color-surface--7: var(--color-purple--7); - --color-surface--8: var(--color-purple--8); - --color-surface--9: var(--color-purple--9); - --color-surface--10: var(--color-purple--10); - --color-surface--10--hover: rgb(59 42 126 / 1); */ + --color-danger: var(--old--color-red--5); + --color-danger-background: var(--old--color-red--8); + --color-danger-background--hover: var(--old--color-red--9); + --color-danger--hover: var(--old--color-red--6); + --color-danger-text: var(--old--color-red--1); + --color-warning-text: var(--old--color-yellow--1); + --color-warning-background: var(--old--color-yellow--8); + --color-warning-background--hover: var(--old--color-yellow--9); + --color-success-text: var(--old--color-green--1); + --color-success-background: var(--old--color-green--8); + --color-success-background--hover: var(--old--color-green--9); + --color-crown: var(--old--color-yellow--5); + --color-info: var(--old--color-blue--70); + --color-info-background: var(--old--color-blue--10); + --old--color-surface--0: var(--old--color-purple--0); + --old--color-surface--1: var(--old--color-purple--1); + --old--color-surface--2: var(--old--color-purple--2); + --old--color-surface--3: var(--old--color-purple--3); + --old--color-surface--4: var(--old--color-purple--4); + --old--color-surface--5: var(--old--color-purple--5); + --old--color-surface--6: var(--old--color-purple--6); + --old--color-surface--7: var(--old--color-purple--7); + --old--color-surface--8: var(--old--color-purple--8); + --old--color-surface--9: var(--old--color-purple--9); + --old--color-surface--10: var(--old--color-purple--10); + --old--color-surface--10--hover: rgb(59 42 126 / 1); --color-border: rgb(54 52 91 / 1); --color-border--highlight: rgb(93 90 159); --color-shadow-1: rgb(0 0 0 / 0.7); @@ -42,8 +41,8 @@ --color-gradient-purple-green: linear-gradient(to left top, rgb(157 48 228) 0%, rgb(35 255 176) 100%); --color-gradient-purple-green--light: linear-gradient(to left top, rgb(177 89 233) 0%, rgb(115 225 178) 100%); --color-gradient-vibrant: linear-gradient(to left, rgb(157 48 228) 0%, rgb(28 167 245) 50%, rgb(35 255 176) 100%); - --color-highlight--hover: var(--color-cyber-green--40); - --color-highlight: var(--color-cyber-green--50); + --color-highlight--hover: var(--old--color-cyber-green--40); + --color-highlight: var(--old--color-cyber-green--50); --box-shadow-default: 0 0.75em 1.5em 0.25em rgb(0 0 0 / 0.65); --box-shadow-small: 0 0.25em 0.75em 0.125em rgb(0 0 0 / 0.65); --box-shadow-special-green: 0 0 1em rgb(80 217 159 / 0.32); diff --git a/packages/cyberstorm/README.md b/packages/cyberstorm/README.md index a33a731ff..9c03e54f4 100644 --- a/packages/cyberstorm/README.md +++ b/packages/cyberstorm/README.md @@ -65,7 +65,7 @@ Storybook can then be accessed at [http://localhost:6006/](http://localhost:6006 1. examples of global CSS variable names: - `--color-gradient-blue-green--darker` - `--font-weight-bold` - - `--color-cyber-green--70` + - `--old--color-cyber-green--70` - `--padding-m` 2. When reasonable, don't use the `--size` variables directly, instead proxy them like this: diff --git a/packages/cyberstorm/src/components/Avatar/Avatar.module.css b/packages/cyberstorm/src/components/Avatar/Avatar.module.css index 8c5a58a30..0975c9f59 100644 --- a/packages/cyberstorm/src/components/Avatar/Avatar.module.css +++ b/packages/cyberstorm/src/components/Avatar/Avatar.module.css @@ -30,7 +30,7 @@ } .image:where(.placeholderIcon) { - color: var(--color-purple--9); + color: var(--old--color-purple--9); } .image:where(.placeholderIcon):hover { diff --git a/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css b/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css index c02964a67..dda15b2d9 100644 --- a/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css +++ b/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css @@ -2,7 +2,7 @@ display: flex; gap: var(--space--4); padding-left: var(--space--16); - color: var(--color-cyber-green--60); + color: var(--old--color-cyber-green--60); } .outer { diff --git a/packages/cyberstorm/src/components/Button/Button.module.css b/packages/cyberstorm/src/components/Button/Button.module.css index f50537a33..6212a631e 100644 --- a/packages/cyberstorm/src/components/Button/Button.module.css +++ b/packages/cyberstorm/src/components/Button/Button.module.css @@ -21,7 +21,7 @@ --font-size: var(--font-size--l); --text-color: var(--color-text--default); - --bg-color: var(--color-surface--7); + --bg-color: var(--old--color-surface--7); --button-border-color: transparent; --button-border-width: var(--border-width--2); } @@ -38,44 +38,44 @@ .button__default { --text-color: var(--color-text--default); - --bg-color: var(--color-surface--7); + --bg-color: var(--old--color-surface--7); } .button__default:hover { - --bg-color: var(--color-surface--10); + --bg-color: var(--old--color-surface--10); --button-border-color: transparent; } .button__primary { - --bg-color: var(--color-surface--10); + --bg-color: var(--old--color-surface--10); } .button__primary:hover { - --bg-color: var(--color-surface--10--hover); + --bg-color: var(--old--color-surface--10--hover); } .button__fancyAccent { border: none; - --bg-color: var(--color-cyber-green--60); - --text-color: var(--color-cyber-green--10); + --bg-color: var(--old--color-cyber-green--60); + --text-color: var(--old--color-cyber-green--10); box-shadow: inset 0 -3px 0 0 rgb(0 0 0 / 0.35), inset 0 var(--space--px) 0 0 rgb(255 255 255 / 0.2), - inset 0 0 var(--space--16) 0 var(--color-green--6); + inset 0 0 var(--space--16) 0 var(--old--color-green--6); } .button__fancyAccent:hover { box-shadow: inset 0 -3px 0 0 rgb(0 0 0 / 0.35), inset 0 var(--space--px) 0 0 rgb(255 255 255 / 0.2), - inset 0 0 var(--space--16) 0 var(--color-green--3), + inset 0 0 var(--space--16) 0 var(--old--color-green--3), 0 0 var(--space--10) 0 rgb(79 216 159 / 0.5); } .button__fancyAccent:active { - --bg-color: var(--color-cyber-green--50); + --bg-color: var(--old--color-cyber-green--50); box-shadow: inset 0 var(--space--2) 0 0 rgb(0 0 0 / 0.25), @@ -96,7 +96,7 @@ } .button__tertiary:hover { - --bg-color: var(--color-surface--7); + --bg-color: var(--old--color-surface--7); } .button__success { @@ -216,7 +216,7 @@ } .button__transparentDefault:hover { - --bg-color: var(--color-surface--4); + --bg-color: var(--old--color-surface--4); } .button__transparentDanger { @@ -235,7 +235,7 @@ } .button__transparentTertiary:hover { - --bg-color: var(--color-surface--4); + --bg-color: var(--old--color-surface--4); } .button__transparentPrimary { @@ -245,7 +245,7 @@ .button__transparentPrimary:hover { --text-color: var(--color-highlight--hover); - --bg-color: var(--color-surface--4); + --bg-color: var(--old--color-surface--4); } .button__transparentAccent { @@ -255,7 +255,7 @@ .button__transparentAccent:hover { --text-color: var(--color-text--accent); - --bg-color: var(--color-surface--7); + --bg-color: var(--old--color-surface--7); } .button__wideDarker { diff --git a/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css b/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css index 6bf48926e..3f6ce717f 100644 --- a/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css +++ b/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css @@ -10,7 +10,7 @@ .root:focus-within { border-radius: var(--border-radius--8); - outline: 0.2rem solid var(--color-cyber-green--50); + outline: 0.2rem solid var(--old--color-cyber-green--50); outline-offset: 0.5rem; } diff --git a/packages/cyberstorm/src/components/ImageWithFallback/ImageWithFallback.module.css b/packages/cyberstorm/src/components/ImageWithFallback/ImageWithFallback.module.css index 071d3b918..0c58a1025 100644 --- a/packages/cyberstorm/src/components/ImageWithFallback/ImageWithFallback.module.css +++ b/packages/cyberstorm/src/components/ImageWithFallback/ImageWithFallback.module.css @@ -18,8 +18,8 @@ justify-content: center; border-radius: var(--border-radius--8); overflow: hidden; - color: var(--color-purple--9); - background-color: var(--color-purple--4); + color: var(--old--color-purple--9); + background-color: var(--old--color-purple--4); transition: var(--animation-length-s) ease-out; aspect-ratio: var(--aspect-ratio); } diff --git a/packages/cyberstorm/src/components/Markdown/Markdown.module.css b/packages/cyberstorm/src/components/Markdown/Markdown.module.css index b6f5f44ba..8023e919c 100644 --- a/packages/cyberstorm/src/components/Markdown/Markdown.module.css +++ b/packages/cyberstorm/src/components/Markdown/Markdown.module.css @@ -100,7 +100,7 @@ color: #f5f5f6; } -.root a { color: var(--color-cyber-green--50); } +.root a { color: var(--old--color-cyber-green--50); } .root blockquote { display: flex; diff --git a/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css b/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css index c03ece881..4156c413b 100644 --- a/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css +++ b/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css @@ -64,19 +64,19 @@ } .inputContainer[data-color="red"] { - --border-color: var(--color-red--5); + --border-color: var(--old--color-red--5); } .inputContainer[data-color="red"]:hover { - --border-color: var(--color-red--3); + --border-color: var(--old--color-red--3); } .inputContainer[data-color="green"] { - --border-color: var(--color-cyber-green--50); + --border-color: var(--old--color-cyber-green--50); } .inputContainer[data-color="green"]:hover { - --border-color: var(--color-cyber-green--80); + --border-color: var(--old--color-cyber-green--80); } .clearSearch { diff --git a/packages/cyberstorm/src/components/NewTabs/Tabs.module.css b/packages/cyberstorm/src/components/NewTabs/Tabs.module.css index 5e4036fe1..913bfebda 100644 --- a/packages/cyberstorm/src/components/NewTabs/Tabs.module.css +++ b/packages/cyberstorm/src/components/NewTabs/Tabs.module.css @@ -7,7 +7,7 @@ .buttons { display: flex; - border-bottom: 3px solid var(--color-purple--5); + border-bottom: 3px solid var(--old--color-purple--5); } .button { @@ -20,7 +20,7 @@ margin-bottom: -3px; padding: var(--space--12) var(--space--16); - border-bottom: 3px solid var(--color-purple--5); + border-bottom: 3px solid var(--old--color-purple--5); color: var(--tab-color); background-color: transparent; @@ -30,7 +30,7 @@ .button.active { border-color: var(--tab-color); - --tab-color: var(--color-green--5); + --tab-color: var(--old--color-green--5); } .button:disabled { diff --git a/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css b/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css index c03ece881..4156c413b 100644 --- a/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css +++ b/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css @@ -64,19 +64,19 @@ } .inputContainer[data-color="red"] { - --border-color: var(--color-red--5); + --border-color: var(--old--color-red--5); } .inputContainer[data-color="red"]:hover { - --border-color: var(--color-red--3); + --border-color: var(--old--color-red--3); } .inputContainer[data-color="green"] { - --border-color: var(--color-cyber-green--50); + --border-color: var(--old--color-cyber-green--50); } .inputContainer[data-color="green"]:hover { - --border-color: var(--color-cyber-green--80); + --border-color: var(--old--color-cyber-green--80); } .clearSearch { diff --git a/packages/cyberstorm/src/components/Tag/Tag.module.css b/packages/cyberstorm/src/components/Tag/Tag.module.css index 48944d1de..5fd86632f 100644 --- a/packages/cyberstorm/src/components/Tag/Tag.module.css +++ b/packages/cyberstorm/src/components/Tag/Tag.module.css @@ -111,20 +111,20 @@ } .tag__success { - --bg-color: var(--color-green--10); + --bg-color: var(--old--color-green--10); --border-color: transparent; - --text-color: var(--color-green--5); + --text-color: var(--old--color-green--5); } .tag__success:hover { - --bg-color: var(--color-green--10); - --border-color: var(--color-green--5); - --text-color: var(--color-green--5); + --bg-color: var(--old--color-green--10); + --border-color: var(--old--color-green--5); + --text-color: var(--old--color-green--5); } .tag__info { --bg-color: var(--color-info-background); - --border-color: var(--color-blue--20); + --border-color: var(--old--color-blue--20); --text-color: var(--color-info); --icon-color: var(--color-info); diff --git a/packages/cyberstorm/src/components/TextInput/TextInput.module.css b/packages/cyberstorm/src/components/TextInput/TextInput.module.css index b44484dc6..6741a7c2c 100644 --- a/packages/cyberstorm/src/components/TextInput/TextInput.module.css +++ b/packages/cyberstorm/src/components/TextInput/TextInput.module.css @@ -46,19 +46,19 @@ } .input[data-color="red"] { - --border-color: var(--color-red--5); + --border-color: var(--old--color-red--5); } .input[data-color="red"]:hover { - --border-color: var(--color-red--3); + --border-color: var(--old--color-red--3); } .input[data-color="green"] { - --border-color: var(--color-cyber-green--50); + --border-color: var(--old--color-cyber-green--50); } .input[data-color="green"]:hover { - --border-color: var(--color-cyber-green--80); + --border-color: var(--old--color-cyber-green--80); } .hasLeftIcon {