Skip to content

Clean up theme #16166

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
wackerow merged 1 commit into from
Sep 15, 2025
Merged

Clean up theme #16166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
64 changes: 43 additions & 21 deletions src/styles/semantic-tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,19 +92,25 @@
#000000 69.77%
);

--card-gradient: linear-gradient(123deg, rgba(255, 255, 255, 0.20) 58.99%, rgba(174, 110, 203, 0.13) 104.04%);
--card-gradient-secondary: linear-gradient(95deg, rgba(211, 145, 242, 0.12) 0%, rgba(159, 43, 212, 0.12) 102.78%);
--card-gradient-secondary-hover: linear-gradient(95deg, rgba(211, 145, 242, 0.2) 0%, rgba(159, 43, 212, 0.2) 102.78%);
--ten-year-gradient: linear-gradient(100deg, #F6C9EA 55.38%, #C7A9F1 110.54%);

/* Rainbow gradients */
--rainbow-gradient: conic-gradient(
from 0deg,
hsla(var(--primary)),
hsla(var(--accent-b)),
hsla(var(--accent-a)),
hsla(var(--accent-c)),
hsla(var(--primary))
--card-gradient: linear-gradient(
123deg,
rgba(255, 255, 255, 0.2) 58.99%,
rgba(174, 110, 203, 0.13) 104.04%
);
--card-gradient-secondary: linear-gradient(
95deg,
rgba(211, 145, 242, 0.12) 0%,
rgba(159, 43, 212, 0.12) 102.78%
);
--card-gradient-secondary-hover: linear-gradient(
95deg,
rgba(211, 145, 242, 0.2) 0%,
rgba(159, 43, 212, 0.2) 102.78%
);
--ten-year-gradient: linear-gradient(
100deg,
#f6c9ea 55.38%,
#c7a9f1 110.54%
Comment on lines +95 to +113
Copy link
Copy Markdown
Member

@wackerow wackerow Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per in-file comment:

    /**
    /* Gradients (radial, conic, or linear over 3 stops)
    /* For linear-gradient up to 3 stops, use Tailwind classes
    /* https://tailwindcss.com/docs/background-image#linear-gradients
    */

Noting that these could be simple tailwind classes instead, though if we want to nit-pick on non-standard angles (123deg, 95deg, 100deg), that would have to wait for tailwind v4, where we could do bg-linear-123 as an example.

Otherwise we could standardize the angles with something like:

bg-gradient-to-br from-white/20 from-[59%] to-[rgb(174,110,203)]/[0.13] to-[104%] in situ

or

--card-gradient: @apply bg-gradient-to-br from-white/20 from-[59%] to-[rgb(174,110,203)]/[0.13] to-[104%];

@pettinarip Not sure if you have a preference... not a huge deal, but given we're using tailwind I try to stick to classes where possible

);
Comment on lines +95 to 114
Copy link
Copy Markdown
Member

@wackerow wackerow Sep 15, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
--card-gradient: linear-gradient(
123deg,
rgba(255, 255, 255, 0.2) 58.99%,
rgba(174, 110, 203, 0.13) 104.04%
);
--card-gradient-secondary: linear-gradient(
95deg,
rgba(211, 145, 242, 0.12) 0%,
rgba(159, 43, 212, 0.12) 102.78%
);
--card-gradient-secondary-hover: linear-gradient(
95deg,
rgba(211, 145, 242, 0.2) 0%,
rgba(159, 43, 212, 0.2) 102.78%
);
--ten-year-gradient: linear-gradient(
100deg,
#f6c9ea 55.38%,
#c7a9f1 110.54%
);
--card-gradient: @apply bg-gradient-to-br from-white/20 from-[59%] to-[rgb(174,110,203)]/[0.13];
--card-gradient-secondary: @apply bg-gradient-to-r from-[rgb(211,145,242)]/[0.12] to-[rgb(159,43,212)]/[0.12];
--card-gradient-secondary-hover: @apply bg-gradient-to-r from-[rgb(211,145,242)]/20 to-[rgb(159,43,212)]/20;
--ten-year-gradient: @apply bg-gradient-to-r from-[#f6c9ea] from-[55%] to-[#c7a9f1] to-[110%];

Copy link
Copy Markdown
Member

@wackerow wackerow Sep 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm actually, these aren't within a custom class, so that may not work right... but:

  1. bg-card-gradient is only used in one place that I can find: app/[locale]/trillion-dollar-security/page.tsx
    We could replace that usage with bg-gradient-to-br from-white/20 from-[59%] to-[rgb(174,110,203)]/[0.13] and remove this custom variable from the theme?
  2. bg-ten-year-gradient is also only used once, in app/[locale]/10years/_components/TenYearHomeBanner.tsx attached to after:
    We could replace that usage with after:bg-gradient-to-r after:from-[#f6c9ea] after:from-[55%] after:to-[#c7a9f1] after:to-[110%] dark:after:from-[#1e151b] dark:after:from-[55%] dark:after:to-black dark:after:to-[110%], and similarly remove from the theme.
  3. bg-card-gradient-secondary (4 uses) and bg-card-gradient-secondary-hover (2 uses)... could consider making custom classes for these two outside of semantic-tokens.css?

@pettinarip Just some thoughts on how to iterate on this, but for the sake of not over-complicating, going to accept and pull in what we have here.


/* Shadows */
Expand Down Expand Up @@ -134,10 +140,14 @@
--shadow-window-box-5-opacity: 0.08;
--shadow-window-box-1: 0px 2px 12px 1px
hsla(var(--purple-800), var(--shadow-window-box-1-opacity));
--shadow-window-box-2: 0px 16px 12px -3px hsla(var(--purple-800), var(--shadow-window-box-2-opacity));
--shadow-window-box-3: 0px 32px 24px -6px hsla(var(--purple-800), var(--shadow-window-box-3-opacity));
--shadow-window-box-4: 0px 40px 40px -12px hsla(var(--purple-700), var(--shadow-window-box-4-opacity));
--shadow-window-box-5: 0px -64px 120px 80px hsla(var(--purple-100), var(--shadow-window-box-5-opacity));
--shadow-window-box-2: 0px 16px 12px -3px
hsla(var(--purple-800), var(--shadow-window-box-2-opacity));
--shadow-window-box-3: 0px 32px 24px -6px
hsla(var(--purple-800), var(--shadow-window-box-3-opacity));
--shadow-window-box-4: 0px 40px 40px -12px
hsla(var(--purple-700), var(--shadow-window-box-4-opacity));
--shadow-window-box-5: 0px -64px 120px 80px
hsla(var(--purple-100), var(--shadow-window-box-5-opacity));

/* Staking */
--staking-gold: 43, 84%, 40%;
Expand All @@ -149,7 +159,11 @@
--staking-red: 4, 36%, 46%;
--staking-red-fill: 140, 27%, 98%;

--shadow-widget: 2px 2px 12px 1px rgba(52, 43, 64, 0.02), -16px 16px 12px -3px rgba(52, 43, 64, 0.02), -32px 32px 24px -6px rgba(52, 43, 64, 0.02), -40px 40px 40px -12px rgba(88, 55, 131, 0.04);
--shadow-widget:
2px 2px 12px 1px rgba(52, 43, 64, 0.02),
-16px 16px 12px -3px rgba(52, 43, 64, 0.02),
-32px 32px 24px -6px rgba(52, 43, 64, 0.02),
-40px 40px 40px -12px rgba(88, 55, 131, 0.04);
}

/* Dark mode token declarations */
Expand Down Expand Up @@ -220,8 +234,12 @@
#8db4ff 69.77%
);

--roadmap-card-gradient: linear-gradient(123deg, rgba(34, 34, 34, 0.20) 40.53%, rgba(174, 110, 203, 0.13) 104.05%);
--ten-year-gradient: linear-gradient(100deg, #1E151B 55.38%, #000 110.54%);
--roadmap-card-gradient: linear-gradient(
123deg,
rgba(34, 34, 34, 0.2) 40.53%,
rgba(174, 110, 203, 0.13) 104.05%
);
--ten-year-gradient: linear-gradient(100deg, #1e151b 55.38%, #000 110.54%);

/* Shadows (dark mode adjustments) */
--shadow-color: hsla(var(--white), 0.04);
Expand Down Expand Up @@ -252,6 +270,10 @@
--staking-red: 6, 24%, 78%;
--staking-red-fill: 140, 3%, 19%;

--shadow-widget: -2px 2px 12px 1px rgba(255, 255, 255, 0.04), -6px 6px 12px -3px rgba(255, 255, 255, 0.04), -12px 12px 24px -6px rgba(255, 255, 255, 0.04), -20px 20px 40px -12px rgba(255, 255, 255, 0.04);
--shadow-widget:
-2px 2px 12px 1px rgba(255, 255, 255, 0.04),
-6px 6px 12px -3px rgba(255, 255, 255, 0.04),
-12px 12px 24px -6px rgba(255, 255, 255, 0.04),
-20px 20px 40px -12px rgba(255, 255, 255, 0.04);
}
}
9 changes: 0 additions & 9 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,6 @@ const config = {
"card-gradient-secondary": "var(--card-gradient-secondary)",
"card-gradient-secondary-hover": "var(--card-gradient-secondary-hover)",
"ten-year-gradient": "var(--ten-year-gradient)",
"rainbow-gradient": "var(--rainbow-gradient)",
},
boxShadow: {
"table-box": "var(--table-box-shadow)",
Expand Down Expand Up @@ -307,12 +306,6 @@ const config = {
"0%": { opacity: "0" },
"100%": { opacity: "1" },
},
"rotate-back-and-forth": {
"0%": { transform: "rotate(0deg)" },
"25%": { transform: "rotate(5deg)" },
"75%": { transform: "rotate(-5deg)" },
"100%": { transform: "rotate(0deg)" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
Expand All @@ -327,11 +320,9 @@ const config = {
"spin-18": "spin 36s linear infinite",
"counter-spin-18": "spin 36s linear infinite reverse",
"spin-9": "spin 18s linear infinite",
"spin-4": "spin 4s linear infinite",
"counter-spin-9": "spin 18s linear infinite reverse",
"pulse-light": "pulse-light 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
"fade-in": "fade-in 150ms ease-in-out",
wave: "rotate-back-and-forth 1s linear infinite",
},
// Add custom border-radius tailwinds extension for "4xl" as "2rem"
borderRadius: {
Expand Down