Repository navigation
[Deprecated] New CSS System - #17
Merged
Merged
Conversation
This commit updates the navigation rail API and visuals with alignment, open/show/hide support, modal scrim handling, and improved slot layouts. It also adds demo coverage for expanded, collapsed, menu, fab, end, badge, and alignment variants, refreshes the docs page styling, and tunes navigation tab tokens for rail layouts and badges.
Standardize padding/margin token names across the repo by replacing legacy `*-inline-leading|inline-trailing|block-leading|block-trailing` and other shorthand patterns with a consistent `{padding|margin}-{inline|block}-{start|end}` scheme. Updated component style definitions, CSS usages, docs (AGENTS.md, CLAUDE.md, component-definitions/README.md), and component style files to use the new tokens. Also adjusted a split-button JSDoc entry and added `./src/**/dock-layout/*` to packages/mdc/tsconfig.json exclude. This unifies naming for clearer LTR/RTL semantics and consistent variable consumption.
Introduce a new Scaffold component (interface, base class, styles, component, style definition) and three scaffold demos (rail-layout, fab-position, dual-rail). Add Snackbar Host and global SnackbarService (interfaces, styles, host component, service, demo, and style definition) to manage queued snackbars. Export scaffold, snackbar-host, and snackbar-service from src/all.ts and add definitions to src/definitions.ts. Dev app: add scaffold docs page and include snackbar-host demo in snackbar docs. Vite config: guard component HTML inputs with existsSync. tsconfig: exclude ./src/**/dock-layout/*. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add license header and export HasToCSSVariable. Introduce strong typing (ResolvedStyleDefinition and helpers) and support for state tuples: array entries [enabled, hovered, pressed, focused, disabled] are expanded into prefixed tokens (enabled-*, hovered-*, ...). Null/undefined entries are omitted. createStyleDefinition now converts values exposing ToCSSVariable() and preserves single-value behavior. Improves token ergonomics and type-safety for component style definitions.
Introduce centralized state utilities and a CSS helper: add state.ts (STATE_NAMES, types, HasToCSSVariable), implement state-styles.ts (stateStyles) to expand token-backed properties across the 5 MD interaction states, add tests (state-styles.test.ts), and update create-style-definition.ts to consume STATE_NAMES. Export new modules from tokens index. These changes centralize state names/types and provide a reusable way to generate state-aware CSS from token suffixes.
This commit broadens stateStyles to support base selectors, explicit per-state overrides via selectors, and state-aware template placeholders in both selectors and property values. It also adds support for dynamic property generators and skips null states cleanly, with updated tests covering complex CSS expressions, sparse tuples, and override behavior.
This commit adds a workspace-level `npm test` script and package-level Vitest scripts for `@sandlada/mdc`. It configures Vitest to run colocated `src/**/*.spec.ts` tests, includes the package dependencies needed for test execution, and documents the repo’s TDD/testing conventions in both AGENTS.md and CLAUDE.md.
Introduce compileStateSheet + extractStateTokenMetadata and createStyleSheet utilities to expand multi-state tokens and generate differential CSS rules from MDC-style templates. Added vitest coverage for both compiler and createStyleSheet, and exported them from tokens index. Also adjusted resolveTemplateSelector in state-styles to support $state/{state} placeholders, host selector injection, and clean empty :host() artifacts.
This update teaches the state-sheet compiler to preserve nested @layer, @media, @supports, and @Keyframes blocks while resolving state tokens safely. It also prevents wrapper at-rules from being treated like selectors and adds regression tests covering layered and animated CSS.
Introduce a persistent mode for MDCFocusRing: add `persistent` property to the component and interface, expose `focusRingPersistent` in the mixin and bind it to the inner ring. Simplify close logic (remove timers/closing attr), implement animation restart and focus-visible checks. Refactor styles to use createStyleSheet, update token keys/vars and definition format, bump copyright year and add @Version. Add demos and Vitest specs for behavior and style.
Added the project baseline and zero-legacy guidance to AGENTS.md and CLAUDE.md. This clarifies the Chrome 150+, CSS Baseline 2026, and ECMAScript Next targets, and explicitly forbids legacy fallbacks, polyfills, and compatibility hacks in future component development.
Replace per-state tokens with compact color/opacity arrays in ripple.definition; rename CSS token usages and tighten transitions in ripple.style for smoother easing and durations. Tune timing constants (pressGrowMs/minimumPressMs) and harden RippleAction: accept optional click event, detect keyboard/programmatic clicks, clear startEvent on end, guard PointerEvent checks for SSR, handle pointerup/pointercancel in event gating, and pass click event through handler. Add comprehensive ripple.spec.ts unit tests covering states, pointer lifecycles and a quick-leave regression. Improves correctness, SSR safety, animation fidelity and test coverage.
Add support for the @starting-style wrapper in the state-sheet compiler by including it in isWrapperAtRule. Also add a unit test (state-sheet-compiler.spec.ts) to verify @starting-style blocks are preserved and emitted correctly.
Documented WCAG-aligned accessibility requirements for components, including forced colors, contrast preferences, reduced motion, and reduced transparency in both AGENTS.md and CLAUDE.md.
Add badge support for explicit labels, max thresholds, and zero auto-sizing while preserving value formatting and contrast-safe styling. This also updates the badge token definition, adds focused Vitest coverage for rendering and style contracts, and registers the new demo variants in the dev app.
Teach the state-sheet compiler to honor partial or null state definitions. extractStateTokenMetadata now records which specific states exist per base token and exposes hasStateToken. resolveStateValue falls back to the enabled token when a specific state token is missing. declHasStateDelta prevents emitting empty delta rules for states that have no tokens. compileAstNodes and related calls now accept the metadata. Added tests to assert that omitted/null states don't produce hover/focus/pressed/disabled deltas and that only states with defined tokens emit delta rules.
This patch stops the badge host from shrinking/growing inside flex layouts, which prevents it from disrupting parent alignment. It also adds a new interval demo that oscillates badge values between 0 and 5 to showcase auto-size and size/max behaviors.
Introduces the token definition pipeline for MD3-style component tokens, including forwarded child-token bridging, host variable injection, and stylesheet overrides. This adds new utilities for createStyleDefinition, forwardTokens, defineComponentTokenRefs, and overrideStyleSheet, plus docs and focused Vitest coverage for the new behavior.
DocsPage now executes inline demo <script> tags after first render. Scripts run inside a proxied document that queries the component shadowRoot first (getElementById/querySelector/querySelectorAll), and are guarded with a data-executed flag and error logging. Also added badge.interval.demo.html to the badge demo list.
Introduce a new workspace package `@sandlada/vscode-mdc` providing a VS Code extension and TypeScript language plugin for MDC tooling. Adds full implementation (core analyzers, compiler, completion/hover/definition/rename/diagnostic engines, CodeLens, tree view, compiled-CSS preview, code actions, snippets, rolldown build, and vitest tests). Wire up scripts in root package.json (test:vscode, build:vscode), add TS plugin to packages/mdc/tsconfig, and add @sandlada/vscode-mdc as a devDependency of packages/mdc. Also include .vscode launch/settings/tasks for extension development. Purpose: editor IntelliSense, token inspection, diagnostics, quick fixes, and live stylesheet compilation preview for the MDC component library.
Updated the icon component definition to use the current createStyleDefinition token format. The font and size tokens now follow the newer array-based schema, matching the component definition contract used elsewhere.
Update style compiler specs to enforce canonical @State insertion order for compound selectors and host-wrapped states, plus layer-scoped @variant/@when behavior. This keeps integration expectations consistent with the transform-state contract and covers new edge cases for pseudo-classes, ancestor wrapping, and @layer isolation.
Reorganized the styles compiler into sheet/selectors/transforms/hoist/declarations modules and moved the css-tree AST syntax layer under compiler/syntax. Added custom @state/@variant/@when parsing, selector hoisting, declaration macro expansion, and updated playground imports/usages across the app. Removed legacy wrapper files and adjusted config for css-tree resolution and dev-app typing.
Adds the vscode-mdc extension package with build/package scripts, vendored runtime dependencies, smoke validation, and VSIX packaging safeguards. This also updates workspace package wiring and naming to use the new vscode-mdc package, plus refreshes the repo guidance and loader comments to match the extension setup.
The build and test workflows now trigger on push events for the main branch only, while still running for pull requests. This reduces unnecessary CI runs on feature branches and aligns the workflow policy with the repository's mainline branch.
Introduce a page-title context and restructure the dev-app sidebar. Adds docsPageTitleContext (and barrel), makes <mdc-docs-page> publish its title, and <mdc-docs-shell> consume and display it in the header. Sidebar now renders three ordered sections (Playground, Base Components, Components) driven by updates to docs-manifest (playground, baseComponents, regularComponents). Root index.html now redirects to /components/playground/; landing component and its grid styles removed. README updated to document the new sections and contexts.
This change makes the docs shell sidebar responsive across breakpoints. Below md it uses a controlled native dialog with scrim and close-on-escape/scrim behavior; above md it stays visible as a static panel with a header menu toggle. The shell now subscribes to viewport breakpoint changes and auto-closes the sidebar in compact mode.
The diagnostic engine was incorrectly flagging private tokens that are virtual shorthand bases produced by stylesheet expansion (for example shape and typescale expansions). This adds a check that recognizes expanded shorthand roots only when all constituent tokens exist, preventing false MDC002 ghost-token reports while still rejecting truly undefined tokens.
This change adds positional n-dimensional token handling for multi-state schemas, including runtime validation, effective topology extraction, combo variable resolution, and serialization for rank 2+ tokens. It also updates state metadata and variable rewriting so joint tokens resolve to canonical combo names instead of flat state vars, while keeping 1D and singleton-dimension behavior compatible.
Add the new typography component definition and generated CSS token tables for role/size/emphasis combinations. This introduces schema-driven TypographyDefinition tokens, variant selector-based styling, and tests covering token expansion, fallback declarations, and selector coverage.
This updates typography token naming from `line-height` to `leading` across the definition and style specs, and switches the docs demo to the block variant. It also adds reduced-motion, contrast, and reduced-transparency handling in the typography stylesheet so the component matches the updated MD3 accessibility layers.
This change standardizes the accessibility macros to explicit `@contrast-more` and `@contrast-less` rules, updates the compiler validation and expansion logic, and refreshes the stylesheet analyzer metadata to recognize the new rule names. It also adds CSS snippet support to the VS Code extension for MDC design-token completion and usage.
Introduce DividerDefinition (DividerSchema) with thickness and color tokens and license/version header. Update divider.style.ts to import the new local definition and switch to @sandlada/styles/adapters/lit for createStyleSheet/stringifyTokens. Export the new divider.definition from the component barrel (index.ts). This wires divider tokens (prefix --mdc-divider) into the styles system and makes the definition available for consumers.
Introduce ripple.definition.ts (RippleSchema + RippleDefinition) to centralize ripple tokens (color, opacity per state). Export the new definition from components/ripple/index.ts. Update ripple.style.ts to import the local definition and use the @sandlada/styles lit adapter, and simplify createStyleSheet usage (remove pipe). These changes wire the ripple style tokens into the style sheet and correct import paths.
This commit introduces the focus-ring schema-based style definition and updates the component stylesheet to the new token pipeline. It also exports the definition so it can be registered and consumed consistently with other MDC components.
Add schema-driven button definitions for elevated, filled, tonal, outlined, and text variants, including size, shape, state, and color tokens. Export the button entrypoints and update the internal button styling to use the current token override adapter and local component definition paths.
This commit adds a schema-driven button token model covering interaction/variant and toggle combinations, including new spec coverage for definition and style generation. It also updates button styling to emit canonical token variables, expands toggle semantics to support the text variant, and refreshes demos to include icon sizing and the text toggle example.
Moves the button base and stylesheet files up to the component root, updates internal import paths, and aligns the state selector with the new style conventions. This keeps the button implementation consistent with the current component structure and generated CSS pattern.
Migrate carousel component to the new style definition system: - Add `carousel.definition.ts` with `createStyleDefinition` schema for per-size item widths, four-corner shapes (ExtraLarge/LargeIncreased/Medium), spacing, height, and logical container padding - Rewrite `carousel.style.ts` using `createStyleSheet` + `stringifyTokens` adapter; tokens now published as `--_*-item-width` / `--_*-item-shape-*` chains - Update `carousel-item.style.ts` to consume inherited per-size four-corner radius tokens - Update `internal/base-carousel.ts` to publish `--_computed-*-item-width` for definition chaining - Replace physical padding tokens (`leading/trailing/top/bottom`) with logical (`container-padding-inline/block-start/end`) - Add `carousel.style.spec.ts` validating token injection, host styles, uncontained variant, and reduced-motion layer - Add `index.ts` barrel export - Update README and all JSDoc `@cssproperty` tags to match new token names
Migrated card component definitions to use the new @sandlada/styles/schema API. Created card.definition.ts with ElevatedCardDefinition, FilledCardDefinition, and OutlinedCardDefinition using createStyleDefinition, defineSchema, expandShape, and expandPadding. Updated card.style.ts to use flow/withState/emptyTables from @sandlada/styles/foundation and schema. Added card.definition export to index.ts.
Moves all component definitions from `src/component-definitions/` into their respective component folders under `src/components/{name}/`. Adds barrel `index.ts` files for each component, migrates token handling from `@sandlada/jss` to `@sandlada/styles` package, updates imports across the codebase, and removes the centralized component-definitions barrel export. Also updates AGENTS.md documentation and package.json exports to reflect the new structure.
Introduces a new local token layer for @sandlada/mdc with: - `createStyleDefinition()` - frozen token definitions from plain records - `expandMargin()` / `expandPadding()` - expand to 4 logical CSS edge properties - `expandShape()` - expand to 4 logical corners (start-start, start-end, end-start, end-end) - `expandTypescale()` - expand to 5 typographic properties (font, leading, size, tracking, weight) - `stringifyTokens()` - emit :host private (--_*) declarations with public (--mdc-*) override fallbacks - `overrideTokens()` - generate public override declarations Simplified port from @sandlada/styles without schema/Cartesian/at-rule compiler logic. Includes CSSLike/ToCSSVariableLike contracts and MDCStyleSheet class for framework-agnostic CSS values.
…al utils/style Removes dependency on @sandlada/styles/schema across badge, divider, elevation, focus-ring, icon, ripple, and typography components. Key changes: - Replaces schema-based token definitions with flat explicit token objects (arrays → records) - Eliminates defineSchema, createStyleSheet, withState, emptyTables utilities - Migrates imports to local ../../utils/style - Typography: converts 5×3×2 n-dimensional schema to 150 flat keys (role-size-emphasis-prop) - Focus-ring: expands shape shorthand to explicit border-radius properties - Media queries: standardizes @forced-colors/@contrast-* to @media (prefers-*) syntax - Ripple: state tokens from arrays to objects keyed by state name
Replaces @sandlada/styles/schema and @sandlada/styles/adapters/lit imports with local ../../utils/style across all components. Key changes:
- Removes defineSchema() and all schema exports; token definitions now use flat objects (e.g., { 'enabled-filled-container-color': ... }) instead of nested joint arrays
- Replaces createStyleSheet(tables)(def)(() => css...) with direct css template literals and unsafeCSS for dynamic rule generation
- Migrates a11y at-rules (@forced-colors, @reduced-motion, @contrast-more, @contrast-less) to standard @media queries
- Deletes tooltip-box.definition.ts (behavioral controller with no visual surface)
- Updates Button, ToggleButton, Card, and other components to generate variant/size rules via Array.map + join instead of state tables
- Color spec test updated to match new flat token structure
Complete removal of the @sandlada/styles package from the monorepo: - Root scripts: dropped styles build/test commands - packages/mdc: removed @sandlada/styles dependency, vscode-mdc devDependency, mdcStyles() rolldown plugin, and @sandlada/styles aliases in tsconfig/vitest - packages/dev-app: deleted Styles Playground component (playground page, styles-playground.ts, presets, formatters), removed styles aliases, changed default redirect to Divider - Deleted tests for appbar, card, on-this-page (were testing styles schema internals) This eliminates the styles compiler/schema/tokens packages; MDC components now use plain native CSS in `css` literals with token definitions via createStyleDefinition().
Updated AGENTS.md with clarified architecture guidelines: - Product semantics now reference component README.md/demo/ instead of SPEC files - Styling approach simplified to native CSS + local token layer (no at-rules) - Composition pattern changed from flow() to nested calls - Error handling standardized to throw new Error() - Token layer established as single source of truth in src/utils/style/ - Build commands simplified (removed styles package references) Also added .playwright to .gitignore for Playwright test artifacts.
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.
This idea has been abandoned. Last related commit: 9cc6796
See @16
See #18
IDE Extension
Sidebar:
Live Preview: