Rework the dashboard into two looks over one behaviour
A dashboard is a wall panel somebody hangs in their own hallway, so it now wears what they choose: a look, and a palette of their own colours. Two complete component sets live under `Dashboard/ui/` — `glass` (translucent panes over a slowly moving ground) and `material` (Material 3 tonal cards) — behind one prop contract. Every control's state, keyboard and `aria-` live in `ui/core` and are shared, so the two sets are the same dashboard drawn twice rather than two products: a set only decides what a control looks like while doing it. Four settings join the channel, each drivable by a flow like any other: `look`, `palette`, `background` and `touch`. A palette is an ordered list of hex colours — background, surface, primary, accent, text, then more chart colours — pasted from a coolors.co link or typed, written onto the canvas as the token variables everything already reads. Trailing roles are derived, so three colours are a whole dashboard, and derived text is held to AA rather than trusted (`theme.check.ts` measures it). A palette also decides light or dark, since its first colour is the ground. Widgets are measured against their own tile with container queries rather than against the viewport, animate through `motion`, and can be drawn without their title. The three reworks: - a bar draws a row per reading, up to eight, each in the dashboard's own data colours and each able to carry its own scale — replacing readings nested in one fill, which could only ever share one colour and stop at three. Documents written the old way are read as rows. - a chart's range picker moved to a column down its right-hand edge, which gives the plot back a whole row of a short tile. - the colour wheel became a disc: hue is the angle and saturation the distance from the middle, so a colour is one gesture rather than three, with brightness on a slider beside it. `index.css` and `lib/motion.ts` are untouched — the dashboard overrides token *values* on its canvas, never the blocks the two repos share.
This commit is contained in:
@@ -0,0 +1,234 @@
|
||||
/**
|
||||
* Liquid glass: the controls.
|
||||
*
|
||||
* A press is answered by the light moving — a soft glow that follows the
|
||||
* pointer across the surface — and by the control giving very slightly. Every
|
||||
* one of these is a `ui/core` hook in a different coat.
|
||||
*/
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { Check, ChevronDown } from "lucide-react"
|
||||
import { motion } from "motion/react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { asOriginal, text } from "../core/config"
|
||||
import type {
|
||||
ButtonProps,
|
||||
InputProps,
|
||||
SegmentedProps,
|
||||
SelectProps,
|
||||
SliderProps,
|
||||
SwitchProps,
|
||||
} from "../core/contract"
|
||||
import {
|
||||
usePress,
|
||||
useSegmented,
|
||||
useSliderDrag,
|
||||
useSwitch,
|
||||
} from "../core/controls"
|
||||
import { useLook } from "../core/look"
|
||||
import { LOOK } from "../core/motion"
|
||||
|
||||
export function Button({
|
||||
variant = "tonal",
|
||||
pressed,
|
||||
disabled,
|
||||
label,
|
||||
onClick,
|
||||
children,
|
||||
}: ButtonProps) {
|
||||
const { onPointerDown } = usePress()
|
||||
return (
|
||||
<motion.button
|
||||
type="button"
|
||||
className="gl-button gl-pressable w-full"
|
||||
data-variant={variant}
|
||||
aria-pressed={pressed}
|
||||
aria-label={label}
|
||||
disabled={disabled}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
transition={LOOK.glass.spring}
|
||||
onPointerDown={onPointerDown}
|
||||
onClick={onClick}
|
||||
>
|
||||
<span className="gl-glow" aria-hidden />
|
||||
<span className="min-w-0 truncate">{children}</span>
|
||||
</motion.button>
|
||||
)
|
||||
}
|
||||
|
||||
export function Switch(props: SwitchProps) {
|
||||
const { buttonProps } = useSwitch(props)
|
||||
const { onPointerDown } = usePress()
|
||||
return (
|
||||
<button
|
||||
{...buttonProps}
|
||||
className="gl-switch gl-pressable"
|
||||
onPointerDown={onPointerDown}
|
||||
>
|
||||
<span className="gl-glow" aria-hidden />
|
||||
<motion.span
|
||||
layout
|
||||
transition={LOOK.glass.spring}
|
||||
className="gl-switch-thumb"
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function Slider(props: SliderProps) {
|
||||
const { fraction, inputProps, marks } = useSliderDrag(props)
|
||||
const vertical = props.orientation === "vertical"
|
||||
return (
|
||||
<div
|
||||
className={cn("dui-slider gl-slider", vertical ? "h-full" : "w-full")}
|
||||
style={{ "--dui-fraction": fraction } as React.CSSProperties}
|
||||
>
|
||||
<div
|
||||
className={cn("flex min-w-0 flex-col", vertical ? "h-full" : "w-full")}
|
||||
>
|
||||
<input
|
||||
{...inputProps}
|
||||
data-orientation={props.orientation ?? "horizontal"}
|
||||
/>
|
||||
{marks.length > 0 ? (
|
||||
// Decoration: the input itself announces min, max and where it stands.
|
||||
<div aria-hidden className="gl-ticks">
|
||||
{marks.map((mark) => (
|
||||
<span
|
||||
key={mark.percent}
|
||||
className="absolute top-0"
|
||||
style={{
|
||||
left: `${mark.percent}%`,
|
||||
transform: `translateX(-${mark.percent}%)`,
|
||||
}}
|
||||
>
|
||||
{mark.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Segmented(props: SegmentedProps) {
|
||||
const { chosen, thumbId, groupProps, itemProps } = useSegmented(props)
|
||||
const vertical = props.orientation === "vertical"
|
||||
const { onPointerDown } = usePress()
|
||||
return (
|
||||
<div
|
||||
{...groupProps}
|
||||
data-testid={props.testId}
|
||||
className="gl-segmented"
|
||||
style={
|
||||
vertical
|
||||
? undefined
|
||||
: {
|
||||
gridTemplateColumns: `repeat(${props.options.length}, minmax(0, 1fr))`,
|
||||
}
|
||||
}
|
||||
>
|
||||
{props.options.map(([value, label], index) => (
|
||||
<button
|
||||
key={value}
|
||||
{...itemProps(index)}
|
||||
className="gl-segment gl-pressable"
|
||||
onPointerDown={onPointerDown}
|
||||
>
|
||||
{index === chosen ? (
|
||||
<motion.span
|
||||
aria-hidden
|
||||
layoutId={thumbId}
|
||||
transition={LOOK.glass.spring}
|
||||
className="gl-segment-thumb"
|
||||
/>
|
||||
) : null}
|
||||
<span className="gl-glow" aria-hidden />
|
||||
<span className="gl-segment-label">{label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Select({
|
||||
value,
|
||||
options,
|
||||
label,
|
||||
disabled,
|
||||
onChange,
|
||||
}: SelectProps) {
|
||||
// The menu is portalled to `body`, which is outside the canvas — so it
|
||||
// re-states the dashboard's own colours rather than borrowing the app's.
|
||||
const { style } = useLook()
|
||||
return (
|
||||
<SelectPrimitive.Root
|
||||
value={value}
|
||||
onValueChange={(selected) => onChange(asOriginal(selected, options))}
|
||||
>
|
||||
<SelectPrimitive.Trigger
|
||||
aria-label={label}
|
||||
disabled={disabled}
|
||||
className="gl-field gl-pressable justify-between"
|
||||
>
|
||||
<span className="gl-glow" aria-hidden />
|
||||
<span className="min-w-0 truncate">
|
||||
<SelectPrimitive.Value placeholder="Choose" />
|
||||
</span>
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="size-4 shrink-0 opacity-60" aria-hidden />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
position="popper"
|
||||
sideOffset={4}
|
||||
style={style}
|
||||
className="gl-menu z-50 max-h-64 min-w-[var(--radix-select-trigger-width)] overflow-y-auto p-1 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
|
||||
>
|
||||
<SelectPrimitive.Viewport>
|
||||
{options.map((option) => (
|
||||
<SelectPrimitive.Item
|
||||
key={text(option.value)}
|
||||
value={text(option.value)}
|
||||
className="flex cursor-pointer select-none items-center justify-between gap-2 rounded-xl px-3 py-2 text-sm outline-none data-[highlighted]:bg-white/15"
|
||||
>
|
||||
<SelectPrimitive.ItemText>
|
||||
{option.label ?? text(option.value)}
|
||||
</SelectPrimitive.ItemText>
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="size-4" aria-hidden />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</SelectPrimitive.Item>
|
||||
))}
|
||||
</SelectPrimitive.Viewport>
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
</SelectPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export function Input({
|
||||
value,
|
||||
type,
|
||||
label,
|
||||
disabled,
|
||||
onChange,
|
||||
onCommit,
|
||||
}: InputProps) {
|
||||
return (
|
||||
<input
|
||||
className="gl-field"
|
||||
value={value}
|
||||
type={type}
|
||||
aria-label={label}
|
||||
disabled={disabled}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
onBlur={onCommit}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") onCommit()
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user