thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity

Add D-prefixed Blazor wrappers for every daisyUI 5 component

Browse Source 
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
This commit is contained in:
thepraandClaude Opus 5.5 committed 2026-10-03 12:01:42 +02:00
1 parent 8e03d12a3e
commit 90e4b9200c
127 files changed
+6962 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Styles/neo.css
+30 -5
View File
@@ -130,16 +130,15 @@
}
}
/* daisyUI draws the select's arrow with background-image, so the well here is the background colour alone. */
@utility select {
&:not(:where(.select-ghost)) {
background-color: var(--color-base-100);
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
&:focus, &:focus-within {
outline: none;
background-image: linear-gradient(145deg, var(--neo-grad-darker), var(--neo-grad-lighter));
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}
}
@@ -267,13 +266,35 @@
box-shadow: 2px 2px 4px var(--neo-dark);
}
/* Wells: tracks and placeholders sink in. */
@utility dock {
box-shadow: 0 -3px 6px var(--neo-light), 0 -1px 3px var(--neo-dark);
}
/* The active menu entry is pressed in rather than filled with the neutral colour. */
@utility menu {
--menu-active-bg: transparent;
--menu-active-fg: var(--color-base-content);
& :where(li > .menu-active, li > [aria-current="page"]) {
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
}
}
/* Wells: tracks, placeholders and the OTP digit boxes sink in. */
@utility otp {
& > span {
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
}
}
@utility progress {
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
}
@utility skeleton {
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
&:not(:where(.skeleton-text)) {
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
}
}
@utility mockup-browser {
@@ -284,6 +305,10 @@
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
}
@utility mockup-phone {
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
}
@utility mockup-code {
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
}
Styles/theme.css
+12 -12
View File
@@ -27,12 +27,12 @@
--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-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%);
@@ -77,12 +77,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-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%);