noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the foundation stylesheet, written without Tailwind

Browse Source 
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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 13:43:04 +02:00
co-authored by Claude Opus 5
parent d36f50bc3c
commit c545fb69ef
5 changed files with 435 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/foundation.css
Vendored
+37
View File
@@ -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';
resources/css/foundation/base.css
+24
View File
@@ -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);
}
}
resources/css/foundation/interaction.css
+111
View File
@@ -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;
}
}
}
resources/css/foundation/reset.css
+236
View File
@@ -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 <html>;
* - 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;
}
}
resources/css/foundation/tokens.css
+27
View File
@@ -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';