Repository: material-components/material-web Branch: main Commit: e16e2f6c5e18 Files: 1209 Total size: 4.0 MB Directory structure: gitextract_t0d4cjg1/ ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug.yaml │ │ ├── config.yml │ │ ├── documentation-bug.yaml │ │ └── feature.yaml │ └── workflows/ │ ├── build-catalog.yml │ ├── commitlint.yml │ ├── firebase-hosting-merge.yml │ ├── firebase-hosting-pull-request.yml │ ├── nightly.yml │ ├── publish.yml │ ├── release-please.yml │ ├── test.yml │ ├── update-docs-on-main.yml │ └── update-size-on-main.yml ├── .gitignore ├── .release-please-manifest.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── all.ts ├── button/ │ ├── _elevated-button.scss │ ├── _filled-button.scss │ ├── _filled-tonal-button.scss │ ├── _outlined-button.scss │ ├── _text-button.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── elevated-button.ts │ ├── elevated-button_test.ts │ ├── filled-button.ts │ ├── filled-button_test.ts │ ├── filled-tonal-button.ts │ ├── filled-tonal-button_test.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _elevated-button.scss │ │ ├── _elevation.scss │ │ ├── _filled-button.scss │ │ ├── _filled-tonal-button.scss │ │ ├── _icon.scss │ │ ├── _outlined-button.scss │ │ ├── _shared.scss │ │ ├── _text-button.scss │ │ ├── _touch-target.scss │ │ ├── button.ts │ │ ├── button_test.ts │ │ ├── elevated-button.ts │ │ ├── elevated-styles.scss │ │ ├── filled-button.ts │ │ ├── filled-styles.scss │ │ ├── filled-tonal-button.ts │ │ ├── filled-tonal-styles.scss │ │ ├── outlined-button.ts │ │ ├── outlined-styles.scss │ │ ├── shared-elevation-styles.scss │ │ ├── shared-styles.scss │ │ ├── text-button.ts │ │ └── text-styles.scss │ ├── outlined-button.ts │ ├── outlined-button_test.ts │ ├── text-button.ts │ └── text-button_test.ts ├── catalog/ │ ├── .firebaserc │ ├── eleventy-helpers/ │ │ ├── filters/ │ │ │ ├── filter-sort.cjs │ │ │ ├── filter-toc.cjs │ │ │ └── md-markdown.cjs │ │ ├── plugins/ │ │ │ ├── copy-code-button.cjs │ │ │ └── permalinks.cjs │ │ ├── shortcodes/ │ │ │ ├── inline-css.cjs │ │ │ ├── inline-js.cjs │ │ │ └── playground-example.cjs │ │ └── transforms/ │ │ └── minify-html.cjs │ ├── eleventy.config.cjs │ ├── esbuild.config.mjs │ ├── firebase.json │ ├── package.json │ ├── scripts/ │ │ ├── copy-docs.mjs │ │ └── copy-stories.mjs │ ├── site/ │ │ ├── _includes/ │ │ │ ├── default.html │ │ │ └── layouts/ │ │ │ ├── components.html │ │ │ └── docs.html │ │ ├── about/ │ │ │ └── about.json │ │ ├── components/ │ │ │ └── components.json │ │ ├── css/ │ │ │ ├── global.css │ │ │ ├── home-page.css │ │ │ ├── md-layout.css │ │ │ ├── no-js.css │ │ │ ├── stories.css │ │ │ └── syntax-highlight.css │ │ ├── index.html │ │ ├── stories/ │ │ │ └── stories.html │ │ └── theming/ │ │ └── theming.json │ ├── src/ │ │ ├── components/ │ │ │ ├── catalog-component-header-title.ts │ │ │ ├── catalog-component-header.ts │ │ │ ├── copy-code-button.ts │ │ │ ├── drag-playground.ts │ │ │ ├── hct-slider.ts │ │ │ ├── nav-drawer.ts │ │ │ ├── theme-changer.ts │ │ │ └── top-app-bar.ts │ │ ├── hydration-entrypoints/ │ │ │ ├── components/ │ │ │ │ ├── button.ts │ │ │ │ ├── checkbox.ts │ │ │ │ ├── fab.ts │ │ │ │ ├── icon-button.ts │ │ │ │ ├── list.ts │ │ │ │ ├── menu.ts │ │ │ │ ├── select.ts │ │ │ │ └── text-field.ts │ │ │ ├── copy-code-button.ts │ │ │ ├── menu.ts │ │ │ ├── navigation.ts │ │ │ └── playground-elements.ts │ │ ├── inline/ │ │ │ └── apply-saved-theme.ts │ │ ├── pages/ │ │ │ ├── components.ts │ │ │ ├── global.ts │ │ │ ├── home-page.ts │ │ │ └── stories.ts │ │ ├── signals/ │ │ │ ├── drawer-open-state.ts │ │ │ ├── inert.ts │ │ │ └── signal-element.ts │ │ ├── ssr-utils/ │ │ │ ├── dsd-polyfill.ts │ │ │ ├── lit-hydrate-support.ts │ │ │ └── lit-island.ts │ │ ├── ssr.ts │ │ ├── svg/ │ │ │ └── material-design-logo.ts │ │ ├── types/ │ │ │ ├── color-events.ts │ │ │ └── is-land.d.ts │ │ └── utils/ │ │ ├── apply-theme-string.ts │ │ ├── material-color-helpers.ts │ │ └── theme.ts │ ├── stories/ │ │ ├── base.json │ │ ├── components/ │ │ │ ├── knob-ui-components.ts │ │ │ ├── stories-renderer.ts │ │ │ ├── story-knob-panel.ts │ │ │ └── story-renderer.ts │ │ ├── index.html │ │ ├── index.ts │ │ ├── knobs.ts │ │ ├── material-collection.ts │ │ ├── story.ts │ │ └── theme-loader.ts │ └── tsconfig.json ├── checkbox/ │ ├── _checkbox.scss │ ├── checkbox.ts │ ├── checkbox_test.ts │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ └── internal/ │ ├── _checkbox.scss │ ├── checkbox-styles.scss │ ├── checkbox.ts │ └── checkbox_test.ts ├── chips/ │ ├── _assist-chip.scss │ ├── _filter-chip.scss │ ├── _input-chip.scss │ ├── _suggestion-chip.scss │ ├── assist-chip.ts │ ├── assist-chip_test.ts │ ├── chip-set.ts │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── filter-chip.ts │ ├── filter-chip_test.ts │ ├── harness.ts │ ├── input-chip.ts │ ├── input-chip_test.ts │ ├── internal/ │ │ ├── _assist-chip.scss │ │ ├── _chip-set.scss │ │ ├── _elevated.scss │ │ ├── _filter-chip.scss │ │ ├── _input-chip.scss │ │ ├── _selectable.scss │ │ ├── _shared.scss │ │ ├── _suggestion-chip.scss │ │ ├── _trailing-icon.scss │ │ ├── assist-chip.ts │ │ ├── assist-chip_test.ts │ │ ├── assist-styles.scss │ │ ├── chip-set-styles.scss │ │ ├── chip-set.ts │ │ ├── chip-set_test.ts │ │ ├── chip.ts │ │ ├── chip_test.ts │ │ ├── elevated-styles.scss │ │ ├── filter-chip.ts │ │ ├── filter-chip_test.ts │ │ ├── filter-styles.scss │ │ ├── input-chip.ts │ │ ├── input-chip_test.ts │ │ ├── input-styles.scss │ │ ├── multi-action-chip.ts │ │ ├── multi-action-chip_test.ts │ │ ├── selectable-styles.scss │ │ ├── shared-styles.scss │ │ ├── suggestion-chip.ts │ │ ├── suggestion-chip_test.ts │ │ ├── suggestion-styles.scss │ │ ├── trailing-icon-styles.scss │ │ └── trailing-icons.ts │ ├── suggestion-chip.ts │ └── suggestion-chip_test.ts ├── color/ │ └── _color.scss ├── commitlint.config.js ├── common.ts ├── dialog/ │ ├── _dialog.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── dialog.ts │ ├── dialog_test.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _dialog.scss │ │ ├── animations.ts │ │ ├── dialog-styles.scss │ │ └── dialog.ts │ └── test/ │ └── window_size.json ├── divider/ │ ├── _divider.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── divider.ts │ ├── divider_test.ts │ └── internal/ │ ├── _divider.scss │ ├── divider-styles.scss │ └── divider.ts ├── docs/ │ ├── components/ │ │ ├── button.md │ │ ├── checkbox.md │ │ ├── chip.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── elevation.md │ │ ├── fab.md │ │ ├── figures/ │ │ │ ├── checkbox/ │ │ │ │ ├── theming.html │ │ │ │ ├── usage-label.html │ │ │ │ └── usage.html │ │ │ ├── fab/ │ │ │ │ ├── extended-fabs.html │ │ │ │ ├── fabs.html │ │ │ │ ├── theming-branded.html │ │ │ │ ├── theming-extended.html │ │ │ │ ├── theming-fab.html │ │ │ │ ├── usage-branded-extended.html │ │ │ │ ├── usage-branded-sizes.html │ │ │ │ ├── usage-branded.html │ │ │ │ ├── usage-color.html │ │ │ │ ├── usage-extended.html │ │ │ │ ├── usage-fab.html │ │ │ │ ├── usage-lowered.html │ │ │ │ ├── usage-sizes.html │ │ │ │ └── usage-without-icon.html │ │ │ ├── iconbutton/ │ │ │ │ ├── buttons.html │ │ │ │ ├── theming-filled-tonal.html │ │ │ │ ├── theming-filled.html │ │ │ │ ├── theming-outlined.html │ │ │ │ ├── theming-standard.html │ │ │ │ ├── usage-filled-tonal.html │ │ │ │ ├── usage-filled.html │ │ │ │ ├── usage-outlined.html │ │ │ │ ├── usage-standard.html │ │ │ │ ├── usage-toggle.html │ │ │ │ └── usage.html │ │ │ ├── list/ │ │ │ │ ├── theming-icon.html │ │ │ │ ├── theming-image.html │ │ │ │ ├── theming-list.html │ │ │ │ ├── usage-icon.html │ │ │ │ ├── usage-image.html │ │ │ │ └── usage.html │ │ │ ├── menu/ │ │ │ │ ├── theming.html │ │ │ │ ├── usage-document.html │ │ │ │ ├── usage-fixed.html │ │ │ │ ├── usage-popover.html │ │ │ │ ├── usage-submenu.html │ │ │ │ └── usage.html │ │ │ ├── select/ │ │ │ │ ├── theming-filled.html │ │ │ │ ├── theming-outlined.html │ │ │ │ └── usage.html │ │ │ └── textfield/ │ │ │ ├── theming-filled.html │ │ │ ├── theming-outlined.html │ │ │ ├── usage-char-counter.html │ │ │ ├── usage-icons.html │ │ │ ├── usage-label.html │ │ │ ├── usage-prefix.html │ │ │ ├── usage-supporting-text.html │ │ │ ├── usage-textarea.html │ │ │ ├── usage-type.html │ │ │ └── usage.html │ │ ├── focus-ring.md │ │ ├── icon-button.md │ │ ├── icon.md │ │ ├── list.md │ │ ├── menu.md │ │ ├── progress.md │ │ ├── radio.md │ │ ├── ripple.md │ │ ├── select.md │ │ ├── slider.md │ │ ├── switch.md │ │ ├── tabs.md │ │ └── text-field.md │ ├── intro.md │ ├── quick-start.md │ ├── roadmap.md │ ├── sass/ │ │ └── sass-ext.md │ ├── size.md │ ├── support.md │ └── theming/ │ ├── README.md │ ├── color.md │ ├── shape.md │ └── typography.md ├── elevation/ │ ├── _elevation.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── elevation.ts │ ├── elevation_test.ts │ └── internal/ │ ├── _elevation.scss │ ├── elevation-styles.scss │ └── elevation.ts ├── fab/ │ ├── _fab.scss │ ├── branded-fab.ts │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── fab.ts │ ├── fab_test.ts │ ├── harness.ts │ └── internal/ │ ├── _fab-branded.scss │ ├── _fab.scss │ ├── _shared.scss │ ├── fab-branded-styles.scss │ ├── fab-styles.scss │ ├── fab.ts │ ├── forced-colors-styles.scss │ ├── shared-styles.scss │ └── shared.ts ├── field/ │ ├── _filled-field.scss │ ├── _outlined-field.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── filled-field.ts │ ├── filled-field_test.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _content.scss │ │ ├── _filled-field.scss │ │ ├── _label.scss │ │ ├── _outlined-field.scss │ │ ├── _shared.scss │ │ ├── _supporting-text.scss │ │ ├── field.ts │ │ ├── field_test.ts │ │ ├── filled-field.ts │ │ ├── filled-styles.scss │ │ ├── outlined-field.ts │ │ ├── outlined-styles.scss │ │ └── shared-styles.scss │ ├── outlined-field.ts │ └── outlined-field_test.ts ├── focus/ │ ├── _focus-ring.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── internal/ │ │ ├── _focus-ring.scss │ │ ├── focus-ring-styles.scss │ │ ├── focus-ring.ts │ │ └── focus-ring_test.ts │ ├── md-focus-ring.ts │ └── md-focus-ring_test.ts ├── icon/ │ ├── _icon.scss │ ├── icon.ts │ ├── icon_test.ts │ └── internal/ │ ├── _icon.scss │ ├── icon-styles.scss │ └── icon.ts ├── iconbutton/ │ ├── _filled-icon-button.scss │ ├── _filled-tonal-icon-button.scss │ ├── _icon-button.scss │ ├── _outlined-icon-button.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── filled-icon-button.ts │ ├── filled-icon-button_test.ts │ ├── filled-tonal-icon-button.ts │ ├── filled-tonal-icon-button_test.ts │ ├── harness.ts │ ├── icon-button.ts │ ├── icon-button_test.ts │ ├── internal/ │ │ ├── _filled-icon-button.scss │ │ ├── _filled-tonal-icon-button.scss │ │ ├── _icon-button.scss │ │ ├── _outlined-icon-button.scss │ │ ├── _shared.scss │ │ ├── filled-styles.scss │ │ ├── filled-tonal-styles.scss │ │ ├── icon-button.ts │ │ ├── outlined-styles.scss │ │ ├── shared-styles.scss │ │ └── standard-styles.scss │ ├── outlined-icon-button.ts │ └── outlined-icon-button_test.ts ├── internal/ │ ├── README.md │ ├── aria/ │ │ ├── aria.ts │ │ ├── aria_test.ts │ │ ├── delegate.ts │ │ └── delegate_test.ts │ ├── controller/ │ │ ├── attachable-controller.ts │ │ ├── is-rtl.ts │ │ ├── is-rtl_test.ts │ │ ├── string-converter.ts │ │ └── string-converter_test.ts │ ├── events/ │ │ ├── dispatch-hooks.ts │ │ ├── dispatch-hooks_test.ts │ │ ├── form-label-activation.ts │ │ ├── form-label-activation_test.ts │ │ ├── redispatch-event.ts │ │ └── redispatch-event_test.ts │ └── motion/ │ ├── _animation.scss │ ├── animation.ts │ └── animation_test.ts ├── labs/ │ ├── README.md │ ├── badge/ │ │ ├── _badge.scss │ │ ├── badge.ts │ │ ├── badge_test.ts │ │ └── internal/ │ │ ├── _badge.scss │ │ ├── badge-styles.scss │ │ └── badge.ts │ ├── behaviors/ │ │ ├── constraint-validation.ts │ │ ├── constraint-validation_test.ts │ │ ├── custom-state-set.ts │ │ ├── custom-state-set_test.ts │ │ ├── element-internals.ts │ │ ├── element-internals_test.ts │ │ ├── focusable.ts │ │ ├── focusable_test.ts │ │ ├── form-associated.ts │ │ ├── form-associated_test.ts │ │ ├── form-submitter.ts │ │ ├── form-submitter_test.ts │ │ ├── mixin.ts │ │ ├── on-report-validity.ts │ │ ├── on-report-validity_test.ts │ │ └── validators/ │ │ ├── checkbox-validator.ts │ │ ├── checkbox-validator_test.ts │ │ ├── radio-validator.ts │ │ ├── radio-validator_test.ts │ │ ├── select-validator.ts │ │ ├── select-validator_test.ts │ │ ├── text-field-validator.ts │ │ ├── text-field-validator_test.ts │ │ ├── validator.ts │ │ └── validator_test.ts │ ├── card/ │ │ ├── _elevated-card.scss │ │ ├── _filled-card.scss │ │ ├── _outlined-card.scss │ │ ├── demo/ │ │ │ ├── demo.ts │ │ │ ├── project.json │ │ │ └── stories.ts │ │ ├── elevated-card.ts │ │ ├── elevated-card_test.ts │ │ ├── filled-card.ts │ │ ├── filled-card_test.ts │ │ ├── internal/ │ │ │ ├── _elevated-card.scss │ │ │ ├── _filled-card.scss │ │ │ ├── _outlined-card.scss │ │ │ ├── _shared.scss │ │ │ ├── card.ts │ │ │ ├── elevated-styles.scss │ │ │ ├── filled-styles.scss │ │ │ ├── outlined-styles.scss │ │ │ └── shared-styles.scss │ │ ├── outlined-card.ts │ │ └── outlined-card_test.ts │ ├── item/ │ │ ├── demo/ │ │ │ ├── demo.ts │ │ │ ├── project.json │ │ │ └── stories.ts │ │ ├── internal/ │ │ │ ├── _item.scss │ │ │ ├── item-styles.scss │ │ │ └── item.ts │ │ └── item.ts │ ├── navigationbar/ │ │ ├── _navigation-bar.scss │ │ ├── demo/ │ │ │ ├── demo.ts │ │ │ ├── project.json │ │ │ └── stories.ts │ │ ├── harness.ts │ │ ├── internal/ │ │ │ ├── _navigation-bar.scss │ │ │ ├── constants.ts │ │ │ ├── navigation-bar-styles.scss │ │ │ ├── navigation-bar.ts │ │ │ └── state.ts │ │ ├── md-navigation-bar_test.ts │ │ └── navigation-bar.ts │ ├── navigationdrawer/ │ │ ├── _navigation-drawer-modal.scss │ │ ├── _navigation-drawer.scss │ │ ├── internal/ │ │ │ ├── _navigation-drawer-modal.scss │ │ │ ├── _navigation-drawer.scss │ │ │ ├── _shared.scss │ │ │ ├── navigation-drawer-modal-styles.scss │ │ │ ├── navigation-drawer-modal.ts │ │ │ ├── navigation-drawer-styles.scss │ │ │ ├── navigation-drawer.ts │ │ │ └── shared-styles.scss │ │ ├── navigation-drawer-modal.ts │ │ └── navigation-drawer.ts │ ├── navigationtab/ │ │ ├── _navigation-tab.scss │ │ ├── harness.ts │ │ ├── internal/ │ │ │ ├── _navigation-tab.scss │ │ │ ├── navigation-tab-styles.scss │ │ │ ├── navigation-tab.ts │ │ │ └── state.ts │ │ ├── md-navigation-tab_test.ts │ │ └── navigation-tab.ts │ ├── segmentedbutton/ │ │ ├── internal/ │ │ │ ├── _outlined-segmented-button.scss │ │ │ ├── _shared.scss │ │ │ ├── outlined-segmented-button.ts │ │ │ ├── outlined-styles.scss │ │ │ ├── segmented-button.ts │ │ │ └── shared-styles.scss │ │ └── outlined-segmented-button.ts │ └── segmentedbuttonset/ │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── internal/ │ │ ├── _outlined-segmented-button-set.scss │ │ ├── _shared.scss │ │ ├── outlined-segmented-button-set.ts │ │ ├── outlined-styles.scss │ │ ├── segmented-button-set.ts │ │ └── shared-styles.scss │ └── outlined-segmented-button-set.ts ├── list/ │ ├── _list-item.scss │ ├── _list.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _list.scss │ │ ├── list-controller.ts │ │ ├── list-navigation-helpers.ts │ │ ├── list-styles.scss │ │ ├── list.ts │ │ └── listitem/ │ │ ├── _list-item.scss │ │ ├── harness.ts │ │ ├── list-item-styles.scss │ │ └── list-item.ts │ ├── list-item.ts │ ├── list-item_test.ts │ ├── list.ts │ ├── list_test.ts │ └── test/ │ ├── assets.ts │ └── window_size.json ├── menu/ │ ├── _menu-item.scss │ ├── _menu.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _menu.scss │ │ ├── controllers/ │ │ │ ├── menuItemController.ts │ │ │ ├── shared.ts │ │ │ ├── surfacePositionController.ts │ │ │ └── typeaheadController.ts │ │ ├── menu-styles.scss │ │ ├── menu.ts │ │ ├── menuitem/ │ │ │ ├── _menu-item.scss │ │ │ ├── harness.ts │ │ │ ├── menu-item-styles.scss │ │ │ └── menu-item.ts │ │ ├── submenu/ │ │ │ ├── _sub-menu.scss │ │ │ ├── sub-menu-styles.scss │ │ │ └── sub-menu.ts │ │ └── types.ts │ ├── menu-item.ts │ ├── menu.ts │ ├── menu_test.ts │ ├── sub-menu.ts │ └── test/ │ └── window_size.json ├── migrations/ │ └── v2/ │ ├── README.md │ ├── query-selector-aria.ts │ └── query-selector-aria_test.ts ├── package.json ├── progress/ │ ├── _circular-progress.scss │ ├── _linear-progress.scss │ ├── circular-progress.ts │ ├── circular-progress_test.ts │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _circular-progress.scss │ │ ├── _linear-progress.scss │ │ ├── circular-progress-styles.scss │ │ ├── circular-progress.ts │ │ ├── linear-progress-styles.scss │ │ ├── linear-progress.ts │ │ └── progress.ts │ ├── linear-progress.ts │ └── linear-progress_test.ts ├── radio/ │ ├── _radio.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _radio.scss │ │ ├── radio-styles.scss │ │ ├── radio.ts │ │ └── single-selection-controller.ts │ ├── radio.ts │ └── radio_test.ts ├── release-please-config.json ├── ripple/ │ ├── _ripple.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── internal/ │ │ ├── _ripple.scss │ │ ├── ripple-styles.scss │ │ ├── ripple.ts │ │ └── ripple_test.ts │ ├── ripple.ts │ └── ripple_test.ts ├── sass/ │ └── ext/ │ ├── _assert.scss │ ├── _assert_test.scss │ ├── _list_ext.scss │ ├── _list_ext_test.scss │ ├── _map_ext.scss │ ├── _map_ext_test.scss │ ├── _string_ext.scss │ ├── _string_ext_test.scss │ ├── _throw.scss │ ├── _throw_test.scss │ ├── _type.scss │ ├── _type_test.scss │ ├── _var.scss │ ├── _var_test.scss │ └── tests.scss ├── scripts/ │ ├── analyzer/ │ │ ├── analyze-element.ts │ │ ├── element-docs-map.ts │ │ ├── markdown-tree-builder.ts │ │ └── update-docs.ts │ ├── component-custom-elements.ts │ ├── css-to-ts.ts │ ├── size/ │ │ ├── bundle-size.ts │ │ └── update-size.ts │ ├── tsconfig.json │ └── update-sass-ext-docs.ts ├── select/ │ ├── _filled-select.scss │ ├── _outlined-select.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── filled-select.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _filled-select.scss │ │ ├── _outlined-select.scss │ │ ├── _shared.scss │ │ ├── filled-select-styles.scss │ │ ├── filled-select.ts │ │ ├── outlined-select-styles.scss │ │ ├── outlined-select.ts │ │ ├── select.ts │ │ ├── selectoption/ │ │ │ ├── harness.ts │ │ │ ├── select-option.ts │ │ │ └── selectOptionController.ts │ │ ├── shared-styles.scss │ │ └── shared.ts │ ├── outlined-select.ts │ ├── select-option.ts │ ├── select_test.ts │ └── test/ │ ├── assets.ts │ └── window_size.json ├── slider/ │ ├── _slider.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _slider.scss │ │ ├── forced-colors-styles.scss │ │ ├── slider-styles.scss │ │ └── slider.ts │ ├── slider.ts │ └── slider_test.ts ├── switch/ │ ├── _switch.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ ├── internal/ │ │ ├── README.md │ │ ├── _handle.scss │ │ ├── _icon.scss │ │ ├── _switch.scss │ │ ├── _track.scss │ │ ├── switch-styles.scss │ │ ├── switch.ts │ │ └── switch_test.ts │ ├── switch.ts │ └── switch_test.ts ├── tabs/ │ ├── _primary-tab.scss │ ├── _secondary-tab.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ ├── internal/ │ │ ├── _primary-tab.scss │ │ ├── _secondary-tab.scss │ │ ├── _tab.scss │ │ ├── _tabs.scss │ │ ├── primary-tab-styles.scss │ │ ├── primary-tab.ts │ │ ├── secondary-tab-styles.scss │ │ ├── secondary-tab.ts │ │ ├── tab-styles.scss │ │ ├── tab.ts │ │ ├── tabs-styles.scss │ │ └── tabs.ts │ ├── primary-tab.ts │ ├── secondary-tab.ts │ ├── tabs.ts │ ├── tabs_test.ts │ └── test/ │ └── window_size.json ├── testing/ │ ├── environment.ts │ ├── forms.ts │ ├── harness.ts │ ├── skip-animations.ts │ ├── skip-animations_test.ts │ ├── table/ │ │ ├── _test-table.scss │ │ ├── internal/ │ │ │ ├── _test-table.scss │ │ │ ├── test-table-styles.scss │ │ │ ├── test-table.ts │ │ │ └── test-table_test.ts │ │ └── test-table.ts │ ├── templates.ts │ ├── tokens.ts │ ├── tokens_test.ts │ └── transform-pseudo-classes.ts ├── textfield/ │ ├── _filled-text-field.scss │ ├── _outlined-text-field.scss │ ├── demo/ │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── filled-text-field.ts │ ├── filled-text-field_test.ts │ ├── harness.ts │ ├── harness_test.ts │ ├── internal/ │ │ ├── _filled-text-field.scss │ │ ├── _icon.scss │ │ ├── _input.scss │ │ ├── _outlined-text-field.scss │ │ ├── _shared.scss │ │ ├── filled-styles.scss │ │ ├── filled-text-field.ts │ │ ├── outlined-styles.scss │ │ ├── outlined-text-field.ts │ │ ├── shared-styles.scss │ │ ├── text-field.ts │ │ └── text-field_test.ts │ ├── outlined-text-field.ts │ └── outlined-text-field_test.ts ├── tokens/ │ ├── _index.scss │ ├── _md-comp-assist-chip.scss │ ├── _md-comp-badge.scss │ ├── _md-comp-checkbox.scss │ ├── _md-comp-circular-progress.scss │ ├── _md-comp-dialog.scss │ ├── _md-comp-divider.scss │ ├── _md-comp-elevated-button.scss │ ├── _md-comp-elevated-card.scss │ ├── _md-comp-elevation.scss │ ├── _md-comp-fab-branded.scss │ ├── _md-comp-fab.scss │ ├── _md-comp-filled-button.scss │ ├── _md-comp-filled-card.scss │ ├── _md-comp-filled-field.scss │ ├── _md-comp-filled-icon-button.scss │ ├── _md-comp-filled-select.scss │ ├── _md-comp-filled-text-field.scss │ ├── _md-comp-filled-tonal-button.scss │ ├── _md-comp-filled-tonal-icon-button.scss │ ├── _md-comp-filter-chip.scss │ ├── _md-comp-focus-ring.scss │ ├── _md-comp-full-screen-dialog.scss │ ├── _md-comp-icon-button.scss │ ├── _md-comp-icon.scss │ ├── _md-comp-input-chip.scss │ ├── _md-comp-item.scss │ ├── _md-comp-linear-progress.scss │ ├── _md-comp-list-item.scss │ ├── _md-comp-list.scss │ ├── _md-comp-menu-item.scss │ ├── _md-comp-menu.scss │ ├── _md-comp-navigation-bar.scss │ ├── _md-comp-navigation-drawer.scss │ ├── _md-comp-outlined-button.scss │ ├── _md-comp-outlined-card.scss │ ├── _md-comp-outlined-field.scss │ ├── _md-comp-outlined-icon-button.scss │ ├── _md-comp-outlined-segmented-button.scss │ ├── _md-comp-outlined-select.scss │ ├── _md-comp-outlined-text-field.scss │ ├── _md-comp-primary-tab.scss │ ├── _md-comp-radio.scss │ ├── _md-comp-ripple.scss │ ├── _md-comp-secondary-tab.scss │ ├── _md-comp-slider.scss │ ├── _md-comp-suggestion-chip.scss │ ├── _md-comp-switch.scss │ ├── _md-comp-test-table.scss │ ├── _md-comp-text-button.scss │ ├── _md-ref-palette.scss │ ├── _md-ref-typeface.scss │ ├── _md-sys-color.scss │ ├── _md-sys-elevation.scss │ ├── _md-sys-motion.scss │ ├── _md-sys-shape.scss │ ├── _md-sys-state.scss │ ├── _md-sys-typescale.scss │ ├── internal/ │ │ ├── _shape.scss │ │ └── _validate.scss │ ├── v0_192/ │ │ ├── _index.scss │ │ ├── _md-comp-assist-chip.scss │ │ ├── _md-comp-badge.scss │ │ ├── _md-comp-banner.scss │ │ ├── _md-comp-bottom-app-bar.scss │ │ ├── _md-comp-carousel-item.scss │ │ ├── _md-comp-checkbox.scss │ │ ├── _md-comp-circular-progress-indicator.scss │ │ ├── _md-comp-data-table.scss │ │ ├── _md-comp-date-input-modal.scss │ │ ├── _md-comp-date-picker-docked.scss │ │ ├── _md-comp-date-picker-modal.scss │ │ ├── _md-comp-dialog.scss │ │ ├── _md-comp-divider.scss │ │ ├── _md-comp-elevated-button.scss │ │ ├── _md-comp-elevated-card.scss │ │ ├── _md-comp-extended-fab-branded.scss │ │ ├── _md-comp-extended-fab-primary.scss │ │ ├── _md-comp-extended-fab-secondary.scss │ │ ├── _md-comp-extended-fab-surface.scss │ │ ├── _md-comp-extended-fab-tertiary.scss │ │ ├── _md-comp-fab-branded-large.scss │ │ ├── _md-comp-fab-branded.scss │ │ ├── _md-comp-fab-primary-large.scss │ │ ├── _md-comp-fab-primary-small.scss │ │ ├── _md-comp-fab-primary.scss │ │ ├── _md-comp-fab-secondary-large.scss │ │ ├── _md-comp-fab-secondary-small.scss │ │ ├── _md-comp-fab-secondary.scss │ │ ├── _md-comp-fab-surface-large.scss │ │ ├── _md-comp-fab-surface-small.scss │ │ ├── _md-comp-fab-surface.scss │ │ ├── _md-comp-fab-tertiary-large.scss │ │ ├── _md-comp-fab-tertiary-small.scss │ │ ├── _md-comp-fab-tertiary.scss │ │ ├── _md-comp-filled-autocomplete.scss │ │ ├── _md-comp-filled-button.scss │ │ ├── _md-comp-filled-card.scss │ │ ├── _md-comp-filled-icon-button.scss │ │ ├── _md-comp-filled-menu-button.scss │ │ ├── _md-comp-filled-select.scss │ │ ├── _md-comp-filled-text-field.scss │ │ ├── _md-comp-filled-tonal-button.scss │ │ ├── _md-comp-filled-tonal-icon-button.scss │ │ ├── _md-comp-filter-chip.scss │ │ ├── _md-comp-full-screen-dialog.scss │ │ ├── _md-comp-icon-button.scss │ │ ├── _md-comp-input-chip.scss │ │ ├── _md-comp-linear-progress-indicator.scss │ │ ├── _md-comp-list.scss │ │ ├── _md-comp-menu.scss │ │ ├── _md-comp-navigation-bar.scss │ │ ├── _md-comp-navigation-drawer.scss │ │ ├── _md-comp-navigation-rail.scss │ │ ├── _md-comp-outlined-autocomplete.scss │ │ ├── _md-comp-outlined-button.scss │ │ ├── _md-comp-outlined-card.scss │ │ ├── _md-comp-outlined-icon-button.scss │ │ ├── _md-comp-outlined-menu-button.scss │ │ ├── _md-comp-outlined-segmented-button.scss │ │ ├── _md-comp-outlined-select.scss │ │ ├── _md-comp-outlined-text-field.scss │ │ ├── _md-comp-plain-tooltip.scss │ │ ├── _md-comp-primary-navigation-tab.scss │ │ ├── _md-comp-radio-button.scss │ │ ├── _md-comp-rich-tooltip.scss │ │ ├── _md-comp-scrim.scss │ │ ├── _md-comp-search-bar.scss │ │ ├── _md-comp-search-view.scss │ │ ├── _md-comp-secondary-navigation-tab.scss │ │ ├── _md-comp-sheet-bottom.scss │ │ ├── _md-comp-sheet-floating.scss │ │ ├── _md-comp-sheet-side.scss │ │ ├── _md-comp-slider.scss │ │ ├── _md-comp-snackbar.scss │ │ ├── _md-comp-standard-menu-button.scss │ │ ├── _md-comp-suggestion-chip.scss │ │ ├── _md-comp-switch.scss │ │ ├── _md-comp-text-button.scss │ │ ├── _md-comp-time-input.scss │ │ ├── _md-comp-time-picker.scss │ │ ├── _md-comp-top-app-bar-large.scss │ │ ├── _md-comp-top-app-bar-medium.scss │ │ ├── _md-comp-top-app-bar-small-centered.scss │ │ ├── _md-comp-top-app-bar-small.scss │ │ ├── _md-ref-palette.scss │ │ ├── _md-ref-typeface.scss │ │ ├── _md-sys-color.scss │ │ ├── _md-sys-elevation.scss │ │ ├── _md-sys-motion.scss │ │ ├── _md-sys-shape.scss │ │ ├── _md-sys-state.scss │ │ ├── _md-sys-typescale.scss │ │ ├── index.test.scss │ │ └── lib.test.scss │ └── versions/ │ ├── README.md │ ├── v0_192/ │ │ ├── _index.scss │ │ ├── _md-comp-assist-chip.scss │ │ ├── _md-comp-badge.scss │ │ ├── _md-comp-banner.scss │ │ ├── _md-comp-bottom-app-bar.scss │ │ ├── _md-comp-carousel-item.scss │ │ ├── _md-comp-checkbox.scss │ │ ├── _md-comp-circular-progress-indicator.scss │ │ ├── _md-comp-data-table.scss │ │ ├── _md-comp-date-input-modal.scss │ │ ├── _md-comp-date-picker-docked.scss │ │ ├── _md-comp-date-picker-modal.scss │ │ ├── _md-comp-dialog.scss │ │ ├── _md-comp-divider.scss │ │ ├── _md-comp-elevated-button.scss │ │ ├── _md-comp-elevated-card.scss │ │ ├── _md-comp-extended-fab-branded.scss │ │ ├── _md-comp-extended-fab-primary.scss │ │ ├── _md-comp-extended-fab-secondary.scss │ │ ├── _md-comp-extended-fab-surface.scss │ │ ├── _md-comp-extended-fab-tertiary.scss │ │ ├── _md-comp-fab-branded-large.scss │ │ ├── _md-comp-fab-branded.scss │ │ ├── _md-comp-fab-primary-large.scss │ │ ├── _md-comp-fab-primary-small.scss │ │ ├── _md-comp-fab-primary.scss │ │ ├── _md-comp-fab-secondary-large.scss │ │ ├── _md-comp-fab-secondary-small.scss │ │ ├── _md-comp-fab-secondary.scss │ │ ├── _md-comp-fab-surface-large.scss │ │ ├── _md-comp-fab-surface-small.scss │ │ ├── _md-comp-fab-surface.scss │ │ ├── _md-comp-fab-tertiary-large.scss │ │ ├── _md-comp-fab-tertiary-small.scss │ │ ├── _md-comp-fab-tertiary.scss │ │ ├── _md-comp-filled-autocomplete.scss │ │ ├── _md-comp-filled-button.scss │ │ ├── _md-comp-filled-card.scss │ │ ├── _md-comp-filled-icon-button.scss │ │ ├── _md-comp-filled-menu-button.scss │ │ ├── _md-comp-filled-select.scss │ │ ├── _md-comp-filled-text-field.scss │ │ ├── _md-comp-filled-tonal-button.scss │ │ ├── _md-comp-filled-tonal-icon-button.scss │ │ ├── _md-comp-filter-chip.scss │ │ ├── _md-comp-full-screen-dialog.scss │ │ ├── _md-comp-icon-button.scss │ │ ├── _md-comp-input-chip.scss │ │ ├── _md-comp-linear-progress-indicator.scss │ │ ├── _md-comp-list.scss │ │ ├── _md-comp-menu.scss │ │ ├── _md-comp-navigation-bar.scss │ │ ├── _md-comp-navigation-drawer.scss │ │ ├── _md-comp-navigation-rail.scss │ │ ├── _md-comp-outlined-autocomplete.scss │ │ ├── _md-comp-outlined-button.scss │ │ ├── _md-comp-outlined-card.scss │ │ ├── _md-comp-outlined-icon-button.scss │ │ ├── _md-comp-outlined-menu-button.scss │ │ ├── _md-comp-outlined-segmented-button.scss │ │ ├── _md-comp-outlined-select.scss │ │ ├── _md-comp-outlined-text-field.scss │ │ ├── _md-comp-plain-tooltip.scss │ │ ├── _md-comp-primary-navigation-tab.scss │ │ ├── _md-comp-radio-button.scss │ │ ├── _md-comp-rich-tooltip.scss │ │ ├── _md-comp-scrim.scss │ │ ├── _md-comp-search-bar.scss │ │ ├── _md-comp-search-view.scss │ │ ├── _md-comp-secondary-navigation-tab.scss │ │ ├── _md-comp-sheet-bottom.scss │ │ ├── _md-comp-sheet-floating.scss │ │ ├── _md-comp-sheet-side.scss │ │ ├── _md-comp-slider.scss │ │ ├── _md-comp-snackbar.scss │ │ ├── _md-comp-standard-menu-button.scss │ │ ├── _md-comp-suggestion-chip.scss │ │ ├── _md-comp-switch.scss │ │ ├── _md-comp-text-button.scss │ │ ├── _md-comp-time-input.scss │ │ ├── _md-comp-time-picker.scss │ │ ├── _md-comp-top-app-bar-large.scss │ │ ├── _md-comp-top-app-bar-medium.scss │ │ ├── _md-comp-top-app-bar-small-centered.scss │ │ ├── _md-comp-top-app-bar-small.scss │ │ ├── _md-ref-palette.scss │ │ ├── _md-ref-typeface.scss │ │ ├── _md-sys-color.scss │ │ ├── _md-sys-elevation.scss │ │ ├── _md-sys-motion.scss │ │ ├── _md-sys-shape.scss │ │ ├── _md-sys-state.scss │ │ ├── _md-sys-typescale.scss │ │ ├── index.test.scss │ │ └── lib.test.scss │ └── v30_0/ │ └── sass/ │ ├── _index.scss │ ├── _md-comp-app-bar-large-flexible.scss │ ├── _md-comp-app-bar-large.scss │ ├── _md-comp-app-bar-medium-flexible.scss │ ├── _md-comp-app-bar-medium.scss │ ├── _md-comp-app-bar-small.scss │ ├── _md-comp-app-bar.scss │ ├── _md-comp-assist-chip.scss │ ├── _md-comp-badge.scss │ ├── _md-comp-banner.scss │ ├── _md-comp-banners-basic.scss │ ├── _md-comp-banners-rich.scss │ ├── _md-comp-banners.scss │ ├── _md-comp-bottom-app-bar.scss │ ├── _md-comp-button-elevated.scss │ ├── _md-comp-button-filled.scss │ ├── _md-comp-button-group-connected-large.scss │ ├── _md-comp-button-group-connected-medium.scss │ ├── _md-comp-button-group-connected-small.scss │ ├── _md-comp-button-group-connected-xlarge.scss │ ├── _md-comp-button-group-connected-xsmall.scss │ ├── _md-comp-button-group-standard-large.scss │ ├── _md-comp-button-group-standard-medium.scss │ ├── _md-comp-button-group-standard-small.scss │ ├── _md-comp-button-group-standard-xlarge.scss │ ├── _md-comp-button-group-standard-xsmall.scss │ ├── _md-comp-button-large.scss │ ├── _md-comp-button-medium.scss │ ├── _md-comp-button-outlined.scss │ ├── _md-comp-button-small.scss │ ├── _md-comp-button-text.scss │ ├── _md-comp-button-tonal.scss │ ├── _md-comp-button-xlarge.scss │ ├── _md-comp-button-xsmall.scss │ ├── _md-comp-button.scss │ ├── _md-comp-carousel-item.scss │ ├── _md-comp-checkbox.scss │ ├── _md-comp-circular-progress-indicator.scss │ ├── _md-comp-data-table.scss │ ├── _md-comp-date-input-modal.scss │ ├── _md-comp-date-picker-docked.scss │ ├── _md-comp-date-picker-modal.scss │ ├── _md-comp-dialog.scss │ ├── _md-comp-divider.scss │ ├── _md-comp-drag-handle.scss │ ├── _md-comp-elevated-button.scss │ ├── _md-comp-elevated-card.scss │ ├── _md-comp-extended-fab-branded.scss │ ├── _md-comp-extended-fab-large.scss │ ├── _md-comp-extended-fab-medium.scss │ ├── _md-comp-extended-fab-primary-container.scss │ ├── _md-comp-extended-fab-primary.scss │ ├── _md-comp-extended-fab-secondary-container.scss │ ├── _md-comp-extended-fab-secondary.scss │ ├── _md-comp-extended-fab-small.scss │ ├── _md-comp-extended-fab-surface.scss │ ├── _md-comp-extended-fab-tertiary-container.scss │ ├── _md-comp-extended-fab-tertiary.scss │ ├── _md-comp-extended-fab.scss │ ├── _md-comp-fab-branded-large.scss │ ├── _md-comp-fab-branded.scss │ ├── _md-comp-fab-large.scss │ ├── _md-comp-fab-medium.scss │ ├── _md-comp-fab-menu-primary-close-button.scss │ ├── _md-comp-fab-menu-primary-container.scss │ ├── _md-comp-fab-menu-secondary-close-button.scss │ ├── _md-comp-fab-menu-secondary-container.scss │ ├── _md-comp-fab-menu-tertiary-close-button.scss │ ├── _md-comp-fab-menu-tertiary-container.scss │ ├── _md-comp-fab-menu.scss │ ├── _md-comp-fab-primary-container.scss │ ├── _md-comp-fab-primary-large.scss │ ├── _md-comp-fab-primary-small.scss │ ├── _md-comp-fab-primary.scss │ ├── _md-comp-fab-secondary-container.scss │ ├── _md-comp-fab-secondary-large.scss │ ├── _md-comp-fab-secondary-small.scss │ ├── _md-comp-fab-secondary.scss │ ├── _md-comp-fab-small.scss │ ├── _md-comp-fab-surface-large.scss │ ├── _md-comp-fab-surface.scss │ ├── _md-comp-fab-tertiary-container.scss │ ├── _md-comp-fab-tertiary-large.scss │ ├── _md-comp-fab-tertiary-small.scss │ ├── _md-comp-fab-tertiary.scss │ ├── _md-comp-fab.scss │ ├── _md-comp-filled-autocomplete.scss │ ├── _md-comp-filled-button.scss │ ├── _md-comp-filled-card.scss │ ├── _md-comp-filled-icon-button.scss │ ├── _md-comp-filled-menu-button.scss │ ├── _md-comp-filled-select.scss │ ├── _md-comp-filled-text-field.scss │ ├── _md-comp-filled-tonal-button.scss │ ├── _md-comp-filled-tonal-icon-button.scss │ ├── _md-comp-filter-chip.scss │ ├── _md-comp-full-screen-dialog.scss │ ├── _md-comp-icon-button-filled.scss │ ├── _md-comp-icon-button-large.scss │ ├── _md-comp-icon-button-medium.scss │ ├── _md-comp-icon-button-outlined.scss │ ├── _md-comp-icon-button-small.scss │ ├── _md-comp-icon-button-standard.scss │ ├── _md-comp-icon-button-tonal.scss │ ├── _md-comp-icon-button-xlarge.scss │ ├── _md-comp-icon-button-xsmall.scss │ ├── _md-comp-icon-button.scss │ ├── _md-comp-input-chip.scss │ ├── _md-comp-linear-progress-indicator.scss │ ├── _md-comp-list-expand.scss │ ├── _md-comp-list-reorder.scss │ ├── _md-comp-list-reveal.scss │ ├── _md-comp-list.scss │ ├── _md-comp-loading-indicator.scss │ ├── _md-comp-menu.scss │ ├── _md-comp-menus-standard.scss │ ├── _md-comp-menus-vibrant.scss │ ├── _md-comp-menus.scss │ ├── _md-comp-nav-bar-item-horizontal.scss │ ├── _md-comp-nav-bar-item-vertical.scss │ ├── _md-comp-nav-bar.scss │ ├── _md-comp-nav-rail-collapsed.scss │ ├── _md-comp-nav-rail-expanded.scss │ ├── _md-comp-nav-rail-item-horizontal.scss │ ├── _md-comp-nav-rail-item-vertical.scss │ ├── _md-comp-nav-rail-item.scss │ ├── _md-comp-nav-rail.scss │ ├── _md-comp-navigation-bar.scss │ ├── _md-comp-navigation-drawer.scss │ ├── _md-comp-navigation-rail.scss │ ├── _md-comp-outlined-autocomplete.scss │ ├── _md-comp-outlined-button.scss │ ├── _md-comp-outlined-card.scss │ ├── _md-comp-outlined-menu-button.scss │ ├── _md-comp-outlined-segmented-button.scss │ ├── _md-comp-outlined-select.scss │ ├── _md-comp-outlined-text-field.scss │ ├── _md-comp-plain-tooltip.scss │ ├── _md-comp-primary-navigation-tab.scss │ ├── _md-comp-progress-indicator-circular.scss │ ├── _md-comp-progress-indicator-linear.scss │ ├── _md-comp-progress-indicator.scss │ ├── _md-comp-radio-button.scss │ ├── _md-comp-rich-tooltip.scss │ ├── _md-comp-scrim.scss │ ├── _md-comp-search-bar.scss │ ├── _md-comp-search-view.scss │ ├── _md-comp-secondary-navigation-tab.scss │ ├── _md-comp-sheet-bottom.scss │ ├── _md-comp-sheet-floating.scss │ ├── _md-comp-sheet-side.scss │ ├── _md-comp-slider-large.scss │ ├── _md-comp-slider-medium.scss │ ├── _md-comp-slider-small.scss │ ├── _md-comp-slider-xlarge.scss │ ├── _md-comp-slider-xsmall.scss │ ├── _md-comp-slider.scss │ ├── _md-comp-snackbar.scss │ ├── _md-comp-split-button-large.scss │ ├── _md-comp-split-button-medium.scss │ ├── _md-comp-split-button-small.scss │ ├── _md-comp-split-button-xlarge.scss │ ├── _md-comp-split-button-xsmall.scss │ ├── _md-comp-standard-menu-button.scss │ ├── _md-comp-suggestion-chip.scss │ ├── _md-comp-switch.scss │ ├── _md-comp-text-button.scss │ ├── _md-comp-time-input.scss │ ├── _md-comp-time-picker.scss │ ├── _md-comp-toolbar-docked.scss │ ├── _md-comp-toolbar-floating-fab.scss │ ├── _md-comp-toolbar-floating.scss │ ├── _md-comp-toolbar-standard.scss │ ├── _md-comp-toolbar-vibrant.scss │ ├── _md-comp-top-app-bar-large.scss │ ├── _md-comp-top-app-bar-medium.scss │ ├── _md-comp-top-app-bar-small-centered.scss │ ├── _md-comp-top-app-bar-small.scss │ ├── _md-ref-palette.scss │ ├── _md-ref-typeface.scss │ ├── _md-sys-color.scss │ ├── _md-sys-color__dark.scss │ ├── _md-sys-color__dark__high-contrast.scss │ ├── _md-sys-color__dark__medium-contrast.scss │ ├── _md-sys-color__high-contrast.scss │ ├── _md-sys-color__medium-contrast.scss │ ├── _md-sys-elevation.scss │ ├── _md-sys-motion.scss │ ├── _md-sys-shape.scss │ ├── _md-sys-state-focus-indicator.scss │ ├── _md-sys-state.scss │ ├── _md-sys-typescale-emphasized.scss │ └── _md-sys-typescale.scss ├── tsconfig.json ├── typography/ │ ├── _typeface.scss │ ├── _typescale.scss │ └── md-typescale-styles.scss └── web-test-runner.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/ISSUE_TEMPLATE/bug.yaml ================================================ name: 🐛 Bug Report description: Report a bug that affects a Material Web component body: - type: dropdown id: affected validations: required: true attributes: label: What is affected? multiple: true description: Note you can select more than one. options: - Accessibility - Component - Theming - Tooling - Other/unknown - type: textarea id: description validations: required: true attributes: label: Description description: | Please describe the bug in as much detail as possible. Include what you expected to happen, and what actually happened. If you have an error message, please include as much of the error message as possible. placeholder: | When I do '...'. I would expect '...'. However, instead '...' happens. - type: textarea id: reproduction validations: required: true attributes: label: Reproduction description: | If possible, please link to a working reproduction that will help us verify and understand the bug. Bugs that provide a reproduction in CodePen, Fiddle, or lit.dev playground ([Example Playground](https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi9idXR0b24vb3V0bGluZWQtYnV0dG9uLmpzXCI7In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vbWF0ZXJpYWwtaW1wb3J0cy5qc1wiPjwvc2NyaXB0PlxuXG48bWQtb3V0bGluZWQtYnV0dG9uPkEgbWF0ZXJpYWwgYnV0dG9uPC9tZC1vdXRsaW5lZC1idXR0b24-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMi4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4xLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeMy4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjIuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d)) can be triaged much faster. For bugs that show up on the command-line, please create a [Stackblitz](https://stackblitz.com/) Node.js/Vite project, and provide step-by-step instructions for setting up, and observing the bug. placeholder: | The text should update when the button is clicked, but it doesn't: https://lit.dev/playground/#gist=f9817b9c703e037b5ac576030110a983 - type: textarea id: workaround validations: required: true attributes: label: Workaround description: | If you have found a workaround for this problem, please explain it here. If you have not found a workaround, please write "I have not found a workaround". placeholder: | I have worked around this problem by registering the event handler manually with `addEventListener`. ... or: I have not found a workaround. - type: dropdown id: regression validations: required: true attributes: label: Is this a regression? multiple: false options: - Yes. This used to work, but now it doesn't. - No or unsure. This never worked, or I haven't tried before. - type: input id: version validations: required: true attributes: label: Affected versions description: Please specify which version of the package you are using, and if this is a known regression, what is the last known version that worked? Run e.g. `npm ls @material/web` to check your installed version. placeholder: | Failing in X.X.X, worked in X.X.X - type: textarea id: environment validations: required: true attributes: label: Browser/OS/Node environment description: | Please list which browser and operating system combination(s) you are using, and/or if this bug affects a command-line tool, please list your Node and npm versions. placeholder: | Browser: Chrome 103.0.5060.53 OS: macOS 12.4 Node version: 16.15.0 npm version: 8.11.0 ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ blank_issues_enabled: false contact_links: - name: ❓ Questions, Help, and Advice url: https://github.com/material-components/material-web/discussions about: For general support, please refer to the Material Web discussion board. - name: 💬 Chat url: https://lit.dev/discord/ about: Alternatively, you can join the Lit Discord and join the `#material` channel to talk to the team. ================================================ FILE: .github/ISSUE_TEMPLATE/documentation-bug.yaml ================================================ name: 🐛 Documentation Bug description: Report a bug that affects Material Web documentation (https://material-web.dev/) body: - type: textarea id: description validations: required: true attributes: label: Description description: | Please describe the documentation issue in as much detail as possible. placeholder: | Add issue description here. - type: textarea id: environment attributes: label: Browser/OS Environment description: | Please list which browser and operating system combination(s) you are using. placeholder: | Browser: Chrome 103.0.5060.53 OS: macOS 12.4 ================================================ FILE: .github/ISSUE_TEMPLATE/feature.yaml ================================================ name: ✨ Feature Request description: Request a feature to be added to Material Web Components. body: - type: textarea id: description validations: required: true attributes: label: Description description: | Please describe the feature request in as much detail as possible. Include why the feature is needed, and example code or screenshots to help describe it. placeholder: | Add support for '...'. This is needed to '...'. Requirements, code examples, and screenshots that help describe the feature. ================================================ FILE: .github/workflows/build-catalog.yml ================================================ name: Build Catalog on: [push] permissions: contents: read jobs: build-catalog: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - run: npm ci - run: npm run build:catalog env: WIREIT_FAILURES: continue ================================================ FILE: .github/workflows/commitlint.yml ================================================ name: commitlint on: [pull_request] permissions: contents: read jobs: commitlint: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 cache: npm - run: npm install -g @commitlint/cli @commitlint/config-conventional - run: 'echo "${PR_TITLE}" | commitlint' env: PR_TITLE: ${{ github.event.pull_request.title }} ================================================ FILE: .github/workflows/firebase-hosting-merge.yml ================================================ name: Deploy to Firebase Hosting on release and manual 'on': release: types: - published workflow_dispatch: # allows triggering from the gihub UI permissions: contents: read jobs: build_and_deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 20 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - run: npm ci - run: 'npm run build:catalog' - uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: '${{ secrets.GITHUB_TOKEN }}' firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MATERIAL_WEB_CATALOG }}' channelId: live projectId: material-web-catalog entryPoint: catalog ================================================ FILE: .github/workflows/firebase-hosting-pull-request.yml ================================================ # This file was auto-generated by the Firebase CLI # https://github.com/firebase/firebase-tools name: Deploy to Firebase Hosting on PR on: pull_request: types: [ labeled ] permissions: contents: read pull-requests: write jobs: build_and_preview: if: github.event.label.name == 'preview-catalog' && github.event.pull_request.head.repo.full_name == github.repository runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 20 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - run: npm ci - run: 'npm run build:catalog' - uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: '${{ secrets.GITHUB_TOKEN }}' firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MATERIAL_WEB_CATALOG }}' projectId: material-web-catalog entryPoint: catalog ================================================ FILE: .github/workflows/nightly.yml ================================================ name: Nightly publish on: schedule: - cron: '21 3 * * *' workflow_dispatch: # allows triggering from the github UI permissions: contents: write jobs: check_for_changes: runs-on: ubuntu-latest outputs: changed: ${{ steps.check.outputs.changed }} steps: - uses: actions/checkout@v3 - name: Check if the current commit is less than 24 hours old id: check continue-on-error: true run: test -n "$(git rev-list --after='24 hours' ${{ github.sha }})" && echo "changed=yes" >> "$GITHUB_OUTPUT" publish: needs: check_for_changes if: needs.check_for_changes.outputs.changed == 'yes' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - run: npm ci - run: npm run build env: WIREIT_FAILURES: continue - name: Create nightly release commit run: | npm version --no-git-tag-version --preid nightly.$(git rev-parse --short HEAD) prepatch git config --local user.email "action@github.com" git config --local user.name "GitHub Action" git commit -am "chore: nightly publish" - uses: actions/setup-node@v3 with: node-version: 18 registry-url: 'https://wombat-dressing-room.appspot.com/' - run: npm publish --tag nightly env: NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }} ================================================ FILE: .github/workflows/publish.yml ================================================ name: Publish on: push: tags: - 'v*' permissions: contents: read jobs: publish: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - run: npm ci - run: npm run build env: WIREIT_FAILURES: continue - uses: actions/setup-node@v3 with: node-version: 18 registry-url: 'https://wombat-dressing-room.appspot.com/' - run: npm publish env: NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }} ================================================ FILE: .github/workflows/release-please.yml ================================================ on: push: branches: - main name: release-please jobs: release-please: runs-on: ubuntu-latest permissions: contents: write pull-requests: write steps: - uses: googleapis/release-please-action@v4 with: token: ${{ secrets.LIT_ROBOT_ACCESS_TOKEN }} ================================================ FILE: .github/workflows/test.yml ================================================ name: Tests on: [push] permissions: contents: read jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - run: npm ci - run: npm run build env: WIREIT_FAILURES: continue test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - run: npm ci - run: npx playwright install --with-deps - run: npm test env: WIREIT_FAILURES: continue ================================================ FILE: .github/workflows/update-docs-on-main.yml ================================================ name: Update API Docs on: push: branches: main workflow_dispatch: # allows triggering from the github UI permissions: contents: write pull-requests: write jobs: check-for-doc-changes: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: node-version: 20 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - name: Install Dependencies run: npm ci - name: Update Docs run: npm run update-docs - name: Check if update-docs produces git diff id: ifChange run: git diff --exit-code || echo "::set-output name=changed::yes" - name: Create PR if: steps.ifChange.outputs.changed == 'yes' uses: peter-evans/create-pull-request@v7 with: token: ${{ secrets.LIT_ROBOT_ACCESS_TOKEN }} commit-message: 'docs: update API docs' author: lit-robot committer: lit-robot title: 'docs: update API docs' body: This PR was auto generated by the update-docs-on-main GitHub action. reviewers: asyncliz branch: auto-update-docs labels: | Ready for Google preview-catalog ================================================ FILE: .github/workflows/update-size-on-main.yml ================================================ name: Update size on: push: branches: main workflow_dispatch: # allows triggering from the github UI permissions: contents: write pull-requests: write jobs: check-for-doc-changes: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: node-version: 20 cache: npm - uses: google/wireit@setup-github-actions-caching/v2 - name: Install Dependencies run: npm ci - name: Update Size run: npm run update-size - name: Check if update-size produces git diff id: ifChange run: git diff --exit-code || echo "::set-output name=changed::yes" - name: Create or update PR if: steps.ifChange.outputs.changed == 'yes' uses: peter-evans/create-pull-request@v7 with: token: ${{ secrets.LIT_ROBOT_ACCESS_TOKEN }} commit-message: 'chore: update sizes' author: lit-robot committer: lit-robot title: 'chore: update sizes' body: This PR was auto generated by the update-size-on-main GitHub action. branch: auto-update-sizes # Don't automatically add reviewers or Ready for Google label until we're ready # since this will be noisy. ================================================ FILE: .gitignore ================================================ node_modules *.js !web-test-runner.config.js !commitlint.config.js *.css *-styles.ts *.map *.d.ts !types/*.d.ts .wireit/ *.tsbuildinfo !catalog/**/*.css catalog/_dev catalog/_prod catalog/node_modules catalog/.wireit catalog/lib/ catalog/build/ catalog/site/components/*.md catalog/site/components/images catalog/site/theming/*.md catalog/site/theming/images catalog/site/about/*.md catalog/site/about/images catalog/stories/*/ !catalog/stories/components/ !catalog/src/types/**/*.d.ts ================================================ FILE: .release-please-manifest.json ================================================ { ".": "2.4.1" } ================================================ FILE: CHANGELOG.md ================================================ # Changelog ## [2.4.1](https://github.com/material-components/material-web/compare/v2.4.0...v2.4.1) (2025-10-27) ### Bug Fixes * **radio:** also move sibling uncheck logic after root assignment ([6010e52](https://github.com/material-components/material-web/commit/6010e52c8fcd53577a8cf2cee53095033f329d2a)) * **radio:** move root assignment to mirror hostDisconnected ([adb8d10](https://github.com/material-components/material-web/commit/adb8d104f2ebc29890b8c578e34a412e8c5c3fc2)) * **tokens:** `@material/web/tokens/v*` moved to `@material/web/tokens/versions/v*` ([60c0cfa](https://github.com/material-components/material-web/commit/60c0cfa58ad135c189cb0fa95c5f2744499f0327)) ## [2.4.0](https://github.com/material-components/material-web/compare/v2.3.0...v2.4.0) (2025-08-21) ### Features * **button:** add disabled link support ([c3c4848](https://github.com/material-components/material-web/commit/c3c48485b152595c0e892383dc5ab38fdb1ac442)) * **button:** add gradient support to container colors ([5bc1506](https://github.com/material-components/material-web/commit/5bc15069d136c51e912137dcba1b212a106bb1dd)) * **catalog:** hide body if dsd-pending ([bf89645](https://github.com/material-components/material-web/commit/bf896458b0a656a40187d3fdddbc573407a4e55b)) * **select:** add showPicker() functionality ([8808a25](https://github.com/material-components/material-web/commit/8808a25da8cb879d120c11b6961e10ef75ca5add)) ### Bug Fixes * **catalog:** hydrate CSR component pages ([0037c14](https://github.com/material-components/material-web/commit/0037c14f6ba17ae224f8377e4afcba35862c4bf4)) * **menu:** output menu item theme values ([ca5f750](https://github.com/material-components/material-web/commit/ca5f75094b3ac2d314ccb31ec06ec653501cf801)) * **radio:** stack overflow error when rendering many radios ([688ab3c](https://github.com/material-components/material-web/commit/688ab3cf5f12ddbff07407910b8e8e158b3282d7)) * **ripple:** misaligned when using CSS zoom ([3072a9b](https://github.com/material-components/material-web/commit/3072a9bc286876be157e15d65b0d4877245e1acc)) * **ripple:** remove pointerdown contextmenu bounds check for Chrome ([cd7512f](https://github.com/material-components/material-web/commit/cd7512ff90cf25ad98c6caa9842bf86d284146c7)) ## [2.3.0](https://github.com/material-components/material-web/compare/v2.2.0...v2.3.0) (2025-03-26) ### Features * **button:** add download filename support for link buttons ([4098832](https://github.com/material-components/material-web/commit/4098832b8b6fe9def9c08d551014f113e39b2546)) * **button:** rename attribute downloadFilename to download ([8aefe19](https://github.com/material-components/material-web/commit/8aefe1983d28abcc3bc9c659ff0b328454e0547e)) * **chip:** add download attribute to assist chip ([902a84f](https://github.com/material-components/material-web/commit/902a84fe0cc389c1d691e42ce1c95d9156a4781b)) * **icon-button:** add download attribute ([9e84130](https://github.com/material-components/material-web/commit/9e8413080d911108fd1fb97fe8909b96926e1a24)) * **menu:** add menu padding tokens ([767d1f1](https://github.com/material-components/material-web/commit/767d1f159e9ebcd001968bb7e8bcdf6c4ef1e537)) * **text-field:** add showPicker method ([bad490c](https://github.com/material-components/material-web/commit/bad490c7cb05be4898d8528569776d4e75bbb8fd)) ### Bug Fixes * **catalog:** add hyphen to md-evelated-button attribute ([ac9b14a](https://github.com/material-components/material-web/commit/ac9b14a65c384d9389022f11555fb063b932ec96)) * **iconbutton:** href will respond to touch target ([ea1134a](https://github.com/material-components/material-web/commit/ea1134a1a77c032f8b8c6c749e670fca90d8cd89)) * **labs:** add mixinCustomStateSet() for :state() compatibility ([045fe94](https://github.com/material-components/material-web/commit/045fe94872607f67da6c18d3689bff6a541102d2)) * **listitem:** click() from listItemRoot ([1c60e56](https://github.com/material-components/material-web/commit/1c60e56c6c1210fd5a116290271b9bc7e612fdf7)) * **menu:** export CloseReason ([29d6763](https://github.com/material-components/material-web/commit/29d6763dc3abe4e80a6fb3ad0eaca5bb24b2d29a)) * **select:** missing accessible label ([1bdcbd3](https://github.com/material-components/material-web/commit/1bdcbd38ab96f6a7537c36cb7d61d9e8db2144e7)) ## [2.2.0](https://github.com/material-components/material-web/compare/v2.1.0...v2.2.0) (2024-09-17) ### Features * **field,textfield:** add `container` slot for custom background content ([44c13cd](https://github.com/material-components/material-web/commit/44c13cdd753108137e9765bf14a6ea3ed46be18e)) ### Bug Fixes * **checkbox:** add override to symbol properties ([a9ee4f5](https://github.com/material-components/material-web/commit/a9ee4f5bc1d6702e5dc352eefed13a1d849577e3)) * remove the input entirely and replace it with a touch target ([cf84a27](https://github.com/material-components/material-web/commit/cf84a271e75b806075427f4d176b38f8884fdd7e)) * remove unnecessary css variable prefixes ([5044e6e](https://github.com/material-components/material-web/commit/5044e6eb2fe6c6bd3e53b19bef04ba6b6c0b2a2b)) * Replace aria-hidden attribute with inert attribute in <md-radio> component ([192f17e](https://github.com/material-components/material-web/commit/192f17e8c1ce4a38cf76b5a81cb6c2b1ddcfbe46)) * Set touch target to `display: none` ([a696121](https://github.com/material-components/material-web/commit/a69612162d79b63f0b82da0468201942dc82ed9e)) ## [2.1.0](https://github.com/material-components/material-web/compare/v2.0.0...v2.1.0) (2024-08-20) ### Features * **switch:** add touch target token ([b8f362a](https://github.com/material-components/material-web/commit/b8f362a97d8369e0f6bab834794f99bd50b5ab78)) * **textfield,field:** add leading/trailing icon spacing tokens ([c1991c4](https://github.com/material-components/material-web/commit/c1991c4c894c48fe77abe09a2791f97dc77d438f)) ### Bug Fixes * changed checkmark to check in md-icon selected slot ([2e2817b](https://github.com/material-components/material-web/commit/2e2817bab5fc51bb32363b36471cb01d1f029a46)) ## [2.0.0](https://github.com/material-components/material-web/compare/v1.5.1...v2.0.0) (2024-07-23) ### ⚠ BREAKING CHANGES * **tokens:** Sass component tokens, such as `tokens.md-comp-checkbox-values()`, return `var(--md-, )` instead of just the CSS value. Use `$exclude-custom-properties: true` to remove them. * `querySelector` for `[role]` and `[aria-*]` attributes may no longer work. See `@material/web/migrations/v2/README.md` and `@material/web/migrations/v2/query-selector-aria.ts`. ### Features * **button:** add `soft-disabled` attribute for focusable disabled buttons ([48124ba](https://github.com/material-components/material-web/commit/48124ba09f538c6264407a49e6bc0ba097991a9d)) * check for server before creating treewalker from document ([0d50ed9](https://github.com/material-components/material-web/commit/0d50ed91f0c542b4d5b5e2c913930a52a46136e5)) * **chips:** add label slot ([7ec70c4](https://github.com/material-components/material-web/commit/7ec70c4c2d8863fa1e1d38724d77a9b6d4e6a20c)) * **chips:** add new `soft-disabled` attribute for focusable disabled chips ([750b886](https://github.com/material-components/material-web/commit/750b886acfa15960d66f83a08599d2a2155ae659)) * **iconbutton:** add `soft-disabled` attribute for focusable disabled icon buttons ([281c092](https://github.com/material-components/material-web/commit/281c092d061f77b812e57f473e77cfd123016471)) ### Bug Fixes * add typecast ([1482bff](https://github.com/material-components/material-web/commit/1482bfff0de55e136513861c1976776c5a4b4b93)) * aria-labels announcing twice with "group" on components ([5df9410](https://github.com/material-components/material-web/commit/5df9410e604cf446c83bb5ada3454596c34b2c50)) * **chips:** add truncation support ([713f0a8](https://github.com/material-components/material-web/commit/713f0a80fcfc9ef730e1c1f88e15098b9d10735b)) * **tokens:** `tokens.md-comp-*-values()` include custom properties by default ([55b4650](https://github.com/material-components/material-web/commit/55b46500634c022c335d9c4818121a1b5d95e111)) ## [1.5.1](https://github.com/material-components/material-web/compare/v1.5.0...v1.5.1) (2024-06-25) ### Bug Fixes * **checkbox:** sass theme mixin not working ([46d66ed](https://github.com/material-components/material-web/commit/46d66ed9d188243e313e6833f244a5b750aa9fdb)), closes [#5651](https://github.com/material-components/material-web/issues/5651) * **dialog:** have content expand to fill height ([17aa21a](https://github.com/material-components/material-web/commit/17aa21a53ecc949b3326ed0d2c2bf461a20617c6)) * **menu:** resolve aborted animations as false rather than reject ([4f7ff4f](https://github.com/material-components/material-web/commit/4f7ff4f63adaec11cfc7e2772990a757139be01b)), closes [#5638](https://github.com/material-components/material-web/issues/5638) * **switch:** pressing enter toggles the switch ([99ec9e2](https://github.com/material-components/material-web/commit/99ec9e25eb0d64887a3530e494ba8683909c0e62)) ## [1.5.0](https://github.com/material-components/material-web/compare/v1.4.1...v1.5.0) (2024-05-23) ### Features * **menu:** allow customizing `scrollbar-width` ([1bf8b5f](https://github.com/material-components/material-web/commit/1bf8b5fbf9ff8f7c0084acee77988b1af9ad7e19)) * **select:** make required asterisk optional ([8f194a5](https://github.com/material-components/material-web/commit/8f194a51dbc85ead2d9d8c10e0be69f183788a31)) * **textfield:** make required asterisk optional ([be5bb43](https://github.com/material-components/material-web/commit/be5bb43100fbf0df3a7cfec4c4d4399559a23114)) ### Bug Fixes * **button:** add part attribute to button ([a2b5c91](https://github.com/material-components/material-web/commit/a2b5c91a549e206603f23d84233de83a8c165d77)) * **dialog:** focus is trapped for a11y, use `no-focus-trap` to disable ([0aea436](https://github.com/material-components/material-web/commit/0aea4364a142f3db84b77ae99eea1df6a3cd8456)) * **docs:** progress.webp not playing ([2f0c99a](https://github.com/material-components/material-web/commit/2f0c99ad3d3320341a4ae61db5abe64c37649ddb)), closes [#5569](https://github.com/material-components/material-web/issues/5569) * **menu:** `getBoundingClientRect()` and `getClientRects()` not working ([e1f9cbc](https://github.com/material-components/material-web/commit/e1f9cbc59e4cbb50921304158edbb8e68706c405)) ## [1.4.1](https://github.com/material-components/material-web/compare/v1.4.0...v1.4.1) (2024-04-15) ### Bug Fixes * **dialog:** update info comment with autocomplete -> autofocus ([fc4c999](https://github.com/material-components/material-web/commit/fc4c9992f8827e2a07e5c0b32cc48a065356cf29)) * **select:** select.click() opens the menu ([7a6cf16](https://github.com/material-components/material-web/commit/7a6cf16a4e37889d0497af4f1c4df8be78aefa54)) ## [1.4.0](https://github.com/material-components/material-web/compare/v1.3.0...v1.4.0) (2024-03-21) ### Features * **menu:** add `no-navigation-wrap` to fix select accessibility ([c6ffd70](https://github.com/material-components/material-web/commit/c6ffd70fc82060d894e4f4ef7fc43a1fb15e2a65)) * **typography:** add `@material/web/typography/md-typescale` classes ([36dd77e](https://github.com/material-components/material-web/commit/36dd77ef97bfa9fbbd9f3a8885f010cb0741e797)) ### Bug Fixes * **button,fab,chips,labs:** text-transform inherits through shadow root ([758e615](https://github.com/material-components/material-web/commit/758e61581ef30481e5dd8c1bd7707db2a2988ab8)) * **elevation:** expose md-elevation `::part` in all components ([b74e3dd](https://github.com/material-components/material-web/commit/b74e3dd2e3f11fa20dd5a39148a6b491bacded16)) * **elevation:** limit elevation transition to box-shadow and opacity ([34c0a67](https://github.com/material-components/material-web/commit/34c0a6779e8a722ec6dfbf6ad5c0d1bb607289e6)) * publish `.css` files for `[@import](https://github.com/import)`-ing ([cde649c](https://github.com/material-components/material-web/commit/cde649c83b5236bc441607cda797bdd8caf7e6ad)) * rename internal `<styles>.css.js` to `.css` ([c35bad0](https://github.com/material-components/material-web/commit/c35bad0c643a7c3ee982739868ee3676372e23ad)) * **switch:** reflect `selected` state in input event ([8d201e0](https://github.com/material-components/material-web/commit/8d201e0d5dfb5c26aa6b4e58e526db1b1ef6c404)) * **tabs:** default `scroll-behavior: smooth` not working ([274ce3e](https://github.com/material-components/material-web/commit/274ce3e4e06867acfab642123192e0a7aa9b45d4)), closes [#5497](https://github.com/material-components/material-web/issues/5497) * **textfield:** no longer inherits `text-align` from parents ([668f0ee](https://github.com/material-components/material-web/commit/668f0ee5e96ed0b697596d7fa7d0b4748924162b)), closes [#5509](https://github.com/material-components/material-web/issues/5509) * **typography:** rename md-typescale.js to md-typescale-styles.js ([1e47fd7](https://github.com/material-components/material-web/commit/1e47fd7383ea2818beab64e7f9f4339cc790a5ee)) * use explicit `CSSResult[]` types for static styles ([ce41b7b](https://github.com/material-components/material-web/commit/ce41b7bfb3fc04f8e93a781eb6d92fe15b1d7fac)) ## [1.3.0](https://github.com/material-components/material-web/compare/v1.2.0...v1.3.0) (2024-02-22) ### Features * add `--md-sys-shape-*` tokens for all components ([41bac9e](https://github.com/material-components/material-web/commit/41bac9e44d0afef2a9cba08cb855572556e61342)) * **tabs:** expose activeTabIndex ([4bce86d](https://github.com/material-components/material-web/commit/4bce86d18b8d553607b8d2ee909faff0c095096b)), closes [#5297](https://github.com/material-components/material-web/issues/5297) * **tokens:** add component custom properties to Sass values ([feff721](https://github.com/material-components/material-web/commit/feff7214a753559bc5ed5da5ed50ad508b4417e7)) ### Bug Fixes * **icon:** fix uncentered icons when using WCAG text spacing overrides ([b23e321](https://github.com/material-components/material-web/commit/b23e3218eebc293dc99a7343a6ecddebe585e89e)) * **labs:** hasConstructed and constructor deprecated, changing tabIndex update in connectedCallback ([fb086bb](https://github.com/material-components/material-web/commit/fb086bbd355d69a99dc9e6c38c2b8ebb7d7ce9ad)) * **labs:** removing hasConstructed and setting privateIsConstructed to handle setting tabIndex ([ea518d0](https://github.com/material-components/material-web/commit/ea518d0353facd94037843aca7e623b91a16363c)) * **labs:** update tabIndex once the element is connected to the DOM ([a6b8c09](https://github.com/material-components/material-web/commit/a6b8c090262ef173eb9d88161ba5051c31e2f930)) * **menu:** left arrow in submenu closes submenu in closure ([2049323](https://github.com/material-components/material-web/commit/2049323dde3eec643f14a03f12f0b449e4432aeb)) * remove `:host-context` rtl selectors ([f2ff867](https://github.com/material-components/material-web/commit/f2ff86725ccb96347af1881657428e4de1fe0bae)) ## [1.2.0](https://github.com/material-components/material-web/compare/v1.1.1...v1.2.0) (2024-01-24) ### Features * **select:** add keyboard support for arrow end and home ([8912019](https://github.com/material-components/material-web/commit/8912019b902803a018a1d92fb7caaa39369f6cf6)) * **select:** add menuAlign to allow end-aligning the select menu ([50a9ffa](https://github.com/material-components/material-web/commit/50a9ffae46499ec575a38887b5dcce8f5506e576)) * **select:** support width fit-content ([4bb9418](https://github.com/material-components/material-web/commit/4bb9418a52564984e32666c9383d8eb262e876cf)) * **textfield:** add `no-spinner` to remove number spin buttons ([3c6e550](https://github.com/material-components/material-web/commit/3c6e55006b3a7bad0d7fa782fab3141e1961e686)) ### Bug Fixes * **button:** add missing sass imports ([37fad06](https://github.com/material-components/material-web/commit/37fad0660dd96cf565062075e056a6288fea5290)) * **chips:** filter's `click.preventDefault()` not working when also updating `selected` ([5dc870b](https://github.com/material-components/material-web/commit/5dc870bfe1609a50702ef078a3da1b01620f7ef8)) * **dialog:** buttons not reflecting value attribute when setting property ([35913a6](https://github.com/material-components/material-web/commit/35913a6ea42776f2c402d879067ae772833e52b5)), closes [#5409](https://github.com/material-components/material-web/issues/5409) * **dialog:** immediate escape key not firing cancel event in Chrome 120 ([be3dc6f](https://github.com/material-components/material-web/commit/be3dc6f6776f86a95619de0d708e2815e744ac6d)), closes [#5313](https://github.com/material-components/material-web/issues/5313) * **dialog:** text is now selectable ([4ae9db6](https://github.com/material-components/material-web/commit/4ae9db6c67e3704a7be8bd83dfa18dbd50b7fc94)) * forms correctly focus the first invalid control instead of last ([7dd7a68](https://github.com/material-components/material-web/commit/7dd7a68ae9229d5685fe4ab85a6d8514624245d8)) * **labs:** add card support for high contrast mode ([53ec44b](https://github.com/material-components/material-web/commit/53ec44b4b81cbf691a0455efb6d9907957ef1205)) * **labs:** card content not clickable with outline fix ([9c5cff8](https://github.com/material-components/material-web/commit/9c5cff8f90198860149e6237798e73f2c846a36b)), closes [#5312](https://github.com/material-components/material-web/issues/5312) * **menu:** `--md-menu-item-container-color` not working ([86bd6f8](https://github.com/material-components/material-web/commit/86bd6f830913330e41033c5eceab938fa4f42bc2)) * **progress:** prevent unnecessary animation to run when not visible ([4de5e74](https://github.com/material-components/material-web/commit/4de5e74b5caec5cff0fdb4696cb64790d471170c)) * rename and move `internal/controller/events` ([eca1357](https://github.com/material-components/material-web/commit/eca1357f1a7d185d4ec8a368f6467f481f9b2798)) * **ripple:** multiple touches causing ripples to start from center ([cef1b74](https://github.com/material-components/material-web/commit/cef1b740ee0a72488a9a9c4f197e2398d4027f1e)), closes [#5349](https://github.com/material-components/material-web/issues/5349) * **select:** allow aria-expanded to be set to false ([73725be](https://github.com/material-components/material-web/commit/73725be67053f3a5ba4aa25f8b12a82afc4cad71)), closes [#5360](https://github.com/material-components/material-web/issues/5360) * **select:** clicking select toggles the menu rather than just open ([043bbad](https://github.com/material-components/material-web/commit/043bbad6f30293c053c1fc1689cbf0d1e90c0d75)) * **select:** ensure md-select selection logic uses fresh DOM references ([8942715](https://github.com/material-components/material-web/commit/89427158b7a15265556db2f86423a9905760c696)) * **select:** expose SelectOption interface ([edb3559](https://github.com/material-components/material-web/commit/edb3559a1ce12d13921d93761bedbfde4c1c7898)) * **slider:** move ripple and focus ring beneath handle ([68b078b](https://github.com/material-components/material-web/commit/68b078b4e1f7357a15098bb59ae22ae8a4d02cbf)) * **slider:** nested dir attributes do not break on chrome 120+ ([57168f6](https://github.com/material-components/material-web/commit/57168f6a95403cd5a29e2774e42525efeb1e3eae)) * **tabs:** `--md-elevation-level` no longer leaks into tabs ([ddf1fb0](https://github.com/material-components/material-web/commit/ddf1fb0c613e43d26735832b9fdb1efcf2969949)), closes [#5137](https://github.com/material-components/material-web/issues/5137) * **tabs:** `tabs.scrollToTab()` not working ([eb7c17e](https://github.com/material-components/material-web/commit/eb7c17e3dc6b14d900f4ce9d13d93ce0c09b9806)) * **textfield:** counter showing when max length is 0 or removed ([9973b90](https://github.com/material-components/material-web/commit/9973b90981b2414cc18dfb91279f204b7f50c080)) * **textfield:** error styles not removing when an unrelated control is invalid ([3151fd8](https://github.com/material-components/material-web/commit/3151fd8d904f0ac529f3a4f872a9dac537a65dc0)) * **textfield:** focus style lost after `reportValidity()` during change ([6efc904](https://github.com/material-components/material-web/commit/6efc90403b17684f77d1da577453fa66cfcb1c30)) * **textfield:** remove Firefox high contrast mode background on linux ([926edfb](https://github.com/material-components/material-web/commit/926edfb367de71eed77deaba45a4a7eaa79342fc)) * **tokens:** moved '_values.scss' to 'internal/_values.scss' ([b986b1e](https://github.com/material-components/material-web/commit/b986b1eb7cac5a5feef90478406247cebe7e690e)) ### Performance Improvements * **ripple:** don't process events in high contrast mode ([839667d](https://github.com/material-components/material-web/commit/839667dcf6becda087015edcb5468b8b2107d8c7)) ## [1.1.1](https://github.com/material-components/material-web/compare/v1.1.0...v1.1.1) (2023-12-13) ### Bug Fixes * formAssociated disabled attribute not working ([ab04299](https://github.com/material-components/material-web/commit/ab042992acd6702f11fd8f1d64bb1597cb701815)) ## [1.1.0](https://github.com/material-components/material-web/compare/v1.0.1...v1.1.0) (2023-12-12) ### Features * **chips:** add filter chip `selected-icon` slot to customize checkmark ([89b4c2e](https://github.com/material-components/material-web/commit/89b4c2e752fd7055f35f8b743cad6861376f3d95)) * **chips:** add tokens to customize padding ([c9e8de0](https://github.com/material-components/material-web/commit/c9e8de0207f158791d79629599682edf21d26498)) * **chip:** trailing remove icon can now be customized ([b44b90c](https://github.com/material-components/material-web/commit/b44b90c82643be1d0ae9c24d2450081db13dc04d)) * **chip:** trailing remove icon can now be customized ([49a6be1](https://github.com/material-components/material-web/commit/49a6be141b1f4a28c27b0982e0123ede7825a19d)) * **chip:** trailing remove icon can now be customized ([76883cd](https://github.com/material-components/material-web/commit/76883cd420a058dfa9c71c887605e890233ff53b)) * **menu,select:** allow menu and select typeahead to read default slot text content ([af49b64](https://github.com/material-components/material-web/commit/af49b64ab4e66872ff25d6ad767f9d37fce231b6)) * **menu:** add document-level positioning ([2b591ca](https://github.com/material-components/material-web/commit/2b591ca759ec8180659476a072db1a8b83c1ae20)), closes [#5120](https://github.com/material-components/material-web/issues/5120) * **menu:** add popover functionality ([7859b39](https://github.com/material-components/material-web/commit/7859b39afef3de779225dfdb87470daf1f91fc27)), closes [#2023](https://github.com/material-components/material-web/issues/2023) [#5120](https://github.com/material-components/material-web/issues/5120) * **radio:** add required constraint validation ([b5686ea](https://github.com/material-components/material-web/commit/b5686ea4e0ad17717ef086bcdf7dfdeb565acc9b)), closes [#4316](https://github.com/material-components/material-web/issues/4316) * **select:** match menu width to select and introduce clamp-menu-width ([a5a40b6](https://github.com/material-components/material-web/commit/a5a40b6dd35a36e1d3f9a512d68369f3d639922d)) * **switch:** add slot icons ([9255be1](https://github.com/material-components/material-web/commit/9255be1be587cdbb29d6cd99efefc512de4882db)) ### Bug Fixes * 5182: dialog icon padding error ([257e9c6](https://github.com/material-components/material-web/commit/257e9c6f6f47bb61155fd21729bbd8326a7156e2)) * add `@material/web@nightly` publishes ([91c1221](https://github.com/material-components/material-web/commit/91c1221cef63b82e134949c7ff14b99653897602)) * **behaviors:** add focusable behavior to labs ([d1ef1fe](https://github.com/material-components/material-web/commit/d1ef1febb648b7afd521e05123024f9e4c71bca0)) * **behaviors:** validation not reporting when form tries to submit ([c53a419](https://github.com/material-components/material-web/commit/c53a4194e9796b5bd862ac166e66f0c16d4d8bcd)) * **button:** allow overriding `cursor` using CSS ([798f5ae](https://github.com/material-components/material-web/commit/798f5ae179c63d22a83ad4a7bcf8bb085541f6a1)) * **button:** allow overriding `min-width` and `user-select` ([1852238](https://github.com/material-components/material-web/commit/18522381d8038beeb28948bf993a679cc8feb02a)) * **button:** allow overriding `padding` and `gap` ([5bb4a42](https://github.com/material-components/material-web/commit/5bb4a422de35e953a35c032a66949cacea1e0496)) * **button:** don't show overflowing labels ([8dcb3f6](https://github.com/material-components/material-web/commit/8dcb3f62c7ccce09290211350e418c0089265305)) * **button:** height increases when label wraps ([7cd657b](https://github.com/material-components/material-web/commit/7cd657b83dcb80107d8d4e3601491b259476742b)) * **button:** labels not truncating, add support for multiline with `text-wrap: wrap` ([5d964ad](https://github.com/material-components/material-web/commit/5d964adcf9df7cfc4cc0b6108e378e6bc6b330fd)) * **button:** sometimes submits form even when click listener prevents default ([9e3f080](https://github.com/material-components/material-web/commit/9e3f0801aab349504f88e9aa221d0fcb5baa248b)), closes [#5032](https://github.com/material-components/material-web/issues/5032) * **checkbox:** `checked` and `indeterminate` not updated during input event ([e78a52f](https://github.com/material-components/material-web/commit/e78a52f1e4f427cf328ab1e2373a7ba9ed1d4d8f)) * **chip:** disabled attribute prevents click event. ([2dba006](https://github.com/material-components/material-web/commit/2dba006ddd49f71f362bfb7b3c1547a4f9ced8c2)) * **chip:** disabled attribute prevents click event. ([d501ddd](https://github.com/material-components/material-web/commit/d501dddfd541a72ef50aff667cd06644801b1e90)) * **chip:** make tap highlight transparent ([c3bfbaa](https://github.com/material-components/material-web/commit/c3bfbaaf4c055fc3bc68f6f28b229ac2aa8fe5bc)) * Circular progress isn't circular in flex column display ([075119c](https://github.com/material-components/material-web/commit/075119c98fd71d3f4ec1b8c3e513e2c750e4550f)) * **docs:** prepare docs generator for mixin version of lit analyzer ([5e0000a](https://github.com/material-components/material-web/commit/5e0000a495ae6dc836a2e7cedf9778830e326ad0)) * **fab:** make tap highlight transparent ([4e8053d](https://github.com/material-components/material-web/commit/4e8053d15d8d06ed152844a1517a3f2313e37651)) * **filter-chip:** reflect correct value on click event ([0b4d4c2](https://github.com/material-components/material-web/commit/0b4d4c2e07b4f6be2289733500fbba36de29a2d3)) * **list-item:** hide headline overflow and fix width. ([4697407](https://github.com/material-components/material-web/commit/4697407cff0c8032c3a292aad24338df0927f865)) * **list-item:** make tap highlight transparent ([cca0789](https://github.com/material-components/material-web/commit/cca0789826af0dae789f143d243c359aa23dd1ad)) * **menu:** declare popover API types ([bf8d3f6](https://github.com/material-components/material-web/commit/bf8d3f6289c76bc708e5b487231939d02bfab3c4)) * **menu:** declare popover property type on HTMLElement ([3d8c7ac](https://github.com/material-components/material-web/commit/3d8c7ac7f3780158f885f7ca647b658071c81556)) * **menu:** escape not closing menus with submenus ([bd88880](https://github.com/material-components/material-web/commit/bd88880f78e54e88cb5083a74134ac4e130f3228)) * **menu:** shift tab into anchor closes menu ([c4cbd36](https://github.com/material-components/material-web/commit/c4cbd3612c08a6143eb104db07eb90a1171fb23c)) * **progress:** allow linear progress to fill flex containers ([a450e42](https://github.com/material-components/material-web/commit/a450e4288cdac6f61a13790f8820d57a7fb141a7)), closes [#5042](https://github.com/material-components/material-web/issues/5042) * **segmented-button:** make tap highlight transparent ([e4728bd](https://github.com/material-components/material-web/commit/e4728bd018e5640fb03fc49169805a51aabf0a5c)) * **select,textfield:** native form validation shows error state ([6b5ab21](https://github.com/material-components/material-web/commit/6b5ab21332438dc971eb94b7da2271511bb99719)) * **select:** focus() delegates properly, focus on reporting validity ([897d977](https://github.com/material-components/material-web/commit/897d9775c2143dd3b8d07deab35dfe90decd1336)) * **select:** form failure no longer throws non-focusable error ([a5a6974](https://github.com/material-components/material-web/commit/a5a6974decb19b5ce42020c3c7c5386a8b203d76)), closes [#5078](https://github.com/material-components/material-web/issues/5078) * **select:** select menu render is over most stacking contexts with popover ([a2b3204](https://github.com/material-components/material-web/commit/a2b32042bd51c34853a9ca7b1c7901fb69270a44)) * **tabs:** allow changing tab padding ([dd005df](https://github.com/material-components/material-web/commit/dd005df7806002a60fe9af136387ad4623b4ae8e)) * **tabs:** fields intended to be accessed from templates must be exported ([b7be1cb](https://github.com/material-components/material-web/commit/b7be1cbbb4e7b08421d293ba89f364632822d113)) * **text-field:** wrap text in textarea ([4fce487](https://github.com/material-components/material-web/commit/4fce487c812954da816c0bdb4ba5165902c2f3e9)) ## [1.0.1](https://github.com/material-components/material-web/compare/v1.0.0...v1.0.1) (2023-10-18) ### Bug Fixes * **catalog:** align one liners to center ([fbc1fa6](https://github.com/material-components/material-web/commit/fbc1fa626a92299c627004efa9d41151b44febb0)) * **catalog:** center items in blockquotes ([5235b3e](https://github.com/material-components/material-web/commit/5235b3ea52b7aa5a27c2b00a49712a3ce0e22378)) * **checkbox:** cursor should be pointer when not disabled ([18fe451](https://github.com/material-components/material-web/commit/18fe45170a66588e84ecaac9ef2be0f96bec5d8d)), closes [#5079](https://github.com/material-components/material-web/issues/5079) * **fab:** cursor should be pointer ([5280c6e](https://github.com/material-components/material-web/commit/5280c6ec27ee54f82df4f4a25f0a1343961c168b)), closes [#5017](https://github.com/material-components/material-web/issues/5017) * **list:** list items will not escape their parent when parent width is restricted ([4b00a95](https://github.com/material-components/material-web/commit/4b00a9561c39b8f87299daed36e4aff0679e1263)) * **list:** show pointer cursor for button list items ([16480d0](https://github.com/material-components/material-web/commit/16480d0e5d1c24f24ef143f8401192e6fa7e2c52)), closes [#5045](https://github.com/material-components/material-web/issues/5045) * **md-item:** exclude start slot from hidden overflow ([5607059](https://github.com/material-components/material-web/commit/56070593cebeb1b25b87fbe7e4767f6291548004)) * **md-item:** exclude start slot from hidden overflow ([e087141](https://github.com/material-components/material-web/commit/e0871411dd70554dd47bd256da9c2c50b44404c2)) * **menu,select:** enter clicks href items ([8ae8c02](https://github.com/material-components/material-web/commit/8ae8c02866d9284ee2e3a4e95b7cf573fdebf984)) * **menu:** fix menu item fade in order animation ([73eb15e](https://github.com/material-components/material-web/commit/73eb15ebee06d1ac12e94a43d7b59234b8bd48ee)), closes [#5014](https://github.com/material-components/material-web/issues/5014) * **menu:** fix menu OOB from resizing window ([863109e](https://github.com/material-components/material-web/commit/863109e2043d82af2acf28c90a9393509b6ef5ee)), closes [#5063](https://github.com/material-components/material-web/issues/5063) * **menu:** fix menu tapping behaviors on iOS and do not close on anchor click ([8bbb4b4](https://github.com/material-components/material-web/commit/8bbb4b4ffffa45373bc539da95152af5724713a8)) * **menu:** fix submenu SSR left keyboard close navigation ([d6f7220](https://github.com/material-components/material-web/commit/d6f7220f0b0d394ae265ca1546eb0af4f63c07d9)) * **radio:** cursor should be pointer except when disabled ([7779987](https://github.com/material-components/material-web/commit/7779987118a6c88091ad378eeee24b96f0c2c037)) * **select:** cursor on select options should be pointer ([ff250dc](https://github.com/material-components/material-web/commit/ff250dc983794e356c329a9bef8f391583948d71)), closes [#5066](https://github.com/material-components/material-web/issues/5066) * **slider:** slider knob has size to drag on ios safari ([6298cd2](https://github.com/material-components/material-web/commit/6298cd2cf04cc4c62e940972068d7469a9f1a1cc)), closes [#5016](https://github.com/material-components/material-web/issues/5016) * **switch:** cursor should be pointer except when disabled ([9a3ff28](https://github.com/material-components/material-web/commit/9a3ff289f5343e4350afa5951cf09527f270c2c6)), closes [#5075](https://github.com/material-components/material-web/issues/5075) * **tabs:** revert `isTab` check so it is possible to create your own tab ([db3c865](https://github.com/material-components/material-web/commit/db3c8651c2407e777042cace9ba7aac4eb75f988)) * **tabs:** revert `isTab` check so it is possible to create your own tab ([e10186e](https://github.com/material-components/material-web/commit/e10186e91b35e4844e437914394e5581ff63fbc1)) * **tabs:** use `md-tab` attribute to brand individual tab children ([8ec0813](https://github.com/material-components/material-web/commit/8ec08133af05c0755fbac764b3275af0f8ae0c1c)) * **textfield:** calling focus on textfield with a leading icon focuses the input ([8f999d4](https://github.com/material-components/material-web/commit/8f999d4a0db80658664437e38bb51f2eaee6fe2d)) * **textfield:** forward the `multiple` field to the native input ([03e5a7e](https://github.com/material-components/material-web/commit/03e5a7ec8be9690368677693f95e3ba1c640852f)), closes [#5064](https://github.com/material-components/material-web/issues/5064) * **textfield:** missing focused left border for textarea in HCM ([9194cc9](https://github.com/material-components/material-web/commit/9194cc94db76c5395cfff3e2bd2bb205c702d1a4)) * **tabs:** use `md-tab` attribute to brand individual tab children ### Reverts * fix(tabs)!: use md-tab attribute to brand individual tab children ([d1f3887](https://github.com/material-components/material-web/commit/d1f3887613bf9eda7a148b8c3cebd1f370b4cc26)) * pardon the mess, "use `md-tab` attribute to brand individual tab children" is not a breaking change ([43af3ba](https://github.com/material-components/material-web/commit/43af3baa7f599c0d9cf3f5562e2a772e229d95c2)) ## [1.0.0](https://github.com/material-components/material-web/compare/v1.0.0-pre.17...v1.0.0) (2023-09-26) ### ⚠ BREAKING CHANGES * **list:** the new ListController behavior no longer waits for event.preventDefault asynchronously because it was causing keyboard navigations to scroll the page. * **list:** `` now uses slots instead of properties and has removed many prescriptive items (such as avatar, image, and video items). The default slot can be used for any custom content. ```html
OVERLINE
First line
Second+ lines
Trailing
star star ``` Add `type="button"` or `type="link"` for interactive list items. * **menu:** Several enums in menu had their values changed from SCREAM_CASE to kebab-case to follow style guide. They are NAVIGABLE_KEYS -> NavigableKey, SELECTION_KEY -> SelectionKey, CLOSE_REASON -> CloseReason, KEYDOWN_CLOSE_KEY -> KeydownCloseKey * **menu,select:** refactor `fixed` property to `positioning="fixed"` in Menu and `menuFixed` to `menuPositioning="fixed"` * **menu:** This change refactors menu-item to no longer subclass or import from list-item. It also refactors it to use md-item directly which means that the API of menu item has moved from properties to slots. `start-*` and `end-*` slots are now just `start` and `end`, many tokens are now gone in favor of slotting. `headline` property is now a `slot="headline"` slot. Typeahead search text can now be set via `typeaheadText` which defaults to the slotted headline `textContent`. `select-option` now has the `displayText` which is used to display text in the `md-select` when the option is selected; defaults to the slotted headline `textContent`. * **menu:** We have deleted `md-sub-menu-item`. Instead it is recommended to use `md-sub-menu` which can have `md-menu-item[slot=item]` and `md-menu[slot=menu]` slotted into it. This makes `sub-menu-item` accessible for screen readers using linear navigation * **menu:** Menu no longer uses md-list internally which means the list-related properties such as `list-tabindex` and `type` should now be on the host of md-menu. The new attributes should be `tabindex` and `role` respectively. * **iconbutton:** Replace `container-size` tokens with `container-width` and `container-height`. * **list:** the `noninteractive` property has been replaced by the `interactive` property, and by default, a list-item will no longer show a ripple or focus ring. What to change: - To preserve prior default behavior, add the `interactive` attribute explicitly. - Any setting of a truthy `noninteractive` attribute or property can be removed as it's the new default behavior. * **menu:** rename corner and focus state values lowercase with dashes * **chips:** chips now follow the [aria toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/). Chip sets are toolbars and chips are buttons or links. Filter chips are toggle buttons. What to change: - Remove `type` attribute from `` (you can mix and match chip types!) - Remove `single-select` from ``. Use JS to control filter chips if single selection is required. Radio filter chips will come in a future update. - Disabled chips CAN be focused with the keyboard if `always-focusable` is set. - Filter chips no longer dispatch a `"selected"` event. Listen to `"click"` and use `event.target.selected` instead. - ArrowUp and ArrowDown no longer navigate between chips. These are reserved for chip actions, like dropdown menu chips. * **list,menu,select:** the data-variant=".." selectors in list-item and all variants have been removed in favor of their respective slots. e.g. a slotted icon of the form `md-icon[slot=end][data-variant=icon]` should now be `md-icon[slot=end-icon]`. * **menu:** menu selected container color changed to secondary-container * **list:** * **list:** Aria and roles on List have been moved to the host element. list-tabindex attribute should be migrated to tabindex attribute. type attribute should be migrated to role attribute. * **list,menu,select:** removed `active` from list-item, menu-item, and select-option. Instead, List uses tabindex to track whether something is focusable. * **select:** `option.selected` no longer reflects. Set the attribute instead if relying on the attribute for styles/queries. * **dialog:** if overriding margin on a dialog's content, swap it to padding. If a dialog's slotted first or last child has built-in margin (such as `

` or `

`), remove the top/bottom margin as needed (since margin swapped to padding, there's no more margin collapsing). * **tabs:** Rename the `selected` index property on md-tabs to `activeTabIndex` (`active-tab-index` attribute). Rename `select-on-focus` to `auto-activate` * **typography:** composite `-type` tokens are no longer supported. Use discrete `-font`, `-size`, `-line-height`, and `-weight` tokens instead. * **tabs:** replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight` * **tabs:** rename `selected` to `active` for primary and secondary tabs. * **textfield:** replace slot names `leadingicon` and `trailingicon` with `leading-icon` and `trailing-icon` * **select:** replace `leadingicon` and `trailingicon` slot names with `leading-icon` and `trailing-icon` * **navigationtab:** change slot names activeIcon and inactiveIcon to active-icon and inactive-icon ### Features * **chips:** swap to toolbar a11y pattern ([16bfac1](https://github.com/material-components/material-web/commit/16bfac1343128f641b34e74e21c69a05a28a9185)) * **iconbutton:** update tokens to v0.192 ([e8b5b29](https://github.com/material-components/material-web/commit/e8b5b29d1eb18566126b77fcdc01c5f7f8899e25)) * **item:** add `<md-item>` layout component ([ffe4f79](https://github.com/material-components/material-web/commit/ffe4f79b5d749eabf051e677cb09a03488a1717d)) * **items:** add `<md-item>` to `@material/web/labs` ([b35212a](https://github.com/material-components/material-web/commit/b35212a9ac7907af3460ea64cc4f2e5874bf73fc)) * **list,menu,select:** add slots for specific slotted variants ([ed68995](https://github.com/material-components/material-web/commit/ed689952ddc6380fc6f004e190d521e6c739e415)) * **menu:** create a Menu interface for easier md-menu wrapping ([5fad4f0](https://github.com/material-components/material-web/commit/5fad4f088f2bcc957ee5cef0c261d537bf7caa12)) * **menu:** do not close menu if anchor is clicked ([c7c276f](https://github.com/material-components/material-web/commit/c7c276fdfa5eb2c7b4d06c7ccef8e36deaa96e5c)) * **menu:** implement md-sub-menu ([54fbb2e](https://github.com/material-components/material-web/commit/54fbb2ed5ee28d68d6d27b8121a8c4b3b1d10c8e)) * **menu:** menus will resize and flip corners to stay in viewport ([235a203](https://github.com/material-components/material-web/commit/235a2033d7e492e5ed245e7a81b0082e8ecd35ac)) * **menu:** update tokens to v0.192 ([94b5c81](https://github.com/material-components/material-web/commit/94b5c8125e2f264699b8afd1b44968346a526759)) * **select:** add required and form association ([4ad2336](https://github.com/material-components/material-web/commit/4ad2336b878b8db1523e1d333fc80c72a0969647)), closes [#4903](https://github.com/material-components/material-web/issues/4903) * **tabs:** add `tabs` property to retrieve tab elements ([bf48fc3](https://github.com/material-components/material-web/commit/bf48fc307ecadb7eb768052a54838a5ab532e059)) * **typography:** add typography Sass APIs ([8e480de](https://github.com/material-components/material-web/commit/8e480deae3501eaec7d8d5f5b959bff10ab699d7)) ### Bug Fixes * aria polyfill overrides user values and user values override internals values ([8aa4faf](https://github.com/material-components/material-web/commit/8aa4faf14ac8207c9a39f783f971bfbf5933bfa5)) * **catalog:** remove TODO from home page ([af27ff8](https://github.com/material-components/material-web/commit/af27ff8374e1814e7f1a3b303a28ab1c49b115a7)) * **dialog:** change content margin to padding ([8613fe6](https://github.com/material-components/material-web/commit/8613fe6a5845f87c7264254bdc114341fef7d824)) * **dialog:** not delegating focus in closure ([375b766](https://github.com/material-components/material-web/commit/375b7664efcc84925f7f283ef0902c32b558c090)) * **iconbutton:** allow prevent default click for toggles ([ed539c6](https://github.com/material-components/material-web/commit/ed539c6853cc6f1c6e5f3b2c40f06e83c779c3e5)), closes [#4857](https://github.com/material-components/material-web/issues/4857) * **iconbutton:** fix HCM disabled opacity and outlined ([1163315](https://github.com/material-components/material-web/commit/116331594826032c09e5dacee5e97d729c7f36a3)) * **linearprogress:** linear progress buffer dots now visible in HCM ([70bfea8](https://github.com/material-components/material-web/commit/70bfea873818d321343649df36046931c8eaab25)) * **list,menu:** clicking items in a list followed by keyboard nav functions as expected ([af171df](https://github.com/material-components/material-web/commit/af171df086d73094df4fa01ba052ffdef06a1197)) * **list,menu:** list items left right keyboard navigation ([fad6104](https://github.com/material-components/material-web/commit/fad61043914463f3e385bf786f6a6ff0b4d0c60c)) * **list:** list items are now noninteractive by default ([3b5cbc4](https://github.com/material-components/material-web/commit/3b5cbc4ede8c32066a76087870f08b55a246d13a)) * **list:** text items are no longer tabbable, links cannot be disabled ([54c4ddb](https://github.com/material-components/material-web/commit/54c4ddba4c13be05de08a64f635a0cf11fbb33cb)) * **list:** update tokens to 0.192 ([58539b1](https://github.com/material-components/material-web/commit/58539b156984d7bbbbb4a534230d796596984323)) * **menu,select:** fix final aria issues ([aeb5103](https://github.com/material-components/material-web/commit/aeb5103e1c6342d565f4af01da1f9d3fb59c50a6)) * **menu:** allow submenus to close when focus is lost ([7a19c7e](https://github.com/material-components/material-web/commit/7a19c7e97a40103e65697c1f669d887b176f1cc6)) * **menu:** apply padding to dividers per spec ([df52d92](https://github.com/material-components/material-web/commit/df52d927242fc13828f58fd10b495c586ce92324)) * **menu:** expose item custom properties and fix selected color ([d27ef2e](https://github.com/material-components/material-web/commit/d27ef2e059454624293c0a6ce7ee6d25afde8d5d)) * **menu:** fix submenus on mobile ([368991c](https://github.com/material-components/material-web/commit/368991ce306e904959a5d53e49293a8a683c46a1)) * **menu:** menu's default focus behavior follows google accessibility practices ([2927245](https://github.com/material-components/material-web/commit/29272451146afcb918237c11e8b7d7ef715a4675)) * **menu:** update default min width to spec and allow max-width to inherit ([2e25bf8](https://github.com/material-components/material-web/commit/2e25bf8ce2979de4a5bccabc244fd4ca715ecebc)) * **navigationtab:** change slot names activeIcon and inactiveIcon to active-icon and inactive-icon ([f019ac3](https://github.com/material-components/material-web/commit/f019ac37fe07da0a0a75821ce955dc6c6cbdc3c9)) * **radio:** dispatches input event on select ([e444de3](https://github.com/material-components/material-web/commit/e444de3c0264697e2fc094c35ae59808a04ff29f)) * **select:** change slot names to kebab-case ([059dad5](https://github.com/material-components/material-web/commit/059dad5d44ed43f4c84e754ce73f10b24bbbd1ae)) * **select:** don't reflect `selected` attribute ([573caae](https://github.com/material-components/material-web/commit/573caaee1b7fe64b57b84e2b287b6c5c74666de1)) * **select:** select can reopen when animation interrupted ([78e7c17](https://github.com/material-components/material-web/commit/78e7c1742f04437eee3f804cc73de9d3ffaaf1bb)) * **select:** update select docs and fix initial selection ([5e4434b](https://github.com/material-components/material-web/commit/5e4434bfed93db4ea0b02f3987483860ed7b2411)) * **slider:** border should only appear when handle nubs are overlapping ([6e72a8e](https://github.com/material-components/material-web/commit/6e72a8e5f4d118992fd110e19a02a2a3b2e31dc9)) * **slider:** label should not changed size when stacked ([b50d5c8](https://github.com/material-components/material-web/commit/b50d5c87b33f0a46bc98e2d362abc0656fdbc424)) * **slider:** make tickmarks visible when slider is disabled ([e9d1e7d](https://github.com/material-components/material-web/commit/e9d1e7d3c4ff937ed4f8913ab7280aee28a9e3eb)) * **tabs:** a11y and tabs sometimes not activating ([58f2446](https://github.com/material-components/material-web/commit/58f24462467b549c810554d8bc78480673d36e3d)) * **tabs:** remove font shorthand tokens ([88eb175](https://github.com/material-components/material-web/commit/88eb1759c50863eb444bc45dc28aa861beb8f853)) * **tabs:** remove previously selected tab property ([70ce0d2](https://github.com/material-components/material-web/commit/70ce0d2779e2310d28351141296106dbcb526255)) * **tabs:** remove public indicator property ([d296316](https://github.com/material-components/material-web/commit/d296316a2b69beff48ceb89dfc9b79bd475b0122)) * **tabs:** rename tab `selected` to `active` ([23b291b](https://github.com/material-components/material-web/commit/23b291b2ddf2450875868679ef7a288e770920bc)) * **tabs:** scrollable divider not taking up full width ([a0fca90](https://github.com/material-components/material-web/commit/a0fca90bdf8a8254ed6f28802b7d58248e24f889)) * **tabs:** setting `active` on tab selects them ([1442f9b](https://github.com/material-components/material-web/commit/1442f9b223761f0202b3c935159bc0b26bb0a16d)) * **textfield,focus,ripple:** fix textfield SSR ([f576b60](https://github.com/material-components/material-web/commit/f576b60aecf8f0e01746c61f6a4319922d1753e8)) * **textfield:** add demo a11y and fix outlined label navigation ([7866a93](https://github.com/material-components/material-web/commit/7866a939b95e10e5e5dafa5e4098370971e78e8b)) * **textfield:** broken required validity on Safari ([c26a578](https://github.com/material-components/material-web/commit/c26a578448666fda50eb2b25be59b88390e32097)), closes [#4796](https://github.com/material-components/material-web/issues/4796) * **textfield:** change slot names to kebab-case ([82e9e92](https://github.com/material-components/material-web/commit/82e9e92a19b82c401d2d878b2a713fbd773b1ad6)) * **textfield:** don't show focus indicator when focused on icon ([61c8f6d](https://github.com/material-components/material-web/commit/61c8f6db460c23caa9ab27b1ccfa84a72a8e1709)) * **textfield:** remove icon that appears in search input in chrome and safari ([86aaacd](https://github.com/material-components/material-web/commit/86aaacd32c02ee533a5506723ac7dbd77faf8fd3)) * **tokens:** generate tokens v0.192 ([116b448](https://github.com/material-components/material-web/commit/116b448639454674f9024b22f1dfe88187851d0d)) * **tokens:** update components to v0.192 ([cfd053c](https://github.com/material-components/material-web/commit/cfd053c39701aa0b8d8e33a9e0392a68ec842a83)) ### Miscellaneous Chores * prep release version ([df508ef](https://github.com/material-components/material-web/commit/df508ef5fdd1494bf6a3c567d9ac82da978fb8e0)) ### Code Refactoring * **list,menu,select:** remove active concept and now parent controls tabIndex and focus ([d446315](https://github.com/material-components/material-web/commit/d4463154cc1f5831aac79cf2894146289d9a56be)) * **list,menu,select:** remove data-variant slotted variant selectors ([1f31df8](https://github.com/material-components/material-web/commit/1f31df818be4140640bc1b12a8401a9f202b7914)) * **list:** move list aria to host ([9447ec7](https://github.com/material-components/material-web/commit/9447ec7d72999f5e6bcef91baf803d51d0d0e442)) * **list:** refactor list to reuse ListController ([6d0c7e8](https://github.com/material-components/material-web/commit/6d0c7e8538c41be727cd333faffc5c6085d69c6b)) * **list:** refactor list using md-item ([7536774](https://github.com/material-components/material-web/commit/753677489b90175ca799bd422cdd7c2b9b2ede42)) * **menu,select:** rename `fixed` to `positioning` ([63b0142](https://github.com/material-components/material-web/commit/63b01425e7ed5e810853c7af629f4e3198a9fb5d)) * **menu:** pull logic out of menuitem into a controller & change enum vals ([1217b62](https://github.com/material-components/material-web/commit/1217b62ef2cd73fbf28fe32ef45941ce130961d1)) * **menu:** refactor menu-item to use md-item and not rely on md-list-item ([2a1d877](https://github.com/material-components/material-web/commit/2a1d8776a76025ff9ff5ebc8cacea1f12f69badf)) * **menu:** remove sub-menu-item in favor of sub-menu ([d6cbf74](https://github.com/material-components/material-web/commit/d6cbf741374cbb22abe3764d19afe265f42f9a5f)) * **menu:** rename corner and focus state values lowercase with dashes ([6e54048](https://github.com/material-components/material-web/commit/6e54048f1eadb8234c3681009a5b8193f14f7c14)) * **menu:** update menu to use host-aria ([0384507](https://github.com/material-components/material-web/commit/03845074479894e3e609b7c5ec6e37d4f6cdaf88)) ## [1.0.0-pre.17](https://github.com/material-components/material-web/compare/v1.0.0-pre.16...v1.0.0-pre.17) (2023-09-06) ### ⚠ BREAKING CHANGES * **slider:** replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight`. Additionally, rename `label-label-*` tokens to a single `label-*` * **list:** replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight` * **chips:** replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight` * **text-field,select:** replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight` * **fab:** replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight` * **dialogs:** replace `headline-text-type` and `supporting-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight` * **button:** replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight` * **circularprogress:** make default width 4px * **textfield:** The field component must add the `resizable` attribute rather than using CSS. CSS `resize` can still customize the direction (defaults to both). * **list,menu,select:** menu harnesses will not automatically open menus in quick mode anymore and interactions in menu and list harnesses will not automatically go to the first item but rather the menu roots. * **iconbutton:** change `slot="selectedIcon"` to `slot="selected"` for toggle icon buttons. * **tabs:** secondary tabs always have inline icons * **tabs:** remove `variant` attributes and change `md-tab` to `md-primary-tab`, or `md-secondary-tab` if using `variant="secondary" * **menu:** allow anchoring with idref string and set element ref on anchorElement * **tokens:** Change "radio-button" and "progress-indicator" Sass token APIs to "radio" and "progress". This matches the tag names of their components. * **tabs:** Remove `--md-*tab-divider` tokens and use `md-tabs::part(divider)` and `--md-divider-*` tokens * **tabs:** tabs cannot be disabled per spec. If disabled tabs are required, use `pointer-events: none` and CSS to style them. * **iconbutton:** change visibility of `willUpdate` to protected ### Features * **color:** add color folder for md-sys-color theming APIs ([cdd9b26](https://github.com/material-components/material-web/commit/cdd9b264cb18dd9c43c4691b32fd47b65a90dab9)) * **color:** add color folder for md-sys-color theming APIs ([87af9aa](https://github.com/material-components/material-web/commit/87af9aa13022ed69dbe20961293e67b2bf5914c4)) * **focus,ripple:** allow setting `element.control = elementRef` ([1e7aff5](https://github.com/material-components/material-web/commit/1e7aff50cf3882f711dd6eb56f08a95ee6f3c084)) * **menu:** allow anchoring with idref string and set element ref on anchorElement ([5ba348d](https://github.com/material-components/material-web/commit/5ba348dfd07f771d0db093841353f85b2a366c5a)) * **select:** dispatch select-(open|close)(ing|ed) events ([1a1fb93](https://github.com/material-components/material-web/commit/1a1fb93be77634d45c373bf97804ccd074cef719)), closes [#4798](https://github.com/material-components/material-web/issues/4798) * **switch:** add required and form validity ([9694191](https://github.com/material-components/material-web/commit/9694191ec02bb37575df8d74af6e530f3e4e45e9)) ### Bug Fixes * add aria-hidden="true" to ripple, focus ring, and elevation ([2295f12](https://github.com/material-components/material-web/commit/2295f12e711f563b05a19d1d354e37a986027d5d)) * **badge:** center align value text ([cc195a9](https://github.com/material-components/material-web/commit/cc195a947656b2f4765be77ba2fa3cbfe680ba76)) * **button:** remove font shorthand tokens ([8894c20](https://github.com/material-components/material-web/commit/8894c20c6becab188f6136753f538372258b8faf)) * **button:** update demos to fix a11y ([4b61e8d](https://github.com/material-components/material-web/commit/4b61e8d2034448a0d06baddca4d6f768f82b35bd)) * **chips:** apply cursor styling ([9389e26](https://github.com/material-components/material-web/commit/9389e26b68705e82c1cde5469ab7777790db5477)) * **chips:** linear navigation not working in VoiceOver ([dfc87f3](https://github.com/material-components/material-web/commit/dfc87f32e8621b0bbcf8156a276bd67a5ecd1ddc)) * **chips:** remove font shorthand tokens ([87ad1da](https://github.com/material-components/material-web/commit/87ad1dae4fbcdc037f842e65e173d0b66e210081)) * **circularprogress:** make default width 4px ([c864d3b](https://github.com/material-components/material-web/commit/c864d3b638fffdb22a1897507595d666fb16784a)) * **dialog, select:** allow fixed selects to render correctly in dialogs ([d6aa6b2](https://github.com/material-components/material-web/commit/d6aa6b22c794ed48f2937ea4a33f321d0b1f9b25)) * **dialog:** content not displaying on Safari ([9b7647b](https://github.com/material-components/material-web/commit/9b7647bd3d44c433e0edad7cd4d30f6fdd220f25)), closes [#4728](https://github.com/material-components/material-web/issues/4728) * **dialog:** not showing if opened before connected ([d25c5e9](https://github.com/material-components/material-web/commit/d25c5e9ecade4ecc3d6ea4ceb9c5e2bc1d19dc06)), closes [#4728](https://github.com/material-components/material-web/issues/4728) * **dialogs:** remove font shorthand tokens ([81e11e0](https://github.com/material-components/material-web/commit/81e11e09fa5ded5ab41e7cbcb977cd7dbc3ece81)) * **fab:** remove font shorthand tokens ([f77ee36](https://github.com/material-components/material-web/commit/f77ee3628c0ef6945f11c8045c3c2e4e0f262d68)) * **iconbutton:** change visibility of `willUpdate` to protected ([dffff2d](https://github.com/material-components/material-web/commit/dffff2d1a31f3ed40b28f57570ba4df7f61f7210)) * **iconbutton:** rename `selectedIcon` slot to `selected` ([9647f5e](https://github.com/material-components/material-web/commit/9647f5e5147b2d94f2db8ea6ca45c7f819714324)) * **iconbutton:** update demos to fix a11y ([a9091fe](https://github.com/material-components/material-web/commit/a9091fe036af55986123770606a686388fd39b3f)) * **labs:** remove font shorthand tokens ([acd40a2](https://github.com/material-components/material-web/commit/acd40a2f57277a67850c8e103a405dfcc4d3fdce)) * **list,menu:** restrict type to only supported aria roles ([32a8c44](https://github.com/material-components/material-web/commit/32a8c4410eff4bede75c77bcdd43541967c8d0e7)) * **list:** remove font shorthand tokens ([ca2cd56](https://github.com/material-components/material-web/commit/ca2cd56bd1b668904c6aea2b4d18602e773e1c9f)) * **list:** remove internal md3-* class prefix ([641142d](https://github.com/material-components/material-web/commit/641142dff0fa679754a6f26518e9db7eccf5f6f5)) * **menu,list,select:** do not stopPropagation on native events when handled only prevent default ([b85b57f](https://github.com/material-components/material-web/commit/b85b57fa792663460dbc1730c9e574e2b5ab998d)) * **radio:** make host radio role to fix a11y ([0711f8c](https://github.com/material-components/material-web/commit/0711f8c03c2c4c743386abf490e6dddf243be5e6)) * ripple and focus ring not centered in Safari ([0e8afc0](https://github.com/material-components/material-web/commit/0e8afc01757c3f1f8a5bf904e8cb857ea88bd7bf)) * **select, menu:** allow item selection while animation is running in non-overflow contexts ([b905807](https://github.com/material-components/material-web/commit/b9058076b6bdf10ad135003b6c91ac46ebcb273b)) * **select:** announce typeahead selection when select is closed ([2c892c4](https://github.com/material-components/material-web/commit/2c892c411472481c44d6d5a0bdec073d74634d89)) * **slider:** display tick marks when forced-colors is active ([2f9cc20](https://github.com/material-components/material-web/commit/2f9cc208df53f0587e3712ec03c164bac25efade)) * **slider:** remove font shorthand tokens ([6988a49](https://github.com/material-components/material-web/commit/6988a49a3b28273d02cad20ff0129c2906a63a26)) * **tabs:** add nocollapse so isTab doesn't get minified ([17ddcd3](https://github.com/material-components/material-web/commit/17ddcd3c2e1c994b868d8b49d55a7457234929b2)) * **tabs:** incorrect layout and primary indicator width ([0467c48](https://github.com/material-components/material-web/commit/0467c4845db7c31deddf7383beb199157f4c5034)) * **tabs:** make indicator animation faster ([b542d2a](https://github.com/material-components/material-web/commit/b542d2aa12dcfc70fa250265cc82647d04218254)) * **tabs:** remove disabled tabs ([d18db2a](https://github.com/material-components/material-web/commit/d18db2a6acb90a059856fbf74e8c2212f7680a68)) * **tabs:** remove divider tokens in favor of md-divider ([13690a3](https://github.com/material-components/material-web/commit/13690a396f666b2073f6dc4995090d12947de59f)) * **tabs:** secondary tabs always have inline icons ([6b2955b](https://github.com/material-components/material-web/commit/6b2955bffe68adc4c8c36ee96e2d45c2955b3a4c)) * **tabs:** split md-tab into md-primary-tab and md-secondary-tab ([5b13b5c](https://github.com/material-components/material-web/commit/5b13b5c05bdbe7a85e30408a33a07de6480317d2)) * **tabs:** use instanceof to check for a Tab ([58497f1](https://github.com/material-components/material-web/commit/58497f13b2ca494f233c290f6571f5f03f142d7f)) * **testing:** harness not applying :active to parents ([327eeaf](https://github.com/material-components/material-web/commit/327eeafbf9f3f7bbf5f80d458cd9e423c5a7d98d)) * **testing:** remove font shorthand tokens ([01a99a5](https://github.com/material-components/material-web/commit/01a99a5cc36cafe11422062d513e38cbf7442e02)) * **text-field,select:** remove font shorthand tokens ([0c5a2a2](https://github.com/material-components/material-web/commit/0c5a2a2886fd934c598361aacc0719ad484ade9b)) * **textfield:** don't transition colors when disabling ([11cc472](https://github.com/material-components/material-web/commit/11cc4721ce42bf63ed06637081fdeb01aa2f25bb)) * **textfield:** line breaks not visible in Firefox ([541c0e9](https://github.com/material-components/material-web/commit/541c0e947d1ad4549256af5ebdde645a86724171)), closes [#4581](https://github.com/material-components/material-web/issues/4581) * **textfield:** show overflowing content like popups and focus rings ([ecac7ec](https://github.com/material-components/material-web/commit/ecac7ecbad43b90b94f61d44974312d5546877d8)), closes [#4071](https://github.com/material-components/material-web/issues/4071) * **textfield:** textarea resize handle overlapping outline ([cdd2ea6](https://github.com/material-components/material-web/commit/cdd2ea6c1db189495abd3b45eee5e9872fc9622c)) * **tokens:** rename token override files ([59c44fc](https://github.com/material-components/material-web/commit/59c44fc2f9266b60d22e9bd5ff5d39e7d0ee8dff)) ### Reverts * feat(color): add color folder for md-sys-color theming APIs ([a528393](https://github.com/material-components/material-web/commit/a5283936fedd8da92af994fa0d721e07bc2686c4)) ### Miscellaneous Chores * update next version ([f41c816](https://github.com/material-components/material-web/commit/f41c8165f47e6a212b6c8ca104951187c8020622)) ### Tests * **list,menu,select:** clean up internal testing patterns from harnesses ([fcfc696](https://github.com/material-components/material-web/commit/fcfc696c4628fd2f41b09c060e6af4cd8e7658c2)) ## [1.0.0-pre.16](https://github.com/material-components/material-web/compare/v1.0.0-pre.15...v1.0.0-pre.16) (2023-08-21) ### ⚠ BREAKING CHANGES * **list-item:** remove duplicate list-item menu-item from custom prop names ### Features * **fab:** do not require has-icon ([156ca3c](https://github.com/material-components/material-web/commit/156ca3cbe7fc03290892a1b20c8b5036b996d2ed)) * **iconbutton:** add touch target configs ([0862c58](https://github.com/material-components/material-web/commit/0862c58d24054a496b452d22fd56726e38057669)) * **list:** change default host display to flex so max-width can be set without user setting display ([aa3fe3d](https://github.com/material-components/material-web/commit/aa3fe3d1ecff7c32850045b5c7eaedb2adbedc43)) * **switch:** add touch target configs ([8bad07b](https://github.com/material-components/material-web/commit/8bad07bcf7aade5bb79b04a177acc227da8527bc)) * **tab:** add logical container shape tokens ([dbed51c](https://github.com/material-components/material-web/commit/dbed51cc275dd37251e4e7e151e8f9b7d698ff22)) * **textfield:** support inputmode attribute ([5d0cbf5](https://github.com/material-components/material-web/commit/5d0cbf5e9758e07d2d580fd2a47bc6bc74289856)) ### Bug Fixes * **button:** `href` and `target` default value is now an empty string ([d665864](https://github.com/material-components/material-web/commit/d665864cba14e06aa050a1c77d8b5db914355113)) * **button:** add value to form when submitting ([f23fac1](https://github.com/material-components/material-web/commit/f23fac1465d7e0f6a6fa029f7395c91bd5b765c6)), closes [#4526](https://github.com/material-components/material-web/issues/4526) * **button:** incorrect HCM colors ([b144227](https://github.com/material-components/material-web/commit/b1442274383a8ba83e6ec94e24d04becb5988b88)) * **checkbox:** not working after formAssociated changes ([33803ab](https://github.com/material-components/material-web/commit/33803aba39ab531f233c6b4831eaa9d7715919a7)), closes [#4747](https://github.com/material-components/material-web/issues/4747) * **chips:** avatar input chips are rounded by default ([b7671fb](https://github.com/material-components/material-web/commit/b7671fb7882836e192de194d801e6d3edc856eb0)) * **chips:** make forced-color border color explicit ([cd8f2fc](https://github.com/material-components/material-web/commit/cd8f2fc9fc9315024a9b22c89d07ac870836ddd5)) * **chips:** per spec, trailing focus rings are always circles ([fc9b945](https://github.com/material-components/material-web/commit/fc9b945d9969091611d54b7b80e6b41a44c2df16)) * **elevation:** don't transition border-radius ([7d616fa](https://github.com/material-components/material-web/commit/7d616faecdc20ff2bb407e6af99f46716b1a813f)) * **iconbutton:** make target type stricter ([c874cd5](https://github.com/material-components/material-web/commit/c874cd55c70d0b3b5fe99464b2301a325dfea2df)) * **iconbutton:** rename selectedAriaLabel to ariaLabelSelected along with attribute ([2bbab09](https://github.com/material-components/material-web/commit/2bbab09a509595e50b3d4684374b3210f4b44c42)) * **icon:** don't allow user text selection by default ([53aab28](https://github.com/material-components/material-web/commit/53aab285e94495bbac577712d35db264a9d6c908)) * **list:** use margin over padding on slotted content and fix extraneous spacing ([1530aca](https://github.com/material-components/material-web/commit/1530aca17de16919380e3a52d5eb348da05e60d8)) * **menu:** make overriding default styles less likely ([626b4ef](https://github.com/material-components/material-web/commit/626b4efd69166b9c5602fdbb62389ce490bdef56)) * **progress:** incorrect HCM colors ([f39da54](https://github.com/material-components/material-web/commit/f39da54bc579d0ec1f230fc4ab3b40a7466867d0)) * **slider:** fix accessibility issues ([e836dc3](https://github.com/material-components/material-web/commit/e836dc333bdb840f41ed9afafd6f04f87ca67896)) * **slider:** focus ring too small ([8942568](https://github.com/material-components/material-web/commit/8942568ffec755b588055cfd84a8d5b1e7829197)) * **switch:** unselected handle too big with selected icon only ([ecf83a0](https://github.com/material-components/material-web/commit/ecf83a0e7a0f8ed377350ee4af40cb51b4404496)) * **textfield:** add form validity support ([a167cab](https://github.com/material-components/material-web/commit/a167cabeff27275b88bcaa4c98d14307fc0f1fe9)), closes [#4435](https://github.com/material-components/material-web/issues/4435) * **textfield:** focus indicator and outline are 3px ([bbb7840](https://github.com/material-components/material-web/commit/bbb784012a3d29aa594e2051e1763f745e29d666)) ### Miscellaneous Chores * update next version ([1675fd0](https://github.com/material-components/material-web/commit/1675fd0062e8378897dbc8de4b2869dda3079987)) ### Code Refactoring * **list-item:** remove duplicate list-item menu-item from custom prop names ([2d9352e](https://github.com/material-components/material-web/commit/2d9352e3f4ec0fef3d5ffca5d34f07bf38345a92)) ## [1.0.0-pre.15](https://github.com/material-components/material-web/compare/v1.0.0-pre.14...v1.0.0-pre.15) (2023-08-10) ### ⚠ BREAKING CHANGES * **dialog:** See https://github.com/material-components/material-web/discussions/4675 for more details. * **fab:** Replace `reduced-touch-target` with `touch-target="none"` * **checkbox:** Checkbox's size is now smaller by default. Add margin or `touch-target="wrapper"` to increase it to the previous size. * **radio:** Radio's size is now smaller by default. Add margin or `touch-target="wrapper"` to increase it to the previous size. * **dialog:** Fullscreen dialogs weren't matching spec, so we're removing them for now to avoid future breaking changes. They will be re-added later. * **list,menu:** list-item-link and menu-item-link have been removed and their functionality has been added to menu-item and list-item respectively. * **dialog:** use `autofocus` attribute instead of `dialog-focus` * **dialog:** Use dialog.open, dialog.show(), and dialog.close() instead. * **dialog:** dialog actions can set their own layout with a container element. * **dialog:** Material dialogs are always modal. * **select:** select will now show an arrow indicator and will apply default styles to slotted icons * **icon:** Remove css custom properties from icon and prefer applying normal css properties on host except for font-family. * **menu:** subclassing events is not supported in ES5 so all menu-related events now use CustomEvent rather than subclassing Event * **button:** Buttons submit forms by default, like ``; } private renderLink() { // Needed for closure conformance const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict; return html`${this.renderContent()} `; } private renderContent() { const icon = html``; return html` ${this.trailingIcon ? nothing : icon} ${this.trailingIcon ? icon : nothing} `; } private handleClick(event: MouseEvent) { // If the button is soft-disabled or a disabled link, we need to explicitly // prevent the click from propagating to other event listeners as well as // prevent the default action. if (this.softDisabled || (this.disabled && this.href)) { event.stopImmediatePropagation(); event.preventDefault(); return; } if (!isActivationClick(event) || !this.buttonElement) { return; } this.focus(); dispatchActivationClick(this.buttonElement); } private handleSlotChange() { this.hasIcon = this.assignedIcons.length > 0; } } ================================================ FILE: button/internal/button_test.ts ================================================ /** * @license * Copyright 2024 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {html} from 'lit'; import {customElement} from 'lit/decorators.js'; import {Environment} from '../../testing/environment.js'; import {ButtonHarness} from '../harness.js'; import {Button} from './button.js'; @customElement('test-button') class TestButton extends Button {} describe('Button', () => { const env = new Environment(); async function setupTest() { const button = new TestButton(); env.render(html`${button}`); await env.waitForStability(); return {button, harness: new ButtonHarness(button)}; } it('should not be focusable when disabled', async () => { // Arrange const {button} = await setupTest(); button.disabled = true; await env.waitForStability(); // Act button.focus(); // Assert expect(document.activeElement) .withContext('disabled button should not be focused') .not.toBe(button); }); it('should be focusable when soft-disabled', async () => { // Arrange const {button} = await setupTest(); button.softDisabled = true; await env.waitForStability(); // Act button.focus(); // Assert expect(document.activeElement) .withContext('soft-disabled button should be focused') .toBe(button); }); it('should not be clickable when disabled', async () => { // Arrange const clickListener = jasmine.createSpy('clickListener'); const {button} = await setupTest(); button.disabled = true; button.addEventListener('click', clickListener); await env.waitForStability(); // Act button.click(); // Assert expect(clickListener).not.toHaveBeenCalled(); }); it('should not be clickable when soft-disabled', async () => { // Arrange const clickListener = jasmine.createSpy('clickListener'); const {button} = await setupTest(); button.softDisabled = true; button.addEventListener('click', clickListener); await env.waitForStability(); // Act button.click(); // Assert expect(clickListener).not.toHaveBeenCalled(); }); }); ================================================ FILE: button/internal/elevated-button.ts ================================================ /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../../elevation/elevation.js'; import {html} from 'lit'; import {Button} from './button.js'; /** * An elevated button component. */ export class ElevatedButton extends Button { protected override renderElevationOrOutline() { return html``; } } ================================================ FILE: button/internal/elevated-styles.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './elevated-button'; // go/keep-sorted end @include elevated-button.styles; ================================================ FILE: button/internal/filled-button.ts ================================================ /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../../elevation/elevation.js'; import {html} from 'lit'; import {Button} from './button.js'; /** * A filled button component. */ export class FilledButton extends Button { protected override renderElevationOrOutline() { return html``; } } ================================================ FILE: button/internal/filled-styles.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './filled-button'; // go/keep-sorted end @include filled-button.styles; ================================================ FILE: button/internal/filled-tonal-button.ts ================================================ /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../../elevation/elevation.js'; import {html} from 'lit'; import {Button} from './button.js'; /** * A filled tonal button component. */ export class FilledTonalButton extends Button { protected override renderElevationOrOutline() { return html``; } } ================================================ FILE: button/internal/filled-tonal-styles.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './filled-tonal-button'; // go/keep-sorted end @include filled-tonal-button.styles; ================================================ FILE: button/internal/outlined-button.ts ================================================ /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {html} from 'lit'; import {Button} from './button.js'; /** * An outlined button component. */ export class OutlinedButton extends Button { protected override renderElevationOrOutline() { return html`

`; } } ================================================ FILE: button/internal/outlined-styles.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './outlined-button'; // go/keep-sorted end @include outlined-button.styles; ================================================ FILE: button/internal/shared-elevation-styles.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './elevation'; // go/keep-sorted end @include elevation.styles; ================================================ FILE: button/internal/shared-styles.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './icon'; @use './shared'; @use './touch-target'; // go/keep-sorted end @include shared.styles; @include icon.styles; @include touch-target.styles; ================================================ FILE: button/internal/text-button.ts ================================================ /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {Button} from './button.js'; /** * A text button component. */ export class TextButton extends Button {} ================================================ FILE: button/internal/text-styles.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './text-button'; // go/keep-sorted end @include text-button.styles; ================================================ FILE: button/outlined-button.ts ================================================ /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {OutlinedButton} from './internal/outlined-button.js'; import {styles as outlinedStyles} from './internal/outlined-styles.js'; import {styles as sharedStyles} from './internal/shared-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-outlined-button': MdOutlinedButton; } } /** * @summary Buttons help people take action, such as sending an email, sharing a * document, or liking a comment. * * @description * __Emphasis:__ Medium emphasis – For important actions that don’t distract * from other onscreen elements. * * __Rationale:__ Use an outlined button for actions that need attention but * aren’t the primary action, such as “See all” or “Add to cart.” This is also * the button to use for giving someone the opportunity to change their mind or * escape a flow. * * __Example usages:__ * - Reply * - View all * - Add to cart * - Take out of trash * * @final * @suppress {visibility} */ @customElement('md-outlined-button') export class MdOutlinedButton extends OutlinedButton { static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles]; } ================================================ FILE: button/outlined-button_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {createTokenTests} from '../testing/tokens.js'; import {MdOutlinedButton} from './outlined-button.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdOutlinedButton.styles); }); }); ================================================ FILE: button/text-button.ts ================================================ /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {styles as sharedStyles} from './internal/shared-styles.js'; import {TextButton} from './internal/text-button.js'; import {styles as textStyles} from './internal/text-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-text-button': MdTextButton; } } /** * @summary Buttons help people take action, such as sending an email, sharing a * document, or liking a comment. * * @description * __Emphasis:__ Low emphasis – For optional or supplementary actions with the * least amount of prominence * * __Rationale:__ Text buttons have less visual prominence, so should be used * for low emphasis actions, such as an alternative option. * * __Example usages:__ * - Learn more * - View all * - Change account * - Turn on * * @final * @suppress {visibility} */ @customElement('md-text-button') export class MdTextButton extends TextButton { static override styles: CSSResultOrNative[] = [sharedStyles, textStyles]; } ================================================ FILE: button/text-button_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {createTokenTests} from '../testing/tokens.js'; import {MdTextButton} from './text-button.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdTextButton.styles); }); }); ================================================ FILE: catalog/.firebaserc ================================================ { "projects": { "default": "material-web-catalog" } } ================================================ FILE: catalog/eleventy-helpers/filters/filter-sort.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /** * A filter that sorts and filters an array based on truthyness and sorts the * filtered array. * * This filter takes the following arguments: * - arr: (required) The array to filter-sort. * - attr: (required) The attribute to filter and sort by. * * @example * ```html * * {% for component in collections.component|filtersort('data.name') %} * {{ component.data.name }} * {% endfor %} * ``` * * @param eleventyConfig The 11ty config in which to attach this filter. */ function filterSort (eleventyConfig) { eleventyConfig.addFilter("filtersort", function(arr, attr) { // get the parts of the attribute to look up const attrParts = attr.split("."); const array = arr.filter(item => { let value = item; // get the deep attribute for (const part of attrParts) { value = value[part]; } return !!value; }); array.sort((a, b) => { let aVal = a; let bVal = b; // get the deep attributes of each a and b for (const part of attrParts) { aVal = aVal[part]; bVal = bVal[part]; } if (aVal < bVal) { return -1; } else if (aVal > bVal) { return 1; } return 0; }); return array; }); }; module.exports = filterSort; ================================================ FILE: catalog/eleventy-helpers/filters/filter-toc.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /** * A filter that sanitizes tags in a string so that they can be rendered * as text in the TOC. * * @example * ```html * * {{ toc | filterToc | safe }} * ``` * * @param eleventyConfig The 11ty config in which to attach this filter. */ function filterToc(eleventyConfig) { eleventyConfig.addFilter('filterToc', function (text) { const mdTagName = /<(md-.+?)>/g; return text.replace(mdTagName, function (match, tagName) { return `<${tagName}>`; }); }); } module.exports = filterToc; ================================================ FILE: catalog/eleventy-helpers/filters/md-markdown.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ const cheerio = require('cheerio'); /** * Fixes links and applies redirects to markdown files filtered by this filter. * It ignores external links, applies redirects, removes .md extendsions, and * adds trailing slashes. * * @param {import('cheerio').CheerioAPI} $ Cheerio instance * @param {[RegExp|string, string,(match: string, ...pattern: string[]) => string]} redirects Any redirects we want to apply */ function fixLinks($, redirects) { const anchors = $('a'); for (const anchor of anchors) { const href = $(anchor).attr('href'); if (!href) continue; const isExternal = href.startsWith('http'); if (isExternal) continue; let [path, hash] = href.split('#'); // it's probably a href="#section" link if (path.length === 0) { continue; } for (const [pattern, replacement] of redirects) { const regex = new RegExp(pattern); path = path.replace(regex, replacement); } const endsWithMd = path.endsWith('.md'); if (endsWithMd) { path = path.replace(/\.md$/, '/'); } const endsWithSlash = path.endsWith('/'); if (!endsWithSlash) { path += '/'; } const newHref = path + (hash ? `#${hash}` : ''); $(anchor).attr('href', newHref); } } /** * Reformats blockquotes to add an icon and format it. * * @param {import('cheerio').CheerioAPI} $ Cheerio instance */ function blockquote($) { const blockquotes = $('blockquote'); for (const blockquote of blockquotes) { const $blockquote = $(blockquote); const $first = $blockquote.children().first(); const text = $first.text().trim(); const iconRegex = /^(tip|important|note|warning):\s*/i; const match = text.match(iconRegex); const hasIcon = match; if (!hasIcon) { $blockquote.addClass('none'); continue; } let newText = text.replace(iconRegex, ''); $first.text(newText); const type = match[1].toLowerCase(); let icon = ''; switch (type) { case 'tip': $blockquote.addClass('tip'); icon = 'star'; break; case 'important': $blockquote.addClass('important'); icon = 'priority_high'; break; case 'warning': $blockquote.addClass('warning'); icon = 'warning'; break; case 'note': $blockquote.addClass('note'); icon = 'bookmark'; break; } $blockquote.wrapInner('
'); $blockquote.prepend(`
${icon}
`); } } /** * A filter that applies our set of transforms to markdown output such as fixing * links, and adding icons to blockquotes. * * @example * ```html * * {{ content | mdMarkdown | safe }} * ``` * * @param eleventyConfig The 11ty config in which to attach this filter. * @param {[RegExp|string, string,(match: string, ...pattern: string[]) => string]} redirects Any redirects we want to apply */ function mdMarkdown(eleventyConfig, redirects) { eleventyConfig.addFilter('mdMarkdown', function (html) { const $ = cheerio.load(html); fixLinks($, redirects); blockquote($); return $.html(); }); } module.exports = mdMarkdown; ================================================ FILE: catalog/eleventy-helpers/plugins/copy-code-button.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /** * Renders a copy-code-button component around the original markdown code block * if the codeblock is not empty. * * @param originalRule The original markown-it rule to modilfy. * @return A modified markdownit render rule that injects a copy-code-button island */ function renderCode(originalRule) { return (...args) => { const [tokens, idx] = args; // Escape quotes and apostrophes so that they don't break the HTML. const codeblockContent = tokens[idx].content .replaceAll('"', '"') .replaceAll("'", "'"); const originalHTMLContent = originalRule(...args); if (codeblockContent.length === 0) { return originalHTMLContent; } return ` ${originalHTMLContent} `; }; } /** * Adds a copy code button to code blocks. * * @param markdownIt The markdown-it instance to use. */ function copyCodeButtonPlugin(markdownIt) { markdownIt.use(() => { markdownIt.renderer.rules.code_block = renderCode(markdownIt.renderer.rules.code_block); markdownIt.renderer.rules.fence = renderCode(markdownIt.renderer.rules.fence); }); } module.exports = copyCodeButtonPlugin; ================================================ FILE: catalog/eleventy-helpers/plugins/permalinks.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ const markdownItAnchor = require('markdown-it-anchor'); const slugifyLib = require('slugify'); /** * An 11ty plugin that integrates `markdown-it-anchor` to 11ty's markdown * engine. This allows us to inject an around our elements. * * @param markdownIt The markdown-it instance to use. */ function permalinks(markdownIt) { // Use the same slugify as 11ty for markdownItAnchor. const slugify = (s) => slugifyLib(s, { lower: true }); const linkAfterHeaderBase = markdownItAnchor.permalink.linkAfterHeader({ style: 'visually-hidden', class: 'anchor', visuallyHiddenClass: 'offscreen', assistiveText: (title) => `Link to “${title}”`, }); /** * Wraps the link with a div so that it's more accessible. Implementation * taken from lit.dev * * https://github.com/lit/lit.dev/blob/18d86901c2814913a35b201d78e95ba8735c42e7/packages/lit-dev-content/.eleventy.js#L105-L134 */ const linkAfterHeaderWithWrapper = (slug, opts, state, idx) => { const headingTag = state.tokens[idx].tag; if (!headingTag.match(/^h[123456]$/)) { throw new Error(`Expected token to be a h1-6: ${headingTag}`); } // Using markdownit's token system to inject a div wrapper so that we can // have: //
//

Interactive Demo

// // Permalink to "Interactive Demo" // //

state.tokens.splice( idx, 0, Object.assign(new state.Token('div_open', 'div', 1), { attrs: [['class', `heading ${headingTag}`]], block: true, }) ); state.tokens.splice( idx + 4, 0, Object.assign(new state.Token('div_close', 'div', -1), { block: true, }) ); linkAfterHeaderBase(slug, opts, state, idx + 1); }; // Apply the anchor plugin to markdownit markdownIt.use(markdownItAnchor, { slugify, permalink: linkAfterHeaderWithWrapper, permalinkClass: 'anchor', permalinkSymbol: '#', level: [2, 3, 4], // only apply to h2 h3 and h4 }); } module.exports = permalinks; ================================================ FILE: catalog/eleventy-helpers/shortcodes/inline-css.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ const CleanCSS = require('clean-css'); /** * Bundle, minify, and inline a CSS file. Path is relative to ./site/css/. * * In dev mode, instead import the CSS file directly. * * This filter takes the following arguments: * - path: (required) The path of the file to minify and inject relative to * /site/css * * @example * ```html * * * {% inlinecss "global.css" %} * * ``` * * @param eleventyConfig The 11ty config in which to attach this shortcode. * @param isDev {boolean} Whether or not the build is in development mode. */ function inlineCSS(eleventyConfig, isDev) { eleventyConfig.addShortcode('inlinecss', (path) => { if (isDev) { return ``; } const result = new CleanCSS({ inline: ['local'] }).minify([ `./site/css/${path}`, ]); if (result.errors.length > 0 || result.warnings.length > 0) { throw new Error( `CleanCSS errors/warnings on file ${path}:\n\n${[ ...result.errors, ...result.warnings, ].join('\n')}` ); } return ``; }); } module.exports = inlineCSS; ================================================ FILE: catalog/eleventy-helpers/shortcodes/inline-js.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ const fsSync = require('fs'); /** * Inline the Rollup-bundled version of a JavaScript module. Path is relative * to ./lib or ./build aliased to /js by 11ty * * In dev mode, instead directly import the module in a * script[type=module][src=/js/...], which has already been symlinked directly * to the 11ty JS output directory. * * This filter takes the following arguments: * - path: (required) The path of the file to minify and inject relative to * ./lib, ./build, or ./js folders depending on dev mode. * * @example * ```html * * * {% inlinejs "ssr-utils/dsd-polyfill.js" %} * * ``` * * @param eleventyConfig The 11ty config in which to attach this shortcode. * @param isDev {boolean} Whether or not the build is in development mode. * @param config {{jsdir: string}} Configuration options to set the JS directory */ function inlineJS(eleventyConfig, isDev, {jsDir}) { eleventyConfig.addShortcode('inlinejs', (path) => { // script type module if (isDev) { return ``; } const script = fsSync.readFileSync(`${jsDir}/${path}`, 'utf8').trim(); return ``; }); } module.exports = inlineJS; ================================================ FILE: catalog/eleventy-helpers/shortcodes/playground-example.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /** * Will render a playground example with a project.json in the * `/catalog/stories/${dirname}/` directory. * * This shorcode takes the following arguments: * - dirname: (required) The name of the directory where the project.json is * located * - id: (optional) The id of the project. This is used to identify the project on pages * with multiple playground examples. * - previewHeight: (optional) The height of the preview window. Defaults to `400`. * - editorHeight: (optional) The height of the editor window. Defaults to `500`. * * @example * ```html * * {% playgroundexample dirname="checkbox", id="example2", previewHeight="400", editorHeight="500" %} * ``` * * @param eleventyConfig The 11ty config in which to attach this shortcode. */ function playgroundExample(eleventyConfig) { eleventyConfig.addShortcode('playgroundexample', (config) => { let { id, dirname } = config; if (!dirname) { throw new Error('No dirname provided to playgroundexample shortcode'); } id ||= 'project'; const previewHeight = config.previewHeight ? `height: ${config.previewHeight}px` : 'height: 400px;'; const editorHeight = config.editorHeight ? `height: ${config.editorHeight}px` : 'height: 500px;'; return `
View interactive demo inline.

Open interactive demo in new tab.

`; }); } module.exports = playgroundExample; ================================================ FILE: catalog/eleventy-helpers/transforms/minify-html.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ const htmlMinifier = require('html-minifier'); /** * Minifies HTML in production mode. Does nothing in dev mode for a faster build * and debuggability * * @param eleventyConfig The 11ty config in which to attach this transform. * @param isDev {boolean} Whether or not the build is in development mode. */ function minifyHTML(eleventyConfig, isDev) { eleventyConfig.addTransform('htmlMinify', function (content, outputPath) { // return the normal content in dev moe. if (isDev || !outputPath.endsWith('.html')) { return content; } // minify the html in Prod mode const minified = htmlMinifier.minify(content, { useShortDoctype: true, removeComments: true, collapseWhitespace: true, }); return minified; }); } module.exports = minifyHTML; ================================================ FILE: catalog/eleventy.config.cjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ const litPlugin = require('@lit-labs/eleventy-plugin-lit'); const inlineCss = require('./eleventy-helpers/shortcodes/inline-css.cjs'); const inlineJS = require('./eleventy-helpers/shortcodes/inline-js.cjs'); const playgroundExample = require('./eleventy-helpers/shortcodes/playground-example.cjs'); const minifyHTML = require('./eleventy-helpers/transforms/minify-html.cjs'); const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight'); const pluginTOC = require('eleventy-plugin-nesting-toc'); const permalinks = require('./eleventy-helpers/plugins/permalinks.cjs'); const filterToc = require('./eleventy-helpers/filters/filter-toc.cjs'); const filterSort = require('./eleventy-helpers/filters/filter-sort.cjs'); const mdMarkdown = require('./eleventy-helpers/filters/md-markdown.cjs'); const copyCodeButtonPlugin = require('./eleventy-helpers/plugins/copy-code-button.cjs'); const markdownIt = require('markdown-it'); const { compress } = require('eleventy-plugin-compress'); // dev mode build const DEV = process.env.NODE_ENV === 'DEV'; // where the JS files are outputted const jsDir = DEV ? 'lib' : 'build'; // where to output 11ty output const outputFolder = DEV ? '_dev' : '_prod'; module.exports = function (eleventyConfig) { // copy folders to the 11ty output folder eleventyConfig .addPassthroughCopy({ [`${jsDir}/`]: 'js/' }) .addPassthroughCopy('site/css') .addPassthroughCopy('site/fonts') .addPassthroughCopy('site/images') // Most of the stories files are generated by the wireit script that copies // the stories files in the source to this directory .addPassthroughCopy({ 'stories/': 'assets/stories/' }) // These images are generated by the docs copy step in wireit .addPassthroughCopy('site/components/images') .addPassthroughCopy('site/theming/images') .addPassthroughCopy('site/about/images'); // add the lit-ssr plugin eleventyConfig.addPlugin(litPlugin, { mode: 'worker', componentModules: [`./${jsDir}/ssr.js`], }); // Add this for 11ty's --watch flag eleventyConfig.addWatchTarget(`./${jsDir}/**/*.js`); // install shortcodes inlineCss(eleventyConfig, DEV); inlineJS(eleventyConfig, DEV, { jsDir }); playgroundExample(eleventyConfig); // install filters filterSort(eleventyConfig); filterToc(eleventyConfig); // list of our transforms that we want to apply to markdown links. mdMarkdown(eleventyConfig, [ ['../theming/README.md', '/theming/material-theming/'], ['./list', '/components/list'], [/theming\/README/, '/theming/'], [/^typography\.md/, '/theming/typography/'], [/^color\.md/, '/theming/color/'], [/^color\.md/, '/theming/color/'], [/^components\//, '/components/button/'], ]); // install transforms minifyHTML(eleventyConfig, DEV); // install code syntax highlighting eleventyConfig.addPlugin(syntaxHighlight); const md = markdownIt({ html: true, breaks: false, // 2 newlines for paragraph break instead of 1 linkify: true, }); // permalink markdown plugin permalinks(md); // copy code button plugin copyCodeButtonPlugin(md); eleventyConfig.setLibrary('md', md); // Add a TOC plugin (implementation is wip for now) eleventyConfig.addPlugin(pluginTOC, { tags: ['h2', 'h3', 'h4'], wrapper: 'div', }); eleventyConfig.addPlugin(compress, { enabled: !DEV, }); // set output folders and use nunjucks for html templating engine. see // nunjucks docs and 11ty docs for more info on nunjucks templating return { htmlTemplateEngine: 'njk', markdownTemplateEngine: 'njk', dir: { input: 'site', output: outputFolder, }, }; }; ================================================ FILE: catalog/esbuild.config.mjs ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import gzipPlugin from '@luncheon/esbuild-plugin-gzip'; import esbuild from 'esbuild'; import {copyFileSync} from 'fs'; import {createRequire} from 'node:module'; import {join} from 'path'; import tinyGlob from 'tiny-glob'; // dev mode build const DEV = process.env.NODE_ENV === 'DEV'; // Output folder for TS files const jsFolder = DEV ? 'lib' : 'build'; // can use glob syntax. this will create a bundle for those specific files. // you want to add SSR'd files here so that you can hydrate them later with // const tsEntrypoints = [ // entrypoints for hydrating lit-islands './src/hydration-entrypoints/**/*.ts', // also include a bundle for each individual page './src/pages/*.ts', // SSR stuff './src/ssr-utils/lit-hydrate-support.ts', './src/ssr-utils/lit-island.ts', ]; const filesPromises = tsEntrypoints.map(async (entry) => tinyGlob(entry)); const entryPoints = (await Promise.all(filesPromises)).flat(); // Shared esbuild config values let config = { bundle: true, outdir: jsFolder, minify: false, format: 'esm', treeShaking: true, write: true, sourcemap: true, splitting: true, }; let componentsBuild = Promise.resolve(); // development build if (DEV) { componentsBuild = esbuild .build({ ...config, entryPoints, }) .catch(() => process.exit(1)); // production build } else { // config must be same for SSR and client builds to prevent hydration template // mismatches because we minify the templates in prod config = { bundle: true, outdir: jsFolder, minify: true, format: 'esm', treeShaking: true, legalComments: 'external', plugins: [ // This plugin currently breaks certain css props for SVGs // (circularprogress) minifyHTMLLiteralsPlugin({ // shouldMinify: (template) => { // const tag = template.tag && template.tag.toLowerCase(); // return ( // !!tag && // (tag.includes('html') || tag.includes('svg')) && // // tag name interpolations break // tag !== 'statichtml' // ); // }, // }), gzipPlugin({ gzip: true, }), ], // Needs to be off per the gzipPlugin docs write: false, splitting: true, }; componentsBuild = esbuild .build({ ...config, entryPoints, }) .catch(() => process.exit(1)); } // seperate build so that the SSR bundle doesn't affect bundling for the // frontend const ssrBuild = esbuild .build({ ...config, format: 'iife', splitting: false, conditions: ['node'], entryPoints: ['src/ssr.ts'], }) .catch(() => process.exit(1)); // Glob of files that will be inlined on the page in {% inlinejs "inline/apply-saved-theme.js" %} {% block head %}{% endblock %} {% inlinejs "ssr-utils/dsd-polyfill.js" %} {% block topappbar %}{{ topappbar | safe }}{% endblock %} {% if hasToc %}
{% block toc %}{% endblock %}
{% endif %}
{% block content %}{{ content | mdMarkdown | safe }}{% endblock %}
About
 {% for file in collections.about|filtersort('data.order') %} {{ file.data.name }} {% endfor %}
Theming
 {% for file in collections.theming|filtersort('data.order') %} {{ file.data.name }} {% endfor %}
Components
 {% for file in collections.component|filtersort('data.name') %} {{ file.data.name }} {% endfor %} ================================================ FILE: catalog/site/_includes/layouts/components.html ================================================ {% extends 'default.html' %} {% block head %} {% endblock %} {% block toc%} {{ content | toc | filterToc | safe }} {% endblock %} {% block content %} {% if not ssrOnly %} {{ content | mdMarkdown | safe }} {% else %} {{ content | mdMarkdown | safe }} {% endif %} {% endblock %} ================================================ FILE: catalog/site/_includes/layouts/docs.html ================================================ {% extends 'default.html' %} {% block head %} {% endblock %} {% block toc%} {{ content | toc | filterToc | safe }} {% endblock %} {% block content %} {{ content | mdMarkdown | safe }} {% endblock %} ================================================ FILE: catalog/site/about/about.json ================================================ { "layout": "layouts/docs.html", "tags": ["about"], "hasToc": true } ================================================ FILE: catalog/site/components/components.json ================================================ { "layout": "layouts/components.html", "tags": ["component"], "hasToc": true, "isComponent": true } ================================================ FILE: catalog/site/css/global.css ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /* latin */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/google-sans/regular.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin -mono */ @font-face { font-family: 'Google Sans Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/google-sans/mono.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { font-family: 'Google Sans', Roboto, system-ui; --md-ref-typeface-plain: 'Google Sans', Roboto, system-ui; background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); /* These values are copied from mio */ --catalog-display-xl-font-size: 88px; --catalog-display-m-font-size: 45px; --catalog-title-l-font-size: 22px; --catalog-title-m-font-size: 16px; --catalog-title-s-font-size: 14px; --catalog-body-l-font-size: 16px; --catalog-body-m-font-size: 14px; --catalog-headline-s-font-size: 24px; --catalog-label-s-font-size: 11px; --catalog-shape-xl: 28px; --catalog-shape-l: 16px; --catalog-shape-m: 12px; --catalog-shape-s: 8px; --catalog-shape-xs: 4px; --catalog-spacing-xl: 28px; --catalog-spacing-l: 16px; --catalog-spacing-m: 12px; --catalog-spacing-s: 8px; --catalog-top-app-bar-height: calc(48px + 2 * var(--catalog-spacing-m)); scroll-padding-block-start: calc( var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) * 2 ); } @media screen and (max-width: 600px) { :root { --catalog-display-xl-font-size: 55px; --catalog-title-l-font-size: 16px; --catalog-body-l-font-size: 14px; --catalog-body-m-font-size: 12px; /* Mostly to accommodate content padding on small screens */ --catalog-spacing-xl: 16px; --catalog-spacing-l: 12px; } } strong { -webkit-font-smoothing: antialiased; } body { margin: 0; font-size: var(--catalog-body-l-font-size); } a { color: var(--md-sys-color-primary); text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } nav-drawer md-list.nav md-list-item[href][selected] { background-color: var(--md-sys-color-surface-container-highest); } nav-drawer md-list.nav md-list-item::part(focus-ring) { --md-focus-ring-shape: var(--catalog-shape-xl); } @media (forced-colors: active) { nav-drawer md-list.nav md-list-item[href][selected] { border: 4px double CanvasText; } nav-drawer md-list.nav md-list-item[href] { border-radius: var(--catalog-shape-xl); border: 1px solid CanvasText; } } nav-drawer md-list.nav { --md-list-container-color: transparent; display: block; margin-inline: var(--catalog-spacing-m); min-width: unset; } nav-drawer md-list.nav md-list-item[href] { margin-block: var(--catalog-spacing-m); display: block; --md-focus-ring-shape: var(--catalog-shape-xl); border-radius: var(--catalog-shape-xl); } nav-drawer md-list.nav md-item [slot="headline"] { /* shadow root slot has overflow:hidden, it's cutting some text off */ padding-block: 2px; } nav-drawer md-list.nav md-item:first-of-type { padding-block: 0; } nav-drawer md-list.nav md-item { font-size: var(--catalog-headline-s-font-size); padding-block-end: 0; } nav-drawer md-list.nav md-item + md-list-item[href] { margin-block-start: 0; } h1 { font-size: var(--catalog-display-xl-font-size); } .toc ol { list-style-type: none; font-size: var(--catalog-body-m-font-size); } .toc > ol { padding: 0; } .toc > ol ol { list-style-type: circle; padding-inline-start: var(--catalog-spacing-xl); } .toc ol li { margin-block: var(--catalog-spacing-m); } ================================================ FILE: catalog/site/css/home-page.css ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ h1, .subtitle { text-align: center; margin-block-start: 0; } ================================================ FILE: catalog/site/css/md-layout.css ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ :root { --catalog-image-border-radius: 22px; } summary { display: flex; align-items: center; overflow-y: hidden; } summary::-webkit-details-marker { display: none; } details[open] summary { margin-block-end: 16px; } details summary md-outlined-icon-button { margin-inline-end: 8px; } details:not([open]) #top-app-bar-nav { display: contents; } main > * { max-width: 1760px; } main > p img, main > img { max-width: 100%; } img:not(figure *), figure { border-radius: var(--catalog-image-border-radius); min-height: 56px; object-fit: cover; } catalog-component-header img { height: var(--catalog-header-image-height, 50%); } .figure-wrapper { display: flex; justify-content: center; } figure { border: 1px solid var(--md-sys-color-outline); display: inline-flex; padding-inline: 28px; align-items: center; } div:has(> table) { display: flex; justify-content: center; } p:has(> img) { display: flex; justify-content: center; } main > :not(catalog-component-header) { margin-inline: auto; box-sizing: border-box; overflow-x: auto; display: block; } main > :not(catalog-component-header, details), main > details > summary { max-width: min(100%, 980px); margin-inline: auto; } main > table { max-width: max-content; } table { border-spacing: 0; } td, th { border-block-start: 1px solid var(--md-sys-color-outline-variant); border-inline-start: 1px solid var(--md-sys-color-outline-variant); padding: 8px 16px; } tr:last-of-type td, tr:last-of-type th { border-block-end: 1px solid var(--md-sys-color-outline-variant); } tr td:last-of-type, tr th:last-of-type { border-inline-end: 1px solid var(--md-sys-color-outline-variant); } th { background-color: var(--md-sys-color-surface-container); text-shadow: 0 1px 1px var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); font-size: 1.25em; } :not(pre) > code { display: inline-flex; background-color: var(--md-sys-color-surface-variant); text-shadow: 0 1px 1px var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface); padding: 4px; border-radius: 8px; } tr th:first-of-type { border-start-start-radius: var(--catalog-shape-xl); } tr th:last-of-type { border-start-end-radius: var(--catalog-shape-xl); } tr:last-of-type td:first-of-type { border-end-start-radius: var(--catalog-shape-xl); } tr:last-of-type td:last-of-type { border-end-end-radius: var(--catalog-shape-xl); } /* Hides offscreen accesible text for h1,2,3 hover links. */ a .offscreen { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .heading { align-items: center; position: relative; overflow-x: visible; } .heading.h2 { font-size: var(--catalog-title-l-font-size); } .heading.h3 { font-size: var(--catalog-title-m-font-size); } .heading.h4 { font-size: var(--catalog-title-s-font-size); } .heading a { display: flex; align-items: center; position: absolute; inset: 0; inset-inline-start: calc(-1 * var(--catalog-spacing-xl) + 4px); opacity: 0; font-size: calc(1.5em - 4px); transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1); } .heading:hover a, .heading:focus-within a { text-decoration: none; opacity: 1; } .example *:defined > md-circular-progress { display: none; } .example :is(playground-preview, playground-file-editor):not(:defined) { display: flex; box-sizing: border-box; background-color: var(--md-sys-color-surface-variant); justify-content: center; align-items: center; } blockquote { margin: var(--catalog-spacing-l); } main > blockquote:not(catalog-component-header, details) { padding: var(--catalog-spacing-l); border-radius: var(--catalog-shape-l); background-color: var(--md-sys-color-secondary-container); display: flex; gap: var(--catalog-spacing-s); } main > blockquote:not(catalog-component-header, details) .content { flex-grow: 1; } blockquote .content > *:first-child { margin-block-start: 4px; } blockquote .content > *:last-child { margin-block-end: 0; } blockquote, blockquote a { color: var(--md-sys-color-on-secondary-container); } blockquote a { text-decoration: underline; font-weight: 700; } blockquote.important { background-color: var(--md-sys-color-primary-container); } blockquote.important, blockquote.important a { color: var(--md-sys-color-on-primary-container); } blockquote.warning { background-color: var(--md-sys-color-error-container); } blockquote.warning, blockquote.warning a { color: var(--md-sys-color-on-error-container); } ================================================ FILE: catalog/site/css/no-js.css ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ :root, :host :root, :host { --md-sys-color-background: #fff8f3; --md-sys-color-on-background: #201b12; --md-sys-color-surface: #fff8f3; --md-sys-color-surface-dim: #e4d8cb; --md-sys-color-surface-bright: #fff8f3; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #fef2e4; --md-sys-color-surface-container: #f8ecde; --md-sys-color-surface-container-high: #f3e6d8; --md-sys-color-surface-container-highest: #ede1d3; --md-sys-color-on-surface: #201b12; --md-sys-color-surface-variant: #f2e0c9; --md-sys-color-on-surface-variant: #504534; --md-sys-color-inverse-surface: #362f26; --md-sys-color-inverse-on-surface: #fbefe1; --md-sys-color-outline: #837562; --md-sys-color-outline-variant: #d5c4ae; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #7f5700; --md-sys-color-primary: #7f5700; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #f7b337; --md-sys-color-on-primary-container: #442d00; --md-sys-color-inverse-primary: #ffba3e; --md-sys-color-secondary: #765a2b; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #ffdca9; --md-sys-color-on-secondary-container: #5c4316; --md-sys-color-tertiary: #566500; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #b6ca54; --md-sys-color-on-tertiary-container: #2d3600; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002 } @media (prefers-color-scheme: dark) { :root, :host :root, :host { --md-sys-color-background: #18130b; --md-sys-color-on-background: #ede1d3; --md-sys-color-surface: #18130b; --md-sys-color-surface-dim: #18130b; --md-sys-color-surface-bright: #3f382f; --md-sys-color-surface-container-lowest: #120d06; --md-sys-color-surface-container-low: #201b12; --md-sys-color-surface-container: #251f16; --md-sys-color-surface-container-high: #2f2920; --md-sys-color-surface-container-highest: #3b342a; --md-sys-color-on-surface: #ede1d3; --md-sys-color-surface-variant: #504534; --md-sys-color-on-surface-variant: #d5c4ae; --md-sys-color-inverse-surface: #ede1d3; --md-sys-color-inverse-on-surface: #362f26; --md-sys-color-outline: #9d8f7b; --md-sys-color-outline-variant: #504534; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #ffba3e; --md-sys-color-primary: #ffd28d; --md-sys-color-on-primary: #432c00; --md-sys-color-primary-container: #e5a427; --md-sys-color-on-primary-container: #342100; --md-sys-color-inverse-primary: #7f5700; --md-sys-color-secondary: #e6c188; --md-sys-color-on-secondary: #432c02; --md-sys-color-secondary-container: #543b0f; --md-sys-color-on-secondary-container: #f5cf95; --md-sys-color-tertiary: #cee36a; --md-sys-color-on-tertiary: #2c3400; --md-sys-color-tertiary-container: #a5b945; --md-sys-color-on-tertiary-container: #212800; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6 } } ================================================ FILE: catalog/site/css/stories.css ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ #dragbar { max-width: 100%; max-height: 100%; } #editor { margin-block: 0; height: 100%; box-sizing: border-box; } #editor-wrapper { height: 100%; overflow: hidden; } body { height: 100dvh; } #preview { position: relative; } #preview md-circular-progress { inset: 50%; transform: translate(-50%, -50%); } ================================================ FILE: catalog/site/css/syntax-highlight.css ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /** * @fileoverview This file handles syntax highlighting for markdown-it / * highlight.js formatted codeblocks as well as playground-elements and anything * else related to code styles. */ :root { --__code-block-font-size: var(--catalog-body-m-font-size); --playground-highlight-color: var(--md-sys-color-primary); --playground-code-font-size: var(--__code-block-font-size); --playground-code-background: var(--md-sys-color-surface-variant); --playground-code-default-color: var(--md-sys-color-on-surface-variant); --playground-code-font-family: 'Google Sans Mono', Menlo, Monaco, 'Courier New', monospace; --playground-code-callee-color: var(--md-sys-color-primary); --playground-code-comment-color: var(--md-sys-color-on-surface-dim); --playground-code-operator-color: var(--md-sys-color-on-surface); --playground-code-tag-color: var(--md-sys-color-primary); --playground-code-number-color: var(--md-sys-color-primary); --playground-code-atom-color: var(--md-sys-color-primary); --playground-code-string-color: var(--md-sys-color-secondary); --playground-code-attribute-color: var(--md-sys-color-tertiary); --playground-code-string-2-color: var(--md-sys-color-on-surface-variant); --playground-code-keyword-color: var(--md-sys-color-tertiary); --playground-code-variable-2-color: var(--md-sys-color-secondary); --playground-code-def-color: var(--md-sys-color-on-surface-variant); --playground-code-property-color: var(--md-sys-color-on-surface-variant); --playground-code-variable-color: var(--md-sys-color-on-surface-variant); --playground-code-type-color: var(--md-sys-color-error); --playground-code-linenumber-color: var(--md-sys-color-outline); --playground-code-qualifier-color: var(--md-sys-color-tertiary); --playground-code-cursor-color: var(--md-sys-color-on-surface-variant); --playground-preview-toolbar-background: var( --md-sys-color-surface-container-high ); --playground-preview-toolbar-foreground-color: var(--md-sys-color-on-surface); /* perfect circle of one line is (padding-block * 2 + (line-height: 1.5x font size)) / 2 */ --catalog-code-block-border-radius: calc( (2 * var(--__code-block-font-size) + 1.5 * var(--__code-block-font-size)) / 2 ); } /* Formats the code boxes themselves */ .example playground-file-editor, playground-file-editor, pre[class*='language-'] { padding: var(--__code-block-font-size); /* Remove the extra hard coded 3px from line number padding. */ padding-inline-start: calc(var(--__code-block-font-size) - 3px); border-radius: var(--catalog-code-block-border-radius); } playground-file-editor { margin-block: 1em; background-color: var(--md-sys-color-surface-variant); text-shadow: 0 1px 1px var(--md-sys-color-surface-variant); } code, code[class*='language-'], pre[class*='language-'] { color: var(--md-sys-color-on-surface-variant); text-shadow: 0 1px 1px var(--md-sys-color-surface); font-family: 'Google Sans Mono', Menlo, Monaco, 'Courier New', monospace; direction: ltr; text-align: left; word-spacing: normal; white-space: pre; word-wrap: normal; line-height: 1.5; font-size: var(--__code-block-font-size); background: none; border: 0; tab-size: 2; hyphens: none; } pre[class*='language-'], :not(pre) > code[class*='language-'] { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline); } /* Code blocks */ pre[class*='language-'] { overflow: auto; scrollbar-width: none; } /* Inline code */ :not(pre) > code[class*='language-'] { padding: 5px 10px; line-height: 1; border-radius: 3px; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--md-sys-color-on-surface-dim); } .token.selector, .token.operator, .token.punctuation { color: var(--md-sys-color-on-surface-bright); } .token.namespace { opacity: 0.7; } .token.tag, .token.boolean, .token.number { color: var(--md-sys-color-primary); } .token.atrule, .token.attr-value, .token.hex, .token.string { color: var(--md-sys-color-secondary); } .token.property, .token.entity, .token.url, .token.attr-name, .token.keyword { color: var(--md-sys-color-tertiary); } .token.regex { color: var(--md-sys-color-on-tertiary-container); } .token.entity { cursor: help; } .token.function, .token.constant { color: var(--md-sys-color-error); } .token.important, .token.deliminator { color: var(--md-sys-color-error); } ================================================ FILE: catalog/site/index.html ================================================ {% extends 'default.html' %} {% block head %} {% endblock %} {% block content %}

Material Web

@material/web is a library of web components that helps build beautiful and accessible web applications.

Note: MWC is in maintenance mode pending new maintainers.

{% endblock %} ================================================ FILE: catalog/site/stories/stories.html ================================================ ---js { pagination: { data: "collections.component", size: 1, alias: "component", before: components => { // remove any components that don't have a dirname return components.filter(component => component.data.dirname) } }, permalink: "components/{{component.data.page.fileSlug}}/stories/index.html", fullHeightContent: "true", collections: ["stories"], eleventyComputed: { dirname: ({component}) => component.data.dirname, } } --- Material Web - Stories {{component.data.name}} {% inlinecss "global.css" %} {% inlinejs "inline/apply-saved-theme.js" %} {% inlinejs "ssr-utils/dsd-polyfill.js" %}
================================================ FILE: catalog/site/theming/theming.json ================================================ { "layout": "layouts/docs.html", "tags": ["theming"], "hasToc": true } ================================================ FILE: catalog/src/components/catalog-component-header-title.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {css, html, LitElement} from 'lit'; import {customElement} from 'lit/decorators.js'; /** * A layout element that lays out the slotted h1 in our component READMEs. This * element is never hydrated only SSRd. * * See component-template.md in internal team docs for usage. */ @customElement('catalog-component-header-title') export class CatalogComponentHeaderTitle extends LitElement { render() { return html``; } static styles = css` :host { width: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: var(--catalog-image-border-radius); padding: 56px; /* It has no border so we need it to be a different color from the top app * bar and nav drawer. */ background-color: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); } slot::slotted(h1) { margin-block-end: 8px; font-weight: 475; } slot::slotted(p) { font-size: var(--catalog-title-l-font-size); } slot::slotted(*) { margin-block-start: 0; } slot::slotted(*:last-child) { margin-block-end: 0; } @media screen and (max-width: 600px) { :host { padding: 32px; } } `; } ================================================ FILE: catalog/src/components/catalog-component-header.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {css, html, LitElement} from 'lit'; import {customElement} from 'lit/decorators.js'; /** * A layout element that lays out the * catalog-component-header-title[slot="title"] and the header image in our * component READMEs. This element is never hydrated only SSRd. * * See component-template.md in internal team docs for usage. */ @customElement('catalog-component-header') export class CatalogComponentHeader extends LitElement { render() { return html`
`; } static styles = css` :host { display: block; --catalog-image-border-radius: var(--catalog-shape-xl); container: host / inline-size; position: relative; margin-inline: auto; } slot { height: 100%; } slot, .image::slotted(*) { display: flex; align-items: start; margin: 0; } .end slot, .end .image::slotted(*) { align-items: end; } .center slot, .center .image::slotted(*) { align-items: center; } .image { /* Color needs to differ from top-app-bar and sidebar */ background-color: var(--md-sys-color-surface-variant); border-radius: var(--catalog-image-border-radius); overflow: hidden; margin-block-start: 16px; aspect-ratio: 3 / 2; max-width: 100%; } ::slotted(*) { box-sizing: border-box; height: 100%; width: 100%; } .image::slotted(*) { --catalog-image-border-radius: 0px; --catalog-header-image-height: 100%; --catalog-header-image-width: auto; display: flex; justify-content: center; } /* fit ipad pro at least */ @container (width > 1000px) { div { display: grid; grid-gap: 8px; gap: 8px; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; } .image { margin-block-start: 0; aspect-ratio: unset; } .image, .image::slotted(*) { min-height: 100%; max-height: 544px; } } `; } ================================================ FILE: catalog/src/components/copy-code-button.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/icon/icon.js'; import '@material/web/iconbutton/icon-button.js'; import {MdIconButton} from '@material/web/iconbutton/icon-button.js'; import {css, html, LitElement} from 'lit'; import { customElement, property, query, queryAssignedElements, state, } from 'lit/decorators.js'; /** * A custom element that places a copy button at the top right corner of a * markdown-it codeblock. Injected into the page by the * /catalog/eleventy-helpers/plugins/copy-code-button.cjs markdown-it plugin. */ @customElement('copy-code-button') export class CopyCodeButton extends LitElement { static styles = css` :host { display: block; position: relative; --_border-radius: calc(var(--catalog-code-block-border-radius) / 4); } md-icon-button { color: red; position: absolute; inset: var( --catalog-copy-code-button-inset, var(--_border-radius) var(--_border-radius) auto auto ); --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface); --md-sys-color-primary: var(--md-sys-color-on-surface); } `; private timeoutId: number | undefined; @state() private showCheckmark = false; /** * The aria label for the copy button when it has not been clicked. */ @property() label = 'Copy code'; /** * The aria label for the copy button when it has been clicked and the copy is * successul. */ @property({attribute: 'success-label'}) successLabel = 'Copy successful'; /** * The title to be set on the copy button. */ @property({attribute: 'button-title'}) buttonTitle = 'Copy code'; @query('md-icon-button') private copyButton!: MdIconButton; @queryAssignedElements({flatten: true, selector: '*'}) private slottedEls!: NodeListOf; render() { return html` content_copy check `; } private async onClick() { await navigator.clipboard.writeText(this.getCopyText()); this.onCopySuccess(); } private onInput() { this.showCheckmark = this.copyButton.selected; } /** * Returns the text to be copied. By default, it copies the textContent of the * nodes slotted into the element. Override for custom functionality. */ getCopyText() { let text = ''; for (const el of this.slottedEls) { text += el.textContent; } return text; } private onCopySuccess() { this.showCheckmark = true; if (this.timeoutId) { window.clearTimeout(this.timeoutId); } this.timeoutId = window.setTimeout(() => { this.showCheckmark = false; }, 2000); } } declare global { interface HTMLElementTagNameMap { 'copy-code-button': CopyCodeButton; } } ================================================ FILE: catalog/src/components/drag-playground.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import { LitElement, css, html } from 'lit'; import { customElement, state, query } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { styleMap } from 'lit/directives/style-map.js'; import '@material/web/icon/icon.js'; /** * A playground preview + editor with a draggable handle. */ @customElement('drag-playground') export class DragPlayground extends LitElement { static styles = css` :host { display: block; --_drag-bar-height: 24px; --_drag-bar-border-width: 1px; --_half-drag-bar-height: calc( (var(--_drag-bar-height) / 2) + var(--_drag-bar-border-width) ); } #wrapper { display: flex; flex-direction: column; } :host, #wrapper, ::slotted(*) { height: 100%; } slot { display: block; overflow: hidden; } [name='preview'] { height: max( calc( 100% - var(--editor-percentage, 0%) - var(--_half-drag-bar-height) ), 0px ); } [name='editor'] { height: max( calc(var(--editor-percentage, 0px) - var(--_half-drag-bar-height)), 0px ); } #drag-bar { touch-action: none; background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); border: var(--_drag-bar-border-width) solid var(--md-sys-color-outline); border-radius: 12px; height: var(--_drag-bar-height); display: flex; justify-content: center; align-items: center; -webkit-user-select: none; user-select: none; } #drag-bar:hover { background-color: var(--md-sys-color-surface-container-high); cursor: grab; } #drag-bar.isDragging { background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); cursor: grabbing; } `; /** * Whether or not we are in the "dragging" state. */ @state() private isDragging = false; /** * The percentage of the editor height. */ @state() private editorHeightPercent = 0; @query('#wrapper') private wrapperEl!: HTMLElement; /** * A set of pointer IDs in the case that the user is dragging with multiple * pointers. */ private pointerIds = new Set(); render() { return html`
drag_handle
`; } private onFocus() { this.isDragging = true; } private onBlur() { this.isDragging = false; } private onKeydown(event: KeyboardEvent) { const { key } = event; switch (key) { case 'ArrowRight': case 'ArrowUp': this.editorHeightPercent = Math.min(this.editorHeightPercent + 1, 100); break; case 'ArrowLeft': case 'ArrowDown': this.editorHeightPercent = Math.max(this.editorHeightPercent - 1, 0); break; case 'PageUp': this.editorHeightPercent = Math.min(this.editorHeightPercent + 10, 100); break; case 'PageDown': this.editorHeightPercent = Math.max(this.editorHeightPercent - 10, 0); break; case 'Home': this.editorHeightPercent = 0; break; case 'End': this.editorHeightPercent = 100; break; default: break; } } private onPointerdown(event: PointerEvent) { this.isDragging = true; if (this.pointerIds.has(event.pointerId)) return; this.pointerIds.add(event.pointerId); (event.target as HTMLElement).setPointerCapture(event.pointerId); } private onPointerup(event: PointerEvent) { this.pointerIds.delete(event.pointerId); (event.target as HTMLElement).releasePointerCapture(event.pointerId); if (this.pointerIds.size === 0) { this.isDragging = false; } } private onPointermove(event: PointerEvent) { if (!this.isDragging) return; const { clientY: mouseY } = event; const { top: wrapperTop, bottom: wrapperBottom } = this.wrapperEl.getBoundingClientRect(); // The height of the wrapper const height = wrapperBottom - wrapperTop; // Calculate the percentage of the editor height in which the pointer is // located const editorHeightPercent = 100 - ((mouseY - wrapperTop) / height) * 100; // Clamp the percentage between 0 and 100 this.editorHeightPercent = Math.min(Math.max(editorHeightPercent, 0), 100); } } declare global { interface HTMLElementTagNameMap { 'drag-playground': DragPlayground; } } ================================================ FILE: catalog/src/components/hct-slider.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/slider/slider.js'; import type {MdSlider} from '@material/web/slider/slider.js'; import {css, html, LitElement} from 'lit'; import {customElement, property} from 'lit/decorators.js'; import {styleMap} from 'lit/directives/style-map.js'; import {hctFromHex, hexFromHct} from '../utils/material-color-helpers.js'; /** * A tuple denoting an inclusive value range. */ type Range = [number, number]; const HUE_RANGE: Range = [0, 360]; const CHROMA_RANGE: Range = [0, 150]; const TONE_RANGE: Range = [0, 100]; /** * A slider for either hue, chroma, or tone with a preview gradient. * * @event input Fired when the user changes the value. */ @customElement('hct-slider') export class HCTSlider extends LitElement { /** * The visiable and accessible label for the control. */ @property({type: String}) label = ''; /** * The value of the slider. */ @property({type: Number}) value = 0; /** * The color from which to base the preview gradient (really only useful for * chroma). */ @property({type: String}) color = ''; /** * The type of HCT slider to display */ @property({type: String}) type: 'hue' | 'chroma' | 'tone' = 'hue'; override render() { let range = HUE_RANGE; if (this.type === 'chroma') { range = CHROMA_RANGE; } else if (this.type === 'tone') { range = TONE_RANGE; } return html`
${this.label}
`; } private onInput(e: Event) { const target = e.target as MdSlider; this.value = target.value as number; this.dispatchEvent(new Event('input')); } /** * Generates the linear-gradient background image CSS string for the gradient * preview under the slider. * * @return A linear gradient CSS string. */ private buildGradient() { const numStops = 100; let linearGradientString = 'linear-gradient(to right'; if (this.type === 'hue') { for (let i = 0; i < numStops; i++) { const hue = (HUE_RANGE[1] / numStops) * i; // Set chroma to something fairly saturated + tone in the middle of // black and white so it's not too dark or too bright and vary the hue const hex = hexFromHct(hue, 100, 50); linearGradientString += `, ${hex} ${i}%`; } } else if (this.type === 'chroma') { const hct = hctFromHex(this.color || '#000'); const hue = hct.hue; for (let i = 0; i < numStops; i++) { const chroma = (CHROMA_RANGE[1] / numStops) * i; // Change the color of the bar to the current hue and set the tone to // mid so we it's not too dark or too bright and vary the chroma const hex = hexFromHct(hue, chroma, 50); linearGradientString += `, ${hex} ${i}%`; } } else if (this.type === 'tone') { for (let i = 0; i < numStops; i++) { const tone = (TONE_RANGE[1] / numStops) * i; // Set tone color to black (0 chroma means that hue doesn't matter) and // vary the tone const hex = hexFromHct(0, 0, tone); linearGradientString += `, ${hex} ${i}%`; } } linearGradientString += ')'; return linearGradientString; } static override styles = css` section { display: flex; flex-direction: column; } #gradient { height: 24px; border-radius: 12px; border: 1px solid currentColor; box-sizing: border-box; } #gradient.chroma { will-change: background; } #label, #gradient { margin-inline: calc(var(--md-slider-handle-width, 20px) / 2); } `; } declare global { interface HTMLElementTagNameMap { 'hct-slider': HCTSlider; } } ================================================ FILE: catalog/src/components/nav-drawer.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {animate, fadeIn, fadeOut} from '@lit-labs/motion'; import {EASING} from '@material/web/internal/motion/animation.js'; import {LitElement, PropertyValues, css, html, nothing} from 'lit'; import {customElement, property, state} from 'lit/decorators.js'; import {drawerOpenSignal} from '../signals/drawer-open-state.js'; import {inertContentSignal, inertSidebarSignal} from '../signals/inert.js'; import {SignalElement} from '../signals/signal-element.js'; /** * A layout element that positions the top-app-bar, the main page content, and * the side navigation drawer. * * The drawer will automatically set itself as collapsible at narrower page * widths, and position itself inline with the page at wider page widths. Most * importantly, this sidebar is SSR compatible. */ @customElement('nav-drawer') export class NavDrawer extends SignalElement(LitElement) { /** * Whether or not the side drawer is collapsible or inline. */ @state() private isCollapsible = false; /** * Whether or not the TOC should be rendered. */ @property({type: Boolean, attribute: 'has-toc'}) hasToc = false; @property({attribute: 'page-title'}) pageTitle = ''; private lastDrawerOpen = drawerOpenSignal.value; render() { const showModal = this.isCollapsible && drawerOpenSignal.value; // Values taken from internal material motion spec const drawerSlideAnimationDuration = showModal ? 500 : 150; const drawerContentOpacityDuration = showModal ? 300 : 150; const scrimOpacityDuration = 150; const drawerSlideAnimationEasing = showModal ? EASING.EMPHASIZED : EASING.EMPHASIZED_ACCELERATE; return html`
${showModal ? html`
` : nothing}
${this.renderTocPane(showModal)}${this.renderContent(showModal)}
`; } private renderContent(showModal: boolean) { return html`
`; } private renderTocPane(showModal: boolean) { if (!this.hasToc) { return nothing; } return html`

On this page:

${this.pageTitle}

`; } /** * Closes the drawer on scrim click. */ private onScrimClick() { drawerOpenSignal.value = false; } firstUpdated() { const queryResult = window.matchMedia('(max-width: 1500px)'); this.isCollapsible = queryResult.matches; // Listen for page resizes to mark the drawer as collapsible. queryResult.addEventListener('change', (e) => { this.isCollapsible = e.matches; }); } updated(changed: PropertyValues) { super.updated(changed); if ( this.lastDrawerOpen !== drawerOpenSignal.value && drawerOpenSignal.value && this.isCollapsible ) { ( this.querySelector( 'md-list.nav md-list-item[tabindex="0"]', ) as HTMLElement )?.focus(); } } static styles = css` :host { --_drawer-width: var(--catalog-drawer-width, 300px); /* When in wide mode inline start margin is handled by the sidebar */ --_pane-margin-inline-start: 0px; --_pane-margin-inline-end: var(--catalog-spacing-l); --_pane-margin-block-end: var(--catalog-spacing-l); --_toc-pane-width: 250px; min-height: 100dvh; display: flex; flex-direction: column; } ::slotted(nav) { list-style: none; } .body { display: flex; flex-grow: 1; } .spacer { position: relative; transition: min-width 0.5s cubic-bezier(0.3, 0, 0, 1); } .spacer, aside { min-width: var(--_drawer-width); max-width: var(--_drawer-width); } .pane { box-sizing: border-box; overflow: auto; width: 100%; /* Explicit height to make overflow work */ height: calc( 100dvh - var(--catalog-top-app-bar-height) - var(--_pane-margin-block-end) ); background-color: var(--md-sys-color-surface); border-radius: var(--catalog-shape-xl); } .pane, .panes { /* emphasized – duration matching render fn for sidebar */ transition: 0.5s cubic-bezier(0.3, 0, 0, 1); transition-property: margin, height, border-radius, max-width, width; } .panes { display: flex; justify-content: start; flex-direction: row-reverse; gap: var(--_pane-margin-inline-end); margin-inline: var(--_pane-margin-inline-start) var(--_pane-margin-inline-end); width: 100%; max-width: calc( 100% - var(--_drawer-width) - var(--_pane-margin-inline-start) - var(--_pane-margin-inline-end) ); } .pane.content-pane { flex-grow: 1; } .pane.toc { width: auto; box-sizing: border-box; width: var(--_toc-pane-width); } .toc .scroll-wrapper { padding-inline: var(--catalog-spacing-xl); } .pane.toc p { margin-block: 0; font-size: var(--catalog-label-s-font-size); } .pane.toc h2 { margin-block: var(--catalog-spacing-s) var(--catalog-spacing-m); font-size: var(--catalog-headline-s-font-size); } .content { flex-grow: 1; display: flex; justify-content: center; box-sizing: border-box; padding-inline: var(--catalog-spacing-xl); width: 100%; } .content slot { display: block; width: 100%; max-width: min(100%, var(--_max-width)); } aside { transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1); position: fixed; isolation: isolate; inset: var(--catalog-top-app-bar-height) 0 0 0; z-index: 12; background-color: var(--md-sys-color-surface-container); overflow: hidden; } .scroll-wrapper { overflow-y: auto; max-height: 100%; border-radius: inherit; box-sizing: border-box; } .pane .scroll-wrapper { padding-block: var(--catalog-spacing-xl); } aside slot { display: block; } .scrim { background-color: rgba(0, 0, 0, 0.32); } @media (max-width: 900px) { .pane.toc { display: none; } } @media (max-width: 1500px) { .spacer { min-width: 0px; } .panes { max-width: calc( 100% - var(--_pane-margin-inline-start) - var(--_pane-margin-inline-end) ); } .content { max-width: 100vw; padding-inline: var(--catalog-spacing-xl); } .scrim { position: fixed; inset: 0; } aside { transition: unset; transform: translateX(-100%); border-radius: 0 var(--catalog-shape-xl) var(--catalog-shape-xl) 0; } :host { --_pane-margin-inline-start: var(--catalog-spacing-xl); } .open aside { transform: translateX(0); } aside slot { opacity: 0; } .open aside slot { opacity: 1; } .open .scrim { inset: 0; z-index: 11; } } @media (max-width: 600px) { .pane { border-end-start-radius: 0; border-end-end-radius: 0; } :host { --_pane-margin-block-end: 0px; --_pane-margin-inline-start: 0px; --_pane-margin-inline-end: 0px; } } /* On desktop, make the scrollbars less blocky so you can see the border * radius of the pane. On most mobile platforms, these scrollbars are hidden * by default. It'll still unfortunately render on top of the border radius. */ @media (pointer: fine) { :host { --_scrollbar-width: 8px; } .scroll-wrapper { /* firefox */ scrollbar-color: var(--md-sys-color-primary) transparent; scrollbar-width: thin; } .content { /* adjust for the scrollbar width */ padding-inline-end: calc( var(--catalog-spacing-xl) - var(--_scrollbar-width) ); } /* Chromium + Safari */ .scroll-wrapper::-webkit-scrollbar { background-color: transparent; width: var(--_scrollbar-width); } .scroll-wrapper::-webkit-scrollbar-thumb { background-color: var(--md-sys-color-primary); border-radius: calc(var(--_scrollbar-width) / 2); } } @media (forced-colors: active) { .pane { border: 1px solid CanvasText; } @media (max-width: 1500px) { aside { box-sizing: border-box; border: 1px solid CanvasText; } .scrim { background-color: rgba(0, 0, 0, 0.75); } } @media (pointer: fine) { .scroll-wrapper { /* firefox */ scrollbar-color: CanvasText transparent; } .scroll-wrapper::-webkit-scrollbar-thumb { /* Chromium + Safari */ background-color: CanvasText; } } } `; } ================================================ FILE: catalog/src/components/theme-changer.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/focus/md-focus-ring.js'; import '@material/web/icon/icon.js'; import '@material/web/labs/segmentedbutton/outlined-segmented-button.js'; import '@material/web/labs/segmentedbuttonset/outlined-segmented-button-set.js'; import './copy-code-button.js'; import './hct-slider.js'; import type {MdOutlinedSegmentedButton} from '@material/web/labs/segmentedbutton/outlined-segmented-button.js'; import {css, html, LitElement} from 'lit'; import {customElement, query, queryAll, state} from 'lit/decorators.js'; import {live} from 'lit/directives/live.js'; import {ChangeColorEvent, ChangeDarkModeEvent} from '../types/color-events.js'; import {hctFromHex, hexFromHct} from '../utils/material-color-helpers.js'; import type {ColorMode} from '../utils/theme.js'; import { getCurrentMode, getCurrentSeedColor, getCurrentThemeString, } from '../utils/theme.js'; import type {HCTSlider} from './hct-slider.js'; /** * A small set of controls that allows the user to change the theme and preview * color values. */ @customElement('theme-changer') export class ThemeChanger extends LitElement { static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, }; /** * The currently selected color mode. */ @state() selectedColorMode: ColorMode | null = null; /** * The currently selected hex color. * * NOTE: Hex colors are in the srgb color space and HCT has a much larger, so * this value is a clipped value of HCT. */ @state() hexColor = ''; /** * The current hue value of the hue slider. */ @state() hue = 0; /** * The crrent value of the chroma slider. */ @state() chroma = 0; /** * The current value of the tone slider. */ @state() tone = 0; @query('input') private inputEl!: HTMLInputElement; @queryAll('hct-slider') private sliders!: NodeListOf; render() { return html`

Theme Controls

${this.renderHexPicker()} ${this.renderHctPicker()} ${this.renderColorModePicker()} `; } /** * Renders a circular native color picker with a focus ring. */ protected renderHexPicker() { return html`
`; } /** * Renders the three hct color pickers. */ private renderHctPicker() { return html`
`; } /** * Renders the color mode segmented button set picker. */ private renderColorModePicker() { return html` ${this.renderModeButton('dark', 'dark_mode')} ${this.renderModeButton('auto', 'brightness_medium')} ${this.renderModeButton('light', 'light_mode')} `; } /** * Renders a color mode segmented button. * * @param mode Sets the value and the title of the button to the given color * mode. * @param icon The icon to display in the button. */ private renderModeButton(mode: ColorMode, icon: string) { return html` ${icon} `; } private onSliderInput() { for (const slider of this.sliders) { this[slider.type] = slider.value; } this.hexColor = hexFromHct(this.hue, this.chroma, this.tone); this.dispatchEvent(new ChangeColorEvent(this.hexColor)); } /** * Updates the HCT sliders by converting a hex color to HCT. * * @param hexColor The hex color to convert to HCT and update the sliders. */ private updateHctFromHex(hexColor: string) { const hct = hctFromHex(hexColor); this.hue = hct.hue; this.chroma = hct.chroma; this.tone = hct.tone; } private onHexPickerInput() { this.hexColor = this.inputEl.value; this.updateHctFromHex(this.hexColor); this.dispatchEvent(new ChangeColorEvent(this.hexColor)); } async firstUpdated() { if (!this.selectedColorMode) { // localStorage is not available on server so must do this here. this.selectedColorMode = getCurrentMode(); } if (!this.hexColor) { // localStorage is not available on server so must do this here. this.hexColor = getCurrentSeedColor()!; } this.updateHctFromHex(this.hexColor); } private onColorModeSelection( e: CustomEvent<{ button: MdOutlinedSegmentedButton; selected: boolean; index: number; }>, ) { const {button} = e.detail; const value = button.dataset.value as ColorMode; this.selectedColorMode = value; this.dispatchEvent(new ChangeDarkModeEvent(value)); } static styles = css` :host { /* These are the default values, but we don't want the alignment to break * in case the token values are updated. */ --_copy-button-button-size: 40px; --_copy-button-icon-size: 24px; position: relative; display: flex; flex-direction: column; margin: var(--catalog-spacing-m) var(--catalog-spacing-l); } :host > * { margin-block-end: var(--catalog-spacing-l); } :host > *:last-child { margin-block-end: 0; } #head-wrapper { display: flex; align-items: space-between; } input { border: none; background: none; } .sliders, #hex { padding-inline: var(--catalog-spacing-m); border-radius: var(--catalog-shape-l); background-color: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); /* Default track color is inaccessible in a surface-variant */ --md-slider-inactive-track-color: var(--md-sys-color-on-surface-variant); } hct-slider { display: block; margin-block: 24px; } h2 { margin: 0; text-align: center; position: relative; height: var(--_copy-button-icon-size); } copy-code-button { --md-icon-button-icon-size: var(--_copy-button-icon-size); --md-icon-button-state-layer-width: var(--_copy-button-button-size); --md-icon-button-state-layer-height: var(--_copy-button-button-size); /* * Center the copy icon with the h2 text * -(icon button size - intrinsic icon size) / 2 */ --_inline-block-inset: calc( -1 * (var(--_copy-button-button-size) - var(--_copy-button-icon-size)) / 2 ); --catalog-copy-code-button-inset: var(--_inline-block-inset) 0 auto auto; position: static; } #hex { display: flex; padding: 12px; align-items: center; } #hex .label { flex-grow: 1; } #hex .input-wrapper { box-sizing: border-box; width: 48px; height: 48px; box-sizing: border-box; border: 1px solid var(--md-sys-color-on-secondary-container); position: relative; } #hex .input-wrapper, #hex md-focus-ring { border-radius: 50%; } .overflow { width: 100%; height: 100%; overflow: hidden; border-radius: inherit; display: flex; align-items: center; justify-content: center; } #hex input { min-width: 200%; min-height: 200%; } @media (forced-colors: active) { #hex, .sliders { box-sizing: border-box; border: 1px solid CanvasText; } } `; } declare global { interface HTMLElementTagNameMap { 'theme-changer': ThemeChanger; } } ================================================ FILE: catalog/src/components/top-app-bar.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/focus/md-focus-ring.js'; import '@material/web/icon/icon.js'; import '@material/web/iconbutton/icon-button.js'; import type {MdIconButton} from '@material/web/iconbutton/icon-button.js'; import {css, html, LitElement} from 'lit'; import {customElement, query, state} from 'lit/decorators.js'; import {live} from 'lit/directives/live.js'; import {drawerOpenSignal} from '../signals/drawer-open-state.js'; import {inertContentSignal, inertSidebarSignal} from '../signals/inert.js'; import {SignalElement} from '../signals/signal-element.js'; import {materialDesign} from '../svg/material-design-logo.js'; /** * Top app bar of the catalog. */ @customElement('top-app-bar') export class TopAppBar extends SignalElement(LitElement) { /** * Whether or not the color picker menu is open. */ @state() private menuOpen = false; @query('theme-changer') private themeChanger!: HTMLElement; render() { return html`
menu menu_open ${materialDesign}
Material Web Skip to main content
palette
`; } /** * Opens the theme changer menu and inerts the rest of the page. */ private onPaletteClick() { this.menuOpen = true; inertContentSignal.value = true; inertSidebarSignal.value = true; drawerOpenSignal.value = false; } /** * Syncs current menu state with actual menu state and makes the rest of the * page interactive again. */ private onMenuClosed() { this.menuOpen = false; inertContentSignal.value = false; inertSidebarSignal.value = false; } private onMenuOpened() { this.themeChanger.focus(); } private onKeydown(e: KeyboardEvent) { if (!e.defaultPrevented && e.key === 'Escape') { e.preventDefault(); this.menuOpen = false; } } /** * Toggles the sidebar's open state. */ private onMenuIconToggle(e: InputEvent) { drawerOpenSignal.value = !(e.target as MdIconButton).selected; } static styles = css` :host, header { display: block; height: var(--catalog-top-app-bar-height); } header { position: fixed; inset: 0 0 auto 0; display: flex; align-items: center; box-sizing: border-box; padding: var(--catalog-spacing-m) var(--catalog-spacing-l); background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); z-index: 12; } .default-content { width: 100%; display: flex; align-items: center; } md-icon-button:not(:defined) { width: 40px; height: 40px; display: flex; visibility: hidden; } md-icon-button * { display: block; } a { color: var(--md-sys-color-primary); font-size: max(var(--catalog-title-l-font-size), 22px); text-decoration: none; padding-inline: 12px; position: relative; outline: none; vertical-align: middle; } .start .menu-button { display: none; } .start .home-button * { color: var(--md-sys-color-primary); } .end { flex-grow: 1; display: flex; justify-content: flex-end; } #menu-island { position: relative; } #skip-to-main { padding: var(--catalog-spacing-s); border-radius: var(--catalog-shape-m); background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); opacity: 0; position: absolute; pointer-events: none; } #skip-to-main:focus-visible { opacity: 1; pointer-events: auto; } @media (max-width: 1500px) { .start .home-button { display: none; } .start .menu-button { display: flex; } } `; } declare global { interface HTMLElementTagNameMap { 'top-app-bar': TopAppBar; } } ================================================ FILE: catalog/src/hydration-entrypoints/components/button.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/button/elevated-button.js'; import '@material/web/button/filled-button.js'; import '@material/web/button/filled-tonal-button.js'; import '@material/web/button/outlined-button.js'; import '@material/web/button/text-button.js'; ================================================ FILE: catalog/src/hydration-entrypoints/components/checkbox.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/checkbox/checkbox.js'; ================================================ FILE: catalog/src/hydration-entrypoints/components/fab.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/fab/branded-fab.js'; import '@material/web/fab/fab.js'; ================================================ FILE: catalog/src/hydration-entrypoints/components/icon-button.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/iconbutton/filled-icon-button.js'; import '@material/web/iconbutton/filled-tonal-icon-button.js'; import '@material/web/iconbutton/icon-button.js'; import '@material/web/iconbutton/outlined-icon-button.js'; ================================================ FILE: catalog/src/hydration-entrypoints/components/list.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/list/list.js'; import '@material/web/list/list-item.js'; ================================================ FILE: catalog/src/hydration-entrypoints/components/menu.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/button/filled-button.js'; import '@material/web/menu/menu.js'; import '@material/web/menu/menu-item.js'; import '@material/web/menu/sub-menu.js'; ================================================ FILE: catalog/src/hydration-entrypoints/components/select.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/select/filled-select.js'; import '@material/web/select/outlined-select.js'; import '@material/web/select/select-option.js'; ================================================ FILE: catalog/src/hydration-entrypoints/components/text-field.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/icon/icon.js'; import '@material/web/iconbutton/icon-button.js'; import '@material/web/textfield/filled-text-field.js'; import '@material/web/textfield/outlined-text-field.js'; ================================================ FILE: catalog/src/hydration-entrypoints/copy-code-button.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../components/copy-code-button.js'; ================================================ FILE: catalog/src/hydration-entrypoints/menu.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/menu/menu.js'; import '../components/theme-changer.js'; ================================================ FILE: catalog/src/hydration-entrypoints/navigation.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/list/list.js'; import '@material/web/list/list-item.js'; import '../components/nav-drawer.js'; import '../components/top-app-bar.js'; ================================================ FILE: catalog/src/hydration-entrypoints/playground-elements.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import 'playground-elements/playground-file-editor.js'; import 'playground-elements/playground-preview.js'; import 'playground-elements/playground-project.js'; ================================================ FILE: catalog/src/inline/apply-saved-theme.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {applyThemeString} from '../utils/apply-theme-string.js'; // Checks if there has been a theme already generated from a prior visit const lastThemeString = localStorage.getItem('material-theme'); // Applies the theme string to the document if available. if (lastThemeString) { applyThemeString(document, lastThemeString); } ================================================ FILE: catalog/src/pages/components.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/iconbutton/outlined-icon-button.js'; import {MdOutlinedIconButton} from '@material/web/iconbutton/outlined-icon-button.js'; import type {PlaygroundPreview} from 'playground-elements/playground-preview.js'; import {PostDoc} from 'postdoc-lib'; import {getCurrentThemeString} from '../utils/theme.js'; /** * Gets the iframe of a playground preview, and updates the iframe communication * library to communicate with the new window on each iframe reload. * * @param postdoc The instance of the iframe communication library. * @param previewEl An element reference to the playground preview element. */ async function updateMessageTargetOnIframeLoad( postdoc: PostDoc, previewEl: PlaygroundPreview, ) { await previewEl.updateComplete; const iframe = previewEl.iframe!; iframe.addEventListener('load', (e: Event) => { postdoc.messageTarget = iframe.contentWindow; }); } /** * Synchronizes the playground's theme with the material theme applied to the * current page every time the playground reloads. */ async function syncPlaygroundThemeWithPage() { async function onPlaygroundMessage(e: MessageEvent) { // if the playground is requesting a new theme, send it the current one // from localStorage if (e.data === 'request-theme') { await postdoc.handshake; postdoc.postMessage(getCurrentThemeString()); } } // Initialize the iframe communication library const postdoc = new PostDoc({ messageReceiver: window, onMessage: onPlaygroundMessage, }); const previewEl = document.querySelector('playground-preview'); if (!previewEl) { return; } await customElements.whenDefined('playground-preview'); await updateMessageTargetOnIframeLoad(postdoc, previewEl); await postdoc.handshake; // Whenever the theme changes, send it to the playground iframe. window.addEventListener('theme-changed', async () => { await postdoc.handshake; postdoc.postMessage(localStorage.getItem('material-theme')); }); } /** * Synchronizes the state of the native
for the demo dropdown with the * slotted . Also deals with some quicks of buttons in * elements */ function demoDropdown() { const detailsEl = document.querySelector('details'); // tslint:disable:no-unnecessary-type-assertion TSC externally seems to differ // from internal here and needs these type assertions const expandButton = detailsEl?.querySelector( 'summary md-outlined-icon-button', ) as MdOutlinedIconButton; // tslint:enable:no-unnecessary-type-assertion // Synchronize details open state with toggle button detailsEl?.addEventListener('toggle', () => { expandButton!.selected = detailsEl.open; }); // Toggles the details element because buttons "eat up" the click // except on Safari. So we have to setTimeout to check if the details element // has updated. expandButton?.addEventListener('click', () => { setTimeout(() => { if (detailsEl?.open !== expandButton.selected) { detailsEl!.toggleAttribute('open'); } }); }); } syncPlaygroundThemeWithPage(); demoDropdown(); ================================================ FILE: catalog/src/pages/global.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /** * @fileoverview This file runs logic across every page in the SSG'd catalog and * is loaded top-level as a ================================================ FILE: catalog/stories/index.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /* Equivalent of Lit stories entrypoint */ export * from './knobs.js'; export * from './story.js'; // This file is resolved by base.json import './components/stories-renderer.js'; ================================================ FILE: catalog/stories/knobs.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /* Slimmed down version of Lit stories knobs but using md-* components */ import {html, TemplateResult} from 'lit'; export * from './components/knob-ui-components.js'; interface KnobInit { defaultValue?: T; ui: KnobUi; wiring?: KnobWiring; } /** * A parameter that may be customized at runtime for a story. * * Has two parts: a UI which may be displayed to the user for them to set the * knob's value, and an optional bit of wiring that, if given, may automatically * apply the value to the rendered story. * * The story will also be notified when a knob's value changes. * * @template {Name} We capture the name of the knob here as a string literal * type so that we can provide type safe access to the current value of a * knob from within a story's render function. */ export class Knob extends EventTarget { readonly defaultValue?: T; latestValue?: T; /** * True iff the knob has had a value set, so that we know to apply any * wiring to any new stories we're informed of. */ private dirty = false; private readonly uiFn: KnobUi; private readonly wiring?: KnobWiring; private readonly onChange = (updatedVal: T, resetting = false) => { this.latestValue = updatedVal; this.dirty = !resetting; this.dispatchEvent(new CustomEvent('changed', {detail: updatedVal})); if (this.wiring !== undefined) { for (const container of this.renderedStoryContainers) { this.wiring(this, updatedVal, container); } } }; private readonly onReset = () => { this.reset(); }; private readonly renderedStoryContainers = new Set< HTMLElement | DocumentFragment >(); constructor(readonly name: Name, init: KnobInit) { super(); this.defaultValue = init.defaultValue; this.latestValue = this.defaultValue; this.wiring = init.wiring; this.uiFn = init.ui; } get isUnset() { return !this.dirty; } get uiTemplate(): TemplateResult { return this.uiFn.render(this, this.onChange, this.onReset); } getKnobUiTemplate(): TemplateResult { return this.uiTemplate; } /** * Connect the knob's wiring, if any, up to a container of a rendered story. * This is fast and idempotent, so it's fine to call frequently. */ connectWiring(containerOfRenderedStory: HTMLElement | DocumentFragment) { // Fast path the common case where we have no wiring. if (!this.wiring) { return; } const alreadyWired = this.renderedStoryContainers.has( containerOfRenderedStory, ); if (!alreadyWired) { this.renderedStoryContainers.add(containerOfRenderedStory); // Ensure default values are wired correctly. if ( this.dirty || (this.latestValue !== undefined && this.latestValue === this.defaultValue) ) { this.wiring?.(this, this.latestValue!, containerOfRenderedStory); } } } disconnectWiring(containerOfRenderedStory: HTMLElement | DocumentFragment) { return this.renderedStoryContainers.delete(containerOfRenderedStory); } imperativelySet(newValue: T) { this.dirty = true; if (this.latestValue !== newValue) { this.onChange(newValue); } } reset() { if (this.dirty === true) { this.onChange(this.defaultValue!, true); } } } /** NOTE: This must only be used in an extends clause for a type variable. */ export type PolymorphicArrayOfKnobs = ReadonlyArray>; /** * Given an array of Knobs, return their names. * * So given * Knobs = `[Knob, Knob]` * * This type operator would return 'label' | 'count' */ type KnobKeys = Knobs[number]['name']; /** * Given an array of Knobs, and the name of one of those knobs, * returns the value of the knob. * * So given: * Knobs = `[Knob, Knob]` and * SearchName = `'count'` * * This type operator would return `number`. */ type TypeOfKnobWithName< Knobs extends PolymorphicArrayOfKnobs, SearchName extends string, > = Extract extends Knob ? U | undefined : never; /** A helper class for getting the latest value for a knob by name. */ export class KnobValues< Knobs extends PolymorphicArrayOfKnobs, > extends EventTarget { private readonly byName: ReadonlyMap>; constructor(knobsArray: PolymorphicArrayOfKnobs) { super(); const byName = new Map>(); for (const knob of knobsArray) { if (byName.has(knob.name)) { throw new Error( `More than one knob with name '${knob.name}' given to a story.`, ); } byName.set(knob.name, knob); knob.addEventListener('changed', (e) => { this.dispatchEvent( new CustomEvent('changed', {detail: {knobName: knob.name}}), ); }); } this.byName = byName; } get>( knobName: SearchName, ): TypeOfKnobWithName { return this.byName.get(knobName)?.latestValue as TypeOfKnobWithName< Knobs, SearchName >; } set>( knobName: SearchName, newValue: TypeOfKnobWithName, ) { const knob = this.byName.get(knobName); if (knob === undefined) { throw new Error(`No knob with name ${knobName}`); } knob.imperativelySet(newValue); } /** * Returns an iterator of all the knob names. */ names>() { return this.byName.keys() as IterableIterator; } /** * Reset all knob values back to their initial values. */ reset() { for (const knob of this.byName.values()) { knob.reset(); } } /** True if empty, false if it contains knobs. */ get empty(): boolean { return this.byName.size === 0; } /** * Connect the knobs' wiring up to this container where a story will be * rendered. * * Unlikely that any code outside of the stories system internals would * call this. */ connectWiring(container: HTMLElement | DocumentFragment) { for (const knob of this.byName.values()) { if (container instanceof DocumentFragment) { container = container.firstElementChild as HTMLElement; } knob.connectWiring(container); } } /** * The inverse of connectWiring, so that discarded story renderers can be * garbage collected. * * Returns false if the container wasn't actually connected. */ disconnectWiring(container: HTMLElement | DocumentFragment) { let disconnected = false; for (const knob of this.byName.values()) { disconnected = knob.disconnectWiring(container) || disconnected; } return disconnected; } /** * Renders the UIs of the knobs. */ renderUI(): TemplateResult { const uiTemplates = []; for (const knob of this.byName.values()) { uiTemplates.push(knob.getKnobUiTemplate()); } return html`${uiTemplates}`; } } /** * Displays a user interface for someone browsing a catalog or demo for an * element to set the knob to different values. */ export interface KnobUi { /** * @param knob Info about the knob that this UI is being rendered for. * @param container The element to render the UI into. * @param onChange Call this function every time a new value for the knob * has been selected by the user. * @param onReset Call this function when the user has indicated that they * want to unset a knob completely. This is similar to calling onChange * with knob.defaultValue, but it will clear the knob from the URL * and wiring may treat this case differently (e.g. restoring a value * to the value it had before the wiring set it the first time). */ render( knob: Knob, onChange: (val: T) => void, onReset: () => void, ): TemplateResult; } /** * Takes updated values for a knob and interacts with a rendered story in order * to automatically apply the knob's value. * * Not all knobs can be automatically wired up in this way, so the knobs are * also made available to the stories themselves. * * For example, a knob that updates a css custom property can be automatically * wired up by just applying styles to the containerOfRenderedStory. */ export interface KnobWiring { ( knob: Knob, val: T, containerOfRenderedStory: HTMLElement | DocumentFragment, ): void; } ================================================ FILE: catalog/stories/material-collection.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /* Slimmed down version of material-collection */ import {css, CSSResult, html, TemplateResult} from 'lit'; import {Knob, KnobUi, KnobValues} from './knobs.js'; import {LitCollection, LitStoryInit} from './story.js'; export {LitCollection as MaterialCollection} from './story.js'; /** * Material styling for labels. */ export const labelStyles = css` label { display: inline-flex; place-items: center; gap: 8px; font-family: Roboto, system-ui; color: var(--md-sys-color-on-background, #000); } `; /** * A subtitle knob for labelling sections in the knob UI. */ export function title(): KnobUi { return { render(knob) { return html`

${knob.name}

`; }, }; } /** * Converts an interface of `{[knobName: string]: unknown}` to something * ingestable by MaterialCollection. * * @example * ```ts * // demo.ts * import {StoryKnobs} from './stories.js'; * import {MaterialCollection, KnobTypesToKnobs} from * '@material/web/internal/demo/stories/material-collection'; * * const stories = new MaterialCollection>(...); * ``` */ export type KnobTypesToKnobs< // tslint:disable-next-line:no-any No way to represent this type clearly. T extends {[name: string]: any}, Names extends Extract = Extract, // tslint:disable-next-line:no-any We need to "map" the union type to knobs. > = ReadonlyArray : never>; /** * An init object for Material Stories. This should be exposed to the user. * * @example * ```ts * import {MaterialStoryInit} from * '@material/web/internal/demo/stories/material-collection'; * // stories.ts * export interface StoryKnobs { * checked: boolean; * disabled: boolean; * } * * export const stories: Array> = [ * { * name: Checkbox, * styles: css`...`, * render: ({checked, disabled}) => { * return html`...`; * } * } * ] * ``` */ // tslint:disable-next-line:no-any No way to represent this type clearly. export interface MaterialStoryInit { name: string; render: (knobs: T) => TemplateResult | Promise; styles?: CSSResult | CSSResult[]; } /** * Converts an array of `MaterialStoryInit`s to a `LitStoryInit`. */ // tslint:disable-next-line:no-any No way to represent this type clearly. export function materialInitsToStoryInits( inits: Array>, ): Array>>> { return inits.map((init) => { return { name: init.name, litStyles: init.styles, renderLit(knobMap) { const knobNames = knobMap.names(); const knobs: T = {} as unknown as T; for (const name of knobNames) { knobs[name] = knobMap.get(name)! as (typeof knobs)[typeof name]; } return init.render(knobs); }, }; }); } /** * Initializes the theme element for the theming knobs and renders the stories. */ export function setUpDemo(collection: LitCollection): void { const renderer = document.createElement('stories-renderer'); renderer.collection = collection; document.body.appendChild(renderer); } ================================================ FILE: catalog/stories/story.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /* Slimmed down version of Lit stories story file */ import {CSSResult, html, nothing, render, TemplateResult} from 'lit'; import {Knob, KnobValues, PolymorphicArrayOfKnobs} from './knobs.js'; export {Knob, PolymorphicArrayOfKnobs} from './knobs.js'; /** Metadata all stories share. */ export interface BaseStoryInit { /** A short name, unique to the containing collection. */ readonly name: string; readonly id?: string; readonly description?: string; } // Type variable to help clang-format. type GenericKnobValues = KnobValues; /** A story with an arbitrary render function. */ export interface StoryInit extends BaseStoryInit { render(container: HTMLElement | DocumentFragment, knobs: KV): Promise; styles?: CSSStyleSheet[]; } class StoryImpl< Knobs extends PolymorphicArrayOfKnobs = PolymorphicArrayOfKnobs, > { readonly name: string; readonly id: string; readonly description: string | undefined; readonly render: (container: HTMLElement | DocumentFragment) => Promise; readonly dispose: (container: HTMLElement | DocumentFragment) => void; readonly knobs: KnobValues; private readonly initStyles: CSSStyleSheet[] | undefined; get styles() { let styles = [...this.collection.customStyles]; if (this.initStyles) { styles = styles.concat(this.initStyles); } return styles; } constructor(init: StoryInit, private readonly collection: Collection) { this.name = init.name; this.description = init.description; this.id = init.id || this.name.replace(/ /g, '_').replace(/,/g, ''); if (this.id.includes('/')) { const message = `A story id can't contain a '/' character. ` + `The name can, but if so you have to give an ` + `explicit id that doesn't.`; throw new Error(message); } const wrapperDivMap = new WeakMap< HTMLElement | DocumentFragment, HTMLDivElement >(); this.initStyles = init.styles; this.knobs = collection.knobs; this.render = async (container: HTMLElement | DocumentFragment) => { let wrapperDiv = wrapperDivMap.get(container); if (wrapperDiv === undefined) { wrapperDiv = document.createElement('div'); wrapperDiv.id = 'storyWrapper'; wrapperDivMap.set(container, wrapperDiv); } render(html` ${wrapperDiv} `, container); await init.render(wrapperDiv, this.knobs); }; this.dispose = (container: HTMLElement | DocumentFragment) => { wrapperDivMap.delete(container); render(nothing, container); }; } } /** * A function that can render some HTML, combined with that metadata. * * A Story typically depicts a configuration of a UI component or group of * components. A Story is always a member of a collection. * * The type is exposed here, but the implementation isn't, because a Story * must be constructed via a Collection. */ export type Story< Knobs extends PolymorphicArrayOfKnobs = PolymorphicArrayOfKnobs, > = StoryImpl; /** * A tree of related stories and sub-collections. * * The stories and sub-collections are stored in the order that they are * added to the collection. * * Every Story is a member of exactly one collection. Every collection is * either a toplevel collection for a named component, or it is a member of * exactly one collection. */ export class Collection< T extends PolymorphicArrayOfKnobs = ReadonlyArray>, > { private readonly children = new Map(); readonly customStyles: CSSStyleSheet[] = []; private static readonly collectionsByName = new Map(); readonly knobs: KnobValues; constructor(readonly name: string, knobs: T = [] as unknown as T) { Collection.collectionsByName.set(name, this); this.knobs = new KnobValues(knobs); } /** * Get an array of all stories in this collection. * * Exported for mwc's compiled tests. * @export */ get stories(): Array> { const stories = []; for (const child of this.children.values()) { if (child instanceof StoryImpl) { stories.push(child); } else { stories.push(...child.stories); } } return stories; } get tree(): ReadonlyMap | Collection> { return this.children; } static get byName(): ReadonlyMap { return Collection.collectionsByName; } addStories(...inits: ReadonlyArray>>) { for (const init of inits) { const story = new StoryImpl(init, this); if (this.children.has(story.id)) { const message = `A story or subcollection already exists with the id ${JSON.stringify( story.id, )}`; // Don't throw an error, as that will disrupt live_reload / hot reload, // by halting this module's initialization. console.error(message); continue; } this.children.set(story.id, story); } } applyStyle(customStyle: CSSResult) { this.customStyles.push(customStyle.styleSheet!); } } /** * Describes a single configuration of a specific web UI component. */ export interface LitStoryInit< KV extends KnobValues = KnobValues, > extends BaseStoryInit { renderLit(knobs: KV): TemplateResult | Promise; litStyles?: CSSResult | CSSResult[]; } function isLitStoryInit(init: Partial): init is LitStoryInit { return !!init.renderLit; } /** * A collection with convenience methods for rendering lit-html templates. */ export class LitCollection< T extends PolymorphicArrayOfKnobs = ReadonlyArray>, > extends Collection { override addStories( ...inits: Array> | LitStoryInit>> ) { const simpleInits: StoryInit[] = []; for (const init of inits) { if (isLitStoryInit(init)) { let styles: CSSStyleSheet[] = []; if (init.litStyles) { styles = init.litStyles instanceof Array ? init.litStyles.map((s) => s.styleSheet!) : [init.litStyles.styleSheet!]; } simpleInits.push({ ...init, async render(container, knobValues) { const templateResult = await init.renderLit(knobValues); render(templateResult, container); }, styles, }); } else { simpleInits.push(init); } } super.addStories(...simpleInits); } } ================================================ FILE: catalog/stories/theme-loader.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /* Loads the current theme from the site */ import {PostDoc} from 'postdoc-lib'; // create a constructable stylesheet const styleSheet = new CSSStyleSheet(); let hasAdopted = false; /** * Applies a string theme to the page. * * @param theme The stringified theme to apply to the page */ function applyTheme(theme: string) { // Replaces the theme styleSheet.replace(theme); // If the style has not been adopted yet, then adopt it to the document. if (!hasAdopted) { hasAdopted = true; document.adoptedStyleSheets.push(styleSheet); } } /** * Apply the theme every time a postdoc pessage is received. */ const onMessage = (e: MessageEvent) => { applyTheme(e.data); }; /* Listen to the main document for theme update messages */ const postdoc = new PostDoc({ // Where to listen for handshake messages messageReceiver: window, // Where to post messages requesting theme messageTarget: window.top!, onMessage, }); await postdoc.handshake; // Request the initial theme. postdoc.postMessage('request-theme'); ================================================ FILE: catalog/tsconfig.json ================================================ { "compilerOptions": { "module": "es2022", "lib": ["es2022", "dom", "dom.iterable"], "target": "es2022", "declaration": true, "strict": true, "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "useDefineForClassFields": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "skipLibCheck": true, "types": [] }, "include": ["src/**/*", "stories/*", "stories/components"], "exclude": [] } ================================================ FILE: checkbox/_checkbox.scss ================================================ // // Copyright 2022 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward './internal/checkbox' show theme; ================================================ FILE: checkbox/checkbox.ts ================================================ /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {Checkbox} from './internal/checkbox.js'; import {styles} from './internal/checkbox-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-checkbox': MdCheckbox; } } /** * @summary Checkboxes allow users to select one or more items from a set. * Checkboxes can turn an option on or off. * * @description * Use checkboxes to: * - Select one or more options from a list * - Present a list containing sub-selections * - Turn an item on or off in a desktop environment * * @final * @suppress {visibility} */ @customElement('md-checkbox') export class MdCheckbox extends Checkbox { static override styles: CSSResultOrNative[] = [styles]; } ================================================ FILE: checkbox/checkbox_test.ts ================================================ /** * @license * Copyright 2022 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {html} from 'lit'; import {createFormTests} from '../testing/forms.js'; import {createTokenTests} from '../testing/tokens.js'; import {MdCheckbox} from './checkbox.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdCheckbox.styles); }); describe('forms', () => { createFormTests({ queryControl: (root) => root.querySelector('md-checkbox'), valueTests: [ { name: 'unnamed', render: () => html``, assertValue(formData) { expect(formData) .withContext('should not add anything to form without a name') .toHaveSize(0); }, }, { name: 'unchecked', render: () => html``, assertValue(formData) { expect(formData) .withContext('should not add anything to form when unchecked') .toHaveSize(0); }, }, { name: 'checked default value', render: () => html``, assertValue(formData) { expect(formData.get('checkbox')).toBe('on'); }, }, { name: 'checked custom value', render: () => html``, assertValue(formData) { expect(formData.get('checkbox')).toBe('Custom value'); }, }, { name: 'indeterminate', render: () => html``, assertValue(formData) { expect(formData) .withContext('should not add anything to form when indeterminate') .toHaveSize(0); }, }, { name: 'disabled', render: () => html``, assertValue(formData) { expect(formData) .withContext('should not add anything to form when disabled') .toHaveSize(0); }, }, ], resetTests: [ { name: 'reset to unchecked', render: () => html``, change(checkbox) { checkbox.checked = true; }, assertReset(checkbox) { expect(checkbox.checked) .withContext('checkbox.checked after reset') .toBeFalse(); }, }, { name: 'reset to checked', render: () => html``, change(checkbox) { checkbox.checked = false; }, assertReset(checkbox) { expect(checkbox.checked) .withContext('checkbox.checked after reset') .toBeTrue(); }, }, { name: 'reset to indeterminate', render: () => html``, change(checkbox) { checkbox.indeterminate = false; }, assertReset(checkbox) { expect(checkbox.indeterminate) .withContext('checkbox.indeterminate should not be reset') .toBeFalse(); }, }, ], restoreTests: [ { name: 'restore unchecked', render: () => html``, assertRestored(checkbox) { expect(checkbox.checked) .withContext('checkbox.checked after restore') .toBeFalse(); }, }, { name: 'restore checked', render: () => html``, assertRestored(checkbox) { expect(checkbox.checked) .withContext('checkbox.checked after restore') .toBeTrue(); }, }, { name: 'restore indeterminate', render: () => html``, assertRestored(checkbox) { expect(checkbox.indeterminate) .withContext('checkbox.indeterminate should not be restored') .toBeFalse(); }, }, ], }); }); }); ================================================ FILE: checkbox/demo/demo.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import './material-collection.js'; import './index.js'; import { KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo, } from './material-collection.js'; import {boolInput, Knob} from './index.js'; import {stories, StoryKnobs} from './stories.js'; const collection = new MaterialCollection>( 'Checkbox', [ new Knob('checked', {defaultValue: false, ui: boolInput()}), new Knob('indeterminate', {defaultValue: false, ui: boolInput()}), new Knob('disabled', {defaultValue: false, ui: boolInput()}), ], ); collection.addStories(...materialInitsToStoryInits(stories)); setUpDemo(collection); ================================================ FILE: checkbox/demo/project.json ================================================ { "extends": "/assets/stories/base.json", "files": { "demo.ts": { "hidden": true }, "stories.ts": {} } } ================================================ FILE: checkbox/demo/stories.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/checkbox/checkbox.js'; import { labelStyles, MaterialStoryInit, } from './material-collection.js'; import {css, html} from 'lit'; /** Knob types for checkbox stories. */ export interface StoryKnobs { checked: boolean; disabled: boolean; indeterminate: boolean; } const checkbox: MaterialStoryInit = { name: 'Checkbox', render({checked, disabled, indeterminate}) { return html` `; }, }; const withLabels: MaterialStoryInit = { name: 'With labels', styles: [ labelStyles, css` ol { all: unset; display: flex; flex-direction: column; } li { all: unset; } label { gap: 0; } `, ], render({disabled}) { return html`
`; }, }; /** Checkbox stories. */ export const stories = [checkbox, withLabels]; ================================================ FILE: checkbox/harness.ts ================================================ /** * @license * Copyright 2022 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {Harness} from '../testing/harness.js'; import {Checkbox} from './internal/checkbox.js'; /** * Test harness for checkbox. */ export class CheckboxHarness extends Harness { override async getInteractiveElement() { await this.element.updateComplete; return this.element.renderRoot.querySelector('input')!; } } ================================================ FILE: checkbox/internal/_checkbox.scss ================================================ // // Copyright 2022 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; @use 'sass:math'; // go/keep-sorted end // go/keep-sorted start @use '../../ripple/ripple'; @use '../../tokens'; // go/keep-sorted end // Motion token values. $_md-sys-motion: tokens.md-sys-motion-values(); // The stroke width of the icon marks. $_mark-stroke: 2px; // The coordinates in an 18px viewBox of the bottom left corner of the // indeterminate icon. Y is negative to fix an issue in Safari (see below). $_indeterminate-bottom-left: 4px, -10px; // The coordinates in an 18px viewBox of the bottom left corner of the // checkmark icon. Y is negative to fix an issue in Safari (see below). $_checkmark-bottom-left: 7px, -14px; @mixin theme($tokens) { $supported-tokens: tokens.$md-comp-checkbox-supported-tokens; @each $token, $value in $tokens { @if list.index($supported-tokens, $token) == null { @error 'Token `#{$token}` is not a supported token.'; } @if $value { --md-checkbox-#{$token}: #{$value}; } } } @mixin styles() { $tokens: tokens.md-comp-checkbox-values(); :host { border-start-start-radius: map.get($tokens, 'container-shape-start-start'); border-start-end-radius: map.get($tokens, 'container-shape-start-end'); border-end-end-radius: map.get($tokens, 'container-shape-end-end'); border-end-start-radius: map.get($tokens, 'container-shape-end-start'); display: inline-flex; height: map.get($tokens, 'container-size'); position: relative; vertical-align: top; // Fix extra space when placed inside display: block width: map.get($tokens, 'container-size'); -webkit-tap-highlight-color: transparent; cursor: pointer; } :host([disabled]) { cursor: default; } :host([touch-target='wrapper']) { margin: max(0px, ((48px - map.get($tokens, 'container-size')) / 2)); } md-focus-ring { height: 44px; inset: unset; width: 44px; } // is also the touch target input { appearance: none; height: 48px; margin: 0; opacity: 0; outline: none; position: absolute; width: 48px; z-index: 1; cursor: inherit; } :host([touch-target='none']) input { height: 100%; width: 100%; } .container { border-radius: inherit; display: flex; height: 100%; place-content: center; place-items: center; position: relative; width: 100%; } .outline, .background, .icon { inset: 0; position: absolute; } .outline, .background { border-radius: inherit; } .outline { border-color: map.get($tokens, 'outline-color'); border-style: solid; border-width: map.get($tokens, 'outline-width'); box-sizing: border-box; } .background { background-color: map.get($tokens, 'selected-container-color'); } // Background and icon transitions. .background, .icon { opacity: 0; // Background and icon fade in transition-duration: 150ms, 50ms; // Exit duration for scale and opacity. transition-property: transform, opacity; // Exit easing function for scale, linear for opacity. transition-timing-function: map.get( $_md-sys-motion, easing-emphasized-accelerate ), linear; transform: scale(0.6); // Background and icon scale from 60% to 100%. } :where(.selected) :is(.background, .icon) { opacity: 1; // Enter duration for scale and opacity. transition-duration: 350ms, 50ms; // Enter easing function for scale, linear for opacity. transition-timing-function: map.get( $_md-sys-motion, easing-emphasized-decelerate ), linear; transform: scale(1); } // Ripple md-ripple { border-radius: map.get($tokens, 'state-layer-shape'); height: map.get($tokens, 'state-layer-size'); inset: unset; width: map.get($tokens, 'state-layer-size'); @include ripple.theme( ( hover-color: map.get($tokens, 'hover-state-layer-color'), hover-opacity: map.get($tokens, 'hover-state-layer-opacity'), pressed-color: map.get($tokens, 'pressed-state-layer-color'), pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'), ) ); } .selected md-ripple { @include ripple.theme( ( hover-color: map.get($tokens, 'selected-hover-state-layer-color'), hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'), pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'), pressed-opacity: map.get($tokens, 'selected-pressed-state-layer-opacity'), ) ); } // Icon and icon marks .icon { // The icon is created with two marks for animation: // 1. Short end // - the smaller leading part of the checkmark // - hidden behind long end for indeterminate mark // 2. Long end // - the larger trailing part of the checkmark // - the entirety of the indeterminate mark fill: map.get($tokens, 'selected-icon-color'); height: map.get($tokens, 'icon-size'); width: map.get($tokens, 'icon-size'); } // The short end of the checkmark. Initially hidden underneath the // indeterminate mark. .mark.short { height: $_mark-stroke; transition-property: transform, height; width: $_mark-stroke; } // The long end of the checkmark. Initially the indeterminate mark. .mark.long { height: $_mark-stroke; transition-property: transform, width; width: 10px; } // Exit duration and easing. .mark { animation-duration: 150ms; animation-timing-function: map.get( $_md-sys-motion, easing-emphasized-accelerate ); transition-duration: 150ms; transition-timing-function: map.get( $_md-sys-motion, easing-emphasized-accelerate ); } // Enter duration and easing. .selected .mark { animation-duration: 350ms; animation-timing-function: map.get( $_md-sys-motion, easing-emphasized-decelerate ); transition-duration: 350ms; transition-timing-function: map.get( $_md-sys-motion, easing-emphasized-decelerate ); } // Creates the checkmark icon. .checked, // Keep the checkmark shape when unselecting a checked checkbox. .prev-checked.unselected { .mark { // Transform from the bottom left of the rectangles, whch turn into the // bottom-most point of the checkmark. // Fix Safari's transform-origin bug from "top left" to "bottom left" $scale: scaleY(-1); // Move the "bottom left" corner to the checkmark location. $translate: translate($_checkmark-bottom-left); // Rotate the checkmark. $rotate: rotate(45deg); transform: $scale $translate $rotate; } .mark.short { // The right triangle that forms the short end has an X, Y length of // 4dp, 4dp. The hypoteneuse is √(4*4 + 4*4), which is the length of the // short end when checked. height: 1px * math.sqrt(32); } .mark.long { // The right triangle that forms the long end has an X, Y length of // 8dp, 8dp. The hypoteneuse is √(8*8 + 8*8), which is the length of the // long end when checked. width: 1px * math.sqrt(128); } } // Creates the indeterminate icon. .indeterminate, // Keep the indeterminate shape when unselecting an indeterminate checkbox. .prev-indeterminate.unselected { .mark { transform: scaleY(-1) translate($_indeterminate-bottom-left) rotate(0deg); } } // When selecting an unselected checkbox, don't transition between the // checked and indeterminate states. The checkmark icon or indeterminate icon // should fade in from its final position. .prev-unselected .mark { transition-property: none; } // When checking a checkbox, the long mark of the checkmark grows from the // bottom-most point of the checkmark. An animation provides the starting // width to animate from. .prev-unselected.checked .mark.long { animation-name: prev-unselected-to-checked; } @keyframes prev-unselected-to-checked { from { width: 0; } } // States :where(:hover) .outline { border-color: map.get($tokens, 'hover-outline-color'); border-width: map.get($tokens, 'hover-outline-width'); } :where(:hover) .background { background: map.get($tokens, 'selected-hover-container-color'); } :where(:hover) .icon { fill: map.get($tokens, 'selected-hover-icon-color'); } :where(:focus-within) .outline { border-color: map.get($tokens, 'focus-outline-color'); border-width: map.get($tokens, 'focus-outline-width'); } :where(:focus-within) .background { background: map.get($tokens, 'selected-focus-container-color'); } :where(:focus-within) .icon { fill: map.get($tokens, 'selected-focus-icon-color'); } :where(:active) .outline { border-color: map.get($tokens, 'pressed-outline-color'); border-width: map.get($tokens, 'pressed-outline-width'); } :where(:active) .background { background: map.get($tokens, 'selected-pressed-container-color'); } :where(:active) .icon { fill: map.get($tokens, 'selected-pressed-icon-color'); } // Don't animate to/from disabled states because the outline is hidden when // selected. Without this, there'd be a FOUC if the checkbox state is // programmatically changed while disabled. :where(.disabled, .prev-disabled) :is(.background, .icon, .mark) { animation-duration: 0s; transition-duration: 0s; } :where(.disabled) .outline { border-color: map.get($tokens, 'disabled-outline-color'); border-width: map.get($tokens, 'disabled-outline-width'); opacity: map.get($tokens, 'disabled-container-opacity'); } :where(.selected.disabled) .outline { // Hide the outline behind the transparent selected container color. // This can be removed once disabled colors are flattened. visibility: hidden; } :where(.selected.disabled) .background { // Set disabled opacity only when selected since opacity is used to show // or hide the container background. background: map.get($tokens, 'selected-disabled-container-color'); opacity: map.get($tokens, 'selected-disabled-container-opacity'); } :where(.disabled) .icon { fill: map.get($tokens, 'selected-disabled-icon-color'); } @media (forced-colors: active) { .background { background-color: CanvasText; } .selected.disabled .background { background-color: GrayText; opacity: 1; } .outline { border-color: CanvasText; } .disabled .outline { border-color: GrayText; opacity: 1; } .icon { fill: Canvas; } } } ================================================ FILE: checkbox/internal/checkbox-styles.scss ================================================ // // Copyright 2022 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './checkbox'; // go/keep-sorted end @include checkbox.styles; ================================================ FILE: checkbox/internal/checkbox.ts ================================================ /** * @license * Copyright 2019 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../../focus/md-focus-ring.js'; import '../../ripple/ripple.js'; import {html, isServer, LitElement, nothing, PropertyValues} from 'lit'; import {property, query, state} from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; import {ARIAMixinStrict} from '../../internal/aria/aria.js'; import {mixinDelegatesAria} from '../../internal/aria/delegate.js'; import { dispatchActivationClick, isActivationClick, } from '../../internal/events/form-label-activation.js'; import {redispatchEvent} from '../../internal/events/redispatch-event.js'; import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../labs/behaviors/constraint-validation.js'; import {mixinElementInternals} from '../../labs/behaviors/element-internals.js'; import { getFormState, getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js'; import {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js'; // Separate variable needed for closure. const checkboxBaseClass = mixinDelegatesAria( mixinConstraintValidation( mixinFormAssociated(mixinElementInternals(LitElement)), ), ); /** * A checkbox component. * * * @fires change {Event} The native `change` event on * [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) * --bubbles * @fires input {InputEvent} The native `input` event on * [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) * --bubbles --composed */ export class Checkbox extends checkboxBaseClass { /** @nocollapse */ static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, }; /** * Whether or not the checkbox is selected. */ @property({type: Boolean}) checked = false; /** * Whether or not the checkbox is indeterminate. * * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes */ @property({type: Boolean}) indeterminate = false; /** * When true, require the checkbox to be selected when participating in * form submission. * * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation */ @property({type: Boolean}) required = false; /** * The value of the checkbox that is submitted with a form when selected. * * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value */ @property() value = 'on'; @state() private prevChecked = false; @state() private prevDisabled = false; @state() private prevIndeterminate = false; @query('input') private readonly input!: HTMLInputElement | null; constructor() { super(); if (!isServer) { this.addEventListener('click', (event: MouseEvent) => { if (!isActivationClick(event) || !this.input) { return; } this.focus(); dispatchActivationClick(this.input); }); } } protected override update(changed: PropertyValues) { if ( changed.has('checked') || changed.has('disabled') || changed.has('indeterminate') ) { this.prevChecked = changed.get('checked') ?? this.checked; this.prevDisabled = changed.get('disabled') ?? this.disabled; this.prevIndeterminate = changed.get('indeterminate') ?? this.indeterminate; } super.update(changed); } protected override render() { const prevNone = !this.prevChecked && !this.prevIndeterminate; const prevChecked = this.prevChecked && !this.prevIndeterminate; const prevIndeterminate = this.prevIndeterminate; const isChecked = this.checked && !this.indeterminate; const isIndeterminate = this.indeterminate; const containerClasses = classMap({ 'disabled': this.disabled, 'selected': isChecked || isIndeterminate, 'unselected': !isChecked && !isIndeterminate, 'checked': isChecked, 'indeterminate': isIndeterminate, 'prev-unselected': prevNone, 'prev-checked': prevChecked, 'prev-indeterminate': prevIndeterminate, 'prev-disabled': this.prevDisabled, }); // Needed for closure conformance const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict; // Note: needs to be rendered before the for // form.reportValidity() to work in Chrome. return html`
`; } private handleInput(event: Event) { const target = event.target as HTMLInputElement; this.checked = target.checked; this.indeterminate = target.indeterminate; // 'input' event bubbles and is composed, don't re-dispatch it. } private handleChange(event: Event) { // 'change' event is not composed, re-dispatch it. redispatchEvent(this, event); } // Writable mixin properties for lit-html binding, needed for lit-analyzer declare disabled: boolean; declare name: string; override [getFormValue]() { if (!this.checked || this.indeterminate) { return null; } return this.value; } override [getFormState]() { return String(this.checked); } override formResetCallback() { // The checked property does not reflect, so the original attribute set by // the user is used to determine the default value. this.checked = this.hasAttribute('checked'); } override formStateRestoreCallback(state: string) { this.checked = state === 'true'; } override [createValidator]() { return new CheckboxValidator(() => this); } override [getValidityAnchor]() { return this.input; } } ================================================ FILE: checkbox/internal/checkbox_test.ts ================================================ /** * @license * Copyright 2019 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {html} from 'lit'; import {Environment} from '../../testing/environment.js'; import {CheckboxHarness} from '../harness.js'; import {Checkbox} from './checkbox.js'; customElements.define('md-test-checkbox', Checkbox); declare global { interface HTMLElementTagNameMap { 'md-test-checkbox': Checkbox; } } describe('checkbox', () => { const env = new Environment(); async function setupTest( template = html``, ) { const element = env.render(template).querySelector('md-test-checkbox'); if (!element) { throw new Error('Could not query rendered .'); } await env.waitForStability(); const input = element.renderRoot.querySelector('input'); if (!input) { throw new Error('Could not query rendered .'); } return { input, harness: new CheckboxHarness(element), }; } describe('basic', () => { it('initializes as a checkbox', async () => { const {harness} = await setupTest(); expect(harness.element).toBeInstanceOf(Checkbox); expect(harness.element.checked).toEqual(false); expect(harness.element.indeterminate).toEqual(false); expect(harness.element.disabled).toEqual(false); expect(harness.element.value).toEqual('on'); }); it('user input updates checked state', async () => { const {harness} = await setupTest(); await harness.clickWithMouse(); await env.waitForStability(); expect(harness.element.checked).toEqual(true); }); it('should trigger changed event when checkbox is selected', async () => { const {harness} = await setupTest(); const changeHandler = jasmine.createSpy('changeHandler'); harness.element.addEventListener('change', changeHandler); await harness.clickWithMouse(); expect(harness.element.checked).toBeTrue(); expect(changeHandler).toHaveBeenCalledTimes(1); expect(changeHandler).toHaveBeenCalledWith(jasmine.any(Event)); }); it('should trigger input event when checkbox is selected', async () => { const {harness} = await setupTest(); const inputHandler = jasmine.createSpy('inputHandler'); harness.element.addEventListener('input', inputHandler); await harness.clickWithMouse(); expect(harness.element.checked).toBeTrue(); expect(inputHandler).toHaveBeenCalledTimes(1); expect(inputHandler).toHaveBeenCalledWith(jasmine.any(Event)); }); it('checkbox state is updated during input event listeners', async () => { const {harness} = await setupTest(); let state = false; const inputHandler = jasmine .createSpy('inputHandler') .and.callFake(() => { state = harness.element.checked; }); harness.element.addEventListener('input', inputHandler); await harness.clickWithMouse(); expect(inputHandler).withContext('input listener').toHaveBeenCalled(); expect(state) .withContext('checkbox.checked during input listener') .toBeTrue(); }); it('checkbox state is updated during change event listeners', async () => { const {harness} = await setupTest(); let state = false; const changeHandler = jasmine .createSpy('changeHandler') .and.callFake(() => { state = harness.element.checked; }); harness.element.addEventListener('change', changeHandler); await harness.clickWithMouse(); expect(changeHandler).withContext('change listener').toHaveBeenCalled(); expect(state) .withContext('checkbox.checked during change listener') .toBeTrue(); }); }); describe('checked', () => { it('get/set updates the checked property on the native checkbox element', async () => { const {harness, input} = await setupTest(); harness.element.checked = true; await env.waitForStability(); expect(input.checked).toEqual(true); harness.element.checked = false; await env.waitForStability(); expect(input.checked).toEqual(false); }); it('get/set updates the checked property after user updates checked state', async () => { const {harness, input} = await setupTest(); // Simulate user interaction setting checked to true. await harness.clickWithMouse(); await env.waitForStability(); expect(input.checked).toEqual(true); expect(harness.element.checked).toEqual(true); // Set custom element checked to false. harness.element.checked = false; await env.waitForStability(); expect(input.checked).toEqual(false); expect(harness.element.checked).toEqual(false); // Set custom element checked to true. harness.element.checked = true; await env.waitForStability(); expect(input.checked).toEqual(true); expect(harness.element.checked).toEqual(true); }); }); describe('indeterminate', () => { it('get/set updates the indeterminate property on the native checkbox element', async () => { const {harness, input} = await setupTest(); harness.element.indeterminate = true; await env.waitForStability(); expect(input.indeterminate).toEqual(true); expect(input.getAttribute('aria-checked')).toEqual('mixed'); harness.element.indeterminate = false; await env.waitForStability(); expect(input.indeterminate).toEqual(false); expect(input.getAttribute('aria-checked')).not.toEqual('mixed'); }); }); describe('disabled', () => { it('get/set updates the disabled property on the native checkbox element', async () => { const {harness, input} = await setupTest(); harness.element.disabled = true; await env.waitForStability(); expect(input.disabled).toEqual(true); harness.element.disabled = false; await env.waitForStability(); expect(input.disabled).toEqual(false); }); }); describe('form submission', () => { async function setupFormTest(propsInit: Partial = {}) { return await setupTest(html`
`); } it('does not submit if not checked', async () => { const {harness} = await setupFormTest({name: 'foo'}); const formData = await harness.submitForm(); expect(formData.get('foo')).toBeNull(); }); it('does not submit if disabled', async () => { const {harness} = await setupFormTest({ name: 'foo', checked: true, disabled: true, }); const formData = await harness.submitForm(); expect(formData.get('foo')).toBeNull(); }); it('does not submit if name is not provided', async () => { const {harness} = await setupFormTest({checked: true}); const formData = await harness.submitForm(); const keys = Array.from(formData.keys()); expect(keys.length).toEqual(0); }); it('submits under correct conditions', async () => { const {harness} = await setupFormTest({ name: 'foo', checked: true, value: 'bar', }); const formData = await harness.submitForm(); expect(formData.get('foo')).toEqual('bar'); }); }); describe('label activation', () => { async function setupLabelTest() { const test = await setupTest(html` `); const label = ( test.harness.element.getRootNode() as HTMLElement ).querySelector('label')!; return {...test, label}; } it('toggles when label is clicked', async () => { const { harness: {element}, label, } = await setupLabelTest(); label.click(); await env.waitForStability(); expect(element.checked).toBeTrue(); label.click(); await env.waitForStability(); expect(element.checked).toBeFalse(); }); }); describe('validation', () => { it('should set valueMissing when required and not selected', async () => { const {harness} = await setupTest(); harness.element.required = true; expect(harness.element.validity.valueMissing) .withContext('checkbox.validity.valueMissing') .toBeTrue(); }); it('should not set valueMissing when required and checked', async () => { const {harness} = await setupTest(); harness.element.required = true; harness.element.checked = true; expect(harness.element.validity.valueMissing) .withContext('checkbox.validity.valueMissing') .toBeFalse(); }); it('should set valueMissing when required and indeterminate', async () => { const {harness} = await setupTest(); harness.element.required = true; harness.element.indeterminate = true; expect(harness.element.validity.valueMissing) .withContext('checkbox.validity.valueMissing') .toBeTrue(); }); }); }); ================================================ FILE: chips/_assist-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward './internal/assist-chip' show theme; ================================================ FILE: chips/_filter-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward './internal/filter-chip' show theme; ================================================ FILE: chips/_input-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward './internal/input-chip' show theme; ================================================ FILE: chips/_suggestion-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward './internal/suggestion-chip' show theme; ================================================ FILE: chips/assist-chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {AssistChip} from './internal/assist-chip.js'; import {styles} from './internal/assist-styles.js'; import {styles as elevatedStyles} from './internal/elevated-styles.js'; import {styles as sharedStyles} from './internal/shared-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-assist-chip': MdAssistChip; } } /** * TODO(b/243982145): add docs * * @final * @suppress {visibility} */ @customElement('md-assist-chip') export class MdAssistChip extends AssistChip { static override styles: CSSResultOrNative[] = [sharedStyles, elevatedStyles, styles]; } ================================================ FILE: chips/assist-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {createTokenTests} from '../testing/tokens.js'; import {MdAssistChip} from './assist-chip.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdAssistChip.styles); }); }); ================================================ FILE: chips/chip-set.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {ChipSet} from './internal/chip-set.js'; import {styles} from './internal/chip-set-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-chip-set': MdChipSet; } } /** * TODO(b/243982145): add docs * * @final * @suppress {visibility} */ @customElement('md-chip-set') export class MdChipSet extends ChipSet { static override styles: CSSResultOrNative[] = [styles]; } ================================================ FILE: chips/demo/demo.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import './material-collection.js'; import './index.js'; import { KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo, } from './material-collection.js'; import {boolInput, Knob, textInput} from './index.js'; import {stories, StoryKnobs} from './stories.js'; const collection = new MaterialCollection>( 'Chips', [ new Knob('label', {defaultValue: '', ui: textInput()}), new Knob('elevated', {defaultValue: false, ui: boolInput()}), new Knob('disabled', {defaultValue: false, ui: boolInput()}), new Knob('scrolling', {defaultValue: false, ui: boolInput()}), ], ); collection.addStories(...materialInitsToStoryInits(stories)); setUpDemo(collection, {icons: 'material-symbols'}); ================================================ FILE: chips/demo/project.json ================================================ { "extends": "/assets/stories/base.json", "files": { "demo.ts": { "hidden": true }, "stories.ts": {} } } ================================================ FILE: chips/demo/stories.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/chips/assist-chip.js'; import '@material/web/chips/chip-set.js'; import '@material/web/chips/filter-chip.js'; import '@material/web/chips/input-chip.js'; import '@material/web/chips/suggestion-chip.js'; import '@material/web/icon/icon.js'; import {MaterialStoryInit} from './material-collection.js'; import {css, html, svg} from 'lit'; import {classMap} from 'lit/directives/class-map.js'; /** Knob types for chips stories. */ export interface StoryKnobs { label: string; elevated: boolean; disabled: boolean; scrolling: boolean; } const GOOGLE_LOGO = svg` `; const styles = css` md-chip-set.scrolling { flex-wrap: nowrap; max-width: 512px; overflow: scroll; /** Add room for focus ring. */ padding: 8px; } `; const assist: MaterialStoryInit = { name: 'Assist chips', styles, render({label, elevated, disabled, scrolling}) { const classes = {'scrolling': scrolling}; return html` ${label || 'Assist chip'} local_laundry_service ${label || 'Assist chip with icon'} ${GOOGLE_LOGO} ${label || 'Assist link chip'} ${label || 'Soft-disabled assist chip (focusable)'} `; }, }; const filters: MaterialStoryInit = { name: 'Filter chips', styles, render({label, elevated, disabled, scrolling}) { const classes = {'scrolling': scrolling}; return html` ${label || 'Filter chip'} local_laundry_service ${label || 'Filter chip with icon'} ${label || 'Removable filter chip'} ${label || 'Soft-disabled filter chip (focusable)'} `; }, }; const inputs: MaterialStoryInit = { name: 'Input chips', styles, render({label, disabled, scrolling}) { const classes = {'scrolling': scrolling}; return html` ${label || 'Input chip'} local_laundry_service ${label || 'Input chip with icon'} ${label || 'Input chip with avatar'} ${GOOGLE_LOGO} ${label || 'Input link chip'} ${label || 'Remove-only input chip'} ${label || 'Soft-disabled input chip (focusable)'} `; }, }; const suggestions: MaterialStoryInit = { name: 'Suggestion chips', styles, render({label, elevated, disabled, scrolling}) { const classes = {'scrolling': scrolling}; return html` ${label || 'Suggestion chip'} local_laundry_service ${label || 'Suggestion chip with icon'} ${GOOGLE_LOGO} ${label || 'Suggestion link chip'} ${label || 'Soft-disabled suggestion chip (focusable)'} `; }, }; /** Chips stories. */ export const stories = [assist, filters, inputs, suggestions]; ================================================ FILE: chips/filter-chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {styles as elevatedStyles} from './internal/elevated-styles.js'; import {FilterChip} from './internal/filter-chip.js'; import {styles} from './internal/filter-styles.js'; import {styles as selectableStyles} from './internal/selectable-styles.js'; import {styles as sharedStyles} from './internal/shared-styles.js'; import {styles as trailingIconStyles} from './internal/trailing-icon-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-filter-chip': MdFilterChip; } } /** * TODO(b/243982145): add docs * * @final * @suppress {visibility} */ @customElement('md-filter-chip') export class MdFilterChip extends FilterChip { static override styles: CSSResultOrNative[] = [ sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles, ]; } ================================================ FILE: chips/filter-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {createTokenTests} from '../testing/tokens.js'; import {MdFilterChip} from './filter-chip.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdFilterChip.styles); }); }); ================================================ FILE: chips/harness.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {Harness} from '../testing/harness.js'; import {Chip} from './internal/chip.js'; /** * Test harness for chips. */ export class ChipHarness extends Harness { action: 'primary' | 'trailing' = 'primary'; protected override async getInteractiveElement() { await this.element.updateComplete; const {primaryId} = this.element as unknown as {primaryId: string}; const primaryAction = primaryId && this.element.renderRoot.querySelector(`#${primaryId}`); // Retrieve MultiActionChip's trailingAction const {trailingAction} = this.element as { trailingAction?: HTMLElement | null; }; // Default to trailing action if there isn't a primary action and the user // didn't explicitly set `harness.action = 'trailing'` (remove-only input // chips). if (this.action === 'trailing' || !primaryAction) { if (!trailingAction) { throw new Error( '`ChipHarness.action` is "trailing", but the chip does not have a trailing action.', ); } return trailingAction; } if (!primaryAction) { throw new Error( '`ChipHarness.action` is "primary", but the chip does not have a primary action.', ); } return primaryAction; } } ================================================ FILE: chips/input-chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {InputChip} from './internal/input-chip.js'; import {styles} from './internal/input-styles.js'; import {styles as selectableStyles} from './internal/selectable-styles.js'; import {styles as sharedStyles} from './internal/shared-styles.js'; import {styles as trailingIconStyles} from './internal/trailing-icon-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-input-chip': MdInputChip; } } /** * TODO(b/243982145): add docs * * @final * @suppress {visibility} */ @customElement('md-input-chip') export class MdInputChip extends InputChip { static override styles: CSSResultOrNative[] = [ sharedStyles, trailingIconStyles, selectableStyles, styles, ]; } ================================================ FILE: chips/input-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {createTokenTests} from '../testing/tokens.js'; import {MdInputChip} from './input-chip.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdInputChip.styles); }); }); ================================================ FILE: chips/internal/_assist-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use '../../tokens'; // go/keep-sorted end @mixin theme($tokens) { $supported-tokens: tokens.$md-comp-assist-chip-supported-tokens; @each $token, $value in $tokens { @if list.index($supported-tokens, $token) == null { @error 'Token `#{$token}` is not a supported token.'; } @if $value { --md-assist-chip-#{$token}: #{$value}; } } } @mixin styles() { $tokens: tokens.md-comp-assist-chip-values(); :host { // Only use the logical properties. $tokens: map.remove($tokens, 'container-shape'); @each $token, $value in $tokens { --_#{$token}: #{$value}; } } @media (forced-colors: active) { .link .outline { border-color: ActiveText; } } } ================================================ FILE: chips/internal/_chip-set.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @mixin styles() { :host { display: flex; flex-wrap: wrap; gap: 8px; } } ================================================ FILE: chips/internal/_elevated.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use '../../elevation/elevation'; // go/keep-sorted end @mixin styles() { .elevated { @include elevation.theme( ( 'level': var(--_elevated-container-elevation), 'shadow-color': var(--_elevated-container-shadow-color), ) ); } .elevated::before { background: var(--_elevated-container-color); } .elevated:hover { @include elevation.theme( ( 'level': var(--_elevated-hover-container-elevation), ) ); } .elevated:focus-within { @include elevation.theme( ( 'level': var(--_elevated-focus-container-elevation), ) ); } .elevated:active { @include elevation.theme( ( 'level': var(--_elevated-pressed-container-elevation), ) ); } .elevated.disabled { @include elevation.theme( ( 'level': var(--_elevated-disabled-container-elevation), ) ); } .elevated.disabled::before { background: var(--_elevated-disabled-container-color); opacity: var(--_elevated-disabled-container-opacity); } @media (forced-colors: active) { .elevated md-elevation { border: 1px solid CanvasText; } .elevated.disabled md-elevation { border-color: GrayText; } } } ================================================ FILE: chips/internal/_filter-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use '../../tokens'; // go/keep-sorted end @mixin theme($tokens) { $supported-tokens: tokens.$md-comp-filter-chip-supported-tokens; @each $token, $value in $tokens { @if list.index($supported-tokens, $token) == null { @error 'Token `#{$token}` is not a supported token.'; } @if $value { --md-filter-chip-#{$token}: #{$value}; } } } @mixin styles() { $tokens: tokens.md-comp-filter-chip-values(); :host { // Only use the logical properties. $tokens: map.remove($tokens, 'container-shape'); @each $token, $value in $tokens { --_#{$token}: #{$value}; } } .selected.elevated::before { background: var(--_elevated-selected-container-color); } .checkmark { height: var(--_icon-size); width: var(--_icon-size); } .disabled .checkmark { opacity: var(--_disabled-leading-icon-opacity); } @media (forced-colors: active) { .disabled .checkmark { opacity: 1; } } } ================================================ FILE: chips/internal/_input-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use '../../tokens'; // go/keep-sorted end @mixin theme($tokens) { $supported-tokens: tokens.$md-comp-input-chip-supported-tokens; @each $token, $value in $tokens { @if list.index($supported-tokens, $token) == null { @error 'Token `#{$token}` is not a supported token.'; } @if $value { --md-input-chip-#{$token}: #{$value}; } } } @mixin styles() { $tokens: tokens.md-comp-input-chip-values(); :host { // Only use the logical properties. $tokens: map.remove($tokens, 'container-shape'); @each $token, $value in $tokens { --_#{$token}: #{$value}; } } :host([avatar]) { // Use a rounded border by default for avatar chips. Recreating the // fallbacks allows `--md-input-chip-container-shape` to cascade and // override this without needing to add more specificity for avatar chips. --_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) ); --_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) ); --_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) ); --_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) ); } .avatar .primary.action { padding-inline-start: 4px; } .avatar .leading.icon ::slotted(:first-child) { border-radius: var(--_avatar-shape); height: var(--_avatar-size); width: var(--_avatar-size); } .disabled.avatar .leading.icon { opacity: var(--_disabled-avatar-opacity); } @media (forced-colors: active) { .link .outline { border-color: ActiveText; } .disabled.avatar .leading.icon { opacity: 1; } } } ================================================ FILE: chips/internal/_selectable.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use '../../ripple/ripple'; // go/keep-sorted end @mixin styles() { .selected { @include ripple.theme( ( hover-color: var(--_selected-hover-state-layer-color), hover-opacity: var(--_selected-hover-state-layer-opacity), pressed-color: var(--_selected-pressed-state-layer-color), pressed-opacity: var(--_selected-pressed-state-layer-opacity), ) ); } :where(.selected)::before { background: var(--_selected-container-color); } :where(.selected) .outline { border-width: var(--_selected-outline-width); } :where(.selected.disabled)::before { background: var(--_disabled-selected-container-color); opacity: var(--_disabled-selected-container-opacity); } :where(.selected) .label { color: var(--_selected-label-text-color); } :where(.selected:hover) .label { color: var(--_selected-hover-label-text-color); } :where(.selected:focus) .label { color: var(--_selected-focus-label-text-color); } :where(.selected:active) .label { color: var(--_selected-pressed-label-text-color); } :where(.selected) .leading.icon { color: var(--_selected-leading-icon-color); } :where(.selected:hover) .leading.icon { color: var(--_selected-hover-leading-icon-color); } :where(.selected:focus) .leading.icon { color: var(--_selected-focus-leading-icon-color); } :where(.selected:active) .leading.icon { color: var(--_selected-pressed-leading-icon-color); } @media (forced-colors: active) { :where(.selected:not(.elevated))::before { // for forced-colors. Don't add it to elevated containers since elevation // already have a border added. border: 1px solid CanvasText; } :where(.selected) .outline { border-width: 1px; } } } ================================================ FILE: chips/internal/_shared.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use '../../focus/focus-ring'; @use '../../ripple/ripple'; // go/keep-sorted end @mixin styles() { :host { border-start-start-radius: var(--_container-shape-start-start); border-start-end-radius: var(--_container-shape-start-end); border-end-start-radius: var(--_container-shape-end-start); border-end-end-radius: var(--_container-shape-end-end); display: inline-flex; height: var(--_container-height); cursor: pointer; -webkit-tap-highlight-color: transparent; @include ripple.theme( ( 'hover-color': var(--_hover-state-layer-color), 'hover-opacity': var(--_hover-state-layer-opacity), 'pressed-color': var(--_pressed-state-layer-color), 'pressed-opacity': var(--_pressed-state-layer-opacity), ) ); } :host(:is([disabled], [soft-disabled])) { pointer-events: none; } :host([touch-target='wrapper']) { margin: max(0px, (48px - var(--_container-height)) / 2) 0; } md-focus-ring { @include focus-ring.theme( ( 'shape-start-start': var(--_container-shape-start-start), 'shape-start-end': var(--_container-shape-start-end), 'shape-end-end': var(--_container-shape-end-end), 'shape-end-start': var(--_container-shape-end-start), ) ); } .container { border-radius: inherit; box-sizing: border-box; display: flex; height: 100%; position: relative; width: 100%; // Container color, separate node for disabled opacity changes &::before { border-radius: inherit; content: ''; inset: 0; pointer-events: none; position: absolute; } } .container:not(.disabled) { cursor: pointer; } .container.disabled { pointer-events: none; } .cell { display: flex; } .action { align-items: baseline; appearance: none; background: none; border: none; border-radius: inherit; display: flex; outline: none; padding: 0; position: relative; text-decoration: none; } .primary.action { // Set a min-width on the primary action so that trailing actions remain // inside the chip as the chip is resized. min-width: 0; padding-inline-start: var(--_leading-space); padding-inline-end: var(--_trailing-space); } .has-icon .primary.action { padding-inline-start: var(--_with-leading-icon-leading-space); } .touch { height: 48px; inset: 50% 0 0; position: absolute; transform: translateY(-50%); width: 100%; } :host([touch-target='none']) .touch { display: none; } // Outline, separate node for disabled opacity changes .outline { border: var(--_outline-width) solid var(--_outline-color); border-radius: inherit; inset: 0; pointer-events: none; position: absolute; } :where(:focus) .outline { border-color: var(--_focus-outline-color); } :where(.disabled) .outline { border-color: var(--_disabled-outline-color); opacity: var(--_disabled-outline-opacity); } md-ripple { border-radius: inherit; } .label, .icon, .touch { // Place content above background elements z-index: 1; } .label { align-items: center; color: var(--_label-text-color); display: flex; font-family: var(--_label-text-font); font-size: var(--_label-text-size); font-weight: var(--_label-text-weight); height: 100%; line-height: var(--_label-text-line-height); overflow: hidden; user-select: none; } // An inner span is needed to truncate the label, since elements with a flex // display do not support the text-overflow property. The outer wrapper .label // needs to be a flex display to correctly set the element's baseline, // supporting external elements aligning to the baseline of the chip's text // instead of its edges or icons. .label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(:hover) .label { color: var(--_hover-label-text-color); } :where(:focus) .label { color: var(--_focus-label-text-color); } :where(:active) .label { color: var(--_pressed-label-text-color); } :where(.disabled) .label { color: var(--_disabled-label-text-color); opacity: var(--_disabled-label-text-opacity); } .icon { align-self: center; display: flex; fill: currentColor; position: relative; } .icon ::slotted(:first-child) { font-size: var(--_icon-size); height: var(--_icon-size); width: var(--_icon-size); } .leading.icon { color: var(--_leading-icon-color); } .leading.icon ::slotted(*), .leading.icon svg { margin-inline-end: var(--_icon-label-space); } :where(:hover) .leading.icon { color: var(--_hover-leading-icon-color); } :where(:focus) .leading.icon { color: var(--_focus-leading-icon-color); } :where(:active) .leading.icon { color: var(--_pressed-leading-icon-color); } :where(.disabled) .leading.icon { color: var(--_disabled-leading-icon-color); opacity: var(--_disabled-leading-icon-opacity); } @media (forced-colors: active) { :where(.disabled) :is(.label, .outline, .leading.icon) { color: GrayText; opacity: 1; } } a, button { // Override the user-agent text-transform: none of `; } protected override renderOutline() { if (this.elevated) { return html``; } return super.renderOutline(); } } ================================================ FILE: chips/internal/assist-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {html} from 'lit'; import {Environment} from '../../testing/environment.js'; import {AssistChip} from './assist-chip.js'; customElements.define('test-assist-chip', AssistChip); describe('Assist chip', () => { const env = new Environment(); async function setupTest() { const chip = new AssistChip(); env.render(html`${chip}`); await env.waitForStability(); return chip; } describe('links', () => { it('should render a link when provided an href', async () => { const chip = await setupTest(); chip.href = 'link'; await chip.updateComplete; expect(chip.renderRoot.querySelector('a')) .withContext('should have a rendered link') .toBeTruthy(); }); it('should not allow link chips to be disabled', async () => { const chip = await setupTest(); chip.href = 'link'; chip.disabled = true; await chip.updateComplete; expect(chip.renderRoot.querySelector('.disabled,:disabled')) .withContext('should not have any disabled styling or behavior') .toBeNull(); }); it('should not allow link chips to be soft-disabled', async () => { // Arrange // Act const chip = await setupTest(); chip.href = 'link'; chip.softDisabled = true; await chip.updateComplete; // Assert expect(chip.renderRoot.querySelector('.disabled,:disabled')) .withContext('should not have any disabled styling or behavior') .toBeNull(); }); }); it('should use aria-disabled when soft-disabled', async () => { // Arrange // Act const chip = await setupTest(); chip.softDisabled = true; await chip.updateComplete; // Assert expect(chip.renderRoot.querySelector('button[aria-disabled="true"]')) .withContext('should have aria-disabled="true"') .not.toBeNull(); }); it('should be focusable when soft-disabled', async () => { // Arrange const chip = await setupTest(); chip.softDisabled = true; await chip.updateComplete; // Act chip.focus(); // Assert expect(document.activeElement) .withContext('soft-disabled chip should be focused') .toBe(chip); }); it('should not be clickable when soft-disabled', async () => { // Arrange const clickListener = jasmine.createSpy('clickListener'); const chip = await setupTest(); chip.softDisabled = true; chip.addEventListener('click', clickListener); // Act chip.click(); // Assert expect(clickListener).not.toHaveBeenCalled(); }); }); ================================================ FILE: chips/internal/assist-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './assist-chip'; // go/keep-sorted end @include assist-chip.styles; ================================================ FILE: chips/internal/chip-set-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './chip-set'; // go/keep-sorted end @include chip-set.styles; ================================================ FILE: chips/internal/chip-set.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {html, isServer, LitElement} from 'lit'; import {queryAssignedElements} from 'lit/decorators.js'; import {Chip} from './chip.js'; /** * A chip set component. */ export class ChipSet extends LitElement { get chips() { return this.childElements.filter( (child): child is Chip => child instanceof Chip, ); } @queryAssignedElements() private readonly childElements!: HTMLElement[]; private readonly internals = // Cast needed for closure (this as HTMLElement).attachInternals(); constructor() { super(); if (!isServer) { this.addEventListener('focusin', this.updateTabIndices.bind(this)); this.addEventListener('update-focus', this.updateTabIndices.bind(this)); this.addEventListener('keydown', this.handleKeyDown.bind(this)); this.internals.role = 'toolbar'; } } protected override render() { return html``; } private handleKeyDown(event: KeyboardEvent) { const isLeft = event.key === 'ArrowLeft'; const isRight = event.key === 'ArrowRight'; const isHome = event.key === 'Home'; const isEnd = event.key === 'End'; // Ignore non-navigation keys if (!isLeft && !isRight && !isHome && !isEnd) { return; } const {chips} = this as {chips: MaybeMultiActionChip[]}; // Don't try to select another chip if there aren't any. if (chips.length < 2) { return; } // Prevent default interactions, such as scrolling. event.preventDefault(); if (isHome || isEnd) { const index = isHome ? 0 : chips.length - 1; chips[index].focus({trailing: isEnd}); this.updateTabIndices(); return; } // Check if moving forwards or backwards const isRtl = getComputedStyle(this).direction === 'rtl'; const forwards = isRtl ? isLeft : isRight; const focusedChip = chips.find((chip) => chip.matches(':focus-within')); if (!focusedChip) { // If there is not already a chip focused, select the first or last chip // based on the direction we're traveling. const nextChip = forwards ? chips[0] : chips[chips.length - 1]; nextChip.focus({trailing: !forwards}); this.updateTabIndices(); return; } const currentIndex = chips.indexOf(focusedChip); let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1; // Search for the next sibling that is not disabled to select. // If we return to the host index, there is nothing to select. while (nextIndex !== currentIndex) { if (nextIndex >= chips.length) { // Return to start if moving past the last item. nextIndex = 0; } else if (nextIndex < 0) { // Go to end if moving before the first item. nextIndex = chips.length - 1; } // Check if the next sibling is disabled. If so, // move the index and continue searching. // // Some toolbar items may be focusable when disabled for increased // visibility. const nextChip = chips[nextIndex]; if (nextChip.disabled && !nextChip.alwaysFocusable) { if (forwards) { nextIndex++; } else { nextIndex--; } continue; } nextChip.focus({trailing: !forwards}); this.updateTabIndices(); break; } } private updateTabIndices() { // The chip that should be focusable is either the chip that currently has // focus or the first chip that can be focused. const {chips} = this; let chipToFocus: Chip | undefined; for (const chip of chips) { const isChipFocusable = chip.alwaysFocusable || !chip.disabled; const chipIsFocused = chip.matches(':focus-within'); if (chipIsFocused && isChipFocusable) { // Found the first chip that is actively focused. This overrides the // first focusable chip found. chipToFocus = chip; continue; } if (isChipFocusable && !chipToFocus) { chipToFocus = chip; } // Disable non-focused chips. If we disable all of them, we'll grant focus // to the first focusable child that was found. chip.tabIndex = -1; } if (chipToFocus) { chipToFocus.tabIndex = 0; } } } interface MaybeMultiActionChip extends Chip { focus(options?: FocusOptions & {trailing?: boolean}): void; } ================================================ FILE: chips/internal/chip-set_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {html} from 'lit'; import {customElement} from 'lit/decorators.js'; import {Environment} from '../../testing/environment.js'; import {Harness} from '../../testing/harness.js'; import {ChipHarness} from '../harness.js'; import {AssistChip} from './assist-chip.js'; import {Chip} from './chip.js'; import {ChipSet} from './chip-set.js'; import {InputChip} from './input-chip.js'; @customElement('test-chip-set') class TestChipSet extends ChipSet {} @customElement('test-chip-set-assist-chip') class TestAssistChip extends AssistChip {} @customElement('test-chip-set-input-chip') class TestInputChip extends InputChip {} describe('Chip set', () => { const env = new Environment(); async function setupTest(children: Node[]) { const chipSet = new TestChipSet(); env.render(html` ${chipSet} `); chipSet.append(...children); await env.waitForStability(); return chipSet; } describe('chips', () => { it('should return only chip children', async () => { const notAChip = document.createElement('div'); const chip = new TestAssistChip(); const chipSet = await setupTest([notAChip, chip]); expect(chipSet.chips).toEqual([chip]); }); }); describe('navigation', () => { it('should add tabindex="-1" to all chips except the first', async () => { const chipSet = await setupTest([ new TestAssistChip(), new TestAssistChip(), new TestAssistChip(), ]); expect(chipSet.chips[0].getAttribute('tabindex')) .withContext('first tabindex') .toBe('0'); expect(chipSet.chips[1].getAttribute('tabindex')) .withContext('second tabindex') .toBe('-1'); expect(chipSet.chips[2].getAttribute('tabindex')) .withContext('third tabindex') .toBe('-1'); }); async function testNavigation({ chipSet, ltrKey, rtlKey, current, next, }: { chipSet: ChipSet; ltrKey: string; rtlKey: string; current: Chip | null; next: Chip; }) { const harness = current ? new ChipHarness(current) : new Harness(chipSet); // Don't use harness focusing since we need to test real focus states current?.focus(); await harness.keypress(ltrKey); expect(next.matches(':focus-within')) .withContext(`next chip is focused in LTR after ${ltrKey}`) .toBeTrue(); next.blur(); chipSet.style.direction = 'rtl'; current?.focus(); await harness.keypress(rtlKey); expect(next.matches(':focus-within')) .withContext(`next chip is focused in RTL after ${rtlKey}`) .toBeTrue(); } it('should navigate forward on horizontal arrow keys', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'ArrowRight', rtlKey: 'ArrowLeft', current: first, next: second, }); }); it('should navigate backward on horizontal keys', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'ArrowLeft', rtlKey: 'ArrowRight', current: second, next: first, }); }); it('should navigate to the first chip on Home', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'Home', rtlKey: 'Home', current: second, next: first, }); }); it('should navigate to the last chip on End', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'End', rtlKey: 'End', current: second, next: third, }); }); it('should navigate to first chip on forward when none focused', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'ArrowRight', rtlKey: 'ArrowLeft', current: null, next: first, }); }); it('should navigate to last chip on backward when none focused', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'ArrowLeft', rtlKey: 'ArrowRight', current: null, next: third, }); }); it('should skip over disabled chips', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); second.disabled = true; const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'ArrowRight', rtlKey: 'ArrowLeft', current: first, next: third, }); }); it('should NOT skip over disabled always focusable chips', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); second.disabled = true; second.alwaysFocusable = true; const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'ArrowRight', rtlKey: 'ArrowLeft', current: first, next: second, }); }); it('should NOT skip over soft-disabled chips', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); second.softDisabled = true; const third = new TestAssistChip(); const chipSet = await setupTest([first, second, third]); await testNavigation({ chipSet, ltrKey: 'ArrowRight', rtlKey: 'ArrowLeft', current: first, next: second, }); }); it('should focus trailing actions when navigating backwards', async () => { const first = new TestInputChip(); const second = new TestInputChip(); const third = new TestInputChip(); await setupTest([first, second, third]); const harness = new ChipHarness(second); // Don't use harness focusing since we need to test real focus states second.focus(); await harness.keypress('ArrowLeft'); const {trailingAction} = first as unknown as { trailingAction: HTMLElement; }; expect(trailingAction.matches(':focus-within')) .withContext('trailing action of first chip is focused') .toBeTrue(); }); it('should ignore other keyboard events', async () => { const first = new TestAssistChip(); const second = new TestAssistChip(); const third = new TestAssistChip(); await setupTest([first, second, third]); const harness = new ChipHarness(first); // Don't use harness focusing since we need to test real focus states first.focus(); await harness.keypress('Enter'); expect(first.matches(':focus-within')) .withContext('first chip is still focused') .toBeTrue(); }); it('should do nothing if there are not at least two chips', async () => { const single = new TestAssistChip(); await setupTest([single]); const harness = new ChipHarness(single); // Don't use harness focusing since we need to test real focus states single.focus(); await harness.keypress('ArrowRight'); expect(single.matches(':focus-within')) .withContext('single chip is still focused') .toBeTrue(); }); }); }); ================================================ FILE: chips/internal/chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../../focus/md-focus-ring.js'; import '../../ripple/ripple.js'; import {html, isServer, LitElement, PropertyValues, TemplateResult} from 'lit'; import {property} from 'lit/decorators.js'; import {ClassInfo, classMap} from 'lit/directives/class-map.js'; import {mixinDelegatesAria} from '../../internal/aria/delegate.js'; // Separate variable needed for closure. const chipBaseClass = mixinDelegatesAria(LitElement); /** * A chip component. * * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles */ export abstract class Chip extends chipBaseClass { /** @nocollapse */ static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, }; /** * Whether or not the chip is disabled. * * Disabled chips are not focusable, unless `always-focusable` is set. */ @property({type: Boolean, reflect: true}) disabled = false; /** * Whether or not the chip is "soft-disabled" (disabled but still * focusable). * * Use this when a chip needs increased visibility when disabled. See * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls * for more guidance on when this is needed. */ @property({type: Boolean, attribute: 'soft-disabled', reflect: true}) softDisabled = false; /** * When true, allow disabled chips to be focused with arrow keys. * * Add this when a chip needs increased visibility when disabled. See * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls * for more guidance on when this is needed. * * @deprecated Use `softDisabled` instead of `alwaysFocusable` + `disabled`. */ @property({type: Boolean, attribute: 'always-focusable'}) alwaysFocusable = false; // TODO(b/350810013): remove the label property. /** * The label of the chip. * * @deprecated Set text as content of the chip instead. */ @property() label = ''; /** * Only needed for SSR. * * Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of * Unstyled Content. */ @property({type: Boolean, reflect: true, attribute: 'has-icon'}) hasIcon = false; /** * The `id` of the action the primary focus ring and ripple are for. * TODO(b/310046938): use the same id for both elements */ protected abstract readonly primaryId: string; /** * Whether or not the primary ripple is disabled (defaults to `disabled`). * Some chip actions such as links cannot be disabled. */ protected get rippleDisabled() { return this.disabled || this.softDisabled; } constructor() { super(); if (!isServer) { this.addEventListener('click', this.handleClick.bind(this)); } } override focus(options?: FocusOptions) { if (this.disabled && !this.alwaysFocusable) { return; } super.focus(options); } protected override render() { return html`
${this.renderContainerContent()}
`; } protected override updated(changed: PropertyValues) { if (changed.has('disabled') && changed.get('disabled') !== undefined) { this.dispatchEvent(new Event('update-focus', {bubbles: true})); } } protected getContainerClasses(): ClassInfo { return { 'disabled': this.disabled || this.softDisabled, 'has-icon': this.hasIcon, }; } protected renderContainerContent() { return html` ${this.renderOutline()} ${this.renderPrimaryAction(this.renderPrimaryContent())} `; } protected renderOutline() { return html``; } protected renderLeadingIcon(): TemplateResult { return html``; } protected abstract renderPrimaryAction(content: unknown): unknown; private renderPrimaryContent() { return html` ${this.label ? this.label : html``} `; } private handleIconChange(event: Event) { const slot = event.target as HTMLSlotElement; this.hasIcon = slot.assignedElements({flatten: true}).length > 0; } private handleClick(event: Event) { // If the chip is soft-disabled or disabled + always-focusable, we need to // explicitly prevent the click from propagating to other event listeners // as well as prevent the default action. if (this.softDisabled || (this.disabled && this.alwaysFocusable)) { event.stopImmediatePropagation(); event.preventDefault(); return; } } } ================================================ FILE: chips/internal/chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {html} from 'lit'; import {customElement} from 'lit/decorators.js'; import {Environment} from '../../testing/environment.js'; import {ChipHarness} from '../harness.js'; import {Chip} from './chip.js'; @customElement('test-chip') class TestChip extends Chip { primaryId = 'button'; override renderPrimaryAction() { return html``; } } describe('Chip', () => { const env = new Environment(); async function setupTest() { const chip = new TestChip(); env.render(html`${chip}`); await env.waitForStability(); return {chip, harness: new ChipHarness(chip)}; } it('should dispatch `update-focus` for chip set when disabled changes', async () => { const {chip} = await setupTest(); const updateFocusListener = jasmine.createSpy('updateFocusListener'); chip.addEventListener('update-focus', updateFocusListener); chip.disabled = true; await env.waitForStability(); expect(updateFocusListener).toHaveBeenCalled(); }); }); ================================================ FILE: chips/internal/elevated-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './elevated'; // go/keep-sorted end @include elevated.styles; ================================================ FILE: chips/internal/filter-chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../../elevation/elevation.js'; import {html, nothing} from 'lit'; import {property, query} from 'lit/decorators.js'; import {ARIAMixinStrict} from '../../internal/aria/aria.js'; import {redispatchEvent} from '../../internal/events/redispatch-event.js'; import {MultiActionChip} from './multi-action-chip.js'; import {renderRemoveButton} from './trailing-icons.js'; /** * A filter chip component. * * @fires remove {Event} Dispatched when the remove button is clicked. */ export class FilterChip extends MultiActionChip { @property({type: Boolean}) elevated = false; @property({type: Boolean}) removable = false; @property({type: Boolean, reflect: true}) selected = false; /** * Only needed for SSR. * * Add this attribute when a filter chip has a `slot="selected-icon"` to avoid * a Flash Of Unstyled Content. */ @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'}) hasSelectedIcon = false; protected get primaryId() { return 'button'; } @query('.primary.action') protected readonly primaryAction!: HTMLElement | null; @query('.trailing.action') protected readonly trailingAction!: HTMLElement | null; protected override getContainerClasses() { return { ...super.getContainerClasses(), elevated: this.elevated, selected: this.selected, 'has-trailing': this.removable, 'has-icon': this.hasIcon || this.selected, }; } protected override renderPrimaryAction(content: unknown) { const {ariaLabel} = this as ARIAMixinStrict; return html` `; } protected override renderLeadingIcon() { if (!this.selected) { return super.renderLeadingIcon(); } return html` `; } protected override renderTrailingAction(focusListener: EventListener) { if (this.removable) { return renderRemoveButton({ focusListener, ariaLabel: this.ariaLabelRemove, disabled: this.disabled || this.softDisabled, }); } return nothing; } protected override renderOutline() { if (this.elevated) { return html``; } return super.renderOutline(); } private handleClickOnChild(event: MouseEvent) { if (this.disabled || this.softDisabled) { return; } // Store prevValue to revert in case `chip.selected` is changed during an // event listener. const prevValue = this.selected; this.selected = !this.selected; const preventDefault = !redispatchEvent(this, event); if (preventDefault) { // We should not do `this.selected = !this.selected`, since a client // click listener could change its value. Instead, always revert to the // original value. this.selected = prevValue; return; } } } ================================================ FILE: chips/internal/filter-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {html} from 'lit'; import {customElement} from 'lit/decorators.js'; import {Environment} from '../../testing/environment.js'; import {ChipHarness} from '../harness.js'; import {FilterChip} from './filter-chip.js'; @customElement('test-filter-chip') class TestFilterChip extends FilterChip { declare primaryAction: HTMLElement; } describe('Filter chip', () => { const env = new Environment(); async function setupTest() { const chip = new TestFilterChip(); env.render(html`${chip}`); await env.waitForStability(); return {chip, harness: new ChipHarness(chip)}; } describe('selection', () => { it('should select on click', async () => { const {chip, harness} = await setupTest(); await harness.clickWithMouse(); expect(chip.selected).withContext('chip.selected').toBeTrue(); }); it('should deselect on click', async () => { const {chip, harness} = await setupTest(); chip.selected = true; await harness.clickWithMouse(); expect(chip.selected).withContext('chip.selected').toBeFalse(); }); it('should not select on click when disabled', async () => { const {chip, harness} = await setupTest(); chip.disabled = true; await harness.clickWithMouse(); expect(chip.selected).withContext('chip.selected').toBeFalse(); }); it('should not select on click when soft-disabled', async () => { // Arrange const {chip, harness} = await setupTest(); chip.softDisabled = true; // Act await harness.clickWithMouse(); // Assert expect(chip.selected).withContext('chip.selected').toBeFalse(); }); it('can prevent default', async () => { const {chip, harness} = await setupTest(); const handler = jasmine.createSpy(); chip.addEventListener('selected', handler); chip.addEventListener('click', (event) => { event.preventDefault(); }); await harness.clickWithMouse(); await harness.clickWithMouse(); expect(handler).toHaveBeenCalledTimes(0); }); it('always reverts value on preventDefault() even if selected is changed in listener', async () => { const {chip, harness} = await setupTest(); chip.addEventListener( 'click', (event) => { event.preventDefault(); chip.selected = false; }, {once: true}, ); await harness.clickWithMouse(); expect(chip.selected) .withContext('chip.selected reverts to false') .toBeFalse(); chip.selected = true; chip.addEventListener( 'click', (event) => { event.preventDefault(); chip.selected = false; }, {once: true}, ); await harness.clickWithMouse(); expect(chip.selected) .withContext('chip.selected reverts to true') .toBeTrue(); }); }); it('should be focusable when soft-disabled', async () => { // Arrange const {chip} = await setupTest(); chip.softDisabled = true; await chip.updateComplete; // Act chip.focus(); // Assert expect(document.activeElement) .withContext('soft-disabled chip should be focused') .toBe(chip); }); it('should not be clickable when soft-disabled', async () => { // Arrange const clickListener = jasmine.createSpy('clickListener'); const {chip, harness} = await setupTest(); chip.softDisabled = true; chip.addEventListener('click', clickListener); // Act await harness.clickWithMouse(); // Assert expect(clickListener).not.toHaveBeenCalled(); }); it('should use aria-disabled when soft-disabled', async () => { // Arrange // Act const {chip} = await setupTest(); chip.softDisabled = true; await chip.updateComplete; // Assert expect(chip.renderRoot.querySelector('button[aria-disabled="true"]')) .withContext('should have aria-disabled="true"') .not.toBeNull(); }); }); ================================================ FILE: chips/internal/filter-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './filter-chip'; // go/keep-sorted end @include filter-chip.styles; ================================================ FILE: chips/internal/input-chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {html, nothing} from 'lit'; import {property, query} from 'lit/decorators.js'; import {ARIAMixinStrict} from '../../internal/aria/aria.js'; import {MultiActionChip} from './multi-action-chip.js'; import {renderRemoveButton} from './trailing-icons.js'; /** * An input chip component. * * @fires remove {Event} Dispatched when the remove button is clicked. */ export class InputChip extends MultiActionChip { @property({type: Boolean}) avatar = false; @property() href = ''; @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = ''; @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false; @property({type: Boolean, reflect: true}) selected = false; protected get primaryId() { if (this.href) { return 'link'; } if (this.removeOnly) { return ''; } return 'button'; } protected override get rippleDisabled() { // Link chips cannot be disabled return !this.href && (this.disabled || this.softDisabled); } protected get primaryAction() { // Don't use @query() since a remove-only input chip still has a span that // has "primary action" classes. if (this.removeOnly) { return null; } return this.renderRoot.querySelector('.primary.action'); } @query('.trailing.action') protected readonly trailingAction!: HTMLElement | null; protected override getContainerClasses() { return { ...super.getContainerClasses(), avatar: this.avatar, // Link chips cannot be disabled disabled: !this.href && (this.disabled || this.softDisabled), link: !!this.href, selected: this.selected, 'has-trailing': true, }; } protected override renderPrimaryAction(content: unknown) { const {ariaLabel} = this as ARIAMixinStrict; if (this.href) { return html` ${content} `; } if (this.removeOnly) { return html` ${content} `; } return html` `; } protected override renderTrailingAction(focusListener: EventListener) { return renderRemoveButton({ focusListener, ariaLabel: this.ariaLabelRemove, disabled: !this.href && (this.disabled || this.softDisabled), tabbable: this.removeOnly, }); } } ================================================ FILE: chips/internal/input-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {html} from 'lit'; import {Environment} from '../../testing/environment.js'; import {InputChip} from './input-chip.js'; customElements.define('test-input-chip', InputChip); describe('Input chip', () => { const env = new Environment(); async function setupTest() { const chip = new InputChip(); env.render(html`${chip}`); await env.waitForStability(); return chip; } describe('links', () => { it('should render a link when provided an href', async () => { const chip = await setupTest(); chip.href = 'link'; await chip.updateComplete; expect(chip.renderRoot.querySelector('a')) .withContext('should have a rendered link') .toBeTruthy(); }); it('should not allow link chips to be disabled', async () => { const chip = await setupTest(); chip.href = 'link'; chip.disabled = true; await chip.updateComplete; expect(chip.renderRoot.querySelector('.disabled,:disabled')) .withContext('should not have any disabled styling or behavior') .toBeNull(); }); it('should not allow link chips to be soft-disabled', async () => { // Arrange // Act const chip = await setupTest(); chip.href = 'link'; chip.softDisabled = true; await chip.updateComplete; // Assert expect(chip.renderRoot.querySelector('.disabled,:disabled')) .withContext('should not have any disabled styling or behavior') .toBeNull(); }); }); it('should use aria-disabled when soft-disabled', async () => { // Arrange // Act const chip = await setupTest(); chip.softDisabled = true; await chip.updateComplete; // Assert expect(chip.renderRoot.querySelector('button[aria-disabled="true"]')) .withContext('should have aria-disabled="true"') .not.toBeNull(); }); it('should be focusable when soft-disabled', async () => { // Arrange const chip = await setupTest(); chip.softDisabled = true; await chip.updateComplete; // Act chip.focus(); // Assert expect(document.activeElement) .withContext('soft-disabled chip should be focused') .toBe(chip); }); it('should not be clickable when soft-disabled', async () => { // Arrange const clickListener = jasmine.createSpy('clickListener'); const chip = await setupTest(); chip.softDisabled = true; chip.addEventListener('click', clickListener); // Act chip.click(); // Assert expect(clickListener).not.toHaveBeenCalled(); }); }); ================================================ FILE: chips/internal/input-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './input-chip'; // go/keep-sorted end @include input-chip.styles; ================================================ FILE: chips/internal/multi-action-chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {html, isServer} from 'lit'; import {ARIAMixinStrict} from '../../internal/aria/aria.js'; import {Chip} from './chip.js'; const ARIA_LABEL_REMOVE = 'aria-label-remove'; /** * A chip component with multiple actions. */ export abstract class MultiActionChip extends Chip { get ariaLabelRemove(): string | null { if (this.hasAttribute(ARIA_LABEL_REMOVE)) { return this.getAttribute(ARIA_LABEL_REMOVE)!; } const {ariaLabel} = this as ARIAMixinStrict; // TODO(b/350810013): remove `this.label` when label property is removed. if (ariaLabel || this.label) { return `Remove ${ariaLabel || this.label}`; } return null; } set ariaLabelRemove(ariaLabel: string | null) { const prev = this.ariaLabelRemove; if (ariaLabel === prev) { return; } if (ariaLabel === null) { this.removeAttribute(ARIA_LABEL_REMOVE); } else { this.setAttribute(ARIA_LABEL_REMOVE, ariaLabel); } this.requestUpdate(); } protected abstract readonly primaryAction: HTMLElement | null; protected abstract readonly trailingAction: HTMLElement | null; constructor() { super(); this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this); if (!isServer) { this.addEventListener('keydown', this.handleKeyDown.bind(this)); } } override focus(options?: FocusOptions & {trailing?: boolean}) { const isFocusable = this.alwaysFocusable || !this.disabled; if (isFocusable && options?.trailing && this.trailingAction) { this.trailingAction.focus(options); return; } super.focus(options as FocusOptions); } protected override renderContainerContent() { return html` ${super.renderContainerContent()} ${this.renderTrailingAction(this.handleTrailingActionFocus)} `; } protected abstract renderTrailingAction( focusListener: EventListener, ): unknown; private handleKeyDown(event: KeyboardEvent) { const isLeft = event.key === 'ArrowLeft'; const isRight = event.key === 'ArrowRight'; // Ignore non-navigation keys. if (!isLeft && !isRight) { return; } if (!this.primaryAction || !this.trailingAction) { // Does not have multiple actions. return; } // Check if moving forwards or backwards const isRtl = getComputedStyle(this).direction === 'rtl'; const forwards = isRtl ? isLeft : isRight; const isPrimaryFocused = this.primaryAction?.matches(':focus-within'); const isTrailingFocused = this.trailingAction?.matches(':focus-within'); if ((forwards && isTrailingFocused) || (!forwards && isPrimaryFocused)) { // Moving outside of the chip, it will be handled by the chip set. return; } // Prevent default interactions, such as scrolling. event.preventDefault(); // Don't let the chip set handle this navigation event. event.stopPropagation(); const actionToFocus = forwards ? this.trailingAction : this.primaryAction; actionToFocus.focus(); } private handleTrailingActionFocus() { const {primaryAction, trailingAction} = this; if (!primaryAction || !trailingAction) { return; } // Temporarily turn off the primary action's focusability. This allows // shift+tab from the trailing action to move to the previous chip rather // than the primary action in the same chip. primaryAction.tabIndex = -1; trailingAction.addEventListener( 'focusout', () => { primaryAction.tabIndex = 0; }, {once: true}, ); } } ================================================ FILE: chips/internal/multi-action-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {css, html, nothing} from 'lit'; import {customElement, property, query} from 'lit/decorators.js'; import {Environment} from '../../testing/environment.js'; import {ChipHarness} from '../harness.js'; import {MultiActionChip} from './multi-action-chip.js'; import {renderRemoveButton} from './trailing-icons.js'; @customElement('test-multi-action-chip') class TestMultiActionChip extends MultiActionChip { static override styles = css` :host { position: relative; } `; @query('#primary') primaryAction!: HTMLElement; @query('.trailing.action') trailingAction!: HTMLElement; @property() noTrailingAction = false; protected primaryId = 'primary'; protected override renderPrimaryAction(content: unknown) { return html``; } protected override renderTrailingAction(focusListener: EventListener) { if (this.noTrailingAction) { return nothing; } return renderRemoveButton({ focusListener, ariaLabel: this.ariaLabelRemove, disabled: this.disabled, }); } } describe('Multi-action chips', () => { const env = new Environment(); async function setupTest( template = html``, ): Promise { const root = env.render(template); await env.waitForStability(); const chip = root.querySelector( 'test-multi-action-chip', ); if (!chip) { throw new Error('Failed to query the rendered '); } return chip; } describe('navigation', () => { it('should move internal focus forwards', async () => { const chip = await setupTest(); const primaryHarness = new ChipHarness(chip); await primaryHarness.focusWithKeyboard(); expect(chip.primaryAction.matches(':focus-within')) .withContext('primary action is focused') .toBeTrue(); await primaryHarness.keypress('ArrowRight'); expect(chip.trailingAction.matches(':focus-within')) .withContext('trailing action is focused') .toBeTrue(); }); it('should move internal focus forwards in rtl', async () => { const chip = await setupTest(); chip.style.direction = 'rtl'; const primaryHarness = new ChipHarness(chip); await primaryHarness.focusWithKeyboard(); expect(chip.primaryAction.matches(':focus-within')) .withContext('primary action is focused') .toBeTrue(); await primaryHarness.keypress('ArrowLeft'); expect(chip.trailingAction.matches(':focus-within')) .withContext('trailing action is focused') .toBeTrue(); }); it('should move internal focus backwards', async () => { const chip = await setupTest(); const trailingHarness = new ChipHarness(chip); trailingHarness.action = 'trailing'; await trailingHarness.focusWithKeyboard(); expect(chip.trailingAction.matches(':focus-within')) .withContext('trailing action is focused') .toBeTrue(); await trailingHarness.keypress('ArrowLeft'); expect(chip.primaryAction.matches(':focus-within')) .withContext('primary action is focused') .toBeTrue(); }); it('should move internal focus backwards in rtl', async () => { const chip = await setupTest(); chip.style.direction = 'rtl'; const trailingHarness = new ChipHarness(chip); trailingHarness.action = 'trailing'; await trailingHarness.focusWithKeyboard(); expect(chip.trailingAction.matches(':focus-within')) .withContext('trailing action is focused') .toBeTrue(); await trailingHarness.keypress('ArrowRight'); expect(chip.primaryAction.matches(':focus-within')) .withContext('primary action is focused') .toBeTrue(); }); it('should not bubble when navigating internally', async () => { const chip = await setupTest(); const primaryHarness = new ChipHarness(chip); const keydownHandler = jasmine.createSpy(); if (!chip.parentElement) { throw new Error('Expected chip to have a parentElement for test.'); } chip.parentElement.addEventListener('keydown', keydownHandler); await primaryHarness.focusWithKeyboard(); await primaryHarness.keypress('ArrowRight'); expect(keydownHandler).not.toHaveBeenCalled(); }); it('should bubble event when navigating forward past trailing action', async () => { const chip = await setupTest(); const trailingHarness = new ChipHarness(chip); trailingHarness.action = 'trailing'; const keydownHandler = jasmine.createSpy(); if (!chip.parentElement) { throw new Error('Expected chip to have a parentElement for test.'); } chip.parentElement.addEventListener('keydown', keydownHandler); await trailingHarness.focusWithKeyboard(); await trailingHarness.keypress('ArrowRight'); expect(keydownHandler).toHaveBeenCalledTimes(1); }); it('should bubble event when navigating backward before primary action', async () => { const chip = await setupTest(); const primaryHarness = new ChipHarness(chip); const keydownHandler = jasmine.createSpy(); if (!chip.parentElement) { throw new Error('Expected chip to have a parentElement for test.'); } chip.parentElement.addEventListener('keydown', keydownHandler); await primaryHarness.focusWithKeyboard(); await primaryHarness.keypress('ArrowLeft'); expect(keydownHandler).toHaveBeenCalledTimes(1); }); it('should do nothing if it does not have multiple actions', async () => { const chip = await setupTest(); chip.noTrailingAction = true; await env.waitForStability(); const primaryHarness = new ChipHarness(chip); await primaryHarness.focusWithKeyboard(); await primaryHarness.keypress('ArrowLeft'); expect(chip.primaryAction.matches(':focus-within')) .withContext('primary action is still focused') .toBeTrue(); }); }); describe('remove action', () => { it('should remove chip from DOM when remove button clicked', async () => { const chip = await setupTest(); const harness = new ChipHarness(chip); harness.action = 'trailing'; expect(chip.parentElement) .withContext('chip should be attached before removing') .not.toBeNull(); await harness.clickWithMouse(); expect(chip.parentElement) .withContext('chip should be detached after removing') .toBeNull(); }); it('should dispatch a "remove" event when removed', async () => { const chip = await setupTest(); const harness = new ChipHarness(chip); harness.action = 'trailing'; const handler = jasmine.createSpy(); chip.addEventListener('remove', handler); await harness.clickWithMouse(); expect(handler).toHaveBeenCalledTimes(1); }); it('should not remove chip if "remove" event is default prevented', async () => { const chip = await setupTest(); const harness = new ChipHarness(chip); harness.action = 'trailing'; chip.addEventListener('remove', (event) => { event.preventDefault(); }); await harness.clickWithMouse(); expect(chip.parentElement) .withContext('chip should still be attached') .not.toBeNull(); }); it('should provide a default "ariaLabelRemove" value', async () => { const label = 'Label'; const chip = await setupTest( html`${label}`, ); expect(getA11yLabelForChipRemoveButton(chip)).toEqual(`Remove ${label}`); }); it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided', async () => { const label = 'Label'; const chip = await setupTest( html` ${label} `, ); expect(getA11yLabelForChipRemoveButton(chip)).toEqual( `Remove ${chip.ariaLabel}`, ); }); it('should allow setting a custom "ariaLabelRemove"', async () => { const label = 'Label'; const customAriaLabelRemove = 'Remove custom label'; const chip = await setupTest( html` ${label} `, ); expect(getA11yLabelForChipRemoveButton(chip)).toEqual( customAriaLabelRemove, ); }); // TODO(b/350810013): remove test when label property is removed. it('should provide a default "ariaLabelRemove" value (using the label property)', async () => { const chip = await setupTest(); chip.label = 'Label'; await env.waitForStability(); expect(getA11yLabelForChipRemoveButton(chip)).toEqual( `Remove ${chip.label}`, ); }); // TODO(b/350810013): remove test when label property is removed. it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided (using the label property)', async () => { const chip = await setupTest(); chip.label = 'Label'; chip.ariaLabel = 'Descriptive label'; await env.waitForStability(); expect(getA11yLabelForChipRemoveButton(chip)).toEqual( `Remove ${chip.ariaLabel}`, ); }); // TODO(b/350810013): remove test when label property is removed. it('should allow setting a custom "ariaLabelRemove" (using the label property)', async () => { const chip = await setupTest(); chip.label = 'Label'; chip.ariaLabel = 'Descriptive label'; const customAriaLabelRemove = 'Remove custom label'; chip.ariaLabelRemove = customAriaLabelRemove; await env.waitForStability(); expect(getA11yLabelForChipRemoveButton(chip)).toEqual( customAriaLabelRemove, ); }); }); }); /** * Returns the text content of a slot. */ function getSlotTextContent(slot: HTMLSlotElement) { // Remove any newlines, comments, and whitespace from the label slot. let text = ''; for (const node of slot.assignedNodes() ?? []) { if (node.nodeType === Node.TEXT_NODE) { text += node.textContent?.trim() || ''; } } return text; } /** * Returns the a11y label of the remove button. If the button has an aria-label, * it will return that. If it has aria-labelledby, it will return the text * content of the elements it is labelled by. */ function getA11yLabelForChipRemoveButton(chip: TestMultiActionChip): string { const removeButton = chip.shadowRoot!.querySelector( 'button.trailing.action', )!; if (removeButton.ariaLabel) { return removeButton.ariaLabel; } // If the remove button is not aria-labelled, it should be aria-labelledby. const removeButtonAriaLabelledBy = removeButton.getAttribute('aria-labelledby')!; const elementsLabelledBy: HTMLElement[] = []; removeButtonAriaLabelledBy.split(' ').forEach((id) => { const labelledByElement = chip.shadowRoot?.getElementById(id); if (!labelledByElement) { throw new Error( `Cannot find element with ID "#{id}" in the chip's shadow root`, ); } elementsLabelledBy.push(labelledByElement); }); const textFromAriaLabelledBy: string[] = []; elementsLabelledBy.forEach((element) => { const unnamedSlotChildElement = element.querySelector('slot:not([name])'); if (unnamedSlotChildElement) { textFromAriaLabelledBy.push(getSlotTextContent(unnamedSlotChildElement)); } else { textFromAriaLabelledBy.push(element.textContent ?? ''); } }); return textFromAriaLabelledBy.join(' '); } ================================================ FILE: chips/internal/selectable-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './selectable'; // go/keep-sorted end @include selectable.styles; ================================================ FILE: chips/internal/shared-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './shared'; // go/keep-sorted end @include shared.styles; ================================================ FILE: chips/internal/suggestion-chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {AssistChip} from './assist-chip.js'; /** * A suggestion chip component. */ export class SuggestionChip extends AssistChip {} // Note: assist and suggestion chips are functionally identical with different // tokens. ================================================ FILE: chips/internal/suggestion-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {AssistChip} from './assist-chip.js'; import {SuggestionChip} from './suggestion-chip.js'; customElements.define('test-suggestion-chip', SuggestionChip); describe('Suggestion chip', () => { it('should be an assist chip', () => { expect(new SuggestionChip()).toBeInstanceOf(AssistChip); }); }); ================================================ FILE: chips/internal/suggestion-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './suggestion-chip'; // go/keep-sorted end @include suggestion-chip.styles; ================================================ FILE: chips/internal/trailing-icon-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './trailing-icon'; // go/keep-sorted end @include trailing-icon.styles; ================================================ FILE: chips/internal/trailing-icons.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../../focus/md-focus-ring.js'; import '../../ripple/ripple.js'; import {html, nothing} from 'lit'; import {Chip} from './chip.js'; interface RemoveButtonProperties { ariaLabel: string | null; disabled: boolean; focusListener: EventListener; tabbable?: boolean; } /** @protected */ export function renderRemoveButton({ ariaLabel, disabled, focusListener, tabbable = false, }: RemoveButtonProperties) { // When an aria-label is not provided, we use two spans with aria-labelledby // to create the "Remove " label for the remove button. The first // is this #remove-label span, the second is the chip's #label slot span. return html` `; } function handleRemoveClick(this: Chip, event: Event) { if (this.disabled || this.softDisabled) { return; } event.stopPropagation(); const preventDefault = !this.dispatchEvent( new Event('remove', {cancelable: true}), ); if (preventDefault) { return; } this.remove(); } ================================================ FILE: chips/suggestion-chip.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {styles as elevatedStyles} from './internal/elevated-styles.js'; import {styles as sharedStyles} from './internal/shared-styles.js'; import {SuggestionChip} from './internal/suggestion-chip.js'; import {styles} from './internal/suggestion-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-suggestion-chip': MdSuggestionChip; } } /** * TODO(b/243982145): add docs * * @final * @suppress {visibility} */ @customElement('md-suggestion-chip') export class MdSuggestionChip extends SuggestionChip { static override styles: CSSResultOrNative[] = [sharedStyles, elevatedStyles, styles]; } ================================================ FILE: chips/suggestion-chip_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {createTokenTests} from '../testing/tokens.js'; import {MdSuggestionChip} from './suggestion-chip.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdSuggestionChip.styles); }); }); ================================================ FILE: color/_color.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; // go/keep-sorted end // go/keep-sorted start @use '../tokens'; // go/keep-sorted end /// `color.theme()` emits `--md-sys-color-*` custom properties for a given color /// scheme. /// /// @example scss /// @use '@material/web/color/color'; /// /// :root { /// @include color.theme( /// 'primary': /* ... */, /// 'primary-container': /* ... */, /// 'primary-fixed': /* ... */, /// 'primary-fixed-dim': /* ... */, /// /* ... */ /// ); /// } /// /// /* Generated CSS */ /// :root { /// --md-sys-color-primary: /* ... */; /// --md-sys-color-primary-container: /* ... */; /// --md-sys-color-primary-fixed: /* ... */; /// --md-sys-color-primary-fixed-dim: /* ... */; /// /* ... */ /// } /// /// To generate a color scheme, use the Material Theme Builder Figma plugin. /// /// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder /// /// @param {Map} $tokens - A Map with `md-sys-color` token name keys and their /// corresponding values. /// @output Emits `--md-sys-color-*` custom properties for a given color scheme. @mixin theme($tokens) { @each $token, $value in $tokens { @if list.index(tokens.$md-sys-color-supported-tokens, $token) == null { @error 'md-sys-color `#{$token}` is not a supported token.'; } @if $value { --md-sys-color-#{$token}: #{$value}; } } } /// `color.light-theme()` emits `--md-sys-color-*` custom properties for a light /// theme from the given color palette. /// /// @example scss /// @use 'sass:map'; /// @use '@material/web/color/color'; /// @use '@material/web/tokens'; /// /// // Tip: if only changing part of the palette, merge the default palette /// // values to inherit other tones (such as neutral and error tones). /// $my-palette: map.merge( /// tokens.md-ref-palette-values(), /// ( /// 'primary10': /* ... */, /// 'primary20': /* ... */, /// 'primary30': /* ... */, /// 'primary40': /* ... */, /// 'primary50': /* ... */, /// 'primary60': /* ... */, /// 'primary70': /* ... */, /// 'primary80': /* ... */, /// 'primary90': /* ... */, /// 'primary95': /* ... */, /// 'primary99': /* ... */, /// // Opt: palette values for: /// // - secondary /// // - tertiary /// // - error /// // - neutral /// // - neutral-variant /// ), /// ); /// /// :root { /// @include color.light-theme($my-palette); /// } /// /// /* Generated CSS */ /// :root { /// --md-sys-color-primary: /* ... */; /// --md-sys-color-primary-container: /* ... */; /// --md-sys-color-primary-fixed: /* ... */; /// --md-sys-color-primary-fixed-dim: /* ... */; /// /* ... */ /// } /// /// To generate a palette, use the Material Theme Builder Figma plugin. /// /// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder /// /// @param {Map} $md-ref-palette - A map of Material palette keys and their /// values. /// @output Emits `--md-sys-color-*` custom properties for a light theme with /// the given palette. @mixin light-theme($md-ref-palette: tokens.md-ref-palette-values()) { @each $token, $value in $md-ref-palette { @if list.index(tokens.$md-ref-palette-supported-tokens, $token) == null { @error 'md-ref-palette `#{$token}` is not a supported token.'; } } @include theme( tokens.md-sys-color-values-light( ( 'md-ref-palette': $md-ref-palette, ), $exclude-custom-properties: true ) ); } /// `color.dark-theme()` emits `--md-sys-color-*` custom properties for a dark /// theme from the given color palette. /// /// @example scss /// @use 'sass:map'; /// @use '@material/web/color/color'; /// @use '@material/web/tokens'; /// /// // Tip: if only changing part of the palette, merge the default palette /// // values to inherit other tones (such as neutral and error tones). /// $my-palette: map.merge( /// tokens.md-ref-palette-values(), /// ( /// 'primary10': /* ... */, /// 'primary20': /* ... */, /// 'primary30': /* ... */, /// 'primary40': /* ... */, /// 'primary50': /* ... */, /// 'primary60': /* ... */, /// 'primary70': /* ... */, /// 'primary80': /* ... */, /// 'primary90': /* ... */, /// 'primary95': /* ... */, /// 'primary99': /* ... */, /// // Opt: palette values for: /// // - secondary /// // - tertiary /// // - error /// // - neutral /// // - neutral-variant /// ), /// ); /// /// @media (prefers-color-scheme: dark) { /// @include color.dark-theme($my-palette); /// } /// /// /* Generated CSS */ /// @media (prefers-color-scheme: dark) { /// --md-sys-color-primary: /* ... */; /// --md-sys-color-primary-container: /* ... */; /// --md-sys-color-primary-fixed: /* ... */; /// --md-sys-color-primary-fixed-dim: /* ... */; /// /* ... */ /// } /// /// To generate a palette, use the Material Theme Builder Figma plugin. /// /// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder /// /// @param {Map} $md-ref-palette - A map of Material palette keys and their /// values. /// @output Emits `--md-sys-color-*` custom properties for a dark theme with /// the given palette. @mixin dark-theme($md-ref-palette: tokens.md-ref-palette-values()) { @each $token, $value in $md-ref-palette { @if list.index(tokens.$md-ref-palette-supported-tokens, $token) == null { @error 'md-ref-palette `#{$token}` is not a supported token.'; } } @include theme( tokens.md-sys-color-values-dark( ( 'md-ref-palette': $md-ref-palette, ), $exclude-custom-properties: true ) ); } ================================================ FILE: commitlint.config.js ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ export default { extends: ['@commitlint/config-conventional'], rules: { 'scope-enum': [ 2, 'always', [ // Use "/" for multiple scopes: `fix(button/checkbox): subject"` // Omit scope for broad "all" changes. 'button', 'catalog', 'checkbox', 'chips', 'color', 'dialog', 'divider', 'elevation', 'fab', 'field', 'focus', 'icon', 'iconbutton', 'labs', 'list', 'menu', 'progress', 'radio', 'ripple', 'sass-ext', 'select', 'slider', 'switch', 'tabs', 'testing', 'textfield', 'tokens', 'typography', ], ], }, }; ================================================ FILE: common.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /** * @fileoverview A convenience bundle import that includes common components. * * WARNING: This import is intended for prototyping and development builds only. * It is smaller than `@material/web/all.js` and includes the most common * components for starting a project. Import only the individual components used * for production. */ // LINT.IfChange(imports) // go/keep-sorted start import './button/filled-button.js'; import './button/outlined-button.js'; import './button/text-button.js'; import './checkbox/checkbox.js'; import './chips/assist-chip.js'; import './chips/chip-set.js'; import './chips/filter-chip.js'; import './dialog/dialog.js'; import './icon/icon.js'; import './iconbutton/icon-button.js'; import './list/list.js'; import './list/list-item.js'; import './menu/menu.js'; import './menu/menu-item.js'; import './menu/sub-menu.js'; import './progress/circular-progress.js'; import './progress/linear-progress.js'; import './radio/radio.js'; import './select/outlined-select.js'; import './select/select-option.js'; import './tabs/primary-tab.js'; import './tabs/tabs.js'; import './textfield/outlined-text-field.js'; // go/keep-sorted end // LINT.ThenChange(:exports) // LINT.IfChange(exports) // go/keep-sorted start export * from './button/filled-button.js'; export * from './button/outlined-button.js'; export * from './button/text-button.js'; export * from './checkbox/checkbox.js'; export * from './chips/assist-chip.js'; export * from './chips/chip-set.js'; export * from './chips/filter-chip.js'; export * from './dialog/dialog.js'; export * from './icon/icon.js'; export * from './iconbutton/icon-button.js'; export * from './list/list.js'; export * from './list/list-item.js'; export * from './menu/menu.js'; export * from './menu/menu-item.js'; export * from './menu/sub-menu.js'; export * from './progress/circular-progress.js'; export * from './progress/linear-progress.js'; export * from './radio/radio.js'; export * from './select/outlined-select.js'; export * from './select/select-option.js'; export * from './tabs/primary-tab.js'; export * from './tabs/tabs.js'; export * from './textfield/outlined-text-field.js'; // go/keep-sorted end // LINT.ThenChange(:imports) ================================================ FILE: dialog/_dialog.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward './internal/dialog' show theme; ================================================ FILE: dialog/demo/demo.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import './material-collection.js'; import './index.js'; import { KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo, } from './material-collection.js'; import {boolInput, Knob, textInput} from './index.js'; import {stories, StoryKnobs} from './stories.js'; const collection = new MaterialCollection>( 'Dialog', [ new Knob('quick', { defaultValue: false, ui: boolInput(), }), new Knob('noFocusTrap', { defaultValue: false, ui: boolInput(), }), new Knob('icon', {defaultValue: '', ui: textInput()}), new Knob('headline', {defaultValue: 'Dialog', ui: textInput()}), new Knob('supportingText', { defaultValue: 'Just a simple dialog.', ui: textInput(), }), ], ); collection.addStories(...materialInitsToStoryInits(stories)); setUpDemo(collection, {icons: 'material-symbols'}); ================================================ FILE: dialog/demo/project.json ================================================ { "extends": "/assets/stories/base.json", "files": { "demo.ts": { "hidden": true }, "stories.ts": {} } } ================================================ FILE: dialog/demo/stories.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/button/filled-button.js'; import '@material/web/button/filled-tonal-button.js'; import '@material/web/button/text-button.js'; import '@material/web/dialog/dialog.js'; import '@material/web/icon/icon.js'; import '@material/web/iconbutton/icon-button.js'; import '@material/web/radio/radio.js'; import '@material/web/textfield/filled-text-field.js'; import {MdDialog} from '@material/web/dialog/dialog.js'; import {MaterialStoryInit} from './material-collection.js'; import {css, html, nothing} from 'lit'; /** Knob types for dialog stories. */ export interface StoryKnobs { quick: boolean; noFocusTrap: boolean; icon: string; headline: string; supportingText: string; } function showDialog(event: Event) { ((event.target as Element).nextElementSibling as MdDialog)?.show(); } const standard: MaterialStoryInit = { name: 'Dialog', render({icon, headline, supportingText, quick, noFocusTrap}) { return html` Open ${icon ? html`${icon}` : nothing}
${headline}
${supportingText}
Close OK
`; }, }; const alert: MaterialStoryInit = { name: 'Alert', render({quick, noFocusTrap}) { return html` Alert
Alert dialog
This is a standard alert dialog. Alert dialogs interrupt users with urgent information, details, or actions.
OK
`; }, }; const confirm: MaterialStoryInit = { name: 'Confirm', render({quick, noFocusTrap}) { return html` Confirm
Permanently delete?
delete_outline
Deleting the selected photos will also remove them from all synced devices.
Delete Cancel
`; }, }; const choose: MaterialStoryInit = { name: 'Choose', styles: css` label { display: flex; align-items: center; } `, render({quick, noFocusTrap}) { return html` Choice
Choose your favorite pet
Cancel OK
`; }, }; const contacts: MaterialStoryInit = { name: 'Form', styles: css` .contacts { min-width: calc(100vw - 212px); } .contacts [slot='header'] { display: flex; flex-direction: row-reverse; align-items: center; } .contacts .headline { flex: 1; } .contact-content, .contact-row { display: flex; gap: 8px; } .contact-content { flex-direction: column; } .contact-row > * { flex: 1; } `, render({quick, noFocusTrap}) { return html` Form close Create new contact
Reset
Cancel Save
`; }, }; const floatingSheet: MaterialStoryInit = { name: 'Floating sheet', render({quick, noFocusTrap}) { return html` Floating sheet Floating Sheet close
This is a floating sheet with title. Floating sheets offer no action buttons at the bottom, but there's a close icon button at the top right. They accept any HTML content.
`; }, }; /** Dialog stories. */ export const stories = [ standard, alert, confirm, choose, contacts, floatingSheet, ]; ================================================ FILE: dialog/dialog.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {Dialog} from './internal/dialog.js'; import {styles} from './internal/dialog-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-dialog': MdDialog; } } /** * @summary Dialogs can require an action, communicate information, or help * users accomplish a task. There are two types of dialogs: basic and * full-screen. * * @description * A dialog is a modal window that appears in front of app content to provide * critical information or ask for a decision. Dialogs disable all app * functionality when they appear, and remain on screen until confirmed, * dismissed, or a required action has been taken. * * Dialogs are purposefully interruptive, so they should be used sparingly. * A less disruptive alternative is to use a menu, which provides options * without interrupting a user’s experience. * * On mobile devices only, complex dialogs should be displayed fullscreen. * * __Example usages:__ * - Common use cases for basic dialogs include alerts, quick selection, and * confirmation. * - More complex dialogs may contain actions that require a series of tasks * to complete. One example is creating a calendar entry with the event title, * date, location, and time. * * @final * @suppress {visibility} */ @customElement('md-dialog') export class MdDialog extends Dialog { static override styles: CSSResultOrNative[] = [styles]; } ================================================ FILE: dialog/dialog_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {html} from 'lit'; import {Environment} from '../testing/environment.js'; import {createTokenTests} from '../testing/tokens.js'; import {MdDialog} from './dialog.js'; import {DialogHarness} from './harness.js'; describe('', () => { const env = new Environment(); async function setupTest() { const root = env.render(html`
Content
`); await env.waitForStability(); const dialog = root.querySelector('md-dialog'); if (!dialog) { throw new Error('Failed to query rendered '); } disableDialogAnimations(dialog); const harness = new DialogHarness(dialog); const dialogElement = dialog.shadowRoot?.querySelector('dialog'); if (!dialogElement) { throw new Error('Failed to query rendered '); } const contentElement = root.querySelector('[slot=content]'); if (!contentElement) { throw new Error('Failed to query rendered content.'); } const focusElement = root.querySelector('[autofocus]'); if (!focusElement) { throw new Error('Failed to query rendered autofocus element.'); } return {harness, root, dialogElement, contentElement, focusElement}; } describe('.styles', () => { createTokenTests(MdDialog.styles); }); describe('basic', () => { it('open property calls show() and close()', async () => { const {harness} = await setupTest(); spyOn(harness.element, 'show'); spyOn(harness.element, 'close'); harness.element.open = true; await env.waitForStability(); expect(harness.element.show).toHaveBeenCalled(); harness.element.open = false; await env.waitForStability(); expect(harness.element.close).toHaveBeenCalled(); }); it('renders open state by calling show()/close()', async () => { const {harness, dialogElement} = await setupTest(); await harness.element.show(); expect(dialogElement.open).toBeTrue(); await harness.element.close(); expect(dialogElement.open).toBeFalse(); }); it('fires open/close events', async () => { const {harness} = await setupTest(); const openHandler = jasmine.createSpy('openHandler'); const openedHandler = jasmine.createSpy('openedHandler'); const closeHandler = jasmine.createSpy('closeHandler'); const closedHandler = jasmine.createSpy('closedHandler'); harness.element.addEventListener('open', openHandler); harness.element.addEventListener('opened', openedHandler); harness.element.addEventListener('close', closeHandler); harness.element.addEventListener('closed', closedHandler); await harness.element.show(); expect(openHandler).toHaveBeenCalledTimes(1); expect(openedHandler).toHaveBeenCalledTimes(1); expect(closeHandler).toHaveBeenCalledTimes(0); expect(closedHandler).toHaveBeenCalledTimes(0); await harness.element.close('testing'); expect(openHandler).toHaveBeenCalledTimes(1); expect(openedHandler).toHaveBeenCalledTimes(1); expect(closeHandler).toHaveBeenCalledTimes(1); expect(closedHandler).toHaveBeenCalledTimes(1); expect(harness.element.returnValue).toBe('testing'); }); it('closes when element with action is clicked', async () => { const {harness} = await setupTest(); await harness.element.show(); const closedPromise = new Promise((resolve) => { harness.element.addEventListener( 'closed', () => { resolve(); }, {once: true}, ); }); harness.element .querySelector('[value="button"]')! .click(); await closedPromise; expect(harness.element.open).toBeFalse(); expect(harness.element.returnValue).toBe('button'); }); it('closes with click outside dialog', async () => { const {harness, dialogElement, contentElement} = await setupTest(); const isClosing = jasmine.createSpy('isClosing'); harness.element.addEventListener('close', isClosing); await harness.element.show(); contentElement.click(); expect(isClosing).not.toHaveBeenCalled(); dialogElement.click(); await env.waitForStability(); expect(isClosing).toHaveBeenCalled(); }); it('focuses element with autofocus when shown and previously focused element when closed', async () => { const {harness, focusElement} = await setupTest(); const button = document.createElement('button'); document.body.append(button); button.focus(); expect(document.activeElement).toBe(button); await harness.element.show(); expect(document.activeElement).toBe(focusElement); await harness.element.close(); expect(document.activeElement).toBe(button); button.remove(); }); }); it('should set returnValue during the close event', async () => { const {harness} = await setupTest(); let returnValueDuringClose = ''; harness.element.addEventListener('close', () => { returnValueDuringClose = harness.element.returnValue; }); await harness.element.show(); const returnValue = 'foo'; await harness.element.close(returnValue); expect(returnValueDuringClose) .withContext('dialog.returnValue during close event') .toBe(returnValue); }); it('should not change returnValue if close event is canceled', async () => { const {harness} = await setupTest(); harness.element.addEventListener('close', (event) => { event.preventDefault(); }); await harness.element.show(); const prevReturnValue = harness.element.returnValue; await harness.element.close('new return value'); expect(harness.element.returnValue) .withContext('dialog.returnValue after close event canceled') .toBe(prevReturnValue); }); it('should open on connected if opened before connected to DOM', async () => { const openListener = jasmine.createSpy('openListener'); const dialog = document.createElement('md-dialog'); disableDialogAnimations(dialog); dialog.addEventListener('open', openListener); dialog.open = true; expect(openListener) .withContext('should not trigger open before connected') .not.toHaveBeenCalled(); const root = env.render(html``); root.appendChild(dialog); await env.waitForStability(); expect(openListener) .withContext('opens after connecting') .toHaveBeenCalled(); }); it('should not open on connected if opened, but closed before connected to DOM', async () => { const openListener = jasmine.createSpy('openListener'); const dialog = document.createElement('md-dialog'); disableDialogAnimations(dialog); dialog.addEventListener('open', openListener); dialog.open = true; await env.waitForStability(); dialog.open = false; const root = env.render(html``); root.appendChild(dialog); await env.waitForStability(); expect(openListener) .withContext('should not open on connected since close was called') .not.toHaveBeenCalled(); }); it('should not open on connected if opened before connection but closed after', async () => { const openListener = jasmine.createSpy('openListener'); const dialog = document.createElement('md-dialog'); disableDialogAnimations(dialog); dialog.addEventListener('open', openListener); dialog.open = true; const root = env.render(html``); root.appendChild(dialog); dialog.open = false; await env.waitForStability(); expect(openListener) .withContext( 'should not open on connected since close was called before open could complete', ) .not.toHaveBeenCalled(); }); it('should not dispatch close if closed while disconnected', async () => { const {harness, root} = await setupTest(); await harness.element.show(); const closeListener = jasmine.createSpy('closeListener'); harness.element.addEventListener('close', closeListener); harness.element.remove(); await env.waitForStability(); expect(closeListener) .withContext('should not trigger close when disconnected') .not.toHaveBeenCalled(); await harness.element.close(); expect(closeListener) .withContext('should not trigger close when disconnected') .not.toHaveBeenCalled(); root.appendChild(harness.element); await env.waitForStability(); expect(closeListener) .withContext('should not trigger close when disconnected') .not.toHaveBeenCalled(); }); }); function disableDialogAnimations(dialog: MdDialog) { dialog.getOpenAnimation = () => { return {}; }; dialog.getCloseAnimation = () => { return {}; }; } ================================================ FILE: dialog/harness.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {Harness} from '../testing/harness.js'; import {Dialog} from './internal/dialog.js'; /** * Test harness for dialog. */ export class DialogHarness extends Harness { override async getInteractiveElement() { await this.element.updateComplete; return ( this.element.querySelector('[autocomplete]') ?? this.element ); } } ================================================ FILE: dialog/internal/_dialog.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use '../../tokens'; // go/keep-sorted end @mixin theme($tokens) { $supported-tokens: tokens.$md-comp-dialog-supported-tokens; @each $token, $value in $tokens { @if list.index($supported-tokens, $token) == null { @error 'Token `#{$token}` is not a supported token.'; } @if $value { --md-dialog-#{$token}: #{$value}; } } } @mixin styles() { $md-sys-color: tokens.md-sys-color-values-light(); $md-sys-motion: tokens.md-sys-motion-values(); $tokens: tokens.md-comp-dialog-values(); :host { border-start-start-radius: map.get($tokens, 'container-shape-start-start'); border-start-end-radius: map.get($tokens, 'container-shape-start-end'); border-end-end-radius: map.get($tokens, 'container-shape-end-end'); border-end-start-radius: map.get($tokens, 'container-shape-end-start'); display: contents; margin: auto; max-height: min(560px, calc(100% - 48px)); max-width: min(560px, calc(100% - 48px)); min-height: 140px; min-width: 280px; position: fixed; height: fit-content; width: fit-content; } dialog { background: transparent; border: none; border-radius: inherit; flex-direction: column; height: inherit; margin: inherit; max-height: inherit; max-width: inherit; min-height: inherit; min-width: inherit; outline: none; overflow: visible; padding: 0; width: inherit; } dialog[open] { display: flex; } ::backdrop { // Can't use ::backdrop since Firefox does not allow animations on it. background: none; } .scrim { background: map.get($md-sys-color, 'scrim'); display: none; inset: 0; opacity: 32%; pointer-events: none; position: fixed; z-index: 1; } :host([open]) .scrim { display: flex; } h2 { all: unset; align-self: stretch; } .headline { align-items: center; color: map.get($tokens, 'headline-color'); display: flex; flex-direction: column; font-family: map.get($tokens, 'headline-font'); font-size: map.get($tokens, 'headline-size'); line-height: map.get($tokens, 'headline-line-height'); font-weight: map.get($tokens, 'headline-weight'); position: relative; } slot[name='headline']::slotted(*) { align-items: center; align-self: stretch; box-sizing: border-box; display: flex; gap: 8px; padding: 24px 24px 0; } .icon { display: flex; } slot[name='icon']::slotted(*) { color: map.get($tokens, 'icon-color'); fill: currentColor; font-size: map.get($tokens, 'icon-size'); margin-top: 24px; height: map.get($tokens, 'icon-size'); width: map.get($tokens, 'icon-size'); } .has-icon slot[name='headline']::slotted(*) { justify-content: center; padding-top: 16px; } .scrollable slot[name='headline']::slotted(*) { padding-bottom: 16px; } .scrollable.has-headline slot[name='content']::slotted(*) { padding-top: 8px; } .container { border-radius: inherit; display: flex; flex-direction: column; // Safari won't show content with "flex: 1", but container needs to grow if // height is set on the dialog, so use flex-grow instead. flex-grow: 1; overflow: hidden; position: relative; transform-origin: top; } .container::before { background: map.get($tokens, 'container-color'); border-radius: inherit; content: ''; inset: 0; position: absolute; } .scroller { display: flex; flex: 1; flex-direction: column; overflow: hidden; // needed to display scrollbars on Chrome linux. Also needs to be > 0 so // that content that is position: fixed in the content can render above the // actions bar. e.g. z-index: 1; } .scrollable .scroller { // Only add scrollbars if the content is overflowing. This prevents extra // space from appearing on platforms that reserve scrollbar space. // Note: we only scroll vertically. Horizontal scrolling should be handled // by the content. overflow-y: scroll; } .content { color: map.get($tokens, 'supporting-text-color'); font-family: map.get($tokens, 'supporting-text-font'); font-size: map.get($tokens, 'supporting-text-size'); line-height: map.get($tokens, 'supporting-text-line-height'); flex: 1; font-weight: map.get($tokens, 'supporting-text-weight'); height: min-content; // Needed for Safari position: relative; } slot[name='content']::slotted(*) { box-sizing: border-box; padding: 24px; } // Anchors are used with an IntersectionObserver to determine when the content // has scrolled. .anchor { position: absolute; } .top.anchor { top: 0; } .bottom.anchor { bottom: 0; } .actions { position: relative; } slot[name='actions']::slotted(*) { box-sizing: border-box; display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px 24px; } .has-actions slot[name='content']::slotted(*) { padding-bottom: 8px; } md-divider { display: none; position: absolute; } .has-headline.show-top-divider .headline md-divider, .has-actions.show-bottom-divider .actions md-divider { display: flex; } .headline md-divider { bottom: 0; } .actions md-divider { top: 0; } @media (forced-colors: active) { dialog { outline: 2px solid WindowText; } } } ================================================ FILE: dialog/internal/animations.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {EASING} from '../../internal/motion/animation.js'; /** * A dialog animation's arguments. See `Element.prototype.animate`. */ export type DialogAnimationArgs = Parameters; /** * A collection of dialog animations. Each element of a dialog may have multiple * animations. */ export interface DialogAnimation { /** * Animations for the dialog itself. */ dialog?: DialogAnimationArgs[]; /** * Animations for the scrim backdrop. */ scrim?: DialogAnimationArgs[]; /** * Animations for the container of the dialog. */ container?: DialogAnimationArgs[]; /** * Animations for the headline section. */ headline?: DialogAnimationArgs[]; /** * Animations for the contents section. */ content?: DialogAnimationArgs[]; /** * Animations for the actions section. */ actions?: DialogAnimationArgs[]; } /** * The default dialog open animation. */ export const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = { dialog: [ [ // Dialog slide down [{'transform': 'translateY(-50px)'}, {'transform': 'translateY(0)'}], {duration: 500, easing: EASING.EMPHASIZED}, ], ], scrim: [ [ // Scrim fade in [{'opacity': 0}, {'opacity': 0.32}], {duration: 500, easing: 'linear'}, ], ], container: [ [ // Container fade in [{'opacity': 0}, {'opacity': 1}], {duration: 50, easing: 'linear', pseudoElement: '::before'}, ], [ // Container grow // Note: current spec says to grow from 0dp->100% and shrink from // 100%->35%. We change this to 35%->100% to simplify the animation that // is supposed to clip content as it grows. From 0dp it's possible to see // text/actions appear before the container has fully grown. [{'height': '35%'}, {'height': '100%'}], {duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before'}, ], ], headline: [ [ // Headline fade in [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}], {duration: 250, easing: 'linear', fill: 'forwards'}, ], ], content: [ [ // Content fade in [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}], {duration: 250, easing: 'linear', fill: 'forwards'}, ], ], actions: [ [ // Actions fade in [{'opacity': 0}, {'opacity': 0, offset: 0.5}, {'opacity': 1}], {duration: 300, easing: 'linear', fill: 'forwards'}, ], ], }; /** * The default dialog close animation. */ export const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = { dialog: [ [ // Dialog slide up [{'transform': 'translateY(0)'}, {'transform': 'translateY(-50px)'}], {duration: 150, easing: EASING.EMPHASIZED_ACCELERATE}, ], ], scrim: [ [ // Scrim fade out [{'opacity': 0.32}, {'opacity': 0}], {duration: 150, easing: 'linear'}, ], ], container: [ [ // Container shrink [{'height': '100%'}, {'height': '35%'}], { duration: 150, easing: EASING.EMPHASIZED_ACCELERATE, pseudoElement: '::before', }, ], [ // Container fade out [{'opacity': '1'}, {'opacity': '0'}], {delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before'}, ], ], headline: [ [ // Headline fade out [{'opacity': 1}, {'opacity': 0}], {duration: 100, easing: 'linear', fill: 'forwards'}, ], ], content: [ [ // Content fade out [{'opacity': 1}, {'opacity': 0}], {duration: 100, easing: 'linear', fill: 'forwards'}, ], ], actions: [ [ // Actions fade out [{'opacity': 1}, {'opacity': 0}], {duration: 100, easing: 'linear', fill: 'forwards'}, ], ], }; ================================================ FILE: dialog/internal/dialog-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './dialog'; // go/keep-sorted end @include dialog.styles; ================================================ FILE: dialog/internal/dialog.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../../divider/divider.js'; import {html, isServer, LitElement, nothing} from 'lit'; import {property, query, state} from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; import {ARIAMixinStrict} from '../../internal/aria/aria.js'; import {mixinDelegatesAria} from '../../internal/aria/delegate.js'; import {redispatchEvent} from '../../internal/events/redispatch-event.js'; import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, DialogAnimation, DialogAnimationArgs, } from './animations.js'; // Separate variable needed for closure. const dialogBaseClass = mixinDelegatesAria(LitElement); /** * A dialog component. * * @fires open {Event} Dispatched when the dialog is opening before any animations. * @fires opened {Event} Dispatched when the dialog has opened after any animations. * @fires close {Event} Dispatched when the dialog is closing before any animations. * @fires closed {Event} Dispatched when the dialog has closed after any animations. * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking * on the scrim or pressing Escape. */ export class Dialog extends dialogBaseClass { // We do not use `delegatesFocus: true` due to a Chromium bug with // selecting text. // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357 /** * Opens the dialog when set to `true` and closes it when set to `false`. */ @property({type: Boolean}) get open() { return this.isOpen; } set open(open: boolean) { if (open === this.isOpen) { return; } this.isOpen = open; if (open) { this.setAttribute('open', ''); this.show(); } else { this.removeAttribute('open'); this.close(); } } /** * Skips the opening and closing animations. */ @property({type: Boolean}) quick = false; /** * Gets or sets the dialog's return value, usually to indicate which button * a user pressed to close it. * * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */ @property({attribute: false}) returnValue = ''; /** * The type of dialog for accessibility. Set this to `alert` to announce a * dialog as an alert dialog. */ @property() type?: 'alert'; /** * Disables focus trapping, which by default keeps keyboard Tab navigation * within the dialog. * * When disabled, after focusing the last element of a dialog, pressing Tab * again will release focus from the window back to the browser (such as the * URL bar). * * Focus trapping is recommended for accessibility, and should not typically * be disabled. Only turn this off if the use case of a dialog is more * accessible without focus trapping. */ @property({type: Boolean, attribute: 'no-focus-trap'}) noFocusTrap = false; /** * Gets the opening animation for a dialog. Set to a new function to customize * the animation. */ getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION; /** * Gets the closing animation for a dialog. Set to a new function to customize * the animation. */ getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION; private isOpen = false; private isOpening = false; // getIsConnectedPromise() immediately sets the resolve property. private isConnectedPromiseResolve!: () => void; private isConnectedPromise = this.getIsConnectedPromise(); @query('dialog') private readonly dialog!: HTMLDialogElement | null; @query('.scrim') private readonly scrim!: HTMLDialogElement | null; @query('.container') private readonly container!: HTMLDialogElement | null; @query('.headline') private readonly headline!: HTMLDialogElement | null; @query('.content') private readonly content!: HTMLDialogElement | null; @query('.actions') private readonly actions!: HTMLDialogElement | null; @state() private isAtScrollTop = false; @state() private isAtScrollBottom = false; @query('.scroller') private readonly scroller!: HTMLElement | null; @query('.top.anchor') private readonly topAnchor!: HTMLElement | null; @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null; @query('.focus-trap') private readonly firstFocusTrap!: HTMLElement | null; private nextClickIsFromContent = false; private intersectionObserver?: IntersectionObserver; // Dialogs should not be SSR'd while open, so we can just use runtime checks. @state() private hasHeadline = false; @state() private hasActions = false; @state() private hasIcon = false; private cancelAnimations?: AbortController; // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224 // Chrome v120 has a bug where escape keys do not trigger cancels. If we get // a dialog "close" event that is triggered without a "cancel" after an escape // keydown, then we need to manually trigger our closing logic. // // This bug occurs when pressing escape to close a dialog without first // interacting with the dialog's content. // // Cleanup tracking: // https://github.com/material-components/material-web/issues/5330 // This can be removed when full CloseWatcher support added and the above bug // in Chromium is fixed to fire 'cancel' with one escape press and close with // multiple. private escapePressedWithoutCancel = false; // This TreeWalker is used to walk through a dialog's children to find // focusable elements. TreeWalker is faster than `querySelectorAll('*')`. // We check for isServer because there isn't a "document" during an SSR // run. private readonly treewalker = isServer ? null : document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT); constructor() { super(); if (!isServer) { this.addEventListener('submit', this.handleSubmit); } } /** * Opens the dialog and fires a cancelable `open` event. After a dialog's * animation, an `opened` event is fired. * * Add an `autofocus` attribute to a child of the dialog that should * receive focus after opening. * * @return A Promise that resolves after the animation is finished and the * `opened` event was fired. */ async show() { this.isOpening = true; // Dialogs can be opened before being attached to the DOM, so we need to // wait until we're connected before calling `showModal()`. await this.isConnectedPromise; await this.updateComplete; const dialog = this.dialog!; // Check if already opened or if `dialog.close()` was called while awaiting. if (dialog.open || !this.isOpening) { this.isOpening = false; return; } const preventOpen = !this.dispatchEvent( new Event('open', {cancelable: true}), ); if (preventOpen) { this.open = false; this.isOpening = false; return; } // All Material dialogs are modal. dialog.showModal(); this.open = true; // Reset scroll position if re-opening a dialog with the same content. if (this.scroller) { this.scroller.scrollTop = 0; } // Native modal dialogs ignore autofocus and instead force focus to the // first focusable child. Override this behavior if there is a child with // an autofocus attribute. this.querySelector('[autofocus]')?.focus(); await this.animateDialog(this.getOpenAnimation()); this.dispatchEvent(new Event('opened')); this.isOpening = false; } /** * Closes the dialog and fires a cancelable `close` event. After a dialog's * animation, a `closed` event is fired. * * @param returnValue A return value usually indicating which button was used * to close a dialog. If a dialog is canceled by clicking the scrim or * pressing Escape, it will not change the return value after closing. * @return A Promise that resolves after the animation is finished and the * `closed` event was fired. */ async close(returnValue = this.returnValue) { this.isOpening = false; if (!this.isConnected) { // Disconnected dialogs do not fire close events or animate. this.open = false; return; } await this.updateComplete; const dialog = this.dialog!; // Check if already closed or if `dialog.show()` was called while awaiting. if (!dialog.open || this.isOpening) { this.open = false; return; } const prevReturnValue = this.returnValue; this.returnValue = returnValue; const preventClose = !this.dispatchEvent( new Event('close', {cancelable: true}), ); if (preventClose) { this.returnValue = prevReturnValue; return; } await this.animateDialog(this.getCloseAnimation()); dialog.close(returnValue); this.open = false; this.dispatchEvent(new Event('closed')); } override connectedCallback() { super.connectedCallback(); this.isConnectedPromiseResolve(); } override disconnectedCallback() { super.disconnectedCallback(); this.isConnectedPromise = this.getIsConnectedPromise(); } protected override render() { const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom); const classes = { 'has-headline': this.hasHeadline, 'has-actions': this.hasActions, 'has-icon': this.hasIcon, 'scrollable': scrollable, 'show-top-divider': scrollable && !this.isAtScrollTop, 'show-bottom-divider': scrollable && !this.isAtScrollBottom, }; // The focus trap sentinels are only added after the dialog opens, since // dialog.showModal() will try to autofocus them, even with tabindex="-1". const showFocusTrap = this.open && !this.noFocusTrap; const focusTrap = html` `; const {ariaLabel} = this as ARIAMixinStrict; return html`
${showFocusTrap ? focusTrap : nothing}

${showFocusTrap ? focusTrap : nothing} `; } protected override firstUpdated() { this.intersectionObserver = new IntersectionObserver( (entries) => { for (const entry of entries) { this.handleAnchorIntersection(entry); } }, {root: this.scroller!}, ); this.intersectionObserver.observe(this.topAnchor!); this.intersectionObserver.observe(this.bottomAnchor!); } private handleDialogClick() { if (this.nextClickIsFromContent) { // Avoid doing a layout calculation below if we know the click came from // content. this.nextClickIsFromContent = false; return; } // Click originated on the backdrop. Native ``s will not cancel, // but Material dialogs do. const preventDefault = !this.dispatchEvent( new Event('cancel', {cancelable: true}), ); if (preventDefault) { return; } this.close(); } private handleContentClick() { this.nextClickIsFromContent = true; } private handleSubmit(event: SubmitEvent) { const form = event.target as HTMLFormElement; const {submitter} = event; if (form.getAttribute('method') !== 'dialog' || !submitter) { return; } // Close reason is the submitter's value attribute, or the dialog's // `returnValue` if there is no attribute. this.close(submitter.getAttribute('value') ?? this.returnValue); } private handleCancel(event: Event) { if (event.target !== this.dialog) { // Ignore any cancel events dispatched by content. return; } this.escapePressedWithoutCancel = false; const preventDefault = !redispatchEvent(this, event); // We always prevent default on the original dialog event since we'll // animate closing it before it actually closes. event.preventDefault(); if (preventDefault) { return; } this.close(); } private handleClose() { if (!this.escapePressedWithoutCancel) { return; } this.escapePressedWithoutCancel = false; this.dialog?.dispatchEvent(new Event('cancel', {cancelable: true})); } private handleKeydown(event: KeyboardEvent) { if (event.key !== 'Escape') { return; } // An escape key was pressed. If a "close" event fires next without a // "cancel" event first, then we know we're in the Chrome v120 bug. this.escapePressedWithoutCancel = true; // Wait a full task for the cancel/close event listeners to fire, then // reset the flag. setTimeout(() => { this.escapePressedWithoutCancel = false; }); } private async animateDialog(animation: DialogAnimation) { // Always cancel the previous animations. Animations can include `fill` // modes that need to be cleared when `quick` is toggled. If not, content // that faded out will remain hidden when a `quick` dialog re-opens after // previously opening and closing without `quick`. this.cancelAnimations?.abort(); this.cancelAnimations = new AbortController(); if (this.quick) { return; } const {dialog, scrim, container, headline, content, actions} = this; if (!dialog || !scrim || !container || !headline || !content || !actions) { return; } const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate, } = animation; const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [ [dialog, dialogAnimate ?? []], [scrim, scrimAnimate ?? []], [container, containerAnimate ?? []], [headline, headlineAnimate ?? []], [content, contentAnimate ?? []], [actions, actionsAnimate ?? []], ]; const animations: Animation[] = []; for (const [element, animation] of elementAndAnimation) { for (const animateArgs of animation) { const animation = element.animate(...animateArgs); this.cancelAnimations.signal.addEventListener('abort', () => { animation.cancel(); }); animations.push(animation); } } await Promise.all( animations.map((animation) => animation.finished.catch(() => { // Ignore intentional AbortErrors when calling `animation.cancel()`. }), ), ); } private handleHeadlineChange(event: Event) { const slot = event.target as HTMLSlotElement; this.hasHeadline = slot.assignedElements().length > 0; } private handleActionsChange(event: Event) { const slot = event.target as HTMLSlotElement; this.hasActions = slot.assignedElements().length > 0; } private handleIconChange(event: Event) { const slot = event.target as HTMLSlotElement; this.hasIcon = slot.assignedElements().length > 0; } private handleAnchorIntersection(entry: IntersectionObserverEntry) { const {target, isIntersecting} = entry; if (target === this.topAnchor) { this.isAtScrollTop = isIntersecting; } if (target === this.bottomAnchor) { this.isAtScrollBottom = isIntersecting; } } private getIsConnectedPromise() { return new Promise((resolve) => { this.isConnectedPromiseResolve = resolve; }); } private handleFocusTrapFocus(event: FocusEvent) { const [firstFocusableChild, lastFocusableChild] = this.getFirstAndLastFocusableChildren(); if (!firstFocusableChild || !lastFocusableChild) { // When a dialog does not have focusable children, the dialog itself // receives focus. this.dialog?.focus(); return; } // To determine which child to focus, we need to know which focus trap // received focus... const isFirstFocusTrap = event.target === this.firstFocusTrap; const isLastFocusTrap = !isFirstFocusTrap; // ...and where the focus came from (what was previously focused). const focusCameFromFirstChild = event.relatedTarget === firstFocusableChild; const focusCameFromLastChild = event.relatedTarget === lastFocusableChild; // Although this is a focus trap, focus can come from outside the trap. // This can happen when elements are programmatically `focus()`'d. It also // happens when focus leaves and returns to the window, such as clicking on // the browser's URL bar and pressing Tab, or switching focus between // iframes. const focusCameFromOutsideDialog = !focusCameFromFirstChild && !focusCameFromLastChild; // Focus the dialog's first child when we reach the end of the dialog and // focus is moving forward. Or, when focus is moving forwards into the // dialog from outside of the window. const shouldFocusFirstChild = (isLastFocusTrap && focusCameFromLastChild) || (isFirstFocusTrap && focusCameFromOutsideDialog); if (shouldFocusFirstChild) { firstFocusableChild.focus(); return; } // Focus the dialog's last child when we reach the beginning of the dialog // and focus is moving backward. Or, when focus is moving backwards into the // dialog from outside of the window. const shouldFocusLastChild = (isFirstFocusTrap && focusCameFromFirstChild) || (isLastFocusTrap && focusCameFromOutsideDialog); if (shouldFocusLastChild) { lastFocusableChild.focus(); return; } // The booleans above are verbose for readability, but code executation // won't actually reach here. } private getFirstAndLastFocusableChildren(): | [HTMLElement, HTMLElement] | [null, null] { if (!this.treewalker) { return [null, null]; } let firstFocusableChild: HTMLElement | null = null; let lastFocusableChild: HTMLElement | null = null; // Reset the current node back to the root host element. this.treewalker.currentNode = this.treewalker.root; while (this.treewalker.nextNode()) { // Cast as Element since the TreeWalker filter only accepts Elements. const nextChild = this.treewalker.currentNode as Element; if (!isFocusable(nextChild)) { continue; } if (!firstFocusableChild) { firstFocusableChild = nextChild; } lastFocusableChild = nextChild; } // We set lastFocusableChild immediately after finding a // firstFocusableChild, which means the pair is either both null or both // non-null. Cast since TypeScript does not recognize this. return [firstFocusableChild, lastFocusableChild] as | [HTMLElement, HTMLElement] | [null, null]; } } function isFocusable(element: Element): element is HTMLElement { // Check if the element is a known built-in focusable element: // - and with `href` attributes. // - Form controls that are not disabled. // - `contenteditable` elements. // - Anything with a non-negative `tabindex`. const knownFocusableElements = ':is(button,input,select,textarea,object,:is(a,area)[href],[tabindex],[contenteditable=true])'; const notDisabled = ':not(:disabled,[disabled])'; const notNegativeTabIndex = ':not([tabindex^="-"])'; if ( element.matches(knownFocusableElements + notDisabled + notNegativeTabIndex) ) { return true; } const isCustomElement = element.localName.includes('-'); if (!isCustomElement) { return false; } // If a custom element does not have a tabindex, it may still be focusable // if it delegates focus with a shadow root. We also need to check again if // the custom element is a disabled form control. if (!element.matches(notDisabled)) { return false; } return element.shadowRoot?.delegatesFocus ?? false; } ================================================ FILE: dialog/test/window_size.json ================================================ { "capabilities": { "goog:chromeOptions": { "args": ["--window-position=0,0", "--window-size=599,800"] }, "moz:firefoxOptions": { "args": ["-width=599","-height=800"] } }, "extension": { "xvfbResolution": "599x800x24" } } ================================================ FILE: divider/_divider.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward './internal/divider' show theme; ================================================ FILE: divider/demo/demo.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import './material-collection.js'; import './index.js'; import { KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo, } from './material-collection.js'; import {boolInput, Knob} from './index.js'; import {stories, StoryKnobs} from './stories.js'; const collection = new MaterialCollection>( 'Divider', [ new Knob('inset', {defaultValue: true, ui: boolInput()}), new Knob('inset (start)', {defaultValue: false, ui: boolInput()}), new Knob('inset (end)', {defaultValue: false, ui: boolInput()}), ], ); collection.addStories(...materialInitsToStoryInits(stories)); setUpDemo(collection); ================================================ FILE: divider/demo/project.json ================================================ { "extends": "/assets/stories/base.json", "files": { "demo.ts": { "hidden": true }, "stories.ts": {} } } ================================================ FILE: divider/demo/stories.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '@material/web/divider/divider.js'; import {MaterialStoryInit} from './material-collection.js'; import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js'; import {css, html} from 'lit'; /** Knob types for divider stories. */ export interface StoryKnobs { inset: boolean; 'inset (start)': boolean; 'inset (end)': boolean; } const standard: MaterialStoryInit = { name: 'Divider', styles: [ typescaleStyles, css` ul { border: 1px solid var(--md-sys-color-outline); margin: 0; padding: 0; width: 256px; } li { color: var(--md-sys-color-on-background); list-style: none; margin: 16px; } `, ], render(knobs) { return html`
  • List item one
  • List item two
  • List item three
  • List item four
`; }, }; /** Divider stories. */ export const stories = [standard]; ================================================ FILE: divider/divider.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {Divider} from './internal/divider.js'; import {styles} from './internal/divider-styles.js'; declare global { interface HTMLElementTagNameMap { 'md-divider': MdDivider; } } /** * @summary A divider is a thin line that groups content in lists and * containers. * * @description Dividers can reinforce tapability, such as when used to separate * list items or define tappable regions in an accordion. * * @final * @suppress {visibility} */ @customElement('md-divider') export class MdDivider extends Divider { static override styles: CSSResultOrNative[] = [styles]; } ================================================ FILE: divider/divider_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {createTokenTests} from '../testing/tokens.js'; import {MdDivider} from './divider.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdDivider.styles); }); }); ================================================ FILE: divider/internal/_divider.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use '../../tokens'; // go/keep-sorted end @mixin theme($tokens) { $supported-tokens: tokens.$md-comp-divider-supported-tokens; @each $token, $value in $tokens { @if list.index($supported-tokens, $token) == null { @error 'Token `#{$token}` is not a supported token.'; } @if $value { --md-divider-#{$token}: #{$value}; } } } @mixin styles() { $tokens: tokens.md-comp-divider-values(); :host { box-sizing: border-box; color: map.get($tokens, 'color'); display: flex; height: map.get($tokens, 'thickness'); width: 100%; } :host([inset]), :host([inset-start]) { padding-inline-start: 16px; } :host([inset]), :host([inset-end]) { padding-inline-end: 16px; } :host::before { background: currentColor; content: ''; height: 100%; width: 100%; } @media (forced-colors: active) { :host::before { background: CanvasText; } } } ================================================ FILE: divider/internal/divider-styles.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use './divider'; // go/keep-sorted end @include divider.styles; ================================================ FILE: divider/internal/divider.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {LitElement} from 'lit'; import {property} from 'lit/decorators.js'; /** * A divider component. */ export class Divider extends LitElement { /** * Indents the divider with equal padding on both sides. */ @property({type: Boolean, reflect: true}) inset = false; /** * Indents the divider with padding on the leading side. */ @property({type: Boolean, reflect: true, attribute: 'inset-start'}) insetStart = false; /** * Indents the divider with padding on the trailing side. */ @property({type: Boolean, reflect: true, attribute: 'inset-end'}) insetEnd = false; } ================================================ FILE: docs/components/button.md ================================================ # Buttons **This documentation is fully rendered on the [Material Web catalog](https://material-web.dev/components/button/).** [Buttons](https://m3.material.io/components/buttons) help people initiate actions, from sending an email, to sharing a document, to liking a post. There are five types of common buttons: elevated, filled, filled tonal, outlined, and text. A phone showing a payment screen with a green filled button that says 'Make payment' * [Design article](https://m3.material.io/components/buttons) * [API Documentation](#api) * [Source code](https://github.com/material-components/material-web/tree/main/button) ## Types ![The 5 types of common buttons](images/button/types.webp "Elevated, filled, filled tonal, outlined, and text buttons") 1. [Elevated button](#elevated-button) 1. [Filled button](#filled-button) 1. [Filled tonal button](#filled-tonal-button) 1. [Outlined button](#outlined-button) 1. [Text button](#text-button) ## Usage Buttons have label text that describes the action that will occur if a user taps a button. ![An outlined button with the text "Back" next to a filled button with the text "Complete"](images/button/usage.webp "Outlined and filled buttons.") ```html Back Complete ``` ### Icon An icon may optionally be added to a button to help communicate the button's action and help draw attention. ![A tonal button with a right arrow send icon with text 'send' and a text button with the text 'open' with a trailing icon arrow box](images/button/usage-icon.webp "Slot in icons to the appropriate slots") ```html Send Open ``` ## Accessibility Add an [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute to buttons whose labels need a more descriptive label. ```html Add ``` ### Focusable and disabled By default, disabled buttons are not focusable with the keyboard, while "soft-disabled" buttons are. Some use cases encourage focusability of disabled toolbar items to increase their discoverability. See the [ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls) for guidance on when this is recommended. ```html
Copy Cut Paste
``` ## Elevated button [Elevated buttons](https://m3.material.io/components/buttons/guidelines#4e89da4d-a8fa-4e20-bb8d-b8a93eff3e3e) are essentially filled tonal buttons with a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background. ![An elevated button](images/button/usage-elevated-button.webp) ```html Elevated ``` ## Filled button [Filled buttons](https://m3.material.io/components/buttons/guidelines#9ecffdb3-ef29-47e7-8d5d-f78b404fcafe) have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm. ```html Filled ``` ## Filled tonal button A [filled tonal button](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b) is an alternative middle ground between filled and outlined buttons. They're useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give, such as "Next" in an onboarding flow. ![A filled tonal button](images/button/usage-filled-tonal-button.webp) ```html Tonal ``` ## Outlined button [Outlined buttons](https://m3.material.io/components/buttons/guidelines#3742b09f-c224-43e0-a83e-541bd29d0f05) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. ![An outlined button](images/button/usage-outlined-button.webp) ```html Outlined ``` ## Text button [Text buttons](https://m3.material.io/components/buttons/guidelines#c9bcbc0b-ee05-45ad-8e80-e814ae919fbb) are used for the lowest priority actions, especially when presenting multiple options. ![A text button](images/button/usage-text-button.webp) ```html Text ``` ## Theming Button supports [Material theming](../theming/README.md) and can be customized in terms of color, typography, and shape. ### Elevated button tokens Token | Default value --------------------------------------- | ------------------------------------- `--md-elevated-button-container-color` | `--md-sys-color-surface` `--md-elevated-button-container-shape` | `--md-sys-shape-corner-full` `--md-elevated-button-label-text-color` | `--md-sys-color-on-surface` `--md-elevated-button-label-text-font` | `--md-sys-typescale-label-large-font` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss) ### Elevated button example ![Image of an elevated button with a different theme applied](images/button/theming-elevated-button.webp "Elevated button theming example.") ```html Elevated ``` ### Filled button tokens Token | Default value ------------------------------------- | ------------------------------------- `--md-filled-button-container-color` | `--md-sys-color-primary` `--md-filled-button-container-shape` | `--md-sys-shape-corner-full` `--md-filled-button-label-text-color` | `--md-sys-color-on-primary` `--md-filled-button-label-text-font` | `--md-sys-typescale-label-large-font` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss) ### Filled button example ![Image of a filled button with a different theme applied](images/button/theming-filled-button.webp "Filled button theming example.") ```html Filled ``` ### Filled tonal button tokens Token | Default value ------------------------------------------- | ------------- `--md-filled-tonal-button-container-color` | `--md-sys-color-secondary-container` `--md-filled-tonal-button-container-shape` | `--md-sys-shape-corner-full` `--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container` `--md-filled-tonal-button-label-text-font` | `--md-sys-typescale-label-large-font` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss) ### Filled tonal button example ![Image of a filled tonal button with a different theme applied](images/button/theming-filled-tonal-button.webp "Filled tonal button theming example.") ```html Tonal ``` ### Outlined button tokens Token | Default value --------------------------------------- | ------------------------------------- `--md-outlined-button-outline-color` | `--md-sys-color-outline` `--md-outlined-button-container-shape` | `--md-sys-shape-corner-full` `--md-outlined-button-label-text-color` | `--md-sys-color-primary` `--md-outlined-button-label-text-font` | `--md-sys-typescale-label-large-font` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss) ### Outlined button example ![Image of an outlined button with a different theme applied](images/button/theming-outlined-button.webp "Outlined button theming example.") ```html Outlined ``` ### Text button tokens Token | Default value ----------------------------------- | ------------------------------------- `--md-text-button-label-text-color` | `--md-sys-color-primary` `--md-text-button-label-text-font` | `--md-sys-typescale-label-large-font` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss) ### Text button example ![Image of a text button with a different theme applied](images/button/theming-text-button.webp "Text button theming example.") ```html Text ``` ## API ### MdElevatedButton <md-elevated-button> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | | `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | | `href` | `href` | `string` | `''` | The URL that the link button points to. | | `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). | | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | | `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | | `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | | `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | | `name` | | `string` | `undefined` | | | `form` | | `HTMLFormElement` | `undefined` | | ### MdFilledButton <md-filled-button> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | | `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | | `href` | `href` | `string` | `''` | The URL that the link button points to. | | `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). | | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | | `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | | `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | | `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | | `name` | | `string` | `undefined` | | | `form` | | `HTMLFormElement` | `undefined` | | ### MdFilledTonalButton <md-filled-tonal-button> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | | `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | | `href` | `href` | `string` | `''` | The URL that the link button points to. | | `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). | | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | | `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | | `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | | `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | | `name` | | `string` | `undefined` | | | `form` | | `HTMLFormElement` | `undefined` | | ### MdOutlinedButton <md-outlined-button> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | | `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | | `href` | `href` | `string` | `''` | The URL that the link button points to. | | `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). | | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | | `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | | `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | | `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | | `name` | | `string` | `undefined` | | | `form` | | `HTMLFormElement` | `undefined` | | ### MdTextButton <md-text-button> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | | `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).
Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. | | `href` | `href` | `string` | `''` | The URL that the link button points to. | | `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). | | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | | `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. | | `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). | | `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. | | `name` | | `string` | `undefined` | | | `form` | | `HTMLFormElement` | `undefined` | | ================================================ FILE: docs/components/checkbox.md ================================================ # Checkbox **This documentation is fully rendered on the [Material Web catalog](https://material-web.dev/components/checkbox/).** [Checkboxes](https://m3.material.io/components/checkbox) allow users to select one or more items from a set. Checkboxes can turn an option on or off. There's one type of checkbox in Material. Use this selection control when the user needs to select one or more options from a list. A list of burger additions represented with checkboxes * [Design article](https://m3.material.io/components/checkbox) * [API Documentation](#api) * [Source code](https://github.com/material-components/material-web/tree/main/checkbox) ## Usage Checkboxes may be standalone, pre-checked, or indeterminate. ![Three checkboxes in a row that are unselected, selected, and indeterminate](images/checkbox/usage.webp "Unselected, selected, and indeterminate checkboxes.") ```html ``` ### Label Associate a label with a checkbox using the ``, harness.element); const button = harness.element.querySelector('button'); expect(button).toBeDefined(); const buttonHarness = new Harness(button!); await buttonHarness.clickWithMouse(); expect(input.matches(':focus')).withContext('is input:focus').toBeFalse(); }); it('should not focus the input when disabled', async () => { const {harness, input} = await setupTest(); harness.element.disabled = true; await env.waitForStability(); harness.element.focus(); expect(input.matches(':focus')) .withContext('not input:focus') .toBeFalse(); }); it('focus() should focus input', async () => { const {harness, input} = await setupTest(); harness.element.focus(); expect(input.matches(':focus')).withContext('is input:focus').toBeTrue(); }); it('blur() should blur input', async () => { const {harness, input} = await setupTest(); harness.element.focus(); harness.element.blur(); expect(input.matches(':focus')) .withContext('not input:focus') .toBeFalse(); }); }); describe('input events', () => { it('should update the text field value', async () => { const {harness} = await setupTest(); await harness.inputValue('Value'); expect(harness.element.value).toEqual('Value'); }); it('should redispatch input events', async () => { const {harness, input} = await setupTest(); const inputHandler = jasmine.createSpy('inputHandler'); harness.element.addEventListener('input', inputHandler); const event = new InputEvent('input', { composed: true, bubbles: true, }); input.dispatchEvent(event); expect(inputHandler).toHaveBeenCalledWith(event); }); }); describe('resetting the input', () => { it('should set value back to default value', async () => { const {harness} = await setupTest(); harness.element.setAttribute('value', 'Default'); await env.waitForStability(); expect(harness.element.value).toBe('Default'); await harness.deleteValue(); await harness.inputValue('Value'); expect(harness.element.value).toBe('Value'); harness.element.reset(); expect(harness.element.value).toBe('Default'); }); it('should set value to empty string if there is no default', async () => { const {harness} = await setupTest(); await harness.inputValue('Value'); harness.element.reset(); expect(harness.element.value).toBe(''); }); }); describe('default value', () => { it('should update `value` before user input', async () => { const {harness} = await setupTest(); harness.element.setAttribute('value', 'Default'); await env.waitForStability(); expect(harness.element.value).toBe('Default'); }); it('should update `value` multiple times', async () => { const {harness} = await setupTest(); harness.element.setAttribute('value', 'First default'); await env.waitForStability(); harness.element.setAttribute('value', 'Second default'); await env.waitForStability(); expect(harness.element.value).toBe('Second default'); }); it('should NOT update `value` after user input', async () => { const {harness} = await setupTest(); harness.element.setAttribute('value', 'First default'); await env.waitForStability(); await harness.deleteValue(); await harness.inputValue('Value'); harness.element.setAttribute('value', 'Second default'); await env.waitForStability(); expect(harness.element.value).toBe('Value'); }); it('should render `value` instead of default value attribute when `value` changes', async () => { const {harness, input} = await setupTest(); harness.element.setAttribute('value', 'Default'); await env.waitForStability(); expect(input.value).toBe('Default'); harness.element.value = 'Value'; await env.waitForStability(); expect(input.value).toBe('Value'); harness.element.value = ''; await env.waitForStability(); expect(input.value).toBe(''); expect(harness.element.getAttribute('value')).toBe('Default'); }); }); describe('valueAsDate', () => { it('should get input.valueAsDate', async () => { const {testElement, input} = await setupTest(); const spy = spyOnProperty(input, 'valueAsDate', 'get').and.callThrough(); expect(testElement.valueAsDate).toBe(null); expect(spy).toHaveBeenCalled(); }); it('should set input.valueAsDate', async () => { const {testElement, input} = await setupTest(); testElement.type = 'date'; await env.waitForStability(); const spy = spyOnProperty(input, 'valueAsDate', 'set').and.callThrough(); const value = new Date(); testElement.valueAsDate = value; expect(spy).toHaveBeenCalledWith(value); }); it('should set value to string version of date', async () => { const {testElement} = await setupTest(); testElement.type = 'date'; await env.waitForStability(); const expectedValue = '2022-01-01'; testElement.valueAsDate = new Date(expectedValue); expect(testElement.value).toBe(expectedValue); }); }); describe('valueAsNumber', () => { it('should get input.valueAsNumber', async () => { const {testElement, input} = await setupTest(); const spy = spyOnProperty( input, 'valueAsNumber', 'get', ).and.callThrough(); expect(testElement.valueAsNumber).toEqual(NaN); expect(spy).toHaveBeenCalled(); }); it('should set input.valueAsNumber', async () => { const {testElement, input} = await setupTest(); testElement.type = 'number'; await env.waitForStability(); const spy = spyOnProperty( input, 'valueAsNumber', 'set', ).and.callThrough(); testElement.valueAsNumber = 100; expect(spy).toHaveBeenCalledWith(100); }); it('should set value to string version of number', async () => { const {testElement} = await setupTest(); testElement.type = 'number'; await env.waitForStability(); testElement.valueAsNumber = 100; expect(testElement.value).toBe('100'); }); }); describe('native validation', () => { describe('checkValidity()', () => { it('should return true if the text field is valid', async () => { const {testElement} = await setupTest(); expect(testElement.checkValidity()).toBeTrue(); }); it('should return false if the text field is invalid', async () => { const {testElement} = await setupTest(); testElement.required = true; expect(testElement.checkValidity()).toBeFalse(); }); it('should not dispatch an invalid event when valid', async () => { const {testElement} = await setupTest(); const invalidHandler = jasmine.createSpy('invalidHandler'); testElement.addEventListener('invalid', invalidHandler); testElement.checkValidity(); expect(invalidHandler).not.toHaveBeenCalled(); }); it('should dispatch an invalid event when invalid', async () => { const {testElement} = await setupTest(); const invalidHandler = jasmine.createSpy('invalidHandler'); testElement.addEventListener('invalid', invalidHandler); testElement.required = true; testElement.checkValidity(); expect(invalidHandler).toHaveBeenCalled(); }); it('should return validity during input event', async () => { const {testElement, harness} = await setupTest(); testElement.required = true; await harness.inputValue('Value'); let isValidDuringInput = true; testElement.addEventListener('input', () => { isValidDuringInput = testElement.validity.valid; }); await harness.deleteValue(); expect(isValidDuringInput) .withContext('validity.valid result during input event') .toBeFalse(); }); it('should return validity during change event', async () => { const {testElement, harness} = await setupTest(); testElement.required = true; await harness.inputValue('Value'); await harness.blur(); let isValidDuringChange = true; testElement.addEventListener( 'change', () => { isValidDuringChange = testElement.validity.valid; }, {once: true}, ); await harness.deleteValue(); await harness.blur(); expect(isValidDuringChange) .withContext('validity.valid result during change event') .toBeFalse(); }); }); describe('reportValidity()', () => { it('should return true when valid and set error to false', async () => { const {testElement} = await setupTest(); const valid = testElement.reportValidity(); expect(valid).withContext('valid').toBeTrue(); expect(await testElement.getHasError()) .withContext('testElement.getHasError()') .toBeFalse(); }); it('should return false when invalid and set error to true', async () => { const {testElement} = await setupTest(); testElement.required = true; const valid = testElement.reportValidity(); expect(valid).withContext('valid').toBeFalse(); expect(await testElement.getHasError()) .withContext('testElement.getHasError()') .toBeTrue(); }); it('should update error text to validationMessage', async () => { const {testElement} = await setupTest(); const errorMessage = 'Error message'; testElement.setCustomValidity(errorMessage); testElement.reportValidity(); expect(testElement.validationMessage).toEqual(errorMessage); expect(await testElement.getErrorTextValue()).toEqual(errorMessage); }); it('should not update error or error text if invalid event is canceled', async () => { const {testElement} = await setupTest(); testElement.addEventListener('invalid', (e) => { e.preventDefault(); }); const errorMessage = 'Error message'; testElement.setCustomValidity(errorMessage); const valid = testElement.reportValidity(); expect(valid).withContext('valid').toBeFalse(); expect(await testElement.getHasError()) .withContext('testElement.getHasError()') .toBeFalse(); expect(await testElement.getErrorTextValue()).toEqual(''); }); it('should be overridden by error and errorText', async () => { const {testElement} = await setupTest(); testElement.error = true; const errorMessage = 'Error message'; testElement.errorText = errorMessage; const valid = testElement.reportValidity(); expect(valid).withContext('native validity should be valid').toBeTrue(); expect(await testElement.getHasError()) .withContext('testElement.getHasError()') .toBeTrue(); expect(await testElement.getErrorTextValue()).toEqual(errorMessage); }); }); describe('setCustomValidity()', () => { it('should set a custom validationMessage', async () => { const {testElement} = await setupTest(); const errorMessage = 'Error message'; testElement.setCustomValidity(errorMessage); expect(testElement.validationMessage) .withContext('validationMessage') .toEqual(errorMessage); }); }); describe('minLength and maxLength', () => { it('should set attribute on input', async () => { const {testElement, input} = await setupTest(); testElement.minLength = 2; testElement.maxLength = 5; await env.waitForStability(); expect(input.getAttribute('minLength')) .withContext('minLength') .toEqual('2'); expect(input.getAttribute('maxLength')) .withContext('maxLength') .toEqual('5'); }); it('should not set attribute if value is -1', async () => { const {testElement, input} = await setupTest(); testElement.minLength = 2; testElement.maxLength = 5; await env.waitForStability(); expect(input.hasAttribute('minlength')) .withContext('should have minlength') .toBeTrue(); expect(input.hasAttribute('maxlength')) .withContext('should have maxlength') .toBeTrue(); testElement.minLength = -1; testElement.maxLength = -1; await env.waitForStability(); expect(input.hasAttribute('minlength')) .withContext('should not have minlength') .toBeFalse(); expect(input.hasAttribute('maxlength')) .withContext('should not have maxlength') .toBeFalse(); }); }); describe('min, max, and step', () => { it('should set attribute on input', async () => { const {testElement, input} = await setupTest(); testElement.type = 'number'; testElement.min = '2'; testElement.max = '5'; testElement.step = '1'; await env.waitForStability(); expect(input.getAttribute('min')).withContext('min').toEqual('2'); expect(input.getAttribute('max')).withContext('max').toEqual('5'); expect(input.getAttribute('step')).withContext('step').toEqual('1'); }); it('should not set attribute if value is empty', async () => { const {testElement, input} = await setupTest(); testElement.type = 'number'; testElement.min = '2'; testElement.max = '5'; testElement.step = '1'; await env.waitForStability(); expect(input.hasAttribute('min')) .withContext('should have min') .toBeTrue(); expect(input.hasAttribute('max')) .withContext('should have max') .toBeTrue(); expect(input.hasAttribute('step')) .withContext('should have step') .toBeTrue(); testElement.min = ''; testElement.max = ''; testElement.step = ''; await env.waitForStability(); expect(input.hasAttribute('min')) .withContext('should not have min') .toBeFalse(); expect(input.hasAttribute('max')) .withContext('should not have max') .toBeFalse(); expect(input.hasAttribute('step')) .withContext('should not have step') .toBeFalse(); }); }); describe('pattern', () => { it('should set attribute on input', async () => { const {testElement, input} = await setupTest(); testElement.pattern = 'foo'; await env.waitForStability(); expect(input.getAttribute('pattern')) .withContext('pattern') .toEqual('foo'); }); it('should not set attribute if value is empty', async () => { const {testElement, input} = await setupTest(); testElement.pattern = 'foo'; await env.waitForStability(); expect(input.hasAttribute('pattern')) .withContext('should have pattern') .toBeTrue(); testElement.pattern = ''; await env.waitForStability(); expect(input.hasAttribute('pattern')) .withContext('should not have pattern') .toBeFalse(); }); }); }); describe('stepUp()', () => { it('should increment the value by `step`', async () => { const {testElement} = await setupTest(); testElement.type = 'number'; testElement.valueAsNumber = 10; testElement.step = '5'; testElement.stepUp(); expect(testElement.valueAsNumber).toEqual(15); }); }); describe('stepDown()', () => { it('should decrement the value by `step`', async () => { const {testElement} = await setupTest(); testElement.type = 'number'; testElement.valueAsNumber = 10; testElement.step = '5'; testElement.stepDown(); expect(testElement.valueAsNumber).toEqual(5); }); }); describe('forms', () => { createFormTests({ queryControl: (root) => root.querySelector('md-test-text-field'), valueTests: [ { name: 'unnamed', render: () => html``, assertValue(formData) { expect(formData) .withContext('should not add anything to form without a name') .toHaveSize(0); }, }, { name: 'should add empty value', render: () => html``, assertValue(formData) { expect(formData.get('input')).toBe(''); }, }, { name: 'with value', render: () => html``, assertValue(formData) { expect(formData.get('input')).toBe('Value'); }, }, { name: 'disabled', render: () => html``, assertValue(formData) { expect(formData) .withContext('should not add anything to form when disabled') .toHaveSize(0); }, }, ], resetTests: [ { name: 'reset to empty value', render: () => html``, change(textField) { textField.value = 'Value'; }, assertReset(textField) { expect(textField.value) .withContext('textField.value after reset') .toBe(''); }, }, { name: 'reset value', render: () => html``, change(textField) { textField.value = 'Second'; }, assertReset(textField) { expect(textField.value) .withContext('textField.value after reset') .toBe('First'); }, }, ], restoreTests: [ { name: 'restore value', render: () => html``, assertRestored(textField) { expect(textField.value) .withContext('textField.value after restore') .toBe('Value'); }, }, ], }); }); }); ================================================ FILE: textfield/outlined-text-field.ts ================================================ /** * @license * Copyright 2021 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import '../field/outlined-field.js'; import {CSSResultOrNative} from 'lit'; import {customElement} from 'lit/decorators.js'; import {literal} from 'lit/static-html.js'; import {styles as outlinedStyles} from './internal/outlined-styles.js'; import {OutlinedTextField} from './internal/outlined-text-field.js'; import {styles as sharedStyles} from './internal/shared-styles.js'; export {type TextFieldType} from './internal/text-field.js'; declare global { interface HTMLElementTagNameMap { 'md-outlined-text-field': MdOutlinedTextField; } } /** * TODO(b/228525797): Add docs * @final * @suppress {visibility} */ @customElement('md-outlined-text-field') export class MdOutlinedTextField extends OutlinedTextField { static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles]; protected override readonly fieldTag = literal`md-outlined-field`; } ================================================ FILE: textfield/outlined-text-field_test.ts ================================================ /** * @license * Copyright 2023 Google LLC * SPDX-License-Identifier: Apache-2.0 */ // import 'jasmine'; (google3-only) import {createTokenTests} from '../testing/tokens.js'; import {MdOutlinedTextField} from './outlined-text-field.js'; describe('', () => { describe('.styles', () => { createTokenTests(MdOutlinedTextField.styles); }); }); ================================================ FILE: tokens/_index.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @forward 'md-comp-assist-chip' as md-comp-assist-chip-*; @forward 'md-comp-badge' as md-comp-badge-*; @forward 'md-comp-checkbox' as md-comp-checkbox-*; @forward 'md-comp-circular-progress' as md-comp-circular-progress-*; @forward 'md-comp-dialog' as md-comp-dialog-*; @forward 'md-comp-divider' as md-comp-divider-*; @forward 'md-comp-elevated-button' as md-comp-elevated-button-*; @forward 'md-comp-elevated-card' as md-comp-elevated-card-*; @forward 'md-comp-elevation' as md-comp-elevation-*; @forward 'md-comp-fab' as md-comp-fab-*; @forward 'md-comp-fab-branded' as md-comp-fab-branded-*; @forward 'md-comp-filled-button' as md-comp-filled-button-*; @forward 'md-comp-filled-card' as md-comp-filled-card-*; @forward 'md-comp-filled-field' as md-comp-filled-field-*; @forward 'md-comp-filled-icon-button' as md-comp-filled-icon-button-*; @forward 'md-comp-filled-select' as md-comp-filled-select-*; @forward 'md-comp-filled-text-field' as md-comp-filled-text-field-*; @forward 'md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*; @forward 'md-comp-filled-tonal-icon-button' as md-comp-filled-tonal-icon-button-*; @forward 'md-comp-filter-chip' as md-comp-filter-chip-*; @forward 'md-comp-focus-ring' as md-comp-focus-ring-*; @forward 'md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*; @forward 'md-comp-icon' as md-comp-icon-*; @forward 'md-comp-icon-button' as md-comp-icon-button-*; @forward 'md-comp-input-chip' as md-comp-input-chip-*; @forward 'md-comp-item' as md-comp-item-*; @forward 'md-comp-linear-progress' as md-comp-linear-progress-*; @forward 'md-comp-list' as md-comp-list-*; @forward 'md-comp-list-item' as md-comp-list-item-*; @forward 'md-comp-menu' as md-comp-menu-*; @forward 'md-comp-menu-item' as md-comp-menu-item-*; @forward 'md-comp-navigation-bar' as md-comp-navigation-bar-*; @forward 'md-comp-navigation-drawer' as md-comp-navigation-drawer-*; @forward 'md-comp-outlined-button' as md-comp-outlined-button-*; @forward 'md-comp-outlined-card' as md-comp-outlined-card-*; @forward 'md-comp-outlined-field' as md-comp-outlined-field-*; @forward 'md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*; @forward 'md-comp-outlined-segmented-button' as md-comp-outlined-segmented-button-*; @forward 'md-comp-outlined-select' as md-comp-outlined-select-*; @forward 'md-comp-outlined-text-field' as md-comp-outlined-text-field-*; @forward 'md-comp-primary-tab' as md-comp-primary-tab-*; @forward 'md-comp-radio' as md-comp-radio-*; @forward 'md-comp-ripple' as md-comp-ripple-*; @forward 'md-comp-secondary-tab' as md-comp-secondary-tab-*; @forward 'md-comp-slider' as md-comp-slider-*; @forward 'md-comp-suggestion-chip' as md-comp-suggestion-chip-*; @forward 'md-comp-switch' as md-comp-switch-*; @forward 'md-comp-test-table' as md-comp-test-table-*; @forward 'md-comp-text-button' as md-comp-text-button-*; @forward 'md-ref-palette' as md-ref-palette-*; @forward 'md-ref-typeface' as md-ref-typeface-*; @forward 'md-sys-color' as md-sys-color-*; @forward 'md-sys-elevation' as md-sys-elevation-*; @forward 'md-sys-motion' as md-sys-motion-*; @forward 'md-sys-shape' as md-sys-shape-*; @forward 'md-sys-state' as md-sys-state-*; @forward 'md-sys-typescale' as md-sys-typescale-*; // go/keep-sorted end ================================================ FILE: tokens/_md-comp-assist-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-assist-chip'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-icon-color', 'disabled-leading-icon-opacity', 'disabled-outline-color', 'disabled-outline-opacity', 'elevated-container-color', 'elevated-container-elevation', 'elevated-container-shadow-color', 'elevated-disabled-container-color', 'elevated-disabled-container-elevation', 'elevated-disabled-container-opacity', 'elevated-focus-container-elevation', 'elevated-hover-container-elevation', 'elevated-pressed-container-elevation', 'focus-label-text-color', 'focus-leading-icon-color', 'focus-outline-color', 'hover-label-text-color', 'hover-leading-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-label-space', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-icon-color', 'leading-space', 'outline-color', 'outline-width', 'pressed-label-text-color', 'pressed-leading-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'trailing-space', 'with-leading-icon-leading-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'container-elevation', 'dragged-container-elevation', 'dragged-label-text-color', 'dragged-leading-icon-color', 'dragged-state-layer-color', 'dragged-state-layer-opacity', 'focus-state-layer-color', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-assist-chip.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( 'leading-space': if($exclude-hardcoded-values, null, 16px), 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'icon-label-space': if($exclude-hardcoded-values, null, 8px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 8px), ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "flat-*" prefix (b/275577569) 'flat-container-elevation': 'container-elevation', 'flat-disabled-outline-color': 'disabled-outline-color', 'flat-disabled-outline-opacity': 'disabled-outline-opacity', 'flat-focus-outline-color': 'focus-outline-color', 'flat-outline-color': 'outline-color', 'flat-outline-width': 'outline-width', // Remove "with-*" prefixes (b/273534858) // Rename "icon" to "leading-icon" (b/275577569) 'with-icon-disabled-icon-color': 'disabled-leading-icon-color', 'with-icon-disabled-icon-opacity': 'disabled-leading-icon-opacity', 'with-icon-dragged-icon-color': 'dragged-leading-icon-color', 'with-icon-focus-icon-color': 'focus-leading-icon-color', 'with-icon-hover-icon-color': 'hover-leading-icon-color', 'with-icon-icon-color': 'leading-icon-color', 'with-icon-icon-size': 'icon-size', 'with-icon-pressed-icon-color': 'pressed-leading-icon-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-assist-chip-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-assist-chip-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-badge.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-badge'; // go/keep-sorted end $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); $_unsupported-tokens: ('large-label-text-tracking', 'large-label-text-type'); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-badge.values($deps, $exclude-hardcoded-values); $tokens: map.remove($tokens, $_unsupported-tokens...); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-badge-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-checkbox.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-checkbox'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'container-size', 'disabled-container-opacity', 'disabled-outline-color', 'disabled-outline-width', 'focus-outline-color', 'focus-outline-width', 'hover-outline-color', 'hover-outline-width', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-size', 'outline-color', 'outline-width', 'pressed-outline-color', 'pressed-outline-width', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'selected-container-color', 'selected-disabled-container-color', 'selected-disabled-container-opacity', 'selected-disabled-icon-color', 'selected-focus-container-color', 'selected-focus-icon-color', 'selected-hover-container-color', 'selected-hover-icon-color', 'selected-hover-state-layer-color', 'selected-hover-state-layer-opacity', 'selected-icon-color', 'selected-pressed-container-color', 'selected-pressed-icon-color', 'selected-pressed-state-layer-color', 'selected-pressed-state-layer-opacity', 'state-layer-shape', 'state-layer-size', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'error-focus-outline-color', 'error-focus-state-layer-color', 'error-focus-state-layer-opacity', 'error-hover-outline-color', 'error-hover-state-layer-color', 'error-hover-state-layer-opacity', 'error-outline-color', 'error-pressed-outline-color', 'error-pressed-state-layer-color', 'error-pressed-state-layer-opacity', 'focus-state-layer-color', 'focus-state-layer-opacity', 'selected-disabled-container-outline-width', 'selected-error-container-color', 'selected-error-focus-container-color', 'selected-error-focus-icon-color', 'selected-error-hover-container-color', 'selected-error-hover-icon-color', 'selected-error-icon-color', 'selected-error-pressed-container-color', 'selected-error-pressed-icon-color', 'selected-focus-outline-width', 'selected-focus-state-layer-color', 'selected-focus-state-layer-opacity', 'selected-hover-outline-width', 'selected-outline-width', 'selected-pressed-outline-width', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-checkbox.values($deps, $exclude-hardcoded-values); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove default "unselected" prefix (b/292244480) 'unselected-disabled-container-opacity': 'disabled-container-opacity', 'unselected-disabled-outline-color': 'disabled-outline-color', 'unselected-disabled-outline-width': 'disabled-outline-width', 'unselected-error-focus-outline-color': 'error-focus-outline-color', 'unselected-error-hover-outline-color': 'error-hover-outline-color', 'unselected-error-outline-color': 'error-outline-color', 'unselected-error-pressed-outline-color': 'error-pressed-outline-color', 'unselected-focus-outline-color': 'focus-outline-color', 'unselected-focus-outline-width': 'focus-outline-width', 'unselected-hover-outline-color': 'hover-outline-color', 'unselected-hover-outline-width': 'hover-outline-width', 'unselected-hover-state-layer-color': 'hover-state-layer-color', 'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity', 'unselected-outline-color': 'outline-color', 'unselected-outline-width': 'outline-width', 'unselected-pressed-outline-color': 'pressed-outline-color', 'unselected-pressed-outline-width': 'pressed-outline-width', 'unselected-pressed-state-layer-color': 'pressed-state-layer-color', 'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity', 'unselected-focus-state-layer-color': 'focus-state-layer-color', 'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-checkbox-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-checkbox-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-circular-progress.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:math'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'versions/v0_192/md-comp-circular-progress-indicator'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'active-indicator-color', 'active-indicator-width', 'four-color-active-indicator-four-color', 'four-color-active-indicator-one-color', 'four-color-active-indicator-three-color', 'four-color-active-indicator-two-color', 'size', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start // must be circular 'active-indicator-shape', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-circular-progress-indicator.values( $deps, $exclude-hardcoded-values ), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens ); @if not $exclude-hardcoded-values { // must be set as a raw % for compatibility between rendering border or svg. $width: map.get($tokens, 'active-indicator-width'); $size: map.get($tokens, 'size'); $container-padding: 4px; $size-without-padding: $size - $container-padding - $container-padding; $tokens: map.set( $tokens, 'active-indicator-width', math.div($width, $size-without-padding) * 100 ); } @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-circular-progress-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-dialog.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-dialog'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'headline-color', 'headline-font', 'headline-line-height', 'headline-size', 'headline-weight', 'icon-color', 'icon-size', 'supporting-text-color', 'supporting-text-font', 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-weight', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); // Note: currently ignoring tokens for `action-*-label-text` and // `action-*-state-layer` since actions are spec'd as standard text buttons. $unsupported-tokens: ( // go/keep-sorted start 'action-focus-label-text-color', 'action-focus-state-layer-color', 'action-focus-state-layer-opacity', 'action-hover-label-text-color', 'action-hover-state-layer-color', 'action-hover-state-layer-opacity', 'action-label-text-color', 'action-label-text-font', 'action-label-text-line-height', 'action-label-text-size', 'action-label-text-tracking', 'action-label-text-type', 'action-label-text-weight', 'action-pressed-label-text-color', 'action-pressed-state-layer-color', 'action-pressed-state-layer-opacity', 'container-elevation', // Unused without a shadow color 'headline-tracking', 'headline-type', 'supporting-text-tracking', 'supporting-text-type', // go/keep-sorted end ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-dialog.values($deps, $exclude-hardcoded-values); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "with-*" prefixes (b/273534858) 'with-icon-icon-color': 'icon-color', 'with-icon-icon-size': 'icon-size' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-dialog-container-shape, #{$value}); } $tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-divider.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'versions/v0_192/md-comp-divider'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'color', 'thickness', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-divider.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-divider-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-elevated-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-elevated-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-height', 'container-shadow-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-container-color', 'disabled-container-elevation', 'disabled-container-opacity', 'disabled-icon-color', 'disabled-icon-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'focus-container-elevation', 'focus-icon-color', 'focus-label-text-color', 'hover-container-elevation', 'hover-icon-color', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-space', 'pressed-container-elevation', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'trailing-space', 'with-leading-icon-leading-space', 'with-leading-icon-trailing-space', 'with-trailing-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-elevated-button.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( // b/198759625 - Remove once spacing tokens are formally added // go/keep-sorted start 'leading-space': if($exclude-hardcoded-values, null, 24px), 'trailing-space': if($exclude-hardcoded-values, null, 24px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 16px), 'with-leading-icon-trailing-space': if($exclude-hardcoded-values, null, 24px), 'with-trailing-icon-leading-space': if($exclude-hardcoded-values, null, 24px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "with-*" prefixes (b/273534858) 'with-icon-disabled-icon-color': 'disabled-icon-color', 'with-icon-disabled-icon-opacity': 'disabled-icon-opacity', 'with-icon-focus-icon-color': 'focus-icon-color', 'with-icon-hover-icon-color': 'hover-icon-color', 'with-icon-icon-color': 'icon-color', 'with-icon-icon-size': 'icon-size', 'with-icon-pressed-icon-color': 'pressed-icon-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-elevated-button-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-elevated-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-elevated-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-elevated-card'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-shadow-color', 'container-shape', // go/keep-sorted end ); // TODO(b/307362112): Add interactive card tokens (hover, focus, pressed) // TODO(b/307361748): Add disabled cards tokens. $unsupported-tokens: ( // go/keep-sorted start 'disabled-container-color', 'disabled-container-elevation', 'disabled-container-opacity', 'dragged-container-elevation', 'dragged-state-layer-color', 'dragged-state-layer-opacity', 'focus-container-elevation', 'focus-state-layer-color', 'focus-state-layer-opacity', 'hover-container-elevation', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'pressed-container-elevation', 'pressed-state-layer-color', 'pressed-state-layer-opacity', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-elevated-card.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-elevated-card-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-elevation.scss ================================================ // // Copyright 2022 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'level', 'shadow-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: ( 'level': map.get($deps, 'md-sys-elevation', 'level0'), 'shadow-color': map.get($deps, 'md-sys-color', 'shadow'), ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-elevation-#{$token}, #{$value}) ); } } @return validate.values($tokens, $supported-tokens: $supported-tokens); } ================================================ FILE: tokens/_md-comp-fab-branded.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-extended-fab-branded'; @use 'versions/v0_192/md-comp-fab-branded'; @use 'versions/v0_192/md-comp-fab-branded-large'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-height', 'container-shadow-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'container-width', 'focus-container-elevation', 'focus-label-text-color', 'hover-container-elevation', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'large-container-height', 'large-container-shape', 'large-container-shape-end-end', 'large-container-shape-end-start', 'large-container-shape-start-end', 'large-container-shape-start-start', 'large-container-width', 'large-icon-size', 'lowered-container-color', 'lowered-container-elevation', 'lowered-focus-container-elevation', 'lowered-hover-container-elevation', 'lowered-pressed-container-elevation', 'pressed-container-elevation', 'pressed-label-text-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', // go/keep-sorted end ); @function _get-new-tokens($deps, $exclude-hardcoded-values) { $large-tokens: md-comp-fab-branded-large.values( $deps, $exclude-hardcoded-values ); $extended-branded-tokens: md-comp-extended-fab-branded.values( $deps, $exclude-hardcoded-values ); @return ( 'focus-label-text-color': map.get($extended-branded-tokens, 'focus-label-text-color'), 'hover-label-text-color': map.get($extended-branded-tokens, 'hover-label-text-color'), 'label-text-color': map.get($extended-branded-tokens, 'label-text-color'), 'label-text-font': map.get($extended-branded-tokens, 'label-text-font'), 'label-text-size': map.get($extended-branded-tokens, 'label-text-size'), 'label-text-line-height': map.get($extended-branded-tokens, 'label-text-line-height'), 'label-text-weight': map.get($extended-branded-tokens, 'label-text-weight'), 'large-container-height': map.get($large-tokens, 'container-height'), 'large-container-shape': map.get($large-tokens, 'container-shape'), 'large-container-width': map.get($large-tokens, 'container-width'), 'large-icon-size': map.get($large-tokens, 'icon-size'), 'pressed-label-text-color': map.get($extended-branded-tokens, 'pressed-label-text-color') ); } $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-fab-branded.values($deps, $exclude-hardcoded-values); $new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values); $new-tokens: map.merge( $new-tokens, shape.get-new-logical-shape-tokens($tokens, 'container-shape') ); $new-tokens: map.merge( $new-tokens, shape.get-new-logical-shape-tokens($new-tokens, 'large-container-shape') ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $shape-tokens: ('container-shape', 'large-container-shape'); @each $shape-token in $shape-tokens { @if string.index($token, '#{$shape-token}-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-fab-branded-#{$shape-token}, #{$value}); } } $tokens: map.set( $tokens, $token, var(--md-fab-branded-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-fab.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-extended-fab-primary'; @use 'versions/v0_192/md-comp-extended-fab-secondary'; @use 'versions/v0_192/md-comp-extended-fab-surface'; @use 'versions/v0_192/md-comp-extended-fab-tertiary'; @use 'versions/v0_192/md-comp-fab-primary'; @use 'versions/v0_192/md-comp-fab-secondary'; @use 'versions/v0_192/md-comp-fab-surface'; @use 'versions/v0_192/md-comp-fab-surface-large'; @use 'versions/v0_192/md-comp-fab-surface-small'; @use 'versions/v0_192/md-comp-fab-tertiary'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-height', 'container-shadow-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'container-width', 'focus-container-elevation', 'focus-icon-color', 'focus-label-text-color', 'hover-container-elevation', 'hover-icon-color', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'large-container-height', 'large-container-shape', 'large-container-shape-end-end', 'large-container-shape-end-start', 'large-container-shape-start-end', 'large-container-shape-start-start', 'large-container-width', 'large-icon-size', 'lowered-container-color', 'lowered-container-elevation', 'lowered-focus-container-elevation', 'lowered-hover-container-elevation', 'lowered-pressed-container-elevation', 'pressed-container-elevation', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'primary-container-color', 'primary-focus-icon-color', 'primary-focus-label-text-color', 'primary-hover-icon-color', 'primary-hover-label-text-color', 'primary-hover-state-layer-color', 'primary-icon-color', 'primary-label-text-color', 'primary-pressed-icon-color', 'primary-pressed-label-text-color', 'primary-pressed-state-layer-color', 'secondary-container-color', 'secondary-focus-icon-color', 'secondary-focus-label-text-color', 'secondary-hover-icon-color', 'secondary-hover-label-text-color', 'secondary-hover-state-layer-color', 'secondary-icon-color', 'secondary-label-text-color', 'secondary-pressed-icon-color', 'secondary-pressed-label-text-color', 'secondary-pressed-state-layer-color', 'small-container-height', 'small-container-shape', 'small-container-shape-end-end', 'small-container-shape-end-start', 'small-container-shape-start-end', 'small-container-shape-start-start', 'small-container-width', 'small-icon-size', 'tertiary-container-color', 'tertiary-focus-icon-color', 'tertiary-focus-label-text-color', 'tertiary-hover-icon-color', 'tertiary-hover-label-text-color', 'tertiary-hover-state-layer-color', 'tertiary-icon-color', 'tertiary-label-text-color', 'tertiary-pressed-icon-color', 'tertiary-pressed-label-text-color', 'tertiary-pressed-state-layer-color', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', // go/keep-sorted end ); @function _get-new-tokens($deps, $exclude-hardcoded-values) { $large-tokens: md-comp-fab-surface-large.values( $deps, $exclude-hardcoded-values ); $small-tokens: md-comp-fab-surface-small.values( $deps, $exclude-hardcoded-values ); $primary-tokens: md-comp-fab-primary.values($deps, $exclude-hardcoded-values); $secondary-tokens: md-comp-fab-secondary.values( $deps, $exclude-hardcoded-values ); $tertiary-tokens: md-comp-fab-tertiary.values( $deps, $exclude-hardcoded-values ); $extended-surface-tokens: md-comp-extended-fab-surface.values( $deps, $exclude-hardcoded-values ); $extended-primary-tokens: md-comp-extended-fab-primary.values( $deps, $exclude-hardcoded-values ); $extended-secondary-tokens: md-comp-extended-fab-secondary.values( $deps, $exclude-hardcoded-values ); $extended-tertiary-tokens: md-comp-extended-fab-tertiary.values( $deps, $exclude-hardcoded-values ); @return ( // go/keep-sorted start 'focus-label-text-color': map.get($extended-surface-tokens, 'focus-label-text-color'), 'hover-label-text-color': map.get($extended-surface-tokens, 'hover-label-text-color'), 'label-text-color': map.get($extended-surface-tokens, 'label-text-color'), 'label-text-font': map.get($extended-surface-tokens, 'label-text-font'), 'label-text-line-height': map.get($extended-surface-tokens, 'label-text-line-height'), 'label-text-size': map.get($extended-surface-tokens, 'label-text-size'), 'label-text-weight': map.get($extended-surface-tokens, 'label-text-weight'), 'large-container-height': map.get($large-tokens, 'container-height'), 'large-container-shape': map.get($large-tokens, 'container-shape'), 'large-container-width': map.get($large-tokens, 'container-width'), 'large-icon-size': map.get($large-tokens, 'icon-size'), 'pressed-label-text-color': map.get($extended-surface-tokens, 'pressed-label-text-color'), 'primary-container-color': map.get($primary-tokens, 'container-color'), 'primary-focus-icon-color': map.get($primary-tokens, 'focus-icon-color'), 'primary-focus-label-text-color': map.get($extended-primary-tokens, 'focus-label-text-color'), 'primary-hover-icon-color': map.get($primary-tokens, 'hover-icon-color'), 'primary-hover-label-text-color': map.get($extended-primary-tokens, 'hover-label-text-color'), 'primary-hover-state-layer-color': map.get($primary-tokens, 'hover-state-layer-color'), 'primary-icon-color': map.get($primary-tokens, 'icon-color'), 'primary-label-text-color': map.get($extended-primary-tokens, 'label-text-color'), 'primary-pressed-icon-color': map.get($primary-tokens, 'pressed-icon-color'), 'primary-pressed-label-text-color': map.get($extended-primary-tokens, 'pressed-label-text-color'), 'primary-pressed-state-layer-color': map.get($primary-tokens, 'pressed-state-layer-color'), 'secondary-container-color': map.get($secondary-tokens, 'container-color'), 'secondary-focus-icon-color': map.get($secondary-tokens, 'focus-icon-color'), 'secondary-focus-label-text-color': map.get($extended-secondary-tokens, 'focus-label-text-color'), 'secondary-hover-icon-color': map.get($secondary-tokens, 'hover-icon-color'), 'secondary-hover-label-text-color': map.get($extended-secondary-tokens, 'hover-label-text-color'), 'secondary-hover-state-layer-color': map.get($secondary-tokens, 'hover-state-layer-color'), 'secondary-icon-color': map.get($secondary-tokens, 'icon-color'), 'secondary-label-text-color': map.get($extended-secondary-tokens, 'label-text-color'), 'secondary-pressed-icon-color': map.get($secondary-tokens, 'pressed-icon-color'), 'secondary-pressed-label-text-color': map.get($extended-secondary-tokens, 'pressed-label-text-color'), 'secondary-pressed-state-layer-color': map.get($secondary-tokens, 'pressed-state-layer-color'), 'small-container-height': map.get($small-tokens, 'container-height'), 'small-container-shape': map.get($small-tokens, 'container-shape'), 'small-container-width': map.get($small-tokens, 'container-width'), 'small-icon-size': map.get($small-tokens, 'icon-size'), 'tertiary-container-color': map.get($tertiary-tokens, 'container-color'), 'tertiary-focus-icon-color': map.get($tertiary-tokens, 'focus-icon-color'), 'tertiary-focus-label-text-color': map.get($extended-tertiary-tokens, 'focus-label-text-color'), 'tertiary-hover-icon-color': map.get($tertiary-tokens, 'hover-icon-color'), 'tertiary-hover-label-text-color': map.get($extended-tertiary-tokens, 'hover-label-text-color'), 'tertiary-hover-state-layer-color': map.get($tertiary-tokens, 'hover-state-layer-color'), 'tertiary-icon-color': map.get($tertiary-tokens, 'icon-color'), 'tertiary-label-text-color': map.get($extended-tertiary-tokens, 'label-text-color'), 'tertiary-pressed-icon-color': map.get($tertiary-tokens, 'pressed-icon-color'), 'tertiary-pressed-label-text-color': map.get($extended-tertiary-tokens, 'pressed-label-text-color'), 'tertiary-pressed-state-layer-color': map.get($tertiary-tokens, 'pressed-state-layer-color'), // go/keep-sorted end ); } $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-fab-surface.values($deps, $exclude-hardcoded-values); $new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values); $new-tokens: map.merge( $new-tokens, shape.get-new-logical-shape-tokens($tokens, 'container-shape') ); $new-tokens: map.merge( $new-tokens, shape.get-new-logical-shape-tokens( $new-tokens, 'large-container-shape', 'small-container-shape' ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $shape-tokens: ( 'container-shape', 'large-container-shape', 'small-container-shape' ); @each $shape-token in $shape-tokens { @if string.index($token, '#{$shape-token}-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-fab-#{$shape-token}, #{$value}); } } $tokens: map.set($tokens, $token, var(--md-fab-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filled-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-filled-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-height', 'container-shadow-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-container-color', 'disabled-container-elevation', 'disabled-container-opacity', 'disabled-icon-color', 'disabled-icon-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'focus-container-elevation', 'focus-icon-color', 'focus-label-text-color', 'hover-container-elevation', 'hover-icon-color', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-space', 'pressed-container-elevation', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'trailing-space', 'with-leading-icon-leading-space', 'with-leading-icon-trailing-space', 'with-trailing-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-filled-button.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( // b/198759625 - Remove once spacing tokens are formally added // go/keep-sorted start 'leading-space': if($exclude-hardcoded-values, null, 24px), 'trailing-space': if($exclude-hardcoded-values, null, 24px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 16px), 'with-leading-icon-trailing-space': if($exclude-hardcoded-values, null, 24px), 'with-trailing-icon-leading-space': if($exclude-hardcoded-values, null, 24px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "with-*" prefixes (b/273534858) 'with-icon-disabled-icon-color': 'disabled-icon-color', 'with-icon-disabled-icon-opacity': 'disabled-icon-opacity', 'with-icon-focus-icon-color': 'focus-icon-color', 'with-icon-hover-icon-color': 'hover-icon-color', 'with-icon-icon-color': 'icon-color', 'with-icon-icon-size': 'icon-size', 'with-icon-pressed-icon-color': 'pressed-icon-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-filled-button-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-filled-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filled-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-filled-card'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-shadow-color', 'container-shape', // go/keep-sorted end ); // TODO(b/307362112): Add interactive card tokens (hover, focus, pressed) // TODO(b/307361748): Add disabled cards tokens. $unsupported-tokens: ( // go/keep-sorted start 'disabled-container-color', 'disabled-container-elevation', 'disabled-container-opacity', 'dragged-container-elevation', 'dragged-state-layer-color', 'dragged-state-layer-opacity', 'focus-container-elevation', 'focus-state-layer-color', 'focus-state-layer-opacity', 'hover-container-elevation', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'pressed-container-elevation', 'pressed-state-layer-color', 'pressed-state-layer-opacity', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-filled-card.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-filled-card-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filled-field.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-filled-text-field'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'active-indicator-color', 'active-indicator-height', 'bottom-space', 'container-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'content-color', 'content-font', 'content-line-height', 'content-size', 'content-space', 'content-weight', 'disabled-active-indicator-color', 'disabled-active-indicator-height', 'disabled-active-indicator-opacity', 'disabled-container-color', 'disabled-container-opacity', 'disabled-content-color', 'disabled-content-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-content-color', 'disabled-leading-content-opacity', 'disabled-supporting-text-color', 'disabled-supporting-text-opacity', 'disabled-trailing-content-color', 'disabled-trailing-content-opacity', 'error-active-indicator-color', 'error-content-color', 'error-focus-active-indicator-color', 'error-focus-content-color', 'error-focus-label-text-color', 'error-focus-leading-content-color', 'error-focus-supporting-text-color', 'error-focus-trailing-content-color', 'error-hover-active-indicator-color', 'error-hover-content-color', 'error-hover-label-text-color', 'error-hover-leading-content-color', 'error-hover-state-layer-color', 'error-hover-state-layer-opacity', 'error-hover-supporting-text-color', 'error-hover-trailing-content-color', 'error-label-text-color', 'error-leading-content-color', 'error-supporting-text-color', 'error-trailing-content-color', 'focus-active-indicator-color', 'focus-active-indicator-height', 'focus-content-color', 'focus-label-text-color', 'focus-leading-content-color', 'focus-supporting-text-color', 'focus-trailing-content-color', 'hover-active-indicator-color', 'hover-active-indicator-height', 'hover-content-color', 'hover-label-text-color', 'hover-leading-content-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'hover-supporting-text-color', 'hover-trailing-content-color', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-populated-line-height', 'label-text-populated-size', 'label-text-size', 'label-text-weight', 'leading-content-color', 'leading-space', 'supporting-text-color', 'supporting-text-font', 'supporting-text-leading-space', 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-top-space', 'supporting-text-trailing-space', 'supporting-text-weight', 'top-space', 'trailing-content-color', 'trailing-space', 'with-label-bottom-space', 'with-label-top-space', 'with-leading-content-leading-space', 'with-trailing-content-trailing-space', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $text-field: md-comp-filled-text-field.values( $deps, $exclude-hardcoded-values ); $tokens: ( // go/keep-sorted start 'active-indicator-color': map.get($text-field, 'active-indicator-color'), 'active-indicator-height': map.get($text-field, 'active-indicator-height'), 'bottom-space': if($exclude-hardcoded-values, null, 16px), 'container-color': map.get($text-field, 'container-color'), 'container-shape': map.get($text-field, 'container-shape'), 'content-color': map.get($text-field, 'input-text-color'), 'content-font': map.get($text-field, 'input-text-font'), 'content-line-height': map.get($text-field, 'input-text-line-height'), 'content-size': map.get($text-field, 'input-text-size'), 'content-space': if($exclude-hardcoded-values, null, 16px), 'content-weight': map.get($text-field, 'input-text-weight'), 'disabled-active-indicator-color': map.get($text-field, 'disabled-active-indicator-color'), 'disabled-active-indicator-height': map.get($text-field, 'disabled-active-indicator-height'), 'disabled-active-indicator-opacity': map.get($text-field, 'disabled-active-indicator-opacity'), 'disabled-container-color': map.get($text-field, 'disabled-container-color'), 'disabled-container-opacity': map.get($text-field, 'disabled-container-opacity'), 'disabled-content-color': map.get($text-field, 'disabled-input-text-color'), 'disabled-content-opacity': map.get($text-field, 'disabled-input-text-opacity'), 'disabled-label-text-color': map.get($text-field, 'disabled-label-text-color'), 'disabled-label-text-opacity': map.get($text-field, 'disabled-label-text-opacity'), 'disabled-leading-content-color': map.get($text-field, 'disabled-leading-icon-color'), 'disabled-leading-content-opacity': map.get($text-field, 'disabled-leading-icon-opacity'), 'disabled-supporting-text-color': map.get($text-field, 'disabled-supporting-text-color'), 'disabled-supporting-text-opacity': map.get($text-field, 'disabled-supporting-text-opacity'), 'disabled-trailing-content-color': map.get($text-field, 'disabled-trailing-icon-color'), 'disabled-trailing-content-opacity': map.get($text-field, 'disabled-trailing-icon-opacity'), 'error-active-indicator-color': map.get($text-field, 'error-active-indicator-color'), 'error-content-color': map.get($text-field, 'error-input-text-color'), 'error-focus-active-indicator-color': map.get($text-field, 'error-focus-active-indicator-color'), 'error-focus-content-color': map.get($text-field, 'error-focus-leading-icon-color'), 'error-focus-label-text-color': map.get($text-field, 'error-focus-label-text-color'), 'error-focus-leading-content-color': map.get($text-field, 'error-focus-leading-icon-color'), 'error-focus-supporting-text-color': map.get($text-field, 'error-focus-supporting-text-color'), 'error-focus-trailing-content-color': map.get($text-field, 'error-focus-trailing-icon-color'), 'error-hover-active-indicator-color': map.get($text-field, 'error-hover-active-indicator-color'), 'error-hover-content-color': map.get($text-field, 'error-hover-input-text-color'), 'error-hover-label-text-color': map.get($text-field, 'error-hover-label-text-color'), 'error-hover-leading-content-color': map.get($text-field, 'error-hover-leading-icon-color'), 'error-hover-state-layer-color': map.get($text-field, 'error-hover-state-layer-color'), 'error-hover-state-layer-opacity': map.get($text-field, 'error-hover-state-layer-opacity'), 'error-hover-supporting-text-color': map.get($text-field, 'error-hover-supporting-text-color'), 'error-hover-trailing-content-color': map.get($text-field, 'error-hover-trailing-icon-color'), 'error-label-text-color': map.get($text-field, 'error-label-text-color'), 'error-leading-content-color': map.get($text-field, 'error-leading-icon-color'), 'error-supporting-text-color': map.get($text-field, 'error-supporting-text-color'), 'error-trailing-content-color': map.get($text-field, 'error-trailing-icon-color'), 'focus-active-indicator-color': map.get($text-field, 'focus-active-indicator-color'), // TODO(b/259455114): remove when focus tokens update to 3px 'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px), 'focus-content-color': map.get($text-field, 'focus-input-text-color'), 'focus-label-text-color': map.get($text-field, 'focus-label-text-color'), 'focus-leading-content-color': map.get($text-field, 'focus-leading-icon-color'), 'focus-supporting-text-color': map.get($text-field, 'focus-supporting-text-color'), 'focus-trailing-content-color': map.get($text-field, 'focus-trailing-icon-color'), 'hover-active-indicator-color': map.get($text-field, 'hover-active-indicator-color'), 'hover-active-indicator-height': map.get($text-field, 'hover-active-indicator-height'), 'hover-content-color': map.get($text-field, 'hover-input-text-color'), 'hover-label-text-color': map.get($text-field, 'hover-label-text-color'), 'hover-leading-content-color': map.get($text-field, 'hover-leading-icon-color'), 'hover-state-layer-color': map.get($text-field, 'hover-state-layer-color'), 'hover-state-layer-opacity': map.get($text-field, 'hover-state-layer-opacity'), 'hover-supporting-text-color': map.get($text-field, 'hover-supporting-text-color'), 'hover-trailing-content-color': map.get($text-field, 'hover-trailing-icon-color'), 'label-text-color': map.get($text-field, 'label-text-color'), 'label-text-font': map.get($text-field, 'label-text-font'), 'label-text-line-height': map.get($text-field, 'label-text-line-height'), 'label-text-populated-line-height': map.get($text-field, 'label-text-populated-line-height'), 'label-text-populated-size': map.get($text-field, 'label-text-populated-size'), 'label-text-size': map.get($text-field, 'label-text-size'), 'label-text-weight': map.get($text-field, 'label-text-weight'), 'leading-content-color': map.get($text-field, 'leading-icon-color'), 'leading-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-color': map.get($text-field, 'supporting-text-color'), 'supporting-text-font': map.get($text-field, 'supporting-text-font'), 'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-line-height': map.get($text-field, 'supporting-text-line-height'), 'supporting-text-size': map.get($text-field, 'supporting-text-size'), 'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px), 'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-weight': map.get($text-field, 'supporting-text-weight'), 'top-space': if($exclude-hardcoded-values, null, 16px), 'trailing-content-color': map.get($text-field, 'trailing-icon-color'), 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px), 'with-label-top-space': if($exclude-hardcoded-values, null, 8px), 'with-leading-content-leading-space': if($exclude-hardcoded-values, null, 12px), 'with-trailing-content-trailing-space': if($exclude-hardcoded-values, null, 12px), // go/keep-sorted end ); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $new-tokens: $new-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-filled-field-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-filled-field-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filled-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-filled-icon-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'container-width', 'disabled-container-color', 'disabled-container-opacity', 'disabled-icon-color', 'disabled-icon-opacity', 'focus-icon-color', 'hover-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'pressed-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'selected-container-color', 'toggle-focus-icon-color', 'toggle-hover-icon-color', 'toggle-hover-state-layer-color', 'toggle-icon-color', 'toggle-pressed-icon-color', 'toggle-pressed-state-layer-color', 'toggle-selected-focus-icon-color', 'toggle-selected-hover-icon-color', 'toggle-selected-hover-state-layer-color', 'toggle-selected-icon-color', 'toggle-selected-pressed-icon-color', 'toggle-selected-pressed-state-layer-color', // Note: filled icon buttons have three container colors, // "container-color" for regular, then selected/unselected for toggle. 'unselected-container-color', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'toggle-focus-state-layer-color', 'toggle-selected-focus-state-layer-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-filled-icon-button.values($deps, $exclude-hardcoded-values); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove default "unselected" prefix (b/292244480) 'toggle-unselected-focus-icon-color': 'toggle-focus-icon-color', 'toggle-unselected-hover-icon-color': 'toggle-hover-icon-color', 'toggle-unselected-hover-state-layer-color': 'toggle-hover-state-layer-color', 'toggle-unselected-icon-color': 'toggle-icon-color', 'toggle-unselected-pressed-icon-color': 'toggle-pressed-icon-color', 'toggle-unselected-pressed-state-layer-color': 'toggle-pressed-state-layer-color', 'toggle-unselected-focus-state-layer-color': 'toggle-focus-state-layer-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-filled-icon-button-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-filled-icon-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filled-select.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-filled-select'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'text-field-active-indicator-color', 'text-field-active-indicator-height', 'text-field-container-color', 'text-field-container-shape', 'text-field-container-shape-end-end', 'text-field-container-shape-end-start', 'text-field-container-shape-start-end', 'text-field-container-shape-start-start', 'text-field-disabled-active-indicator-color', 'text-field-disabled-active-indicator-height', 'text-field-disabled-active-indicator-opacity', 'text-field-disabled-container-color', 'text-field-disabled-container-opacity', 'text-field-disabled-input-text-color', 'text-field-disabled-input-text-opacity', 'text-field-disabled-label-text-color', 'text-field-disabled-label-text-opacity', 'text-field-disabled-leading-icon-color', 'text-field-disabled-leading-icon-opacity', 'text-field-disabled-supporting-text-color', 'text-field-disabled-supporting-text-opacity', 'text-field-disabled-trailing-icon-color', 'text-field-disabled-trailing-icon-opacity', 'text-field-error-active-indicator-color', 'text-field-error-focus-active-indicator-color', 'text-field-error-focus-input-text-color', 'text-field-error-focus-label-text-color', 'text-field-error-focus-leading-icon-color', 'text-field-error-focus-supporting-text-color', 'text-field-error-focus-trailing-icon-color', 'text-field-error-hover-active-indicator-color', 'text-field-error-hover-input-text-color', 'text-field-error-hover-label-text-color', 'text-field-error-hover-leading-icon-color', 'text-field-error-hover-state-layer-color', 'text-field-error-hover-state-layer-opacity', 'text-field-error-hover-supporting-text-color', 'text-field-error-hover-trailing-icon-color', 'text-field-error-input-text-color', 'text-field-error-label-text-color', 'text-field-error-leading-icon-color', 'text-field-error-supporting-text-color', 'text-field-error-trailing-icon-color', 'text-field-focus-active-indicator-color', 'text-field-focus-active-indicator-height', 'text-field-focus-input-text-color', 'text-field-focus-label-text-color', 'text-field-focus-leading-icon-color', 'text-field-focus-supporting-text-color', 'text-field-focus-trailing-icon-color', 'text-field-hover-active-indicator-color', 'text-field-hover-active-indicator-height', 'text-field-hover-input-text-color', 'text-field-hover-label-text-color', 'text-field-hover-leading-icon-color', 'text-field-hover-state-layer-color', 'text-field-hover-state-layer-opacity', 'text-field-hover-supporting-text-color', 'text-field-hover-trailing-icon-color', 'text-field-input-text-color', 'text-field-input-text-font', 'text-field-input-text-line-height', 'text-field-input-text-size', 'text-field-input-text-weight', 'text-field-label-text-color', 'text-field-label-text-font', 'text-field-label-text-line-height', 'text-field-label-text-populated-line-height', 'text-field-label-text-populated-size', 'text-field-label-text-size', 'text-field-label-text-weight', 'text-field-leading-icon-color', 'text-field-leading-icon-size', 'text-field-supporting-text-color', 'text-field-supporting-text-font', 'text-field-supporting-text-line-height', 'text-field-supporting-text-size', 'text-field-supporting-text-weight', 'text-field-trailing-icon-color', 'text-field-trailing-icon-size', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'menu-cascading-menu-indicator-icon-color', 'menu-cascading-menu-indicator-icon-size', 'menu-container-color', 'menu-container-elevation', 'menu-container-shadow-color', 'menu-container-shape', 'menu-divider-color', 'menu-divider-height', 'menu-list-item-container-height', 'menu-list-item-label-text-color', 'menu-list-item-label-text-font', 'menu-list-item-label-text-line-height', 'menu-list-item-label-text-size', 'menu-list-item-label-text-tracking', 'menu-list-item-label-text-type', 'menu-list-item-label-text-weight', 'menu-list-item-selected-container-color', 'menu-list-item-with-leading-icon-leading-icon-color', 'menu-list-item-with-leading-icon-leading-icon-size', 'menu-list-item-with-trailing-icon-trailing-icon-color', 'menu-list-item-with-trailing-icon-trailing-icon-size', 'text-field-input-text-tracking', 'text-field-input-text-type', 'text-field-label-text-tracking', 'text-field-label-text-type', 'text-field-supporting-text-tracking', 'text-field-supporting-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function _get-override-tokens($exclude-hardcoded-values) { // Values pulled from b/198759625 spreadsheet @return ( // go/keep-sorted start // TODO(b/259455114): remove when focus tokens update to 3px 'text-field-focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px), // go/keep-sorted end ); } @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $original-tokens: md-comp-filled-select.values( $deps, $exclude-hardcoded-values ); $original-tokens: map.merge( $original-tokens, _get-override-tokens($exclude-hardcoded-values) ); $new-tokens: shape.get-new-logical-shape-tokens( $original-tokens, 'text-field-container-shape' ); $tokens: validate.values( $original-tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'text-field-container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-filled-select-text-field-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-filled-select-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filled-text-field.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-filled-text-field'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'active-indicator-color', 'active-indicator-height', 'bottom-space', 'caret-color', 'container-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-active-indicator-color', 'disabled-active-indicator-height', 'disabled-active-indicator-opacity', 'disabled-container-color', 'disabled-container-opacity', 'disabled-input-text-color', 'disabled-input-text-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-icon-color', 'disabled-leading-icon-opacity', 'disabled-supporting-text-color', 'disabled-supporting-text-opacity', 'disabled-trailing-icon-color', 'disabled-trailing-icon-opacity', 'error-active-indicator-color', 'error-focus-active-indicator-color', 'error-focus-caret-color', 'error-focus-input-text-color', 'error-focus-label-text-color', 'error-focus-leading-icon-color', 'error-focus-supporting-text-color', 'error-focus-trailing-icon-color', 'error-hover-active-indicator-color', 'error-hover-input-text-color', 'error-hover-label-text-color', 'error-hover-leading-icon-color', 'error-hover-state-layer-color', 'error-hover-state-layer-opacity', 'error-hover-supporting-text-color', 'error-hover-trailing-icon-color', 'error-input-text-color', 'error-label-text-color', 'error-leading-icon-color', 'error-supporting-text-color', 'error-trailing-icon-color', 'focus-active-indicator-color', 'focus-active-indicator-height', 'focus-caret-color', 'focus-input-text-color', 'focus-label-text-color', 'focus-leading-icon-color', 'focus-supporting-text-color', 'focus-trailing-icon-color', 'hover-active-indicator-color', 'hover-active-indicator-height', 'hover-input-text-color', 'hover-label-text-color', 'hover-leading-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'hover-supporting-text-color', 'hover-trailing-icon-color', 'icon-input-space', 'input-text-color', 'input-text-font', 'input-text-line-height', 'input-text-placeholder-color', 'input-text-prefix-color', 'input-text-prefix-trailing-space', 'input-text-size', 'input-text-suffix-color', 'input-text-suffix-leading-space', 'input-text-weight', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-populated-line-height', 'label-text-populated-size', 'label-text-size', 'label-text-weight', 'leading-icon-color', 'leading-icon-size', 'leading-space', 'supporting-text-color', 'supporting-text-font', 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-weight', 'top-space', 'trailing-icon-color', 'trailing-icon-size', 'trailing-space', 'with-label-bottom-space', 'with-label-top-space', 'with-leading-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'input-text-tracking', 'input-text-type', 'label-text-tracking', 'label-text-type', 'supporting-text-tracking', 'supporting-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-filled-text-field.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( 'icon-input-space': if($exclude-hardcoded-values, null, 16px), 'leading-space': if($exclude-hardcoded-values, null, 16px), 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'top-space': if($exclude-hardcoded-values, null, 16px), 'bottom-space': if($exclude-hardcoded-values, null, 16px), 'input-text-prefix-trailing-space': if($exclude-hardcoded-values, null, 2px), 'input-text-suffix-leading-space': if($exclude-hardcoded-values, null, 2px), 'with-label-top-space': if($exclude-hardcoded-values, null, 8px), 'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px), // TODO(b/270705687): remove when focus-caret-color token added 'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 12px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 12px), ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens ); $tokens: map.merge( $tokens, ( // TODO(b/259455114): remove when focus tokens update to 3px 'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px) ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-filled-text-field-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-filled-text-field-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filled-tonal-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-filled-tonal-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-height', 'container-shadow-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-container-color', 'disabled-container-elevation', 'disabled-container-opacity', 'disabled-icon-color', 'disabled-icon-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'focus-container-elevation', 'focus-icon-color', 'focus-label-text-color', 'hover-container-elevation', 'hover-icon-color', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-space', 'pressed-container-elevation', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'trailing-space', 'with-leading-icon-leading-space', 'with-leading-icon-trailing-space', 'with-trailing-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-filled-tonal-button.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( // b/198759625 - Remove once spacing tokens are formally added // go/keep-sorted start 'leading-space': if($exclude-hardcoded-values, null, 24px), 'trailing-space': if($exclude-hardcoded-values, null, 24px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 16px), 'with-leading-icon-trailing-space': if($exclude-hardcoded-values, null, 24px), 'with-trailing-icon-leading-space': if($exclude-hardcoded-values, null, 24px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "with-*" prefixes (b/273534858) 'with-icon-disabled-icon-color': 'disabled-icon-color', 'with-icon-disabled-icon-opacity': 'disabled-icon-opacity', 'with-icon-focus-icon-color': 'focus-icon-color', 'with-icon-hover-icon-color': 'hover-icon-color', 'with-icon-icon-color': 'icon-color', 'with-icon-icon-size': 'icon-size', 'with-icon-pressed-icon-color': 'pressed-icon-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-filled-tonal-button-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-filled-tonal-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filled-tonal-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-filled-tonal-icon-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'container-width', 'disabled-container-color', 'disabled-container-opacity', 'disabled-icon-color', 'disabled-icon-opacity', 'focus-icon-color', 'hover-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'pressed-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'selected-container-color', 'toggle-focus-icon-color', 'toggle-hover-icon-color', 'toggle-hover-state-layer-color', 'toggle-icon-color', 'toggle-pressed-icon-color', 'toggle-pressed-state-layer-color', 'toggle-selected-focus-icon-color', 'toggle-selected-hover-icon-color', 'toggle-selected-hover-state-layer-color', 'toggle-selected-icon-color', 'toggle-selected-pressed-icon-color', 'toggle-selected-pressed-state-layer-color', // Note: filled icon buttons have three container colors, // "container-color" for regular, then selected/unselected for toggle. 'unselected-container-color', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'toggle-focus-state-layer-color', 'toggle-selected-focus-state-layer-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-filled-tonal-icon-button.values( $deps, $exclude-hardcoded-values ); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove default "unselected" prefix (b/292244480) 'toggle-unselected-focus-icon-color': 'toggle-focus-icon-color', 'toggle-unselected-hover-icon-color': 'toggle-hover-icon-color', 'toggle-unselected-hover-state-layer-color': 'toggle-hover-state-layer-color', 'toggle-unselected-icon-color': 'toggle-icon-color', 'toggle-unselected-pressed-icon-color': 'toggle-pressed-icon-color', 'toggle-unselected-pressed-state-layer-color': 'toggle-pressed-state-layer-color', 'toggle-unselected-focus-state-layer-color': 'toggle-focus-state-layer-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-filled-tonal-icon-button-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-filled-tonal-icon-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-filter-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-filter-chip'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-icon-color', 'disabled-leading-icon-opacity', 'disabled-outline-color', 'disabled-outline-opacity', 'disabled-selected-container-color', 'disabled-selected-container-opacity', 'disabled-trailing-icon-color', 'disabled-trailing-icon-opacity', 'elevated-container-color', 'elevated-container-elevation', 'elevated-container-shadow-color', 'elevated-disabled-container-color', 'elevated-disabled-container-elevation', 'elevated-disabled-container-opacity', 'elevated-focus-container-elevation', 'elevated-hover-container-elevation', 'elevated-pressed-container-elevation', 'elevated-selected-container-color', 'focus-label-text-color', 'focus-leading-icon-color', 'focus-outline-color', 'focus-trailing-icon-color', 'hover-label-text-color', 'hover-leading-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'hover-trailing-icon-color', 'icon-label-space', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-icon-color', 'leading-space', 'outline-color', 'outline-width', 'pressed-label-text-color', 'pressed-leading-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'pressed-trailing-icon-color', 'selected-container-color', 'selected-focus-label-text-color', 'selected-focus-leading-icon-color', 'selected-focus-trailing-icon-color', 'selected-hover-label-text-color', 'selected-hover-leading-icon-color', 'selected-hover-state-layer-color', 'selected-hover-state-layer-opacity', 'selected-hover-trailing-icon-color', 'selected-label-text-color', 'selected-leading-icon-color', 'selected-outline-width', 'selected-pressed-label-text-color', 'selected-pressed-leading-icon-color', 'selected-pressed-state-layer-color', 'selected-pressed-state-layer-opacity', 'selected-pressed-trailing-icon-color', 'selected-trailing-icon-color', 'trailing-icon-color', 'trailing-space', 'with-leading-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'container-elevation', 'dragged-container-elevation', 'dragged-label-text-color', 'dragged-leading-icon-color', 'dragged-state-layer-color', 'dragged-state-layer-opacity', 'dragged-trailing-icon-color', 'focus-container-elevation', 'focus-state-layer-color', 'focus-state-layer-opacity', 'hover-container-elevation', 'label-text-tracking', 'label-text-type', 'pressed-container-elevation', 'selected-dragged-label-text-color', 'selected-dragged-leading-icon-color', 'selected-dragged-state-layer-color', 'selected-dragged-state-layer-opacity', 'selected-dragged-trailing-icon-color', 'selected-focus-container-elevation', 'selected-focus-state-layer-color', 'selected-focus-state-layer-opacity', 'selected-hover-container-elevation', 'selected-pressed-container-elevation', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-filter-chip.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( 'leading-space': if($exclude-hardcoded-values, null, 16px), 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'icon-label-space': if($exclude-hardcoded-values, null, 8px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 8px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 8px), ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "unselected-*" and "flat-*" prefix (b/275577569) 'elevated-unselected-container-color': 'elevated-container-color', 'flat-container-elevation': 'container-elevation', 'flat-disabled-unselected-outline-color': 'disabled-outline-color', 'flat-disabled-unselected-outline-opacity': 'disabled-outline-opacity', 'flat-disabled-selected-container-color': 'disabled-selected-container-color', 'flat-disabled-selected-container-opacity': 'disabled-selected-container-opacity', 'flat-unselected-focus-container-elevation': 'focus-container-elevation', 'flat-unselected-focus-outline-color': 'focus-outline-color', 'flat-unselected-hover-container-elevation': 'hover-container-elevation', 'flat-unselected-outline-color': 'outline-color', 'flat-unselected-outline-width': 'outline-width', 'flat-unselected-pressed-container-elevation': 'pressed-container-elevation', 'flat-selected-container-color': 'selected-container-color', 'flat-selected-focus-container-elevation': 'selected-focus-container-elevation', 'flat-selected-hover-container-elevation': 'selected-hover-container-elevation', 'flat-selected-outline-width': 'selected-outline-width', 'flat-selected-pressed-container-elevation': 'selected-pressed-container-elevation', 'unselected-dragged-label-text-color': 'dragged-label-text-color', 'unselected-dragged-state-layer-color': 'dragged-state-layer-color', 'unselected-dragged-state-layer-opacity': 'dragged-state-layer-opacity', 'unselected-focus-label-text-color': 'focus-label-text-color', 'unselected-focus-state-layer-color': 'focus-state-layer-color', 'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity', 'unselected-hover-label-text-color': 'hover-label-text-color', 'unselected-hover-state-layer-color': 'hover-state-layer-color', 'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity', 'unselected-label-text-color': 'label-text-color', 'unselected-pressed-label-text-color': 'pressed-label-text-color', 'unselected-pressed-state-layer-color': 'pressed-state-layer-color', 'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity', // Remove "with-*" prefixex (b/273534858) 'with-icon-icon-size': 'icon-size', 'with-leading-icon-disabled-leading-icon-color': 'disabled-leading-icon-color', 'with-leading-icon-disabled-leading-icon-opacity': 'disabled-leading-icon-opacity', 'with-leading-icon-selected-dragged-leading-icon-color': 'selected-dragged-leading-icon-color', 'with-leading-icon-selected-focus-leading-icon-color': 'selected-focus-leading-icon-color', 'with-leading-icon-selected-hover-leading-icon-color': 'selected-hover-leading-icon-color', 'with-leading-icon-selected-leading-icon-color': 'selected-leading-icon-color', 'with-leading-icon-selected-pressed-leading-icon-color': 'selected-pressed-leading-icon-color', 'with-leading-icon-unselected-dragged-leading-icon-color': 'dragged-leading-icon-color', 'with-leading-icon-unselected-focus-leading-icon-color': 'focus-leading-icon-color', 'with-leading-icon-unselected-hover-leading-icon-color': 'hover-leading-icon-color', 'with-leading-icon-unselected-leading-icon-color': 'leading-icon-color', 'with-leading-icon-unselected-pressed-leading-icon-color': 'pressed-leading-icon-color', 'with-trailing-icon-disabled-trailing-icon-color': 'disabled-trailing-icon-color', 'with-trailing-icon-disabled-trailing-icon-opacity': 'disabled-trailing-icon-opacity', 'with-trailing-icon-selected-dragged-trailing-icon-color': 'selected-dragged-trailing-icon-color', 'with-trailing-icon-selected-focus-trailing-icon-color': 'selected-focus-trailing-icon-color', 'with-trailing-icon-selected-hover-trailing-icon-color': 'selected-hover-trailing-icon-color', 'with-trailing-icon-selected-pressed-trailing-icon-color': 'selected-pressed-trailing-icon-color', 'with-trailing-icon-selected-trailing-icon-color': 'selected-trailing-icon-color', 'with-trailing-icon-unselected-dragged-trailing-icon-color': 'dragged-trailing-icon-color', 'with-trailing-icon-unselected-focus-trailing-icon-color': 'focus-trailing-icon-color', 'with-trailing-icon-unselected-hover-trailing-icon-color': 'hover-trailing-icon-color', 'with-trailing-icon-unselected-pressed-trailing-icon-color': 'pressed-trailing-icon-color', 'with-trailing-icon-unselected-trailing-icon-color': 'trailing-icon-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-filter-chip-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-filter-chip-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-focus-ring.scss ================================================ // // Copyright 2022 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-motion'; @use 'md-sys-shape'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'active-width', 'color', 'duration', 'inward-offset', 'outward-offset', 'shape', 'shape-end-end', 'shape-end-start', 'shape-start-end', 'shape-start-start', 'width', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-motion': md-sys-motion.values(), 'md-sys-shape': md-sys-shape.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: ( 'active-width': if($exclude-hardcoded-values, null, 8px), 'color': map.get($deps, 'md-sys-color', 'secondary'), 'duration': map.get($deps, 'md-sys-motion', 'duration-long4'), 'inward-offset': if($exclude-hardcoded-values, null, 0px), 'outward-offset': if($exclude-hardcoded-values, null, 2px), 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'width': if($exclude-hardcoded-values, null, 3px), ); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $new-tokens: $new-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-focus-ring-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-focus-ring-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-full-screen-dialog.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-full-screen-dialog'; // go/keep-sorted end $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return md-comp-full-screen-dialog.values($deps, $exclude-hardcoded-values); } ================================================ FILE: tokens/_md-comp-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-icon-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'disabled-icon-color', 'disabled-icon-opacity', 'focus-icon-color', 'hover-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'pressed-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'selected-focus-icon-color', 'selected-hover-icon-color', 'selected-hover-state-layer-color', 'selected-hover-state-layer-opacity', 'selected-icon-color', 'selected-pressed-icon-color', 'selected-pressed-state-layer-color', 'selected-pressed-state-layer-opacity', 'state-layer-height', 'state-layer-shape', 'state-layer-width', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'selected-focus-state-layer-color', 'selected-focus-state-layer-opacity', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-icon-button.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $renamed-tokens: ( // Remove default "unselected" prefix (b/292244480) 'unselected-focus-icon-color': 'focus-icon-color', 'unselected-hover-icon-color': 'hover-icon-color', 'unselected-hover-state-layer-color': 'hover-state-layer-color', 'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity', 'unselected-icon-color': 'icon-color', 'unselected-pressed-icon-color': 'pressed-icon-color', 'unselected-pressed-state-layer-color': 'pressed-state-layer-color', 'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity', 'unselected-focus-state-layer-color': 'focus-state-layer-color', 'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-icon-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-icon.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'font', 'size', // go/keep-sorted end ); @function _get-new-tokens($exclude-hardcoded-values) { @return ( // go/keep-sorted start font: if($exclude-hardcoded-values, null, 'Material Symbols Outlined'), size: if($exclude-hardcoded-values, null, 24px), // go/keep-sorted end ); } @function values( $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( (), $supported-tokens: $supported-tokens, $new-tokens: _get-new-tokens($exclude-hardcoded-values) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-icon-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-input-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-input-chip'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'avatar-shape', 'avatar-size', 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-avatar-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-icon-color', 'disabled-leading-icon-opacity', 'disabled-outline-color', 'disabled-outline-opacity', 'disabled-selected-container-color', 'disabled-selected-container-opacity', 'disabled-trailing-icon-color', 'disabled-trailing-icon-opacity', 'focus-label-text-color', 'focus-leading-icon-color', 'focus-outline-color', 'focus-trailing-icon-color', 'hover-label-text-color', 'hover-leading-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'hover-trailing-icon-color', 'icon-label-space', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-icon-color', 'leading-space', 'outline-color', 'outline-width', 'pressed-label-text-color', 'pressed-leading-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'pressed-trailing-icon-color', 'selected-container-color', 'selected-focus-label-text-color', 'selected-focus-leading-icon-color', 'selected-focus-trailing-icon-color', 'selected-hover-label-text-color', 'selected-hover-leading-icon-color', 'selected-hover-state-layer-color', 'selected-hover-state-layer-opacity', 'selected-hover-trailing-icon-color', 'selected-label-text-color', 'selected-leading-icon-color', 'selected-outline-width', 'selected-pressed-label-text-color', 'selected-pressed-leading-icon-color', 'selected-pressed-state-layer-color', 'selected-pressed-state-layer-opacity', 'selected-pressed-trailing-icon-color', 'selected-trailing-icon-color', 'trailing-icon-color', 'trailing-space', 'with-leading-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'container-elevation', 'dragged-container-elevation', 'dragged-label-text-color', 'dragged-leading-icon-color', 'dragged-state-layer-color', 'dragged-state-layer-opacity', 'dragged-trailing-icon-color', 'focus-state-layer-color', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', 'selected-dragged-label-text-color', 'selected-dragged-leading-icon-color', 'selected-dragged-state-layer-color', 'selected-dragged-state-layer-opacity', 'selected-dragged-trailing-icon-color', 'selected-focus-state-layer-color', 'selected-focus-state-layer-opacity', 'trailing-icon-size', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-input-chip.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( 'leading-space': if($exclude-hardcoded-values, null, 16px), 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'icon-label-space': if($exclude-hardcoded-values, null, 8px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 8px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 8px), ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "unselected-*" prefix (b/275577569) 'disabled-unselected-outline-color': 'disabled-outline-color', 'disabled-unselected-outline-opacity': 'disabled-outline-opacity', 'unselected-dragged-label-text-color': 'dragged-label-text-color', 'unselected-dragged-state-layer-color': 'dragged-state-layer-color', 'unselected-dragged-state-layer-opacity': 'dragged-state-layer-opacity', 'unselected-focus-label-text-color': 'focus-label-text-color', 'unselected-focus-outline-color': 'focus-outline-color', 'unselected-focus-state-layer-color': 'focus-state-layer-color', 'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity', 'unselected-hover-label-text-color': 'hover-label-text-color', 'unselected-hover-state-layer-color': 'hover-state-layer-color', 'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity', 'unselected-label-text-color': 'label-text-color', 'unselected-outline-color': 'outline-color', 'unselected-outline-width': 'outline-width', 'unselected-pressed-label-text-color': 'pressed-label-text-color', 'unselected-pressed-state-layer-color': 'pressed-state-layer-color', 'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity', // Remove "with-*" prefixes (b/273534858) 'with-avatar-avatar-shape': 'avatar-shape', 'with-avatar-avatar-size': 'avatar-size', 'with-avatar-disabled-avatar-opacity': 'disabled-avatar-opacity', 'with-leading-icon-disabled-leading-icon-color': 'disabled-leading-icon-color', 'with-leading-icon-disabled-leading-icon-opacity': 'disabled-leading-icon-opacity', // Rename "leading-icon-size" to "icon-size" (b/275577569) 'with-leading-icon-leading-icon-size': 'icon-size', 'with-leading-icon-selected-dragged-leading-icon-color': 'selected-dragged-leading-icon-color', 'with-leading-icon-selected-focus-leading-icon-color': 'selected-focus-leading-icon-color', 'with-leading-icon-selected-hover-leading-icon-color': 'selected-hover-leading-icon-color', 'with-leading-icon-selected-leading-icon-color': 'selected-leading-icon-color', 'with-leading-icon-selected-pressed-leading-icon-color': 'selected-pressed-leading-icon-color', 'with-leading-icon-unselected-dragged-leading-icon-color': 'dragged-leading-icon-color', 'with-leading-icon-unselected-focus-leading-icon-color': 'focus-leading-icon-color', 'with-leading-icon-unselected-hover-leading-icon-color': 'hover-leading-icon-color', 'with-leading-icon-unselected-leading-icon-color': 'leading-icon-color', 'with-leading-icon-unselected-pressed-leading-icon-color': 'pressed-leading-icon-color', 'with-trailing-icon-disabled-trailing-icon-color': 'disabled-trailing-icon-color', 'with-trailing-icon-disabled-trailing-icon-opacity': 'disabled-trailing-icon-opacity', 'with-trailing-icon-selected-dragged-trailing-icon-color': 'selected-dragged-trailing-icon-color', 'with-trailing-icon-selected-focus-trailing-icon-color': 'selected-focus-trailing-icon-color', 'with-trailing-icon-selected-hover-trailing-icon-color': 'selected-hover-trailing-icon-color', 'with-trailing-icon-selected-pressed-trailing-icon-color': 'selected-pressed-trailing-icon-color', 'with-trailing-icon-selected-trailing-icon-color': 'selected-trailing-icon-color', 'with-trailing-icon-trailing-icon-size': 'trailing-icon-size', 'with-trailing-icon-unselected-dragged-trailing-icon-color': 'dragged-trailing-icon-color', 'with-trailing-icon-unselected-focus-trailing-icon-color': 'focus-trailing-icon-color', 'with-trailing-icon-unselected-hover-trailing-icon-color': 'hover-trailing-icon-color', 'with-trailing-icon-unselected-pressed-trailing-icon-color': 'pressed-trailing-icon-color', 'with-trailing-icon-unselected-trailing-icon-color': 'trailing-icon-color' ) ); // TODO(b/288199264): remove once input chip leading icon color is fixed $tokens: map.set( $tokens, 'leading-icon-color', map.get($deps, 'md-sys-color', 'primary') ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-input-chip-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-input-chip-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-item.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-list'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'overline-color', 'overline-font', 'overline-line-height', 'overline-size', 'overline-weight', 'supporting-text-color', 'supporting-text-font', 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-weight', 'trailing-supporting-text-color', 'trailing-supporting-text-font', 'trailing-supporting-text-line-height', 'trailing-supporting-text-size', 'trailing-supporting-text-weight', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { // Note: does not provide `--md-item-*` custom properties. $list-tokens: md-comp-list.values($deps, $exclude-hardcoded-values); $tokens: ( // go/keep-sorted start 'label-text-color': map.get($list-tokens, 'list-item-label-text-color'), 'label-text-font': map.get($list-tokens, 'list-item-label-text-font'), 'label-text-line-height': map.get($list-tokens, 'list-item-label-text-line-height'), 'label-text-size': map.get($list-tokens, 'list-item-label-text-size'), 'label-text-weight': map.get($list-tokens, 'list-item-label-text-weight'), 'overline-color': map.get($list-tokens, 'list-item-overline-color'), 'overline-font': map.get($list-tokens, 'list-item-overline-font'), 'overline-line-height': map.get($list-tokens, 'list-item-overline-line-height'), 'overline-size': map.get($list-tokens, 'list-item-overline-size'), 'overline-weight': map.get($list-tokens, 'list-item-overline-weight'), 'supporting-text-color': map.get($list-tokens, 'list-item-supporting-text-color'), 'supporting-text-font': map.get($list-tokens, 'list-item-supporting-text-font'), 'supporting-text-line-height': map.get($list-tokens, 'list-item-supporting-text-line-height'), 'supporting-text-size': map.get($list-tokens, 'list-item-supporting-text-size'), 'supporting-text-weight': map.get($list-tokens, 'list-item-supporting-text-weight'), 'trailing-supporting-text-color': map.get($list-tokens, 'list-item-trailing-supporting-text-color'), 'trailing-supporting-text-font': map.get($list-tokens, 'list-item-trailing-supporting-text-font'), 'trailing-supporting-text-line-height': map.get($list-tokens, 'list-item-trailing-supporting-text-line-height'), 'trailing-supporting-text-size': map.get($list-tokens, 'list-item-trailing-supporting-text-size'), 'trailing-supporting-text-weight': map.get($list-tokens, 'list-item-trailing-supporting-text-weight'), // go/keep-sorted end ); @return validate.values($tokens, $supported-tokens: $supported-tokens); } ================================================ FILE: tokens/_md-comp-linear-progress.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'versions/v0_192/md-comp-linear-progress-indicator'; // go/keep-sorted end $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), ); $supported-tokens: ( // go/keep-sorted start 'active-indicator-color', 'active-indicator-height', 'four-color-active-indicator-four-color', 'four-color-active-indicator-one-color', 'four-color-active-indicator-three-color', 'four-color-active-indicator-two-color', 'track-color', 'track-height', 'track-shape', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start // can only control track since scaling is used on buffer/progress 'active-indicator-shape', // go/keep-sorted end ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-linear-progress-indicator.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-linear-progress-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-list-item.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-list'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'bottom-space', 'disabled-opacity', 'hover-state-layer-color', 'hover-state-layer-opacity', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-icon-color', 'leading-space', 'one-line-container-height', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'supporting-text-color', 'supporting-text-font', 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-weight', 'top-space', 'trailing-icon-color', 'trailing-space', 'trailing-supporting-text-color', 'trailing-supporting-text-font', 'trailing-supporting-text-line-height', 'trailing-supporting-text-size', 'trailing-supporting-text-weight', 'two-line-container-height', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-shape', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-icon-color', 'disabled-leading-icon-opacity', 'disabled-state-layer-color', 'disabled-state-layer-opacity', 'disabled-trailing-icon-color', 'disabled-trailing-icon-opacity', 'divider-leading-space', 'divider-trailing-space', 'dragged-container-elevation', 'dragged-label-text-color', 'dragged-leading-icon-icon-color', 'dragged-state-layer-color', 'dragged-state-layer-opacity', 'dragged-trailing-icon-icon-color', 'focus-label-text-color', 'focus-leading-icon-icon-color', 'focus-state-layer-color', 'focus-state-layer-opacity', 'focus-trailing-icon-icon-color', 'hover-label-text-color', 'hover-leading-icon-icon-color', 'hover-trailing-icon-icon-color', 'label-text-tracking', 'label-text-type', 'large-leading-video-height', 'leading-avatar-color', 'leading-avatar-label-color', 'leading-avatar-label-font', 'leading-avatar-label-line-height', 'leading-avatar-label-size', 'leading-avatar-label-tracking', 'leading-avatar-label-type', 'leading-avatar-label-weight', 'leading-avatar-shape', 'leading-avatar-size', 'leading-icon-size', 'leading-image-height', 'leading-image-shape', 'leading-image-width', 'leading-video-shape', 'leading-video-width', 'overline-color', 'overline-font', 'overline-line-height', 'overline-size', 'overline-tracking', 'overline-type', 'overline-weight', 'pressed-label-text-color', 'pressed-leading-icon-icon-color', 'pressed-trailing-icon-icon-color', 'selected-trailing-icon-color', 'small-leading-video-height', 'supporting-text-tracking', 'supporting-text-type', 'three-line-container-height', 'trailing-icon-size', 'trailing-supporting-text-tracking', 'trailing-supporting-text-type', 'unselected-trailing-icon-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $original-tokens: md-comp-list.values($deps, $exclude-hardcoded-values); $tokens: validate.values( $original-tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: ( 'top-space': if($exclude-hardcoded-values, null, 12px), 'bottom-space': if($exclude-hardcoded-values, null, 12px), 'disabled-opacity': map.get($original-tokens, 'list-item-disabled-label-text-opacity'), ), $renamed-tokens: _get-renamed-tokens($original-tokens) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-list-item-#{$token}, #{$value}) ); } } @return $tokens; } // remove list-item prefix from tokens @function _get-renamed-tokens($tokens) { $keys: map.keys($tokens); $renamed-tokens: (); @each $key in $keys { @if string.index($key, 'list-item-') == 1 { $renamed-key: string.slice($key, string.length('list-item-') + 1); $renamed-tokens: map.set($renamed-tokens, $key, $renamed-key); } } @return $renamed-tokens; } ================================================ FILE: tokens/_md-comp-list.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'versions/v0_192/md-comp-list'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $list-tokens: md-comp-list.values($deps, $exclude-hardcoded-values); $tokens: ( 'container-color': map.get($list-tokens, 'list-item-container-color'), ); $tokens: validate.values($tokens, $supported-tokens: $supported-tokens); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-list-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-menu-item.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-comp-list-item'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-menu'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'bottom-space', 'container-color', 'disabled-opacity', 'hover-state-layer-color', 'hover-state-layer-opacity', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-icon-color', 'leading-space', 'one-line-container-height', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'selected-container-color', 'selected-label-text-color', 'supporting-text-color', 'supporting-text-font', 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-weight', 'top-space', 'trailing-icon-color', 'trailing-space', 'trailing-supporting-text-color', 'trailing-supporting-text-font', 'trailing-supporting-text-line-height', 'trailing-supporting-text-size', 'trailing-supporting-text-weight', 'two-line-container-height', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'container-elevation', 'container-shadow-color', 'container-shape', 'selected-with-leading-icon-trailing-icon-color', 'with-leading-icon-icon-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-menu.values($deps); // Like list items, menu items use their parent menu for their container // color. However, menu items can have a selected background color, so we // change its default unselected background color to transparent to inherit // from its parent menu. $tokens: map.set($tokens, 'container-color', transparent); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: md-comp-list-item.values($deps, $exclude-custom-properties: true), $renamed-tokens: _get-renamed-tokens($tokens) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-menu-item-#{$token}, #{$value}) ); } } @return $tokens; } // remove list-item prefix from tokens @function _get-renamed-tokens($tokens) { $keys: map.keys($tokens); $renamed-tokens: (); @each $key in $keys { @each $prefix in ('list-item-', 'menu-list-item-') { @if string.index($key, $prefix) == 1 { $renamed-key: string.slice($key, string.length($prefix) + 1); $renamed-tokens: map.set($renamed-tokens, $key, $renamed-key); } } } @return $renamed-tokens; } ================================================ FILE: tokens/_md-comp-menu.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'versions/v0_192/md-comp-menu'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'bottom-space', 'container-color', 'container-elevation', 'container-shadow-color', 'container-shape', 'top-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'list-item-selected-container-color', 'list-item-selected-label-text-color', 'list-item-selected-with-leading-icon-trailing-icon-color', 'menu-list-item-with-leading-icon-icon-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-menu.values($deps), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: ( 'top-space': if($exclude-hardcoded-values, null, 8px), 'bottom-space': if($exclude-hardcoded-values, null, 8px), ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-menu-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-navigation-bar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-navigation-bar'; // go/keep-sorted end $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-navigation-bar.values($deps, $exclude-hardcoded-values); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-navigation-bar-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-navigation-drawer.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-navigation-drawer'; // go/keep-sorted end $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-navigation-drawer.values($deps, $exclude-hardcoded-values); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-navigation-drawer-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-outlined-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-outlined-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-icon-color', 'disabled-icon-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-outline-color', 'disabled-outline-opacity', 'focus-icon-color', 'focus-label-text-color', 'hover-icon-color', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-space', 'outline-color', 'outline-width', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-outline-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'trailing-space', 'with-leading-icon-leading-space', 'with-leading-icon-trailing-space', 'with-trailing-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-outline-color', 'focus-state-layer-color', 'focus-state-layer-opacity', 'hover-outline-color', 'label-text-tracking', 'label-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-outlined-button.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( // b/198759625 - Remove once spacing tokens are formally added // go/keep-sorted start 'leading-space': if($exclude-hardcoded-values, null, 24px), 'trailing-space': if($exclude-hardcoded-values, null, 24px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 16px), 'with-leading-icon-trailing-space': if($exclude-hardcoded-values, null, 24px), 'with-trailing-icon-leading-space': if($exclude-hardcoded-values, null, 24px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "with-*" prefixes (b/273534858) 'with-icon-disabled-icon-color': 'disabled-icon-color', 'with-icon-disabled-icon-opacity': 'disabled-icon-opacity', 'with-icon-focus-icon-color': 'focus-icon-color', 'with-icon-hover-icon-color': 'hover-icon-color', 'with-icon-icon-color': 'icon-color', 'with-icon-icon-size': 'icon-size', 'with-icon-pressed-icon-color': 'pressed-icon-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-outlined-button-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-outlined-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-outlined-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-outlined-card'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-color', 'container-elevation', 'container-shadow-color', 'container-shape', 'outline-color', 'outline-width', // go/keep-sorted end ); // TODO(b/307362112): Add interactive card tokens (hover, focus, pressed) // TODO(b/307361748): Add disabled cards tokens. $unsupported-tokens: ( // go/keep-sorted start 'disabled-container-elevation', 'disabled-outline-color', 'disabled-outline-opacity', 'dragged-container-elevation', 'dragged-outline-color', 'dragged-state-layer-color', 'dragged-state-layer-opacity', 'focus-container-elevation', 'focus-outline-color', 'focus-state-layer-color', 'focus-state-layer-opacity', 'hover-container-elevation', 'hover-outline-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'pressed-container-elevation', 'pressed-outline-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-outlined-card.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set( $tokens, $token, var(--md-outlined-card-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-outlined-field.scss ================================================ // // Copyright 2021 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-outlined-text-field'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'bottom-space', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'content-color', 'content-font', 'content-line-height', 'content-size', 'content-space', 'content-weight', 'disabled-content-color', 'disabled-content-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-content-color', 'disabled-leading-content-opacity', 'disabled-outline-color', 'disabled-outline-opacity', 'disabled-outline-width', 'disabled-supporting-text-color', 'disabled-supporting-text-opacity', 'disabled-trailing-content-color', 'disabled-trailing-content-opacity', 'error-content-color', 'error-focus-content-color', 'error-focus-label-text-color', 'error-focus-leading-content-color', 'error-focus-outline-color', 'error-focus-supporting-text-color', 'error-focus-trailing-content-color', 'error-hover-content-color', 'error-hover-label-text-color', 'error-hover-leading-content-color', 'error-hover-outline-color', 'error-hover-supporting-text-color', 'error-hover-trailing-content-color', 'error-label-text-color', 'error-leading-content-color', 'error-outline-color', 'error-supporting-text-color', 'error-trailing-content-color', 'focus-content-color', 'focus-label-text-color', 'focus-leading-content-color', 'focus-outline-color', 'focus-outline-width', 'focus-supporting-text-color', 'focus-trailing-content-color', 'hover-content-color', 'hover-label-text-color', 'hover-leading-content-color', 'hover-outline-color', 'hover-outline-width', 'hover-supporting-text-color', 'hover-trailing-content-color', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-padding-bottom', 'label-text-populated-line-height', 'label-text-populated-size', 'label-text-size', 'label-text-weight', 'leading-content-color', 'leading-space', 'outline-color', 'outline-label-padding', 'outline-width', 'supporting-text-color', 'supporting-text-font', 'supporting-text-leading-space', 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-top-space', 'supporting-text-trailing-space', 'supporting-text-weight', 'top-space', 'trailing-content-color', 'trailing-space', 'with-leading-content-leading-space', 'with-trailing-content-trailing-space', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $text-field: md-comp-outlined-text-field.values( $deps, $exclude-hardcoded-values ); $tokens: ( // go/keep-sorted start 'bottom-space': if($exclude-hardcoded-values, null, 16px), 'container-shape': map.get($text-field, 'container-shape'), 'content-color': map.get($text-field, 'input-text-color'), 'content-font': map.get($text-field, 'input-text-font'), 'content-line-height': map.get($text-field, 'input-text-line-height'), 'content-size': map.get($text-field, 'input-text-size'), 'content-space': if($exclude-hardcoded-values, null, 16px), 'content-weight': map.get($text-field, 'input-text-weight'), 'disabled-content-color': map.get($text-field, 'disabled-input-text-color'), 'disabled-content-opacity': map.get($text-field, 'disabled-input-text-opacity'), 'disabled-label-text-color': map.get($text-field, 'disabled-label-text-color'), 'disabled-label-text-opacity': map.get($text-field, 'disabled-label-text-opacity'), 'disabled-leading-content-color': map.get($text-field, 'disabled-leading-icon-color'), 'disabled-leading-content-opacity': map.get($text-field, 'disabled-leading-icon-opacity'), 'disabled-outline-color': map.get($text-field, 'disabled-outline-color'), 'disabled-outline-opacity': map.get($text-field, 'disabled-outline-opacity'), 'disabled-outline-width': map.get($text-field, 'disabled-outline-width'), 'disabled-supporting-text-color': map.get($text-field, 'disabled-supporting-text-color'), 'disabled-supporting-text-opacity': map.get($text-field, 'disabled-supporting-text-opacity'), 'disabled-trailing-content-color': map.get($text-field, 'disabled-trailing-icon-color'), 'disabled-trailing-content-opacity': map.get($text-field, 'disabled-trailing-icon-opacity'), 'error-content-color': map.get($text-field, 'error-input-text-color'), 'error-focus-content-color': map.get($text-field, 'error-focus-input-text-color'), 'error-focus-label-text-color': map.get($text-field, 'error-focus-label-text-color'), 'error-focus-leading-content-color': map.get($text-field, 'error-focus-leading-icon-color'), 'error-focus-outline-color': map.get($text-field, 'error-focus-outline-color'), 'error-focus-supporting-text-color': map.get($text-field, 'error-focus-supporting-text-color'), 'error-focus-trailing-content-color': map.get($text-field, 'error-focus-trailing-icon-color'), 'error-hover-content-color': map.get($text-field, 'error-hover-input-text-color'), 'error-hover-label-text-color': map.get($text-field, 'error-hover-label-text-color'), 'error-hover-leading-content-color': map.get($text-field, 'error-hover-leading-icon-color'), 'error-hover-outline-color': map.get($text-field, 'error-hover-outline-color'), 'error-hover-supporting-text-color': map.get($text-field, 'error-hover-supporting-text-color'), 'error-hover-trailing-content-color': map.get($text-field, 'error-hover-trailing-icon-color'), 'error-label-text-color': map.get($text-field, 'error-label-text-color'), 'error-leading-content-color': map.get($text-field, 'error-leading-icon-color'), 'error-outline-color': map.get($text-field, 'error-outline-color'), 'error-supporting-text-color': map.get($text-field, 'error-supporting-text-color'), 'error-trailing-content-color': map.get($text-field, 'error-trailing-icon-color'), 'focus-content-color': map.get($text-field, 'focus-input-text-color'), 'focus-label-text-color': map.get($text-field, 'focus-label-text-color'), 'focus-leading-content-color': map.get($text-field, 'focus-leading-icon-color'), 'focus-outline-color': map.get($text-field, 'focus-outline-color'), // TODO(b/259455114): remove when focus tokens update to 3px 'focus-outline-width': if($exclude-hardcoded-values, null, 3px), 'focus-supporting-text-color': map.get($text-field, 'focus-supporting-text-color'), 'focus-trailing-content-color': map.get($text-field, 'focus-trailing-icon-color'), 'hover-content-color': map.get($text-field, 'hover-input-text-color'), 'hover-label-text-color': map.get($text-field, 'hover-label-text-color'), 'hover-leading-content-color': map.get($text-field, 'hover-leading-icon-color'), 'hover-outline-color': map.get($text-field, 'hover-outline-color'), 'hover-outline-width': map.get($text-field, 'hover-outline-width'), 'hover-supporting-text-color': map.get($text-field, 'hover-supporting-text-color'), 'hover-trailing-content-color': map.get($text-field, 'hover-trailing-icon-color'), 'label-text-color': map.get($text-field, 'label-text-color'), 'label-text-font': map.get($text-field, 'label-text-font'), 'label-text-line-height': map.get($text-field, 'label-text-line-height'), 'label-text-padding-bottom': if($exclude-hardcoded-values, null, 8px), 'label-text-populated-line-height': map.get($text-field, 'label-text-populated-line-height'), 'label-text-populated-size': map.get($text-field, 'label-text-populated-size'), 'label-text-size': map.get($text-field, 'label-text-size'), 'label-text-weight': map.get($text-field, 'label-text-weight'), 'leading-content-color': map.get($text-field, 'leading-icon-color'), 'leading-space': if($exclude-hardcoded-values, null, 16px), 'outline-color': map.get($text-field, 'outline-color'), 'outline-label-padding': if($exclude-hardcoded-values, null, 4px), 'outline-width': map.get($text-field, 'outline-width'), 'supporting-text-color': map.get($text-field, 'supporting-text-color'), 'supporting-text-font': map.get($text-field, 'supporting-text-font'), 'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-line-height': map.get($text-field, 'supporting-text-line-height'), 'supporting-text-size': map.get($text-field, 'supporting-text-size'), 'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px), 'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-weight': map.get($text-field, 'supporting-text-weight'), 'top-space': if($exclude-hardcoded-values, null, 16px), 'trailing-content-color': map.get($text-field, 'trailing-icon-color'), 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'with-leading-content-leading-space': if($exclude-hardcoded-values, null, 12px), 'with-trailing-content-trailing-space': if($exclude-hardcoded-values, null, 12px), // go/keep-sorted end ); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $new-tokens: $new-tokens ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-outlined-field-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-outlined-field-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-outlined-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-outlined-icon-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'container-width', 'disabled-icon-color', 'disabled-icon-opacity', 'disabled-outline-color', 'disabled-outline-opacity', 'disabled-selected-container-color', 'disabled-selected-container-opacity', 'focus-icon-color', 'hover-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'outline-color', 'outline-width', 'pressed-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'selected-container-color', 'selected-focus-icon-color', 'selected-hover-icon-color', 'selected-hover-state-layer-color', 'selected-icon-color', 'selected-pressed-icon-color', 'selected-pressed-state-layer-color', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'selected-focus-state-layer-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-outlined-icon-button.values( $deps, $exclude-hardcoded-values ); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove default "unselected" prefix (b/292244480) 'disabled-unselected-outline-color': 'disabled-outline-color', 'disabled-unselected-outline-opacity': 'disabled-outline-opacity', 'unselected-focus-icon-color': 'focus-icon-color', 'unselected-hover-icon-color': 'hover-icon-color', 'unselected-hover-state-layer-color': 'hover-state-layer-color', 'unselected-icon-color': 'icon-color', 'unselected-outline-color': 'outline-color', 'unselected-outline-width': 'outline-width', 'unselected-pressed-icon-color': 'pressed-icon-color', 'unselected-pressed-state-layer-color': 'pressed-state-layer-color', 'unselected-focus-state-layer-color': 'focus-state-layer-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-outlined-icon-button-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-outlined-icon-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-outlined-segmented-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Ide // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-outlined-segmented-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-height', 'disabled-icon-color', 'disabled-label-text-color', 'disabled-outline-color', 'hover-state-layer-opacity', 'icon-size', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'outline-color', 'pressed-state-layer-opacity', 'selected-container-color', 'selected-focus-icon-color', 'selected-focus-label-text-color', 'selected-hover-icon-color', 'selected-hover-label-text-color', 'selected-hover-state-layer-color', 'selected-icon-color', 'selected-label-text-color', 'selected-pressed-icon-color', 'selected-pressed-label-text-color', 'selected-pressed-state-layer-color', 'shape', 'shape-end-end', 'shape-end-start', 'shape-start-end', 'shape-start-start', 'unselected-focus-icon-color', 'unselected-focus-label-text-color', 'unselected-hover-icon-color', 'unselected-hover-label-text-color', 'unselected-hover-state-layer-color', 'unselected-icon-color', 'unselected-label-text-color', 'unselected-pressed-icon-color', 'unselected-pressed-label-text-color', 'unselected-pressed-state-layer-color', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'disabled-icon-opacity', 'disabled-label-text-opacity', 'disabled-outline-opacity', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', 'outline-width', 'selected-focus-state-layer-color', 'unselected-focus-state-layer-color', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-outlined-segmented-button.values( $deps, $exclude-hardcoded-values ); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "with-*" prefixes (b/273534858) 'with-icon-icon-size': 'icon-size', 'selected-with-icon-icon-color': 'selected-icon-color', 'unselected-with-icon-icon-color': 'unselected-icon-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-outlined-segmented-button-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-outlined-segmented-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-outlined-select.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-outlined-select'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'text-field-container-shape', 'text-field-container-shape-end-end', 'text-field-container-shape-end-start', 'text-field-container-shape-start-end', 'text-field-container-shape-start-start', 'text-field-disabled-input-text-color', 'text-field-disabled-input-text-opacity', 'text-field-disabled-label-text-color', 'text-field-disabled-label-text-opacity', 'text-field-disabled-leading-icon-color', 'text-field-disabled-leading-icon-opacity', 'text-field-disabled-outline-color', 'text-field-disabled-outline-opacity', 'text-field-disabled-outline-width', 'text-field-disabled-supporting-text-color', 'text-field-disabled-supporting-text-opacity', 'text-field-disabled-trailing-icon-color', 'text-field-disabled-trailing-icon-opacity', 'text-field-error-focus-input-text-color', 'text-field-error-focus-label-text-color', 'text-field-error-focus-leading-icon-color', 'text-field-error-focus-outline-color', 'text-field-error-focus-supporting-text-color', 'text-field-error-focus-trailing-icon-color', 'text-field-error-hover-input-text-color', 'text-field-error-hover-label-text-color', 'text-field-error-hover-leading-icon-color', 'text-field-error-hover-outline-color', 'text-field-error-hover-supporting-text-color', 'text-field-error-hover-trailing-icon-color', 'text-field-error-input-text-color', 'text-field-error-label-text-color', 'text-field-error-leading-icon-color', 'text-field-error-outline-color', 'text-field-error-supporting-text-color', 'text-field-error-trailing-icon-color', 'text-field-focus-input-text-color', 'text-field-focus-label-text-color', 'text-field-focus-leading-icon-color', 'text-field-focus-outline-color', 'text-field-focus-outline-width', 'text-field-focus-supporting-text-color', 'text-field-focus-trailing-icon-color', 'text-field-hover-input-text-color', 'text-field-hover-label-text-color', 'text-field-hover-leading-icon-color', 'text-field-hover-outline-color', 'text-field-hover-outline-width', 'text-field-hover-supporting-text-color', 'text-field-hover-trailing-icon-color', 'text-field-input-text-color', 'text-field-input-text-font', 'text-field-input-text-line-height', 'text-field-input-text-size', 'text-field-input-text-weight', 'text-field-label-text-color', 'text-field-label-text-font', 'text-field-label-text-line-height', 'text-field-label-text-populated-line-height', 'text-field-label-text-populated-size', 'text-field-label-text-size', 'text-field-label-text-weight', 'text-field-leading-icon-color', 'text-field-leading-icon-size', 'text-field-outline-color', 'text-field-outline-width', 'text-field-supporting-text-color', 'text-field-supporting-text-font', 'text-field-supporting-text-line-height', 'text-field-supporting-text-size', 'text-field-supporting-text-weight', 'text-field-trailing-icon-color', 'text-field-trailing-icon-size', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'menu-cascading-menu-indicator-icon-color', 'menu-cascading-menu-indicator-icon-size', 'menu-container-color', 'menu-container-elevation', 'menu-container-shadow-color', 'menu-container-shape', 'menu-divider-color', 'menu-divider-height', 'menu-list-item-container-height', 'menu-list-item-label-text-color', 'menu-list-item-label-text-font', 'menu-list-item-label-text-line-height', 'menu-list-item-label-text-size', 'menu-list-item-label-text-tracking', 'menu-list-item-label-text-type', 'menu-list-item-label-text-weight', 'menu-list-item-selected-container-color', 'menu-list-item-with-leading-icon-leading-icon-color', 'menu-list-item-with-leading-icon-leading-icon-size', 'menu-list-item-with-trailing-icon-trailing-icon-color', 'menu-list-item-with-trailing-icon-trailing-icon-size', 'text-field-container-color', 'text-field-error-hover-state-layer-color', 'text-field-error-hover-state-layer-opacity', 'text-field-hover-state-layer-color', 'text-field-hover-state-layer-opacity', 'text-field-input-text-tracking', 'text-field-input-text-type', 'text-field-label-text-tracking', 'text-field-label-text-type', 'text-field-supporting-text-tracking', 'text-field-supporting-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-outlined-select.values($deps, $exclude-hardcoded-values); $new-tokens: shape.get-new-logical-shape-tokens( $tokens, 'text-field-container-shape' ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens ); $tokens: map.merge( $tokens, ( // TODO(b/259455114): remove when focus tokens update to 3px 'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 3px) ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'text-field-container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-outlined-select-text-field-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-outlined-select-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-outlined-text-field.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-outlined-text-field'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'bottom-space', 'caret-color', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-input-text-color', 'disabled-input-text-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-icon-color', 'disabled-leading-icon-opacity', 'disabled-outline-color', 'disabled-outline-opacity', 'disabled-outline-width', 'disabled-supporting-text-color', 'disabled-supporting-text-opacity', 'disabled-trailing-icon-color', 'disabled-trailing-icon-opacity', 'error-focus-caret-color', 'error-focus-input-text-color', 'error-focus-label-text-color', 'error-focus-leading-icon-color', 'error-focus-outline-color', 'error-focus-supporting-text-color', 'error-focus-trailing-icon-color', 'error-hover-input-text-color', 'error-hover-label-text-color', 'error-hover-leading-icon-color', 'error-hover-outline-color', 'error-hover-supporting-text-color', 'error-hover-trailing-icon-color', 'error-input-text-color', 'error-label-text-color', 'error-leading-icon-color', 'error-outline-color', 'error-supporting-text-color', 'error-trailing-icon-color', 'focus-caret-color', 'focus-input-text-color', 'focus-label-text-color', 'focus-leading-icon-color', 'focus-outline-color', 'focus-outline-width', 'focus-supporting-text-color', 'focus-trailing-icon-color', 'hover-input-text-color', 'hover-label-text-color', 'hover-leading-icon-color', 'hover-outline-color', 'hover-outline-width', 'hover-supporting-text-color', 'hover-trailing-icon-color', 'icon-input-space', 'input-text-color', 'input-text-font', 'input-text-line-height', 'input-text-placeholder-color', 'input-text-prefix-color', 'input-text-prefix-trailing-space', 'input-text-size', 'input-text-suffix-color', 'input-text-suffix-leading-space', 'input-text-weight', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-populated-line-height', 'label-text-populated-size', 'label-text-size', 'label-text-weight', 'leading-icon-color', 'leading-icon-size', 'leading-space', 'outline-color', 'outline-width', 'supporting-text-color', 'supporting-text-font', 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-weight', 'top-space', 'trailing-icon-color', 'trailing-icon-size', 'trailing-space', 'with-leading-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'input-text-tracking', 'input-text-type', 'label-text-tracking', 'label-text-type', 'supporting-text-tracking', 'supporting-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( 'icon-input-space': if($exclude-hardcoded-values, null, 16px), 'leading-space': if($exclude-hardcoded-values, null, 16px), 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'top-space': if($exclude-hardcoded-values, null, 16px), 'bottom-space': if($exclude-hardcoded-values, null, 16px), 'input-text-prefix-trailing-space': if($exclude-hardcoded-values, null, 2px), 'input-text-suffix-leading-space': if($exclude-hardcoded-values, null, 2px), // TODO(b/270705687): remove when focus-caret-color token added 'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 12px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 12px), ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens ); $tokens: map.merge( $tokens, ( // TODO(b/259455114): remove when focus tokens update to 3px 'focus-outline-width': if($exclude-hardcoded-values, null, 3px) ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-outlined-text-field-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-outlined-text-field-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-primary-tab.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-primary-navigation-tab'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'active-focus-icon-color', 'active-focus-label-text-color', 'active-hover-icon-color', 'active-hover-label-text-color', 'active-hover-state-layer-color', 'active-hover-state-layer-opacity', 'active-icon-color', 'active-indicator-color', 'active-indicator-height', 'active-indicator-shape', 'active-label-text-color', 'active-pressed-icon-color', 'active-pressed-label-text-color', 'active-pressed-state-layer-color', 'active-pressed-state-layer-opacity', 'container-color', 'container-elevation', 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'focus-icon-color', 'focus-label-text-color', 'hover-icon-color', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'with-icon-and-label-text-container-height', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'active-focus-state-layer-color', 'active-focus-state-layer-opacity', 'focus-state-layer-color', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-primary-navigation-tab.values( $deps, $exclude-hardcoded-values: $exclude-hardcoded-values ); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // rename inactive- 'inactive-focus-state-layer-color': 'focus-state-layer-color', 'inactive-focus-state-layer-opacity': 'focus-state-layer-opacity', 'inactive-hover-state-layer-color': 'hover-state-layer-color', 'inactive-hover-state-layer-opacity': 'hover-state-layer-opacity', 'inactive-pressed-state-layer-color': 'pressed-state-layer-color', 'inactive-pressed-state-layer-opacity': 'pressed-state-layer-opacity', // rename with-icon- and inactive- 'with-icon-active-focus-icon-color': 'active-focus-icon-color', 'with-icon-active-hover-icon-color': 'active-hover-icon-color', 'with-icon-active-icon-color': 'active-icon-color', 'with-icon-active-pressed-icon-color': 'active-pressed-icon-color', 'with-icon-icon-size': 'icon-size', 'with-icon-inactive-focus-icon-color': 'focus-icon-color', 'with-icon-inactive-hover-icon-color': 'hover-icon-color', 'with-icon-inactive-icon-color': 'icon-color', 'with-icon-inactive-pressed-icon-color': 'pressed-icon-color', // rename with-label-text- and inactive- 'with-label-text-label-text-font': 'label-text-font', 'with-label-text-label-text-line-height': 'label-text-line-height', 'with-label-text-label-text-size': 'label-text-size', 'with-label-text-label-text-tracking': 'label-text-tracking', 'with-label-text-label-text-weight': 'label-text-weight', 'with-label-text-active-focus-label-text-color': 'active-focus-label-text-color', 'with-label-text-active-hover-label-text-color': 'active-hover-label-text-color', 'with-label-text-active-label-text-color': 'active-label-text-color', 'with-label-text-active-pressed-label-text-color': 'active-pressed-label-text-color', 'with-label-text-inactive-focus-label-text-color': 'focus-label-text-color', 'with-label-text-inactive-hover-label-text-color': 'hover-label-text-color', 'with-label-text-inactive-label-text-color': 'label-text-color', 'with-label-text-inactive-pressed-label-text-color': 'pressed-label-text-color', 'with-label-text-label-text-type': 'label-text-type' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-primary-tab-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-primary-tab-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-radio.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-radio-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'disabled-selected-icon-color', 'disabled-selected-icon-opacity', 'disabled-unselected-icon-color', 'disabled-unselected-icon-opacity', 'focus-icon-color', 'hover-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'pressed-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'selected-focus-icon-color', 'selected-hover-icon-color', 'selected-hover-state-layer-color', 'selected-hover-state-layer-opacity', 'selected-icon-color', 'selected-pressed-icon-color', 'selected-pressed-state-layer-color', 'selected-pressed-state-layer-opacity', 'state-layer-size', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'selected-focus-state-layer-color', 'selected-focus-state-layer-opacity', 'unselected-focus-state-layer-color', 'unselected-focus-state-layer-opacity', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-radio-button.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $renamed-tokens: ( // Remove default "unselected" prefix (b/292244480) 'unselected-focus-icon-color': 'focus-icon-color', 'unselected-hover-icon-color': 'hover-icon-color', 'unselected-hover-state-layer-color': 'hover-state-layer-color', 'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity', 'unselected-icon-color': 'icon-color', 'unselected-pressed-icon-color': 'pressed-icon-color', 'unselected-pressed-state-layer-color': 'pressed-state-layer-color', 'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-radio-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-ripple.scss ================================================ // // Copyright 2022 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'hover-color', 'hover-opacity', 'pressed-color', 'pressed-opacity', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-custom-properties: false) { $tokens: ( 'hover-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'pressed-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), ); $tokens: validate.values($tokens, $supported-tokens: $supported-tokens); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-ripple-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-secondary-tab.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-secondary-navigation-tab'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'active-focus-icon-color', 'active-focus-label-text-color', 'active-hover-icon-color', 'active-hover-label-text-color', 'active-hover-state-layer-color', 'active-hover-state-layer-opacity', 'active-icon-color', 'active-indicator-color', 'active-indicator-height', 'active-indicator-shape', 'active-label-text-color', 'active-pressed-icon-color', 'active-pressed-label-text-color', 'active-pressed-state-layer-color', 'active-pressed-state-layer-opacity', 'container-color', 'container-elevation', 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'focus-icon-color', 'focus-label-text-color', 'hover-icon-color', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', // go/keep-sorted end ); $unsupported-tokens: ( // include an icon and the size will adjust; // height is 48 and it's 64 with icon 'container-shadow-color', 'label-text-type', 'label-text-tracking', 'focus-state-layer-color', 'focus-state-layer-opacity' ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-secondary-navigation-tab.values( $deps, $exclude-hardcoded-values: $exclude-hardcoded-values ); $tokens: _add-missing-secondary-tokens($tokens); $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape'); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( 'inactive-label-text-color': 'label-text-color', 'with-icon-active-icon-color': 'active-icon-color', 'with-icon-focus-icon-color': 'focus-icon-color', 'with-icon-hover-icon-color': 'hover-icon-color', 'with-icon-icon-size': 'icon-size', 'with-icon-inactive-icon-color': 'icon-color', 'with-icon-pressed-icon-color': 'pressed-icon-color', ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-secondary-tab-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-secondary-tab-#{$token}, #{$value}) ); } } @return $tokens; } // add missing secondary tokens to match primary variant. @function _add-missing-secondary-tokens($tokens) { $tokens: map.merge( $tokens, ( 'active-focus-icon-color': map.get($tokens, 'icon-color'), 'active-focus-label-text-color': map.get($tokens, 'active-label-text-color'), 'active-hover-icon-color': map.get($tokens, 'icon-color'), 'active-hover-label-text-color': map.get($tokens, 'active-label-text-color'), 'active-hover-state-layer-color': map.get($tokens, 'hover-state-layer-color'), 'active-hover-state-layer-opacity': map.get($tokens, 'hover-state-layer-opacity'), 'active-icon-color': map.get($tokens, 'icon-color'), 'active-indicator-shape': 0, 'active-pressed-icon-color': map.get($tokens, 'icon-color'), 'active-pressed-label-text-color': map.get($tokens, 'active-label-text-color'), 'active-pressed-state-layer-color': map.get($tokens, 'pressed-state-layer-color'), 'active-pressed-state-layer-opacity': map.get($tokens, 'pressed-state-layer-opacity'), ) ); @return $tokens; } ================================================ FILE: tokens/_md-comp-slider.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-slider'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'active-track-color', 'active-track-height', 'active-track-shape', 'disabled-active-track-color', 'disabled-active-track-opacity', 'disabled-handle-color', 'disabled-handle-elevation', 'disabled-inactive-track-color', 'disabled-inactive-track-opacity', 'focus-handle-color', 'handle-color', 'handle-elevation', 'handle-height', 'handle-shadow-color', 'handle-shape', 'handle-width', 'hover-handle-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'inactive-track-color', 'inactive-track-height', 'inactive-track-shape', 'label-container-color', 'label-container-height', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'pressed-handle-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'state-layer-size', 'with-overlap-handle-outline-color', 'with-overlap-handle-outline-width', 'with-tick-marks-active-container-color', 'with-tick-marks-container-size', 'with-tick-marks-disabled-container-color', 'with-tick-marks-inactive-container-color', // go/keep-sorted end ); $unsupported-tokens: ( 'disabled-handle-opacity', 'label-container-elevation', 'label-text-type', 'label-text-tracking', 'track-elevation', // for efficiency, tick marks are rendered as radial-gradients and // have more limited customization 'with-tick-marks-container-shape', // Due to how opacity is multiplied together in the browser, using // these tokens results in low contrast tick marks. 'with-tick-marks-active-container-opacity', 'with-tick-marks-disabled-container-opacity', 'with-tick-marks-inactive-container-opacity', // focus tokens no longer used. 'focus-state-layer-color', 'focus-state-layer-opacity' ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: validate.values( md-comp-slider.values($deps, $exclude-hardcoded-values), $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $renamed-tokens: ( 'label-label-text-color': 'label-text-color', 'label-label-text-type': 'label-text-type', 'label-label-text-font': 'label-text-font', 'label-label-text-line-height': 'label-text-line-height', 'label-label-text-size': 'label-text-size', 'label-label-text-tracking': 'label-text-tracking', 'label-label-text-weight': 'label-text-weight', ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $tokens: map.set($tokens, $token, var(--md-slider-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-suggestion-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-suggestion-chip'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-label-text-color', 'disabled-label-text-opacity', 'disabled-leading-icon-color', 'disabled-leading-icon-opacity', 'disabled-outline-color', 'disabled-outline-opacity', 'elevated-container-color', 'elevated-container-elevation', 'elevated-container-shadow-color', 'elevated-disabled-container-color', 'elevated-disabled-container-elevation', 'elevated-disabled-container-opacity', 'elevated-focus-container-elevation', 'elevated-hover-container-elevation', 'elevated-pressed-container-elevation', 'focus-label-text-color', 'focus-leading-icon-color', 'focus-outline-color', 'hover-label-text-color', 'hover-leading-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-label-space', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-icon-color', 'leading-space', 'outline-color', 'outline-width', 'pressed-label-text-color', 'pressed-leading-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'trailing-space', 'with-leading-icon-leading-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'container-elevation', 'dragged-container-elevation', 'dragged-label-text-color', 'dragged-leading-icon-color', 'dragged-state-layer-color', 'dragged-state-layer-opacity', 'focus-state-layer-color', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( 'leading-space': if($exclude-hardcoded-values, null, 16px), 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'icon-label-space': if($exclude-hardcoded-values, null, 8px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 8px), ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "flat-*" prefix (b/275577569) 'flat-container-elevation': 'container-elevation', 'flat-disabled-outline-color': 'disabled-outline-color', 'flat-disabled-outline-opacity': 'disabled-outline-opacity', 'flat-focus-outline-color': 'focus-outline-color', 'flat-outline-color': 'outline-color', 'flat-outline-width': 'outline-width', // Remove "with-*" prefixes (b/273534858) 'with-leading-icon-disabled-leading-icon-color': 'disabled-leading-icon-color', 'with-leading-icon-disabled-leading-icon-opacity': 'disabled-leading-icon-opacity', 'with-leading-icon-dragged-leading-icon-color': 'dragged-leading-icon-color', 'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color', 'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color', 'with-leading-icon-leading-icon-color': 'leading-icon-color', 'with-leading-icon-pressed-leading-icon-color': 'pressed-leading-icon-color', // Rename "leading-icon-size" to "icon-size" (b/275577569) 'with-leading-icon-leading-icon-size': 'icon-size' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-suggestion-chip-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-suggestion-chip-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-switch.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'versions/v0_192/md-comp-switch'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'disabled-handle-color', 'disabled-handle-opacity', 'disabled-icon-color', 'disabled-icon-opacity', 'disabled-selected-handle-color', 'disabled-selected-handle-opacity', 'disabled-selected-icon-color', 'disabled-selected-icon-opacity', 'disabled-selected-track-color', 'disabled-track-color', 'disabled-track-opacity', 'disabled-track-outline-color', 'focus-handle-color', 'focus-icon-color', 'focus-track-color', 'focus-track-outline-color', 'handle-color', 'handle-height', 'handle-shape', 'handle-shape-end-end', 'handle-shape-end-start', 'handle-shape-start-end', 'handle-shape-start-start', 'handle-width', 'hover-handle-color', 'hover-icon-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'hover-track-color', 'hover-track-outline-color', 'icon-color', 'icon-size', 'pressed-handle-color', 'pressed-handle-height', 'pressed-handle-width', 'pressed-icon-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'pressed-track-color', 'pressed-track-outline-color', 'selected-focus-handle-color', 'selected-focus-icon-color', 'selected-focus-track-color', 'selected-handle-color', 'selected-handle-height', 'selected-handle-width', 'selected-hover-handle-color', 'selected-hover-icon-color', 'selected-hover-state-layer-color', 'selected-hover-state-layer-opacity', 'selected-hover-track-color', 'selected-icon-color', 'selected-icon-size', 'selected-pressed-handle-color', 'selected-pressed-icon-color', 'selected-pressed-state-layer-color', 'selected-pressed-state-layer-opacity', 'selected-pressed-track-color', 'selected-track-color', 'state-layer-shape', 'state-layer-size', 'touch-target-size', 'track-color', 'track-height', 'track-outline-color', 'track-outline-width', 'track-shape', 'track-shape-end-end', 'track-shape-end-start', 'track-shape-start-end', 'track-shape-start-start', 'track-width', 'with-icon-handle-height', 'with-icon-handle-width', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'selected-focus-state-layer-color', 'selected-focus-state-layer-opacity', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-switch.values($deps, $exclude-hardcoded-values); $new-tokens: shape.get-new-logical-shape-tokens( $tokens, 'handle-shape', 'track-shape' ); $new-tokens: map.merge( $new-tokens, ( 'touch-target-size': if($exclude-hardcoded-values, null, 48px) ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove default "unselected" prefix (b/292244480) 'disabled-unselected-handle-color': 'disabled-handle-color', 'disabled-unselected-handle-opacity': 'disabled-handle-opacity', 'disabled-unselected-icon-color': 'disabled-icon-color', 'disabled-unselected-icon-opacity': 'disabled-icon-opacity', 'disabled-unselected-track-color': 'disabled-track-color', 'disabled-unselected-track-outline-color': 'disabled-track-outline-color', 'unselected-focus-handle-color': 'focus-handle-color', 'unselected-focus-icon-color': 'focus-icon-color', 'unselected-focus-state-layer-color': 'focus-state-layer-color', 'unselected-focus-state-layer-opacity': 'focus-state-layer-opacity', 'unselected-focus-track-color': 'focus-track-color', 'unselected-focus-track-outline-color': 'focus-track-outline-color', 'unselected-handle-color': 'handle-color', 'unselected-handle-height': 'handle-height', 'unselected-handle-width': 'handle-width', 'unselected-hover-handle-color': 'hover-handle-color', 'unselected-hover-icon-color': 'hover-icon-color', 'unselected-hover-state-layer-color': 'hover-state-layer-color', 'unselected-hover-state-layer-opacity': 'hover-state-layer-opacity', 'unselected-hover-track-color': 'hover-track-color', 'unselected-hover-track-outline-color': 'hover-track-outline-color', 'unselected-icon-color': 'icon-color', 'unselected-icon-size': 'icon-size', 'unselected-pressed-handle-color': 'pressed-handle-color', 'unselected-pressed-icon-color': 'pressed-icon-color', 'unselected-pressed-state-layer-color': 'pressed-state-layer-color', 'unselected-pressed-state-layer-opacity': 'pressed-state-layer-opacity', 'unselected-pressed-track-color': 'pressed-track-color', 'unselected-pressed-track-outline-color': 'pressed-track-outline-color', 'unselected-track-color': 'track-color', 'unselected-track-outline-color': 'track-outline-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { $shape-tokens: ('handle-shape', 'track-shape'); @each $shape-token in $shape-tokens { @if string.index($token, '#{$shape-token}-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-switch-#{$shape-token}, #{$value}); } } $tokens: map.set($tokens, $token, var(--md-switch-#{$token}, #{$value})); } } @return $tokens; } ================================================ FILE: tokens/_md-comp-test-table.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'md-sys-color'; @use 'md-sys-typescale'; // go/keep-sorted end $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default) { @return ( 'cell-color': map.get($deps, 'md-sys-color', 'surface-container-lowest'), 'cell-position': 'relative', 'cell-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'cell-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'), 'cell-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'), 'cell-text-line-height': map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), 'cell-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'), 'cell-grid-color': map.get($deps, 'md-sys-color', 'surface-variant'), 'header-cell-color': map.get($deps, 'md-sys-color', 'surface-variant'), 'header-cell-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-cell-text-font': map.get($deps, 'md-sys-typescale', 'title-medium-font'), 'header-cell-text-size': map.get($deps, 'md-sys-typescale', 'title-medium-size'), 'header-cell-text-line-height': map.get($deps, 'md-sys-typescale', 'title-medium-line-height'), 'header-cell-text-weight': map.get($deps, 'md-sys-typescale', 'title-medium-weight'), 'outline-color': map.get($deps, 'md-sys-color', 'outline') ); } ================================================ FILE: tokens/_md-comp-text-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; @use 'sass:string'; // go/keep-sorted end // go/keep-sorted start @use 'internal/shape'; @use 'internal/validate'; @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; @use 'versions/v0_192/md-comp-text-button'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'container-height', 'container-shape', 'container-shape-end-end', 'container-shape-end-start', 'container-shape-start-end', 'container-shape-start-start', 'disabled-icon-color', 'disabled-icon-opacity', 'disabled-label-text-color', 'disabled-label-text-opacity', 'focus-icon-color', 'focus-label-text-color', 'hover-icon-color', 'hover-label-text-color', 'hover-state-layer-color', 'hover-state-layer-opacity', 'icon-color', 'icon-size', 'label-text-color', 'label-text-font', 'label-text-line-height', 'label-text-size', 'label-text-weight', 'leading-space', 'pressed-icon-color', 'pressed-label-text-color', 'pressed-state-layer-color', 'pressed-state-layer-opacity', 'trailing-space', 'with-leading-icon-leading-space', 'with-leading-icon-trailing-space', 'with-trailing-icon-leading-space', 'with-trailing-icon-trailing-space', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'focus-state-layer-color', 'focus-state-layer-opacity', 'label-text-tracking', 'label-text-type', // go/keep-sorted end ); $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-comp-text-button.values($deps, $exclude-hardcoded-values); $new-tokens: map.merge( shape.get-new-logical-shape-tokens($tokens, 'container-shape'), ( // b/198759625 - Remove once spacing tokens are formally added // go/keep-sorted start 'leading-space': if($exclude-hardcoded-values, null, 12px), 'trailing-space': if($exclude-hardcoded-values, null, 12px), 'with-leading-icon-leading-space': if($exclude-hardcoded-values, null, 12px), 'with-leading-icon-trailing-space': if($exclude-hardcoded-values, null, 16px), 'with-trailing-icon-leading-space': if($exclude-hardcoded-values, null, 16px), 'with-trailing-icon-trailing-space': if($exclude-hardcoded-values, null, 12px), // go/keep-sorted end ) ); $tokens: validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens, $new-tokens: $new-tokens, $renamed-tokens: ( // Remove "with-*" prefixes (b/273534858) 'with-icon-disabled-icon-color': 'disabled-icon-color', 'with-icon-disabled-icon-opacity': 'disabled-icon-opacity', 'with-icon-focus-icon-color': 'focus-icon-color', 'with-icon-hover-icon-color': 'hover-icon-color', 'with-icon-icon-color': 'icon-color', 'with-icon-icon-size': 'icon-size', 'with-icon-pressed-icon-color': 'pressed-icon-color' ) ); @if not $exclude-custom-properties { @each $token, $value in $tokens { @if string.index($token, 'container-shape-') == 1 { // Add fallback to shorthand for logical shape properties. $value: var(--md-text-button-container-shape, #{$value}); } $tokens: map.set( $tokens, $token, var(--md-text-button-#{$token}, #{$value}) ); } } @return $tokens; } ================================================ FILE: tokens/_md-ref-palette.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'internal/validate'; @use 'versions/v0_192/md-ref-palette'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'black', 'error0', 'error10', 'error100', 'error20', 'error30', 'error40', 'error50', 'error60', 'error70', 'error80', 'error90', 'error95', 'error99', 'neutral-variant0', 'neutral-variant10', 'neutral-variant100', 'neutral-variant20', 'neutral-variant30', 'neutral-variant40', 'neutral-variant50', 'neutral-variant60', 'neutral-variant70', 'neutral-variant80', 'neutral-variant90', 'neutral-variant95', 'neutral-variant99', 'neutral0', 'neutral10', 'neutral100', 'neutral12', 'neutral17', 'neutral20', 'neutral22', 'neutral24', 'neutral30', 'neutral4', 'neutral40', 'neutral50', 'neutral6', 'neutral60', 'neutral70', 'neutral80', 'neutral87', 'neutral90', 'neutral92', 'neutral94', 'neutral95', 'neutral96', 'neutral98', 'neutral99', 'primary0', 'primary10', 'primary100', 'primary20', 'primary30', 'primary40', 'primary50', 'primary60', 'primary70', 'primary80', 'primary90', 'primary95', 'primary99', 'secondary0', 'secondary10', 'secondary100', 'secondary20', 'secondary30', 'secondary40', 'secondary50', 'secondary60', 'secondary70', 'secondary80', 'secondary90', 'secondary95', 'secondary99', 'tertiary0', 'tertiary10', 'tertiary100', 'tertiary20', 'tertiary30', 'tertiary40', 'tertiary50', 'tertiary60', 'tertiary70', 'tertiary80', 'tertiary90', 'tertiary95', 'tertiary99', 'white', // go/keep-sorted end ); @function values($exclude-hardcoded-values: false) { @return validate.values( md-ref-palette.values($exclude-hardcoded-values), $supported-tokens: $supported-tokens ); } ================================================ FILE: tokens/_md-ref-typeface.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'versions/v0_192/md-ref-typeface'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'brand', 'plain', 'weight-bold', 'weight-medium', 'weight-regular', // go/keep-sorted end ); @function values( $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-ref-typeface.values( $exclude-hardcoded-values: $exclude-hardcoded-values, ); @if not $exclude-custom-properties { // Create --md-ref-typeface-* custom properties @each $token, $value in $tokens { @if $value != null { $tokens: map.set( $tokens, $token, var(--md-ref-typeface-#{$token}, #{$value}) ); } } } @return validate.values($tokens, $supported-tokens: $supported-tokens); } ================================================ FILE: tokens/_md-sys-color.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-ref-palette'; @use 'versions/v0_192/md-sys-color'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'background', 'error', 'error-container', 'inverse-on-surface', 'inverse-primary', 'inverse-surface', 'on-background', 'on-error', 'on-error-container', 'on-primary', 'on-primary-container', 'on-primary-fixed', 'on-primary-fixed-variant', 'on-secondary', 'on-secondary-container', 'on-secondary-fixed', 'on-secondary-fixed-variant', 'on-surface', 'on-surface-variant', 'on-tertiary', 'on-tertiary-container', 'on-tertiary-fixed', 'on-tertiary-fixed-variant', 'outline', 'outline-variant', 'primary', 'primary-container', 'primary-fixed', 'primary-fixed-dim', 'scrim', 'secondary', 'secondary-container', 'secondary-fixed', 'secondary-fixed-dim', 'shadow', 'surface', 'surface-bright', 'surface-container', 'surface-container-high', 'surface-container-highest', 'surface-container-low', 'surface-container-lowest', 'surface-dim', 'surface-tint', 'surface-variant', 'tertiary', 'tertiary-container', 'tertiary-fixed', 'tertiary-fixed-dim', // go/keep-sorted end ); $_default-dark: ( 'md-ref-palette': md-ref-palette.values(), ); @function values-dark( $deps: $_default-dark, $exclude-custom-properties: false ) { $tokens: md-sys-color.values-dark($deps); @if not $exclude-custom-properties { // Create --md-sys-color-* custom properties @each $token, $value in $tokens { @if $value != null { $tokens: map.set( $tokens, $token, var(--md-sys-color-#{$token}, #{$value}) ); } } } @return validate.values($tokens, $supported-tokens: $supported-tokens); } $_default-light: ( 'md-ref-palette': md-ref-palette.values(), ); @function values-light( $deps: $_default-light, $exclude-custom-properties: false ) { $tokens: md-sys-color.values-light($deps); @if not $exclude-custom-properties { // Create --md-sys-color-* custom properties @each $token, $value in $tokens { @if $value != null { $tokens: map.set( $tokens, $token, var(--md-sys-color-#{$token}, #{$value}) ); } } } @return validate.values($tokens, $supported-tokens: $supported-tokens); } ================================================ FILE: tokens/_md-sys-elevation.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'versions/v0_192/md-sys-elevation'; // go/keep-sorted end @function values($exclude-hardcoded-values: false) { $tokens: md-sys-elevation.values($exclude-hardcoded-values); $tokens: map.merge( $tokens, ( // Elevation levels on web should use the level number, not the dp value. // We can remove this if the generated tokens swap from dp to level. See // b/261602454. 'level0': if($exclude-hardcoded-values, null, 0), 'level1': if($exclude-hardcoded-values, null, 1), 'level2': if($exclude-hardcoded-values, null, 2), 'level3': if($exclude-hardcoded-values, null, 3), 'level4': if($exclude-hardcoded-values, null, 4), 'level5': if($exclude-hardcoded-values, null, 5) ) ); @return $tokens; } ================================================ FILE: tokens/_md-sys-motion.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'versions/v0_192/md-sys-motion'; // go/keep-sorted end @function values($exclude-hardcoded-values: false) { @return md-sys-motion.values($exclude-hardcoded-values); } ================================================ FILE: tokens/_md-sys-shape.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'versions/v0_192/md-sys-shape'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'corner-extra-large', 'corner-extra-small', 'corner-full', 'corner-large', 'corner-medium', 'corner-none', 'corner-small', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'corner-extra-large-top', 'corner-extra-small-top', 'corner-large-end', 'corner-large-start', 'corner-large-top', // go/keep-sorted end ); @function values( $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $original-tokens: md-sys-shape.values($exclude-hardcoded-values); $tokens: validate.values( $original-tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens ); @if not $exclude-custom-properties { // Create --md-sys-shape-* custom properties @each $token, $value in $tokens { @if $value != null { $tokens: map.set( $tokens, $token, var(--md-sys-shape-#{$token}, #{$value}) ); } } } // Add multi-corner shape tokens purely for other Sass token APIs. These do // not represent real token custom properties that can be set (there is no // `--md-sys-shape-corner-extra-large-top` custom property). // Instead, these are shorthand values that point to single-corner custom // properties for usage in Sass component token mappings. $tokens: map.merge( $tokens, ( 'corner-extra-large-top': ( map.get($tokens, 'corner-extra-large'), map.get($tokens, 'corner-extra-large'), map.get($tokens, 'corner-none'), map.get($tokens, 'corner-none'), ), 'corner-extra-small-top': ( map.get($tokens, 'corner-extra-small'), map.get($tokens, 'corner-extra-small'), map.get($tokens, 'corner-none'), map.get($tokens, 'corner-none'), ), 'corner-large-end': ( map.get($tokens, 'corner-none'), map.get($tokens, 'corner-large'), map.get($tokens, 'corner-large'), map.get($tokens, 'corner-none'), ), 'corner-large-start': ( map.get($tokens, 'corner-large'), map.get($tokens, 'corner-none'), map.get($tokens, 'corner-none'), map.get($tokens, 'corner-large'), ), 'corner-large-top': ( map.get($tokens, 'corner-large'), map.get($tokens, 'corner-large'), map.get($tokens, 'corner-none'), map.get($tokens, 'corner-none'), ), ) ); @return $tokens; } ================================================ FILE: tokens/_md-sys-state.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'versions/v0_192/md-sys-state'; // go/keep-sorted end @function values($exclude-hardcoded-values: false) { @return md-sys-state.values($exclude-hardcoded-values); } ================================================ FILE: tokens/_md-sys-typescale.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use 'internal/validate'; @use 'md-ref-typeface'; @use 'versions/v0_192/md-sys-typescale'; // go/keep-sorted end $supported-tokens: ( // go/keep-sorted start 'body-large-font', 'body-large-line-height', 'body-large-size', 'body-large-weight', 'body-medium-font', 'body-medium-line-height', 'body-medium-size', 'body-medium-weight', 'body-small-font', 'body-small-line-height', 'body-small-size', 'body-small-weight', 'display-large-font', 'display-large-line-height', 'display-large-size', 'display-large-weight', 'display-medium-font', 'display-medium-line-height', 'display-medium-size', 'display-medium-weight', 'display-small-font', 'display-small-line-height', 'display-small-size', 'display-small-weight', 'headline-large-font', 'headline-large-line-height', 'headline-large-size', 'headline-large-weight', 'headline-medium-font', 'headline-medium-line-height', 'headline-medium-size', 'headline-medium-weight', 'headline-small-font', 'headline-small-line-height', 'headline-small-size', 'headline-small-weight', 'label-large-font', 'label-large-line-height', 'label-large-size', 'label-large-weight', 'label-large-weight-prominent', 'label-medium-font', 'label-medium-line-height', 'label-medium-size', 'label-medium-weight', 'label-medium-weight-prominent', 'label-small-font', 'label-small-line-height', 'label-small-size', 'label-small-weight', 'title-large-font', 'title-large-line-height', 'title-large-size', 'title-large-weight', 'title-medium-font', 'title-medium-line-height', 'title-medium-size', 'title-medium-weight', 'title-small-font', 'title-small-line-height', 'title-small-size', 'title-small-weight', // go/keep-sorted end ); $unsupported-tokens: ( // go/keep-sorted start 'body-large', 'body-large-tracking', 'body-medium', 'body-medium-tracking', 'body-small', 'body-small-tracking', 'display-large', 'display-large-tracking', 'display-medium', 'display-medium-tracking', 'display-small', 'display-small-tracking', 'headline-large', 'headline-large-tracking', 'headline-medium', 'headline-medium-tracking', 'headline-small', 'headline-small-tracking', 'label-large', 'label-large-tracking', 'label-medium', 'label-medium-tracking', 'label-small', 'label-small-tracking', 'title-large', 'title-large-tracking', 'title-medium', 'title-medium-tracking', 'title-small', 'title-small-tracking', // go/keep-sorted end ); $_default: ( 'md-ref-typeface': md-ref-typeface.values(), ); @function values( $deps: $_default, $exclude-hardcoded-values: false, $exclude-custom-properties: false ) { $tokens: md-sys-typescale.values( $deps, $exclude-hardcoded-values: $exclude-hardcoded-values ); @if not $exclude-custom-properties { // Create --md-sys-typescale-* custom properties @each $token, $value in $tokens { @if $value != null { $tokens: map.set( $tokens, $token, var(--md-sys-typescale-#{$token}, #{$value}) ); } } } @return validate.values( $tokens, $supported-tokens: $supported-tokens, $unsupported-tokens: $unsupported-tokens ); } ================================================ FILE: tokens/internal/_shape.scss ================================================ // // Copyright 2024 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; @use 'sass:meta'; // go/keep-sorted end /// Returns a map of 4 logical tokens (start-start, start-end, end-end, /// and end-start) for each of the given shape tokens in the provided token /// map. /// /// @example scss /// $tokens: ('container-shape': 16px 16px 0px 0px); /// $new-tokens: shape.get-new-logical-shape-tokens( /// $tokens, /// 'container-shape' /// ); /// // ( /// // 'container-shape-start-start': 16px, /// // 'container-shape-start-end': 16px, /// // 'container-shape-end-end': 0px, /// // 'container-shape-end-start': 0px, /// // ) /// /// @param $tokens A Map of tokens. /// @param $shape-tokens One or more shape tokens in the provided map. Each /// shape token will add 4 logical shape tokens to the returned map. /// @return A map with 4 logical tokens for each provided shape token. @function get-new-logical-shape-tokens($tokens, $shape-tokens...) { $new-logical-tokens: (); $logical-suffixes: ( // top-left 'start-start', // top-right 'start-end', // bottom-right 'end-end', // bottom-left 'end-start' ); @each $shape-token in $shape-tokens { $shorthand-value: _expand-shorthand-to-list(map.get($tokens, $shape-token)); @each $logical-suffix in $logical-suffixes { $logical-token: '#{$shape-token}-#{$logical-suffix}'; $logical-index: list.index($logical-suffixes, $logical-suffix); $new-logical-tokens: map.set( $new-logical-tokens, $logical-token, list.nth($shorthand-value, $logical-index) ); } } @return $new-logical-tokens; } @function _expand-shorthand-to-list($shorthand) { @if meta.type-of($shorthand) != 'list' or list.length($shorthand) == 1 { @return ($shorthand, $shorthand, $shorthand, $shorthand); } @if list.length($shorthand) == 2 { $top-left-and-bottom-right: list.nth($shorthand, 1); $top-right-and-bottom-left: list.nth($shorthand, 2); @return ( $top-left-and-bottom-right, $top-right-and-bottom-left, $top-left-and-bottom-right, $top-right-and-bottom-left ); } @if list.length($shorthand) == 3 { $top-left: list.nth($shorthand, 1); $top-right-and-bottom-left: list.nth($shorthand, 2); $bottom-right: list.nth($shorthand, 3); @return ( $top-left, $top-right-and-bottom-left, $bottom-right, $top-right-and-bottom-left ); } @return $shorthand; } ================================================ FILE: tokens/internal/_validate.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; @use 'sass:meta'; // go/keep-sorted end /// Validates the Map returned from `tokens.md-comp-*-values()` functions. /// /// Validation requires a `$values` Map and at least the `$supported-tokens` /// keyword argument. /// @example - scss /// $tokens: validate.values( /// md-comp-foo.values($deps, $exclude-hardcoded-values), /// $supported-tokens: (), /// 'foo-color', /// 'foo-size', /// ), /// ); /// /// Additional keyword arguments for `$unsupported-tokens`, `$renamed-tokens`, /// and `$new-tokens` are optional. /// /// @param {Map} $values - The values Map returned from /// `tokens.md-comp-*-values()` functions. /// @param {List} $supported-tokens - Keyword argument for every token that is /// supported. /// @param {List} $unsupported-tokens [null] - Keyword argument for every token /// that is not supported and should be removed. /// @param {Map} $renamed-tokens [null] - Keyword argument for a Map whose keys /// are token names and values are new token names to rename them to. The /// new token name must appear in the `$supported-tokens` list. /// @param {Map} $new-tokens [null] - Keyword argument for a Map whose keys /// and values are new tokens to be added. They must also appear in the /// `$supported-tokens` list. /// @return {Map} The `tokens.md-comp-*-values()` Map with any unsupported /// tokens removed, renamed tokens updated, and new tokens added. @function values($values, $tokens...) { $tokens: meta.keywords($tokens); $renamed-tokens: map.get($tokens, 'renamed-tokens'); @if $renamed-tokens { @if meta.type-of($renamed-tokens) != 'map' { @error 'validate.values($renamed-tokens) must be a map.'; } @each $old-token, $new-token in $renamed-tokens { @if not map.has-key($values, $old-token) { @error 'validate.values($renamed-tokens: (\'#{$old-token}\': \'#{$new-token}\')) old-token in not the provided values.'; } $values: map.set($values, $new-token, map.get($values, $old-token)); $values: map.remove($values, $old-token); } } $unsupported-tokens: map.get($tokens, 'unsupported-tokens'); @if $unsupported-tokens { @if meta.type-of($unsupported-tokens) != 'list' { @error 'validate.values($unsupported-tokens) must be a list.'; } @each $unsupported-token in $unsupported-tokens { @if not map.has-key($values, $unsupported-token) { @error 'validate.values($unsupported-tokens: (\'#{$unsupported-token}\')) token is not in the provided values.'; } $values: map.remove($values, $unsupported-token); } } $new-tokens: map.get($tokens, 'new-tokens'); @if $new-tokens { @if meta.type-of($new-tokens) != 'map' { @error 'validate.values($new-tokens) must be a map.'; } @each $new-token, $new-value in $new-tokens { @if map.has-key($values, $new-token) { @warn 'validate.values($new-tokens: (\'#{$new-token}\': \'#{$new-value}\')) already exists. Has it been added to tokens? If so, remove this new token.'; } $values: map.set($values, $new-token, $new-value); } } $supported-tokens: map.get($tokens, 'supported-tokens'); @if not $supported-tokens or meta.type-of($supported-tokens) != 'list' { @error 'validate.values() must include a $supported-tokens list.'; } @each $token in map.keys($values) { @if list.index($supported-tokens, $token) == null { @error 'validate.values($supported-tokens) is missing the \'#{$token}\' token. Does it need adding to $unsupported-tokens?'; } } @each $supported-token in $supported-tokens { @if not map.has-key($values, $supported-token) { @error 'The provided values are missing the supported \'#{$supported-token}\' token.'; } } @return $values; } ================================================ FILE: tokens/v0_192/_index.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // /// @deprecated this folder has moved to `@material/web/tokens/versions/v0_192` /// TODO: b/449809799 - remove this folder in the next major version. @forward '../versions/v0_192/index'; ================================================ FILE: tokens/v0_192/_md-comp-assist-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-assist-chip'; ================================================ FILE: tokens/v0_192/_md-comp-badge.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-badge'; ================================================ FILE: tokens/v0_192/_md-comp-banner.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-banner'; ================================================ FILE: tokens/v0_192/_md-comp-bottom-app-bar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-bottom-app-bar'; ================================================ FILE: tokens/v0_192/_md-comp-carousel-item.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-carousel-item'; ================================================ FILE: tokens/v0_192/_md-comp-checkbox.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-checkbox'; ================================================ FILE: tokens/v0_192/_md-comp-circular-progress-indicator.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-circular-progress-indicator'; ================================================ FILE: tokens/v0_192/_md-comp-data-table.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-data-table'; ================================================ FILE: tokens/v0_192/_md-comp-date-input-modal.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-date-input-modal'; ================================================ FILE: tokens/v0_192/_md-comp-date-picker-docked.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-date-picker-docked'; ================================================ FILE: tokens/v0_192/_md-comp-date-picker-modal.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-date-picker-modal'; ================================================ FILE: tokens/v0_192/_md-comp-dialog.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-dialog'; ================================================ FILE: tokens/v0_192/_md-comp-divider.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-divider'; ================================================ FILE: tokens/v0_192/_md-comp-elevated-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-elevated-button'; ================================================ FILE: tokens/v0_192/_md-comp-elevated-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-elevated-card'; ================================================ FILE: tokens/v0_192/_md-comp-extended-fab-branded.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-extended-fab-branded'; ================================================ FILE: tokens/v0_192/_md-comp-extended-fab-primary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-extended-fab-primary'; ================================================ FILE: tokens/v0_192/_md-comp-extended-fab-secondary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-extended-fab-secondary'; ================================================ FILE: tokens/v0_192/_md-comp-extended-fab-surface.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-extended-fab-surface'; ================================================ FILE: tokens/v0_192/_md-comp-extended-fab-tertiary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-extended-fab-tertiary'; ================================================ FILE: tokens/v0_192/_md-comp-fab-branded-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-branded-large'; ================================================ FILE: tokens/v0_192/_md-comp-fab-branded.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-branded'; ================================================ FILE: tokens/v0_192/_md-comp-fab-primary-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-primary-large'; ================================================ FILE: tokens/v0_192/_md-comp-fab-primary-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-primary-small'; ================================================ FILE: tokens/v0_192/_md-comp-fab-primary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-primary'; ================================================ FILE: tokens/v0_192/_md-comp-fab-secondary-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-secondary-large'; ================================================ FILE: tokens/v0_192/_md-comp-fab-secondary-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-secondary-small'; ================================================ FILE: tokens/v0_192/_md-comp-fab-secondary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-secondary'; ================================================ FILE: tokens/v0_192/_md-comp-fab-surface-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-surface-large'; ================================================ FILE: tokens/v0_192/_md-comp-fab-surface-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-surface-small'; ================================================ FILE: tokens/v0_192/_md-comp-fab-surface.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-surface'; ================================================ FILE: tokens/v0_192/_md-comp-fab-tertiary-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-tertiary-large'; ================================================ FILE: tokens/v0_192/_md-comp-fab-tertiary-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-tertiary-small'; ================================================ FILE: tokens/v0_192/_md-comp-fab-tertiary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-fab-tertiary'; ================================================ FILE: tokens/v0_192/_md-comp-filled-autocomplete.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-autocomplete'; ================================================ FILE: tokens/v0_192/_md-comp-filled-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-button'; ================================================ FILE: tokens/v0_192/_md-comp-filled-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-card'; ================================================ FILE: tokens/v0_192/_md-comp-filled-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-icon-button'; ================================================ FILE: tokens/v0_192/_md-comp-filled-menu-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-menu-button'; ================================================ FILE: tokens/v0_192/_md-comp-filled-select.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-select'; ================================================ FILE: tokens/v0_192/_md-comp-filled-text-field.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-text-field'; ================================================ FILE: tokens/v0_192/_md-comp-filled-tonal-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-tonal-button'; ================================================ FILE: tokens/v0_192/_md-comp-filled-tonal-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filled-tonal-icon-button'; ================================================ FILE: tokens/v0_192/_md-comp-filter-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-filter-chip'; ================================================ FILE: tokens/v0_192/_md-comp-full-screen-dialog.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-full-screen-dialog'; ================================================ FILE: tokens/v0_192/_md-comp-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-icon-button'; ================================================ FILE: tokens/v0_192/_md-comp-input-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-input-chip'; ================================================ FILE: tokens/v0_192/_md-comp-linear-progress-indicator.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-linear-progress-indicator'; ================================================ FILE: tokens/v0_192/_md-comp-list.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-list'; ================================================ FILE: tokens/v0_192/_md-comp-menu.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-menu'; ================================================ FILE: tokens/v0_192/_md-comp-navigation-bar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-navigation-bar'; ================================================ FILE: tokens/v0_192/_md-comp-navigation-drawer.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-navigation-drawer'; ================================================ FILE: tokens/v0_192/_md-comp-navigation-rail.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-navigation-rail'; ================================================ FILE: tokens/v0_192/_md-comp-outlined-autocomplete.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-outlined-autocomplete'; ================================================ FILE: tokens/v0_192/_md-comp-outlined-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-outlined-button'; ================================================ FILE: tokens/v0_192/_md-comp-outlined-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-outlined-card'; ================================================ FILE: tokens/v0_192/_md-comp-outlined-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-outlined-icon-button'; ================================================ FILE: tokens/v0_192/_md-comp-outlined-menu-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-outlined-menu-button'; ================================================ FILE: tokens/v0_192/_md-comp-outlined-segmented-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-outlined-segmented-button'; ================================================ FILE: tokens/v0_192/_md-comp-outlined-select.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-outlined-select'; ================================================ FILE: tokens/v0_192/_md-comp-outlined-text-field.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-outlined-text-field'; ================================================ FILE: tokens/v0_192/_md-comp-plain-tooltip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-plain-tooltip'; ================================================ FILE: tokens/v0_192/_md-comp-primary-navigation-tab.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-primary-navigation-tab'; ================================================ FILE: tokens/v0_192/_md-comp-radio-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-radio-button'; ================================================ FILE: tokens/v0_192/_md-comp-rich-tooltip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-rich-tooltip'; ================================================ FILE: tokens/v0_192/_md-comp-scrim.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-scrim'; ================================================ FILE: tokens/v0_192/_md-comp-search-bar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-search-bar'; ================================================ FILE: tokens/v0_192/_md-comp-search-view.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-search-view'; ================================================ FILE: tokens/v0_192/_md-comp-secondary-navigation-tab.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-secondary-navigation-tab'; ================================================ FILE: tokens/v0_192/_md-comp-sheet-bottom.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-sheet-bottom'; ================================================ FILE: tokens/v0_192/_md-comp-sheet-floating.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-sheet-floating'; ================================================ FILE: tokens/v0_192/_md-comp-sheet-side.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-sheet-side'; ================================================ FILE: tokens/v0_192/_md-comp-slider.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-slider'; ================================================ FILE: tokens/v0_192/_md-comp-snackbar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-snackbar'; ================================================ FILE: tokens/v0_192/_md-comp-standard-menu-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-standard-menu-button'; ================================================ FILE: tokens/v0_192/_md-comp-suggestion-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-suggestion-chip'; ================================================ FILE: tokens/v0_192/_md-comp-switch.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-switch'; ================================================ FILE: tokens/v0_192/_md-comp-text-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-text-button'; ================================================ FILE: tokens/v0_192/_md-comp-time-input.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-time-input'; ================================================ FILE: tokens/v0_192/_md-comp-time-picker.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-time-picker'; ================================================ FILE: tokens/v0_192/_md-comp-top-app-bar-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-top-app-bar-large'; ================================================ FILE: tokens/v0_192/_md-comp-top-app-bar-medium.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-top-app-bar-medium'; ================================================ FILE: tokens/v0_192/_md-comp-top-app-bar-small-centered.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-top-app-bar-small-centered'; ================================================ FILE: tokens/v0_192/_md-comp-top-app-bar-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-comp-top-app-bar-small'; ================================================ FILE: tokens/v0_192/_md-ref-palette.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-ref-palette'; ================================================ FILE: tokens/v0_192/_md-ref-typeface.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-ref-typeface'; ================================================ FILE: tokens/v0_192/_md-sys-color.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-sys-color'; ================================================ FILE: tokens/v0_192/_md-sys-elevation.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-sys-elevation'; ================================================ FILE: tokens/v0_192/_md-sys-motion.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-sys-motion'; ================================================ FILE: tokens/v0_192/_md-sys-shape.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-sys-shape'; ================================================ FILE: tokens/v0_192/_md-sys-state.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-sys-state'; ================================================ FILE: tokens/v0_192/_md-sys-typescale.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // @forward '../versions/v0_192/md-sys-typescale'; ================================================ FILE: tokens/v0_192/index.test.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // @use 'true' as test; @use './index'; @include test.describe('index') { @include test.describe('index.md-comp-assist-chip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-assist-chip-values()); } } @include test.describe('index.md-comp-badge-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-badge-values()); } } @include test.describe('index.md-comp-banner-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-banner-values()); } } @include test.describe('index.md-comp-bottom-app-bar-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-bottom-app-bar-values()); } } @include test.describe('index.md-comp-carousel-item-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-carousel-item-values()); } } @include test.describe('index.md-comp-checkbox-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-checkbox-values()); } } @include test.describe('index.md-comp-circular-progress-indicator-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-circular-progress-indicator-values() ); } } @include test.describe('index.md-comp-data-table-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-data-table-values()); } } @include test.describe('index.md-comp-date-input-modal-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-date-input-modal-values()); } } @include test.describe('index.md-comp-date-picker-docked-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-date-picker-docked-values()); } } @include test.describe('index.md-comp-date-picker-modal-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-date-picker-modal-values()); } } @include test.describe('index.md-comp-dialog-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-dialog-values()); } } @include test.describe('index.md-comp-divider-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-divider-values()); } } @include test.describe('index.md-comp-elevated-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-elevated-button-values()); } } @include test.describe('index.md-comp-elevated-card-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-elevated-card-values()); } } @include test.describe('index.md-comp-extended-fab-branded-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-branded-values()); } } @include test.describe('index.md-comp-extended-fab-primary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-primary-values()); } } @include test.describe('index.md-comp-extended-fab-secondary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-secondary-values()); } } @include test.describe('index.md-comp-extended-fab-surface-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-surface-values()); } } @include test.describe('index.md-comp-extended-fab-tertiary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-tertiary-values()); } } @include test.describe('index.md-comp-fab-branded-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-branded-values()); } } @include test.describe('index.md-comp-fab-branded-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-branded-large-values()); } } @include test.describe('index.md-comp-fab-primary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-primary-values()); } } @include test.describe('index.md-comp-fab-primary-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-primary-large-values()); } } @include test.describe('index.md-comp-fab-primary-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-primary-small-values()); } } @include test.describe('index.md-comp-fab-secondary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-secondary-values()); } } @include test.describe('index.md-comp-fab-secondary-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-secondary-large-values()); } } @include test.describe('index.md-comp-fab-secondary-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-secondary-small-values()); } } @include test.describe('index.md-comp-fab-surface-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-surface-values()); } } @include test.describe('index.md-comp-fab-surface-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-surface-large-values()); } } @include test.describe('index.md-comp-fab-surface-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-surface-small-values()); } } @include test.describe('index.md-comp-fab-tertiary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-tertiary-values()); } } @include test.describe('index.md-comp-fab-tertiary-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-tertiary-large-values()); } } @include test.describe('index.md-comp-fab-tertiary-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-tertiary-small-values()); } } @include test.describe('index.md-comp-filled-autocomplete-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-autocomplete-values()); } } @include test.describe('index.md-comp-filled-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-button-values()); } } @include test.describe('index.md-comp-filled-card-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-card-values()); } } @include test.describe('index.md-comp-filled-icon-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-icon-button-values()); } } @include test.describe('index.md-comp-filled-menu-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-menu-button-values()); } } @include test.describe('index.md-comp-filled-select-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-select-values()); } } @include test.describe('index.md-comp-filled-text-field-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-text-field-values()); } } @include test.describe('index.md-comp-filled-tonal-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-tonal-button-values()); } } @include test.describe('index.md-comp-filled-tonal-icon-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-filled-tonal-icon-button-values() ); } } @include test.describe('index.md-comp-filter-chip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filter-chip-values()); } } @include test.describe('index.md-comp-full-screen-dialog-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-full-screen-dialog-values()); } } @include test.describe('index.md-comp-icon-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-icon-button-values()); } } @include test.describe('index.md-comp-input-chip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-input-chip-values()); } } @include test.describe('index.md-comp-linear-progress-indicator-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-linear-progress-indicator-values() ); } } @include test.describe('index.md-comp-list-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-list-values()); } } @include test.describe('index.md-comp-menu-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-menu-values()); } } @include test.describe('index.md-comp-navigation-bar-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-navigation-bar-values()); } } @include test.describe('index.md-comp-navigation-drawer-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-navigation-drawer-values()); } } @include test.describe('index.md-comp-navigation-rail-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-navigation-rail-values()); } } @include test.describe('index.md-comp-outlined-autocomplete-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-autocomplete-values()); } } @include test.describe('index.md-comp-outlined-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-button-values()); } } @include test.describe('index.md-comp-outlined-card-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-card-values()); } } @include test.describe('index.md-comp-outlined-icon-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-icon-button-values()); } } @include test.describe('index.md-comp-outlined-menu-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-menu-button-values()); } } @include test.describe('index.md-comp-outlined-segmented-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-outlined-segmented-button-values() ); } } @include test.describe('index.md-comp-outlined-select-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-select-values()); } } @include test.describe('index.md-comp-outlined-text-field-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-text-field-values()); } } @include test.describe('index.md-comp-plain-tooltip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-plain-tooltip-values()); } } @include test.describe('index.md-comp-primary-navigation-tab-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-primary-navigation-tab-values()); } } @include test.describe('index.md-comp-radio-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-radio-button-values()); } } @include test.describe('index.md-comp-rich-tooltip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-rich-tooltip-values()); } } @include test.describe('index.md-comp-scrim-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-scrim-values()); } } @include test.describe('index.md-comp-search-bar-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-search-bar-values()); } } @include test.describe('index.md-comp-search-view-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-search-view-values()); } } @include test.describe('index.md-comp-secondary-navigation-tab-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-secondary-navigation-tab-values() ); } } @include test.describe('index.md-comp-sheet-bottom-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-sheet-bottom-values()); } } @include test.describe('index.md-comp-sheet-floating-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-sheet-floating-values()); } } @include test.describe('index.md-comp-sheet-side-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-sheet-side-values()); } } @include test.describe('index.md-comp-slider-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-slider-values()); } } @include test.describe('index.md-comp-snackbar-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-snackbar-values()); } } @include test.describe('index.md-comp-standard-menu-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-standard-menu-button-values()); } } @include test.describe('index.md-comp-suggestion-chip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-suggestion-chip-values()); } } @include test.describe('index.md-comp-switch-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-switch-values()); } } @include test.describe('index.md-comp-text-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-text-button-values()); } } @include test.describe('index.md-comp-time-input-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-time-input-values()); } } @include test.describe('index.md-comp-time-picker-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-time-picker-values()); } } @include test.describe('index.md-comp-top-app-bar-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-top-app-bar-large-values()); } } @include test.describe('index.md-comp-top-app-bar-medium-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-top-app-bar-medium-values()); } } @include test.describe('index.md-comp-top-app-bar-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-top-app-bar-small-values()); } } @include test.describe('index.md-comp-top-app-bar-small-centered-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-top-app-bar-small-centered-values() ); } } @include test.describe('index.md-ref-palette-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-ref-palette-values()); } } @include test.describe('index.md-ref-typeface-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-ref-typeface-values()); } } @include test.describe('index.md-sys-color-values-dark') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-color-values-dark()); } } @include test.describe('index.md-sys-color-values-light') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-color-values-light()); } } @include test.describe('index.md-sys-elevation-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-elevation-values()); } } @include test.describe('index.md-sys-motion-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-motion-values()); } } @include test.describe('index.md-sys-shape-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-shape-values()); } } @include test.describe('index.md-sys-state-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-state-values()); } } @include test.describe('index.md-sys-typescale-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-typescale-values()); } } } ================================================ FILE: tokens/v0_192/lib.test.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // @use 'true' as test; @use './md-comp-assist-chip'; @use './md-comp-badge'; @use './md-comp-banner'; @use './md-comp-bottom-app-bar'; @use './md-comp-carousel-item'; @use './md-comp-checkbox'; @use './md-comp-circular-progress-indicator'; @use './md-comp-data-table'; @use './md-comp-date-input-modal'; @use './md-comp-date-picker-docked'; @use './md-comp-date-picker-modal'; @use './md-comp-dialog'; @use './md-comp-divider'; @use './md-comp-elevated-button'; @use './md-comp-elevated-card'; @use './md-comp-extended-fab-branded'; @use './md-comp-extended-fab-primary'; @use './md-comp-extended-fab-secondary'; @use './md-comp-extended-fab-surface'; @use './md-comp-extended-fab-tertiary'; @use './md-comp-fab-branded'; @use './md-comp-fab-branded-large'; @use './md-comp-fab-primary'; @use './md-comp-fab-primary-large'; @use './md-comp-fab-primary-small'; @use './md-comp-fab-secondary'; @use './md-comp-fab-secondary-large'; @use './md-comp-fab-secondary-small'; @use './md-comp-fab-surface'; @use './md-comp-fab-surface-large'; @use './md-comp-fab-surface-small'; @use './md-comp-fab-tertiary'; @use './md-comp-fab-tertiary-large'; @use './md-comp-fab-tertiary-small'; @use './md-comp-filled-autocomplete'; @use './md-comp-filled-button'; @use './md-comp-filled-card'; @use './md-comp-filled-icon-button'; @use './md-comp-filled-menu-button'; @use './md-comp-filled-select'; @use './md-comp-filled-text-field'; @use './md-comp-filled-tonal-button'; @use './md-comp-filled-tonal-icon-button'; @use './md-comp-filter-chip'; @use './md-comp-full-screen-dialog'; @use './md-comp-icon-button'; @use './md-comp-input-chip'; @use './md-comp-linear-progress-indicator'; @use './md-comp-list'; @use './md-comp-menu'; @use './md-comp-navigation-bar'; @use './md-comp-navigation-drawer'; @use './md-comp-navigation-rail'; @use './md-comp-outlined-autocomplete'; @use './md-comp-outlined-button'; @use './md-comp-outlined-card'; @use './md-comp-outlined-icon-button'; @use './md-comp-outlined-menu-button'; @use './md-comp-outlined-segmented-button'; @use './md-comp-outlined-select'; @use './md-comp-outlined-text-field'; @use './md-comp-plain-tooltip'; @use './md-comp-primary-navigation-tab'; @use './md-comp-radio-button'; @use './md-comp-rich-tooltip'; @use './md-comp-scrim'; @use './md-comp-search-bar'; @use './md-comp-search-view'; @use './md-comp-secondary-navigation-tab'; @use './md-comp-sheet-bottom'; @use './md-comp-sheet-floating'; @use './md-comp-sheet-side'; @use './md-comp-slider'; @use './md-comp-snackbar'; @use './md-comp-standard-menu-button'; @use './md-comp-suggestion-chip'; @use './md-comp-switch'; @use './md-comp-text-button'; @use './md-comp-time-input'; @use './md-comp-time-picker'; @use './md-comp-top-app-bar-large'; @use './md-comp-top-app-bar-medium'; @use './md-comp-top-app-bar-small'; @use './md-comp-top-app-bar-small-centered'; @use './md-ref-palette'; @use './md-ref-typeface'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-motion'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; @include test.describe('lib') { @include test.describe('md-comp-assist-chip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-assist-chip.values()); } } @include test.describe('md-comp-badge.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-badge.values()); } } @include test.describe('md-comp-banner.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-banner.values()); } } @include test.describe('md-comp-bottom-app-bar.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-bottom-app-bar.values()); } } @include test.describe('md-comp-carousel-item.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-carousel-item.values()); } } @include test.describe('md-comp-checkbox.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-checkbox.values()); } } @include test.describe('md-comp-circular-progress-indicator.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-circular-progress-indicator.values()); } } @include test.describe('md-comp-data-table.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-data-table.values()); } } @include test.describe('md-comp-date-input-modal.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-date-input-modal.values()); } } @include test.describe('md-comp-date-picker-docked.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-date-picker-docked.values()); } } @include test.describe('md-comp-date-picker-modal.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-date-picker-modal.values()); } } @include test.describe('md-comp-dialog.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-dialog.values()); } } @include test.describe('md-comp-divider.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-divider.values()); } } @include test.describe('md-comp-elevated-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-elevated-button.values()); } } @include test.describe('md-comp-elevated-card.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-elevated-card.values()); } } @include test.describe('md-comp-extended-fab-branded.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-branded.values()); } } @include test.describe('md-comp-extended-fab-primary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-primary.values()); } } @include test.describe('md-comp-extended-fab-secondary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-secondary.values()); } } @include test.describe('md-comp-extended-fab-surface.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-surface.values()); } } @include test.describe('md-comp-extended-fab-tertiary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-tertiary.values()); } } @include test.describe('md-comp-fab-branded.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-branded.values()); } } @include test.describe('md-comp-fab-branded-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-branded-large.values()); } } @include test.describe('md-comp-fab-primary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-primary.values()); } } @include test.describe('md-comp-fab-primary-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-primary-large.values()); } } @include test.describe('md-comp-fab-primary-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-primary-small.values()); } } @include test.describe('md-comp-fab-secondary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-secondary.values()); } } @include test.describe('md-comp-fab-secondary-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-secondary-large.values()); } } @include test.describe('md-comp-fab-secondary-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-secondary-small.values()); } } @include test.describe('md-comp-fab-surface.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-surface.values()); } } @include test.describe('md-comp-fab-surface-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-surface-large.values()); } } @include test.describe('md-comp-fab-surface-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-surface-small.values()); } } @include test.describe('md-comp-fab-tertiary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-tertiary.values()); } } @include test.describe('md-comp-fab-tertiary-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-tertiary-large.values()); } } @include test.describe('md-comp-fab-tertiary-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-tertiary-small.values()); } } @include test.describe('md-comp-filled-autocomplete.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-autocomplete.values()); } } @include test.describe('md-comp-filled-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-button.values()); } } @include test.describe('md-comp-filled-card.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-card.values()); } } @include test.describe('md-comp-filled-icon-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-icon-button.values()); } } @include test.describe('md-comp-filled-menu-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-menu-button.values()); } } @include test.describe('md-comp-filled-select.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-select.values()); } } @include test.describe('md-comp-filled-text-field.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-text-field.values()); } } @include test.describe('md-comp-filled-tonal-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-tonal-button.values()); } } @include test.describe('md-comp-filled-tonal-icon-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-tonal-icon-button.values()); } } @include test.describe('md-comp-filter-chip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filter-chip.values()); } } @include test.describe('md-comp-full-screen-dialog.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-full-screen-dialog.values()); } } @include test.describe('md-comp-icon-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-icon-button.values()); } } @include test.describe('md-comp-input-chip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-input-chip.values()); } } @include test.describe('md-comp-linear-progress-indicator.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-linear-progress-indicator.values()); } } @include test.describe('md-comp-list.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-list.values()); } } @include test.describe('md-comp-menu.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-menu.values()); } } @include test.describe('md-comp-navigation-bar.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-navigation-bar.values()); } } @include test.describe('md-comp-navigation-drawer.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-navigation-drawer.values()); } } @include test.describe('md-comp-navigation-rail.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-navigation-rail.values()); } } @include test.describe('md-comp-outlined-autocomplete.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-autocomplete.values()); } } @include test.describe('md-comp-outlined-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-button.values()); } } @include test.describe('md-comp-outlined-card.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-card.values()); } } @include test.describe('md-comp-outlined-icon-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-icon-button.values()); } } @include test.describe('md-comp-outlined-menu-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-menu-button.values()); } } @include test.describe('md-comp-outlined-segmented-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-segmented-button.values()); } } @include test.describe('md-comp-outlined-select.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-select.values()); } } @include test.describe('md-comp-outlined-text-field.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-text-field.values()); } } @include test.describe('md-comp-plain-tooltip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-plain-tooltip.values()); } } @include test.describe('md-comp-primary-navigation-tab.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-primary-navigation-tab.values()); } } @include test.describe('md-comp-radio-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-radio-button.values()); } } @include test.describe('md-comp-rich-tooltip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-rich-tooltip.values()); } } @include test.describe('md-comp-scrim.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-scrim.values()); } } @include test.describe('md-comp-search-bar.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-search-bar.values()); } } @include test.describe('md-comp-search-view.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-search-view.values()); } } @include test.describe('md-comp-secondary-navigation-tab.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-secondary-navigation-tab.values()); } } @include test.describe('md-comp-sheet-bottom.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-sheet-bottom.values()); } } @include test.describe('md-comp-sheet-floating.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-sheet-floating.values()); } } @include test.describe('md-comp-sheet-side.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-sheet-side.values()); } } @include test.describe('md-comp-slider.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-slider.values()); } } @include test.describe('md-comp-snackbar.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-snackbar.values()); } } @include test.describe('md-comp-standard-menu-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-standard-menu-button.values()); } } @include test.describe('md-comp-suggestion-chip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-suggestion-chip.values()); } } @include test.describe('md-comp-switch.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-switch.values()); } } @include test.describe('md-comp-text-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-text-button.values()); } } @include test.describe('md-comp-time-input.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-time-input.values()); } } @include test.describe('md-comp-time-picker.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-time-picker.values()); } } @include test.describe('md-comp-top-app-bar-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-top-app-bar-large.values()); } } @include test.describe('md-comp-top-app-bar-medium.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-top-app-bar-medium.values()); } } @include test.describe('md-comp-top-app-bar-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-top-app-bar-small.values()); } } @include test.describe('md-comp-top-app-bar-small-centered.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-top-app-bar-small-centered.values()); } } @include test.describe('md-ref-palette.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-ref-palette.values()); } } @include test.describe('md-ref-typeface.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-ref-typeface.values()); } } @include test.describe('md-sys-color.values-dark') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-color.values-dark()); } } @include test.describe('md-sys-color.values-light') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-color.values-light()); } } @include test.describe('md-sys-elevation.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-elevation.values()); } } @include test.describe('md-sys-motion.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-motion.values()); } } @include test.describe('md-sys-shape.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-shape.values()); } } @include test.describe('md-sys-state.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-state.values()); } } @include test.describe('md-sys-typescale.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-typescale.values()); } } } ================================================ FILE: tokens/versions/README.md ================================================ This folder contains auto-generated files for Material Design token versions. > **WARNING: These files may unexpectedly change across different non-major > versions of `@material/web`.** > > Most users should ignore this folder and use other APIs provided by > `@material/web/tokens`. `@material/web/tokens/versions` is useful for custom implementations of or experimentations with the Material Design system. To avoid unexpected breakages when using these files, save the *exact version* of `@material/web` instead of a version range (e.g. `@2.0.0` instead of `@^2.0.0`). ``` Example of a minor breaking change: @material/web@2.0.0/tokens/version/v5_0/_md-sys-color.scss The path to this file may break in a typically non-breaking minor version bump. @material/web@2.1.0/tokens/version/v5_1/_md-sys-color.scss ``` ================================================ FILE: tokens/versions/v0_192/_index.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // @forward './md-comp-assist-chip' as md-comp-assist-chip-*; @forward './md-comp-badge' as md-comp-badge-*; @forward './md-comp-banner' as md-comp-banner-*; @forward './md-comp-bottom-app-bar' as md-comp-bottom-app-bar-*; @forward './md-comp-carousel-item' as md-comp-carousel-item-*; @forward './md-comp-checkbox' as md-comp-checkbox-*; @forward './md-comp-circular-progress-indicator' as md-comp-circular-progress-indicator-*; @forward './md-comp-data-table' as md-comp-data-table-*; @forward './md-comp-date-input-modal' as md-comp-date-input-modal-*; @forward './md-comp-date-picker-docked' as md-comp-date-picker-docked-*; @forward './md-comp-date-picker-modal' as md-comp-date-picker-modal-*; @forward './md-comp-dialog' as md-comp-dialog-*; @forward './md-comp-divider' as md-comp-divider-*; @forward './md-comp-elevated-button' as md-comp-elevated-button-*; @forward './md-comp-elevated-card' as md-comp-elevated-card-*; @forward './md-comp-extended-fab-branded' as md-comp-extended-fab-branded-*; @forward './md-comp-extended-fab-primary' as md-comp-extended-fab-primary-*; @forward './md-comp-extended-fab-secondary' as md-comp-extended-fab-secondary-*; @forward './md-comp-extended-fab-surface' as md-comp-extended-fab-surface-*; @forward './md-comp-extended-fab-tertiary' as md-comp-extended-fab-tertiary-*; @forward './md-comp-fab-branded' as md-comp-fab-branded-*; @forward './md-comp-fab-branded-large' as md-comp-fab-branded-large-*; @forward './md-comp-fab-primary' as md-comp-fab-primary-*; @forward './md-comp-fab-primary-large' as md-comp-fab-primary-large-*; @forward './md-comp-fab-primary-small' as md-comp-fab-primary-small-*; @forward './md-comp-fab-secondary' as md-comp-fab-secondary-*; @forward './md-comp-fab-secondary-large' as md-comp-fab-secondary-large-*; @forward './md-comp-fab-secondary-small' as md-comp-fab-secondary-small-*; @forward './md-comp-fab-surface' as md-comp-fab-surface-*; @forward './md-comp-fab-surface-large' as md-comp-fab-surface-large-*; @forward './md-comp-fab-surface-small' as md-comp-fab-surface-small-*; @forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*; @forward './md-comp-fab-tertiary-large' as md-comp-fab-tertiary-large-*; @forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*; @forward './md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*; @forward './md-comp-filled-button' as md-comp-filled-button-*; @forward './md-comp-filled-card' as md-comp-filled-card-*; @forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*; @forward './md-comp-filled-menu-button' as md-comp-filled-menu-button-*; @forward './md-comp-filled-select' as md-comp-filled-select-*; @forward './md-comp-filled-text-field' as md-comp-filled-text-field-*; @forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*; @forward './md-comp-filled-tonal-icon-button' as md-comp-filled-tonal-icon-button-*; @forward './md-comp-filter-chip' as md-comp-filter-chip-*; @forward './md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*; @forward './md-comp-icon-button' as md-comp-icon-button-*; @forward './md-comp-input-chip' as md-comp-input-chip-*; @forward './md-comp-linear-progress-indicator' as md-comp-linear-progress-indicator-*; @forward './md-comp-list' as md-comp-list-*; @forward './md-comp-menu' as md-comp-menu-*; @forward './md-comp-navigation-bar' as md-comp-navigation-bar-*; @forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*; @forward './md-comp-navigation-rail' as md-comp-navigation-rail-*; @forward './md-comp-outlined-autocomplete' as md-comp-outlined-autocomplete-*; @forward './md-comp-outlined-button' as md-comp-outlined-button-*; @forward './md-comp-outlined-card' as md-comp-outlined-card-*; @forward './md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*; @forward './md-comp-outlined-menu-button' as md-comp-outlined-menu-button-*; @forward './md-comp-outlined-segmented-button' as md-comp-outlined-segmented-button-*; @forward './md-comp-outlined-select' as md-comp-outlined-select-*; @forward './md-comp-outlined-text-field' as md-comp-outlined-text-field-*; @forward './md-comp-plain-tooltip' as md-comp-plain-tooltip-*; @forward './md-comp-primary-navigation-tab' as md-comp-primary-navigation-tab-*; @forward './md-comp-radio-button' as md-comp-radio-button-*; @forward './md-comp-rich-tooltip' as md-comp-rich-tooltip-*; @forward './md-comp-scrim' as md-comp-scrim-*; @forward './md-comp-search-bar' as md-comp-search-bar-*; @forward './md-comp-search-view' as md-comp-search-view-*; @forward './md-comp-secondary-navigation-tab' as md-comp-secondary-navigation-tab-*; @forward './md-comp-sheet-bottom' as md-comp-sheet-bottom-*; @forward './md-comp-sheet-floating' as md-comp-sheet-floating-*; @forward './md-comp-sheet-side' as md-comp-sheet-side-*; @forward './md-comp-slider' as md-comp-slider-*; @forward './md-comp-snackbar' as md-comp-snackbar-*; @forward './md-comp-standard-menu-button' as md-comp-standard-menu-button-*; @forward './md-comp-suggestion-chip' as md-comp-suggestion-chip-*; @forward './md-comp-switch' as md-comp-switch-*; @forward './md-comp-text-button' as md-comp-text-button-*; @forward './md-comp-time-input' as md-comp-time-input-*; @forward './md-comp-time-picker' as md-comp-time-picker-*; @forward './md-comp-top-app-bar-large' as md-comp-top-app-bar-large-*; @forward './md-comp-top-app-bar-medium' as md-comp-top-app-bar-medium-*; @forward './md-comp-top-app-bar-small' as md-comp-top-app-bar-small-*; @forward './md-comp-top-app-bar-small-centered' as md-comp-top-app-bar-small-centered-*; @forward './md-ref-palette' as md-ref-palette-*; @forward './md-ref-typeface' as md-ref-typeface-*; @forward './md-sys-color' as md-sys-color-*; @forward './md-sys-elevation' as md-sys-elevation-*; @forward './md-sys-motion' as md-sys-motion-*; @forward './md-sys-shape' as md-sys-shape-*; @forward './md-sys-state' as md-sys-state-*; @forward './md-sys-typescale' as md-sys-typescale-*; ================================================ FILE: tokens/versions/v0_192/_md-comp-assist-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 32px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'elevated-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'elevated-disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'elevated-disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'elevated-disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'elevated-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'elevated-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'elevated-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'flat-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'flat-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'flat-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'flat-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'flat-outline-width': if($exclude-hardcoded-values, null, 1px), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.assist-chip.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-dragged-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-badge.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'color': map.get($deps, 'md-sys-color', 'error'), 'large-color': map.get($deps, 'md-sys-color', 'error'), 'large-label-text-color': map.get($deps, 'md-sys-color', 'on-error'), 'large-label-text-font': map.get($deps, 'md-sys-typescale', 'label-small-font'), 'large-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-small-line-height'), 'large-label-text-size': map.get($deps, 'md-sys-typescale', 'label-small-size'), 'large-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-small-tracking'), 'large-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.badge.large.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-small-weight') map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-small-line-height' ) map.get($deps, 'md-sys-typescale', 'label-small-font') ), 'large-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-small-weight'), 'large-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'large-size': if($exclude-hardcoded-values, null, 16px), 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'size': if($exclude-hardcoded-values, null, 6px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-banner.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'desktop-with-single-line-container-height': if($exclude-hardcoded-values, null, 52px), 'desktop-with-three-lines-container-height': if($exclude-hardcoded-values, null, 90px), 'desktop-with-two-lines-with-image-container-height': if($exclude-hardcoded-values, null, 72px), 'mobile-with-single-line-container-height': if($exclude-hardcoded-values, null, 54px), 'mobile-with-two-lines-container-height': if($exclude-hardcoded-values, null, 112px), 'mobile-with-two-lines-with-image-container-height': if($exclude-hardcoded-values, null, 120px), 'supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'), 'supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), 'supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'), 'supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), 'supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.banner.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-medium-weight') map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'body-medium-font') ), 'supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'), 'with-image-image-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'with-image-image-size': if($exclude-hardcoded-values, null, 40px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-bottom-app-bar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'container-height': if($exclude-hardcoded-values, null, 80px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-carousel-item.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'), 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-outline-disabled-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'with-outline-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'with-outline-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-outline-hover-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'with-outline-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'with-outline-outline-width': if($exclude-hardcoded-values, null, 1), 'with-outline-pressed-outline-color': map.get($deps, 'md-sys-color', 'outline') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-checkbox.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-shape': if($exclude-hardcoded-values, null, 2px), 'container-size': if($exclude-hardcoded-values, null, 18px), 'error-focus-state-layer-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'error'), 'error-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'error-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'error'), 'error-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 18px), 'selected-container-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'selected-disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), 'selected-disabled-container-outline-width': if($exclude-hardcoded-values, null, 0px), 'selected-disabled-icon-color': map.get($deps, 'md-sys-color', 'surface'), 'selected-error-container-color': map.get($deps, 'md-sys-color', 'error'), 'selected-error-focus-container-color': map.get($deps, 'md-sys-color', 'error'), 'selected-error-focus-icon-color': map.get($deps, 'md-sys-color', 'on-error'), 'selected-error-hover-container-color': map.get($deps, 'md-sys-color', 'error'), 'selected-error-hover-icon-color': map.get($deps, 'md-sys-color', 'on-error'), 'selected-error-icon-color': map.get($deps, 'md-sys-color', 'on-error'), 'selected-error-pressed-container-color': map.get($deps, 'md-sys-color', 'error'), 'selected-error-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-error'), 'selected-focus-container-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'selected-focus-outline-width': if($exclude-hardcoded-values, null, 0px), 'selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'selected-hover-container-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'selected-hover-outline-width': if($exclude-hardcoded-values, null, 0px), 'selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'selected-outline-width': if($exclude-hardcoded-values, null, 0px), 'selected-pressed-container-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'selected-pressed-outline-width': if($exclude-hardcoded-values, null, 0px), 'selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'selected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'state-layer-size': if($exclude-hardcoded-values, null, 40px), 'unselected-disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), 'unselected-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-disabled-outline-width': if($exclude-hardcoded-values, null, 2px), 'unselected-error-focus-outline-color': map.get($deps, 'md-sys-color', 'error'), 'unselected-error-hover-outline-color': map.get($deps, 'md-sys-color', 'error'), 'unselected-error-outline-color': map.get($deps, 'md-sys-color', 'error'), 'unselected-error-pressed-outline-color': map.get($deps, 'md-sys-color', 'error'), 'unselected-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-focus-outline-width': if($exclude-hardcoded-values, null, 2px), 'unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'unselected-hover-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-hover-outline-width': if($exclude-hardcoded-values, null, 2px), 'unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'unselected-outline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-outline-width': if($exclude-hardcoded-values, null, 2px), 'unselected-pressed-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-pressed-outline-width': if($exclude-hardcoded-values, null, 2px), 'unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'unselected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-circular-progress-indicator.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'active-indicator-width': if($exclude-hardcoded-values, null, 4px), 'four-color-active-indicator-four-color': map.get($deps, 'md-sys-color', 'tertiary-container'), 'four-color-active-indicator-one-color': map.get($deps, 'md-sys-color', 'primary'), 'four-color-active-indicator-three-color': map.get($deps, 'md-sys-color', 'tertiary'), 'four-color-active-indicator-two-color': map.get($deps, 'md-sys-color', 'primary-container'), 'size': if($exclude-hardcoded-values, null, 48px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-data-table.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'footer-container-color': map.get($deps, 'md-sys-color', 'surface'), 'footer-container-height': if($exclude-hardcoded-values, null, 52px), 'footer-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'footer-supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'), 'footer-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), 'footer-supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'), 'footer-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), 'footer-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'), 'header-container-color': map.get($deps, 'md-sys-color', 'surface'), 'header-container-height': if($exclude-hardcoded-values, null, 56px), 'header-headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-headline-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), 'header-headline-line-height': map.get($deps, 'md-sys-typescale', 'title-small-line-height'), 'header-headline-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), 'header-headline-tracking': map.get($deps, 'md-sys-typescale', 'title-small-tracking'), 'header-headline-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'), 'header-hover-headline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'header-hover-sorting-icon-button-color': map.get($deps, 'md-sys-color', 'on-surface'), 'outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), 'outline-width': if($exclude-hardcoded-values, null, 1px), 'row-item-container-height': if($exclude-hardcoded-values, null, 52px), 'row-item-disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'row-item-disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'row-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'row-item-label-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'), 'row-item-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), 'row-item-label-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'), 'row-item-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), 'row-item-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'), 'row-item-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), 'row-item-outline-width': if($exclude-hardcoded-values, null, 1px), 'row-item-selected-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'row-item-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'row-item-selected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'row-item-unselected-container-color': map.get($deps, 'md-sys-color', 'surface'), 'row-item-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'row-item-unselected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-date-input-modal.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 512px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'container-width': if($exclude-hardcoded-values, null, 328px), 'header-container-height': if($exclude-hardcoded-values, null, 120px), 'header-container-width': if($exclude-hardcoded-values, null, 328px), 'header-headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-headline-font': map.get($deps, 'md-sys-typescale', 'headline-large-font'), 'header-headline-line-height': map.get($deps, 'md-sys-typescale', 'headline-large-line-height'), 'header-headline-size': map.get($deps, 'md-sys-typescale', 'headline-large-size'), 'header-headline-tracking': map.get($deps, 'md-sys-typescale', 'headline-large-tracking'), 'header-headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-input.modal.header.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'headline-large-weight') map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'headline-large-line-height' ) map.get($deps, 'md-sys-typescale', 'headline-large-font') ), 'header-headline-weight': map.get($deps, 'md-sys-typescale', 'headline-large-weight'), 'header-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-supporting-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'header-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'header-supporting-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'header-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'header-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-input.modal.header.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'header-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-date-picker-docked.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 456px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'container-width': if($exclude-hardcoded-values, null, 360px), 'date-container-height': if($exclude-hardcoded-values, null, 48px), 'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'date-container-width': if($exclude-hardcoded-values, null, 48px), 'date-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'date-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'date-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'date-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'date-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'date-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'date-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.date.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'date-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'date-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'), 'date-selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'date-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'date-selected-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'date-selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'date-state-layer-height': if($exclude-hardcoded-values, null, 40px), 'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'date-state-layer-width': if($exclude-hardcoded-values, null, 40px), 'date-today-container-outline-color': map.get($deps, 'md-sys-color', 'primary'), 'date-today-container-outline-width': if($exclude-hardcoded-values, null, 1px), 'date-today-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'date-today-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'date-today-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'date-unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'date-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'date-unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'date-unselected-outside-month-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'date-unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-height': if($exclude-hardcoded-values, null, 64px), 'menu-button-container-height': if($exclude-hardcoded-values, null, 40px), 'menu-button-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'menu-button-disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-button-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'menu-button-disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-button-disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'menu-button-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'menu-button-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'menu-button-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-icon-size': if($exclude-hardcoded-values, null, 18px), 'menu-button-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'menu-button-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'menu-button-label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'menu-button-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'menu-button-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.menu-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'menu-button-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'menu-button-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-button-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px), 'menu-list-item-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'menu-list-item-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'menu-list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'menu-list-item-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'menu-list-item-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'menu-list-item-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'menu-list-item-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'menu-list-item-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'menu-list-item-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'menu-list-item-selected-container-color': map.get($deps, 'md-sys-color', 'surface-variant'), 'menu-list-item-selected-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-list-item-selected-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-list-item-selected-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-selected-leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'menu-list-item-selected-pressed-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'weekdays-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'weekdays-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'weekdays-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'weekdays-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'weekdays-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.weekdays.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'weekdays-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-date-picker-modal.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 568px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'container-width': if($exclude-hardcoded-values, null, 360px), 'date-container-height': if($exclude-hardcoded-values, null, 40px), 'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'date-container-width': if($exclude-hardcoded-values, null, 40px), 'date-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'date-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'date-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'date-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'date-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'date-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'date-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.date.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'date-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'date-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'), 'date-selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'date-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'date-selected-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'date-selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'date-state-layer-height': if($exclude-hardcoded-values, null, 40px), 'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'date-state-layer-width': if($exclude-hardcoded-values, null, 40px), 'date-today-container-outline-color': map.get($deps, 'md-sys-color', 'primary'), 'date-today-container-outline-width': if($exclude-hardcoded-values, null, 1px), 'date-today-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'date-today-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'date-today-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'date-unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'date-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'date-unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'date-unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-container-height': if($exclude-hardcoded-values, null, 120px), 'header-container-width': if($exclude-hardcoded-values, null, 360px), 'header-headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-headline-font': map.get($deps, 'md-sys-typescale', 'headline-large-font'), 'header-headline-line-height': map.get($deps, 'md-sys-typescale', 'headline-large-line-height'), 'header-headline-size': map.get($deps, 'md-sys-typescale', 'headline-large-size'), 'header-headline-tracking': map.get($deps, 'md-sys-typescale', 'headline-large-tracking'), 'header-headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.header.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'headline-large-weight') map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'headline-large-line-height' ) map.get($deps, 'md-sys-typescale', 'headline-large-font') ), 'header-headline-weight': map.get($deps, 'md-sys-typescale', 'headline-large-weight'), 'header-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-supporting-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'header-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'header-supporting-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'header-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'header-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.header.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'header-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'range-selection-active-indicator-container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'range-selection-active-indicator-container-height': if($exclude-hardcoded-values, null, 40px), 'range-selection-active-indicator-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'range-selection-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'range-selection-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'range-selection-date-in-range-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'range-selection-date-in-range-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'range-selection-date-in-range-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'range-selection-date-in-range-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'range-selection-date-in-range-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'range-selection-date-in-range-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'range-selection-date-in-range-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'range-selection-header-container-height': if($exclude-hardcoded-values, null, 128px), 'range-selection-header-headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'), 'range-selection-header-headline-line-height': map.get($deps, 'md-sys-typescale', 'title-large-line-height'), 'range-selection-header-headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'), 'range-selection-header-headline-tracking': map.get($deps, 'md-sys-typescale', 'title-large-tracking'), 'range-selection-header-headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.range-selection.header.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-large-weight') map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-large-line-height' ) map.get($deps, 'md-sys-typescale', 'title-large-font') ), 'range-selection-header-headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'), 'range-selection-month-subhead-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'range-selection-month-subhead-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), 'range-selection-month-subhead-line-height': map.get($deps, 'md-sys-typescale', 'title-small-line-height'), 'range-selection-month-subhead-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), 'range-selection-month-subhead-tracking': map.get($deps, 'md-sys-typescale', 'title-small-tracking'), 'range-selection-month-subhead-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.range-selection.month.subhead.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-small-weight') map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-small-line-height' ) map.get($deps, 'md-sys-typescale', 'title-small-font') ), 'range-selection-month-subhead-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'), 'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'weekdays-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'weekdays-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'weekdays-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'weekdays-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'weekdays-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.weekdays.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'weekdays-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'year-selection-year-container-height': if($exclude-hardcoded-values, null, 36px), 'year-selection-year-container-width': if($exclude-hardcoded-values, null, 72px), 'year-selection-year-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'year-selection-year-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'year-selection-year-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'year-selection-year-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'year-selection-year-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'year-selection-year-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'year-selection-year-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.year-selection.year.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'year-selection-year-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'year-selection-year-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'year-selection-year-selected-container-color': map.get($deps, 'md-sys-color', 'primary'), 'year-selection-year-selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'year-selection-year-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'year-selection-year-selected-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'year-selection-year-selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'year-selection-year-state-layer-height': if($exclude-hardcoded-values, null, 36px), 'year-selection-year-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'year-selection-year-state-layer-width': if($exclude-hardcoded-values, null, 72px), 'year-selection-year-unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'year-selection-year-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'year-selection-year-unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'year-selection-year-unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-dialog.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'action-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'action-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'action-label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'action-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'action-label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'action-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'action-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.action.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'action-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'action-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'action-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'headline-font': map.get($deps, 'md-sys-typescale', 'headline-small-font'), 'headline-line-height': map.get($deps, 'md-sys-typescale', 'headline-small-line-height'), 'headline-size': map.get($deps, 'md-sys-typescale', 'headline-small-size'), 'headline-tracking': map.get($deps, 'md-sys-typescale', 'headline-small-tracking'), 'headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'headline-small-weight') map.get($deps, 'md-sys-typescale', 'headline-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'headline-small-line-height' ) map.get($deps, 'md-sys-typescale', 'headline-small-font') ), 'headline-weight': map.get($deps, 'md-sys-typescale', 'headline-small-weight'), 'supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'), 'supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), 'supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'), 'supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), 'supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-medium-weight') map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'body-medium-font') ), 'supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'), 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'secondary'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-divider.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; $_default: ( 'md-sys-color': md-sys-color.values-light(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'color': map.get($deps, 'md-sys-color', 'outline-variant'), 'thickness': if($exclude-hardcoded-values, null, 1px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-elevated-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.elevated-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-elevated-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), 'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'), 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'primary'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-extended-fab-branded.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 36px), 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.branded.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'lowered-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-extended-fab-primary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'primary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.primary.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-extended-fab-secondary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.secondary.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-extended-fab-surface.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'primary'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.surface.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'lowered-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-extended-fab-tertiary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.tertiary.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-branded-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 96px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'container-width': if($exclude-hardcoded-values, null, 96px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 48px), 'lowered-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-branded.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'container-width': if($exclude-hardcoded-values, null, 56px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 36px), 'lowered-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-primary-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'primary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 96px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'container-width': if($exclude-hardcoded-values, null, 96px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'icon-size': if($exclude-hardcoded-values, null, 36px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-primary-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'primary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), 'container-width': if($exclude-hardcoded-values, null, 40px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-primary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'primary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'container-width': if($exclude-hardcoded-values, null, 56px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-secondary-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 96px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'container-width': if($exclude-hardcoded-values, null, 96px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'icon-size': if($exclude-hardcoded-values, null, 36px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-secondary-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), 'container-width': if($exclude-hardcoded-values, null, 40px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-secondary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'container-width': if($exclude-hardcoded-values, null, 56px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-surface-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 96px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'container-width': if($exclude-hardcoded-values, null, 96px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'primary'), 'icon-size': if($exclude-hardcoded-values, null, 36px), 'lowered-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-surface-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), 'container-width': if($exclude-hardcoded-values, null, 40px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'primary'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'lowered-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-surface.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'container-width': if($exclude-hardcoded-values, null, 56px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'primary'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'lowered-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-tertiary-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 96px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'container-width': if($exclude-hardcoded-values, null, 96px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'icon-size': if($exclude-hardcoded-values, null, 36px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-tertiary-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), 'container-width': if($exclude-hardcoded-values, null, 40px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-fab-tertiary.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'container-width': if($exclude-hardcoded-values, null, 56px), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'lowered-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'lowered-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-autocomplete.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'menu-cascading-menu-indicator-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-cascading-menu-indicator-icon-size': if($exclude-hardcoded-values, null, 24px), 'menu-container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'text-field-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'text-field-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small-top'), 'text-field-disabled-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'text-field-disabled-active-indicator-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-container-opacity': if($exclude-hardcoded-values, null, 0.04), 'text-field-disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-supporting-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-error-active-indicator-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-active-indicator-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'text-field-error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-focus-active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-focus-active-indicator-height': if($exclude-hardcoded-values, null, 2px), 'text-field-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'text-field-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'text-field-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'text-field-input-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'text-field-input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'text-field-input-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'text-field-input-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'text-field-input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'text-field-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'text-field-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'text-field-label-text-populated-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'text-field-label-text-populated-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'text-field-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'text-field-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'text-field-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'text-field-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'text-field-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 20px), 'text-field-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-small-font'), 'text-field-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'text-field-supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'text-field-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-small-tracking'), 'text-field-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-small-weight') map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-small-line-height' ) map.get($deps, 'md-sys-typescale', 'body-small-font') ), 'text-field-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-small-weight'), 'text-field-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'primary'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), 'disabled-container-color': map.get($deps, 'md-sys-color', 'surface-variant'), 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'primary'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'primary'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'container-width': if($exclude-hardcoded-values, null, 40px), 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'selected-container-color': map.get($deps, 'md-sys-color', 'primary'), 'toggle-selected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'toggle-selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'toggle-selected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'toggle-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'toggle-selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'toggle-selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'toggle-selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'toggle-unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'toggle-unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'toggle-unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'toggle-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'toggle-unselected-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'toggle-unselected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'toggle-unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'unselected-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-menu-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'primary'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-menu-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'with-icon-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), 'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-leading-icon-color': map.get($deps, 'md-sys-color', 'on-primary') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-select.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'menu-cascading-menu-indicator-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-cascading-menu-indicator-icon-size': if($exclude-hardcoded-values, null, 24px), 'menu-container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'), 'menu-divider-height': if($exclude-hardcoded-values, null, 1px), 'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px), 'menu-list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'menu-list-item-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'menu-list-item-label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'menu-list-item-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'menu-list-item-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'menu-list-item-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'menu-list-item-selected-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'menu-list-item-with-leading-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-list-item-with-leading-icon-leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'menu-list-item-with-trailing-icon-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-list-item-with-trailing-icon-trailing-icon-size': if($exclude-hardcoded-values, null, 24px), 'text-field-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'text-field-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'text-field-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small-top'), 'text-field-disabled-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'text-field-disabled-active-indicator-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-container-opacity': if($exclude-hardcoded-values, null, 0.04), 'text-field-disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-supporting-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-error-active-indicator-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-active-indicator-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'text-field-error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-focus-active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-focus-active-indicator-height': if($exclude-hardcoded-values, null, 2px), 'text-field-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'text-field-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'text-field-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'text-field-input-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'text-field-input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'text-field-input-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'text-field-input-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'text-field-input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'text-field-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'text-field-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'text-field-label-text-populated-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'text-field-label-text-populated-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'text-field-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'text-field-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'text-field-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'text-field-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'text-field-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'text-field-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-small-font'), 'text-field-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'text-field-supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'text-field-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-small-tracking'), 'text-field-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-small-weight') map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-small-line-height' ) map.get($deps, 'md-sys-typescale', 'body-small-font') ), 'text-field-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-small-weight'), 'text-field-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-text-field.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'caret-color': map.get($deps, 'md-sys-color', 'primary'), 'container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small-top'), 'disabled-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'disabled-active-indicator-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.04), 'disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-supporting-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'error-active-indicator-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-active-indicator-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'error-hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'error-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'error-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'error-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'error-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'focus-active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-active-indicator-height': if($exclude-hardcoded-values, null, 2px), 'focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'focus-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-active-indicator-height': if($exclude-hardcoded-values, null, 1px), 'hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'hover-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'input-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'input-text-placeholder-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-prefix-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'input-text-suffix-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'input-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'label-text-populated-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'label-text-populated-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-small-font'), 'supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-small-tracking'), 'supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-small-weight') map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-small-line-height' ) map.get($deps, 'md-sys-typescale', 'body-small-font') ), 'supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-small-weight'), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-tonal-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-tonal-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filled-tonal-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'container-width': if($exclude-hardcoded-values, null, 40px), 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'selected-container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'toggle-selected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'toggle-selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'toggle-selected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'toggle-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'toggle-selected-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'toggle-selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'toggle-selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'toggle-unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'toggle-unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'toggle-unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'toggle-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'toggle-unselected-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'toggle-unselected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'toggle-unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-filter-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 32px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'elevated-disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'elevated-disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'elevated-disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'elevated-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'elevated-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'elevated-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'elevated-selected-container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'elevated-unselected-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'flat-disabled-selected-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'flat-disabled-selected-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'flat-disabled-unselected-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'flat-disabled-unselected-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'flat-selected-container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'flat-selected-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'flat-selected-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'flat-selected-outline-width': if($exclude-hardcoded-values, null, 0px), 'flat-selected-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'flat-unselected-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'flat-unselected-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'flat-unselected-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'flat-unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'flat-unselected-outline-width': if($exclude-hardcoded-values, null, 1px), 'flat-unselected-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filter-chip.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'selected-dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'selected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'selected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'selected-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'selected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'unselected-dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'unselected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'unselected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'unselected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-leading-icon-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-leading-icon-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-leading-icon-selected-dragged-leading-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-leading-icon-selected-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-leading-icon-selected-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-leading-icon-selected-leading-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-leading-icon-selected-pressed-leading-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-leading-icon-unselected-dragged-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-unselected-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-unselected-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-unselected-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-unselected-pressed-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-trailing-icon-disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-trailing-icon-disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-trailing-icon-selected-dragged-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-selected-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-selected-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-selected-pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-selected-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-unselected-dragged-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-trailing-icon-unselected-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-trailing-icon-unselected-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-trailing-icon-unselected-pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-trailing-icon-unselected-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-full-screen-dialog.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'header-action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'header-action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'header-action-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'header-action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'header-action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'header-action-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'header-action-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'header-action-label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'header-action-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'header-action-label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'header-action-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'header-action-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.full-screen-dialog.header.action.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'header-action-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'header-action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'header-action-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'header-action-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'header-container-color': map.get($deps, 'md-sys-color', 'surface'), 'header-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'header-container-height': if($exclude-hardcoded-values, null, 56px), 'header-headline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'header-headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'), 'header-headline-line-height': map.get($deps, 'md-sys-typescale', 'title-large-line-height'), 'header-headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'), 'header-headline-tracking': map.get($deps, 'md-sys-typescale', 'title-large-tracking'), 'header-headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.full-screen-dialog.header.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-large-weight') map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-large-line-height' ) map.get($deps, 'md-sys-typescale', 'title-large-font') ), 'header-headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'), 'header-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'header-icon-size': if($exclude-hardcoded-values, null, 24px), 'header-on-scroll-container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'header-on-scroll-container-elevation': map.get($deps, 'md-sys-elevation', 'level2') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'selected-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'state-layer-height': if($exclude-hardcoded-values, null, 40px), 'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'state-layer-width': if($exclude-hardcoded-values, null, 40px), 'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'unselected-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-input-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 32px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-selected-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-selected-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-unselected-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-unselected-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.input-chip.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'selected-container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'selected-dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'selected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'selected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'selected-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-outline-width': if($exclude-hardcoded-values, null, 0px), 'selected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'unselected-dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'unselected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'unselected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'unselected-outline-width': if($exclude-hardcoded-values, null, 1px), 'unselected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-avatar-avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'with-avatar-avatar-size': if($exclude-hardcoded-values, null, 24px), 'with-avatar-disabled-avatar-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-leading-icon-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-leading-icon-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-leading-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-leading-icon-selected-dragged-leading-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-leading-icon-selected-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-selected-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-selected-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-selected-pressed-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-unselected-dragged-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-leading-icon-unselected-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-unselected-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-unselected-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-leading-icon-unselected-pressed-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-trailing-icon-disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-trailing-icon-disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-trailing-icon-selected-dragged-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-trailing-icon-selected-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-selected-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-selected-pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-selected-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'with-trailing-icon-trailing-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-trailing-icon-unselected-dragged-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-trailing-icon-unselected-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-trailing-icon-unselected-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-trailing-icon-unselected-pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-trailing-icon-unselected-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-linear-progress-indicator.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), 'active-indicator-height': if($exclude-hardcoded-values, null, 4px), 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'four-color-active-indicator-four-color': map.get($deps, 'md-sys-color', 'tertiary-container'), 'four-color-active-indicator-one-color': map.get($deps, 'md-sys-color', 'primary'), 'four-color-active-indicator-three-color': map.get($deps, 'md-sys-color', 'tertiary'), 'four-color-active-indicator-two-color': map.get($deps, 'md-sys-color', 'primary-container'), 'track-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'track-height': if($exclude-hardcoded-values, null, 4px), 'track-shape': map.get($deps, 'md-sys-shape', 'corner-none') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-list.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'divider-leading-space': if($exclude-hardcoded-values, null, 16px), 'divider-trailing-space': if($exclude-hardcoded-values, null, 16px), 'list-item-container-color': map.get($deps, 'md-sys-color', 'surface'), 'list-item-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'list-item-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'list-item-disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.3), 'list-item-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'list-item-disabled-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-disabled-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'list-item-disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'list-item-dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'list-item-dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-dragged-leading-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'list-item-dragged-trailing-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-focus-leading-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'list-item-focus-trailing-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-hover-leading-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'list-item-hover-trailing-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'list-item-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'list-item-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'list-item-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'list-item-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'list-item-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'list-item-large-leading-video-height': if($exclude-hardcoded-values, null, 69px), 'list-item-leading-avatar-label-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'list-item-leading-avatar-label-font': map.get($deps, 'md-sys-typescale', 'title-medium-font'), 'list-item-leading-avatar-label-line-height': map.get($deps, 'md-sys-typescale', 'title-medium-line-height'), 'list-item-leading-avatar-label-size': map.get($deps, 'md-sys-typescale', 'title-medium-size'), 'list-item-leading-avatar-label-tracking': map.get($deps, 'md-sys-typescale', 'title-medium-tracking'), 'list-item-leading-avatar-label-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.leading-avatar-label.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-medium-weight') map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'title-medium-font') ), 'list-item-leading-avatar-label-weight': map.get($deps, 'md-sys-typescale', 'title-medium-weight'), 'list-item-leading-avatar-color': map.get($deps, 'md-sys-color', 'primary-container'), 'list-item-leading-avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'list-item-leading-avatar-size': if($exclude-hardcoded-values, null, 40px), 'list-item-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'list-item-leading-image-height': if($exclude-hardcoded-values, null, 56px), 'list-item-leading-image-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'list-item-leading-image-width': if($exclude-hardcoded-values, null, 56px), 'list-item-leading-space': if($exclude-hardcoded-values, null, 16px), 'list-item-leading-video-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'list-item-leading-video-width': if($exclude-hardcoded-values, null, 100px), 'list-item-one-line-container-height': if($exclude-hardcoded-values, null, 56px), 'list-item-overline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-overline-font': map.get($deps, 'md-sys-typescale', 'label-small-font'), 'list-item-overline-line-height': map.get($deps, 'md-sys-typescale', 'label-small-line-height'), 'list-item-overline-size': map.get($deps, 'md-sys-typescale', 'label-small-size'), 'list-item-overline-tracking': map.get($deps, 'md-sys-typescale', 'label-small-tracking'), 'list-item-overline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.overline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-small-weight') map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-small-line-height' ) map.get($deps, 'md-sys-typescale', 'label-small-font') ), 'list-item-overline-weight': map.get($deps, 'md-sys-typescale', 'label-small-weight'), 'list-item-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-pressed-leading-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'list-item-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'list-item-pressed-trailing-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-selected-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'list-item-small-leading-video-height': if($exclude-hardcoded-values, null, 56px), 'list-item-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'), 'list-item-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), 'list-item-supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'), 'list-item-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), 'list-item-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-medium-weight') map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'body-medium-font') ), 'list-item-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'), 'list-item-three-line-container-height': if($exclude-hardcoded-values, null, 88px), 'list-item-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-trailing-icon-size': if($exclude-hardcoded-values, null, 24px), 'list-item-trailing-space': if($exclude-hardcoded-values, null, 16px), 'list-item-trailing-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'list-item-trailing-supporting-text-font': map.get($deps, 'md-sys-typescale', 'label-small-font'), 'list-item-trailing-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'label-small-line-height'), 'list-item-trailing-supporting-text-size': map.get($deps, 'md-sys-typescale', 'label-small-size'), 'list-item-trailing-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'label-small-tracking'), 'list-item-trailing-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.trailing-supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-small-weight') map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-small-line-height' ) map.get($deps, 'md-sys-typescale', 'label-small-font') ), 'list-item-trailing-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'label-small-weight'), 'list-item-two-line-container-height': if($exclude-hardcoded-values, null, 72px), 'list-item-unselected-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-menu.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), ); @function values($deps: $_default) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'list-item-selected-container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'list-item-selected-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'list-item-selected-with-leading-icon-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'menu-list-item-with-leading-icon-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-navigation-bar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-indicator-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'active-indicator-height': if($exclude-hardcoded-values, null, 32px), 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'active-indicator-width': if($exclude-hardcoded-values, null, 64px), 'active-focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight-prominent'), 'active-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'container-height': if($exclude-hardcoded-values, null, 80px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'inactive-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-bar.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-medium-weight') map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'label-medium-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-navigation-drawer.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-indicator-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'active-indicator-height': if($exclude-hardcoded-values, null, 56px), 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'active-indicator-width': if($exclude-hardcoded-values, null, 336px), 'active-focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight-prominent'), 'active-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'bottom-container-shape': map.get($deps, 'md-sys-shape', 'corner-large-top'), 'container-height': if($exclude-hardcoded-values, null, 100%), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large-end'), 'container-width': if($exclude-hardcoded-values, null, 360px), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'headline-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), 'headline-line-height': map.get($deps, 'md-sys-typescale', 'title-small-line-height'), 'headline-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), 'headline-tracking': map.get($deps, 'md-sys-typescale', 'title-small-tracking'), 'headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-small-weight') map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-small-line-height' ) map.get($deps, 'md-sys-typescale', 'title-small-font') ), 'headline-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'inactive-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'large-badge-label-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'large-badge-label-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'large-badge-label-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'large-badge-label-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'large-badge-label-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'large-badge-label-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.large-badge-label.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'large-badge-label-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'modal-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'modal-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'standard-container-color': map.get($deps, 'md-sys-color', 'surface'), 'standard-container-elevation': map.get($deps, 'md-sys-elevation', 'level0') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-navigation-rail.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-indicator-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'active-indicator-height': if($exclude-hardcoded-values, null, 32px), 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'active-indicator-width': if($exclude-hardcoded-values, null, 56px), 'active-focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight-prominent'), 'active-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'active-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'active-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'container-width': if($exclude-hardcoded-values, null, 80px), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'inactive-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-rail.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-medium-weight') map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'label-medium-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'), 'no-label-active-indicator-height': if($exclude-hardcoded-values, null, 56px), 'no-label-active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-outlined-autocomplete.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'menu-cascading-menu-indicator-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-cascading-menu-indicator-icon-size': if($exclude-hardcoded-values, null, 24px), 'menu-container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'text-field-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'text-field-disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'text-field-disabled-outline-width': if($exclude-hardcoded-values, null, 1px), 'text-field-disabled-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-supporting-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-focus-outline-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-hover-outline-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'text-field-error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px), 'text-field-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px), 'text-field-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'text-field-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'text-field-input-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'text-field-input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'text-field-input-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'text-field-input-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'text-field-input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'text-field-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'text-field-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'text-field-label-text-populated-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'text-field-label-text-populated-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'text-field-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'text-field-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'text-field-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'text-field-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'text-field-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'text-field-outline-width': if($exclude-hardcoded-values, null, 1px), 'text-field-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-small-font'), 'text-field-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'text-field-supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'text-field-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-small-tracking'), 'text-field-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-small-weight') map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-small-line-height' ) map.get($deps, 'md-sys-typescale', 'body-small-font') ), 'text-field-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-small-weight'), 'text-field-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-outlined-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'outline-color': map.get($deps, 'md-sys-color', 'outline'), 'outline-width': if($exclude-hardcoded-values, null, 1px), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-outlined-card.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'disabled-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'dragged-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'hover-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-color': map.get($deps, 'md-sys-color', 'primary'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), 'outline-width': if($exclude-hardcoded-values, null, 1px), 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-outlined-icon-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'container-width': if($exclude-hardcoded-values, null, 40px), 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-selected-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-selected-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-unselected-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-unselected-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'selected-container-color': map.get($deps, 'md-sys-color', 'inverse-surface'), 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'selected-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'unselected-outline-width': if($exclude-hardcoded-values, null, 1px), 'unselected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-outlined-menu-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 40px), 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-menu-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'outline-color': map.get($deps, 'md-sys-color', 'outline'), 'outline-width': if($exclude-hardcoded-values, null, 1px), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-leading-icon-color': map.get($deps, 'md-sys-color', 'primary') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-outlined-segmented-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 40px), 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-segmented-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'outline-color': map.get($deps, 'md-sys-color', 'outline'), 'outline-width': if($exclude-hardcoded-values, null, 1px), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'selected-container-color': map.get($deps, 'md-sys-color', 'secondary-container'), 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'selected-with-icon-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-with-icon-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-outlined-select.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'menu-cascading-menu-indicator-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-cascading-menu-indicator-icon-size': if($exclude-hardcoded-values, null, 24px), 'menu-container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'), 'menu-divider-height': if($exclude-hardcoded-values, null, 1px), 'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px), 'menu-list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'menu-list-item-label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'menu-list-item-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'menu-list-item-label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'menu-list-item-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'menu-list-item-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'menu-list-item-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'menu-list-item-selected-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'menu-list-item-with-leading-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-list-item-with-leading-icon-leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'menu-list-item-with-trailing-icon-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'menu-list-item-with-trailing-icon-trailing-icon-size': if($exclude-hardcoded-values, null, 24px), 'text-field-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'text-field-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'text-field-disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'text-field-disabled-outline-width': if($exclude-hardcoded-values, null, 1px), 'text-field-disabled-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-supporting-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'text-field-error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-focus-outline-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-hover-outline-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'text-field-error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'text-field-error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'text-field-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px), 'text-field-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'text-field-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px), 'text-field-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'text-field-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'text-field-input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'text-field-input-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'text-field-input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'text-field-input-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'text-field-input-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'text-field-input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'text-field-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'text-field-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'text-field-label-text-populated-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'text-field-label-text-populated-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'text-field-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'text-field-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'text-field-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'text-field-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'text-field-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'text-field-outline-width': if($exclude-hardcoded-values, null, 1px), 'text-field-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-small-font'), 'text-field-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'text-field-supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'text-field-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-small-tracking'), 'text-field-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-small-weight') map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-small-line-height' ) map.get($deps, 'md-sys-typescale', 'body-small-font') ), 'text-field-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-small-weight'), 'text-field-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-outlined-text-field.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'caret-color': map.get($deps, 'md-sys-color', 'primary'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-outline-width': if($exclude-hardcoded-values, null, 1px), 'disabled-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-supporting-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'error-focus-outline-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'error-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'error-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'error-hover-outline-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-error-container'), 'error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'error-label-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'error-outline-color': map.get($deps, 'md-sys-color', 'error'), 'error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), 'error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), 'focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-outline-width': if($exclude-hardcoded-values, null, 2px), 'focus-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-outline-width': if($exclude-hardcoded-values, null, 1px), 'hover-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'input-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'input-text-placeholder-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-prefix-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'input-text-suffix-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'input-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'label-text-populated-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'label-text-populated-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'outline-color': map.get($deps, 'md-sys-color', 'outline'), 'outline-width': if($exclude-hardcoded-values, null, 1px), 'supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-small-font'), 'supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-small-tracking'), 'supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-small-weight') map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-small-line-height' ) map.get($deps, 'md-sys-typescale', 'body-small-font') ), 'supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-small-weight'), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-plain-tooltip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'supporting-text-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-small-font'), 'supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-small-tracking'), 'supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.plain-tooltip.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-small-weight') map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-small-line-height' ) map.get($deps, 'md-sys-typescale', 'body-small-font') ), 'supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-small-weight') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-primary-navigation-tab.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), 'active-indicator-height': if($exclude-hardcoded-values, null, 3px), 'active-indicator-shape': if($exclude-hardcoded-values, null, (3px 3px 0px 0px)), 'active-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'active-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'active-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'active-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'active-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'active-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 48px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'inactive-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'inactive-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'inactive-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'inactive-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'inactive-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-and-label-text-container-height': if($exclude-hardcoded-values, null, 64px), 'with-icon-active-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-active-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-active-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px), 'with-icon-inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-icon-inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-label-text-active-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'with-label-text-active-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'with-label-text-active-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'with-label-text-active-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'with-label-text-inactive-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-label-text-inactive-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-label-text-inactive-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-label-text-inactive-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-label-text-label-text-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), 'with-label-text-label-text-line-height': map.get($deps, 'md-sys-typescale', 'title-small-line-height'), 'with-label-text-label-text-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), 'with-label-text-label-text-tracking': map.get($deps, 'md-sys-typescale', 'title-small-tracking'), 'with-label-text-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.primary-navigation-tab.with-label-text.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-small-weight') map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-small-line-height' ) map.get($deps, 'md-sys-typescale', 'title-small-font') ), 'with-label-text-label-text-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-radio-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'disabled-selected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-selected-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-unselected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-unselected-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'icon-size': if($exclude-hardcoded-values, null, 20px), 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'selected-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'selected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'state-layer-size': if($exclude-hardcoded-values, null, 40px), 'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'unselected-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'unselected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-rich-tooltip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'action-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'action-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'action-label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'action-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'action-label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'action-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'action-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.action.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'action-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'action-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'action-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), 'subhead-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'subhead-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), 'subhead-line-height': map.get($deps, 'md-sys-typescale', 'title-small-line-height'), 'subhead-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), 'subhead-tracking': map.get($deps, 'md-sys-typescale', 'title-small-tracking'), 'subhead-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.subhead.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-small-weight') map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-small-line-height' ) map.get($deps, 'md-sys-typescale', 'title-small-font') ), 'subhead-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'), 'supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'), 'supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), 'supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'), 'supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), 'supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-medium-weight') map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'body-medium-font') ), 'supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-scrim.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; $_default: ( 'md-sys-color': md-sys-color.values-light(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'scrim'), 'container-opacity': if($exclude-hardcoded-values, null, 0.32) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-search-bar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'avatar-size': if($exclude-hardcoded-values, null, 30px), 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-height': if($exclude-hardcoded-values, null, 56px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'hover-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'input-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'input-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'input-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-bar.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'pressed-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-bar.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-search-view.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'divider-color': map.get($deps, 'md-sys-color', 'outline'), 'docked-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'docked-header-container-height': if($exclude-hardcoded-values, null, 56px), 'full-screen-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'full-screen-header-container-height': if($exclude-hardcoded-values, null, 72px), 'header-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'header-input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'header-input-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'header-input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'header-input-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'header-input-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-view.header.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'header-input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'header-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'header-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'header-supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'header-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'header-supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'header-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'header-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-view.header.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'header-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'header-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-secondary-navigation-tab.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), 'active-indicator-height': if($exclude-hardcoded-values, null, 2px), 'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 48px), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'inactive-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'title-small-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'title-small-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.secondary-navigation-tab.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-small-weight') map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-small-line-height' ) map.get($deps, 'md-sys-typescale', 'title-small-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px), 'with-icon-inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-sheet-bottom.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'docked-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'docked-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large-top'), 'docked-drag-handle-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'docked-drag-handle-height': if($exclude-hardcoded-values, null, 4px), 'docked-drag-handle-width': if($exclude-hardcoded-values, null, 32px), 'docked-minimized-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'docked-modal-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'docked-standard-container-elevation': map.get($deps, 'md-sys-elevation', 'level1') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-sheet-floating.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), ); @function values($deps: $_default) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-sheet-side.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'detached-container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), 'docked-action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'docked-action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'docked-action-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'docked-action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'docked-action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'docked-action-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'docked-action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'docked-action-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'docked-action-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'docked-container-height': if($exclude-hardcoded-values, null, 100%), 'docked-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'docked-container-width': if($exclude-hardcoded-values, null, 256px), 'docked-divider-color': map.get($deps, 'md-sys-color', 'outline'), 'docked-headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'docked-headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'), 'docked-headline-line-height': map.get($deps, 'md-sys-typescale', 'title-large-line-height'), 'docked-headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'), 'docked-headline-tracking': map.get($deps, 'md-sys-typescale', 'title-large-tracking'), 'docked-headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.sheet.side.docked.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-large-weight') map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-large-line-height' ) map.get($deps, 'md-sys-typescale', 'title-large-font') ), 'docked-headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'), 'docked-modal-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'docked-modal-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'docked-modal-container-shape': map.get($deps, 'md-sys-shape', 'corner-large-start'), 'docked-standard-container-color': map.get($deps, 'md-sys-color', 'surface'), 'docked-standard-container-elevation': map.get($deps, 'md-sys-elevation', 'level0') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-slider.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'active-track-color': map.get($deps, 'md-sys-color', 'primary'), 'active-track-height': if($exclude-hardcoded-values, null, 4px), 'active-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'disabled-active-track-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-active-track-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-handle-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-handle-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'disabled-handle-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-inactive-track-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-inactive-track-opacity': if($exclude-hardcoded-values, null, 0.12), 'focus-handle-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'handle-color': map.get($deps, 'md-sys-color', 'primary'), 'handle-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'handle-height': if($exclude-hardcoded-values, null, 20px), 'handle-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'handle-width': if($exclude-hardcoded-values, null, 20px), 'hover-handle-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'inactive-track-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'inactive-track-height': if($exclude-hardcoded-values, null, 4px), 'inactive-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'label-container-color': map.get($deps, 'md-sys-color', 'primary'), 'label-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'label-container-height': if($exclude-hardcoded-values, null, 28px), 'label-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'label-label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), 'label-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), 'label-label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), 'label-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), 'label-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.slider.label.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-medium-weight') map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'label-medium-font') ), 'label-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'), 'pressed-handle-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'state-layer-size': if($exclude-hardcoded-values, null, 40px), 'track-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'with-overlap-handle-outline-color': map.get($deps, 'md-sys-color', 'on-primary'), 'with-overlap-handle-outline-width': if($exclude-hardcoded-values, null, 1px), 'with-tick-marks-active-container-color': map.get($deps, 'md-sys-color', 'on-primary'), 'with-tick-marks-active-container-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-tick-marks-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'with-tick-marks-container-size': if($exclude-hardcoded-values, null, 2px), 'with-tick-marks-disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-tick-marks-disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-tick-marks-inactive-container-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-tick-marks-inactive-container-opacity': if($exclude-hardcoded-values, null, 0.38) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-snackbar.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'inverse-primary'), 'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-primary'), 'action-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'inverse-primary'), 'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-primary'), 'action-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'action-label-text-color': map.get($deps, 'md-sys-color', 'inverse-primary'), 'action-label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'action-label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'action-label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'action-label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'action-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.snackbar.action.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'action-label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'inverse-primary'), 'action-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-primary'), 'action-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 'icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'icon-focus-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'icon-focus-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'icon-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'icon-hover-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'icon-hover-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'icon-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'icon-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'icon-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'icon-size': if($exclude-hardcoded-values, null, 24px), 'supporting-text-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), 'supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'), 'supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), 'supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'), 'supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), 'supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.snackbar.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-medium-weight') map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'body-medium-font') ), 'supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'), 'with-single-line-container-height': if($exclude-hardcoded-values, null, 48px), 'with-two-lines-container-height': if($exclude-hardcoded-values, null, 68px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-standard-menu-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.standard-menu-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-icon-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-suggestion-chip.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 32px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), 'dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'dragged-state-layer-opacity': map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), 'elevated-container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), 'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 'elevated-disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), 'elevated-disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'elevated-disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), 'elevated-focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'elevated-hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'elevated-pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'flat-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'flat-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), 'flat-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'flat-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'flat-outline-width': if($exclude-hardcoded-values, null, 1px), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.suggestion-chip.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-leading-icon-disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-leading-icon-disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-leading-icon-dragged-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-focus-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-hover-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-leading-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-leading-icon-pressed-leading-icon-color': map.get($deps, 'md-sys-color', 'primary') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-switch.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'disabled-selected-handle-color': map.get($deps, 'md-sys-color', 'surface'), 'disabled-selected-handle-opacity': if($exclude-hardcoded-values, null, 1), 'disabled-selected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-selected-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-selected-track-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-track-opacity': if($exclude-hardcoded-values, null, 0.12), 'disabled-unselected-handle-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-unselected-handle-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-unselected-icon-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'disabled-unselected-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'disabled-unselected-track-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'disabled-unselected-track-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'pressed-handle-height': if($exclude-hardcoded-values, null, 28px), 'pressed-handle-width': if($exclude-hardcoded-values, null, 28px), 'selected-focus-handle-color': map.get($deps, 'md-sys-color', 'primary-container'), 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'selected-focus-track-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-handle-color': map.get($deps, 'md-sys-color', 'on-primary'), 'selected-handle-height': if($exclude-hardcoded-values, null, 24px), 'selected-handle-width': if($exclude-hardcoded-values, null, 24px), 'selected-hover-handle-color': map.get($deps, 'md-sys-color', 'primary-container'), 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'selected-hover-track-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'selected-icon-size': if($exclude-hardcoded-values, null, 16px), 'selected-pressed-handle-color': map.get($deps, 'md-sys-color', 'primary-container'), 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'selected-pressed-track-color': map.get($deps, 'md-sys-color', 'primary'), 'selected-track-color': map.get($deps, 'md-sys-color', 'primary'), 'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'state-layer-size': if($exclude-hardcoded-values, null, 40px), 'track-height': if($exclude-hardcoded-values, null, 32px), 'track-outline-width': if($exclude-hardcoded-values, null, 2px), 'track-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'track-width': if($exclude-hardcoded-values, null, 52px), 'unselected-focus-handle-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'unselected-focus-track-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'unselected-focus-track-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'unselected-handle-color': map.get($deps, 'md-sys-color', 'outline'), 'unselected-handle-height': if($exclude-hardcoded-values, null, 16px), 'unselected-handle-width': if($exclude-hardcoded-values, null, 16px), 'unselected-hover-handle-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'unselected-hover-track-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'unselected-hover-track-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'unselected-icon-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'unselected-icon-size': if($exclude-hardcoded-values, null, 16px), 'unselected-pressed-handle-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'unselected-pressed-icon-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'unselected-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'unselected-pressed-track-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'unselected-pressed-track-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'unselected-track-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'unselected-track-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'with-icon-handle-height': if($exclude-hardcoded-values, null, 24px), 'with-icon-handle-width': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-text-button.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-height': if($exclude-hardcoded-values, null, 40px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), 'label-text-line-height': map.get($deps, 'md-sys-typescale', 'label-large-line-height'), 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), 'label-text-tracking': map.get($deps, 'md-sys-typescale', 'label-large-tracking'), 'label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.text-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-large-weight') map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-large-line-height' ) map.get($deps, 'md-sys-typescale', 'label-large-font') ), 'label-text-weight': map.get($deps, 'md-sys-typescale', 'label-large-weight'), 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), 'pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'with-icon-disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'), 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-time-input.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'headline-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), 'headline-line-height': map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), 'headline-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), 'headline-tracking': map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), 'headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-medium-weight') map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'label-medium-font') ), 'headline-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'), 'period-selector-container-height': if($exclude-hardcoded-values, null, 72px), 'period-selector-container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), 'period-selector-container-width': if($exclude-hardcoded-values, null, 52px), 'period-selector-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'period-selector-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'period-selector-label-text-font': map.get($deps, 'md-sys-typescale', 'title-medium-font'), 'period-selector-label-text-line-height': map.get($deps, 'md-sys-typescale', 'title-medium-line-height'), 'period-selector-label-text-size': map.get($deps, 'md-sys-typescale', 'title-medium-size'), 'period-selector-label-text-tracking': map.get($deps, 'md-sys-typescale', 'title-medium-tracking'), 'period-selector-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.period-selector.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-medium-weight') map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'title-medium-font') ), 'period-selector-label-text-weight': map.get($deps, 'md-sys-typescale', 'title-medium-weight'), 'period-selector-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'period-selector-outline-width': if($exclude-hardcoded-values, null, 1px), 'period-selector-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'period-selector-selected-container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), 'period-selector-selected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-unselected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'time-input-field-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'time-input-field-container-height': if($exclude-hardcoded-values, null, 72px), 'time-input-field-container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), 'time-input-field-container-width': if($exclude-hardcoded-values, null, 96px), 'time-input-field-focus-container-color': map.get($deps, 'md-sys-color', 'primary-container'), 'time-input-field-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'time-input-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), 'time-input-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px), 'time-input-field-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-input-field-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-input-field-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'time-input-field-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-input-field-label-text-font': map.get($deps, 'md-sys-typescale', 'display-medium-font'), 'time-input-field-label-text-line-height': map.get($deps, 'md-sys-typescale', 'display-medium-line-height'), 'time-input-field-label-text-size': map.get($deps, 'md-sys-typescale', 'display-medium-size'), 'time-input-field-label-text-tracking': map.get($deps, 'md-sys-typescale', 'display-medium-tracking'), 'time-input-field-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'display-medium-weight') map.get($deps, 'md-sys-typescale', 'display-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'display-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'display-medium-font') ), 'time-input-field-label-text-weight': map.get($deps, 'md-sys-typescale', 'display-medium-weight'), 'time-input-field-separator-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-input-field-separator-font': map.get($deps, 'md-sys-typescale', 'display-large-font'), 'time-input-field-separator-line-height': map.get($deps, 'md-sys-typescale', 'display-large-line-height'), 'time-input-field-separator-size': map.get($deps, 'md-sys-typescale', 'display-large-size'), 'time-input-field-separator-tracking': map.get($deps, 'md-sys-typescale', 'display-large-tracking'), 'time-input-field-separator-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.separator.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'display-large-weight') map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'display-large-line-height' ) map.get($deps, 'md-sys-typescale', 'display-large-font') ), 'time-input-field-separator-weight': map.get($deps, 'md-sys-typescale', 'display-large-weight'), 'time-input-field-supporting-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'time-input-field-supporting-text-font': map.get($deps, 'md-sys-typescale', 'body-small-font'), 'time-input-field-supporting-text-line-height': map.get($deps, 'md-sys-typescale', 'body-small-line-height'), 'time-input-field-supporting-text-size': map.get($deps, 'md-sys-typescale', 'body-small-size'), 'time-input-field-supporting-text-tracking': map.get($deps, 'md-sys-typescale', 'body-small-tracking'), 'time-input-field-supporting-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-small-weight') map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-small-line-height' ) map.get($deps, 'md-sys-typescale', 'body-small-font') ), 'time-input-field-supporting-text-weight': map.get($deps, 'md-sys-typescale', 'body-small-weight') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-time-picker.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-state': md-sys-state.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'clock-dial-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'clock-dial-container-size': if($exclude-hardcoded-values, null, 256px), 'clock-dial-label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), 'clock-dial-label-text-line-height': map.get($deps, 'md-sys-typescale', 'body-large-line-height'), 'clock-dial-label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), 'clock-dial-label-text-tracking': map.get($deps, 'md-sys-typescale', 'body-large-tracking'), 'clock-dial-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.clock-dial.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'body-large-weight') map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'body-large-line-height' ) map.get($deps, 'md-sys-typescale', 'body-large-font') ), 'clock-dial-label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), 'clock-dial-selected-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), 'clock-dial-selector-center-container-color': map.get($deps, 'md-sys-color', 'primary'), 'clock-dial-selector-center-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'clock-dial-selector-center-container-size': if($exclude-hardcoded-values, null, 8px), 'clock-dial-selector-handle-container-color': map.get($deps, 'md-sys-color', 'primary'), 'clock-dial-selector-handle-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'clock-dial-selector-handle-container-size': if($exclude-hardcoded-values, null, 48px), 'clock-dial-selector-track-container-color': map.get($deps, 'md-sys-color', 'primary'), 'clock-dial-selector-track-container-width': if($exclude-hardcoded-values, null, 2px), 'clock-dial-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'clock-dial-unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'container-color': map.get($deps, 'md-sys-color', 'surface-container-high'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'headline-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), 'headline-line-height': map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), 'headline-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), 'headline-tracking': map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), 'headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'label-medium-weight') map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'label-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'label-medium-font') ), 'headline-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'), 'period-selector-container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), 'period-selector-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'period-selector-horizontal-container-height': if($exclude-hardcoded-values, null, 38px), 'period-selector-horizontal-container-width': if($exclude-hardcoded-values, null, 216px), 'period-selector-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'period-selector-label-text-font': map.get($deps, 'md-sys-typescale', 'title-medium-font'), 'period-selector-label-text-line-height': map.get($deps, 'md-sys-typescale', 'title-medium-line-height'), 'period-selector-label-text-size': map.get($deps, 'md-sys-typescale', 'title-medium-size'), 'period-selector-label-text-tracking': map.get($deps, 'md-sys-typescale', 'title-medium-tracking'), 'period-selector-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.period-selector.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-medium-weight') map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'title-medium-font') ), 'period-selector-label-text-weight': map.get($deps, 'md-sys-typescale', 'title-medium-weight'), 'period-selector-outline-color': map.get($deps, 'md-sys-color', 'outline'), 'period-selector-outline-width': if($exclude-hardcoded-values, null, 1px), 'period-selector-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'period-selector-selected-container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), 'period-selector-selected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), 'period-selector-unselected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'period-selector-vertical-container-height': if($exclude-hardcoded-values, null, 80px), 'period-selector-vertical-container-width': if($exclude-hardcoded-values, null, 52px), 'time-selector-24h-vertical-container-width': if($exclude-hardcoded-values, null, 114px), 'time-selector-container-height': if($exclude-hardcoded-values, null, 80px), 'time-selector-container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), 'time-selector-container-width': if($exclude-hardcoded-values, null, 96px), 'time-selector-focus-state-layer-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), 'time-selector-hover-state-layer-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), 'time-selector-label-text-font': map.get($deps, 'md-sys-typescale', 'display-large-font'), 'time-selector-label-text-line-height': map.get($deps, 'md-sys-typescale', 'display-large-line-height'), 'time-selector-label-text-size': map.get($deps, 'md-sys-typescale', 'display-large-size'), 'time-selector-label-text-tracking': map.get($deps, 'md-sys-typescale', 'display-large-tracking'), 'time-selector-label-text-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.time-selector.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'display-large-weight') map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'display-large-line-height' ) map.get($deps, 'md-sys-typescale', 'display-large-font') ), 'time-selector-label-text-weight': map.get($deps, 'md-sys-typescale', 'display-large-weight'), 'time-selector-pressed-state-layer-opacity': map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), 'time-selector-selected-container-color': map.get($deps, 'md-sys-color', 'primary-container'), 'time-selector-selected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'time-selector-selected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'time-selector-selected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'time-selector-selected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'time-selector-selected-label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'time-selector-selected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'time-selector-selected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary-container'), 'time-selector-separator-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-selector-separator-font': map.get($deps, 'md-sys-typescale', 'display-large-font'), 'time-selector-separator-line-height': map.get($deps, 'md-sys-typescale', 'display-large-line-height'), 'time-selector-separator-size': map.get($deps, 'md-sys-typescale', 'display-large-size'), 'time-selector-separator-tracking': map.get($deps, 'md-sys-typescale', 'display-large-tracking'), 'time-selector-separator-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.time-selector.separator.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'display-large-weight') map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'display-large-line-height' ) map.get($deps, 'md-sys-typescale', 'display-large-font') ), 'time-selector-separator-weight': map.get($deps, 'md-sys-typescale', 'display-large-weight'), 'time-selector-unselected-container-color': map.get($deps, 'md-sys-color', 'surface-container-highest'), 'time-selector-unselected-focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-selector-unselected-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-selector-unselected-hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-selector-unselected-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-selector-unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-selector-unselected-pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), 'time-selector-unselected-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface') ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-top-app-bar-large.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 152px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'headline-font': map.get($deps, 'md-sys-typescale', 'headline-medium-font'), 'headline-line-height': map.get($deps, 'md-sys-typescale', 'headline-medium-line-height'), 'headline-size': map.get($deps, 'md-sys-typescale', 'headline-medium-size'), 'headline-tracking': map.get($deps, 'md-sys-typescale', 'headline-medium-tracking'), 'headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.large.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'headline-medium-weight') map.get($deps, 'md-sys-typescale', 'headline-medium-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'headline-medium-line-height' ) map.get($deps, 'md-sys-typescale', 'headline-medium-font') ), 'headline-weight': map.get($deps, 'md-sys-typescale', 'headline-medium-weight'), 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-top-app-bar-medium.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 112px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'headline-font': map.get($deps, 'md-sys-typescale', 'headline-small-font'), 'headline-line-height': map.get($deps, 'md-sys-typescale', 'headline-small-line-height'), 'headline-size': map.get($deps, 'md-sys-typescale', 'headline-small-size'), 'headline-tracking': map.get($deps, 'md-sys-typescale', 'headline-small-tracking'), 'headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.medium.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'headline-small-weight') map.get($deps, 'md-sys-typescale', 'headline-small-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'headline-small-line-height' ) map.get($deps, 'md-sys-typescale', 'headline-small-font') ), 'headline-weight': map.get($deps, 'md-sys-typescale', 'headline-small-weight'), 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-top-app-bar-small-centered.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'), 'avatar-size': if($exclude-hardcoded-values, null, 30px), 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 64px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'container-surface-tint-layer-color': map.get($deps, 'md-sys-color', 'surface-tint'), 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'), 'headline-line-height': map.get($deps, 'md-sys-typescale', 'title-large-line-height'), 'headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'), 'headline-tracking': map.get($deps, 'md-sys-typescale', 'title-large-tracking'), 'headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.small.centered.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-large-weight') map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-large-line-height' ) map.get($deps, 'md-sys-typescale', 'title-large-font') ), 'headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'), 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'on-scroll-container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'on-scroll-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-comp-top-app-bar-small.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @use './md-sys-typescale'; $_default: ( 'md-sys-color': md-sys-color.values-light(), 'md-sys-elevation': md-sys-elevation.values(), 'md-sys-shape': md-sys-shape.values(), 'md-sys-typescale': md-sys-typescale.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'container-color': map.get($deps, 'md-sys-color', 'surface'), 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), 'container-height': if($exclude-hardcoded-values, null, 64px), 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), 'headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'), 'headline-line-height': map.get($deps, 'md-sys-typescale', 'title-large-line-height'), 'headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'), 'headline-tracking': map.get($deps, 'md-sys-typescale', 'title-large-tracking'), 'headline-type': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.small.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-sys-typescale', 'title-large-weight') map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( $deps, 'md-sys-typescale', 'title-large-line-height' ) map.get($deps, 'md-sys-typescale', 'title-large-font') ), 'headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'), 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), 'on-scroll-container-color': map.get($deps, 'md-sys-color', 'surface-container'), 'on-scroll-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) ); } ================================================ FILE: tokens/versions/v0_192/_md-ref-palette.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @function values($exclude-hardcoded-values: false) { @return ( 'black': if($exclude-hardcoded-values, null, #000), 'error0': if($exclude-hardcoded-values, null, #000), 'error10': if($exclude-hardcoded-values, null, #410e0b), 'error100': if($exclude-hardcoded-values, null, #fff), 'error20': if($exclude-hardcoded-values, null, #601410), 'error30': if($exclude-hardcoded-values, null, #8c1d18), 'error40': if($exclude-hardcoded-values, null, #b3261e), 'error50': if($exclude-hardcoded-values, null, #dc362e), 'error60': if($exclude-hardcoded-values, null, #e46962), 'error70': if($exclude-hardcoded-values, null, #ec928e), 'error80': if($exclude-hardcoded-values, null, #f2b8b5), 'error90': if($exclude-hardcoded-values, null, #f9dedc), 'error95': if($exclude-hardcoded-values, null, #fceeee), 'error99': if($exclude-hardcoded-values, null, #fffbf9), 'neutral-variant0': if($exclude-hardcoded-values, null, #000), 'neutral-variant10': if($exclude-hardcoded-values, null, #1d1a22), 'neutral-variant100': if($exclude-hardcoded-values, null, #fff), 'neutral-variant20': if($exclude-hardcoded-values, null, #322f37), 'neutral-variant30': if($exclude-hardcoded-values, null, #49454f), 'neutral-variant40': if($exclude-hardcoded-values, null, #605d66), 'neutral-variant50': if($exclude-hardcoded-values, null, #79747e), 'neutral-variant60': if($exclude-hardcoded-values, null, #938f99), 'neutral-variant70': if($exclude-hardcoded-values, null, #aea9b4), 'neutral-variant80': if($exclude-hardcoded-values, null, #cac4d0), 'neutral-variant90': if($exclude-hardcoded-values, null, #e7e0ec), 'neutral-variant95': if($exclude-hardcoded-values, null, #f5eefa), 'neutral-variant99': if($exclude-hardcoded-values, null, #fffbfe), 'neutral0': if($exclude-hardcoded-values, null, #000), 'neutral10': if($exclude-hardcoded-values, null, #1d1b20), 'neutral100': if($exclude-hardcoded-values, null, #fff), 'neutral12': if($exclude-hardcoded-values, null, #211f26), 'neutral17': if($exclude-hardcoded-values, null, #2b2930), 'neutral20': if($exclude-hardcoded-values, null, #322f35), 'neutral22': if($exclude-hardcoded-values, null, #36343b), 'neutral24': if($exclude-hardcoded-values, null, #3b383e), 'neutral30': if($exclude-hardcoded-values, null, #48464c), 'neutral4': if($exclude-hardcoded-values, null, #0f0d13), 'neutral40': if($exclude-hardcoded-values, null, #605d64), 'neutral50': if($exclude-hardcoded-values, null, #79767d), 'neutral6': if($exclude-hardcoded-values, null, #141218), 'neutral60': if($exclude-hardcoded-values, null, #938f96), 'neutral70': if($exclude-hardcoded-values, null, #aea9b1), 'neutral80': if($exclude-hardcoded-values, null, #cac5cd), 'neutral87': if($exclude-hardcoded-values, null, #ded8e1), 'neutral90': if($exclude-hardcoded-values, null, #e6e0e9), 'neutral92': if($exclude-hardcoded-values, null, #ece6f0), 'neutral94': if($exclude-hardcoded-values, null, #f3edf7), 'neutral95': if($exclude-hardcoded-values, null, #f5eff7), 'neutral96': if($exclude-hardcoded-values, null, #f7f2fa), 'neutral98': if($exclude-hardcoded-values, null, #fef7ff), 'neutral99': if($exclude-hardcoded-values, null, #fffbff), 'primary0': if($exclude-hardcoded-values, null, #000), 'primary10': if($exclude-hardcoded-values, null, #21005d), 'primary100': if($exclude-hardcoded-values, null, #fff), 'primary20': if($exclude-hardcoded-values, null, #381e72), 'primary30': if($exclude-hardcoded-values, null, #4f378b), 'primary40': if($exclude-hardcoded-values, null, #6750a4), 'primary50': if($exclude-hardcoded-values, null, #7f67be), 'primary60': if($exclude-hardcoded-values, null, #9a82db), 'primary70': if($exclude-hardcoded-values, null, #b69df8), 'primary80': if($exclude-hardcoded-values, null, #d0bcff), 'primary90': if($exclude-hardcoded-values, null, #eaddff), 'primary95': if($exclude-hardcoded-values, null, #f6edff), 'primary99': if($exclude-hardcoded-values, null, #fffbfe), 'secondary0': if($exclude-hardcoded-values, null, #000), 'secondary10': if($exclude-hardcoded-values, null, #1d192b), 'secondary100': if($exclude-hardcoded-values, null, #fff), 'secondary20': if($exclude-hardcoded-values, null, #332d41), 'secondary30': if($exclude-hardcoded-values, null, #4a4458), 'secondary40': if($exclude-hardcoded-values, null, #625b71), 'secondary50': if($exclude-hardcoded-values, null, #7a7289), 'secondary60': if($exclude-hardcoded-values, null, #958da5), 'secondary70': if($exclude-hardcoded-values, null, #b0a7c0), 'secondary80': if($exclude-hardcoded-values, null, #ccc2dc), 'secondary90': if($exclude-hardcoded-values, null, #e8def8), 'secondary95': if($exclude-hardcoded-values, null, #f6edff), 'secondary99': if($exclude-hardcoded-values, null, #fffbfe), 'tertiary0': if($exclude-hardcoded-values, null, #000), 'tertiary10': if($exclude-hardcoded-values, null, #31111d), 'tertiary100': if($exclude-hardcoded-values, null, #fff), 'tertiary20': if($exclude-hardcoded-values, null, #492532), 'tertiary30': if($exclude-hardcoded-values, null, #633b48), 'tertiary40': if($exclude-hardcoded-values, null, #7d5260), 'tertiary50': if($exclude-hardcoded-values, null, #986977), 'tertiary60': if($exclude-hardcoded-values, null, #b58392), 'tertiary70': if($exclude-hardcoded-values, null, #d29dac), 'tertiary80': if($exclude-hardcoded-values, null, #efb8c8), 'tertiary90': if($exclude-hardcoded-values, null, #ffd8e4), 'tertiary95': if($exclude-hardcoded-values, null, #ffecf1), 'tertiary99': if($exclude-hardcoded-values, null, #fffbfa), 'white': if($exclude-hardcoded-values, null, #fff) ); } ================================================ FILE: tokens/versions/v0_192/_md-ref-typeface.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @function values($exclude-hardcoded-values: false) { @return ( 'brand': if($exclude-hardcoded-values, null, (Roboto)), 'plain': if($exclude-hardcoded-values, null, (Roboto)), 'weight-bold': if($exclude-hardcoded-values, null, 700), 'weight-medium': if($exclude-hardcoded-values, null, 500), 'weight-regular': if($exclude-hardcoded-values, null, 400) ); } ================================================ FILE: tokens/versions/v0_192/_md-sys-color.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-ref-palette'; $_default-dark: ( 'md-ref-palette': md-ref-palette.values(), ); @function values-dark($deps: $_default-dark) { @return ( 'background': map.get($deps, 'md-ref-palette', 'neutral6'), 'error': map.get($deps, 'md-ref-palette', 'error80'), 'error-container': map.get($deps, 'md-ref-palette', 'error30'), 'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral20'), 'inverse-primary': map.get($deps, 'md-ref-palette', 'primary40'), 'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral90'), 'on-background': map.get($deps, 'md-ref-palette', 'neutral90'), 'on-error': map.get($deps, 'md-ref-palette', 'error20'), 'on-error-container': map.get($deps, 'md-ref-palette', 'error90'), 'on-primary': map.get($deps, 'md-ref-palette', 'primary20'), 'on-primary-container': map.get($deps, 'md-ref-palette', 'primary90'), 'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'), 'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'), 'on-secondary': map.get($deps, 'md-ref-palette', 'secondary20'), 'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'), 'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'), 'on-secondary-fixed-variant': map.get($deps, 'md-ref-palette', 'secondary30'), 'on-surface': map.get($deps, 'md-ref-palette', 'neutral90'), 'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'), 'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary20'), 'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'), 'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'), 'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'), 'outline': map.get($deps, 'md-ref-palette', 'neutral-variant60'), 'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'), 'primary': map.get($deps, 'md-ref-palette', 'primary80'), 'primary-container': map.get($deps, 'md-ref-palette', 'primary30'), 'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'), 'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'), 'scrim': map.get($deps, 'md-ref-palette', 'neutral0'), 'secondary': map.get($deps, 'md-ref-palette', 'secondary80'), 'secondary-container': map.get($deps, 'md-ref-palette', 'secondary30'), 'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'), 'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'), 'shadow': map.get($deps, 'md-ref-palette', 'neutral0'), 'surface': map.get($deps, 'md-ref-palette', 'neutral6'), 'surface-bright': map.get($deps, 'md-ref-palette', 'neutral24'), 'surface-container': map.get($deps, 'md-ref-palette', 'neutral12'), 'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral17'), 'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral22'), 'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral10'), 'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral4'), 'surface-dim': map.get($deps, 'md-ref-palette', 'neutral6'), 'surface-tint': map.get($deps, 'md-ref-palette', 'primary80'), 'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'), 'tertiary': map.get($deps, 'md-ref-palette', 'tertiary80'), 'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary30'), 'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'), 'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80') ); } $_default-light: ( 'md-ref-palette': md-ref-palette.values(), ); @function values-light($deps: $_default-light) { @return ( 'background': map.get($deps, 'md-ref-palette', 'neutral98'), 'error': map.get($deps, 'md-ref-palette', 'error40'), 'error-container': map.get($deps, 'md-ref-palette', 'error90'), 'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral95'), 'inverse-primary': map.get($deps, 'md-ref-palette', 'primary80'), 'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral20'), 'on-background': map.get($deps, 'md-ref-palette', 'neutral10'), 'on-error': map.get($deps, 'md-ref-palette', 'error100'), 'on-error-container': map.get($deps, 'md-ref-palette', 'error10'), 'on-primary': map.get($deps, 'md-ref-palette', 'primary100'), 'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'), 'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'), 'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'), 'on-secondary': map.get($deps, 'md-ref-palette', 'secondary100'), 'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'), 'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'), 'on-secondary-fixed-variant': map.get($deps, 'md-ref-palette', 'secondary30'), 'on-surface': map.get($deps, 'md-ref-palette', 'neutral10'), 'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'), 'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary100'), 'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'), 'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'), 'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'), 'outline': map.get($deps, 'md-ref-palette', 'neutral-variant50'), 'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'), 'primary': map.get($deps, 'md-ref-palette', 'primary40'), 'primary-container': map.get($deps, 'md-ref-palette', 'primary90'), 'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'), 'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'), 'scrim': map.get($deps, 'md-ref-palette', 'neutral0'), 'secondary': map.get($deps, 'md-ref-palette', 'secondary40'), 'secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'), 'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'), 'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'), 'shadow': map.get($deps, 'md-ref-palette', 'neutral0'), 'surface': map.get($deps, 'md-ref-palette', 'neutral98'), 'surface-bright': map.get($deps, 'md-ref-palette', 'neutral98'), 'surface-container': map.get($deps, 'md-ref-palette', 'neutral94'), 'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral92'), 'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral90'), 'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral96'), 'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral100'), 'surface-dim': map.get($deps, 'md-ref-palette', 'neutral87'), 'surface-tint': map.get($deps, 'md-ref-palette', 'primary40'), 'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant90'), 'tertiary': map.get($deps, 'md-ref-palette', 'tertiary40'), 'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'), 'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'), 'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80') ); } ================================================ FILE: tokens/versions/v0_192/_md-sys-elevation.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @function values($exclude-hardcoded-values: false) { @return ( 'level0': if($exclude-hardcoded-values, null, 0), 'level1': if($exclude-hardcoded-values, null, 1), 'level2': if($exclude-hardcoded-values, null, 3), 'level3': if($exclude-hardcoded-values, null, 6), 'level4': if($exclude-hardcoded-values, null, 8), 'level5': if($exclude-hardcoded-values, null, 12) ); } ================================================ FILE: tokens/versions/v0_192/_md-sys-motion.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @function values($exclude-hardcoded-values: false) { @return ( 'duration-extra-long1': if($exclude-hardcoded-values, null, 700ms), 'duration-extra-long2': if($exclude-hardcoded-values, null, 800ms), 'duration-extra-long3': if($exclude-hardcoded-values, null, 900ms), 'duration-extra-long4': if($exclude-hardcoded-values, null, 1000ms), 'duration-long1': if($exclude-hardcoded-values, null, 450ms), 'duration-long2': if($exclude-hardcoded-values, null, 500ms), 'duration-long3': if($exclude-hardcoded-values, null, 550ms), 'duration-long4': if($exclude-hardcoded-values, null, 600ms), 'duration-medium1': if($exclude-hardcoded-values, null, 250ms), 'duration-medium2': if($exclude-hardcoded-values, null, 300ms), 'duration-medium3': if($exclude-hardcoded-values, null, 350ms), 'duration-medium4': if($exclude-hardcoded-values, null, 400ms), 'duration-short1': if($exclude-hardcoded-values, null, 50ms), 'duration-short2': if($exclude-hardcoded-values, null, 100ms), 'duration-short3': if($exclude-hardcoded-values, null, 150ms), 'duration-short4': if($exclude-hardcoded-values, null, 200ms), 'easing-emphasized': if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)), 'easing-emphasized-accelerate': if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 0.8, 0.15)), 'easing-emphasized-decelerate': if($exclude-hardcoded-values, null, cubic-bezier(0.05, 0.7, 0.1, 1)), 'easing-legacy': if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 0.2, 1)), 'easing-legacy-accelerate': if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 1, 1)), 'easing-legacy-decelerate': if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0.2, 1)), 'easing-linear': if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 1, 1)), 'easing-standard': if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)), 'easing-standard-accelerate': if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 1, 1)), 'easing-standard-decelerate': if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0, 1)), 'path': /* Type "motion_path" is not supported. */ null ); } ================================================ FILE: tokens/versions/v0_192/_md-sys-shape.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @function values($exclude-hardcoded-values: false) { @return ( 'corner-extra-large': if($exclude-hardcoded-values, null, 28px), 'corner-extra-large-top': if($exclude-hardcoded-values, null, (28px 28px 0px 0px)), 'corner-extra-small': if($exclude-hardcoded-values, null, 4px), 'corner-extra-small-top': if($exclude-hardcoded-values, null, (4px 4px 0px 0px)), 'corner-full': if($exclude-hardcoded-values, null, 9999px), 'corner-large': if($exclude-hardcoded-values, null, 16px), 'corner-large-end': if($exclude-hardcoded-values, null, (0px 16px 16px 0px)), 'corner-large-start': if($exclude-hardcoded-values, null, (16px 0px 0px 16px)), 'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0px 0px)), 'corner-medium': if($exclude-hardcoded-values, null, 12px), 'corner-none': if($exclude-hardcoded-values, null, 0px), 'corner-small': if($exclude-hardcoded-values, null, 8px) ); } ================================================ FILE: tokens/versions/v0_192/_md-sys-state.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @function values($exclude-hardcoded-values: false) { @return ( 'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16), 'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12), 'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08), 'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12) ); } ================================================ FILE: tokens/versions/v0_192/_md-sys-typescale.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // Design system display name: Google Material 3 // Design system version: v0.192 // User-configured context group "Audience": "3P" // User-configured context group "Platform": "Web" // User-configured context group "Scheme": "Dynamic" // @use 'sass:map'; @use './md-ref-typeface'; $_default: ( 'md-ref-typeface': md-ref-typeface.values(), ); @function values($deps: $_default, $exclude-hardcoded-values: false) { @return ( 'body-large': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 1rem) #{'/'} if( $exclude-hardcoded-values, null, 1.5rem ) map.get($deps, 'md-ref-typeface', 'plain') ), 'body-large-font': map.get($deps, 'md-ref-typeface', 'plain'), 'body-large-line-height': if($exclude-hardcoded-values, null, 1.5rem), 'body-large-size': if($exclude-hardcoded-values, null, 1rem), 'body-large-tracking': if($exclude-hardcoded-values, null, 0.03125rem), 'body-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'body-medium': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( $exclude-hardcoded-values, null, 1.25rem ) map.get($deps, 'md-ref-typeface', 'plain') ), 'body-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), 'body-medium-line-height': if($exclude-hardcoded-values, null, 1.25rem), 'body-medium-size': if($exclude-hardcoded-values, null, 0.875rem), 'body-medium-tracking': if($exclude-hardcoded-values, null, 0.015625rem), 'body-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'body-small': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if( $exclude-hardcoded-values, null, 1rem ) map.get($deps, 'md-ref-typeface', 'plain') ), 'body-small-font': map.get($deps, 'md-ref-typeface', 'plain'), 'body-small-line-height': if($exclude-hardcoded-values, null, 1rem), 'body-small-size': if($exclude-hardcoded-values, null, 0.75rem), 'body-small-tracking': if($exclude-hardcoded-values, null, 0.025rem), 'body-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'display-large': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 3.5625rem) #{'/'} if( $exclude-hardcoded-values, null, 4rem ) map.get($deps, 'md-ref-typeface', 'brand') ), 'display-large-font': map.get($deps, 'md-ref-typeface', 'brand'), 'display-large-line-height': if($exclude-hardcoded-values, null, 4rem), 'display-large-size': if($exclude-hardcoded-values, null, 3.5625rem), 'display-large-tracking': if($exclude-hardcoded-values, null, -0.015625rem), 'display-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'display-medium': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 2.8125rem) #{'/'} if( $exclude-hardcoded-values, null, 3.25rem ) map.get($deps, 'md-ref-typeface', 'brand') ), 'display-medium-font': map.get($deps, 'md-ref-typeface', 'brand'), 'display-medium-line-height': if($exclude-hardcoded-values, null, 3.25rem), 'display-medium-size': if($exclude-hardcoded-values, null, 2.8125rem), 'display-medium-tracking': if($exclude-hardcoded-values, null, 0rem), 'display-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'display-small': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 2.25rem) #{'/'} if( $exclude-hardcoded-values, null, 2.75rem ) map.get($deps, 'md-ref-typeface', 'brand') ), 'display-small-font': map.get($deps, 'md-ref-typeface', 'brand'), 'display-small-line-height': if($exclude-hardcoded-values, null, 2.75rem), 'display-small-size': if($exclude-hardcoded-values, null, 2.25rem), 'display-small-tracking': if($exclude-hardcoded-values, null, 0rem), 'display-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'headline-large': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 2rem) #{'/'} if( $exclude-hardcoded-values, null, 2.5rem ) map.get($deps, 'md-ref-typeface', 'brand') ), 'headline-large-font': map.get($deps, 'md-ref-typeface', 'brand'), 'headline-large-line-height': if($exclude-hardcoded-values, null, 2.5rem), 'headline-large-size': if($exclude-hardcoded-values, null, 2rem), 'headline-large-tracking': if($exclude-hardcoded-values, null, 0rem), 'headline-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'headline-medium': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 1.75rem) #{'/'} if( $exclude-hardcoded-values, null, 2.25rem ) map.get($deps, 'md-ref-typeface', 'brand') ), 'headline-medium-font': map.get($deps, 'md-ref-typeface', 'brand'), 'headline-medium-line-height': if($exclude-hardcoded-values, null, 2.25rem), 'headline-medium-size': if($exclude-hardcoded-values, null, 1.75rem), 'headline-medium-tracking': if($exclude-hardcoded-values, null, 0rem), 'headline-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'headline-small': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 1.5rem) #{'/'} if( $exclude-hardcoded-values, null, 2rem ) map.get($deps, 'md-ref-typeface', 'brand') ), 'headline-small-font': map.get($deps, 'md-ref-typeface', 'brand'), 'headline-small-line-height': if($exclude-hardcoded-values, null, 2rem), 'headline-small-size': if($exclude-hardcoded-values, null, 1.5rem), 'headline-small-tracking': if($exclude-hardcoded-values, null, 0rem), 'headline-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'label-large': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-medium') if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( $exclude-hardcoded-values, null, 1.25rem ) map.get($deps, 'md-ref-typeface', 'plain') ), 'label-large-font': map.get($deps, 'md-ref-typeface', 'plain'), 'label-large-line-height': if($exclude-hardcoded-values, null, 1.25rem), 'label-large-size': if($exclude-hardcoded-values, null, 0.875rem), 'label-large-tracking': if($exclude-hardcoded-values, null, 0.00625rem), 'label-large-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), 'label-large-weight-prominent': map.get($deps, 'md-ref-typeface', 'weight-bold'), 'label-medium': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-medium') if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if( $exclude-hardcoded-values, null, 1rem ) map.get($deps, 'md-ref-typeface', 'plain') ), 'label-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), 'label-medium-line-height': if($exclude-hardcoded-values, null, 1rem), 'label-medium-size': if($exclude-hardcoded-values, null, 0.75rem), 'label-medium-tracking': if($exclude-hardcoded-values, null, 0.03125rem), 'label-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), 'label-medium-weight-prominent': map.get($deps, 'md-ref-typeface', 'weight-bold'), 'label-small': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-medium') if($exclude-hardcoded-values, null, 0.6875rem) #{'/'} if( $exclude-hardcoded-values, null, 1rem ) map.get($deps, 'md-ref-typeface', 'plain') ), 'label-small-font': map.get($deps, 'md-ref-typeface', 'plain'), 'label-small-line-height': if($exclude-hardcoded-values, null, 1rem), 'label-small-size': if($exclude-hardcoded-values, null, 0.6875rem), 'label-small-tracking': if($exclude-hardcoded-values, null, 0.03125rem), 'label-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), 'title-large': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-regular') if($exclude-hardcoded-values, null, 1.375rem) #{'/'} if( $exclude-hardcoded-values, null, 1.75rem ) map.get($deps, 'md-ref-typeface', 'brand') ), 'title-large-font': map.get($deps, 'md-ref-typeface', 'brand'), 'title-large-line-height': if($exclude-hardcoded-values, null, 1.75rem), 'title-large-size': if($exclude-hardcoded-values, null, 1.375rem), 'title-large-tracking': if($exclude-hardcoded-values, null, 0rem), 'title-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), 'title-medium': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-medium') if($exclude-hardcoded-values, null, 1rem) #{'/'} if( $exclude-hardcoded-values, null, 1.5rem ) map.get($deps, 'md-ref-typeface', 'plain') ), 'title-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), 'title-medium-line-height': if($exclude-hardcoded-values, null, 1.5rem), 'title-medium-size': if($exclude-hardcoded-values, null, 1rem), 'title-medium-tracking': if($exclude-hardcoded-values, null, 0.009375rem), 'title-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), 'title-small': if( $exclude-hardcoded-values, null, /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ map.get($deps, 'md-ref-typeface', 'weight-medium') if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( $exclude-hardcoded-values, null, 1.25rem ) map.get($deps, 'md-ref-typeface', 'plain') ), 'title-small-font': map.get($deps, 'md-ref-typeface', 'plain'), 'title-small-line-height': if($exclude-hardcoded-values, null, 1.25rem), 'title-small-size': if($exclude-hardcoded-values, null, 0.875rem), 'title-small-tracking': if($exclude-hardcoded-values, null, 0.00625rem), 'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium') ); } ================================================ FILE: tokens/versions/v0_192/index.test.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // @use 'true' as test; @use './index'; @include test.describe('index') { @include test.describe('index.md-comp-assist-chip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-assist-chip-values()); } } @include test.describe('index.md-comp-badge-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-badge-values()); } } @include test.describe('index.md-comp-banner-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-banner-values()); } } @include test.describe('index.md-comp-bottom-app-bar-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-bottom-app-bar-values()); } } @include test.describe('index.md-comp-carousel-item-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-carousel-item-values()); } } @include test.describe('index.md-comp-checkbox-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-checkbox-values()); } } @include test.describe('index.md-comp-circular-progress-indicator-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-circular-progress-indicator-values() ); } } @include test.describe('index.md-comp-data-table-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-data-table-values()); } } @include test.describe('index.md-comp-date-input-modal-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-date-input-modal-values()); } } @include test.describe('index.md-comp-date-picker-docked-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-date-picker-docked-values()); } } @include test.describe('index.md-comp-date-picker-modal-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-date-picker-modal-values()); } } @include test.describe('index.md-comp-dialog-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-dialog-values()); } } @include test.describe('index.md-comp-divider-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-divider-values()); } } @include test.describe('index.md-comp-elevated-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-elevated-button-values()); } } @include test.describe('index.md-comp-elevated-card-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-elevated-card-values()); } } @include test.describe('index.md-comp-extended-fab-branded-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-branded-values()); } } @include test.describe('index.md-comp-extended-fab-primary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-primary-values()); } } @include test.describe('index.md-comp-extended-fab-secondary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-secondary-values()); } } @include test.describe('index.md-comp-extended-fab-surface-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-surface-values()); } } @include test.describe('index.md-comp-extended-fab-tertiary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-extended-fab-tertiary-values()); } } @include test.describe('index.md-comp-fab-branded-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-branded-values()); } } @include test.describe('index.md-comp-fab-branded-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-branded-large-values()); } } @include test.describe('index.md-comp-fab-primary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-primary-values()); } } @include test.describe('index.md-comp-fab-primary-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-primary-large-values()); } } @include test.describe('index.md-comp-fab-primary-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-primary-small-values()); } } @include test.describe('index.md-comp-fab-secondary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-secondary-values()); } } @include test.describe('index.md-comp-fab-secondary-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-secondary-large-values()); } } @include test.describe('index.md-comp-fab-secondary-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-secondary-small-values()); } } @include test.describe('index.md-comp-fab-surface-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-surface-values()); } } @include test.describe('index.md-comp-fab-surface-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-surface-large-values()); } } @include test.describe('index.md-comp-fab-surface-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-surface-small-values()); } } @include test.describe('index.md-comp-fab-tertiary-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-tertiary-values()); } } @include test.describe('index.md-comp-fab-tertiary-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-tertiary-large-values()); } } @include test.describe('index.md-comp-fab-tertiary-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-fab-tertiary-small-values()); } } @include test.describe('index.md-comp-filled-autocomplete-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-autocomplete-values()); } } @include test.describe('index.md-comp-filled-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-button-values()); } } @include test.describe('index.md-comp-filled-card-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-card-values()); } } @include test.describe('index.md-comp-filled-icon-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-icon-button-values()); } } @include test.describe('index.md-comp-filled-menu-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-menu-button-values()); } } @include test.describe('index.md-comp-filled-select-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-select-values()); } } @include test.describe('index.md-comp-filled-text-field-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-text-field-values()); } } @include test.describe('index.md-comp-filled-tonal-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filled-tonal-button-values()); } } @include test.describe('index.md-comp-filled-tonal-icon-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-filled-tonal-icon-button-values() ); } } @include test.describe('index.md-comp-filter-chip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-filter-chip-values()); } } @include test.describe('index.md-comp-full-screen-dialog-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-full-screen-dialog-values()); } } @include test.describe('index.md-comp-icon-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-icon-button-values()); } } @include test.describe('index.md-comp-input-chip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-input-chip-values()); } } @include test.describe('index.md-comp-linear-progress-indicator-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-linear-progress-indicator-values() ); } } @include test.describe('index.md-comp-list-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-list-values()); } } @include test.describe('index.md-comp-menu-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-menu-values()); } } @include test.describe('index.md-comp-navigation-bar-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-navigation-bar-values()); } } @include test.describe('index.md-comp-navigation-drawer-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-navigation-drawer-values()); } } @include test.describe('index.md-comp-navigation-rail-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-navigation-rail-values()); } } @include test.describe('index.md-comp-outlined-autocomplete-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-autocomplete-values()); } } @include test.describe('index.md-comp-outlined-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-button-values()); } } @include test.describe('index.md-comp-outlined-card-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-card-values()); } } @include test.describe('index.md-comp-outlined-icon-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-icon-button-values()); } } @include test.describe('index.md-comp-outlined-menu-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-menu-button-values()); } } @include test.describe('index.md-comp-outlined-segmented-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-outlined-segmented-button-values() ); } } @include test.describe('index.md-comp-outlined-select-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-select-values()); } } @include test.describe('index.md-comp-outlined-text-field-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-outlined-text-field-values()); } } @include test.describe('index.md-comp-plain-tooltip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-plain-tooltip-values()); } } @include test.describe('index.md-comp-primary-navigation-tab-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-primary-navigation-tab-values()); } } @include test.describe('index.md-comp-radio-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-radio-button-values()); } } @include test.describe('index.md-comp-rich-tooltip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-rich-tooltip-values()); } } @include test.describe('index.md-comp-scrim-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-scrim-values()); } } @include test.describe('index.md-comp-search-bar-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-search-bar-values()); } } @include test.describe('index.md-comp-search-view-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-search-view-values()); } } @include test.describe('index.md-comp-secondary-navigation-tab-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-secondary-navigation-tab-values() ); } } @include test.describe('index.md-comp-sheet-bottom-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-sheet-bottom-values()); } } @include test.describe('index.md-comp-sheet-floating-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-sheet-floating-values()); } } @include test.describe('index.md-comp-sheet-side-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-sheet-side-values()); } } @include test.describe('index.md-comp-slider-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-slider-values()); } } @include test.describe('index.md-comp-snackbar-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-snackbar-values()); } } @include test.describe('index.md-comp-standard-menu-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-standard-menu-button-values()); } } @include test.describe('index.md-comp-suggestion-chip-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-suggestion-chip-values()); } } @include test.describe('index.md-comp-switch-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-switch-values()); } } @include test.describe('index.md-comp-text-button-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-text-button-values()); } } @include test.describe('index.md-comp-time-input-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-time-input-values()); } } @include test.describe('index.md-comp-time-picker-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-time-picker-values()); } } @include test.describe('index.md-comp-top-app-bar-large-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-top-app-bar-large-values()); } } @include test.describe('index.md-comp-top-app-bar-medium-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-top-app-bar-medium-values()); } } @include test.describe('index.md-comp-top-app-bar-small-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-comp-top-app-bar-small-values()); } } @include test.describe('index.md-comp-top-app-bar-small-centered-values') { @include test.it('should forward non-empty map') { @include test.assert-true( index.md-comp-top-app-bar-small-centered-values() ); } } @include test.describe('index.md-ref-palette-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-ref-palette-values()); } } @include test.describe('index.md-ref-typeface-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-ref-typeface-values()); } } @include test.describe('index.md-sys-color-values-dark') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-color-values-dark()); } } @include test.describe('index.md-sys-color-values-light') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-color-values-light()); } } @include test.describe('index.md-sys-elevation-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-elevation-values()); } } @include test.describe('index.md-sys-motion-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-motion-values()); } } @include test.describe('index.md-sys-shape-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-shape-values()); } } @include test.describe('index.md-sys-state-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-state-values()); } } @include test.describe('index.md-sys-typescale-values') { @include test.it('should forward non-empty map') { @include test.assert-true(index.md-sys-typescale-values()); } } } ================================================ FILE: tokens/versions/v0_192/lib.test.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! // !!! DO NOT MODIFY IT BY HAND !!! // @use 'true' as test; @use './md-comp-assist-chip'; @use './md-comp-badge'; @use './md-comp-banner'; @use './md-comp-bottom-app-bar'; @use './md-comp-carousel-item'; @use './md-comp-checkbox'; @use './md-comp-circular-progress-indicator'; @use './md-comp-data-table'; @use './md-comp-date-input-modal'; @use './md-comp-date-picker-docked'; @use './md-comp-date-picker-modal'; @use './md-comp-dialog'; @use './md-comp-divider'; @use './md-comp-elevated-button'; @use './md-comp-elevated-card'; @use './md-comp-extended-fab-branded'; @use './md-comp-extended-fab-primary'; @use './md-comp-extended-fab-secondary'; @use './md-comp-extended-fab-surface'; @use './md-comp-extended-fab-tertiary'; @use './md-comp-fab-branded'; @use './md-comp-fab-branded-large'; @use './md-comp-fab-primary'; @use './md-comp-fab-primary-large'; @use './md-comp-fab-primary-small'; @use './md-comp-fab-secondary'; @use './md-comp-fab-secondary-large'; @use './md-comp-fab-secondary-small'; @use './md-comp-fab-surface'; @use './md-comp-fab-surface-large'; @use './md-comp-fab-surface-small'; @use './md-comp-fab-tertiary'; @use './md-comp-fab-tertiary-large'; @use './md-comp-fab-tertiary-small'; @use './md-comp-filled-autocomplete'; @use './md-comp-filled-button'; @use './md-comp-filled-card'; @use './md-comp-filled-icon-button'; @use './md-comp-filled-menu-button'; @use './md-comp-filled-select'; @use './md-comp-filled-text-field'; @use './md-comp-filled-tonal-button'; @use './md-comp-filled-tonal-icon-button'; @use './md-comp-filter-chip'; @use './md-comp-full-screen-dialog'; @use './md-comp-icon-button'; @use './md-comp-input-chip'; @use './md-comp-linear-progress-indicator'; @use './md-comp-list'; @use './md-comp-menu'; @use './md-comp-navigation-bar'; @use './md-comp-navigation-drawer'; @use './md-comp-navigation-rail'; @use './md-comp-outlined-autocomplete'; @use './md-comp-outlined-button'; @use './md-comp-outlined-card'; @use './md-comp-outlined-icon-button'; @use './md-comp-outlined-menu-button'; @use './md-comp-outlined-segmented-button'; @use './md-comp-outlined-select'; @use './md-comp-outlined-text-field'; @use './md-comp-plain-tooltip'; @use './md-comp-primary-navigation-tab'; @use './md-comp-radio-button'; @use './md-comp-rich-tooltip'; @use './md-comp-scrim'; @use './md-comp-search-bar'; @use './md-comp-search-view'; @use './md-comp-secondary-navigation-tab'; @use './md-comp-sheet-bottom'; @use './md-comp-sheet-floating'; @use './md-comp-sheet-side'; @use './md-comp-slider'; @use './md-comp-snackbar'; @use './md-comp-standard-menu-button'; @use './md-comp-suggestion-chip'; @use './md-comp-switch'; @use './md-comp-text-button'; @use './md-comp-time-input'; @use './md-comp-time-picker'; @use './md-comp-top-app-bar-large'; @use './md-comp-top-app-bar-medium'; @use './md-comp-top-app-bar-small'; @use './md-comp-top-app-bar-small-centered'; @use './md-ref-palette'; @use './md-ref-typeface'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-motion'; @use './md-sys-shape'; @use './md-sys-state'; @use './md-sys-typescale'; @include test.describe('lib') { @include test.describe('md-comp-assist-chip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-assist-chip.values()); } } @include test.describe('md-comp-badge.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-badge.values()); } } @include test.describe('md-comp-banner.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-banner.values()); } } @include test.describe('md-comp-bottom-app-bar.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-bottom-app-bar.values()); } } @include test.describe('md-comp-carousel-item.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-carousel-item.values()); } } @include test.describe('md-comp-checkbox.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-checkbox.values()); } } @include test.describe('md-comp-circular-progress-indicator.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-circular-progress-indicator.values()); } } @include test.describe('md-comp-data-table.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-data-table.values()); } } @include test.describe('md-comp-date-input-modal.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-date-input-modal.values()); } } @include test.describe('md-comp-date-picker-docked.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-date-picker-docked.values()); } } @include test.describe('md-comp-date-picker-modal.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-date-picker-modal.values()); } } @include test.describe('md-comp-dialog.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-dialog.values()); } } @include test.describe('md-comp-divider.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-divider.values()); } } @include test.describe('md-comp-elevated-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-elevated-button.values()); } } @include test.describe('md-comp-elevated-card.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-elevated-card.values()); } } @include test.describe('md-comp-extended-fab-branded.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-branded.values()); } } @include test.describe('md-comp-extended-fab-primary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-primary.values()); } } @include test.describe('md-comp-extended-fab-secondary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-secondary.values()); } } @include test.describe('md-comp-extended-fab-surface.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-surface.values()); } } @include test.describe('md-comp-extended-fab-tertiary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-extended-fab-tertiary.values()); } } @include test.describe('md-comp-fab-branded.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-branded.values()); } } @include test.describe('md-comp-fab-branded-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-branded-large.values()); } } @include test.describe('md-comp-fab-primary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-primary.values()); } } @include test.describe('md-comp-fab-primary-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-primary-large.values()); } } @include test.describe('md-comp-fab-primary-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-primary-small.values()); } } @include test.describe('md-comp-fab-secondary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-secondary.values()); } } @include test.describe('md-comp-fab-secondary-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-secondary-large.values()); } } @include test.describe('md-comp-fab-secondary-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-secondary-small.values()); } } @include test.describe('md-comp-fab-surface.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-surface.values()); } } @include test.describe('md-comp-fab-surface-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-surface-large.values()); } } @include test.describe('md-comp-fab-surface-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-surface-small.values()); } } @include test.describe('md-comp-fab-tertiary.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-tertiary.values()); } } @include test.describe('md-comp-fab-tertiary-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-tertiary-large.values()); } } @include test.describe('md-comp-fab-tertiary-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-fab-tertiary-small.values()); } } @include test.describe('md-comp-filled-autocomplete.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-autocomplete.values()); } } @include test.describe('md-comp-filled-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-button.values()); } } @include test.describe('md-comp-filled-card.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-card.values()); } } @include test.describe('md-comp-filled-icon-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-icon-button.values()); } } @include test.describe('md-comp-filled-menu-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-menu-button.values()); } } @include test.describe('md-comp-filled-select.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-select.values()); } } @include test.describe('md-comp-filled-text-field.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-text-field.values()); } } @include test.describe('md-comp-filled-tonal-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-tonal-button.values()); } } @include test.describe('md-comp-filled-tonal-icon-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filled-tonal-icon-button.values()); } } @include test.describe('md-comp-filter-chip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-filter-chip.values()); } } @include test.describe('md-comp-full-screen-dialog.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-full-screen-dialog.values()); } } @include test.describe('md-comp-icon-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-icon-button.values()); } } @include test.describe('md-comp-input-chip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-input-chip.values()); } } @include test.describe('md-comp-linear-progress-indicator.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-linear-progress-indicator.values()); } } @include test.describe('md-comp-list.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-list.values()); } } @include test.describe('md-comp-menu.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-menu.values()); } } @include test.describe('md-comp-navigation-bar.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-navigation-bar.values()); } } @include test.describe('md-comp-navigation-drawer.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-navigation-drawer.values()); } } @include test.describe('md-comp-navigation-rail.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-navigation-rail.values()); } } @include test.describe('md-comp-outlined-autocomplete.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-autocomplete.values()); } } @include test.describe('md-comp-outlined-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-button.values()); } } @include test.describe('md-comp-outlined-card.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-card.values()); } } @include test.describe('md-comp-outlined-icon-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-icon-button.values()); } } @include test.describe('md-comp-outlined-menu-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-menu-button.values()); } } @include test.describe('md-comp-outlined-segmented-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-segmented-button.values()); } } @include test.describe('md-comp-outlined-select.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-select.values()); } } @include test.describe('md-comp-outlined-text-field.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-outlined-text-field.values()); } } @include test.describe('md-comp-plain-tooltip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-plain-tooltip.values()); } } @include test.describe('md-comp-primary-navigation-tab.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-primary-navigation-tab.values()); } } @include test.describe('md-comp-radio-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-radio-button.values()); } } @include test.describe('md-comp-rich-tooltip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-rich-tooltip.values()); } } @include test.describe('md-comp-scrim.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-scrim.values()); } } @include test.describe('md-comp-search-bar.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-search-bar.values()); } } @include test.describe('md-comp-search-view.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-search-view.values()); } } @include test.describe('md-comp-secondary-navigation-tab.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-secondary-navigation-tab.values()); } } @include test.describe('md-comp-sheet-bottom.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-sheet-bottom.values()); } } @include test.describe('md-comp-sheet-floating.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-sheet-floating.values()); } } @include test.describe('md-comp-sheet-side.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-sheet-side.values()); } } @include test.describe('md-comp-slider.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-slider.values()); } } @include test.describe('md-comp-snackbar.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-snackbar.values()); } } @include test.describe('md-comp-standard-menu-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-standard-menu-button.values()); } } @include test.describe('md-comp-suggestion-chip.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-suggestion-chip.values()); } } @include test.describe('md-comp-switch.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-switch.values()); } } @include test.describe('md-comp-text-button.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-text-button.values()); } } @include test.describe('md-comp-time-input.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-time-input.values()); } } @include test.describe('md-comp-time-picker.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-time-picker.values()); } } @include test.describe('md-comp-top-app-bar-large.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-top-app-bar-large.values()); } } @include test.describe('md-comp-top-app-bar-medium.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-top-app-bar-medium.values()); } } @include test.describe('md-comp-top-app-bar-small.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-top-app-bar-small.values()); } } @include test.describe('md-comp-top-app-bar-small-centered.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-comp-top-app-bar-small-centered.values()); } } @include test.describe('md-ref-palette.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-ref-palette.values()); } } @include test.describe('md-ref-typeface.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-ref-typeface.values()); } } @include test.describe('md-sys-color.values-dark') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-color.values-dark()); } } @include test.describe('md-sys-color.values-light') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-color.values-light()); } } @include test.describe('md-sys-elevation.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-elevation.values()); } } @include test.describe('md-sys-motion.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-motion.values()); } } @include test.describe('md-sys-shape.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-shape.values()); } } @include test.describe('md-sys-state.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-state.values()); } } @include test.describe('md-sys-typescale.values') { @include test.it('should return non-empty map') { @include test.assert-true(md-sys-typescale.values()); } } } ================================================ FILE: tokens/versions/v30_0/sass/_index.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/index.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @forward 'md-comp-app-bar' as md-comp-app-bar--*; @forward 'md-comp-app-bar-large' as md-comp-app-bar-large--*; @forward 'md-comp-app-bar-large-flexible' as md-comp-app-bar-large-flexible--*; @forward 'md-comp-app-bar-medium' as md-comp-app-bar-medium--*; @forward 'md-comp-app-bar-medium-flexible' as md-comp-app-bar-medium-flexible--*; @forward 'md-comp-app-bar-small' as md-comp-app-bar-small--*; @forward 'md-comp-assist-chip' as md-comp-assist-chip--*; @forward 'md-comp-badge' as md-comp-badge--*; @forward 'md-comp-banner' as md-comp-banner--*; @forward 'md-comp-banners' as md-comp-banners--*; @forward 'md-comp-banners-basic' as md-comp-banners-basic--*; @forward 'md-comp-banners-rich' as md-comp-banners-rich--*; @forward 'md-comp-bottom-app-bar' as md-comp-bottom-app-bar--*; @forward 'md-comp-button' as md-comp-button--*; @forward 'md-comp-button-elevated' as md-comp-button-elevated--*; @forward 'md-comp-button-filled' as md-comp-button-filled--*; @forward 'md-comp-button-group-connected-large' as md-comp-button-group-connected-large--*; @forward 'md-comp-button-group-connected-medium' as md-comp-button-group-connected-medium--*; @forward 'md-comp-button-group-connected-small' as md-comp-button-group-connected-small--*; @forward 'md-comp-button-group-connected-xlarge' as md-comp-button-group-connected-xlarge--*; @forward 'md-comp-button-group-connected-xsmall' as md-comp-button-group-connected-xsmall--*; @forward 'md-comp-button-group-standard-large' as md-comp-button-group-standard-large--*; @forward 'md-comp-button-group-standard-medium' as md-comp-button-group-standard-medium--*; @forward 'md-comp-button-group-standard-small' as md-comp-button-group-standard-small--*; @forward 'md-comp-button-group-standard-xlarge' as md-comp-button-group-standard-xlarge--*; @forward 'md-comp-button-group-standard-xsmall' as md-comp-button-group-standard-xsmall--*; @forward 'md-comp-button-large' as md-comp-button-large--*; @forward 'md-comp-button-medium' as md-comp-button-medium--*; @forward 'md-comp-button-outlined' as md-comp-button-outlined--*; @forward 'md-comp-button-small' as md-comp-button-small--*; @forward 'md-comp-button-text' as md-comp-button-text--*; @forward 'md-comp-button-tonal' as md-comp-button-tonal--*; @forward 'md-comp-button-xlarge' as md-comp-button-xlarge--*; @forward 'md-comp-button-xsmall' as md-comp-button-xsmall--*; @forward 'md-comp-carousel-item' as md-comp-carousel-item--*; @forward 'md-comp-checkbox' as md-comp-checkbox--*; @forward 'md-comp-circular-progress-indicator' as md-comp-circular-progress-indicator--*; @forward 'md-comp-data-table' as md-comp-data-table--*; @forward 'md-comp-date-input-modal' as md-comp-date-input-modal--*; @forward 'md-comp-date-picker-docked' as md-comp-date-picker-docked--*; @forward 'md-comp-date-picker-modal' as md-comp-date-picker-modal--*; @forward 'md-comp-dialog' as md-comp-dialog--*; @forward 'md-comp-divider' as md-comp-divider--*; @forward 'md-comp-drag-handle' as md-comp-drag-handle--*; @forward 'md-comp-elevated-button' as md-comp-elevated-button--*; @forward 'md-comp-elevated-card' as md-comp-elevated-card--*; @forward 'md-comp-extended-fab' as md-comp-extended-fab--*; @forward 'md-comp-extended-fab-branded' as md-comp-extended-fab-branded--*; @forward 'md-comp-extended-fab-large' as md-comp-extended-fab-large--*; @forward 'md-comp-extended-fab-medium' as md-comp-extended-fab-medium--*; @forward 'md-comp-extended-fab-primary' as md-comp-extended-fab-primary--*; @forward 'md-comp-extended-fab-primary-container' as md-comp-extended-fab-primary-container--*; @forward 'md-comp-extended-fab-secondary' as md-comp-extended-fab-secondary--*; @forward 'md-comp-extended-fab-secondary-container' as md-comp-extended-fab-secondary-container--*; @forward 'md-comp-extended-fab-small' as md-comp-extended-fab-small--*; @forward 'md-comp-extended-fab-surface' as md-comp-extended-fab-surface--*; @forward 'md-comp-extended-fab-tertiary' as md-comp-extended-fab-tertiary--*; @forward 'md-comp-extended-fab-tertiary-container' as md-comp-extended-fab-tertiary-container--*; @forward 'md-comp-fab' as md-comp-fab--*; @forward 'md-comp-fab-branded' as md-comp-fab-branded--*; @forward 'md-comp-fab-branded-large' as md-comp-fab-branded-large--*; @forward 'md-comp-fab-large' as md-comp-fab-large--*; @forward 'md-comp-fab-medium' as md-comp-fab-medium--*; @forward 'md-comp-fab-menu' as md-comp-fab-menu--*; @forward 'md-comp-fab-menu-primary-close-button' as md-comp-fab-menu-primary-close-button--*; @forward 'md-comp-fab-menu-primary-container' as md-comp-fab-menu-primary-container--*; @forward 'md-comp-fab-menu-secondary-close-button' as md-comp-fab-menu-secondary-close-button--*; @forward 'md-comp-fab-menu-secondary-container' as md-comp-fab-menu-secondary-container--*; @forward 'md-comp-fab-menu-tertiary-close-button' as md-comp-fab-menu-tertiary-close-button--*; @forward 'md-comp-fab-menu-tertiary-container' as md-comp-fab-menu-tertiary-container--*; @forward 'md-comp-fab-primary' as md-comp-fab-primary--*; @forward 'md-comp-fab-primary-container' as md-comp-fab-primary-container--*; @forward 'md-comp-fab-primary-large' as md-comp-fab-primary-large--*; @forward 'md-comp-fab-primary-small' as md-comp-fab-primary-small--*; @forward 'md-comp-fab-secondary' as md-comp-fab-secondary--*; @forward 'md-comp-fab-secondary-container' as md-comp-fab-secondary-container--*; @forward 'md-comp-fab-secondary-large' as md-comp-fab-secondary-large--*; @forward 'md-comp-fab-secondary-small' as md-comp-fab-secondary-small--*; @forward 'md-comp-fab-small' as md-comp-fab-small--*; @forward 'md-comp-fab-surface' as md-comp-fab-surface--*; @forward 'md-comp-fab-surface-large' as md-comp-fab-surface-large--*; @forward 'md-comp-fab-tertiary' as md-comp-fab-tertiary--*; @forward 'md-comp-fab-tertiary-container' as md-comp-fab-tertiary-container--*; @forward 'md-comp-fab-tertiary-large' as md-comp-fab-tertiary-large--*; @forward 'md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small--*; @forward 'md-comp-filled-autocomplete' as md-comp-filled-autocomplete--*; @forward 'md-comp-filled-button' as md-comp-filled-button--*; @forward 'md-comp-filled-card' as md-comp-filled-card--*; @forward 'md-comp-filled-icon-button' as md-comp-filled-icon-button--*; @forward 'md-comp-filled-menu-button' as md-comp-filled-menu-button--*; @forward 'md-comp-filled-select' as md-comp-filled-select--*; @forward 'md-comp-filled-text-field' as md-comp-filled-text-field--*; @forward 'md-comp-filled-tonal-button' as md-comp-filled-tonal-button--*; @forward 'md-comp-filled-tonal-icon-button' as md-comp-filled-tonal-icon-button--*; @forward 'md-comp-filter-chip' as md-comp-filter-chip--*; @forward 'md-comp-full-screen-dialog' as md-comp-full-screen-dialog--*; @forward 'md-comp-icon-button' as md-comp-icon-button--*; @forward 'md-comp-icon-button-filled' as md-comp-icon-button-filled--*; @forward 'md-comp-icon-button-large' as md-comp-icon-button-large--*; @forward 'md-comp-icon-button-medium' as md-comp-icon-button-medium--*; @forward 'md-comp-icon-button-outlined' as md-comp-icon-button-outlined--*; @forward 'md-comp-icon-button-small' as md-comp-icon-button-small--*; @forward 'md-comp-icon-button-standard' as md-comp-icon-button-standard--*; @forward 'md-comp-icon-button-tonal' as md-comp-icon-button-tonal--*; @forward 'md-comp-icon-button-xlarge' as md-comp-icon-button-xlarge--*; @forward 'md-comp-icon-button-xsmall' as md-comp-icon-button-xsmall--*; @forward 'md-comp-input-chip' as md-comp-input-chip--*; @forward 'md-comp-linear-progress-indicator' as md-comp-linear-progress-indicator--*; @forward 'md-comp-list' as md-comp-list--*; @forward 'md-comp-list-expand' as md-comp-list-expand--*; @forward 'md-comp-list-reorder' as md-comp-list-reorder--*; @forward 'md-comp-list-reveal' as md-comp-list-reveal--*; @forward 'md-comp-loading-indicator' as md-comp-loading-indicator--*; @forward 'md-comp-menu' as md-comp-menu--*; @forward 'md-comp-menus' as md-comp-menus--*; @forward 'md-comp-menus-standard' as md-comp-menus-standard--*; @forward 'md-comp-menus-vibrant' as md-comp-menus-vibrant--*; @forward 'md-comp-nav-bar' as md-comp-nav-bar--*; @forward 'md-comp-nav-bar-item-horizontal' as md-comp-nav-bar-item-horizontal--*; @forward 'md-comp-nav-bar-item-vertical' as md-comp-nav-bar-item-vertical--*; @forward 'md-comp-nav-rail' as md-comp-nav-rail--*; @forward 'md-comp-nav-rail-collapsed' as md-comp-nav-rail-collapsed--*; @forward 'md-comp-nav-rail-expanded' as md-comp-nav-rail-expanded--*; @forward 'md-comp-nav-rail-item' as md-comp-nav-rail-item--*; @forward 'md-comp-nav-rail-item-horizontal' as md-comp-nav-rail-item-horizontal--*; @forward 'md-comp-nav-rail-item-vertical' as md-comp-nav-rail-item-vertical--*; @forward 'md-comp-navigation-bar' as md-comp-navigation-bar--*; @forward 'md-comp-navigation-drawer' as md-comp-navigation-drawer--*; @forward 'md-comp-navigation-rail' as md-comp-navigation-rail--*; @forward 'md-comp-outlined-autocomplete' as md-comp-outlined-autocomplete--*; @forward 'md-comp-outlined-button' as md-comp-outlined-button--*; @forward 'md-comp-outlined-card' as md-comp-outlined-card--*; @forward 'md-comp-outlined-menu-button' as md-comp-outlined-menu-button--*; @forward 'md-comp-outlined-segmented-button' as md-comp-outlined-segmented-button--*; @forward 'md-comp-outlined-select' as md-comp-outlined-select--*; @forward 'md-comp-outlined-text-field' as md-comp-outlined-text-field--*; @forward 'md-comp-plain-tooltip' as md-comp-plain-tooltip--*; @forward 'md-comp-primary-navigation-tab' as md-comp-primary-navigation-tab--*; @forward 'md-comp-progress-indicator' as md-comp-progress-indicator--*; @forward 'md-comp-progress-indicator-circular' as md-comp-progress-indicator-circular--*; @forward 'md-comp-progress-indicator-linear' as md-comp-progress-indicator-linear--*; @forward 'md-comp-radio-button' as md-comp-radio-button--*; @forward 'md-comp-rich-tooltip' as md-comp-rich-tooltip--*; @forward 'md-comp-scrim' as md-comp-scrim--*; @forward 'md-comp-search-bar' as md-comp-search-bar--*; @forward 'md-comp-search-view' as md-comp-search-view--*; @forward 'md-comp-secondary-navigation-tab' as md-comp-secondary-navigation-tab--*; @forward 'md-comp-sheet-bottom' as md-comp-sheet-bottom--*; @forward 'md-comp-sheet-floating' as md-comp-sheet-floating--*; @forward 'md-comp-sheet-side' as md-comp-sheet-side--*; @forward 'md-comp-slider' as md-comp-slider--*; @forward 'md-comp-slider-large' as md-comp-slider-large--*; @forward 'md-comp-slider-medium' as md-comp-slider-medium--*; @forward 'md-comp-slider-small' as md-comp-slider-small--*; @forward 'md-comp-slider-xlarge' as md-comp-slider-xlarge--*; @forward 'md-comp-slider-xsmall' as md-comp-slider-xsmall--*; @forward 'md-comp-snackbar' as md-comp-snackbar--*; @forward 'md-comp-split-button-large' as md-comp-split-button-large--*; @forward 'md-comp-split-button-medium' as md-comp-split-button-medium--*; @forward 'md-comp-split-button-small' as md-comp-split-button-small--*; @forward 'md-comp-split-button-xlarge' as md-comp-split-button-xlarge--*; @forward 'md-comp-split-button-xsmall' as md-comp-split-button-xsmall--*; @forward 'md-comp-standard-menu-button' as md-comp-standard-menu-button--*; @forward 'md-comp-suggestion-chip' as md-comp-suggestion-chip--*; @forward 'md-comp-switch' as md-comp-switch--*; @forward 'md-comp-text-button' as md-comp-text-button--*; @forward 'md-comp-time-input' as md-comp-time-input--*; @forward 'md-comp-time-picker' as md-comp-time-picker--*; @forward 'md-comp-toolbar-docked' as md-comp-toolbar-docked--*; @forward 'md-comp-toolbar-floating' as md-comp-toolbar-floating--*; @forward 'md-comp-toolbar-floating-fab' as md-comp-toolbar-floating-fab--*; @forward 'md-comp-toolbar-standard' as md-comp-toolbar-standard--*; @forward 'md-comp-toolbar-vibrant' as md-comp-toolbar-vibrant--*; @forward 'md-comp-top-app-bar-large' as md-comp-top-app-bar-large--*; @forward 'md-comp-top-app-bar-medium' as md-comp-top-app-bar-medium--*; @forward 'md-comp-top-app-bar-small' as md-comp-top-app-bar-small--*; @forward 'md-comp-top-app-bar-small-centered' as md-comp-top-app-bar-small-centered--*; @forward 'md-ref-palette' as md-ref-palette--*; @forward 'md-ref-typeface' as md-ref-typeface--*; @forward 'md-sys-color' as md-sys-color--*; @forward 'md-sys-color__dark' as md-sys-color--dark--*; @forward 'md-sys-color__dark__high-contrast' as md-sys-color--dark--high-contrast--*; @forward 'md-sys-color__dark__medium-contrast' as md-sys-color--dark--medium-contrast--*; @forward 'md-sys-color__high-contrast' as md-sys-color--high-contrast--*; @forward 'md-sys-color__medium-contrast' as md-sys-color--medium-contrast--*; @forward 'md-sys-elevation' as md-sys-elevation--*; @forward 'md-sys-motion' as md-sys-motion--*; @forward 'md-sys-shape' as md-sys-shape--*; @forward 'md-sys-state' as md-sys-state--*; @forward 'md-sys-state-focus-indicator' as md-sys-state-focus-indicator--*; @forward 'md-sys-typescale' as md-sys-typescale--*; @forward 'md-sys-typescale-emphasized' as md-sys-typescale-emphasized--*; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-app-bar-large-flexible.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-typescale'; /// md.comp.app-bar.large-flexible.container.height $container-height: 120px; /// md.comp.app-bar.large-flexible.with-subtitle.container.height $with-subtitle-container-height: 152px; /// md.comp.app-bar.large-flexible.subtitle.font @mixin subtitle-font { @include md-sys-typescale.title-medium; } /// md.comp.app-bar.large-flexible.title.font @mixin title-font { @include md-sys-typescale.display-small; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-app-bar-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-typescale'; /// md.comp.app-bar.large.container.height $container-height: 152px; /// md.comp.app-bar.large.icon.size /// /// @deprecated Please use icon size token in the common app bar set $icon-size: 24px; /// md.comp.app-bar.large.subtitle.font /// /// @deprecated No subtitle support on the legacy app bar. Please use the new, flexible variant instead. @mixin subtitle-font { @include md-sys-typescale.title-medium; } /// md.comp.app-bar.large.title.font @mixin title-font { @include md-sys-typescale.headline-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-app-bar-medium-flexible.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-typescale'; /// md.comp.app-bar.medium-flexible.container.height $container-height: 112px; /// md.comp.app-bar.medium-flexible.with-subtitle.container.height $with-subtitle-container-height: 136px; /// md.comp.app-bar.medium-flexible.subtitle.font @mixin subtitle-font { @include md-sys-typescale.label-large; } /// md.comp.app-bar.medium-flexible.title.font @mixin title-font { @include md-sys-typescale.headline-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-app-bar-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-typescale'; /// md.comp.app-bar.medium.container.height $container-height: 112px; /// md.comp.app-bar.medium.icon.size /// /// @deprecated Please use icon size token in the common app bar set $icon-size: 24px; /// md.comp.app-bar.medium.subtitle.font /// /// @deprecated No subtitle support on the legacy app bar. Please use the new, flexible variant instead. @mixin subtitle-font { @include md-sys-typescale.label-large; } /// md.comp.app-bar.medium.title.font @mixin title-font { @include md-sys-typescale.headline-small; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-app-bar-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.app-bar.small.container.height $container-height: 64px; /// md.comp.app-bar.small.icon.size /// /// @deprecated Please use icon size token in the common app bar set $icon-size: 24px; /// md.comp.app-bar.small.search.container.height $search-container-height: 56px; /// md.comp.app-bar.small.search.container.shape $search-container-shape: md-sys-shape.$corner-full; /// md.comp.app-bar.small.search.label-text.font @mixin search-label-text-font { @include md-sys-typescale.body-large; } /// md.comp.app-bar.small.subtitle.font @mixin subtitle-font { @include md-sys-typescale.label-medium; } /// md.comp.app-bar.small.title.font @mixin title-font { @include md-sys-typescale.title-large; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-app-bar.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; /// md.comp.app-bar.avatar.size (Size) $avatar-size: 32px; /// md.comp.app-bar.icon-button-space (Spacing) $icon-button-space: 0px; /// md.comp.app-bar.icon.size (Size) $icon-size: 24px; /// md.comp.app-bar.leading-space (Spacing) $leading-space: 4px; /// md.comp.app-bar.search.leading-space (Spacing) $search-leading-space: 8px; /// md.comp.app-bar.search.trailing-space (Spacing) $search-trailing-space: 8px; /// md.comp.app-bar.trailing-space (Spacing) $trailing-space: 4px; /// md.comp.app-bar.container.color (Color) $container-color: md-sys-color.$surface; /// md.comp.app-bar.container.elevation (Color) $container-elevation: md-sys-elevation.$level0; /// md.comp.app-bar.container.shape (Shape) $container-shape: md-sys-shape.$corner-none; /// md.comp.app-bar.leading-icon.color (Color) $leading-icon-color: md-sys-color.$on-surface; /// md.comp.app-bar.on-scroll.container.color (Color) $on-scroll-container-color: md-sys-color.$surface-container; /// md.comp.app-bar.on-scroll.container.elevation (Color) $on-scroll-container-elevation: md-sys-elevation.$level2; /// md.comp.app-bar.search.container.color (Color) $search-container-color: md-sys-color.$surface-container; /// md.comp.app-bar.search.label.color (Color) $search-label-color: md-sys-color.$on-surface-variant; /// md.comp.app-bar.search.on-scroll.container.color (Color) $search-on-scroll-container-color: md-sys-color.$surface-container-highest; /// md.comp.app-bar.subtitle.color (Color) $subtitle-color: md-sys-color.$on-surface-variant; /// md.comp.app-bar.title.color (Color) $title-color: md-sys-color.$on-surface; /// md.comp.app-bar.trailing-icon.color (Color) $trailing-icon-color: md-sys-color.$on-surface-variant; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-assist-chip.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.assist-chip.container.height (Enabled / Container) $container-height: 32px; /// md.comp.assist-chip.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.assist-chip.elevated.disabled.container.opacity (Disabled / Container) $elevated-disabled-container-opacity: 0.12; /// md.comp.assist-chip.flat.disabled.outline.opacity (Disabled / Container) $flat-disabled-outline-opacity: 0.12; /// md.comp.assist-chip.flat.outline.width (Enabled / Container) $flat-outline-width: 1px; /// md.comp.assist-chip.with-icon.disabled.icon.opacity (Disabled / Icon) $with-icon-disabled-icon-opacity: 0.38; /// md.comp.assist-chip.with-icon.icon.size (Enabled / Icon) $with-icon-icon-size: 18px; /// md.comp.assist-chip.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-small; /// md.comp.assist-chip.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.assist-chip.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.assist-chip.dragged.container.elevation (Dragged / Container) $dragged-container-elevation: md-sys-elevation.$level4; /// md.comp.assist-chip.dragged.label-text.color (Dragged / Label text) $dragged-label-text-color: md-sys-color.$on-surface; /// md.comp.assist-chip.dragged.state-layer.color (Dragged / State layer) $dragged-state-layer-color: md-sys-color.$on-surface; /// md.comp.assist-chip.dragged.state-layer.opacity (Dragged / State layer) $dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.assist-chip.elevated.container.color (Enabled / Container) $elevated-container-color: md-sys-color.$surface-container-low; /// md.comp.assist-chip.elevated.container.elevation (Enabled / Container) $elevated-container-elevation: md-sys-elevation.$level1; /// md.comp.assist-chip.elevated.container.shadow-color (Enabled / Container) $elevated-container-shadow-color: md-sys-color.$shadow; /// md.comp.assist-chip.elevated.disabled.container.color (Disabled / Container) $elevated-disabled-container-color: md-sys-color.$on-surface; /// md.comp.assist-chip.elevated.disabled.container.elevation (Disabled / Container) $elevated-disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.assist-chip.elevated.focus.container.elevation (Focused / Container) $elevated-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.assist-chip.elevated.hover.container.elevation (Hovered / Container) $elevated-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.assist-chip.elevated.pressed.container.elevation (Pressed (ripple) / Container) $elevated-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.assist-chip.flat.container.elevation (Enabled / Container) $flat-container-elevation: md-sys-elevation.$level0; /// md.comp.assist-chip.flat.disabled.outline.color (Disabled / Container) $flat-disabled-outline-color: md-sys-color.$on-surface; /// md.comp.assist-chip.flat.focus.outline.color (Focused / Container) $flat-focus-outline-color: md-sys-color.$on-surface; /// md.comp.assist-chip.flat.outline.color (Enabled / Container) $flat-outline-color: md-sys-color.$outline-variant; /// md.comp.assist-chip.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.assist-chip.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.assist-chip.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.assist-chip.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$on-surface; /// md.comp.assist-chip.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.assist-chip.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.assist-chip.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$on-surface; /// md.comp.assist-chip.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.assist-chip.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.assist-chip.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$on-surface; /// md.comp.assist-chip.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.assist-chip.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.assist-chip.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.assist-chip.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.assist-chip.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.assist-chip.pressed.label-text.color (Pressed (ripple) / Label text) $pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.assist-chip.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.assist-chip.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.assist-chip.with-icon.disabled.icon.color (Disabled / Icon) $with-icon-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.assist-chip.with-icon.dragged.icon.color (Dragged / Icon) $with-icon-dragged-icon-color: md-sys-color.$primary; /// md.comp.assist-chip.with-icon.focus.icon.color (Focused / Icon) $with-icon-focus-icon-color: md-sys-color.$primary; /// md.comp.assist-chip.with-icon.hover.icon.color (Hovered / Icon) $with-icon-hover-icon-color: md-sys-color.$primary; /// md.comp.assist-chip.with-icon.icon.color (Enabled / Icon) $with-icon-icon-color: md-sys-color.$primary; /// md.comp.assist-chip.with-icon.pressed.icon.color (Pressed (ripple) / Icon) $with-icon-pressed-icon-color: md-sys-color.$primary; /// md.comp.assist-chip.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-badge.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.badge.large.size (Enabled / Container) $large-size: 16px; /// md.comp.badge.size (Enabled / Container) $size: 6px; /// md.comp.badge.color (Enabled / Container) $color: md-sys-color.$error; /// md.comp.badge.large.color (Enabled / Container) $large-color: md-sys-color.$error; /// md.comp.badge.large.label-text.color (Enabled / Label text) $large-label-text-color: md-sys-color.$on-error; /// md.comp.badge.large.label-text.font (Enabled / Label text) $large-label-text-font: md-sys-typescale.$label-small-font; /// md.comp.badge.large.label-text.line-height (Enabled / Label text) $large-label-text-line-height: md-sys-typescale.$label-small-line-height; /// md.comp.badge.large.label-text.size (Enabled / Label text) $large-label-text-size: md-sys-typescale.$label-small-size; /// md.comp.badge.large.label-text.tracking (Enabled / Label text) $large-label-text-tracking: md-sys-typescale.$label-small-tracking; /// md.comp.badge.large.label-text.weight (Enabled / Label text) $large-label-text-weight: md-sys-typescale.$label-small-weight; /// md.comp.badge.large.shape (Enabled / Container) $large-shape: md-sys-shape.$corner-full; /// md.comp.badge.shape (Enabled / Container) $shape: md-sys-shape.$corner-full; /// md.comp.badge.large.label-text.type (Enabled / Label text) @mixin large-label-text-type { font-family: $large-label-text-font; font-size: $large-label-text-size; font-weight: $large-label-text-weight; letter-spacing: $large-label-text-tracking; line-height: $large-label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-banner.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.banner.desktop.with-single-line.container.height (Enabled / Container) $desktop-with-single-line-container-height: 52px; /// md.comp.banner.desktop.with-three-lines.container.height (Enabled / Container) $desktop-with-three-lines-container-height: 90px; /// md.comp.banner.desktop.with-two-lines.with-image.container.height (Enabled / Container) $desktop-with-two-lines-with-image-container-height: 72px; /// md.comp.banner.divider.height (Enabled / Divider) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $divider-height: 1px; /// md.comp.banner.mobile.with-single-line.container.height (Enabled / Container) $mobile-with-single-line-container-height: 54px; /// md.comp.banner.mobile.with-two-lines.container.height (Enabled / Container) $mobile-with-two-lines-container-height: 112px; /// md.comp.banner.mobile.with-two-lines.with-image.container.height (Enabled / Container) $mobile-with-two-lines-with-image-container-height: 120px; /// md.comp.banner.with-image.image.size (Enabled / Supporting text) $with-image-image-size: 40px; /// md.comp.banner.action.focus.label-text.color (Focused / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-focus-label-text-color: md-sys-color.$primary; /// md.comp.banner.action.focus.state-layer.color (Focused / State layer) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-focus-state-layer-color: md-sys-color.$primary; /// md.comp.banner.action.focus.state-layer.opacity (Focused / State layer) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.banner.action.hover.label-text.color (Hovered / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-hover-label-text-color: md-sys-color.$primary; /// md.comp.banner.action.hover.state-layer.color (Hovered / State layer) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-hover-state-layer-color: md-sys-color.$primary; /// md.comp.banner.action.hover.state-layer.opacity (Hovered / State layer) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.banner.action.label-text.color (Enabled / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-label-text-color: md-sys-color.$primary; /// md.comp.banner.action.label-text.font (Enabled / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.banner.action.label-text.line-height (Enabled / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.banner.action.label-text.size (Enabled / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.banner.action.label-text.tracking (Enabled / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.banner.action.label-text.weight (Enabled / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.banner.action.pressed.label-text.color (Pressed (ripple) / Label text) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-pressed-label-text-color: md-sys-color.$primary; /// md.comp.banner.action.pressed.state-layer.color (Pressed (ripple) / State layer) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.banner.action.pressed.state-layer.opacity (Pressed (ripple) / State layer) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.banner.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-low; /// md.comp.banner.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level1; /// md.comp.banner.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.banner.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.banner.divider.color (Enabled / Divider) /// /// @deprecated Use standalone components tokens instead of embedded divider and button components. $divider-color: md-sys-color.$surface-variant; /// md.comp.banner.supporting-text.color (Enabled / Supporting text) $supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.banner.supporting-text.font (Enabled / Supporting text) $supporting-text-font: md-sys-typescale.$body-medium-font; /// md.comp.banner.supporting-text.line-height (Enabled / Supporting text) $supporting-text-line-height: md-sys-typescale.$body-medium-line-height; /// md.comp.banner.supporting-text.size (Enabled / Supporting text) $supporting-text-size: md-sys-typescale.$body-medium-size; /// md.comp.banner.supporting-text.tracking (Enabled / Supporting text) $supporting-text-tracking: md-sys-typescale.$body-medium-tracking; /// md.comp.banner.supporting-text.weight (Enabled / Supporting text) $supporting-text-weight: md-sys-typescale.$body-medium-weight; /// md.comp.banner.with-image.image.shape (Enabled / Supporting text) $with-image-image-shape: md-sys-shape.$corner-full; /// md.comp.banner.action.label-text.type (Enabled / Label text) /// /// @deprecated Use standalone components tokens instead of embedded button components. @mixin action-label-text-type { font-family: $action-label-text-font; font-size: $action-label-text-size; font-weight: $action-label-text-weight; letter-spacing: $action-label-text-tracking; line-height: $action-label-text-line-height; } /// md.comp.banner.supporting-text.type (Enabled / Supporting text) @mixin supporting-text-type { font-family: $supporting-text-font; font-size: $supporting-text-size; font-weight: $supporting-text-weight; letter-spacing: $supporting-text-tracking; line-height: $supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-banners-basic.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.banners.basic.actions-close-button-space (Body text) $actions-close-button-space: 8px; /// md.comp.banners.basic.actions.between-space (Button actions) $actions-between-space: 8px; /// md.comp.banners.basic.actions.bottom-space (Button actions) $actions-bottom-space: 0px; /// md.comp.banners.basic.actions.leading-space (Button actions) $actions-leading-space: 8px; /// md.comp.banners.basic.actions.top-space (Button actions) $actions-top-space: 0px; /// md.comp.banners.basic.actions.trailing-space (Button actions) $actions-trailing-space: 8px; /// md.comp.banners.basic.body-text.bottom-space (Body text) $body-text-bottom-space: 14px; /// md.comp.banners.basic.body-text.leading-space (Body text) $body-text-leading-space: 0px; /// md.comp.banners.basic.body-text.top-space (Body text) $body-text-top-space: 14px; /// md.comp.banners.basic.body-text.trailing-space (Body text) $body-text-trailing-space: 48px; /// md.comp.banners.basic.bottom-space (Container) $bottom-space: 4px; /// md.comp.banners.basic.centered.body-text.trailing-space (Body text) $centered-body-text-trailing-space: 0px; /// md.comp.banners.basic.height (Container) $height: 56px; /// md.comp.banners.basic.icon.container.size (Leading icon) $icon-container-size: 48px; /// md.comp.banners.basic.icon.size (Leading icon) $icon-size: 24px; /// md.comp.banners.basic.leading-space (Container) $leading-space: 4px; /// md.comp.banners.basic.mobile.actions-close-button-space (Body text) $mobile-actions-close-button-space: 4px; /// md.comp.banners.basic.mobile.actions.trailing-space (Button actions) $mobile-actions-trailing-space: 4px; /// md.comp.banners.basic.mobile.height (Container) $mobile-height: 112px; /// md.comp.banners.basic.mobile.top-space (Container) $mobile-top-space: 8px; /// md.comp.banners.basic.round.no-icon.body-text.leading-space (Body text) $round-no-icon-body-text-leading-space: 16px; /// md.comp.banners.basic.square.no-icon.body-text.leading-space (Body text) $square-no-icon-body-text-leading-space: 12px; /// md.comp.banners.basic.top-space (Container) $top-space: 4px; /// md.comp.banners.basic.trailing-space (Container) $trailing-space: 4px; /// md.comp.banners.basic.two-lines.body-text.bottom-space (Body text) $two-lines-body-text-bottom-space: 8px; /// md.comp.banners.basic.two-lines.body-text.top-space (Body text) $two-lines-body-text-top-space: 8px; /// md.comp.banners.basic.two-lines.container-buttons-bottom-space (Button actions) $two-lines-container-buttons-bottom-space: 4px; /// md.comp.banners.basic.two-lines.container-buttons-top-space (Button actions) $two-lines-container-buttons-top-space: 4px; /// md.comp.banners.basic.two-lines.height (Container) $two-lines-height: 64px; /// md.comp.banners.basic.shape.round (Container) $shape-round: md-sys-shape.$corner-extra-large; /// md.comp.banners.basic.shape.square (Container) $shape-square: md-sys-shape.$corner-none; /// md.comp.banners.basic.body-text.type (Body text) @mixin body-text-type { @include md-sys-typescale.body-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-banners-rich.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; @use 'md-sys-typescale'; @use 'md-sys-typescale-emphasized'; /// md.comp.banners.rich.actions.between-space (Button action) $actions-between-space: 8px; /// md.comp.banners.rich.actions.bottom-space (Button action) $actions-bottom-space: 12px; /// md.comp.banners.rich.actions.leading-space (Button action) $actions-leading-space: 12px; /// md.comp.banners.rich.actions.top-space (Button action) $actions-top-space: 12px; /// md.comp.banners.rich.actions.trailing-space (Button action) $actions-trailing-space: 12px; /// md.comp.banners.rich.body-text.bottom-space (Body text) $body-text-bottom-space: 0px; /// md.comp.banners.rich.body-text.leading-space (Body text) $body-text-leading-space: 0px; /// md.comp.banners.rich.body-text.text-actions-space (Body text) $body-text-text-actions-space: 8px; /// md.comp.banners.rich.body-text.top-space (Body text) $body-text-top-space: 0px; /// md.comp.banners.rich.body-text.trailing-space (Body text) $body-text-trailing-space: 48px; /// md.comp.banners.rich.bottom-space (Container) $bottom-space: 12px; /// md.comp.banners.rich.icon-text-space (Leading element) $icon-text-space: 4px; /// md.comp.banners.rich.icon.size (Leading element) $icon-size: 24px; /// md.comp.banners.rich.image-text-space (Leading element) $image-text-space: 8px; /// md.comp.banners.rich.image.size (Leading element) $image-size: 80px; /// md.comp.banners.rich.leading-element.bottom-space (Leading element) $leading-element-bottom-space: 12px; /// md.comp.banners.rich.leading-element.leading-space (Leading element) $leading-element-leading-space: 4px; /// md.comp.banners.rich.leading-element.top-space (Leading element) $leading-element-top-space: 12px; /// md.comp.banners.rich.leading-element.trailing-space (Leading element) $leading-element-trailing-space: 4px; /// md.comp.banners.rich.leading-space (Container) $leading-space: 12px; /// md.comp.banners.rich.title-text.bottom-space (Title text) $title-text-bottom-space: 14px; /// md.comp.banners.rich.title-text.height (Title text) $title-text-height: 48px; /// md.comp.banners.rich.title-text.leading-space (Title text) $title-text-leading-space: 0px; /// md.comp.banners.rich.title-text.top-space (Title text) $title-text-top-space: 14px; /// md.comp.banners.rich.title-text.trailing-space (Title text) $title-text-trailing-space: 0px; /// md.comp.banners.rich.top-space (Container) $top-space: 12px; /// md.comp.banners.rich.trailing-space (Container) $trailing-space: 12px; /// md.comp.banners.rich.with-image-leading-space (Container) $with-image-leading-space: 20px; /// md.comp.banners.rich.image.shape (Leading element) $image-shape: md-sys-shape.$corner-none; /// md.comp.banners.rich.shape (Container) $shape: md-sys-shape.$corner-extra-large; /// md.comp.banners.rich.body-text.type (Body text) @mixin body-text-type { @include md-sys-typescale.body-medium; } /// md.comp.banners.rich.title-text.type (Title text) @mixin title-text-type { @include md-sys-typescale-emphasized.body-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-banners.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; /// md.comp.banners.banners.close-button.pressed.state-layer.color (Close button color) $banners-close-button-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.banners.close-button.color (Close button color) $close-button-color: md-sys-color.$primary; /// md.comp.banners.close-button.focused.state-layer.color (Close button color) $close-button-focused-state-layer-color: md-sys-color.$primary; /// md.comp.banners.close-button.hovered.state-layer.color (Close button color) $close-button-hovered-state-layer-color: md-sys-color.$primary; /// md.comp.banners.standard.body-text.color (Color - Standard) $standard-body-text-color: md-sys-color.$on-surface; /// md.comp.banners.standard.color (Color - Standard) $standard-color: md-sys-color.$surface-container; /// md.comp.banners.standard.icon.color (Color - Standard) $standard-icon-color: md-sys-color.$on-surface; /// md.comp.banners.standard.title-text.color (Color - Standard) $standard-title-text-color: md-sys-color.$on-surface; /// md.comp.banners.vibrant.body-text.color (Color -Vibrant) $vibrant-body-text-color: md-sys-color.$on-primary-container; /// md.comp.banners.vibrant.color (Color -Vibrant) $vibrant-color: md-sys-color.$primary-container; /// md.comp.banners.vibrant.icon.color (Color -Vibrant) $vibrant-icon-color: md-sys-color.$on-primary-container; /// md.comp.banners.vibrant.title-text.color (Color -Vibrant) $vibrant-title-text-color: md-sys-color.$on-primary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-bottom-app-bar.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; /// md.comp.bottom-app-bar.container.height (Enabled / Container) $container-height: 80px; /// md.comp.bottom-app-bar.with-fab.container.height (Enabled / Container) /// /// @deprecated Bottom app bar design updated to use a single height for all configurations, with vertically centered content. Please use md.comp.bottom-app-bar.container.height instead $with-fab-container-height: 72px; /// md.comp.bottom-app-bar.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container; /// md.comp.bottom-app-bar.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level2; /// md.comp.bottom-app-bar.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.bottom-app-bar.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-elevated.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.button.elevated.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.button.elevated.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.button.elevated.disabled.label-text.opacity (Disabled) $disabled-label-text-opacity: 0.38; /// md.comp.button.elevated.container.color (Enabled) $container-color: md-sys-color.$surface-container-low; /// md.comp.button.elevated.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level1; /// md.comp.button.elevated.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.button.elevated.disabled.container.color (Disabled) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.button.elevated.disabled.container.elevation (Disabled) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.button.elevated.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.button.elevated.disabled.label-text.color (Disabled) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.button.elevated.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level1; /// md.comp.button.elevated.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$primary; /// md.comp.button.elevated.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$primary; /// md.comp.button.elevated.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$primary; /// md.comp.button.elevated.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.button.elevated.hovered.container.elevation (Hovered) /// /// @deprecated No longer part of the design spec $hovered-container-elevation: md-sys-elevation.$level2; /// md.comp.button.elevated.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$primary; /// md.comp.button.elevated.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$primary; /// md.comp.button.elevated.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$primary; /// md.comp.button.elevated.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.button.elevated.icon.color (Enabled) $icon-color: md-sys-color.$primary; /// md.comp.button.elevated.label-text.color (Enabled) $label-text-color: md-sys-color.$primary; /// md.comp.button.elevated.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.button.elevated.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$primary; /// md.comp.button.elevated.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$primary; /// md.comp.button.elevated.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.button.elevated.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.button.elevated.selected.container.color (Enabled) $selected-container-color: md-sys-color.$primary; /// md.comp.button.elevated.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.focused.label-text.color (Focused) $selected-focused-label-text-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.hovered.label-text.color (Hovered) $selected-hovered-label-text-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.label-text.color (Enabled) $selected-label-text-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.pressed.label-text.color (Pressed) $selected-pressed-label-text-color: md-sys-color.$on-primary; /// md.comp.button.elevated.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.elevated.unselected.container.color (Enabled) $unselected-container-color: md-sys-color.$surface-container-low; /// md.comp.button.elevated.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.focused.label-text.color (Focused) $unselected-focused-label-text-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.hovered.label-text.color (Hovered) $unselected-hovered-label-text-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.label-text.color (Enabled) $unselected-label-text-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.pressed.label-text.color (Pressed) $unselected-pressed-label-text-color: md-sys-color.$primary; /// md.comp.button.elevated.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$primary; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-filled.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.button.filled.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.button.filled.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.button.filled.disabled.label-text.opacity (Disabled) $disabled-label-text-opacity: 0.38; /// md.comp.button.filled.container.color (Enabled) $container-color: md-sys-color.$primary; /// md.comp.button.filled.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level0; /// md.comp.button.filled.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.button.filled.disabled.container.color (Disabled) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.button.filled.disabled.container.elevation (Disabled) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.button.filled.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.button.filled.disabled.label-text.color (Disabled) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.button.filled.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level0; /// md.comp.button.filled.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary; /// md.comp.button.filled.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-primary; /// md.comp.button.filled.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.filled.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.button.filled.hovered.container.elevation (Hovered) /// /// @deprecated No longer part of the design spec $hovered-container-elevation: md-sys-elevation.$level1; /// md.comp.button.filled.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary; /// md.comp.button.filled.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-primary; /// md.comp.button.filled.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.filled.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.button.filled.icon.color (Enabled) $icon-color: md-sys-color.$on-primary; /// md.comp.button.filled.label-text.color (Enabled) $label-text-color: md-sys-color.$on-primary; /// md.comp.button.filled.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.button.filled.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary; /// md.comp.button.filled.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-primary; /// md.comp.button.filled.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.filled.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.button.filled.selected.container.color (Enabled) $selected-container-color: md-sys-color.$primary; /// md.comp.button.filled.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.focused.label-text.color (Focused) $selected-focused-label-text-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.hovered.label-text.color (Hovered) $selected-hovered-label-text-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.label-text.color (Enabled) $selected-label-text-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.pressed.label-text.color (Pressed) $selected-pressed-label-text-color: md-sys-color.$on-primary; /// md.comp.button.filled.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.filled.unselected.container.color (Enabled) $unselected-container-color: md-sys-color.$surface-container; /// md.comp.button.filled.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.focused.label-text.color (Focused) $unselected-focused-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.hovered.label-text.color (Hovered) $unselected-hovered-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.label-text.color (Enabled) $unselected-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.pressed.label-text.color (Pressed) $unselected-pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.filled.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-connected-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.button-group.connected.large.between-space $between-space: 2px; /// md.comp.button-group.connected.large.container.height $container-height: 96px; /// md.comp.button-group.connected.large.selected.inner-corner.corner-size $selected-inner-corner-corner-size: 50%; /// md.comp.button-group.connected.large.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.button-group.connected.large.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-large; /// md.comp.button-group.connected.large.pressed.inner-corner.corner-size $pressed-inner-corner-corner-size: md-sys-shape.$corner-value-medium; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-connected-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.button-group.connected.medium.between-space $between-space: 2px; /// md.comp.button-group.connected.medium.container.height $container-height: 56px; /// md.comp.button-group.connected.medium.selected.inner-corner.corner-size $selected-inner-corner-corner-size: 50%; /// md.comp.button-group.connected.medium.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.button-group.connected.medium.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-small; /// md.comp.button-group.connected.medium.pressed.inner-corner.corner-size $pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-connected-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.button-group.connected.small.between-space $between-space: 2px; /// md.comp.button-group.connected.small.container.height $container-height: 40px; /// md.comp.button-group.connected.small.selected.inner-corner.corner-size $selected-inner-corner-corner-size: 50%; /// md.comp.button-group.connected.small.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.button-group.connected.small.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-small; /// md.comp.button-group.connected.small.pressed.inner-corner.corner-size $pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-connected-xlarge.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.button-group.connected.xlarge.between-space $between-space: 2px; /// md.comp.button-group.connected.xlarge.container.height $container-height: 136px; /// md.comp.button-group.connected.xlarge.selected.inner-corner.corner-size $selected-inner-corner-corner-size: 50%; /// md.comp.button-group.connected.xlarge.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.button-group.connected.xlarge.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-large-increased; /// md.comp.button-group.connected.xlarge.pressed.inner-corner.corner-size $pressed-inner-corner-corner-size: md-sys-shape.$corner-value-large; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-connected-xsmall.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.button-group.connected.xsmall.between-space $between-space: 2px; /// md.comp.button-group.connected.xsmall.container.height $container-height: 32px; /// md.comp.button-group.connected.xsmall.selected.inner-corner.corner-size $selected-inner-corner-corner-size: 50%; /// md.comp.button-group.connected.xsmall.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.button-group.connected.xsmall.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-small; /// md.comp.button-group.connected.xsmall.pressed.inner-corner.corner-size $pressed-inner-corner-corner-size: md-sys-shape.$corner-value-extra-small; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-standard-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; /// md.comp.button-group.standard.large.between-space $between-space: 8px; /// md.comp.button-group.standard.large.container.height $container-height: 96px; /// md.comp.button-group.standard.large.pressed.item.width.multiplier (Pressed) $pressed-item-width-multiplier: 15%; /// md.comp.button-group.standard.large.pressed.item.width.motion.spring.dampening (Pressed) $pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button-group.standard.large.pressed.item.width.motion.spring.stiffness (Pressed) $pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-standard-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; /// md.comp.button-group.standard.medium.between-space $between-space: 8px; /// md.comp.button-group.standard.medium.container.height $container-height: 56px; /// md.comp.button-group.standard.medium.pressed.item.width.multiplier (Pressed) $pressed-item-width-multiplier: 15%; /// md.comp.button-group.standard.medium.pressed.item.width.motion.spring.dampening (Pressed) $pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button-group.standard.medium.pressed.item.width.motion.spring.stiffness (Pressed) $pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-standard-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; /// md.comp.button-group.standard.small.between-space $between-space: 12px; /// md.comp.button-group.standard.small.container.height $container-height: 40px; /// md.comp.button-group.standard.small.pressed.item.width.multiplier (Pressed) $pressed-item-width-multiplier: 15%; /// md.comp.button-group.standard.small.pressed.item.width.motion.spring.dampening (Pressed) $pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button-group.standard.small.pressed.item.width.motion.spring.stiffness (Pressed) $pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-standard-xlarge.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; /// md.comp.button-group.standard.xlarge.between-space $between-space: 8px; /// md.comp.button-group.standard.xlarge.container.height $container-height: 136px; /// md.comp.button-group.standard.xlarge.pressed.item.width.multiplier (Pressed) $pressed-item-width-multiplier: 15%; /// md.comp.button-group.standard.xlarge.pressed.item.width.motion.spring.dampening (Pressed) $pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button-group.standard.xlarge.pressed.item.width.motion.spring.stiffness (Pressed) $pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-group-standard-xsmall.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; /// md.comp.button-group.standard.xsmall.between-space $between-space: 18px; /// md.comp.button-group.standard.xsmall.container.height $container-height: 32px; /// md.comp.button-group.standard.xsmall.pressed.item.width.multiplier (Pressed) $pressed-item-width-multiplier: 15%; /// md.comp.button-group.standard.xsmall.pressed.item.width.motion.spring.dampening (Pressed) $pressed-item-width-motion-spring-dampening: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button-group.standard.xsmall.pressed.item.width.motion.spring.stiffness (Pressed) $pressed-item-width-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.button.large.container.height $container-height: 96px; /// md.comp.button.large.icon-label-space $icon-label-space: 12px; /// md.comp.button.large.icon.size $icon-size: 32px; /// md.comp.button.large.leading-space $leading-space: 48px; /// md.comp.button.large.outlined.outline.width $outlined-outline-width: 2px; /// md.comp.button.large.trailing-space $trailing-space: 48px; /// md.comp.button.large.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.button.large.container.shape.square $container-shape-square: md-sys-shape.$corner-extra-large; /// md.comp.button.large.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button.large.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.button.large.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-large; /// md.comp.button.large.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-extra-large; /// md.comp.button.large.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; /// md.comp.button.large.label-text @mixin label-text { @include md-sys-typescale.headline-small; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.button.medium.container.height $container-height: 56px; /// md.comp.button.medium.icon-label-space $icon-label-space: 8px; /// md.comp.button.medium.icon.size $icon-size: 24px; /// md.comp.button.medium.leading-space $leading-space: 24px; /// md.comp.button.medium.outlined.outline.width $outlined-outline-width: 1px; /// md.comp.button.medium.trailing-space $trailing-space: 24px; /// md.comp.button.medium.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.button.medium.container.shape.square $container-shape-square: md-sys-shape.$corner-large; /// md.comp.button.medium.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button.medium.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.button.medium.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-medium; /// md.comp.button.medium.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-large; /// md.comp.button.medium.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; /// md.comp.button.medium.label-text @mixin label-text { @include md-sys-typescale.title-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-outlined.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.button.outlined.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.button.outlined.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.button.outlined.disabled.label-text.opacity (Disabled) $disabled-label-text-opacity: 0.38; /// md.comp.button.outlined.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.button.outlined.disabled.label-text.color (Disabled) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.button.outlined.disabled.outline.color (Disabled) $disabled-outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.focused.outline.color (Focused) $focused-outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.button.outlined.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.hovered.outline.color (Hovered) $hovered-outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.button.outlined.icon.color (Enabled) $icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.label-text.color (Enabled) $label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.outline.color (Enabled) $outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.pressed.outline.color (Pressed) $pressed-outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.button.outlined.selected.container.color (Enabled) $selected-container-color: md-sys-color.$inverse-surface; /// md.comp.button.outlined.selected.disabled.container.color (Disabled) $selected-disabled-container-color: md-sys-color.$on-surface; /// md.comp.button.outlined.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.focused.label-text.color (Focused) $selected-focused-label-text-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.hovered.label-text.color (Hovered) $selected-hovered-label-text-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.label-text.color (Enabled) $selected-label-text-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.pressed.label-text.color (Pressed) $selected-pressed-label-text-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.button.outlined.unselected.disabled.outline.color (Disabled) $unselected-disabled-outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.focused.label-text.color (Focused) $unselected-focused-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.focused.outline.color (Focused) $unselected-focused-outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.hovered.label-text.color (Hovered) $unselected-hovered-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.hovered.outline.color (Hovered) $unselected-hovered-outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.label-text.color (Enabled) $unselected-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.pressed.label-text.color (Pressed) $unselected-pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.outlined.unselected.pressed.outline.color (Pressed) $unselected-pressed-outline-color: md-sys-color.$outline-variant; /// md.comp.button.outlined.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.button.small.container.height $container-height: 40px; /// md.comp.button.small.icon-label-space $icon-label-space: 8px; /// md.comp.button.small.icon.size $icon-size: 20px; /// md.comp.button.small.leading-space $leading-space: 16px; /// md.comp.button.small.outlined.outline.width $outlined-outline-width: 1px; /// md.comp.button.small.trailing-space $trailing-space: 16px; /// md.comp.button.small.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.button.small.container.shape.square $container-shape-square: md-sys-shape.$corner-medium; /// md.comp.button.small.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button.small.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.button.small.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-small; /// md.comp.button.small.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-medium; /// md.comp.button.small.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; /// md.comp.button.small.label-text @mixin label-text { @include md-sys-typescale.label-large; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-text.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.button.text.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.button.text.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.button.text.disabled.label-text.opacity (Disabled) $disabled-label-text-opacity: 0.38; /// md.comp.button.text.disabled.container.color (Disabled) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.button.text.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.button.text.disabled.label-text.color (Disabled) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.button.text.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$primary; /// md.comp.button.text.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$primary; /// md.comp.button.text.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$primary; /// md.comp.button.text.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.button.text.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$primary; /// md.comp.button.text.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$primary; /// md.comp.button.text.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$primary; /// md.comp.button.text.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.button.text.icon.color (Enabled) $icon-color: md-sys-color.$primary; /// md.comp.button.text.label-text.color (Enabled) $label-text-color: md-sys-color.$primary; /// md.comp.button.text.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$primary; /// md.comp.button.text.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$primary; /// md.comp.button.text.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.button.text.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-tonal.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.button.tonal.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.button.tonal.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.button.tonal.disabled.label-text.opacity (Disabled) $disabled-label-text-opacity: 0.38; /// md.comp.button.tonal.container.color (Enabled) $container-color: md-sys-color.$secondary-container; /// md.comp.button.tonal.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level0; /// md.comp.button.tonal.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.button.tonal.disabled.container.color (Disabled) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.button.tonal.disabled.container.elevation (Disabled) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.button.tonal.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.button.tonal.disabled.label-text.color (Disabled) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.button.tonal.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level0; /// md.comp.button.tonal.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.button.tonal.hovered.container.elevation (Hovered) /// /// @deprecated No longer part of the design spec $hovered-container-elevation: md-sys-elevation.$level1; /// md.comp.button.tonal.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.button.tonal.icon.color (Enabled) $icon-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.label-text.color (Enabled) $label-text-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.button.tonal.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.button.tonal.selected.container.color (Enabled) $selected-container-color: md-sys-color.$secondary; /// md.comp.button.tonal.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.focused.label-text.color (Focused) $selected-focused-label-text-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.hovered.label-text.color (Hovered) $selected-hovered-label-text-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.label-text.color (Enabled) $selected-label-text-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.pressed.label-text.color (Pressed) $selected-pressed-label-text-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-secondary; /// md.comp.button.tonal.unselected.container.color (Enabled) $unselected-container-color: md-sys-color.$secondary-container; /// md.comp.button.tonal.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.focused.label-text.color (Focused) $unselected-focused-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.hovered.label-text.color (Hovered) $unselected-hovered-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.label-text.color (Enabled) $unselected-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.pressed.label-text.color (Pressed) $unselected-pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.button.tonal.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-secondary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-xlarge.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.button.xlarge.container.height $container-height: 136px; /// md.comp.button.xlarge.icon-label-space $icon-label-space: 16px; /// md.comp.button.xlarge.icon.size $icon-size: 40px; /// md.comp.button.xlarge.leading-space $leading-space: 64px; /// md.comp.button.xlarge.outlined.outline.width $outlined-outline-width: 3px; /// md.comp.button.xlarge.trailing-space $trailing-space: 64px; /// md.comp.button.xlarge.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.button.xlarge.container.shape.square $container-shape-square: md-sys-shape.$corner-extra-large; /// md.comp.button.xlarge.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button.xlarge.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.button.xlarge.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-large; /// md.comp.button.xlarge.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-extra-large; /// md.comp.button.xlarge.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; /// md.comp.button.xlarge.label-text @mixin label-text { @include md-sys-typescale.headline-large; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button-xsmall.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.button.xsmall.container.height $container-height: 32px; /// md.comp.button.xsmall.icon-label-space $icon-label-space: 8px; /// md.comp.button.xsmall.icon.size $icon-size: 20px; /// md.comp.button.xsmall.leading-space $leading-space: 12px; /// md.comp.button.xsmall.outlined.outline.width $outlined-outline-width: 1px; /// md.comp.button.xsmall.trailing-space $trailing-space: 12px; /// md.comp.button.xsmall.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.button.xsmall.container.shape.square $container-shape-square: md-sys-shape.$corner-medium; /// md.comp.button.xsmall.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button.xsmall.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.button.xsmall.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-small; /// md.comp.button.xsmall.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-medium; /// md.comp.button.xsmall.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; /// md.comp.button.xsmall.label-text @mixin label-text { @include md-sys-typescale.label-large; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-motion'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.button.container.height (Enabled) $container-height: 40px; /// md.comp.button.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.button.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.button.disabled.label-text.opacity (Disabled) $disabled-label-text-opacity: 0.38; /// md.comp.button.icon-label-space (Enabled) $icon-label-space: 8px; /// md.comp.button.icon.size (Enabled) $icon-size: 20px; /// md.comp.button.leading-space (Enabled) $leading-space: 24px; /// md.comp.button.trailing-space (Enabled) $trailing-space: 24px; /// md.comp.button.container.color (Enabled) $container-color: md-sys-color.$primary; /// md.comp.button.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level0; /// md.comp.button.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.button.container.shape.round (Enabled) $container-shape-round: md-sys-shape.$corner-full; /// md.comp.button.container.shape.square (Enabled) $container-shape-square: md-sys-shape.$corner-medium; /// md.comp.button.disabled.container.color (Disabled) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.button.disabled.container.elevation (Disabled) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.button.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.button.disabled.label-text.color (Disabled) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.button.focus.indicator.color (Enabled) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.button.focus.indicator.outline.offset (Enabled) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.button.focus.indicator.thickness (Enabled) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.button.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level0; /// md.comp.button.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary; /// md.comp.button.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-primary; /// md.comp.button.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.button.hovered.container.elevation (Hovered) /// /// @deprecated No longer part of the design spec $hovered-container-elevation: md-sys-elevation.$level1; /// md.comp.button.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary; /// md.comp.button.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-primary; /// md.comp.button.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.button.icon.color (Enabled) $icon-color: md-sys-color.$on-primary; /// md.comp.button.label-text.color (Enabled) $label-text-color: md-sys-color.$on-primary; /// md.comp.button.label-text.selected.color (Enabled) $label-text-selected-color: md-sys-color.$on-primary; /// md.comp.button.label-text.unselected.color (Enabled) $label-text-unselected-color: md-sys-color.$on-surface-variant; /// md.comp.button.pressed.container.corner-size.motion.spring.damping (Enabled) $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.button.pressed.container.corner-size.motion.spring.stiffness (Enabled) $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.button.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.button.pressed.container.shape (Enabled) $pressed-container-shape: md-sys-shape.$corner-small; /// md.comp.button.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary; /// md.comp.button.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-primary; /// md.comp.button.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.button.selected.container.color (Enabled) $selected-container-color: md-sys-color.$primary; /// md.comp.button.selected.container.shape.round (Enabled) $selected-container-shape-round: md-sys-shape.$corner-medium; /// md.comp.button.selected.container.shape.square (Enabled) $selected-container-shape-square: md-sys-shape.$corner-full; /// md.comp.button.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-primary; /// md.comp.button.selected.focused.label-text.color (Focused) $selected-focused-label-text-color: md-sys-color.$on-primary; /// md.comp.button.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-primary; /// md.comp.button.selected.hovered.label-text.color (Hovered) $selected-hovered-label-text-color: md-sys-color.$on-primary; /// md.comp.button.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-primary; /// md.comp.button.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-primary; /// md.comp.button.selected.pressed.label-text.color (Pressed) $selected-pressed-label-text-color: md-sys-color.$on-primary; /// md.comp.button.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.button.unselected.container.color (Enabled) $unselected-container-color: md-sys-color.$surface-container; /// md.comp.button.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.focused.label-text.color (Focused) $unselected-focused-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.hovered.label-text.color (Hovered) $unselected-hovered-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.pressed.label-text.color (Pressed) $unselected-pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.button.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.button.label-text (Enabled) @mixin label-text { @include md-sys-typescale.label-large; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-carousel-item.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.carousel-item.disabled.container.opacity (Disabled / Container) $disabled-container-opacity: 0.38; /// md.comp.carousel-item.with-outline.disabled.outline.opacity (Disabled / Outline) $with-outline-disabled-outline-opacity: 0.12; /// md.comp.carousel-item.with-outline.outline.width (Enabled / Outline) $with-outline-outline-width: 1px; /// md.comp.carousel-item.container.color (Enabled / Container) $container-color: md-sys-color.$surface; /// md.comp.carousel-item.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.carousel-item.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.carousel-item.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.carousel-item.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.carousel-item.disabled.container.color (Disabled / Container) $disabled-container-color: md-sys-color.$surface; /// md.comp.carousel-item.disabled.container.elevation (Disabled / Container) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.carousel-item.focus.container.elevation (Focus / Container) $focus-container-elevation: md-sys-elevation.$level0; /// md.comp.carousel-item.focus.indicator.color (Focus / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.carousel-item.focus.indicator.outline.offset (Focus / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.carousel-item.focus.indicator.thickness (Focus / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.carousel-item.focus.state-layer.color (Focus / State layer) $focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.carousel-item.focus.state-layer.opacity (Focus / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.carousel-item.hover.container.elevation (Hover / Container) $hover-container-elevation: md-sys-elevation.$level1; /// md.comp.carousel-item.hover.state-layer.color (Hover / State layer) $hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.carousel-item.hover.state-layer.opacity (Hover / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.carousel-item.pressed.container.elevation (Pressed (ripple) / Container) $pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.carousel-item.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.carousel-item.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.carousel-item.with-outline.disabled.outline.color (Disabled / Outline) $with-outline-disabled-outline-color: md-sys-color.$outline; /// md.comp.carousel-item.with-outline.focus.outline.color (Focus / Outline) $with-outline-focus-outline-color: md-sys-color.$on-surface; /// md.comp.carousel-item.with-outline.hover.outline.color (Hover / Outline) $with-outline-hover-outline-color: md-sys-color.$outline; /// md.comp.carousel-item.with-outline.outline.color (Enabled / Outline) $with-outline-outline-color: md-sys-color.$outline; /// md.comp.carousel-item.with-outline.pressed.outline.color (Pressed (ripple) / Outline) $with-outline-pressed-outline-color: md-sys-color.$outline; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-checkbox.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.checkbox.container.height (Enabled / Container) /// /// @deprecated Combining height and width into a single size token $container-height: 18px; /// md.comp.checkbox.container.shape (Enabled / Container) $container-shape: 2px; /// md.comp.checkbox.container.size (Enabled / Container) $container-size: 18px; /// md.comp.checkbox.container.width (Enabled / Container) /// /// @deprecated Combining height and width into a single size token $container-width: 18px; /// md.comp.checkbox.disabled.selected.icon.opacity (Disabled / Icon) /// /// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens. $disabled-selected-icon-opacity: 0.38; /// md.comp.checkbox.disabled.unselected.icon.opacity (Disabled / Icon) /// /// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens. $disabled-unselected-icon-opacity: 0.38; /// md.comp.checkbox.icon.size (Enabled / Icon) $icon-size: 18px; /// md.comp.checkbox.selected.disabled.container.opacity (Disabled / Container) $selected-disabled-container-opacity: 0.38; /// md.comp.checkbox.selected.disabled.container.outline.width (Disabled / Container) $selected-disabled-container-outline-width: 0px; /// md.comp.checkbox.selected.error.focus.outline.width (Focused / Container) /// /// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead. $selected-error-focus-outline-width: 0px; /// md.comp.checkbox.selected.error.hover.outline.width (Hovered / Container) /// /// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead. $selected-error-hover-outline-width: 0px; /// md.comp.checkbox.selected.error.pressed.outline.width (Pressed (ripple) / Container) /// /// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead. $selected-error-pressed-outline-width: 0px; /// md.comp.checkbox.selected.focus.outline.width (Focused / Container) $selected-focus-outline-width: 0px; /// md.comp.checkbox.selected.hover.outline.width (Hovered / Container) $selected-hover-outline-width: 0px; /// md.comp.checkbox.selected.outline.width (Enabled / Container) $selected-outline-width: 0px; /// md.comp.checkbox.selected.pressed.outline.width (Pressed (ripple) / Container) $selected-pressed-outline-width: 0px; /// md.comp.checkbox.state-layer.size (Enabled / State layer) $state-layer-size: 40px; /// md.comp.checkbox.unselected.disabled.container.opacity (Disabled / Container) $unselected-disabled-container-opacity: 0.38; /// md.comp.checkbox.unselected.disabled.outline.width (Disabled / Container) $unselected-disabled-outline-width: 2px; /// md.comp.checkbox.unselected.error.focus.outline.width (Focused / Container) /// /// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead. $unselected-error-focus-outline-width: 2px; /// md.comp.checkbox.unselected.error.hover.outline.width (Hovered / Container) /// /// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead. $unselected-error-hover-outline-width: 2px; /// md.comp.checkbox.unselected.error.pressed.outline.width (Pressed (ripple) / Container) /// /// @deprecated Redundant values. Please use md.comp.checkbox.unselected.outline.width or md.comp.checkbox.selected.outline.width tokens instead. $unselected-error-pressed-outline-width: 2px; /// md.comp.checkbox.unselected.focus.outline.width (Focused / Container) $unselected-focus-outline-width: 2px; /// md.comp.checkbox.unselected.hover.outline.width (Hovered / Container) $unselected-hover-outline-width: 2px; /// md.comp.checkbox.unselected.outline.width (Enabled / Container) $unselected-outline-width: 2px; /// md.comp.checkbox.unselected.pressed.outline.width (Pressed (ripple) / Container) $unselected-pressed-outline-width: 2px; /// md.comp.checkbox.disabled.selected.icon.color (Disabled / Icon) /// /// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens. $disabled-selected-icon-color: md-sys-color.$primary; /// md.comp.checkbox.disabled.unselected.icon.color (Disabled / Icon) /// /// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens. $disabled-unselected-icon-color: md-sys-color.$primary; /// md.comp.checkbox.error.focus.state-layer.color (Focused / State layer) $error-focus-state-layer-color: md-sys-color.$error; /// md.comp.checkbox.error.focus.state-layer.opacity (Focused / State layer) $error-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.checkbox.error.hover.state-layer.color (Hovered / State layer) $error-hover-state-layer-color: md-sys-color.$error; /// md.comp.checkbox.error.hover.state-layer.opacity (Hovered / State layer) $error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.checkbox.error.pressed.state-layer.color (Pressed (ripple) / State layer) $error-pressed-state-layer-color: md-sys-color.$error; /// md.comp.checkbox.error.pressed.state-layer.opacity (Pressed (ripple) / State layer) $error-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.checkbox.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.checkbox.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.checkbox.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.checkbox.selected.container.color (Enabled / Container) $selected-container-color: md-sys-color.$primary; /// md.comp.checkbox.selected.disabled.container.color (Disabled / Container) $selected-disabled-container-color: md-sys-color.$on-surface; /// md.comp.checkbox.selected.disabled.icon.color (Disabled / Icon) $selected-disabled-icon-color: md-sys-color.$surface; /// md.comp.checkbox.selected.error.container.color (Enabled / Container) $selected-error-container-color: md-sys-color.$error; /// md.comp.checkbox.selected.error.focus.container.color (Focused / Container) $selected-error-focus-container-color: md-sys-color.$error; /// md.comp.checkbox.selected.error.focus.icon.color (Focused / Icon) $selected-error-focus-icon-color: md-sys-color.$on-error; /// md.comp.checkbox.selected.error.hover.container.color (Hovered / Container) $selected-error-hover-container-color: md-sys-color.$error; /// md.comp.checkbox.selected.error.hover.icon.color (Hovered / Icon) $selected-error-hover-icon-color: md-sys-color.$on-error; /// md.comp.checkbox.selected.error.icon.color (Enabled / Icon) $selected-error-icon-color: md-sys-color.$on-error; /// md.comp.checkbox.selected.error.pressed.container.color (Pressed (ripple) / Container) $selected-error-pressed-container-color: md-sys-color.$error; /// md.comp.checkbox.selected.error.pressed.icon.color (Pressed (ripple) / Icon) $selected-error-pressed-icon-color: md-sys-color.$on-error; /// md.comp.checkbox.selected.focus.container.color (Focused / Container) $selected-focus-container-color: md-sys-color.$primary; /// md.comp.checkbox.selected.focus.icon.color (Focused / Icon) $selected-focus-icon-color: md-sys-color.$on-primary; /// md.comp.checkbox.selected.focus.state-layer.color (Focused / State layer) $selected-focus-state-layer-color: md-sys-color.$primary; /// md.comp.checkbox.selected.focus.state-layer.opacity (Focused / State layer) $selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.checkbox.selected.hover.container.color (Hovered / Container) $selected-hover-container-color: md-sys-color.$primary; /// md.comp.checkbox.selected.hover.icon.color (Hovered / Icon) $selected-hover-icon-color: md-sys-color.$on-primary; /// md.comp.checkbox.selected.hover.state-layer.color (Hovered / State layer) $selected-hover-state-layer-color: md-sys-color.$primary; /// md.comp.checkbox.selected.hover.state-layer.opacity (Hovered / State layer) $selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.checkbox.selected.icon.color (Enabled / Icon) $selected-icon-color: md-sys-color.$on-primary; /// md.comp.checkbox.selected.pressed.container.color (Pressed (ripple) / Container) $selected-pressed-container-color: md-sys-color.$primary; /// md.comp.checkbox.selected.pressed.icon.color (Pressed (ripple) / Icon) $selected-pressed-icon-color: md-sys-color.$on-primary; /// md.comp.checkbox.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $selected-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.checkbox.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer) $selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.checkbox.state-layer.shape (Enabled / State layer) $state-layer-shape: md-sys-shape.$corner-full; /// md.comp.checkbox.unselected.disabled.outline.color (Disabled / Container) $unselected-disabled-outline-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.error.focus.outline.color (Focused / Container) $unselected-error-focus-outline-color: md-sys-color.$error; /// md.comp.checkbox.unselected.error.hover.outline.color (Hovered / Container) $unselected-error-hover-outline-color: md-sys-color.$error; /// md.comp.checkbox.unselected.error.outline.color (Enabled / Container) $unselected-error-outline-color: md-sys-color.$error; /// md.comp.checkbox.unselected.error.pressed.outline.color (Pressed (ripple) / Container) $unselected-error-pressed-outline-color: md-sys-color.$error; /// md.comp.checkbox.unselected.focus.icon.color (Focused / Icon) /// /// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens. $unselected-focus-icon-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.focus.outline.color (Focused / Container) $unselected-focus-outline-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.focus.state-layer.color (Focused / State layer) $unselected-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.focus.state-layer.opacity (Focused / State layer) $unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.checkbox.unselected.hover.icon.color (Hovered / Icon) /// /// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens. $unselected-hover-icon-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.hover.outline.color (Hovered / Container) $unselected-hover-outline-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.hover.state-layer.color (Hovered / State layer) $unselected-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.hover.state-layer.opacity (Hovered / State layer) $unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.checkbox.unselected.icon.color (Enabled / Icon) /// /// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens. $unselected-icon-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.outline.color (Enabled / Container) $unselected-outline-color: md-sys-color.$on-surface-variant; /// md.comp.checkbox.unselected.pressed.icon.color (Pressed (ripple) / Icon) /// /// @deprecated Checkbox changed how rendering was specified, if these are needed, copy to your own tokens. $unselected-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.pressed.outline.color (Pressed (ripple) / Container) $unselected-pressed-outline-color: md-sys-color.$on-surface; /// md.comp.checkbox.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $unselected-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.checkbox.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer) $unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-circular-progress-indicator.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; /// md.comp.circular-progress-indicator.active-indicator.width ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $active-indicator-width: 4px; /// md.comp.circular-progress-indicator.size ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $size: 48px; /// md.comp.circular-progress-indicator.active-indicator.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $active-indicator-color: md-sys-color.$primary; /// md.comp.circular-progress-indicator.active-indicator.shape ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $active-indicator-shape: md-sys-shape.$corner-none; /// md.comp.circular-progress-indicator.four-color.active-indicator.four.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $four-color-active-indicator-four-color: md-sys-color.$tertiary-container; /// md.comp.circular-progress-indicator.four-color.active-indicator.one.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $four-color-active-indicator-one-color: md-sys-color.$primary; /// md.comp.circular-progress-indicator.four-color.active-indicator.three.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $four-color-active-indicator-three-color: md-sys-color.$tertiary; /// md.comp.circular-progress-indicator.four-color.active-indicator.two.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $four-color-active-indicator-two-color: md-sys-color.$primary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-data-table.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.data-table.footer.container.height $footer-container-height: 52px; /// md.comp.data-table.footer.outlined-select.text-field.container.height /// /// @deprecated Deprecating this token until we have density tokens that can support our outline-select component. $footer-outlined-select-text-field-container-height: 36px; /// md.comp.data-table.header.container.height $header-container-height: 56px; /// md.comp.data-table.outline.width $outline-width: 1px; /// md.comp.data-table.row-item.container.height $row-item-container-height: 52px; /// md.comp.data-table.row-item.disabled.label-text.opacity $row-item-disabled-label-text-opacity: 0.38; /// md.comp.data-table.row-item.divider.thickness /// /// @deprecated Replacing divider with outline. Please use md.comp.data-table.row-item.outline.* instead. $row-item-divider-thickness: 1px; /// md.comp.data-table.row-item.outline.width $row-item-outline-width: 1px; /// md.comp.data-table.container.shape $container-shape: md-sys-shape.$corner-extra-small; /// md.comp.data-table.footer.container.color $footer-container-color: md-sys-color.$surface; /// md.comp.data-table.footer.supporting-text.color $footer-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.data-table.footer.supporting-text.font $footer-supporting-text-font: md-sys-typescale.$body-medium-font; /// md.comp.data-table.footer.supporting-text.line-height $footer-supporting-text-line-height: md-sys-typescale.$body-medium-line-height; /// md.comp.data-table.footer.supporting-text.size $footer-supporting-text-size: md-sys-typescale.$body-medium-size; /// md.comp.data-table.footer.supporting-text.tracking $footer-supporting-text-tracking: md-sys-typescale.$body-medium-tracking; /// md.comp.data-table.footer.supporting-text.weight $footer-supporting-text-weight: md-sys-typescale.$body-medium-weight; /// md.comp.data-table.header.container.color $header-container-color: md-sys-color.$surface; /// md.comp.data-table.header.headline.color $header-headline-color: md-sys-color.$on-surface-variant; /// md.comp.data-table.header.headline.font $header-headline-font: md-sys-typescale.$title-small-font; /// md.comp.data-table.header.headline.line-height $header-headline-line-height: md-sys-typescale.$title-small-line-height; /// md.comp.data-table.header.headline.size $header-headline-size: md-sys-typescale.$title-small-size; /// md.comp.data-table.header.headline.tracking $header-headline-tracking: md-sys-typescale.$title-small-tracking; /// md.comp.data-table.header.headline.weight $header-headline-weight: md-sys-typescale.$title-small-weight; /// md.comp.data-table.header.hover.headline.color $header-hover-headline-color: md-sys-color.$on-surface; /// md.comp.data-table.header.hover.sorting.icon-button.color $header-hover-sorting-icon-button-color: md-sys-color.$on-surface; /// md.comp.data-table.outline.color $outline-color: md-sys-color.$outline-variant; /// md.comp.data-table.row-item.disabled.label-text.color $row-item-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.data-table.row-item.divider.color /// /// @deprecated Replacing divider with outline. Please use md.comp.data-table.row-item.outline.* instead. $row-item-divider-color: md-sys-color.$surface-variant; /// md.comp.data-table.row-item.label-text.color $row-item-label-text-color: md-sys-color.$on-surface; /// md.comp.data-table.row-item.label-text.font $row-item-label-text-font: md-sys-typescale.$body-medium-font; /// md.comp.data-table.row-item.label-text.line-height $row-item-label-text-line-height: md-sys-typescale.$body-medium-line-height; /// md.comp.data-table.row-item.label-text.size $row-item-label-text-size: md-sys-typescale.$body-medium-size; /// md.comp.data-table.row-item.label-text.tracking $row-item-label-text-tracking: md-sys-typescale.$body-medium-tracking; /// md.comp.data-table.row-item.label-text.weight $row-item-label-text-weight: md-sys-typescale.$body-medium-weight; /// md.comp.data-table.row-item.outline.color $row-item-outline-color: md-sys-color.$outline-variant; /// md.comp.data-table.row-item.selected.container.color $row-item-selected-container-color: md-sys-color.$surface-container-highest; /// md.comp.data-table.row-item.selected.hover.state-layer.color $row-item-selected-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.data-table.row-item.selected.hover.state-layer.opacity $row-item-selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.data-table.row-item.unselected.container.color $row-item-unselected-container-color: md-sys-color.$surface; /// md.comp.data-table.row-item.unselected.hover.state-layer.color $row-item-unselected-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.data-table.row-item.unselected.hover.state-layer.opacity $row-item-unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-date-input-modal.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.date-input.modal.container.height (Enabled / Container) $container-height: 512px; /// md.comp.date-input.modal.container.width (Enabled / Container) $container-width: 328px; /// md.comp.date-input.modal.header.container.height (Enabled / Container) $header-container-height: 120px; /// md.comp.date-input.modal.header.container.width (Enabled / Container) $header-container-width: 328px; /// md.comp.date-input.modal.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.date-input.modal.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.date-input.modal.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.date-input.modal.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.date-input.modal.header.headline.color (Enabled / Headline) $header-headline-color: md-sys-color.$on-surface-variant; /// md.comp.date-input.modal.header.headline.font (Enabled / Headline) $header-headline-font: md-sys-typescale.$headline-large-font; /// md.comp.date-input.modal.header.headline.line-height (Enabled / Headline) $header-headline-line-height: md-sys-typescale.$headline-large-line-height; /// md.comp.date-input.modal.header.headline.size (Enabled / Headline) $header-headline-size: md-sys-typescale.$headline-large-size; /// md.comp.date-input.modal.header.headline.tracking (Enabled / Headline) $header-headline-tracking: md-sys-typescale.$headline-large-tracking; /// md.comp.date-input.modal.header.headline.weight (Enabled / Headline) $header-headline-weight: md-sys-typescale.$headline-large-weight; /// md.comp.date-input.modal.header.supporting-text.color (Enabled / Supporting text) $header-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.date-input.modal.header.supporting-text.font (Enabled / Supporting text) $header-supporting-text-font: md-sys-typescale.$label-large-font; /// md.comp.date-input.modal.header.supporting-text.line-height (Enabled / Supporting text) $header-supporting-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.date-input.modal.header.supporting-text.size (Enabled / Supporting text) $header-supporting-text-size: md-sys-typescale.$label-large-size; /// md.comp.date-input.modal.header.supporting-text.tracking (Enabled / Supporting text) $header-supporting-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.date-input.modal.header.supporting-text.weight (Enabled / Supporting text) $header-supporting-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.date-input.modal.header.headline.type (Enabled / Headline) @mixin header-headline-type { font-family: $header-headline-font; font-size: $header-headline-size; font-weight: $header-headline-weight; letter-spacing: $header-headline-tracking; line-height: $header-headline-line-height; } /// md.comp.date-input.modal.header.supporting-text.type (Enabled / Supporting text) @mixin header-supporting-text-type { font-family: $header-supporting-text-font; font-size: $header-supporting-text-size; font-weight: $header-supporting-text-weight; letter-spacing: $header-supporting-text-tracking; line-height: $header-supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-date-picker-docked.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.date-picker.docked.container.height (Enabled / Container) $container-height: 456px; /// md.comp.date-picker.docked.container.width (Enabled / Container) $container-width: 360px; /// md.comp.date-picker.docked.date.container.height (Enabled / Container) $date-container-height: 48px; /// md.comp.date-picker.docked.date.container.width (Enabled / Container) $date-container-width: 48px; /// md.comp.date-picker.docked.date.state-layer.height (Enabled / State layer) $date-state-layer-height: 40px; /// md.comp.date-picker.docked.date.state-layer.width (Enabled / State layer) $date-state-layer-width: 40px; /// md.comp.date-picker.docked.date.today.container.outline.width (Enabled / Container) $date-today-container-outline-width: 1px; /// md.comp.date-picker.docked.date.unselected.outside-month.label-text.opacity (Enabled / Label text) $date-unselected-outside-month-label-text-opacity: 0.38; /// md.comp.date-picker.docked.header.height (Enabled / Header) $header-height: 64px; /// md.comp.date-picker.docked.menu-button.container.height (Enabled / Container) $menu-button-container-height: 40px; /// md.comp.date-picker.docked.menu-button.disabled.icon.opacity (Disabled / Icon) $menu-button-disabled-icon-opacity: 0.38; /// md.comp.date-picker.docked.menu-button.disabled.label-text.opacity (Disabled / Label text) $menu-button-disabled-label-text-opacity: 0.38; /// md.comp.date-picker.docked.menu-button.icon.size (Enabled / Icon) $menu-button-icon-size: 18px; /// md.comp.date-picker.docked.menu.list-item.container.height (Enabled / Container) $menu-list-item-container-height: 48px; /// md.comp.date-picker.docked.menu.list-item.selected.leading-icon.size (Enabled / Leading icon) $menu-list-item-selected-leading-icon-size: 24px; /// md.comp.date-picker.docked.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.date-picker.docked.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.date-picker.docked.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-large; /// md.comp.date-picker.docked.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.date-picker.docked.date.container.shape (Enabled / Container) $date-container-shape: md-sys-shape.$corner-full; /// md.comp.date-picker.docked.date.focus.state-layer.opacity (Focused / State layer) $date-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.date-picker.docked.date.hover.state-layer.opacity (Hovered / State layer) $date-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.date-picker.docked.date.label-text.font (Enabled / Label text) $date-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.date-picker.docked.date.label-text.line-height (Enabled / Label text) $date-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.date-picker.docked.date.label-text.size (Enabled / Label text) $date-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.date-picker.docked.date.label-text.tracking (Enabled / Label text) $date-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.date-picker.docked.date.label-text.weight (Enabled / Label text) $date-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.date-picker.docked.date.pressed.state-layer.opacity (Pressed (ripple) / State layer) $date-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.date-picker.docked.date.selected.container.color (Enabled / Container) $date-selected-container-color: md-sys-color.$primary; /// md.comp.date-picker.docked.date.selected.focus.state-layer.color (Focused / State layer) $date-selected-focus-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.docked.date.selected.hover.state-layer.color (Hovered / State layer) $date-selected-hover-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.docked.date.selected.label-text.color (Enabled / Label text) $date-selected-label-text-color: md-sys-color.$on-primary; /// md.comp.date-picker.docked.date.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $date-selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.docked.date.state-layer.shape (Enabled / State layer) $date-state-layer-shape: md-sys-shape.$corner-full; /// md.comp.date-picker.docked.date.today.container.outline.color (Enabled / Container) $date-today-container-outline-color: md-sys-color.$primary; /// md.comp.date-picker.docked.date.today.focus.state-layer.color (Focused / State layer) $date-today-focus-state-layer-color: md-sys-color.$primary; /// md.comp.date-picker.docked.date.today.hover.state-layer.color (Hovered / State layer) $date-today-hover-state-layer-color: md-sys-color.$primary; /// md.comp.date-picker.docked.date.today.label-text.color (Enabled / Label text) $date-today-label-text-color: md-sys-color.$primary; /// md.comp.date-picker.docked.date.today.pressed.state-layer.color (Pressed (ripple) / State layer) $date-today-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.date-picker.docked.date.unselected.focus.state-layer.color (Focused / State layer) $date-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.date.unselected.hover.state-layer.color (Hovered / State layer) $date-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.date.unselected.label-text.color (Enabled / Label text) $date-unselected-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.date.unselected.outside-month.label-text.color (Enabled / Label text) $date-unselected-outside-month-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.date.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $date-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.container.shape (Enabled / Container) $menu-button-container-shape: md-sys-shape.$corner-full; /// md.comp.date-picker.docked.menu-button.disabled.icon.color (Disabled / Icon) $menu-button-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu-button.disabled.label-text.color (Disabled / Label text) $menu-button-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu-button.focus.icon.color (Focused / Icon) $menu-button-focus-icon-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.focus.label-text.color (Focused / Label text) $menu-button-focus-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.focus.state-layer.color (Focused / State layer) $menu-button-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.focus.state-layer.opacity (Focused / State layer) $menu-button-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.date-picker.docked.menu-button.hover.icon.color (Hovered / Icon) $menu-button-hover-icon-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.hover.label-text.color (Hovered / Label text) $menu-button-hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.hover.state-layer.color (Hovered / State layer) $menu-button-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.hover.state-layer.opacity (Hovered / State layer) $menu-button-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.date-picker.docked.menu-button.icon.color (Enabled / Icon) $menu-button-icon-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.label-text.color (Enabled / Label text) $menu-button-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.label-text.font (Enabled / Label text) $menu-button-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.date-picker.docked.menu-button.label-text.line-height (Enabled / Label text) $menu-button-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.date-picker.docked.menu-button.label-text.size (Enabled / Label text) $menu-button-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.date-picker.docked.menu-button.label-text.tracking (Enabled / Label text) $menu-button-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.date-picker.docked.menu-button.label-text.weight (Enabled / Label text) $menu-button-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.date-picker.docked.menu-button.pressed.icon.color (Pressed (ripple) / Icon) $menu-button-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.pressed.label-text.color (Pressed (ripple) / Label text) $menu-button-pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.pressed.state-layer.color (Pressed (ripple) / State layer) $menu-button-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer) $menu-button-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.date-picker.docked.menu.list-item.focus.label-text.color (Focused / Label text) $menu-list-item-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu.list-item.focus.state-layer.color (Focused / State layer) $menu-list-item-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu.list-item.focus.state-layer.opacity (Focused / State layer) $menu-list-item-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.date-picker.docked.menu.list-item.hover.label-text.color (Hovered / Label text) $menu-list-item-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu.list-item.hover.state-layer.color (Hovered / State layer) $menu-list-item-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu.list-item.hover.state-layer.opacity (Hovered / State layer) $menu-list-item-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.date-picker.docked.menu.list-item.label-text.color (Enabled / Label text) $menu-list-item-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu.list-item.label-text.font (Enabled / Label text) $menu-list-item-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.date-picker.docked.menu.list-item.label-text.line-height (Enabled / Label text) $menu-list-item-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.date-picker.docked.menu.list-item.label-text.size (Enabled / Label text) $menu-list-item-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.date-picker.docked.menu.list-item.label-text.tracking (Enabled / Label text) $menu-list-item-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.date-picker.docked.menu.list-item.label-text.weight (Enabled / Label text) $menu-list-item-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.date-picker.docked.menu.list-item.pressed.label-text.color (Pressed (ripple) / Label text) $menu-list-item-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu.list-item.pressed.state-layer.color (Pressed (ripple) / State layer) $menu-list-item-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu.list-item.pressed.state-layer.opacity (Pressed (ripple) / State layer) $menu-list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.date-picker.docked.menu.list-item.selected.container.color (Enabled / Container) $menu-list-item-selected-container-color: md-sys-color.$surface-variant; /// md.comp.date-picker.docked.menu.list-item.selected.focus.leading-icon.color (Focused / Leading icon) $menu-list-item-selected-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu.list-item.selected.hover.leading-icon.color (Hovered / Leading icon) $menu-list-item-selected-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.menu.list-item.selected.leading-icon.color (Enabled / Leading icon) $menu-list-item-selected-leading-icon-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.menu.list-item.selected.pressed.leading-icon.color (Pressed (ripple) / Leading icon) $menu-list-item-selected-pressed-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.docked.weekdays.label-text.color (Enabled / Label text) $weekdays-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.docked.weekdays.label-text.font (Enabled / Label text) $weekdays-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.date-picker.docked.weekdays.label-text.line-height (Enabled / Label text) $weekdays-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.date-picker.docked.weekdays.label-text.size (Enabled / Label text) $weekdays-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.date-picker.docked.weekdays.label-text.tracking (Enabled / Label text) $weekdays-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.date-picker.docked.weekdays.label-text.weight (Enabled / Label text) $weekdays-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.date-picker.docked.date.label-text.type (Enabled / Label text) @mixin date-label-text-type { font-family: $date-label-text-font; font-size: $date-label-text-size; font-weight: $date-label-text-weight; letter-spacing: $date-label-text-tracking; line-height: $date-label-text-line-height; } /// md.comp.date-picker.docked.menu-button.label-text.type (Enabled / Label text) @mixin menu-button-label-text-type { font-family: $menu-button-label-text-font; font-size: $menu-button-label-text-size; font-weight: $menu-button-label-text-weight; letter-spacing: $menu-button-label-text-tracking; line-height: $menu-button-label-text-line-height; } /// md.comp.date-picker.docked.menu.list-item.label-text.type (Enabled / Label text) @mixin menu-list-item-label-text-type { font-family: $menu-list-item-label-text-font; font-size: $menu-list-item-label-text-size; font-weight: $menu-list-item-label-text-weight; letter-spacing: $menu-list-item-label-text-tracking; line-height: $menu-list-item-label-text-line-height; } /// md.comp.date-picker.docked.weekdays.label-text.type (Enabled / Label text) @mixin weekdays-label-text-type { font-family: $weekdays-label-text-font; font-size: $weekdays-label-text-size; font-weight: $weekdays-label-text-weight; letter-spacing: $weekdays-label-text-tracking; line-height: $weekdays-label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-date-picker-modal.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.date-picker.modal.container.height (Enabled / Container) $container-height: 524px; /// md.comp.date-picker.modal.container.width (Enabled / Container) $container-width: 360px; /// md.comp.date-picker.modal.date.container.height (Enabled / Container) $date-container-height: 40px; /// md.comp.date-picker.modal.date.container.width (Enabled / Container) $date-container-width: 40px; /// md.comp.date-picker.modal.date.state-layer.height (Enabled / State layer) $date-state-layer-height: 40px; /// md.comp.date-picker.modal.date.state-layer.width (Enabled / State layer) $date-state-layer-width: 40px; /// md.comp.date-picker.modal.date.today.container.outline.width (Enabled / Container) $date-today-container-outline-width: 1px; /// md.comp.date-picker.modal.header.container.height (Enabled / Container) $header-container-height: 120px; /// md.comp.date-picker.modal.header.container.width (Enabled / Container) $header-container-width: 360px; /// md.comp.date-picker.modal.range-selection.active-indicator.container.height (Enabled / Container) $range-selection-active-indicator-container-height: 40px; /// md.comp.date-picker.modal.range-selection.header.container.height (Enabled / Container) $range-selection-header-container-height: 128px; /// md.comp.date-picker.modal.year-selection.year.container.height (Enabled / Container) $year-selection-year-container-height: 36px; /// md.comp.date-picker.modal.year-selection.year.container.width (Enabled / Container) $year-selection-year-container-width: 72px; /// md.comp.date-picker.modal.year-selection.year.state-layer.height (Enabled / State layer) $year-selection-year-state-layer-height: 36px; /// md.comp.date-picker.modal.year-selection.year.state-layer.width (Enabled / State layer) $year-selection-year-state-layer-width: 72px; /// md.comp.date-picker.modal.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.date-picker.modal.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.date-picker.modal.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.date-picker.modal.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.date-picker.modal.date.container.shape (Enabled / Container) $date-container-shape: md-sys-shape.$corner-full; /// md.comp.date-picker.modal.date.focus.state-layer.opacity (Focused / State layer) $date-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.date-picker.modal.date.hover.state-layer.opacity (Hovered / State layer) $date-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.date-picker.modal.date.label-text.font (Enabled / Label text) $date-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.date-picker.modal.date.label-text.line-height (Enabled / Label text) $date-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.date-picker.modal.date.label-text.size (Enabled / Label text) $date-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.date-picker.modal.date.label-text.tracking (Enabled / Label text) $date-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.date-picker.modal.date.label-text.weight (Enabled / Label text) $date-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.date-picker.modal.date.pressed.state-layer.opacity (Pressed (ripple) / State layer) $date-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.date-picker.modal.date.selected.container.color (Enabled / Container) $date-selected-container-color: md-sys-color.$primary; /// md.comp.date-picker.modal.date.selected.focus.state-layer.color (Focused / State layer) $date-selected-focus-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.modal.date.selected.hover.state-layer.color (Hovered / State layer) $date-selected-hover-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.modal.date.selected.label-text.color (Enabled / Label text) $date-selected-label-text-color: md-sys-color.$on-primary; /// md.comp.date-picker.modal.date.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $date-selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.modal.date.state-layer.shape (Enabled / State layer) $date-state-layer-shape: md-sys-shape.$corner-full; /// md.comp.date-picker.modal.date.today.container.outline.color (Enabled / Container) $date-today-container-outline-color: md-sys-color.$primary; /// md.comp.date-picker.modal.date.today.focus.state-layer.color (Focused / State layer) $date-today-focus-state-layer-color: md-sys-color.$primary; /// md.comp.date-picker.modal.date.today.hover.state-layer.color (Hovered / State layer) $date-today-hover-state-layer-color: md-sys-color.$primary; /// md.comp.date-picker.modal.date.today.label-text.color (Enabled / Label text) $date-today-label-text-color: md-sys-color.$primary; /// md.comp.date-picker.modal.date.today.pressed.state-layer.color (Pressed (ripple) / State layer) $date-today-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.date-picker.modal.date.unselected.focus.state-layer.color (Focused / State layer) $date-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.date.unselected.hover.state-layer.color (Hovered / State layer) $date-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.date.unselected.label-text.color (Enabled / Label text) $date-unselected-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.modal.date.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $date-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.header.headline.color (Enabled / Headline) $header-headline-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.header.headline.font (Enabled / Headline) $header-headline-font: md-sys-typescale.$headline-large-font; /// md.comp.date-picker.modal.header.headline.line-height (Enabled / Headline) $header-headline-line-height: md-sys-typescale.$headline-large-line-height; /// md.comp.date-picker.modal.header.headline.size (Enabled / Headline) $header-headline-size: md-sys-typescale.$headline-large-size; /// md.comp.date-picker.modal.header.headline.tracking (Enabled / Headline) $header-headline-tracking: md-sys-typescale.$headline-large-tracking; /// md.comp.date-picker.modal.header.headline.weight (Enabled / Headline) $header-headline-weight: md-sys-typescale.$headline-large-weight; /// md.comp.date-picker.modal.header.supporting-text.color (Enabled / Header) $header-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.header.supporting-text.font (Enabled / Header) $header-supporting-text-font: md-sys-typescale.$label-large-font; /// md.comp.date-picker.modal.header.supporting-text.line-height (Enabled / Header) $header-supporting-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.date-picker.modal.header.supporting-text.size (Enabled / Header) $header-supporting-text-size: md-sys-typescale.$label-large-size; /// md.comp.date-picker.modal.header.supporting-text.tracking (Enabled / Header) $header-supporting-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.date-picker.modal.header.supporting-text.weight (Enabled / Header) $header-supporting-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.date-picker.modal.range-selection.active-indicator.container.color (Enabled / Container) $range-selection-active-indicator-container-color: md-sys-color.$secondary-container; /// md.comp.date-picker.modal.range-selection.active-indicator.container.shape (Enabled / Container) $range-selection-active-indicator-container-shape: md-sys-shape.$corner-full; /// md.comp.date-picker.modal.range-selection.container.elevation (Enabled / Container) $range-selection-container-elevation: md-sys-elevation.$level0; /// md.comp.date-picker.modal.range-selection.container.shape (Enabled / Container) $range-selection-container-shape: md-sys-shape.$corner-none; /// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.color (Focused / State layer) $range-selection-date-in-range-focus-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opacity (Focused / State layer) $range-selection-date-in-range-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opcaity (Focused / State layer) /// /// @deprecated Fixed spelling (was ".opcaity" should be ".opacity") $range-selection-date-in-range-focus-state-layer-opcaity: md-sys-state.$focus-state-layer-opacity; /// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.color (Hovered / State layer) $range-selection-date-in-range-hover-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opacity (Hovered / State layer) $range-selection-date-in-range-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opcaity (Hovered / State layer) /// /// @deprecated Fixed spelling (was ".opcaity" should be ".opacity") $range-selection-date-in-range-hover-state-layer-opcaity: md-sys-state.$hover-state-layer-opacity; /// md.comp.date-picker.modal.range-selection.date.in-range.label-text.color (Enabled / Label text) $range-selection-date-in-range-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.color (Pressed (ripple) / State layer) $range-selection-date-in-range-pressed-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opacity (Pressed (ripple) / State layer) $range-selection-date-in-range-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opcaity (Pressed (ripple) / State layer) /// /// @deprecated Fixed spelling (was ".opcaity" should be ".opacity") $range-selection-date-in-range-pressed-state-layer-opcaity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.date-picker.modal.range-selection.header.headline.font (Enabled / Headline) $range-selection-header-headline-font: md-sys-typescale.$title-large-font; /// md.comp.date-picker.modal.range-selection.header.headline.line-height (Enabled / Headline) $range-selection-header-headline-line-height: md-sys-typescale.$title-large-line-height; /// md.comp.date-picker.modal.range-selection.header.headline.size (Enabled / Headline) $range-selection-header-headline-size: md-sys-typescale.$title-large-size; /// md.comp.date-picker.modal.range-selection.header.headline.tracking (Enabled / Headline) $range-selection-header-headline-tracking: md-sys-typescale.$title-large-tracking; /// md.comp.date-picker.modal.range-selection.header.headline.weight (Enabled / Headline) $range-selection-header-headline-weight: md-sys-typescale.$title-large-weight; /// md.comp.date-picker.modal.range-selection.month.subhead.color (Enabled / Subhead) $range-selection-month-subhead-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.range-selection.month.subhead.font (Enabled / Subhead) $range-selection-month-subhead-font: md-sys-typescale.$title-small-font; /// md.comp.date-picker.modal.range-selection.month.subhead.line-height (Enabled / Subhead) $range-selection-month-subhead-line-height: md-sys-typescale.$title-small-line-height; /// md.comp.date-picker.modal.range-selection.month.subhead.size (Enabled / Subhead) $range-selection-month-subhead-size: md-sys-typescale.$title-small-size; /// md.comp.date-picker.modal.range-selection.month.subhead.tracking (Enabled / Subhead) $range-selection-month-subhead-tracking: md-sys-typescale.$title-small-tracking; /// md.comp.date-picker.modal.range-selection.month.subhead.weight (Enabled / Subhead) $range-selection-month-subhead-weight: md-sys-typescale.$title-small-weight; /// md.comp.date-picker.modal.weekdays.label-text.color (Enabled / Label text) $weekdays-label-text-color: md-sys-color.$on-surface; /// md.comp.date-picker.modal.weekdays.label-text.font (Enabled / Label text) $weekdays-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.date-picker.modal.weekdays.label-text.line-height (Enabled / Label text) $weekdays-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.date-picker.modal.weekdays.label-text.size (Enabled / Label text) $weekdays-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.date-picker.modal.weekdays.label-text.tracking (Enabled / Label text) $weekdays-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.date-picker.modal.weekdays.label-text.weight (Enabled / Label text) $weekdays-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.date-picker.modal.year-selection.year.focus.state-layer.opacity (Focused / State layer) $year-selection-year-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.date-picker.modal.year-selection.year.hover.state-layer.opacity (Hovered / State layer) $year-selection-year-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.date-picker.modal.year-selection.year.label-text.font (Enabled / Label text) $year-selection-year-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.date-picker.modal.year-selection.year.label-text.line-height (Enabled / Label text) $year-selection-year-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.date-picker.modal.year-selection.year.label-text.size (Enabled / Label text) $year-selection-year-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.date-picker.modal.year-selection.year.label-text.tracking (Enabled / Label text) $year-selection-year-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.date-picker.modal.year-selection.year.label-text.weight (Enabled / Label text) $year-selection-year-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.date-picker.modal.year-selection.year.pressed.state-layer.opacity (Pressed (ripple) / State layer) $year-selection-year-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.date-picker.modal.year-selection.year.selected.container.color (Enabled / Container) $year-selection-year-selected-container-color: md-sys-color.$primary; /// md.comp.date-picker.modal.year-selection.year.selected.focus.state-layer.color (Focused / State layer) $year-selection-year-selected-focus-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.modal.year-selection.year.selected.hover.state-layer.color (Hovered / State layer) $year-selection-year-selected-hover-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.modal.year-selection.year.selected.label-text.color (Enabled / Label text) $year-selection-year-selected-label-text-color: md-sys-color.$on-primary; /// md.comp.date-picker.modal.year-selection.year.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $year-selection-year-selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.date-picker.modal.year-selection.year.state-layer.shape (Enabled / State layer) $year-selection-year-state-layer-shape: md-sys-shape.$corner-full; /// md.comp.date-picker.modal.year-selection.year.unselected.focus.state-layer.color (Focused / State layer) $year-selection-year-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.year-selection.year.unselected.hover.state-layer.color (Hovered / State layer) $year-selection-year-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.year-selection.year.unselected.label-text.color (Enabled / Label text) $year-selection-year-unselected-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $year-selection-year-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.date-picker.modal.date.label-text.type (Enabled / Label text) @mixin date-label-text-type { font-family: $date-label-text-font; font-size: $date-label-text-size; font-weight: $date-label-text-weight; letter-spacing: $date-label-text-tracking; line-height: $date-label-text-line-height; } /// md.comp.date-picker.modal.header.headline.type (Enabled / Headline) @mixin header-headline-type { font-family: $header-headline-font; font-size: $header-headline-size; font-weight: $header-headline-weight; letter-spacing: $header-headline-tracking; line-height: $header-headline-line-height; } /// md.comp.date-picker.modal.header.supporting-text.type (Enabled / Supporting text) @mixin header-supporting-text-type { font-family: $header-supporting-text-font; font-size: $header-supporting-text-size; font-weight: $header-supporting-text-weight; letter-spacing: $header-supporting-text-tracking; line-height: $header-supporting-text-line-height; } /// md.comp.date-picker.modal.range-selection.header.headline.type (Enabled / Headline) @mixin range-selection-header-headline-type { font-family: $range-selection-header-headline-font; font-size: $range-selection-header-headline-size; font-weight: $range-selection-header-headline-weight; letter-spacing: $range-selection-header-headline-tracking; line-height: $range-selection-header-headline-line-height; } /// md.comp.date-picker.modal.range-selection.month.subhead.type (Enabled / Subhead) @mixin range-selection-month-subhead-type { font-family: $range-selection-month-subhead-font; font-size: $range-selection-month-subhead-size; font-weight: $range-selection-month-subhead-weight; letter-spacing: $range-selection-month-subhead-tracking; line-height: $range-selection-month-subhead-line-height; } /// md.comp.date-picker.modal.weekdays.label-text.type (Enabled / Label text) @mixin weekdays-label-text-type { font-family: $weekdays-label-text-font; font-size: $weekdays-label-text-size; font-weight: $weekdays-label-text-weight; letter-spacing: $weekdays-label-text-tracking; line-height: $weekdays-label-text-line-height; } /// md.comp.date-picker.modal.year-selection.year.label-text.type (Enabled / Label text) @mixin year-selection-year-label-text-type { font-family: $year-selection-year-label-text-font; font-size: $year-selection-year-label-text-size; font-weight: $year-selection-year-label-text-weight; letter-spacing: $year-selection-year-label-text-tracking; line-height: $year-selection-year-label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-dialog.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.dialog.with-divider.divider.height (Enabled / Divider) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement $with-divider-divider-height: 1px; /// md.comp.dialog.with-icon.icon.size (Enabled / Icon) $with-icon-icon-size: 24px; /// md.comp.dialog.action.focus.label-text.color (Focused / Label text) $action-focus-label-text-color: md-sys-color.$primary; /// md.comp.dialog.action.focus.state-layer.color (Focused / State layer) $action-focus-state-layer-color: md-sys-color.$primary; /// md.comp.dialog.action.focus.state-layer.opacity (Focused / State layer) $action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.dialog.action.hover.label-text.color (Hovered / Label text) $action-hover-label-text-color: md-sys-color.$primary; /// md.comp.dialog.action.hover.state-layer.color (Hovered / State layer) $action-hover-state-layer-color: md-sys-color.$primary; /// md.comp.dialog.action.hover.state-layer.opacity (Hovered / State layer) $action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.dialog.action.label-text.color (Enabled / Label text) $action-label-text-color: md-sys-color.$primary; /// md.comp.dialog.action.label-text.font (Enabled / Label text) $action-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.dialog.action.label-text.line-height (Enabled / Label text) $action-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.dialog.action.label-text.size (Enabled / Label text) $action-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.dialog.action.label-text.tracking (Enabled / Label text) $action-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.dialog.action.label-text.weight (Enabled / Label text) $action-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.dialog.action.pressed.label-text.color (Pressed (ripple) / Label text) $action-pressed-label-text-color: md-sys-color.$primary; /// md.comp.dialog.action.pressed.state-layer.color (Pressed (ripple) / State layer) $action-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.dialog.action.pressed.state-layer.opacity (Pressed (ripple) / State layer) $action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.dialog.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.dialog.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.dialog.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.dialog.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.dialog.headline.color (Enabled / Headline) $headline-color: md-sys-color.$on-surface; /// md.comp.dialog.headline.font (Enabled / Headline) $headline-font: md-sys-typescale.$headline-small-font; /// md.comp.dialog.headline.line-height (Enabled / Headline) $headline-line-height: md-sys-typescale.$headline-small-line-height; /// md.comp.dialog.headline.size (Enabled / Headline) $headline-size: md-sys-typescale.$headline-small-size; /// md.comp.dialog.headline.tracking (Enabled / Headline) $headline-tracking: md-sys-typescale.$headline-small-tracking; /// md.comp.dialog.headline.weight (Enabled / Headline) $headline-weight: md-sys-typescale.$headline-small-weight; /// md.comp.dialog.subhead.color (Enabled / Subhead) /// /// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead $subhead-color: md-sys-color.$on-surface; /// md.comp.dialog.subhead.font (Enabled / Subhead) /// /// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead $subhead-font: md-sys-typescale.$headline-small-font; /// md.comp.dialog.subhead.line-height (Enabled / Subhead) /// /// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead $subhead-line-height: md-sys-typescale.$headline-small-line-height; /// md.comp.dialog.subhead.size (Enabled / Subhead) /// /// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead $subhead-size: md-sys-typescale.$headline-small-size; /// md.comp.dialog.subhead.tracking (Enabled / Subhead) /// /// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead $subhead-tracking: md-sys-typescale.$headline-small-tracking; /// md.comp.dialog.subhead.weight (Enabled / Subhead) /// /// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead $subhead-weight: md-sys-typescale.$headline-small-weight; /// md.comp.dialog.supporting-text.color (Enabled / Supporting text) $supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.dialog.supporting-text.font (Enabled / Supporting text) $supporting-text-font: md-sys-typescale.$body-medium-font; /// md.comp.dialog.supporting-text.line-height (Enabled / Supporting text) $supporting-text-line-height: md-sys-typescale.$body-medium-line-height; /// md.comp.dialog.supporting-text.size (Enabled / Supporting text) $supporting-text-size: md-sys-typescale.$body-medium-size; /// md.comp.dialog.supporting-text.tracking (Enabled / Supporting text) $supporting-text-tracking: md-sys-typescale.$body-medium-tracking; /// md.comp.dialog.supporting-text.weight (Enabled / Supporting text) $supporting-text-weight: md-sys-typescale.$body-medium-weight; /// md.comp.dialog.with-divider.divider.color (Enabled / Divider) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement $with-divider-divider-color: md-sys-color.$outline; /// md.comp.dialog.with-icon.icon.color (Enabled / Icon) $with-icon-icon-color: md-sys-color.$secondary; /// md.comp.dialog.action.label-text.type (Enabled / Label text) @mixin action-label-text-type { font-family: $action-label-text-font; font-size: $action-label-text-size; font-weight: $action-label-text-weight; letter-spacing: $action-label-text-tracking; line-height: $action-label-text-line-height; } /// md.comp.dialog.headline.type (Enabled / Headline) @mixin headline-type { font-family: $headline-font; font-size: $headline-size; font-weight: $headline-weight; letter-spacing: $headline-tracking; line-height: $headline-line-height; } /// md.comp.dialog.subhead.type (Enabled / Subhead) /// /// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead @mixin subhead-type { font-family: $subhead-font; font-size: $subhead-size; font-weight: $subhead-weight; letter-spacing: $subhead-tracking; line-height: $subhead-line-height; } /// md.comp.dialog.supporting-text.type (Enabled / Supporting text) @mixin supporting-text-type { font-family: $supporting-text-font; font-size: $supporting-text-size; font-weight: $supporting-text-weight; letter-spacing: $supporting-text-tracking; line-height: $supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-divider.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; /// md.comp.divider.thickness (Enabled / Container) $thickness: 1px; /// md.comp.divider.color (Enabled / Container) $color: md-sys-color.$outline-variant; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-drag-handle.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; /// md.comp.drag-handle.container.width (Enabled / Container) /// /// The drag handle container is wider than than the handle, and stretches to fill vertical space. $container-width: 24px; /// md.comp.drag-handle.height (Enabled / Drag Handle) $height: 48px; /// md.comp.drag-handle.pressed.height (Pressed / Drag handle) $pressed-height: 52px; /// md.comp.drag-handle.pressed.width (Pressed / Drag handle) $pressed-width: 12px; /// md.comp.drag-handle.width (Enabled / Drag Handle) $width: 4px; /// md.comp.drag-handle.color (Enabled / Drag Handle) $color: md-sys-color.$outline; /// md.comp.drag-handle.elevation (Enabled / Drag Handle) $elevation: md-sys-elevation.$level0; /// md.comp.drag-handle.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.drag-handle.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.drag-handle.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.drag-handle.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.drag-handle.pressed.color (Pressed / Drag handle) $pressed-color: md-sys-color.$on-surface; /// md.comp.drag-handle.pressed.elevation (Pressed / Drag handle) $pressed-elevation: md-sys-elevation.$level0; /// md.comp.drag-handle.pressed.shape (Pressed / Drag handle) $pressed-shape: md-sys-shape.$corner-medium; /// md.comp.drag-handle.shape (Enabled / Drag Handle) $shape: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-elevated-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.elevated-button.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.elevated-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-opacity: 0.12; /// md.comp.elevated-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-opacity: 0.38; /// md.comp.elevated-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-opacity: 0.38; /// md.comp.elevated-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-size: 18px; /// md.comp.elevated-button.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$surface-container-low; /// md.comp.elevated-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level1; /// md.comp.elevated-button.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.elevated-button.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.elevated-button.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.elevated-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.elevated-button.disabled.container.elevation ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.elevated-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.elevated-button.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level1; /// md.comp.elevated-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.elevated-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.elevated-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.elevated-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text) $focus-label-text-color: md-sys-color.$primary; /// md.comp.elevated-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.elevated-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.elevated-button.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level2; /// md.comp.elevated-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text) $hover-label-text-color: md-sys-color.$primary; /// md.comp.elevated-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.elevated-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.elevated-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text) $label-text-color: md-sys-color.$primary; /// md.comp.elevated-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.elevated-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.elevated-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.elevated-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.elevated-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.elevated-button.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.elevated-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text) $pressed-label-text-color: md-sys-color.$primary; /// md.comp.elevated-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.elevated-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.elevated-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.elevated-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $with-icon-focus-icon-color: md-sys-color.$primary; /// md.comp.elevated-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $with-icon-hover-icon-color: md-sys-color.$primary; /// md.comp.elevated-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-color: md-sys-color.$primary; /// md.comp.elevated-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $with-icon-pressed-icon-color: md-sys-color.$primary; /// md.comp.elevated-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-elevated-card.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.elevated-card.disabled.container.opacity (Disabled / Container) $disabled-container-opacity: 0.38; /// md.comp.elevated-card.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.elevated-card.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-low; /// md.comp.elevated-card.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level1; /// md.comp.elevated-card.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.elevated-card.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-medium; /// md.comp.elevated-card.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.elevated-card.disabled.container.color (Disabled / Container) $disabled-container-color: md-sys-color.$surface; /// md.comp.elevated-card.disabled.container.elevation (Disabled / Container) $disabled-container-elevation: md-sys-elevation.$level1; /// md.comp.elevated-card.dragged.container.elevation (Dragged / Container) $dragged-container-elevation: md-sys-elevation.$level4; /// md.comp.elevated-card.dragged.state-layer.color (Dragged / State layer) $dragged-state-layer-color: md-sys-color.$on-surface; /// md.comp.elevated-card.dragged.state-layer.opacity (Dragged / State layer) $dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.elevated-card.focus.container.elevation (Focused / Container) $focus-container-elevation: md-sys-elevation.$level1; /// md.comp.elevated-card.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.elevated-card.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.elevated-card.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.elevated-card.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.elevated-card.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.elevated-card.hover.container.elevation (Hovered / Container) $hover-container-elevation: md-sys-elevation.$level2; /// md.comp.elevated-card.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.elevated-card.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.elevated-card.icon.color (Enabled / Icon) $icon-color: md-sys-color.$primary; /// md.comp.elevated-card.pressed.container.elevation (Pressed (ripple) / Container) $pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.elevated-card.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.elevated-card.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-branded.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.extended-fab.branded.container.height (Enabled / Container) $container-height: 56px; /// md.comp.extended-fab.branded.icon.size (Enabled / Icon) $icon-size: 36px; /// md.comp.extended-fab.branded.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.extended-fab.branded.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.branded.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.extended-fab.branded.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-large; /// md.comp.extended-fab.branded.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.extended-fab.branded.focus.container.elevation (Focused / Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.branded.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.extended-fab.branded.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.extended-fab.branded.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.extended-fab.branded.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$primary; /// md.comp.extended-fab.branded.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.extended-fab.branded.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.branded.hover.container.elevation (Hovered / Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.branded.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$primary; /// md.comp.extended-fab.branded.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.extended-fab.branded.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.branded.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$on-surface; /// md.comp.extended-fab.branded.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.extended-fab.branded.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.extended-fab.branded.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.extended-fab.branded.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.extended-fab.branded.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.extended-fab.branded.lowered.container.color (Enabled / Container) $lowered-container-color: md-sys-color.$surface-container-low; /// md.comp.extended-fab.branded.lowered.container.elevation (Enabled / Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.branded.lowered.focus.container.elevation (Focused / Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.branded.lowered.hover.container.elevation (Hovered / Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.extended-fab.branded.lowered.pressed.container.elevation (Pressed (ripple) / Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.branded.pressed.container.elevation (Pressed (ripple) / Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.branded.pressed.label-text.color (Pressed (ripple) / Label text) $pressed-label-text-color: md-sys-color.$primary; /// md.comp.extended-fab.branded.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.extended-fab.branded.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.extended-fab.branded.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.extended-fab.large.container.height $container-height: 96px; /// md.comp.extended-fab.large.icon-label-space $icon-label-space: 16px; /// md.comp.extended-fab.large.icon.size $icon-size: 36px; /// md.comp.extended-fab.large.leading-space $leading-space: 28px; /// md.comp.extended-fab.large.trailing-space $trailing-space: 28px; /// md.comp.extended-fab.large.container.shape $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.extended-fab.large.label-text @mixin label-text { @include md-sys-typescale.headline-small; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.extended-fab.medium.container.height $container-height: 80px; /// md.comp.extended-fab.medium.icon-label-space $icon-label-space: 12px; /// md.comp.extended-fab.medium.icon.size $icon-size: 28px; /// md.comp.extended-fab.medium.leading-space $leading-space: 26px; /// md.comp.extended-fab.medium.trailing-space $trailing-space: 26px; /// md.comp.extended-fab.medium.container.shape $container-shape: md-sys-shape.$corner-large-increased; /// md.comp.extended-fab.medium.label-text @mixin label-text { @include md-sys-typescale.title-large; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-primary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.extended-fab.primary-container.container.color (Enabled) $container-color: md-sys-color.$primary-container; /// md.comp.extended-fab.primary-container.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.primary-container.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.extended-fab.primary-container.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.primary-container.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.primary-container.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.primary-container.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.primary-container.icon.color (Enabled) $icon-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.label-text.color (Enabled) $label-text-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.primary-container.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary-container.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-primary.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.extended-fab.primary.container.height ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-height: 56px; /// md.comp.extended-fab.primary.icon.size ([Deprecated] Enabled / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $icon-size: 24px; /// md.comp.extended-fab.primary.container.color (Enabled) $container-color: md-sys-color.$primary; /// md.comp.extended-fab.primary.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.primary.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.extended-fab.primary.container.shape ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-shape: md-sys-shape.$corner-large; /// md.comp.extended-fab.primary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.primary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $focus-icon-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-color: md-sys-color.$secondary; /// md.comp.extended-fab.primary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.extended-fab.primary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.extended-fab.primary.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $focus-label-text-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.primary.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.primary.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.primary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.primary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $hover-icon-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $hover-label-text-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.extended-fab.primary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.primary.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.primary.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.primary.icon.color (Enabled) $icon-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.label-text.color (Enabled) $label-text-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.label-text.font ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.extended-fab.primary.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.extended-fab.primary.label-text.size ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.extended-fab.primary.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.extended-fab.primary.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.extended-fab.primary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.primary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.primary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.extended-fab.primary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.primary.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.primary.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.extended-fab.primary.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.extended-fab.primary.label-text.type ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-secondary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.extended-fab.secondary-container.container.color (Enabled) $container-color: md-sys-color.$secondary-container; /// md.comp.extended-fab.secondary-container.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.secondary-container.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.extended-fab.secondary-container.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.secondary-container.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.secondary-container.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.secondary-container.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.secondary-container.icon.color (Enabled) $icon-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.label-text.color (Enabled) $label-text-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.secondary-container.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary-container.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-secondary.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.extended-fab.secondary.container.height ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-height: 56px; /// md.comp.extended-fab.secondary.icon.size ([Deprecated] Enabled / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $icon-size: 24px; /// md.comp.extended-fab.secondary.container.color (Enabled) $container-color: md-sys-color.$secondary; /// md.comp.extended-fab.secondary.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.secondary.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.extended-fab.secondary.container.shape ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-shape: md-sys-shape.$corner-large; /// md.comp.extended-fab.secondary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.secondary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-color: md-sys-color.$secondary; /// md.comp.extended-fab.secondary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.extended-fab.secondary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.extended-fab.secondary.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $focus-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.secondary.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.secondary.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.secondary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.secondary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $hover-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.extended-fab.secondary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.secondary.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.secondary.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.secondary.icon.color (Enabled) $icon-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.label-text.color (Enabled) $label-text-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.label-text.font ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.extended-fab.secondary.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.extended-fab.secondary.label-text.size ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.extended-fab.secondary.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.extended-fab.secondary.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.extended-fab.secondary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.secondary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.secondary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.extended-fab.secondary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.secondary.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.secondary.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-secondary; /// md.comp.extended-fab.secondary.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.extended-fab.secondary.label-text.type ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.extended-fab.small.container.height $container-height: 56px; /// md.comp.extended-fab.small.icon-label-space $icon-label-space: 8px; /// md.comp.extended-fab.small.icon.size $icon-size: 24px; /// md.comp.extended-fab.small.leading-space $leading-space: 16px; /// md.comp.extended-fab.small.trailing-space $trailing-space: 16px; /// md.comp.extended-fab.small.container.shape $container-shape: md-sys-shape.$corner-large; /// md.comp.extended-fab.small.label-text @mixin label-text { @include md-sys-typescale.title-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-surface.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.extended-fab.surface.container.height (Enabled / Container) $container-height: 56px; /// md.comp.extended-fab.surface.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.extended-fab.surface.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.extended-fab.surface.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.surface.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.extended-fab.surface.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-large; /// md.comp.extended-fab.surface.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.extended-fab.surface.focus.container.elevation (Focused / Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.surface.focus.icon.color (Focused / Icon) $focus-icon-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.extended-fab.surface.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.extended-fab.surface.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.extended-fab.surface.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.surface.hover.container.elevation (Hovered / Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.surface.hover.icon.color (Hovered / Icon) $hover-icon-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.surface.icon.color (Enabled / Icon) $icon-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.extended-fab.surface.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.extended-fab.surface.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.extended-fab.surface.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.extended-fab.surface.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.extended-fab.surface.lowered.container.color (Enabled / Container) $lowered-container-color: md-sys-color.$surface-container-low; /// md.comp.extended-fab.surface.lowered.container.elevation (Enabled / Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.surface.lowered.focus.container.elevation (Focused / Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.surface.lowered.hover.container.elevation (Hovered / Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.extended-fab.surface.lowered.pressed.container.elevation (Pressed (ripple) / Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.surface.pressed.container.elevation (Pressed (ripple) / Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.surface.pressed.icon.color (Pressed (ripple) / Icon) $pressed-icon-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.pressed.label-text.color (Pressed (ripple) / Label text) $pressed-label-text-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.extended-fab.surface.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.extended-fab.surface.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-tertiary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.extended-fab.tertiary-container.container.color (Enabled) $container-color: md-sys-color.$tertiary-container; /// md.comp.extended-fab.tertiary-container.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.tertiary-container.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.extended-fab.tertiary-container.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.tertiary-container.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.tertiary-container.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.tertiary-container.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.tertiary-container.icon.color (Enabled) $icon-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.label-text.color (Enabled) $label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.tertiary-container.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary-container.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab-tertiary.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.extended-fab.tertiary.container.height ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-height: 56px; /// md.comp.extended-fab.tertiary.icon.size ([Deprecated] Enabled / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $icon-size: 24px; /// md.comp.extended-fab.tertiary.container.color (Enabled) $container-color: md-sys-color.$tertiary; /// md.comp.extended-fab.tertiary.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.tertiary.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.extended-fab.tertiary.container.shape ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-shape: md-sys-shape.$corner-large; /// md.comp.extended-fab.tertiary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.tertiary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $focus-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-color: md-sys-color.$secondary; /// md.comp.extended-fab.tertiary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.extended-fab.tertiary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.extended-fab.tertiary.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $focus-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.tertiary.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.tertiary.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.extended-fab.tertiary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.tertiary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $hover-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $hover-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.extended-fab.tertiary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.tertiary.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.extended-fab.tertiary.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.extended-fab.tertiary.icon.color (Enabled) $icon-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.label-text.color (Enabled) $label-text-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.label-text.font ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.extended-fab.tertiary.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.extended-fab.tertiary.label-text.size ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.extended-fab.tertiary.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.extended-fab.tertiary.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.extended-fab.tertiary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.tertiary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.tertiary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.extended-fab.tertiary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.extended-fab.tertiary.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.extended-fab.tertiary.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.extended-fab.tertiary.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.extended-fab.tertiary.label-text.type ([Deprecated] Enabled / [Deprecated] Label text) /// /// @deprecated Token is deprecated. @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-extended-fab.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.extended-fab.container.height $container-height: 56px; /// md.comp.extended-fab.icon-label-space $icon-label-space: 12px; /// md.comp.extended-fab.icon.size $icon-size: 24px; /// md.comp.extended-fab.leading-space $leading-space: 16px; /// md.comp.extended-fab.trailing-space $trailing-space: 20px; /// md.comp.extended-fab.container.shape $container-shape: md-sys-shape.$corner-large; /// md.comp.extended-fab.label-text @mixin label-text { @include md-sys-typescale.label-large; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-branded-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.branded.large.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 96px; /// md.comp.fab.branded.large.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 96px; /// md.comp.fab.branded.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 48px; /// md.comp.fab.branded.large.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.fab.branded.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.branded.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.branded.large.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.fab.branded.large.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.fab.branded.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.branded.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.branded.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.branded.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.branded.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.fab.branded.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.branded.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.branded.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.fab.branded.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.branded.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon) /// /// @deprecated Bug fix. The branded FAB is using a four-colored icon. $icon-color: md-sys-color.$on-secondary; /// md.comp.fab.branded.large.lowered.container.color ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-color: md-sys-color.$surface-container-low; /// md.comp.fab.branded.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.branded.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.branded.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.branded.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.branded.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.branded.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.fab.branded.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-branded.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.branded.container.height (Enabled / Container) $container-height: 56px; /// md.comp.fab.branded.container.width (Enabled / Container) $container-width: 56px; /// md.comp.fab.branded.icon.size (Enabled / Icon) $icon-size: 36px; /// md.comp.fab.branded.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.fab.branded.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.branded.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.branded.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-large; /// md.comp.fab.branded.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.fab.branded.focus.container.elevation (Focused / Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.branded.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.branded.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.branded.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.fab.branded.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.branded.hover.container.elevation (Hovered / Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.branded.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.fab.branded.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.branded.indicator.outline.offset (Focused / Focus indicator) $indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.branded.lowered.container.color (Enabled / Container) $lowered-container-color: md-sys-color.$surface-container-low; /// md.comp.fab.branded.lowered.container.elevation (Enabled / Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.branded.lowered.focus.container.elevation (Focused / Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.branded.lowered.hover.container.elevation (Hovered / Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.branded.lowered.pressed.container.elevation (Pressed (ripple) / Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.branded.pressed.container.elevation (Pressed (ripple) / Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.branded.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.fab.branded.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.fab.large.container.height $container-height: 96px; /// md.comp.fab.large.container.width $container-width: 96px; /// md.comp.fab.large.icon.size $icon-size: 36px; /// md.comp.fab.large.container.shape $container-shape: md-sys-shape.$corner-extra-large; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.fab.medium.container.height $container-height: 80px; /// md.comp.fab.medium.container.width $container-width: 80px; /// md.comp.fab.medium.icon.size $icon-size: 28px; /// md.comp.fab.medium.container.shape $container-shape: md-sys-shape.$corner-large-increased; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-menu-primary-close-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab-menu.primary.close-button.container.color (Enabled) $container-color: md-sys-color.$primary; /// md.comp.fab-menu.primary.close-button.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab-menu.primary.close-button.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.primary.close-button.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary; /// md.comp.fab-menu.primary.close-button.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.fab-menu.primary.close-button.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab-menu.primary.close-button.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab-menu.primary.close-button.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary; /// md.comp.fab-menu.primary.close-button.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.fab-menu.primary.close-button.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab-menu.primary.close-button.icon.color (Enabled) $icon-color: md-sys-color.$on-primary; /// md.comp.fab-menu.primary.close-button.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.primary.close-button.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary; /// md.comp.fab-menu.primary.close-button.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.fab-menu.primary.close-button.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-menu-primary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab-menu.primary-container.list-item.container.color (Enabled) $list-item-container-color: md-sys-color.$primary-container; /// md.comp.fab-menu.primary-container.list-item.container.shadow-color (Enabled) $list-item-container-shadow-color: md-sys-color.$shadow; /// md.comp.fab-menu.primary-container.list-item.focused.container.elevation (Focused) $list-item-focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.primary-container.list-item.focused.icon.color (Focused) $list-item-focused-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.focused.label-text.color (Focused) $list-item-focused-label-text-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.focused.state-layer.color (Focused) $list-item-focused-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.focused.state-layer.opacity (Focused) $list-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab-menu.primary-container.list-item.hovered.container.elevation (Hovered) $list-item-hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab-menu.primary-container.list-item.hovered.icon.color (Hovered) $list-item-hovered-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.hovered.label-text.color (Hovered) $list-item-hovered-label-text-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.hovered.state-layer.color (Hovered) $list-item-hovered-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.hovered.state-layer.opacity (Hovered) $list-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab-menu.primary-container.list-item.icon.color (Enabled) $list-item-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.label-text.color (Enabled) $list-item-label-text-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.pressed.container.elevation (Pressed) $list-item-pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.primary-container.list-item.pressed.icon.color (Pressed) $list-item-pressed-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.pressed.label-text.color (Pressed) $list-item-pressed-label-text-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.pressed.state-layer.color (Pressed) $list-item-pressed-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab-menu.primary-container.list-item.pressed.state-layer.opacity (Pressed) $list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-menu-secondary-close-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab-menu.secondary.close-button.container.color (Enabled) $container-color: md-sys-color.$secondary; /// md.comp.fab-menu.secondary.close-button.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab-menu.secondary.close-button.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.secondary.close-button.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-secondary; /// md.comp.fab-menu.secondary.close-button.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-secondary; /// md.comp.fab-menu.secondary.close-button.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab-menu.secondary.close-button.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab-menu.secondary.close-button.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-secondary; /// md.comp.fab-menu.secondary.close-button.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-secondary; /// md.comp.fab-menu.secondary.close-button.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab-menu.secondary.close-button.icon.color (Enabled) $icon-color: md-sys-color.$on-secondary; /// md.comp.fab-menu.secondary.close-button.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.secondary.close-button.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-secondary; /// md.comp.fab-menu.secondary.close-button.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-secondary; /// md.comp.fab-menu.secondary.close-button.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-menu-secondary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab-menu.secondary-container.list-item.container.color (Enabled) $list-item-container-color: md-sys-color.$secondary-container; /// md.comp.fab-menu.secondary-container.list-item.container.shadow-color (Enabled) $list-item-container-shadow-color: md-sys-color.$shadow; /// md.comp.fab-menu.secondary-container.list-item.focused.container.elevation (Focused) $list-item-focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.secondary-container.list-item.focused.icon.color (Focused) $list-item-focused-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.focused.label-text.color (Focused) $list-item-focused-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.focused.state-layer.color (Focused) $list-item-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.focused.state-layer.opacity (Focused) $list-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab-menu.secondary-container.list-item.hovered.container.elevation (Hovered) $list-item-hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab-menu.secondary-container.list-item.hovered.icon.color (Hovered) $list-item-hovered-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.hovered.label-text.color (Hovered) $list-item-hovered-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.hovered.state-layer.color (Hovered) $list-item-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.hovered.state-layer.opacity (Hovered) $list-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab-menu.secondary-container.list-item.icon.color (Enabled) $list-item-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.label-text.color (Enabled) $list-item-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.pressed.container.elevation (Pressed) $list-item-pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.secondary-container.list-item.pressed.icon.color (Pressed) $list-item-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.pressed.label-text.color (Pressed) $list-item-pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.pressed.state-layer.color (Pressed) $list-item-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab-menu.secondary-container.list-item.pressed.state-layer.opacity (Pressed) $list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-menu-tertiary-close-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab-menu.tertiary.close-button.container.color (Enabled) $container-color: md-sys-color.$tertiary; /// md.comp.fab-menu.tertiary.close-button.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab-menu.tertiary.close-button.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.tertiary.close-button.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-tertiary; /// md.comp.fab-menu.tertiary.close-button.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.fab-menu.tertiary.close-button.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab-menu.tertiary.close-button.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab-menu.tertiary.close-button.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-tertiary; /// md.comp.fab-menu.tertiary.close-button.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.fab-menu.tertiary.close-button.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab-menu.tertiary.close-button.icon.color (Enabled) $icon-color: md-sys-color.$on-tertiary; /// md.comp.fab-menu.tertiary.close-button.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.tertiary.close-button.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-tertiary; /// md.comp.fab-menu.tertiary.close-button.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.fab-menu.tertiary.close-button.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-menu-tertiary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab-menu.tertiary-container.list-item.container.color (Enabled) $list-item-container-color: md-sys-color.$tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.container.shadow-color (Enabled) $list-item-container-shadow-color: md-sys-color.$shadow; /// md.comp.fab-menu.tertiary-container.list-item.focused.container.elevation (Focused) $list-item-focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.tertiary-container.list-item.focused.icon.color (Focused) $list-item-focused-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.focused.label-text.color (Focused) $list-item-focused-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.focused.state-layer.color (Focused) $list-item-focused-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.focused.state-layer.opacity (Focused) $list-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab-menu.tertiary-container.list-item.hovered.container.elevation (Hovered) $list-item-hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab-menu.tertiary-container.list-item.hovered.icon.color (Hovered) $list-item-hovered-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.hovered.label-text.color (Hovered) $list-item-hovered-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.hovered.state-layer.color (Hovered) $list-item-hovered-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.hovered.state-layer.opacity (Hovered) $list-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab-menu.tertiary-container.list-item.icon.color (Enabled) $list-item-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.label-text.color (Enabled) $list-item-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.pressed.container.elevation (Pressed) $list-item-pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.tertiary-container.list-item.pressed.icon.color (Pressed) $list-item-pressed-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.pressed.label-text.color (Pressed) $list-item-pressed-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.pressed.state-layer.color (Pressed) $list-item-pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab-menu.tertiary-container.list-item.pressed.state-layer.opacity (Pressed) $list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-menu.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.fab-menu.close-button.between-space (Close button) $close-button-between-space: 8px; /// md.comp.fab-menu.close-button.container.height (Close button) $close-button-container-height: 56px; /// md.comp.fab-menu.close-button.container.width (Close button) $close-button-container-width: 56px; /// md.comp.fab-menu.close-button.icon.size (Close button) $close-button-icon-size: 20px; /// md.comp.fab-menu.menu-item.between-space (List item) $menu-item-between-space: 4px; /// md.comp.fab-menu.menu-item.container.height (List item) $menu-item-container-height: 56px; /// md.comp.fab-menu.menu-item.icon-label-space (List item) $menu-item-icon-label-space: 8px; /// md.comp.fab-menu.menu-item.icon.size (List item) $menu-item-icon-size: 24px; /// md.comp.fab-menu.menu-item.leading-space (List item) $menu-item-leading-space: 24px; /// md.comp.fab-menu.menu-item.trailing-space (List item) $menu-item-trailing-space: 24px; /// md.comp.fab-menu.close-button.container.elevation (Close button) $close-button-container-elevation: md-sys-elevation.$level3; /// md.comp.fab-menu.close-button.container.shape (Close button) $close-button-container-shape: md-sys-shape.$corner-full; /// md.comp.fab-menu.menu-item.container.elevation (List item) $menu-item-container-elevation: md-sys-elevation.$level0; /// md.comp.fab-menu.menu-item.container.shape (List item) $menu-item-container-shape: md-sys-shape.$corner-full; /// md.comp.fab-menu.menu-item.label-text (List item) @mixin menu-item-label-text { @include md-sys-typescale.title-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-primary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab.primary-container.container.color (Enabled) $container-color: md-sys-color.$primary-container; /// md.comp.fab.primary-container.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary-container.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.primary-container.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary-container.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary-container.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary-container.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.primary-container.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.primary-container.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary-container.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary-container.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.primary-container.icon.color (Enabled) $icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary-container.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary-container.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary-container.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary-container.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-primary-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.primary.large.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 96px; /// md.comp.fab.primary.large.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 96px; /// md.comp.fab.primary.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 36px; /// md.comp.fab.primary.large.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$primary-container; /// md.comp.fab.primary.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.primary.large.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.fab.primary.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.large.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.primary.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.primary.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.primary.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.primary.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.primary.large.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.primary.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.primary.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.large.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $pressed-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-primary-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.primary.small.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.fab.primary.small.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 40px; /// md.comp.fab.primary.small.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 24px; /// md.comp.fab.primary.small.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$primary-container; /// md.comp.fab.primary.small.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.small.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.primary.small.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-medium; /// md.comp.fab.primary.small.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.small.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.small.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.primary.small.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.primary.small.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.primary.small.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.small.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.primary.small.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.primary.small.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.small.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.small.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.primary.small.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.small.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.small.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.small.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.primary.small.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.small.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.small.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $pressed-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.small.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.small.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-primary.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.primary.container.height ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-height: 56px; /// md.comp.fab.primary.container.width ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-width: 56px; /// md.comp.fab.primary.icon.size ([Deprecated] Enabled / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $icon-size: 24px; /// md.comp.fab.primary.container.color (Enabled) $container-color: md-sys-color.$primary; /// md.comp.fab.primary.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.primary.container.shape ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-shape: md-sys-shape.$corner-large; /// md.comp.fab.primary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $focus-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.primary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.primary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.primary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.primary.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary; /// md.comp.fab.primary.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.fab.primary.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.primary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.primary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $hover-icon-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.fab.primary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.primary.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.primary.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary; /// md.comp.fab.primary.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.fab.primary.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.primary.icon.color (Enabled) $icon-color: md-sys-color.$on-primary; /// md.comp.fab.primary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.primary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.primary.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.primary.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary; /// md.comp.fab.primary.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.fab.primary.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-secondary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab.secondary-container.container.color (Enabled) $container-color: md-sys-color.$secondary-container; /// md.comp.fab.secondary-container.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary-container.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.secondary-container.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary-container.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary-container.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary-container.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.secondary-container.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.secondary-container.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary-container.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary-container.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.secondary-container.icon.color (Enabled) $icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary-container.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary-container.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary-container.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary-container.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-secondary-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.secondary.large.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 96px; /// md.comp.fab.secondary.large.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 96px; /// md.comp.fab.secondary.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 36px; /// md.comp.fab.secondary.large.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$secondary-container; /// md.comp.fab.secondary.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.secondary.large.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.fab.secondary.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.large.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.secondary.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.secondary.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.secondary.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.secondary.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.secondary.large.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.secondary.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.secondary.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.large.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-secondary-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.secondary.small.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.fab.secondary.small.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 40px; /// md.comp.fab.secondary.small.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 24px; /// md.comp.fab.secondary.small.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$secondary-container; /// md.comp.fab.secondary.small.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.small.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.secondary.small.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-medium; /// md.comp.fab.secondary.small.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.small.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.small.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.secondary.small.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.secondary.small.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.secondary.small.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.small.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.secondary.small.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.secondary.small.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.small.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.small.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.secondary.small.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.small.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.small.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.small.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.secondary.small.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.small.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.small.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.small.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.small.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-secondary.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.secondary.container.height ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-height: 56px; /// md.comp.fab.secondary.container.width ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-width: 56px; /// md.comp.fab.secondary.icon.size ([Deprecated] Enabled / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $icon-size: 24px; /// md.comp.fab.secondary.container.color (Enabled) $container-color: md-sys-color.$secondary; /// md.comp.fab.secondary.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.secondary.container.shape ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-shape: md-sys-shape.$corner-large; /// md.comp.fab.secondary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.secondary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.secondary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.secondary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.secondary.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-secondary; /// md.comp.fab.secondary.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-secondary; /// md.comp.fab.secondary.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.secondary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.secondary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.fab.secondary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.secondary.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.secondary.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-secondary; /// md.comp.fab.secondary.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-secondary; /// md.comp.fab.secondary.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.secondary.icon.color (Enabled) $icon-color: md-sys-color.$on-secondary; /// md.comp.fab.secondary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.secondary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.secondary.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.secondary.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-secondary; /// md.comp.fab.secondary.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-secondary; /// md.comp.fab.secondary.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.fab.small.container.height $container-height: 40px; /// md.comp.fab.small.container.width $container-width: 40px; /// md.comp.fab.small.icon.size $icon-size: 24px; /// md.comp.fab.small.container.shape $container-shape: md-sys-shape.$corner-medium; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-surface-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.surface.large.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 96px; /// md.comp.fab.surface.large.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 96px; /// md.comp.fab.surface.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 36px; /// md.comp.fab.surface.large.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.fab.surface.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.surface.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.surface.large.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.fab.surface.large.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.fab.surface.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.surface.large.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$primary; /// md.comp.fab.surface.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.surface.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.surface.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.surface.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.fab.surface.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.surface.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.surface.large.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$primary; /// md.comp.fab.surface.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.fab.surface.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.surface.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$primary; /// md.comp.fab.surface.large.lowered.container.color ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-color: md-sys-color.$surface-container-low; /// md.comp.fab.surface.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.surface.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.surface.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.surface.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.surface.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.surface.large.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $pressed-icon-color: md-sys-color.$primary; /// md.comp.fab.surface.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.fab.surface.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-surface.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.surface.container.height (Enabled / Container) $container-height: 56px; /// md.comp.fab.surface.container.width (Enabled / Container) $container-width: 56px; /// md.comp.fab.surface.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.fab.surface.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.fab.surface.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.surface.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.surface.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-large; /// md.comp.fab.surface.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.fab.surface.focus.container.elevation (Focused / Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.surface.focus.icon.color (Focused / Icon) $focus-icon-color: md-sys-color.$primary; /// md.comp.fab.surface.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.surface.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.surface.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.surface.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.fab.surface.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.surface.hover.container.elevation (Hovered / Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.surface.hover.icon.color (Hovered / Icon) $hover-icon-color: md-sys-color.$primary; /// md.comp.fab.surface.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.fab.surface.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.surface.icon.color (Enabled / Icon) $icon-color: md-sys-color.$primary; /// md.comp.fab.surface.lowered.container.color (Enabled / Container) $lowered-container-color: md-sys-color.$surface-container-low; /// md.comp.fab.surface.lowered.container.elevation (Enabled / Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.surface.lowered.focus.container.elevation (Focused / Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.surface.lowered.hover.container.elevation (Hovered / Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.surface.lowered.pressed.container.elevation (Pressed (ripple) / Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.surface.pressed.container.elevation (Pressed (ripple) / Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.surface.pressed.icon.color (Pressed (ripple) / Icon) $pressed-icon-color: md-sys-color.$primary; /// md.comp.fab.surface.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.fab.surface.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-tertiary-container.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-state'; /// md.comp.fab.tertiary-container.container.color (Enabled) $container-color: md-sys-color.$tertiary-container; /// md.comp.fab.tertiary-container.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary-container.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.tertiary-container.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary-container.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary-container.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary-container.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.tertiary-container.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.tertiary-container.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary-container.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary-container.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.tertiary-container.icon.color (Enabled) $icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary-container.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary-container.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary-container.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary-container.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-tertiary-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.tertiary.large.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 96px; /// md.comp.fab.tertiary.large.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 96px; /// md.comp.fab.tertiary.large.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 36px; /// md.comp.fab.tertiary.large.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$tertiary-container; /// md.comp.fab.tertiary.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.large.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.tertiary.large.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.fab.tertiary.large.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.large.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.large.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.tertiary.large.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.tertiary.large.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.tertiary.large.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.large.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.tertiary.large.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.tertiary.large.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.large.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.large.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.tertiary.large.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.large.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.large.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.large.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.tertiary.large.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.large.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.large.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $pressed-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.large.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.large.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-tertiary-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.tertiary.small.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.fab.tertiary.small.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 40px; /// md.comp.fab.tertiary.small.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 24px; /// md.comp.fab.tertiary.small.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$tertiary-container; /// md.comp.fab.tertiary.small.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.small.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.tertiary.small.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-medium; /// md.comp.fab.tertiary.small.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.small.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.small.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.tertiary.small.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.tertiary.small.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.tertiary.small.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.small.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.tertiary.small.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.tertiary.small.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.small.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.small.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.tertiary.small.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.small.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.small.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.small.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.tertiary.small.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.small.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.small.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $pressed-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.small.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.small.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab-tertiary.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.fab.tertiary.container.height ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-height: 56px; /// md.comp.fab.tertiary.container.width ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-width: 56px; /// md.comp.fab.tertiary.icon.size ([Deprecated] Enabled / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $icon-size: 24px; /// md.comp.fab.tertiary.container.color (Enabled) $container-color: md-sys-color.$tertiary; /// md.comp.fab.tertiary.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.fab.tertiary.container.shape ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $container-shape: md-sys-shape.$corner-large; /// md.comp.fab.tertiary.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $focus-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $focus-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-color: md-sys-color.$secondary; /// md.comp.fab.tertiary.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.fab.tertiary.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) /// /// @deprecated Token is deprecated. $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.fab.tertiary.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.tertiary.focused.container.elevation (Focused) $focused-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-tertiary; /// md.comp.fab.tertiary.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.fab.tertiary.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.fab.tertiary.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $hover-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.tertiary.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $hover-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.fab.tertiary.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.tertiary.hovered.container.elevation (Hovered) $hovered-container-elevation: md-sys-elevation.$level4; /// md.comp.fab.tertiary.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-tertiary; /// md.comp.fab.tertiary.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.fab.tertiary.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.fab.tertiary.icon.color (Enabled) $icon-color: md-sys-color.$on-tertiary; /// md.comp.fab.tertiary.lowered.container.elevation ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.lowered.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.lowered.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.fab.tertiary.lowered.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) /// /// @deprecated Token is deprecated. $lowered-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.fab.tertiary.pressed.container.elevation (Pressed) $pressed-container-elevation: md-sys-elevation.$level3; /// md.comp.fab.tertiary.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-tertiary; /// md.comp.fab.tertiary.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.fab.tertiary.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-fab.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.fab.container.height $container-height: 56px; /// md.comp.fab.container.width $container-width: 56px; /// md.comp.fab.icon.size $icon-size: 24px; /// md.comp.fab.container.shape $container-shape: md-sys-shape.$corner-large; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-autocomplete.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.filled-autocomplete.menu.cascading-menu-indicator.icon.size (Enabled / Icon) $menu-cascading-menu-indicator-icon-size: 24px; /// md.comp.filled-autocomplete.menu.divider.height (Enabled / Divider) /// /// @deprecated Deprecating per b/262592125 $menu-divider-height: 1px; /// md.comp.filled-autocomplete.menu.list-item.container.height (Enabled / Container) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-container-height: 48px; /// md.comp.filled-autocomplete.text-field.active-indicator.height (Enabled / Active indicator) $text-field-active-indicator-height: 1px; /// md.comp.filled-autocomplete.text-field.container.height (Enabled / Container) /// /// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height. $text-field-container-height: 56px; /// md.comp.filled-autocomplete.text-field.disabled.active-indicator.height (Disabled / Active indicator) $text-field-disabled-active-indicator-height: 1px; /// md.comp.filled-autocomplete.text-field.disabled.active-indicator.opacity (Disabled / Active indicator) $text-field-disabled-active-indicator-opacity: 0.38; /// md.comp.filled-autocomplete.text-field.disabled.container.opacity (Disabled / Container) $text-field-disabled-container-opacity: 0.04; /// md.comp.filled-autocomplete.text-field.disabled.input-text.opacity (Disabled / Input text) $text-field-disabled-input-text-opacity: 0.38; /// md.comp.filled-autocomplete.text-field.disabled.label-text.opacity (Disabled / Label text) $text-field-disabled-label-text-opacity: 0.38; /// md.comp.filled-autocomplete.text-field.disabled.leading-icon.opacity (Disabled / Leading icon) $text-field-disabled-leading-icon-opacity: 0.38; /// md.comp.filled-autocomplete.text-field.disabled.supporting-text.opacity (Disabled / Supporting text) $text-field-disabled-supporting-text-opacity: 0.38; /// md.comp.filled-autocomplete.text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon) $text-field-disabled-trailing-icon-opacity: 0.38; /// md.comp.filled-autocomplete.text-field.focus.active-indicator.height (Focused / Active indicator) $text-field-focus-active-indicator-height: 2px; /// md.comp.filled-autocomplete.text-field.hover.active-indicator.height (Hovered / Active indicator) $text-field-hover-active-indicator-height: 1px; /// md.comp.filled-autocomplete.text-field.leading-icon.size (Enabled / Leading icon) $text-field-leading-icon-size: 20px; /// md.comp.filled-autocomplete.text-field.trailing-icon.size (Enabled / Trailing icon) $text-field-trailing-icon-size: 24px; /// md.comp.filled-autocomplete.menu.cascading-menu-indicator.icon.color (Enabled / Icon) $menu-cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.menu.container.color (Enabled / Container) $menu-container-color: md-sys-color.$surface-container; /// md.comp.filled-autocomplete.menu.container.elevation (Enabled / Container) $menu-container-elevation: md-sys-elevation.$level2; /// md.comp.filled-autocomplete.menu.container.shadow-color (Enabled / Container) $menu-container-shadow-color: md-sys-color.$shadow; /// md.comp.filled-autocomplete.menu.container.shape (Enabled / Container) $menu-container-shape: md-sys-shape.$corner-extra-small; /// md.comp.filled-autocomplete.menu.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $menu-container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.filled-autocomplete.menu.divider.color (Enabled / Divider) /// /// @deprecated Deprecating per b/262592125 $menu-divider-color: md-sys-color.$surface-variant; /// md.comp.filled-autocomplete.menu.list-item.label-text.color (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.menu.list-item.label-text.font (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.filled-autocomplete.menu.list-item.label-text.line-height (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.filled-autocomplete.menu.list-item.label-text.size (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.filled-autocomplete.menu.list-item.label-text.tracking (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.filled-autocomplete.menu.list-item.label-text.weight (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.filled-autocomplete.menu.list-item.selected.container.color (Enabled / Container) /// /// @deprecated Deprecating per bug b/262592125 $menu-list-item-selected-container-color: md-sys-color.$surface-container-highest; /// md.comp.filled-autocomplete.text-field.active-indicator.color (Enabled / Active indicator) $text-field-active-indicator-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.caret.color (Enabled / Caret) $text-field-caret-color: md-sys-color.$primary; /// md.comp.filled-autocomplete.text-field.container.color (Enabled / Container) $text-field-container-color: md-sys-color.$surface-container-highest; /// md.comp.filled-autocomplete.text-field.container.shape (Enabled / Container) $text-field-container-shape: md-sys-shape.$corner-extra-small-top; /// md.comp.filled-autocomplete.text-field.disabled.active-indicator.color (Disabled / Active indicator) $text-field-disabled-active-indicator-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.disabled.container.color (Disabled / Container) $text-field-disabled-container-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.disabled.input-text.color (Disabled / Input text) $text-field-disabled-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.disabled.label-text.color (Disabled / Label text) $text-field-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.disabled.leading-icon.color (Disabled / Leading icon) $text-field-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.disabled.supporting-text.color (Disabled / Supporting text) $text-field-disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.disabled.trailing-icon.color (Disabled / Trailing icon) $text-field-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.error.active-indicator.color (Error) $text-field-error-active-indicator-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.focus.active-indicator.color (Error / Focus) $text-field-error-focus-active-indicator-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.focus.caret.color (Error / Focus) $text-field-error-focus-caret-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.focus.input-text.color (Error / Focus) $text-field-error-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.error.focus.label-text.color (Error / Focus) $text-field-error-focus-label-text-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.focus.leading-icon.color (Error / Focus) $text-field-error-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.error.focus.supporting-text.color (Error / Focus) $text-field-error-focus-supporting-text-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.focus.trailing-icon.color (Error / Focus) $text-field-error-focus-trailing-icon-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.hover.active-indicator.color (Error / Hover) $text-field-error-hover-active-indicator-color: md-sys-color.$on-error-container; /// md.comp.filled-autocomplete.text-field.error.hover.input-text.color (Error / Hover) $text-field-error-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.error.hover.label-text.color (Error / Hover) $text-field-error-hover-label-text-color: md-sys-color.$on-error-container; /// md.comp.filled-autocomplete.text-field.error.hover.leading-icon.color (Error / Hover) $text-field-error-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.error.hover.state-layer.color (Error / Hover) $text-field-error-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.error.hover.state-layer.opacity (Error / Hover) $text-field-error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-autocomplete.text-field.error.hover.supporting-text.color (Error / Hover) $text-field-error-hover-supporting-text-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.hover.trailing-icon.color (Error / Hover) $text-field-error-hover-trailing-icon-color: md-sys-color.$on-error-container; /// md.comp.filled-autocomplete.text-field.error.input-text.color (Error) $text-field-error-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.error.label-text.color (Error) $text-field-error-label-text-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.leading-icon.color (Error) $text-field-error-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.error.supporting-text.color (Error) $text-field-error-supporting-text-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.error.trailing-icon.color (Error) $text-field-error-trailing-icon-color: md-sys-color.$error; /// md.comp.filled-autocomplete.text-field.focus.active-indicator.color (Focused / Active indicator) $text-field-focus-active-indicator-color: md-sys-color.$primary; /// md.comp.filled-autocomplete.text-field.focus.input-text.color (Focused / Input text) $text-field-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.focus.label-text.color (Focused / Label text) $text-field-focus-label-text-color: md-sys-color.$primary; /// md.comp.filled-autocomplete.text-field.focus.leading-icon.color (Focused / Leading icon) $text-field-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.focus.supporting-text.color (Focused / Supporting text) $text-field-focus-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.focus.trailing-icon.color (Focused / Trailing icon) $text-field-focus-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.hover.active-indicator.color (Hovered / Active indicator) $text-field-hover-active-indicator-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.hover.input-text.color (Hovered / Input text) $text-field-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.hover.label-text.color (Hovered / Label text) $text-field-hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.hover.leading-icon.color (Hovered / Leading icon) $text-field-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.hover.state-layer.color (Hovered / State layer) $text-field-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.hover.state-layer.opacity (Hovered / State layer) $text-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-autocomplete.text-field.hover.supporting-text.color (Hovered / Supporting text) $text-field-hover-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.hover.trailing-icon.color (Hovered / Trailing icon) $text-field-hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.input-text.color (Enabled / Input text) $text-field-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-autocomplete.text-field.input-text.font (Enabled / Input text) $text-field-input-text-font: md-sys-typescale.$body-large-font; /// md.comp.filled-autocomplete.text-field.input-text.line-height (Enabled / Input text) $text-field-input-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.filled-autocomplete.text-field.input-text.size (Enabled / Input text) $text-field-input-text-size: md-sys-typescale.$body-large-size; /// md.comp.filled-autocomplete.text-field.input-text.tracking (Enabled / Input text) $text-field-input-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.filled-autocomplete.text-field.input-text.weight (Enabled / Input text) $text-field-input-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.filled-autocomplete.text-field.label-text.color (Enabled / Label text) $text-field-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.label-text.font (Enabled / Label text) $text-field-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.filled-autocomplete.text-field.label-text.line-height (Enabled / Label text) $text-field-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.filled-autocomplete.text-field.label-text.populated.line-height (Enabled / Label text) $text-field-label-text-populated-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.filled-autocomplete.text-field.label-text.populated.size (Enabled / Label text) $text-field-label-text-populated-size: md-sys-typescale.$body-small-size; /// md.comp.filled-autocomplete.text-field.label-text.size (Enabled / Label text) $text-field-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.filled-autocomplete.text-field.label-text.tracking (Enabled / Label text) $text-field-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.filled-autocomplete.text-field.label-text.weight (Enabled / Label text) $text-field-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.filled-autocomplete.text-field.leading-icon.color (Enabled / Leading icon) $text-field-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.supporting-text.color (Enabled / Supporting text) $text-field-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.text-field.supporting-text.font (Enabled / Supporting text) $text-field-supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.filled-autocomplete.text-field.supporting-text.line-height (Enabled / Supporting text) $text-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.filled-autocomplete.text-field.supporting-text.size (Enabled / Supporting text) $text-field-supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.filled-autocomplete.text-field.supporting-text.tracking (Enabled / Supporting text) $text-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.filled-autocomplete.text-field.supporting-text.weight (Enabled / Supporting text) $text-field-supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.filled-autocomplete.text-field.trailing-icon.color (Enabled / Trailing icon) $text-field-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-autocomplete.menu.list-item.label-text.type (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 @mixin menu-list-item-label-text-type { font-family: $menu-list-item-label-text-font; font-size: $menu-list-item-label-text-size; font-weight: $menu-list-item-label-text-weight; letter-spacing: $menu-list-item-label-text-tracking; line-height: $menu-list-item-label-text-line-height; } /// md.comp.filled-autocomplete.text-field.input-text.type (Enabled / Input text) @mixin text-field-input-text-type { font-family: $text-field-input-text-font; font-size: $text-field-input-text-size; font-weight: $text-field-input-text-weight; letter-spacing: $text-field-input-text-tracking; line-height: $text-field-input-text-line-height; } /// md.comp.filled-autocomplete.text-field.label-text.type (Enabled / Label text) @mixin text-field-label-text-type { font-family: $text-field-label-text-font; font-size: $text-field-label-text-size; font-weight: $text-field-label-text-weight; letter-spacing: $text-field-label-text-tracking; line-height: $text-field-label-text-line-height; } /// md.comp.filled-autocomplete.text-field.supporting-text.type (Enabled / Supporting text) @mixin text-field-supporting-text-type { font-family: $text-field-supporting-text-font; font-size: $text-field-supporting-text-size; font-weight: $text-field-supporting-text-weight; letter-spacing: $text-field-supporting-text-tracking; line-height: $text-field-supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.filled-button.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.filled-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-opacity: 0.12; /// md.comp.filled-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-opacity: 0.38; /// md.comp.filled-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-opacity: 0.38; /// md.comp.filled-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-size: 18px; /// md.comp.filled-button.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$primary; /// md.comp.filled-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.filled-button.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.filled-button.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.filled-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.filled-button.disabled.container.elevation ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-button.dragged.container.elevation ([Deprecated] Dragged / [Deprecated] Container) /// /// @deprecated Bug fix. Filled buttons do not provide a dragged state. $dragged-container-elevation: md-sys-elevation.$level3; /// md.comp.filled-button.dragged.label-text.color ([Deprecated] Dragged / [Deprecated] Label text) /// /// @deprecated Bug fix. Filled buttons do not provide a dragged state. $dragged-label-text-color: md-sys-color.$on-primary; /// md.comp.filled-button.dragged.state-layer.color ([Deprecated] Dragged / [Deprecated] State layer) /// /// @deprecated Bug fix. Filled buttons do not provide a dragged state. $dragged-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-button.dragged.state-layer.opacity ([Deprecated] Dragged / [Deprecated] State layer) /// /// @deprecated Bug fix. Filled buttons do not provide a dragged state. $dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.filled-button.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.filled-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.filled-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.filled-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text) $focus-label-text-color: md-sys-color.$on-primary; /// md.comp.filled-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filled-button.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level1; /// md.comp.filled-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text) $hover-label-text-color: md-sys-color.$on-primary; /// md.comp.filled-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text) $label-text-color: md-sys-color.$on-primary; /// md.comp.filled-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.filled-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.filled-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.filled-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.filled-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.filled-button.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text) $pressed-label-text-color: md-sys-color.$on-primary; /// md.comp.filled-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.filled-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.filled-button.with-icon.dragged.icon.color ([Deprecated] Dragged / [Deprecated] Icon) /// /// @deprecated Bug fix. Filled buttons do not provide a dragged state. $with-icon-dragged-icon-color: md-sys-color.$on-primary; /// md.comp.filled-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $with-icon-focus-icon-color: md-sys-color.$on-primary; /// md.comp.filled-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $with-icon-hover-icon-color: md-sys-color.$on-primary; /// md.comp.filled-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-color: md-sys-color.$on-primary; /// md.comp.filled-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $with-icon-pressed-icon-color: md-sys-color.$on-primary; /// md.comp.filled-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-card.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.filled-card.disabled.container.opacity (Disabled / Container) $disabled-container-opacity: 0.38; /// md.comp.filled-card.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.filled-card.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-highest; /// md.comp.filled-card.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.filled-card.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.filled-card.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-medium; /// md.comp.filled-card.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Bug fix. Removing surface-tint token, since the tint does not apply to components using surface-variant as container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.filled-card.disabled.container.color (Disabled / Container) $disabled-container-color: md-sys-color.$surface-variant; /// md.comp.filled-card.disabled.container.elevation (Disabled / Container) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-card.dragged.container.elevation (Dragged / Container) $dragged-container-elevation: md-sys-elevation.$level3; /// md.comp.filled-card.dragged.state-layer.color (Dragged / State layer) $dragged-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-card.dragged.state-layer.opacity (Dragged / State layer) $dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.filled-card.focus.container.elevation (Focused / Container) $focus-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-card.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.filled-card.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.filled-card.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.filled-card.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-card.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filled-card.hover.container.elevation (Hovered / Container) $hover-container-elevation: md-sys-elevation.$level1; /// md.comp.filled-card.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-card.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-card.icon.color (Enabled / Icon) $icon-color: md-sys-color.$primary; /// md.comp.filled-card.pressed.container.elevation (Pressed (ripple) / Container) $pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-card.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-card.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-icon-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.filled-icon-button.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.filled-icon-button.container.size ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Deprecating in place of width and height tokens $container-size: 40px; /// md.comp.filled-icon-button.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 40px; /// md.comp.filled-icon-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-opacity: 0.12; /// md.comp.filled-icon-button.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon) $disabled-icon-opacity: 0.38; /// md.comp.filled-icon-button.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 24px; /// md.comp.filled-icon-button.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$primary; /// md.comp.filled-icon-button.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.filled-icon-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.filled-icon-button.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.filled-icon-button.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.filled-icon-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.filled-icon-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.filled-icon-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filled-icon-button.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-icon-button.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $pressed-icon-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.filled-icon-button.selected.container.color ([Deprecated] Enabled / [Deprecated] Container) $selected-container-color: md-sys-color.$primary; /// md.comp.filled-icon-button.toggle.selected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $toggle-selected-focus-icon-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.toggle.selected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $toggle-selected-focus-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.toggle.selected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $toggle-selected-hover-icon-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.toggle.selected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $toggle-selected-hover-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.toggle.selected.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $toggle-selected-icon-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.toggle.selected.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $toggle-selected-pressed-icon-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.toggle.selected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $toggle-selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-icon-button.toggle.unselected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $toggle-unselected-focus-icon-color: md-sys-color.$primary; /// md.comp.filled-icon-button.toggle.unselected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $toggle-unselected-focus-state-layer-color: md-sys-color.$primary; /// md.comp.filled-icon-button.toggle.unselected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $toggle-unselected-hover-icon-color: md-sys-color.$primary; /// md.comp.filled-icon-button.toggle.unselected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $toggle-unselected-hover-state-layer-color: md-sys-color.$primary; /// md.comp.filled-icon-button.toggle.unselected.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $toggle-unselected-icon-color: md-sys-color.$primary; /// md.comp.filled-icon-button.toggle.unselected.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $toggle-unselected-pressed-icon-color: md-sys-color.$primary; /// md.comp.filled-icon-button.toggle.unselected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $toggle-unselected-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.filled-icon-button.unselected.container.color ([Deprecated] Enabled / [Deprecated] Container) $unselected-container-color: md-sys-color.$surface-container-highest; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-menu-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.filled-menu-button.container.height (Enabled / Container) $container-height: 40px; /// md.comp.filled-menu-button.disabled.container.opacity (Disabled / Container) $disabled-container-opacity: 0.12; /// md.comp.filled-menu-button.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.filled-menu-button.disabled.trailing-icon.opacity (Disabled / Trailing icon) $disabled-trailing-icon-opacity: 0.38; /// md.comp.filled-menu-button.trailing-icon.size (Enabled / Trailing icon) $trailing-icon-size: 18px; /// md.comp.filled-menu-button.with-icon.disabled.leading-icon.opacity (Disabled / Leading icon) $with-icon-disabled-leading-icon-opacity: 0.38; /// md.comp.filled-menu-button.with-icon.leading-icon.size (Enabled / Leading icon) $with-icon-leading-icon-size: 18px; /// md.comp.filled-menu-button.container.color (Enabled / Container) $container-color: md-sys-color.$primary; /// md.comp.filled-menu-button.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.filled-menu-button.disabled.container.color (Disabled / Container) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.filled-menu-button.disabled.container.elevation (Disabled / Container) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-menu-button.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-menu-button.disabled.trailing-icon.color (Disabled / Trailing icon) $disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.filled-menu-button.focus.container.elevation (Focused / Container) $focus-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-menu-button.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.filled-menu-button.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.filled-menu-button.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.filled-menu-button.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filled-menu-button.focus.trailing-icon.color (Focused / Trailing icon) $focus-trailing-icon-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.hover.container.elevation (Hovered / Container) $hover-container-elevation: md-sys-elevation.$level1; /// md.comp.filled-menu-button.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-menu-button.hover.trailing-icon.color (Hovered / Trailing icon) $hover-trailing-icon-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.filled-menu-button.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.filled-menu-button.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.filled-menu-button.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.filled-menu-button.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.filled-menu-button.pressed.label-text.color (Pressed (ripple) / Label text) $pressed-label-text-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filled-menu-button.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon) $pressed-trailing-icon-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.shape (Enabled / Container) $shape: md-sys-shape.$corner-full; /// md.comp.filled-menu-button.trailing-icon.color (Enabled / Trailing icon) $trailing-icon-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.with-icon.disabled.leading-icon.color (Disabled / Leading icon) $with-icon-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.filled-menu-button.with-icon.focus.leading-icon.color (Focused / Leading icon) $with-icon-focus-leading-icon-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.with-icon.hover.leading-icon.color (Hovered / Leading icon) $with-icon-hover-leading-icon-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.with-icon.leading-icon.color (Enabled / Leading icon) $with-icon-leading-icon-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.with-icon.pressed.leading-icon.color (Pressed (ripple) / Leading icon) $with-icon-pressed-leading-icon-color: md-sys-color.$on-primary; /// md.comp.filled-menu-button.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-select.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.filled-select.menu.cascading-menu-indicator.icon.size (Enabled / Icon) $menu-cascading-menu-indicator-icon-size: 24px; /// md.comp.filled-select.menu.divider.height (Enabled / Divider) $menu-divider-height: 1px; /// md.comp.filled-select.menu.list-item.container.height (Enabled / Container) $menu-list-item-container-height: 48px; /// md.comp.filled-select.menu.list-item.with-leading-icon.leading-icon.size (Enabled / Leading icon) $menu-list-item-with-leading-icon-leading-icon-size: 24px; /// md.comp.filled-select.menu.list-item.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon) $menu-list-item-with-trailing-icon-trailing-icon-size: 24px; /// md.comp.filled-select.text-field.active-indicator.height (Enabled / Active indicator) $text-field-active-indicator-height: 1px; /// md.comp.filled-select.text-field.container.height (Enabled / Container) /// /// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height. $text-field-container-height: 56px; /// md.comp.filled-select.text-field.disabled.active-indicator.height (Disabled / Active indicator) $text-field-disabled-active-indicator-height: 1px; /// md.comp.filled-select.text-field.disabled.active-indicator.opacity (Disabled / Active indicator) $text-field-disabled-active-indicator-opacity: 0.38; /// md.comp.filled-select.text-field.disabled.container.opacity (Disabled / Container) $text-field-disabled-container-opacity: 0.04; /// md.comp.filled-select.text-field.disabled.input-text.opacity (Disabled / Input text) $text-field-disabled-input-text-opacity: 0.38; /// md.comp.filled-select.text-field.disabled.label-text.opacity (Disabled / Label text) $text-field-disabled-label-text-opacity: 0.38; /// md.comp.filled-select.text-field.disabled.leading-icon.opacity (Disabled / Leading icon) $text-field-disabled-leading-icon-opacity: 0.38; /// md.comp.filled-select.text-field.disabled.supporting-text.opacity (Disabled / Supporting text) $text-field-disabled-supporting-text-opacity: 0.38; /// md.comp.filled-select.text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon) $text-field-disabled-trailing-icon-opacity: 0.38; /// md.comp.filled-select.text-field.focus.active-indicator.height (Focused / Active indicator) $text-field-focus-active-indicator-height: 2px; /// md.comp.filled-select.text-field.hover.active-indicator.height (Hovered / Active indicator) $text-field-hover-active-indicator-height: 1px; /// md.comp.filled-select.text-field.leading-icon.size (Enabled / Leading icon) $text-field-leading-icon-size: 24px; /// md.comp.filled-select.text-field.trailing-icon.size (Enabled / Trailing icon) $text-field-trailing-icon-size: 24px; /// md.comp.filled-select.menu.cascading-menu-indicator.icon.color (Enabled / Icon) $menu-cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.menu.container.color (Enabled / Container) $menu-container-color: md-sys-color.$surface-container; /// md.comp.filled-select.menu.container.elevation (Enabled / Container) $menu-container-elevation: md-sys-elevation.$level2; /// md.comp.filled-select.menu.container.shadow-color (Enabled / Container) $menu-container-shadow-color: md-sys-color.$shadow; /// md.comp.filled-select.menu.container.shape (Enabled / Container) $menu-container-shape: md-sys-shape.$corner-extra-small; /// md.comp.filled-select.menu.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $menu-container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.filled-select.menu.divider.color (Enabled / Divider) $menu-divider-color: md-sys-color.$surface-variant; /// md.comp.filled-select.menu.list-item.label-text.color (Enabled / Label text) $menu-list-item-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.menu.list-item.label-text.font (Enabled / Label text) $menu-list-item-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.filled-select.menu.list-item.label-text.line-height (Enabled / Label text) $menu-list-item-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.filled-select.menu.list-item.label-text.size (Enabled / Label text) $menu-list-item-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.filled-select.menu.list-item.label-text.tracking (Enabled / Label text) $menu-list-item-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.filled-select.menu.list-item.label-text.weight (Enabled / Label text) $menu-list-item-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.filled-select.menu.list-item.selected.container.color (Enabled / Container) $menu-list-item-selected-container-color: md-sys-color.$surface-container-highest; /// md.comp.filled-select.menu.list-item.with-leading-icon.leading-icon.color (Enabled / Leading icon) $menu-list-item-with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.menu.list-item.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon) $menu-list-item-with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.active-indicator.color (Enabled / Active indicator) $text-field-active-indicator-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.caret.color (Enabled / Caret) /// /// @deprecated Removed caret related tokens from Select variants as these components don't support entering free text. $text-field-caret-color: md-sys-color.$primary; /// md.comp.filled-select.text-field.container.color (Enabled / Container) $text-field-container-color: md-sys-color.$surface-container-highest; /// md.comp.filled-select.text-field.container.shape (Enabled / Container) $text-field-container-shape: md-sys-shape.$corner-extra-small-top; /// md.comp.filled-select.text-field.disabled.active-indicator.color (Disabled / Active indicator) $text-field-disabled-active-indicator-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.disabled.container.color (Disabled / Container) $text-field-disabled-container-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.disabled.input-text.color (Disabled / Input text) $text-field-disabled-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.disabled.label-text.color (Disabled / Label text) $text-field-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.disabled.leading-icon.color (Disabled / Leading icon) $text-field-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.disabled.supporting-text.color (Disabled / Supporting text) $text-field-disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.disabled.trailing-icon.color (Disabled / Trailing icon) $text-field-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.error.active-indicator.color (Error) $text-field-error-active-indicator-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.focus.active-indicator.color (Error / Focus) $text-field-error-focus-active-indicator-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.focus.caret.color (Error / Focus) /// /// @deprecated Removed caret related tokens from Select variants as these components don't support entering free text. $text-field-error-focus-caret-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.focus.input-text.color (Error / Focus) $text-field-error-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.error.focus.label-text.color (Error / Focus) $text-field-error-focus-label-text-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.focus.leading-icon.color (Error / Focus) $text-field-error-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.error.focus.supporting-text.color (Error / Focus) $text-field-error-focus-supporting-text-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.focus.trailing-icon.color (Error / Focus) $text-field-error-focus-trailing-icon-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.hover.active-indicator.color (Error / Hover) $text-field-error-hover-active-indicator-color: md-sys-color.$on-error-container; /// md.comp.filled-select.text-field.error.hover.input-text.color (Error / Hover) $text-field-error-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.error.hover.label-text.color (Error / Hover) $text-field-error-hover-label-text-color: md-sys-color.$on-error-container; /// md.comp.filled-select.text-field.error.hover.leading-icon.color (Error / Hover) $text-field-error-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.error.hover.state-layer.color (Error / Hover) $text-field-error-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.error.hover.state-layer.opacity (Error / Hover) $text-field-error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-select.text-field.error.hover.supporting-text.color (Error / Hover) $text-field-error-hover-supporting-text-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.hover.trailing-icon.color (Error / Hover) $text-field-error-hover-trailing-icon-color: md-sys-color.$on-error-container; /// md.comp.filled-select.text-field.error.input-text.color (Error) $text-field-error-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.error.label-text.color (Error) $text-field-error-label-text-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.leading-icon.color (Error) $text-field-error-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.error.supporting-text.color (Error) $text-field-error-supporting-text-color: md-sys-color.$error; /// md.comp.filled-select.text-field.error.trailing-icon.color (Error) $text-field-error-trailing-icon-color: md-sys-color.$error; /// md.comp.filled-select.text-field.focus.active-indicator.color (Focused / Active indicator) $text-field-focus-active-indicator-color: md-sys-color.$primary; /// md.comp.filled-select.text-field.focus.input-text.color (Focused / Input text) $text-field-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.focus.label-text.color (Focused / Label text) $text-field-focus-label-text-color: md-sys-color.$primary; /// md.comp.filled-select.text-field.focus.leading-icon.color (Focused / Leading icon) $text-field-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.focus.supporting-text.color (Focused / Supporting text) $text-field-focus-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.focus.trailing-icon.color (Focused / Trailing icon) $text-field-focus-trailing-icon-color: md-sys-color.$primary; /// md.comp.filled-select.text-field.hover.active-indicator.color (Hovered / Active indicator) $text-field-hover-active-indicator-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.hover.input-text.color (Hovered / Input text) $text-field-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.hover.label-text.color (Hovered / Label text) $text-field-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.hover.leading-icon.color (Hovered / Leading icon) $text-field-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.hover.state-layer.color (Hovered / State layer) $text-field-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.hover.state-layer.opacity (Hovered / State layer) $text-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-select.text-field.hover.supporting-text.color (Hovered / Supporting text) $text-field-hover-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.hover.trailing-icon.color (Hovered / Trailing icon) $text-field-hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.input-text.color (Enabled / Input text) $text-field-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-select.text-field.input-text.font (Enabled / Input text) $text-field-input-text-font: md-sys-typescale.$body-large-font; /// md.comp.filled-select.text-field.input-text.line-height (Enabled / Input text) $text-field-input-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.filled-select.text-field.input-text.size (Enabled / Input text) $text-field-input-text-size: md-sys-typescale.$body-large-size; /// md.comp.filled-select.text-field.input-text.tracking (Enabled / Input text) $text-field-input-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.filled-select.text-field.input-text.weight (Enabled / Input text) $text-field-input-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.filled-select.text-field.label-text.color (Enabled / Label text) $text-field-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.label-text.font (Enabled / Label text) $text-field-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.filled-select.text-field.label-text.line-height (Enabled / Label text) $text-field-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.filled-select.text-field.label-text.populated.line-height (Enabled / Label text) $text-field-label-text-populated-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.filled-select.text-field.label-text.populated.size (Enabled / Label text) $text-field-label-text-populated-size: md-sys-typescale.$body-small-size; /// md.comp.filled-select.text-field.label-text.size (Enabled / Label text) $text-field-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.filled-select.text-field.label-text.tracking (Enabled / Label text) $text-field-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.filled-select.text-field.label-text.weight (Enabled / Label text) $text-field-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.filled-select.text-field.leading-icon.color (Enabled / Leading icon) $text-field-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.supporting-text.color (Enabled / Supporting text) $text-field-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.text-field.supporting-text.font (Enabled / Supporting text) $text-field-supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.filled-select.text-field.supporting-text.line-height (Enabled / Supporting text) $text-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.filled-select.text-field.supporting-text.size (Enabled / Supporting text) $text-field-supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.filled-select.text-field.supporting-text.tracking (Enabled / Supporting text) $text-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.filled-select.text-field.supporting-text.weight (Enabled / Supporting text) $text-field-supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.filled-select.text-field.trailing-icon.color (Enabled / Trailing icon) $text-field-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-select.menu.list-item.label-text.type (Enabled / Label text) @mixin menu-list-item-label-text-type { font-family: $menu-list-item-label-text-font; font-size: $menu-list-item-label-text-size; font-weight: $menu-list-item-label-text-weight; letter-spacing: $menu-list-item-label-text-tracking; line-height: $menu-list-item-label-text-line-height; } /// md.comp.filled-select.text-field.input-text.type (Enabled / Input text) @mixin text-field-input-text-type { font-family: $text-field-input-text-font; font-size: $text-field-input-text-size; font-weight: $text-field-input-text-weight; letter-spacing: $text-field-input-text-tracking; line-height: $text-field-input-text-line-height; } /// md.comp.filled-select.text-field.label-text.type (Enabled / Label text) @mixin text-field-label-text-type { font-family: $text-field-label-text-font; font-size: $text-field-label-text-size; font-weight: $text-field-label-text-weight; letter-spacing: $text-field-label-text-tracking; line-height: $text-field-label-text-line-height; } /// md.comp.filled-select.text-field.supporting-text.type (Enabled / Supporting text) @mixin text-field-supporting-text-type { font-family: $text-field-supporting-text-font; font-size: $text-field-supporting-text-size; font-weight: $text-field-supporting-text-weight; letter-spacing: $text-field-supporting-text-tracking; line-height: $text-field-supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-text-field.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.filled-text-field.active-indicator.height (Enabled / Active indicator) $active-indicator-height: 1px; /// md.comp.filled-text-field.container.height (Enabled / Container) /// /// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height. $container-height: 56px; /// md.comp.filled-text-field.disabled.active-indicator.height (Disabled / Active indicator) $disabled-active-indicator-height: 1px; /// md.comp.filled-text-field.disabled.active-indicator.opacity (Disabled / Active indicator) $disabled-active-indicator-opacity: 0.38; /// md.comp.filled-text-field.disabled.container.opacity (Disabled / Container) $disabled-container-opacity: 0.04; /// md.comp.filled-text-field.disabled.input-text.opacity (Disabled / Input text) $disabled-input-text-opacity: 0.38; /// md.comp.filled-text-field.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.filled-text-field.disabled.leading-icon.opacity (Disabled / Leading icon) $disabled-leading-icon-opacity: 0.38; /// md.comp.filled-text-field.disabled.supporting-text.opacity (Disabled / Supporting text) $disabled-supporting-text-opacity: 0.38; /// md.comp.filled-text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon) $disabled-trailing-icon-opacity: 0.38; /// md.comp.filled-text-field.focus.active-indicator.height (Focused / Active indicator) $focus-active-indicator-height: 2px; /// md.comp.filled-text-field.hover.active-indicator.height (Hovered / Active indicator) $hover-active-indicator-height: 1px; /// md.comp.filled-text-field.leading-icon.size (Enabled / Leading icon) $leading-icon-size: 24px; /// md.comp.filled-text-field.trailing-icon.size (Enabled / Trailing icon) $trailing-icon-size: 24px; /// md.comp.filled-text-field.active-indicator.color (Enabled / Active indicator) $active-indicator-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.caret.color (Enabled / Caret) $caret-color: md-sys-color.$primary; /// md.comp.filled-text-field.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-highest; /// md.comp.filled-text-field.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-small-top; /// md.comp.filled-text-field.disabled.active-indicator.color (Disabled / Active indicator) $disabled-active-indicator-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.disabled.container.color (Disabled / Container) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.disabled.input-text.color (Disabled / Input text) $disabled-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.disabled.leading-icon.color (Disabled / Leading icon) $disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.disabled.supporting-text.color (Disabled / Supporting text) $disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.disabled.trailing-icon.color (Disabled / Trailing icon) $disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.error.active-indicator.color (Error) $error-active-indicator-color: md-sys-color.$error; /// md.comp.filled-text-field.error.focus.active-indicator.color (Error / Focus) $error-focus-active-indicator-color: md-sys-color.$error; /// md.comp.filled-text-field.error.focus.caret.color (Error / Focus) $error-focus-caret-color: md-sys-color.$error; /// md.comp.filled-text-field.error.focus.input-text.color (Error / Focus) $error-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.error.focus.label-text.color (Error / Focus) $error-focus-label-text-color: md-sys-color.$error; /// md.comp.filled-text-field.error.focus.leading-icon.color (Error / Focus) $error-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.error.focus.supporting-text.color (Error / Focus) $error-focus-supporting-text-color: md-sys-color.$error; /// md.comp.filled-text-field.error.focus.trailing-icon.color (Error / Focus) $error-focus-trailing-icon-color: md-sys-color.$error; /// md.comp.filled-text-field.error.hover.active-indicator.color (Error / Hover) $error-hover-active-indicator-color: md-sys-color.$on-error-container; /// md.comp.filled-text-field.error.hover.input-text.color (Error / Hover) $error-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.error.hover.label-text.color (Error / Hover) $error-hover-label-text-color: md-sys-color.$on-error-container; /// md.comp.filled-text-field.error.hover.leading-icon.color (Error / Hover) $error-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.error.hover.state-layer.color (Error / Hover) $error-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.error.hover.state-layer.opacity (Error / Hover) $error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-text-field.error.hover.supporting-text.color (Error / Hover) $error-hover-supporting-text-color: md-sys-color.$error; /// md.comp.filled-text-field.error.hover.trailing-icon.color (Error / Hover) $error-hover-trailing-icon-color: md-sys-color.$on-error-container; /// md.comp.filled-text-field.error.input-text.color (Error) $error-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.error.label-text.color (Error) $error-label-text-color: md-sys-color.$error; /// md.comp.filled-text-field.error.leading-icon.color (Error) $error-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.error.supporting-text.color (Error) $error-supporting-text-color: md-sys-color.$error; /// md.comp.filled-text-field.error.trailing-icon.color (Error) $error-trailing-icon-color: md-sys-color.$error; /// md.comp.filled-text-field.focus.active-indicator.color (Focused / Active indicator) $focus-active-indicator-color: md-sys-color.$primary; /// md.comp.filled-text-field.focus.active-indicator.thickness (Focused / Active indicator) $focus-active-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.filled-text-field.focus.input-text.color (Focused / Input text) $focus-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$primary; /// md.comp.filled-text-field.focus.leading-icon.color (Focused / Leading icon) $focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.focus.supporting-text.color (Focused / Supporting text) $focus-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.focus.trailing-icon.color (Focused / Trailing icon) $focus-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.hover.active-indicator.color (Hovered / Active indicator) $hover-active-indicator-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.hover.input-text.color (Hovered / Input text) $hover-input-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.hover.leading-icon.color (Hovered / Leading icon) $hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-text-field.hover.supporting-text.color (Hovered / Supporting text) $hover-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.hover.trailing-icon.color (Hovered / Trailing icon) $hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.input-text.color (Enabled / Input text) $input-text-color: md-sys-color.$on-surface; /// md.comp.filled-text-field.input-text.font (Enabled / Input text) $input-text-font: md-sys-typescale.$body-large-font; /// md.comp.filled-text-field.input-text.line-height (Enabled / Input text) $input-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.filled-text-field.input-text.placeholder.color (Enabled / Input text) $input-text-placeholder-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.input-text.prefix.color (Enabled / Input text) $input-text-prefix-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.input-text.size (Enabled / Input text) $input-text-size: md-sys-typescale.$body-large-size; /// md.comp.filled-text-field.input-text.suffix.color (Enabled / Input text) $input-text-suffix-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.input-text.tracking (Enabled / Input text) $input-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.filled-text-field.input-text.weight (Enabled / Input text) $input-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.filled-text-field.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$body-large-font; /// md.comp.filled-text-field.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.filled-text-field.label-text.populated.line-height (Enabled / Label text) $label-text-populated-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.filled-text-field.label-text.populated.size (Enabled / Label text) $label-text-populated-size: md-sys-typescale.$body-small-size; /// md.comp.filled-text-field.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$body-large-size; /// md.comp.filled-text-field.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.filled-text-field.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.filled-text-field.leading-icon.color (Enabled / Leading icon) $leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.supporting-text.color (Enabled / Supporting text) $supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.supporting-text.font (Enabled / Supporting text) $supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.filled-text-field.supporting-text.line-height (Enabled / Supporting text) $supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.filled-text-field.supporting-text.size (Enabled / Supporting text) $supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.filled-text-field.supporting-text.tracking (Enabled / Supporting text) $supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.filled-text-field.supporting-text.weight (Enabled / Supporting text) $supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.filled-text-field.trailing-icon.color (Enabled / Trailing icon) $trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-text-field.input-text.type (Enabled / Input text) @mixin input-text-type { font-family: $input-text-font; font-size: $input-text-size; font-weight: $input-text-weight; letter-spacing: $input-text-tracking; line-height: $input-text-line-height; } /// md.comp.filled-text-field.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } /// md.comp.filled-text-field.supporting-text.type (Enabled / Supporting text) @mixin supporting-text-type { font-family: $supporting-text-font; font-size: $supporting-text-size; font-weight: $supporting-text-weight; letter-spacing: $supporting-text-tracking; line-height: $supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-tonal-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.filled-tonal-button.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.filled-tonal-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-opacity: 0.12; /// md.comp.filled-tonal-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-opacity: 0.38; /// md.comp.filled-tonal-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-opacity: 0.38; /// md.comp.filled-tonal-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-size: 18px; /// md.comp.filled-tonal-button.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$secondary-container; /// md.comp.filled-tonal-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.filled-tonal-button.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.filled-tonal-button.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.filled-tonal-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.filled-tonal-button.disabled.container.elevation ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-tonal-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.filled-tonal-button.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container) $focus-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-tonal-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.filled-tonal-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.filled-tonal-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.filled-tonal-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text) $focus-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filled-tonal-button.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container) $hover-container-elevation: md-sys-elevation.$level1; /// md.comp.filled-tonal-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text) $hover-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-tonal-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text) $label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.filled-tonal-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.filled-tonal-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.filled-tonal-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.filled-tonal-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.filled-tonal-button.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container) $pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.filled-tonal-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text) $pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.filled-tonal-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.filled-tonal-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $with-icon-focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $with-icon-hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $with-icon-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filled-tonal-icon-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.filled-tonal-icon-button.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.filled-tonal-icon-button.container.size ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Deprecating in place of width and height tokens $container-size: 40px; /// md.comp.filled-tonal-icon-button.container.width ([Deprecated] Enabled / [Deprecated] Container) $container-width: 40px; /// md.comp.filled-tonal-icon-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-opacity: 0.12; /// md.comp.filled-tonal-icon-button.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon) $disabled-icon-opacity: 0.38; /// md.comp.filled-tonal-icon-button.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $icon-size: 24px; /// md.comp.filled-tonal-icon-button.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$secondary-container; /// md.comp.filled-tonal-icon-button.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.filled-tonal-icon-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.filled-tonal-icon-button.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.filled-tonal-icon-button.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.filled-tonal-icon-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.filled-tonal-icon-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.filled-tonal-icon-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filled-tonal-icon-button.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filled-tonal-icon-button.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.pressed.icon.color ([Deprecated] Pressed (ripple) / Icon) $pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.filled-tonal-icon-button.selected.container.color ([Deprecated] Enabled / [Deprecated] Container) $selected-container-color: md-sys-color.$secondary-container; /// md.comp.filled-tonal-icon-button.toggle.selected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $toggle-selected-focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.toggle.selected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $toggle-selected-focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.toggle.selected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $toggle-selected-hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.toggle.selected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $toggle-selected-hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.toggle.selected.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $toggle-selected-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.toggle.selected.pressed.icon.color ([Deprecated] Pressed (ripple) / Icon) $toggle-selected-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.toggle.selected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $toggle-selected-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filled-tonal-icon-button.toggle.unselected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $toggle-unselected-focus-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-tonal-icon-button.toggle.unselected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $toggle-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.filled-tonal-icon-button.toggle.unselected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $toggle-unselected-hover-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-tonal-icon-button.toggle.unselected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $toggle-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.filled-tonal-icon-button.toggle.unselected.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $toggle-unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-tonal-icon-button.toggle.unselected.pressed.icon.color ([Deprecated] Pressed (ripple) / Icon) $toggle-unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $toggle-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.filled-tonal-icon-button.unselected.container.color ([Deprecated] Enabled / [Deprecated] Container) $unselected-container-color: md-sys-color.$surface-container-highest; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-filter-chip.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.filter-chip.container.height (Enabled / Container) $container-height: 32px; /// md.comp.filter-chip.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.filter-chip.elevated.disabled.container.opacity (Disabled / Container) $elevated-disabled-container-opacity: 0.12; /// md.comp.filter-chip.flat.disabled.selected.container.opacity (Disabled / Container) $flat-disabled-selected-container-opacity: 0.12; /// md.comp.filter-chip.flat.disabled.unselected.outline.opacity (Disabled / Container) $flat-disabled-unselected-outline-opacity: 0.12; /// md.comp.filter-chip.flat.selected.outline.width (Enabled / Container) $flat-selected-outline-width: 0px; /// md.comp.filter-chip.flat.unselected.outline.width (Enabled / Container) $flat-unselected-outline-width: 1px; /// md.comp.filter-chip.with-icon.disabled.icon.opacity (Disabled / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-disabled-icon-opacity: 0.38; /// md.comp.filter-chip.with-icon.icon.size (Enabled / Icon) $with-icon-icon-size: 18px; /// md.comp.filter-chip.with-leading-icon.disabled.leading-icon.opacity (Disabled / Icon) $with-leading-icon-disabled-leading-icon-opacity: 0.38; /// md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.opacity (Disabled / Icon) $with-trailing-icon-disabled-trailing-icon-opacity: 0.38; /// md.comp.filter-chip.container.shadow-color (Enabled / Container) /// /// @deprecated Replaced with new token md.comp.filter-chip.elevated.container.shadow-color to include the "elevated" designation in the token name. $container-shadow-color: md-sys-color.$shadow; /// md.comp.filter-chip.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-small; /// md.comp.filter-chip.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.filter-chip.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.filter-chip.dragged.container.elevation (Dragged / Container) $dragged-container-elevation: md-sys-elevation.$level4; /// md.comp.filter-chip.elevated.container.elevation (Enabled / Container) $elevated-container-elevation: md-sys-elevation.$level1; /// md.comp.filter-chip.elevated.container.shadow-color (Enabled / Container) $elevated-container-shadow-color: md-sys-color.$shadow; /// md.comp.filter-chip.elevated.disabled.container.color (Disabled / Container) $elevated-disabled-container-color: md-sys-color.$on-surface; /// md.comp.filter-chip.elevated.disabled.container.elevation (Disabled / Container) $elevated-disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.filter-chip.elevated.focus.container.elevation (Focused / Container) $elevated-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.filter-chip.elevated.hover.container.elevation (Hovered / Container) $elevated-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.filter-chip.elevated.pressed.container.elevation (Pressed (ripple) / Container) $elevated-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.filter-chip.elevated.selected.container.color (Enabled / Container) $elevated-selected-container-color: md-sys-color.$secondary-container; /// md.comp.filter-chip.elevated.unselected.container.color (Enabled / Container) $elevated-unselected-container-color: md-sys-color.$surface-container-low; /// md.comp.filter-chip.flat.container.elevation (Enabled / Container) $flat-container-elevation: md-sys-elevation.$level0; /// md.comp.filter-chip.flat.disabled.selected.container.color (Disabled / Container) $flat-disabled-selected-container-color: md-sys-color.$on-surface; /// md.comp.filter-chip.flat.disabled.unselected.outline.color (Disabled / Container) $flat-disabled-unselected-outline-color: md-sys-color.$on-surface; /// md.comp.filter-chip.flat.selected.container.color (Enabled / Container) $flat-selected-container-color: md-sys-color.$secondary-container; /// md.comp.filter-chip.flat.selected.focus.container.elevation (Focused / Container) $flat-selected-focus-container-elevation: md-sys-elevation.$level0; /// md.comp.filter-chip.flat.selected.hover.container.elevation (Hovered / Container) $flat-selected-hover-container-elevation: md-sys-elevation.$level1; /// md.comp.filter-chip.flat.selected.pressed.container.elevation (Pressed (ripple) / Container) $flat-selected-pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.filter-chip.flat.unselected.focus.container.elevation (Focused / Container) $flat-unselected-focus-container-elevation: md-sys-elevation.$level0; /// md.comp.filter-chip.flat.unselected.focus.outline.color (Focused / Container) $flat-unselected-focus-outline-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.flat.unselected.hover.container.elevation (Hovered / Container) $flat-unselected-hover-container-elevation: md-sys-elevation.$level0; /// md.comp.filter-chip.flat.unselected.outline.color (Enabled / Container) $flat-unselected-outline-color: md-sys-color.$outline-variant; /// md.comp.filter-chip.flat.unselected.pressed.container.elevation (Pressed (ripple) / Container) $flat-unselected-pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.filter-chip.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.filter-chip.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.filter-chip.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.filter-chip.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.filter-chip.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.filter-chip.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.filter-chip.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.filter-chip.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.filter-chip.selected.dragged.label-text.color (Dragged / Label text) $selected-dragged-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.selected.dragged.state-layer.color (Dragged / State layer) $selected-dragged-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.selected.dragged.state-layer.opacity (Dragged / State layer) $selected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.filter-chip.selected.focus.label-text.color (Focused / Label text) $selected-focus-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.selected.focus.state-layer.color (Focused / State layer) $selected-focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.selected.focus.state-layer.opacity (Focused / State layer) $selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filter-chip.selected.hover.label-text.color (Hovered / Label text) $selected-hover-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.selected.hover.state-layer.color (Hovered / State layer) $selected-hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.selected.hover.state-layer.opacity (Hovered / State layer) $selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filter-chip.selected.label-text.color (Enabled / Label text) $selected-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.selected.pressed.label-text.color (Pressed (ripple) / Label text) $selected-pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $selected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer) $selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.filter-chip.unselected.dragged.label-text.color (Dragged / Label text) $unselected-dragged-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.unselected.dragged.state-layer.color (Dragged / State layer) $unselected-dragged-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.unselected.dragged.state-layer.opacity (Dragged / State layer) $unselected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.filter-chip.unselected.focus.label-text.color (Focused / Label text) $unselected-focus-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.unselected.focus.state-layer.color (Focused / State layer) $unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.unselected.focus.state-layer.opacity (Focused / State layer) $unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.filter-chip.unselected.hover.label-text.color (Hovered / Label text) $unselected-hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.unselected.hover.state-layer.color (Hovered / State layer) $unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.unselected.hover.state-layer.opacity (Hovered / State layer) $unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.filter-chip.unselected.label-text.color (Enabled / Label text) $unselected-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.unselected.pressed.label-text.color (Pressed (ripple) / Label text) $unselected-pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $unselected-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer) $unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.filter-chip.with-icon.disabled.icon.color (Disabled / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.filter-chip.with-icon.selected.dragged.icon.color (Dragged / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-selected-dragged-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-icon.selected.focus.icon.color (Focused / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-selected-focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-icon.selected.hover.icon.color (Hovered / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-selected-hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-icon.selected.icon.color (Enabled / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-selected-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-icon.selected.pressed.icon.color (Pressed (ripple) / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-selected-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-icon.unselected.dragged.icon.color (Dragged / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-unselected-dragged-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-icon.unselected.focus.icon.color (Focused / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-unselected-focus-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-icon.unselected.hover.icon.color (Hovered / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-unselected-hover-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-icon.unselected.icon.color (Enabled / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-icon.unselected.pressed.icon.color (Pressed (ripple) / Icon) /// /// @deprecated Established distinct leading and trailing icon tokens for filter chips. Please use corresponding token added for leading and trailing instead. $with-icon-unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-leading-icon.disabled.leading-icon.color (Disabled / Icon) $with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.filter-chip.with-leading-icon.leading-icon.unselected.color (Enabled / Icon) /// /// @deprecated Wrongly named token. Please use this token instead: md.comp.filter-chip.with-leading-icon.selected.leading-icon.color $with-leading-icon-leading-icon-unselected-color: md-sys-color.$primary; /// md.comp.filter-chip.with-leading-icon.selected.dragged.leading-icon.color (Dragged / Icon) $with-leading-icon-selected-dragged-leading-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-leading-icon.selected.focus.leading-icon.color (Focused / Icon) $with-leading-icon-selected-focus-leading-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-leading-icon.selected.hover.leading-icon.color (Hovered / Icon) $with-leading-icon-selected-hover-leading-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-leading-icon.selected.leading-icon.color (Enabled / Icon) $with-leading-icon-selected-leading-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-leading-icon.selected.pressed.leading-icon.color (Pressed (ripple) / Icon) $with-leading-icon-selected-pressed-leading-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-leading-icon.unselected.dragged.leading-icon.color (Dragged / Icon) $with-leading-icon-unselected-dragged-leading-icon-color: md-sys-color.$primary; /// md.comp.filter-chip.with-leading-icon.unselected.focus.leading-icon.color (Focused / Icon) $with-leading-icon-unselected-focus-leading-icon-color: md-sys-color.$primary; /// md.comp.filter-chip.with-leading-icon.unselected.hover.leading-icon.color (Hovered / Icon) $with-leading-icon-unselected-hover-leading-icon-color: md-sys-color.$primary; /// md.comp.filter-chip.with-leading-icon.unselected.leading-icon.color (Enabled / Icon) $with-leading-icon-unselected-leading-icon-color: md-sys-color.$primary; /// md.comp.filter-chip.with-leading-icon.unselected.pressed.leading-icon.color (Pressed (ripple) / Icon) $with-leading-icon-unselected-pressed-leading-icon-color: md-sys-color.$primary; /// md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color (Disabled / Icon) $with-trailing-icon-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.filter-chip.with-trailing-icon.selected.dragged.trailing-icon.color (Dragged / Icon) $with-trailing-icon-selected-dragged-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-trailing-icon.selected.focus.trailing-icon.color (Focused / Icon) $with-trailing-icon-selected-focus-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-trailing-icon.selected.hover.trailing-icon.color (Hovered / Icon) $with-trailing-icon-selected-hover-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-trailing-icon.selected.pressed.trailing-icon.color (Pressed (ripple) / Icon) $with-trailing-icon-selected-pressed-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color (Enabled / Icon) $with-trailing-icon-selected-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.filter-chip.with-trailing-icon.trailing-icon.unselected.color (Enabled / Icon) /// /// @deprecated Wrongly named token. Please use this token instead: md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color $with-trailing-icon-trailing-icon-unselected-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-trailing-icon.unselected.dragged.trailing-icon.color (Dragged / Icon) $with-trailing-icon-unselected-dragged-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-trailing-icon.unselected.focus.trailing-icon.color (Focused / Icon) $with-trailing-icon-unselected-focus-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-trailing-icon.unselected.hover.trailing-icon.color (Hovered / Icon) $with-trailing-icon-unselected-hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-trailing-icon.unselected.pressed.trailing-icon.color (Pressed (ripple) / Icon) $with-trailing-icon-unselected-pressed-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color (Enabled / Icon) $with-trailing-icon-unselected-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.filter-chip.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-full-screen-dialog.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.full-screen-dialog.action-bar.container.height (Enabled / Container) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-container-height: 56px; /// md.comp.full-screen-dialog.header.container.height (Enabled / Container) $header-container-height: 56px; /// md.comp.full-screen-dialog.header.icon.size (Enabled / Icon) $header-icon-size: 24px; /// md.comp.full-screen-dialog.with-divider.divider.height (Enabled / Divider) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement $with-divider-divider-height: 1px; /// md.comp.full-screen-dialog.action-bar.container.color (Enabled / Container) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-container-color: md-sys-color.$surface; /// md.comp.full-screen-dialog.action-bar.container.elevation (Enabled / Container) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-container-elevation: md-sys-elevation.$level0; /// md.comp.full-screen-dialog.action-bar.focus.label-text.color (Focused / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-focus-label-text-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.action-bar.focus.state-layer.color (Focused / State layer) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-focus-state-layer-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.action-bar.focus.state-layer.opacity (Focused / State layer) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.full-screen-dialog.action-bar.hover.label-text.color (Hovered / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-hover-label-text-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.action-bar.hover.state-layer.color (Hovered / State layer) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-hover-state-layer-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.action-bar.hover.state-layer.opacity (Hovered / State layer) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.full-screen-dialog.action-bar.label-text.color (Enabled / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-label-text-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.action-bar.label-text.font (Enabled / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.full-screen-dialog.action-bar.label-text.line-height (Enabled / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.full-screen-dialog.action-bar.label-text.size (Enabled / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.full-screen-dialog.action-bar.label-text.tracking (Enabled / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.full-screen-dialog.action-bar.label-text.weight (Enabled / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.full-screen-dialog.action-bar.on-scroll.container.elevation (Enabled / Container) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-on-scroll-container-elevation: md-sys-elevation.$level2; /// md.comp.full-screen-dialog.action-bar.pressed.label-text.color (Pressed (ripple) / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-pressed-label-text-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.action-bar.pressed.state-layer.color (Pressed (ripple) / State layer) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.action-bar.pressed.state-layer.opacity (Pressed (ripple) / State layer) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. $action-bar-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.full-screen-dialog.container.color (Enabled / Container) $container-color: md-sys-color.$surface; /// md.comp.full-screen-dialog.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.full-screen-dialog.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.full-screen-dialog.header.action.focus.label-text.color (Focused / Label text) $header-action-focus-label-text-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.header.action.focus.state-layer.color (Focused / State layer) $header-action-focus-state-layer-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.header.action.focus.state-layer.opacity (Focused / State layer) $header-action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.full-screen-dialog.header.action.hover.label-text.color (Hovered / Label text) $header-action-hover-label-text-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.header.action.hover.state-layer.color (Hovered / State layer) $header-action-hover-state-layer-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.header.action.hover.state-layer.opacity (Hovered / State layer) $header-action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.full-screen-dialog.header.action.label-text.color (Enabled / Label text) $header-action-label-text-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.header.action.label-text.font (Enabled / Label text) $header-action-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.full-screen-dialog.header.action.label-text.line-height (Enabled / Label text) $header-action-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.full-screen-dialog.header.action.label-text.size (Enabled / Label text) $header-action-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.full-screen-dialog.header.action.label-text.tracking (Enabled / Label text) $header-action-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.full-screen-dialog.header.action.label-text.weight (Enabled / Label text) $header-action-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.full-screen-dialog.header.action.pressed.label-text.color (Pressed (ripple) / Label text) $header-action-pressed-label-text-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.header.action.pressed.state-layer.color (Pressed (ripple) / State layer) $header-action-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.full-screen-dialog.header.action.pressed.state-layer.opacity (Pressed (ripple) / State layer) $header-action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.full-screen-dialog.header.container.color (Enabled / Container) $header-container-color: md-sys-color.$surface; /// md.comp.full-screen-dialog.header.container.elevation (Enabled / Container) $header-container-elevation: md-sys-elevation.$level0; /// md.comp.full-screen-dialog.header.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $header-container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.full-screen-dialog.header.headline.color (Enabled / Headline) $header-headline-color: md-sys-color.$on-surface; /// md.comp.full-screen-dialog.header.headline.font (Enabled / Headline) $header-headline-font: md-sys-typescale.$title-large-font; /// md.comp.full-screen-dialog.header.headline.line-height (Enabled / Headline) $header-headline-line-height: md-sys-typescale.$title-large-line-height; /// md.comp.full-screen-dialog.header.headline.size (Enabled / Headline) $header-headline-size: md-sys-typescale.$title-large-size; /// md.comp.full-screen-dialog.header.headline.tracking (Enabled / Headline) $header-headline-tracking: md-sys-typescale.$title-large-tracking; /// md.comp.full-screen-dialog.header.headline.weight (Enabled / Headline) $header-headline-weight: md-sys-typescale.$title-large-weight; /// md.comp.full-screen-dialog.header.icon.color (Enabled / Icon) $header-icon-color: md-sys-color.$on-surface; /// md.comp.full-screen-dialog.header.on-scroll.container.color (Enabled / Container) $header-on-scroll-container-color: md-sys-color.$surface-container; /// md.comp.full-screen-dialog.header.on-scroll.container.elevation (Enabled / Container) $header-on-scroll-container-elevation: md-sys-elevation.$level2; /// md.comp.full-screen-dialog.with-divider.divider.color (Enabled / Divider) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement $with-divider-divider-color: md-sys-color.$surface-variant; /// md.comp.full-screen-dialog.action-bar.label-text.type (Enabled / Label text) /// /// @deprecated Bug: should not have been created. If needed, copy to your own tokens. @mixin action-bar-label-text-type { font-family: $action-bar-label-text-font; font-size: $action-bar-label-text-size; font-weight: $action-bar-label-text-weight; letter-spacing: $action-bar-label-text-tracking; line-height: $action-bar-label-text-line-height; } /// md.comp.full-screen-dialog.header.action.label-text.type (Enabled / Label text) @mixin header-action-label-text-type { font-family: $header-action-label-text-font; font-size: $header-action-label-text-size; font-weight: $header-action-label-text-weight; letter-spacing: $header-action-label-text-tracking; line-height: $header-action-label-text-line-height; } /// md.comp.full-screen-dialog.header.headline.type (Enabled / Headline) @mixin header-headline-type { font-family: $header-headline-font; font-size: $header-headline-size; font-weight: $header-headline-weight; letter-spacing: $header-headline-tracking; line-height: $header-headline-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-filled.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.icon-button.filled.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.icon-button.filled.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.icon-button.filled.container.color (Enabled) $container-color: md-sys-color.$primary; /// md.comp.icon-button.filled.disabled.container.color (Disabled) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.icon-button.filled.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.icon-button.filled.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.icon-button.filled.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.icon-button.filled.icon.color (Enabled) $icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.icon-button.filled.selected.container.color (Enabled) $selected-container-color: md-sys-color.$primary; /// md.comp.icon-button.filled.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.filled.unselected.container.color (Enabled) $unselected-container-color: md-sys-color.$surface-container; /// md.comp.icon-button.filled.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.filled.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.filled.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.filled.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.filled.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.filled.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.filled.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; /// md.comp.icon-button.large.container.height $container-height: 96px; /// md.comp.icon-button.large.default.leading-space $default-leading-space: 32px; /// md.comp.icon-button.large.default.trailing-space $default-trailing-space: 32px; /// md.comp.icon-button.large.icon.size $icon-size: 32px; /// md.comp.icon-button.large.narrow.leading-space $narrow-leading-space: 16px; /// md.comp.icon-button.large.narrow.trailing-space $narrow-trailing-space: 16px; /// md.comp.icon-button.large.outlined.outline.width $outlined-outline-width: 2px; /// md.comp.icon-button.large.wide.leading-space $wide-leading-space: 48px; /// md.comp.icon-button.large.wide.trailing-space $wide-trailing-space: 48px; /// md.comp.icon-button.large.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.icon-button.large.container.shape.square $container-shape-square: md-sys-shape.$corner-extra-large; /// md.comp.icon-button.large.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.icon-button.large.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.icon-button.large.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-large; /// md.comp.icon-button.large.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-extra-large; /// md.comp.icon-button.large.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; /// md.comp.icon-button.medium.container.height $container-height: 56px; /// md.comp.icon-button.medium.default.leading-space $default-leading-space: 16px; /// md.comp.icon-button.medium.default.trailing-space $default-trailing-space: 16px; /// md.comp.icon-button.medium.icon.size $icon-size: 24px; /// md.comp.icon-button.medium.narrow.leading-space $narrow-leading-space: 12px; /// md.comp.icon-button.medium.narrow.trailing-space $narrow-trailing-space: 12px; /// md.comp.icon-button.medium.outlined.outline.width $outlined-outline-width: 1px; /// md.comp.icon-button.medium.wide.leading-space $wide-leading-space: 24px; /// md.comp.icon-button.medium.wide.trailing-space $wide-trailing-space: 24px; /// md.comp.icon-button.medium.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.icon-button.medium.container.shape.square $container-shape-square: md-sys-shape.$corner-large; /// md.comp.icon-button.medium.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.icon-button.medium.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.icon-button.medium.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-medium; /// md.comp.icon-button.medium.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-large; /// md.comp.icon-button.medium.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-outlined.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.icon-button.outlined.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.icon-button.outlined.selected.disabled.container.opacity (Disabled) $selected-disabled-container-opacity: 0.1; /// md.comp.icon-button.outlined.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.icon-button.outlined.disabled.outline.color (Disabled) $disabled-outline-color: md-sys-color.$outline-variant; /// md.comp.icon-button.outlined.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.icon-button.outlined.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.icon-button.outlined.icon.color (Enabled) $icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.outline.color (Enabled) $outline-color: md-sys-color.$outline-variant; /// md.comp.icon-button.outlined.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.icon-button.outlined.selected.container.color (Enabled) $selected-container-color: md-sys-color.$inverse-surface; /// md.comp.icon-button.outlined.selected.disabled.container.color (Disabled) $selected-disabled-container-color: md-sys-color.$on-surface; /// md.comp.icon-button.outlined.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.icon-button.outlined.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.icon-button.outlined.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.icon-button.outlined.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.icon-button.outlined.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.icon-button.outlined.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.icon-button.outlined.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.icon-button.outlined.unselected.disabled.outline.color (Disabled) $unselected-disabled-outline-color: md-sys-color.$outline-variant; /// md.comp.icon-button.outlined.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.unselected.outline.color (Enabled) $unselected-outline-color: md-sys-color.$outline-variant; /// md.comp.icon-button.outlined.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.outlined.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; /// md.comp.icon-button.small.container.height $container-height: 40px; /// md.comp.icon-button.small.default.leading-space $default-leading-space: 8px; /// md.comp.icon-button.small.default.trailing-space $default-trailing-space: 8px; /// md.comp.icon-button.small.icon.size $icon-size: 24px; /// md.comp.icon-button.small.narrow.leading-space $narrow-leading-space: 4px; /// md.comp.icon-button.small.narrow.trailing-space $narrow-trailing-space: 4px; /// md.comp.icon-button.small.outlined.outline.width $outlined-outline-width: 1px; /// md.comp.icon-button.small.wide.leading-space $wide-leading-space: 14px; /// md.comp.icon-button.small.wide.trailing-space $wide-trailing-space: 14px; /// md.comp.icon-button.small.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.icon-button.small.container.shape.square $container-shape-square: md-sys-shape.$corner-medium; /// md.comp.icon-button.small.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.icon-button.small.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.icon-button.small.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-small; /// md.comp.icon-button.small.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-medium; /// md.comp.icon-button.small.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-standard.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.icon-button.standard.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.icon-button.standard.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.icon-button.standard.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.icon-button.standard.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.icon-button.standard.icon.color (Enabled) $icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.icon-button.standard.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$primary; /// md.comp.icon-button.standard.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$primary; /// md.comp.icon-button.standard.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$primary; /// md.comp.icon-button.standard.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$primary; /// md.comp.icon-button.standard.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$primary; /// md.comp.icon-button.standard.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$primary; /// md.comp.icon-button.standard.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.icon-button.standard.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.standard.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-tonal.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.icon-button.tonal.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.icon-button.tonal.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.icon-button.tonal.container.color (Enabled) $container-color: md-sys-color.$secondary-container; /// md.comp.icon-button.tonal.disabled.container.color (Disabled) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.icon-button.tonal.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.icon-button.tonal.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.icon-button.tonal.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.icon-button.tonal.icon.color (Enabled) $icon-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.icon-button.tonal.selected.container.color (Enabled) $selected-container-color: md-sys-color.$secondary; /// md.comp.icon-button.tonal.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-secondary; /// md.comp.icon-button.tonal.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-secondary; /// md.comp.icon-button.tonal.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-secondary; /// md.comp.icon-button.tonal.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-secondary; /// md.comp.icon-button.tonal.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-secondary; /// md.comp.icon-button.tonal.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-secondary; /// md.comp.icon-button.tonal.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-secondary; /// md.comp.icon-button.tonal.unselected.container.color (Enabled) $unselected-container-color: md-sys-color.$secondary-container; /// md.comp.icon-button.tonal.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.icon-button.tonal.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-secondary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-xlarge.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; /// md.comp.icon-button.xlarge.container.height $container-height: 136px; /// md.comp.icon-button.xlarge.default.leading-space $default-leading-space: 48px; /// md.comp.icon-button.xlarge.default.trailing-space $default-trailing-space: 48px; /// md.comp.icon-button.xlarge.icon.size $icon-size: 40px; /// md.comp.icon-button.xlarge.narrow.leading-space $narrow-leading-space: 32px; /// md.comp.icon-button.xlarge.narrow.trailing-space $narrow-trailing-space: 32px; /// md.comp.icon-button.xlarge.outlined.outline.width $outlined-outline-width: 3px; /// md.comp.icon-button.xlarge.wide.leading-space $wide-leading-space: 72px; /// md.comp.icon-button.xlarge.wide.trailing-space $wide-trailing-space: 72px; /// md.comp.icon-button.xlarge.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.icon-button.xlarge.container.shape.square $container-shape-square: md-sys-shape.$corner-extra-large; /// md.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.icon-button.xlarge.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-large; /// md.comp.icon-button.xlarge.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-extra-large; /// md.comp.icon-button.xlarge.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button-xsmall.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-motion'; @use 'md-sys-shape'; /// md.comp.icon-button.xsmall.container.height $container-height: 32px; /// md.comp.icon-button.xsmall.default.leading-space $default-leading-space: 6px; /// md.comp.icon-button.xsmall.default.trailing-space $default-trailing-space: 6px; /// md.comp.icon-button.xsmall.icon.size $icon-size: 20px; /// md.comp.icon-button.xsmall.narrow.leading-space $narrow-leading-space: 4px; /// md.comp.icon-button.xsmall.narrow.trailing-space $narrow-trailing-space: 4px; /// md.comp.icon-button.xsmall.outlined.outline.width $outlined-outline-width: 1px; /// md.comp.icon-button.xsmall.wide.leading-space $wide-leading-space: 10px; /// md.comp.icon-button.xsmall.wide.trailing-space $wide-trailing-space: 10px; /// md.comp.icon-button.xsmall.container.shape.round $container-shape-round: md-sys-shape.$corner-full; /// md.comp.icon-button.xsmall.container.shape.square $container-shape-square: md-sys-shape.$corner-medium; /// md.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.damping $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.stiffness $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.icon-button.xsmall.pressed.container.shape $pressed-container-shape: md-sys-shape.$corner-small; /// md.comp.icon-button.xsmall.selected.container.shape.round $selected-container-shape-round: md-sys-shape.$corner-medium; /// md.comp.icon-button.xsmall.selected.container.shape.square $selected-container-shape-square: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-icon-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-motion'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.icon-button.container.height (Enabled) $container-height: 40px; /// md.comp.icon-button.default.leading-space (Enabled) $default-leading-space: 8px; /// md.comp.icon-button.default.trailing-space (Enabled) $default-trailing-space: 8px; /// md.comp.icon-button.disabled.container.opacity (Disabled) $disabled-container-opacity: 0.1; /// md.comp.icon-button.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.icon-button.icon.size (Enabled) $icon-size: 24px; /// md.comp.icon-button.narrow.leading-space (Enabled) $narrow-leading-space: 4px; /// md.comp.icon-button.narrow.trailing-space (Enabled) $narrow-trailing-space: 4px; /// md.comp.icon-button.state-layer.height ([Deprecated] Enabled / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $state-layer-height: 40px; /// md.comp.icon-button.state-layer.size ([Deprecated] Enabled / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $state-layer-size: 40px; /// md.comp.icon-button.state-layer.width ([Deprecated] Enabled / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $state-layer-width: 40px; /// md.comp.icon-button.wide.leading-space (Enabled) $wide-leading-space: 14px; /// md.comp.icon-button.wide.trailing-space (Enabled) $wide-trailing-space: 14px; /// md.comp.icon-button.container.color (Enabled) $container-color: md-sys-color.$primary; /// md.comp.icon-button.container.shape.round (Enabled) $container-shape-round: md-sys-shape.$corner-full; /// md.comp.icon-button.container.shape.square (Enabled) $container-shape-square: md-sys-shape.$corner-medium; /// md.comp.icon-button.disabled.container.color (Disabled) $disabled-container-color: md-sys-color.$on-surface; /// md.comp.icon-button.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.icon-button.focus.indicator.color (Enabled) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.icon-button.focus.indicator.outline.offset (Enabled) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.icon-button.focus.indicator.thickness (Enabled) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.icon-button.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.icon-button.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.icon-button.icon.color (Enabled) $icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.pressed.container.corner-size.motion.spring.damping (Enabled) $pressed-container-corner-size-motion-spring-damping: md-sys-motion.$spring-fast-spatial-damping; /// md.comp.icon-button.pressed.container.corner-size.motion.spring.stiffness (Enabled) $pressed-container-corner-size-motion-spring-stiffness: md-sys-motion.$spring-fast-spatial-stiffness; /// md.comp.icon-button.pressed.container.shape (Enabled) $pressed-container-shape: md-sys-shape.$corner-small; /// md.comp.icon-button.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.icon-button.selected.container.color (Enabled) $selected-container-color: md-sys-color.$primary; /// md.comp.icon-button.selected.container.shape.round (Enabled) $selected-container-shape-round: md-sys-shape.$corner-medium; /// md.comp.icon-button.selected.container.shape.square (Enabled) $selected-container-shape-square: md-sys-shape.$corner-full; /// md.comp.icon-button.selected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $selected-focus-icon-color: md-sys-color.$primary; /// md.comp.icon-button.selected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $selected-focus-state-layer-color: md-sys-color.$primary; /// md.comp.icon-button.selected.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.icon-button.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.selected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $selected-hover-icon-color: md-sys-color.$primary; /// md.comp.icon-button.selected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $selected-hover-state-layer-color: md-sys-color.$primary; /// md.comp.icon-button.selected.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.icon-button.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-primary; /// md.comp.icon-button.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.icon-button.selected.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.icon-button.state-layer.shape ([Deprecated] Enabled / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $state-layer-shape: md-sys-shape.$corner-full; /// md.comp.icon-button.unselected.container.color (Enabled) $unselected-container-color: md-sys-color.$surface-container; /// md.comp.icon-button.unselected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $unselected-focus-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.icon-button.unselected.focused.icon.color (Focused) $unselected-focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.focused.state-layer.color (Focused) $unselected-focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) /// /// @deprecated Token is deprecated. $unselected-hover-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.icon-button.unselected.hovered.icon.color (Hovered) $unselected-hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.hovered.state-layer.color (Hovered) $unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.icon.color (Enabled) $unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.pressed.icon.color (Pressed) $unselected-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.pressed.state-layer.color (Pressed) $unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.icon-button.unselected.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) /// /// @deprecated Token is deprecated. $unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-input-chip.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.input-chip.container.height (Enabled / Container) $container-height: 32px; /// md.comp.input-chip.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.input-chip.disabled.outline.opacity (Disabled / Container) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $disabled-outline-opacity: 0.12; /// md.comp.input-chip.disabled.selected.container.opacity (Disabled / Container) $disabled-selected-container-opacity: 0.12; /// md.comp.input-chip.disabled.unselected.outline.opacity (Disabled / Container) $disabled-unselected-outline-opacity: 0.12; /// md.comp.input-chip.outline.width (Enabled / Container) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $outline-width: 1px; /// md.comp.input-chip.selected.outline.width (Enabled / Container) $selected-outline-width: 0px; /// md.comp.input-chip.unselected.outline.width (Enabled / Container) $unselected-outline-width: 1px; /// md.comp.input-chip.with-avatar.avatar.size (Enabled / Avatar) $with-avatar-avatar-size: 24px; /// md.comp.input-chip.with-avatar.disabled.avatar.opacity (Disabled / Avatar) $with-avatar-disabled-avatar-opacity: 0.38; /// md.comp.input-chip.with-leading-icon.disabled.leading-icon.opacity (Disabled / Leading icon) $with-leading-icon-disabled-leading-icon-opacity: 0.38; /// md.comp.input-chip.with-leading-icon.leading-icon.size (Enabled / Leading icon) $with-leading-icon-leading-icon-size: 18px; /// md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.opacity (Disabled / Trailing icon) $with-trailing-icon-disabled-trailing-icon-opacity: 0.38; /// md.comp.input-chip.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon) $with-trailing-icon-trailing-icon-size: 18px; /// md.comp.input-chip.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.input-chip.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-small; /// md.comp.input-chip.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.input-chip.disabled.outline.color (Disabled / Container) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $disabled-outline-color: md-sys-color.$on-surface; /// md.comp.input-chip.disabled.selected.container.color (Disabled / Container) $disabled-selected-container-color: md-sys-color.$on-surface; /// md.comp.input-chip.disabled.unselected.outline.color (Disabled / Container) $disabled-unselected-outline-color: md-sys-color.$on-surface; /// md.comp.input-chip.dragged.container.elevation (Dragged / Container) $dragged-container-elevation: md-sys-elevation.$level4; /// md.comp.input-chip.dragged.label-text.color (Dragged / Label text) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $dragged-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.dragged.state-layer.color (Dragged / State layer) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $dragged-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.dragged.state-layer.opacity (Dragged / State layer) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.input-chip.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.input-chip.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.input-chip.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.input-chip.focus.label-text.color (Focused / Label text) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $focus-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.focus.outline.color (Focused / Container) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $focus-outline-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.focus.state-layer.color (Focused / State layer) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.focus.state-layer.opacity (Focused / State layer) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.input-chip.hover.label-text.color (Hovered / Label text) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.hover.state-layer.color (Hovered / State layer) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.hover.state-layer.opacity (Hovered / State layer) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.input-chip.label-text.color (Enabled / Label text) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.input-chip.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.input-chip.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.input-chip.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.input-chip.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.input-chip.outline.color (Enabled / Container) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $outline-color: md-sys-color.$outline; /// md.comp.input-chip.pressed.label-text.color (Pressed (ripple) / Label text) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.pressed.state-layer.color (Pressed (ripple) / State layer) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.pressed.state-layer.opacity (Pressed (ripple) / State layer) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status. $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.input-chip.selected.container.color (Enabled / Container) $selected-container-color: md-sys-color.$secondary-container; /// md.comp.input-chip.selected.dragged.label-text.color (Dragged / Label text) $selected-dragged-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.dragged.state-layer.color (Dragged / State layer) $selected-dragged-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.dragged.state-layer.opacity (Dragged / State layer) $selected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.input-chip.selected.focus.label-text.color (Focused / Label text) $selected-focus-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.focus.state-layer.color (Focused / State layer) $selected-focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.focus.state-layer.opacity (Focused / State layer) $selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.input-chip.selected.hover.label-text.color (Hovered / Label text) $selected-hover-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.hover.state-layer.color (Hovered / State layer) $selected-hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.hover.state-layer.opacity (Hovered / State layer) $selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.input-chip.selected.label-text.color (Enabled / Label text) $selected-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.pressed.label-text.color (Pressed (ripple) / Label text) $selected-pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $selected-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer) $selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.input-chip.unselected.dragged.label-text.color (Dragged / Label text) $unselected-dragged-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.dragged.state-layer.color (Dragged / State layer) $unselected-dragged-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.dragged.state-layer.opacity (Dragged / State layer) $unselected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.input-chip.unselected.focus.label-text.color (Focused / Label text) $unselected-focus-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.focus.outline.color (Focused / Container) $unselected-focus-outline-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.focus.state-layer.color (Focused / State layer) $unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.focus.state-layer.opacity (Focused / State layer) $unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.input-chip.unselected.hover.label-text.color (Hovered / Label text) $unselected-hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.hover.state-layer.color (Hovered / State layer) $unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.hover.state-layer.opacity (Hovered / State layer) $unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.input-chip.unselected.label-text.color (Enabled / Label text) $unselected-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.outline.color (Enabled / Container) $unselected-outline-color: md-sys-color.$outline-variant; /// md.comp.input-chip.unselected.pressed.label-text.color (Pressed (ripple) / Label text) $unselected-pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer) $unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.input-chip.with-avatar.avatar.shape (Enabled / Avatar) $with-avatar-avatar-shape: md-sys-shape.$corner-full; /// md.comp.input-chip.with-leading-icon.disabled.leading-icon.color (Disabled / Leading icon) $with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.input-chip.with-leading-icon.dragged.leading-icon.color (Dragged / Leading icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status. $with-leading-icon-dragged-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-leading-icon.focus.leading-icon.color (Focused / Leading icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status. $with-leading-icon-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-leading-icon.hover.leading-icon.color (Hovered / Leading icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status. $with-leading-icon-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-leading-icon.leading-icon.color (Enabled / Leading icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status. $with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-leading-icon.pressed.leading-icon.color (Pressed (ripple) / Leading icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status. $with-leading-icon-pressed-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-leading-icon.selected.dragged.leading-icon.color (Dragged / Leading icon) $with-leading-icon-selected-dragged-leading-icon-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.with-leading-icon.selected.focus.leading-icon.color (Focused / Leading icon) $with-leading-icon-selected-focus-leading-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-leading-icon.selected.hover.leading-icon.color (Hovered / Leading icon) $with-leading-icon-selected-hover-leading-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-leading-icon.selected.leading-icon.color (Enabled / Leading icon) $with-leading-icon-selected-leading-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-leading-icon.selected.pressed.leading-icon.color (Pressed (ripple) / Leading icon) $with-leading-icon-selected-pressed-leading-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-leading-icon.unselected.dragged.leading-icon.color (Dragged / Leading icon) $with-leading-icon-unselected-dragged-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-leading-icon.unselected.focus.leading-icon.color (Focused / Leading icon) $with-leading-icon-unselected-focus-leading-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-leading-icon.unselected.hover.leading-icon.color (Hovered / Leading icon) $with-leading-icon-unselected-hover-leading-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-leading-icon.unselected.leading-icon.color (Enabled / Leading icon) $with-leading-icon-unselected-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-leading-icon.unselected.pressed.leading-icon.color (Pressed (ripple) / Leading icon) $with-leading-icon-unselected-pressed-leading-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color (Disabled / Trailing icon) $with-trailing-icon-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.input-chip.with-trailing-icon.dragged.trailing-icon.color (Dragged / Trailing icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status. $with-trailing-icon-dragged-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-trailing-icon.focus.trailing-icon.color (Focused / Trailing icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status. $with-trailing-icon-focus-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-trailing-icon.hover.trailing-icon.color (Hovered / Trailing icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status. $with-trailing-icon-hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-trailing-icon.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status. $with-trailing-icon-pressed-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-trailing-icon.selected.dragged.trailing-icon.color (Dragged / Trailing icon) $with-trailing-icon-selected-dragged-trailing-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-trailing-icon.selected.focus.trailing-icon.color (Focused / Trailing icon) $with-trailing-icon-selected-focus-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.with-trailing-icon.selected.hover.trailing-icon.color (Hovered / Trailing icon) $with-trailing-icon-selected-hover-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.with-trailing-icon.selected.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon) $with-trailing-icon-selected-pressed-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color (Enabled / Trailing icon) $with-trailing-icon-selected-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.input-chip.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon) /// /// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status. $with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-trailing-icon.unselected.dragged.trailing-icon.color (Dragged / Trailing icon) $with-trailing-icon-unselected-dragged-trailing-icon-color: md-sys-color.$primary; /// md.comp.input-chip.with-trailing-icon.unselected.focus.trailing-icon.color (Focused / Trailing icon) $with-trailing-icon-unselected-focus-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-trailing-icon.unselected.hover.trailing-icon.color (Hovered / Trailing icon) $with-trailing-icon-unselected-hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-trailing-icon.unselected.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon) $with-trailing-icon-unselected-pressed-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color (Enabled / Trailing icon) $with-trailing-icon-unselected-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.input-chip.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-linear-progress-indicator.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; /// md.comp.linear-progress-indicator.active-indicator.height ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $active-indicator-height: 4px; /// md.comp.linear-progress-indicator.track.height ([Deprecated] Enabled / [Deprecated] Track) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $track-height: 4px; /// md.comp.linear-progress-indicator.active-indicator.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $active-indicator-color: md-sys-color.$primary; /// md.comp.linear-progress-indicator.active-indicator.shape ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $active-indicator-shape: md-sys-shape.$corner-none; /// md.comp.linear-progress-indicator.four-color.active-indicator.four.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $four-color-active-indicator-four-color: md-sys-color.$tertiary-container; /// md.comp.linear-progress-indicator.four-color.active-indicator.one.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $four-color-active-indicator-one-color: md-sys-color.$primary; /// md.comp.linear-progress-indicator.four-color.active-indicator.three.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $four-color-active-indicator-three-color: md-sys-color.$tertiary; /// md.comp.linear-progress-indicator.four-color.active-indicator.two.color ([Deprecated] Enabled / [Deprecated] Active indicator) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $four-color-active-indicator-two-color: md-sys-color.$primary-container; /// md.comp.linear-progress-indicator.track.color ([Deprecated] Enabled / [Deprecated] Track) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $track-color: md-sys-color.$surface-container-highest; /// md.comp.linear-progress-indicator.track.shape ([Deprecated] Enabled / [Deprecated] Track) /// /// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead. $track-shape: md-sys-shape.$corner-none; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-list-expand.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; /// md.comp.list.expand.collapsed.list-item.trailing-icon.container.color (Color) $collapsed-list-item-trailing-icon-container-color: md-sys-color.$surface; /// md.comp.list.expand.collapsed.list-item.trailing-icon.icon.color (Color) $collapsed-list-item-trailing-icon-icon-color: md-sys-color.$on-surface; /// md.comp.list.expand.container.shape (Shape) $container-shape: md-sys-shape.$corner-large; /// md.comp.list.expand.expanded.list-item.container.color (Color) $expanded-list-item-container-color: md-sys-color.$surface; /// md.comp.list.expand.expanded.list-item.segmented.container.color (Color) $expanded-list-item-segmented-container-color: md-sys-color.$surface; /// md.comp.list.expand.expanded.list-item.trailing-icon.container.color (Color) $expanded-list-item-trailing-icon-container-color: md-sys-color.$surface-container; /// md.comp.list.expand.expanded.list-item.trailing-icon.icon.color (Color) $expanded-list-item-trailing-icon-icon-color: md-sys-color.$on-surface; /// md.comp.list.expand.trailing-icon.shape (Shape) $trailing-icon-shape: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-list-reorder.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; /// md.comp.list.reorder.list-item.container.color (Color) $list-item-container-color: md-sys-color.$tertiary-container; /// md.comp.list.reorder.list-item.drop-zone.color (Color) $list-item-drop-zone-color: md-sys-color.$surface-container-low; /// md.comp.list.reorder.list-item.label-text.color (Color) $list-item-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.list.reorder.list-item.leading-icon.color (Color) $list-item-leading-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.list.reorder.list-item.overline.color (Color) $list-item-overline-color: md-sys-color.$on-tertiary-container; /// md.comp.list.reorder.list-item.shadow-color (Color) $list-item-shadow-color: md-sys-color.$shadow; /// md.comp.list.reorder.list-item.shape (Shape) $list-item-shape: md-sys-shape.$corner-large; /// md.comp.list.reorder.list-item.state-layer.color (Color) $list-item-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.list.reorder.list-item.state-layer.opacity (Color) $list-item-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.list.reorder.list-item.supporting-text.color (Color) $list-item-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.list.reorder.list-item.trailing-icon.color (Color) $list-item-trailing-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.list.reorder.list-item.trailing-supporting-text.color (Color) $list-item-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-list-reveal.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; /// md.comp.list.reveal.list-item.action.icon-button.container.color (Color / Swipe action) $list-item-action-icon-button-container-color: md-sys-color.$primary; /// md.comp.list.reveal.list-item.action.icon-button.focused.state-layer.color (Color / Swipe action) $list-item-action-icon-button-focused-state-layer-color: md-sys-color.$on-primary; /// md.comp.list.reveal.list-item.action.icon-button.hovered.state-layer.color (Color / Swipe action) $list-item-action-icon-button-hovered-state-layer-color: md-sys-color.$on-primary; /// md.comp.list.reveal.list-item.action.icon-button.icon.color (Color / Swipe action) $list-item-action-icon-button-icon-color: md-sys-color.$on-primary; /// md.comp.list.reveal.list-item.action.icon-button.pressed.state-layer.color (Color / Swipe action) $list-item-action-icon-button-pressed-state-layer-color: md-sys-color.$on-primary; /// md.comp.list.reveal.list-item.container.color (Color) $list-item-container-color: md-sys-color.$surface; /// md.comp.list.reveal.list-item.container.shape (Shape) $list-item-container-shape: md-sys-shape.$corner-large; /// md.comp.list.reveal.list-item.icon-button.action.container.shape (Shape) $list-item-icon-button-action-container-shape: md-sys-shape.$corner-large; /// md.comp.list.reveal.list-item.icon-button.container.color (Color / Revealed icon) $list-item-icon-button-container-color: md-sys-color.$secondary-container; /// md.comp.list.reveal.list-item.icon-button.container.shape (Shape) $list-item-icon-button-container-shape: md-sys-shape.$corner-full; /// md.comp.list.reveal.list-item.icon-button.focused.state-layer.color (Color / Revealed icon) $list-item-icon-button-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.list.reveal.list-item.icon-button.hovered.state-layer.color (Color / Revealed icon) $list-item-icon-button-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.list.reveal.list-item.icon-button.icon.color (Color / Revealed icon) $list-item-icon-button-icon-color: md-sys-color.$on-secondary-container; /// md.comp.list.reveal.list-item.icon-button.pressed.state-layer.color (Color / Revealed icon) $list-item-icon-button-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.list.reveal.list-item.segmented.container.shape (Shape) $list-item-segmented-container-shape: md-sys-shape.$corner-large; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-list.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.list.divider.bottom-space (Spacing) $divider-bottom-space: 0px; /// md.comp.list.divider.height (Color / Enabled) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement $divider-height: 1px; /// md.comp.list.divider.leading-space (Spacing) $divider-leading-space: 16px; /// md.comp.list.divider.top-space (Spacing) $divider-top-space: 0px; /// md.comp.list.divider.trailing-space (Spacing) $divider-trailing-space: 16px; /// md.comp.list.list-item.between-space (Spacing) $list-item-between-space: 12px; /// md.comp.list.list-item.bottom-space (Spacing) $list-item-bottom-space: 10px; /// md.comp.list.list-item.container.height (Color / Enabled) /// /// @deprecated Removing single height value in favor of distinct height values for 1, 2, or 3 line list items. $list-item-container-height: 56px; /// md.comp.list.list-item.disabled.label-text.opacity (Color / Disabled) $list-item-disabled-label-text-opacity: 0.38; /// md.comp.list.list-item.disabled.leading-icon.opacity (Color / Disabled) $list-item-disabled-leading-icon-opacity: 0.38; /// md.comp.list.list-item.disabled.overline.opacity (Color / Disabled) $list-item-disabled-overline-opacity: 0.38; /// md.comp.list.list-item.disabled.state-layer.opacity (Color / Disabled) $list-item-disabled-state-layer-opacity: 0.1; /// md.comp.list.list-item.disabled.supporting-text.opacity (Color / Disabled) $list-item-disabled-supporting-text-opacity: 0.38; /// md.comp.list.list-item.disabled.trailing-icon.opacity (Color / Disabled) $list-item-disabled-trailing-icon-opacity: 0.38; /// md.comp.list.list-item.large.leading-video.height (Size and typography) $list-item-large-leading-video-height: 64px; /// md.comp.list.list-item.large.leading-video.width (Size and typography) $list-item-large-leading-video-width: 114px; /// md.comp.list.list-item.leading-avatar.size (Size and typography) $list-item-leading-avatar-size: 40px; /// md.comp.list.list-item.leading-icon.expressive.size (Size and typography) $list-item-leading-icon-expressive-size: 20px; /// md.comp.list.list-item.leading-icon.size (Size and typography) $list-item-leading-icon-size: 24px; /// md.comp.list.list-item.leading-image.height (Size and typography) $list-item-leading-image-height: 56px; /// md.comp.list.list-item.leading-image.width (Size and typography) $list-item-leading-image-width: 56px; /// md.comp.list.list-item.leading-space (Spacing) $list-item-leading-space: 16px; /// md.comp.list.list-item.leading-video.width (Size and typography) $list-item-leading-video-width: 100px; /// md.comp.list.list-item.one-line.container.height (Size and typography) $list-item-one-line-container-height: 56px; /// md.comp.list.list-item.selected.disabled.container.opacity (Color / Disabled - Selected) $list-item-selected-disabled-container-opacity: 0.38; /// md.comp.list.list-item.selected.disabled.label-text.opacity (Color / Disabled - Selected) $list-item-selected-disabled-label-text-opacity: 0.38; /// md.comp.list.list-item.selected.disabled.leading-icon.opacity (Color / Disabled - Selected) $list-item-selected-disabled-leading-icon-opacity: 0.38; /// md.comp.list.list-item.selected.disabled.overline.opacity (Color / Disabled - Selected) $list-item-selected-disabled-overline-opacity: 0.38; /// md.comp.list.list-item.selected.disabled.state-layer.opacity (Color / Disabled - Selected) $list-item-selected-disabled-state-layer-opacity: 0.1; /// md.comp.list.list-item.selected.disabled.supporting-text.opacity (Color / Disabled - Selected) $list-item-selected-disabled-supporting-text-opacity: 0.38; /// md.comp.list.list-item.selected.disabled.trailing-icon.opacity (Color / Disabled - Selected) $list-item-selected-disabled-trailing-icon-opacity: 0.38; /// md.comp.list.list-item.selected.disabled.trailing-supporting-text.opacity (Color / Disabled - Selected) $list-item-selected-disabled-trailing-supporting-text-opacity: 0.38; /// md.comp.list.list-item.small.leading-video.height (Size and typography) $list-item-small-leading-video-height: 56px; /// md.comp.list.list-item.small.leading-video.width (Size and typography) $list-item-small-leading-video-width: 100px; /// md.comp.list.list-item.three-line.container.height (Size and typography) $list-item-three-line-container-height: 88px; /// md.comp.list.list-item.top-space (Spacing) $list-item-top-space: 10px; /// md.comp.list.list-item.trailing-icon.expressive.size (Size and typography) $list-item-trailing-icon-expressive-size: 20px; /// md.comp.list.list-item.trailing-icon.size (Size and typography) $list-item-trailing-icon-size: 24px; /// md.comp.list.list-item.trailing-space (Spacing) $list-item-trailing-space: 16px; /// md.comp.list.list-item.two-line.container.height (Size and typography) $list-item-two-line-container-height: 72px; /// md.comp.list.md.comp.list.list-item.one-line.container.height (Color / Enabled) /// /// @deprecated Typo in token name. Please use `md.comp.list.list-item.one-line.container.height `. $md-comp-list-list-item-one-line-container-height: 56px; /// md.comp.list.md.comp.list.list-item.three-line.container.height (Color / Enabled) /// /// @deprecated Typo in token name. Please use `md.comp.list.list-item.three-line.container.height`. $md-comp-list-list-item-three-line-container-height: 88px; /// md.comp.list.md.comp.list.list-item.two-line.container.height (Color / Enabled) /// /// @deprecated Typo in token name. Please use `md.comp.list.md.comp.list.list-item.two-line.container.height`. $md-comp-list-list-item-two-line-container-height: 72px; /// md.comp.list.segmented.gap (Spacing) $segmented-gap: 2px; /// md.comp.list.container.shape (Shape) $container-shape: md-sys-shape.$corner-large; /// md.comp.list.divider.color (Color / Enabled) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement $divider-color: md-sys-color.$outline; /// md.comp.list.focus.indicator.color (Color / Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.list.focus.indicator.outline.offset (Color / Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset; /// md.comp.list.focus.indicator.thickness (Color / Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.list.list-item.container.color (Color / Enabled) $list-item-container-color: md-sys-color.$surface; /// md.comp.list.list-item.container.elevation (Color / Enabled) $list-item-container-elevation: md-sys-elevation.$level0; /// md.comp.list.list-item.container.expressive.shape (Shape) $list-item-container-expressive-shape: md-sys-shape.$corner-extra-small; /// md.comp.list.list-item.container.shape (Shape) $list-item-container-shape: md-sys-shape.$corner-none; /// md.comp.list.list-item.disabled.container.expressive.shape (Shape) $list-item-disabled-container-expressive-shape: md-sys-shape.$corner-extra-small; /// md.comp.list.list-item.disabled.label-text.color (Color / Disabled) $list-item-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.disabled.leading-icon.color (Color / Disabled) $list-item-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.disabled.overline.color (Color / Disabled) $list-item-disabled-overline-color: md-sys-color.$on-surface; /// md.comp.list.list-item.disabled.state-layer.color (Color / Disabled) $list-item-disabled-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.disabled.supporting-text.color (Color / Disabled) $list-item-disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.disabled.trailing-icon.color (Color / Disabled) $list-item-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.dragged.container.elevation (Color / Dragged (baseline only)) $list-item-dragged-container-elevation: md-sys-elevation.$level4; /// md.comp.list.list-item.dragged.container.expressive.shape (Shape) $list-item-dragged-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.dragged.label-text.color (Color / Dragged (baseline only)) $list-item-dragged-label-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.dragged.leading-icon.icon.color (Color / Dragged (baseline only)) $list-item-dragged-leading-icon-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.dragged.state-layer.color (Color / Dragged (baseline only)) $list-item-dragged-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.dragged.state-layer.opacity (Color / Dragged (baseline only)) $list-item-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.list.list-item.dragged.trailing-icon.icon.color (Color / Dragged (baseline only)) $list-item-dragged-trailing-icon-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.focus.label-text.color (Color / Focused) $list-item-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.focus.leading-icon.icon.color (Color / Focused) $list-item-focus-leading-icon-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.focus.state-layer.color (Color / Focused) $list-item-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.focus.state-layer.opacity (Color / Focused) $list-item-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.list.list-item.focus.trailing-icon.icon.color (Color / Focused) $list-item-focus-trailing-icon-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.focused.container.expressive.shape (Shape) $list-item-focused-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.hover.label-text.color (Color / Hovered) $list-item-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.hover.leading-icon.icon.color (Color / Hovered) $list-item-hover-leading-icon-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.hover.state-layer.color (Color / Hovered) $list-item-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.hover.state-layer.opacity (Color / Hovered) $list-item-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.list.list-item.hover.trailing-icon.icon.color (Color / Hovered) $list-item-hover-trailing-icon-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.hovered.container.expressive.shape (Shape) $list-item-hovered-container-expressive-shape: md-sys-shape.$corner-medium; /// md.comp.list.list-item.label-text.color (Color / Enabled) $list-item-label-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.label-text.font (Size and typography) $list-item-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.list.list-item.label-text.line-height (Size and typography) $list-item-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.list.list-item.label-text.size (Size and typography) $list-item-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.list.list-item.label-text.tracking (Size and typography) $list-item-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.list.list-item.label-text.weight (Size and typography) $list-item-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.list.list-item.leading-avatar-label.color (Color / Enabled) $list-item-leading-avatar-label-color: md-sys-color.$on-primary-container; /// md.comp.list.list-item.leading-avatar-label.font (Size and typography) $list-item-leading-avatar-label-font: md-sys-typescale.$title-medium-font; /// md.comp.list.list-item.leading-avatar-label.line-height (Size and typography) $list-item-leading-avatar-label-line-height: md-sys-typescale.$title-medium-line-height; /// md.comp.list.list-item.leading-avatar-label.size (Size and typography) $list-item-leading-avatar-label-size: md-sys-typescale.$title-medium-size; /// md.comp.list.list-item.leading-avatar-label.tracking (Size and typography) $list-item-leading-avatar-label-tracking: md-sys-typescale.$title-medium-tracking; /// md.comp.list.list-item.leading-avatar-label.weight (Size and typography) $list-item-leading-avatar-label-weight: md-sys-typescale.$title-medium-weight; /// md.comp.list.list-item.leading-avatar.color (Color / Enabled) $list-item-leading-avatar-color: md-sys-color.$primary-container; /// md.comp.list.list-item.leading-avatar.shape (Shape) $list-item-leading-avatar-shape: md-sys-shape.$corner-full; /// md.comp.list.list-item.leading-icon.color (Color / Enabled) $list-item-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.leading-image.expressive.shape (Shape) $list-item-leading-image-expressive-shape: md-sys-shape.$corner-small; /// md.comp.list.list-item.leading-image.shape (Shape) $list-item-leading-image-shape: md-sys-shape.$corner-none; /// md.comp.list.list-item.leading-video.shape (Shape) $list-item-leading-video-shape: md-sys-shape.$corner-small; /// md.comp.list.list-item.overline.color (Color / Enabled) $list-item-overline-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.overline.font (Size and typography) $list-item-overline-font: md-sys-typescale.$label-small-font; /// md.comp.list.list-item.overline.line-height (Size and typography) $list-item-overline-line-height: md-sys-typescale.$label-small-line-height; /// md.comp.list.list-item.overline.size (Size and typography) $list-item-overline-size: md-sys-typescale.$label-small-size; /// md.comp.list.list-item.overline.tracking (Size and typography) $list-item-overline-tracking: md-sys-typescale.$label-small-tracking; /// md.comp.list.list-item.overline.weight (Size and typography) $list-item-overline-weight: md-sys-typescale.$label-small-weight; /// md.comp.list.list-item.pressed.container.expressive.shape (Shape) $list-item-pressed-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.pressed.label-text.color (Color / Pressed (ripple)) $list-item-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.pressed.leading-icon.icon.color (Color / Pressed (ripple)) $list-item-pressed-leading-icon-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.pressed.state-layer.color (Color / Pressed (ripple)) $list-item-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.pressed.state-layer.opacity (Color / Pressed (ripple)) $list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.list.list-item.pressed.trailing-icon.icon.color (Color / Pressed (ripple)) $list-item-pressed-trailing-icon-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.segmented.container.color (Color / Enabled) $list-item-segmented-container-color: md-sys-color.$surface; /// md.comp.list.list-item.selected.container.color (Color / Enabled - Selected) $list-item-selected-container-color: md-sys-color.$secondary-container; /// md.comp.list.list-item.selected.container.expressive.shape (Shape) $list-item-selected-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.selected.container.shape (Shape) $list-item-selected-container-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.selected.disabled.container.color (Color / Disabled - Selected) $list-item-selected-disabled-container-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.disabled.container.expressive.shape (Shape) $list-item-selected-disabled-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.selected.disabled.label-text.color (Color / Disabled - Selected) $list-item-selected-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.disabled.leading-icon.color (Color / Disabled - Selected) $list-item-selected-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.disabled.overline.color (Color / Disabled - Selected) $list-item-selected-disabled-overline-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.disabled.state-layer.color (Color / Disabled - Selected) $list-item-selected-disabled-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.disabled.supporting-text.color (Color / Disabled - Selected) $list-item-selected-disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.disabled.trailing-icon.color (Color / Disabled - Selected) $list-item-selected-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.disabled.trailing-supporting-text.color (Color / Disabled - Selected) $list-item-selected-disabled-trailing-supporting-text-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.dragged.container.expressive.shape (Shape) $list-item-selected-dragged-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.selected.dragged.label-text.color (Color / Dragged (baseline only)) $list-item-selected-dragged-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.dragged.leading-icon.color (Color / Dragged (baseline only)) $list-item-selected-dragged-leading-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.dragged.state-layer.color (Color / Dragged (baseline only)) $list-item-selected-dragged-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.dragged.state-layer.opacity (Color / Dragged (baseline only)) $list-item-selected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.list.list-item.selected.dragged.trailing-icon.color (Color / Dragged (baseline only)) $list-item-selected-dragged-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.focus.label-text.color (Color / Focused - Selected) $list-item-selected-focus-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.focus.leading-icon.color (Color / Focused - Selected) $list-item-selected-focus-leading-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.focus.state-layer.color (Color / Focused - Selected) $list-item-selected-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.focus.state-layer.opacity (Color / Focused - Selected) $list-item-selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.list.list-item.selected.focus.trailing-icon.color (Color / Focused - Selected) $list-item-selected-focus-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.focused.container.expressive.shape (Shape) $list-item-selected-focused-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.selected.hover.label-text.color (Color / Hovered - Selected) $list-item-selected-hover-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.hover.leading-icon.color (Color / Hovered - Selected) $list-item-selected-hover-leading-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.hover.state-layer.color (Color / Hovered - Selected) $list-item-selected-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.hover.state-layer.opacity (Color / Hovered - Selected) $list-item-selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.list.list-item.selected.hover.trailing-icon.color (Color / Hovered - Selected) $list-item-selected-hover-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.hovered.container.expressive.shape (Shape) $list-item-selected-hovered-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.selected.label-text.color (Color / Enabled - Selected) $list-item-selected-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.leading-icon.color (Color / Enabled - Selected) $list-item-selected-leading-icon-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.overline.color (Color / Enabled - Selected) $list-item-selected-overline-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.pressed.container.expressive.shape (Shape) $list-item-selected-pressed-container-expressive-shape: md-sys-shape.$corner-large; /// md.comp.list.list-item.selected.pressed.label-text.color (Color / Pressed - Selected) $list-item-selected-pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.pressed.leading-icon.color (Color / Pressed - Selected) $list-item-selected-pressed-leading-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.pressed.state-layer.color (Color / Pressed - Selected) $list-item-selected-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.pressed.state-layer.opacity (Color / Pressed - Selected) $list-item-selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.list.list-item.selected.pressed.trailing-icon.color (Color / Pressed - Selected) $list-item-selected-pressed-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.selected.supporting-text.color (Color / Enabled - Selected) $list-item-selected-supporting-text-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.trailing-icon.color (Color / Enabled - Selected) $list-item-selected-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.selected.trailing-supporting-text.color (Color / Enabled - Selected) $list-item-selected-trailing-supporting-text-color: md-sys-color.$on-secondary-container; /// md.comp.list.list-item.supporting-text.color (Color / Enabled) $list-item-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.supporting-text.font (Size and typography) $list-item-supporting-text-font: md-sys-typescale.$body-medium-font; /// md.comp.list.list-item.supporting-text.line-height (Size and typography) $list-item-supporting-text-line-height: md-sys-typescale.$body-medium-line-height; /// md.comp.list.list-item.supporting-text.size (Size and typography) $list-item-supporting-text-size: md-sys-typescale.$body-medium-size; /// md.comp.list.list-item.supporting-text.tracking (Size and typography) $list-item-supporting-text-tracking: md-sys-typescale.$body-medium-tracking; /// md.comp.list.list-item.supporting-text.weight (Size and typography) $list-item-supporting-text-weight: md-sys-typescale.$body-medium-weight; /// md.comp.list.list-item.trailing-icon.color (Color / Enabled) $list-item-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.trailing-supporting-text.color (Color / Enabled) $list-item-trailing-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.list.list-item.trailing-supporting-text.font (Size and typography) $list-item-trailing-supporting-text-font: md-sys-typescale.$label-small-font; /// md.comp.list.list-item.trailing-supporting-text.line-height (Size and typography) $list-item-trailing-supporting-text-line-height: md-sys-typescale.$label-small-line-height; /// md.comp.list.list-item.trailing-supporting-text.size (Size and typography) $list-item-trailing-supporting-text-size: md-sys-typescale.$label-small-size; /// md.comp.list.list-item.trailing-supporting-text.tracking (Size and typography) $list-item-trailing-supporting-text-tracking: md-sys-typescale.$label-small-tracking; /// md.comp.list.list-item.trailing-supporting-text.weight (Size and typography) $list-item-trailing-supporting-text-weight: md-sys-typescale.$label-small-weight; /// md.comp.list.list-item.unselected.trailing-icon.color (Color / Enabled) $list-item-unselected-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.list.list-item.label-text.type (Size and typography) @mixin list-item-label-text-type { font-family: $list-item-label-text-font; font-size: $list-item-label-text-size; font-weight: $list-item-label-text-weight; letter-spacing: $list-item-label-text-tracking; line-height: $list-item-label-text-line-height; } /// md.comp.list.list-item.leading-avatar-label.type (Size and typography) @mixin list-item-leading-avatar-label-type { font-family: $list-item-leading-avatar-label-font; font-size: $list-item-leading-avatar-label-size; font-weight: $list-item-leading-avatar-label-weight; letter-spacing: $list-item-leading-avatar-label-tracking; line-height: $list-item-leading-avatar-label-line-height; } /// md.comp.list.list-item.overline.type (Size and typography) @mixin list-item-overline-type { font-family: $list-item-overline-font; font-size: $list-item-overline-size; font-weight: $list-item-overline-weight; letter-spacing: $list-item-overline-tracking; line-height: $list-item-overline-line-height; } /// md.comp.list.list-item.supporting-text.type (Size and typography) @mixin list-item-supporting-text-type { font-family: $list-item-supporting-text-font; font-size: $list-item-supporting-text-size; font-weight: $list-item-supporting-text-weight; letter-spacing: $list-item-supporting-text-tracking; line-height: $list-item-supporting-text-line-height; } /// md.comp.list.list-item.trailing-supporting-text.type (Size and typography) @mixin list-item-trailing-supporting-text-type { font-family: $list-item-trailing-supporting-text-font; font-size: $list-item-trailing-supporting-text-size; font-weight: $list-item-trailing-supporting-text-weight; letter-spacing: $list-item-trailing-supporting-text-tracking; line-height: $list-item-trailing-supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-loading-indicator.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; /// md.comp.loading-indicator.active-indicator.size (Size) $active-indicator-size: 38px; /// md.comp.loading-indicator.container.height (Size) $container-height: 48px; /// md.comp.loading-indicator.container.width (Size) $container-width: 48px; /// md.comp.loading-indicator.active-indicator.color (Color) $active-indicator-color: md-sys-color.$primary; /// md.comp.loading-indicator.contained.active-indicator.color (Color) $contained-active-indicator-color: md-sys-color.$on-primary-container; /// md.comp.loading-indicator.contained.container.color (Color) $contained-container-color: md-sys-color.$primary-container; /// md.comp.loading-indicator.container.color (Color) /// /// @deprecated Deprecated in favor of a distinct variant which uses a different color mapping with, and without container. $container-color: md-sys-color.$secondary-container; /// md.comp.loading-indicator.container.shape (Shape) $container-shape: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-menu.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.menu.cascading-menu-indicator.icon.size (Enabled / Icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $cascading-menu-indicator-icon-size: 24px; /// md.comp.menu.divider.height (Enabled / Divider) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement $divider-height: 1px; /// md.comp.menu.list-item.container.height (Enabled / Container) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-container-height: 48px; /// md.comp.menu.list-item.disabled.label-text.opacity (Disabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-disabled-label-text-opacity: 0.38; /// md.comp.menu.list-item.with-leading-icon.disabled.leading-icon.opacity (Disabled / Leading icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-leading-icon-disabled-leading-icon-opacity: 0.38; /// md.comp.menu.list-item.with-leading-icon.leading-icon.size (Enabled / Leading icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-leading-icon-leading-icon-size: 24px; /// md.comp.menu.list-item.with-trailing-icon.disabled.trailing-icon.opacity (Disabled / Trailing icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-trailing-icon-disabled-trailing-icon-opacity: 0.38; /// md.comp.menu.list-item.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-trailing-icon-trailing-icon-size: 24px; /// md.comp.menu.cascading-menu-indicator.icon.color (Enabled / Icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.container.color (Enabled) $container-color: md-sys-color.$surface-container; /// md.comp.menu.container.elevation (Enabled) $container-elevation: md-sys-elevation.$level2; /// md.comp.menu.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.menu.container.shape (Enabled) $container-shape: md-sys-shape.$corner-extra-small; /// md.comp.menu.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.menu.divider.color (Enabled / Divider) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement $divider-color: md-sys-color.$surface-variant; /// md.comp.menu.focus.indicator.color (Focus indicator) /// /// @deprecated Updating to include menu item $focus-indicator-color: md-sys-color.$secondary; /// md.comp.menu.focus.indicator.outline.offset (Focus indicator) /// /// @deprecated Updating to include menu item $focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset; /// md.comp.menu.focus.indicator.thickness (Focus indicator) /// /// @deprecated Updating to include menu item $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.menu.list-item.disabled.label-text.color (Disabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.focus.label-text.color (Focus / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead $list-item-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.focus.state-layer.color (Focus / State layer) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.focus.state-layer.opacity (Focus / State layer) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.menu.list-item.hover.label-text.color (Hover / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.hover.state-layer.color (Hover / State layer) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.hover.state-layer.opacity (Hover / State layer) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.menu.list-item.label-text.color (Enabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-label-text-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.label-text.font (Enabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.menu.list-item.label-text.line-height (Enabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.menu.list-item.label-text.size (Enabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.menu.list-item.label-text.tracking (Enabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.menu.list-item.label-text.weight (Enabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.menu.list-item.pressed.label-text.color (Pressed / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead $list-item-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.pressed.state-layer.color (Pressed / State layer) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead $list-item-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.pressed.state-layer.opacity (Pressed / State layer) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead $list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.menu.list-item.selected.container.color (Enabled / Container) /// /// @deprecated Deprecated to remove nested tokens $list-item-selected-container-color: md-sys-color.$secondary-container; /// md.comp.menu.list-item.selected.label-text.color (Enabled / Container) /// /// @deprecated Deprecated to remove nested tokens $list-item-selected-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.menu.list-item.selected.with-leading-icon.leading-icon.color (Enabled / Container) /// /// @deprecated Deprecated to remove nested tokens $list-item-selected-with-leading-icon-leading-icon-color: md-sys-color.$on-secondary-container; /// md.comp.menu.list-item.selected.with-leading-icon.trailing-icon.color (Enabled / Container) /// /// @deprecated Deprecated to remove nested tokens $list-item-selected-with-leading-icon-trailing-icon-color: md-sys-color.$on-secondary-container; /// md.comp.menu.list-item.with-leading-icon.disabled.leading-icon.color (Disabled / Leading icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.with-leading-icon.focus.icon.color (Focus / Leading icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead $list-item-with-leading-icon-focus-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.list-item.with-leading-icon.hover.icon.color (Hover / Leading icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-leading-icon-hover-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.list-item.with-leading-icon.leading-icon.color (Enabled / Leading icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.list-item.with-leading-icon.pressed.icon.color (Pressed / Leading icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead $list-item-with-leading-icon-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.list-item.with-trailing-icon.disabled.trailing-icon.color (Disabled / Trailing icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-trailing-icon-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.menu.list-item.with-trailing-icon.focus.icon.color (Focus / Trailing icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead $list-item-with-trailing-icon-focus-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.list-item.with-trailing-icon.hover.icon.color (Hover / Trailing icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-trailing-icon-hover-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.list-item.with-trailing-icon.pressed.icon.color (Pressed / Trailing icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead $list-item-with-trailing-icon-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.list-item.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. $list-item-with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menu.list-item.label-text.type (Enabled / Label text) /// /// @deprecated Deprecated to reduce reliance on embedded component tokens. Please use standalone list component tokens instead. @mixin list-item-label-text-type { font-family: $list-item-label-text-font; font-size: $list-item-label-text-size; font-weight: $list-item-label-text-weight; letter-spacing: $list-item-label-text-tracking; line-height: $list-item-label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-menus-standard.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.menus.standard.menu-item.disabled.label-text.opacity (Disabled) $menu-item-disabled-label-text-opacity: 0.38; /// md.comp.menus.standard.menu-item.disabled.leading-icon.opacity (Disabled) $menu-item-disabled-leading-icon-opacity: 0.38; /// md.comp.menus.standard.menu-item.disabled.supporting-text.opacity (Disabled) $menu-item-disabled-supporting-text-opacity: 0.38; /// md.comp.menus.standard.menu-item.disabled.trailing-icon.opacity (Disabled) $menu-item-disabled-trailing-icon-opacity: 0.38; /// md.comp.menus.standard.menu-item.disabled.trailing-supporting-text.opacity (Disabled) $menu-item-disabled-trailing-supporting-text-opacity: 0.38; /// md.comp.menus.standard.menu-item.selected.disabled.container.opacity (Disabled, Selected) $menu-item-selected-disabled-container-opacity: 0.38; /// md.comp.menus.standard.menu-item.selected.disabled.label-text.opacity (Disabled, Selected) $menu-item-selected-disabled-label-text-opacity: 0.38; /// md.comp.menus.standard.menu-item.selected.disabled.leading-icon.opacity (Disabled, Selected) $menu-item-selected-disabled-leading-icon-opacity: 0.38; /// md.comp.menus.standard.menu-item.selected.disabled.trailing-icon.opacity (Disabled, Selected) $menu-item-selected-disabled-trailing-icon-opacity: 0.38; /// md.comp.menus.standard.container.color (Enabled) $container-color: md-sys-color.$surface-container-low; /// md.comp.menus.standard.container.shadow-color (Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.menus.standard.disabled.icon-button.icon.color (Disabled) $disabled-icon-button-icon-color: md-sys-color.$on-surface; /// md.comp.menus.standard.icon-button.container.color (Enabled) $icon-button-container-color: md-sys-color.$surface-container-low; /// md.comp.menus.standard.icon-button.disabled.icon.color (Disabled, Selected) $icon-button-disabled-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.icon-button.focused.state-layer.color (Focused) $icon-button-focused-state-layer-color: md-sys-color.$on-surface; /// md.comp.menus.standard.icon-button.hovered.state-layer.color (Hovered) $icon-button-hovered-state-layer-color: md-sys-color.$on-surface; /// md.comp.menus.standard.icon-button.icon.color (Enabled) $icon-button-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.icon-button.pressed.state-layer.color (Pressed) $icon-button-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.menus.standard.icon-button.selected.container.color (Enabled, Selected) $icon-button-selected-container-color: md-sys-color.$tertiary-container; /// md.comp.menus.standard.icon-button.selected.focused.state-layer.color (Focused, Selected) $icon-button-selected-focused-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.icon-button.selected.hovered.state-layer.color (Hovered, Selected) $icon-button-selected-hovered-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.icon-button.selected.icon.color (Enabled, Selected) $icon-button-selected-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.icon-button.selected.pressed.state-layer.color (Pressed, Selected) $icon-button-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.active.state-layer.color (Enabled, Active) $menu-item-active-state-layer-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.active.state-layer.opacity (Enabled, Active) $menu-item-active-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.menus.standard.menu-item.container.color (Enabled) $menu-item-container-color: md-sys-color.$surface-container-low; /// md.comp.menus.standard.menu-item.disabled.label-text.color (Disabled) $menu-item-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.disabled.leading-icon.color (Disabled) $menu-item-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.disabled.supporting-text.color (Disabled) $menu-item-disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.disabled.trailing-icon.color (Disabled) $menu-item-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.disabled.trailing-supporting-text.color (Disabled) $menu-item-disabled-trailing-supporting-text-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.focused.label-text.color (Focused) $menu-item-focused-label-text-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.focused.leading-icon.color (Focused) $menu-item-focused-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.focused.state-layer.color (Focused) $menu-item-focused-state-layer-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.focused.state-layer.opacity (Focused) $menu-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.menus.standard.menu-item.focused.trailing-icon.color (Focused) $menu-item-focused-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.hovered.label-text.color (Hovered) $menu-item-hovered-label-text-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.hovered.leading-icon.color (Hovered) $menu-item-hovered-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.hovered.state-layer.color (Hovered) $menu-item-hovered-state-layer-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.hovered.state-layer.opacity (Hovered) $menu-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.menus.standard.menu-item.hovered.trailing-icon.color (Hovered) $menu-item-hovered-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.label-text.color (Enabled) $menu-item-label-text-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.leading-icon.color (Enabled) $menu-item-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.pressed.label-text.color (Pressed) $menu-item-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.pressed.leading-icon.color (Pressed) $menu-item-pressed-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.pressed.state-layer.color (Pressed) $menu-item-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.menus.standard.menu-item.pressed.state-layer.opacity (Pressed) $menu-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.menus.standard.menu-item.pressed.trailing-icon.color (Pressed) $menu-item-pressed-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.selected.container.color (Enabled, Selected) $menu-item-selected-container-color: md-sys-color.$tertiary-container; /// md.comp.menus.standard.menu-item.selected.disabled.container.color (Disabled, Selected) $menu-item-selected-disabled-container-color: md-sys-color.$tertiary-container; /// md.comp.menus.standard.menu-item.selected.disabled.label-text.color (Disabled, Selected) $menu-item-selected-disabled-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.disabled.leading-icon.color (Disabled, Selected) $menu-item-selected-disabled-leading-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.disabled.trailing-icon.color (Disabled, Selected) $menu-item-selected-disabled-trailing-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.disabled.trailing-supporting-text.color (Disabled, Selected) $menu-item-selected-disabled-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.focused.label-text.color (Focused, Selected) $menu-item-selected-focused-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.focused.leading-icon.color (Focused, Selected) $menu-item-selected-focused-leading-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.focused.state-layer.color (Focused, Selected) $menu-item-selected-focused-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.focused.state-layer.opacity (Focused, Selected) $menu-item-selected-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.menus.standard.menu-item.selected.focused.supporting-text.color (Focused, Selected) $menu-item-selected-focused-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.focused.trailing-icon.color (Focused, Selected) $menu-item-selected-focused-trailing-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.focused.trailing-supporting-text.color (Focused, Selected) $menu-item-selected-focused-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.hovered.label-text.color (Hovered, Selected) $menu-item-selected-hovered-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.hovered.leading-icon.color (Hovered, Selected) $menu-item-selected-hovered-leading-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.hovered.state-layer.color (Hovered, Selected) $menu-item-selected-hovered-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.hovered.state-layer.opacity (Hovered, Selected) $menu-item-selected-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.menus.standard.menu-item.selected.hovered.supporting-text.color (Hovered, Selected) $menu-item-selected-hovered-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.hovered.trailing-icon.color (Hovered, Selected) $menu-item-selected-hovered-trailing-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.hovered.trailing-supporting-text.color (Hovered, Selected) $menu-item-selected-hovered-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.label-text.color (Enabled, Selected) $menu-item-selected-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.leading-icon.color (Enabled, Selected) $menu-item-selected-leading-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.pressed.label-text.color (Pressed, Selected) $menu-item-selected-pressed-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.pressed.leading-icon.color (Pressed, Selected) $menu-item-selected-pressed-leading-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.pressed.state-layer.color (Pressed, Selected) $menu-item-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.pressed.state-layer.opacity (Pressed, Selected) $menu-item-selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.menus.standard.menu-item.selected.pressed.supporting-text.color (Pressed, Selected) $menu-item-selected-pressed-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.pressed.trailing-icon.color (Pressed, Selected) $menu-item-selected-pressed-trailing-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.pressed.trailing-supporting-text.color (Pressed, Selected) $menu-item-selected-pressed-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.supporting-text.color (Enabled, Selected) $menu-item-selected-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.trailing-icon.color (Enabled, Selected) $menu-item-selected-trailing-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.selected.trailing-supporting-text.color (Enabled, Selected) $menu-item-selected-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.standard.menu-item.supporting-text.color (Enabled) $menu-item-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.trailing-icon.color (Enabled) $menu-item-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.menu-item.trailing-supporting-text.color (Enabled) $menu-item-trailing-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.menus.standard.section-label-text.color (Enabled) $section-label-text-color: md-sys-color.$on-surface-variant; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-menus-vibrant.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.menus.vibrant.menu-item.disabled.label-text.opacity (Disabled) $menu-item-disabled-label-text-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.disabled.leading-icon.opacity (Disabled) $menu-item-disabled-leading-icon-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.disabled.supporting-text.opacity (Disabled) $menu-item-disabled-supporting-text-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.disabled.trailing-icon.opacity (Disabled) $menu-item-disabled-trailing-icon-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.disabled.trailing-supporting-text.opacity (Disabled) $menu-item-disabled-trailing-supporting-text-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.selected.disabled.label-text.opacity (Disabled, Selected) $menu-item-selected-disabled-label-text-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.selected.disabled.leading-icon.opacity (Disabled, Selected) $menu-item-selected-disabled-leading-icon-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.selected.disabled.supporting-text.opacity (Disabled, Selected) $menu-item-selected-disabled-supporting-text-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.selected.disabled.trailing-icon.opacity (Disabled, Selected) $menu-item-selected-disabled-trailing-icon-opacity: 0.38; /// md.comp.menus.vibrant.menu-item.selected.disabled.trailing-supporting-text.opacity (Disabled, Selected) $menu-item-selected-disabled-trailing-supporting-text-opacity: 0.38; /// md.comp.menus.vibrant.container.color (Enabled) $container-color: md-sys-color.$tertiary-container; /// md.comp.menus.vibrant.icon-button.container.color (Enabled) $icon-button-container-color: md-sys-color.$tertiary-container; /// md.comp.menus.vibrant.icon-button.disabled.icon.color (Disabled) $icon-button-disabled-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.icon-button.focused.state-layer.color (Focused) $icon-button-focused-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.icon-button.hovered.state-layer.color (Hovered) $icon-button-hovered-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.icon-button.icon.color (Enabled) $icon-button-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.icon-button.pressed.state-layer.color (Pressed) $icon-button-pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.icon-button.selected.container.color (Enabled, Selected) $icon-button-selected-container-color: md-sys-color.$tertiary; /// md.comp.menus.vibrant.icon-button.selected.disabled.icon.color (Disabled, Selected) $icon-button-selected-disabled-icon-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.icon-button.selected.icon.color (Enabled, Selected) $icon-button-selected-icon-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.active.state-layer.color (Enabled, Active) $menu-item-active-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.active.state-layer.opacity (Enabled, Active) $menu-item-active-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.menus.vibrant.menu-item.color (Enabled) $menu-item-color: md-sys-color.$tertiary-container; /// md.comp.menus.vibrant.menu-item.disabled.label-text.color (Disabled) $menu-item-disabled-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.disabled.leading-icon.color (Disabled) $menu-item-disabled-leading-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.disabled.supporting-text.color (Disabled) $menu-item-disabled-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.disabled.trailing-icon.color (Disabled) $menu-item-disabled-trailing-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.disabled.trailing-supporting-text.color (Disabled) $menu-item-disabled-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.focused.label-text.color (Focused) $menu-item-focused-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.focused.leading-icon.color (Focused) $menu-item-focused-leading-icon-color: md-sys-color.$tertiary; /// md.comp.menus.vibrant.menu-item.focused.state-layer.color (Focused) $menu-item-focused-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.focused.state-layer.opacity (Focused) $menu-item-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.menus.vibrant.menu-item.focused.supporting-text.color (Focused) $menu-item-focused-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.focused.trailing-icon.color (Focused) $menu-item-focused-trailing-icon-color: md-sys-color.$tertiary; /// md.comp.menus.vibrant.menu-item.focused.trailing-supporting-text.color (Focused) $menu-item-focused-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.hovered.label-text.color (Hovered) $menu-item-hovered-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.hovered.leading-icon.color (Hovered) $menu-item-hovered-leading-icon-color: md-sys-color.$tertiary; /// md.comp.menus.vibrant.menu-item.hovered.state-layer.color (Hovered) $menu-item-hovered-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.hovered.state-layer.opacity (Hovered) $menu-item-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.menus.vibrant.menu-item.hovered.supporting-text.color (Hovered) $menu-item-hovered-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.hovered.trailing-icon.color (Hovered) $menu-item-hovered-trailing-icon-color: md-sys-color.$tertiary; /// md.comp.menus.vibrant.menu-item.hovered.trailing-supporting-text.color (Hovered) $menu-item-hovered-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.label-text.color (Enabled) $menu-item-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.leading-icon.color (Enabled) $menu-item-leading-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.pressed.label-text.color (Pressed) $menu-item-pressed-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.pressed.leading-icon.color (Pressed) $menu-item-pressed-leading-icon-color: md-sys-color.$tertiary; /// md.comp.menus.vibrant.menu-item.pressed.state-layer.color (Pressed) $menu-item-pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.pressed.state-layer.opacity (Pressed) $menu-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.menus.vibrant.menu-item.pressed.supporting-text.color (Pressed) $menu-item-pressed-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.pressed.trailing-icon.color (Pressed) $menu-item-pressed-trailing-icon-color: md-sys-color.$tertiary; /// md.comp.menus.vibrant.menu-item.pressed.trailing-supporting-text.color (Pressed) $menu-item-pressed-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.selected.container.color (Enabled, Selected) $menu-item-selected-container-color: md-sys-color.$tertiary; /// md.comp.menus.vibrant.menu-item.selected.focused.label-text.color (Focused, Selected) $menu-item-selected-focused-label-text-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.focused.state-layer.color (Focused, Selected) $menu-item-selected-focused-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.focused.state-layer.opacity (Focused, Selected) $menu-item-selected-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.menus.vibrant.menu-item.selected.hovered.label-text.color (Hovered, Selected) $menu-item-selected-hovered-label-text-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.hovered.state-layer.color (Hovered, Selected) $menu-item-selected-hovered-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.hovered.state-layer.opacity (Hovered, Selected) $menu-item-selected-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.menus.vibrant.menu-item.selected.label-text.color (Enabled, Selected) $menu-item-selected-label-text-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.leading-icon.color (Enabled, Selected) $menu-item-selected-leading-icon-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.pressed.label-text.color (Pressed, Selected) $menu-item-selected-pressed-label-text-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.pressed.state-layer.color (Pressed, Selected) $menu-item-selected-pressed-state-layer-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.pressed.state-layer.opacity (Pressed, Selected) $menu-item-selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.menus.vibrant.menu-item.selected.supporting-text.color (Enabled, Selected) $menu-item-selected-supporting-text-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.trailing-icon.color (Enabled, Selected) $menu-item-selected-trailing-icon-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.selected.trailing-supporting-text.color (Enabled, Selected) $menu-item-selected-trailing-supporting-text-color: md-sys-color.$on-tertiary; /// md.comp.menus.vibrant.menu-item.supporting-text.color (Enabled) $menu-item-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.trailing-icon.color (Enabled) $menu-item-trailing-icon-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.menu-item.trailing-supporting-text.color (Enabled) $menu-item-trailing-supporting-text-color: md-sys-color.$on-tertiary-container; /// md.comp.menus.vibrant.section-label-text.color (Enabled) $section-label-text-color: md-sys-color.$on-tertiary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-menus.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.menus.gap (Layout / Default) $gap: 2px; /// md.comp.menus.group.padding (Layout / Default) $group-padding: 2px; /// md.comp.menus.horizontal.container.bottom-space (Layout / Horizontal) $horizontal-container-bottom-space: 8px; /// md.comp.menus.horizontal.container.top-space (Layout / Horizontal) $horizontal-container-top-space: 8px; /// md.comp.menus.horizontal.icon-only.gap (Layout / Horizontal icon-only) $horizontal-icon-only-gap: 4px; /// md.comp.menus.horizontal.icon-only.menu-item.bottom-space (Layout / Horizontal icon-only) $horizontal-icon-only-menu-item-bottom-space: 16px; /// md.comp.menus.horizontal.icon-only.menu-item.leading-space (Layout / Horizontal icon-only) $horizontal-icon-only-menu-item-leading-space: 16px; /// md.comp.menus.horizontal.icon-only.menu-item.top-space (Layout / Horizontal icon-only) $horizontal-icon-only-menu-item-top-space: 16px; /// md.comp.menus.horizontal.icon-only.menu-item.trailing-space (Layout / Horizontal icon-only) $horizontal-icon-only-menu-item-trailing-space: 16px; /// md.comp.menus.horizontal.menu-item.between-space (Layout / Horizontal) $horizontal-menu-item-between-space: 12px; /// md.comp.menus.horizontal.menu-item.bottom-space (Layout / Horizontal) $horizontal-menu-item-bottom-space: 6px; /// md.comp.menus.horizontal.menu-item.leading-space (Layout / Horizontal) $horizontal-menu-item-leading-space: 12px; /// md.comp.menus.horizontal.menu-item.top-space (Layout / Horizontal) $horizontal-menu-item-top-space: 6px; /// md.comp.menus.horizontal.menu-item.trailing-space (Layout / Horizontal) $horizontal-menu-item-trailing-space: 12px; /// md.comp.menus.menu-item.between-space (Layout / Default) $menu-item-between-space: 12px; /// md.comp.menus.menu-item.bottom-space (Layout / Default) $menu-item-bottom-space: 8px; /// md.comp.menus.menu-item.height (Layout / Default) $menu-item-height: 44px; /// md.comp.menus.menu-item.leading-icon.size (Layout / Default) $menu-item-leading-icon-size: 20px; /// md.comp.menus.menu-item.leading-space (Layout / Default) $menu-item-leading-space: 16px; /// md.comp.menus.menu-item.top-space (Layout / Default) $menu-item-top-space: 8px; /// md.comp.menus.menu-item.trailing-icon.size (Layout / Default) $menu-item-trailing-icon-size: 20px; /// md.comp.menus.menu-item.trailing-space (Layout / Default) $menu-item-trailing-space: 16px; /// md.comp.menus.active.container.shape (Shape / Default) $active-container-shape: md-sys-shape.$corner-large; /// md.comp.menus.container.elevation (Layout / Default) $container-elevation: md-sys-elevation.$level2; /// md.comp.menus.container.shape (Shape / Default) $container-shape: md-sys-shape.$corner-large; /// md.comp.menus.group.shape (Shape / Default) $group-shape: md-sys-shape.$corner-small; /// md.comp.menus.horizontal.container.shape (Shape / Horizontal, Default) $horizontal-container-shape: md-sys-shape.$corner-full; /// md.comp.menus.horizontal.icon-only.menu-item.selected.shape (Shape / Horizontal icon-only, selected) $horizontal-icon-only-menu-item-selected-shape: md-sys-shape.$corner-full; /// md.comp.menus.horizontal.menu-item.focused.shape (Shape / Horizontal, Default) $horizontal-menu-item-focused-shape: md-sys-shape.$corner-medium; /// md.comp.menus.horizontal.menu-item.hovered.shape (Shape / Horizontal, Default) $horizontal-menu-item-hovered-shape: md-sys-shape.$corner-medium; /// md.comp.menus.horizontal.menu-item.pressed.shape (Shape / Horizontal, Default) $horizontal-menu-item-pressed-shape: md-sys-shape.$corner-medium; /// md.comp.menus.horizontal.menu-item.selected.focused.shape (Shape / Horizontal, Selected) $horizontal-menu-item-selected-focused-shape: md-sys-shape.$corner-full; /// md.comp.menus.horizontal.menu-item.selected.hovered.shape (Shape / Horizontal, Selected) $horizontal-menu-item-selected-hovered-shape: md-sys-shape.$corner-full; /// md.comp.menus.horizontal.menu-item.selected.pressed.shape (Shape / Horizontal, Selected) $horizontal-menu-item-selected-pressed-shape: md-sys-shape.$corner-full; /// md.comp.menus.inactive.container.shape (Shape / Default) $inactive-container-shape: md-sys-shape.$corner-small; /// md.comp.menus.menu-item.first-child.inner-corner.corner-size (Shape / Default) $menu-item-first-child-inner-corner-corner-size: md-sys-shape.$corner-extra-small; /// md.comp.menus.menu-item.first-child.shape (Shape / Default) $menu-item-first-child-shape: md-sys-shape.$corner-medium; /// md.comp.menus.menu-item.focus.indicator.color (Focus ring) $menu-item-focus-indicator-color: md-sys-color.$secondary; /// md.comp.menus.menu-item.focus.indicator.outline.offset (Focus ring) $menu-item-focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset; /// md.comp.menus.menu-item.focus.indicator.thickness (Focus ring) $menu-item-focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.menus.menu-item.label-text.font (Typography) $menu-item-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.menus.menu-item.label-text.line-height (Typography) $menu-item-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.menus.menu-item.label-text.size (Typography) $menu-item-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.menus.menu-item.label-text.tracking (Typography) $menu-item-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.menus.menu-item.label-text.weight (Typography) $menu-item-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.menus.menu-item.last-child.inner-corner.corner-size (Shape / Default) $menu-item-last-child-inner-corner-corner-size: md-sys-shape.$corner-extra-small; /// md.comp.menus.menu-item.last-child.shape (Shape / Default) $menu-item-last-child-shape: md-sys-shape.$corner-medium; /// md.comp.menus.menu-item.selected.shape (Shape / Selected) $menu-item-selected-shape: md-sys-shape.$corner-medium; /// md.comp.menus.menu-item.shape (Shape / Default) $menu-item-shape: md-sys-shape.$corner-extra-small; /// md.comp.menus.menu-item.supporting-text.font (Typography) $menu-item-supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.menus.menu-item.supporting-text.line-height (Typography) $menu-item-supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.menus.menu-item.supporting-text.size (Typography) $menu-item-supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.menus.menu-item.supporting-text.tracking (Typography) $menu-item-supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.menus.menu-item.supporting-text.weight (Typography) $menu-item-supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.menus.menu-item.trailing-supporting-text.font (Typography) $menu-item-trailing-supporting-text-font: md-sys-typescale.$label-large-font; /// md.comp.menus.menu-item.trailing-supporting-text.line-height (Typography) $menu-item-trailing-supporting-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.menus.menu-item.trailing-supporting-text.size (Typography) $menu-item-trailing-supporting-text-size: md-sys-typescale.$label-large-size; /// md.comp.menus.menu-item.trailing-supporting-text.tracking (Typography) $menu-item-trailing-supporting-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.menus.menu-item.trailing-supporting-text.weight (Typography) $menu-item-trailing-supporting-text-weight: md-sys-typescale.$label-large-weight; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-bar-item-horizontal.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-typescale'; /// md.comp.nav-bar.item.horizontal.active-indicator.height $active-indicator-height: 40px; /// md.comp.nav-bar.item.horizontal.active-indicator.icon-label-space $active-indicator-icon-label-space: 4px; /// md.comp.nav-bar.item.horizontal.active-indicator.leading-space $active-indicator-leading-space: 16px; /// md.comp.nav-bar.item.horizontal.active-indicator.trailing-space $active-indicator-trailing-space: 16px; /// md.comp.nav-bar.item.horizontal.label-text.font @mixin label-text-font { @include md-sys-typescale.label-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-bar-item-vertical.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-typescale'; /// md.comp.nav-bar.item.vertical.active-indicator.height $active-indicator-height: 32px; /// md.comp.nav-bar.item.vertical.active-indicator.icon-label-space $active-indicator-icon-label-space: 4px; /// md.comp.nav-bar.item.vertical.active-indicator.width $active-indicator-width: 56px; /// md.comp.nav-bar.item.vertical.container.between-space $container-between-space: 6px; /// md.comp.nav-bar.item.vertical.label-text.font @mixin label-text-font { @include md-sys-typescale.label-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-bar.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; /// md.comp.nav-bar.container.height (Container) $container-height: 64px; /// md.comp.nav-bar.item.active-indicator.icon-label-space (Nav item) $item-active-indicator-icon-label-space: 4px; /// md.comp.nav-bar.item.between-space (Nav item) $item-between-space: 0px; /// md.comp.nav-bar.item.icon.size (Nav item) $item-icon-size: 24px; /// md.comp.nav-bar.container.color (Color / Enabled) $container-color: md-sys-color.$surface-container; /// md.comp.nav-bar.container.elevation (Color / Enabled) $container-elevation: md-sys-elevation.$level2; /// md.comp.nav-bar.container.shadow-color (Color / Enabled) $container-shadow-color: md-sys-color.$shadow; /// md.comp.nav-bar.container.shape (Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.nav-bar.item.active-indicator.shape (Nav item) $item-active-indicator-shape: md-sys-shape.$corner-full; /// md.comp.nav-bar.item.active.focused.state-layer.color (Color / Focused) $item-active-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-bar.item.active.focused.state-layer.opacity (Color / Focused) $item-active-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.nav-bar.item.active.hovered.state-layer.color (Color / Hovered) $item-active-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-bar.item.active.hovered.state-layer.opacity (Color / Hovered) $item-active-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.nav-bar.item.active.icon.color (Color / Enabled) $item-active-icon-color: md-sys-color.$on-secondary-container; /// md.comp.nav-bar.item.active.indicator.color (Color / Enabled) $item-active-indicator-color: md-sys-color.$secondary-container; /// md.comp.nav-bar.item.active.label-text.color (Color / Enabled) $item-active-label-text-color: md-sys-color.$secondary; /// md.comp.nav-bar.item.active.pressed.state-layer.color (Color / Pressed) $item-active-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-bar.item.active.pressed.state-layer.opacity (Color / Pressed) $item-active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.nav-bar.item.inactive.focused.state-layer.color (Color / Focused) $item-inactive-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-bar.item.inactive.hovered.state-layer.color (Color / Hovered) $item-inactive-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-bar.item.inactive.icon.color (Color / Enabled) $item-inactive-icon-color: md-sys-color.$on-surface-variant; /// md.comp.nav-bar.item.inactive.label-text.color (Color / Enabled) $item-inactive-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.nav-bar.item.inactive.pressed.state-layer.color (Color / Pressed) $item-inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-rail-collapsed.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; /// md.comp.nav-rail.collapsed.container.width $container-width: 96px; /// md.comp.nav-rail.collapsed.item.vertical-space $item-vertical-space: 4px; /// md.comp.nav-rail.collapsed.narrow.container.width $narrow-container-width: 80px; /// md.comp.nav-rail.collapsed.top-space $top-space: 44px; /// md.comp.nav-rail.collapsed.container.color $container-color: md-sys-color.$surface; /// md.comp.nav-rail.collapsed.container.elevation $container-elevation: md-sys-elevation.$level0; /// md.comp.nav-rail.collapsed.container.shape $container-shape: md-sys-shape.$corner-none; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-rail-expanded.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; /// md.comp.nav-rail.expanded.between-item-space /// /// @deprecated Token not needed as value is "0dp" $between-item-space: 0px; /// md.comp.nav-rail.expanded.container.width.maximum $container-width-maximum: 360px; /// md.comp.nav-rail.expanded.container.width.minimum $container-width-minimum: 220px; /// md.comp.nav-rail.expanded.top-space $top-space: 44px; /// md.comp.nav-rail.expanded.vertical.trailing-space /// /// @deprecated Token moved to nav rail item horizontal set $vertical-trailing-space: 20px; /// md.comp.nav-rail.expanded.container.color $container-color: md-sys-color.$surface; /// md.comp.nav-rail.expanded.container.elevation $container-elevation: md-sys-elevation.$level0; /// md.comp.nav-rail.expanded.container.shape $container-shape: md-sys-shape.$corner-none; /// md.comp.nav-rail.expanded.modal.container.color $modal-container-color: md-sys-color.$surface-container; /// md.comp.nav-rail.expanded.modal.container.elevation $modal-container-elevation: md-sys-elevation.$level2; /// md.comp.nav-rail.expanded.modal.container.shape $modal-container-shape: md-sys-shape.$corner-large; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-rail-item-horizontal.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-typescale'; /// md.comp.nav-rail.item.horizontal.active-indicator.height $active-indicator-height: 56px; /// md.comp.nav-rail.item.horizontal.full-width.leading-space $full-width-leading-space: 16px; /// md.comp.nav-rail.item.horizontal.full-width.trailing-space $full-width-trailing-space: 16px; /// md.comp.nav-rail.item.horizontal.icon-label-space $icon-label-space: 8px; /// md.comp.nav-rail.item.horizontal.label-text.font @mixin label-text-font { @include md-sys-typescale.label-large; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-rail-item-vertical.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-typescale'; /// md.comp.nav-rail.item.vertical.active-indicator.height $active-indicator-height: 32px; /// md.comp.nav-rail.item.vertical.active-indicator.width $active-indicator-width: 56px; /// md.comp.nav-rail.item.vertical.icon-label-space $icon-label-space: 4px; /// md.comp.nav-rail.item.vertical.leading-space $leading-space: 16px; /// md.comp.nav-rail.item.vertical.trailing-space $trailing-space: 16px; /// md.comp.nav-rail.item.vertical.label-text.font @mixin label-text-font { @include md-sys-typescale.label-medium; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-rail-item.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.nav-rail.item.active-indicator.icon-label-space $active-indicator-icon-label-space: 8px; /// md.comp.nav-rail.item.active-indicator.leading-space $active-indicator-leading-space: 16px; /// md.comp.nav-rail.item.active-indicator.trailing-space $active-indicator-trailing-space: 16px; /// md.comp.nav-rail.item.container.height $container-height: 64px; /// md.comp.nav-rail.item.container.vertical-space $container-vertical-space: 6px; /// md.comp.nav-rail.item.header-space-minimum $header-space-minimum: 40px; /// md.comp.nav-rail.item.icon.size $icon-size: 24px; /// md.comp.nav-rail.item.short.container.height $short-container-height: 56px; /// md.comp.nav-rail.item.active-indicator.shape $active-indicator-shape: md-sys-shape.$corner-full; /// md.comp.nav-rail.item.container.shape $container-shape: md-sys-shape.$corner-none; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-nav-rail.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.nav-rail.item.active.focused.state-layer.color (Focused) $item-active-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-rail.item.active.focused.state-layer.opacity (Focused) $item-active-focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.nav-rail.item.active.hovered.state-layer.color (Hovered) $item-active-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-rail.item.active.hovered.state-layer.opacity (Hovered) $item-active-hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.nav-rail.item.active.icon.color (Enabled) $item-active-icon-color: md-sys-color.$on-secondary-container; /// md.comp.nav-rail.item.active.indicator.color (Enabled) $item-active-indicator-color: md-sys-color.$secondary-container; /// md.comp.nav-rail.item.active.label-text.color (Enabled) $item-active-label-text-color: md-sys-color.$secondary; /// md.comp.nav-rail.item.active.pressed.state-layer.color (Pressed) $item-active-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-rail.item.active.pressed.state-layer.opacity (Pressed) $item-active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.nav-rail.item.inactive.focused.state-layer.color (Focused) $item-inactive-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-rail.item.inactive.hovered.state-layer.color (Hovered) $item-inactive-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.nav-rail.item.inactive.icon.color (Enabled) $item-inactive-icon-color: md-sys-color.$on-surface-variant; /// md.comp.nav-rail.item.inactive.label-text.color (Enabled) $item-inactive-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.nav-rail.item.inactive.pressed.state-layer.color (Pressed) $item-inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-navigation-bar.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.navigation-bar.active-indicator.height (Enabled / Active indicator) $active-indicator-height: 32px; /// md.comp.navigation-bar.active-indicator.width (Enabled / Active indicator) $active-indicator-width: 64px; /// md.comp.navigation-bar.badge.shape (Enabled / [Deprecated] Badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens. $badge-shape: 3px; /// md.comp.navigation-bar.badge.size (Enabled / [Deprecated] Badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens. $badge-size: 6px; /// md.comp.navigation-bar.container.height (Enabled / Container) $container-height: 80px; /// md.comp.navigation-bar.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.navigation-bar.large-badge.shape (Enabled / [Deprecated] Large badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-shape: 8px; /// md.comp.navigation-bar.large-badge.size (Enabled / [Deprecated] Large badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-size: 16px; /// md.comp.navigation-bar.active-indicator.color (Enabled / Active indicator) $active-indicator-color: md-sys-color.$secondary-container; /// md.comp.navigation-bar.active-indicator.shape (Enabled / Active indicator) $active-indicator-shape: md-sys-shape.$corner-full; /// md.comp.navigation-bar.active.focus.icon.color (Enabled / Icon) $active-focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-bar.active.focus.label-text.color (Enabled / Label text) $active-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.active.focus.state-layer.color (Enabled / State layer) $active-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.active.hover.icon.color (Enabled / Icon) $active-hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-bar.active.hover.label-text.color (Enabled / Label text) $active-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.active.hover.state-layer.color (Enabled / State layer) $active-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.active.icon.color (Enabled / Icon) $active-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-bar.active.label-text.color (Enabled / Label text) $active-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.active.label-text.weight (Enabled / Label text) $active-label-text-weight: md-sys-typescale.$label-medium-weight-prominent; /// md.comp.navigation-bar.active.pressed.icon.color (Enabled / Icon) $active-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-bar.active.pressed.label-text.color (Enabled / Label text) $active-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.active.pressed.state-layer.color (Enabled / State layer) $active-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.badge.color (Enabled / [Deprecated] Badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens. $badge-color: md-sys-color.$error; /// md.comp.navigation-bar.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container; /// md.comp.navigation-bar.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level2; /// md.comp.navigation-bar.container.shadow-color (Enabled / Container) /// /// @deprecated Bug: should not have been created. Remove any shadows on navigation bars. $container-shadow-color: md-sys-color.$shadow; /// md.comp.navigation-bar.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.navigation-bar.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.navigation-bar.focus.indicator.color (Enabled / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.navigation-bar.focus.indicator.outline.offset (Enabled / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset; /// md.comp.navigation-bar.focus.indicator.thickness (Enabled / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.navigation-bar.focus.state-layer.opacity (Enabled / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.navigation-bar.hover.state-layer.opacity (Enabled / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.navigation-bar.inactive.focus.icon.color (Enabled / Icon) $inactive-focus-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.inactive.focus.label-text.color (Enabled / Label text) $inactive-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.inactive.focus.state-layer.color (Enabled / State layer) $inactive-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.inactive.hover.icon.color (Enabled / Icon) $inactive-hover-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.inactive.hover.label-text.color (Enabled / Label text) $inactive-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.inactive.hover.state-layer.color (Enabled / State layer) $inactive-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.inactive.icon.color (Enabled / Icon) $inactive-icon-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-bar.inactive.label-text.color (Enabled / Label text) $inactive-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-bar.inactive.pressed.icon.color (Enabled / Icon) $inactive-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.inactive.pressed.label-text.color (Enabled / Label text) $inactive-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.inactive.pressed.state-layer.color (Enabled / State layer) $inactive-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-bar.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-medium-font; /// md.comp.navigation-bar.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-medium-line-height; /// md.comp.navigation-bar.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-medium-size; /// md.comp.navigation-bar.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-medium-tracking; /// md.comp.navigation-bar.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-medium-weight; /// md.comp.navigation-bar.large-badge.color (Enabled / [Deprecated] Large badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-color: md-sys-color.$error; /// md.comp.navigation-bar.pressed.state-layer.opacity (Enabled / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.navigation-bar.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-navigation-drawer.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-palette'; @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.navigation-drawer.active-indicator.height (Enabled / Active indicator) $active-indicator-height: 56px; /// md.comp.navigation-drawer.active-indicator.width (Enabled / Active indicator) $active-indicator-width: 336px; /// md.comp.navigation-drawer.container.height (Enabled / Container) $container-height: 100%; /// md.comp.navigation-drawer.container.width (Enabled / Container) $container-width: 360px; /// md.comp.navigation-drawer.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.navigation-drawer.scrim.opacity (Enabled / [Deprecated] Scrim) /// /// @deprecated Bug fix. Token does not represent M3 design intent. Use Neutral-Variant10 at 50% for scrims instead. $scrim-opacity: 0.4; /// md.comp.navigation-drawer.active-indicator.color (Enabled / Active indicator) $active-indicator-color: md-sys-color.$secondary-container; /// md.comp.navigation-drawer.active-indicator.shape (Enabled / Active indicator) $active-indicator-shape: md-sys-shape.$corner-full; /// md.comp.navigation-drawer.active.focus.icon.color (Focused / Icon) $active-focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.focus.label-text.color (Focused / Label text) $active-focus-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.focus.state-layer.color (Focused / State layer) $active-focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.hover.icon.color (Hovered / Icon) $active-hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.hover.label-text.color (Hovered / Label text) $active-hover-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.hover.state-layer.color (Hovered / State layer) $active-hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.icon.color (Enabled / Icon) $active-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.label-text.color (Enabled / Label text) $active-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.label-text.weight (Enabled / Label text) $active-label-text-weight: md-sys-typescale.$label-large-weight-prominent; /// md.comp.navigation-drawer.active.pressed.icon.color (Pressed (ripple) / Icon) $active-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.pressed.label-text.color (Pressed (ripple) / Label text) $active-pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.active.pressed.state-layer.color (Pressed (ripple) / State layer) $active-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.bottom.container.shape (Enabled / Container) $bottom-container-shape: md-sys-shape.$corner-large-top; /// md.comp.navigation-drawer.container.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Use "md.comp.navigation-drawer.modal.container.color" or "md.comp.navigation-drawer.standard.container.color" instead depending on desired configuration. $container-color: md-sys-color.$surface; /// md.comp.navigation-drawer.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-large-end; /// md.comp.navigation-drawer.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.navigation-drawer.divider.color (Enabled / Divider) /// /// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement $divider-color: md-sys-color.$outline; /// md.comp.navigation-drawer.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.navigation-drawer.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset; /// md.comp.navigation-drawer.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.navigation-drawer.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.navigation-drawer.headline.color (Enabled / Headline) $headline-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-drawer.headline.font (Enabled / Headline) $headline-font: md-sys-typescale.$title-small-font; /// md.comp.navigation-drawer.headline.line-height (Enabled / Headline) $headline-line-height: md-sys-typescale.$title-small-line-height; /// md.comp.navigation-drawer.headline.size (Enabled / Headline) $headline-size: md-sys-typescale.$title-small-size; /// md.comp.navigation-drawer.headline.tracking (Enabled / Headline) $headline-tracking: md-sys-typescale.$title-small-tracking; /// md.comp.navigation-drawer.headline.weight (Enabled / Headline) $headline-weight: md-sys-typescale.$title-small-weight; /// md.comp.navigation-drawer.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.navigation-drawer.inactive.focus.icon.color (Focused / Icon) $inactive-focus-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-drawer.inactive.focus.label-text.color (Focused / Label text) $inactive-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-drawer.inactive.focus.state-layer.color (Focused / State layer) $inactive-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-drawer.inactive.hover.icon.color (Hovered / Icon) $inactive-hover-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-drawer.inactive.hover.label-text.color (Hovered / Label text) $inactive-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-drawer.inactive.hover.state-layer.color (Hovered / State layer) $inactive-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-drawer.inactive.icon.color (Enabled / Icon) $inactive-icon-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-drawer.inactive.label-text.color (Enabled / Label text) $inactive-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-drawer.inactive.pressed.icon.color (Pressed (ripple) / Icon) $inactive-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-drawer.inactive.pressed.label-text.color (Pressed (ripple) / Label text) $inactive-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-drawer.inactive.pressed.state-layer.color (Pressed (ripple) / State layer) $inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-drawer.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.navigation-drawer.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.navigation-drawer.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.navigation-drawer.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.navigation-drawer.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.navigation-drawer.large-badge-label.color (Enabled / Large badge label) $large-badge-label-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-drawer.large-badge-label.font (Enabled / Large badge label) $large-badge-label-font: md-sys-typescale.$label-large-font; /// md.comp.navigation-drawer.large-badge-label.line-height (Enabled / Large badge label) $large-badge-label-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.navigation-drawer.large-badge-label.size (Enabled / Large badge label) $large-badge-label-size: md-sys-typescale.$label-large-size; /// md.comp.navigation-drawer.large-badge-label.tracking (Enabled / Large badge label) $large-badge-label-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.navigation-drawer.large-badge-label.weight (Enabled / Large badge label) $large-badge-label-weight: md-sys-typescale.$label-large-weight; /// md.comp.navigation-drawer.modal.container.color (Enabled / Container) $modal-container-color: md-sys-color.$surface-container-low; /// md.comp.navigation-drawer.modal.container.elevation (Enabled / Container) $modal-container-elevation: md-sys-elevation.$level1; /// md.comp.navigation-drawer.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.navigation-drawer.scrim.color (Enabled / [Deprecated] Scrim) /// /// @deprecated Bug fix. Token does not represent M3 design intent. Use Neutral-Variant10 at 50% for scrims instead. $scrim-color: md-ref-palette.$neutral-variant20; /// md.comp.navigation-drawer.standard.container.color (Enabled / Container) $standard-container-color: md-sys-color.$surface; /// md.comp.navigation-drawer.standard.container.elevation (Enabled / Container) $standard-container-elevation: md-sys-elevation.$level0; /// md.comp.navigation-drawer.headline.type (Enabled / Headline) @mixin headline-type { font-family: $headline-font; font-size: $headline-size; font-weight: $headline-weight; letter-spacing: $headline-tracking; line-height: $headline-line-height; } /// md.comp.navigation-drawer.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } /// md.comp.navigation-drawer.large-badge-label.type (Enabled / Large badge label) @mixin large-badge-label-type { font-family: $large-badge-label-font; font-size: $large-badge-label-size; font-weight: $large-badge-label-weight; letter-spacing: $large-badge-label-tracking; line-height: $large-badge-label-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-navigation-rail.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.navigation-rail.active-indicator.height (Enabled / Active indicator) $active-indicator-height: 32px; /// md.comp.navigation-rail.active-indicator.width (Enabled / Active indicator) $active-indicator-width: 56px; /// md.comp.navigation-rail.badge.shape (Enabled / [Deprecated] Badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens. $badge-shape: 3px; /// md.comp.navigation-rail.badge.size (Enabled / [Deprecated] Badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens. $badge-size: 6px; /// md.comp.navigation-rail.container.width (Enabled / Container) $container-width: 80px; /// md.comp.navigation-rail.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.navigation-rail.large-badge.shape (Enabled / [Deprecated] Large badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-shape: 8px; /// md.comp.navigation-rail.large-badge.size (Enabled / [Deprecated] Large badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-size: 16px; /// md.comp.navigation-rail.menu.icon.size (Enabled / Icon) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-icon-size: 24px; /// md.comp.navigation-rail.no-label.active-indicator.height (Enabled / Active indicator) $no-label-active-indicator-height: 56px; /// md.comp.navigation-rail.active-indicator.color (Enabled / Active indicator) $active-indicator-color: md-sys-color.$secondary-container; /// md.comp.navigation-rail.active-indicator.shape (Enabled / Active indicator) $active-indicator-shape: md-sys-shape.$corner-full; /// md.comp.navigation-rail.active.focus.icon.color (Focused / Icon) $active-focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-rail.active.focus.label-text.color (Focused / Label text) $active-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.active.focus.state-layer.color (Focused / State layer) $active-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.active.hover.icon.color (Hovered / Icon) $active-hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-rail.active.hover.label-text.color (Hovered / Label text) $active-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.active.hover.state-layer.color (Hovered / State layer) $active-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.active.icon.color (Enabled / Icon) $active-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-rail.active.label-text.color (Enabled / Label text) $active-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.active.label-text.weight (Enabled / Label text) $active-label-text-weight: md-sys-typescale.$label-medium-weight-prominent; /// md.comp.navigation-rail.active.pressed.icon.color (Pressed (ripple) / Icon) $active-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.navigation-rail.active.pressed.label-text.color (Pressed (ripple) / Label text) $active-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.active.pressed.state-layer.color (Pressed (ripple) / State layer) $active-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.badge.color (Enabled / [Deprecated] Badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens. $badge-color: md-sys-color.$error; /// md.comp.navigation-rail.container.color (Enabled / Container) $container-color: md-sys-color.$surface; /// md.comp.navigation-rail.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.navigation-rail.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.navigation-rail.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.navigation-rail.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.navigation-rail.inactive.focus.icon.color (Focused / Icon) $inactive-focus-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.inactive.focus.label-text.color (Focused / Label text) $inactive-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.inactive.focus.state-layer.color (Focused / State layer) $inactive-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.inactive.hover.icon.color (Hovered / Icon) $inactive-hover-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.inactive.hover.label-text.color (Hovered / Label text) $inactive-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.inactive.hover.state-layer.color (Hovered / State layer) $inactive-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.inactive.icon.color (Enabled / Icon) $inactive-icon-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-rail.inactive.label-text.color (Enabled / Label text) $inactive-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-rail.inactive.pressed.icon.color (Pressed (ripple) / Icon) $inactive-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.inactive.pressed.label-text.color (Pressed (ripple) / Label text) $inactive-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.inactive.pressed.state-layer.color (Pressed (ripple) / State layer) $inactive-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-medium-font; /// md.comp.navigation-rail.label-text.font-family (Enabled / Label text) /// /// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token. $label-text-font-family: md-sys-typescale.$label-medium-font; /// md.comp.navigation-rail.label-text.font-size (Enabled / Label text) /// /// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token. $label-text-font-size: md-sys-typescale.$label-medium-size; /// md.comp.navigation-rail.label-text.letter-spacing (Enabled / Label text) /// /// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token. $label-text-letter-spacing: md-sys-typescale.$label-medium-tracking; /// md.comp.navigation-rail.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-medium-line-height; /// md.comp.navigation-rail.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-medium-size; /// md.comp.navigation-rail.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-medium-tracking; /// md.comp.navigation-rail.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-medium-weight; /// md.comp.navigation-rail.large-badge-label.color (Enabled / [Deprecated] Large badge label) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-label-color: md-sys-color.$on-error; /// md.comp.navigation-rail.large-badge-label.font (Enabled / [Deprecated] Large badge label) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-label-font: md-sys-typescale.$label-small-font; /// md.comp.navigation-rail.large-badge-label.font-family (Enabled / [Deprecated] Large badge label) /// /// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token. $large-badge-label-font-family: md-sys-typescale.$label-small-font; /// md.comp.navigation-rail.large-badge-label.line-height (Enabled / [Deprecated] Large badge label) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-label-line-height: md-sys-typescale.$label-small-line-height; /// md.comp.navigation-rail.large-badge-label.size (Enabled / [Deprecated] Large badge label) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-label-size: md-sys-typescale.$label-small-size; /// md.comp.navigation-rail.large-badge-label.tracking (Enabled / [Deprecated] Large badge label) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-label-tracking: md-sys-typescale.$label-small-tracking; /// md.comp.navigation-rail.large-badge-label.weight (Enabled / [Deprecated] Large badge label) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-label-weight: md-sys-typescale.$label-small-weight; /// md.comp.navigation-rail.large-badge.color (Enabled / [Deprecated] Large badge) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. $large-badge-color: md-sys-color.$error; /// md.comp.navigation-rail.menu.focus.icon.color (Focused / Icon) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-focus-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.menu.focus.state-layer.color (Focused / State layer) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.menu.focus.state-layer.opacity (Focused / State layer) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.navigation-rail.menu.hover.icon.color (Hovered / Icon) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-hover-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.menu.hover.state-layer.color (Hovered / State layer) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.menu.hover.state-layer.opacity (Hovered / State layer) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.navigation-rail.menu.icon.color (Enabled / Icon) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-icon-color: md-sys-color.$on-surface-variant; /// md.comp.navigation-rail.menu.pressed.icon.color (Pressed (ripple) / Icon) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.menu.pressed.state-layer.color (Pressed (ripple) / State layer) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.navigation-rail.menu.pressed.state-layer.opacity (Pressed (ripple) / State layer) /// /// @deprecated Using menu button token instead, this token no longer needed. $menu-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.navigation-rail.no-label.active-indicator.shape (Enabled / Active indicator) $no-label-active-indicator-shape: md-sys-shape.$corner-full; /// md.comp.navigation-rail.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.navigation-rail.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } /// md.comp.navigation-rail.large-badge-label.type (Enabled / [Deprecated] Large badge label) /// /// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens. @mixin large-badge-label-type { font-family: $large-badge-label-font; font-size: $large-badge-label-size; font-weight: $large-badge-label-weight; letter-spacing: $large-badge-label-tracking; line-height: $large-badge-label-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-outlined-autocomplete.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.outlined-autocomplete.menu.cascading-menu-indicator.icon.size (Enabled / Icon) $menu-cascading-menu-indicator-icon-size: 24px; /// md.comp.outlined-autocomplete.menu.divider.height (Enabled / Divider) /// /// @deprecated Deprecating per b/262592125 $menu-divider-height: 1px; /// md.comp.outlined-autocomplete.menu.list-item.container.height (Enabled / Container) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-container-height: 48px; /// md.comp.outlined-autocomplete.text-field.container.height (Enabled / Container) /// /// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height. $text-field-container-height: 56px; /// md.comp.outlined-autocomplete.text-field.disabled.input-text.opacity (Disabled / Input text) $text-field-disabled-input-text-opacity: 0.38; /// md.comp.outlined-autocomplete.text-field.disabled.label-text.opacity (Disabled / Label text) $text-field-disabled-label-text-opacity: 0.38; /// md.comp.outlined-autocomplete.text-field.disabled.leading-icon.opacity (Disabled / Leading icon) $text-field-disabled-leading-icon-opacity: 0.38; /// md.comp.outlined-autocomplete.text-field.disabled.outline.opacity (Disabled / Container) $text-field-disabled-outline-opacity: 0.12; /// md.comp.outlined-autocomplete.text-field.disabled.outline.width (Disabled / Container) $text-field-disabled-outline-width: 1px; /// md.comp.outlined-autocomplete.text-field.disabled.supporting-text.opacity (Disabled / Supporting text) $text-field-disabled-supporting-text-opacity: 0.38; /// md.comp.outlined-autocomplete.text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon) $text-field-disabled-trailing-icon-opacity: 0.38; /// md.comp.outlined-autocomplete.text-field.focus.outline.width (Focused / Container) $text-field-focus-outline-width: 2px; /// md.comp.outlined-autocomplete.text-field.hover.outline.width (Hovered / Container) $text-field-hover-outline-width: 1px; /// md.comp.outlined-autocomplete.text-field.leading-icon.size (Enabled / Leading icon) $text-field-leading-icon-size: 24px; /// md.comp.outlined-autocomplete.text-field.outline.width (Enabled / Container) $text-field-outline-width: 1px; /// md.comp.outlined-autocomplete.text-field.trailing-icon.size (Enabled / Trailing icon) $text-field-trailing-icon-size: 24px; /// md.comp.outlined-autocomplete.menu.cascading-menu-indicator.icon.color (Enabled / Icon) $menu-cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.menu.container.color (Enabled / Container) $menu-container-color: md-sys-color.$surface-container; /// md.comp.outlined-autocomplete.menu.container.elevation (Enabled / Container) $menu-container-elevation: md-sys-elevation.$level2; /// md.comp.outlined-autocomplete.menu.container.shadow-color (Enabled / Container) $menu-container-shadow-color: md-sys-color.$shadow; /// md.comp.outlined-autocomplete.menu.container.shape (Enabled / Container) $menu-container-shape: md-sys-shape.$corner-extra-small; /// md.comp.outlined-autocomplete.menu.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $menu-container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.outlined-autocomplete.menu.divider.color (Enabled / Divider) /// /// @deprecated Deprecating per b/262592125 $menu-divider-color: md-sys-color.$surface-variant; /// md.comp.outlined-autocomplete.menu.list-item.label-text.color (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.menu.list-item.label-text.font (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.outlined-autocomplete.menu.list-item.label-text.line-height (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.outlined-autocomplete.menu.list-item.label-text.size (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.outlined-autocomplete.menu.list-item.label-text.tracking (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.outlined-autocomplete.menu.list-item.label-text.weight (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.outlined-autocomplete.menu.list-item.selected.container.color (Enabled / Container) /// /// @deprecated Deprecating per b/262592125 $menu-list-item-selected-container-color: md-sys-color.$surface-container-highest; /// md.comp.outlined-autocomplete.text-field.caret.color (Enabled / Caret) $text-field-caret-color: md-sys-color.$primary; /// md.comp.outlined-autocomplete.text-field.container.color (Enabled / Container) $text-field-container-color: md-sys-color.$surface-container-highest; /// md.comp.outlined-autocomplete.text-field.container.shape (Enabled / Container) $text-field-container-shape: md-sys-shape.$corner-extra-small; /// md.comp.outlined-autocomplete.text-field.disabled.input-text.color (Disabled / Input text) $text-field-disabled-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.disabled.label-text.color (Disabled / Label text) $text-field-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.disabled.leading-icon.color (Disabled / Leading icon) $text-field-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.disabled.outline.color (Disabled / Container) $text-field-disabled-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.disabled.supporting-text.color (Disabled / Supporting text) $text-field-disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.disabled.trailing-icon.color (Disabled / Trailing icon) $text-field-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.error.focus.caret.color (Error / Focus) $text-field-error-focus-caret-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.focus.input-text.color (Error / Focus) $text-field-error-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.error.focus.label-text.color (Error / Focus) $text-field-error-focus-label-text-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.focus.leading-icon.color (Error / Focus) $text-field-error-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.error.focus.outline.color (Error / Focus) $text-field-error-focus-outline-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.focus.supporting-text.color (Error / Focus) $text-field-error-focus-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.focus.trailing-icon.color (Error / Focus) $text-field-error-focus-trailing-icon-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.hover.input-text.color (Error / Hover) $text-field-error-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.error.hover.label-text.color (Error / Hover) $text-field-error-hover-label-text-color: md-sys-color.$on-error-container; /// md.comp.outlined-autocomplete.text-field.error.hover.leading-icon.color (Error / Hover) $text-field-error-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.error.hover.outline.color (Error / Hover) $text-field-error-hover-outline-color: md-sys-color.$on-error-container; /// md.comp.outlined-autocomplete.text-field.error.hover.state-layer.color (Error / Hover) $text-field-error-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.error.hover.state-layer.opacity (Error / Hover) $text-field-error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.outlined-autocomplete.text-field.error.hover.supporting-text.color (Error / Hover) $text-field-error-hover-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.hover.trailing-icon.color (Error / Hover) $text-field-error-hover-trailing-icon-color: md-sys-color.$on-error-container; /// md.comp.outlined-autocomplete.text-field.error.input-text.color (Error) $text-field-error-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.error.label-text.color (Error) $text-field-error-label-text-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.leading-icon.color (Error) $text-field-error-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.error.outline.color (Error) $text-field-error-outline-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.supporting-text.color (Error) $text-field-error-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.error.trailing-icon.color (Error) $text-field-error-trailing-icon-color: md-sys-color.$error; /// md.comp.outlined-autocomplete.text-field.focus.input-text.color (Focused / Input text) $text-field-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.focus.label-text.color (Focused / Label text) $text-field-focus-label-text-color: md-sys-color.$primary; /// md.comp.outlined-autocomplete.text-field.focus.leading-icon.color (Focused / Leading icon) $text-field-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.focus.outline.color (Focused / Container) $text-field-focus-outline-color: md-sys-color.$primary; /// md.comp.outlined-autocomplete.text-field.focus.supporting-text.color (Focused / Supporting text) $text-field-focus-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.focus.trailing-icon.color (Focused / Trailing icon) $text-field-focus-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.hover.input-text.color (Hovered / Input text) $text-field-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.hover.label-text.color (Hovered / Label text) $text-field-hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.hover.leading-icon.color (Hovered / Leading icon) $text-field-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.hover.outline.color (Hovered / Container) $text-field-hover-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.hover.state-layer.color (Hovered / State layer) $text-field-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.hover.state-layer.opacity (Hovered / State layer) $text-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.outlined-autocomplete.text-field.hover.supporting-text.color (Hovered / Supporting text) $text-field-hover-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.hover.trailing-icon.color (Hovered / Trailing icon) $text-field-hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.input-text.color (Enabled / Input text) $text-field-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-autocomplete.text-field.input-text.font (Enabled / Input text) $text-field-input-text-font: md-sys-typescale.$body-large-font; /// md.comp.outlined-autocomplete.text-field.input-text.line-height (Enabled / Input text) $text-field-input-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.outlined-autocomplete.text-field.input-text.size (Enabled / Input text) $text-field-input-text-size: md-sys-typescale.$body-large-size; /// md.comp.outlined-autocomplete.text-field.input-text.tracking (Enabled / Input text) $text-field-input-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.outlined-autocomplete.text-field.input-text.weight (Enabled / Input text) $text-field-input-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.outlined-autocomplete.text-field.label-text.color (Enabled / Label text) $text-field-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.label-text.font (Enabled / Label text) $text-field-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.outlined-autocomplete.text-field.label-text.line-height (Enabled / Label text) $text-field-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.outlined-autocomplete.text-field.label-text.populated.line-height (Enabled / Label text) $text-field-label-text-populated-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.outlined-autocomplete.text-field.label-text.populated.size (Enabled / Label text) $text-field-label-text-populated-size: md-sys-typescale.$body-small-size; /// md.comp.outlined-autocomplete.text-field.label-text.size (Enabled / Label text) $text-field-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.outlined-autocomplete.text-field.label-text.tracking (Enabled / Label text) $text-field-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.outlined-autocomplete.text-field.label-text.weight (Enabled / Label text) $text-field-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.outlined-autocomplete.text-field.leading-icon.color (Enabled / Leading icon) $text-field-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.outline.color (Enabled / Container) $text-field-outline-color: md-sys-color.$outline; /// md.comp.outlined-autocomplete.text-field.supporting-text.color (Enabled / Supporting text) $text-field-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.text-field.supporting-text.font (Enabled / Supporting text) $text-field-supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.outlined-autocomplete.text-field.supporting-text.line-height (Enabled / Supporting text) $text-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.outlined-autocomplete.text-field.supporting-text.size (Enabled / Supporting text) $text-field-supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.outlined-autocomplete.text-field.supporting-text.tracking (Enabled / Supporting text) $text-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.outlined-autocomplete.text-field.supporting-text.weight (Enabled / Supporting text) $text-field-supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.outlined-autocomplete.text-field.trailing-icon.color (Enabled / Trailing icon) $text-field-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-autocomplete.menu.list-item.label-text.type (Enabled / Label text) /// /// @deprecated Deprecating per b/262592125 @mixin menu-list-item-label-text-type { font-family: $menu-list-item-label-text-font; font-size: $menu-list-item-label-text-size; font-weight: $menu-list-item-label-text-weight; letter-spacing: $menu-list-item-label-text-tracking; line-height: $menu-list-item-label-text-line-height; } /// md.comp.outlined-autocomplete.text-field.input-text.type (Enabled / Input text) @mixin text-field-input-text-type { font-family: $text-field-input-text-font; font-size: $text-field-input-text-size; font-weight: $text-field-input-text-weight; letter-spacing: $text-field-input-text-tracking; line-height: $text-field-input-text-line-height; } /// md.comp.outlined-autocomplete.text-field.label-text.type (Enabled / Label text) @mixin text-field-label-text-type { font-family: $text-field-label-text-font; font-size: $text-field-label-text-size; font-weight: $text-field-label-text-weight; letter-spacing: $text-field-label-text-tracking; line-height: $text-field-label-text-line-height; } /// md.comp.outlined-autocomplete.text-field.supporting-text.type (Enabled / Supporting text) @mixin text-field-supporting-text-type { font-family: $text-field-supporting-text-font; font-size: $text-field-supporting-text-size; font-weight: $text-field-supporting-text-weight; letter-spacing: $text-field-supporting-text-tracking; line-height: $text-field-supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-outlined-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.outlined-button.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.outlined-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-opacity: 0.38; /// md.comp.outlined-button.disabled.outline.opacity ([Deprecated] Disabled / [Deprecated] Outline) $disabled-outline-opacity: 0.12; /// md.comp.outlined-button.outline.width ([Deprecated] Enabled / [Deprecated] Outline) $outline-width: 1px; /// md.comp.outlined-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-opacity: 0.38; /// md.comp.outlined-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-size: 18px; /// md.comp.outlined-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Reduced redundency in the system by eliminating tokens that duplicate the default value of zero. Replace usage with the default value of zero. $container-elevation: md-sys-elevation.$level0; /// md.comp.outlined-button.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.outlined-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-button.disabled.outline.color ([Deprecated] Disabled / [Deprecated] Outline) $disabled-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.outlined-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.outlined-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.outlined-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text) $focus-label-text-color: md-sys-color.$primary; /// md.comp.outlined-button.focus.outline.color ([Deprecated] Focused / [Deprecated] Outline) $focus-outline-color: md-sys-color.$primary; /// md.comp.outlined-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.outlined-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.outlined-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text) $hover-label-text-color: md-sys-color.$primary; /// md.comp.outlined-button.hover.outline.color ([Deprecated] Hovered / [Deprecated] Outline) $hover-outline-color: md-sys-color.$outline; /// md.comp.outlined-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.outlined-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.outlined-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text) $label-text-color: md-sys-color.$primary; /// md.comp.outlined-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.outlined-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.outlined-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.outlined-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.outlined-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.outlined-button.outline.color ([Deprecated] Enabled / [Deprecated] Outline) $outline-color: md-sys-color.$outline; /// md.comp.outlined-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text) $pressed-label-text-color: md-sys-color.$primary; /// md.comp.outlined-button.pressed.outline.color ([Deprecated] Pressed (ripple) / [Deprecated] Outline) $pressed-outline-color: md-sys-color.$outline; /// md.comp.outlined-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.outlined-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.outlined-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $with-icon-focus-icon-color: md-sys-color.$primary; /// md.comp.outlined-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $with-icon-hover-icon-color: md-sys-color.$primary; /// md.comp.outlined-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-color: md-sys-color.$primary; /// md.comp.outlined-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $with-icon-pressed-icon-color: md-sys-color.$primary; /// md.comp.outlined-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-outlined-card.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.outlined-card.disabled.outline.opacity (Disabled / Outline) $disabled-outline-opacity: 0.12; /// md.comp.outlined-card.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.outlined-card.outline.width (Enabled / Outline) $outline-width: 1px; /// md.comp.outlined-card.container.color (Enabled / Container) $container-color: md-sys-color.$surface; /// md.comp.outlined-card.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.outlined-card.container.shadow-color (Enabled / Outline) $container-shadow-color: md-sys-color.$shadow; /// md.comp.outlined-card.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-medium; /// md.comp.outlined-card.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.outlined-card.disabled.container.elevation (Disabled / Container) $disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.outlined-card.disabled.outline.color (Disabled / Outline) $disabled-outline-color: md-sys-color.$outline; /// md.comp.outlined-card.dragged.container.elevation (Dragged / Container) $dragged-container-elevation: md-sys-elevation.$level3; /// md.comp.outlined-card.dragged.outline.color (Dragged / Outline) $dragged-outline-color: md-sys-color.$outline-variant; /// md.comp.outlined-card.dragged.state-layer.color (Dragged / State layer) $dragged-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-card.dragged.state-layer.opacity (Dragged / State layer) $dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.outlined-card.focus.container.elevation (Focused / Container) $focus-container-elevation: md-sys-elevation.$level0; /// md.comp.outlined-card.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.outlined-card.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.outlined-card.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.outlined-card.focus.outline.color (Focused / Outline) $focus-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-card.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-card.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.outlined-card.hover.container.elevation (Hovered / Container) $hover-container-elevation: md-sys-elevation.$level1; /// md.comp.outlined-card.hover.outline.color (Hovered / Outline) $hover-outline-color: md-sys-color.$outline-variant; /// md.comp.outlined-card.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-card.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.outlined-card.icon.color (Enabled / Icon) $icon-color: md-sys-color.$primary; /// md.comp.outlined-card.outline.color (Enabled / Outline) $outline-color: md-sys-color.$outline-variant; /// md.comp.outlined-card.pressed.container.elevation (Pressed (ripple) / Container) $pressed-container-elevation: md-sys-elevation.$level0; /// md.comp.outlined-card.pressed.outline.color (Pressed (ripple) / Outline) $pressed-outline-color: md-sys-color.$outline-variant; /// md.comp.outlined-card.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-card.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-outlined-menu-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.outlined-menu-button.container.height (Enabled / Container) $container-height: 40px; /// md.comp.outlined-menu-button.disabled.container.opacity (Disabled / Container) $disabled-container-opacity: 0.12; /// md.comp.outlined-menu-button.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.outlined-menu-button.disabled.trailing-icon.opacity (Disabled / Trailing icon) $disabled-trailing-icon-opacity: 0.38; /// md.comp.outlined-menu-button.outline.width (Enabled / Container) $outline-width: 1px; /// md.comp.outlined-menu-button.trailing-icon.size (Enabled / Trailing icon) $trailing-icon-size: 18px; /// md.comp.outlined-menu-button.with-icon.disabled.icon.opacity (Disabled / Icon) $with-icon-disabled-icon-opacity: 0.38; /// md.comp.outlined-menu-button.with-icon.leading-icon.size (Enabled / Leading icon) $with-icon-leading-icon-size: 18px; /// md.comp.outlined-menu-button.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-menu-button.disabled.outline.color (Disabled / Container) $disabled-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-menu-button.disabled.trailing-icon.color (Disabled / Trailing icon) $disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-menu-button.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.outlined-menu-button.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.outlined-menu-button.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.outlined-menu-button.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.focus.outline.color (Focused / Container) $focus-outline-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.outlined-menu-button.focus.trailing-icon.color (Focused / Trailing icon) $focus-trailing-icon-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.hover.outline.color (Hovered / Container) $hover-outline-color: md-sys-color.$outline; /// md.comp.outlined-menu-button.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.outlined-menu-button.hover.trailing-icon.color (Hovered / Trailing icon) $hover-trailing-icon-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.outlined-menu-button.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.outlined-menu-button.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.outlined-menu-button.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.outlined-menu-button.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.outlined-menu-button.outline.color (Enabled / Container) $outline-color: md-sys-color.$outline; /// md.comp.outlined-menu-button.pressed.label-text.color (Pressed (ripple) / Label text) $pressed-label-text-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.pressed.outline.color (Pressed (ripple) / Container) $pressed-outline-color: md-sys-color.$outline; /// md.comp.outlined-menu-button.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.outlined-menu-button.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon) $pressed-trailing-icon-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.shape (Enabled / Container) $shape: md-sys-shape.$corner-full; /// md.comp.outlined-menu-button.trailing-icon.color (Enabled / Trailing icon) $trailing-icon-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.with-icon.disabled.icon.color (Disabled / Icon) $with-icon-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-menu-button.with-icon.focus.leading-icon.color (Focused / Leading icon) $with-icon-focus-leading-icon-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.with-icon.hover.leading-icon.color (Hovered / Leading icon) $with-icon-hover-leading-icon-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.with-icon.leading-icon.color (Enabled / Leading icon) $with-icon-leading-icon-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.with-icon.pressed.leading-icon.color (Pressed (ripple) / Leading icon) $with-icon-pressed-leading-icon-color: md-sys-color.$primary; /// md.comp.outlined-menu-button.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-outlined-segmented-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.outlined-segmented-button.container.height (Enabled / Container) $container-height: 40px; /// md.comp.outlined-segmented-button.disabled.icon.opacity (Disabled / Icon) $disabled-icon-opacity: 0.38; /// md.comp.outlined-segmented-button.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.outlined-segmented-button.disabled.outline.opacity (Disabled / Container) $disabled-outline-opacity: 0.12; /// md.comp.outlined-segmented-button.outline.width (Enabled / Container) $outline-width: 1px; /// md.comp.outlined-segmented-button.with-icon.icon.size (Enabled / Icon) $with-icon-icon-size: 18px; /// md.comp.outlined-segmented-button.disabled.icon.color (Disabled / Icon) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.disabled.outline.color (Disabled / Container) $disabled-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.outlined-segmented-button.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.outlined-segmented-button.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.outlined-segmented-button.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.outlined-segmented-button.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.outlined-segmented-button.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.outlined-segmented-button.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.outlined-segmented-button.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.outlined-segmented-button.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.outlined-segmented-button.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.outlined-segmented-button.outline.color (Enabled / Container) $outline-color: md-sys-color.$outline; /// md.comp.outlined-segmented-button.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.outlined-segmented-button.selected.container.color (Enabled / Container) $selected-container-color: md-sys-color.$secondary-container; /// md.comp.outlined-segmented-button.selected.focus.icon.color (Focused / Icon) $selected-focus-icon-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.focus.label-text.color (Focused / Label text) $selected-focus-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.focus.state-layer.color (Focused / State layer) $selected-focus-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.hover.icon.color (Hovered / Icon) $selected-hover-icon-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.hover.label-text.color (Hovered / Label text) $selected-hover-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.hover.state-layer.color (Hovered / State layer) $selected-hover-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.label-text.color (Enabled / Label text) $selected-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.pressed.icon.color (Pressed (ripple) / Icon) $selected-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.pressed.label-text.color (Pressed (ripple) / Label text) $selected-pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $selected-pressed-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.selected.with-icon.icon.color (Enabled / Icon) $selected-with-icon-icon-color: md-sys-color.$on-secondary-container; /// md.comp.outlined-segmented-button.shape (Enabled / Container) $shape: md-sys-shape.$corner-full; /// md.comp.outlined-segmented-button.unselected.focus.icon.color (Focused / Icon) $unselected-focus-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.focus.label-text.color (Focused / Label text) $unselected-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.focus.state-layer.color (Focused / State layer) $unselected-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.hover.icon.color (Hovered / Icon) $unselected-hover-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.hover.label-text.color (Hovered / Label text) $unselected-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.hover.state-layer.color (Hovered / State layer) $unselected-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.label-text.color (Enabled / Label text) $unselected-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.pressed.icon.color (Pressed (ripple) / Icon) $unselected-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.pressed.label-text.color (Pressed (ripple) / Label text) $unselected-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $unselected-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.unselected.with-icon.icon.color (Enabled / Icon) $unselected-with-icon-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-segmented-button.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-outlined-select.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.outlined-select.menu.cascading-menu-indicator.icon.size (Enabled / Icon) $menu-cascading-menu-indicator-icon-size: 24px; /// md.comp.outlined-select.menu.divider.height (Enabled / Divider) $menu-divider-height: 1px; /// md.comp.outlined-select.menu.list-item.container.height (Enabled / Container) $menu-list-item-container-height: 48px; /// md.comp.outlined-select.menu.list-item.with-leading-icon.leading-icon.size (Enabled / Leading icon) $menu-list-item-with-leading-icon-leading-icon-size: 24px; /// md.comp.outlined-select.menu.list-item.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon) $menu-list-item-with-trailing-icon-trailing-icon-size: 24px; /// md.comp.outlined-select.text-field.container.height (Enabled / Container) /// /// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height. $text-field-container-height: 56px; /// md.comp.outlined-select.text-field.disabled.input-text.opacity (Disabled / Input text) $text-field-disabled-input-text-opacity: 0.38; /// md.comp.outlined-select.text-field.disabled.label-text.opacity (Disabled / Label text) $text-field-disabled-label-text-opacity: 0.38; /// md.comp.outlined-select.text-field.disabled.leading-icon.opacity (Disabled / Leading icon) $text-field-disabled-leading-icon-opacity: 0.38; /// md.comp.outlined-select.text-field.disabled.outline.opacity (Disabled / Container) $text-field-disabled-outline-opacity: 0.12; /// md.comp.outlined-select.text-field.disabled.outline.width (Disabled / Container) $text-field-disabled-outline-width: 1px; /// md.comp.outlined-select.text-field.disabled.supporting-text.opacity (Disabled / Supporting text) $text-field-disabled-supporting-text-opacity: 0.38; /// md.comp.outlined-select.text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon) $text-field-disabled-trailing-icon-opacity: 0.38; /// md.comp.outlined-select.text-field.hover.outline.width (Hovered / Container) $text-field-hover-outline-width: 1px; /// md.comp.outlined-select.text-field.leading-icon.size (Enabled / Leading icon) $text-field-leading-icon-size: 24px; /// md.comp.outlined-select.text-field.outline.width (Enabled / Container) $text-field-outline-width: 1px; /// md.comp.outlined-select.text-field.trailing-icon.size (Enabled / Trailing icon) $text-field-trailing-icon-size: 24px; /// md.comp.outlined-select.menu.cascading-menu-indicator.icon.color (Enabled / Icon) $menu-cascading-menu-indicator-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.menu.container.color (Enabled / Container) $menu-container-color: md-sys-color.$surface-container; /// md.comp.outlined-select.menu.container.elevation (Enabled / Container) $menu-container-elevation: md-sys-elevation.$level2; /// md.comp.outlined-select.menu.container.shadow-color (Enabled / Container) $menu-container-shadow-color: md-sys-color.$shadow; /// md.comp.outlined-select.menu.container.shape (Enabled / Container) $menu-container-shape: md-sys-shape.$corner-extra-small; /// md.comp.outlined-select.menu.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $menu-container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.outlined-select.menu.divider.color (Enabled / Divider) $menu-divider-color: md-sys-color.$surface-variant; /// md.comp.outlined-select.menu.list-item.label-text.color (Enabled / Label text) $menu-list-item-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.menu.list-item.label-text.font (Enabled / Label text) $menu-list-item-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.outlined-select.menu.list-item.label-text.line-height (Enabled / Label text) $menu-list-item-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.outlined-select.menu.list-item.label-text.size (Enabled / Label text) $menu-list-item-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.outlined-select.menu.list-item.label-text.tracking (Enabled / Label text) $menu-list-item-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.outlined-select.menu.list-item.label-text.weight (Enabled / Label text) $menu-list-item-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.outlined-select.menu.list-item.selected.container.color (Enabled / Container) $menu-list-item-selected-container-color: md-sys-color.$surface-container-highest; /// md.comp.outlined-select.menu.list-item.with-leading-icon.leading-icon.color (Enabled / Leading icon) $menu-list-item-with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.menu.list-item.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon) $menu-list-item-with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.caret.color (Enabled / Caret) /// /// @deprecated Removed caret related tokens from Select variants as these components don't support entering free text. $text-field-caret-color: md-sys-color.$primary; /// md.comp.outlined-select.text-field.container.color (Enabled / Container) $text-field-container-color: md-sys-color.$surface-container-highest; /// md.comp.outlined-select.text-field.container.shape (Enabled / Container) $text-field-container-shape: md-sys-shape.$corner-extra-small; /// md.comp.outlined-select.text-field.disabled.input-text.color (Disabled / Input text) $text-field-disabled-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.disabled.label-text.color (Disabled / Label text) $text-field-disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.disabled.leading-icon.color (Disabled / Leading icon) $text-field-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.disabled.outline.color (Disabled / Container) $text-field-disabled-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.disabled.supporting-text.color (Disabled / Supporting text) $text-field-disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.disabled.trailing-icon.color (Disabled / Trailing icon) $text-field-disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.error.focus.caret.color (Error / Focus) /// /// @deprecated Removed caret related tokens from Select variants as these components don't support entering free text. $text-field-error-focus-caret-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.focus.input-text.color (Error / Focus) $text-field-error-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.error.focus.label-text.color (Error / Focus) $text-field-error-focus-label-text-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.focus.leading-icon.color (Error / Focus) $text-field-error-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.error.focus.outline.color (Error / Focus) $text-field-error-focus-outline-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.focus.supporting-text.color (Error / Focus) $text-field-error-focus-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.focus.trailing-icon.color (Error / Focus) $text-field-error-focus-trailing-icon-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.hover.input-text.color (Error / Hover) $text-field-error-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.error.hover.label-text.color (Error / Hover) $text-field-error-hover-label-text-color: md-sys-color.$on-error-container; /// md.comp.outlined-select.text-field.error.hover.leading-icon.color (Error / Hover) $text-field-error-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.error.hover.outline.color (Error / Hover) $text-field-error-hover-outline-color: md-sys-color.$on-error-container; /// md.comp.outlined-select.text-field.error.hover.state-layer.color (Error / Hover) $text-field-error-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.error.hover.state-layer.opacity (Error / Hover) $text-field-error-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.outlined-select.text-field.error.hover.supporting-text.color (Error / Hover) $text-field-error-hover-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.hover.trailing-icon.color (Error / Hover) $text-field-error-hover-trailing-icon-color: md-sys-color.$on-error-container; /// md.comp.outlined-select.text-field.error.input-text.color (Error) $text-field-error-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.error.label-text.color (Error) $text-field-error-label-text-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.leading-icon.color (Error) $text-field-error-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.error.outline.color (Error) $text-field-error-outline-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.supporting-text.color (Error) $text-field-error-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.error.trailing-icon.color (Error) $text-field-error-trailing-icon-color: md-sys-color.$error; /// md.comp.outlined-select.text-field.focus.input-text.color (Focused / Input text) $text-field-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.focus.label-text.color (Focused / Label text) $text-field-focus-label-text-color: md-sys-color.$primary; /// md.comp.outlined-select.text-field.focus.leading-icon.color (Focused / Leading icon) $text-field-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.focus.outline.color (Focused / Container) $text-field-focus-outline-color: md-sys-color.$primary; /// md.comp.outlined-select.text-field.focus.outline.width (Focused / Container) $text-field-focus-outline-width: md-sys-state-focus-indicator.$thickness; /// md.comp.outlined-select.text-field.focus.supporting-text.color (Focused / Supporting text) $text-field-focus-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.focus.trailing-icon.color (Focused / Trailing icon) $text-field-focus-trailing-icon-color: md-sys-color.$primary; /// md.comp.outlined-select.text-field.hover.input-text.color (Hovered / Input text) $text-field-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.hover.label-text.color (Hovered / Label text) $text-field-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.hover.leading-icon.color (Hovered / Leading icon) $text-field-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.hover.outline.color (Hovered / Container) $text-field-hover-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.hover.state-layer.color (Hovered / State layer) $text-field-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.hover.state-layer.opacity (Hovered / State layer) $text-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.outlined-select.text-field.hover.supporting-text.color (Hovered / Supporting text) $text-field-hover-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.hover.trailing-icon.color (Hovered / Trailing icon) $text-field-hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.input-text.color (Enabled / Input text) $text-field-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-select.text-field.input-text.font (Enabled / Input text) $text-field-input-text-font: md-sys-typescale.$body-large-font; /// md.comp.outlined-select.text-field.input-text.line-height (Enabled / Input text) $text-field-input-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.outlined-select.text-field.input-text.size (Enabled / Input text) $text-field-input-text-size: md-sys-typescale.$body-large-size; /// md.comp.outlined-select.text-field.input-text.tracking (Enabled / Input text) $text-field-input-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.outlined-select.text-field.input-text.weight (Enabled / Input text) $text-field-input-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.outlined-select.text-field.label-text.color (Enabled / Label text) $text-field-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.label-text.font (Enabled / Label text) $text-field-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.outlined-select.text-field.label-text.line-height (Enabled / Label text) $text-field-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.outlined-select.text-field.label-text.populated.line-height (Enabled / Label text) $text-field-label-text-populated-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.outlined-select.text-field.label-text.populated.size (Enabled / Label text) $text-field-label-text-populated-size: md-sys-typescale.$body-small-size; /// md.comp.outlined-select.text-field.label-text.size (Enabled / Label text) $text-field-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.outlined-select.text-field.label-text.tracking (Enabled / Label text) $text-field-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.outlined-select.text-field.label-text.weight (Enabled / Label text) $text-field-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.outlined-select.text-field.leading-icon.color (Enabled / Leading icon) $text-field-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.outline.color (Enabled / Container) $text-field-outline-color: md-sys-color.$outline; /// md.comp.outlined-select.text-field.supporting-text.color (Enabled / Supporting text) $text-field-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.text-field.supporting-text.font (Enabled / Supporting text) $text-field-supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.outlined-select.text-field.supporting-text.line-height (Enabled / Supporting text) $text-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.outlined-select.text-field.supporting-text.size (Enabled / Supporting text) $text-field-supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.outlined-select.text-field.supporting-text.tracking (Enabled / Supporting text) $text-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.outlined-select.text-field.supporting-text.weight (Enabled / Supporting text) $text-field-supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.outlined-select.text-field.trailing-icon.color (Enabled / Trailing icon) $text-field-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-select.menu.list-item.label-text.type (Enabled / Label text) @mixin menu-list-item-label-text-type { font-family: $menu-list-item-label-text-font; font-size: $menu-list-item-label-text-size; font-weight: $menu-list-item-label-text-weight; letter-spacing: $menu-list-item-label-text-tracking; line-height: $menu-list-item-label-text-line-height; } /// md.comp.outlined-select.text-field.input-text.type (Enabled / Input text) @mixin text-field-input-text-type { font-family: $text-field-input-text-font; font-size: $text-field-input-text-size; font-weight: $text-field-input-text-weight; letter-spacing: $text-field-input-text-tracking; line-height: $text-field-input-text-line-height; } /// md.comp.outlined-select.text-field.label-text.type (Enabled / Label text) @mixin text-field-label-text-type { font-family: $text-field-label-text-font; font-size: $text-field-label-text-size; font-weight: $text-field-label-text-weight; letter-spacing: $text-field-label-text-tracking; line-height: $text-field-label-text-line-height; } /// md.comp.outlined-select.text-field.supporting-text.type (Enabled / Supporting text) @mixin text-field-supporting-text-type { font-family: $text-field-supporting-text-font; font-size: $text-field-supporting-text-size; font-weight: $text-field-supporting-text-weight; letter-spacing: $text-field-supporting-text-tracking; line-height: $text-field-supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-outlined-text-field.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.outlined-text-field.container.height (Enabled / Container) /// /// @deprecated Removing fixed height token due to conflicts with text fields variants requiring dynamic height (multi-line, text area). Use height of internal elements and paddings to control component height. $container-height: 56px; /// md.comp.outlined-text-field.disabled.input-text.opacity (Disabled / Input text) $disabled-input-text-opacity: 0.38; /// md.comp.outlined-text-field.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.outlined-text-field.disabled.leading-icon.opacity (Disabled / Leading icon) $disabled-leading-icon-opacity: 0.38; /// md.comp.outlined-text-field.disabled.outline.opacity (Disabled / Outline) $disabled-outline-opacity: 0.12; /// md.comp.outlined-text-field.disabled.outline.width (Disabled / Outline) $disabled-outline-width: 1px; /// md.comp.outlined-text-field.disabled.supporting-text.opacity (Disabled / Supporting text) $disabled-supporting-text-opacity: 0.38; /// md.comp.outlined-text-field.disabled.trailing-icon.opacity (Disabled / Trailing icon) $disabled-trailing-icon-opacity: 0.38; /// md.comp.outlined-text-field.focus.outline.width (Focused / Outline) $focus-outline-width: 3px; /// md.comp.outlined-text-field.hover.outline.width (Hovered / Outline) $hover-outline-width: 1px; /// md.comp.outlined-text-field.leading-icon.size (Enabled / Leading icon) $leading-icon-size: 24px; /// md.comp.outlined-text-field.outline.width (Enabled / Outline) $outline-width: 1px; /// md.comp.outlined-text-field.trailing-icon.size (Enabled / Trailing icon) $trailing-icon-size: 24px; /// md.comp.outlined-text-field.caret.color (Enabled / Caret) $caret-color: md-sys-color.$primary; /// md.comp.outlined-text-field.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-small; /// md.comp.outlined-text-field.disabled.input-text.color (Disabled / Input text) $disabled-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.disabled.leading-icon.color (Disabled / Leading icon) $disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.disabled.outline.color (Disabled / Outline) $disabled-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.disabled.supporting-text.color (Disabled / Supporting text) $disabled-supporting-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.disabled.trailing-icon.color (Disabled / Trailing icon) $disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.error.focus.caret.color (Enabled / Caret) $error-focus-caret-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.focus.indicator.outline.color (Focused / Focus indicator) /// /// @deprecated Deprecating - instead use focus outline tokens $error-focus-indicator-outline-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.focus.input-text.color (Error / Focus) $error-focus-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.error.focus.label-text.color (Error / Focus) $error-focus-label-text-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.focus.leading-icon.color (Error / Focus) $error-focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.error.focus.outline.color (Error / Focus) $error-focus-outline-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.focus.supporting-text.color (Error / Focus) $error-focus-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.focus.trailing-icon.color (Error / Focus) $error-focus-trailing-icon-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.hover.input-text.color (Error / Hover) $error-hover-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.error.hover.label-text.color (Error / Hover) $error-hover-label-text-color: md-sys-color.$on-error-container; /// md.comp.outlined-text-field.error.hover.leading-icon.color (Error / Hover) $error-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.error.hover.outline.color (Error / Hover) $error-hover-outline-color: md-sys-color.$on-error-container; /// md.comp.outlined-text-field.error.hover.supporting-text.color (Error / Hover) $error-hover-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.hover.trailing-icon.color (Error / Hover) $error-hover-trailing-icon-color: md-sys-color.$on-error-container; /// md.comp.outlined-text-field.error.input-text.color (Error) $error-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.error.label-text.color (Error) $error-label-text-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.leading-icon.color (Error) $error-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.error.outline.color (Error) $error-outline-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.supporting-text.color (Error) $error-supporting-text-color: md-sys-color.$error; /// md.comp.outlined-text-field.error.trailing-icon.color (Error) $error-trailing-icon-color: md-sys-color.$error; /// md.comp.outlined-text-field.focus.indicator.outline.color (Focused / Focus indicator) /// /// @deprecated Deprecating - instead use focus outline tokens $focus-indicator-outline-color: md-sys-color.$secondary; /// md.comp.outlined-text-field.focus.indicator.outline.thickness (Focused / Focus indicator) /// /// @deprecated Deprecating - instead use focus outline tokens $focus-indicator-outline-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.outlined-text-field.focus.input-text.color (Focused / Input text) $focus-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$primary; /// md.comp.outlined-text-field.focus.leading-icon.color (Focused / Leading icon) $focus-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.focus.outline.color (Focused / Outline) $focus-outline-color: md-sys-color.$primary; /// md.comp.outlined-text-field.focus.supporting-text.color (Focused / Supporting text) $focus-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.focus.trailing-icon.color (Focused / Trailing icon) $focus-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.hover.input-text.color (Hovered / Input text) $hover-input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.hover.leading-icon.color (Hovered / Leading icon) $hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.hover.outline.color (Hovered / Outline) $hover-outline-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.hover.supporting-text.color (Hovered / Supporting text) $hover-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.hover.trailing-icon.color (Hovered / Trailing icon) $hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.input-text.color (Enabled / Input text) $input-text-color: md-sys-color.$on-surface; /// md.comp.outlined-text-field.input-text.font (Enabled / Input text) $input-text-font: md-sys-typescale.$body-large-font; /// md.comp.outlined-text-field.input-text.line-height (Enabled / Input text) $input-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.outlined-text-field.input-text.placeholder.color (Enabled / Input text) $input-text-placeholder-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.input-text.prefix.color (Enabled / Input text) $input-text-prefix-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.input-text.size (Enabled / Input text) $input-text-size: md-sys-typescale.$body-large-size; /// md.comp.outlined-text-field.input-text.suffix.color (Enabled / Input text) $input-text-suffix-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.input-text.tracking (Enabled / Input text) $input-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.outlined-text-field.input-text.weight (Enabled / Input text) $input-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.outlined-text-field.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$body-large-font; /// md.comp.outlined-text-field.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.outlined-text-field.label-text.populated.line-height (Enabled / Label text) $label-text-populated-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.outlined-text-field.label-text.populated.size (Enabled / Label text) $label-text-populated-size: md-sys-typescale.$body-small-size; /// md.comp.outlined-text-field.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$body-large-size; /// md.comp.outlined-text-field.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.outlined-text-field.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.outlined-text-field.leading-icon.color (Enabled / Leading icon) $leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.outline.color (Enabled / Outline) $outline-color: md-sys-color.$outline; /// md.comp.outlined-text-field.supporting-text.color (Enabled / Supporting text) $supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.supporting-text.font (Enabled / Supporting text) $supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.outlined-text-field.supporting-text.line-height (Enabled / Supporting text) $supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.outlined-text-field.supporting-text.size (Enabled / Supporting text) $supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.outlined-text-field.supporting-text.tracking (Enabled / Supporting text) $supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.outlined-text-field.supporting-text.weight (Enabled / Supporting text) $supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.outlined-text-field.trailing-icon.color (Enabled / Trailing icon) $trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.outlined-text-field.input-text.type (Enabled / Input text) @mixin input-text-type { font-family: $input-text-font; font-size: $input-text-size; font-weight: $input-text-weight; letter-spacing: $input-text-tracking; line-height: $input-text-line-height; } /// md.comp.outlined-text-field.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } /// md.comp.outlined-text-field.supporting-text.type (Enabled / Supporting text) @mixin supporting-text-type { font-family: $supporting-text-font; font-size: $supporting-text-size; font-weight: $supporting-text-weight; letter-spacing: $supporting-text-tracking; line-height: $supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-plain-tooltip.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.plain-tooltip.container.color (Enabled / Container) $container-color: md-sys-color.$inverse-surface; /// md.comp.plain-tooltip.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-small; /// md.comp.plain-tooltip.supporting-text.color (Enabled / Supporting text) $supporting-text-color: md-sys-color.$inverse-on-surface; /// md.comp.plain-tooltip.supporting-text.font (Enabled / Supporting text) $supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.plain-tooltip.supporting-text.line-height (Enabled / Supporting text) $supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.plain-tooltip.supporting-text.size (Enabled / Supporting text) $supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.plain-tooltip.supporting-text.tracking (Enabled / Supporting text) $supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.plain-tooltip.supporting-text.weight (Enabled / Supporting text) $supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.plain-tooltip.supporting-text.type (Enabled / Supporting text) @mixin supporting-text-type { font-family: $supporting-text-font; font-size: $supporting-text-size; font-weight: $supporting-text-weight; letter-spacing: $supporting-text-tracking; line-height: $supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-primary-navigation-tab.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.primary-navigation-tab.active-indicator.height (Enabled / Active indicator) $active-indicator-height: 3px; /// md.comp.primary-navigation-tab.active-indicator.shape (Enabled / Active indicator) $active-indicator-shape: 3px 3px 0px 0px; /// md.comp.primary-navigation-tab.container.height (Enabled / Container) $container-height: 48px; /// md.comp.primary-navigation-tab.divider.height (Enabled / Divider) /// /// @deprecated Use standalone divider component instead of nested tokens. $divider-height: 1px; /// md.comp.primary-navigation-tab.with-icon-and-label-text.container.height (Enabled / Container) $with-icon-and-label-text-container-height: 64px; /// md.comp.primary-navigation-tab.with-icon.icon.size (Enabled / Icon) $with-icon-icon-size: 24px; /// md.comp.primary-navigation-tab.active-indicator.color (Enabled / Active indicator) $active-indicator-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.active.focus.state-layer.color (Focused / State layer) $active-focus-state-layer-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.active.focus.state-layer.opacity (Focused / State layer) $active-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.primary-navigation-tab.active.hover.state-layer.color (Hovered / State layer) $active-hover-state-layer-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.active.hover.state-layer.opacity (Hovered / State layer) $active-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.primary-navigation-tab.active.pressed.state-layer.color (Pressed (ripple) / State layer) $active-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.active.pressed.state-layer.opacity (Pressed (ripple) / State layer) $active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.primary-navigation-tab.container.color (Enabled / Container) $container-color: md-sys-color.$surface; /// md.comp.primary-navigation-tab.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.primary-navigation-tab.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.primary-navigation-tab.divider.color (Enabled / Divider) /// /// @deprecated Use standalone divider component instead of nested tokens. $divider-color: md-sys-color.$surface-variant; /// md.comp.primary-navigation-tab.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.primary-navigation-tab.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset; /// md.comp.primary-navigation-tab.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.primary-navigation-tab.inactive.focus.state-layer.color (Focused / State layer) $inactive-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.primary-navigation-tab.inactive.focus.state-layer.opacity (Focused / State layer) $inactive-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.primary-navigation-tab.inactive.hover.state-layer.color (Hovered / State layer) $inactive-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.primary-navigation-tab.inactive.hover.state-layer.opacity (Hovered / State layer) $inactive-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.primary-navigation-tab.inactive.pressed.state-layer.color (Pressed (ripple) / State layer) $inactive-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.inactive.pressed.state-layer.opacity (Pressed (ripple) / State layer) $inactive-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.primary-navigation-tab.with-icon.active.focus.icon.color (Focused / Icon) $with-icon-active-focus-icon-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.with-icon.active.hover.icon.color (Hovered / Icon) $with-icon-active-hover-icon-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.with-icon.active.icon.color (Enabled / Icon) $with-icon-active-icon-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.with-icon.active.pressed.icon.color (Pressed (ripple) / Icon) $with-icon-active-pressed-icon-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.with-icon.inactive.focus.icon.color (Focused / Icon) $with-icon-inactive-focus-icon-color: md-sys-color.$on-surface; /// md.comp.primary-navigation-tab.with-icon.inactive.hover.icon.color (Hovered / Icon) $with-icon-inactive-hover-icon-color: md-sys-color.$on-surface; /// md.comp.primary-navigation-tab.with-icon.inactive.icon.color (Enabled / Icon) $with-icon-inactive-icon-color: md-sys-color.$on-surface-variant; /// md.comp.primary-navigation-tab.with-icon.inactive.pressed.icon.color (Pressed (ripple) / Icon) $with-icon-inactive-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.primary-navigation-tab.with-label-text.active.focus.label-text.color (Focused / Label text) $with-label-text-active-focus-label-text-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.with-label-text.active.hover.label-text.color (Hovered / Label text) $with-label-text-active-hover-label-text-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.with-label-text.active.label-text.color (Enabled / Label text) $with-label-text-active-label-text-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.with-label-text.active.pressed.label-text.color (Pressed (ripple) / Label text) $with-label-text-active-pressed-label-text-color: md-sys-color.$primary; /// md.comp.primary-navigation-tab.with-label-text.inactive.focus.label-text.color (Focused / Label text) $with-label-text-inactive-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.primary-navigation-tab.with-label-text.inactive.hover.label-text.color (Hovered / Label text) $with-label-text-inactive-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.primary-navigation-tab.with-label-text.inactive.label-text.color (Enabled / Label text) $with-label-text-inactive-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.primary-navigation-tab.with-label-text.inactive.pressed.label-text.color (Pressed (ripple) / Label text) $with-label-text-inactive-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.primary-navigation-tab.with-label-text.label-text.font (Enabled / Label text) $with-label-text-label-text-font: md-sys-typescale.$title-small-font; /// md.comp.primary-navigation-tab.with-label-text.label-text.line-height (Enabled / Label text) $with-label-text-label-text-line-height: md-sys-typescale.$title-small-line-height; /// md.comp.primary-navigation-tab.with-label-text.label-text.size (Enabled / Label text) $with-label-text-label-text-size: md-sys-typescale.$title-small-size; /// md.comp.primary-navigation-tab.with-label-text.label-text.tracking (Enabled / Label text) $with-label-text-label-text-tracking: md-sys-typescale.$title-small-tracking; /// md.comp.primary-navigation-tab.with-label-text.label-text.weight (Enabled / Label text) $with-label-text-label-text-weight: md-sys-typescale.$title-small-weight; /// md.comp.primary-navigation-tab.with-label-text.label-text.type (Enabled / Label text) @mixin with-label-text-label-text-type { font-family: $with-label-text-label-text-font; font-size: $with-label-text-label-text-size; font-weight: $with-label-text-label-text-weight; letter-spacing: $with-label-text-label-text-tracking; line-height: $with-label-text-label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-progress-indicator-circular.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.comp.progress-indicator.circular.active-indicator.thickness (Circular - baseline) $active-indicator-thickness: 4px; /// md.comp.progress-indicator.circular.active-indicator.wave.amplitude (Circular - baseline) $active-indicator-wave-amplitude: 1.6px; /// md.comp.progress-indicator.circular.active-indicator.wave.wavelength (Circular - baseline) $active-indicator-wave-wavelength: 15px; /// md.comp.progress-indicator.circular.size (Circular - baseline) $size: 40px; /// md.comp.progress-indicator.circular.thick.active-indicator.thickness ([Deprecated] Circular - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-active-indicator-thickness: 8px; /// md.comp.progress-indicator.circular.thick.size ([Deprecated] Circular - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-size: 52px; /// md.comp.progress-indicator.circular.thick.track-active-indicator-space ([Deprecated] Circular - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-track-active-indicator-space: 4px; /// md.comp.progress-indicator.circular.thick.track.thickness ([Deprecated] Circular - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-track-thickness: 8px; /// md.comp.progress-indicator.circular.track-active-indicator-space (Circular - baseline) $track-active-indicator-space: 4px; /// md.comp.progress-indicator.circular.track.thickness (Circular - baseline) $track-thickness: 4px; /// md.comp.progress-indicator.circular.with-wave.size (Circular - baseline) $with-wave-size: 48px; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-progress-indicator-linear.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.comp.progress-indicator.linear.active-indicator.thickness (Linear - baseline) $active-indicator-thickness: 4px; /// md.comp.progress-indicator.linear.active-indicator.wave.amplitude (Linear - baseline) $active-indicator-wave-amplitude: 3px; /// md.comp.progress-indicator.linear.active-indicator.wave.wavelength (Linear - baseline) $active-indicator-wave-wavelength: 40px; /// md.comp.progress-indicator.linear.height (Linear - baseline) $height: 4px; /// md.comp.progress-indicator.linear.indeterminate.active-indicator.wave.wavelength (Linear - baseline) $indeterminate-active-indicator-wave-wavelength: 20px; /// md.comp.progress-indicator.linear.stop-indicator.size (Linear - baseline) $stop-indicator-size: 4px; /// md.comp.progress-indicator.linear.stop-indicator.trailing-space (Linear - baseline) $stop-indicator-trailing-space: 0px; /// md.comp.progress-indicator.linear.thick.active-indicator.thickness ([Deprecated] Linear - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-active-indicator-thickness: 8px; /// md.comp.progress-indicator.linear.thick.height ([Deprecated] Linear - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-height: 8px; /// md.comp.progress-indicator.linear.thick.stop-indicator.size ([Deprecated] Linear - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-stop-indicator-size: 4px; /// md.comp.progress-indicator.linear.thick.stop-indicator.trailing-space ([Deprecated] Linear - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-stop-indicator-trailing-space: 2px; /// md.comp.progress-indicator.linear.thick.track-active-indicator-space ([Deprecated] Linear - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-track-active-indicator-space: 4px; /// md.comp.progress-indicator.linear.thick.track.thickness ([Deprecated] Linear - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-track-thickness: 8px; /// md.comp.progress-indicator.linear.thick.with-wave.height ([Deprecated] Linear - thick) /// /// @deprecated No longer tokenized as a variant, but rather a sample configuration in code $thick-with-wave-height: 14px; /// md.comp.progress-indicator.linear.track-active-indicator-space (Linear - baseline) $track-active-indicator-space: 4px; /// md.comp.progress-indicator.linear.track.thickness (Linear - baseline) $track-thickness: 4px; /// md.comp.progress-indicator.linear.with-wave.height (Linear - baseline) $with-wave-height: 10px; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-progress-indicator.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; /// md.comp.progress-indicator.active-indicator-track-space ([Deprecated] Enabled / [Deprecated] Spacing) /// /// @deprecated Token is deprecated. $active-indicator-track-space: 4px; /// md.comp.progress-indicator.active-indicator.thickness ([Deprecated] Enabled / [Deprecated] Active Indicator) /// /// @deprecated Token is deprecated. $active-indicator-thickness: 4px; /// md.comp.progress-indicator.stop-indicator.size ([Deprecated] Enabled / [Deprecated] Stop indicator) /// /// @deprecated Token is deprecated. $stop-indicator-size: 4px; /// md.comp.progress-indicator.track.thickness ([Deprecated] Enabled / [Deprecated] Track) /// /// @deprecated Token is deprecated. $track-thickness: 4px; /// md.comp.progress-indicator.active-indicator.color (Color) $active-indicator-color: md-sys-color.$primary; /// md.comp.progress-indicator.active-indicator.shape (Shape) $active-indicator-shape: md-sys-shape.$corner-full; /// md.comp.progress-indicator.stop-indicator.color (Color) $stop-indicator-color: md-sys-color.$primary; /// md.comp.progress-indicator.stop-indicator.shape (Shape) $stop-indicator-shape: md-sys-shape.$corner-full; /// md.comp.progress-indicator.track.color (Color) $track-color: md-sys-color.$secondary-container; /// md.comp.progress-indicator.track.shape (Shape) $track-shape: md-sys-shape.$corner-full; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-radio-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-state'; /// md.comp.radio-button.disabled.selected.icon.opacity (Disabled / Icon) $disabled-selected-icon-opacity: 0.38; /// md.comp.radio-button.disabled.unselected.icon.opacity (Disabled / Icon) $disabled-unselected-icon-opacity: 0.38; /// md.comp.radio-button.icon.size (Enabled / Icon) $icon-size: 20px; /// md.comp.radio-button.state-layer.size (Enabled / State layer) $state-layer-size: 40px; /// md.comp.radio-button.disabled.selected.icon.color (Disabled / Icon) $disabled-selected-icon-color: md-sys-color.$on-surface; /// md.comp.radio-button.disabled.unselected.icon.color (Disabled / Icon) $disabled-unselected-icon-color: md-sys-color.$on-surface; /// md.comp.radio-button.selected.focus.icon.color (Focused / Icon) $selected-focus-icon-color: md-sys-color.$primary; /// md.comp.radio-button.selected.focus.state-layer.color (Focused / State layer) $selected-focus-state-layer-color: md-sys-color.$primary; /// md.comp.radio-button.selected.focus.state-layer.opacity (Focused / State layer) $selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.radio-button.selected.hover.icon.color (Hovered / Icon) $selected-hover-icon-color: md-sys-color.$primary; /// md.comp.radio-button.selected.hover.state-layer.color (Hovered / State layer) $selected-hover-state-layer-color: md-sys-color.$primary; /// md.comp.radio-button.selected.hover.state-layer.opacity (Hovered / State layer) $selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.radio-button.selected.icon.color (Enabled / Icon) $selected-icon-color: md-sys-color.$primary; /// md.comp.radio-button.selected.pressed.icon.color (Pressed (ripple) / Icon) $selected-pressed-icon-color: md-sys-color.$primary; /// md.comp.radio-button.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $selected-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.radio-button.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer) $selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.radio-button.unselected.focus.icon.color (Focused / Icon) $unselected-focus-icon-color: md-sys-color.$on-surface; /// md.comp.radio-button.unselected.focus.state-layer.color (Focused / State layer) $unselected-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.radio-button.unselected.focus.state-layer.opacity (Focused / State layer) $unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.radio-button.unselected.hover.icon.color (Hovered / Icon) $unselected-hover-icon-color: md-sys-color.$on-surface; /// md.comp.radio-button.unselected.hover.state-layer.color (Hovered / State layer) $unselected-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.radio-button.unselected.hover.state-layer.opacity (Hovered / State layer) $unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.radio-button.unselected.icon.color (Enabled / Icon) $unselected-icon-color: md-sys-color.$on-surface-variant; /// md.comp.radio-button.unselected.pressed.icon.color (Pressed (ripple) / Icon) $unselected-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.radio-button.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $unselected-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.radio-button.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer) $unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-rich-tooltip.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.rich-tooltip.action.focus.label-text.color (Focused / Label text) $action-focus-label-text-color: md-sys-color.$primary; /// md.comp.rich-tooltip.action.focus.state-layer.color (Focused / State layer) $action-focus-state-layer-color: md-sys-color.$primary; /// md.comp.rich-tooltip.action.focus.state-layer.opacity (Focused / State layer) $action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.rich-tooltip.action.hover.label-text.color (Hovered / Label text) $action-hover-label-text-color: md-sys-color.$primary; /// md.comp.rich-tooltip.action.hover.state-layer.color (Hovered / State layer) $action-hover-state-layer-color: md-sys-color.$primary; /// md.comp.rich-tooltip.action.hover.state-layer.opacity (Hovered / State layer) $action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.rich-tooltip.action.label-text.color (Enabled / Label text) $action-label-text-color: md-sys-color.$primary; /// md.comp.rich-tooltip.action.label-text.font (Enabled / Label text) $action-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.rich-tooltip.action.label-text.line-height (Enabled / Label text) $action-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.rich-tooltip.action.label-text.size (Enabled / Label text) $action-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.rich-tooltip.action.label-text.tracking (Enabled / Label text) $action-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.rich-tooltip.action.label-text.weight (Enabled / Label text) $action-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.rich-tooltip.action.pressed.label-text.color (Pressed (ripple) / Label text) $action-pressed-label-text-color: md-sys-color.$primary; /// md.comp.rich-tooltip.action.pressed.state-layer.color (Pressed (ripple) / State layer) $action-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.rich-tooltip.action.pressed.state-layer.opacity (Pressed (ripple) / State layer) $action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.rich-tooltip.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container; /// md.comp.rich-tooltip.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level2; /// md.comp.rich-tooltip.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.rich-tooltip.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-medium; /// md.comp.rich-tooltip.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.rich-tooltip.subhead.color (Enabled / Subhead) $subhead-color: md-sys-color.$on-surface-variant; /// md.comp.rich-tooltip.subhead.font (Enabled / Subhead) $subhead-font: md-sys-typescale.$title-small-font; /// md.comp.rich-tooltip.subhead.line-height (Enabled / Subhead) $subhead-line-height: md-sys-typescale.$title-small-line-height; /// md.comp.rich-tooltip.subhead.size (Enabled / Subhead) $subhead-size: md-sys-typescale.$title-small-size; /// md.comp.rich-tooltip.subhead.tracking (Enabled / Subhead) $subhead-tracking: md-sys-typescale.$title-small-tracking; /// md.comp.rich-tooltip.subhead.weight (Enabled / Subhead) $subhead-weight: md-sys-typescale.$title-small-weight; /// md.comp.rich-tooltip.supporting-text.color (Enabled / Supporting text) $supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.rich-tooltip.supporting-text.font (Enabled / Supporting text) $supporting-text-font: md-sys-typescale.$body-medium-font; /// md.comp.rich-tooltip.supporting-text.line-height (Enabled / Supporting text) $supporting-text-line-height: md-sys-typescale.$body-medium-line-height; /// md.comp.rich-tooltip.supporting-text.size (Enabled / Supporting text) $supporting-text-size: md-sys-typescale.$body-medium-size; /// md.comp.rich-tooltip.supporting-text.tracking (Enabled / Supporting text) $supporting-text-tracking: md-sys-typescale.$body-medium-tracking; /// md.comp.rich-tooltip.supporting-text.weight (Enabled / Supporting text) $supporting-text-weight: md-sys-typescale.$body-medium-weight; /// md.comp.rich-tooltip.action.label-text.type (Enabled / Label text) @mixin action-label-text-type { font-family: $action-label-text-font; font-size: $action-label-text-size; font-weight: $action-label-text-weight; letter-spacing: $action-label-text-tracking; line-height: $action-label-text-line-height; } /// md.comp.rich-tooltip.subhead.type (Enabled / Subhead) @mixin subhead-type { font-family: $subhead-font; font-size: $subhead-size; font-weight: $subhead-weight; letter-spacing: $subhead-tracking; line-height: $subhead-line-height; } /// md.comp.rich-tooltip.supporting-text.type (Enabled / Supporting text) @mixin supporting-text-type { font-family: $supporting-text-font; font-size: $supporting-text-size; font-weight: $supporting-text-weight; letter-spacing: $supporting-text-tracking; line-height: $supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-scrim.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; /// md.comp.scrim.container.opacity $container-opacity: 0.32; /// md.comp.scrim.container.color $container-color: md-sys-color.$scrim; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-search-bar.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.search-bar.avatar.size (Enabled / Avatar) $avatar-size: 30px; /// md.comp.search-bar.container.height (Enabled / Container) $container-height: 56px; /// md.comp.search-bar.avatar.shape (Enabled / Avatar) $avatar-shape: md-sys-shape.$corner-full; /// md.comp.search-bar.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.search-bar.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.search-bar.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.search-bar.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.search-bar.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.search-bar.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.search-bar.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.search-bar.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.search-bar.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.search-bar.hover.supporting-text.color (Hovered / Supporting text) $hover-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.search-bar.input-text.color (Enabled / Input text) $input-text-color: md-sys-color.$on-surface; /// md.comp.search-bar.input-text.font (Enabled / Input text) $input-text-font: md-sys-typescale.$body-large-font; /// md.comp.search-bar.input-text.line-height (Enabled / Input text) $input-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.search-bar.input-text.size (Enabled / Input text) $input-text-size: md-sys-typescale.$body-large-size; /// md.comp.search-bar.input-text.tracking (Enabled / Input text) $input-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.search-bar.input-text.weight (Enabled / Input text) $input-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.search-bar.leading-icon.color (Enabled / Leading icon) $leading-icon-color: md-sys-color.$on-surface; /// md.comp.search-bar.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.search-bar.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.search-bar.pressed.supporting-text.color (Pressed (ripple) / Supporting text) $pressed-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.search-bar.supporting-text.color (Enabled / Supporting text) $supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.search-bar.supporting-text.font (Enabled / Supporting text) $supporting-text-font: md-sys-typescale.$body-large-font; /// md.comp.search-bar.supporting-text.line-height (Enabled / Supporting text) $supporting-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.search-bar.supporting-text.size (Enabled / Supporting text) $supporting-text-size: md-sys-typescale.$body-large-size; /// md.comp.search-bar.supporting-text.tracking (Enabled / Supporting text) $supporting-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.search-bar.supporting-text.weight (Enabled / Supporting text) $supporting-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.search-bar.trailing-icon.color (Enabled / Trailing icon) $trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.search-bar.input-text.type (Enabled / Input text) @mixin input-text-type { font-family: $input-text-font; font-size: $input-text-size; font-weight: $input-text-weight; letter-spacing: $input-text-tracking; line-height: $input-text-line-height; } /// md.comp.search-bar.supporting-text.type (Enabled / Supporting text) @mixin supporting-text-type { font-family: $supporting-text-font; font-size: $supporting-text-size; font-weight: $supporting-text-weight; letter-spacing: $supporting-text-tracking; line-height: $supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-search-view.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.search-view.docked.header.container.height (Enabled / Container) $docked-header-container-height: 56px; /// md.comp.search-view.full-screen.header.container.height (Enabled / Container) $full-screen-header-container-height: 72px; /// md.comp.search-view.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.search-view.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.search-view.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.search-view.divider.color (Enabled / Divider) $divider-color: md-sys-color.$outline; /// md.comp.search-view.docked.container.shape (Enabled / Container) $docked-container-shape: md-sys-shape.$corner-extra-large; /// md.comp.search-view.full-screen.container.shape (Enabled / Container) $full-screen-container-shape: md-sys-shape.$corner-none; /// md.comp.search-view.header.input-text.color (Enabled / Input text) $header-input-text-color: md-sys-color.$on-surface; /// md.comp.search-view.header.input-text.font (Enabled / Input text) $header-input-text-font: md-sys-typescale.$body-large-font; /// md.comp.search-view.header.input-text.line-height (Enabled / Input text) $header-input-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.search-view.header.input-text.size (Enabled / Input text) $header-input-text-size: md-sys-typescale.$body-large-size; /// md.comp.search-view.header.input-text.tracking (Enabled / Input text) $header-input-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.search-view.header.input-text.weight (Enabled / Input text) $header-input-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.search-view.header.leading-icon.color (Enabled / Leading icon) $header-leading-icon-color: md-sys-color.$on-surface; /// md.comp.search-view.header.supporting-text.color (Enabled / Supporting text) $header-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.search-view.header.supporting-text.font (Enabled / Supporting text) $header-supporting-text-font: md-sys-typescale.$body-large-font; /// md.comp.search-view.header.supporting-text.line-height (Enabled / Supporting text) $header-supporting-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.search-view.header.supporting-text.size (Enabled / Supporting text) $header-supporting-text-size: md-sys-typescale.$body-large-size; /// md.comp.search-view.header.supporting-text.tracking (Enabled / Supporting text) $header-supporting-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.search-view.header.supporting-text.weight (Enabled / Supporting text) $header-supporting-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.search-view.header.trailing-icon.color (Enabled / Trailing icon) $header-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.search-view.header.input-text.type (Enabled / Input text) @mixin header-input-text-type { font-family: $header-input-text-font; font-size: $header-input-text-size; font-weight: $header-input-text-weight; letter-spacing: $header-input-text-tracking; line-height: $header-input-text-line-height; } /// md.comp.search-view.header.supporting-text.type (Enabled / Supporting text) @mixin header-supporting-text-type { font-family: $header-supporting-text-font; font-size: $header-supporting-text-size; font-weight: $header-supporting-text-weight; letter-spacing: $header-supporting-text-tracking; line-height: $header-supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-secondary-navigation-tab.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.secondary-navigation-tab.active-indicator.height (Enabled / Active indicator) $active-indicator-height: 2px; /// md.comp.secondary-navigation-tab.container.height (Enabled / Container) $container-height: 48px; /// md.comp.secondary-navigation-tab.divider.height (Enabled / Divider) /// /// @deprecated Please use standalone divider component tokens instead $divider-height: 1px; /// md.comp.secondary-navigation-tab.with-icon.icon.size (Enabled / Icon) $with-icon-icon-size: 24px; /// md.comp.secondary-navigation-tab.active-indicator.color (Enabled / Active indicator) $active-indicator-color: md-sys-color.$primary; /// md.comp.secondary-navigation-tab.active.label-text.color (Enabled / Label text) $active-label-text-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.container.color (Enabled / Container) $container-color: md-sys-color.$surface; /// md.comp.secondary-navigation-tab.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.secondary-navigation-tab.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.secondary-navigation-tab.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.secondary-navigation-tab.divider.color (Enabled / Divider) /// /// @deprecated Please use standalone divider component tokens instead $divider-color: md-sys-color.$surface-variant; /// md.comp.secondary-navigation-tab.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.secondary-navigation-tab.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset; /// md.comp.secondary-navigation-tab.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.secondary-navigation-tab.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.secondary-navigation-tab.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.secondary-navigation-tab.inactive.label-text.color (Enabled / Label text) $inactive-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.secondary-navigation-tab.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$title-small-font; /// md.comp.secondary-navigation-tab.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$title-small-line-height; /// md.comp.secondary-navigation-tab.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$title-small-size; /// md.comp.secondary-navigation-tab.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$title-small-tracking; /// md.comp.secondary-navigation-tab.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$title-small-weight; /// md.comp.secondary-navigation-tab.pressed.label-text.color (Pressed (ripple) / Label text) $pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.secondary-navigation-tab.with-icon.active.icon.color (Enabled / Icon) $with-icon-active-icon-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.with-icon.focus.icon.color (Focused / Icon) $with-icon-focus-icon-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.with-icon.hover.icon.color (Hovered / Icon) $with-icon-hover-icon-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.with-icon.inactive.icon.color (Enabled / Icon) $with-icon-inactive-icon-color: md-sys-color.$on-surface-variant; /// md.comp.secondary-navigation-tab.with-icon.pressed.icon.color (Pressed (ripple) / Icon) $with-icon-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.secondary-navigation-tab.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-sheet-bottom.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state-focus-indicator'; /// md.comp.sheet.bottom.docked.drag-handle.height (Enabled / Drag handle) $docked-drag-handle-height: 4px; /// md.comp.sheet.bottom.docked.drag-handle.opacity (Enabled / Drag handle) /// /// @deprecated Deprecated per b/278783477 $docked-drag-handle-opacity: 0.4; /// md.comp.sheet.bottom.docked.drag-handle.width (Enabled / Drag handle) $docked-drag-handle-width: 32px; /// md.comp.sheet.bottom.docked.container.color (Enabled / Container) $docked-container-color: md-sys-color.$surface-container-low; /// md.comp.sheet.bottom.docked.container.shape (Enabled / Container) $docked-container-shape: md-sys-shape.$corner-extra-large-top; /// md.comp.sheet.bottom.docked.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $docked-container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.sheet.bottom.docked.drag-handle.color (Enabled / Drag handle) $docked-drag-handle-color: md-sys-color.$on-surface-variant; /// md.comp.sheet.bottom.docked.minimized.container.shape (Enabled / Container) $docked-minimized-container-shape: md-sys-shape.$corner-none; /// md.comp.sheet.bottom.docked.modal.container.elevation (Enabled / Container) $docked-modal-container-elevation: md-sys-elevation.$level1; /// md.comp.sheet.bottom.docked.standard.container.elevation (Enabled / Container) $docked-standard-container-elevation: md-sys-elevation.$level1; /// md.comp.sheet.bottom.focus.indicator.color (Enabled / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.sheet.bottom.focus.indicator.outline.offset (Enabled / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.sheet.bottom.focus.indicator.thickness (Enabled / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-sheet-floating.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; /// md.comp.sheet.floating.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-low; /// md.comp.sheet.floating.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level1; /// md.comp.sheet.floating.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.sheet.floating.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-sheet-side.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.sheet.side.docked.container.height (Enabled / Container) $docked-container-height: 100%; /// md.comp.sheet.side.docked.container.width (Enabled / Container) $docked-container-width: 256px; /// md.comp.sheet.side.detached.container.shape (Enabled / Container) $detached-container-shape: md-sys-shape.$corner-large; /// md.comp.sheet.side.docked.action.focus.label-text.color (Focused / Label text) $docked-action-focus-label-text-color: md-sys-color.$primary; /// md.comp.sheet.side.docked.action.focus.state-layer.color (Focused / State layer) $docked-action-focus-state-layer-color: md-sys-color.$primary; /// md.comp.sheet.side.docked.action.focus.state-layer.opacity (Focused / State layer) $docked-action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.sheet.side.docked.action.hover.label-text.color (Hovered / Label text) $docked-action-hover-label-text-color: md-sys-color.$primary; /// md.comp.sheet.side.docked.action.hover.state-layer.color (Hovered / State layer) $docked-action-hover-state-layer-color: md-sys-color.$primary; /// md.comp.sheet.side.docked.action.hover.state-layer.opacity (Hovered / State layer) $docked-action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.sheet.side.docked.action.pressed.label-text.color (Pressed (ripple) / Label text) $docked-action-pressed-label-text-color: md-sys-color.$primary; /// md.comp.sheet.side.docked.action.pressed.state-layer.color (Pressed (ripple) / State layer) $docked-action-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.sheet.side.docked.action.pressed.state-layer.opacity (Pressed (ripple) / State layer) $docked-action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.sheet.side.docked.container.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Use “md.comp.sheet.side.docked.modal.container.color” or “md.comp.sheet.side.docked.standard.container.color” depending on intended configuration. $docked-container-color: md-sys-color.$surface; /// md.comp.sheet.side.docked.container.shape (Enabled / Container) $docked-container-shape: md-sys-shape.$corner-none; /// md.comp.sheet.side.docked.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $docked-container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.sheet.side.docked.divider.color (Enabled / Divider) $docked-divider-color: md-sys-color.$outline; /// md.comp.sheet.side.docked.focus.indicator.color (Focused / Focus indicator) $docked-focus-indicator-color: md-sys-color.$secondary; /// md.comp.sheet.side.docked.focus.indicator.outline.offset (Focused / Focus indicator) $docked-focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.sheet.side.docked.focus.indicator.thickness (Focused / Focus indicator) $docked-focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.sheet.side.docked.headline.color (Enabled / Headline) $docked-headline-color: md-sys-color.$on-surface-variant; /// md.comp.sheet.side.docked.headline.font (Enabled / Headline) $docked-headline-font: md-sys-typescale.$title-large-font; /// md.comp.sheet.side.docked.headline.line-height (Enabled / Headline) $docked-headline-line-height: md-sys-typescale.$title-large-line-height; /// md.comp.sheet.side.docked.headline.size (Enabled / Headline) $docked-headline-size: md-sys-typescale.$title-large-size; /// md.comp.sheet.side.docked.headline.tracking (Enabled / Headline) $docked-headline-tracking: md-sys-typescale.$title-large-tracking; /// md.comp.sheet.side.docked.headline.weight (Enabled / Headline) $docked-headline-weight: md-sys-typescale.$title-large-weight; /// md.comp.sheet.side.docked.modal.container.color (Enabled / Container) $docked-modal-container-color: md-sys-color.$surface-container-low; /// md.comp.sheet.side.docked.modal.container.elevation (Enabled / Container) $docked-modal-container-elevation: md-sys-elevation.$level1; /// md.comp.sheet.side.docked.modal.container.shape (Enabled / Container) $docked-modal-container-shape: md-sys-shape.$corner-large-start; /// md.comp.sheet.side.docked.standard.container.color (Enabled / Container) $docked-standard-container-color: md-sys-color.$surface; /// md.comp.sheet.side.docked.standard.container.elevation (Enabled / Container) $docked-standard-container-elevation: md-sys-elevation.$level0; /// md.comp.sheet.side.docked.headline.type (Enabled / Headline) @mixin docked-headline-type { font-family: $docked-headline-font; font-size: $docked-headline-size; font-weight: $docked-headline-weight; letter-spacing: $docked-headline-tracking; line-height: $docked-headline-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-slider-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.comp.slider.large.active.handle.height (Handle) $active-handle-height: 68px; /// md.comp.slider.large.active.track.height (Active track) $active-track-height: 56px; /// md.comp.slider.large.active.track.shape.leading (Active track) $active-track-shape-leading: 16px; /// md.comp.slider.large.icon.padding (Icon) $icon-padding: 6px; /// md.comp.slider.large.icon.size (Icon) $icon-size: 24px; /// md.comp.slider.large.inactive.track.height (Inactive track) $inactive-track-height: 56px; /// md.comp.slider.large.inactive.track.shape.trailing (Inactive track) $inactive-track-shape-trailing: 16px; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-slider-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.comp.slider.medium.active.handle.height (Handle) $active-handle-height: 44px; /// md.comp.slider.medium.active.track.height (Active track) $active-track-height: 40px; /// md.comp.slider.medium.active.track.shape.leading (Active track) $active-track-shape-leading: 12px; /// md.comp.slider.medium.icon.padding (Icon) $icon-padding: 6px; /// md.comp.slider.medium.icon.size (Icon) $icon-size: 24px; /// md.comp.slider.medium.inactive.track.height (Inactive track) $inactive-track-height: 40px; /// md.comp.slider.medium.inactive.track.shape.trailing (Inactive track) $inactive-track-shape-trailing: 12px; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-slider-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.comp.slider.small.active.handle.height (Handle) $active-handle-height: 44px; /// md.comp.slider.small.active.track.height (Active track) $active-track-height: 24px; /// md.comp.slider.small.active.track.shape.leading (Active track) $active-track-shape-leading: 8px; /// md.comp.slider.small.inactive.track.height (Inactive track) $inactive-track-height: 24px; /// md.comp.slider.small.inactive.track.shape.trailing (Inactive track) $inactive-track-shape-trailing: 8px; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-slider-xlarge.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.comp.slider.xlarge.active.handle.height (Handle) $active-handle-height: 108px; /// md.comp.slider.xlarge.active.track.height (Active track) $active-track-height: 96px; /// md.comp.slider.xlarge.active.track.shape.leading (Active track) $active-track-shape-leading: 28px; /// md.comp.slider.xlarge.icon.padding (Icon) $icon-padding: 8px; /// md.comp.slider.xlarge.icon.size (Icon) $icon-size: 32px; /// md.comp.slider.xlarge.inactive.track.height (Inactive track) $inactive-track-height: 96px; /// md.comp.slider.xlarge.inactive.track.shape.trailing (Inactive track) $inactive-track-shape-trailing: 28px; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-slider-xsmall.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.comp.slider.xsmall.active.handle.height (Handle) $active-handle-height: 44px; /// md.comp.slider.xsmall.active.track.height (Active track) $active-track-height: 16px; /// md.comp.slider.xsmall.active.track.shape.leading (Active track) $active-track-shape-leading: 8px; /// md.comp.slider.xsmall.inactive.track.height (Inactive track) $inactive-track-height: 16px; /// md.comp.slider.xsmall.inactive.track.shape.trailing (Inactive track) $inactive-track-shape-trailing: 8px; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-slider.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.slider.active.container.opacity (Enabled / Container) /// /// @deprecated Deprecate per NTC update $active-container-opacity: 1; /// md.comp.slider.active.handle.height (Enabled / Handle) $active-handle-height: 44px; /// md.comp.slider.active.handle.leading-space (Enabled / Handle) $active-handle-leading-space: 6px; /// md.comp.slider.active.handle.padding (Enabled / Handle) $active-handle-padding: 6px; /// md.comp.slider.active.handle.trailing-space (Enabled / Handle) $active-handle-trailing-space: 6px; /// md.comp.slider.active.handle.width (Enabled / Handle) $active-handle-width: 4px; /// md.comp.slider.active.stop-indicator.container.opacity (Enabled / Container) $active-stop-indicator-container-opacity: 1; /// md.comp.slider.active.track.height (Enabled / Track) $active-track-height: 16px; /// md.comp.slider.active.track.inner-corner.corner-size (Enabled / Track) $active-track-inner-corner-corner-size: 0 2px 2px 0; /// md.comp.slider.disabled.active.track.opacity (Disabled / Track) $disabled-active-track-opacity: 0.38; /// md.comp.slider.disabled.handle.opacity (Disabled / Handle) $disabled-handle-opacity: 0.38; /// md.comp.slider.disabled.handle.width (Disabled / Handle) $disabled-handle-width: 4px; /// md.comp.slider.disabled.inactive.track.opacity (Disabled / Track) $disabled-inactive-track-opacity: 0.12; /// md.comp.slider.disabled.stop-indicator.container.opacity (Disabled / [Deprecated] Container) /// /// @deprecated Replacing with 2 tokens active and inactive stop indicator color $disabled-stop-indicator-container-opacity: 0.38; /// md.comp.slider.focus.handle.width (Focused / Handle) $focus-handle-width: 2px; /// md.comp.slider.handle.height (Enabled / Handle) $handle-height: 44px; /// md.comp.slider.handle.width (Enabled / Handle) $handle-width: 4px; /// md.comp.slider.hover.handle.width (Hovered / Handle) $hover-handle-width: 4px; /// md.comp.slider.inactive.container.opacity (Enabled / Container) /// /// @deprecated Deprecate per NTC update $inactive-container-opacity: 1; /// md.comp.slider.inactive.stop-indicator.container.opacity (Enabled / Container) $inactive-stop-indicator-container-opacity: 1; /// md.comp.slider.inactive.track.height (Enabled / Track) $inactive-track-height: 16px; /// md.comp.slider.label.container.height (Enabled / Container) /// /// @deprecated Deprecating per b/323475024 $label-container-height: 28px; /// md.comp.slider.pressed.handle.width (Pressed (ripple) / Handle) $pressed-handle-width: 2px; /// md.comp.slider.state-layer.size (Enabled / [Deprecated] State layer) /// /// @deprecated Deprecating per b/323475024 $state-layer-size: 40px; /// md.comp.slider.stop-indicator.size (Enabled / Stop indicator) $stop-indicator-size: 4px; /// md.comp.slider.stop-indicator.trailing-space (Enabled / Stop indicator) $stop-indicator-trailing-space: 4px; /// md.comp.slider.value-indicator.active.bottom-space (Pressed (ripple) / Value indicator) $value-indicator-active-bottom-space: 12px; /// md.comp.slider.with-overlap.handle.outline.width (Enabled / Handle) /// /// @deprecated Deprecating per b/323475024 $with-overlap-handle-outline-width: 1px; /// md.comp.slider.with-tick-marks.active.container.opacity (Enabled / Container) /// /// @deprecated Deprecated for less confusing token name $with-tick-marks-active-container-opacity: 0.38; /// md.comp.slider.with-tick-marks.container.size (Enabled / Container) /// /// @deprecated Deprecating per b/323475024 $with-tick-marks-container-size: 2px; /// md.comp.slider.with-tick-marks.disabled.container.opacity (Disabled / [Deprecated] Container) /// /// @deprecated Deprecated for new token with less confusion $with-tick-marks-disabled-container-opacity: 0.38; /// md.comp.slider.with-tick-marks.inactive.container.opacity (Enabled / Container) /// /// @deprecated Deprecated for less confusing token name $with-tick-marks-inactive-container-opacity: 0.38; /// md.comp.slider.active.handle.shape (Enabled / Handle) $active-handle-shape: md-sys-shape.$corner-full; /// md.comp.slider.active.stop-indicator.container.color (Enabled / Container) $active-stop-indicator-container-color: md-sys-color.$on-primary; /// md.comp.slider.active.track.color (Enabled / Track) $active-track-color: md-sys-color.$primary; /// md.comp.slider.active.track.outer-corner.corner-size (Enabled / Track) $active-track-outer-corner-corner-size: md-sys-shape.$corner-full; /// md.comp.slider.active.track.shape (Enabled / Track) $active-track-shape: md-sys-shape.$corner-full; /// md.comp.slider.disabled.active.stop-indicator.container.color (Disabled / Stop) $disabled-active-stop-indicator-container-color: md-sys-color.$inverse-on-surface; /// md.comp.slider.disabled.active.track.color (Disabled / Track) $disabled-active-track-color: md-sys-color.$on-surface; /// md.comp.slider.disabled.handle.color (Disabled / Handle) $disabled-handle-color: md-sys-color.$on-surface; /// md.comp.slider.disabled.handle.elevation (Disabled / Handle) /// /// @deprecated Deprecating per b/323475024 $disabled-handle-elevation: md-sys-elevation.$level0; /// md.comp.slider.disabled.inactive.stop-indicator.container.color (Disabled / Stop) $disabled-inactive-stop-indicator-container-color: md-sys-color.$on-surface; /// md.comp.slider.disabled.inactive.track.color (Disabled / Track) $disabled-inactive-track-color: md-sys-color.$on-surface; /// md.comp.slider.disabled.stop-indicator.color (Disabled / Stop) /// /// @deprecated Replacing with: Slider disabled inactive stop indicator container color $disabled-stop-indicator-color: md-sys-color.$on-surface; /// md.comp.slider.disabled.stop-indicator.color-selected (Disabled / Stop) /// /// @deprecated Replacing with: Slider disabled active stop indicator container color $disabled-stop-indicator-color-selected: md-sys-color.$inverse-on-surface; /// md.comp.slider.disabled.stop-indicator.container.color (Disabled / [Deprecated] Container) /// /// @deprecated Replacing with 2 tokens active and inactive stop indicator color $disabled-stop-indicator-container-color: md-sys-color.$on-surface; /// md.comp.slider.focus.active.track.color (Focused / Track) $focus-active-track-color: md-sys-color.$primary; /// md.comp.slider.focus.handle.color (Focused / Handle) /// /// @deprecated Deprecating per b/323475024 $focus-handle-color: md-sys-color.$primary; /// md.comp.slider.focus.inactive.track.color (Focused / Track) $focus-inactive-track-color: md-sys-color.$secondary-container; /// md.comp.slider.focus.state-layer.color (Focused / [Deprecated] State layer) /// /// @deprecated Deprecating per b/323475024 $focus-state-layer-color: md-sys-color.$primary; /// md.comp.slider.focus.state-layer.opacity (Focused / [Deprecated] State layer) /// /// @deprecated Deprecating per b/323475024 $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.slider.focus.stop.color (Focused / [Deprecated] Stop) /// /// @deprecated No longer needed $focus-stop-color: md-sys-color.$primary; /// md.comp.slider.handle.color (Enabled / Handle) $handle-color: md-sys-color.$primary; /// md.comp.slider.handle.elevation (Enabled / Handle) /// /// @deprecated Deprecating per b/323475024 $handle-elevation: md-sys-elevation.$level1; /// md.comp.slider.handle.shadow-color (Enabled / Handle) /// /// @deprecated Deprecating per b/323475024 $handle-shadow-color: md-sys-color.$shadow; /// md.comp.slider.handle.shape (Enabled / Handle) $handle-shape: md-sys-shape.$corner-full; /// md.comp.slider.hover.handle.color (Hovered / Handle) /// /// @deprecated Deprecate per NTC update $hover-handle-color: md-sys-color.$primary; /// md.comp.slider.hover.state-layer.color (Hovered / [Deprecated] State layer) /// /// @deprecated Deprecating per b/323475024 $hover-state-layer-color: md-sys-color.$primary; /// md.comp.slider.hover.state-layer.opacity (Hovered / [Deprecated] State layer) /// /// @deprecated Deprecating per b/323475024 $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.slider.hover.stop.color (Hovered / [Deprecated] Stop) /// /// @deprecated Deprecate per NTC update $hover-stop-color: md-sys-color.$primary; /// md.comp.slider.inactive.stop-indicator.container.color (Enabled / Container) $inactive-stop-indicator-container-color: md-sys-color.$on-secondary-container; /// md.comp.slider.inactive.track.color (Enabled / Track) $inactive-track-color: md-sys-color.$secondary-container; /// md.comp.slider.inactive.track.shape (Enabled / Track) $inactive-track-shape: md-sys-shape.$corner-full; /// md.comp.slider.label.container.color (Enabled / Container) /// /// @deprecated Deprecate per NTC update $label-container-color: md-sys-color.$primary; /// md.comp.slider.label.container.elevation (Enabled / Container) /// /// @deprecated Deprecating per b/323475024 $label-container-elevation: md-sys-elevation.$level0; /// md.comp.slider.label.label-text.color (Enabled / [Deprecated] Label text) /// /// @deprecated No longer needed $label-label-text-color: md-sys-color.$inverse-on-surface; /// md.comp.slider.label.label-text.font (Enabled / [Deprecated] Label text) /// /// @deprecated Deprecating per b/323475024 $label-label-text-font: md-sys-typescale.$label-medium-font; /// md.comp.slider.label.label-text.font-size (Enabled / [Deprecated] Label text) /// /// @deprecated For consistency, we have standardized on `size` instead of `font-size`. Replace usage with the suggested token. $label-label-text-font-size: md-sys-typescale.$label-medium-size; /// md.comp.slider.label.label-text.line-height (Enabled / [Deprecated] Label text) /// /// @deprecated Deprecating per b/323475024 $label-label-text-line-height: md-sys-typescale.$label-medium-line-height; /// md.comp.slider.label.label-text.size (Enabled / [Deprecated] Label text) /// /// @deprecated Deprecating per b/323475024 $label-label-text-size: md-sys-typescale.$label-medium-size; /// md.comp.slider.label.label-text.tracking (Enabled / [Deprecated] Label text) /// /// @deprecated Deprecating per b/323475024 $label-label-text-tracking: md-sys-typescale.$label-medium-tracking; /// md.comp.slider.label.label-text.weight (Enabled / [Deprecated] Label text) /// /// @deprecated Deprecating per b/323475024 $label-label-text-weight: md-sys-typescale.$label-medium-weight; /// md.comp.slider.pressed.active.track.color (Pressed (ripple) / Track) $pressed-active-track-color: md-sys-color.$primary; /// md.comp.slider.pressed.handle.color (Pressed (ripple) / Handle) $pressed-handle-color: md-sys-color.$primary; /// md.comp.slider.pressed.inactive.track.color (Pressed (ripple) / Track) $pressed-inactive-track-color: md-sys-color.$secondary-container; /// md.comp.slider.pressed.state-layer.color (Pressed (ripple) / [Deprecated] State layer) /// /// @deprecated Deprecating per b/323475024 $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.slider.pressed.state-layer.opacity (Pressed (ripple) / [Deprecated] State layer) /// /// @deprecated Deprecating per b/323475024 $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.slider.pressed.stop.color (Pressed (ripple) / [Deprecated] Stop) /// /// @deprecated Deprecating per NTC update $pressed-stop-color: md-sys-color.$primary; /// md.comp.slider.slider-active-handle-color (Enabled / Handle) $slider-active-handle-color: md-sys-color.$primary; /// md.comp.slider.stop-indicator.color (Enabled / Stop indicator) $stop-indicator-color: md-sys-color.$on-secondary-container; /// md.comp.slider.stop-indicator.color-selected (Enabled / Stop indicator) $stop-indicator-color-selected: md-sys-color.$on-primary; /// md.comp.slider.stop-indicator.shape (Enabled / Stop indicator) $stop-indicator-shape: md-sys-shape.$corner-full; /// md.comp.slider.track.elevation (Enabled / Track) /// /// @deprecated Deprecating per b/323475024 $track-elevation: md-sys-elevation.$level0; /// md.comp.slider.value-indicator.container.color (Pressed (ripple) / Value indicator) $value-indicator-container-color: md-sys-color.$inverse-surface; /// md.comp.slider.value-indicator.label.label-text.color (Pressed (ripple) / Value indicator) $value-indicator-label-label-text-color: md-sys-color.$inverse-on-surface; /// md.comp.slider.value-indicator.label.label-text.font (Pressed (ripple) / Value indicator) $value-indicator-label-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.slider.value-indicator.label.label-text.line-height (Pressed (ripple) / Value indicator) $value-indicator-label-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.slider.value-indicator.label.label-text.size (Pressed (ripple) / Value indicator) $value-indicator-label-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.slider.value-indicator.label.label-text.tracking (Pressed (ripple) / Value indicator) $value-indicator-label-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.slider.value-indicator.label.label-text.weight (Pressed (ripple) / Value indicator) $value-indicator-label-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.slider.with-overlap.handle.outline.color (Enabled / Handle) /// /// @deprecated Deprecating per b/323475024 $with-overlap-handle-outline-color: md-sys-color.$on-primary; /// md.comp.slider.with-tick-marks.active.container.color (Enabled / Container) /// /// @deprecated Deprecated for less confusing token name $with-tick-marks-active-container-color: md-sys-color.$on-primary; /// md.comp.slider.with-tick-marks.container.shape (Enabled / Container) /// /// @deprecated Deprecating per b/323475024 $with-tick-marks-container-shape: md-sys-shape.$corner-full; /// md.comp.slider.with-tick-marks.disabled.container.color (Disabled / [Deprecated] Container) /// /// @deprecated Deprecated for new token with less confusion $with-tick-marks-disabled-container-color: md-sys-color.$on-surface; /// md.comp.slider.with-tick-marks.inactive.container.color (Enabled / Container) /// /// @deprecated Deprecated for less confusing token name $with-tick-marks-inactive-container-color: md-sys-color.$on-surface-variant; /// md.comp.slider.label.label-text.type (Enabled / [Deprecated] Subhead) /// /// @deprecated Deprecating per b/298282669 @mixin label-label-text-type { font-family: $label-label-text-font; font-size: $label-label-text-size; font-weight: $label-label-text-weight; letter-spacing: $label-label-text-tracking; line-height: $label-label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-snackbar.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.snackbar.icon.size (Enabled / Icon) $icon-size: 24px; /// md.comp.snackbar.with-single-line.container.height (Enabled / Container) $with-single-line-container-height: 48px; /// md.comp.snackbar.with-two-lines.container.height (Enabled / Container) $with-two-lines-container-height: 68px; /// md.comp.snackbar.action.focus.label-text.color (Focused / Label text) $action-focus-label-text-color: md-sys-color.$inverse-primary; /// md.comp.snackbar.action.focus.state-layer.color (Focused / State layer) $action-focus-state-layer-color: md-sys-color.$inverse-primary; /// md.comp.snackbar.action.focus.state-layer.opacity (Focused / State layer) $action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.snackbar.action.hover.label-text.color (Hovered / Label text) $action-hover-label-text-color: md-sys-color.$inverse-primary; /// md.comp.snackbar.action.hover.state-layer.color (Hovered / State layer) $action-hover-state-layer-color: md-sys-color.$inverse-primary; /// md.comp.snackbar.action.hover.state-layer.opacity (Hovered / State layer) $action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.snackbar.action.label-text.color (Enabled / Label text) $action-label-text-color: md-sys-color.$inverse-primary; /// md.comp.snackbar.action.label-text.font (Enabled / Label text) $action-label-text-font: md-sys-typescale.$label-large-font; /// md.comp.snackbar.action.label-text.line-height (Enabled / Label text) $action-label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.snackbar.action.label-text.size (Enabled / Label text) $action-label-text-size: md-sys-typescale.$label-large-size; /// md.comp.snackbar.action.label-text.tracking (Enabled / Label text) $action-label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.snackbar.action.label-text.weight (Enabled / Label text) $action-label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.snackbar.action.pressed.label-text.color (Pressed (ripple) / Label text) $action-pressed-label-text-color: md-sys-color.$inverse-primary; /// md.comp.snackbar.action.pressed.state-layer.color (Pressed (ripple) / State layer) $action-pressed-state-layer-color: md-sys-color.$inverse-primary; /// md.comp.snackbar.action.pressed.state-layer.opacity (Pressed (ripple) / State layer) $action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.snackbar.container.color (Enabled / Container) $container-color: md-sys-color.$inverse-surface; /// md.comp.snackbar.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.snackbar.container.shadow-color (Enabled / Container) $container-shadow-color: md-sys-color.$shadow; /// md.comp.snackbar.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-small; /// md.comp.snackbar.icon.color (Enabled / Icon) $icon-color: md-sys-color.$inverse-on-surface; /// md.comp.snackbar.icon.focus.icon.color (Focused / Icon) $icon-focus-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.snackbar.icon.focus.state-layer.color (Focused / State layer) $icon-focus-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.snackbar.icon.focus.state-layer.opacity (Focused / State layer) $icon-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.snackbar.icon.hover.icon.color (Hovered / Icon) $icon-hover-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.snackbar.icon.hover.state-layer.color (Hovered / State layer) $icon-hover-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.snackbar.icon.hover.state-layer.opacity (Hovered / State layer) $icon-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.snackbar.icon.pressed.icon.color (Pressed (ripple) / Icon) $icon-pressed-icon-color: md-sys-color.$inverse-on-surface; /// md.comp.snackbar.icon.pressed.state-layer.color (Pressed (ripple) / State layer) $icon-pressed-state-layer-color: md-sys-color.$inverse-on-surface; /// md.comp.snackbar.icon.pressed.state-layer.opacity (Pressed (ripple) / State layer) $icon-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.snackbar.supporting-text.color (Enabled / Supporting text) $supporting-text-color: md-sys-color.$inverse-on-surface; /// md.comp.snackbar.supporting-text.font (Enabled / Supporting text) $supporting-text-font: md-sys-typescale.$body-medium-font; /// md.comp.snackbar.supporting-text.line-height (Enabled / Supporting text) $supporting-text-line-height: md-sys-typescale.$body-medium-line-height; /// md.comp.snackbar.supporting-text.size (Enabled / Supporting text) $supporting-text-size: md-sys-typescale.$body-medium-size; /// md.comp.snackbar.supporting-text.tracking (Enabled / Supporting text) $supporting-text-tracking: md-sys-typescale.$body-medium-tracking; /// md.comp.snackbar.supporting-text.weight (Enabled / Supporting text) $supporting-text-weight: md-sys-typescale.$body-medium-weight; /// md.comp.snackbar.action.label-text.type (Enabled / Label text) @mixin action-label-text-type { font-family: $action-label-text-font; font-size: $action-label-text-size; font-weight: $action-label-text-weight; letter-spacing: $action-label-text-tracking; line-height: $action-label-text-line-height; } /// md.comp.snackbar.supporting-text.type (Enabled / Supporting text) @mixin supporting-text-type { font-family: $supporting-text-font; font-size: $supporting-text-size; font-weight: $supporting-text-weight; letter-spacing: $supporting-text-tracking; line-height: $supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-split-button-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.split-button.large.between-space $between-space: 2px; /// md.comp.split-button.large.container.height $container-height: 96px; /// md.comp.split-button.large.leading-button.leading-space $leading-button-leading-space: 48px; /// md.comp.split-button.large.leading-button.trailing-space $leading-button-trailing-space: 48px; /// md.comp.split-button.large.trailing-button.icon.size $trailing-button-icon-size: 38px; /// md.comp.split-button.large.trailing-button.inner-corner.selected.corner-size $trailing-button-inner-corner-selected-corner-size: 50%; /// md.comp.split-button.large.trailing-button.leading-space $trailing-button-leading-space: 29px; /// md.comp.split-button.large.trailing-button.trailing-space $trailing-button-trailing-space: 29px; /// md.comp.split-button.large.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.split-button.large.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-small; /// md.comp.split-button.large.inner-corner.hovered.corner-size $inner-corner-hovered-corner-size: md-sys-shape.$corner-value-large-increased; /// md.comp.split-button.large.inner-corner.pressed.corner-size $inner-corner-pressed-corner-size: md-sys-shape.$corner-value-large-increased; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-split-button-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.split-button.medium.between-space $between-space: 2px; /// md.comp.split-button.medium.container.height $container-height: 56px; /// md.comp.split-button.medium.leading-button.leading-space $leading-button-leading-space: 24px; /// md.comp.split-button.medium.leading-button.trailing-space $leading-button-trailing-space: 24px; /// md.comp.split-button.medium.trailing-button.icon.size $trailing-button-icon-size: 26px; /// md.comp.split-button.medium.trailing-button.inner-corner.selected.corner-size $trailing-button-inner-corner-selected-corner-size: 50%; /// md.comp.split-button.medium.trailing-button.leading-space $trailing-button-leading-space: 15px; /// md.comp.split-button.medium.trailing-button.trailing-space $trailing-button-trailing-space: 15px; /// md.comp.split-button.medium.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.split-button.medium.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-extra-small; /// md.comp.split-button.medium.inner-corner.hovered.corner-size $inner-corner-hovered-corner-size: md-sys-shape.$corner-value-medium; /// md.comp.split-button.medium.inner-corner.pressed.corner-size $inner-corner-pressed-corner-size: md-sys-shape.$corner-value-medium; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-split-button-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.split-button.small.between-space $between-space: 2px; /// md.comp.split-button.small.container.height $container-height: 40px; /// md.comp.split-button.small.leading-button.leading-space $leading-button-leading-space: 16px; /// md.comp.split-button.small.leading-button.trailing-space $leading-button-trailing-space: 12px; /// md.comp.split-button.small.trailing-button.icon.size $trailing-button-icon-size: 22px; /// md.comp.split-button.small.trailing-button.inner-corner.selected.corner-size $trailing-button-inner-corner-selected-corner-size: 50%; /// md.comp.split-button.small.trailing-button.leading-space $trailing-button-leading-space: 13px; /// md.comp.split-button.small.trailing-button.trailing-space $trailing-button-trailing-space: 13px; /// md.comp.split-button.small.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.split-button.small.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-extra-small; /// md.comp.split-button.small.inner-corner.hovered.corner-size $inner-corner-hovered-corner-size: md-sys-shape.$corner-value-medium; /// md.comp.split-button.small.inner-corner.pressed.corner-size $inner-corner-pressed-corner-size: md-sys-shape.$corner-value-medium; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-split-button-xlarge.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.split-button.xlarge.between-space $between-space: 2px; /// md.comp.split-button.xlarge.container.height $container-height: 136px; /// md.comp.split-button.xlarge.leading-button.leading-space $leading-button-leading-space: 64px; /// md.comp.split-button.xlarge.leading-button.trailing-space $leading-button-trailing-space: 64px; /// md.comp.split-button.xlarge.trailing-button.icon.size $trailing-button-icon-size: 50px; /// md.comp.split-button.xlarge.trailing-button.inner-corner.selected.corner-size $trailing-button-inner-corner-selected-corner-size: 50%; /// md.comp.split-button.xlarge.trailing-button.leading-space $trailing-button-leading-space: 43px; /// md.comp.split-button.xlarge.trailing-button.trailing-space $trailing-button-trailing-space: 43px; /// md.comp.split-button.xlarge.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.split-button.xlarge.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-medium; /// md.comp.split-button.xlarge.inner-corner.hovered.corner-size $inner-corner-hovered-corner-size: md-sys-shape.$corner-value-large-increased; /// md.comp.split-button.xlarge.inner-corner.pressed.corner-size $inner-corner-pressed-corner-size: md-sys-shape.$corner-value-large-increased; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-split-button-xsmall.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-shape'; /// md.comp.split-button.xsmall.between-space $between-space: 2px; /// md.comp.split-button.xsmall.container.height $container-height: 32px; /// md.comp.split-button.xsmall.leading-button.leading-space $leading-button-leading-space: 12px; /// md.comp.split-button.xsmall.leading-button.trailing-space $leading-button-trailing-space: 10px; /// md.comp.split-button.xsmall.outer-corner.corner-size $outer-corner-corner-size: 50%; /// md.comp.split-button.xsmall.trailing-button.icon.size $trailing-button-icon-size: 22px; /// md.comp.split-button.xsmall.trailing-button.inner-corner.selected.corner-size $trailing-button-inner-corner-selected-corner-size: 50%; /// md.comp.split-button.xsmall.trailing-button.leading-space $trailing-button-leading-space: 13px; /// md.comp.split-button.xsmall.trailing-button.trailing-space $trailing-button-trailing-space: 13px; /// md.comp.split-button.xsmall.container.shape $container-shape: md-sys-shape.$corner-full; /// md.comp.split-button.xsmall.inner-corner.corner-size $inner-corner-corner-size: md-sys-shape.$corner-value-extra-small; /// md.comp.split-button.xsmall.inner-corner.hovered.corner-size $inner-corner-hovered-corner-size: md-sys-shape.$corner-value-small; /// md.comp.split-button.xsmall.inner-corner.pressed.corner-size $inner-corner-pressed-corner-size: md-sys-shape.$corner-value-small; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-standard-menu-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.standard-menu-button.container.height (Enabled / Container) $container-height: 40px; /// md.comp.standard-menu-button.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.standard-menu-button.disabled.trailing-icon.opacity (Disabled / Trailing icon) $disabled-trailing-icon-opacity: 0.38; /// md.comp.standard-menu-button.trailing-icon.size (Enabled / Trailing icon) $trailing-icon-size: 18px; /// md.comp.standard-menu-button.with-icon.disabled.leading-icon.opacity (Disabled / Leading icon) $with-icon-disabled-leading-icon-opacity: 0.38; /// md.comp.standard-menu-button.with-icon.leading-icon.size (Enabled / Leading icon) $with-icon-leading-icon-size: 18px; /// md.comp.standard-menu-button.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.standard-menu-button.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.standard-menu-button.disabled.trailing-icon.color (Disabled / Trailing icon) $disabled-trailing-icon-color: md-sys-color.$on-surface; /// md.comp.standard-menu-button.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.standard-menu-button.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.standard-menu-button.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.standard-menu-button.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.standard-menu-button.focus.trailing-icon.color (Focused / Trailing icon) $focus-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.standard-menu-button.hover.trailing-icon.color (Hovered / Trailing icon) $hover-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.standard-menu-button.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.standard-menu-button.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.standard-menu-button.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.standard-menu-button.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.standard-menu-button.pressed.label-text.color (Pressed (ripple) / Label text) $pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.standard-menu-button.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon) $pressed-trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.trailing-icon.color (Enabled / Trailing icon) $trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.with-icon.disabled.leading-icon.color (Disabled / Leading icon) $with-icon-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.standard-menu-button.with-icon.focus.icon.color (Focused / Icon) $with-icon-focus-icon-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.with-icon.hover.leading-icon.color (Hovered / Leading icon) $with-icon-hover-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.with-icon.leading-icon.color (Enabled / Leading icon) $with-icon-leading-icon-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.with-icon.pressed.icon.color (Pressed (ripple) / Icon) $with-icon-pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.standard-menu-button.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-suggestion-chip.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.suggestion-chip.container.height (Enabled / Container) $container-height: 32px; /// md.comp.suggestion-chip.disabled.label-text.opacity (Disabled / Label text) $disabled-label-text-opacity: 0.38; /// md.comp.suggestion-chip.elevated.disabled.container.opacity (Disabled / Container) $elevated-disabled-container-opacity: 0.12; /// md.comp.suggestion-chip.flat.disabled.outline.opacity (Disabled / Container) $flat-disabled-outline-opacity: 0.12; /// md.comp.suggestion-chip.flat.outline.width (Enabled / Container) $flat-outline-width: 1px; /// md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.opacity (Disabled / Icon) $with-leading-icon-disabled-leading-icon-opacity: 0.38; /// md.comp.suggestion-chip.with-leading-icon.leading-icon.size (Enabled / Icon) $with-leading-icon-leading-icon-size: 18px; /// md.comp.suggestion-chip.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-small; /// md.comp.suggestion-chip.container.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.suggestion-chip.disabled.label-text.color (Disabled / Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.suggestion-chip.dragged.container.elevation (Dragged / Container) $dragged-container-elevation: md-sys-elevation.$level4; /// md.comp.suggestion-chip.dragged.label-text.color (Dragged / Label text) $dragged-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.dragged.state-layer.color (Dragged / State layer) $dragged-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.dragged.state-layer.opacity (Dragged / State layer) $dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity; /// md.comp.suggestion-chip.elevated.container.color (Enabled / Container) $elevated-container-color: md-sys-color.$surface-container-low; /// md.comp.suggestion-chip.elevated.container.elevation (Enabled / Container) $elevated-container-elevation: md-sys-elevation.$level1; /// md.comp.suggestion-chip.elevated.container.shadow-color (Enabled / Container) $elevated-container-shadow-color: md-sys-color.$shadow; /// md.comp.suggestion-chip.elevated.disabled.container.color (Disabled / Container) $elevated-disabled-container-color: md-sys-color.$on-surface; /// md.comp.suggestion-chip.elevated.disabled.container.elevation (Disabled / Container) $elevated-disabled-container-elevation: md-sys-elevation.$level0; /// md.comp.suggestion-chip.elevated.focus.container.elevation (Focused / Container) $elevated-focus-container-elevation: md-sys-elevation.$level1; /// md.comp.suggestion-chip.elevated.hover.container.elevation (Hovered / Container) $elevated-hover-container-elevation: md-sys-elevation.$level2; /// md.comp.suggestion-chip.elevated.pressed.container.elevation (Pressed (ripple) / Container) $elevated-pressed-container-elevation: md-sys-elevation.$level1; /// md.comp.suggestion-chip.flat.container.elevation (Enabled / Container) $flat-container-elevation: md-sys-elevation.$level0; /// md.comp.suggestion-chip.flat.disabled.outline.color (Disabled / Container) $flat-disabled-outline-color: md-sys-color.$on-surface; /// md.comp.suggestion-chip.flat.focus.outline.color (Focused / Container) $flat-focus-outline-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.flat.outline.color (Enabled / Container) $flat-outline-color: md-sys-color.$outline-variant; /// md.comp.suggestion-chip.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.suggestion-chip.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.suggestion-chip.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.suggestion-chip.focus.label-text.color (Focused / Label text) $focus-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.focus.state-layer.color (Focused / State layer) $focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.focus.state-layer.opacity (Focused / State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.suggestion-chip.hover.label-text.color (Hovered / Label text) $hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.hover.state-layer.color (Hovered / State layer) $hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.hover.state-layer.opacity (Hovered / State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.suggestion-chip.label-text.color (Enabled / Label text) $label-text-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.label-text.font (Enabled / Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.suggestion-chip.label-text.line-height (Enabled / Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.suggestion-chip.label-text.size (Enabled / Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.suggestion-chip.label-text.tracking (Enabled / Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.suggestion-chip.label-text.weight (Enabled / Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.suggestion-chip.pressed.label-text.color (Pressed (ripple) / Label text) $pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.pressed.state-layer.color (Pressed (ripple) / State layer) $pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.suggestion-chip.pressed.state-layer.opacity (Pressed (ripple) / State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.color (Disabled / Icon) $with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface; /// md.comp.suggestion-chip.with-leading-icon.dragged.leading-icon.color (Dragged / Icon) $with-leading-icon-dragged-leading-icon-color: md-sys-color.$primary; /// md.comp.suggestion-chip.with-leading-icon.focus.leading-icon.color (Focused / Icon) $with-leading-icon-focus-leading-icon-color: md-sys-color.$primary; /// md.comp.suggestion-chip.with-leading-icon.hover.leading-icon.color (Hovered / Icon) $with-leading-icon-hover-leading-icon-color: md-sys-color.$primary; /// md.comp.suggestion-chip.with-leading-icon.leading-icon.color (Enabled / Icon) $with-leading-icon-leading-icon-color: md-sys-color.$primary; /// md.comp.suggestion-chip.with-leading-icon.pressed.leading-icon.color (Pressed (ripple) / Icon) $with-leading-icon-pressed-leading-icon-color: md-sys-color.$primary; /// md.comp.suggestion-chip.label-text.type (Enabled / Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-switch.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; /// md.comp.switch.disabled.handle.opacity (Disabled / Handle) /// /// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design $disabled-handle-opacity: 0.38; /// md.comp.switch.disabled.selected.handle.opacity (Disabled / Handle) $disabled-selected-handle-opacity: 1; /// md.comp.switch.disabled.selected.icon.opacity (Disabled / Icon) $disabled-selected-icon-opacity: 0.38; /// md.comp.switch.disabled.track.opacity (Disabled / Track) $disabled-track-opacity: 0.12; /// md.comp.switch.disabled.unselected.handle.opacity (Disabled / Handle) $disabled-unselected-handle-opacity: 0.38; /// md.comp.switch.disabled.unselected.icon.opacity (Disabled / Icon) $disabled-unselected-icon-opacity: 0.38; /// md.comp.switch.handle.height (Enabled / Handle) /// /// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design $handle-height: 20px; /// md.comp.switch.handle.width (Enabled / Handle) /// /// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design $handle-width: 20px; /// md.comp.switch.pressed.handle.height (Enabled / Handle) $pressed-handle-height: 28px; /// md.comp.switch.pressed.handle.width (Enabled / Handle) $pressed-handle-width: 28px; /// md.comp.switch.selected.handle.height (Enabled / Handle) $selected-handle-height: 24px; /// md.comp.switch.selected.handle.width (Enabled / Handle) $selected-handle-width: 24px; /// md.comp.switch.selected.icon.size (Enabled / Icon) $selected-icon-size: 16px; /// md.comp.switch.state-layer.size (Enabled / State layer) $state-layer-size: 40px; /// md.comp.switch.track.height (Enabled / Track) $track-height: 32px; /// md.comp.switch.track.outline.width (Enabled / Track) $track-outline-width: 2px; /// md.comp.switch.track.width (Enabled / Track) $track-width: 52px; /// md.comp.switch.unselected.handle.height (Enabled / Handle) $unselected-handle-height: 16px; /// md.comp.switch.unselected.handle.width (Enabled / Handle) $unselected-handle-width: 16px; /// md.comp.switch.unselected.icon.size (Enabled / Icon) $unselected-icon-size: 16px; /// md.comp.switch.with-icon.handle.height (Enabled / Handle) $with-icon-handle-height: 24px; /// md.comp.switch.with-icon.handle.width (Enabled / Handle) $with-icon-handle-width: 24px; /// md.comp.switch.disabled.handle.elevation (Disabled / Handle) /// /// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design $disabled-handle-elevation: md-sys-elevation.$level0; /// md.comp.switch.disabled.selected.handle.color (Disabled / Handle) $disabled-selected-handle-color: md-sys-color.$surface; /// md.comp.switch.disabled.selected.icon.color (Disabled / Icon) $disabled-selected-icon-color: md-sys-color.$on-surface; /// md.comp.switch.disabled.selected.track.color (Disabled / Track) $disabled-selected-track-color: md-sys-color.$on-surface; /// md.comp.switch.disabled.unselected.handle.color (Disabled / Handle) $disabled-unselected-handle-color: md-sys-color.$on-surface; /// md.comp.switch.disabled.unselected.icon.color (Disabled / Icon) $disabled-unselected-icon-color: md-sys-color.$surface-container-highest; /// md.comp.switch.disabled.unselected.track.color (Disabled / Track) $disabled-unselected-track-color: md-sys-color.$surface-container-highest; /// md.comp.switch.disabled.unselected.track.outline.color (Disabled / Track) $disabled-unselected-track-outline-color: md-sys-color.$on-surface; /// md.comp.switch.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.switch.focus.indicator.offset (Focused / Focus indicator) $focus-indicator-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.switch.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.switch.handle.elevation (Enabled / Handle) /// /// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design $handle-elevation: md-sys-elevation.$level1; /// md.comp.switch.handle.shadow-color (Enabled / Handle) /// /// @deprecated The Material Switch component has been updated to a new design. Deprecated tokens are no longer required, new tokens have been added and token values updated. The new tokens only correspond to the new design $handle-shadow-color: md-sys-color.$shadow; /// md.comp.switch.handle.shape (Enabled / Handle) $handle-shape: md-sys-shape.$corner-full; /// md.comp.switch.selected.focus.handle.color (Focused / Handle) $selected-focus-handle-color: md-sys-color.$primary-container; /// md.comp.switch.selected.focus.icon.color (Focused / Icon) $selected-focus-icon-color: md-sys-color.$on-primary-container; /// md.comp.switch.selected.focus.state-layer.color (Focused / Track) $selected-focus-state-layer-color: md-sys-color.$primary; /// md.comp.switch.selected.focus.state-layer.opacity (Focused / Track) $selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.switch.selected.focus.track.color (Focused / Track) $selected-focus-track-color: md-sys-color.$primary; /// md.comp.switch.selected.handle.color (Enabled / Handle) $selected-handle-color: md-sys-color.$on-primary; /// md.comp.switch.selected.hover.handle.color (Hovered / Handle) $selected-hover-handle-color: md-sys-color.$primary-container; /// md.comp.switch.selected.hover.icon.color (Hovered / Icon) $selected-hover-icon-color: md-sys-color.$on-primary-container; /// md.comp.switch.selected.hover.state-layer.color (Hovered / Track) $selected-hover-state-layer-color: md-sys-color.$primary; /// md.comp.switch.selected.hover.state-layer.opacity (Hovered / Track) $selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.switch.selected.hover.track.color (Hovered / Track) $selected-hover-track-color: md-sys-color.$primary; /// md.comp.switch.selected.icon.color (Enabled / Icon) $selected-icon-color: md-sys-color.$on-primary-container; /// md.comp.switch.selected.pressed.handle.color (Pressed (ripple) / Handle) $selected-pressed-handle-color: md-sys-color.$primary-container; /// md.comp.switch.selected.pressed.icon.color (Pressed (ripple) / Icon) $selected-pressed-icon-color: md-sys-color.$on-primary-container; /// md.comp.switch.selected.pressed.state-layer.color (Pressed (ripple) / Track) $selected-pressed-state-layer-color: md-sys-color.$primary; /// md.comp.switch.selected.pressed.state-layer.opacity (Pressed (ripple) / Track) $selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.switch.selected.pressed.track.color (Pressed (ripple) / Track) $selected-pressed-track-color: md-sys-color.$primary; /// md.comp.switch.selected.track.color (Enabled / Track) $selected-track-color: md-sys-color.$primary; /// md.comp.switch.state-layer.shape (Enabled / State layer) $state-layer-shape: md-sys-shape.$corner-full; /// md.comp.switch.track.shape (Enabled / Track) $track-shape: md-sys-shape.$corner-full; /// md.comp.switch.unselected.focus.handle.color (Focused / Handle) $unselected-focus-handle-color: md-sys-color.$on-surface-variant; /// md.comp.switch.unselected.focus.icon.color (Focused / Icon) $unselected-focus-icon-color: md-sys-color.$surface-container-highest; /// md.comp.switch.unselected.focus.state-layer.color (Focused / Track) $unselected-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.switch.unselected.focus.state-layer.opacity (Focused / Track) $unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.switch.unselected.focus.track.color (Focused / Track) $unselected-focus-track-color: md-sys-color.$surface-container-highest; /// md.comp.switch.unselected.focus.track.outline.color (Focused / Track) $unselected-focus-track-outline-color: md-sys-color.$outline; /// md.comp.switch.unselected.handle.color (Enabled / Handle) $unselected-handle-color: md-sys-color.$outline; /// md.comp.switch.unselected.hover.handle.color (Hovered / Handle) $unselected-hover-handle-color: md-sys-color.$on-surface-variant; /// md.comp.switch.unselected.hover.icon.color (Hovered / Icon) $unselected-hover-icon-color: md-sys-color.$surface-container-highest; /// md.comp.switch.unselected.hover.state-layer.color (Hovered / Track) $unselected-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.switch.unselected.hover.state-layer.opacity (Hovered / Track) $unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.switch.unselected.hover.track.color (Hovered / Track) $unselected-hover-track-color: md-sys-color.$surface-container-highest; /// md.comp.switch.unselected.hover.track.outline.color (Hovered / Track) $unselected-hover-track-outline-color: md-sys-color.$outline; /// md.comp.switch.unselected.icon.color (Enabled / Icon) $unselected-icon-color: md-sys-color.$surface-container-highest; /// md.comp.switch.unselected.pressed.handle.color (Pressed (ripple) / Handle) $unselected-pressed-handle-color: md-sys-color.$on-surface-variant; /// md.comp.switch.unselected.pressed.icon.color (Pressed (ripple) / Icon) $unselected-pressed-icon-color: md-sys-color.$surface-container-highest; /// md.comp.switch.unselected.pressed.state-layer.color (Pressed (ripple) / Track) $unselected-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.switch.unselected.pressed.state-layer.opacity (Pressed (ripple) / Track) $unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.switch.unselected.pressed.track.color (Pressed (ripple) / Track) $unselected-pressed-track-color: md-sys-color.$surface-container-highest; /// md.comp.switch.unselected.pressed.track.outline.color (Pressed (ripple) / Track) $unselected-pressed-track-outline-color: md-sys-color.$outline; /// md.comp.switch.unselected.track.color (Enabled / Track) $unselected-track-color: md-sys-color.$surface-container-highest; /// md.comp.switch.unselected.track.outline.color (Enabled / Track) $unselected-track-outline-color: md-sys-color.$outline; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-text-button.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.text-button.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 40px; /// md.comp.text-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-opacity: 0.38; /// md.comp.text-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-opacity: 0.38; /// md.comp.text-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-size: 18px; /// md.comp.text-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Bug: should not have been created. Remove any shadows on navigation bars. $container-elevation: md-sys-elevation.$level0; /// md.comp.text-button.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-full; /// md.comp.text-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.text-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.text-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.text-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.text-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text) $focus-label-text-color: md-sys-color.$primary; /// md.comp.text-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-color: md-sys-color.$primary; /// md.comp.text-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer) $focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.text-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text) $hover-label-text-color: md-sys-color.$primary; /// md.comp.text-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-color: md-sys-color.$primary; /// md.comp.text-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer) $hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.text-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text) $label-text-color: md-sys-color.$primary; /// md.comp.text-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text) $label-text-font: md-sys-typescale.$label-large-font; /// md.comp.text-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text) $label-text-line-height: md-sys-typescale.$label-large-line-height; /// md.comp.text-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text) $label-text-size: md-sys-typescale.$label-large-size; /// md.comp.text-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text) $label-text-tracking: md-sys-typescale.$label-large-tracking; /// md.comp.text-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text) $label-text-weight: md-sys-typescale.$label-large-weight; /// md.comp.text-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text) $pressed-label-text-color: md-sys-color.$primary; /// md.comp.text-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-color: md-sys-color.$primary; /// md.comp.text-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.text-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon) $with-icon-disabled-icon-color: md-sys-color.$on-surface; /// md.comp.text-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon) $with-icon-focus-icon-color: md-sys-color.$primary; /// md.comp.text-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon) $with-icon-hover-icon-color: md-sys-color.$primary; /// md.comp.text-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon) $with-icon-icon-color: md-sys-color.$primary; /// md.comp.text-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon) $with-icon-pressed-icon-color: md-sys-color.$primary; /// md.comp.text-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text) @mixin label-text-type { font-family: $label-text-font; font-size: $label-text-size; font-weight: $label-text-weight; letter-spacing: $label-text-tracking; line-height: $label-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-time-input.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-state-focus-indicator'; @use 'md-sys-typescale'; /// md.comp.time-input.period-selector.container.height (Enabled / Container) $period-selector-container-height: 72px; /// md.comp.time-input.period-selector.container.width (Enabled / Container) $period-selector-container-width: 52px; /// md.comp.time-input.period-selector.outline.width (Enabled / Container) $period-selector-outline-width: 1px; /// md.comp.time-input.time-input-field.container.height (Enabled / Container) $time-input-field-container-height: 72px; /// md.comp.time-input.time-input-field.container.width (Enabled / Container) $time-input-field-container-width: 96px; /// md.comp.time-input.time-input-field.focus.outline.width (Focused / Container) $time-input-field-focus-outline-width: 2px; /// md.comp.time-input.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.time-input.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.time-input.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.time-input.focus.indicator.color (Focused / Focus indicator) $focus-indicator-color: md-sys-color.$secondary; /// md.comp.time-input.focus.indicator.outline.offset (Focused / Focus indicator) $focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset; /// md.comp.time-input.focus.indicator.thickness (Focused / Focus indicator) $focus-indicator-thickness: md-sys-state-focus-indicator.$thickness; /// md.comp.time-input.headline.color (Enabled / Headline) $headline-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.headline.font (Enabled / Headline) $headline-font: md-sys-typescale.$label-medium-font; /// md.comp.time-input.headline.line-height (Enabled / Headline) $headline-line-height: md-sys-typescale.$label-medium-line-height; /// md.comp.time-input.headline.size (Enabled / Headline) $headline-size: md-sys-typescale.$label-medium-size; /// md.comp.time-input.headline.tracking (Enabled / Headline) $headline-tracking: md-sys-typescale.$label-medium-tracking; /// md.comp.time-input.headline.weight (Enabled / Headline) $headline-weight: md-sys-typescale.$label-medium-weight; /// md.comp.time-input.period-selector.container.shape (Enabled / Container) $period-selector-container-shape: md-sys-shape.$corner-small; /// md.comp.time-input.period-selector.focus.state-layer.opacity (Focused / State layer) $period-selector-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.time-input.period-selector.hover.state-layer.opacity (Hovered / State layer) $period-selector-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.time-input.period-selector.label-text.font (Enabled / Label text) $period-selector-label-text-font: md-sys-typescale.$title-medium-font; /// md.comp.time-input.period-selector.label-text.line-height (Enabled / Label text) $period-selector-label-text-line-height: md-sys-typescale.$title-medium-line-height; /// md.comp.time-input.period-selector.label-text.size (Enabled / Label text) $period-selector-label-text-size: md-sys-typescale.$title-medium-size; /// md.comp.time-input.period-selector.label-text.tracking (Enabled / Label text) $period-selector-label-text-tracking: md-sys-typescale.$title-medium-tracking; /// md.comp.time-input.period-selector.label-text.weight (Enabled / Label text) $period-selector-label-text-weight: md-sys-typescale.$title-medium-weight; /// md.comp.time-input.period-selector.outline.color (Enabled / Container) $period-selector-outline-color: md-sys-color.$outline; /// md.comp.time-input.period-selector.pressed.state-layer.opacity (Pressed (ripple) / State layer) $period-selector-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.time-input.period-selector.selected.container.color (Enabled / Container) $period-selector-selected-container-color: md-sys-color.$tertiary-container; /// md.comp.time-input.period-selector.selected.focus.label-text.color (Focused / Label text) $period-selector-selected-focus-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.time-input.period-selector.selected.focus.state-layer.color (Focused / State layer) $period-selector-selected-focus-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.time-input.period-selector.selected.hover.label-text.color (Hovered / Label text) $period-selector-selected-hover-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.time-input.period-selector.selected.hover.state-layer.color (Hovered / State layer) $period-selector-selected-hover-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.time-input.period-selector.selected.label-text.color (Enabled / Label text) $period-selector-selected-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.time-input.period-selector.selected.pressed.label-text.color (Pressed (ripple) / Label text) $period-selector-selected-pressed-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.time-input.period-selector.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $period-selector-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.time-input.period-selector.unselected.focus.label-text.color (Focused / Label text) $period-selector-unselected-focus-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.period-selector.unselected.focus.state-layer.color (Focused / State layer) $period-selector-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.period-selector.unselected.hover.label-text.color (Hovered / Label text) $period-selector-unselected-hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.period-selector.unselected.hover.state-layer.color (Hovered / State layer) $period-selector-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.period-selector.unselected.label-text.color (Enabled / Label text) $period-selector-unselected-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.period-selector.unselected.pressed.label-text.color (Pressed (ripple) / Label text) $period-selector-unselected-pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.period-selector.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $period-selector-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.time-input.time-input-field.container.color (Enabled / Container) $time-input-field-container-color: md-sys-color.$surface-container-highest; /// md.comp.time-input.time-input-field.container.shape (Enabled / Container) $time-input-field-container-shape: md-sys-shape.$corner-small; /// md.comp.time-input.time-input-field.focus.container.color (Focused / Container) $time-input-field-focus-container-color: md-sys-color.$primary-container; /// md.comp.time-input.time-input-field.focus.label-text.color (Focused / Label text) $time-input-field-focus-label-text-color: md-sys-color.$on-primary-container; /// md.comp.time-input.time-input-field.focus.outline.color (Focused / Container) $time-input-field-focus-outline-color: md-sys-color.$primary; /// md.comp.time-input.time-input-field.hover.label-text.color (Hovered / Label text) $time-input-field-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.time-input.time-input-field.hover.state-layer.color (Hovered / State layer) $time-input-field-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.time-input.time-input-field.hover.state-layer.opacity (Hovered / State layer) $time-input-field-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.time-input.time-input-field.label-text.color (Enabled / Label text) $time-input-field-label-text-color: md-sys-color.$on-surface; /// md.comp.time-input.time-input-field.label-text.font (Enabled / Label text) $time-input-field-label-text-font: md-sys-typescale.$display-medium-font; /// md.comp.time-input.time-input-field.label-text.line-height (Enabled / Label text) $time-input-field-label-text-line-height: md-sys-typescale.$display-medium-line-height; /// md.comp.time-input.time-input-field.label-text.size (Enabled / Label text) $time-input-field-label-text-size: md-sys-typescale.$display-medium-size; /// md.comp.time-input.time-input-field.label-text.tracking (Enabled / Label text) $time-input-field-label-text-tracking: md-sys-typescale.$display-medium-tracking; /// md.comp.time-input.time-input-field.label-text.weight (Enabled / Label text) $time-input-field-label-text-weight: md-sys-typescale.$display-medium-weight; /// md.comp.time-input.time-input-field.separator.color (Enabled / Separator) $time-input-field-separator-color: md-sys-color.$on-surface; /// md.comp.time-input.time-input-field.separator.font (Enabled / Separator) $time-input-field-separator-font: md-sys-typescale.$display-large-font; /// md.comp.time-input.time-input-field.separator.line-height (Enabled / Separator) $time-input-field-separator-line-height: md-sys-typescale.$display-large-line-height; /// md.comp.time-input.time-input-field.separator.size (Enabled / Separator) $time-input-field-separator-size: md-sys-typescale.$display-large-size; /// md.comp.time-input.time-input-field.separator.tracking (Enabled / Separator) $time-input-field-separator-tracking: md-sys-typescale.$display-large-tracking; /// md.comp.time-input.time-input-field.separator.weight (Enabled / Separator) $time-input-field-separator-weight: md-sys-typescale.$display-large-weight; /// md.comp.time-input.time-input-field.supporting-text.color (Enabled / Supporting text) $time-input-field-supporting-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-input.time-input-field.supporting-text.font (Enabled / Supporting text) $time-input-field-supporting-text-font: md-sys-typescale.$body-small-font; /// md.comp.time-input.time-input-field.supporting-text.line-height (Enabled / Supporting text) $time-input-field-supporting-text-line-height: md-sys-typescale.$body-small-line-height; /// md.comp.time-input.time-input-field.supporting-text.size (Enabled / Supporting text) $time-input-field-supporting-text-size: md-sys-typescale.$body-small-size; /// md.comp.time-input.time-input-field.supporting-text.tracking (Enabled / Supporting text) $time-input-field-supporting-text-tracking: md-sys-typescale.$body-small-tracking; /// md.comp.time-input.time-input-field.supporting-text.weight (Enabled / Supporting text) $time-input-field-supporting-text-weight: md-sys-typescale.$body-small-weight; /// md.comp.time-input.headline.type (Enabled / Headline) @mixin headline-type { font-family: $headline-font; font-size: $headline-size; font-weight: $headline-weight; letter-spacing: $headline-tracking; line-height: $headline-line-height; } /// md.comp.time-input.period-selector.label-text.type (Enabled / Label text) @mixin period-selector-label-text-type { font-family: $period-selector-label-text-font; font-size: $period-selector-label-text-size; font-weight: $period-selector-label-text-weight; letter-spacing: $period-selector-label-text-tracking; line-height: $period-selector-label-text-line-height; } /// md.comp.time-input.time-input-field.label-text.type (Enabled / Label text) @mixin time-input-field-label-text-type { font-family: $time-input-field-label-text-font; font-size: $time-input-field-label-text-size; font-weight: $time-input-field-label-text-weight; letter-spacing: $time-input-field-label-text-tracking; line-height: $time-input-field-label-text-line-height; } /// md.comp.time-input.time-input-field.separator.type (Enabled / Separator) @mixin time-input-field-separator-type { font-family: $time-input-field-separator-font; font-size: $time-input-field-separator-size; font-weight: $time-input-field-separator-weight; letter-spacing: $time-input-field-separator-tracking; line-height: $time-input-field-separator-line-height; } /// md.comp.time-input.time-input-field.supporting-text.type (Enabled / Supporting text) @mixin time-input-field-supporting-text-type { font-family: $time-input-field-supporting-text-font; font-size: $time-input-field-supporting-text-size; font-weight: $time-input-field-supporting-text-weight; letter-spacing: $time-input-field-supporting-text-tracking; line-height: $time-input-field-supporting-text-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-time-picker.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-state'; @use 'md-sys-typescale'; /// md.comp.time-picker.clock-dial.container.size (Enabled / Container) $clock-dial-container-size: 256px; /// md.comp.time-picker.clock-dial.selector.center.container.size (Enabled / Container) $clock-dial-selector-center-container-size: 8px; /// md.comp.time-picker.clock-dial.selector.handle.container.size (Enabled / Container) $clock-dial-selector-handle-container-size: 48px; /// md.comp.time-picker.clock-dial.selector.track.container.width (Enabled / Container) $clock-dial-selector-track-container-width: 2px; /// md.comp.time-picker.period-selector.horizontal.container.height (Enabled / Container) $period-selector-horizontal-container-height: 38px; /// md.comp.time-picker.period-selector.horizontal.container.width (Enabled / Container) $period-selector-horizontal-container-width: 216px; /// md.comp.time-picker.period-selector.outline.width (Enabled / Container) $period-selector-outline-width: 1px; /// md.comp.time-picker.period-selector.vertical.container.height (Enabled / Container) $period-selector-vertical-container-height: 80px; /// md.comp.time-picker.period-selector.vertical.container.width (Enabled / Container) $period-selector-vertical-container-width: 52px; /// md.comp.time-picker.time-selector.24h-vertical.container.width (Enabled / Container) $time-selector-24h-vertical-container-width: 114px; /// md.comp.time-picker.time-selector.container.height (Enabled / Container) $time-selector-container-height: 80px; /// md.comp.time-picker.time-selector.container.width (Enabled / Container) $time-selector-container-width: 96px; /// md.comp.time-picker.clock-dial.color (Enabled / Container) $clock-dial-color: md-sys-color.$surface-container-highest; /// md.comp.time-picker.clock-dial.color.ignore (Enabled / Container) /// /// @deprecated Deprecating token due to typo in name. Please use md.comp.time-picker.clock-dial.color instead" $clock-dial-color-ignore: md-sys-color.$on-surface-variant; /// md.comp.time-picker.clock-dial.label-text.font (Enabled / Label text) $clock-dial-label-text-font: md-sys-typescale.$body-large-font; /// md.comp.time-picker.clock-dial.label-text.line-height (Enabled / Label text) $clock-dial-label-text-line-height: md-sys-typescale.$body-large-line-height; /// md.comp.time-picker.clock-dial.label-text.size (Enabled / Label text) $clock-dial-label-text-size: md-sys-typescale.$body-large-size; /// md.comp.time-picker.clock-dial.label-text.tracking (Enabled / Label text) $clock-dial-label-text-tracking: md-sys-typescale.$body-large-tracking; /// md.comp.time-picker.clock-dial.label-text.weight (Enabled / Label text) $clock-dial-label-text-weight: md-sys-typescale.$body-large-weight; /// md.comp.time-picker.clock-dial.selected.label-text.color (Enabled / Label text) $clock-dial-selected-label-text-color: md-sys-color.$on-primary; /// md.comp.time-picker.clock-dial.selector.center.container.color (Enabled / Container) $clock-dial-selector-center-container-color: md-sys-color.$primary; /// md.comp.time-picker.clock-dial.selector.center.container.shape (Enabled / Container) $clock-dial-selector-center-container-shape: md-sys-shape.$corner-full; /// md.comp.time-picker.clock-dial.selector.handle.container.color (Enabled / Container) $clock-dial-selector-handle-container-color: md-sys-color.$primary; /// md.comp.time-picker.clock-dial.selector.handle.container.shape (Enabled / Container) $clock-dial-selector-handle-container-shape: md-sys-shape.$corner-full; /// md.comp.time-picker.clock-dial.selector.track.container.color (Enabled / Container) $clock-dial-selector-track-container-color: md-sys-color.$primary; /// md.comp.time-picker.clock-dial.shape (Enabled / Container) $clock-dial-shape: md-sys-shape.$corner-full; /// md.comp.time-picker.clock-dial.shape.ignore (Enabled / Container) /// /// @deprecated Deprecating token due to typo in name. Please use md.comp.time-picker.clock-dial.shape instead $clock-dial-shape-ignore: md-sys-shape.$corner-full; /// md.comp.time-picker.clock-dial.unselected.label-text.color (Enabled / Label text) $clock-dial-unselected-label-text-color: md-sys-color.$on-surface; /// md.comp.time-picker.container.color (Enabled / Container) $container-color: md-sys-color.$surface-container-high; /// md.comp.time-picker.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level3; /// md.comp.time-picker.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-extra-large; /// md.comp.time-picker.headline.color (Enabled / Headline) $headline-color: md-sys-color.$on-surface-variant; /// md.comp.time-picker.headline.font (Enabled / Headline) $headline-font: md-sys-typescale.$label-medium-font; /// md.comp.time-picker.headline.line-height (Enabled / Headline) $headline-line-height: md-sys-typescale.$label-medium-line-height; /// md.comp.time-picker.headline.size (Enabled / Headline) $headline-size: md-sys-typescale.$label-medium-size; /// md.comp.time-picker.headline.tracking (Enabled / Headline) $headline-tracking: md-sys-typescale.$label-medium-tracking; /// md.comp.time-picker.headline.weight (Enabled / Headline) $headline-weight: md-sys-typescale.$label-medium-weight; /// md.comp.time-picker.period-selector.container.shape (Enabled / Container) $period-selector-container-shape: md-sys-shape.$corner-small; /// md.comp.time-picker.period-selector.focus.state-layer.opacity (Focused / State layer) $period-selector-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.time-picker.period-selector.hover.state-layer.opacity (Hovered / State layer) $period-selector-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.time-picker.period-selector.label-text.font (Enabled / Label text) $period-selector-label-text-font: md-sys-typescale.$title-medium-font; /// md.comp.time-picker.period-selector.label-text.line-height (Enabled / Label text) $period-selector-label-text-line-height: md-sys-typescale.$title-medium-line-height; /// md.comp.time-picker.period-selector.label-text.size (Enabled / Label text) $period-selector-label-text-size: md-sys-typescale.$title-medium-size; /// md.comp.time-picker.period-selector.label-text.tracking (Enabled / Label text) $period-selector-label-text-tracking: md-sys-typescale.$title-medium-tracking; /// md.comp.time-picker.period-selector.label-text.weight (Enabled / Label text) $period-selector-label-text-weight: md-sys-typescale.$title-medium-weight; /// md.comp.time-picker.period-selector.outline.color (Enabled / Container) $period-selector-outline-color: md-sys-color.$outline; /// md.comp.time-picker.period-selector.pressed.state-layer.opacity (Pressed (ripple) / State layer) $period-selector-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.time-picker.period-selector.selected.container.color (Enabled / Container) $period-selector-selected-container-color: md-sys-color.$tertiary-container; /// md.comp.time-picker.period-selector.selected.focus.label-text.color (Focused / Label text) $period-selector-selected-focus-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.time-picker.period-selector.selected.focus.state-layer.color (Focused / State layer) $period-selector-selected-focus-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.time-picker.period-selector.selected.hover.label-text.color (Hovered / Label text) $period-selector-selected-hover-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.time-picker.period-selector.selected.hover.state-layer.color (Hovered / State layer) $period-selector-selected-hover-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.time-picker.period-selector.selected.label-text.color (Enabled / Label text) $period-selector-selected-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.time-picker.period-selector.selected.pressed.label-text.color (Pressed (ripple) / Label text) $period-selector-selected-pressed-label-text-color: md-sys-color.$on-tertiary-container; /// md.comp.time-picker.period-selector.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $period-selector-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container; /// md.comp.time-picker.period-selector.unselected.focus.label-text.color (Focused / Label text) $period-selector-unselected-focus-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-picker.period-selector.unselected.focus.state-layer.color (Focused / State layer) $period-selector-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.time-picker.period-selector.unselected.hover.label-text.color (Hovered / Label text) $period-selector-unselected-hover-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-picker.period-selector.unselected.hover.state-layer.color (Hovered / State layer) $period-selector-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.time-picker.period-selector.unselected.label-text.color (Enabled / Label text) $period-selector-unselected-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-picker.period-selector.unselected.pressed.label-text.color (Pressed (ripple) / Label text) $period-selector-unselected-pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.time-picker.period-selector.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $period-selector-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.time-picker.surface-tint-layer.color (Enabled / Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.time-picker.time-selector.container.shape (Enabled / Container) $time-selector-container-shape: md-sys-shape.$corner-small; /// md.comp.time-picker.time-selector.focus.state-layer.opacity (Focused / State layer) $time-selector-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.time-picker.time-selector.hover.state-layer.opacity (Hovered / State layer) $time-selector-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.time-picker.time-selector.label-text.font (Enabled / Label text) $time-selector-label-text-font: md-sys-typescale.$display-large-font; /// md.comp.time-picker.time-selector.label-text.line-height (Enabled / Label text) $time-selector-label-text-line-height: md-sys-typescale.$display-large-line-height; /// md.comp.time-picker.time-selector.label-text.size (Enabled / Label text) $time-selector-label-text-size: md-sys-typescale.$display-large-size; /// md.comp.time-picker.time-selector.label-text.tracking (Enabled / Label text) $time-selector-label-text-tracking: md-sys-typescale.$display-large-tracking; /// md.comp.time-picker.time-selector.label-text.weight (Enabled / Label text) $time-selector-label-text-weight: md-sys-typescale.$display-large-weight; /// md.comp.time-picker.time-selector.pressed.state-layer.opacity (Pressed (ripple) / State layer) $time-selector-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.time-picker.time-selector.selected.container.color (Enabled / Container) $time-selector-selected-container-color: md-sys-color.$primary-container; /// md.comp.time-picker.time-selector.selected.focus.label-text.color (Focused / Label text) $time-selector-selected-focus-label-text-color: md-sys-color.$on-primary-container; /// md.comp.time-picker.time-selector.selected.focus.state-layer.color (Focused / State layer) $time-selector-selected-focus-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.time-picker.time-selector.selected.hover.label-text.color (Hovered / Label text) $time-selector-selected-hover-label-text-color: md-sys-color.$on-primary-container; /// md.comp.time-picker.time-selector.selected.hover.state-layer.color (Hovered / State layer) $time-selector-selected-hover-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.time-picker.time-selector.selected.label-text.color (Enabled / Label text) $time-selector-selected-label-text-color: md-sys-color.$on-primary-container; /// md.comp.time-picker.time-selector.selected.pressed.label-text.color (Pressed (ripple) / Label text) $time-selector-selected-pressed-label-text-color: md-sys-color.$on-primary-container; /// md.comp.time-picker.time-selector.selected.pressed.state-layer.color (Pressed (ripple) / State layer) $time-selector-selected-pressed-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.time-picker.time-selector.separator.color (Enabled / Separator) $time-selector-separator-color: md-sys-color.$on-surface; /// md.comp.time-picker.time-selector.separator.font (Enabled / Separator) $time-selector-separator-font: md-sys-typescale.$display-large-font; /// md.comp.time-picker.time-selector.separator.line-height (Enabled / Separator) $time-selector-separator-line-height: md-sys-typescale.$display-large-line-height; /// md.comp.time-picker.time-selector.separator.size (Enabled / Separator) $time-selector-separator-size: md-sys-typescale.$display-large-size; /// md.comp.time-picker.time-selector.separator.tracking (Enabled / Separator) $time-selector-separator-tracking: md-sys-typescale.$display-large-tracking; /// md.comp.time-picker.time-selector.separator.weight (Enabled / Separator) $time-selector-separator-weight: md-sys-typescale.$display-large-weight; /// md.comp.time-picker.time-selector.unselected.container.color (Enabled / Container) $time-selector-unselected-container-color: md-sys-color.$surface-container-highest; /// md.comp.time-picker.time-selector.unselected.focus.label-text.color (Focused / Label text) $time-selector-unselected-focus-label-text-color: md-sys-color.$on-surface; /// md.comp.time-picker.time-selector.unselected.focus.state-layer.color (Focused / State layer) $time-selector-unselected-focus-state-layer-color: md-sys-color.$on-surface; /// md.comp.time-picker.time-selector.unselected.hover.label-text.color (Hovered / Label text) $time-selector-unselected-hover-label-text-color: md-sys-color.$on-surface; /// md.comp.time-picker.time-selector.unselected.hover.state-layer.color (Hovered / State layer) $time-selector-unselected-hover-state-layer-color: md-sys-color.$on-surface; /// md.comp.time-picker.time-selector.unselected.label-text.color (Enabled / Label text) $time-selector-unselected-label-text-color: md-sys-color.$on-surface; /// md.comp.time-picker.time-selector.unselected.pressed.label-text.color (Pressed (ripple) / Label text) $time-selector-unselected-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.time-picker.time-selector.unselected.pressed.state-layer.color (Pressed (ripple) / State layer) $time-selector-unselected-pressed-state-layer-color: md-sys-color.$on-surface; /// md.comp.time-picker.clock-dial.label-text.type (Enabled / Label text) @mixin clock-dial-label-text-type { font-family: $clock-dial-label-text-font; font-size: $clock-dial-label-text-size; font-weight: $clock-dial-label-text-weight; letter-spacing: $clock-dial-label-text-tracking; line-height: $clock-dial-label-text-line-height; } /// md.comp.time-picker.headline.type (Enabled / Headline) @mixin headline-type { font-family: $headline-font; font-size: $headline-size; font-weight: $headline-weight; letter-spacing: $headline-tracking; line-height: $headline-line-height; } /// md.comp.time-picker.period-selector.label-text.type (Enabled / Label text) @mixin period-selector-label-text-type { font-family: $period-selector-label-text-font; font-size: $period-selector-label-text-size; font-weight: $period-selector-label-text-weight; letter-spacing: $period-selector-label-text-tracking; line-height: $period-selector-label-text-line-height; } /// md.comp.time-picker.time-selector.label-text.type (Enabled / Label text) @mixin time-selector-label-text-type { font-family: $time-selector-label-text-font; font-size: $time-selector-label-text-size; font-weight: $time-selector-label-text-weight; letter-spacing: $time-selector-label-text-tracking; line-height: $time-selector-label-text-line-height; } /// md.comp.time-picker.time-selector.separator.type (Enabled / Separator) @mixin time-selector-separator-type { font-family: $time-selector-separator-font; font-size: $time-selector-separator-size; font-weight: $time-selector-separator-weight; letter-spacing: $time-selector-separator-tracking; line-height: $time-selector-separator-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-toolbar-docked.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; /// md.comp.toolbar.docked.container.height (Size) $container-height: 64px; /// md.comp.toolbar.docked.container.leading-space (Size) $container-leading-space: 16px; /// md.comp.toolbar.docked.container.max-spacing (Size) $container-max-spacing: 32px; /// md.comp.toolbar.docked.container.min-spacing (Size) $container-min-spacing: 4px; /// md.comp.toolbar.docked.container.trailing-space (Size) $container-trailing-space: 16px; /// md.comp.toolbar.docked.container.color (Color) /// /// @deprecated Moving this token to the color token set $container-color: md-sys-color.$surface-container; /// md.comp.toolbar.docked.container.shape (Shape) $container-shape: md-sys-shape.$corner-none; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-toolbar-floating-fab.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; /// md.comp.toolbar.floating.fab.between-space $between-space: 8px; /// md.comp.toolbar.floating.fab.container.height (Expanded) $container-height: 56px; /// md.comp.toolbar.floating.fab.container.width (Expanded) $container-width: 56px; /// md.comp.toolbar.floating.fab.icon.size (Expanded) $icon-size: 24px; /// md.comp.toolbar.floating.fab.medium.container.height (Collapsed) $medium-container-height: 80px; /// md.comp.toolbar.floating.fab.medium.container.width (Collapsed) $medium-container-width: 80px; /// md.comp.toolbar.floating.fab.medium.icon.size (Collapsed) $medium-icon-size: 28px; /// md.comp.toolbar.floating.fab.container.elevation (Expanded) $container-elevation: md-sys-elevation.$level1; /// md.comp.toolbar.floating.fab.container.shape (Expanded) $container-shape: md-sys-shape.$corner-large; /// md.comp.toolbar.floating.fab.medium.container.elevation (Collapsed) $medium-container-elevation: md-sys-elevation.$level2; /// md.comp.toolbar.floating.fab.medium.container.shape (Collapsed) $medium-container-shape: md-sys-shape.$corner-large-increased; /// md.comp.toolbar.floating.fab.standard.container.color $standard-container-color: md-sys-color.$secondary-container; /// md.comp.toolbar.floating.fab.standard.icon.color $standard-icon-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.floating.fab.vibrant.container.color $vibrant-container-color: md-sys-color.$tertiary-container; /// md.comp.toolbar.floating.fab.vibrant.icon.color $vibrant-icon-color: md-sys-color.$on-tertiary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-toolbar-floating.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; /// md.comp.toolbar.floating.container.between-space (Size) $container-between-space: 4px; /// md.comp.toolbar.floating.container.external-padding (Size) /// /// @deprecated Deprecating for a vertical and horizontal option $container-external-padding: 16px; /// md.comp.toolbar.floating.container.height (Size) /// /// @deprecated Deprecating this for a vertical and horizontal variant $container-height: 64px; /// md.comp.toolbar.floating.container.leading-space (Size) $container-leading-space: 8px; /// md.comp.toolbar.floating.container.trailing-space (Size) $container-trailing-space: 8px; /// md.comp.toolbar.floating.horizontal.container.external-space (Size) $horizontal-container-external-space: 16px; /// md.comp.toolbar.floating.horizontal.container.height (Size) $horizontal-container-height: 64px; /// md.comp.toolbar.floating.vertical.container.external-space (Size) $vertical-container-external-space: 24px; /// md.comp.toolbar.floating.vertical.container.width (Size) $vertical-container-width: 64px; /// md.comp.toolbar.floating.container.elevation (Elevation) $container-elevation: md-sys-elevation.$level3; /// md.comp.toolbar.floating.container.shape (Shape) $container-shape: md-sys-shape.$corner-full; /// md.comp.toolbar.floating.standard.container.color (Color) /// /// @deprecated Deprecating this token here and putting it into the color token set $standard-container-color: md-sys-color.$surface-container; /// md.comp.toolbar.floating.vibrant.button.selected.container.color (Color) /// /// @deprecated Deprecating this token here and putting it into the color token set $vibrant-button-selected-container-color: md-sys-color.$surface-container; /// md.comp.toolbar.floating.vibrant.button.selected.icon.color (Color) /// /// @deprecated Deprecating this token here and putting it into the color token set $vibrant-button-selected-icon-color: md-sys-color.$on-surface; /// md.comp.toolbar.floating.vibrant.button.selected.text.color (Color) /// /// @deprecated Deprecating this token here and putting it into the color token set $vibrant-button-selected-text-color: md-sys-color.$on-surface; /// md.comp.toolbar.floating.vibrant.button.unselected.icon.color (Color) /// /// @deprecated Deprecating this token here and putting it into the color token set $vibrant-button-unselected-icon-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.floating.vibrant.button.unselected.text.color (Color) /// /// @deprecated Deprecating this token here and putting it into the color token set $vibrant-button-unselected-text-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.floating.vibrant.container.color (Color) /// /// @deprecated Deprecating this token here and putting it into the color token set $vibrant-container-color: md-sys-color.$primary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-toolbar-standard.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; /// md.comp.toolbar.standard.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.toolbar.standard.disabled.label-text.opacity (Disabled) $disabled-label-text-opacity: 0.38; /// md.comp.toolbar.standard.button.container.color (Enabled) $button-container-color: md-sys-color.$surface-container; /// md.comp.toolbar.standard.container.color (Enabled) $container-color: md-sys-color.$surface-container; /// md.comp.toolbar.standard.container.shape (Enabled) $container-shape: md-sys-shape.$corner-full; /// md.comp.toolbar.standard.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.toolbar.standard.disabled.label-text.color (Disabled) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.toolbar.standard.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.toolbar.standard.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.toolbar.standard.icon.color (Enabled) $icon-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.label-text.color (Enabled) $label-text-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-surface-variant; /// md.comp.toolbar.standard.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.toolbar.standard.selected.button.container.color (Enabled) $selected-button-container-color: md-sys-color.$secondary-container; /// md.comp.toolbar.standard.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.focused.label-text.color (Focused) $selected-focused-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.hovered.label-text.color (Hovered) $selected-hovered-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.label-text.color (Enabled) $selected-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.pressed.label-text.color (Pressed) $selected-pressed-label-text-color: md-sys-color.$on-secondary-container; /// md.comp.toolbar.standard.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-secondary-container; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-toolbar-vibrant.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-shape'; @use 'md-sys-state'; /// md.comp.toolbar.vibrant.disabled.icon.opacity (Disabled) $disabled-icon-opacity: 0.38; /// md.comp.toolbar.vibrant.disabled.label-text.opacity (Disabled) $disabled-label-text-opacity: 0.38; /// md.comp.toolbar.vibrant.button.container.color (Enabled) $button-container-color: md-sys-color.$primary-container; /// md.comp.toolbar.vibrant.container.color (Enabled) $container-color: md-sys-color.$primary-container; /// md.comp.toolbar.vibrant.container.shape (Enabled) $container-shape: md-sys-shape.$corner-full; /// md.comp.toolbar.vibrant.disabled.icon.color (Disabled) $disabled-icon-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.disabled.label-text.color (Disabled) $disabled-label-text-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.focused.icon.color (Focused) $focused-icon-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.focused.label-text.color (Focused) $focused-label-text-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.focused.state-layer.color (Focused) $focused-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.focused.state-layer.opacity (Focused) $focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity; /// md.comp.toolbar.vibrant.hovered.icon.color (Hovered) $hovered-icon-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.hovered.label-text.color (Hovered) $hovered-label-text-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.hovered.state-layer.color (Hovered) $hovered-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.hovered.state-layer.opacity (Hovered) $hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity; /// md.comp.toolbar.vibrant.icon.color (Enabled) $icon-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.label-text.color (Enabled) $label-text-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.pressed.icon.color (Pressed) $pressed-icon-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.pressed.label-text.color (Pressed) $pressed-label-text-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.pressed.state-layer.color (Pressed) $pressed-state-layer-color: md-sys-color.$on-primary-container; /// md.comp.toolbar.vibrant.pressed.state-layer.opacity (Pressed) $pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity; /// md.comp.toolbar.vibrant.selected.button.container.color (Enabled) $selected-button-container-color: md-sys-color.$surface-container; /// md.comp.toolbar.vibrant.selected.focused.icon.color (Focused) $selected-focused-icon-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.focused.label-text.color (Focused) $selected-focused-label-text-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.focused.state-layer.color (Focused) $selected-focused-state-layer-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.hovered.icon.color (Hovered) $selected-hovered-icon-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.hovered.label-text.color (Hovered) $selected-hovered-label-text-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.hovered.state-layer.color (Hovered) $selected-hovered-state-layer-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.icon.color (Enabled) $selected-icon-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.label-text.color (Enabled) $selected-label-text-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.pressed.icon.color (Pressed) $selected-pressed-icon-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.pressed.label-text.color (Pressed) $selected-pressed-label-text-color: md-sys-color.$on-surface; /// md.comp.toolbar.vibrant.selected.pressed.state-layer.color (Pressed) $selected-pressed-state-layer-color: md-sys-color.$on-surface; ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-top-app-bar-large.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.top-app-bar.large.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 152px; /// md.comp.top-app-bar.large.leading-icon.size ([Deprecated] Enabled / [Deprecated] Leading icon) $leading-icon-size: 24px; /// md.comp.top-app-bar.large.trailing-icon.size ([Deprecated] Enabled / [Deprecated] Trailing icon) $trailing-icon-size: 24px; /// md.comp.top-app-bar.large.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$surface; /// md.comp.top-app-bar.large.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.top-app-bar.large.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.top-app-bar.large.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.top-app-bar.large.headline.color ([Deprecated] Enabled / [Deprecated] Headline) $headline-color: md-sys-color.$on-surface; /// md.comp.top-app-bar.large.headline.font ([Deprecated] Enabled / [Deprecated] Headline) $headline-font: md-sys-typescale.$headline-medium-font; /// md.comp.top-app-bar.large.headline.line-height ([Deprecated] Enabled / [Deprecated] Headline) $headline-line-height: md-sys-typescale.$headline-medium-line-height; /// md.comp.top-app-bar.large.headline.size ([Deprecated] Enabled / [Deprecated] Headline) $headline-size: md-sys-typescale.$headline-medium-size; /// md.comp.top-app-bar.large.headline.tracking ([Deprecated] Enabled / [Deprecated] Headline) $headline-tracking: md-sys-typescale.$headline-medium-tracking; /// md.comp.top-app-bar.large.headline.weight ([Deprecated] Enabled / [Deprecated] Headline) $headline-weight: md-sys-typescale.$headline-medium-weight; /// md.comp.top-app-bar.large.leading-icon.color ([Deprecated] Enabled / [Deprecated] Leading icon) $leading-icon-color: md-sys-color.$on-surface; /// md.comp.top-app-bar.large.trailing-icon.color ([Deprecated] Enabled / [Deprecated] Trailing icon) $trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.top-app-bar.large.headline.type ([Deprecated] Enabled / [Deprecated] Headline) @mixin headline-type { font-family: $headline-font; font-size: $headline-size; font-weight: $headline-weight; letter-spacing: $headline-tracking; line-height: $headline-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-top-app-bar-medium.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.top-app-bar.medium.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 112px; /// md.comp.top-app-bar.medium.leading-icon.size ([Deprecated] Enabled / [Deprecated] Leading icon) $leading-icon-size: 24px; /// md.comp.top-app-bar.medium.trailing-icon.size ([Deprecated] Enabled / [Deprecated] Trailing icon) $trailing-icon-size: 24px; /// md.comp.top-app-bar.medium.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$surface; /// md.comp.top-app-bar.medium.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.top-app-bar.medium.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.top-app-bar.medium.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.top-app-bar.medium.headline.color ([Deprecated] Enabled / [Deprecated] Headline) $headline-color: md-sys-color.$on-surface; /// md.comp.top-app-bar.medium.headline.font ([Deprecated] Enabled / [Deprecated] Headline) $headline-font: md-sys-typescale.$headline-small-font; /// md.comp.top-app-bar.medium.headline.line-height ([Deprecated] Enabled / [Deprecated] Headline) $headline-line-height: md-sys-typescale.$headline-small-line-height; /// md.comp.top-app-bar.medium.headline.size ([Deprecated] Enabled / [Deprecated] Headline) $headline-size: md-sys-typescale.$headline-small-size; /// md.comp.top-app-bar.medium.headline.tracking ([Deprecated] Enabled / [Deprecated] Headline) $headline-tracking: md-sys-typescale.$headline-small-tracking; /// md.comp.top-app-bar.medium.headline.weight ([Deprecated] Enabled / [Deprecated] Headline) $headline-weight: md-sys-typescale.$headline-small-weight; /// md.comp.top-app-bar.medium.leading-icon.color ([Deprecated] Enabled / [Deprecated] Leading icon) $leading-icon-color: md-sys-color.$on-surface; /// md.comp.top-app-bar.medium.trailing-icon.color ([Deprecated] Enabled / [Deprecated] Trailing icon) $trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.top-app-bar.medium.headline.type ([Deprecated] Enabled / [Deprecated] Headline) @mixin headline-type { font-family: $headline-font; font-size: $headline-size; font-weight: $headline-weight; letter-spacing: $headline-tracking; line-height: $headline-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-top-app-bar-small-centered.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.top-app-bar.small.centered.avatar.size (Enabled / Avatar) $avatar-size: 30px; /// md.comp.top-app-bar.small.centered.container.height (Enabled / Container) $container-height: 64px; /// md.comp.top-app-bar.small.centered.leading-icon.size (Enabled / Leading icon) $leading-icon-size: 24px; /// md.comp.top-app-bar.small.centered.trailing-icon.size (Enabled / Trailing icon) $trailing-icon-size: 24px; /// md.comp.top-app-bar.small.centered.avatar.shape (Enabled / Avatar) $avatar-shape: md-sys-shape.$corner-full; /// md.comp.top-app-bar.small.centered.container.color (Enabled / Container) $container-color: md-sys-color.$surface; /// md.comp.top-app-bar.small.centered.container.elevation (Enabled / Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.top-app-bar.small.centered.container.shape (Enabled / Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.top-app-bar.small.centered.container.surface-tint-layer.color (Enabled / Container) $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.top-app-bar.small.centered.headline.color (Enabled / Headline) $headline-color: md-sys-color.$on-surface; /// md.comp.top-app-bar.small.centered.headline.font (Enabled / Headline) $headline-font: md-sys-typescale.$title-large-font; /// md.comp.top-app-bar.small.centered.headline.line-height (Enabled / Headline) $headline-line-height: md-sys-typescale.$title-large-line-height; /// md.comp.top-app-bar.small.centered.headline.size (Enabled / Headline) $headline-size: md-sys-typescale.$title-large-size; /// md.comp.top-app-bar.small.centered.headline.tracking (Enabled / Headline) $headline-tracking: md-sys-typescale.$title-large-tracking; /// md.comp.top-app-bar.small.centered.headline.weight (Enabled / Headline) $headline-weight: md-sys-typescale.$title-large-weight; /// md.comp.top-app-bar.small.centered.leading-icon.color (Enabled / Leading icon) $leading-icon-color: md-sys-color.$on-surface; /// md.comp.top-app-bar.small.centered.on-scroll.container.color (Enabled / Container) $on-scroll-container-color: md-sys-color.$surface-container; /// md.comp.top-app-bar.small.centered.on-scroll.container.elevation (Enabled / On scroll) $on-scroll-container-elevation: md-sys-elevation.$level2; /// md.comp.top-app-bar.small.centered.on-scroll.container.shadow-color (Enabled / Container) /// /// @deprecated Bug: should not have been created. Remove any shadows on navigation bars. $on-scroll-container-shadow-color: md-sys-color.$shadow; /// md.comp.top-app-bar.small.centered.trailing-icon.color (Enabled / Trailing icon) $trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.top-app-bar.small.centered.headline.type (Enabled / Headline) @mixin headline-type { font-family: $headline-font; font-size: $headline-size; font-weight: $headline-weight; letter-spacing: $headline-tracking; line-height: $headline-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-comp-top-app-bar-small.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; @use 'md-sys-elevation'; @use 'md-sys-shape'; @use 'md-sys-typescale'; /// md.comp.top-app-bar.small.container.height ([Deprecated] Enabled / [Deprecated] Container) $container-height: 64px; /// md.comp.top-app-bar.small.leading-icon.size ([Deprecated] Enabled / [Deprecated] Leading icon) $leading-icon-size: 24px; /// md.comp.top-app-bar.small.trailing-icon.size ([Deprecated] Enabled / [Deprecated] Trailing icon) $trailing-icon-size: 24px; /// md.comp.top-app-bar.small.container.color ([Deprecated] Enabled / [Deprecated] Container) $container-color: md-sys-color.$surface; /// md.comp.top-app-bar.small.container.elevation ([Deprecated] Enabled / [Deprecated] Container) $container-elevation: md-sys-elevation.$level0; /// md.comp.top-app-bar.small.container.shape ([Deprecated] Enabled / [Deprecated] Container) $container-shape: md-sys-shape.$corner-none; /// md.comp.top-app-bar.small.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color. $container-surface-tint-layer-color: md-sys-color.$surface-tint; /// md.comp.top-app-bar.small.headline.color ([Deprecated] Enabled / [Deprecated] Headline) $headline-color: md-sys-color.$on-surface; /// md.comp.top-app-bar.small.headline.font ([Deprecated] Enabled / [Deprecated] Headline) $headline-font: md-sys-typescale.$title-large-font; /// md.comp.top-app-bar.small.headline.line-height ([Deprecated] Enabled / [Deprecated] Headline) $headline-line-height: md-sys-typescale.$title-large-line-height; /// md.comp.top-app-bar.small.headline.size ([Deprecated] Enabled / [Deprecated] Headline) $headline-size: md-sys-typescale.$title-large-size; /// md.comp.top-app-bar.small.headline.tracking ([Deprecated] Enabled / [Deprecated] Headline) $headline-tracking: md-sys-typescale.$title-large-tracking; /// md.comp.top-app-bar.small.headline.weight ([Deprecated] Enabled / [Deprecated] Headline) $headline-weight: md-sys-typescale.$title-large-weight; /// md.comp.top-app-bar.small.leading-icon.color ([Deprecated] Enabled / [Deprecated] Leading icon) $leading-icon-color: md-sys-color.$on-surface; /// md.comp.top-app-bar.small.on-scroll.container.color ([Deprecated] Enabled / [Deprecated] Container) $on-scroll-container-color: md-sys-color.$surface-container; /// md.comp.top-app-bar.small.on-scroll.container.elevation ([Deprecated] Enabled / [Deprecated] On scroll) $on-scroll-container-elevation: md-sys-elevation.$level2; /// md.comp.top-app-bar.small.on-scroll.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container) /// /// @deprecated Bug: should not have been created. Remove any shadows on navigation bars. $on-scroll-container-shadow-color: md-sys-color.$shadow; /// md.comp.top-app-bar.small.trailing-icon.color ([Deprecated] Enabled / [Deprecated] Trailing icon) $trailing-icon-color: md-sys-color.$on-surface-variant; /// md.comp.top-app-bar.small.headline.type ([Deprecated] Enabled / [Deprecated] Headline) @mixin headline-type { font-family: $headline-font; font-size: $headline-size; font-weight: $headline-weight; letter-spacing: $headline-tracking; line-height: $headline-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-ref-palette.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.ref.palette.black (Static palette / Static – Black white) $black: #000; /// md.ref.palette.blue-variant0 (Static palette / Static – Blue variant) $blue-variant0: #000; /// md.ref.palette.blue-variant10 (Static palette / Static – Blue variant) $blue-variant10: #001f2d; /// md.ref.palette.blue-variant100 (Static palette / Static – Blue variant) $blue-variant100: #fff; /// md.ref.palette.blue-variant20 (Static palette / Static – Blue variant) $blue-variant20: #003549; /// md.ref.palette.blue-variant30 (Static palette / Static – Blue variant) $blue-variant30: #004d68; /// md.ref.palette.blue-variant40 (Static palette / Static – Blue variant) $blue-variant40: #006788; /// md.ref.palette.blue-variant50 (Static palette / Static – Blue variant) $blue-variant50: #0081a8; /// md.ref.palette.blue-variant60 (Static palette / Static – Blue variant) $blue-variant60: #009dc9; /// md.ref.palette.blue-variant70 (Static palette / Static – Blue variant) $blue-variant70: #00bbea; /// md.ref.palette.blue-variant80 (Static palette / Static – Blue variant) $blue-variant80: #67d4ff; /// md.ref.palette.blue-variant90 (Static palette / Static – Blue variant) $blue-variant90: #bde9ff; /// md.ref.palette.blue-variant95 (Static palette / Static – Blue variant) $blue-variant95: #e0f4ff; /// md.ref.palette.blue-variant98 (Static palette / Static – Blue variant) $blue-variant98: #f4faff; /// md.ref.palette.blue0 (Static palette / Static – Blue) $blue0: #000; /// md.ref.palette.blue10 (Static palette / Static – Blue) $blue10: #001944; /// md.ref.palette.blue100 (Static palette / Static – Blue) $blue100: #fff; /// md.ref.palette.blue20 (Static palette / Static – Blue) $blue20: #012c6f; /// md.ref.palette.blue30 (Static palette / Static – Blue) $blue30: #04409f; /// md.ref.palette.blue40 (Static palette / Static – Blue) $blue40: #1157ce; /// md.ref.palette.blue50 (Static palette / Static – Blue) $blue50: #3271ea; /// md.ref.palette.blue60 (Static palette / Static – Blue) $blue60: #4e8ff8; /// md.ref.palette.blue70 (Static palette / Static – Blue) $blue70: #76acff; /// md.ref.palette.blue80 (Static palette / Static – Blue) $blue80: #a1c9ff; /// md.ref.palette.blue90 (Static palette / Static – Blue) $blue90: #d0e4ff; /// md.ref.palette.blue95 (Static palette / Static – Blue) $blue95: #e7f2ff; /// md.ref.palette.blue98 (Static palette / Static – Blue) $blue98: #f5faff; /// md.ref.palette.cyan0 (Static palette / Static – Cyan) $cyan0: #000; /// md.ref.palette.cyan10 (Static palette / Static – Cyan) $cyan10: #001f26; /// md.ref.palette.cyan100 (Static palette / Static – Cyan) $cyan100: #fff; /// md.ref.palette.cyan20 (Static palette / Static – Cyan) $cyan20: #003641; /// md.ref.palette.cyan30 (Static palette / Static – Cyan) $cyan30: #004e5d; /// md.ref.palette.cyan40 (Static palette / Static – Cyan) $cyan40: #00687c; /// md.ref.palette.cyan50 (Static palette / Static – Cyan) $cyan50: #00839b; /// md.ref.palette.cyan60 (Static palette / Static – Cyan) $cyan60: #009ebb; /// md.ref.palette.cyan70 (Static palette / Static – Cyan) $cyan70: #00bbdf; /// md.ref.palette.cyan80 (Static palette / Static – Cyan) $cyan80: #60d5f3; /// md.ref.palette.cyan90 (Static palette / Static – Cyan) $cyan90: #acedff; /// md.ref.palette.cyan95 (Static palette / Static – Cyan) $cyan95: #d8f6ff; /// md.ref.palette.cyan98 (Static palette / Static – Cyan) $cyan98: #f0fbff; /// md.ref.palette.error0 (Baseline palette / Baseline – Error) $error0: #000; /// md.ref.palette.error10 (Baseline palette / Baseline – Error) $error10: #410e0b; /// md.ref.palette.error100 (Baseline palette / Baseline – Error) $error100: #fff; /// md.ref.palette.error20 (Baseline palette / Baseline – Error) $error20: #601410; /// md.ref.palette.error30 (Baseline palette / Baseline – Error) $error30: #8c1d18; /// md.ref.palette.error40 (Baseline palette / Baseline – Error) $error40: #b3261e; /// md.ref.palette.error50 (Baseline palette / Baseline – Error) $error50: #dc362e; /// md.ref.palette.error60 (Baseline palette / Baseline – Error) $error60: #e46962; /// md.ref.palette.error70 (Baseline palette / Baseline – Error) $error70: #ec928e; /// md.ref.palette.error80 (Baseline palette / Baseline – Error) $error80: #f2b8b5; /// md.ref.palette.error90 (Baseline palette / Baseline – Error) $error90: #f9dedc; /// md.ref.palette.error95 (Baseline palette / Baseline – Error) $error95: #fceeee; /// md.ref.palette.error98 (Baseline palette / Baseline – Error) $error98: #fff8f7; /// md.ref.palette.error99 (Baseline palette / Baseline – Error) $error99: #fffbf9; /// md.ref.palette.green0 (Static palette / Static – Green) $green0: #000; /// md.ref.palette.green10 (Static palette / Static – Green) $green10: #002110; /// md.ref.palette.green100 (Static palette / Static – Green) $green100: #fff; /// md.ref.palette.green20 (Static palette / Static – Green) $green20: #00381f; /// md.ref.palette.green30 (Static palette / Static – Green) $green30: #00522c; /// md.ref.palette.green40 (Static palette / Static – Green) $green40: #006c35; /// md.ref.palette.green50 (Static palette / Static – Green) $green50: #128937; /// md.ref.palette.green60 (Static palette / Static – Green) $green60: #1aa64a; /// md.ref.palette.green70 (Static palette / Static – Green) $green70: #44c265; /// md.ref.palette.green80 (Static palette / Static – Green) $green80: #80da88; /// md.ref.palette.green90 (Static palette / Static – Green) $green90: #beefbb; /// md.ref.palette.green95 (Static palette / Static – Green) $green95: #ddf8d8; /// md.ref.palette.green98 (Static palette / Static – Green) $green98: #f2fcef; /// md.ref.palette.grey-variant0 (Static palette / Static – Grey variant) $grey-variant0: #000; /// md.ref.palette.grey-variant10 (Static palette / Static – Grey variant) $grey-variant10: #191d1c; /// md.ref.palette.grey-variant100 (Static palette / Static – Grey variant) $grey-variant100: #fff; /// md.ref.palette.grey-variant20 (Static palette / Static – Grey variant) $grey-variant20: #2d312f; /// md.ref.palette.grey-variant30 (Static palette / Static – Grey variant) $grey-variant30: #444746; /// md.ref.palette.grey-variant40 (Static palette / Static – Grey variant) $grey-variant40: #5c5f5e; /// md.ref.palette.grey-variant50 (Static palette / Static – Grey variant) $grey-variant50: #747775; /// md.ref.palette.grey-variant60 (Static palette / Static – Grey variant) $grey-variant60: #8e918f; /// md.ref.palette.grey-variant70 (Static palette / Static – Grey variant) $grey-variant70: #a9acaa; /// md.ref.palette.grey-variant80 (Static palette / Static – Grey variant) $grey-variant80: #c4c7c5; /// md.ref.palette.grey-variant90 (Static palette / Static – Grey variant) $grey-variant90: #e1e3e1; /// md.ref.palette.grey-variant95 (Static palette / Static – Grey variant) $grey-variant95: #eff2ef; /// md.ref.palette.grey-variant98 (Static palette / Static – Grey variant) $grey-variant98: #f7faf7; /// md.ref.palette.grey0 (Static palette / Static – Grey) $grey0: #000; /// md.ref.palette.grey10 (Static palette / Static – Grey) $grey10: #1b1b1c; /// md.ref.palette.grey100 (Static palette / Static – Grey) $grey100: #fff; /// md.ref.palette.grey20 (Static palette / Static – Grey) $grey20: #303030; /// md.ref.palette.grey30 (Static palette / Static – Grey) $grey30: #474747; /// md.ref.palette.grey40 (Static palette / Static – Grey) $grey40: #5e5e5e; /// md.ref.palette.grey50 (Static palette / Static – Grey) $grey50: #777; /// md.ref.palette.grey60 (Static palette / Static – Grey) $grey60: #919191; /// md.ref.palette.grey70 (Static palette / Static – Grey) $grey70: #ababab; /// md.ref.palette.grey80 (Static palette / Static – Grey) $grey80: #c7c7c7; /// md.ref.palette.grey90 (Static palette / Static – Grey) $grey90: #e3e3e3; /// md.ref.palette.grey95 (Static palette / Static – Grey) $grey95: #f2f2f2; /// md.ref.palette.grey98 (Static palette / Static – Grey) $grey98: #f9f9f9; /// md.ref.palette.neutral-variant0 (Baseline palette / Baseline – Neutral variant) $neutral-variant0: #000; /// md.ref.palette.neutral-variant10 (Baseline palette / Baseline – Neutral variant) $neutral-variant10: #1d1a22; /// md.ref.palette.neutral-variant100 (Baseline palette / Baseline – Neutral variant) $neutral-variant100: #fff; /// md.ref.palette.neutral-variant20 (Baseline palette / Baseline – Neutral variant) $neutral-variant20: #322f37; /// md.ref.palette.neutral-variant30 (Baseline palette / Baseline – Neutral variant) $neutral-variant30: #49454f; /// md.ref.palette.neutral-variant40 (Baseline palette / Baseline – Neutral variant) $neutral-variant40: #605d66; /// md.ref.palette.neutral-variant50 (Baseline palette / Baseline – Neutral variant) $neutral-variant50: #79747e; /// md.ref.palette.neutral-variant60 (Baseline palette / Baseline – Neutral variant) $neutral-variant60: #938f99; /// md.ref.palette.neutral-variant70 (Baseline palette / Baseline – Neutral variant) $neutral-variant70: #aea9b4; /// md.ref.palette.neutral-variant80 (Baseline palette / Baseline – Neutral variant) $neutral-variant80: #cac4d0; /// md.ref.palette.neutral-variant90 (Baseline palette / Baseline – Neutral variant) $neutral-variant90: #e7e0ec; /// md.ref.palette.neutral-variant95 (Baseline palette / Baseline – Neutral variant) $neutral-variant95: #f5eefa; /// md.ref.palette.neutral-variant98 (Baseline palette / Baseline – Neutral variant) $neutral-variant98: #fdf7ff; /// md.ref.palette.neutral-variant99 (Baseline palette / Baseline – Neutral variant) $neutral-variant99: #fffbfe; /// md.ref.palette.neutral0 (Baseline palette / Baseline – Neutral) $neutral0: #000; /// md.ref.palette.neutral10 (Baseline palette / Baseline – Neutral) $neutral10: #1d1b20; /// md.ref.palette.neutral100 (Baseline palette / Baseline – Neutral) $neutral100: #fff; /// md.ref.palette.neutral12 (Baseline palette / Baseline – Neutral) $neutral12: #211f26; /// md.ref.palette.neutral17 (Baseline palette / Baseline – Neutral) $neutral17: #2b2930; /// md.ref.palette.neutral20 (Baseline palette / Baseline – Neutral) $neutral20: #322f35; /// md.ref.palette.neutral22 (Baseline palette / Baseline – Neutral) $neutral22: #36343b; /// md.ref.palette.neutral24 (Baseline palette / Baseline – Neutral) $neutral24: #3b383e; /// md.ref.palette.neutral30 (Baseline palette / Baseline – Neutral) $neutral30: #48464c; /// md.ref.palette.neutral4 (Baseline palette / Baseline – Neutral) $neutral4: #0f0d13; /// md.ref.palette.neutral40 (Baseline palette / Baseline – Neutral) $neutral40: #605d64; /// md.ref.palette.neutral50 (Baseline palette / Baseline – Neutral) $neutral50: #79767d; /// md.ref.palette.neutral6 (Baseline palette / Baseline – Neutral) $neutral6: #141218; /// md.ref.palette.neutral60 (Baseline palette / Baseline – Neutral) $neutral60: #938f96; /// md.ref.palette.neutral70 (Baseline palette / Baseline – Neutral) $neutral70: #aea9b1; /// md.ref.palette.neutral80 (Baseline palette / Baseline – Neutral) $neutral80: #cac5cd; /// md.ref.palette.neutral87 (Baseline palette / Baseline – Neutral) $neutral87: #ded8e1; /// md.ref.palette.neutral90 (Baseline palette / Baseline – Neutral) $neutral90: #e6e0e9; /// md.ref.palette.neutral92 (Baseline palette / Baseline – Neutral) $neutral92: #ece6f0; /// md.ref.palette.neutral94 (Baseline palette / Baseline – Neutral) $neutral94: #f3edf7; /// md.ref.palette.neutral95 (Baseline palette / Baseline – Neutral) $neutral95: #f5eff7; /// md.ref.palette.neutral96 (Baseline palette / Baseline – Neutral) $neutral96: #f7f2fa; /// md.ref.palette.neutral98 (Baseline palette / Baseline – Neutral) $neutral98: #fef7ff; /// md.ref.palette.neutral99 (Baseline palette / Baseline – Neutral) $neutral99: #fffbff; /// md.ref.palette.orange0 (Static palette / Static – Orange) $orange0: #000; /// md.ref.palette.orange10 (Static palette / Static – Orange) $orange10: #321200; /// md.ref.palette.orange100 (Static palette / Static – Orange) $orange100: #fff; /// md.ref.palette.orange20 (Static palette / Static – Orange) $orange20: #522302; /// md.ref.palette.orange30 (Static palette / Static – Orange) $orange30: #753403; /// md.ref.palette.orange40 (Static palette / Static – Orange) $orange40: #9a4600; /// md.ref.palette.orange50 (Static palette / Static – Orange) $orange50: #c05a01; /// md.ref.palette.orange60 (Static palette / Static – Orange) $orange60: #e86e00; /// md.ref.palette.orange70 (Static palette / Static – Orange) $orange70: #ff8d41; /// md.ref.palette.orange80 (Static palette / Static – Orange) $orange80: #ffb683; /// md.ref.palette.orange90 (Static palette / Static – Orange) $orange90: #ffdcc3; /// md.ref.palette.orange95 (Static palette / Static – Orange) $orange95: #ffede1; /// md.ref.palette.orange98 (Static palette / Static – Orange) $orange98: #fff8f4; /// md.ref.palette.pink0 (Static palette / Static – Pink) $pink0: #000; /// md.ref.palette.pink10 (Static palette / Static – Pink) $pink10: #3d0023; /// md.ref.palette.pink100 (Static palette / Static – Pink) $pink100: #fff; /// md.ref.palette.pink20 (Static palette / Static – Pink) $pink20: #620438; /// md.ref.palette.pink30 (Static palette / Static – Pink) $pink30: #8d0053; /// md.ref.palette.pink40 (Static palette / Static – Pink) $pink40: #b60d6e; /// md.ref.palette.pink50 (Static palette / Static – Pink) $pink50: #dc258d; /// md.ref.palette.pink60 (Static palette / Static – Pink) $pink60: #f94aab; /// md.ref.palette.pink70 (Static palette / Static – Pink) $pink70: #ff7dd2; /// md.ref.palette.pink80 (Static palette / Static – Pink) $pink80: #ffaee4; /// md.ref.palette.pink90 (Static palette / Static – Pink) $pink90: #ffd8ef; /// md.ref.palette.pink95 (Static palette / Static – Pink) $pink95: #ffecf6; /// md.ref.palette.pink98 (Static palette / Static – Pink) $pink98: #fff7fc; /// md.ref.palette.primary0 (Baseline palette / Baseline – Primary) $primary0: #000; /// md.ref.palette.primary10 (Baseline palette / Baseline – Primary) $primary10: #21005d; /// md.ref.palette.primary100 (Baseline palette / Baseline – Primary) $primary100: #fff; /// md.ref.palette.primary20 (Baseline palette / Baseline – Primary) $primary20: #381e72; /// md.ref.palette.primary30 (Baseline palette / Baseline – Primary) $primary30: #4f378b; /// md.ref.palette.primary40 (Baseline palette / Baseline – Primary) $primary40: #6750a4; /// md.ref.palette.primary50 (Baseline palette / Baseline – Primary) $primary50: #7f67be; /// md.ref.palette.primary60 (Baseline palette / Baseline – Primary) $primary60: #9a82db; /// md.ref.palette.primary70 (Baseline palette / Baseline – Primary) $primary70: #b69df8; /// md.ref.palette.primary80 (Baseline palette / Baseline – Primary) $primary80: #d0bcff; /// md.ref.palette.primary90 (Baseline palette / Baseline – Primary) $primary90: #eaddff; /// md.ref.palette.primary95 (Baseline palette / Baseline – Primary) $primary95: #f6edff; /// md.ref.palette.primary98 (Baseline palette / Baseline – Primary) $primary98: #fef7ff; /// md.ref.palette.primary99 (Baseline palette / Baseline – Primary) $primary99: #fffbfe; /// md.ref.palette.purple0 (Static palette / Static – Purple) $purple0: #000; /// md.ref.palette.purple10 (Static palette / Static – Purple) $purple10: #280255; /// md.ref.palette.purple100 (Static palette / Static – Purple) $purple100: #fff; /// md.ref.palette.purple20 (Static palette / Static – Purple) $purple20: #400b84; /// md.ref.palette.purple30 (Static palette / Static – Purple) $purple30: #5629a4; /// md.ref.palette.purple40 (Static palette / Static – Purple) $purple40: #7438d2; /// md.ref.palette.purple50 (Static palette / Static – Purple) $purple50: #9254ea; /// md.ref.palette.purple60 (Static palette / Static – Purple) $purple60: #ad72ff; /// md.ref.palette.purple70 (Static palette / Static – Purple) $purple70: #c597ff; /// md.ref.palette.purple80 (Static palette / Static – Purple) $purple80: #d9bafd; /// md.ref.palette.purple90 (Static palette / Static – Purple) $purple90: #eedcfe; /// md.ref.palette.purple95 (Static palette / Static – Purple) $purple95: #f7ecfe; /// md.ref.palette.purple98 (Static palette / Static – Purple) $purple98: #fdf8ff; /// md.ref.palette.red0 (Static palette / Static – Red) $red0: #000; /// md.ref.palette.red10 (Static palette / Static – Red) $red10: #3a0907; /// md.ref.palette.red100 (Static palette / Static – Red) $red100: #fff; /// md.ref.palette.red20 (Static palette / Static – Red) $red20: #60150f; /// md.ref.palette.red30 (Static palette / Static – Red) $red30: #8a1a16; /// md.ref.palette.red40 (Static palette / Static – Red) $red40: #b3251e; /// md.ref.palette.red50 (Static palette / Static – Red) $red50: #db372d; /// md.ref.palette.red60 (Static palette / Static – Red) $red60: #f55e57; /// md.ref.palette.red70 (Static palette / Static – Red) $red70: #ff8983; /// md.ref.palette.red80 (Static palette / Static – Red) $red80: #ffb3ae; /// md.ref.palette.red90 (Static palette / Static – Red) $red90: #ffdadc; /// md.ref.palette.red95 (Static palette / Static – Red) $red95: #ffecee; /// md.ref.palette.red98 (Static palette / Static – Red) $red98: #fff8f8; /// md.ref.palette.secondary0 (Baseline palette / Baseline – Secondary) $secondary0: #000; /// md.ref.palette.secondary10 (Baseline palette / Baseline – Secondary) $secondary10: #1d192b; /// md.ref.palette.secondary100 (Baseline palette / Baseline – Secondary) $secondary100: #fff; /// md.ref.palette.secondary20 (Baseline palette / Baseline – Secondary) $secondary20: #332d41; /// md.ref.palette.secondary30 (Baseline palette / Baseline – Secondary) $secondary30: #4a4458; /// md.ref.palette.secondary40 (Baseline palette / Baseline – Secondary) $secondary40: #625b71; /// md.ref.palette.secondary50 (Baseline palette / Baseline – Secondary) $secondary50: #7a7289; /// md.ref.palette.secondary60 (Baseline palette / Baseline – Secondary) $secondary60: #958da5; /// md.ref.palette.secondary70 (Baseline palette / Baseline – Secondary) $secondary70: #b0a7c0; /// md.ref.palette.secondary80 (Baseline palette / Baseline – Secondary) $secondary80: #ccc2dc; /// md.ref.palette.secondary90 (Baseline palette / Baseline – Secondary) $secondary90: #e8def8; /// md.ref.palette.secondary95 (Baseline palette / Baseline – Secondary) $secondary95: #f6edff; /// md.ref.palette.secondary98 (Baseline palette / Baseline – Secondary) $secondary98: #fef7ff; /// md.ref.palette.secondary99 (Baseline palette / Baseline – Secondary) $secondary99: #fffbfe; /// md.ref.palette.tertiary0 (Baseline palette / Baseline – Tertiary) $tertiary0: #000; /// md.ref.palette.tertiary10 (Baseline palette / Baseline – Tertiary) $tertiary10: #31111d; /// md.ref.palette.tertiary100 (Baseline palette / Baseline – Tertiary) $tertiary100: #fff; /// md.ref.palette.tertiary20 (Baseline palette / Baseline – Tertiary) $tertiary20: #492532; /// md.ref.palette.tertiary30 (Baseline palette / Baseline – Tertiary) $tertiary30: #633b48; /// md.ref.palette.tertiary40 (Baseline palette / Baseline – Tertiary) $tertiary40: #7d5260; /// md.ref.palette.tertiary50 (Baseline palette / Baseline – Tertiary) $tertiary50: #986977; /// md.ref.palette.tertiary60 (Baseline palette / Baseline – Tertiary) $tertiary60: #b58392; /// md.ref.palette.tertiary70 (Baseline palette / Baseline – Tertiary) $tertiary70: #d29dac; /// md.ref.palette.tertiary80 (Baseline palette / Baseline – Tertiary) $tertiary80: #efb8c8; /// md.ref.palette.tertiary90 (Baseline palette / Baseline – Tertiary) $tertiary90: #ffd8e4; /// md.ref.palette.tertiary95 (Baseline palette / Baseline – Tertiary) $tertiary95: #ffecf1; /// md.ref.palette.tertiary98 (Baseline palette / Baseline – Tertiary) $tertiary98: #fff8f8; /// md.ref.palette.tertiary99 (Baseline palette / Baseline – Tertiary) $tertiary99: #fffbfa; /// md.ref.palette.white (Static palette / Static – Black white) $white: #fff; /// md.ref.palette.yellow0 (Static palette / Static – Yellow) $yellow0: #000; /// md.ref.palette.yellow10 (Static palette / Static – Yellow) $yellow10: #2f1400; /// md.ref.palette.yellow100 (Static palette / Static – Yellow) $yellow100: #fff; /// md.ref.palette.yellow20 (Static palette / Static – Yellow) $yellow20: #4d2600; /// md.ref.palette.yellow30 (Static palette / Static – Yellow) $yellow30: #6d3a01; /// md.ref.palette.yellow40 (Static palette / Static – Yellow) $yellow40: #8f4e06; /// md.ref.palette.yellow50 (Static palette / Static – Yellow) $yellow50: #b16300; /// md.ref.palette.yellow60 (Static palette / Static – Yellow) $yellow60: #d37b00; /// md.ref.palette.yellow70 (Static palette / Static – Yellow) $yellow70: #ef9800; /// md.ref.palette.yellow80 (Static palette / Static – Yellow) $yellow80: #fcbd00; /// md.ref.palette.yellow90 (Static palette / Static – Yellow) $yellow90: #ffe07c; /// md.ref.palette.yellow95 (Static palette / Static – Yellow) $yellow95: #fff2b4; /// md.ref.palette.yellow98 (Static palette / Static – Yellow) $yellow98: #fffade; ================================================ FILE: tokens/versions/v30_0/sass/_md-ref-typeface.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.ref.typeface.brand (Brand) $brand: Roboto; /// md.ref.typeface.plain (Plain) $plain: Roboto; /// md.ref.typeface.weight-bold (Weight) $weight-bold: 700; /// md.ref.typeface.weight-medium (Weight) $weight-medium: 500; /// md.ref.typeface.weight-regular (Weight) $weight-regular: 400; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-color.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-palette'; /// md.sys.color.background (Add-ons / Add-on surface colors) /// /// Note: Background is a legacy color role. It is recommended to use Surface instead of Background. $background: md-ref-palette.$neutral98; /// md.sys.color.error (Error colors) /// /// Indicates errors, such as invalid input in a date picker $error: md-ref-palette.$error40; /// md.sys.color.error-container (Error colors) /// /// Container color for error messages and badges $error-container: md-ref-palette.$error90; /// md.sys.color.inverse-on-surface (Surface colors) /// /// Used for text and icons shown against the inverse surface color $inverse-on-surface: md-ref-palette.$neutral95; /// md.sys.color.inverse-primary (Add-ons / Add-on primary colors) /// /// Displays opposite of the primary color $inverse-primary: md-ref-palette.$primary80; /// md.sys.color.inverse-surface (Surface colors) /// /// Displays opposite color of the surrounding UI $inverse-surface: md-ref-palette.$neutral20; /// md.sys.color.on-background (Add-ons / Add-on surface colors) /// /// Used for text and icons shown against the background color $on-background: md-ref-palette.$neutral10; /// md.sys.color.on-error (Error colors) /// /// Used for text and icons on the error color $on-error: md-ref-palette.$error100; /// md.sys.color.on-error-container (Error colors) /// /// Used for text and icons on the error-container color $on-error-container: md-ref-palette.$error30; /// md.sys.color.on-primary (Primary colors) /// /// Text and icons shown against the primary color $on-primary: md-ref-palette.$primary100; /// md.sys.color.on-primary-container (Primary colors) /// /// Contrast-passing color shown against the primary container $on-primary-container: md-ref-palette.$primary30; /// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors) /// /// Used for text and icons shown against the primary fixed color $on-primary-fixed: md-ref-palette.$primary10; /// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors) /// /// Stronger hue variant used for text and icons shown against the primary fixed color $on-primary-fixed-variant: md-ref-palette.$primary30; /// md.sys.color.on-secondary (Secondary colors) /// /// Text and icons shown against the secondary color $on-secondary: md-ref-palette.$secondary100; /// md.sys.color.on-secondary-container (Secondary colors) /// /// Contrast-passing color shown against the secondary container $on-secondary-container: md-ref-palette.$secondary30; /// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors) /// /// Used for text and icons shown against the secondary fixed color $on-secondary-fixed: md-ref-palette.$secondary10; /// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors) /// /// Stronger hue variant used for text and icons shown against the secondary fixed color $on-secondary-fixed-variant: md-ref-palette.$secondary30; /// md.sys.color.on-surface (Surface colors) /// /// Text and icons shown against the surface color $on-surface: md-ref-palette.$neutral10; /// md.sys.color.on-surface-variant (Surface colors) /// /// For text and icons to indicate active or inactive component state $on-surface-variant: md-ref-palette.$neutral-variant30; /// md.sys.color.on-tertiary (Tertiary colors) /// /// Text and icons shown against the tertiary color $on-tertiary: md-ref-palette.$tertiary100; /// md.sys.color.on-tertiary-container (Tertiary colors) /// /// Contrast-passing color shown against the tertiary container $on-tertiary-container: md-ref-palette.$tertiary30; /// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Used for text and icons shown against the tertiary fixed color $on-tertiary-fixed: md-ref-palette.$tertiary10; /// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors) /// /// Stronger hue variant used for text and icons shown against the tertiary fixed color $on-tertiary-fixed-variant: md-ref-palette.$tertiary30; /// md.sys.color.outline (Outline colors) /// /// Subtle color used for boundaries $outline: md-ref-palette.$neutral-variant50; /// md.sys.color.outline-variant (Outline colors) /// /// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider. $outline-variant: md-ref-palette.$neutral-variant80; /// md.sys.color.primary (Primary colors) /// /// Main color used across screens and components $primary: md-ref-palette.$primary40; /// md.sys.color.primary-container (Primary colors) /// /// Standout container color for key components $primary-container: md-ref-palette.$primary90; /// md.sys.color.primary-fixed (Add-ons / Add-on primary colors) /// /// Primary color that doesn't change for light or dark theme. $primary-fixed: md-ref-palette.$primary90; /// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors) /// /// Dimmer version of primary fixed color that doesn't change for light or dark theme. $primary-fixed-dim: md-ref-palette.$primary80; /// md.sys.color.scrim (Add-ons / Add-on surface colors) /// /// Used for scrims which help separate floating components from the background. $scrim: md-ref-palette.$neutral0; /// md.sys.color.secondary (Secondary colors) /// /// Accent color used across screens and components $secondary: md-ref-palette.$secondary40; /// md.sys.color.secondary-container (Secondary colors) /// /// Less prominent container color, for components like tonal buttons $secondary-container: md-ref-palette.$secondary90; /// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors) /// /// Secondary color that doesn't change for light or dark theme. $secondary-fixed: md-ref-palette.$secondary90; /// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors) /// /// Dimmer version of secondary fixed color that doesn't change for light or dark theme. $secondary-fixed-dim: md-ref-palette.$secondary80; /// md.sys.color.shadow (Add-ons / Add-on surface colors) /// /// For shadows applied to elevated components $shadow: md-ref-palette.$neutral0; /// md.sys.color.surface (Surface colors) /// /// Surface color for components like cards, sheets, and menus $surface: md-ref-palette.$neutral98; /// md.sys.color.surface-bright (Add-ons / Add-on surface colors) /// /// Surface that is brighter in both light and dark theme. $surface-bright: md-ref-palette.$neutral98; /// md.sys.color.surface-container (Surface colors) $surface-container: md-ref-palette.$neutral94; /// md.sys.color.surface-container-high (Surface colors) $surface-container-high: md-ref-palette.$neutral92; /// md.sys.color.surface-container-highest (Surface colors) $surface-container-highest: md-ref-palette.$neutral90; /// md.sys.color.surface-container-low (Surface colors) $surface-container-low: md-ref-palette.$neutral96; /// md.sys.color.surface-container-lowest (Surface colors) $surface-container-lowest: md-ref-palette.$neutral100; /// md.sys.color.surface-dim (Add-ons / Add-on surface colors) /// /// Surface that is dimmer in both light and dark theme. $surface-dim: md-ref-palette.$neutral87; /// md.sys.color.surface-variant (Surface colors) /// /// Alternate surface color, can be used for active states $surface-variant: md-ref-palette.$neutral-variant90; /// md.sys.color.tertiary (Tertiary colors) /// /// Contrasting accent color used across screens and components $tertiary: md-ref-palette.$tertiary40; /// md.sys.color.tertiary-container (Tertiary colors) /// /// Contrasting container color, for components like input fields $tertiary-container: md-ref-palette.$tertiary90; /// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Tertiary color that doesn't change for light or dark theme. $tertiary-fixed: md-ref-palette.$tertiary90; /// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors) /// /// Dimmer version of tertiary fixed color that doesn't change for light or dark theme. $tertiary-fixed-dim: md-ref-palette.$tertiary80; /// md.sys.color.surface-tint (Surface colors) /// /// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors $surface-tint: $primary; /// md.sys.color.surface-tint-color (Surface colors) /// /// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name $surface-tint-color: $primary; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-color__dark.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-palette'; /// md.sys.color.background (Add-ons / Add-on surface colors) /// /// Note: Background is a legacy color role. It is recommended to use Surface instead of Background. $background: md-ref-palette.$neutral6; /// md.sys.color.error (Error colors) /// /// Indicates errors, such as invalid input in a date picker $error: md-ref-palette.$error80; /// md.sys.color.error-container (Error colors) /// /// Container color for error messages and badges $error-container: md-ref-palette.$error30; /// md.sys.color.inverse-on-surface (Surface colors) /// /// Used for text and icons shown against the inverse surface color $inverse-on-surface: md-ref-palette.$neutral20; /// md.sys.color.inverse-primary (Add-ons / Add-on primary colors) /// /// Displays opposite of the primary color $inverse-primary: md-ref-palette.$primary40; /// md.sys.color.inverse-surface (Surface colors) /// /// Displays opposite color of the surrounding UI $inverse-surface: md-ref-palette.$neutral90; /// md.sys.color.on-background (Add-ons / Add-on surface colors) /// /// Used for text and icons shown against the background color $on-background: md-ref-palette.$neutral90; /// md.sys.color.on-error (Error colors) /// /// Used for text and icons on the error color $on-error: md-ref-palette.$error20; /// md.sys.color.on-error-container (Error colors) /// /// Used for text and icons on the error-container color $on-error-container: md-ref-palette.$error90; /// md.sys.color.on-primary (Primary colors) /// /// Text and icons shown against the primary color $on-primary: md-ref-palette.$primary20; /// md.sys.color.on-primary-container (Primary colors) /// /// Contrast-passing color shown against the primary container $on-primary-container: md-ref-palette.$primary90; /// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors) /// /// Used for text and icons shown against the primary fixed color $on-primary-fixed: md-ref-palette.$primary10; /// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors) /// /// Stronger hue variant used for text and icons shown against the primary fixed color $on-primary-fixed-variant: md-ref-palette.$primary30; /// md.sys.color.on-secondary (Secondary colors) /// /// Text and icons shown against the secondary color $on-secondary: md-ref-palette.$secondary20; /// md.sys.color.on-secondary-container (Secondary colors) /// /// Contrast-passing color shown against the secondary container $on-secondary-container: md-ref-palette.$secondary90; /// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors) /// /// Used for text and icons shown against the secondary fixed color $on-secondary-fixed: md-ref-palette.$secondary10; /// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors) /// /// Stronger hue variant used for text and icons shown against the secondary fixed color $on-secondary-fixed-variant: md-ref-palette.$secondary30; /// md.sys.color.on-surface (Surface colors) /// /// Text and icons shown against the surface color $on-surface: md-ref-palette.$neutral90; /// md.sys.color.on-surface-variant (Surface colors) /// /// For text and icons to indicate active or inactive component state $on-surface-variant: md-ref-palette.$neutral-variant80; /// md.sys.color.on-tertiary (Tertiary colors) /// /// Text and icons shown against the tertiary color $on-tertiary: md-ref-palette.$tertiary20; /// md.sys.color.on-tertiary-container (Tertiary colors) /// /// Contrast-passing color shown against the tertiary container $on-tertiary-container: md-ref-palette.$tertiary90; /// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Used for text and icons shown against the tertiary fixed color $on-tertiary-fixed: md-ref-palette.$tertiary10; /// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors) /// /// Stronger hue variant used for text and icons shown against the tertiary fixed color $on-tertiary-fixed-variant: md-ref-palette.$tertiary30; /// md.sys.color.outline (Outline colors) /// /// Subtle color used for boundaries $outline: md-ref-palette.$neutral-variant60; /// md.sys.color.outline-variant (Outline colors) /// /// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider. $outline-variant: md-ref-palette.$neutral-variant30; /// md.sys.color.primary (Primary colors) /// /// Main color used across screens and components $primary: md-ref-palette.$primary80; /// md.sys.color.primary-container (Primary colors) /// /// Standout container color for key components $primary-container: md-ref-palette.$primary30; /// md.sys.color.primary-fixed (Add-ons / Add-on primary colors) /// /// Primary color that doesn't change for light or dark theme. $primary-fixed: md-ref-palette.$primary90; /// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors) /// /// Dimmer version of primary fixed color that doesn't change for light or dark theme. $primary-fixed-dim: md-ref-palette.$primary80; /// md.sys.color.scrim (Add-ons / Add-on surface colors) /// /// Used for scrims which help separate floating components from the background. $scrim: md-ref-palette.$neutral0; /// md.sys.color.secondary (Secondary colors) /// /// Accent color used across screens and components $secondary: md-ref-palette.$secondary80; /// md.sys.color.secondary-container (Secondary colors) /// /// Less prominent container color, for components like tonal buttons $secondary-container: md-ref-palette.$secondary30; /// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors) /// /// Secondary color that doesn't change for light or dark theme. $secondary-fixed: md-ref-palette.$secondary90; /// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors) /// /// Dimmer version of secondary fixed color that doesn't change for light or dark theme. $secondary-fixed-dim: md-ref-palette.$secondary80; /// md.sys.color.shadow (Add-ons / Add-on surface colors) /// /// For shadows applied to elevated components $shadow: md-ref-palette.$neutral0; /// md.sys.color.surface (Surface colors) /// /// Surface color for components like cards, sheets, and menus $surface: md-ref-palette.$neutral6; /// md.sys.color.surface-bright (Add-ons / Add-on surface colors) /// /// Surface that is brighter in both light and dark theme. $surface-bright: md-ref-palette.$neutral24; /// md.sys.color.surface-container (Surface colors) $surface-container: md-ref-palette.$neutral12; /// md.sys.color.surface-container-high (Surface colors) $surface-container-high: md-ref-palette.$neutral17; /// md.sys.color.surface-container-highest (Surface colors) $surface-container-highest: md-ref-palette.$neutral22; /// md.sys.color.surface-container-low (Surface colors) $surface-container-low: md-ref-palette.$neutral10; /// md.sys.color.surface-container-lowest (Surface colors) $surface-container-lowest: md-ref-palette.$neutral4; /// md.sys.color.surface-dim (Add-ons / Add-on surface colors) /// /// Surface that is dimmer in both light and dark theme. $surface-dim: md-ref-palette.$neutral6; /// md.sys.color.surface-variant (Surface colors) /// /// Alternate surface color, can be used for active states $surface-variant: md-ref-palette.$neutral-variant30; /// md.sys.color.tertiary (Tertiary colors) /// /// Contrasting accent color used across screens and components $tertiary: md-ref-palette.$tertiary80; /// md.sys.color.tertiary-container (Tertiary colors) /// /// Contrasting container color, for components like input fields $tertiary-container: md-ref-palette.$tertiary30; /// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Tertiary color that doesn't change for light or dark theme. $tertiary-fixed: md-ref-palette.$tertiary90; /// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors) /// /// Dimmer version of tertiary fixed color that doesn't change for light or dark theme. $tertiary-fixed-dim: md-ref-palette.$tertiary80; /// md.sys.color.surface-tint (Surface colors) /// /// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors $surface-tint: $primary; /// md.sys.color.surface-tint-color (Surface colors) /// /// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name $surface-tint-color: $primary; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-color__dark__high-contrast.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-palette'; /// md.sys.color.background (Add-ons / Add-on surface colors) /// /// Note: Background is a legacy color role. It is recommended to use Surface instead of Background. $background: md-ref-palette.$neutral6; /// md.sys.color.error (Error colors) /// /// Indicates errors, such as invalid input in a date picker $error: md-ref-palette.$error95; /// md.sys.color.error-container (Error colors) /// /// Container color for error messages and badges $error-container: md-ref-palette.$error80; /// md.sys.color.inverse-on-surface (Surface colors) /// /// Used for text and icons shown against the inverse surface color $inverse-on-surface: md-ref-palette.$neutral0; /// md.sys.color.inverse-primary (Add-ons / Add-on primary colors) /// /// Displays opposite of the primary color $inverse-primary: md-ref-palette.$primary20; /// md.sys.color.inverse-surface (Surface colors) /// /// Displays opposite color of the surrounding UI $inverse-surface: md-ref-palette.$neutral90; /// md.sys.color.on-background (Add-ons / Add-on surface colors) /// /// Used for text and icons shown against the background color $on-background: md-ref-palette.$neutral100; /// md.sys.color.on-error (Error colors) /// /// Used for text and icons on the error color $on-error: md-ref-palette.$error0; /// md.sys.color.on-error-container (Error colors) /// /// Used for text and icons on the error-container color $on-error-container: md-ref-palette.$error0; /// md.sys.color.on-primary (Primary colors) /// /// Text and icons shown against the primary color $on-primary: md-ref-palette.$primary0; /// md.sys.color.on-primary-container (Primary colors) /// /// Contrast-passing color shown against the primary container $on-primary-container: md-ref-palette.$primary0; /// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors) /// /// Used for text and icons shown against the primary fixed color $on-primary-fixed: md-ref-palette.$primary0; /// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors) /// /// Stronger hue variant used for text and icons shown against the primary fixed color $on-primary-fixed-variant: md-ref-palette.$primary0; /// md.sys.color.on-secondary (Secondary colors) /// /// Text and icons shown against the secondary color $on-secondary: md-ref-palette.$secondary0; /// md.sys.color.on-secondary-container (Secondary colors) /// /// Contrast-passing color shown against the secondary container $on-secondary-container: md-ref-palette.$secondary0; /// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors) /// /// Used for text and icons shown against the secondary fixed color $on-secondary-fixed: md-ref-palette.$secondary0; /// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors) /// /// Stronger hue variant used for text and icons shown against the secondary fixed color $on-secondary-fixed-variant: md-ref-palette.$secondary0; /// md.sys.color.on-surface (Surface colors) /// /// Text and icons shown against the surface color $on-surface: md-ref-palette.$neutral100; /// md.sys.color.on-surface-variant (Surface colors) /// /// For text and icons to indicate active or inactive component state $on-surface-variant: md-ref-palette.$neutral-variant100; /// md.sys.color.on-tertiary (Tertiary colors) /// /// Text and icons shown against the tertiary color $on-tertiary: md-ref-palette.$tertiary0; /// md.sys.color.on-tertiary-container (Tertiary colors) /// /// Contrast-passing color shown against the tertiary container $on-tertiary-container: md-ref-palette.$tertiary0; /// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Used for text and icons shown against the tertiary fixed color $on-tertiary-fixed: md-ref-palette.$tertiary0; /// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors) /// /// Stronger hue variant used for text and icons shown against the tertiary fixed color $on-tertiary-fixed-variant: md-ref-palette.$tertiary0; /// md.sys.color.outline (Outline colors) /// /// Subtle color used for boundaries $outline: md-ref-palette.$neutral-variant95; /// md.sys.color.outline-variant (Outline colors) /// /// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider. $outline-variant: md-ref-palette.$neutral-variant80; /// md.sys.color.primary (Primary colors) /// /// Main color used across screens and components $primary: md-ref-palette.$primary95; /// md.sys.color.primary-container (Primary colors) /// /// Standout container color for key components $primary-container: md-ref-palette.$primary80; /// md.sys.color.primary-fixed (Add-ons / Add-on primary colors) /// /// Primary color that doesn't change for light or dark theme. $primary-fixed: md-ref-palette.$primary90; /// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors) /// /// Dimmer version of primary fixed color that doesn't change for light or dark theme. $primary-fixed-dim: md-ref-palette.$primary80; /// md.sys.color.scrim (Add-ons / Add-on surface colors) /// /// Used for scrims which help separate floating components from the background. $scrim: md-ref-palette.$neutral0; /// md.sys.color.secondary (Secondary colors) /// /// Accent color used across screens and components $secondary: md-ref-palette.$secondary95; /// md.sys.color.secondary-container (Secondary colors) /// /// Less prominent container color, for components like tonal buttons $secondary-container: md-ref-palette.$secondary80; /// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors) /// /// Secondary color that doesn't change for light or dark theme. $secondary-fixed: md-ref-palette.$secondary90; /// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors) /// /// Dimmer version of secondary fixed color that doesn't change for light or dark theme. $secondary-fixed-dim: md-ref-palette.$secondary80; /// md.sys.color.shadow (Add-ons / Add-on surface colors) /// /// For shadows applied to elevated components $shadow: md-ref-palette.$neutral0; /// md.sys.color.surface (Surface colors) /// /// Surface color for components like cards, sheets, and menus $surface: md-ref-palette.$neutral6; /// md.sys.color.surface-bright (Add-ons / Add-on surface colors) /// /// Surface that is brighter in both light and dark theme. $surface-bright: md-ref-palette.$neutral24; /// md.sys.color.surface-container (Surface colors) $surface-container: md-ref-palette.$neutral12; /// md.sys.color.surface-container-high (Surface colors) $surface-container-high: md-ref-palette.$neutral17; /// md.sys.color.surface-container-highest (Surface colors) $surface-container-highest: md-ref-palette.$neutral22; /// md.sys.color.surface-container-low (Surface colors) $surface-container-low: md-ref-palette.$neutral10; /// md.sys.color.surface-container-lowest (Surface colors) $surface-container-lowest: md-ref-palette.$neutral4; /// md.sys.color.surface-dim (Add-ons / Add-on surface colors) /// /// Surface that is dimmer in both light and dark theme. $surface-dim: md-ref-palette.$neutral6; /// md.sys.color.surface-variant (Surface colors) /// /// Alternate surface color, can be used for active states $surface-variant: md-ref-palette.$neutral-variant30; /// md.sys.color.tertiary (Tertiary colors) /// /// Contrasting accent color used across screens and components $tertiary: md-ref-palette.$tertiary95; /// md.sys.color.tertiary-container (Tertiary colors) /// /// Contrasting container color, for components like input fields $tertiary-container: md-ref-palette.$tertiary80; /// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Tertiary color that doesn't change for light or dark theme. $tertiary-fixed: md-ref-palette.$tertiary90; /// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors) /// /// Dimmer version of tertiary fixed color that doesn't change for light or dark theme. $tertiary-fixed-dim: md-ref-palette.$tertiary80; /// md.sys.color.surface-tint (Surface colors) /// /// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors $surface-tint: $primary; /// md.sys.color.surface-tint-color (Surface colors) /// /// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name $surface-tint-color: $primary; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-color__dark__medium-contrast.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-palette'; /// md.sys.color.background (Add-ons / Add-on surface colors) /// /// Note: Background is a legacy color role. It is recommended to use Surface instead of Background. $background: md-ref-palette.$neutral6; /// md.sys.color.error (Error colors) /// /// Indicates errors, such as invalid input in a date picker $error: md-ref-palette.$error90; /// md.sys.color.error-container (Error colors) /// /// Container color for error messages and badges $error-container: md-ref-palette.$error60; /// md.sys.color.inverse-on-surface (Surface colors) /// /// Used for text and icons shown against the inverse surface color $inverse-on-surface: md-ref-palette.$neutral10; /// md.sys.color.inverse-primary (Add-ons / Add-on primary colors) /// /// Displays opposite of the primary color $inverse-primary: md-ref-palette.$primary30; /// md.sys.color.inverse-surface (Surface colors) /// /// Displays opposite color of the surrounding UI $inverse-surface: md-ref-palette.$neutral90; /// md.sys.color.on-background (Add-ons / Add-on surface colors) /// /// Used for text and icons shown against the background color $on-background: md-ref-palette.$neutral100; /// md.sys.color.on-error (Error colors) /// /// Used for text and icons on the error color $on-error: md-ref-palette.$error10; /// md.sys.color.on-error-container (Error colors) /// /// Used for text and icons on the error-container color $on-error-container: md-ref-palette.$error0; /// md.sys.color.on-primary (Primary colors) /// /// Text and icons shown against the primary color $on-primary: md-ref-palette.$primary10; /// md.sys.color.on-primary-container (Primary colors) /// /// Contrast-passing color shown against the primary container $on-primary-container: md-ref-palette.$primary0; /// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors) /// /// Used for text and icons shown against the primary fixed color $on-primary-fixed: md-ref-palette.$primary0; /// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors) /// /// Stronger hue variant used for text and icons shown against the primary fixed color $on-primary-fixed-variant: md-ref-palette.$primary20; /// md.sys.color.on-secondary (Secondary colors) /// /// Text and icons shown against the secondary color $on-secondary: md-ref-palette.$secondary10; /// md.sys.color.on-secondary-container (Secondary colors) /// /// Contrast-passing color shown against the secondary container $on-secondary-container: md-ref-palette.$secondary0; /// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors) /// /// Used for text and icons shown against the secondary fixed color $on-secondary-fixed: md-ref-palette.$secondary0; /// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors) /// /// Stronger hue variant used for text and icons shown against the secondary fixed color $on-secondary-fixed-variant: md-ref-palette.$secondary20; /// md.sys.color.on-surface (Surface colors) /// /// Text and icons shown against the surface color $on-surface: md-ref-palette.$neutral100; /// md.sys.color.on-surface-variant (Surface colors) /// /// For text and icons to indicate active or inactive component state $on-surface-variant: md-ref-palette.$neutral-variant90; /// md.sys.color.on-tertiary (Tertiary colors) /// /// Text and icons shown against the tertiary color $on-tertiary: md-ref-palette.$tertiary10; /// md.sys.color.on-tertiary-container (Tertiary colors) /// /// Contrast-passing color shown against the tertiary container $on-tertiary-container: md-ref-palette.$tertiary0; /// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Used for text and icons shown against the tertiary fixed color $on-tertiary-fixed: md-ref-palette.$tertiary0; /// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors) /// /// Stronger hue variant used for text and icons shown against the tertiary fixed color $on-tertiary-fixed-variant: md-ref-palette.$tertiary20; /// md.sys.color.outline (Outline colors) /// /// Subtle color used for boundaries $outline: md-ref-palette.$neutral-variant70; /// md.sys.color.outline-variant (Outline colors) /// /// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider. $outline-variant: md-ref-palette.$neutral-variant60; /// md.sys.color.primary (Primary colors) /// /// Main color used across screens and components $primary: md-ref-palette.$primary90; /// md.sys.color.primary-container (Primary colors) /// /// Standout container color for key components $primary-container: md-ref-palette.$primary60; /// md.sys.color.primary-fixed (Add-ons / Add-on primary colors) /// /// Primary color that doesn't change for light or dark theme. $primary-fixed: md-ref-palette.$primary90; /// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors) /// /// Dimmer version of primary fixed color that doesn't change for light or dark theme. $primary-fixed-dim: md-ref-palette.$primary80; /// md.sys.color.scrim (Add-ons / Add-on surface colors) /// /// Used for scrims which help separate floating components from the background. $scrim: md-ref-palette.$neutral0; /// md.sys.color.secondary (Secondary colors) /// /// Accent color used across screens and components $secondary: md-ref-palette.$secondary90; /// md.sys.color.secondary-container (Secondary colors) /// /// Less prominent container color, for components like tonal buttons $secondary-container: md-ref-palette.$secondary60; /// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors) /// /// Secondary color that doesn't change for light or dark theme. $secondary-fixed: md-ref-palette.$secondary90; /// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors) /// /// Dimmer version of secondary fixed color that doesn't change for light or dark theme. $secondary-fixed-dim: md-ref-palette.$secondary80; /// md.sys.color.shadow (Add-ons / Add-on surface colors) /// /// For shadows applied to elevated components $shadow: md-ref-palette.$neutral0; /// md.sys.color.surface (Surface colors) /// /// Surface color for components like cards, sheets, and menus $surface: md-ref-palette.$neutral6; /// md.sys.color.surface-bright (Add-ons / Add-on surface colors) /// /// Surface that is brighter in both light and dark theme. $surface-bright: md-ref-palette.$neutral24; /// md.sys.color.surface-container (Surface colors) $surface-container: md-ref-palette.$neutral12; /// md.sys.color.surface-container-high (Surface colors) $surface-container-high: md-ref-palette.$neutral17; /// md.sys.color.surface-container-highest (Surface colors) $surface-container-highest: md-ref-palette.$neutral22; /// md.sys.color.surface-container-low (Surface colors) $surface-container-low: md-ref-palette.$neutral10; /// md.sys.color.surface-container-lowest (Surface colors) $surface-container-lowest: md-ref-palette.$neutral4; /// md.sys.color.surface-dim (Add-ons / Add-on surface colors) /// /// Surface that is dimmer in both light and dark theme. $surface-dim: md-ref-palette.$neutral6; /// md.sys.color.surface-variant (Surface colors) /// /// Alternate surface color, can be used for active states $surface-variant: md-ref-palette.$neutral-variant30; /// md.sys.color.tertiary (Tertiary colors) /// /// Contrasting accent color used across screens and components $tertiary: md-ref-palette.$tertiary90; /// md.sys.color.tertiary-container (Tertiary colors) /// /// Contrasting container color, for components like input fields $tertiary-container: md-ref-palette.$tertiary60; /// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Tertiary color that doesn't change for light or dark theme. $tertiary-fixed: md-ref-palette.$tertiary90; /// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors) /// /// Dimmer version of tertiary fixed color that doesn't change for light or dark theme. $tertiary-fixed-dim: md-ref-palette.$tertiary80; /// md.sys.color.surface-tint (Surface colors) /// /// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors $surface-tint: $primary; /// md.sys.color.surface-tint-color (Surface colors) /// /// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name $surface-tint-color: $primary; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-color__high-contrast.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-palette'; /// md.sys.color.background (Add-ons / Add-on surface colors) /// /// Note: Background is a legacy color role. It is recommended to use Surface instead of Background. $background: md-ref-palette.$neutral98; /// md.sys.color.error (Error colors) /// /// Indicates errors, such as invalid input in a date picker $error: md-ref-palette.$error20; /// md.sys.color.error-container (Error colors) /// /// Container color for error messages and badges $error-container: md-ref-palette.$error30; /// md.sys.color.inverse-on-surface (Surface colors) /// /// Used for text and icons shown against the inverse surface color $inverse-on-surface: md-ref-palette.$neutral100; /// md.sys.color.inverse-primary (Add-ons / Add-on primary colors) /// /// Displays opposite of the primary color $inverse-primary: md-ref-palette.$primary80; /// md.sys.color.inverse-surface (Surface colors) /// /// Displays opposite color of the surrounding UI $inverse-surface: md-ref-palette.$neutral20; /// md.sys.color.on-background (Add-ons / Add-on surface colors) /// /// Used for text and icons shown against the background color $on-background: md-ref-palette.$neutral0; /// md.sys.color.on-error (Error colors) /// /// Used for text and icons on the error color $on-error: md-ref-palette.$error100; /// md.sys.color.on-error-container (Error colors) /// /// Used for text and icons on the error-container color $on-error-container: md-ref-palette.$error100; /// md.sys.color.on-primary (Primary colors) /// /// Text and icons shown against the primary color $on-primary: md-ref-palette.$primary100; /// md.sys.color.on-primary-container (Primary colors) /// /// Contrast-passing color shown against the primary container $on-primary-container: md-ref-palette.$primary100; /// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors) /// /// Used for text and icons shown against the primary fixed color $on-primary-fixed: md-ref-palette.$primary100; /// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors) /// /// Stronger hue variant used for text and icons shown against the primary fixed color $on-primary-fixed-variant: md-ref-palette.$primary100; /// md.sys.color.on-secondary (Secondary colors) /// /// Text and icons shown against the secondary color $on-secondary: md-ref-palette.$secondary100; /// md.sys.color.on-secondary-container (Secondary colors) /// /// Contrast-passing color shown against the secondary container $on-secondary-container: md-ref-palette.$secondary100; /// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors) /// /// Used for text and icons shown against the secondary fixed color $on-secondary-fixed: md-ref-palette.$secondary100; /// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors) /// /// Stronger hue variant used for text and icons shown against the secondary fixed color $on-secondary-fixed-variant: md-ref-palette.$secondary100; /// md.sys.color.on-surface (Surface colors) /// /// Text and icons shown against the surface color $on-surface: md-ref-palette.$neutral0; /// md.sys.color.on-surface-variant (Surface colors) /// /// For text and icons to indicate active or inactive component state $on-surface-variant: md-ref-palette.$neutral-variant0; /// md.sys.color.on-tertiary (Tertiary colors) /// /// Text and icons shown against the tertiary color $on-tertiary: md-ref-palette.$tertiary100; /// md.sys.color.on-tertiary-container (Tertiary colors) /// /// Contrast-passing color shown against the tertiary container $on-tertiary-container: md-ref-palette.$tertiary100; /// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Used for text and icons shown against the tertiary fixed color $on-tertiary-fixed: md-ref-palette.$tertiary100; /// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors) /// /// Stronger hue variant used for text and icons shown against the tertiary fixed color $on-tertiary-fixed-variant: md-ref-palette.$tertiary100; /// md.sys.color.outline (Outline colors) /// /// Subtle color used for boundaries $outline: md-ref-palette.$neutral-variant20; /// md.sys.color.outline-variant (Outline colors) /// /// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider. $outline-variant: md-ref-palette.$neutral-variant30; /// md.sys.color.primary (Primary colors) /// /// Main color used across screens and components $primary: md-ref-palette.$primary20; /// md.sys.color.primary-container (Primary colors) /// /// Standout container color for key components $primary-container: md-ref-palette.$primary30; /// md.sys.color.primary-fixed (Add-ons / Add-on primary colors) /// /// Primary color that doesn't change for light or dark theme. $primary-fixed: md-ref-palette.$primary30; /// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors) /// /// Dimmer version of primary fixed color that doesn't change for light or dark theme. $primary-fixed-dim: md-ref-palette.$primary20; /// md.sys.color.scrim (Add-ons / Add-on surface colors) /// /// Used for scrims which help separate floating components from the background. $scrim: md-ref-palette.$neutral0; /// md.sys.color.secondary (Secondary colors) /// /// Accent color used across screens and components $secondary: md-ref-palette.$secondary20; /// md.sys.color.secondary-container (Secondary colors) /// /// Less prominent container color, for components like tonal buttons $secondary-container: md-ref-palette.$secondary30; /// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors) /// /// Secondary color that doesn't change for light or dark theme. $secondary-fixed: md-ref-palette.$secondary30; /// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors) /// /// Dimmer version of secondary fixed color that doesn't change for light or dark theme. $secondary-fixed-dim: md-ref-palette.$secondary20; /// md.sys.color.shadow (Add-ons / Add-on surface colors) /// /// For shadows applied to elevated components $shadow: md-ref-palette.$neutral0; /// md.sys.color.surface (Surface colors) /// /// Surface color for components like cards, sheets, and menus $surface: md-ref-palette.$neutral98; /// md.sys.color.surface-bright (Add-ons / Add-on surface colors) /// /// Surface that is brighter in both light and dark theme. $surface-bright: md-ref-palette.$neutral98; /// md.sys.color.surface-container (Surface colors) $surface-container: md-ref-palette.$neutral94; /// md.sys.color.surface-container-high (Surface colors) $surface-container-high: md-ref-palette.$neutral92; /// md.sys.color.surface-container-highest (Surface colors) $surface-container-highest: md-ref-palette.$neutral90; /// md.sys.color.surface-container-low (Surface colors) $surface-container-low: md-ref-palette.$neutral96; /// md.sys.color.surface-container-lowest (Surface colors) $surface-container-lowest: md-ref-palette.$neutral100; /// md.sys.color.surface-dim (Add-ons / Add-on surface colors) /// /// Surface that is dimmer in both light and dark theme. $surface-dim: md-ref-palette.$neutral87; /// md.sys.color.surface-variant (Surface colors) /// /// Alternate surface color, can be used for active states $surface-variant: md-ref-palette.$neutral-variant90; /// md.sys.color.tertiary (Tertiary colors) /// /// Contrasting accent color used across screens and components $tertiary: md-ref-palette.$tertiary20; /// md.sys.color.tertiary-container (Tertiary colors) /// /// Contrasting container color, for components like input fields $tertiary-container: md-ref-palette.$tertiary30; /// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Tertiary color that doesn't change for light or dark theme. $tertiary-fixed: md-ref-palette.$tertiary30; /// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors) /// /// Dimmer version of tertiary fixed color that doesn't change for light or dark theme. $tertiary-fixed-dim: md-ref-palette.$tertiary20; /// md.sys.color.surface-tint (Surface colors) /// /// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors $surface-tint: $primary; /// md.sys.color.surface-tint-color (Surface colors) /// /// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name $surface-tint-color: $primary; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-color__medium-contrast.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-palette'; /// md.sys.color.background (Add-ons / Add-on surface colors) /// /// Note: Background is a legacy color role. It is recommended to use Surface instead of Background. $background: md-ref-palette.$neutral98; /// md.sys.color.error (Error colors) /// /// Indicates errors, such as invalid input in a date picker $error: md-ref-palette.$error30; /// md.sys.color.error-container (Error colors) /// /// Container color for error messages and badges $error-container: md-ref-palette.$error40; /// md.sys.color.inverse-on-surface (Surface colors) /// /// Used for text and icons shown against the inverse surface color $inverse-on-surface: md-ref-palette.$neutral100; /// md.sys.color.inverse-primary (Add-ons / Add-on primary colors) /// /// Displays opposite of the primary color $inverse-primary: md-ref-palette.$primary80; /// md.sys.color.inverse-surface (Surface colors) /// /// Displays opposite color of the surrounding UI $inverse-surface: md-ref-palette.$neutral20; /// md.sys.color.on-background (Add-ons / Add-on surface colors) /// /// Used for text and icons shown against the background color $on-background: md-ref-palette.$neutral0; /// md.sys.color.on-error (Error colors) /// /// Used for text and icons on the error color $on-error: md-ref-palette.$error100; /// md.sys.color.on-error-container (Error colors) /// /// Used for text and icons on the error-container color $on-error-container: md-ref-palette.$error100; /// md.sys.color.on-primary (Primary colors) /// /// Text and icons shown against the primary color $on-primary: md-ref-palette.$primary100; /// md.sys.color.on-primary-container (Primary colors) /// /// Contrast-passing color shown against the primary container $on-primary-container: md-ref-palette.$primary100; /// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors) /// /// Used for text and icons shown against the primary fixed color $on-primary-fixed: md-ref-palette.$primary100; /// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors) /// /// Stronger hue variant used for text and icons shown against the primary fixed color $on-primary-fixed-variant: md-ref-palette.$primary100; /// md.sys.color.on-secondary (Secondary colors) /// /// Text and icons shown against the secondary color $on-secondary: md-ref-palette.$secondary100; /// md.sys.color.on-secondary-container (Secondary colors) /// /// Contrast-passing color shown against the secondary container $on-secondary-container: md-ref-palette.$secondary100; /// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors) /// /// Used for text and icons shown against the secondary fixed color $on-secondary-fixed: md-ref-palette.$secondary100; /// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors) /// /// Stronger hue variant used for text and icons shown against the secondary fixed color $on-secondary-fixed-variant: md-ref-palette.$secondary100; /// md.sys.color.on-surface (Surface colors) /// /// Text and icons shown against the surface color $on-surface: md-ref-palette.$neutral0; /// md.sys.color.on-surface-variant (Surface colors) /// /// For text and icons to indicate active or inactive component state $on-surface-variant: md-ref-palette.$neutral-variant20; /// md.sys.color.on-tertiary (Tertiary colors) /// /// Text and icons shown against the tertiary color $on-tertiary: md-ref-palette.$tertiary100; /// md.sys.color.on-tertiary-container (Tertiary colors) /// /// Contrast-passing color shown against the tertiary container $on-tertiary-container: md-ref-palette.$tertiary100; /// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Used for text and icons shown against the tertiary fixed color $on-tertiary-fixed: md-ref-palette.$tertiary100; /// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors) /// /// Stronger hue variant used for text and icons shown against the tertiary fixed color $on-tertiary-fixed-variant: md-ref-palette.$tertiary100; /// md.sys.color.outline (Outline colors) /// /// Subtle color used for boundaries $outline: md-ref-palette.$neutral-variant30; /// md.sys.color.outline-variant (Outline colors) /// /// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider. $outline-variant: md-ref-palette.$neutral-variant50; /// md.sys.color.primary (Primary colors) /// /// Main color used across screens and components $primary: md-ref-palette.$primary30; /// md.sys.color.primary-container (Primary colors) /// /// Standout container color for key components $primary-container: md-ref-palette.$primary40; /// md.sys.color.primary-fixed (Add-ons / Add-on primary colors) /// /// Primary color that doesn't change for light or dark theme. $primary-fixed: md-ref-palette.$primary40; /// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors) /// /// Dimmer version of primary fixed color that doesn't change for light or dark theme. $primary-fixed-dim: md-ref-palette.$primary30; /// md.sys.color.scrim (Add-ons / Add-on surface colors) /// /// Used for scrims which help separate floating components from the background. $scrim: md-ref-palette.$neutral0; /// md.sys.color.secondary (Secondary colors) /// /// Accent color used across screens and components $secondary: md-ref-palette.$secondary30; /// md.sys.color.secondary-container (Secondary colors) /// /// Less prominent container color, for components like tonal buttons $secondary-container: md-ref-palette.$secondary40; /// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors) /// /// Secondary color that doesn't change for light or dark theme. $secondary-fixed: md-ref-palette.$secondary40; /// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors) /// /// Dimmer version of secondary fixed color that doesn't change for light or dark theme. $secondary-fixed-dim: md-ref-palette.$secondary30; /// md.sys.color.shadow (Add-ons / Add-on surface colors) /// /// For shadows applied to elevated components $shadow: md-ref-palette.$neutral0; /// md.sys.color.surface (Surface colors) /// /// Surface color for components like cards, sheets, and menus $surface: md-ref-palette.$neutral98; /// md.sys.color.surface-bright (Add-ons / Add-on surface colors) /// /// Surface that is brighter in both light and dark theme. $surface-bright: md-ref-palette.$neutral98; /// md.sys.color.surface-container (Surface colors) $surface-container: md-ref-palette.$neutral94; /// md.sys.color.surface-container-high (Surface colors) $surface-container-high: md-ref-palette.$neutral92; /// md.sys.color.surface-container-highest (Surface colors) $surface-container-highest: md-ref-palette.$neutral90; /// md.sys.color.surface-container-low (Surface colors) $surface-container-low: md-ref-palette.$neutral96; /// md.sys.color.surface-container-lowest (Surface colors) $surface-container-lowest: md-ref-palette.$neutral100; /// md.sys.color.surface-dim (Add-ons / Add-on surface colors) /// /// Surface that is dimmer in both light and dark theme. $surface-dim: md-ref-palette.$neutral87; /// md.sys.color.surface-variant (Surface colors) /// /// Alternate surface color, can be used for active states $surface-variant: md-ref-palette.$neutral-variant90; /// md.sys.color.tertiary (Tertiary colors) /// /// Contrasting accent color used across screens and components $tertiary: md-ref-palette.$tertiary30; /// md.sys.color.tertiary-container (Tertiary colors) /// /// Contrasting container color, for components like input fields $tertiary-container: md-ref-palette.$tertiary40; /// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors) /// /// Tertiary color that doesn't change for light or dark theme. $tertiary-fixed: md-ref-palette.$tertiary40; /// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors) /// /// Dimmer version of tertiary fixed color that doesn't change for light or dark theme. $tertiary-fixed-dim: md-ref-palette.$tertiary30; /// md.sys.color.surface-tint (Surface colors) /// /// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors $surface-tint: $primary; /// md.sys.color.surface-tint-color (Surface colors) /// /// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name $surface-tint-color: $primary; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-elevation.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-sys-color'; /// md.sys.elevation.level0 $level0: 0px; /// md.sys.elevation.level1 $level1: 1px; /// md.sys.elevation.level2 $level2: 3px; /// md.sys.elevation.level3 $level3: 6px; /// md.sys.elevation.level4 $level4: 8px; /// md.sys.elevation.level5 $level5: 12px; /// md.sys.elevation.surface-tint-color /// /// @deprecated Moved to *.color.* $surface-tint-color: md-sys-color.$primary; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-motion.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.sys.motion.duration.extra-long1 (Duration) $duration-extra-long1: 700ms; /// md.sys.motion.duration.extra-long2 (Duration) $duration-extra-long2: 800ms; /// md.sys.motion.duration.extra-long3 (Duration) $duration-extra-long3: 900ms; /// md.sys.motion.duration.extra-long4 (Duration) $duration-extra-long4: 1000ms; /// md.sys.motion.duration.long1 (Duration) $duration-long1: 450ms; /// md.sys.motion.duration.long2 (Duration) $duration-long2: 500ms; /// md.sys.motion.duration.long3 (Duration) $duration-long3: 550ms; /// md.sys.motion.duration.long4 (Duration) $duration-long4: 600ms; /// md.sys.motion.duration.medium1 (Duration) $duration-medium1: 250ms; /// md.sys.motion.duration.medium2 (Duration) $duration-medium2: 300ms; /// md.sys.motion.duration.medium3 (Duration) $duration-medium3: 350ms; /// md.sys.motion.duration.medium4 (Duration) $duration-medium4: 400ms; /// md.sys.motion.duration.short1 (Duration) $duration-short1: 50ms; /// md.sys.motion.duration.short2 (Duration) $duration-short2: 100ms; /// md.sys.motion.duration.short3 (Duration) $duration-short3: 150ms; /// md.sys.motion.duration.short4 (Duration) $duration-short4: 200ms; /// md.sys.motion.easing.emphasized.accelerate (Easing) $easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); /// md.sys.motion.easing.emphasized.decelerate (Easing) $easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); /// md.sys.motion.easing.legacy (Easing) $easing-legacy: cubic-bezier(0.4, 0, 0.2, 1); /// md.sys.motion.easing.legacy.accelerate (Easing) $easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1); /// md.sys.motion.easing.legacy.decelerate (Easing) $easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1); /// md.sys.motion.easing.linear (Easing) $easing-linear: cubic-bezier(0, 0, 1, 1); /// md.sys.motion.easing.standard (Easing) $easing-standard: cubic-bezier(0.2, 0, 0, 1); /// md.sys.motion.easing.standard.accelerate (Easing) $easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); /// md.sys.motion.easing.standard.decelerate (Easing) $easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); /// md.sys.motion.path (Style) $path: /* Type "motion_path" is not supported. */ null; /// md.sys.motion.spring.default.effects $spring-default-effects: /* Type "custom_composite" is not supported. */ null; /// md.sys.motion.spring.default.effects.damping (Spring) $spring-default-effects-damping: 1; /// md.sys.motion.spring.default.effects.stiffness (Spring) $spring-default-effects-stiffness: 1600; /// md.sys.motion.spring.default.spatial $spring-default-spatial: /* Type "custom_composite" is not supported. */ null; /// md.sys.motion.spring.default.spatial.damping (Spring) $spring-default-spatial-damping: 0.9; /// md.sys.motion.spring.default.spatial.stiffness (Spring) $spring-default-spatial-stiffness: 700; /// md.sys.motion.spring.fast.effects $spring-fast-effects: /* Type "custom_composite" is not supported. */ null; /// md.sys.motion.spring.fast.effects.damping (Spring) $spring-fast-effects-damping: 1; /// md.sys.motion.spring.fast.effects.stiffness (Spring) $spring-fast-effects-stiffness: 3800; /// md.sys.motion.spring.fast.spatial $spring-fast-spatial: /* Type "custom_composite" is not supported. */ null; /// md.sys.motion.spring.fast.spatial.damping (Spring) $spring-fast-spatial-damping: 0.9; /// md.sys.motion.spring.fast.spatial.stiffness (Spring) $spring-fast-spatial-stiffness: 1400; /// md.sys.motion.spring.slow.effects $spring-slow-effects: /* Type "custom_composite" is not supported. */ null; /// md.sys.motion.spring.slow.effects.damping (Spring) $spring-slow-effects-damping: 1; /// md.sys.motion.spring.slow.effects.stiffness (Spring) $spring-slow-effects-stiffness: 800; /// md.sys.motion.spring.slow.spatial $spring-slow-spatial: /* Type "custom_composite" is not supported. */ null; /// md.sys.motion.spring.slow.spatial.damping (Spring) $spring-slow-spatial-damping: 0.9; /// md.sys.motion.spring.slow.spatial.stiffness (Spring) $spring-slow-spatial-stiffness: 300; /// md.sys.motion.easing.emphasized (Easing) $easing-emphasized: $easing-standard; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-shape.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.sys.shape.corner-value.extra-extra-large $corner-value-extra-extra-large: 48px; /// md.sys.shape.corner-value.extra-large $corner-value-extra-large: 28px; /// md.sys.shape.corner-value.extra-large-increased $corner-value-extra-large-increased: 32px; /// md.sys.shape.corner-value.extra-small $corner-value-extra-small: 4px; /// md.sys.shape.corner-value.large $corner-value-large: 16px; /// md.sys.shape.corner-value.large-increased $corner-value-large-increased: 20px; /// md.sys.shape.corner-value.medium $corner-value-medium: 12px; /// md.sys.shape.corner-value.none $corner-value-none: 0px; /// md.sys.shape.corner-value.small $corner-value-small: 8px; /// md.sys.shape.corner.extra-extra-large $corner-extra-extra-large: 48px; /// md.sys.shape.corner.extra-large $corner-extra-large: 28px; /// md.sys.shape.corner.extra-large-increased $corner-extra-large-increased: 32px; /// md.sys.shape.corner.extra-large.top $corner-extra-large-top: 28px 28px 0px 0px; /// md.sys.shape.corner.extra-small $corner-extra-small: 4px; /// md.sys.shape.corner.extra-small.top $corner-extra-small-top: 4px 4px 0px 0px; /// md.sys.shape.corner.full /// /// Use for: Badge, Buttons, Icon buttons, Sliders, Switches, Search bar $corner-full: 9999px; /// md.sys.shape.corner.large $corner-large: 16px; /// md.sys.shape.corner.large-increased $corner-large-increased: 20px; /// md.sys.shape.corner.large.end $corner-large-end: 0px 16px 16px 0px; /// md.sys.shape.corner.large.start $corner-large-start: 16px 0px 0px 16px; /// md.sys.shape.corner.large.top $corner-large-top: 16px 16px 0px 0px; /// md.sys.shape.corner.medium $corner-medium: 12px; /// md.sys.shape.corner.none $corner-none: 0px; /// md.sys.shape.corner.small $corner-small: 8px; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-state-focus-indicator.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.sys.state.focus-indicator.inner-offset $inner-offset: -3px; /// md.sys.state.focus-indicator.outer-offset $outer-offset: 2px; /// md.sys.state.focus-indicator.thickness $thickness: 3px; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-state.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars /// md.sys.state.disabled.state-layer-opacity $disabled-state-layer-opacity: 0.38; /// md.sys.state.dragged.state-layer-opacity $dragged-state-layer-opacity: 0.16; /// md.sys.state.focus.state-layer-opacity $focus-state-layer-opacity: 0.1; /// md.sys.state.hover.state-layer-opacity $hover-state-layer-opacity: 0.08; /// md.sys.state.pressed.state-layer-opacity $pressed-state-layer-opacity: 0.1; ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-typescale-emphasized.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-typeface'; /// md.sys.typescale.emphasized.body-large.crsv (Emphasized Body styles / Emphasized Body Large) $body-large-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.body-large.fill (Emphasized Body styles / Emphasized Body Large) $body-large-fill: 'FILL' 0; /// md.sys.typescale.emphasized.body-large.grad (Emphasized Body styles / Emphasized Body Large) $body-large-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.body-large.hexp (Emphasized Body styles / Emphasized Body Large) $body-large-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.body-large.line-height (Emphasized Body styles / Emphasized Body Large) $body-large-line-height: 1.5rem; /// md.sys.typescale.emphasized.body-large.opsz (Emphasized Body styles / Emphasized Body Large) $body-large-opsz: 'opsz' 16; /// md.sys.typescale.emphasized.body-large.rond (Emphasized Body styles / Emphasized Body Large) $body-large-rond: 'ROND' 0; /// md.sys.typescale.emphasized.body-large.size (Emphasized Body styles / Emphasized Body Large) $body-large-size: 1rem; /// md.sys.typescale.emphasized.body-large.slnt (Emphasized Body styles / Emphasized Body Large) $body-large-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.body-large.tracking (Emphasized Body styles / Emphasized Body Large) $body-large-tracking: 0.03125rem; /// md.sys.typescale.emphasized.body-large.wdth (Emphasized Body styles / Emphasized Body Large) $body-large-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.body-large.wght (Emphasized Body styles / Emphasized Body Large) $body-large-wght: 'wght' 500; /// md.sys.typescale.emphasized.body-medium.crsv (Emphasized Body styles / Emphasized Body Medium) $body-medium-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.body-medium.fill (Emphasized Body styles / Emphasized Body Medium) $body-medium-fill: 'FILL' 0; /// md.sys.typescale.emphasized.body-medium.grad (Emphasized Body styles / Emphasized Body Medium) $body-medium-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.body-medium.hexp (Emphasized Body styles / Emphasized Body Medium) $body-medium-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.body-medium.line-height (Emphasized Body styles / Emphasized Body Medium) $body-medium-line-height: 1.25rem; /// md.sys.typescale.emphasized.body-medium.opsz (Emphasized Body styles / Emphasized Body Medium) $body-medium-opsz: 'opsz' 14; /// md.sys.typescale.emphasized.body-medium.rond (Emphasized Body styles / Emphasized Body Medium) $body-medium-rond: 'ROND' 0; /// md.sys.typescale.emphasized.body-medium.size (Emphasized Body styles / Emphasized Body Medium) $body-medium-size: 0.875rem; /// md.sys.typescale.emphasized.body-medium.slnt (Emphasized Body styles / Emphasized Body Medium) $body-medium-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.body-medium.tracking (Emphasized Body styles / Emphasized Body Medium) $body-medium-tracking: 0.015625rem; /// md.sys.typescale.emphasized.body-medium.wdth (Emphasized Body styles / Emphasized Body Medium) $body-medium-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.body-medium.wght (Emphasized Body styles / Emphasized Body Medium) $body-medium-wght: 'wght' 500; /// md.sys.typescale.emphasized.body-small.crsv (Emphasized Body styles / Emphasized Body Small) $body-small-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.body-small.fill (Emphasized Body styles / Emphasized Body Small) $body-small-fill: 'FILL' 0; /// md.sys.typescale.emphasized.body-small.grad (Emphasized Body styles / Emphasized Body Small) $body-small-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.body-small.hexp (Emphasized Body styles / Emphasized Body Small) $body-small-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.body-small.line-height (Emphasized Body styles / Emphasized Body Small) $body-small-line-height: 1rem; /// md.sys.typescale.emphasized.body-small.opsz (Emphasized Body styles / Emphasized Body Small) $body-small-opsz: 'opsz' 12; /// md.sys.typescale.emphasized.body-small.rond (Emphasized Body styles / Emphasized Body Small) $body-small-rond: 'ROND' 0; /// md.sys.typescale.emphasized.body-small.size (Emphasized Body styles / Emphasized Body Small) $body-small-size: 0.75rem; /// md.sys.typescale.emphasized.body-small.slnt (Emphasized Body styles / Emphasized Body Small) $body-small-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.body-small.tracking (Emphasized Body styles / Emphasized Body Small) $body-small-tracking: 0.025rem; /// md.sys.typescale.emphasized.body-small.wdth (Emphasized Body styles / Emphasized Body Small) $body-small-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.body-small.wght (Emphasized Body styles / Emphasized Body Small) $body-small-wght: 'wght' 500; /// md.sys.typescale.emphasized.display-large.crsv (Emphasized Display styles / Emphasized Display Large) $display-large-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.display-large.fill (Emphasized Display styles / Emphasized Display Large) $display-large-fill: 'FILL' 0; /// md.sys.typescale.emphasized.display-large.grad (Emphasized Display styles / Emphasized Display Large) $display-large-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.display-large.hexp (Emphasized Display styles / Emphasized Display Large) $display-large-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.display-large.line-height (Emphasized Display styles / Emphasized Display Large) $display-large-line-height: 4rem; /// md.sys.typescale.emphasized.display-large.opsz (Emphasized Display styles / Emphasized Display Large) $display-large-opsz: 'opsz' 57; /// md.sys.typescale.emphasized.display-large.rond (Emphasized Display styles / Emphasized Display Large) $display-large-rond: 'ROND' 0; /// md.sys.typescale.emphasized.display-large.size (Emphasized Display styles / Emphasized Display Large) $display-large-size: 3.5625rem; /// md.sys.typescale.emphasized.display-large.slnt (Emphasized Display styles / Emphasized Display Large) $display-large-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.display-large.tracking (Emphasized Display styles / Emphasized Display Large) $display-large-tracking: -0.015625rem; /// md.sys.typescale.emphasized.display-large.wdth (Emphasized Display styles / Emphasized Display Large) $display-large-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.display-large.wght (Emphasized Display styles / Emphasized Display Large) $display-large-wght: 'wght' 500; /// md.sys.typescale.emphasized.display-medium.crsv (Emphasized Display styles / Emphasized Display Medium) $display-medium-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.display-medium.fill (Emphasized Display styles / Emphasized Display Medium) $display-medium-fill: 'FILL' 0; /// md.sys.typescale.emphasized.display-medium.grad (Emphasized Display styles / Emphasized Display Medium) $display-medium-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.display-medium.hexp (Emphasized Display styles / Emphasized Display Medium) $display-medium-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.display-medium.line-height (Emphasized Display styles / Emphasized Display Medium) $display-medium-line-height: 3.25rem; /// md.sys.typescale.emphasized.display-medium.opsz (Emphasized Display styles / Emphasized Display Medium) $display-medium-opsz: 'opsz' 45; /// md.sys.typescale.emphasized.display-medium.rond (Emphasized Display styles / Emphasized Display Medium) $display-medium-rond: 'ROND' 0; /// md.sys.typescale.emphasized.display-medium.size (Emphasized Display styles / Emphasized Display Medium) $display-medium-size: 2.8125rem; /// md.sys.typescale.emphasized.display-medium.slnt (Emphasized Display styles / Emphasized Display Medium) $display-medium-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.display-medium.tracking (Emphasized Display styles / Emphasized Display Medium) $display-medium-tracking: 0rem; /// md.sys.typescale.emphasized.display-medium.wdth (Emphasized Display styles / Emphasized Display Medium) $display-medium-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.display-medium.wght (Emphasized Display styles / Emphasized Display Medium) $display-medium-wght: 'wght' 500; /// md.sys.typescale.emphasized.display-small.crsv (Emphasized Display styles / Emphasized Display Small) $display-small-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.display-small.fill (Emphasized Display styles / Emphasized Display Small) $display-small-fill: 'FILL' 0; /// md.sys.typescale.emphasized.display-small.grad (Emphasized Display styles / Emphasized Display Small) $display-small-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.display-small.hexp (Emphasized Display styles / Emphasized Display Small) $display-small-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.display-small.line-height (Emphasized Display styles / Emphasized Display Small) $display-small-line-height: 2.75rem; /// md.sys.typescale.emphasized.display-small.opsz (Emphasized Display styles / Emphasized Display Small) $display-small-opsz: 'opsz' 36; /// md.sys.typescale.emphasized.display-small.rond (Emphasized Display styles / Emphasized Display Small) $display-small-rond: 'ROND' 0; /// md.sys.typescale.emphasized.display-small.size (Emphasized Display styles / Emphasized Display Small) $display-small-size: 2.25rem; /// md.sys.typescale.emphasized.display-small.slnt (Emphasized Display styles / Emphasized Display Small) $display-small-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.display-small.tracking (Emphasized Display styles / Emphasized Display Small) $display-small-tracking: 0rem; /// md.sys.typescale.emphasized.display-small.wdth (Emphasized Display styles / Emphasized Display Small) $display-small-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.display-small.wght (Emphasized Display styles / Emphasized Display Small) $display-small-wght: 'wght' 500; /// md.sys.typescale.emphasized.headline-large.crsv (Emphasized Headline styles / Emphasized Headline Large) $headline-large-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.headline-large.fill (Emphasized Headline styles / Emphasized Headline Large) $headline-large-fill: 'FILL' 0; /// md.sys.typescale.emphasized.headline-large.grad (Emphasized Headline styles / Emphasized Headline Large) $headline-large-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.headline-large.hexp (Emphasized Headline styles / Emphasized Headline Large) $headline-large-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.headline-large.line-height (Emphasized Headline styles / Emphasized Headline Large) $headline-large-line-height: 2.5rem; /// md.sys.typescale.emphasized.headline-large.opsz (Emphasized Headline styles / Emphasized Headline Large) $headline-large-opsz: 'opsz' 32; /// md.sys.typescale.emphasized.headline-large.rond (Emphasized Headline styles / Emphasized Headline Large) $headline-large-rond: 'ROND' 0; /// md.sys.typescale.emphasized.headline-large.size (Emphasized Headline styles / Emphasized Headline Large) $headline-large-size: 2rem; /// md.sys.typescale.emphasized.headline-large.slnt (Emphasized Headline styles / Emphasized Headline Large) $headline-large-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.headline-large.tracking (Emphasized Headline styles / Emphasized Headline Large) $headline-large-tracking: 0rem; /// md.sys.typescale.emphasized.headline-large.wdth (Emphasized Headline styles / Emphasized Headline Large) $headline-large-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.headline-large.wght (Emphasized Headline styles / Emphasized Headline Large) $headline-large-wght: 'wght' 500; /// md.sys.typescale.emphasized.headline-medium.crsv (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.headline-medium.fill (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-fill: 'FILL' 0; /// md.sys.typescale.emphasized.headline-medium.grad (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.headline-medium.hexp (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.headline-medium.line-height (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-line-height: 2.25rem; /// md.sys.typescale.emphasized.headline-medium.opsz (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-opsz: 'opsz' 28; /// md.sys.typescale.emphasized.headline-medium.rond (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-rond: 'ROND' 0; /// md.sys.typescale.emphasized.headline-medium.size (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-size: 1.75rem; /// md.sys.typescale.emphasized.headline-medium.slnt (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.headline-medium.tracking (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-tracking: 0rem; /// md.sys.typescale.emphasized.headline-medium.wdth (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.headline-medium.wght (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-wght: 'wght' 500; /// md.sys.typescale.emphasized.headline-small.crsv (Emphasized Headline styles / Emphasized Headline Small) $headline-small-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.headline-small.fill (Emphasized Headline styles / Emphasized Headline Small) $headline-small-fill: 'FILL' 0; /// md.sys.typescale.emphasized.headline-small.grad (Emphasized Headline styles / Emphasized Headline Small) $headline-small-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.headline-small.hexp (Emphasized Headline styles / Emphasized Headline Small) $headline-small-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.headline-small.line-height (Emphasized Headline styles / Emphasized Headline Small) $headline-small-line-height: 2rem; /// md.sys.typescale.emphasized.headline-small.opsz (Emphasized Headline styles / Emphasized Headline Small) $headline-small-opsz: 'opsz' 24; /// md.sys.typescale.emphasized.headline-small.rond (Emphasized Headline styles / Emphasized Headline Small) $headline-small-rond: 'ROND' 0; /// md.sys.typescale.emphasized.headline-small.size (Emphasized Headline styles / Emphasized Headline Small) $headline-small-size: 1.5rem; /// md.sys.typescale.emphasized.headline-small.slnt (Emphasized Headline styles / Emphasized Headline Small) $headline-small-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.headline-small.tracking (Emphasized Headline styles / Emphasized Headline Small) $headline-small-tracking: 0rem; /// md.sys.typescale.emphasized.headline-small.wdth (Emphasized Headline styles / Emphasized Headline Small) $headline-small-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.headline-small.wght (Emphasized Headline styles / Emphasized Headline Small) $headline-small-wght: 'wght' 500; /// md.sys.typescale.emphasized.label-large.crsv (Emphasized Label styles / Emphasized Label Large) $label-large-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.label-large.fill (Emphasized Label styles / Emphasized Label Large) $label-large-fill: 'FILL' 0; /// md.sys.typescale.emphasized.label-large.grad (Emphasized Label styles / Emphasized Label Large) $label-large-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.label-large.hexp (Emphasized Label styles / Emphasized Label Large) $label-large-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.label-large.line-height (Emphasized Label styles / Emphasized Label Large) $label-large-line-height: 1.25rem; /// md.sys.typescale.emphasized.label-large.opsz (Emphasized Label styles / Emphasized Label Large) $label-large-opsz: 'opsz' 14; /// md.sys.typescale.emphasized.label-large.rond (Emphasized Label styles / Emphasized Label Large) $label-large-rond: 'ROND' 0; /// md.sys.typescale.emphasized.label-large.size (Emphasized Label styles / Emphasized Label Large) $label-large-size: 0.875rem; /// md.sys.typescale.emphasized.label-large.slnt (Emphasized Label styles / Emphasized Label Large) $label-large-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.label-large.tracking (Emphasized Label styles / Emphasized Label Large) $label-large-tracking: 0.00625rem; /// md.sys.typescale.emphasized.label-large.wdth (Emphasized Label styles / Emphasized Label Large) $label-large-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.label-large.wght (Emphasized Label styles / Emphasized Label Large) $label-large-wght: 'wght' 600; /// md.sys.typescale.emphasized.label-medium.crsv (Emphasized Label styles / Emphasized Label Medium) $label-medium-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.label-medium.fill (Emphasized Label styles / Emphasized Label Medium) $label-medium-fill: 'FILL' 0; /// md.sys.typescale.emphasized.label-medium.grad (Emphasized Label styles / Emphasized Label Medium) $label-medium-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.label-medium.hexp (Emphasized Label styles / Emphasized Label Medium) $label-medium-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.label-medium.line-height (Emphasized Label styles / Emphasized Label Medium) $label-medium-line-height: 1rem; /// md.sys.typescale.emphasized.label-medium.opsz (Emphasized Label styles / Emphasized Label Medium) $label-medium-opsz: 'opsz' 12; /// md.sys.typescale.emphasized.label-medium.rond (Emphasized Label styles / Emphasized Label Medium) $label-medium-rond: 'ROND' 0; /// md.sys.typescale.emphasized.label-medium.size (Emphasized Label styles / Emphasized Label Medium) $label-medium-size: 0.75rem; /// md.sys.typescale.emphasized.label-medium.slnt (Emphasized Label styles / Emphasized Label Medium) $label-medium-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.label-medium.tracking (Emphasized Label styles / Emphasized Label Medium) $label-medium-tracking: 0.03125rem; /// md.sys.typescale.emphasized.label-medium.wdth (Emphasized Label styles / Emphasized Label Medium) $label-medium-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.label-medium.wght (Emphasized Label styles / Emphasized Label Medium) $label-medium-wght: 'wght' 600; /// md.sys.typescale.emphasized.label-small.crsv (Emphasized Label styles / Emphasized Label Small) $label-small-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.label-small.fill (Emphasized Label styles / Emphasized Label Small) $label-small-fill: 'FILL' 0; /// md.sys.typescale.emphasized.label-small.grad (Emphasized Label styles / Emphasized Label Small) $label-small-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.label-small.hexp (Emphasized Label styles / Emphasized Label Small) $label-small-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.label-small.line-height (Emphasized Label styles / Emphasized Label Small) $label-small-line-height: 1rem; /// md.sys.typescale.emphasized.label-small.opsz (Emphasized Label styles / Emphasized Label Small) $label-small-opsz: 'opsz' 11; /// md.sys.typescale.emphasized.label-small.rond (Emphasized Label styles / Emphasized Label Small) $label-small-rond: 'ROND' 0; /// md.sys.typescale.emphasized.label-small.size (Emphasized Label styles / Emphasized Label Small) $label-small-size: 0.6875rem; /// md.sys.typescale.emphasized.label-small.slnt (Emphasized Label styles / Emphasized Label Small) $label-small-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.label-small.tracking (Emphasized Label styles / Emphasized Label Small) $label-small-tracking: 0.03125rem; /// md.sys.typescale.emphasized.label-small.wdth (Emphasized Label styles / Emphasized Label Small) $label-small-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.label-small.wght (Emphasized Label styles / Emphasized Label Small) $label-small-wght: 'wght' 600; /// md.sys.typescale.emphasized.title-large.crsv (Emphasized Title styles / Emphasized Title Large) $title-large-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.title-large.fill (Emphasized Title styles / Emphasized Title Large) $title-large-fill: 'FILL' 0; /// md.sys.typescale.emphasized.title-large.grad (Emphasized Title styles / Emphasized Title Large) $title-large-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.title-large.hexp (Emphasized Title styles / Emphasized Title Large) $title-large-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.title-large.line-height (Emphasized Title styles / Emphasized Title Large) $title-large-line-height: 1.75rem; /// md.sys.typescale.emphasized.title-large.opsz (Emphasized Title styles / Emphasized Title Large) $title-large-opsz: 'opsz' 22; /// md.sys.typescale.emphasized.title-large.rond (Emphasized Title styles / Emphasized Title Large) $title-large-rond: 'ROND' 0; /// md.sys.typescale.emphasized.title-large.size (Emphasized Title styles / Emphasized Title Large) $title-large-size: 1.375rem; /// md.sys.typescale.emphasized.title-large.slnt (Emphasized Title styles / Emphasized Title Large) $title-large-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.title-large.tracking (Emphasized Title styles / Emphasized Title Large) $title-large-tracking: 0rem; /// md.sys.typescale.emphasized.title-large.wdth (Emphasized Title styles / Emphasized Title Large) $title-large-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.title-large.wght (Emphasized Title styles / Emphasized Title Large) $title-large-wght: 'wght' 500; /// md.sys.typescale.emphasized.title-medium.crsv (Emphasized Title styles / Emphasized Title Medium) $title-medium-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.title-medium.fill (Emphasized Title styles / Emphasized Title Medium) $title-medium-fill: 'FILL' 0; /// md.sys.typescale.emphasized.title-medium.grad (Emphasized Title styles / Emphasized Title Medium) $title-medium-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.title-medium.hexp (Emphasized Title styles / Emphasized Title Medium) $title-medium-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.title-medium.line-height (Emphasized Title styles / Emphasized Title Medium) $title-medium-line-height: 1.5rem; /// md.sys.typescale.emphasized.title-medium.opsz (Emphasized Title styles / Emphasized Title Medium) $title-medium-opsz: 'opsz' 16; /// md.sys.typescale.emphasized.title-medium.rond (Emphasized Title styles / Emphasized Title Medium) $title-medium-rond: 'ROND' 0; /// md.sys.typescale.emphasized.title-medium.size (Emphasized Title styles / Emphasized Title Medium) $title-medium-size: 1rem; /// md.sys.typescale.emphasized.title-medium.slnt (Emphasized Title styles / Emphasized Title Medium) $title-medium-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.title-medium.tracking (Emphasized Title styles / Emphasized Title Medium) $title-medium-tracking: 0.009375rem; /// md.sys.typescale.emphasized.title-medium.wdth (Emphasized Title styles / Emphasized Title Medium) $title-medium-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.title-medium.weight (Emphasized Title styles / Emphasized Title Medium) $title-medium-weight: 600; /// md.sys.typescale.emphasized.title-medium.wght (Emphasized Title styles / Emphasized Title Medium) $title-medium-wght: 'wght' 600; /// md.sys.typescale.emphasized.title-small.crsv (Emphasized Title styles / Emphasized Title Small) $title-small-crsv: 'CRSV' 0; /// md.sys.typescale.emphasized.title-small.fill (Emphasized Title styles / Emphasized Title Small) $title-small-fill: 'FILL' 0; /// md.sys.typescale.emphasized.title-small.grad (Emphasized Title styles / Emphasized Title Small) $title-small-grad: 'GRAD' 0; /// md.sys.typescale.emphasized.title-small.hexp (Emphasized Title styles / Emphasized Title Small) $title-small-hexp: 'HEXP' 0; /// md.sys.typescale.emphasized.title-small.line-height (Emphasized Title styles / Emphasized Title Small) $title-small-line-height: 1.25rem; /// md.sys.typescale.emphasized.title-small.opsz (Emphasized Title styles / Emphasized Title Small) $title-small-opsz: 'opsz' 14; /// md.sys.typescale.emphasized.title-small.rond (Emphasized Title styles / Emphasized Title Small) $title-small-rond: 'ROND' 0; /// md.sys.typescale.emphasized.title-small.size (Emphasized Title styles / Emphasized Title Small) $title-small-size: 0.875rem; /// md.sys.typescale.emphasized.title-small.slnt (Emphasized Title styles / Emphasized Title Small) $title-small-slnt: 'slnt' 0; /// md.sys.typescale.emphasized.title-small.tracking (Emphasized Title styles / Emphasized Title Small) $title-small-tracking: 0.00625rem; /// md.sys.typescale.emphasized.title-small.wdth (Emphasized Title styles / Emphasized Title Small) $title-small-wdth: 'wdth' 100; /// md.sys.typescale.emphasized.title-small.weight (Emphasized Title styles / Emphasized Title Small) $title-small-weight: 600; /// md.sys.typescale.emphasized.title-small.wght (Emphasized Title styles / Emphasized Title Small) $title-small-wght: 'wght' 600; /// md.sys.typescale.emphasized.body-large.font (Emphasized Body styles / Emphasized Body Large) $body-large-font: md-ref-typeface.$plain; /// md.sys.typescale.emphasized.body-large.weight (Emphasized Body styles / Emphasized Body Large) $body-large-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.body-medium.font (Emphasized Body styles / Emphasized Body Medium) $body-medium-font: md-ref-typeface.$plain; /// md.sys.typescale.emphasized.body-medium.weight (Emphasized Body styles / Emphasized Body Medium) $body-medium-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.body-small.font (Emphasized Body styles / Emphasized Body Small) $body-small-font: md-ref-typeface.$plain; /// md.sys.typescale.emphasized.body-small.weight (Emphasized Body styles / Emphasized Body Small) $body-small-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.display-large.font (Emphasized Display styles / Emphasized Display Large) $display-large-font: md-ref-typeface.$brand; /// md.sys.typescale.emphasized.display-large.weight (Emphasized Display styles / Emphasized Display Large) $display-large-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.display-medium.font (Emphasized Display styles / Emphasized Display Medium) $display-medium-font: md-ref-typeface.$brand; /// md.sys.typescale.emphasized.display-medium.weight (Emphasized Display styles / Emphasized Display Medium) $display-medium-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.display-small.font (Emphasized Display styles / Emphasized Display Small) $display-small-font: md-ref-typeface.$brand; /// md.sys.typescale.emphasized.display-small.weight (Emphasized Display styles / Emphasized Display Small) $display-small-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.headline-large.font (Emphasized Headline styles / Emphasized Headline Large) $headline-large-font: md-ref-typeface.$brand; /// md.sys.typescale.emphasized.headline-large.weight (Emphasized Headline styles / Emphasized Headline Large) $headline-large-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.headline-medium.font (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-font: md-ref-typeface.$brand; /// md.sys.typescale.emphasized.headline-medium.weight (Emphasized Headline styles / Emphasized Headline Medium) $headline-medium-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.headline-small.font (Emphasized Headline styles / Emphasized Headline Small) $headline-small-font: md-ref-typeface.$brand; /// md.sys.typescale.emphasized.headline-small.weight (Emphasized Headline styles / Emphasized Headline Small) $headline-small-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.label-large.font (Emphasized Label styles / Emphasized Label Large) $label-large-font: md-ref-typeface.$plain; /// md.sys.typescale.emphasized.label-large.weight (Emphasized Label styles / Emphasized Label Large) $label-large-weight: md-ref-typeface.$weight-bold; /// md.sys.typescale.emphasized.label-medium.font (Emphasized Label styles / Emphasized Label Medium) $label-medium-font: md-ref-typeface.$plain; /// md.sys.typescale.emphasized.label-medium.weight (Emphasized Label styles / Emphasized Label Medium) $label-medium-weight: md-ref-typeface.$weight-bold; /// md.sys.typescale.emphasized.label-small.font (Emphasized Label styles / Emphasized Label Small) $label-small-font: md-ref-typeface.$plain; /// md.sys.typescale.emphasized.label-small.weight (Emphasized Label styles / Emphasized Label Small) $label-small-weight: md-ref-typeface.$weight-bold; /// md.sys.typescale.emphasized.title-large.font (Emphasized Title styles / Emphasized Title Large) $title-large-font: md-ref-typeface.$brand; /// md.sys.typescale.emphasized.title-large.weight (Emphasized Title styles / Emphasized Title Large) $title-large-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.emphasized.title-medium.font (Emphasized Title styles / Emphasized Title Medium) $title-medium-font: md-ref-typeface.$plain; /// md.sys.typescale.emphasized.title-small.font (Emphasized Title styles / Emphasized Title Small) $title-small-font: md-ref-typeface.$plain; /// md.sys.typescale.emphasized.body-large (Emphasized Body styles / Emphasized Body Large) @mixin body-large { font-family: $body-large-font; font-size: $body-large-size; font-weight: $body-large-weight; letter-spacing: $body-large-tracking; line-height: $body-large-line-height; } /// md.sys.typescale.emphasized.body-medium (Emphasized Body styles / Emphasized Body Medium) @mixin body-medium { font-family: $body-medium-font; font-size: $body-medium-size; font-weight: $body-medium-weight; letter-spacing: $body-medium-tracking; line-height: $body-medium-line-height; } /// md.sys.typescale.emphasized.body-small (Emphasized Body styles / Emphasized Body Small) @mixin body-small { font-family: $body-small-font; font-size: $body-small-size; font-weight: $body-small-weight; letter-spacing: $body-small-tracking; line-height: $body-small-line-height; } /// md.sys.typescale.emphasized.display-large (Emphasized Display styles / Emphasized Display Large) @mixin display-large { font-family: $display-large-font; font-size: $display-large-size; font-weight: $display-large-weight; letter-spacing: $display-large-tracking; line-height: $display-large-line-height; } /// md.sys.typescale.emphasized.display-medium (Emphasized Display styles / Emphasized Display Medium) @mixin display-medium { font-family: $display-medium-font; font-size: $display-medium-size; font-weight: $display-medium-weight; letter-spacing: $display-medium-tracking; line-height: $display-medium-line-height; } /// md.sys.typescale.emphasized.display-small (Emphasized Display styles / Emphasized Display Small) @mixin display-small { font-family: $display-small-font; font-size: $display-small-size; font-weight: $display-small-weight; letter-spacing: $display-small-tracking; line-height: $display-small-line-height; } /// md.sys.typescale.emphasized.headline-large (Emphasized Headline styles / Emphasized Headline Large) @mixin headline-large { font-family: $headline-large-font; font-size: $headline-large-size; font-weight: $headline-large-weight; letter-spacing: $headline-large-tracking; line-height: $headline-large-line-height; } /// md.sys.typescale.emphasized.headline-medium (Emphasized Headline styles / Emphasized Headline Medium) @mixin headline-medium { font-family: $headline-medium-font; font-size: $headline-medium-size; font-weight: $headline-medium-weight; letter-spacing: $headline-medium-tracking; line-height: $headline-medium-line-height; } /// md.sys.typescale.emphasized.headline-small (Emphasized Headline styles / Emphasized Headline Small) @mixin headline-small { font-family: $headline-small-font; font-size: $headline-small-size; font-weight: $headline-small-weight; letter-spacing: $headline-small-tracking; line-height: $headline-small-line-height; } /// md.sys.typescale.emphasized.label-large (Emphasized Label styles / Emphasized Label Large) @mixin label-large { font-family: $label-large-font; font-size: $label-large-size; font-weight: $label-large-weight; letter-spacing: $label-large-tracking; line-height: $label-large-line-height; } /// md.sys.typescale.emphasized.label-medium (Emphasized Label styles / Emphasized Label Medium) @mixin label-medium { font-family: $label-medium-font; font-size: $label-medium-size; font-weight: $label-medium-weight; letter-spacing: $label-medium-tracking; line-height: $label-medium-line-height; } /// md.sys.typescale.emphasized.label-small (Emphasized Label styles / Emphasized Label Small) @mixin label-small { font-family: $label-small-font; font-size: $label-small-size; font-weight: $label-small-weight; letter-spacing: $label-small-tracking; line-height: $label-small-line-height; } /// md.sys.typescale.emphasized.title-large (Emphasized Title styles / Emphasized Title Large) @mixin title-large { font-family: $title-large-font; font-size: $title-large-size; font-weight: $title-large-weight; letter-spacing: $title-large-tracking; line-height: $title-large-line-height; } /// md.sys.typescale.emphasized.title-medium (Emphasized Title styles / Emphasized Title Medium) @mixin title-medium { font-family: $title-medium-font; font-size: $title-medium-size; font-weight: $title-medium-weight; letter-spacing: $title-medium-tracking; line-height: $title-medium-line-height; } /// md.sys.typescale.emphasized.title-small (Emphasized Title styles / Emphasized Title Small) @mixin title-small { font-family: $title-small-font; font-size: $title-small-size; font-weight: $title-small-weight; letter-spacing: $title-small-tracking; line-height: $title-small-line-height; } ================================================ FILE: tokens/versions/v30_0/sass/_md-sys-typescale.scss ================================================ // // Copyright 2026 Google LLC // SPDX-License-Identifier: Apache-2.0 // // AUTOGENERATED. DO NOT MODIFY. // To modify this file, update the source template, // or run the compiler: go/carbon-service-code-gen-mwtc. // Source template: sassvars/contextualtokenset.scss.tmpl // Design system: Google Material 3 // Version: 30.0.14 // Configured context tags: // audience: 3p // font: static // platform: web // Output format: sass_vars @use 'md-ref-typeface'; /// md.sys.typescale.body-large.crsv (Body styles / Body Large) $body-large-crsv: 'CRSV' 0; /// md.sys.typescale.body-large.fill (Body styles / Body Large) $body-large-fill: 'FILL' 0; /// md.sys.typescale.body-large.grad (Body styles / Body Large) $body-large-grad: 'GRAD' 0; /// md.sys.typescale.body-large.hexp (Body styles / Body Large) $body-large-hexp: 'HEXP' 0; /// md.sys.typescale.body-large.line-height (Body styles / Body Large) $body-large-line-height: 1.5rem; /// md.sys.typescale.body-large.opsz (Body styles / Body Large) $body-large-opsz: 'opsz' 16; /// md.sys.typescale.body-large.rond (Body styles / Body Large) $body-large-rond: 'ROND' 0; /// md.sys.typescale.body-large.size (Body styles / Body Large) $body-large-size: 1rem; /// md.sys.typescale.body-large.slnt (Body styles / Body Large) $body-large-slnt: 'slnt' 0; /// md.sys.typescale.body-large.tracking (Body styles / Body Large) $body-large-tracking: 0.03125rem; /// md.sys.typescale.body-large.wdth (Body styles / Body Large) $body-large-wdth: 'wdth' 100; /// md.sys.typescale.body-large.wght (Body styles / Body Large) $body-large-wght: 'wght' 400; /// md.sys.typescale.body-medium.crsv (Body styles / Body Medium) $body-medium-crsv: 'CRSV' 0; /// md.sys.typescale.body-medium.fill (Body styles / Body Medium) $body-medium-fill: 'FILL' 0; /// md.sys.typescale.body-medium.grad (Body styles / Body Medium) $body-medium-grad: 'GRAD' 0; /// md.sys.typescale.body-medium.hexp (Body styles / Body Medium) $body-medium-hexp: 'HEXP' 0; /// md.sys.typescale.body-medium.line-height (Body styles / Body Medium) $body-medium-line-height: 1.25rem; /// md.sys.typescale.body-medium.opsz (Body styles / Body Medium) $body-medium-opsz: 'opsz' 14; /// md.sys.typescale.body-medium.rond (Body styles / Body Medium) $body-medium-rond: 'ROND' 0; /// md.sys.typescale.body-medium.size (Body styles / Body Medium) $body-medium-size: 0.875rem; /// md.sys.typescale.body-medium.slnt (Body styles / Body Medium) $body-medium-slnt: 'slnt' 0; /// md.sys.typescale.body-medium.tracking (Body styles / Body Medium) $body-medium-tracking: 0.015625rem; /// md.sys.typescale.body-medium.wdth (Body styles / Body Medium) $body-medium-wdth: 'wdth' 100; /// md.sys.typescale.body-medium.wght (Body styles / Body Medium) $body-medium-wght: 'wght' 400; /// md.sys.typescale.body-small.crsv (Body styles / Body Small) $body-small-crsv: 'CRSV' 0; /// md.sys.typescale.body-small.fill (Body styles / Body Small) $body-small-fill: 'FILL' 0; /// md.sys.typescale.body-small.grad (Body styles / Body Small) $body-small-grad: 'GRAD' 0; /// md.sys.typescale.body-small.hexp (Body styles / Body Small) $body-small-hexp: 'HEXP' 0; /// md.sys.typescale.body-small.line-height (Body styles / Body Small) $body-small-line-height: 1rem; /// md.sys.typescale.body-small.opsz (Body styles / Body Small) $body-small-opsz: 'opsz' 12; /// md.sys.typescale.body-small.rond (Body styles / Body Small) $body-small-rond: 'ROND' 0; /// md.sys.typescale.body-small.size (Body styles / Body Small) $body-small-size: 0.75rem; /// md.sys.typescale.body-small.slnt (Body styles / Body Small) $body-small-slnt: 'slnt' 0; /// md.sys.typescale.body-small.tracking (Body styles / Body Small) $body-small-tracking: 0.025rem; /// md.sys.typescale.body-small.wdth (Body styles / Body Small) $body-small-wdth: 'wdth' 100; /// md.sys.typescale.body-small.wght (Body styles / Body Small) $body-small-wght: 'wght' 400; /// md.sys.typescale.display-large.crsv (Display styles / Display Large) $display-large-crsv: 'CRSV' 0; /// md.sys.typescale.display-large.fill (Display styles / Display Large) $display-large-fill: 'FILL' 0; /// md.sys.typescale.display-large.grad (Display styles / Display Large) $display-large-grad: 'GRAD' 0; /// md.sys.typescale.display-large.hexp (Display styles / Display Large) $display-large-hexp: 'HEXP' 0; /// md.sys.typescale.display-large.line-height (Display styles / Display Large) $display-large-line-height: 4rem; /// md.sys.typescale.display-large.opsz (Display styles / Display Large) $display-large-opsz: 'opsz' 57; /// md.sys.typescale.display-large.rond (Display styles / Display Large) $display-large-rond: 'ROND' 0; /// md.sys.typescale.display-large.size (Display styles / Display Large) $display-large-size: 3.5625rem; /// md.sys.typescale.display-large.slnt (Display styles / Display Large) $display-large-slnt: 'slnt' 0; /// md.sys.typescale.display-large.tracking (Display styles / Display Large) $display-large-tracking: -0.015625rem; /// md.sys.typescale.display-large.wdth (Display styles / Display Large) $display-large-wdth: 'wdth' 100; /// md.sys.typescale.display-large.wght (Display styles / Display Large) $display-large-wght: 'wght' 400; /// md.sys.typescale.display-medium.crsv (Display styles / Display Medium) $display-medium-crsv: 'CRSV' 0; /// md.sys.typescale.display-medium.fill (Display styles / Display Medium) $display-medium-fill: 'FILL' 0; /// md.sys.typescale.display-medium.grad (Display styles / Display Medium) $display-medium-grad: 'GRAD' 0; /// md.sys.typescale.display-medium.hexp (Display styles / Display Medium) $display-medium-hexp: 'HEXP' 0; /// md.sys.typescale.display-medium.line-height (Display styles / Display Medium) $display-medium-line-height: 3.25rem; /// md.sys.typescale.display-medium.opsz (Display styles / Display Medium) $display-medium-opsz: 'opsz' 45; /// md.sys.typescale.display-medium.rond (Display styles / Display Medium) $display-medium-rond: 'ROND' 0; /// md.sys.typescale.display-medium.size (Display styles / Display Medium) $display-medium-size: 2.8125rem; /// md.sys.typescale.display-medium.slnt (Display styles / Display Medium) $display-medium-slnt: 'slnt' 0; /// md.sys.typescale.display-medium.tracking (Display styles / Display Medium) $display-medium-tracking: 0rem; /// md.sys.typescale.display-medium.wdth (Display styles / Display Medium) $display-medium-wdth: 'wdth' 100; /// md.sys.typescale.display-medium.wght (Display styles / Display Medium) $display-medium-wght: 'wght' 400; /// md.sys.typescale.display-small.crsv (Display styles / Display Small) $display-small-crsv: 'CRSV' 0; /// md.sys.typescale.display-small.fill (Display styles / Display Small) $display-small-fill: 'FILL' 0; /// md.sys.typescale.display-small.grad (Display styles / Display Small) $display-small-grad: 'GRAD' 0; /// md.sys.typescale.display-small.hexp (Display styles / Display Small) $display-small-hexp: 'HEXP' 0; /// md.sys.typescale.display-small.line-height (Display styles / Display Small) $display-small-line-height: 2.75rem; /// md.sys.typescale.display-small.opsz (Display styles / Display Small) $display-small-opsz: 'opsz' 36; /// md.sys.typescale.display-small.rond (Display styles / Display Small) $display-small-rond: 'ROND' 0; /// md.sys.typescale.display-small.size (Display styles / Display Small) $display-small-size: 2.25rem; /// md.sys.typescale.display-small.slnt (Display styles / Display Small) $display-small-slnt: 'slnt' 0; /// md.sys.typescale.display-small.tracking (Display styles / Display Small) $display-small-tracking: 0rem; /// md.sys.typescale.display-small.wdth (Display styles / Display Small) $display-small-wdth: 'wdth' 100; /// md.sys.typescale.display-small.wght (Display styles / Display Small) $display-small-wght: 'wght' 400; /// md.sys.typescale.headline-large.crsv (Headline styles / Headline Large) $headline-large-crsv: 'CRSV' 0; /// md.sys.typescale.headline-large.fill (Headline styles / Headline Large) $headline-large-fill: 'FILL' 0; /// md.sys.typescale.headline-large.grad (Headline styles / Headline Large) $headline-large-grad: 'GRAD' 0; /// md.sys.typescale.headline-large.hexp (Headline styles / Headline Large) $headline-large-hexp: 'HEXP' 0; /// md.sys.typescale.headline-large.line-height (Headline styles / Headline Large) $headline-large-line-height: 2.5rem; /// md.sys.typescale.headline-large.opsz (Headline styles / Headline Large) $headline-large-opsz: 'opsz' 32; /// md.sys.typescale.headline-large.rond (Headline styles / Headline Large) $headline-large-rond: 'ROND' 0; /// md.sys.typescale.headline-large.size (Headline styles / Headline Large) $headline-large-size: 2rem; /// md.sys.typescale.headline-large.slnt (Headline styles / Headline Large) $headline-large-slnt: 'slnt' 0; /// md.sys.typescale.headline-large.tracking (Headline styles / Headline Large) $headline-large-tracking: 0rem; /// md.sys.typescale.headline-large.wdth (Headline styles / Headline Large) $headline-large-wdth: 'wdth' 100; /// md.sys.typescale.headline-large.wght (Headline styles / Headline Large) $headline-large-wght: 'wght' 400; /// md.sys.typescale.headline-medium.crsv (Headline styles / Headline Medium) $headline-medium-crsv: 'CRSV' 0; /// md.sys.typescale.headline-medium.fill (Headline styles / Headline Medium) $headline-medium-fill: 'FILL' 0; /// md.sys.typescale.headline-medium.grad (Headline styles / Headline Medium) $headline-medium-grad: 'GRAD' 0; /// md.sys.typescale.headline-medium.hexp (Headline styles / Headline Medium) $headline-medium-hexp: 'HEXP' 0; /// md.sys.typescale.headline-medium.line-height (Headline styles / Headline Medium) $headline-medium-line-height: 2.25rem; /// md.sys.typescale.headline-medium.opsz (Headline styles / Headline Medium) $headline-medium-opsz: 'opsz' 28; /// md.sys.typescale.headline-medium.rond (Headline styles / Headline Medium) $headline-medium-rond: 'ROND' 0; /// md.sys.typescale.headline-medium.size (Headline styles / Headline Medium) $headline-medium-size: 1.75rem; /// md.sys.typescale.headline-medium.slnt (Headline styles / Headline Medium) $headline-medium-slnt: 'slnt' 0; /// md.sys.typescale.headline-medium.tracking (Headline styles / Headline Medium) $headline-medium-tracking: 0rem; /// md.sys.typescale.headline-medium.wdth (Headline styles / Headline Medium) $headline-medium-wdth: 'wdth' 100; /// md.sys.typescale.headline-medium.wght (Headline styles / Headline Medium) $headline-medium-wght: 'wght' 400; /// md.sys.typescale.headline-small.crsv (Headline styles / Headline Small) $headline-small-crsv: 'CRSV' 0; /// md.sys.typescale.headline-small.fill (Headline styles / Headline Small) $headline-small-fill: 'FILL' 0; /// md.sys.typescale.headline-small.grad (Headline styles / Headline Small) $headline-small-grad: 'GRAD' 0; /// md.sys.typescale.headline-small.hexp (Headline styles / Headline Small) $headline-small-hexp: 'HEXP' 0; /// md.sys.typescale.headline-small.line-height (Headline styles / Headline Small) $headline-small-line-height: 2rem; /// md.sys.typescale.headline-small.opsz (Headline styles / Headline Small) $headline-small-opsz: 'opsz' 24; /// md.sys.typescale.headline-small.rond (Headline styles / Headline Small) $headline-small-rond: 'ROND' 0; /// md.sys.typescale.headline-small.size (Headline styles / Headline Small) $headline-small-size: 1.5rem; /// md.sys.typescale.headline-small.slnt (Headline styles / Headline Small) $headline-small-slnt: 'slnt' 0; /// md.sys.typescale.headline-small.tracking (Headline styles / Headline Small) $headline-small-tracking: 0rem; /// md.sys.typescale.headline-small.wdth (Headline styles / Headline Small) $headline-small-wdth: 'wdth' 100; /// md.sys.typescale.headline-small.wght (Headline styles / Headline Small) $headline-small-wght: 'wght' 400; /// md.sys.typescale.label-large-fill (Label styles / Label Large) $label-large-fill: 'FILL' 0; /// md.sys.typescale.label-large.crsv (Label styles / Label Large) $label-large-crsv: 'CRSV' 0; /// md.sys.typescale.label-large.grad (Label styles / Label Large) $label-large-grad: 'GRAD' 0; /// md.sys.typescale.label-large.hexp (Label styles / Label Large) $label-large-hexp: 'HEXP' 0; /// md.sys.typescale.label-large.line-height (Label styles / Label Large) $label-large-line-height: 1.25rem; /// md.sys.typescale.label-large.opsz (Label styles / Label Large) $label-large-opsz: 'opsz' 14; /// md.sys.typescale.label-large.rond (Label styles / Label Large) $label-large-rond: 'ROND' 0; /// md.sys.typescale.label-large.size (Label styles / Label Large) $label-large-size: 0.875rem; /// md.sys.typescale.label-large.slnt (Label styles / Label Large) $label-large-slnt: 'slnt' 0; /// md.sys.typescale.label-large.tracking (Label styles / Label Large) $label-large-tracking: 0.00625rem; /// md.sys.typescale.label-large.wdth (Label styles / Label Large) $label-large-wdth: 'wdth' 100; /// md.sys.typescale.label-large.wght (Label styles / Label Large) $label-large-wght: 'wght' 500; /// md.sys.typescale.label-medium.crsv (Label styles / Label Medium) $label-medium-crsv: 'CRSV' 0; /// md.sys.typescale.label-medium.fill (Label styles / Label Medium) $label-medium-fill: 'FILL' 0; /// md.sys.typescale.label-medium.grad (Label styles / Label Medium) $label-medium-grad: 'GRAD' 0; /// md.sys.typescale.label-medium.hexp (Label styles / Label Medium) $label-medium-hexp: 'HEXP' 0; /// md.sys.typescale.label-medium.line-height (Label styles / Label Medium) $label-medium-line-height: 1rem; /// md.sys.typescale.label-medium.opsz (Label styles / Label Medium) $label-medium-opsz: 'opsz' 12; /// md.sys.typescale.label-medium.rond (Label styles / Label Medium) $label-medium-rond: 'ROND' 0; /// md.sys.typescale.label-medium.size (Label styles / Label Medium) $label-medium-size: 0.75rem; /// md.sys.typescale.label-medium.slnt (Label styles / Label Medium) $label-medium-slnt: 'slnt' 0; /// md.sys.typescale.label-medium.text-transform (Label styles / Label Medium) /// /// @deprecated Token is deprecated. $label-medium-text-transform: none; /// md.sys.typescale.label-medium.tracking (Label styles / Label Medium) $label-medium-tracking: 0.03125rem; /// md.sys.typescale.label-medium.wdth (Label styles / Label Medium) $label-medium-wdth: 'wdth' 100; /// md.sys.typescale.label-medium.wght (Label styles / Label Medium) $label-medium-wght: 'wght' 500; /// md.sys.typescale.label-small.crsv (Label styles / Label Small) $label-small-crsv: 'CRSV' 0; /// md.sys.typescale.label-small.fill (Label styles / Label Small) $label-small-fill: 'FILL' 0; /// md.sys.typescale.label-small.grad (Label styles / Label Small) $label-small-grad: 'GRAD' 0; /// md.sys.typescale.label-small.hexp (Label styles / Label Small) $label-small-hexp: 'HEXP' 0; /// md.sys.typescale.label-small.line-height (Label styles / Label Small) $label-small-line-height: 1rem; /// md.sys.typescale.label-small.opsz (Label styles / Label Small) $label-small-opsz: 'opsz' 11; /// md.sys.typescale.label-small.rond (Label styles / Label Small) $label-small-rond: 'ROND' 0; /// md.sys.typescale.label-small.size (Label styles / Label Small) $label-small-size: 0.6875rem; /// md.sys.typescale.label-small.slnt (Label styles / Label Small) $label-small-slnt: 'slnt' 0; /// md.sys.typescale.label-small.tracking (Label styles / Label Small) $label-small-tracking: 0.03125rem; /// md.sys.typescale.label-small.wdth (Label styles / Label Small) $label-small-wdth: 'wdth' 100; /// md.sys.typescale.label-small.wght (Label styles / Label Small) $label-small-wght: 'wght' 500; /// md.sys.typescale.title-large.crsv (Title styles / Title Large) $title-large-crsv: 'CRSV' 0; /// md.sys.typescale.title-large.fill (Title styles / Title Large) $title-large-fill: 'FILL' 0; /// md.sys.typescale.title-large.grad (Title styles / Title Large) $title-large-grad: 'GRAD' 0; /// md.sys.typescale.title-large.hexp (Title styles / Title Large) $title-large-hexp: 'HEXP' 0; /// md.sys.typescale.title-large.line-height (Title styles / Title Large) $title-large-line-height: 1.75rem; /// md.sys.typescale.title-large.opsz (Title styles / Title Large) $title-large-opsz: 'opsz' 22; /// md.sys.typescale.title-large.rond (Title styles / Title Large) $title-large-rond: 'ROND' 0; /// md.sys.typescale.title-large.size (Title styles / Title Large) $title-large-size: 1.375rem; /// md.sys.typescale.title-large.slnt (Title styles / Title Large) $title-large-slnt: 'slnt' 0; /// md.sys.typescale.title-large.tracking (Title styles / Title Large) $title-large-tracking: 0rem; /// md.sys.typescale.title-large.wdth (Title styles / Title Large) $title-large-wdth: 'wdth' 100; /// md.sys.typescale.title-large.wght (Title styles / Title Large) $title-large-wght: 'wght' 400; /// md.sys.typescale.title-medium.crsv (Title styles / Title Medium) $title-medium-crsv: 'CRSV' 0; /// md.sys.typescale.title-medium.fill (Title styles / Title Medium) $title-medium-fill: 'FILL' 0; /// md.sys.typescale.title-medium.grad (Title styles / Title Medium) $title-medium-grad: 'GRAD' 0; /// md.sys.typescale.title-medium.hexp (Title styles / Title Medium) $title-medium-hexp: 'HEXP' 0; /// md.sys.typescale.title-medium.line-height (Title styles / Title Medium) $title-medium-line-height: 1.5rem; /// md.sys.typescale.title-medium.opsz (Title styles / Title Medium) $title-medium-opsz: 'opsz' 16; /// md.sys.typescale.title-medium.rond (Title styles / Title Medium) $title-medium-rond: 'ROND' 0; /// md.sys.typescale.title-medium.size (Title styles / Title Medium) $title-medium-size: 1rem; /// md.sys.typescale.title-medium.slnt (Title styles / Title Medium) $title-medium-slnt: 'slnt' 0; /// md.sys.typescale.title-medium.tracking (Title styles / Title Medium) $title-medium-tracking: 0.009375rem; /// md.sys.typescale.title-medium.wdth (Title styles / Title Medium) $title-medium-wdth: 'wdth' 100; /// md.sys.typescale.title-medium.wght (Title styles / Title Medium) $title-medium-wght: 'wght' 500; /// md.sys.typescale.title-small.crsv (Title styles / Title Small) $title-small-crsv: 'CRSV' 0; /// md.sys.typescale.title-small.fill (Title styles / Title Small) $title-small-fill: 'FILL' 0; /// md.sys.typescale.title-small.grad (Title styles / Title Small) $title-small-grad: 'GRAD' 0; /// md.sys.typescale.title-small.hexp (Title styles / Title Small) $title-small-hexp: 'HEXP' 0; /// md.sys.typescale.title-small.line-height (Title styles / Title Small) $title-small-line-height: 1.25rem; /// md.sys.typescale.title-small.opsz (Title styles / Title Small) $title-small-opsz: 'opsz' 14; /// md.sys.typescale.title-small.rond (Title styles / Title Small) $title-small-rond: 'ROND' 0; /// md.sys.typescale.title-small.size (Title styles / Title Small) $title-small-size: 0.875rem; /// md.sys.typescale.title-small.slnt (Title styles / Title Small) $title-small-slnt: 'slnt' 0; /// md.sys.typescale.title-small.tracking (Title styles / Title Small) $title-small-tracking: 0.00625rem; /// md.sys.typescale.title-small.wdth (Title styles / Title Small) $title-small-wdth: 'wdth' 100; /// md.sys.typescale.title-small.wght (Title styles / Title Small) $title-small-wght: 'wght' 500; /// md.sys.typescale.body-large.font (Body styles / Body Large) $body-large-font: md-ref-typeface.$plain; /// md.sys.typescale.body-large.weight (Body styles / Body Large) $body-large-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.body-medium.font (Body styles / Body Medium) $body-medium-font: md-ref-typeface.$plain; /// md.sys.typescale.body-medium.weight (Body styles / Body Medium) $body-medium-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.body-small.font (Body styles / Body Small) $body-small-font: md-ref-typeface.$plain; /// md.sys.typescale.body-small.weight (Body styles / Body Small) $body-small-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.display-large.font (Display styles / Display Large) $display-large-font: md-ref-typeface.$brand; /// md.sys.typescale.display-large.weight (Display styles / Display Large) $display-large-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.display-medium.font (Display styles / Display Medium) $display-medium-font: md-ref-typeface.$brand; /// md.sys.typescale.display-medium.weight (Display styles / Display Medium) $display-medium-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.display-small.font (Display styles / Display Small) $display-small-font: md-ref-typeface.$brand; /// md.sys.typescale.display-small.weight (Display styles / Display Small) $display-small-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.headline-large.font (Headline styles / Headline Large) $headline-large-font: md-ref-typeface.$brand; /// md.sys.typescale.headline-large.weight (Headline styles / Headline Large) $headline-large-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.headline-medium.font (Headline styles / Headline Medium) $headline-medium-font: md-ref-typeface.$brand; /// md.sys.typescale.headline-medium.weight (Headline styles / Headline Medium) $headline-medium-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.headline-small.font (Headline styles / Headline Small) $headline-small-font: md-ref-typeface.$brand; /// md.sys.typescale.headline-small.weight (Headline styles / Headline Small) $headline-small-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.label-large.font (Label styles / Label Large) $label-large-font: md-ref-typeface.$plain; /// md.sys.typescale.label-large.weight (Label styles / Label Large) $label-large-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.label-large.weight.prominent (Label styles / Label Large) /// /// @deprecated No longer in user. Please use emphasized token instead $label-large-weight-prominent: md-ref-typeface.$weight-bold; /// md.sys.typescale.label-medium.font (Label styles / Label Medium) $label-medium-font: md-ref-typeface.$plain; /// md.sys.typescale.label-medium.weight (Label styles / Label Medium) $label-medium-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.label-medium.weight.prominent (Label styles / Label Medium) /// /// @deprecated No longer in user. Please use emphasized token instead $label-medium-weight-prominent: md-ref-typeface.$weight-bold; /// md.sys.typescale.label-small.font (Label styles / Label Small) $label-small-font: md-ref-typeface.$plain; /// md.sys.typescale.label-small.weight (Label styles / Label Small) $label-small-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.title-large.font (Title styles / Title Large) $title-large-font: md-ref-typeface.$brand; /// md.sys.typescale.title-large.weight (Title styles / Title Large) $title-large-weight: md-ref-typeface.$weight-regular; /// md.sys.typescale.title-medium.font (Title styles / Title Medium) $title-medium-font: md-ref-typeface.$plain; /// md.sys.typescale.title-medium.weight (Title styles / Title Medium) $title-medium-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.title-small.font (Title styles / Title Small) $title-small-font: md-ref-typeface.$plain; /// md.sys.typescale.title-small.weight (Title styles / Title Small) $title-small-weight: md-ref-typeface.$weight-medium; /// md.sys.typescale.body-large (Body styles / Body Large) @mixin body-large { font-family: $body-large-font; font-size: $body-large-size; font-weight: $body-large-weight; letter-spacing: $body-large-tracking; line-height: $body-large-line-height; } /// md.sys.typescale.body-medium (Body styles / Body Medium) @mixin body-medium { font-family: $body-medium-font; font-size: $body-medium-size; font-weight: $body-medium-weight; letter-spacing: $body-medium-tracking; line-height: $body-medium-line-height; } /// md.sys.typescale.body-small (Body styles / Body Small) @mixin body-small { font-family: $body-small-font; font-size: $body-small-size; font-weight: $body-small-weight; letter-spacing: $body-small-tracking; line-height: $body-small-line-height; } /// md.sys.typescale.display-large (Display styles / Display Large) @mixin display-large { font-family: $display-large-font; font-size: $display-large-size; font-weight: $display-large-weight; letter-spacing: $display-large-tracking; line-height: $display-large-line-height; } /// md.sys.typescale.display-medium (Display styles / Display Medium) @mixin display-medium { font-family: $display-medium-font; font-size: $display-medium-size; font-weight: $display-medium-weight; letter-spacing: $display-medium-tracking; line-height: $display-medium-line-height; } /// md.sys.typescale.display-small (Display styles / Display Small) @mixin display-small { font-family: $display-small-font; font-size: $display-small-size; font-weight: $display-small-weight; letter-spacing: $display-small-tracking; line-height: $display-small-line-height; } /// md.sys.typescale.headline-large (Headline styles / Headline Large) @mixin headline-large { font-family: $headline-large-font; font-size: $headline-large-size; font-weight: $headline-large-weight; letter-spacing: $headline-large-tracking; line-height: $headline-large-line-height; } /// md.sys.typescale.headline-medium (Headline styles / Headline Medium) @mixin headline-medium { font-family: $headline-medium-font; font-size: $headline-medium-size; font-weight: $headline-medium-weight; letter-spacing: $headline-medium-tracking; line-height: $headline-medium-line-height; } /// md.sys.typescale.headline-small (Headline styles / Headline Small) @mixin headline-small { font-family: $headline-small-font; font-size: $headline-small-size; font-weight: $headline-small-weight; letter-spacing: $headline-small-tracking; line-height: $headline-small-line-height; } /// md.sys.typescale.label-large (Label styles / Label Large) @mixin label-large { font-family: $label-large-font; font-size: $label-large-size; font-weight: $label-large-weight; letter-spacing: $label-large-tracking; line-height: $label-large-line-height; } /// md.sys.typescale.label-medium (Label styles / Label Medium) @mixin label-medium { font-family: $label-medium-font; font-size: $label-medium-size; font-weight: $label-medium-weight; letter-spacing: $label-medium-tracking; line-height: $label-medium-line-height; } /// md.sys.typescale.label-small (Label styles / Label Small) @mixin label-small { font-family: $label-small-font; font-size: $label-small-size; font-weight: $label-small-weight; letter-spacing: $label-small-tracking; line-height: $label-small-line-height; } /// md.sys.typescale.title-large (Title styles / Title Large) @mixin title-large { font-family: $title-large-font; font-size: $title-large-size; font-weight: $title-large-weight; letter-spacing: $title-large-tracking; line-height: $title-large-line-height; } /// md.sys.typescale.title-medium (Title styles / Title Medium) @mixin title-medium { font-family: $title-medium-font; font-size: $title-medium-size; font-weight: $title-medium-weight; letter-spacing: $title-medium-tracking; line-height: $title-medium-line-height; } /// md.sys.typescale.title-small (Title styles / Title Small) @mixin title-small { font-family: $title-small-font; font-size: $title-small-size; font-weight: $title-small-weight; letter-spacing: $title-small-tracking; line-height: $title-small-line-height; } ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { "allowUnreachableCode": false, "baseUrl": ".", "declaration": true, "declarationMap": false, "downlevelIteration": true, "experimentalDecorators": true, "importHelpers": true, "module": "es2015", "moduleResolution": "node", "noFallthroughCasesInSwitch": true, "noImplicitAny": true, "noImplicitOverride": true, "noImplicitReturns": true, "noImplicitThis": true, "noPropertyAccessFromIndexSignature": true, "noUnusedLocals": true, "paths": { "@material/web/*": ["./*"] }, "sourceMap": true, "inlineSources": true, "strict": true, "strictNullChecks": false, "target": "es2021", "types": ["lit", "jasmine"] }, "exclude": [ "catalog", "**/demo", "scripts/" ] } ================================================ FILE: typography/_typeface.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; // go/keep-sorted end // go/keep-sorted start @use '../tokens'; // go/keep-sorted end /// `typeface.theme()` emits `--md-ref-typeface-*` custom properties for given /// font families and weights. /// /// Use this to change the font families or weights for all typescales. /// /// @example scss /// @use '@material/web/typography/typeface'; /// /// :root { /// @include typeface.theme( /// 'brand': 'Open Sans', /// 'plain': sans-serif, /// 'weight-bold': 900, /// ); /// } /// /// /* Generated CSS */ /// :root { /// --md-ref-typeface-brand: 'Open Sans'; /// --md-ref-typeface-plain: sans-serif; /// --md-ref-typeface-weight-bold: 900; /// } /// /// @param {Map} $tokens - A Map with `md-ref-typeface` token name keys and /// their corresponding font family or weight values. /// @output Emits `--md-ref-typeface-*` custom properties. @mixin theme($tokens) { @each $token, $value in $tokens { @if list.index(tokens.$md-ref-typeface-supported-tokens, $token) == null { @error 'md-ref-typeface `#{$token}` is not a supported token.'; } @if $value { --md-ref-typeface-#{$token}: #{$value}; } } } ================================================ FILE: typography/_typescale.scss ================================================ // // Copyright 2023 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use 'sass:list'; @use 'sass:map'; // go/keep-sorted end // go/keep-sorted start @use '../tokens'; // go/keep-sorted end /// `typescale.theme()` emits `--md-sys-typescale-*` custom properties for given /// typescale tokens. /// /// Use `typeface.theme()` to change font family and weight for all typescales, /// rather than individually. /// /// @example scss /// @use '@material/web/typography/typescale'; /// /// :root { /// @include typescale.theme(( /// 'body-medium-size': 1rem, /// 'body-medium-line-height': 1.5rem, /// /* ... */ /// )); /// } /// /// /* Generated CSS */ /// :root { /// --md-sys-typescale-body-medium-size: 1rem; /// --md-sys-typescale-body-medium-line-height: 1.5rem; /// /* ... */ /// } /// /// @param {Map} $tokens - A Map with `md-sys-typescale` token name keys and /// their corresponding `font` shorthand values. /// @output Emits `--md-sys-typescale-*` custom properties for given typescales. @mixin theme($tokens) { @each $token, $value in $tokens { @if list.index(tokens.$md-sys-typescale-supported-tokens, $token) == null { @error 'md-sys-typescale `#{$token}` is not a supported token.'; } @if $value { --md-sys-typescale-#{$token}: #{$value}; } } } /// Emits `.md-typescale-*` classes with font styles for each typescale in the /// provided `$tokens`. /// /// @example scss /// @include typescale.styles(tokens.md-sys-typescale-values()); /// // Generates the following CSS: /// .md-typescale-display-small { font: ...; } /// .md-typescale-display-medium { font: ...; } /// .md-typescale-display-large { font: ...; } /// .md-typescale-body-small { font: ...; } /// .md-typescale-body-medium { font: ...; } /// .md-typescale-body-large { font: ...; } /// // etc... /// /// @param {Map} $tokens - A Map with `md-sys-typescale` token values. /// @output Emits `.md-typescale-*` classes for each typescale size. @mixin styles($tokens) { $typescale-properties: _tokens-to-typescale-properties-map($tokens); // Use the default layer for lowered specificity. @layer { @each $typescale, $properties in $typescale-properties { // $typescale is a scale and size (ex. 'body-medium'). // $properties is a Map with 'font', 'size', 'line-height', 'weight', and // an optional 'weight-prominent'. .md-typescale-#{$typescale} { font: map.get($properties, 'weight') map.get($properties, 'size') / map.get($properties, 'line-height') map.get($properties, 'font'); } .md-typescale-#{$typescale}-prominent { // Inherit the font styles from the non-prominent selector. This adds // another class selector to the regular styles, instead of re-emitting // them. // ``` // .md-typescale-label-medium, .md-typescale-label-medium-prominent { // font: ...; // } // .md-typescale-label-medium-prominent { // font-weight: ...; // } // ``` @extend .md-typescale-#{$typescale}; // Note: the prominent selector is not emitted by Sass when a // typescale's prominent values are null. font-weight: map.get($properties, 'weight-prominent'); } } } } /// Takes a md-sys-typescale token values Map and returns a Map whose keys are /// typescale names ('body-medium', 'label-large', etc) and whose values are a /// Map of properties for that Typescale ('font', 'size', etc). @function _tokens-to-typescale-properties-map($tokens) { $typescale-properties: (); // The keys of $typescale-properties. Each typescale is joined with each size // ('display-small', 'display-medium', 'display-large', 'headline-small'...). $typescales: ('display', 'headline', 'title', 'body', 'label'); $sizes: ('small', 'medium', 'large'); // The keys to the Map for each scale in $typescale-properties. These // properties are required... $required-properties: ('font', 'line-height', 'size', 'weight'); // ...while not all typescales have these properties. $optional-properties: ('weight-prominent'); $properties: list.join($required-properties, $optional-properties); @each $typescale in $typescales { @each $size in $sizes { $typescale-and-size: #{$typescale}-#{$size}; @each $property in $properties { $token: '#{$typescale-and-size}-#{$property}'; $value: map.get($tokens, $token); @if $value == null and list.index($required-properties, $property) != null { @error 'Missing required typescale token `#{$token}`'; } // Remove token to check if we used them all at the end of the function. $tokens: map.remove($tokens, $token); $typescale-properties: map.set( $typescale-properties, $typescale-and-size, $property, $value ); } } } $unused-tokens: map.keys($tokens); $unused-token-count: list.length($unused-tokens); @if $unused-token-count > 0 { @error 'Missing styles for #{$unused-token-count} typescale tokens (#{$unused-tokens})'; } @return $typescale-properties; } ================================================ FILE: typography/md-typescale-styles.scss ================================================ // // Copyright 2024 Google LLC // SPDX-License-Identifier: Apache-2.0 // // go/keep-sorted start @use '../tokens'; @use './typescale'; // go/keep-sorted end @include typescale.styles(tokens.md-sys-typescale-values()); ================================================ FILE: web-test-runner.config.js ================================================ /** * @license * Copyright 2022 Google LLC * SPDX-License-Identifier: Apache-2.0 */ import {playwrightLauncher} from '@web/test-runner-playwright'; import {jasmineTestRunnerConfig} from 'web-test-runner-jasmine'; export default { ...jasmineTestRunnerConfig(), nodeResolve: true, files: ['**/*test.js', '!node_modules/', '!.wireit/'], browsers: [ playwrightLauncher({ product: 'chromium', // Exclude since Firefox errors with "Touch is not defined" // product: 'firefox', // Exclude since Webkit errors with "Unknown error" // product: 'webkit', }), ], };