Skip to content

refactor(styles): replace arbitrary color values with named Tailwind tokens #8166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexander-akait merged 3 commits into from
Apr 7, 2026
Merged

refactor(styles): replace arbitrary color values with named Tailwind tokens #8166

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
20a3551
refactor(styles): replace arbitrary color values with named Tailwind …
sujalgoel Apr 4, 2026
2612358
fix(styles): restore @reference and add explicit :root vars for runti…
sujalgoel Apr 6, 2026
14506d6
fix(theme): correct brand-link color to webpack palette blue (#1d78c1)
sujalgoel Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions src/components/Markdown/Markdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@reference "tailwindcss";
@reference "../../styles/theme.css";
@import "./prism-theme.css";

/*
Expand Down Expand Up @@ -52,7 +53,7 @@
h4,
h5,
h6 {
@apply block font-semibold text-[#32434a] leading-[1.4];
@apply block font-semibold text-heading-dark leading-[1.4];
font-family:
"Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
serif;
Expand Down Expand Up @@ -140,7 +141,7 @@
}

aside {
@apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500;
@apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500;
> :first-child {
margin-top: 0;
}
Expand All @@ -165,24 +166,24 @@
> .warning__prefix,
> .preview__prefix,
> .todo__prefix {
@apply capitalize font-semibold block text-base text-[#1a1a1a] mb-[0.25em];
@apply capitalize font-semibold block text-base text-aside-prefix mb-[0.25em];
}
}

&.tip {
@apply bg-[#eaf8ff] text-[#4e7182] border-l-[#1eb4ff];
@apply bg-aside-tip-bg text-aside-tip-text border-l-aside-tip-border;
}

&.warning {
@apply bg-[#fdf5d8] text-[#716b53] border-l-[#f3c316];
@apply bg-aside-warning-bg text-aside-warning-text border-l-aside-warning-border;
}

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

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

.tip-content::before {
content: "[TODO]: ";
Expand All @@ -192,7 +193,7 @@
}

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

> :first-child {
margin-top: 0;
Expand Down Expand Up @@ -226,22 +227,22 @@
}

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

&:last-child {
@apply border-r-0;
}
}

tr {
@apply border border-solid border-[#cccccc] block mb-2.5;
@apply border border-solid border-table-border block mb-2.5;

&:nth-child(2n) {
@apply bg-[#f8f8f8];
@apply bg-table-row-alt;
}

&:last-child {
@apply border-b border-b-[#cccccc];
@apply border-b border-b-table-border;
}

@media (min-width: 768px) {
Expand All @@ -266,7 +267,7 @@
&::before {
content: none;
}
@apply border-r border-r-[#cccccc] border-b-0;
@apply border-r border-r-table-border border-b-0;
&:last-child {
@apply border-r-0;
}
Expand Down Expand Up @@ -296,19 +297,19 @@
}

a code {
@apply text-[#1a6bac];
@apply text-brand-link;
}
a {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
pre {
@apply bg-[#2d3748] text-[#e2e8f0] p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
@apply bg-code-pre-bg text-code-pre-text p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

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

Expand All @@ -317,20 +318,20 @@

&::after {
content: "›";
@apply float-left relative -left-0.5 text-center text-[#1e78c2] text-base;
@apply float-left relative -left-0.5 text-center text-code-link text-base;
}
}

a {
border-bottom: 1px dotted;
@apply border-b-[#175d96];
@apply border-b-code-anchor-border;
}

.code-link {
@apply relative;

&:hover {
@apply text-[#2186d8];
@apply text-code-link-hover;
}
}
}
Expand Down
5 changes: 2 additions & 3 deletions src/components/NotificationBar/MessageBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,14 @@ export default function MessageBar(props) {
<>
{listTransitions((styles) => (
<animated.div
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"
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"
style={styles}
>
<Content />
{localStorageIsEnabled ? (
<button
type="button"
className="px-20 self-stretch inline-flex items-center cursor-pointer"
style={{ background: "none", border: "none" }}
className="px-20 self-stretch inline-flex items-center cursor-pointer bg-transparent border-none"
onClick={close}
>
<CloseIcon
Expand Down
46 changes: 23 additions & 23 deletions src/styles/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

[data-theme="dark"] {
body {
@apply bg-[#121212] text-[#e0e0e0];
@apply bg-dark-bg text-dark-text;
}

.splash__section--dark {
@apply bg-[#202020];
@apply bg-dark-surface;
}

.markdown {
Expand All @@ -16,73 +16,73 @@
h4,
h5,
h6 {
@apply text-[#9ab3c0];
@apply text-dark-heading;
}

code,
tt {
text-shadow: none;
@apply bg-[rgba(70,94,105,0.45)];
@apply bg-dark-code-inline-bg;
}

blockquote {
@apply border-l-[#343434] text-[#a3a3a3];
@apply border-l-dark-section-border text-dark-muted;
}

blockquote.tip {
@apply bg-[#192429] text-[#7da2b4];
@apply bg-dark-aside-tip-bg text-dark-aside-tip-text;
}

blockquote.warning {
@apply bg-[#27220a] text-[#a49d83];
@apply bg-dark-aside-warning-bg text-dark-aside-warning-text;
}

blockquote.todo {
@apply bg-[#402b1f] text-[#998478];
@apply bg-dark-aside-todo-bg text-dark-aside-todo-text;
}

hr {
@apply bg-[#343434];
@apply bg-dark-section-border;
}

th {
@apply bg-[#121212] border-[#252525];
@apply bg-dark-bg border-dark-border;
}

tr,
tr:last-child {
@apply border-[#252525];
@apply border-dark-border;
}

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

td {
@apply border-[#252525];
@apply border-dark-border;
}

pre {
@apply bg-[#131b1f];
@apply bg-dark-code-bg;

code {
@apply bg-transparent;
}
}

a code {
@apply text-[#69a8ee];
@apply text-dark-link;

&:hover {
@apply text-[#82b7f6];
@apply text-dark-link-hover;
}
}

aside.tip,
aside.warning,
aside.preview,
aside.todo {
@apply bg-[#222222] text-white;
@apply bg-dark-surface-2 text-white;
}

aside.tip > .tip__prefix,
Expand All @@ -99,23 +99,23 @@

.sponsors__content,
.footer__inner {
@apply border-[#252525];
@apply border-dark-border;
}

.page-links__gap {
@apply text-gray-300;
@apply text-dark-muted;
}

.site {
background: #121212 !important;
}

.sidebar__docs-version {
@apply border-[#252525] text-[#b8b8b8];
@apply border-dark-border text-dark-sidebar-version;
}

.contributor .contributor__name {
@apply bg-[#121212] text-[#9ab3c0];
@apply bg-dark-bg text-dark-heading;
}

.footer-openjsf-logo {
Expand All @@ -130,12 +130,12 @@
@layer base {
[data-theme="dark"] a,
[data-theme="dark"] button.as-link {
@apply text-[#69a8ee];
@apply text-dark-link;
}
}

@layer base {
[data-theme="dark"] a:hover {
@apply text-[#82b7f6];
@apply text-dark-link-hover;
}
}
11 changes: 6 additions & 5 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@reference "tailwindcss";
@import "tailwindcss";
@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");
@import "./theme.css";
@import "./dark.css";

* {
Expand Down Expand Up @@ -34,19 +35,19 @@ body {
@layer base {
a,
button.as-link {
@apply text-[#1a6bac] no-underline;
transition: color 250ms;
@apply text-brand-link no-underline;
@apply transition-colors duration-[250ms];

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

&:hover {
@apply text-[#1a6bac];
@apply text-brand-link;
}
}

&:hover {
@apply text-[#144f80];
@apply text-brand-link-hover;
}
}

Expand Down
Loading
Loading