thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity
Files
8e03d12a3efb15b6dfc09ad96fd8c71bde1d7434
decePubClient/Styles/theme.css
T
thepraandClaude Opus 5.5 5b5fd62233 Port the neumorphic theme to daisyUI themes and Tailwind utilities 
Styles/theme.css defines two daisyUI themes, neo-light (default) and neo-dark
(prefersdark). Every colour is an hsl() of three runtime variables:
--neo-hue-light, --neo-hue-dark and --neo-chroma. One formula replaces the six
hard-coded branches CascadingState writes today. Chroma 0 gives the grey themes,
and the fallbacks match PageSettings' defaults.

Styles/neo.css ports neomorph.scss:
- neo-raised, neo-inset and neo-flat, with sizes neo-2xs, neo-xs, neo-sm and
  neo-md. The size variables don't inherit, and Tailwind variants replace the
  old -sm..-2xl classes, some of which were never compiled.
- The pressed and raised gradients, and the rainbow hue-slider track.
- @utility overrides that give the neumorphic look to daisyUI's buttons, fields,
  selectors and surfaces. They sit above daisyUI's own cascade layers, so each
  one leaves out the variants it must not touch: ghost, link, outline and the
  rest.

Styles/base.css carries over base.scss: scrollbars, selection colours, the
focus outline reset, and link underlines everywhere except on buttons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
2026-10-03 11:28:38 +02:00

116 lines
5.0 KiB
CSS
Raw Blame History

