Skip to content

fix DaisyUI semantic color misuses - #1296

Open
rin-st wants to merge 14 commits into
mainfrom
redesign-v2-updates
Open

fix DaisyUI semantic color misuses#1296
rin-st wants to merge 14 commits into
mainfrom
redesign-v2-updates

Conversation

@rin-st

@rin-st rin-st commented May 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Fixes problems which we discussed in #1282

Main changes

  • updated palette to be closer to the daisy docs. Note: See details regarding base-300 below, we can change it but I think it's good as it is
  • switch default bg from base-200 to base-100 for better elevations
  • make header and footer bg base-200
  • created additional theme which is close to default. Created it because I didn't like how default looked after some changes, but it was just browser bugs. But kept default2 just to show you, maybe you'll like it
  • some other color chages/bugfixes across the se-2.

Full changes list (generated)

Context

Follow-up to #1282. That PR landed the visual sweep and was opened with a description that explicitly flagged three DaisyUI semantic misuses the team agreed to fix before bumping @scaffold-ui. This PR cleans them up plus a few related palette collisions.

Problems

Palette collisions in globals.css

Light Dark
primary = accent = info = #93bbfb base-100 = info = #385183
neutral inverted (#f9fbff with neutral-content #385183)

(secondary = base-300 in light and primary = base-300 in dark were left as-is — see Trade-offs below.)

Component misuses (Carlos's three from #1282)

  1. btn-primary vs btn-secondary swapped — header CTAs were btn-secondary; footer dev tools were btn-primary.
  2. bg-secondary used as a muted surface — debug banner, contract picker hover, theme toggle background.
  3. text-neutral used as muted-text — DaisyUI neutral is for non-saturated UI, not muted text.

Page background
Page bg was base-200. DaisyUI docs: base-100 is the blank page surface, base-200/300 are elevations above it.

Surfaced during review

  • Theme-switcher knob rendered grey (DaisyUI default --input-color: color-mix(base-content 50%, transparent)).
  • RainbowKit dropdown items had inconsistent hover/focus vs the header nav.
  • :active on menu items flipped bg → dark and text → white (DaisyUI --menu-active-bg/-fg default to neutral/neutral-content).

Solutions

Palette (globals.css)

  • Light: accent #5b9bf0, info #3b9cf2 (break collision with primary).
  • Dark: info #3b9cf2 (break collision with base-100); neutral #3d4250 + neutral-content #f9fbff (canonical dark non-saturated, inverted in original).
  • Page bg → var(--color-base-100).
  • All other tokens kept at the original Default values.

Component class swaps

  • btn-primary → btn-secondary on footer price chip / Block Explorer link, Faucet modal trigger, BackButton, PaginationButton, tx-page back button. btn-primary retained where it's a genuine CTA (Connect Wallet, Faucet modal "Send", Search submit, 404 "Home").
  • bg-secondary / hover:bg-secondary → base-300 / hover:bg-base-300 on debug banner, DebugContracts picker hover, SwitchTheme.
  • Table headers bg-primary → bg-base-200.
  • Standalone text-primary-content removed from TransactionComp <h2> and PaginationButton page-number span.
  • SearchBar border-primary → border-base-300; focus:ring-accent → focus:ring-primary.
  • Block-explorer external link text-accent → link link-primary.

Header / footer chrome

  • Header bg-base-100 → bg-base-200 (DaisyUI-canonical elevated chrome over white page).
  • Footer outer wrapper: added bg-base-200 to match.
  • Header active link: bg-base-300 → bg-secondary text-secondary-content; hover/focus only on inactive items.

Theme switcher (SwitchTheme.tsx)
toggle bg-base-300 toggle-primary [--input-color:var(--color-primary)] dark:[--input-color:var(--color-base-content)] — off-state knob is SE-2 primary blue in light, falls back to base-content in dark (where Default primary = base-300 makes a primary-colored knob invisible).

RainbowKit dropdowns

  • Items: hover:bg-base-300 focus:bg-secondary (mirrors the header nav non-active / active pattern).
  • Destructive items (Reveal PK, Disconnect): text-error → !text-error so red survives DaisyUI's :focus-visible{color:base-content} and :active{color:menu-active-fg} overrides.
  • Dropdown <ul> got [--menu-active-bg:var(--color-secondary)] [--menu-active-fg:var(--color-base-content)] so pressed state matches focus instead of flipping to dark neutral + white text.

Alternative palette

Added Default2 to palettes.ts (available in the /test picker) — same shape as Default but with secondary retuned to a desaturated cousin of primary (#bdd8f7 light / #4a6896 dark) so secondary, base-300, and dark primary are all visually distinct. Provided as a side-by-side preview, not the default.

Trade-offs

Kept Default's secondary = base-300 and dark primary = base-300 for the preferred aesthetic. Known consequences:

  • Light header active link (bg-secondary) and hover (bg-base-300) render the same color. Active state is signalled by presence rather than color-by-state.
  • Dark btn-primary blends into bg-base-300 surfaces (home band, inline code chips). Still pops on base-100/base-200.

Both addressable later by retuning secondary / dark primary (see Default2).

🤖 Generated with Claude Code

carletex and others added 14 commits May 6, 2026 16:20
@carletex @claude
ui: sharp/no-radius redesign
3ee01c1 
- --radius-field/box → 0 (light + dark)
- .btn: drop shadow-md + rounded-full, add font-weight 600
- drop rounded-* / tinted-shadow utilities on cards, dropdowns, tables, avatar, faucet
- thin borders for separation where shadows used to do the job

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@carletex @claude
ui(header): full-item-height nav links
3134c24 
- min-h-16 + border-b-2 border-base-300 (drop shadow)
- self-stretch on navbar-start; raw <ul> instead of daisy menu menu-horizontal
- nav links span full header height (h-full) with no rounding
- mobile dropdown shadow-sm → shadow-lg

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@carletex @claude
test: add /test page for theme/component preview
b35a7fa 
Static page surfacing all DaisyUI variants (buttons, bg, text, borders,
icons, form controls, badges, alerts, links) for theme work.

Linked from header nav via SwatchIcon. Will be removed before merge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@carletex @claude
test: palette picker on /test page with localStorage persistence
94a7c1e 
- components/test/palettes.ts holds palette data (Default + Slate, light + dark) + apply/reset helpers
- components/test/PaletteLoader.tsx mounts in root layout, replays stored palette on boot
- /test page picker writes palette name to localStorage on Apply, removes on Reset
- override applies via injected <style> with [data-theme="light"] and [data-theme="dark"] rules
- minimal cards: name, swatches, Apply button

Brief flash of default palette on hard refresh expected (loader runs post-hydration).
Whole components/test/ folder + layout mount get deleted before merge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@carletex @claude
ui: pair bg-secondary with text-secondary-content for Slate readability
a732d30 
- Header active/hover/focus nav links: add text-secondary-content
- debug/page.tsx banner: add text-secondary-content; drop now-conflicting text-neutral on inner p
- DebugContracts contract picker hover: add hover:text-secondary-content
- home page outline icons: drop fill-secondary (overrides outline icon's fill=none → solid blob)

Surface-vs-button semantic ambiguity for secondary covered in PR description.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@carletex
palletes
c1a59cc
@carletex @claude
test(palettes): tune Ethereum
17f1489 
- Light primary: #6f47ff → #6c24e0 (actual ethereum.org purple)
- Light secondary: #525252 → #dde1e6 (soft pastel blue-grey, content flipped to dark)
- Dark secondary: #4f4d4d → #3d4250 (blue-tinted dark grey)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@carletex @claude
test(palettes): unify soft blue-grey secondary across Slate + Slate Soft
5aca17e 
Same #dde1e6 / #3d4250 secondary as Ethereum.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@carletex
add radius-selector
ca44ad8
@carletex
update daisyui
06c7c77
@carletex
use base-300 instead of secondary in header links
d8af7aa
@rin-st
Merge branch 'main' of github.com:scaffold-eth/se-2 into ui-redesign-v2
89c10ba
@rin-st @claude
drop rounded utility classes for flat theme
0af3af3 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@rin-st @claude
fix DaisyUI semantic color misuses
510bbc5 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This was referenced May 29, 2026
Merged
Merged
Base automatically changed from ui-redesign-v2 to main June 9, 2026 12:57
@damianmarti

damianmarti commented Jun 18, 2026

Copy link
Copy Markdown
Member

@rin-st I think it's better to rebase or merge to base first to be able to review this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@damianmarti damianmarti Awaiting requested review from damianmarti
@carletex carletex Awaiting requested review from carletex
@Pabl0cks Pabl0cks Awaiting requested review from Pabl0cks
@technophile-04 technophile-04 Awaiting requested review from technophile-04

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@rin-st @damianmarti @carletex