From c545fb69efd33a76849764bf76ba964a088c3954 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 13:43:04 +0200 Subject: [PATCH] Add the foundation stylesheet, written without Tailwind Plan step 33. foundation.css is the one required import: the full material layer statement, then plain imports of its parts, each opening with the same statement. - foundation/reset.css (material.reset): Tailwind 4's preflight rule for rule, with M3's on-surface-variant placeholder and no typeface. - foundation/hidden.css: [hidden] and [x-cloak], outside every layer. - foundation/tokens.css (material.tokens): the token files. - foundation/base.css (material.base): the page's surface, ink and brand typeface, and the font face. - foundation/interaction.css (material.base): md-state-layer, md-focus-ring, md-touch-target and md-link, the plain-CSS forms of the utilities; md-state-layer also takes data-md-dragged, and md-touch-target is 48px (space600) where the utility reads 3rem. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/foundation.css | 37 ++++ resources/css/foundation/base.css | 24 +++ resources/css/foundation/interaction.css | 111 +++++++++++ resources/css/foundation/reset.css | 236 +++++++++++++++++++++++ resources/css/foundation/tokens.css | 27 +++ 5 files changed, 435 insertions(+) create mode 100644 resources/css/foundation.css create mode 100644 resources/css/foundation/base.css create mode 100644 resources/css/foundation/interaction.css create mode 100644 resources/css/foundation/reset.css create mode 100644 resources/css/foundation/tokens.css diff --git a/resources/css/foundation.css b/resources/css/foundation.css new file mode 100644 index 00000000..ff936aaf --- /dev/null +++ b/resources/css/foundation.css @@ -0,0 +1,37 @@ +/* + * Livewire Material — the foundation, the one stylesheet every application imports, first: + * + * @import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css'; + * @import './material-scheme.css'; + * + * Plain CSS, no build step of its own: an application's bundler (Vite) inlines the imports, and a + * browser could read the files as they are. + * + * Every rule of the package sits in a sub-layer of `material`, in this order, lowest first: + * + * material.reset foundation/reset.css — the browser's defaults taken back + * material.tokens foundation/tokens.css — every `--md-sys-*` and `--md-ref-*` property + * material.base foundation/base.css, foundation/interaction.css — the page, the font + * face, and md-state-layer, md-focus-ring, md-touch-target, md-link + * material.layout the layout components: scaffold, panes, the canonical layouts + * material.components the components + * material.text text.css — md-type-*, md-ink-*, and the few classes for text + * material.visibility hiding an element below or from a breakpoint, over a component's display + * + * Every package stylesheet opens with the same layer statement, before its imports, so the order + * holds whichever file a bundler reaches first. An application's own CSS is unlayered and + * therefore outranks every package rule, whatever the selector — an application's broad selector + * (`button { … }`) restyles the components too. foundation/hidden.css keeps its two `!important` + * rules outside the layers, so `hidden` and `x-cloak` hide an element whatever sets its display. + * + * Until the components leave Tailwind, an application still building it imports this file before + * `@import 'tailwindcss'`, so the `material` layers are declared first and sit below Tailwind's. + */ + +@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; + +@import './foundation/reset.css'; +@import './foundation/hidden.css'; +@import './foundation/tokens.css'; +@import './foundation/base.css'; +@import './foundation/interaction.css'; diff --git a/resources/css/foundation/base.css b/resources/css/foundation/base.css new file mode 100644 index 00000000..bda12bcc --- /dev/null +++ b/resources/css/foundation/base.css @@ -0,0 +1,24 @@ +/* + * The page itself: M3's background and default ink, in the brand typeface. + * + * The page is `surface` and its text `on-surface`, the default typography colour + * (docs/reference/m3/styles.md § Typography, "Accessibility requirements"). `color-scheme` is + * declared with the roles in tokens/scheme.css, so native controls and scrollbars change with + * `data-theme` in the same block as the colours. The typeface is + * `--md-ref-typeface-brand` (tokens/type.css), Google Sans Flex from tokens/font.css, whose + * `@font-face` this file imports into the same layer. + * + * In `material.base`, above the reset and below every component and text class. + */ + +@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; + +@import '../tokens/font.css'; + +@layer material.base { + html { + background-color: var(--md-sys-color-surface); + color: var(--md-sys-color-on-surface); + font-family: var(--md-ref-typeface-brand); + } +} diff --git a/resources/css/foundation/interaction.css b/resources/css/foundation/interaction.css new file mode 100644 index 00000000..de484196 --- /dev/null +++ b/resources/css/foundation/interaction.css @@ -0,0 +1,111 @@ +/* + * The interaction classes every interactive component shares, and an application's own control + * can use: M3's state layer, its focus indicator, its minimum target, and a link in running text. + * + * `md-state-layer` lays the content colour over an element at M3's state opacities + * (tokens/state.css): hover 8%, focus and press 10%, dragged 16%. Hover only where the pointer + * can hover, because a touch screen keeps the last hover after a tap; `data-md-dragged` (or the + * older `data-dragged`) on the element draws the dragged layer; a disabled element has none. The + * layer is a ::before, so the element becomes `position: relative` and `isolation: isolate`. + * + * `md-focus-ring` is M3's focus indicator — 3px in secondary, 2px out, drawn only for keyboard + * focus. The site gives no thickness or offset; the values are @material/web's focus ring tokens + * (Apache-2.0, © Google LLC). + * + * `md-touch-target` extends an element's pointer target to M3's 48×48 minimum without changing + * what is drawn: a ::after centred on it, at least `space600` (48px) each way. M3 gives the web + * target as "48 × 48 CSS pixels", so the size is px and does not grow with the text. It is + * `::after`-based, so a component that already draws with ::after wraps its control in an element + * carrying it. + * + * `md-link` is a link in running text: underlined in the colour of the words around it, because + * M3 never lets colour alone mark a link (docs/reference/m3/styles.md § Typography); give it + * `md-ink-primary` where it should also read as primary. + * + * The same declarations as the `state-layer`, `focus-ring`, `touch-target` and `link` utilities + * (tokens/utilities.css) the components still written in Tailwind use; `md-touch-target` alone + * differs, in px where the utility reads 3rem. In `material.base`, so a component's own rules, + * the text classes and an application's rules all outrank them. + */ + +@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; + +@layer material.base { + .md-state-layer { + position: relative; + isolation: isolate; + + &::before { + content: ''; + position: absolute; + inset: 0; + z-index: -1; + border-radius: inherit; + background-color: currentColor; + opacity: 0; + pointer-events: none; + transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); + } + + @media (hover: hover) { + &:hover::before { + opacity: var(--md-sys-state-hover-state-layer-opacity); + } + } + + &:focus-visible::before { + opacity: var(--md-sys-state-focus-state-layer-opacity); + } + + &:active::before { + opacity: var(--md-sys-state-pressed-state-layer-opacity); + } + + &:is([data-md-dragged], [data-dragged])::before { + opacity: var(--md-sys-state-dragged-state-layer-opacity); + } + + &:disabled::before, + &[aria-disabled='true']::before { + display: none; + } + } + + .md-focus-ring { + outline: none; + + &:focus-visible { + outline: 3px solid var(--md-sys-color-secondary); + outline-offset: 2px; + } + } + + .md-touch-target { + position: relative; + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + min-width: var(--md-sys-measurement-space600); + min-height: var(--md-sys-measurement-space600); + transform: translate(-50%, -50%); + } + } + + .md-link { + cursor: pointer; + text-decoration-line: underline; + text-decoration-thickness: from-font; + text-underline-offset: 0.15em; + border-radius: var(--md-sys-shape-corner-xs); + + &:focus-visible { + outline: 3px solid var(--md-sys-color-secondary); + outline-offset: 2px; + } + } +} diff --git a/resources/css/foundation/reset.css b/resources/css/foundation/reset.css new file mode 100644 index 00000000..815af0ab --- /dev/null +++ b/resources/css/foundation/reset.css @@ -0,0 +1,236 @@ +/* + * The reset: what a browser draws before any stylesheet, taken back to a clean start. + * + * Rule for rule the reset the components were built on, Tailwind CSS 4's preflight (MIT, + * © Tailwind Labs, after modern-normalize), so a component looks the same whether an application + * still builds Tailwind or not: every box `border-box` with a `0 solid` border and no margin or + * padding, headings and lists unstyled, form controls inheriting font, colour and tracking with no + * background or radius, media as blocks that never overflow their parent. Three differences: + * + * - no typeface here: foundation/base.css sets `--md-ref-typeface-brand` on ; + * - a placeholder is `on-surface-variant`, the colour of M3's text field placeholder (androidx + * FilledTextFieldTokens.kt, InputPlaceholderColor), not half the text colour; + * - it sits in `material.reset`, the lowest layer, so every package rule and every application + * rule outranks it without a specificity fight. + * + * The two rules that must win everything — `[hidden]` and `[x-cloak]` — are foundation/hidden.css. + */ + +@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; + +@layer material.reset { + /* Padding and border inside the width; no default margin, padding or border. */ + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + + /* A readable line height and tab size, no font resizing on rotation (iOS), no tap flash. */ + html, + :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-feature-settings: normal; + font-variation-settings: normal; + -webkit-tap-highlight-color: transparent; + } + + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } + + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + + b, + strong { + font-weight: bolder; + } + + code, + kbd, + samp, + pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + font-feature-settings: normal; + font-variation-settings: normal; + font-size: 1em; + } + + small { + font-size: 80%; + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + + :-moz-focusring:where(:not(iframe)) { + outline: auto; + } + + progress { + vertical-align: baseline; + } + + summary { + display: list-item; + } + + ol, + ul, + menu { + list-style: none; + } + + /* Replaced elements are blocks, aligned to the middle when made inline again. */ + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + + img, + video { + max-width: 100%; + height: auto; + } + + /* Form controls take the text around them, with no background, radius or disabled fade. */ + button, + input, + select, + optgroup, + textarea, + ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + + ::file-selector-button { + margin-inline-end: 4px; + } + + ::placeholder { + opacity: 1; + color: var(--md-sys-color-on-surface-variant); + } + + textarea { + resize: vertical; + } + + ::-webkit-search-decoration { + -webkit-appearance: none; + } + + /* Date and time inputs keep one height and follow text-align (Safari). */ + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + + ::-webkit-datetime-edit { + display: inline-flex; + } + + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + + ::-webkit-datetime-edit, + ::-webkit-datetime-edit-year-field, + ::-webkit-datetime-edit-month-field, + ::-webkit-datetime-edit-day-field, + ::-webkit-datetime-edit-hour-field, + ::-webkit-datetime-edit-minute-field, + ::-webkit-datetime-edit-second-field, + ::-webkit-datetime-edit-millisecond-field, + ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + + :-moz-ui-invalid { + box-shadow: none; + } + + button, + input:where([type='button'], [type='reset'], [type='submit']), + ::file-selector-button { + appearance: button; + } + + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } +} diff --git a/resources/css/foundation/tokens.css b/resources/css/foundation/tokens.css new file mode 100644 index 00000000..9c062e80 --- /dev/null +++ b/resources/css/foundation/tokens.css @@ -0,0 +1,27 @@ +/* + * The tokens: every `--md-sys-*` and `--md-ref-*` custom property the package reads. + * + * Each token file wraps its own declarations in `material.tokens`, because an `@import` cannot sit + * inside a layer block and `layer()` on the import would nest the layer a second time. Being the + * lowest layer but one, a token here loses to the same property declared anywhere an application + * writes it: its generated `material-scheme.css`, unlayered, replaces the default scheme below + * whatever its selectors, and a typeface or a spacing step is overridden the same way. + * + * scheme the colour roles of M3's baseline scheme, light and dark, three contrast levels + * shape the corner scale + * elevation the five shadow levels + * motion the springs of both motion schemes and M3's legacy easings + * type the 30 type styles and the brand typeface + * state the state-layer and disabled opacities + * spacing the measurement scale, space25 … space900 + */ + +@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; + +@import '../tokens/scheme.css'; +@import '../tokens/shape.css'; +@import '../tokens/elevation.css'; +@import '../tokens/motion.css'; +@import '../tokens/type.css'; +@import '../tokens/state.css'; +@import '../tokens/spacing.css';