[material-ui] POC: public agnostic CSS variables + density#48568
Draft
siriwatknp wants to merge 4 commits into
Draft
[material-ui] POC: public agnostic CSS variables + density#48568siriwatknp wants to merge 4 commits into
siriwatknp wants to merge 4 commits into
Conversation
Expose hand-authorable padding/height CSS vars on Button, InputBase, OutlinedInput, TextField; rewire to theme.spacing() so --mui-spacing drives holistic density. Inputs are height-driven (padding derived). Adds CONTEXT.md, ADR-0001, layering design doc, experiment page.
--Button-font-size on all sizes; inputs via --InputBase-font-size with variant chain --OutlinedInput-font-size and TextField mapping --TextField-font-size. Input height formula's 1em tracks font-size, so text re-centers in the fixed height automatically. Adds responsive font-size experiment section; switch demo rows to useFlexGap.
…vars --Button-bg/color/border-color/border-width/radius/shadow, layered over private --variant-* spec source; resting-only. --Button-border-width also drives outlined padding compensation. Adds ADR-0002 (agnostic public vars are the public API contract).
--TextField-color/border-color/border-width/radius mapped to variant-level --OutlinedInput-* (inward rule), consumed by NotchedOutline slot + root. Border-width focus uses var(--OutlinedInput-border-width, 2px): default 1px->2px preserved, focus = resting when customized. No --TextField-bg (InputBase styles no background). Resting-only.
Deploy previewhttps://deploy-preview-48568--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
POC exploring whether Material UI components should expose hand-authorable, agnostic CSS variables for color/border/radius/shadow/font-size/spacing, so theming is easier and "density" can be experimented with via a single dial.
Scope: Button (direct-padding density) + OutlinedInput / TextField / InputBase (layered, height-derived density). FilledInput / standard Input / Select deferred.
Key ideas
--Button-bg,--Button-radius,--TextField-border-color). No--mui-prefix. Overriding it opts that property out of the Material spec and hands the consumer full control.--variant-*palette source:var(--Button-bg, var(--variant-containedBg)). Default falls through to the spec → unbroken. Color is resting-only by design (customize color → you own hover/active states).--mui-spacing. Reuses the single base spacing dial emitted undercssVariables: true. Override it at a scope (class or@media) → whole UI reflows. Button padding scales directly; input height scales (--InputBase-heightdefaults tospacing(7)/spacing(5)) and padding is derived to keep text centered.--OutlinedInput-*: var(--TextField-*); OutlinedInput (extends InputBase) may reference--InputBase-*; InputBase mentions neither.Docs in this PR
CONTEXT.md— language, decisions, relationshipsdocs/adr/0001-public-css-var-inward-dependency.mddocs/adr/0002-agnostic-public-css-vars.mddocs/design/public-css-var-layering.md— worked example + rejected alternativesdocs/pages/experiments/css-vars-density.tsx— live demo (Different Apps via class scope; Different Viewports via@media)Open questions
xxs…xxl) — deferred; would slot under the single dial without component changes.height < line-height·font-size.