thepraandClaude Opus 5.5
5b5fd62233
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
290 lines
10 KiB
CSS
290 lines
10 KiB
CSS
/* Neumorphism on top of daisyUI.
|
|
|
|
Each element gets two shadows: a light one up-left and a dark one down-right, or both inset for a pressed look. The
|
|
colours are the theme's --neo-light / --neo-dark (theme.css); the offset and blur are --neo-o / --neo-b.
|
|
|
|
- neo-raised / neo-inset / neo-flat draw the shadows. neo-2xs, neo-xs (the default), neo-sm and neo-md set the
|
|
size, and Tailwind variants work on them (md:neo-sm).
|
|
- neo-gradient / neo-gradient-pressed are the 145deg gradients raised and pressed controls use.
|
|
- neo-hue-track turns a daisyUI range into the rainbow hue slider.
|
|
|
|
The daisyUI components are restyled with @utility <component>, as daisyUI recommends. Tailwind emits those rules
|
|
straight into the utilities layer, while daisyUI's own rules sit in sublayers of it (daisyui.l1.l2.l3 base,
|
|
l1.l2 modifiers, l1 states, daisyui disabled). So these overrides beat every daisyUI rule, variants included, and
|
|
each one excludes the variants it must leave alone. :where() keeps those exclusions at specificity (0,1,0).
|
|
To drop a neo shadow at a call site use shadow-none! or neo-flat!.
|
|
|
|
Never write @utility collapse: it brings back Tailwind's own collapse utility (visibility: collapse), which daisyUI
|
|
otherwise suppresses, and hides every collapse. DCollapse adds neo-raised in its markup instead. */
|
|
|
|
/* Not inherited, so a child doesn't pick up a parent's neo-sm size. */
|
|
@property --neo-o {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 3px;
|
|
}
|
|
|
|
@property --neo-b {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 6px;
|
|
}
|
|
|
|
@utility neo-raised {
|
|
box-shadow: calc(-1 * var(--neo-o)) calc(-1 * var(--neo-o)) var(--neo-b) var(--neo-light), var(--neo-o) var(--neo-o) var(--neo-b) var(--neo-dark);
|
|
}
|
|
|
|
@utility neo-inset {
|
|
box-shadow: inset var(--neo-o) var(--neo-o) var(--neo-b) var(--neo-dark), inset calc(-1 * var(--neo-o)) calc(-1 * var(--neo-o)) var(--neo-b) var(--neo-light);
|
|
}
|
|
|
|
@utility neo-flat {
|
|
box-shadow: none;
|
|
}
|
|
|
|
@utility neo-2xs {
|
|
--neo-o: 2px;
|
|
--neo-b: 4px;
|
|
}
|
|
|
|
@utility neo-xs {
|
|
--neo-o: 3px;
|
|
--neo-b: 6px;
|
|
}
|
|
|
|
@utility neo-sm {
|
|
--neo-o: 6px;
|
|
--neo-b: 12px;
|
|
}
|
|
|
|
@utility neo-md {
|
|
--neo-o: 8px;
|
|
--neo-b: 16px;
|
|
}
|
|
|
|
@utility neo-gradient {
|
|
background-image: linear-gradient(145deg, var(--neo-grad-light), var(--neo-grad-dark));
|
|
}
|
|
|
|
@utility neo-gradient-pressed {
|
|
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
|
|
}
|
|
|
|
@utility neo-hue-track {
|
|
--range-fill: 0;
|
|
--range-bg: transparent;
|
|
|
|
&::-webkit-slider-runnable-track {
|
|
background-image: linear-gradient(to right, hsl(0 90% 80%), hsl(60 90% 80%), hsl(120 90% 80%), hsl(180 90% 80%), hsl(240 90% 80%), hsl(300 90% 80%), hsl(359 90% 80%));
|
|
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
background-image: linear-gradient(to right, hsl(0 90% 80%), hsl(60 90% 80%), hsl(120 90% 80%), hsl(180 90% 80%), hsl(240 90% 80%), hsl(300 90% 80%), hsl(359 90% 80%));
|
|
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
|
|
}
|
|
}
|
|
|
|
/* Buttons: raised, with a gradient built from whatever colour the button has; pressed (active, checked) they sink in
|
|
with the gradient reversed. The original neoBtn* classes had no hover state, so daisyUI's hover tint is dropped. */
|
|
@utility btn {
|
|
&:not(:where(.btn-ghost, .btn-link, .btn-outline, .btn-dash, .btn-soft, .btn-disabled, :disabled, [disabled], [aria-disabled="true"])) {
|
|
--btn-bg: var(--btn-color, var(--color-base-100));
|
|
--btn-border: transparent;
|
|
background-image: linear-gradient(145deg, color-mix(in oklab, var(--btn-bg), white var(--neo-lift)), color-mix(in oklab, var(--btn-bg), black var(--neo-sink)));
|
|
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
|
|
|
|
&:where(:focus-visible) {
|
|
background-image: linear-gradient(-45deg, color-mix(in oklab, var(--btn-bg), white var(--neo-lift)), color-mix(in oklab, var(--btn-bg), black var(--neo-sink)));
|
|
}
|
|
|
|
&:where(.btn-sm, .btn-xs) {
|
|
box-shadow: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
|
|
}
|
|
|
|
&:where(:active, .btn-active, :checked, [aria-pressed="true"], [aria-current="page"]) {
|
|
background-image: linear-gradient(145deg, color-mix(in oklab, var(--btn-bg), black var(--neo-sink)), color-mix(in oklab, var(--btn-bg), white var(--neo-lift)));
|
|
box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
|
|
translate: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Text fields: a pressed well, darker while focused, with no focus ring and no border unless a colour or a failed
|
|
validation asks for one. */
|
|
@utility input {
|
|
&:not(:where(.input-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);
|
|
}
|
|
}
|
|
|
|
&:not(:where(.input-ghost, .input-neutral, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .validator:user-invalid, [aria-invalid="true"])) {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
&:not(:where(.select-ghost, .select-neutral, .select-primary, .select-secondary, .select-accent, .select-info, .select-success, .select-warning, .select-error, .validator:user-invalid, [aria-invalid="true"])) {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
@utility textarea {
|
|
&:not(:where(.textarea-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);
|
|
}
|
|
}
|
|
|
|
&:not(:where(.textarea-ghost, .textarea-neutral, .textarea-primary, .textarea-secondary, .textarea-accent, .textarea-info, .textarea-success, .textarea-warning, .textarea-error, .validator:user-invalid, [aria-invalid="true"])) {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
@utility file-input {
|
|
&:not(:where(.file-input-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);
|
|
}
|
|
|
|
&:not(:where(.file-input-ghost, .file-input-neutral, .file-input-primary, .file-input-secondary, .file-input-accent, .file-input-info, .file-input-success, .file-input-warning, .file-input-error, .validator:user-invalid, [aria-invalid="true"])) {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Selectors: an inset well while unchecked; once checked they keep daisyUI's filled look. */
|
|
@utility checkbox {
|
|
&:not(:where(:checked, :indeterminate, [aria-checked="true"], :disabled)) {
|
|
border-color: transparent;
|
|
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);
|
|
}
|
|
}
|
|
|
|
@utility radio {
|
|
&:not(:where(:checked, [aria-checked="true"], :disabled)) {
|
|
border-color: transparent;
|
|
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);
|
|
}
|
|
}
|
|
|
|
@utility toggle {
|
|
&:not(:where(:disabled)) {
|
|
border-color: transparent;
|
|
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);
|
|
|
|
&::before {
|
|
box-shadow: -1px -1px 2px var(--neo-light), 1px 1px 2px var(--neo-dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
@utility range {
|
|
&::-webkit-slider-runnable-track {
|
|
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
|
|
}
|
|
}
|
|
|
|
/* Surfaces: raised like the old .neomorph panels. */
|
|
@utility card {
|
|
&:not(:where(.card-border, .card-dash)) {
|
|
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
|
|
}
|
|
}
|
|
|
|
@utility modal-box {
|
|
box-shadow: -6px -6px 12px var(--neo-light), 6px 6px 12px var(--neo-dark);
|
|
}
|
|
|
|
@utility dropdown-content {
|
|
background-color: var(--color-base-100);
|
|
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
|
|
}
|
|
|
|
@utility alert {
|
|
&:not(:where(.alert-outline, .alert-dash, .alert-soft)) {
|
|
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
|
|
}
|
|
}
|
|
|
|
@utility stats {
|
|
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
|
|
}
|
|
|
|
@utility timeline-box {
|
|
border-color: transparent;
|
|
box-shadow: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
|
|
}
|
|
|
|
@utility badge {
|
|
&:not(:where(.badge-ghost, .badge-outline, .badge-dash, .badge-soft)) {
|
|
box-shadow: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
|
|
}
|
|
}
|
|
|
|
@utility kbd {
|
|
box-shadow: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
|
|
}
|
|
|
|
@utility tabs-box {
|
|
background-color: var(--color-base-100);
|
|
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
|
|
}
|
|
|
|
@utility chat-bubble {
|
|
box-shadow: 2px 2px 4px var(--neo-dark);
|
|
}
|
|
|
|
/* Wells: tracks and placeholders sink in. */
|
|
@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);
|
|
}
|
|
|
|
@utility mockup-browser {
|
|
box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
|
|
}
|
|
|
|
@utility mockup-window {
|
|
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);
|
|
}
|