nexoniarz/Niveus
Watch
1
0
Fork
You've already forked Niveus
 0
mirror of https://github.com/Nexoniarz/Niveus.git synced 2026-11-03 20:54:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

Rework light theme, add format wheel and motion, fix Firefox paths

Browse source 
Theme: light is a dimmer brand-tinted stone with deeper shade, so it reads
as the same material as dark; every neutral now carries --nv-brand in both
appearances. Native controls (accent-color, caret-color) take the brand.

Time picker: 24-hour by default; data-nv-format-toggle adds a third wheel
of 24H / AM / PM. Swiping it rebuilds the hour wheel for the new format.
The selection lens is a raised glass bar, not a flat band.

Motion: drum effect on the wheels as a scroll-driven animation, with a
script fallback for engines without it (Firefox); rubber-band at both ends
of a wheel that springs back; calendar months slide locally instead of via
a page-wide transition; a chosen day springs into place.

Firefox: wheel notches arrive in lines, not pixels, which made the
rubber-band invisible; deltaMode is now normalised. The selected-day pop
no longer plays on page load.

Also: hover only inside @media (hover: hover) on the slider, the Glaze
inner glow is a token, and the focus note in GUIDELINES.md is corrected
(popovers do not trap focus). SPDX identifier added to niveus.js.

check.py, build.py and build.py --check pass.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Nexoniarz 2026-10-28 09:34:08 +01:00
commit 5d435c4f49
12 changed files with 410 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

17
niveus/components/calendar.css
View file

@ -93,8 +93,12 @@
}
@media (hover: hover) {
/* Hover presses the day slightly into the surface; it is never a flat wash
of colour, because the chosen day is a raised key and the two must read as
the same material. */
.nv-calendar__day:hover:not(:disabled, [aria-selected="true"]) {
background-color: var(--nv-color-surface-hover);
box-shadow: var(--nv-elevation-inset-sm), var(--nv-ledge);
}
}
@ -105,7 +109,7 @@
/* Today is ringed, not filled: filled means chosen. */
.nv-calendar__day[aria-current="date"] {
color: var(--nv-color-accent-text);
box-shadow: inset 0 0 0 var(--nv-border-width-strong) var(--nv-color-accent);
box-shadow: inset 0 0 0 var(--nv-border-width-strong) var(--nv-color-accent), var(--nv-elevation-inset-sm);
}
/* The chosen day is a small raised key, lit like the filled buttons. */
@ -129,3 +133,14 @@
color: var(--nv-color-text-disabled);
cursor: not-allowed;
}
/* A day pressed into place springs up to full size. Only when it was just
chosen: a selection that is merely *there* on load stays still. */
.nv-calendar__day[aria-selected="true"][data-nv-pop] {
animation: nv-day-pop var(--nv-duration-quick) var(--nv-ease-spring);
}
@keyframes nv-day-pop {
from { scale: 0.72; }
to { scale: 1; }
}