Skip to content

Commit

Permalink
Backwards compat for old components
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oksamies
Oksamies committed Sep 17, 2024
1 parent ef7d3e1 commit d8d0cf7
Show file tree
Hide file tree
Showing 27 changed files with 177 additions and 99 deletions.
4 changes: 2 additions & 2 deletions apps/cyberstorm-remix/app/Error.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion apps/cyberstorm-remix/app/Markdown.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions ...orm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -26,5 +26,5 @@
}

.tag.exclude .icon {
--text-color: var(--color-red--3);
--text-color: var(--old--color-red--3);
}
4 changes: 2 additions & 2 deletions ...yberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions apps/cyberstorm-remix/app/p/Tabs.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;

Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion apps/cyberstorm-remix/app/p/dependants/Dependants.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,5 @@
}

.header a {
color: var(--color-cyber-green--60);
color: var(--old--color-cyber-green--60);
}
6 changes: 3 additions & 3 deletions apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;

Expand All @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions apps/cyberstorm-remix/app/settings/user/Tabs.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;

Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@

.greenWrap {
height: 1rem;
color: var(--color-cyber-green--60);
color: var(--old--color-cyber-green--60);
}
4 changes: 0 additions & 4 deletions apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,10 +174,6 @@
height: 2.79rem;
}

.TSLoginLogo > svg {
fill: var(--color-cyber-green--60);
}

.loginTitle {
color: #f5f5f6;
font-weight: 700;
Expand Down
2 changes: 1 addition & 1 deletion apps/cyberstorm-storybook/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Template: StoryFn<typeof Tooltip> = (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)",
}}
>
Expand Down
83 changes: 83 additions & 0 deletions packages/cyberstorm-styles/src/styles/colors.css
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
57 changes: 28 additions & 29 deletions packages/cyberstorm-styles/src/styles/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/cyberstorm/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion packages/cyberstorm/src/components/Avatar/Avatar.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
}

.image:where(.placeholderIcon) {
color: var(--color-purple--9);
color: var(--old--color-purple--9);
}

.image:where(.placeholderIcon):hover {
Expand Down
2 changes: 1 addition & 1 deletion packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit d8d0cf7

Please sign in to comment.