Andreas Reinhold / reiniandClaude Fable 5.1
25ff5a8d71
Tailwind's sm…2xl are cleared for M3's window size classes (medium 600, expanded 840, large 1200, extra-large 1600; resources/js/breakpoints.js for scripts), and its radius, shadow, text-size, weight, leading, tracking and easing scales are cleared like its palette, so only M3's utilities compile. The semantic inks are roles rather than opacities (M3 reserves 38% for disabled). state.css declares M3's state opacities as tokens, adds the dragged layer and a touch-target utility. Plan: docs/plans/material-3-alignment.md, steps 1, 2, 3 and 8. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
29 lines
1.0 KiB
JavaScript
29 lines
1.0 KiB
JavaScript
/**
|
|
* M3's window size classes, for scripts that ask the viewport width.
|
|
*
|
|
* The same four numbers as the `medium:`, `expanded:`, `large:` and `extra-large:` variants in
|
|
* tokens/theme.css; compact is everything below `medium`. `from('expanded')` and `upTo('medium')`
|
|
* return MediaQueryLists on the range syntax Tailwind compiles, so a script and a stylesheet
|
|
* never disagree at the boundary pixel.
|
|
*/
|
|
export const breakpoints = Object.freeze({
|
|
medium: 600,
|
|
expanded: 840,
|
|
large: 1200,
|
|
'extra-large': 1600,
|
|
})
|
|
|
|
const width = (name) => {
|
|
if (!(name in breakpoints)) {
|
|
throw new Error(`Unknown breakpoint "${name}". Use one of: ${Object.keys(breakpoints).join(', ')}.`)
|
|
}
|
|
|
|
return breakpoints[name]
|
|
}
|
|
|
|
/** Matches at and above the class's lower edge, like `medium:`. */
|
|
export const from = (name) => window.matchMedia(`(width >= ${width(name)}px)`)
|
|
|
|
/** Matches below the class's lower edge, like `max-medium:`. */
|
|
export const upTo = (name) => window.matchMedia(`(width < ${width(name)}px)`)
|