thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity
Files
e075c4040b88d376f9e817780fd7a850dfe8b570
decePubClient/Styles/theme.css
T
thepraandClaude Opus 5.5 90e4b9200c Add D-prefixed Blazor wrappers for every daisyUI 5 component 
Components/Daisy/ wraps all 69 components in daisyUI's llms.txt, grouped by
daisyUI's categories (Actions, DataDisplay, Navigation, Feedback, DataInput,
Layout, Mockup), with part components where daisyUI has repeating parts (DTab,
DMenuItem, DTimelineItem, ...).
- Each enum maps to whole literal class names in a switch, so Tailwind's scanner
  generates them. Nothing is concatenated.
- Value-holding fields derive from DInputBase<TValue>, Blazor's InputBase, so
  @bind-Value and EditForm validation work. Invalid fields get the component's
  *-error class.
- Open and active state lives in C# (@bind-IsOpen, @bind-Active) and is rendered
  with daisyUI's *-open modifiers. DDropdown adds an outside-click layer and
  Escape. No component uses JS interop.
- The one exception is DCalendar, which wraps the Cally web component, vendored
  as wwwroot/vendor/cally.js (0.9.2, MIT).

/styleguide (not linked) renders every component in all its colours, sizes and
states, with a theme and hue picker that previews without saving.

neo.css follows what the styleguide showed:
- select keeps daisyUI's arrow;
- skeleton-text isn't sunk;
- the phone mockup and dock are raised;
- active menu items and OTP digits are inset;
- a joined accordion is raised as one block.
The primary, secondary and accent colours are deeper, so they still read as
text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
2026-10-03 12:01:42 +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) 58%);
--color-primary-content: hsl(var(--neo-hue) var(--neo-sat) 10%);
--color-secondary: hsl(calc(var(--neo-hue) + 180) var(--neo-sat) 58%);
--color-secondary-content: hsl(calc(var(--neo-hue) + 180) var(--neo-sat) 10%);
--color-accent: hsl(calc(var(--neo-hue) + 90) var(--neo-sat) 58%);
--color-accent-content: hsl(calc(var(--neo-hue) + 90) var(--neo-sat) 10%);
--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(48% * var(--neo-chroma, 0)) 56%);
--color-primary-content: hsl(var(--neo-hue) calc(48% * var(--neo-chroma, 0)) 8%);
--color-secondary: hsl(calc(var(--neo-hue) + 180) calc(48% * var(--neo-chroma, 0)) 56%);
--color-secondary-content: hsl(calc(var(--neo-hue) + 180) calc(48% * var(--neo-chroma, 0)) 8%);
--color-accent: hsl(calc(var(--neo-hue) + 90) calc(48% * var(--neo-chroma, 0)) 56%);
--color-accent-content: hsl(calc(var(--neo-hue) + 90) calc(48% * var(--neo-chroma, 0)) 8%);
--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