mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-20 05:56:53 +00:00
Maurice
341520f98b
The hover controls took their room at rest, so a place's line and a note's text broke early. A place now gives way only while hovered, a note's controls fade in over the end of its text in the note's own colour, and a picked place shows none. All three controls of a place come out together: the add-booking ticket waited for a React hover state and came a beat late. A click no longer leaves them showing; keyboard focus and an open menu do.
48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import type { CSSProperties } from 'react'
|
|
|
|
/**
|
|
* The four surfaces a note colour produces (#1629).
|
|
*
|
|
* One place decides how a colour becomes a card, so the preview in the dialog,
|
|
* the card in the day plan and the block in the inspector cannot drift apart.
|
|
*
|
|
* Tints rather than fills: a note sits in a list of places and must not shout
|
|
* louder than the trip itself, and body text has to stay readable on top. The
|
|
* percentages are `color-mix` against `transparent`, so the card picks up
|
|
* whatever surface it is dropped on and works in both themes without a second
|
|
* palette. `currentColor` is deliberately not used — the icon takes the full
|
|
* colour while the card behind it takes a wash of the same hue.
|
|
*/
|
|
export interface NoteSurface {
|
|
background: string
|
|
border: string
|
|
iconBackground: string
|
|
iconColor: string
|
|
}
|
|
|
|
const NEUTRAL: NoteSurface = {
|
|
background: 'var(--bg-hover)',
|
|
border: 'var(--border-faint)',
|
|
iconBackground: 'var(--bg-hover)',
|
|
iconColor: 'var(--text-muted)',
|
|
}
|
|
|
|
export function noteSurface(color: string | null | undefined): NoteSurface {
|
|
if (!color) return NEUTRAL
|
|
return {
|
|
background: `color-mix(in srgb, ${color} 11%, transparent)`,
|
|
border: `color-mix(in srgb, ${color} 38%, transparent)`,
|
|
iconBackground: `color-mix(in srgb, ${color} 22%, transparent)`,
|
|
iconColor: color,
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A day's activity area in the plan: its tint as the background, and named as
|
|
* a variable for the note fades drawn over it (dayPlanRows.css), so a fade
|
|
* matches a day a plugin has tinted too.
|
|
*/
|
|
export function dayBodyStyle(tint: string | null | undefined): CSSProperties {
|
|
return { background: tint ?? undefined, '--dp-day-tint': tint ?? 'transparent' } as CSSProperties
|
|
}
|