/* The two daisyUI themes. Every colour derives from three variables that wwwroot/js/theme.js sets on <html> from
PageSettings: --neo-hue-light / --neo-hue-dark (0-359) and --neo-chroma (1 for the colour themes, 0 for the grey
ones). The fallbacks match PageSettings' defaults, so the page renders as it will before Blazor boots.
theme.js sets data-theme="neo-light" or "neo-dark"; with PreferSystemTheming it removes data-theme, and the
prefersdark rule picks neo-dark when the OS asks for dark.
Plugin gotchas:
- A top-level comma in a value is split and only the last part survives. Commas inside var()/calc() are fine,
which is why multi-layer shadows are built in neo.css rather than stored here.
- neo-light's :where(:root) always matches, so neo-dark must set every token neo-light sets.
--neo-light / --neo-dark are the two neumorphic shadow colours, --neo-grad-* the gradient stops around base-100,
--neo-strong the deeper tone used for scrollbars and selections, and --neo-lift / --neo-sink how far a
gradient built from an arbitrary colour (a coloured .btn) moves towards white and black. */
@plugin "../.tools/tailwind/daisyui-theme.mjs" {
name: "neo-light";
default: true;
prefersdark: false;
color-scheme: light;
--neo-hue: var(--neo-hue-light, 25);
--neo-sat: calc(84% * var(--neo-chroma, 0));
--color-base-100: hsl(var(--neo-hue) var(--neo-sat) 88%);
--color-base-200: hsl(var(--neo-hue) var(--neo-sat) 84%);
--color-base-300: hsl(var(--neo-hue) var(--neo-sat) 80%);
--color-base-content: hsl(var(--neo-hue) var(--neo-sat) 26.4%);
--color-primary: hsl(var(--neo-hue) var(--neo-sat) 66%);
--color-primary-content: hsl(var(--neo-hue) var(--neo-sat) 15%);
--color-secondary: hsl(calc(var(--neo-hue) + 180) var(--neo-sat) 66%);
--color-secondary-content: hsl(calc(var(--neo-hue) + 180) var(--neo-sat) 15%);
--color-accent: hsl(calc(var(--neo-hue) + 90) var(--neo-sat) 66%);
--color-accent-content: hsl(calc(var(--neo-hue) + 90) var(--neo-sat) 15%);
--color-neutral: hsl(var(--neo-hue) calc(30% * var(--neo-chroma, 0)) 30%);
--color-neutral-content: hsl(var(--neo-hue) var(--neo-sat) 88%);
--color-info: hsl(196 82% 42%);
--color-info-content: hsl(196 82% 96%);
--color-success: hsl(140 60% 34%);
--color-success-content: hsl(140 60% 96%);
--color-warning: hsl(40 92% 50%);
--color-warning-content: hsl(40 92% 12%);
--color-error: hsl(0 72% 50%);
--color-error-content: hsl(0 72% 97%);
--neo-light: hsl(var(--neo-hue) var(--neo-sat) 100% / .5);
--neo-dark: hsl(var(--neo-hue) var(--neo-sat) 66% / .5);
--neo-grad-light: hsl(var(--neo-hue) var(--neo-sat) 92%);
--neo-grad-dark: hsl(var(--neo-hue) var(--neo-sat) 84%);
--neo-grad-lighter: hsl(var(--neo-hue) var(--neo-sat) 96%);
--neo-grad-darker: hsl(var(--neo-hue) var(--neo-sat) 80%);
--neo-strong: hsl(var(--neo-hue) var(--neo-sat) 66%);
--neo-lift: 33%;
--neo-sink: 5%;
--radius-selector: 1rem;
--radius-field: 2rem;
--radius-box: .75rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
@plugin "../.tools/tailwind/daisyui-theme.mjs" {
name: "neo-dark";
default: false;
prefersdark: true;
color-scheme: dark;
--neo-hue: var(--neo-hue-dark, 215);
--neo-sat: calc(16% * var(--neo-chroma, 0));
--color-base-100: hsl(var(--neo-hue) var(--neo-sat) 12%);
--color-base-200: hsl(var(--neo-hue) var(--neo-sat) 8%);
--color-base-300: hsl(var(--neo-hue) var(--neo-sat) 4%);
--color-base-content: hsl(var(--neo-hue) var(--neo-sat) 73.6%);
--color-primary: hsl(var(--neo-hue) calc(40% * var(--neo-chroma, 0)) 40%);
--color-primary-content: hsl(var(--neo-hue) calc(40% * var(--neo-chroma, 0)) 92%);
--color-secondary: hsl(calc(var(--neo-hue) + 180) calc(40% * var(--neo-chroma, 0)) 40%);
--color-secondary-content: hsl(calc(var(--neo-hue) + 180) calc(40% * var(--neo-chroma, 0)) 92%);
--color-accent: hsl(calc(var(--neo-hue) + 90) calc(40% * var(--neo-chroma, 0)) 40%);
--color-accent-content: hsl(calc(var(--neo-hue) + 90) calc(40% * var(--neo-chroma, 0)) 92%);
--color-neutral: hsl(var(--neo-hue) var(--neo-sat) 78%);
--color-neutral-content: hsl(var(--neo-hue) var(--neo-sat) 12%);
--color-info: hsl(196 62% 58%);
--color-info-content: hsl(196 62% 10%);
--color-success: hsl(140 46% 52%);
--color-success-content: hsl(140 46% 9%);
--color-warning: hsl(40 80% 58%);
--color-warning-content: hsl(40 80% 10%);
--color-error: hsl(0 66% 62%);
--color-error-content: hsl(0 66% 10%);
--neo-light: hsl(var(--neo-hue) calc(84% * var(--neo-chroma, 0)) 66% / .1);
--neo-dark: hsl(var(--neo-hue) var(--neo-sat) 1% / .5);
--neo-grad-light: hsl(var(--neo-hue) var(--neo-sat) 16%);
--neo-grad-dark: hsl(var(--neo-hue) var(--neo-sat) 8%);
--neo-grad-lighter: hsl(var(--neo-hue) var(--neo-sat) 20%);
--neo-grad-darker: hsl(var(--neo-hue) var(--neo-sat) 4%);
--neo-strong: hsl(var(--neo-hue) var(--neo-sat) 33%);
--neo-lift: 5%;
--neo-sink: 33%;
--radius-selector: 1rem;
--radius-field: 2rem;
--radius-box: .75rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
Reference in new issue View Git Blame Copy Permalink