Skip to content

Commit acf9a8e

Browse files
sujalgoelsujalgoel
authored
fix(styles): replace arbitrary color values with named Tailwind tokens (#8166)
1 parent d8e02e7 commit acf9a8e

5 files changed

Lines changed: 179 additions & 49 deletions

File tree

‎src/components/Markdown/Markdown.css‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@reference "tailwindcss";
2+
@reference "../../styles/theme.css";
23
@import "./prism-theme.css";
34

45
/*
@@ -52,7 +53,7 @@
5253
h4,
5354
h5,
5455
h6 {
55-
@apply block font-semibold text-[#32434a] leading-[1.4];
56+
@apply block font-semibold text-heading-dark leading-[1.4];
5657
font-family:
5758
"Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
5859
serif;
@@ -140,7 +141,7 @@
140141
}
141142

142143
aside {
143-
@apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500;
144+
@apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500;
144145
> :first-child {
145146
margin-top: 0;
146147
}
@@ -165,24 +166,24 @@
165166
> .warning__prefix,
166167
> .preview__prefix,
167168
> .todo__prefix {
168-
@apply capitalize font-semibold block text-base text-[#1a1a1a] mb-[0.25em];
169+
@apply capitalize font-semibold block text-base text-aside-prefix mb-[0.25em];
169170
}
170171
}
171172

172173
&.tip {
173-
@apply bg-[#eaf8ff] text-[#4e7182] border-l-[#1eb4ff];
174+
@apply bg-aside-tip-bg text-aside-tip-text border-l-aside-tip-border;
174175
}
175176

176177
&.warning {
177-
@apply bg-[#fdf5d8] text-[#716b53] border-l-[#f3c316];
178+
@apply bg-aside-warning-bg text-aside-warning-text border-l-aside-warning-border;
178179
}
179180

180181
&.preview {
181-
@apply bg-gray-100 text-[#716b53] border-l-[#1e72b3];
182+
@apply bg-gray-100 text-aside-warning-text border-l-brand-blue;
182183
}
183184

184185
&.todo {
185-
@apply bg-[#fbddcd] text-[#907a6e] border-l-[#e95d13];
186+
@apply bg-aside-todo-bg text-aside-todo-text border-l-aside-todo-border;
186187

187188
.tip-content::before {
188189
content: "[TODO]: ";
@@ -192,7 +193,7 @@
192193
}
193194

194195
blockquote {
195-
@apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500 italic;
196+
@apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500 italic;
196197

197198
> :first-child {
198199
margin-top: 0;
@@ -226,22 +227,22 @@
226227
}
227228

228229
th {
229-
@apply font-bold text-left py-1.5 px-3 bg-[#f1f4f4] border-r border-solid border-r-[#cccccc];
230+
@apply font-bold text-left py-1.5 px-3 bg-table-header-bg border-r border-solid border-r-table-border;
230231

231232
&:last-child {
232233
@apply border-r-0;
233234
}
234235
}
235236

236237
tr {
237-
@apply border border-solid border-[#cccccc] block mb-2.5;
238+
@apply border border-solid border-table-border block mb-2.5;
238239

239240
&:nth-child(2n) {
240-
@apply bg-[#f8f8f8];
241+
@apply bg-table-row-alt;
241242
}
242243

243244
&:last-child {
244-
@apply border-b border-b-[#cccccc];
245+
@apply border-b border-b-table-border;
245246
}
246247

247248
@media (min-width: 768px) {
@@ -266,7 +267,7 @@
266267
&::before {
267268
content: none;
268269
}
269-
@apply border-r border-r-[#cccccc] border-b-0;
270+
@apply border-r border-r-table-border border-b-0;
270271
&:last-child {
271272
@apply border-r-0;
272273
}
@@ -296,19 +297,19 @@
296297
}
297298

298299
a code {
299-
@apply text-[#1a6bac];
300+
@apply text-brand-link;
300301
}
301302
a {
302303
text-decoration: underline;
303304
text-underline-offset: 2px;
304305
text-decoration-thickness: 1px;
305306
}
306307
pre {
307-
@apply bg-[#2d3748] text-[#e2e8f0] p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
308+
@apply bg-code-pre-bg text-code-pre-text p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
308309
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
309310

310311
code {
311-
@apply m-0 p-0 whitespace-pre border-none bg-transparent text-[#a5cee1];
312+
@apply m-0 p-0 whitespace-pre border-none bg-transparent text-code-token;
312313
font-family: monospace;
313314
text-shadow: 0 1px 0 rgba(22, 31, 35, 0.5);
314315

@@ -317,20 +318,20 @@
317318

318319
&::after {
319320
content: "›";
320-
@apply float-left relative -left-0.5 text-center text-[#1e78c2] text-base;
321+
@apply float-left relative -left-0.5 text-center text-code-link text-base;
321322
}
322323
}
323324

324325
a {
325326
border-bottom: 1px dotted;
326-
@apply border-b-[#175d96];
327+
@apply border-b-code-anchor-border;
327328
}
328329

329330
.code-link {
330331
@apply relative;
331332

332333
&:hover {
333-
@apply text-[#2186d8];
334+
@apply text-code-link-hover;
334335
}
335336
}
336337
}

‎src/components/NotificationBar/MessageBar.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,14 @@ export default function MessageBar(props) {
2525
<>
2626
{listTransitions((styles) => (
2727
<animated.div
28-
className="flex items-center rounded z-50 fixed left-[1px] right-[1px] bottom-[1px] bg-white border-2 border-solid border-gray-700 max-w-full pl-20 py-20 shadow-2xl md:left-20 md:right-auto md:bottom-20 md:max-w-[300px] dark:bg-gray-500 print:hidden"
28+
className="flex items-center rounded z-50 fixed left-px right-px bottom-px bg-white border-2 border-solid border-gray-700 max-w-full pl-20 py-20 shadow-2xl md:left-20 md:right-auto md:bottom-20 md:max-w-[300px] dark:bg-gray-500 print:hidden"
2929
style={styles}
3030
>
3131
<Content />
3232
{localStorageIsEnabled ? (
3333
<button
3434
type="button"
35-
className="px-20 self-stretch inline-flex items-center cursor-pointer"
36-
style={{ background: "none", border: "none" }}
35+
className="px-20 self-stretch inline-flex items-center cursor-pointer bg-transparent border-none"
3736
onClick={close}
3837
>
3938
<CloseIcon

‎src/styles/dark.css‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
[data-theme="dark"] {
44
body {
5-
@apply bg-[#121212] text-[#e0e0e0];
5+
@apply bg-dark-bg text-dark-text;
66
}
77

88
.splash__section--dark {
9-
@apply bg-[#202020];
9+
@apply bg-dark-surface;
1010
}
1111

1212
.markdown {
@@ -16,73 +16,73 @@
1616
h4,
1717
h5,
1818
h6 {
19-
@apply text-[#9ab3c0];
19+
@apply text-dark-heading;
2020
}
2121

2222
code,
2323
tt {
2424
text-shadow: none;
25-
@apply bg-[rgba(70,94,105,0.45)];
25+
@apply bg-dark-code-inline-bg;
2626
}
2727

2828
blockquote {
29-
@apply border-l-[#343434] text-[#a3a3a3];
29+
@apply border-l-dark-section-border text-dark-muted;
3030
}
3131

3232
blockquote.tip {
33-
@apply bg-[#192429] text-[#7da2b4];
33+
@apply bg-dark-aside-tip-bg text-dark-aside-tip-text;
3434
}
3535

3636
blockquote.warning {
37-
@apply bg-[#27220a] text-[#a49d83];
37+
@apply bg-dark-aside-warning-bg text-dark-aside-warning-text;
3838
}
3939

4040
blockquote.todo {
41-
@apply bg-[#402b1f] text-[#998478];
41+
@apply bg-dark-aside-todo-bg text-dark-aside-todo-text;
4242
}
4343

4444
hr {
45-
@apply bg-[#343434];
45+
@apply bg-dark-section-border;
4646
}
4747

4848
th {
49-
@apply bg-[#121212] border-[#252525];
49+
@apply bg-dark-bg border-dark-border;
5050
}
5151

5252
tr,
5353
tr:last-child {
54-
@apply border-[#252525];
54+
@apply border-dark-border;
5555
}
5656

5757
tr:nth-child(2n) {
58-
@apply bg-[#202020];
58+
@apply bg-dark-surface;
5959
}
6060

6161
td {
62-
@apply border-[#252525];
62+
@apply border-dark-border;
6363
}
6464

6565
pre {
66-
@apply bg-[#131b1f];
66+
@apply bg-dark-code-bg;
6767

6868
code {
6969
@apply bg-transparent;
7070
}
7171
}
7272

7373
a code {
74-
@apply text-[#69a8ee];
74+
@apply text-dark-link;
7575

7676
&:hover {
77-
@apply text-[#82b7f6];
77+
@apply text-dark-link-hover;
7878
}
7979
}
8080

8181
aside.tip,
8282
aside.warning,
8383
aside.preview,
8484
aside.todo {
85-
@apply bg-[#222222] text-white;
85+
@apply bg-dark-surface-2 text-white;
8686
}
8787

8888
aside.tip > .tip__prefix,
@@ -99,23 +99,23 @@
9999

100100
.sponsors__content,
101101
.footer__inner {
102-
@apply border-[#252525];
102+
@apply border-dark-border;
103103
}
104104

105105
.page-links__gap {
106-
@apply text-gray-300;
106+
@apply text-dark-muted;
107107
}
108108

109109
.site {
110110
background: #121212 !important;
111111
}
112112

113113
.sidebar__docs-version {
114-
@apply border-[#252525] text-[#b8b8b8];
114+
@apply border-dark-border text-dark-sidebar-version;
115115
}
116116

117117
.contributor .contributor__name {
118-
@apply bg-[#121212] text-[#9ab3c0];
118+
@apply bg-dark-bg text-dark-heading;
119119
}
120120

121121
.footer-openjsf-logo {
@@ -130,12 +130,12 @@
130130
@layer base {
131131
[data-theme="dark"] a,
132132
[data-theme="dark"] button.as-link {
133-
@apply text-[#69a8ee];
133+
@apply text-dark-link;
134134
}
135135
}
136136

137137
@layer base {
138138
[data-theme="dark"] a:hover {
139-
@apply text-[#82b7f6];
139+
@apply text-dark-link-hover;
140140
}
141141
}

‎src/styles/index.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@reference "tailwindcss";
22
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400&family=Source+Serif+Pro:wght@600&display=swap");
3+
@import "./theme.css";
34
@import "./dark.css";
45

56
* {
@@ -34,19 +35,19 @@ body {
3435
@layer base {
3536
a,
3637
button.as-link {
37-
@apply text-[#1a6bac] no-underline;
38-
transition: color 250ms;
38+
@apply text-brand-link no-underline;
39+
@apply transition-colors duration-[250ms];
3940

4041
&.icon-link {
4142
@apply inline-block text-[0.7em] ml-[16px] -rotate-45 text-[#909090];
4243

4344
&:hover {
44-
@apply text-[#1a6bac];
45+
@apply text-brand-link;
4546
}
4647
}
4748

4849
&:hover {
49-
@apply text-[#144f80];
50+
@apply text-brand-link-hover;
5051
}
5152
}
5253

0 commit comments

Comments
 (0)