Andreas Reinhold / reiniandClaude Opus 5
e99c5993d8
Plan step 35: <x-surface level padding corner outlined>, a tonal region in surface or a surface-container step, padded with a spacing token, rounded with a corner token and optionally edged in outline-variant. A pane on a surface keeps its margin again, since the surface is a new edge. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
108 lines
3.7 KiB
CSS
108 lines
3.7 KiB
CSS
/*
|
|
* <x-surface>: a tonal region, M3's surface or one of its container steps.
|
|
*
|
|
* `data-md-level` names the colour role the region is filled with — `surface`, `surface-dim`,
|
|
* `surface-bright`, or `surface-container-lowest` … `surface-container-highest` — and its text is
|
|
* `on-surface`, the role M3 pairs with every one of them (docs/reference/m3/styles.md § Color →
|
|
* surface roles). The container steps are how M3 separates regions without a shadow: a higher step
|
|
* reads as nearer. `data-md-corner` rounds it with a corner token (`xs` … `full`,
|
|
* resources/css/tokens/shape.css), `data-md-padding` pads it with a spacing token (spacing.css),
|
|
* and `data-md-outlined` draws the 1dp outline-variant edge M3 gives an outlined container, for a
|
|
* boundary where the tones alone would be too close.
|
|
*
|
|
* A surface is an edge of its own: a pane or a canonical layout on it keeps its content off the
|
|
* surface's edge by M3's margin again, even inside a region that already drew one (pane.css,
|
|
* `--md-layout-margin`), which `initial` puts back to "not drawn yet".
|
|
*
|
|
* In `material.layout`, under every component, so a component drawn on a surface keeps its own
|
|
* container; `hide-below`/`hide-from` come from visibility.css.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './spacing.css';
|
|
@import './visibility.css';
|
|
|
|
@layer material.layout {
|
|
[data-md-surface] {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface'] {
|
|
background-color: var(--md-sys-color-surface);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-dim'] {
|
|
background-color: var(--md-sys-color-surface-dim);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-bright'] {
|
|
background-color: var(--md-sys-color-surface-bright);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-container-lowest'] {
|
|
background-color: var(--md-sys-color-surface-container-lowest);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-container-low'] {
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-container-high'] {
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-container-highest'] {
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='none'] {
|
|
border-radius: var(--md-sys-shape-corner-none);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='xs'] {
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='sm'] {
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='md'] {
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='lg'] {
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='lg-increased'] {
|
|
border-radius: var(--md-sys-shape-corner-lg-increased);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='xl'] {
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='xl-increased'] {
|
|
border-radius: var(--md-sys-shape-corner-xl-increased);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='xxl'] {
|
|
border-radius: var(--md-sys-shape-corner-xxl);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='full'] {
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
[data-md-surface][data-md-outlined] {
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-surface] > * {
|
|
--md-layout-margin: initial;
|
|
}
|
|
}
|