From 27842e75f2c345713614e3a35b9e7309c159663d Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Thu, 3 Apr 2025 09:15:46 -0600 Subject: [PATCH 1/2] refactor: move token files in their component directories --- src/material/BUILD.bazel | 4 +- src/material/_index.scss | 2 +- src/material/autocomplete/BUILD.bazel | 28 +- .../autocomplete/_autocomplete-theme.scss | 26 +- .../_m2-autocomplete.scss} | 14 +- .../_m3-autocomplete.scss} | 8 +- .../autocomplete/autocomplete-trigger.ts | 13 +- src/material/autocomplete/autocomplete.scss | 14 +- src/material/badge/BUILD.bazel | 28 +- src/material/badge/_badge-theme.scss | 30 +- .../mat/_badge.scss => badge/_m2-badge.scss} | 12 +- .../mat/_badge.scss => badge/_m3-badge.scss} | 44 +-- src/material/badge/badge.scss | 43 +-- src/material/bottom-sheet/BUILD.bazel | 28 +- .../bottom-sheet/_bottom-sheet-theme.scss | 22 +- .../_m2-bottom-sheet.scss} | 12 +- .../_m3-bottom-sheet.scss} | 10 +- .../bottom-sheet/bottom-sheet-container.scss | 29 +- src/material/button-toggle/BUILD.bazel | 29 +- .../button-toggle/_button-toggle-theme.scss | 54 ++-- .../_m2-legacy-button-toggle.scss} | 12 +- .../_m2-standard-button-toggle.scss} | 14 +- .../_m3-standard-button-toggle.scss} | 12 +- src/material/button-toggle/button-toggle.scss | 110 ++++---- src/material/button/BUILD.bazel | 52 +++- src/material/button/_button-base.scss | 22 +- src/material/button/_button-theme.scss | 140 +++++----- src/material/button/_fab-theme.scss | 78 +++--- src/material/button/_icon-button-theme.scss | 28 +- .../_m2-extended-fab.scss} | 12 +- .../_m2-fab-small.scss} | 20 +- .../m2/mat/_fab.scss => button/_m2-fab.scss} | 20 +- .../_m2-filled-button.scss} | 18 +- .../_m2-icon-button.scss} | 14 +- .../_m2-outlined-button.scss} | 16 +- .../_m2-protected-button.scss} | 20 +- .../_m2-text-button.scss} | 14 +- .../_m2-tonal-button.scss} | 14 +- .../_m3-extended-fab.scss} | 6 +- .../_m3-fab-small.scss} | 8 +- .../m3/mat/_fab.scss => button/_m3-fab.scss} | 8 +- .../_m3-filled-button.scss} | 12 +- .../_m3-icon-button.scss} | 6 +- .../_m3-outlined-button.scss} | 12 +- .../_m3-protected-button.scss} | 14 +- .../_m3-text-button.scss} | 14 +- .../_m3-tonal-button.scss} | 12 +- src/material/button/button.scss | 258 ++++++++---------- src/material/button/fab.scss | 53 ++-- src/material/button/icon-button.scss | 34 ++- src/material/card/BUILD.bazel | 32 ++- src/material/card/_card-theme.scss | 78 +++--- .../m2/mat/_card.scss => card/_m2-card.scss} | 12 +- .../_m2-elevated-card.scss} | 14 +- .../_m2-outlined-card.scss} | 14 +- .../m3/mat/_card.scss => card/_m3-card.scss} | 10 +- .../_m3-elevated-card.scss} | 6 +- .../_m3-outlined-card.scss} | 6 +- src/material/card/card.scss | 63 ++--- src/material/checkbox/BUILD.bazel | 30 +- src/material/checkbox/_checkbox-common.scss | 123 +++------ src/material/checkbox/_checkbox-theme.scss | 34 +-- .../_m2-checkbox.scss} | 22 +- .../_m3-checkbox.scss} | 6 +- src/material/checkbox/checkbox.scss | 36 +-- src/material/chips/BUILD.bazel | 28 +- src/material/chips/_chips-theme.scss | 36 +-- .../m2/mat/_chip.scss => chips/_m2-chip.scss} | 16 +- .../m3/mat/_chip.scss => chips/_m3-chip.scss} | 34 +-- src/material/chips/chip.scss | 153 ++++++----- src/material/core/BUILD.bazel | 54 +++- src/material/core/_core-theme.scss | 68 +++-- src/material/core/_core.scss | 12 +- .../{tokens/m2/mat/_app.scss => _m2-app.scss} | 15 +- .../{tokens/m3/mat/_app.scss => _m3-app.scss} | 6 +- src/material/core/option/BUILD.bazel | 29 +- .../_m2-optgroup.scss} | 12 +- .../_option.scss => option/_m2-option.scss} | 12 +- .../_m3-optgroup.scss} | 8 +- .../_option.scss => option/_m3-option.scss} | 6 +- src/material/core/option/_optgroup-theme.scss | 18 +- src/material/core/option/_option-theme.scss | 26 +- src/material/core/option/optgroup.scss | 17 +- src/material/core/option/option.scss | 33 ++- .../_ripple.scss => ripple/_m2-ripple.scss} | 12 +- .../_ripple.scss => ripple/_m3-ripple.scss} | 6 +- src/material/core/ripple/_ripple-theme.scss | 22 +- src/material/core/ripple/_ripple.scss | 7 +- .../selection/pseudo-checkbox/BUILD.bazel | 28 +- .../_m2-full-pseudo-checkbox.scss} | 12 +- .../_m2-minimal-pseudo-checkbox.scss} | 12 +- .../_m3-full-pseudo-checkbox.scss} | 6 +- .../_m3-minimal-pseudo-checkbox.scss} | 6 +- .../_pseudo-checkbox-theme.scss | 38 +-- .../pseudo-checkbox/pseudo-checkbox.scss | 28 +- src/material/core/tokens/BUILD.bazel | 103 ++++++- src/material/core/tokens/_m2-tokens.scss | 159 +++++++++++ src/material/core/tokens/_m2-utils.scss | 109 ++++++++ src/material/core/tokens/_m3-system.scss | 34 +-- src/material/core/tokens/_m3-tokens.scss | 150 +++++++++- src/material/core/tokens/_m3-utils.scss | 85 ++++++ .../core/tokens/_token-definition.scss | 224 --------------- src/material/core/tokens/_token-utils.scss | 54 ++-- src/material/core/tokens/m2/BUILD.bazel | 13 - src/material/core/tokens/m2/_index.scss | 159 ----------- src/material/core/tokens/m2/mat/BUILD.bazel | 73 ----- src/material/core/tokens/m3/BUILD.bazel | 13 +- .../tokens/m3/{definitions => }/README.md | 0 src/material/core/tokens/m3/_index.scss | 134 +-------- .../m3/{definitions => }/_md-ref-palette.scss | 0 .../{definitions => }/_md-ref-typeface.scss | 0 .../m3/{definitions => }/_md-sys-color.scss | 0 .../{definitions => }/_md-sys-elevation.scss | 0 .../m3/{definitions => }/_md-sys-motion.scss | 0 .../m3/{definitions => }/_md-sys-shape.scss | 0 .../m3/{definitions => }/_md-sys-state.scss | 0 .../{definitions => }/_md-sys-typescale.scss | 0 .../core/tokens/m3/definitions/BUILD.bazel | 18 -- .../core/tokens/m3/definitions/_index.scss | 8 - src/material/core/tokens/m3/mat/BUILD.bazel | 68 ----- src/material/datepicker/BUILD.bazel | 36 ++- .../datepicker/_datepicker-theme.scss | 60 ++-- .../_m2-datepicker.scss} | 14 +- .../_m3-datepicker.scss} | 16 +- src/material/datepicker/calendar-body.scss | 81 +++--- src/material/datepicker/calendar.scss | 40 +-- src/material/datepicker/date-range-input.scss | 13 +- .../datepicker/datepicker-content.scss | 18 +- .../datepicker/datepicker-toggle.scss | 12 +- src/material/dialog/BUILD.bazel | 28 +- src/material/dialog/_dialog-theme.scss | 22 +- .../_dialog.scss => dialog/_m2-dialog.scss} | 16 +- .../_dialog.scss => dialog/_m3-dialog.scss} | 22 +- src/material/dialog/dialog.scss | 80 +++--- src/material/divider/BUILD.bazel | 28 +- src/material/divider/_divider-theme.scss | 18 +- .../_m2-divider.scss} | 12 +- .../_m3-divider.scss} | 6 +- src/material/divider/divider.scss | 13 +- src/material/expansion/BUILD.bazel | 30 +- src/material/expansion/_expansion-theme.scss | 26 +- .../_m2-expansion.scss} | 14 +- .../_m3-expansion.scss} | 16 +- .../expansion/expansion-panel-header.scss | 54 ++-- src/material/expansion/expansion-panel.scss | 43 ++- src/material/form-field/BUILD.bazel | 32 ++- .../form-field/_form-field-focus-overlay.scss | 10 +- .../form-field/_form-field-native-select.scss | 20 +- .../form-field/_form-field-subscript.scss | 22 +- .../form-field/_form-field-theme.scss | 94 +++---- .../_m2-filled-text-field.scss} | 18 +- .../_m2-form-field.scss} | 16 +- .../_m2-outlined-text-field.scss} | 18 +- .../_m3-filled-text-field.scss} | 6 +- .../_m3-form-field.scss} | 12 +- .../_m3-outlined-text-field.scss} | 6 +- .../_mdc-text-field-density-overrides.scss | 18 +- .../_mdc-text-field-structure-overrides.scss | 6 +- .../form-field/_mdc-text-field-structure.scss | 156 +++++------ src/material/form-field/form-field.scss | 40 +-- src/material/grid-list/BUILD.bazel | 28 +- src/material/grid-list/_grid-list-theme.scss | 14 +- .../_m2-grid-list.scss} | 12 +- .../_m3-grid-list.scss} | 4 +- src/material/grid-list/grid-list.scss | 14 +- src/material/icon/BUILD.bazel | 28 +- src/material/icon/_icon-theme.scss | 22 +- .../m2/mat/_icon.scss => icon/_m2-icon.scss} | 10 +- .../m3/mat/_icon.scss => icon/_m3-icon.scss} | 6 +- src/material/icon/icon.scss | 6 +- src/material/list/BUILD.bazel | 30 +- .../list/_list-inherited-structure.scss | 119 ++++---- src/material/list/_list-theme.scss | 60 ++-- .../m2/mat/_list.scss => list/_m2-list.scss} | 12 +- .../m3/mat/_list.scss => list/_m3-list.scss} | 4 +- src/material/list/list.scss | 41 ++- src/material/menu/BUILD.bazel | 28 +- .../m2/mat/_menu.scss => menu/_m2-menu.scss} | 14 +- .../m3/mat/_menu.scss => menu/_m3-menu.scss} | 28 +- src/material/menu/_menu-theme.scss | 22 +- src/material/menu/menu.scss | 86 +++--- src/material/paginator/BUILD.bazel | 28 +- .../_m2-paginator.scss} | 14 +- .../_m3-paginator.scss} | 8 +- src/material/paginator/_paginator-theme.scss | 22 +- src/material/paginator/paginator.scss | 60 ++-- src/material/progress-bar/BUILD.bazel | 28 +- .../_m2-progress-bar.scss} | 12 +- .../_m3-progress-bar.scss} | 4 +- .../progress-bar/_progress-bar-theme.scss | 18 +- src/material/progress-bar/progress-bar.scss | 60 ++-- src/material/progress-spinner/BUILD.bazel | 28 +- .../_m2-progress-spinner.scss} | 12 +- .../_m3-progress-spinner.scss} | 4 +- .../_progress-spinner-theme.scss | 26 +- .../progress-spinner/progress-spinner.scss | 14 +- src/material/radio/BUILD.bazel | 30 +- .../mat/_radio.scss => radio/_m2-radio.scss} | 18 +- .../mat/_radio.scss => radio/_m3-radio.scss} | 6 +- src/material/radio/_radio-common.scss | 65 ++--- src/material/radio/_radio-theme.scss | 34 ++- src/material/radio/radio.scss | 35 +-- src/material/select/BUILD.bazel | 28 +- .../_select.scss => select/_m2-select.scss} | 22 +- .../_select.scss => select/_m3-select.scss} | 12 +- src/material/select/_select-theme.scss | 39 ++- src/material/select/select.scss | 61 ++--- src/material/sidenav/BUILD.bazel | 28 +- .../_m2-sidenav.scss} | 14 +- .../_m3-sidenav.scss} | 12 +- src/material/sidenav/_sidenav-theme.scss | 22 +- src/material/sidenav/drawer.scss | 72 ++--- src/material/slide-toggle/BUILD.bazel | 28 +- .../_m2-slide-toggle.scss} | 16 +- .../_m3-slide-toggle.scss} | 40 +-- .../slide-toggle/_slide-toggle-theme.scss | 50 ++-- src/material/slide-toggle/slide-toggle.scss | 226 +++++++-------- src/material/slider/BUILD.bazel | 28 +- .../_slider.scss => slider/_m2-slider.scss} | 14 +- .../_slider.scss => slider/_m3-slider.scss} | 24 +- src/material/slider/_slider-theme.scss | 34 +-- src/material/slider/slider.scss | 151 +++++----- src/material/snack-bar/BUILD.bazel | 28 +- .../_m2-snack-bar.scss} | 12 +- .../_m3-snack-bar.scss} | 4 +- src/material/snack-bar/_snack-bar-theme.scss | 22 +- .../snack-bar/snack-bar-container.scss | 40 ++- src/material/sort/BUILD.bazel | 28 +- .../m2/mat/_sort.scss => sort/_m2-sort.scss} | 12 +- .../m3/mat/_sort.scss => sort/_m3-sort.scss} | 4 +- src/material/sort/_sort-theme.scss | 22 +- src/material/sort/sort-header.scss | 6 +- src/material/stepper/BUILD.bazel | 30 +- .../_m2-stepper.scss} | 14 +- .../_m3-stepper.scss} | 8 +- src/material/stepper/_stepper-theme.scss | 30 +- src/material/stepper/step-header.scss | 87 +++--- src/material/stepper/stepper.scss | 37 ++- src/material/table/BUILD.bazel | 28 +- .../mat/_table.scss => table/_m2-table.scss} | 14 +- .../mat/_table.scss => table/_m3-table.scss} | 14 +- src/material/table/_table-theme.scss | 26 +- src/material/table/table.scss | 61 +++-- src/material/tabs/BUILD.bazel | 32 ++- .../_m2-secondary-navigation-tab.scss} | 14 +- .../_m2-tab-header-with-background.scss} | 12 +- .../_m2-tab-header.scss} | 12 +- .../_m2-tab-indicator.scss} | 12 +- .../_m3-secondary-navigation-tab.scss} | 4 +- .../_m3-tab-header.scss} | 10 +- .../_m3-tab-indicator.scss} | 8 +- src/material/tabs/_tabs-common.scss | 133 +++++---- src/material/tabs/_tabs-theme.scss | 100 +++---- src/material/timepicker/BUILD.bazel | 28 +- .../_m2-timepicker.scss} | 14 +- .../_m3-timepicker.scss} | 8 +- .../timepicker/_timepicker-theme.scss | 26 +- src/material/timepicker/timepicker.scss | 20 +- src/material/toolbar/BUILD.bazel | 28 +- .../_m2-toolbar.scss} | 14 +- .../_m3-toolbar.scss} | 8 +- src/material/toolbar/_toolbar-theme.scss | 32 +-- src/material/toolbar/toolbar.scss | 50 ++-- src/material/tooltip/BUILD.bazel | 28 +- .../_m2-tooltip.scss} | 12 +- .../_m3-tooltip.scss} | 4 +- src/material/tooltip/_tooltip-theme.scss | 26 +- src/material/tooltip/tooltip.scss | 23 +- src/material/tree/BUILD.bazel | 28 +- .../m2/mat/_tree.scss => tree/_m2-tree.scss} | 14 +- .../m3/mat/_tree.scss => tree/_m3-tree.scss} | 4 +- src/material/tree/_tree-theme.scss | 22 +- src/material/tree/tree.scss | 20 +- tools/extract-tokens/extract-tokens.ts | 1 + 274 files changed, 4587 insertions(+), 4067 deletions(-) rename src/material/{core/tokens/m2/mat/_autocomplete.scss => autocomplete/_m2-autocomplete.scss} (76%) rename src/material/{core/tokens/m3/mat/_autocomplete.scss => autocomplete/_m3-autocomplete.scss} (75%) rename src/material/{core/tokens/m2/mat/_badge.scss => badge/_m2-badge.scss} (92%) rename src/material/{core/tokens/m3/mat/_badge.scss => badge/_m3-badge.scss} (61%) rename src/material/{core/tokens/m2/mat/_bottom-sheet.scss => bottom-sheet/_m2-bottom-sheet.scss} (83%) rename src/material/{core/tokens/m3/mat/_bottom-sheet.scss => bottom-sheet/_m3-bottom-sheet.scss} (70%) rename src/material/{core/tokens/m2/mat/_legacy-button-toggle.scss => button-toggle/_m2-legacy-button-toggle.scss} (87%) rename src/material/{core/tokens/m2/mat/_standard-button-toggle.scss => button-toggle/_m2-standard-button-toggle.scss} (90%) rename src/material/{core/tokens/m3/mat/_standard-button-toggle.scss => button-toggle/_m3-standard-button-toggle.scss} (85%) rename src/material/{core/tokens/m2/mat/_extended-fab.scss => button/_m2-extended-fab.scss} (82%) rename src/material/{core/tokens/m2/mat/_fab-small.scss => button/_m2-fab-small.scss} (87%) rename src/material/{core/tokens/m2/mat/_fab.scss => button/_m2-fab.scss} (87%) rename src/material/{core/tokens/m2/mat/_filled-button.scss => button/_m2-filled-button.scss} (89%) rename src/material/{core/tokens/m2/mat/_icon-button.scss => button/_m2-icon-button.scss} (87%) rename src/material/{core/tokens/m2/mat/_outlined-button.scss => button/_m2-outlined-button.scss} (90%) rename src/material/{core/tokens/m2/mat/_protected-button.scss => button/_m2-protected-button.scss} (89%) rename src/material/{core/tokens/m2/mat/_text-button.scss => button/_m2-text-button.scss} (89%) rename src/material/{core/tokens/m2/mat/_tonal-button.scss => button/_m2-tonal-button.scss} (89%) rename src/material/{core/tokens/m3/mat/_extended-fab.scss => button/_m3-extended-fab.scss} (94%) rename src/material/{core/tokens/m3/mat/_fab-small.scss => button/_m3-fab-small.scss} (95%) rename src/material/{core/tokens/m3/mat/_fab.scss => button/_m3-fab.scss} (95%) rename src/material/{core/tokens/m3/mat/_filled-button.scss => button/_m3-filled-button.scss} (89%) rename src/material/{core/tokens/m3/mat/_icon-button.scss => button/_m3-icon-button.scss} (94%) rename src/material/{core/tokens/m3/mat/_outlined-button.scss => button/_m3-outlined-button.scss} (89%) rename src/material/{core/tokens/m3/mat/_protected-button.scss => button/_m3-protected-button.scss} (90%) rename src/material/{core/tokens/m3/mat/_text-button.scss => button/_m3-text-button.scss} (85%) rename src/material/{core/tokens/m3/mat/_tonal-button.scss => button/_m3-tonal-button.scss} (88%) rename src/material/{core/tokens/m2/mat/_card.scss => card/_m2-card.scss} (86%) rename src/material/{core/tokens/m2/mat/_elevated-card.scss => card/_m2-elevated-card.scss} (80%) rename src/material/{core/tokens/m2/mat/_outlined-card.scss => card/_m2-outlined-card.scss} (81%) rename src/material/{core/tokens/m3/mat/_card.scss => card/_m3-card.scss} (65%) rename src/material/{core/tokens/m3/mat/_elevated-card.scss => card/_m3-elevated-card.scss} (86%) rename src/material/{core/tokens/m3/mat/_outlined-card.scss => card/_m3-outlined-card.scss} (87%) rename src/material/{core/tokens/m2/mat/_checkbox.scss => checkbox/_m2-checkbox.scss} (88%) rename src/material/{core/tokens/m3/mat/_checkbox.scss => checkbox/_m3-checkbox.scss} (97%) rename src/material/{core/tokens/m2/mat/_chip.scss => chips/_m2-chip.scss} (92%) rename src/material/{core/tokens/m3/mat/_chip.scss => chips/_m3-chip.scss} (82%) rename src/material/core/{tokens/m2/mat/_app.scss => _m2-app.scss} (80%) rename src/material/core/{tokens/m3/mat/_app.scss => _m3-app.scss} (88%) rename src/material/core/{tokens/m2/mat/_optgroup.scss => option/_m2-optgroup.scss} (82%) rename src/material/core/{tokens/m2/mat/_option.scss => option/_m2-option.scss} (85%) rename src/material/core/{tokens/m3/mat/_optgroup.scss => option/_m3-optgroup.scss} (73%) rename src/material/core/{tokens/m3/mat/_option.scss => option/_m3-option.scss} (94%) rename src/material/core/{tokens/m2/mat/_ripple.scss => ripple/_m2-ripple.scss} (81%) rename src/material/core/{tokens/m3/mat/_ripple.scss => ripple/_m3-ripple.scss} (80%) rename src/material/core/{tokens/m2/mat/_full-pseudo-checkbox.scss => selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss} (83%) rename src/material/core/{tokens/m2/mat/_minimal-pseudo-checkbox.scss => selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss} (79%) rename src/material/core/{tokens/m3/mat/_full-pseudo-checkbox.scss => selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss} (91%) rename src/material/core/{tokens/m3/mat/_minimal-pseudo-checkbox.scss => selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss} (87%) create mode 100644 src/material/core/tokens/_m2-tokens.scss create mode 100644 src/material/core/tokens/_m2-utils.scss create mode 100644 src/material/core/tokens/_m3-utils.scss delete mode 100644 src/material/core/tokens/_token-definition.scss delete mode 100644 src/material/core/tokens/m2/BUILD.bazel delete mode 100644 src/material/core/tokens/m2/_index.scss delete mode 100644 src/material/core/tokens/m2/mat/BUILD.bazel rename src/material/core/tokens/m3/{definitions => }/README.md (100%) rename src/material/core/tokens/m3/{definitions => }/_md-ref-palette.scss (100%) rename src/material/core/tokens/m3/{definitions => }/_md-ref-typeface.scss (100%) rename src/material/core/tokens/m3/{definitions => }/_md-sys-color.scss (100%) rename src/material/core/tokens/m3/{definitions => }/_md-sys-elevation.scss (100%) rename src/material/core/tokens/m3/{definitions => }/_md-sys-motion.scss (100%) rename src/material/core/tokens/m3/{definitions => }/_md-sys-shape.scss (100%) rename src/material/core/tokens/m3/{definitions => }/_md-sys-state.scss (100%) rename src/material/core/tokens/m3/{definitions => }/_md-sys-typescale.scss (100%) delete mode 100644 src/material/core/tokens/m3/definitions/BUILD.bazel delete mode 100644 src/material/core/tokens/m3/definitions/_index.scss delete mode 100644 src/material/core/tokens/m3/mat/BUILD.bazel rename src/material/{core/tokens/m2/mat/_datepicker.scss => datepicker/_m2-datepicker.scss} (95%) rename src/material/{core/tokens/m3/mat/_datepicker.scss => datepicker/_m3-datepicker.scss} (92%) rename src/material/{core/tokens/m2/mat/_dialog.scss => dialog/_m2-dialog.scss} (87%) rename src/material/{core/tokens/m3/mat/_dialog.scss => dialog/_m3-dialog.scss} (71%) rename src/material/{core/tokens/m2/mat/_divider.scss => divider/_m2-divider.scss} (76%) rename src/material/{core/tokens/m3/mat/_divider.scss => divider/_m3-divider.scss} (76%) rename src/material/{core/tokens/m2/mat/_expansion.scss => expansion/_m2-expansion.scss} (90%) rename src/material/{core/tokens/m3/mat/_expansion.scss => expansion/_m3-expansion.scss} (72%) rename src/material/{core/tokens/m2/mat/_filled-text-field.scss => form-field/_m2-filled-text-field.scss} (88%) rename src/material/{core/tokens/m2/mat/_form-field.scss => form-field/_m2-form-field.scss} (95%) rename src/material/{core/tokens/m2/mat/_outlined-text-field.scss => form-field/_m2-outlined-text-field.scss} (87%) rename src/material/{core/tokens/m3/mat/_filled-text-field.scss => form-field/_m3-filled-text-field.scss} (95%) rename src/material/{core/tokens/m3/mat/_form-field.scss => form-field/_m3-form-field.scss} (85%) rename src/material/{core/tokens/m3/mat/_outlined-text-field.scss => form-field/_m3-outlined-text-field.scss} (95%) rename src/material/{core/tokens/m2/mat/_grid-list.scss => grid-list/_m2-grid-list.scss} (83%) rename src/material/{core/tokens/m3/mat/_grid-list.scss => grid-list/_m3-grid-list.scss} (88%) rename src/material/{core/tokens/m2/mat/_icon.scss => icon/_m2-icon.scss} (80%) rename src/material/{core/tokens/m3/mat/_icon.scss => icon/_m3-icon.scss} (82%) rename src/material/{core/tokens/m2/mat/_list.scss => list/_m2-list.scss} (94%) rename src/material/{core/tokens/m3/mat/_list.scss => list/_m3-list.scss} (97%) rename src/material/{core/tokens/m2/mat/_menu.scss => menu/_m2-menu.scss} (87%) rename src/material/{core/tokens/m3/mat/_menu.scss => menu/_m3-menu.scss} (58%) rename src/material/{core/tokens/m2/mat/_paginator.scss => paginator/_m2-paginator.scss} (90%) rename src/material/{core/tokens/m3/mat/_paginator.scss => paginator/_m3-paginator.scss} (81%) rename src/material/{core/tokens/m2/mat/_linear-progress.scss => progress-bar/_m2-progress-bar.scss} (84%) rename src/material/{core/tokens/m3/mat/_linear-progress.scss => progress-bar/_m3-progress-bar.scss} (91%) rename src/material/{core/tokens/m2/mat/_circular-progress.scss => progress-spinner/_m2-progress-spinner.scss} (80%) rename src/material/{core/tokens/m3/mat/_circular-progress.scss => progress-spinner/_m3-progress-spinner.scss} (93%) rename src/material/{core/tokens/m2/mat/_radio.scss => radio/_m2-radio.scss} (88%) rename src/material/{core/tokens/m3/mat/_radio.scss => radio/_m3-radio.scss} (95%) rename src/material/{core/tokens/m2/mat/_select.scss => select/_m2-select.scss} (82%) rename src/material/{core/tokens/m3/mat/_select.scss => select/_m3-select.scss} (82%) rename src/material/{core/tokens/m2/mat/_sidenav.scss => sidenav/_m2-sidenav.scss} (87%) rename src/material/{core/tokens/m3/mat/_sidenav.scss => sidenav/_m3-sidenav.scss} (71%) rename src/material/{core/tokens/m2/mat/_switch.scss => slide-toggle/_m2-slide-toggle.scss} (94%) rename src/material/{core/tokens/m3/mat/_switch.scss => slide-toggle/_m3-slide-toggle.scss} (86%) rename src/material/{core/tokens/m2/mat/_slider.scss => slider/_m2-slider.scss} (91%) rename src/material/{core/tokens/m3/mat/_slider.scss => slider/_m3-slider.scss} (88%) rename src/material/{core/tokens/m2/mat/_snack-bar.scss => snack-bar/_m2-snack-bar.scss} (85%) rename src/material/{core/tokens/m3/mat/_snack-bar.scss => snack-bar/_m3-snack-bar.scss} (91%) rename src/material/{core/tokens/m2/mat/_sort.scss => sort/_m2-sort.scss} (86%) rename src/material/{core/tokens/m3/mat/_sort.scss => sort/_m3-sort.scss} (83%) rename src/material/{core/tokens/m2/mat/_stepper.scss => stepper/_m2-stepper.scss} (91%) rename src/material/{core/tokens/m3/mat/_stepper.scss => stepper/_m3-stepper.scss} (95%) rename src/material/{core/tokens/m2/mat/_table.scss => table/_m2-table.scss} (90%) rename src/material/{core/tokens/m3/mat/_table.scss => table/_m3-table.scss} (65%) rename src/material/{core/tokens/m2/mat/_secondary-navigation-tab.scss => tabs/_m2-secondary-navigation-tab.scss} (82%) rename src/material/{core/tokens/m2/mat/_tab-header-with-background.scss => tabs/_m2-tab-header-with-background.scss} (78%) rename src/material/{core/tokens/m2/mat/_tab-header.scss => tabs/_m2-tab-header.scss} (89%) rename src/material/{core/tokens/m2/mat/_tab-indicator.scss => tabs/_m2-tab-indicator.scss} (81%) rename src/material/{core/tokens/m3/mat/_secondary-navigation-tab.scss => tabs/_m3-secondary-navigation-tab.scss} (83%) rename src/material/{core/tokens/m3/mat/_tab-header.scss => tabs/_m3-tab-header.scss} (86%) rename src/material/{core/tokens/m3/mat/_tab-indicator.scss => tabs/_m3-tab-indicator.scss} (77%) rename src/material/{core/tokens/m2/mat/_timepicker.scss => timepicker/_m2-timepicker.scss} (76%) rename src/material/{core/tokens/m3/mat/_timepicker.scss => timepicker/_m3-timepicker.scss} (75%) rename src/material/{core/tokens/m2/mat/_toolbar.scss => toolbar/_m2-toolbar.scss} (86%) rename src/material/{core/tokens/m3/mat/_toolbar.scss => toolbar/_m3-toolbar.scss} (75%) rename src/material/{core/tokens/m2/mat/_plain-tooltip.scss => tooltip/_m2-tooltip.scss} (84%) rename src/material/{core/tokens/m3/mat/_plain-tooltip.scss => tooltip/_m3-tooltip.scss} (91%) rename src/material/{core/tokens/m2/mat/_tree.scss => tree/_m2-tree.scss} (83%) rename src/material/{core/tokens/m3/mat/_tree.scss => tree/_m3-tree.scss} (88%) diff --git a/src/material/BUILD.bazel b/src/material/BUILD.bazel index f5e62d00cfa1..621233660667 100644 --- a/src/material/BUILD.bazel +++ b/src/material/BUILD.bazel @@ -1,3 +1,4 @@ +load("@npm2//:defs.bzl", "npm_link_all_packages") load( "//src/material:config.bzl", "MATERIAL_ENTRYPOINTS", @@ -7,7 +8,6 @@ load( load("//tools:defaults.bzl", "ng_package", "sass_library") load("//tools:defaults2.bzl", "ts_project") load("//tools/bazel:legacy_target.bzl", "get_legacy_label") -load("@npm2//:defs.bzl", "npm_link_all_packages") package(default_visibility = ["//visibility:public"]) @@ -68,7 +68,6 @@ sass_library( "//src/material/core/theming:_palettes", "//src/material/core/theming:core_all_theme", "//src/material/core/tokens:m3_system", - "//src/material/core/tokens/m2", "//src/material/core/typography", "//src/material/core/typography:all_typography", "//src/material/core/typography:utils", @@ -144,7 +143,6 @@ ng_package( "//src/material/core/theming:_palettes", "//src/material/core/theming:core_all_theme", "//src/material/core/tokens:m3_system", - "//src/material/core/tokens/m2", "//src/material/core/typography", "//src/material/core/typography:all_typography", "//src/material/core/typography:utils", diff --git a/src/material/_index.scss b/src/material/_index.scss index 91e90ff18ba9..994fa88cf21d 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -17,7 +17,7 @@ @forward './core/theming/theming' as private-* show private-clamp-density; @forward './core/typography/typography' show typography-hierarchy; @forward './core/typography/typography-utils' show font-shorthand; -@forward './core/tokens/m2' show m2-tokens-from-theme; +@forward 'core/tokens/m2-tokens' show m2-tokens-from-theme; @forward './core/tokens/m3-system' show system-level-colors, system-level-typography, system-level-elevation, system-level-shape, system-level-motion, system-level-state, theme, theme-overrides; diff --git a/src/material/autocomplete/BUILD.bazel b/src/material/autocomplete/BUILD.bazel index 3c18d8583eff..cb91b0665f87 100644 --- a/src/material/autocomplete/BUILD.bazel +++ b/src/material/autocomplete/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-autocomplete.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-autocomplete.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_autocomplete-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,9 +54,9 @@ sass_binary( name = "css", src = "autocomplete.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index 7f0e0aa071af..9e4fb8da3acb 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -5,7 +5,7 @@ @use '../core/typography/typography'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete; +@use 'm2-autocomplete'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -13,8 +13,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-unthemable-tokens() + m2-autocomplete.$prefix, + m2-autocomplete.get-unthemable-tokens() ); } } @@ -26,8 +26,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-color-tokens($theme) + m2-autocomplete.$prefix, + m2-autocomplete.get-color-tokens($theme) ); } } @@ -39,8 +39,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-typography-tokens($theme) + m2-autocomplete.$prefix, + m2-autocomplete.get-typography-tokens($theme) ); } } @@ -52,8 +52,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-autocomplete.$prefix, - tokens-mat-autocomplete.get-density-tokens($theme) + m2-autocomplete.$prefix, + m2-autocomplete.get-density-tokens($theme) ); } } @@ -63,8 +63,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-autocomplete.$prefix, - tokens: tokens-mat-autocomplete.get-token-slots(), + namespace: m2-autocomplete.$prefix, + tokens: m2-autocomplete.get-token-slots(), ), ); } @@ -98,8 +98,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-autocomplete.$prefix, - map.get($tokens, tokens-mat-autocomplete.$prefix) + m2-autocomplete.$prefix, + map.get($tokens, m2-autocomplete.$prefix) ); } } diff --git a/src/material/core/tokens/m2/mat/_autocomplete.scss b/src/material/autocomplete/_m2-autocomplete.scss similarity index 76% rename from src/material/core/tokens/m2/mat/_autocomplete.scss rename to src/material/autocomplete/_m2-autocomplete.scss index 45fdec6e8b42..6936ef19371b 100644 --- a/src/material/core/tokens/m2/mat/_autocomplete.scss +++ b/src/material/autocomplete/_m2-autocomplete.scss @@ -1,7 +1,7 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, autocomplete); @@ -37,8 +37,8 @@ $prefix: (mat, autocomplete); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_autocomplete.scss b/src/material/autocomplete/_m3-autocomplete.scss similarity index 75% rename from src/material/core/tokens/m3/mat/_autocomplete.scss rename to src/material/autocomplete/_m3-autocomplete.scss index fef11c316fa1..14adce4e997d 100644 --- a/src/material/core/tokens/m3/mat/_autocomplete.scss +++ b/src/material/autocomplete/_m3-autocomplete.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; +@use '../core/style/elevation'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, autocomplete); @@ -15,7 +15,7 @@ $prefix: (mat, autocomplete); background-color: map.get($systems, md-sys-color, surface-container), container-shape: map.get($systems, md-sys-shape, corner-extra-small), container-elevation-shadow: - token-definition.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded), + m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts index b8e2eb7c9bc2..c723970f3b4f 100644 --- a/src/material/autocomplete/autocomplete-trigger.ts +++ b/src/material/autocomplete/autocomplete-trigger.ts @@ -625,12 +625,13 @@ export class MatAutocompleteTrigger {injector: this._environmentInjector}, ); }); - const optionChanges = this.autocomplete.options?.changes.pipe( - tap(() => this._positionStrategy.reapplyLastPosition()), - // Defer emitting to the stream until the next tick, because changing - // bindings in here will cause "changed after checked" errors. - delay(0), - ) ?? observableOf(); + const optionChanges = + this.autocomplete.options?.changes.pipe( + tap(() => this._positionStrategy.reapplyLastPosition()), + // Defer emitting to the stream until the next tick, because changing + // bindings in here will cause "changed after checked" errors. + delay(0), + ) ?? observableOf(); // When the options are initially rendered, and when the option list changes... return ( diff --git a/src/material/autocomplete/autocomplete.scss b/src/material/autocomplete/autocomplete.scss index 064b07fc8412..5bbcbe84ab80 100644 --- a/src/material/autocomplete/autocomplete.scss +++ b/src/material/autocomplete/autocomplete.scss @@ -1,6 +1,9 @@ @use '@angular/cdk'; +@use './m2-autocomplete'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete; + +$token-prefix: m2-autocomplete.$prefix; +$token-slots: m2-autocomplete.get-token-slots(); // Even though we don't use the MDC styles, we need to keep the classes in the // DOM for the Gmat versions to work. We need to bump up the specificity here @@ -17,11 +20,10 @@ div.mat-mdc-autocomplete-panel { // Workaround in case other MDC menu surface styles bleed in. position: static; - @include token-utils.use-tokens( - tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-token-slots()) { - @include token-utils.create-token-slot(border-radius, container-shape); - @include token-utils.create-token-slot(box-shadow, container-elevation-shadow); - @include token-utils.create-token-slot(background-color, background-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-radius: token-utils.slot(container-shape); + box-shadow: token-utils.slot(container-elevation-shadow); + background-color: token-utils.slot(background-color); } @include cdk.high-contrast { diff --git a/src/material/badge/BUILD.bazel b/src/material/badge/BUILD.bazel index 7164621d3b77..1ae7672d251b 100644 --- a/src/material/badge/BUILD.bazel +++ b/src/material/badge/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-badge.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-badge.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_badge-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,9 +54,9 @@ sass_binary( name = "badge_css", src = "badge.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 0ddc4bca886e..94ebf7753fcd 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -3,7 +3,7 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mat/badge' as tokens-mat-badge; +@use './m2-badge'; @use '../core/tokens/token-utils'; @use '../core/style/sass-utils'; @@ -16,8 +16,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-badge.$prefix, - tokens-mat-badge.get-unthemable-tokens() + m2-badge.$prefix, + m2-badge.get-unthemable-tokens() ); } } @@ -34,22 +34,22 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-badge.$prefix, - tokens-mat-badge.get-color-tokens($theme) + m2-badge.$prefix, + m2-badge.get-color-tokens($theme) ); } .mat-badge-accent { @include token-utils.create-token-values-mixed( - tokens-mat-badge.$prefix, - tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent) + m2-badge.$prefix, + m2-badge.private-get-color-palette-color-tokens($theme, accent) ); } .mat-badge-warn { @include token-utils.create-token-values-mixed( - tokens-mat-badge.$prefix, - tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn) + m2-badge.$prefix, + m2-badge.private-get-color-palette-color-tokens($theme, warn) ); } } @@ -63,8 +63,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-badge.$prefix, - tokens-mat-badge.get-typography-tokens($theme) + m2-badge.$prefix, + m2-badge.get-typography-tokens($theme) ); } } @@ -83,8 +83,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-badge.$prefix, - tokens: tokens-mat-badge.get-token-slots(), + namespace: m2-badge.$prefix, + tokens: m2-badge.get-token-slots(), ), ); } @@ -123,6 +123,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens); + $mat-badge-tokens: token-utils.get-tokens-for($tokens, m2-badge.$prefix, $options...); + @include token-utils.create-token-values(m2-badge.$prefix, $mat-badge-tokens); } diff --git a/src/material/core/tokens/m2/mat/_badge.scss b/src/material/badge/_m2-badge.scss similarity index 92% rename from src/material/core/tokens/m2/mat/_badge.scss rename to src/material/badge/_m2-badge.scss index 8ad24b1701d7..cdb2ee5e6344 100644 --- a/src/material/core/tokens/m2/mat/_badge.scss +++ b/src/material/badge/_m2-badge.scss @@ -2,9 +2,9 @@ @use 'sass:map'; @use 'sass:math'; @use 'sass:color'; -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; $_default-size: 22px; $_small-size: $_default-size - 6px; @@ -103,8 +103,8 @@ $prefix: (mat, badge); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_badge.scss b/src/material/badge/_m3-badge.scss similarity index 61% rename from src/material/core/tokens/m3/mat/_badge.scss rename to src/material/badge/_m3-badge.scss index e3cf74071bae..108795797d3d 100644 --- a/src/material/core/tokens/m3/mat/_badge.scss +++ b/src/material/badge/_m3-badge.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, badge); @@ -21,29 +21,29 @@ $prefix: (mat, badge); text-font: map.get($systems, md-sys-typescale, label-small-font), text-size: map.get($systems, md-sys-typescale, label-small-size), text-weight: map.get($systems, md-sys-typescale, label-small-weight), - small-size-text-size: token-definition.hardcode(0, $exclude-hardcoded), + small-size-text-size: m3-utils.hardcode(0, $exclude-hardcoded), container-shape: map.get($systems, md-sys-shape, corner-full), - container-size: token-definition.hardcode(16px, $exclude-hardcoded), - line-height: token-definition.hardcode(16px, $exclude-hardcoded), - legacy-container-size: token-definition.hardcode(unset, $exclude-hardcoded), - legacy-small-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded), - small-size-container-size: token-definition.hardcode(6px, $exclude-hardcoded), - small-size-line-height: token-definition.hardcode(6px, $exclude-hardcoded), - container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded), - small-size-container-padding: token-definition.hardcode(0, $exclude-hardcoded), - container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded), - small-size-container-offset: token-definition.hardcode(-6px 0, $exclude-hardcoded), - container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded), - small-size-container-overlap-offset: token-definition.hardcode(-6px, $exclude-hardcoded), + container-size: m3-utils.hardcode(16px, $exclude-hardcoded), + line-height: m3-utils.hardcode(16px, $exclude-hardcoded), + legacy-container-size: m3-utils.hardcode(unset, $exclude-hardcoded), + legacy-small-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded), + small-size-container-size: m3-utils.hardcode(6px, $exclude-hardcoded), + small-size-line-height: m3-utils.hardcode(6px, $exclude-hardcoded), + container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded), + small-size-container-padding: m3-utils.hardcode(0, $exclude-hardcoded), + container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded), + small-size-container-offset: m3-utils.hardcode(-6px 0, $exclude-hardcoded), + container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded), + small-size-container-overlap-offset: m3-utils.hardcode(-6px, $exclude-hardcoded), // This size isn't in the M3 spec so we emit the same values as for `medium`. - large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded), - large-size-line-height: token-definition.hardcode(16px, $exclude-hardcoded), - large-size-container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded), - large-size-container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded), + large-size-container-size: m3-utils.hardcode(16px, $exclude-hardcoded), + large-size-line-height: m3-utils.hardcode(16px, $exclude-hardcoded), + large-size-container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded), + large-size-container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded), large-size-text-size: map.get($systems, md-sys-typescale, label-small-size), - large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded), - legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded), + large-size-container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded), + legacy-large-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded), ); $variant-tokens: ( @@ -77,5 +77,5 @@ $prefix: (mat, badge); error: () // Default, no overrides needed ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/badge/badge.scss b/src/material/badge/badge.scss index a7bc40b04a12..a05d5245bcb9 100644 --- a/src/material/badge/badge.scss +++ b/src/material/badge/badge.scss @@ -1,14 +1,17 @@ @use 'sass:color'; @use '@angular/cdk'; -@use '../core/tokens/m2/mat/badge' as tokens-mat-badge; +@use './m2-badge'; @use '../core/tokens/token-utils'; $default-size: 22px !default; $small-size: $default-size - 6; $large-size: $default-size + 6; +$token-prefix: m2-badge.$prefix; +$token-slots: m2-badge.get-token-slots(); + @mixin _badge-size($size) { - @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { $prefix: if($size == 'medium', '', $size + '-size-'); $legacy-size-var-name: 'legacy-#{$prefix}container-size'; $size-var-name: '#{$prefix}container-size'; @@ -22,18 +25,18 @@ $large-size: $default-size + 6; // * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy // behavior while in M3 it targets `min-width` and `min-height` which allows the badge to // grow with the content. - @include token-utils.create-token-slot(width, $legacy-size-var-name); - @include token-utils.create-token-slot(height, $legacy-size-var-name); - @include token-utils.create-token-slot(min-width, $size-var-name); - @include token-utils.create-token-slot(min-height, $size-var-name); - @include token-utils.create-token-slot(line-height, '#{$prefix}line-height'); - @include token-utils.create-token-slot(padding, '#{$prefix}container-padding'); - @include token-utils.create-token-slot(font-size, '#{$prefix}text-size'); - @include token-utils.create-token-slot(margin, '#{$prefix}container-offset'); + width: token-utils.slot($legacy-size-var-name); + height: token-utils.slot($legacy-size-var-name); + min-width: token-utils.slot($size-var-name); + min-height: token-utils.slot($size-var-name); + line-height: token-utils.slot('#{$prefix}line-height'); + padding: token-utils.slot('#{$prefix}container-padding'); + font-size: token-utils.slot('#{$prefix}text-size'); + margin: token-utils.slot('#{$prefix}container-offset'); } &.mat-badge-overlap .mat-badge-content { - @include token-utils.create-token-slot(margin, '#{$prefix}container-overlap-offset'); + margin: token-utils.slot('#{$prefix}container-overlap-offset'); } } } @@ -62,12 +65,12 @@ $large-size: $default-size + 6; box-sizing: border-box; pointer-events: none; - @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) { - @include token-utils.create-token-slot(background-color, background-color); - @include token-utils.create-token-slot(color, text-color); - @include token-utils.create-token-slot(font-family, text-font); - @include token-utils.create-token-slot(font-weight, text-weight); - @include token-utils.create-token-slot(border-radius, container-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(background-color); + color: token-utils.slot(text-color); + font-family: token-utils.slot(text-font); + font-weight: token-utils.slot(text-weight); + border-radius: token-utils.slot(container-shape); .mat-badge-above & { bottom: 100%; @@ -103,9 +106,9 @@ $large-size: $default-size + 6; } .mat-badge-disabled .mat-badge-content { - @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) { - @include token-utils.create-token-slot(background-color, disabled-state-background-color); - @include token-utils.create-token-slot(color, disabled-state-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(disabled-state-background-color); + color: token-utils.slot(disabled-state-text-color); } } diff --git a/src/material/bottom-sheet/BUILD.bazel b/src/material/bottom-sheet/BUILD.bazel index b000a2ef6e67..f8876fb8e2f3 100644 --- a/src/material/bottom-sheet/BUILD.bazel +++ b/src/material/bottom-sheet/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-bottom-sheet.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-bottom-sheet.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_bottom-sheet-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,10 +54,10 @@ sass_binary( name = "css", src = "bottom-sheet-container.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:elevation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index 2709138335d0..0923513f62d8 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -5,7 +5,7 @@ @use '../core/theming/validation'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet; +@use './m2-bottom-sheet'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -13,8 +13,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-bottom-sheet.$prefix, - tokens-mat-bottom-sheet.get-unthemable-tokens() + m2-bottom-sheet.$prefix, + m2-bottom-sheet.get-unthemable-tokens() ); } } @@ -26,8 +26,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-bottom-sheet.$prefix, - tokens-mat-bottom-sheet.get-color-tokens($theme) + m2-bottom-sheet.$prefix, + m2-bottom-sheet.get-color-tokens($theme) ); } } @@ -39,8 +39,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-bottom-sheet.$prefix, - tokens-mat-bottom-sheet.get-typography-tokens($theme) + m2-bottom-sheet.$prefix, + m2-bottom-sheet.get-typography-tokens($theme) ); } } @@ -57,8 +57,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-bottom-sheet.$prefix, - tokens: tokens-mat-bottom-sheet.get-token-slots(), + namespace: m2-bottom-sheet.$prefix, + tokens: m2-bottom-sheet.get-token-slots(), ), ); } @@ -92,8 +92,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-bottom-sheet.$prefix, - map.get($tokens, tokens-mat-bottom-sheet.$prefix) + m2-bottom-sheet.$prefix, + map.get($tokens, m2-bottom-sheet.$prefix) ); } } diff --git a/src/material/core/tokens/m2/mat/_bottom-sheet.scss b/src/material/bottom-sheet/_m2-bottom-sheet.scss similarity index 83% rename from src/material/core/tokens/m2/mat/_bottom-sheet.scss rename to src/material/bottom-sheet/_m2-bottom-sheet.scss index 077e0bcde753..292b1e773aa8 100644 --- a/src/material/core/tokens/m2/mat/_bottom-sheet.scss +++ b/src/material/bottom-sheet/_m2-bottom-sheet.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, bottom-sheet); @@ -43,8 +43,8 @@ $prefix: (mat, bottom-sheet); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_bottom-sheet.scss b/src/material/bottom-sheet/_m3-bottom-sheet.scss similarity index 70% rename from src/material/core/tokens/m3/mat/_bottom-sheet.scss rename to src/material/bottom-sheet/_m3-bottom-sheet.scss index f3d6a5cf1ca4..d628b04e19d9 100644 --- a/src/material/core/tokens/m3/mat/_bottom-sheet.scss +++ b/src/material/bottom-sheet/_m3-bottom-sheet.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, bottom-sheet); @@ -12,13 +12,13 @@ $prefix: (mat, bottom-sheet); /// @return {Map} A set of custom tokens for the mat-bottom-sheet @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, container-text, body-large), + m3-utils.generate-typography-tokens($systems, container-text, body-large), ( - container-shape: token-definition.hardcode(28px, $exclude-hardcoded), + container-shape: m3-utils.hardcode(28px, $exclude-hardcoded), container-text-color: map.get($systems, md-sys-color, on-surface), container-background-color: map.get($systems, md-sys-color, surface-container-low), ), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/bottom-sheet/bottom-sheet-container.scss b/src/material/bottom-sheet/bottom-sheet-container.scss index dd6628cd834d..4f47d87a5dce 100644 --- a/src/material/bottom-sheet/bottom-sheet-container.scss +++ b/src/material/bottom-sheet/bottom-sheet-container.scss @@ -1,6 +1,6 @@ @use '@angular/cdk'; @use '../core/style/elevation'; -@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet; +@use './m2-bottom-sheet'; @use '../core/tokens/token-utils'; // The bottom sheet minimum width on larger screen sizes is based @@ -10,6 +10,9 @@ $_width-increment: 64px; $container-vertical-padding: 8px !default; $container-horizontal-padding: 16px !default; +$token-prefix: m2-bottom-sheet.$prefix; +$token-slots: m2-bottom-sheet.get-token-slots(); + @keyframes _mat-bottom-sheet-enter { from { transform: translateY(100%); @@ -45,15 +48,14 @@ $container-horizontal-padding: 16px !default; // elements (e.g. close buttons) inside the bottom sheet. position: relative; - @include token-utils.use-tokens( - tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) { - @include token-utils.create-token-slot(background, container-background-color); - @include token-utils.create-token-slot(color, container-text-color); - @include token-utils.create-token-slot(font-family, container-text-font); - @include token-utils.create-token-slot(font-size, container-text-size); - @include token-utils.create-token-slot(line-height, container-text-line-height); - @include token-utils.create-token-slot(font-weight, container-text-weight); - @include token-utils.create-token-slot(letter-spacing, container-text-tracking); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background: token-utils.slot(container-background-color); + color: token-utils.slot(container-text-color); + font-family: token-utils.slot(container-text-font); + font-size: token-utils.slot(container-text-size); + line-height: token-utils.slot(container-text-line-height); + font-weight: token-utils.slot(container-text-weight); + letter-spacing: token-utils.slot(container-text-tracking); } @include cdk.high-contrast { @@ -75,10 +77,9 @@ $container-horizontal-padding: 16px !default; // Applies a border radius to the bottom sheet. Should only be applied when it's not full-screen. %_mat-bottom-sheet-container-border-radius { - @include token-utils.use-tokens( - tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) { - @include token-utils.create-token-slot(border-top-left-radius, container-shape); - @include token-utils.create-token-slot(border-top-right-radius, container-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-top-left-radius: token-utils.slot(container-shape); + border-top-right-radius: token-utils.slot(container-shape); } } diff --git a/src/material/button-toggle/BUILD.bazel b/src/material/button-toggle/BUILD.bazel index 28a0fdf8caee..75bc556e6088 100644 --- a/src/material/button-toggle/BUILD.bazel +++ b/src/material/button-toggle/BUILD.bazel @@ -10,18 +10,43 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-standard-button-toggle.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-legacy-button-toggle.scss", + "_m2-standard-button-toggle.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_button-toggle-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,12 +55,12 @@ sass_binary( name = "css", src = "button-toggle.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:elevation", "//src/material/core/style:layout_common", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index b2adc49dc527..3fbb8694090f 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -1,11 +1,11 @@ -@use '../core/theming/theming'; +@use '../core/style/sass-utils'; @use '../core/theming/inspection'; +@use '../core/theming/theming'; @use '../core/theming/validation'; -@use '../core/typography/typography'; -@use '../core/tokens/m2/mat/legacy-button-toggle' as tokens-mat-legacy-button-toggle; -@use '../core/tokens/m2/mat/standard-button-toggle' as tokens-mat-standard-button-toggle; @use '../core/tokens/token-utils'; -@use '../core/style/sass-utils'; +@use '../core/typography/typography'; +@use './m2-legacy-button-toggle'; +@use './m2-standard-button-toggle'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-button-toggle. @@ -16,12 +16,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-unthemable-tokens() + m2-legacy-button-toggle.$prefix, + m2-legacy-button-toggle.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-unthemable-tokens() + m2-standard-button-toggle.$prefix, + m2-standard-button-toggle.get-unthemable-tokens() ); } } @@ -38,12 +38,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-color-tokens($theme) + m2-legacy-button-toggle.$prefix, + m2-legacy-button-toggle.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-color-tokens($theme) + m2-standard-button-toggle.$prefix, + m2-standard-button-toggle.get-color-tokens($theme) ); } } @@ -57,12 +57,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-typography-tokens($theme) + m2-legacy-button-toggle.$prefix, + m2-legacy-button-toggle.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-typography-tokens($theme) + m2-standard-button-toggle.$prefix, + m2-standard-button-toggle.get-typography-tokens($theme) ); } } @@ -76,12 +76,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-density-tokens($theme) + m2-legacy-button-toggle.$prefix, + m2-legacy-button-toggle.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-density-tokens($theme) + m2-standard-button-toggle.$prefix, + m2-standard-button-toggle.get-density-tokens($theme) ); } } @@ -89,17 +89,17 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $legacy-tokens: tokens-mat-legacy-button-toggle.get-token-slots(); - $standard-tokens: tokens-mat-standard-button-toggle.get-token-slots(); + $legacy-tokens: m2-legacy-button-toggle.get-token-slots(); + $standard-tokens: m2-standard-button-toggle.get-token-slots(); @return ( ( - namespace: tokens-mat-legacy-button-toggle.$prefix, + namespace: m2-legacy-button-toggle.$prefix, tokens: $legacy-tokens, prefix: 'legacy-', ), ( - namespace: tokens-mat-standard-button-toggle.$prefix, + namespace: m2-standard-button-toggle.$prefix, tokens: $standard-tokens, ), ); @@ -141,11 +141,11 @@ ); $mat-standard-button-toggle-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-standard-button-toggle.$prefix, + m2-standard-button-toggle.$prefix, $options... ); @include token-utils.create-token-values( - tokens-mat-standard-button-toggle.$prefix, + m2-standard-button-toggle.$prefix, $mat-standard-button-toggle-tokens ); } diff --git a/src/material/core/tokens/m2/mat/_legacy-button-toggle.scss b/src/material/button-toggle/_m2-legacy-button-toggle.scss similarity index 87% rename from src/material/core/tokens/m2/mat/_legacy-button-toggle.scss rename to src/material/button-toggle/_m2-legacy-button-toggle.scss index 32341ceb0582..6b0a05c21508 100644 --- a/src/material/core/tokens/m2/mat/_legacy-button-toggle.scss +++ b/src/material/button-toggle/_m2-legacy-button-toggle.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, legacy-button-toggle); @@ -52,8 +52,8 @@ $prefix: (mat, legacy-button-toggle); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_standard-button-toggle.scss b/src/material/button-toggle/_m2-standard-button-toggle.scss similarity index 90% rename from src/material/core/tokens/m2/mat/_standard-button-toggle.scss rename to src/material/button-toggle/_m2-standard-button-toggle.scss index 21b4bad8999a..5d233b1b87c8 100644 --- a/src/material/core/tokens/m2/mat/_standard-button-toggle.scss +++ b/src/material/button-toggle/_m2-standard-button-toggle.scss @@ -1,9 +1,9 @@ @use 'sass:map'; @use 'sass:meta'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, standard-button-toggle); @@ -81,8 +81,8 @@ $prefix: (mat, standard-button-toggle); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_standard-button-toggle.scss b/src/material/button-toggle/_m3-standard-button-toggle.scss similarity index 85% rename from src/material/core/tokens/m3/mat/_standard-button-toggle.scss rename to src/material/button-toggle/_m3-standard-button-toggle.scss index 461e27ada73e..0dd736ca6a73 100644 --- a/src/material/core/tokens/m3/mat/_standard-button-toggle.scss +++ b/src/material/button-toggle/_m3-standard-button-toggle.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, standard-button-toggle); @@ -12,13 +12,13 @@ $prefix: (mat, standard-button-toggle); /// @return {Map} A set of custom tokens for the mat-button-toggle @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, label-text, label-large), + m3-utils.generate-typography-tokens($systems, label-text, label-large), ( shape: map.get($systems, md-sys-shape, corner-full), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), text-color: map.get($systems, md-sys-color, on-surface), - background-color: token-definition.hardcode(transparent, $exclude-hardcoded), + background-color: m3-utils.hardcode(transparent, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, on-surface), selected-state-background-color: map.get($systems, md-sys-color, secondary-container), selected-state-text-color: map.get($systems, md-sys-color, on-secondary-container), @@ -27,7 +27,7 @@ $prefix: (mat, standard-button-toggle); $alpha: 0.38, ), disabled-state-background-color: - token-definition.hardcode(transparent, $exclude-hardcoded), + m3-utils.hardcode(transparent, $exclude-hardcoded), disabled-selected-state-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38, @@ -56,5 +56,5 @@ $prefix: (mat, standard-button-toggle); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $color-variants), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $color-variants), $token-slots); } diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss index 1e02fbd24b25..1e6eb965b74b 100644 --- a/src/material/button-toggle/button-toggle.scss +++ b/src/material/button-toggle/button-toggle.scss @@ -4,8 +4,8 @@ @use '../core/style/layout-common'; @use '../core/style/elevation'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/legacy-button-toggle' as tokens-mat-legacy-button-toggle; -@use '../core/tokens/m2/mat/standard-button-toggle' as tokens-mat-standard-button-toggle; +@use './m2-legacy-button-toggle'; +@use './m2-standard-button-toggle'; $standard-padding: 12px !default; $legacy-padding: 16px !default; @@ -19,13 +19,13 @@ $standard-border-radius: 4px !default; $legacy-border-radius: 2px !default; $_legacy-tokens: ( - tokens-mat-legacy-button-toggle.$prefix, - tokens-mat-legacy-button-toggle.get-token-slots() + m2-legacy-button-toggle.$prefix, + m2-legacy-button-toggle.get-token-slots() ); $_standard-tokens: ( - tokens-mat-standard-button-toggle.$prefix, - tokens-mat-standard-button-toggle.get-token-slots() + m2-standard-button-toggle.$prefix, + m2-standard-button-toggle.get-token-slots() ); .mat-button-toggle-standalone, @@ -41,7 +41,7 @@ $_standard-tokens: ( transform: translateZ(0); @include token-utils.use-tokens($_legacy-tokens...) { - @include token-utils.create-token-slot(border-radius, shape); + border-radius: token-utils.slot(shape); } @include elevation.overridable-elevation(2); @@ -54,12 +54,12 @@ $_standard-tokens: ( .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard { @include token-utils.use-tokens($_standard-tokens...) { - @include token-utils.create-token-slot(border-radius, shape); - border: solid 1px token-utils.get-token-variable(divider-color); + border-radius: token-utils.slot(shape); + border: solid 1px token-utils.slot(divider-color); .mat-pseudo-checkbox { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{ - token-utils.get-token-variable(selected-state-text-color)}; + token-utils.slot(selected-state-text-color)}; } } @@ -87,18 +87,18 @@ $_standard-tokens: ( position: relative; @include token-utils.use-tokens($_legacy-tokens...) { - @include token-utils.create-token-slot(color, text-color); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-weight, label-text-weight); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); + color: token-utils.slot(text-color); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + line-height: token-utils.slot(label-text-line-height); + font-weight: token-utils.slot(label-text-weight); + letter-spacing: token-utils.slot(label-text-tracking); --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{ - token-utils.get-token-variable(selected-state-text-color)}; + token-utils.slot(selected-state-text-color)}; &.cdk-keyboard-focused .mat-button-toggle-focus-overlay { - @include token-utils.create-token-slot(opacity, focus-state-layer-opacity); + opacity: token-utils.slot(focus-state-layer-opacity); } } @@ -156,8 +156,8 @@ $_standard-tokens: ( .mat-button-toggle-checked { @include token-utils.use-tokens($_legacy-tokens...) { - @include token-utils.create-token-slot(color, selected-state-text-color); - @include token-utils.create-token-slot(background-color, selected-state-background-color); + color: token-utils.slot(selected-state-text-color); + background-color: token-utils.slot(selected-state-background-color); } } @@ -165,14 +165,13 @@ $_standard-tokens: ( pointer-events: none; @include token-utils.use-tokens($_legacy-tokens...) { - @include token-utils.create-token-slot(color, disabled-state-text-color); - @include token-utils.create-token-slot(background-color, disabled-state-background-color); + color: token-utils.slot(disabled-state-text-color); + background-color: token-utils.slot(disabled-state-background-color); --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{ - token-utils.get-token-variable(disabled-state-text-color)}; + token-utils.slot(disabled-state-text-color)}; &.mat-button-toggle-checked { - @include token-utils.create-token-slot(background-color, - disabled-selected-state-background-color); + background-color: token-utils.slot(disabled-selected-state-background-color); } } } @@ -183,14 +182,14 @@ $_standard-tokens: ( .mat-button-toggle-appearance-standard { @include token-utils.use-tokens($_standard-tokens...) { - $divider-color: token-utils.get-token-variable(divider-color); - @include token-utils.create-token-slot(color, text-color); - @include token-utils.create-token-slot(background-color, background-color); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-weight, label-text-weight); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); + $divider-color: token-utils.slot(divider-color); + color: token-utils.slot(text-color); + background-color: token-utils.slot(background-color); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + line-height: token-utils.slot(label-text-line-height); + font-weight: token-utils.slot(label-text-weight); + letter-spacing: token-utils.slot(label-text-tracking); .mat-button-toggle-group-appearance-standard & + & { border-left: solid 1px $divider-color; @@ -208,32 +207,31 @@ $_standard-tokens: ( } &.mat-button-toggle-checked { - @include token-utils.create-token-slot(color, selected-state-text-color); - @include token-utils.create-token-slot(background-color, selected-state-background-color); + color: token-utils.slot(selected-state-text-color); + background-color: token-utils.slot(selected-state-background-color); } &.mat-button-toggle-disabled { - @include token-utils.create-token-slot(color, disabled-state-text-color); - @include token-utils.create-token-slot(background-color, disabled-state-background-color); + color: token-utils.slot(disabled-state-text-color); + background-color: token-utils.slot(disabled-state-background-color); .mat-pseudo-checkbox { --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{ - token-utils.get-token-variable(disabled-selected-state-text-color)}; + token-utils.slot(disabled-selected-state-text-color)}; } &.mat-button-toggle-checked { - @include token-utils.create-token-slot(color, disabled-selected-state-text-color); - @include token-utils.create-token-slot(background-color, - disabled-selected-state-background-color); + color: token-utils.slot(disabled-selected-state-text-color); + background-color: token-utils.slot(disabled-selected-state-background-color); } } .mat-button-toggle-focus-overlay { - @include token-utils.create-token-slot(background-color, state-layer-color); + background-color: token-utils.slot(state-layer-color); } &:hover .mat-button-toggle-focus-overlay { - @include token-utils.create-token-slot(opacity, hover-state-layer-opacity); + opacity: token-utils.slot(hover-state-layer-opacity); } // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus @@ -241,7 +239,7 @@ $_standard-tokens: ( // always treated as programmatic focus. // TODO(paul): support `program` as well. See https://github.com/angular/components/issues/9889 &.cdk-keyboard-focused .mat-button-toggle-focus-overlay { - @include token-utils.create-token-slot(opacity, focus-state-layer-opacity); + opacity: token-utils.slot(focus-state-layer-opacity); } } @@ -262,7 +260,7 @@ $_standard-tokens: ( padding: 0 $legacy-padding; @include token-utils.use-tokens($_legacy-tokens...) { - @include token-utils.create-token-slot(line-height, height); + line-height: token-utils.slot(height); } // Prevents IE from shifting the content on click. @@ -272,7 +270,7 @@ $_standard-tokens: ( padding: 0 $standard-padding; @include token-utils.use-tokens($_standard-tokens...) { - @include token-utils.create-token-slot(line-height, height); + line-height: token-utils.slot(height); } } } @@ -291,7 +289,7 @@ $_standard-tokens: ( opacity: 0; @include token-utils.use-tokens($_legacy-tokens...) { - @include token-utils.create-token-slot(background-color, state-layer-color); + background-color: token-utils.slot(state-layer-color); } } @@ -383,30 +381,30 @@ $_standard-tokens: ( // radius of the button-toggle-group or standalone button-toggle. @include token-utils.use-tokens($_standard-tokens...) { .mat-button-toggle-standalone.mat-button-toggle-appearance-standard { - @include token-utils.create-token-slot(--mat-focus-indicator-border-radius, shape); + --mat-focus-indicator-border-radius: #{token-utils.slot(shape)}; } .mat-button-toggle-group-appearance-standard:not(.mat-button-toggle-vertical) .mat-button-toggle { &:last-of-type .mat-button-toggle-button::before { - @include token-utils.create-token-slot(border-top-right-radius, shape); - @include token-utils.create-token-slot(border-bottom-right-radius, shape); + border-top-right-radius: token-utils.slot(shape); + border-bottom-right-radius: token-utils.slot(shape); } &:first-of-type .mat-button-toggle-button::before { - @include token-utils.create-token-slot(border-top-left-radius, shape); - @include token-utils.create-token-slot(border-bottom-left-radius, shape); + border-top-left-radius: token-utils.slot(shape); + border-bottom-left-radius: token-utils.slot(shape); } } .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle { &:last-of-type .mat-button-toggle-button::before { - @include token-utils.create-token-slot(border-bottom-right-radius, shape); - @include token-utils.create-token-slot(border-bottom-left-radius, shape); + border-bottom-right-radius: token-utils.slot(shape); + border-bottom-left-radius: token-utils.slot(shape); } &:first-of-type .mat-button-toggle-button::before { - @include token-utils.create-token-slot(border-top-right-radius, shape); - @include token-utils.create-token-slot(border-top-left-radius, shape); + border-top-right-radius: token-utils.slot(shape); + border-top-left-radius: token-utils.slot(shape); } } } diff --git a/src/material/button/BUILD.bazel b/src/material/button/BUILD.bazel index 270cc5130606..c8e5682bc05a 100644 --- a/src/material/button/BUILD.bazel +++ b/src/material/button/BUILD.bazel @@ -10,18 +10,58 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-extended-fab.scss", + "_m3-fab.scss", + "_m3-fab-small.scss", + "_m3-filled-button.scss", + "_m3-icon-button.scss", + "_m3-outlined-button.scss", + "_m3-protected-button.scss", + "_m3-text-button.scss", + "_m3-tonal-button.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-extended-fab.scss", + "_m2-fab.scss", + "_m2-fab-small.scss", + "_m2-filled-button.scss", + "_m2-icon-button.scss", + "_m2-outlined-button.scss", + "_m2-protected-button.scss", + "_m2-text-button.scss", + "_m2-tonal-button.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_button-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,12 +70,12 @@ sass_library( name = "fab_theme", srcs = ["_fab-theme.scss"], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -44,12 +84,12 @@ sass_library( name = "icon_button_theme", srcs = ["_icon-button-theme.scss"], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -58,10 +98,10 @@ sass_binary( src = "icon-button.scss", deps = [ ":base_lib", + ":m2", "//src/material/core/style:private", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -70,11 +110,11 @@ sass_binary( src = "fab.scss", deps = [ ":base_lib", + ":m2", "//src/material/core/focus-indicators", "//src/material/core/style:private", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -102,11 +142,11 @@ sass_binary( src = "button.scss", deps = [ ":base_lib", + ":m2", "//src/material/core/focus-indicators", "//src/material/core/style:private", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss index 42f0af85f757..b20bc7f9d121 100644 --- a/src/material/button/_button-base.scss +++ b/src/material/button/_button-base.scss @@ -60,31 +60,31 @@ @mixin mat-private-button-ripple($prefix, $slots) { @include token-utils.use-tokens($prefix, $slots) { .mat-ripple-element { - @include token-utils.create-token-slot(background-color, ripple-color); + background-color: token-utils.slot(ripple-color); } .mat-mdc-button-persistent-ripple::before { - @include token-utils.create-token-slot(background-color, state-layer-color); + background-color: token-utils.slot(state-layer-color); } &.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before { - @include token-utils.create-token-slot(background-color, disabled-state-layer-color); + background-color: token-utils.slot(disabled-state-layer-color); } &:hover > .mat-mdc-button-persistent-ripple::before { - @include token-utils.create-token-slot(opacity, hover-state-layer-opacity); + opacity: token-utils.slot(hover-state-layer-opacity); } &.cdk-program-focused, &.cdk-keyboard-focused, &.mat-mdc-button-disabled-interactive:focus { > .mat-mdc-button-persistent-ripple::before { - @include token-utils.create-token-slot(opacity, focus-state-layer-opacity); + opacity: token-utils.slot(focus-state-layer-opacity); } } &:active > .mat-mdc-button-persistent-ripple::before { - @include token-utils.create-token-slot(opacity, pressed-state-layer-opacity); + opacity: token-utils.slot(pressed-state-layer-opacity); } } } @@ -112,7 +112,7 @@ // Adds an elevation shadow to a button. @mixin mat-private-button-elevation($token-name) { // MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`. - box-shadow: token-utils.get-token-variable($token-name + '-shadow'); + box-shadow: token-utils.slot($token-name + '-shadow'); } @mixin mat-private-button-touch-target($is-square, $prefix, $slots) { @@ -132,19 +132,19 @@ } @include token-utils.use-tokens($prefix, $slots) { - @include token-utils.create-token-slot(display, touch-target-display); + display: token-utils.slot(touch-target-display); } } } @mixin mat-private-button-horizontal-layout($prefix, $slots, $has-with-icon-padding) { @include token-utils.use-tokens($prefix, $slots) { - $icon-spacing: token-utils.get-token-variable(icon-spacing, true); - $icon-offset: token-utils.get-token-variable(icon-offset, true); + $icon-spacing: token-utils.slot(icon-spacing, true); + $icon-offset: token-utils.slot(icon-offset, true); @if ($has-with-icon-padding) { $with-icon-horizontal-padding: - token-utils.get-token-variable(with-icon-horizontal-padding, true); + token-utils.slot(with-icon-horizontal-padding, true); // stylelint-disable-next-line selector-class-pattern &:has(.material-icons, mat-icon, [matButtonIcon]) { diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index 0b5fb1447079..a6b36fea9e4a 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -3,58 +3,58 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button; -@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button; -@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button; -@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; -@use '../core/tokens/m2/mat/tonal-button' as tokens-mat-tonal-button; +@use './m2-filled-button'; +@use './m2-outlined-button'; +@use './m2-protected-button'; +@use './m2-text-button'; +@use './m2-tonal-button'; @use '../core/style/sass-utils'; @mixin _text-button-variant($theme, $palette) { $mat-tokens: if( $palette, - tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mat-text-button.get-color-tokens($theme) + m2-text-button.private-get-color-palette-color-tokens($theme, $palette), + m2-text-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(m2-text-button.$prefix, $mat-tokens); } @mixin _filled-button-variant($theme, $palette) { $mat-tokens: if( $palette, - tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mat-filled-button.get-color-tokens($theme) + m2-filled-button.private-get-color-palette-color-tokens($theme, $palette), + m2-filled-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mat-filled-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(m2-filled-button.$prefix, $mat-tokens); } @mixin _protected-button-variant($theme, $palette) { $mat-tokens: if( $palette, - tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mat-protected-button.get-color-tokens($theme) + m2-protected-button.private-get-color-palette-color-tokens($theme, $palette), + m2-protected-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mat-protected-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(m2-protected-button.$prefix, $mat-tokens); } @mixin _outlined-button-variant($theme, $palette) { $mat-tokens: if( $palette, - tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mat-outlined-button.get-color-tokens($theme) + m2-outlined-button.private-get-color-palette-color-tokens($theme, $palette), + m2-outlined-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mat-outlined-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(m2-outlined-button.$prefix, $mat-tokens); } @mixin _tonal-button-variant($theme, $palette) { - @include token-utils.create-token-values-mixed(tokens-mat-tonal-button.$prefix, if( + @include token-utils.create-token-values-mixed(m2-tonal-button.$prefix, if( $palette, - tokens-mat-tonal-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mat-tonal-button.get-color-tokens($theme) + m2-tonal-button.private-get-color-palette-color-tokens($theme, $palette), + m2-tonal-button.get-color-tokens($theme) )); } @@ -65,45 +65,45 @@ ); $mat-text-button-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-text-button.$prefix, + m2-text-button.$prefix, $options... ); $mat-protected-button-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-protected-button.$prefix, + m2-protected-button.$prefix, $options... ); $mat-filled-button-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-filled-button.$prefix, + m2-filled-button.$prefix, $options... ); $mat-outlined-button-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-outlined-button.$prefix, + m2-outlined-button.$prefix, $options... ); $mat-tonal-button-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-tonal-button.$prefix, + m2-tonal-button.$prefix, $options... ); - @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens); + @include token-utils.create-token-values(m2-text-button.$prefix, $mat-text-button-tokens); @include token-utils.create-token-values( - tokens-mat-protected-button.$prefix, + m2-protected-button.$prefix, $mat-protected-button-tokens ); @include token-utils.create-token-values( - tokens-mat-filled-button.$prefix, + m2-filled-button.$prefix, $mat-filled-button-tokens ); @include token-utils.create-token-values( - tokens-mat-outlined-button.$prefix, + m2-outlined-button.$prefix, $mat-outlined-button-tokens ); @include token-utils.create-token-values( - tokens-mat-tonal-button.$prefix, + m2-tonal-button.$prefix, $mat-tonal-button-tokens ); } @@ -117,24 +117,24 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-text-button.$prefix, - tokens-mat-text-button.get-unthemable-tokens() + m2-text-button.$prefix, + m2-text-button.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-filled-button.$prefix, - tokens-mat-filled-button.get-unthemable-tokens() + m2-filled-button.$prefix, + m2-filled-button.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-protected-button.$prefix, - tokens-mat-protected-button.get-unthemable-tokens() + m2-protected-button.$prefix, + m2-protected-button.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-button.$prefix, - tokens-mat-outlined-button.get-unthemable-tokens() + m2-outlined-button.$prefix, + m2-outlined-button.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-tonal-button.$prefix, - tokens-mat-tonal-button.get-unthemable-tokens() + m2-tonal-button.$prefix, + m2-tonal-button.get-unthemable-tokens() ); } } @@ -237,24 +237,24 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-text-button.$prefix, - tokens-mat-text-button.get-typography-tokens($theme) + m2-text-button.$prefix, + m2-text-button.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-filled-button.$prefix, - tokens-mat-filled-button.get-typography-tokens($theme) + m2-filled-button.$prefix, + m2-filled-button.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-protected-button.$prefix, - tokens-mat-protected-button.get-typography-tokens($theme) + m2-protected-button.$prefix, + m2-protected-button.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-button.$prefix, - tokens-mat-outlined-button.get-typography-tokens($theme) + m2-outlined-button.$prefix, + m2-outlined-button.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-tonal-button.$prefix, - tokens-mat-tonal-button.get-typography-tokens($theme) + m2-tonal-button.$prefix, + m2-tonal-button.get-typography-tokens($theme) ); } } @@ -268,24 +268,24 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-text-button.$prefix, - tokens-mat-text-button.get-density-tokens($theme) + m2-text-button.$prefix, + m2-text-button.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-filled-button.$prefix, - tokens-mat-filled-button.get-density-tokens($theme) + m2-filled-button.$prefix, + m2-filled-button.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-protected-button.$prefix, - tokens-mat-protected-button.get-density-tokens($theme) + m2-protected-button.$prefix, + m2-protected-button.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-button.$prefix, - tokens-mat-outlined-button.get-density-tokens($theme) + m2-outlined-button.$prefix, + m2-outlined-button.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-tonal-button.$prefix, - tokens-mat-tonal-button.get-density-tokens($theme) + m2-tonal-button.$prefix, + m2-tonal-button.get-density-tokens($theme) ); } } @@ -293,35 +293,35 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots(); - $mat-outlined-button-tokens: tokens-mat-outlined-button.get-token-slots(); - $mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots(); - $mat-text-button-tokens: tokens-mat-text-button.get-token-slots(); - $mat-tonal-button-tokens: tokens-mat-tonal-button.get-token-slots(); + $mat-filled-button-tokens: m2-filled-button.get-token-slots(); + $mat-outlined-button-tokens: m2-outlined-button.get-token-slots(); + $mat-protected-button-tokens: m2-protected-button.get-token-slots(); + $mat-text-button-tokens: m2-text-button.get-token-slots(); + $mat-tonal-button-tokens: m2-tonal-button.get-token-slots(); @return ( ( - namespace: tokens-mat-filled-button.$prefix, + namespace: m2-filled-button.$prefix, tokens: $mat-filled-button-tokens, prefix: 'filled-', ), ( - namespace: tokens-mat-outlined-button.$prefix, + namespace: m2-outlined-button.$prefix, tokens: $mat-outlined-button-tokens, prefix: 'outlined-', ), ( - namespace: tokens-mat-protected-button.$prefix, + namespace: m2-protected-button.$prefix, tokens: $mat-protected-button-tokens, prefix: 'protected-', ), ( - namespace: tokens-mat-text-button.$prefix, + namespace: m2-text-button.$prefix, tokens: $mat-text-button-tokens, prefix: 'text-', ), ( - namespace: tokens-mat-tonal-button.$prefix, + namespace: m2-tonal-button.$prefix, tokens: $mat-tonal-button-tokens, prefix: 'tonal-', ), diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss index 7330794bb607..b9d95667e743 100644 --- a/src/material/button/_fab-theme.scss +++ b/src/material/button/_fab-theme.scss @@ -2,9 +2,9 @@ @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/theming/validation'; -@use '../core/tokens/m2/mat/extended-fab' as tokens-mat-extended-fab; -@use '../core/tokens/m2/mat/fab' as tokens-mat-fab; -@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small; +@use './m2-extended-fab'; +@use './m2-fab'; +@use './m2-fab-small'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; @@ -17,16 +17,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-fab.$prefix, - tokens-mat-fab.get-unthemable-tokens() + m2-fab.$prefix, + m2-fab.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-fab-small.$prefix, - tokens-mat-fab-small.get-unthemable-tokens() + m2-fab-small.$prefix, + m2-fab-small.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-extended-fab.$prefix, - tokens-mat-extended-fab.get-unthemable-tokens() + m2-extended-fab.$prefix, + m2-extended-fab.get-unthemable-tokens() ); } } @@ -35,21 +35,21 @@ @mixin _fab-variant($theme, $palette) { $mat-tokens: if( $palette, - tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette), - tokens-mat-fab.get-color-tokens($theme) + m2-fab.private-get-color-palette-color-tokens($theme, $palette), + m2-fab.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mat-fab.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(m2-fab.$prefix, $mat-tokens); } @mixin _fab-small-variant($theme, $palette) { $mat-tokens: if( $palette, - tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette), - tokens-mat-fab-small.get-color-tokens($theme) + m2-fab-small.private-get-color-palette-color-tokens($theme, $palette), + m2-fab-small.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mat-fab-small.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(m2-fab-small.$prefix, $mat-tokens); } /// Outputs color theme styles for the mat-fab. @@ -65,8 +65,8 @@ @include _fab-variant($theme, null); @include _fab-small-variant($theme, null); @include token-utils.create-token-values-mixed( - tokens-mat-extended-fab.$prefix, - tokens-mat-extended-fab.get-color-tokens($theme) + m2-extended-fab.$prefix, + m2-extended-fab.get-color-tokens($theme) ); .mat-mdc-fab { @@ -108,16 +108,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-extended-fab.$prefix, - tokens-mat-extended-fab.get-typography-tokens($theme) + m2-extended-fab.$prefix, + m2-extended-fab.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-fab.$prefix, - tokens-mat-fab.get-typography-tokens($theme) + m2-fab.$prefix, + m2-fab.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-fab-small.$prefix, - tokens-mat-fab-small.get-typography-tokens($theme) + m2-fab-small.$prefix, + m2-fab-small.get-typography-tokens($theme) ); } } @@ -131,12 +131,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-fab.$prefix, - tokens-mat-fab.get-density-tokens($theme) + m2-fab.$prefix, + m2-fab.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-fab-small.$prefix, - tokens-mat-fab-small.get-density-tokens($theme) + m2-fab-small.$prefix, + m2-fab-small.get-density-tokens($theme) ); } } @@ -146,17 +146,17 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-extended-fab.$prefix, - tokens: tokens-mat-extended-fab.get-token-slots(), + namespace: m2-extended-fab.$prefix, + tokens: m2-extended-fab.get-token-slots(), prefix: 'extended-', ), ( - namespace: tokens-mat-fab.$prefix, - tokens: tokens-mat-fab.get-token-slots(), + namespace: m2-fab.$prefix, + tokens: m2-fab.get-token-slots(), ), ( - namespace: tokens-mat-fab-small.$prefix, - tokens: tokens-mat-fab-small.get-token-slots(), + namespace: m2-fab-small.$prefix, + tokens: m2-fab-small.get-token-slots(), prefix: 'small-', ), ); @@ -198,19 +198,19 @@ ); $mdc-extended-fab-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-extended-fab.$prefix, + m2-extended-fab.$prefix, $options... ); - $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...); + $mat-fab-tokens: token-utils.get-tokens-for($tokens, m2-fab.$prefix, $options...); $mat-fab-small-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-fab-small.$prefix, + m2-fab-small.$prefix, $options... ); @include token-utils.create-token-values( - tokens-mat-extended-fab.$prefix, + m2-extended-fab.$prefix, $mdc-extended-fab-tokens ); - @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens); - @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens); + @include token-utils.create-token-values(m2-fab.$prefix, $mat-fab-tokens); + @include token-utils.create-token-values(m2-fab-small.$prefix, $mat-fab-small-tokens); } diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 030bcdb53070..74e3470ac591 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @use 'sass:math'; -@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button; +@use './m2-icon-button'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @use '../core/theming/theming'; @@ -14,8 +14,8 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-unthemable-tokens() + m2-icon-button.$prefix, + m2-icon-button.get-unthemable-tokens() ); } } @@ -24,11 +24,11 @@ @mixin _icon-button-variant($theme, $palette) { $mat-tokens: if( $palette, - tokens-mat-icon-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mat-icon-button.get-color-tokens($theme) + m2-icon-button.private-get-color-palette-color-tokens($theme, $palette), + m2-icon-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mat-icon-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(m2-icon-button.$prefix, $mat-tokens); } /// Outputs color theme styles for the mat-icon-button. @@ -65,8 +65,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-typography-tokens($theme) + m2-icon-button.$prefix, + m2-icon-button.get-typography-tokens($theme) ); } } @@ -90,8 +90,8 @@ @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-density-tokens( + m2-icon-button.$prefix, + m2-icon-button.get-density-tokens( $theme, $exclude: (state-layer-size)) ); } @@ -119,8 +119,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-icon-button.$prefix, - tokens: tokens-mat-icon-button.get-token-slots(), + namespace: m2-icon-button.$prefix, + tokens: m2-icon-button.get-token-slots(), ), ); } @@ -157,8 +157,8 @@ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); @if ($tokens != ()) { - $mat-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon-button.$prefix, $options...); + $mat-tokens: token-utils.get-tokens-for($tokens, m2-icon-button.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens); + @include token-utils.create-token-values(m2-icon-button.$prefix, $mat-tokens); } } diff --git a/src/material/core/tokens/m2/mat/_extended-fab.scss b/src/material/button/_m2-extended-fab.scss similarity index 82% rename from src/material/core/tokens/m2/mat/_extended-fab.scss rename to src/material/button/_m2-extended-fab.scss index 50d6a3e02b6f..17a829e22b60 100644 --- a/src/material/core/tokens/m2/mat/_extended-fab.scss +++ b/src/material/button/_m2-extended-fab.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/elevation'; -@use '../../../theming/inspection'; +@use '../core/tokens/m2-utils'; +@use '../core/style/elevation'; +@use '../core/theming/inspection'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, extended-fab); @@ -43,10 +43,10 @@ $prefix: (mat, extended-fab); @return map.merge( get-unthemable-tokens(), map.merge( - get-color-tokens(token-definition.$placeholder-color-config), + get-color-tokens(m2-utils.$placeholder-color-config), map.merge( - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ) ) ); diff --git a/src/material/core/tokens/m2/mat/_fab-small.scss b/src/material/button/_m2-fab-small.scss similarity index 87% rename from src/material/core/tokens/m2/mat/_fab-small.scss rename to src/material/button/_m2-fab-small.scss index 6b9198a352de..c377ab22bc83 100644 --- a/src/material/core/tokens/m2/mat/_fab-small.scss +++ b/src/material/button/_m2-fab-small.scss @@ -1,9 +1,9 @@ @use 'sass:meta'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../style/elevation'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, fab-small); @@ -49,11 +49,11 @@ $prefix: (mat, fab-small); $ripple-color: null; $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast); - @if (token-definition.$private-is-internal-build or + @if (m2-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') { $is-dark: inspection.get-theme-type($theme) == dark; $container-color: inspection.get-theme-color($theme, $palette-name); - $contrast-tone: token-definition.contrast-tone($container-color, $is-dark); + $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark); $color: if($contrast-tone == 'dark', #000, #fff); $foreground-color: $color; $state-layer-color: $color; @@ -92,8 +92,8 @@ $prefix: (mat, fab-small); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_fab.scss b/src/material/button/_m2-fab.scss similarity index 87% rename from src/material/core/tokens/m2/mat/_fab.scss rename to src/material/button/_m2-fab.scss index 73fa9d0e978c..e62816e2b51d 100644 --- a/src/material/core/tokens/m2/mat/_fab.scss +++ b/src/material/button/_m2-fab.scss @@ -1,9 +1,9 @@ @use 'sass:meta'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../style/elevation'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, fab); @@ -49,11 +49,11 @@ $prefix: (mat, fab); $ripple-color: null; $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast); - @if (token-definition.$private-is-internal-build or + @if (m2-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') { $is-dark: inspection.get-theme-type($theme) == dark; $container-color: inspection.get-theme-color($theme, $palette-name); - $contrast-tone: token-definition.contrast-tone($container-color, $is-dark); + $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark); $color: if($contrast-tone == 'dark', #000, #fff); $foreground-color: $color; $state-layer-color: $color; @@ -92,8 +92,8 @@ $prefix: (mat, fab); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_filled-button.scss b/src/material/button/_m2-filled-button.scss similarity index 89% rename from src/material/core/tokens/m2/mat/_filled-button.scss rename to src/material/button/_m2-filled-button.scss index 0d3fc22a421e..737e4896c59b 100644 --- a/src/material/core/tokens/m2/mat/_filled-button.scss +++ b/src/material/button/_m2-filled-button.scss @@ -1,9 +1,9 @@ @use 'sass:meta'; @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, filled-button); @@ -48,11 +48,11 @@ $prefix: (mat, filled-button); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. - @if (token-definition.$private-is-internal-build or + @if (m2-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') { $is-dark: inspection.get-theme-type($theme) == dark; $container-color: inspection.get-theme-color($theme, $palette-name); - $contrast-tone: token-definition.contrast-tone($container-color, $is-dark); + $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark); $color: if($contrast-tone == 'dark', #000, #fff); $state-layer-color: $color; $ripple-color: rgba($color, 0.1); @@ -107,8 +107,8 @@ $prefix: (mat, filled-button); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_icon-button.scss b/src/material/button/_m2-icon-button.scss similarity index 87% rename from src/material/core/tokens/m2/mat/_icon-button.scss rename to src/material/button/_m2-icon-button.scss index 982d8e750f36..cd4714912983 100644 --- a/src/material/core/tokens/m2/mat/_icon-button.scss +++ b/src/material/button/_m2-icon-button.scss @@ -1,9 +1,9 @@ @use 'sass:meta'; @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, icon-button); @@ -80,8 +80,8 @@ $prefix: (mat, icon-button); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_outlined-button.scss b/src/material/button/_m2-outlined-button.scss similarity index 90% rename from src/material/core/tokens/m2/mat/_outlined-button.scss rename to src/material/button/_m2-outlined-button.scss index 7dd045303c46..e8334b922e0d 100644 --- a/src/material/core/tokens/m2/mat/_outlined-button.scss +++ b/src/material/button/_m2-outlined-button.scss @@ -1,8 +1,8 @@ @use 'sass:meta'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; @use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -27,7 +27,7 @@ $prefix: (mat, outlined-button); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. - $outline: if(token-definition.$private-is-internal-build, + $outline: if(m2-utils.$private-is-internal-build, rgba(if($is-dark, #fff, #000), 0.12), inspection.get-theme-color($theme, foreground, divider) ); @@ -101,8 +101,8 @@ $prefix: (mat, outlined-button); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_protected-button.scss b/src/material/button/_m2-protected-button.scss similarity index 89% rename from src/material/core/tokens/m2/mat/_protected-button.scss rename to src/material/button/_m2-protected-button.scss index ed9a38848148..e670a0e2369e 100644 --- a/src/material/core/tokens/m2/mat/_protected-button.scss +++ b/src/material/button/_m2-protected-button.scss @@ -1,10 +1,10 @@ @use 'sass:meta'; @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../style/elevation'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, protected-button); @@ -54,11 +54,11 @@ $prefix: (mat, protected-button); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. - @if (token-definition.$private-is-internal-build or + @if (m2-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') { $is-dark: inspection.get-theme-type($theme) == dark; $container-color: inspection.get-theme-color($theme, $palette-name); - $contrast-tone: token-definition.contrast-tone($container-color, $is-dark); + $contrast-tone: m2-utils.contrast-tone($container-color, $is-dark); $color: if($contrast-tone == 'dark', #000, #fff); $state-layer-color: $color; $ripple-color: rgba($color, 0.1); @@ -113,8 +113,8 @@ $prefix: (mat, protected-button); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_text-button.scss b/src/material/button/_m2-text-button.scss similarity index 89% rename from src/material/core/tokens/m2/mat/_text-button.scss rename to src/material/button/_m2-text-button.scss index 1e3c3f2926c9..47f60207f330 100644 --- a/src/material/core/tokens/m2/mat/_text-button.scss +++ b/src/material/button/_m2-text-button.scss @@ -1,9 +1,9 @@ @use 'sass:meta'; @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, text-button); @@ -83,8 +83,8 @@ $prefix: (mat, text-button); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_tonal-button.scss b/src/material/button/_m2-tonal-button.scss similarity index 89% rename from src/material/core/tokens/m2/mat/_tonal-button.scss rename to src/material/button/_m2-tonal-button.scss index 75f6246a677b..3cc625968ee1 100644 --- a/src/material/core/tokens/m2/mat/_tonal-button.scss +++ b/src/material/button/_m2-tonal-button.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tonal-button); @@ -83,8 +83,8 @@ $prefix: (mat, tonal-button); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_extended-fab.scss b/src/material/button/_m3-extended-fab.scss similarity index 94% rename from src/material/core/tokens/m3/mat/_extended-fab.scss rename to src/material/button/_m3-extended-fab.scss index a87e3288abc3..12680eec7a56 100644 --- a/src/material/core/tokens/m3/mat/_extended-fab.scss +++ b/src/material/button/_m3-extended-fab.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; +@use '../core/style/elevation'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, extended-fab); @@ -60,5 +60,5 @@ $prefix: (mat, extended-fab); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_fab-small.scss b/src/material/button/_m3-fab-small.scss similarity index 95% rename from src/material/core/tokens/m3/mat/_fab-small.scss rename to src/material/button/_m3-fab-small.scss index a15bc9e0596c..093f5d6a8796 100644 --- a/src/material/core/tokens/m3/mat/_fab-small.scss +++ b/src/material/button/_m3-fab-small.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; -@use '../../../style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, fab-small); @@ -87,5 +87,5 @@ $prefix: (mat, fab-small); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_fab.scss b/src/material/button/_m3-fab.scss similarity index 95% rename from src/material/core/tokens/m3/mat/_fab.scss rename to src/material/button/_m3-fab.scss index a9395fdadaa3..d1a819a041bf 100644 --- a/src/material/core/tokens/m3/mat/_fab.scss +++ b/src/material/button/_m3-fab.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; -@use '../../../style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, fab); @@ -86,5 +86,5 @@ $prefix: (mat, fab); } } - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_filled-button.scss b/src/material/button/_m3-filled-button.scss similarity index 89% rename from src/material/core/tokens/m3/mat/_filled-button.scss rename to src/material/button/_m3-filled-button.scss index 35e985bf8426..5df77f3217e6 100644 --- a/src/material/core/tokens/m3/mat/_filled-button.scss +++ b/src/material/button/_m3-filled-button.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m3-utils'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, filled-button); @@ -12,9 +12,9 @@ $prefix: (mat, filled-button); /// @return {Map} A set of custom tokens for the mat-flat-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), - icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), - icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), + horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded), + icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded), + icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, on-primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), ripple-color: sass-utils.safe-color-change( @@ -69,5 +69,5 @@ $prefix: (mat, filled-button); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_icon-button.scss b/src/material/button/_m3-icon-button.scss similarity index 94% rename from src/material/core/tokens/m3/mat/_icon-button.scss rename to src/material/button/_m3-icon-button.scss index 0c78e1005be9..18f6c89f4c09 100644 --- a/src/material/core/tokens/m3/mat/_icon-button.scss +++ b/src/material/button/_m3-icon-button.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m3-utils'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, icon-button); @@ -63,5 +63,5 @@ $prefix: (mat, icon-button); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_outlined-button.scss b/src/material/button/_m3-outlined-button.scss similarity index 89% rename from src/material/core/tokens/m3/mat/_outlined-button.scss rename to src/material/button/_m3-outlined-button.scss index 87bb8eda9c36..63975abd974f 100644 --- a/src/material/core/tokens/m3/mat/_outlined-button.scss +++ b/src/material/button/_m3-outlined-button.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, outlined-button); @@ -12,9 +12,9 @@ $prefix: (mat, outlined-button); /// @return {Map} A set of custom tokens for the mat-outlined-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), - icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), - icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), + horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded), + icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded), + icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), ripple-color: sass-utils.safe-color-change( @@ -67,5 +67,5 @@ $prefix: (mat, outlined-button); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_protected-button.scss b/src/material/button/_m3-protected-button.scss similarity index 90% rename from src/material/core/tokens/m3/mat/_protected-button.scss rename to src/material/button/_m3-protected-button.scss index 098d2c37bd1c..5bbe7cfe0d10 100644 --- a/src/material/core/tokens/m3/mat/_protected-button.scss +++ b/src/material/button/_m3-protected-button.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; +@use '../core/style/elevation'; +@use '../core/tokens/m3-utils'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. // Note: in M3 the "protected" button is called "elevated". @@ -27,11 +27,11 @@ $prefix: (mat, protected-button); disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), focus-container-elevation: map.get($systems, md-sys-elevation, level1), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), - horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), + horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded), hover-container-elevation: map.get($systems, md-sys-elevation, level2), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), - icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), - icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), + icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded), + icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded), label-text-color: map.get($systems, md-sys-color, primary), label-text-font: map.get($systems, md-sys-typescale, label-large-font), label-text-size: map.get($systems, md-sys-typescale, label-large-size), @@ -89,5 +89,5 @@ $prefix: (mat, protected-button); } } - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_text-button.scss b/src/material/button/_m3-text-button.scss similarity index 85% rename from src/material/core/tokens/m3/mat/_text-button.scss rename to src/material/button/_m3-text-button.scss index e3f4956ca961..5cbfb7366e3b 100644 --- a/src/material/core/tokens/m3/mat/_text-button.scss +++ b/src/material/button/_m3-text-button.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, text-button); @@ -12,10 +12,10 @@ $prefix: (mat, text-button); /// @return {Map} A set of custom tokens for the mat-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - horizontal-padding: token-definition.hardcode(12px, $exclude-hardcoded), - with-icon-horizontal-padding: token-definition.hardcode(16px, $exclude-hardcoded), - icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), - icon-offset: token-definition.hardcode(-4px, $exclude-hardcoded), + horizontal-padding: m3-utils.hardcode(12px, $exclude-hardcoded), + with-icon-horizontal-padding: m3-utils.hardcode(16px, $exclude-hardcoded), + icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded), + icon-offset: m3-utils.hardcode(-4px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), ripple-color: sass-utils.safe-color-change( @@ -64,5 +64,5 @@ $prefix: (mat, text-button); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_tonal-button.scss b/src/material/button/_m3-tonal-button.scss similarity index 88% rename from src/material/core/tokens/m3/mat/_tonal-button.scss rename to src/material/button/_m3-tonal-button.scss index 9cf60fa5fc3d..59cb39cae5c4 100644 --- a/src/material/core/tokens/m3/mat/_tonal-button.scss +++ b/src/material/button/_m3-tonal-button.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tonal-button); @@ -21,10 +21,10 @@ $prefix: (mat, tonal-button); sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), - horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), + horizontal-padding: m3-utils.hardcode(24px, $exclude-hardcoded), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), - icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), - icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), + icon-offset: m3-utils.hardcode(-8px, $exclude-hardcoded), + icon-spacing: m3-utils.hardcode(8px, $exclude-hardcoded), label-text-color: map.get($systems, md-sys-color, on-secondary-container), label-text-font: map.get($systems, md-sys-typescale, label-large-font), label-text-size: map.get($systems, md-sys-typescale, label-large-size), @@ -61,5 +61,5 @@ $prefix: (mat, tonal-button); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/button/button.scss b/src/material/button/button.scss index fb886fea157e..577624095dba 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -3,11 +3,22 @@ @use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; @use '../core/focus-indicators/private' as focus-indicators-private; -@use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button; -@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button; -@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button; -@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; -@use '../core/tokens/m2/mat/tonal-button' as tokens-mat-tonal-button; +@use './m2-filled-button'; +@use './m2-outlined-button'; +@use './m2-protected-button'; +@use './m2-text-button'; +@use './m2-tonal-button'; + +$filled-token-prefix: m2-filled-button.$prefix; +$filled-token-slots: m2-filled-button.get-token-slots(); +$outlined-token-prefix: m2-outlined-button.$prefix; +$outlined-token-slots: m2-outlined-button.get-token-slots(); +$protected-token-prefix: m2-protected-button.$prefix; +$protected-token-slots: m2-protected-button.get-token-slots(); +$text-token-prefix: m2-text-button.$prefix; +$text-token-slots: m2-text-button.get-token-slots(); +$tonal-token-prefix: m2-tonal-button.$prefix; +$tonal-token-slots: m2-tonal-button.get-token-slots(); .mat-mdc-button-base { text-decoration: none; @@ -58,137 +69,115 @@ } .mat-mdc-button { - $mat-text-button-slots: tokens-mat-text-button.get-token-slots(); - - @include token-utils.use-tokens(tokens-mat-text-button.$prefix, $mat-text-button-slots) { - padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + @include token-utils.use-tokens($text-token-prefix, $text-token-slots) { + padding: 0 #{token-utils.slot(horizontal-padding, true)}; } - @include token-utils.use-tokens( - tokens-mat-text-button.$prefix, - tokens-mat-text-button.get-token-slots() - ) { - @include token-utils.create-token-slot(height, container-height); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(text-transform, label-text-transform); - @include token-utils.create-token-slot(font-weight, label-text-weight); + @include token-utils.use-tokens($text-token-prefix, $text-token-slots) { + height: token-utils.slot(container-height); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + text-transform: token-utils.slot(label-text-transform); + font-weight: token-utils.slot(label-text-weight); &, .mdc-button__ripple { - @include token-utils.create-token-slot(border-radius, container-shape); + border-radius: token-utils.slot(container-shape); } &:not(:disabled) { - @include token-utils.create-token-slot(color, label-text-color); + color: token-utils.slot(label-text-color); } // We need to re-apply the disabled tokens since MDC uses // `:disabled` which doesn't apply to anchors. @include button-base.mat-private-button-disabled { - @include token-utils.create-token-slot(color, disabled-label-text-color); + color: token-utils.slot(disabled-label-text-color); } } - @include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix, - $mat-text-button-slots, true); - @include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix, - $mat-text-button-slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix, - $mat-text-button-slots); + @include button-base.mat-private-button-horizontal-layout( + $text-token-prefix, $text-token-slots, true); + @include button-base.mat-private-button-ripple( + $text-token-prefix, $text-token-slots); + @include button-base.mat-private-button-touch-target( + false, $text-token-prefix, $text-token-slots); } .mat-mdc-unelevated-button { - $mat-filled-button-slots: tokens-mat-filled-button.get-token-slots(); transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); - @include token-utils.use-tokens( - tokens-mat-filled-button.$prefix, - tokens-mat-filled-button.get-token-slots() - ) { - @include token-utils.create-token-slot(height, container-height); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(text-transform, label-text-transform); - @include token-utils.create-token-slot(font-weight, label-text-weight); + @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) { + height: token-utils.slot(container-height); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + text-transform: token-utils.slot(label-text-transform); + font-weight: token-utils.slot(label-text-weight); } - @include token-utils.use-tokens(tokens-mat-filled-button.$prefix, $mat-filled-button-slots) { - padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) { + padding: 0 #{token-utils.slot(horizontal-padding, true)}; } - @include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix, - $mat-filled-button-slots, false); - @include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix, - $mat-filled-button-slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix, - $mat-filled-button-slots); - - @include token-utils.use-tokens( - tokens-mat-filled-button.$prefix, - tokens-mat-filled-button.get-token-slots() - ) { + @include button-base.mat-private-button-horizontal-layout( + $filled-token-prefix, $filled-token-slots, false); + @include button-base.mat-private-button-ripple( + $filled-token-prefix, $filled-token-slots); + @include button-base.mat-private-button-touch-target( + false, $filled-token-prefix, $filled-token-slots); + + @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) { &:not(:disabled) { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(background-color, container-color); + color: token-utils.slot(label-text-color); + background-color: token-utils.slot(container-color); } &, .mdc-button__ripple { - @include token-utils.create-token-slot(border-radius, container-shape); + border-radius: token-utils.slot(container-shape); } // We need to re-apply the disabled tokens since MDC uses // `:disabled` which doesn't apply to anchors. @include button-base.mat-private-button-disabled { - @include token-utils.create-token-slot(color, disabled-label-text-color); - @include token-utils.create-token-slot(background-color, disabled-container-color); + color: token-utils.slot(disabled-label-text-color); + background-color: token-utils.slot(disabled-container-color); } } } .mat-mdc-raised-button { - $mat-protected-button-slots: tokens-mat-protected-button.get-token-slots(); transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); - @include token-utils.use-tokens( - tokens-mat-protected-button.$prefix, - tokens-mat-protected-button.get-token-slots() - ) { + @include token-utils.use-tokens($protected-token-prefix, $protected-token-slots) { @include button-base.mat-private-button-elevation(container-elevation); - @include token-utils.create-token-slot(height, container-height); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(text-transform, label-text-transform); - @include token-utils.create-token-slot(font-weight, label-text-weight); + height: token-utils.slot(container-height); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + text-transform: token-utils.slot(label-text-transform); + font-weight: token-utils.slot(label-text-weight); } - @include token-utils.use-tokens( - tokens-mat-protected-button.$prefix, - $mat-protected-button-slots - ) { - padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + @include token-utils.use-tokens($protected-token-prefix, $protected-token-slots) { + padding: 0 #{token-utils.slot(horizontal-padding, true)}; } - @include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix, - $mat-protected-button-slots, false); - @include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix, - $mat-protected-button-slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix, - $mat-protected-button-slots); - - @include token-utils.use-tokens( - tokens-mat-protected-button.$prefix, - tokens-mat-protected-button.get-token-slots() - ) { + @include button-base.mat-private-button-horizontal-layout( + $protected-token-prefix, $protected-token-slots, false); + @include button-base.mat-private-button-ripple( + $protected-token-prefix, $protected-token-slots); + @include button-base.mat-private-button-touch-target( + false, $protected-token-prefix, $protected-token-slots); + + @include token-utils.use-tokens($protected-token-prefix, $protected-token-slots) { &:not(:disabled) { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(background-color, container-color); + color: token-utils.slot(label-text-color); + background-color: token-utils.slot(container-color); } &, .mdc-button__ripple { - @include token-utils.create-token-slot(border-radius, container-shape); + border-radius: token-utils.slot(container-shape); } &:hover { @@ -206,8 +195,8 @@ // We need to re-apply the disabled tokens since MDC uses // `:disabled` which doesn't apply to anchors. @include button-base.mat-private-button-disabled { - @include token-utils.create-token-slot(color, disabled-label-text-color); - @include token-utils.create-token-slot(background-color, disabled-container-color); + color: token-utils.slot(disabled-label-text-color); + background-color: token-utils.slot(disabled-container-color); &.mat-mdc-button-disabled { @include button-base.mat-private-button-elevation(disabled-container-elevation); @@ -217,88 +206,81 @@ } .mat-mdc-outlined-button { - $mat-outlined-button-slots: tokens-mat-outlined-button.get-token-slots(); border-style: solid; transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1); - @include token-utils.use-tokens( - tokens-mat-outlined-button.$prefix, - tokens-mat-outlined-button.get-token-slots() - ) { - @include token-utils.create-token-slot(height, container-height); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(text-transform, label-text-transform); - @include token-utils.create-token-slot(font-weight, label-text-weight); - @include token-utils.create-token-slot(border-radius, container-shape); - @include token-utils.create-token-slot(border-width, outline-width); + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { + height: token-utils.slot(container-height); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + text-transform: token-utils.slot(label-text-transform); + font-weight: token-utils.slot(label-text-weight); + border-radius: token-utils.slot(container-shape); + border-width: token-utils.slot(outline-width); } - @include token-utils.use-tokens(tokens-mat-outlined-button.$prefix, $mat-outlined-button-slots) { - padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { + padding: 0 #{token-utils.slot(horizontal-padding, true)}; } - @include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix, - $mat-outlined-button-slots, false); - @include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix, - $mat-outlined-button-slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix, - $mat-outlined-button-slots); - - @include token-utils.use-tokens( - tokens-mat-outlined-button.$prefix, - tokens-mat-outlined-button.get-token-slots() - ) { + @include button-base.mat-private-button-horizontal-layout( + $outlined-token-prefix, $outlined-token-slots, false); + @include button-base.mat-private-button-ripple( + $outlined-token-prefix, $outlined-token-slots); + @include button-base.mat-private-button-touch-target( + false, $outlined-token-prefix, $outlined-token-slots); + + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { &:not(:disabled) { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(border-color, outline-color); + color: token-utils.slot(label-text-color); + border-color: token-utils.slot(outline-color); } // We need to re-apply the disabled tokens since MDC uses // `:disabled` which doesn't apply to anchors. @include button-base.mat-private-button-disabled { - @include token-utils.create-token-slot(color, disabled-label-text-color); - @include token-utils.create-token-slot(border-color, disabled-outline-color); + color: token-utils.slot(disabled-label-text-color); + border-color: token-utils.slot(disabled-outline-color); } } } .mat-tonal-button { - $slots: tokens-mat-tonal-button.get-token-slots(); transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); - @include token-utils.use-tokens(tokens-mat-tonal-button.$prefix, $slots) { - @include token-utils.create-token-slot(height, container-height); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(text-transform, label-text-transform); - @include token-utils.create-token-slot(font-weight, label-text-weight); - padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)}; + @include token-utils.use-tokens($tonal-token-prefix, $tonal-token-slots) { + height: token-utils.slot(container-height); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + text-transform: token-utils.slot(label-text-transform); + font-weight: token-utils.slot(label-text-weight); + padding: 0 #{token-utils.slot(horizontal-padding, true)}; &:not(:disabled) { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(background-color, container-color); + color: token-utils.slot(label-text-color); + background-color: token-utils.slot(container-color); } &, .mdc-button__ripple { - @include token-utils.create-token-slot(border-radius, container-shape); + border-radius: token-utils.slot(container-shape); } // We need to re-apply the disabled tokens since MDC uses // `:disabled` which doesn't apply to anchors. @include button-base.mat-private-button-disabled { - @include token-utils.create-token-slot(color, disabled-label-text-color); - @include token-utils.create-token-slot(background-color, disabled-container-color); + color: token-utils.slot(disabled-label-text-color); + background-color: token-utils.slot(disabled-container-color); } } - @include button-base.mat-private-button-horizontal-layout(tokens-mat-tonal-button.$prefix, - $slots, false); - @include button-base.mat-private-button-ripple(tokens-mat-tonal-button.$prefix, $slots); - @include button-base.mat-private-button-touch-target(false, tokens-mat-tonal-button.$prefix, - $slots); + @include button-base.mat-private-button-horizontal-layout( + $tonal-token-prefix, $tonal-token-slots, false); + @include button-base.mat-private-button-ripple( + $tonal-token-prefix, $tonal-token-slots); + @include button-base.mat-private-button-touch-target( + false, $tonal-token-prefix, $tonal-token-slots); } .mat-mdc-button, diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index 013e60d4a945..64cce92d3e6c 100644 --- a/src/material/button/fab.scss +++ b/src/material/button/fab.scss @@ -3,9 +3,16 @@ @use '../core/style/private' as style-private; @use '../core/style/vendor-prefixes'; @use '../core/focus-indicators/private' as focus-indicators-private; -@use '../core/tokens/m2/mat/extended-fab' as tokens-mat-extended-fab; -@use '../core/tokens/m2/mat/fab' as tokens-mat-fab; -@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small; +@use './m2-extended-fab'; +@use './m2-fab'; +@use './m2-fab-small'; + +$extended-fab-token-prefix: m2-extended-fab.$prefix; +$extended-fab-token-slots: m2-extended-fab.get-token-slots(); +$fab-token-prefix: m2-fab.$prefix; +$fab-token-slots: m2-fab.get-token-slots(); +$fab-small-token-prefix: m2-fab-small.$prefix; +$fab-small-token-slots: m2-fab-small.get-token-slots(); .mat-mdc-fab-base { @include vendor-prefixes.user-select(none); @@ -96,38 +103,38 @@ @mixin _fab-elevation($mat-tokens) { @include token-utils.use-tokens($mat-tokens...) { - @include token-utils.create-token-slot(box-shadow, container-elevation-shadow); + box-shadow: token-utils.slot(container-elevation-shadow); &:hover { - @include token-utils.create-token-slot(box-shadow, hover-container-elevation-shadow); + box-shadow: token-utils.slot(hover-container-elevation-shadow); } &:focus { - @include token-utils.create-token-slot(box-shadow, focus-container-elevation-shadow); + box-shadow: token-utils.slot(focus-container-elevation-shadow); } &:active, &:focus:active { - @include token-utils.create-token-slot(box-shadow, pressed-container-elevation-shadow); + box-shadow: token-utils.slot(pressed-container-elevation-shadow); } } } @mixin _fab-structure($mat-tokens) { @include token-utils.use-tokens($mat-tokens...) { - @include token-utils.create-token-slot(background-color, container-color); - @include token-utils.create-token-slot(border-radius, container-shape); + background-color: token-utils.slot(container-color); + border-radius: token-utils.slot(container-shape); } @include token-utils.use-tokens($mat-tokens...) { - @include token-utils.create-token-slot(color, foreground-color, inherit); + color: token-utils.slot(foreground-color, inherit); } @include _fab-elevation($mat-tokens); @include button-base.mat-private-button-disabled { @include token-utils.use-tokens($mat-tokens...) { - @include token-utils.create-token-slot(color, disabled-state-foreground-color); - @include token-utils.create-token-slot(background-color, disabled-state-container-color); + color: token-utils.slot(disabled-state-foreground-color); + background-color: token-utils.slot(disabled-state-container-color); } } @@ -136,22 +143,18 @@ } .mat-mdc-fab { - @include _fab-structure( - (tokens-mat-fab.$prefix, tokens-mat-fab.get-token-slots()), - ); + @include _fab-structure(($fab-token-prefix, $fab-token-slots)); } .mat-mdc-mini-fab { width: 40px; height: 40px; - @include _fab-structure( - (tokens-mat-fab-small.$prefix, tokens-mat-fab-small.get-token-slots()), - ); + @include _fab-structure(($fab-small-token-prefix, $fab-small-token-slots)); } .mat-mdc-extended-fab { - $mat-tokens: (tokens-mat-extended-fab.$prefix, tokens-mat-extended-fab.get-token-slots()); + $mat-tokens: ($extended-fab-token-prefix, $extended-fab-token-slots); // Before tokens MDC included the font smoothing automatically, but with // tokens it doesn't. We add it since it can cause tiny differences in @@ -165,12 +168,12 @@ line-height: normal; @include token-utils.use-tokens($mat-tokens...) { - @include token-utils.create-token-slot(height, container-height); - @include token-utils.create-token-slot(border-radius, container-shape); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(font-weight, label-text-weight); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); + height: token-utils.slot(container-height); + border-radius: token-utils.slot(container-shape); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + font-weight: token-utils.slot(label-text-weight); + letter-spacing: token-utils.slot(label-text-tracking); } @include _fab-elevation($mat-tokens); diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss index 5f847146ee5b..62aa6400c711 100644 --- a/src/material/button/icon-button.scss +++ b/src/material/button/icon-button.scss @@ -1,10 +1,11 @@ -@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button; - -@use './button-base'; @use '../core/style/private'; @use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; +@use './button-base'; +@use './m2-icon-button'; +$token-prefix: m2-icon-button.$prefix; +$token-slots: m2-icon-button.get-token-slots(); .mat-mdc-icon-button { @include vendor-prefixes.user-select(none); @@ -30,10 +31,9 @@ // Ensure the icons are centered. text-align: center; - @include token-utils.use-tokens( - tokens-mat-icon-button.$prefix, tokens-mat-icon-button.get-token-slots()) { - $button-size: token-utils.get-token-variable(state-layer-size, $fallback: 48px); - $icon-size: token-utils.get-token-variable(icon-size, $fallback: 24px); + @include token-utils.use-tokens($token-prefix, $token-slots) { + $button-size: token-utils.slot(state-layer-size, $fallback: 48px); + $icon-size: token-utils.slot(icon-size, $fallback: 24px); // We emit these tokens ourselves here so we can provide a default value. // This avoids a lot internal breakages in apps that didn't include the icon button theme. @@ -46,27 +46,25 @@ // Icon size used to be placed on the host element. Now, in `theme-styles` it is placed on // the unused `.mdc-button__icon` class. Explicitly set the font-size here. - @include token-utils.create-token-slot(font-size, icon-size); - @include token-utils.create-token-slot(color, icon-color); + font-size: token-utils.slot(icon-size); + color: token-utils.slot(icon-color); } @include button-base.mat-private-button-interactive(); - @include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-token-slots()); - @include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-token-slots()); + @include button-base.mat-private-button-ripple($token-prefix, $token-slots); + @include button-base.mat-private-button-touch-target( + true, $token-prefix, $token-slots); @include private.private-animation-noop(); - @include token-utils.use-tokens( - tokens-mat-icon-button.$prefix, tokens-mat-icon-button.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { @include button-base.mat-private-button-disabled { - @include token-utils.create-token-slot(color, disabled-icon-color); + color: token-utils.slot(disabled-icon-color); }; img, svg { - @include token-utils.create-token-slot(width, icon-size); - @include token-utils.create-token-slot(height, icon-size); + width: token-utils.slot(icon-size); + height: token-utils.slot(icon-size); vertical-align: baseline; } } diff --git a/src/material/card/BUILD.bazel b/src/material/card/BUILD.bazel index c43c8fa86b6d..fd7d3646dc55 100644 --- a/src/material/card/BUILD.bazel +++ b/src/material/card/BUILD.bazel @@ -10,18 +10,46 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-card.scss", + "_m3-elevated-card.scss", + "_m3-outlined-card.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-card.scss", + "_m2-elevated-card.scss", + "_m2-outlined-card.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_card-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,8 +58,8 @@ sass_binary( name = "css", src = "card.scss", deps = [ + ":m2", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 41a8338648a1..2f1650bc856a 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -5,9 +5,9 @@ @use '../core/theming/validation'; @use '../core/typography/typography'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/card' as tokens-mat-card; -@use '../core/tokens/m2/mat/elevated-card' as tokens-mat-elevated-card; -@use '../core/tokens/m2/mat/outlined-card' as tokens-mat-outlined-card; +@use './m2-card'; +@use './m2-elevated-card'; +@use './m2-outlined-card'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -15,16 +15,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-elevated-card.$prefix, - tokens-mat-elevated-card.get-unthemable-tokens() + m2-elevated-card.$prefix, + m2-elevated-card.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-card.$prefix, - tokens-mat-outlined-card.get-unthemable-tokens() + m2-outlined-card.$prefix, + m2-outlined-card.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-card.$prefix, - tokens-mat-card.get-unthemable-tokens() + m2-card.$prefix, + m2-card.get-unthemable-tokens() ); } } @@ -36,16 +36,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-elevated-card.$prefix, - tokens-mat-elevated-card.get-color-tokens($theme) + m2-elevated-card.$prefix, + m2-elevated-card.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-card.$prefix, - tokens-mat-outlined-card.get-color-tokens($theme) + m2-outlined-card.$prefix, + m2-outlined-card.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-card.$prefix, - tokens-mat-card.get-color-tokens($theme) + m2-card.$prefix, + m2-card.get-color-tokens($theme) ); } } @@ -57,16 +57,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-elevated-card.$prefix, - tokens-mat-elevated-card.get-typography-tokens($theme) + m2-elevated-card.$prefix, + m2-elevated-card.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-card.$prefix, - tokens-mat-outlined-card.get-typography-tokens($theme) + m2-outlined-card.$prefix, + m2-outlined-card.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-card.$prefix, - tokens-mat-card.get-typography-tokens($theme) + m2-card.$prefix, + m2-card.get-typography-tokens($theme) ); } } @@ -78,16 +78,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-elevated-card.$prefix, - tokens-mat-elevated-card.get-density-tokens($theme) + m2-elevated-card.$prefix, + m2-elevated-card.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-card.$prefix, - tokens-mat-outlined-card.get-density-tokens($theme) + m2-outlined-card.$prefix, + m2-outlined-card.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-card.$prefix, - tokens-mat-card.get-density-tokens($theme) + m2-card.$prefix, + m2-card.get-density-tokens($theme) ); } } @@ -97,17 +97,17 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-card.$prefix, - tokens: tokens-mat-card.get-token-slots(), + namespace: m2-card.$prefix, + tokens: m2-card.get-token-slots(), ), ( - namespace: tokens-mat-elevated-card.$prefix, - tokens: tokens-mat-elevated-card.get-token-slots(), + namespace: m2-elevated-card.$prefix, + tokens: m2-elevated-card.get-token-slots(), prefix: 'elevated-', ), ( - namespace: tokens-mat-outlined-card.$prefix, - tokens: tokens-mat-outlined-card.get-token-slots(), + namespace: m2-outlined-card.$prefix, + tokens: m2-outlined-card.get-token-slots(), prefix: 'outlined-', ), ); @@ -142,16 +142,16 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-elevated-card.$prefix, - map.get($tokens, tokens-mat-elevated-card.$prefix) + m2-elevated-card.$prefix, + map.get($tokens, m2-elevated-card.$prefix) ); @include token-utils.create-token-values( - tokens-mat-outlined-card.$prefix, - map.get($tokens, tokens-mat-outlined-card.$prefix) + m2-outlined-card.$prefix, + map.get($tokens, m2-outlined-card.$prefix) ); @include token-utils.create-token-values( - tokens-mat-card.$prefix, - map.get($tokens, tokens-mat-card.$prefix) + m2-card.$prefix, + map.get($tokens, m2-card.$prefix) ); } } diff --git a/src/material/core/tokens/m2/mat/_card.scss b/src/material/card/_m2-card.scss similarity index 86% rename from src/material/core/tokens/m2/mat/_card.scss rename to src/material/card/_m2-card.scss index dad56f120481..9af2b87d729c 100644 --- a/src/material/core/tokens/m2/mat/_card.scss +++ b/src/material/card/_m2-card.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, card); @@ -44,8 +44,8 @@ $prefix: (mat, card); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_elevated-card.scss b/src/material/card/_m2-elevated-card.scss similarity index 80% rename from src/material/core/tokens/m2/mat/_elevated-card.scss rename to src/material/card/_m2-elevated-card.scss index b2d5d9a3da4c..09370e0a1112 100644 --- a/src/material/core/tokens/m2/mat/_elevated-card.scss +++ b/src/material/card/_m2-elevated-card.scss @@ -1,7 +1,7 @@ -@use '../../../theming/inspection'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/theming/inspection'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, elevated-card); @@ -44,8 +44,8 @@ $prefix: (mat, elevated-card); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_outlined-card.scss b/src/material/card/_m2-outlined-card.scss similarity index 81% rename from src/material/core/tokens/m2/mat/_outlined-card.scss rename to src/material/card/_m2-outlined-card.scss index 27bec16506a1..9b9bcee74307 100644 --- a/src/material/core/tokens/m2/mat/_outlined-card.scss +++ b/src/material/card/_m2-outlined-card.scss @@ -1,7 +1,7 @@ -@use '../../../style/elevation'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/elevation'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, outlined-card); @@ -45,8 +45,8 @@ $prefix: (mat, outlined-card); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_card.scss b/src/material/card/_m3-card.scss similarity index 65% rename from src/material/core/tokens/m3/mat/_card.scss rename to src/material/card/_m3-card.scss index 1d4051c7ffdb..6c70320253cc 100644 --- a/src/material/core/tokens/m3/mat/_card.scss +++ b/src/material/card/_m3-card.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, card); @@ -12,13 +12,13 @@ $prefix: (mat, card); /// @return {Map} A set of custom tokens for the mat-card @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, title-text, title-large), - token-definition.generate-typography-tokens($systems, subtitle-text, title-medium), + m3-utils.generate-typography-tokens($systems, title-text, title-large), + m3-utils.generate-typography-tokens($systems, subtitle-text, title-medium), ( subtitle-text-color: map.get($systems, md-sys-color, on-surface) ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_elevated-card.scss b/src/material/card/_m3-elevated-card.scss similarity index 86% rename from src/material/core/tokens/m3/mat/_elevated-card.scss rename to src/material/card/_m3-elevated-card.scss index 6eae6562e6ce..ad7613bd788e 100644 --- a/src/material/core/tokens/m3/mat/_elevated-card.scss +++ b/src/material/card/_m3-elevated-card.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; +@use '../core/style/elevation'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, elevated-card); @@ -23,5 +23,5 @@ $prefix: (mat, elevated-card); $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation)); } - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_outlined-card.scss b/src/material/card/_m3-outlined-card.scss similarity index 87% rename from src/material/core/tokens/m3/mat/_outlined-card.scss rename to src/material/card/_m3-outlined-card.scss index b7d11892f08e..3048c5bc8e22 100644 --- a/src/material/core/tokens/m3/mat/_outlined-card.scss +++ b/src/material/card/_m3-outlined-card.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; +@use '../core/style/elevation'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, outlined-card); @@ -24,5 +24,5 @@ $prefix: (mat, outlined-card); $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation)); } - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/card/card.scss b/src/material/card/card.scss index e392ffc162cc..ed97a93bd38d 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -1,7 +1,7 @@ @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/card' as tokens-mat-card; -@use '../core/tokens/m2/mat/elevated-card' as tokens-mat-elevated-card; -@use '../core/tokens/m2/mat/outlined-card' as tokens-mat-outlined-card; +@use './m2-card'; +@use './m2-elevated-card'; +@use './m2-outlined-card'; // Size of the `mat-card-header` region custom to Angular Material. $mat-card-header-size: 40px !default; @@ -18,13 +18,11 @@ $mat-card-default-padding: 16px !default; border-width: 0; @include token-utils.use-tokens( - tokens-mat-elevated-card.$prefix, - tokens-mat-elevated-card.get-token-slots() - ) { - @include token-utils.create-token-slot(background-color, container-color); - @include token-utils.create-token-slot(border-color, container-color); - @include token-utils.create-token-slot(border-radius, container-shape); - @include token-utils.create-token-slot(box-shadow, container-elevation); + m2-elevated-card.$prefix, m2-elevated-card.get-token-slots()) { + background-color: token-utils.slot(container-color); + border-color: token-utils.slot(container-color); + border-radius: token-utils.slot(container-shape); + box-shadow: token-utils.slot(container-elevation); } // Transparent card border for high-contrast mode. @@ -41,24 +39,20 @@ $mat-card-default-padding: 16px !default; box-sizing: border-box; @include token-utils.use-tokens( - tokens-mat-elevated-card.$prefix, - tokens-mat-elevated-card.get-token-slots() - ) { - @include token-utils.create-token-slot(border-radius, container-shape); + m2-elevated-card.$prefix, m2-elevated-card.get-token-slots()) { + border-radius: token-utils.slot(container-shape); } } } .mat-mdc-card-outlined { @include token-utils.use-tokens( - tokens-mat-outlined-card.$prefix, - tokens-mat-outlined-card.get-token-slots() - ) { - @include token-utils.create-token-slot(background-color, container-color); - @include token-utils.create-token-slot(border-radius, container-shape); - @include token-utils.create-token-slot(border-width, outline-width); - @include token-utils.create-token-slot(border-color, outline-color); - @include token-utils.create-token-slot(box-shadow, container-elevation); + m2-outlined-card.$prefix, m2-outlined-card.get-token-slots()) { + background-color: token-utils.slot(container-color); + border-radius: token-utils.slot(container-shape); + border-width: token-utils.slot(outline-width); + border-color: token-utils.slot(outline-color); + box-shadow: token-utils.slot(container-elevation); } // Outlined card already displays border in high-contrast mode. @@ -101,22 +95,23 @@ $mat-card-default-padding: 16px !default; } // Add slots for custom Angular Material card tokens. -@include token-utils.use-tokens(tokens-mat-card.$prefix, tokens-mat-card.get-token-slots()) { +@include token-utils.use-tokens( + m2-outlined-card.$prefix, m2-card.get-token-slots()) { .mat-mdc-card-title { - @include token-utils.create-token-slot(font-family, title-text-font); - @include token-utils.create-token-slot(line-height, title-text-line-height); - @include token-utils.create-token-slot(font-size, title-text-size); - @include token-utils.create-token-slot(letter-spacing, title-text-tracking); - @include token-utils.create-token-slot(font-weight, title-text-weight); + font-family: token-utils.slot(title-text-font); + line-height: token-utils.slot(title-text-line-height); + font-size: token-utils.slot(title-text-size); + letter-spacing: token-utils.slot(title-text-tracking); + font-weight: token-utils.slot(title-text-weight); } .mat-mdc-card-subtitle { - @include token-utils.create-token-slot(color, subtitle-text-color); - @include token-utils.create-token-slot(font-family, subtitle-text-font); - @include token-utils.create-token-slot(line-height, subtitle-text-line-height); - @include token-utils.create-token-slot(font-size, subtitle-text-size); - @include token-utils.create-token-slot(letter-spacing, subtitle-text-tracking); - @include token-utils.create-token-slot(font-weight, subtitle-text-weight); + color: token-utils.slot(subtitle-text-color); + font-family: token-utils.slot(subtitle-text-font); + line-height: token-utils.slot(subtitle-text-line-height); + font-size: token-utils.slot(subtitle-text-size); + letter-spacing: token-utils.slot(subtitle-text-tracking); + font-weight: token-utils.slot(subtitle-text-weight); } } diff --git a/src/material/checkbox/BUILD.bazel b/src/material/checkbox/BUILD.bazel index cbd32b200bac..09e20e19ae1c 100644 --- a/src/material/checkbox/BUILD.bazel +++ b/src/material/checkbox/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-checkbox.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-checkbox.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_checkbox-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,10 +54,10 @@ sass_library( name = "checkbox_common", srcs = ["_checkbox-common.scss"], deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -42,9 +66,9 @@ sass_binary( src = "checkbox.scss", deps = [ ":checkbox_common", + ":m2", "//src/material/core/style:layout_common", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/checkbox/_checkbox-common.scss b/src/material/checkbox/_checkbox-common.scss index db576bdac9e6..c28689a07e3c 100644 --- a/src/material/checkbox/_checkbox-common.scss +++ b/src/material/checkbox/_checkbox-common.scss @@ -1,6 +1,6 @@ @use 'sass:math'; @use '@angular/cdk'; -@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox; +@use './m2-checkbox'; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; @@ -16,8 +16,8 @@ $_fallback-size: 40px; // Structural styles for a checkbox. Shared with the selection list. @mixin checkbox-structure($include-state-layer-styles) { - $prefix: tokens-mat-checkbox.$prefix; - $slots: tokens-mat-checkbox.get-token-slots(); + $prefix: m2-checkbox.$prefix; + $slots: m2-checkbox.get-token-slots(); .mdc-checkbox { display: inline-block; @@ -32,7 +32,7 @@ $_fallback-size: 40px; vertical-align: bottom; @include token-utils.use-tokens($prefix, $slots) { - $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size); + $layer-size: token-utils.slot(state-layer-size, $fallback: $_fallback-size); padding: calc((#{$layer-size} - #{$_icon-size}) / 2); margin: calc((#{$layer-size} - #{$layer-size}) / 2); @@ -52,7 +52,7 @@ $_fallback-size: 40px; z-index: 1; @include token-utils.use-tokens($prefix, $slots) { - $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size); + $layer-size: token-utils.slot(state-layer-size, $fallback: $_fallback-size); $offset: calc((#{$layer-size} - #{$layer-size}) / 2); width: $layer-size; height: $layer-size; @@ -92,10 +92,10 @@ $_fallback-size: 40px; @include vendor-prefixes.color-adjust(exact); @include token-utils.use-tokens($prefix, $slots) { - $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size); + $layer-size: token-utils.slot(state-layer-size, $fallback: $_fallback-size); $offset: calc((#{$layer-size} - #{$_icon-size}) / 2); - @include token-utils.create-token-slot(border-color, unselected-icon-color); + border-color: token-utils.slot(unselected-icon-color); top: $offset; left: $offset; } @@ -106,17 +106,17 @@ $_fallback-size: 40px; @include token-utils.use-tokens($prefix, $slots) { .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background { - @include token-utils.create-token-slot(border-color, selected-icon-color); - @include token-utils.create-token-slot(background-color, selected-icon-color); + border-color: token-utils.slot(selected-icon-color); + background-color: token-utils.slot(selected-icon-color); } .mdc-checkbox--disabled .mdc-checkbox__background { - @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color); + border-color: token-utils.slot(disabled-unselected-icon-color); } .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background { - @include token-utils.create-token-slot(background-color, disabled-selected-icon-color); + background-color: token-utils.slot(disabled-selected-icon-color); border-color: transparent; } @@ -124,28 +124,28 @@ $_fallback-size: 40px; .mdc-checkbox:hover > .mdc-checkbox__native-control:not(:checked) ~ .mdc-checkbox__background, .mdc-checkbox:hover > .mdc-checkbox__native-control:not(:indeterminate) ~ .mdc-checkbox__background { - @include token-utils.create-token-slot(border-color, unselected-hover-icon-color); + border-color: token-utils.slot(unselected-hover-icon-color); background-color: transparent; } // stylelint-enable selector-combinator-space-before .mdc-checkbox:hover > .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background, .mdc-checkbox:hover > .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background { - @include token-utils.create-token-slot(border-color, selected-hover-icon-color); - @include token-utils.create-token-slot(background-color, selected-hover-icon-color); + border-color: token-utils.slot(selected-hover-icon-color); + background-color: token-utils.slot(selected-hover-icon-color); } // Note: this must be more specific than the hover styles above. // Double :focus is added for increased specificity. .mdc-checkbox__native-control:focus:focus:not(:checked) ~ .mdc-checkbox__background, .mdc-checkbox__native-control:focus:focus:not(:indeterminate) ~ .mdc-checkbox__background { - @include token-utils.create-token-slot(border-color, unselected-focus-icon-color); + border-color: token-utils.slot(unselected-focus-icon-color); } .mdc-checkbox__native-control:focus:focus:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:focus:focus:indeterminate ~ .mdc-checkbox__background { - @include token-utils.create-token-slot(border-color, selected-focus-icon-color); - @include token-utils.create-token-slot(background-color, selected-focus-icon-color); + border-color: token-utils.slot(selected-focus-icon-color); + background-color: token-utils.slot(selected-focus-icon-color); } // Needs extra specificity to override the focus, hover, active states. @@ -153,12 +153,12 @@ $_fallback-size: 40px; .mdc-checkbox:hover > .mdc-checkbox__native-control ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background, .mdc-checkbox__background { - @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color); + border-color: token-utils.slot(disabled-unselected-icon-color); } .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background { - @include token-utils.create-token-slot(background-color, disabled-selected-icon-color); + background-color: token-utils.slot(disabled-selected-icon-color); border-color: transparent; } } @@ -177,7 +177,7 @@ $_fallback-size: 40px; @include token-utils.use-tokens($prefix, $slots) { // Always apply the color since the element becomes `opacity: 0` // when unchecked. This makes the animation look better. - @include token-utils.create-token-slot(color, selected-checkmark-color); + color: token-utils.slot(selected-checkmark-color); } @include cdk.high-contrast { @@ -189,7 +189,7 @@ $_fallback-size: 40px; .mdc-checkbox--disabled { &, &.mat-mdc-checkbox-disabled-interactive { .mdc-checkbox__checkmark { - @include token-utils.create-token-slot(color, disabled-selected-checkmark-color); + color: token-utils.slot(disabled-selected-checkmark-color); @include cdk.high-contrast { color: CanvasText; @@ -220,7 +220,7 @@ $_fallback-size: 40px; @include token-utils.use-tokens($prefix, $slots) { // Always apply the color since the element becomes `opacity: 0` // when unchecked. This makes the animation look better. - @include token-utils.create-token-slot(border-color, selected-checkmark-color); + border-color: token-utils.slot(selected-checkmark-color); } @include cdk.high-contrast { @@ -232,7 +232,7 @@ $_fallback-size: 40px; .mdc-checkbox--disabled { &, &.mat-mdc-checkbox-disabled-interactive { .mdc-checkbox__mixedmark { - @include token-utils.create-token-slot(border-color, disabled-selected-checkmark-color); + border-color: token-utils.slot(disabled-selected-checkmark-color); } } } @@ -472,103 +472,67 @@ $_fallback-size: 40px; // `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves. &:hover { > .mdc-checkbox__ripple { - @include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - unselected-hover-state-layer-color - ); + opacity: token-utils.slot(unselected-hover-state-layer-opacity); + background-color: token-utils.slot(unselected-hover-state-layer-color); } > .mat-mdc-checkbox-ripple > .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - unselected-hover-state-layer-color - ); + background-color: token-utils.slot(unselected-hover-state-layer-color); } } .mdc-checkbox__native-control:focus { & + .mdc-checkbox__ripple { - @include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - unselected-focus-state-layer-color - ); + opacity: token-utils.slot(unselected-focus-state-layer-opacity); + background-color: token-utils.slot(unselected-focus-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - unselected-focus-state-layer-color - ); + background-color: token-utils.slot(unselected-focus-state-layer-color); } } &:active > .mdc-checkbox__native-control { & + .mdc-checkbox__ripple { - @include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - unselected-pressed-state-layer-color - ); + opacity: token-utils.slot(unselected-pressed-state-layer-opacity); + background-color: token-utils.slot(unselected-pressed-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - unselected-pressed-state-layer-color - ); + background-color: token-utils.slot(unselected-pressed-state-layer-color); } } &:hover .mdc-checkbox__native-control:checked { & + .mdc-checkbox__ripple { - @include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - selected-hover-state-layer-color - ); + opacity: token-utils.slot(selected-hover-state-layer-opacity); + background-color: token-utils.slot(selected-hover-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - selected-hover-state-layer-color - ); + background-color: token-utils.slot(selected-hover-state-layer-color); } } .mdc-checkbox__native-control:focus:checked { & + .mdc-checkbox__ripple { - @include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - selected-focus-state-layer-color - ); + opacity: token-utils.slot(selected-focus-state-layer-opacity); + background-color: token-utils.slot(selected-focus-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - selected-focus-state-layer-color - ); + background-color: token-utils.slot(selected-focus-state-layer-color); } } &:active > .mdc-checkbox__native-control:checked { & + .mdc-checkbox__ripple { - @include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity); - @include token-utils.create-token-slot( - background-color, - selected-pressed-state-layer-color - ); + opacity: token-utils.slot(selected-pressed-state-layer-opacity); + background-color: token-utils.slot(selected-pressed-state-layer-color); } & ~ .mat-mdc-checkbox-ripple .mat-ripple-element { - @include token-utils.create-token-slot( - background-color, - selected-pressed-state-layer-color - ); + background-color: token-utils.slot(selected-pressed-state-layer-color); } } @@ -576,10 +540,7 @@ $_fallback-size: 40px; .mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive & { .mdc-checkbox__native-control ~ .mat-mdc-checkbox-ripple .mat-ripple-element, .mdc-checkbox__native-control + .mdc-checkbox__ripple { - @include token-utils.create-token-slot( - background-color, - unselected-hover-state-layer-color - ); + background-color: token-utils.slot(unselected-hover-state-layer-color); } } } diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index 05120ca0155d..46af1b611953 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -4,7 +4,7 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox; +@use './m2-checkbox'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-checkbox. @@ -15,9 +15,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-unthemable-tokens() - ); + m2-checkbox.$prefix, m2-checkbox.get-unthemable-tokens()); } } } @@ -33,24 +31,22 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-color-tokens($theme) - ); + m2-checkbox.$prefix, m2-checkbox.get-color-tokens($theme)); } .mat-mdc-checkbox { &.mat-primary { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-color-tokens($theme, primary, + m2-checkbox.$prefix, + m2-checkbox.get-color-tokens($theme, primary, $exclude: (disabled-label-color, label-text-color)) ); } &.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-color-tokens($theme, warn, + m2-checkbox.$prefix, + m2-checkbox.get-color-tokens($theme, warn, $exclude: (disabled-label-color, label-text-color)) ); } @@ -66,8 +62,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-typography-tokens($theme) + m2-checkbox.$prefix, + m2-checkbox.get-typography-tokens($theme) ); } } @@ -83,8 +79,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-density-tokens($theme) + m2-checkbox.$prefix, + m2-checkbox.get-density-tokens($theme) ); } } @@ -94,8 +90,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-checkbox.$prefix, - tokens: tokens-mat-checkbox.get-token-slots(), + namespace: m2-checkbox.$prefix, + tokens: m2-checkbox.get-token-slots(), ), ); } @@ -136,8 +132,8 @@ ); $mat-checkbox-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-checkbox.$prefix, + m2-checkbox.$prefix, $options... ); - @include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens); + @include token-utils.create-token-values(m2-checkbox.$prefix, $mat-checkbox-tokens); } diff --git a/src/material/core/tokens/m2/mat/_checkbox.scss b/src/material/checkbox/_m2-checkbox.scss similarity index 88% rename from src/material/core/tokens/m2/mat/_checkbox.scss rename to src/material/checkbox/_m2-checkbox.scss index 47a57bcf3f91..ed56c2648020 100644 --- a/src/material/core/tokens/m2/mat/_checkbox.scss +++ b/src/material/checkbox/_m2-checkbox.scss @@ -1,10 +1,10 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../m2/theming' as m2-theming; -@use '../../../m2/palette' as m2-palette; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/m2/theming' as m2-theming; +@use '../core/m2/palette' as m2-palette; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, checkbox); @@ -39,8 +39,8 @@ $prefix: (mat, checkbox); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. - @if (token-definition.$private-is-internal-build) { - $contrast-tone: token-definition.contrast-tone($palette-selected, $is-dark); + @if (m2-utils.$private-is-internal-build) { + $contrast-tone: m2-utils.contrast-tone($palette-selected, $is-dark); $selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff); } @else { @@ -107,8 +107,8 @@ $prefix: (mat, checkbox); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_checkbox.scss b/src/material/checkbox/_m3-checkbox.scss similarity index 97% rename from src/material/core/tokens/m3/mat/_checkbox.scss rename to src/material/checkbox/_m3-checkbox.scss index 3ee9029806fc..ec22a932d94b 100644 --- a/src/material/core/tokens/m3/mat/_checkbox.scss +++ b/src/material/checkbox/_m3-checkbox.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, checkbox); @@ -86,5 +86,5 @@ $prefix: (mat, checkbox); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index 0ab15a3d7d7a..10674897aa71 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -1,10 +1,13 @@ @use '../core/style/layout-common'; -@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox; +@use './m2-checkbox'; @use '../core/tokens/token-utils'; @use './checkbox-common'; @include checkbox-common.checkbox-structure(true); +$token-prefix: m2-checkbox.$prefix; +$token-slots: m2-checkbox.get-token-slots(); + .mat-mdc-checkbox { // The host node defaults to `display: inline`, we have to change it in order for margins to work. display: inline-block; @@ -22,16 +25,13 @@ } .mat-internal-form-field { - @include token-utils.use-tokens( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-token-slots() - ) { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(font-weight, label-text-weight); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(label-text-color); + font-family: token-utils.slot(label-text-font); + line-height: token-utils.slot(label-text-line-height); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + font-weight: token-utils.slot(label-text-weight); } } @@ -47,11 +47,8 @@ label { cursor: default; - @include token-utils.use-tokens( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-token-slots() - ) { - @include token-utils.create-token-slot(color, disabled-label-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(disabled-label-color); } } } @@ -98,11 +95,8 @@ width: 48px; transform: translate(-50%, -50%); - @include token-utils.use-tokens( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-token-slots() - ) { - @include token-utils.create-token-slot(display, touch-target-display); + @include token-utils.use-tokens($token-prefix, $token-slots) { + display: token-utils.slot(touch-target-display); } } diff --git a/src/material/chips/BUILD.bazel b/src/material/chips/BUILD.bazel index 5d4e1aea7d84..0d9df7bbd30b 100644 --- a/src/material/chips/BUILD.bazel +++ b/src/material/chips/BUILD.bazel @@ -10,17 +10,41 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-chip.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-chip.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_chips-theme.scss", ], deps = [ + ":m2", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -29,12 +53,12 @@ sass_binary( name = "chip_css", src = "chip.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/focus-indicators", "//src/material/core/style:layout_common", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 8bde60a55d36..91ef757a0558 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -1,5 +1,5 @@ @use 'sass:color'; -@use '../core/tokens/m2/mat/chip' as tokens-mat-chip; +@use './m2-chip'; @use '../core/tokens/token-utils'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @@ -15,9 +15,7 @@ } @else { .mat-mdc-standard-chip { @include token-utils.create-token-values-mixed( - tokens-mat-chip.$prefix, - tokens-mat-chip.get-unthemable-tokens() - ); + m2-chip.$prefix, m2-chip.get-unthemable-tokens()); } } } @@ -33,31 +31,23 @@ } @else { .mat-mdc-standard-chip { @include token-utils.create-token-values-mixed( - tokens-mat-chip.$prefix, - tokens-mat-chip.get-color-tokens($theme) - ); + m2-chip.$prefix, m2-chip.get-color-tokens($theme)); &.mat-mdc-chip-selected, &.mat-mdc-chip-highlighted { &.mat-primary { @include token-utils.create-token-values-mixed( - tokens-mat-chip.$prefix, - tokens-mat-chip.get-color-tokens($theme, primary) - ); + m2-chip.$prefix, m2-chip.get-color-tokens($theme, primary)); } &.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-chip.$prefix, - tokens-mat-chip.get-color-tokens($theme, accent) - ); + m2-chip.$prefix, m2-chip.get-color-tokens($theme, accent)); } &.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-chip.$prefix, - tokens-mat-chip.get-color-tokens($theme, warn) - ); + m2-chip.$prefix, m2-chip.get-color-tokens($theme, warn)); } } } @@ -72,8 +62,7 @@ } @else { .mat-mdc-standard-chip { @include token-utils.create-token-values-mixed( - tokens-mat-chip.$prefix, - tokens-mat-chip.get-typography-tokens($theme) + m2-chip.$prefix, m2-chip.get-typography-tokens($theme) ); } } @@ -87,8 +76,7 @@ } @else { .mat-mdc-chip.mat-mdc-standard-chip { @include token-utils.create-token-values-mixed( - tokens-mat-chip.$prefix, - tokens-mat-chip.get-density-tokens($theme) + m2-chip.$prefix, m2-chip.get-density-tokens($theme) ); } } @@ -98,8 +86,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-chip.$prefix, - tokens: tokens-mat-chip.get-token-slots(), + namespace: m2-chip.$prefix, + tokens: m2-chip.get-token-slots(), ), ); } @@ -138,6 +126,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens); + $mat-chip-tokens: token-utils.get-tokens-for($tokens, m2-chip.$prefix, $options...); + @include token-utils.create-token-values(m2-chip.$prefix, $mat-chip-tokens); } diff --git a/src/material/core/tokens/m2/mat/_chip.scss b/src/material/chips/_m2-chip.scss similarity index 92% rename from src/material/core/tokens/m2/mat/_chip.scss rename to src/material/chips/_m2-chip.scss index ee048f4895ef..59382d058107 100644 --- a/src/material/core/tokens/m2/mat/_chip.scss +++ b/src/material/chips/_m2-chip.scss @@ -1,11 +1,11 @@ @use 'sass:map'; @use 'sass:meta'; @use 'sass:color'; -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../m2/palette' as m2-palette; -@use '../../../theming/theming'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/m2/palette' as m2-palette; +@use '../core/theming/theming'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, chip); @@ -120,8 +120,8 @@ $prefix: (mat, chip); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_chip.scss b/src/material/chips/_m3-chip.scss similarity index 82% rename from src/material/core/tokens/m3/mat/_chip.scss rename to src/material/chips/_m3-chip.scss index f0f09b732d5f..8a460788c478 100644 --- a/src/material/core/tokens/m3/mat/_chip.scss +++ b/src/material/chips/_m3-chip.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, chip); @@ -14,9 +14,9 @@ $prefix: (mat, chip); // MDC has a chip component, but they seem to have made up the tokens rather than using ones // generated from the token database, therefore we need a custom token function for it. $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, label-text, label-large), + m3-utils.generate-typography-tokens($systems, label-text, label-large), ( - disabled-container-opacity: token-definition.hardcode(1, $exclude-hardcoded), + disabled-container-opacity: m3-utils.hardcode(1, $exclude-hardcoded), selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container), selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface), trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), @@ -26,17 +26,17 @@ $prefix: (mat, chip); map.get($systems, md-sys-state, hover-state-layer-opacity), trailing-action-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), - trailing-action-opacity: token-definition.hardcode(1, $exclude-hardcoded), - trailing-action-focus-opacity: token-definition.hardcode(1, $exclude-hardcoded), - container-shape-radius: token-definition.hardcode(8px, $exclude-hardcoded), - with-avatar-avatar-size: token-definition.hardcode(24px, $exclude-hardcoded), - with-avatar-avatar-shape-radius: token-definition.hardcode(24px, $exclude-hardcoded), + trailing-action-opacity: m3-utils.hardcode(1, $exclude-hardcoded), + trailing-action-focus-opacity: m3-utils.hardcode(1, $exclude-hardcoded), + container-shape-radius: m3-utils.hardcode(8px, $exclude-hardcoded), + with-avatar-avatar-size: m3-utils.hardcode(24px, $exclude-hardcoded), + with-avatar-avatar-shape-radius: m3-utils.hardcode(24px, $exclude-hardcoded), label-text-color: map.get($systems, md-sys-color, on-surface-variant), disabled-label-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38, ), - with-icon-icon-size: token-definition.hardcode(18px, $exclude-hardcoded), + with-icon-icon-size: m3-utils.hardcode(18px, $exclude-hardcoded), with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant), with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface), with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container), @@ -45,7 +45,7 @@ $prefix: (mat, chip); map.get($systems, md-sys-color, on-surface), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - outline-width: token-definition.hardcode(1px, $exclude-hardcoded), + outline-width: m3-utils.hardcode(1px, $exclude-hardcoded), outline-color: map.get($systems, md-sys-color, outline), disabled-outline-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), @@ -54,12 +54,12 @@ $prefix: (mat, chip); focus-outline-color: map.get($systems, md-sys-color, on-surface-variant), hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), - with-avatar-disabled-avatar-opacity: token-definition.hardcode(0.38, $exclude-hardcoded), + with-avatar-disabled-avatar-opacity: m3-utils.hardcode(0.38, $exclude-hardcoded), elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container), // In the M3 tokens this is a `surface` color, but in the MDC implementation its // never being emitted. We emit `transparent` so consumers override the color. - elevated-container-color: token-definition.hardcode(transparent, $exclude-hardcoded), - flat-selected-outline-width: token-definition.hardcode(0, $exclude-hardcoded), + elevated-container-color: m3-utils.hardcode(transparent, $exclude-hardcoded), + flat-selected-outline-width: m3-utils.hardcode(0, $exclude-hardcoded), selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container), flat-disabled-selected-container-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), @@ -71,9 +71,9 @@ $prefix: (mat, chip); selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container), selected-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), - with-icon-disabled-icon-opacity: token-definition.hardcode(0.38, $exclude-hardcoded), + with-icon-disabled-icon-opacity: m3-utils.hardcode(0.38, $exclude-hardcoded), with-trailing-icon-disabled-trailing-icon-opacity: - token-definition.hardcode(0.38, $exclude-hardcoded), + m3-utils.hardcode(0.38, $exclude-hardcoded), ), ); @@ -112,5 +112,5 @@ $prefix: (mat, chip); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 4f9c553653e8..206f979b73d6 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -1,9 +1,9 @@ @use '@angular/cdk'; -@use '../core/style/layout-common'; @use '../core/focus-indicators/private' as focus-indicators-private; -@use '../core/tokens/m2/mat/chip' as tokens-mat-chip; +@use '../core/style/layout-common'; @use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; +@use './m2-chip'; $_checkmark-size: 20px; $_trailing-icon-size: 18px; @@ -13,6 +13,9 @@ $_trailing-action-padding: 8px; $_avatar-leading-padding: 4px; $_avatar-trailing-padding: 8px; +$token-prefix: m2-chip.$prefix; +$token-slots: m2-chip.get-token-slots(); + .mdc-evolution-chip, .mdc-evolution-chip__cell, .mdc-evolution-chip__action { @@ -74,10 +77,10 @@ $_avatar-trailing-padding: 8px; white-space: inherit; overflow-x: hidden; - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-standard-chip &::before { - @include token-utils.create-token-slot(border-width, outline-width); - @include token-utils.create-token-slot(border-radius, container-shape-radius); + border-width: token-utils.slot(outline-width); + border-radius: token-utils.slot(container-shape-radius); box-sizing: border-box; content: ''; height: 100%; @@ -106,19 +109,19 @@ $_avatar-trailing-padding: 8px; } .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) &::before { - @include token-utils.create-token-slot(border-color, outline-color); + border-color: token-utils.slot(outline-color); } &:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus::before { - @include token-utils.create-token-slot(border-color, focus-outline-color); + border-color: token-utils.slot(focus-outline-color); } .mat-mdc-standard-chip.mdc-evolution-chip--disabled &::before { - @include token-utils.create-token-slot(border-color, disabled-outline-color); + border-color: token-utils.slot(disabled-outline-color); } .mat-mdc-standard-chip.mdc-evolution-chip--selected &::before { - @include token-utils.create-token-slot(border-width, flat-selected-outline-width); + border-width: token-utils.slot(flat-selected-outline-width); } } @@ -177,14 +180,13 @@ $_avatar-trailing-padding: 8px; position: relative; overflow: visible; - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & { - @include token-utils.create-token-slot(color, with-trailing-icon-trailing-icon-color); + color: token-utils.slot(with-trailing-icon-trailing-icon-color); } .mat-mdc-standard-chip.mdc-evolution-chip--disabled & { - @include token-utils.create-token-slot(color, - with-trailing-icon-disabled-trailing-icon-color); + color: token-utils.slot(with-trailing-icon-disabled-trailing-icon-color); } } @@ -221,26 +223,26 @@ $_avatar-trailing-padding: 8px; text-overflow: ellipsis; overflow: hidden; - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-standard-chip & { - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(font-weight, label-text-weight); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); + font-family: token-utils.slot(label-text-font); + line-height: token-utils.slot(label-text-line-height); + font-size: token-utils.slot(label-text-size); + font-weight: token-utils.slot(label-text-weight); + letter-spacing: token-utils.slot(label-text-tracking); } .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & { - @include token-utils.create-token-slot(color, label-text-color); + color: token-utils.slot(label-text-color); } .mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) & { - @include token-utils.create-token-slot(color, selected-label-text-color); + color: token-utils.slot(selected-label-text-color); } .mat-mdc-standard-chip.mdc-evolution-chip--disabled &, .mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled & { - @include token-utils.create-token-slot(color, disabled-label-text-color); + color: token-utils.slot(disabled-label-text-color); } } } @@ -254,11 +256,11 @@ $_avatar-trailing-padding: 8px; position: relative; flex: 1 0 auto; - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-standard-chip & { - @include token-utils.create-token-slot(width, with-avatar-avatar-size); - @include token-utils.create-token-slot(height, with-avatar-avatar-size); - @include token-utils.create-token-slot(font-size, with-avatar-avatar-size); + width: token-utils.slot(with-avatar-avatar-size); + height: token-utils.slot(with-avatar-avatar-size); + font-size: token-utils.slot(with-avatar-avatar-size); } } @@ -314,13 +316,13 @@ $_avatar-trailing-padding: 8px; height: $_checkmark-size; width: $_checkmark-size; - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & { - @include token-utils.create-token-slot(color, with-icon-selected-icon-color); + color: token-utils.slot(with-icon-selected-icon-color); } .mat-mdc-standard-chip.mdc-evolution-chip--disabled & { - @include token-utils.create-token-slot(color, with-icon-disabled-icon-color); + color: token-utils.slot(with-icon-disabled-icon-color); } } @@ -370,20 +372,20 @@ $_avatar-trailing-padding: 8px; } $disabled-icon-opacity: null; - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { $disabled-icon-opacity: - token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity); + token-utils.slot(with-trailing-icon-disabled-trailing-icon-opacity); } // If the trailing icon is a chip-remove button, we have to factor in the trailing action // opacity as well as the disabled opacity. .mdc-evolution-chip--disabled &.mat-mdc-chip-remove { - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { - $action-opacity: token-utils.get-token-variable(trailing-action-opacity); + @include token-utils.use-tokens($token-prefix, $token-slots) { + $action-opacity: token-utils.slot(trailing-action-opacity); opacity: calc(#{$action-opacity} * #{$disabled-icon-opacity}); &:focus { - $action-focus-opacity: token-utils.get-token-variable(trailing-action-focus-opacity); + $action-focus-opacity: token-utils.slot(trailing-action-focus-opacity); opacity: calc(#{$action-focus-opacity} * #{$disabled-icon-opacity}); } } @@ -391,25 +393,24 @@ $_avatar-trailing-padding: 8px; } .mat-mdc-standard-chip { - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { - @include token-utils.create-token-slot(border-radius, container-shape-radius); - @include token-utils.create-token-slot(height, container-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-radius: token-utils.slot(container-shape-radius); + height: token-utils.slot(container-height); &:not(.mdc-evolution-chip--disabled) { - @include token-utils.create-token-slot(background-color, elevated-container-color); + background-color: token-utils.slot(elevated-container-color); } &.mdc-evolution-chip--disabled { - @include token-utils.create-token-slot(background-color, elevated-disabled-container-color); + background-color: token-utils.slot(elevated-disabled-container-color); } &.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) { - @include token-utils.create-token-slot(background-color, elevated-selected-container-color); + background-color: token-utils.slot(elevated-selected-container-color); } &.mdc-evolution-chip--selected.mdc-evolution-chip--disabled { - @include token-utils.create-token-slot(background-color, - flat-disabled-selected-container-color); + background-color: token-utils.slot(flat-disabled-selected-container-color); } } @@ -419,12 +420,12 @@ $_avatar-trailing-padding: 8px; } .mdc-evolution-chip__icon--primary { - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-standard-chip & { - @include token-utils.create-token-slot(border-radius, with-avatar-avatar-shape-radius); - @include token-utils.create-token-slot(width, with-icon-icon-size); - @include token-utils.create-token-slot(height, with-icon-icon-size); - @include token-utils.create-token-slot(font-size, with-icon-icon-size); + border-radius: token-utils.slot(with-avatar-avatar-shape-radius); + width: token-utils.slot(with-icon-icon-size); + height: token-utils.slot(with-icon-icon-size); + font-size: token-utils.slot(with-icon-icon-size); } .mdc-evolution-chip--selected & { @@ -432,11 +433,11 @@ $_avatar-trailing-padding: 8px; } .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & { - @include token-utils.create-token-slot(color, with-icon-icon-color); + color: token-utils.slot(with-icon-icon-color); } .mat-mdc-standard-chip.mdc-evolution-chip--disabled & { - @include token-utils.create-token-slot(color, with-icon-disabled-icon-color); + color: token-utils.slot(with-icon-disabled-icon-color); } } } @@ -447,7 +448,7 @@ $_avatar-trailing-padding: 8px; // that we don't re-implement ourselves below. // TODO(crisbeto): with some future refactors we may be able to clean this up. .mat-mdc-chip-highlighted { - @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { $highlighted-remapped-tokens: ( with-icon-icon-color: with-icon-selected-icon-color, elevated-container-color: elevated-selected-container-color, @@ -456,102 +457,100 @@ $_avatar-trailing-padding: 8px; ); @each $selected, $base in $highlighted-remapped-tokens { - #{token-utils.get-token-variable-name($selected)}: token-utils.get-token-variable($base); + #{token-utils.get-token-variable-name($selected)}: token-utils.slot($base); } } } // Add additional slots for the MDC chip tokens, needed in Angular Material. -@include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { +@include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-chip-focus-overlay { - @include token-utils.create-token-slot(background, focus-state-layer-color); + background: token-utils.slot(focus-state-layer-color); .mat-mdc-chip-selected &, .mat-mdc-chip-highlighted & { - @include token-utils.create-token-slot(background, selected-focus-state-layer-color); + background: token-utils.slot(selected-focus-state-layer-color); } .mat-mdc-chip:hover & { - @include token-utils.create-token-slot(background, hover-state-layer-color); - @include token-utils.create-token-slot(opacity, hover-state-layer-opacity); + background: token-utils.slot(hover-state-layer-color); + opacity: token-utils.slot(hover-state-layer-opacity); } .mat-mdc-chip-selected:hover, .mat-mdc-chip-highlighted:hover & { - @include token-utils.create-token-slot(background, selected-hover-state-layer-color); - @include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity); + background: token-utils.slot(selected-hover-state-layer-color); + opacity: token-utils.slot(selected-hover-state-layer-opacity); } .mat-mdc-chip.cdk-focused & { - @include token-utils.create-token-slot(background, focus-state-layer-color); - @include token-utils.create-token-slot(opacity, focus-state-layer-opacity); + background: token-utils.slot(focus-state-layer-color); + opacity: token-utils.slot(focus-state-layer-opacity); } .mat-mdc-chip-selected.cdk-focused &, .mat-mdc-chip-highlighted.cdk-focused & { - @include token-utils.create-token-slot(background, selected-focus-state-layer-color); - @include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity); + background: token-utils.slot(selected-focus-state-layer-color); + opacity: token-utils.slot(selected-focus-state-layer-opacity); } } .mdc-evolution-chip--disabled:not(.mdc-evolution-chip--selected) .mat-mdc-chip-avatar { - @include token-utils.create-token-slot(opacity, with-avatar-disabled-avatar-opacity); + opacity: token-utils.slot(with-avatar-disabled-avatar-opacity); } .mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing { - @include token-utils.create-token-slot( - opacity, with-trailing-icon-disabled-trailing-icon-opacity); + opacity: token-utils.slot(with-trailing-icon-disabled-trailing-icon-opacity); } .mdc-evolution-chip--disabled.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark { - @include token-utils.create-token-slot(opacity, with-icon-disabled-icon-opacity); + opacity: token-utils.slot(with-icon-disabled-icon-opacity); } } -@include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { +@include token-utils.use-tokens($token-prefix, $token-slots) { // Historically, MDC did not support disabled chips, so we needed our own disabled styles. // Now that MDC supports disabled styles, we should switch to using theirs. .mat-mdc-standard-chip { &.mdc-evolution-chip--disabled { - @include token-utils.create-token-slot(opacity, disabled-container-opacity); + opacity: token-utils.slot(disabled-container-opacity); } &.mdc-evolution-chip--selected, &.mat-mdc-chip-highlighted { .mdc-evolution-chip__icon--trailing { - @include token-utils.create-token-slot(color, selected-trailing-icon-color); + color: token-utils.slot(selected-trailing-icon-color); } &.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing { - @include token-utils.create-token-slot(color, selected-disabled-trailing-icon-color); + color: token-utils.slot(selected-disabled-trailing-icon-color); } } } .mat-mdc-chip-remove { - @include token-utils.create-token-slot(opacity, trailing-action-opacity); + opacity: token-utils.slot(trailing-action-opacity); &:focus { - @include token-utils.create-token-slot(opacity, trailing-action-focus-opacity); + opacity: token-utils.slot(trailing-action-focus-opacity); } &::after { - @include token-utils.create-token-slot(background-color, trailing-action-state-layer-color); + background-color: token-utils.slot(trailing-action-state-layer-color); } &:hover::after { - @include token-utils.create-token-slot(opacity, trailing-action-hover-state-layer-opacity); + opacity: token-utils.slot(trailing-action-hover-state-layer-opacity); } &:focus::after { - @include token-utils.create-token-slot(opacity, trailing-action-focus-state-layer-opacity); + opacity: token-utils.slot(trailing-action-focus-state-layer-opacity); } } .mat-mdc-chip-selected .mat-mdc-chip-remove::after, .mat-mdc-chip-highlighted .mat-mdc-chip-remove::after { - @include token-utils.create-token-slot(background-color, - selected-trailing-action-state-layer-color); + background-color: token-utils.slot(selected-trailing-action-state-layer-color); } } diff --git a/src/material/core/BUILD.bazel b/src/material/core/BUILD.bazel index 3ef5e10127ad..a74d1c6c2379 100644 --- a/src/material/core/BUILD.bazel +++ b/src/material/core/BUILD.bazel @@ -10,6 +10,30 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-app.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-app.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + ng_project( name = "core", srcs = [ @@ -53,7 +77,6 @@ sass_library( deps = [ "//src/material/core/style:elevation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -71,7 +94,6 @@ sass_library( "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -122,18 +144,42 @@ filegroup( ### Ripple ### Cannot be in its own ripple/BUILD.bazel due to breaking docs generation. +sass_library( + name = "ripple_m3", + srcs = [ + "ripple/_m3-ripple.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "ripple_m2", + srcs = [ + "ripple/_m2-ripple.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "ripple_sass_theme", srcs = [ "ripple/_ripple-theme.scss", ], deps = [ + ":ripple_m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -143,9 +189,9 @@ sass_library( "ripple/_ripple.scss", ], deps = [ + ":ripple_m2", "//src/cdk:sass_lib", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index 79b113ba49cc..ac74341a79ac 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -8,12 +8,12 @@ @use './style/sass-utils'; @use './typography/typography'; @use './tokens/token-utils'; -@use './tokens/m2/mat/app' as tokens-mat-app; -@use './tokens/m2/mat/ripple' as tokens-mat-ripple; -@use './tokens/m2/mat/option' as tokens-mat-option; -@use './tokens/m2/mat/optgroup' as tokens-mat-optgroup; -@use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox; -@use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox; +@use './m2-app'; +@use 'ripple/m2-ripple'; +@use 'option/m2-option'; +@use 'option/m2-optgroup'; +@use 'selection/pseudo-checkbox/m2-full-pseudo-checkbox'; +@use 'selection/pseudo-checkbox/m2-minimal-pseudo-checkbox'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -25,9 +25,7 @@ @include pseudo-checkbox-theme.base($theme); @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-app.$prefix, - tokens-mat-app.get-unthemable-tokens() - ); + m2-app.$prefix, m2-app.get-unthemable-tokens()); } } } @@ -42,9 +40,7 @@ @include pseudo-checkbox-theme.color($theme); @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-app.$prefix, - tokens-mat-app.get-color-tokens($theme) - ); + m2-app.$prefix, m2-app.get-color-tokens($theme)); } } } @@ -72,25 +68,25 @@ } @function _define-overrides() { - $app-tokens: tokens-mat-app.get-token-slots(); - $ripple-tokens: tokens-mat-ripple.get-token-slots(); - $option-tokens: tokens-mat-option.get-token-slots(); - $optgroup-tokens: tokens-mat-optgroup.get-token-slots(); - $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots(); - $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots(); + $app-tokens: m2-app.get-token-slots(); + $ripple-tokens: m2-ripple.get-token-slots(); + $option-tokens: m2-option.get-token-slots(); + $optgroup-tokens: m2-optgroup.get-token-slots(); + $full-pseudo-checkbox-tokens: m2-full-pseudo-checkbox.get-token-slots(); + $minimal-pseudo-checkbox-tokens: m2-minimal-pseudo-checkbox.get-token-slots(); @return ( - (namespace: tokens-mat-app.$prefix, tokens: $app-tokens, prefix: 'app-'), - (namespace: tokens-mat-ripple.$prefix, tokens: $ripple-tokens, prefix: 'ripple-'), - (namespace: tokens-mat-option.$prefix, tokens: $option-tokens, prefix: 'option-'), - (namespace: tokens-mat-optgroup.$prefix, tokens: $optgroup-tokens, prefix: 'optgroup-'), + (namespace: m2-app.$prefix, tokens: $app-tokens, prefix: 'app-'), + (namespace: m2-ripple.$prefix, tokens: $ripple-tokens, prefix: 'ripple-'), + (namespace: m2-option.$prefix, tokens: $option-tokens, prefix: 'option-'), + (namespace: m2-optgroup.$prefix, tokens: $optgroup-tokens, prefix: 'optgroup-'), ( - namespace: tokens-mat-full-pseudo-checkbox.$prefix, + namespace: m2-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens, prefix: 'pseudo-checkbox-full-' ), ( - namespace: tokens-mat-minimal-pseudo-checkbox.$prefix, + namespace: m2-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens, prefix: 'pseudo-checkbox-minimal-' ) @@ -128,35 +124,35 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...); - $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...); - $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...); + $mat-app-tokens: token-utils.get-tokens-for($tokens, m2-app.$prefix, $options...); + $mat-ripple-tokens: token-utils.get-tokens-for($tokens, m2-ripple.$prefix, $options...); + $mat-option-tokens: token-utils.get-tokens-for($tokens, m2-option.$prefix, $options...); $mat-optgroup-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-optgroup.$prefix, + m2-optgroup.$prefix, $options... ); $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-full-pseudo-checkbox.$prefix, + m2-full-pseudo-checkbox.$prefix, $options... ); $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-minimal-pseudo-checkbox.$prefix, + m2-minimal-pseudo-checkbox.$prefix, $options... ); - @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens); - @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens); - @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens); - @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, $mat-optgroup-tokens); + @include token-utils.create-token-values(m2-app.$prefix, $mat-app-tokens); + @include token-utils.create-token-values(m2-ripple.$prefix, $mat-ripple-tokens); + @include token-utils.create-token-values(m2-option.$prefix, $mat-option-tokens); + @include token-utils.create-token-values(m2-optgroup.$prefix, $mat-optgroup-tokens); @include token-utils.create-token-values( - tokens-mat-full-pseudo-checkbox.$prefix, + m2-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens ); @include token-utils.create-token-values( - tokens-mat-minimal-pseudo-checkbox.$prefix, + m2-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens ); } diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index cc6d6320ec5d..c864699c7308 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -1,4 +1,4 @@ -@use './tokens/m2/mat/app' as tokens-mat-app; +@use './m2-app'; @use './tokens/token-utils'; @use './style/elevation'; @@ -20,10 +20,10 @@ // user's content isn't inside of a `mat-sidenav-container`. @at-root { // Note: we need to emit fallback values here to avoid errors in internal builds. - @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) { + @include token-utils.use-tokens(m2-app.$prefix, m2-app.get-token-slots()) { .mat-app-background { - @include token-utils.create-token-slot(background-color, background-color, transparent); - @include token-utils.create-token-slot(color, text-color, inherit); + background-color: token-utils.slot(background-color, transparent); + color: token-utils.slot(text-color, inherit); } } } @@ -35,7 +35,7 @@ // Material Design specification. @mixin elevation-classes() { @at-root { - @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) { + @include token-utils.use-tokens(m2-app.$prefix, m2-app.get-token-slots()) { // Provides external CSS classes for each elevation value. Each CSS class is formatted as // `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element // is elevated. @@ -44,7 +44,7 @@ // We need the `mat-mdc-elevation-specific`, because some MDC mixins // come with elevation baked in and we don't have a way of removing it. .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { - @include token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$z-value}', + box-shadow: token-utils.slot('elevation-shadow-level-#{$z-value}', none); } } diff --git a/src/material/core/tokens/m2/mat/_app.scss b/src/material/core/_m2-app.scss similarity index 80% rename from src/material/core/tokens/m2/mat/_app.scss rename to src/material/core/_m2-app.scss index 6f09dd60b10f..d942b2cfcd3b 100644 --- a/src/material/core/tokens/m2/mat/_app.scss +++ b/src/material/core/_m2-app.scss @@ -1,8 +1,9 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../style/elevation'; +@use './tokens/m2-utils'; +@use './theming/inspection'; +@use './style/sass-utils'; +@use './style/elevation'; + // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, app); @@ -45,8 +46,8 @@ $prefix: (mat, app); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_app.scss b/src/material/core/_m3-app.scss similarity index 88% rename from src/material/core/tokens/m3/mat/_app.scss rename to src/material/core/_m3-app.scss index 45553bfdac46..b070ad582ec4 100644 --- a/src/material/core/tokens/m3/mat/_app.scss +++ b/src/material/core/_m3-app.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use 'sass:meta'; -@use '../../../style/elevation'; -@use '../../token-definition'; +@use './style/elevation'; +@use './tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, app); @@ -27,5 +27,5 @@ $prefix: (mat, app); } } - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/core/option/BUILD.bazel b/src/material/core/option/BUILD.bazel index 7cc35c94206b..b268e24bfe9c 100644 --- a/src/material/core/option/BUILD.bazel +++ b/src/material/core/option/BUILD.bazel @@ -3,6 +3,32 @@ load("//tools:defaults2.bzl", "ng_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-optgroup.scss", + "_m3-option.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-optgroup.scss", + "_m2-option.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ @@ -15,7 +41,6 @@ sass_library( "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -55,7 +80,6 @@ sass_binary( "//src/material/core/style:layout_common", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -64,6 +88,5 @@ sass_binary( src = "optgroup.scss", deps = [ "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_optgroup.scss b/src/material/core/option/_m2-optgroup.scss similarity index 82% rename from src/material/core/tokens/m2/mat/_optgroup.scss rename to src/material/core/option/_m2-optgroup.scss index e5fe9d7b4a89..94693ca52576 100644 --- a/src/material/core/tokens/m2/mat/_optgroup.scss +++ b/src/material/core/option/_m2-optgroup.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../style/sass-utils'; +@use '../theming/inspection'; +@use '../tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, optgroup); @@ -39,8 +39,8 @@ $prefix: (mat, optgroup); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_option.scss b/src/material/core/option/_m2-option.scss similarity index 85% rename from src/material/core/tokens/m2/mat/_option.scss rename to src/material/core/option/_m2-option.scss index 66a9c04fc942..1ce5f3e88f07 100644 --- a/src/material/core/tokens/m2/mat/_option.scss +++ b/src/material/core/option/_m2-option.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../tokens/m2-utils'; +@use '../theming/inspection'; +@use '../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, option); @@ -47,8 +47,8 @@ $prefix: (mat, option); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_optgroup.scss b/src/material/core/option/_m3-optgroup.scss similarity index 73% rename from src/material/core/tokens/m3/mat/_optgroup.scss rename to src/material/core/option/_m3-optgroup.scss index 9707a0b4741c..60c7466d3fe0 100644 --- a/src/material/core/tokens/m3/mat/_optgroup.scss +++ b/src/material/core/option/_m3-optgroup.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../style/sass-utils'; +@use '../tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, optgroup); @@ -12,11 +12,11 @@ $prefix: (mat, optgroup); /// @return {Map} A set of custom tokens for the mat-optgroup @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, label-text, title-small), + m3-utils.generate-typography-tokens($systems, label-text, title-small), ( label-text-color: map.get($systems, md-sys-color, on-surface-variant), ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_option.scss b/src/material/core/option/_m3-option.scss similarity index 94% rename from src/material/core/tokens/m3/mat/_option.scss rename to src/material/core/option/_m3-option.scss index a2262e2c7186..11a9c385235b 100644 --- a/src/material/core/tokens/m3/mat/_option.scss +++ b/src/material/core/option/_m3-option.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../style/sass-utils'; +@use '../tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, option); @@ -53,5 +53,5 @@ $prefix: (mat, option); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss index 6ee2d3b13e2b..a0e52362f694 100644 --- a/src/material/core/option/_optgroup-theme.scss +++ b/src/material/core/option/_optgroup-theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup; +@use './m2-optgroup'; @use '../tokens/token-utils'; @use '../style/sass-utils'; @use '../theming/theming'; @@ -20,9 +20,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-optgroup.$prefix, - tokens-mat-optgroup.get-color-tokens($theme) - ); + m2-optgroup.$prefix, m2-optgroup.get-color-tokens($theme)); } } } @@ -33,9 +31,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-optgroup.$prefix, - tokens-mat-optgroup.get-typography-tokens($theme) - ); + m2-optgroup.$prefix, m2-optgroup.get-typography-tokens($theme)); } } } @@ -51,8 +47,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-optgroup.$prefix, - tokens: tokens-mat-optgroup.get-token-slots(), + namespace: m2-optgroup.$prefix, + tokens: m2-optgroup.get-token-slots(), ), ); } @@ -86,8 +82,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-optgroup.$prefix, - map.get($tokens, tokens-mat-optgroup.$prefix) + m2-optgroup.$prefix, + map.get($tokens, m2-optgroup.$prefix) ); } } diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss index 40951a96c406..564f53a681c2 100644 --- a/src/material/core/option/_option-theme.scss +++ b/src/material/core/option/_option-theme.scss @@ -1,4 +1,4 @@ -@use '../tokens/m2/mat/option' as tokens-mat-option; +@use './m2-option'; @use '../tokens/token-utils'; @use '../style/sass-utils'; @use '../theming/theming'; @@ -27,23 +27,17 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-option.$prefix, - tokens-mat-option.get-color-tokens($theme) - ); + m2-option.$prefix, m2-option.get-color-tokens($theme)); } .mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-option.$prefix, - tokens-mat-option.get-color-tokens($theme, accent) - ); + m2-option.$prefix, m2-option.get-color-tokens($theme, accent)); } .mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-option.$prefix, - tokens-mat-option.get-color-tokens($theme, warn) - ); + m2-option.$prefix, m2-option.get-color-tokens($theme, warn)); } } } @@ -56,9 +50,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-option.$prefix, - tokens-mat-option.get-typography-tokens($theme) - ); + m2-option.$prefix, m2-option.get-typography-tokens($theme)); } } } @@ -76,8 +68,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-option.$prefix, - tokens: tokens-mat-option.get-token-slots(), + namespace: m2-option.$prefix, + tokens: m2-option.get-token-slots(), ), ); } @@ -116,6 +108,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens); + $mat-option-tokens: token-utils.get-tokens-for($tokens, m2-option.$prefix, $options...); + @include token-utils.create-token-values(m2-option.$prefix, $mat-option-tokens); } diff --git a/src/material/core/option/optgroup.scss b/src/material/core/option/optgroup.scss index f46bf360f39d..548ac49bd347 100644 --- a/src/material/core/option/optgroup.scss +++ b/src/material/core/option/optgroup.scss @@ -1,16 +1,15 @@ -@use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup; +@use './m2-optgroup'; @use '../tokens/token-utils'; .mat-mdc-optgroup { // These tokens are set on the root option group to make them easier to override. - @include token-utils.use-tokens( - tokens-mat-optgroup.$prefix, tokens-mat-optgroup.get-token-slots()) { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(font-weight, label-text-weight); + @include token-utils.use-tokens(m2-optgroup.$prefix, m2-optgroup.get-token-slots()) { + color: token-utils.slot(label-text-color); + font-family: token-utils.slot(label-text-font); + line-height: token-utils.slot(label-text-line-height); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + font-weight: token-utils.slot(label-text-weight); } } diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index facc73777180..0e18484b9886 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -1,7 +1,7 @@ @use '@angular/cdk'; -@use '../tokens/m2/mat/option' as tokens-mat-option; -@use '../tokens/m2/mat/list' as tokens-mat-list; +@use './m2-option'; +@use '../../list/m2-list'; @use '../tokens/token-utils'; @use '../style/vendor-prefixes'; @use '../style/layout-common'; @@ -21,23 +21,22 @@ $_side-padding: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; - @include token-utils.use-tokens( - tokens-mat-option.$prefix, tokens-mat-option.get-token-slots()) { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(font-weight, label-text-weight); + @include token-utils.use-tokens(m2-option.$prefix, m2-option.get-token-slots()) { + color: token-utils.slot(label-text-color); + font-family: token-utils.slot(label-text-font); + line-height: token-utils.slot(label-text-line-height); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + font-weight: token-utils.slot(label-text-weight); // Increase specificity to override styles from list theme. &:hover:not(.mdc-list-item--disabled) { - @include token-utils.create-token-slot(background-color, hover-state-layer-color); + background-color: token-utils.slot(hover-state-layer-color); } &:focus.mdc-list-item, &.mat-mdc-option-active.mdc-list-item { - @include token-utils.create-token-slot(background-color, focus-state-layer-color); + background-color: token-utils.slot(focus-state-layer-color); outline: 0; } @@ -45,16 +44,16 @@ $_side-padding: 16px; // We don't change the background & text color in multiple mode since // it has the checkbox to show the selected state. &:not(.mat-mdc-option-multiple) { - @include token-utils.create-token-slot(background-color, selected-state-layer-color); + background-color: token-utils.slot(selected-state-layer-color); .mdc-list-item__primary-text { - @include token-utils.create-token-slot(color, selected-state-label-text-color); + color: token-utils.slot(selected-state-label-text-color); } } } .mat-pseudo-checkbox { --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{ - token-utils.get-token-variable(selected-state-label-text-color)}; + token-utils.slot(selected-state-label-text-color)}; } } @@ -186,9 +185,9 @@ $_side-padding: 16px; // because the checkbox already indicates that they're selected. This happened to work in M2, // due to `list-item-selected-container-color` being the same as `list-item-container-color`, // but that's no longer the case in M3. This overrides ensures that the appearance is consistent. - @include token-utils.use-tokens(tokens-mat-list.$prefix, tokens-mat-list.get-token-slots()) { + @include token-utils.use-tokens(m2-list.$prefix, m2-list.get-token-slots()) { $selected-token: token-utils.get-token-variable-name(list-item-selected-container-color); - $base-token: token-utils.get-token-variable(list-item-container-color, $fallback: transparent); + $base-token: token-utils.slot(list-item-container-color, $fallback: transparent); #{$selected-token}: $base-token; } } diff --git a/src/material/core/tokens/m2/mat/_ripple.scss b/src/material/core/ripple/_m2-ripple.scss similarity index 81% rename from src/material/core/tokens/m2/mat/_ripple.scss rename to src/material/core/ripple/_m2-ripple.scss index 5b62623b787a..bf783d148b73 100644 --- a/src/material/core/tokens/m2/mat/_ripple.scss +++ b/src/material/core/ripple/_m2-ripple.scss @@ -1,7 +1,7 @@ @use 'sass:meta'; -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../tokens/m2-utils'; +@use '../theming/inspection'; +@use '../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, ripple); @@ -42,8 +42,8 @@ $prefix: (mat, ripple); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_ripple.scss b/src/material/core/ripple/_m3-ripple.scss similarity index 80% rename from src/material/core/tokens/m3/mat/_ripple.scss rename to src/material/core/ripple/_m3-ripple.scss index 71db1208f99d..67e95dc691ee 100644 --- a/src/material/core/tokens/m3/mat/_ripple.scss +++ b/src/material/core/ripple/_m3-ripple.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../style/sass-utils'; +@use '../tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, ripple); @@ -15,5 +15,5 @@ $prefix: (mat, ripple); color: sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.1), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/core/ripple/_ripple-theme.scss b/src/material/core/ripple/_ripple-theme.scss index 8059c0936978..2525dda3c74a 100644 --- a/src/material/core/ripple/_ripple-theme.scss +++ b/src/material/core/ripple/_ripple-theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../tokens/m2/mat/ripple' as tokens-mat-ripple; +@use './m2-ripple'; @use '../tokens/token-utils'; @use '../style/sass-utils'; @use '../theming/theming'; @@ -19,8 +19,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-ripple.$prefix, - tokens-mat-ripple.get-color-tokens($theme) + m2-ripple.$prefix, + m2-ripple.get-color-tokens($theme) ); } } @@ -32,8 +32,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-ripple.$prefix, - tokens-mat-ripple.get-typography-tokens($theme) + m2-ripple.$prefix, + m2-ripple.get-typography-tokens($theme) ); } } @@ -45,8 +45,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-ripple.$prefix, - tokens-mat-ripple.get-density-tokens($theme) + m2-ripple.$prefix, + m2-ripple.get-density-tokens($theme) ); } } @@ -56,8 +56,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-ripple.$prefix, - tokens: tokens-mat-ripple.get-token-slots(), + namespace: m2-ripple.$prefix, + tokens: m2-ripple.get-token-slots(), ), ); } @@ -91,8 +91,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-ripple.$prefix, - map.get($tokens, tokens-mat-ripple.$prefix) + m2-ripple.$prefix, + map.get($tokens, m2-ripple.$prefix) ); } } diff --git a/src/material/core/ripple/_ripple.scss b/src/material/core/ripple/_ripple.scss index 6e5289422eee..54e12ec439f4 100644 --- a/src/material/core/ripple/_ripple.scss +++ b/src/material/core/ripple/_ripple.scss @@ -1,5 +1,5 @@ @use '@angular/cdk'; -@use '../tokens/m2/mat/ripple' as tokens-mat-ripple; +@use './m2-ripple'; @use '../tokens/token-utils'; @mixin ripple() { @@ -37,10 +37,9 @@ // the ripples aren't clipped when inside the shadow DOM (see #24028). transform: scale3d(0, 0, 0); - @include token-utils.use-tokens( - tokens-mat-ripple.$prefix, tokens-mat-ripple.get-token-slots()) { + @include token-utils.use-tokens(m2-ripple.$prefix, m2-ripple.get-token-slots()) { // We have to emit a fallback value here, because some internal builds depend on it. - background-color: token-utils.get-token-variable(color, $fallback: rgba(#000, 0.1)); + background-color: token-utils.slot(color, $fallback: rgba(#000, 0.1)); } // In high contrast mode the ripple is opaque, causing it to obstruct the content. diff --git a/src/material/core/selection/pseudo-checkbox/BUILD.bazel b/src/material/core/selection/pseudo-checkbox/BUILD.bazel index 8f2d2860f49d..f08070333ae0 100644 --- a/src/material/core/selection/pseudo-checkbox/BUILD.bazel +++ b/src/material/core/selection/pseudo-checkbox/BUILD.bazel @@ -3,6 +3,32 @@ load("//tools:defaults2.bzl", "ng_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-full-pseudo-checkbox.scss", + "_m3-minimal-pseudo-checkbox.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-full-pseudo-checkbox.scss", + "_m2-minimal-pseudo-checkbox.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + ng_project( name = "pseudo-checkbox", srcs = [ @@ -30,7 +56,6 @@ sass_library( "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -49,6 +74,5 @@ sass_binary( "//src/material/core/style:private", "//src/material/core/style:variables", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_full-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss similarity index 83% rename from src/material/core/tokens/m2/mat/_full-pseudo-checkbox.scss rename to src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss index aec9c6b950b8..b993dc6b8c2b 100644 --- a/src/material/core/tokens/m2/mat/_full-pseudo-checkbox.scss +++ b/src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../../tokens/m2-utils'; +@use '../../theming/inspection'; +@use '../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, full-pseudo-checkbox); @@ -42,8 +42,8 @@ $prefix: (mat, full-pseudo-checkbox); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_minimal-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss similarity index 79% rename from src/material/core/tokens/m2/mat/_minimal-pseudo-checkbox.scss rename to src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss index e8c466a87211..f88b65d691e0 100644 --- a/src/material/core/tokens/m2/mat/_minimal-pseudo-checkbox.scss +++ b/src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../../tokens/m2-utils'; +@use '../../theming/inspection'; +@use '../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, minimal-pseudo-checkbox); @@ -36,8 +36,8 @@ $prefix: (mat, minimal-pseudo-checkbox); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_full-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss similarity index 91% rename from src/material/core/tokens/m3/mat/_full-pseudo-checkbox.scss rename to src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss index 1f7d36c7a8d0..7b217742b0ee 100644 --- a/src/material/core/tokens/m3/mat/_full-pseudo-checkbox.scss +++ b/src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../../style/sass-utils'; +@use '../../tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, full-pseudo-checkbox); @@ -39,5 +39,5 @@ $prefix: (mat, full-pseudo-checkbox); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_minimal-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss similarity index 87% rename from src/material/core/tokens/m3/mat/_minimal-pseudo-checkbox.scss rename to src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss index a9fcaf59b6f8..9534fe3db37b 100644 --- a/src/material/core/tokens/m3/mat/_minimal-pseudo-checkbox.scss +++ b/src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../../style/sass-utils'; +@use '../../tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, minimal-pseudo-checkbox); @@ -31,5 +31,5 @@ $prefix: (mat, minimal-pseudo-checkbox); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index a776891f10ad..764a3ee4978b 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -3,18 +3,18 @@ @use '../../theming/validation'; @use '../../style/sass-utils'; @use '../../tokens/token-utils'; -@use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox; -@use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox; +@use './m2-full-pseudo-checkbox'; +@use './m2-minimal-pseudo-checkbox'; @mixin _palette-styles($theme, $palette-name) { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-full-pseudo-checkbox.$prefix, - tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name) + m2-full-pseudo-checkbox.$prefix, + m2-full-pseudo-checkbox.get-color-tokens($theme, $palette-name) ); @include token-utils.create-token-values-mixed( - tokens-mat-minimal-pseudo-checkbox.$prefix, - tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name) + m2-minimal-pseudo-checkbox.$prefix, + m2-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name) ); } } @@ -24,23 +24,13 @@ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for( - $tokens, - tokens-mat-full-pseudo-checkbox.$prefix, - $options... - ); + $tokens, m2-full-pseudo-checkbox.$prefix, $options...); $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for( - $tokens, - tokens-mat-minimal-pseudo-checkbox.$prefix, - $options... - ); + $tokens, m2-minimal-pseudo-checkbox.$prefix, $options...); @include token-utils.create-token-values-mixed( - tokens-mat-full-pseudo-checkbox.$prefix, - $mat-full-pseudo-checkbox-tokens - ); + m2-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens); @include token-utils.create-token-values-mixed( - tokens-mat-minimal-pseudo-checkbox.$prefix, - $mat-minimal-pseudo-checkbox-tokens - ); + m2-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens); } /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -51,17 +41,17 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots(); - $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots(); + $full-pseudo-checkbox-tokens: m2-full-pseudo-checkbox.get-token-slots(); + $minimal-pseudo-checkbox-tokens: m2-minimal-pseudo-checkbox.get-token-slots(); @return ( ( - namespace: tokens-mat-full-pseudo-checkbox.$prefix, + namespace: m2-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens, prefix: 'full-', ), ( - namespace: tokens-mat-minimal-pseudo-checkbox.$prefix, + namespace: m2-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens, prefix: 'minimal-', ), diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss index 6fc7c63eb5e0..387620e2ad9c 100644 --- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss +++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss @@ -3,8 +3,8 @@ @use '../../style/private'; @use '../../style/variables'; @use '../../tokens/token-utils'; -@use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox; -@use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox; +@use './m2-full-pseudo-checkbox'; +@use './m2-minimal-pseudo-checkbox'; @use './pseudo-checkbox-common'; .mat-pseudo-checkbox { @@ -55,44 +55,44 @@ } .mat-pseudo-checkbox-minimal { - @include token-utils.use-tokens(tokens-mat-minimal-pseudo-checkbox.$prefix, - tokens-mat-minimal-pseudo-checkbox.get-token-slots()) { + @include token-utils.use-tokens( + m2-minimal-pseudo-checkbox.$prefix, m2-minimal-pseudo-checkbox.get-token-slots()) { &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate { &::after { - @include token-utils.create-token-slot(color, selected-checkmark-color); + color: token-utils.slot(selected-checkmark-color); } &.mat-pseudo-checkbox-disabled::after { - @include token-utils.create-token-slot(color, disabled-selected-checkmark-color); + color: token-utils.slot(disabled-selected-checkmark-color); } } } } .mat-pseudo-checkbox-full { - @include token-utils.use-tokens(tokens-mat-full-pseudo-checkbox.$prefix, - tokens-mat-full-pseudo-checkbox.get-token-slots()) { - @include token-utils.create-token-slot(border-color, unselected-icon-color); + @include token-utils.use-tokens( + m2-full-pseudo-checkbox.$prefix, m2-full-pseudo-checkbox.get-token-slots()) { + border-color: token-utils.slot(unselected-icon-color); border-width: checkbox-common.$border-width; border-style: solid; &.mat-pseudo-checkbox-disabled { - @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color); + border-color: token-utils.slot(disabled-unselected-icon-color); } &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate { - @include token-utils.create-token-slot(background-color, selected-icon-color); + background-color: token-utils.slot(selected-icon-color); border-color: transparent; &::after { - @include token-utils.create-token-slot(color, selected-checkmark-color); + color: token-utils.slot(selected-checkmark-color); } &.mat-pseudo-checkbox-disabled { - @include token-utils.create-token-slot(background-color, disabled-selected-icon-color); + background-color: token-utils.slot(disabled-selected-icon-color); &::after { - @include token-utils.create-token-slot(color, disabled-selected-checkmark-color); + color: token-utils.slot(disabled-selected-checkmark-color); } } } diff --git a/src/material/core/tokens/BUILD.bazel b/src/material/core/tokens/BUILD.bazel index e6a66b56bfb6..d1c472a31aff 100644 --- a/src/material/core/tokens/BUILD.bazel +++ b/src/material/core/tokens/BUILD.bazel @@ -7,6 +7,11 @@ sass_library( srcs = ["_format-tokens.scss"], ) +sass_library( + name = "m3_utils", + srcs = ["_m3-utils.scss"], +) + sass_library( name = "token_utils", srcs = [ @@ -28,13 +33,13 @@ sass_library( "//src/material/core/style:sass_utils", "//src/material/core/theming:_config_validation", "//src/material/core/theming:_definition", - "//src/material/core/tokens/m3/definitions", + "//src/material/core/tokens/m3", ], ) sass_library( - name = "token_definition", - srcs = ["_token-definition.scss"], + name = "m2_utils", + srcs = ["_m2-utils.scss"], deps = ["//src/material/core/m2:m2_sass"], ) @@ -50,10 +55,98 @@ sass_library( deps = [ ":density", ":format_tokens", + ":m2_tokens", + "//src/material/autocomplete:m3", + "//src/material/badge:m3", + "//src/material/bottom-sheet:m3", + "//src/material/button:m3", + "//src/material/button-toggle:m3", + "//src/material/card:m3", + "//src/material/checkbox:m3", + "//src/material/chips:m3", + "//src/material/core:m3", + "//src/material/core:ripple_m3", "//src/material/core/m2:m2_sass", + "//src/material/core/option:m3", + "//src/material/core/selection/pseudo-checkbox:m3", "//src/material/core/style:sass_utils", - "//src/material/core/tokens/m2", + "//src/material/core/theming", "//src/material/core/tokens/m3", - "//src/material/core/tokens/m3/definitions", + "//src/material/datepicker:m3", + "//src/material/dialog:m3", + "//src/material/divider:m3", + "//src/material/expansion:m3", + "//src/material/form-field:m3", + "//src/material/grid-list:m3", + "//src/material/icon:m3", + "//src/material/list:m3", + "//src/material/menu:m3", + "//src/material/paginator:m3", + "//src/material/progress-bar:m3", + "//src/material/progress-spinner:m3", + "//src/material/radio:m3", + "//src/material/select:m3", + "//src/material/sidenav:m3", + "//src/material/slide-toggle:m3", + "//src/material/slider:m3", + "//src/material/snack-bar:m3", + "//src/material/sort:m3", + "//src/material/stepper:m3", + "//src/material/table:m3", + "//src/material/tabs:m3", + "//src/material/timepicker:m3", + "//src/material/toolbar:m3", + "//src/material/tooltip:m3", + "//src/material/tree:m3", + ], +) + +sass_library( + name = "m2_tokens", + srcs = ["_m2-tokens.scss"], + deps = [ + ":density", + ":format_tokens", + "//src/material/autocomplete:m2", + "//src/material/badge:m2", + "//src/material/bottom-sheet:m2", + "//src/material/button:m2", + "//src/material/button-toggle:m2", + "//src/material/card:m2", + "//src/material/checkbox:m2", + "//src/material/chips:m2", + "//src/material/core:m2", + "//src/material/core:ripple_m2", + "//src/material/core/m2:m2_sass", + "//src/material/core/option:m2", + "//src/material/core/selection/pseudo-checkbox:m2", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/datepicker:m2", + "//src/material/dialog:m2", + "//src/material/divider:m2", + "//src/material/expansion:m2", + "//src/material/form-field:m2", + "//src/material/grid-list:m2", + "//src/material/icon:m2", + "//src/material/list:m2", + "//src/material/menu:m2", + "//src/material/paginator:m2", + "//src/material/progress-bar:m2", + "//src/material/progress-spinner:m2", + "//src/material/radio:m2", + "//src/material/select:m2", + "//src/material/sidenav:m2", + "//src/material/slide-toggle:m2", + "//src/material/slider:m2", + "//src/material/snack-bar:m2", + "//src/material/sort:m2", + "//src/material/stepper:m2", + "//src/material/table:m2", + "//src/material/tabs:m2", + "//src/material/timepicker:m2", + "//src/material/toolbar:m2", + "//src/material/tooltip:m2", + "//src/material/tree:m2", ], ) diff --git a/src/material/core/tokens/_m2-tokens.scss b/src/material/core/tokens/_m2-tokens.scss new file mode 100644 index 000000000000..2237cc37a2b7 --- /dev/null +++ b/src/material/core/tokens/_m2-tokens.scss @@ -0,0 +1,159 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use '../../autocomplete/m2-autocomplete'; +@use '../../badge/m2-badge'; +@use '../../bottom-sheet/m2-bottom-sheet'; +@use '../../button-toggle/m2-standard-button-toggle'; +@use '../../button/m2-extended-fab'; +@use '../../button/m2-fab'; +@use '../../button/m2-fab-small'; +@use '../../button/m2-filled-button'; +@use '../../button/m2-icon-button'; +@use '../../button/m2-outlined-button'; +@use '../../button/m2-protected-button'; +@use '../../button/m2-text-button'; +@use '../../button/m2-tonal-button'; +@use '../../card/m2-card'; +@use '../../card/m2-elevated-card'; +@use '../../card/m2-outlined-card'; +@use '../../checkbox/m2-checkbox'; +@use '../../chips/m2-chip'; +@use '../../datepicker/m2-datepicker'; +@use '../../dialog/m2-dialog'; +@use '../../divider/m2-divider'; +@use '../../expansion/m2-expansion'; +@use '../../form-field/m2-filled-text-field'; +@use '../../form-field/m2-form-field'; +@use '../../form-field/m2-outlined-text-field'; +@use '../../grid-list/m2-grid-list'; +@use '../../icon/m2-icon'; +@use '../../list/m2-list'; +@use '../../menu/m2-menu'; +@use '../../paginator/m2-paginator'; +@use '../../progress-bar/m2-progress-bar'; +@use '../../progress-spinner/m2-progress-spinner'; +@use '../../radio/m2-radio'; +@use '../../select/m2-select'; +@use '../../sidenav/m2-sidenav'; +@use '../../slide-toggle/m2-slide-toggle'; +@use '../../slider/m2-slider'; +@use '../../snack-bar/m2-snack-bar'; +@use '../../sort/m2-sort'; +@use '../../stepper/m2-stepper'; +@use '../../table/m2-table'; +@use '../../tabs/m2-secondary-navigation-tab'; +@use '../../tabs/m2-tab-header'; +@use '../../tabs/m2-tab-header-with-background'; +@use '../../tabs/m2-tab-indicator'; +@use '../../timepicker/m2-timepicker'; +@use '../../toolbar/m2-toolbar'; +@use '../../tooltip/m2-tooltip'; +@use '../../tree/m2-tree'; +@use '../m2-app'; +@use '../option/m2-optgroup'; +@use '../option/m2-option'; +@use '../ripple/m2-ripple'; +@use '../selection/pseudo-checkbox/m2-full-pseudo-checkbox'; +@use '../selection/pseudo-checkbox/m2-minimal-pseudo-checkbox'; +@use '../style/sass-utils'; +@use '../theming/inspection'; + +/// Gets the tokens for the given theme, m2 tokens module, and theming system. +/// @param {Map} $theme The Angular Material theme object to generate token values from. +/// @param {String} $module The Sass module containing the token getter functions. +/// @param {String} $system The theming system to get tokens for. Valid values are: unthemable, +/// color, typography, density. +/// @return {Map} The token map by calling the token getter for the given system in the given module +/// with the given Angular Material theme. Token names are not fully-qualified. +@function _get-tokens-for-module-and-system($theme, $module, $system) { + @if $system == unthemable { + @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module)); + } + @if not inspection.theme-has($theme, $system) { + @return (); + } + @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module), $theme); +} + +/// Gets the fully qualified tokens map for the given theme and m2 tokens module. +/// @param {Map} $theme The Angular Material theme object to generate token values from. +/// @param {String} $module The Sass module containing the token getter functions. +/// @return {Map} The token map by calling the token getters in the given module with the given +/// Angular Material theme. Token names are fully-qualified. +@function _get-tokens-for-module($theme, $module) { + $tokens: sass-utils.deep-merge-all( + _get-tokens-for-module-and-system($theme, $module, unthemable), + _get-tokens-for-module-and-system($theme, $module, color), + _get-tokens-for-module-and-system($theme, $module, typography), + _get-tokens-for-module-and-system($theme, $module, density) + ); + @return map.set((), map.get(meta.module-variables($module), prefix), $tokens); +} + +/// Gets the full set of M2 tokens for the given theme object. +/// @param {Map} $theme The Angular Material theme object to generate token values from. +/// @return {Map} The token map for the given Angular Material theme. Returned format: +/// ( +/// (fully, qualified, namespace): ( +/// token: value +/// ) +/// ) +@function m2-tokens-from-theme($theme) { + @return sass-utils.deep-merge-all( + _get-tokens-for-module($theme, m2-app), + _get-tokens-for-module($theme, m2-autocomplete), + _get-tokens-for-module($theme, m2-badge), + _get-tokens-for-module($theme, m2-bottom-sheet), + _get-tokens-for-module($theme, m2-card), + _get-tokens-for-module($theme, m2-checkbox), + _get-tokens-for-module($theme, m2-chip), + _get-tokens-for-module($theme, m2-datepicker), + _get-tokens-for-module($theme, m2-dialog), + _get-tokens-for-module($theme, m2-divider), + _get-tokens-for-module($theme, m2-elevated-card), + _get-tokens-for-module($theme, m2-expansion), + _get-tokens-for-module($theme, m2-extended-fab), + _get-tokens-for-module($theme, m2-fab), + _get-tokens-for-module($theme, m2-fab-small), + _get-tokens-for-module($theme, m2-filled-button), + _get-tokens-for-module($theme, m2-filled-text-field), + _get-tokens-for-module($theme, m2-form-field), + _get-tokens-for-module($theme, m2-full-pseudo-checkbox), + _get-tokens-for-module($theme, m2-grid-list), + _get-tokens-for-module($theme, m2-icon), + _get-tokens-for-module($theme, m2-icon-button), + _get-tokens-for-module($theme, m2-list), + _get-tokens-for-module($theme, m2-menu), + _get-tokens-for-module($theme, m2-minimal-pseudo-checkbox), + _get-tokens-for-module($theme, m2-optgroup), + _get-tokens-for-module($theme, m2-option), + _get-tokens-for-module($theme, m2-outlined-button), + _get-tokens-for-module($theme, m2-outlined-card), + _get-tokens-for-module($theme, m2-outlined-text-field), + _get-tokens-for-module($theme, m2-paginator), + _get-tokens-for-module($theme, m2-progress-bar), + _get-tokens-for-module($theme, m2-progress-spinner), + _get-tokens-for-module($theme, m2-protected-button), + _get-tokens-for-module($theme, m2-radio), + _get-tokens-for-module($theme, m2-ripple), + _get-tokens-for-module($theme, m2-secondary-navigation-tab), + _get-tokens-for-module($theme, m2-select), + _get-tokens-for-module($theme, m2-sidenav), + _get-tokens-for-module($theme, m2-slide-toggle), + _get-tokens-for-module($theme, m2-slider), + _get-tokens-for-module($theme, m2-snack-bar), + _get-tokens-for-module($theme, m2-sort), + _get-tokens-for-module($theme, m2-standard-button-toggle), + _get-tokens-for-module($theme, m2-stepper), + _get-tokens-for-module($theme, m2-tab-header), + _get-tokens-for-module($theme, m2-tab-header-with-background), + _get-tokens-for-module($theme, m2-tab-indicator), + _get-tokens-for-module($theme, m2-table), + _get-tokens-for-module($theme, m2-text-button), + _get-tokens-for-module($theme, m2-timepicker), + _get-tokens-for-module($theme, m2-tonal-button), + _get-tokens-for-module($theme, m2-toolbar), + _get-tokens-for-module($theme, m2-tooltip), + _get-tokens-for-module($theme, m2-tree), + ); +} diff --git a/src/material/core/tokens/_m2-utils.scss b/src/material/core/tokens/_m2-utils.scss new file mode 100644 index 000000000000..5ef6d41d0ddd --- /dev/null +++ b/src/material/core/tokens/_m2-utils.scss @@ -0,0 +1,109 @@ +@use '../m2/palette'; +@use '../m2/theming'; +@use '../m2/typography'; +@use 'sass:color'; +@use 'sass:math'; +@use 'sass:meta'; + +$_placeholder-color-palette: theming.define-palette(palette.$red-palette); + +// Indicates whether we're building internally. Used for backwards compatibility. +$private-is-internal-build: false; + +// Placeholder color config that can be passed to token getter functions when generating token +// slots. +$placeholder-color-config: ( + primary: $_placeholder-color-palette, + accent: $_placeholder-color-palette, + warn: $_placeholder-color-palette, + is-dark: false, + foreground: palette.$light-theme-foreground-palette, + background: palette.$light-theme-background-palette, +); + +$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1); + +// Placeholder typography config that can be passed to token getter functions when generating token +// slots. +$placeholder-typography-config: ( + font-family: 'Roboto, sans-serif', + headline-1: $_placeholder-typography-level-config, + headline-2: $_placeholder-typography-level-config, + headline-3: $_placeholder-typography-level-config, + headline-4: $_placeholder-typography-level-config, + headline-5: $_placeholder-typography-level-config, + headline-6: $_placeholder-typography-level-config, + subtitle-1: $_placeholder-typography-level-config, + subtitle-2: $_placeholder-typography-level-config, + body-1: $_placeholder-typography-level-config, + body-2: $_placeholder-typography-level-config, + caption: $_placeholder-typography-level-config, + button: $_placeholder-typography-level-config, + overline: $_placeholder-typography-level-config, + subheading-1: $_placeholder-typography-level-config, + title: $_placeholder-typography-level-config, +); + +// Placeholder density config that can be passed to token getter functions when generating token +// slots. +$placeholder-density-config: 0; + +/// Inherited function from MDC that computes which contrast tone to use on top of a color. +/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain +/// backwards compatibility. +/// @param {Color} $value Color for which we're calculating the contrast tone. +/// @param {Boolean} $is-dark Whether the current theme is dark. +/// @return {Map} Either `dark` or `light`. +@function contrast-tone($value, $is-dark) { + @if ($value == 'dark') { + @return 'light'; + } + + @if ($value == 'light') { + @return 'dark'; + } + + // Fallback if the app is using a non-color palette (e.g. CSS variable based). + @if (meta.type-of($value) != 'color') { + @return if($is-dark, 'light', 'dark'); + } + + $minimum-contrast: 3.1; + $light-contrast: _contrast($value, #fff); + $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87)); + + @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) { + @return 'dark'; + } + + @return 'light'; +} + +@function _linear-channel-value($channel-value) { + $normalized-channel-value: math.div($channel-value, 255); + + @if ($normalized-channel-value < 0.03928) { + @return math.div($normalized-channel-value, 12.92); + } + + @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4); +} + +// Calculate the luminance for a color. +// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests +@function _luminance($color) { + $red: _linear-channel-value(color.red($color)); + $green: _linear-channel-value(color.green($color)); + $blue: _linear-channel-value(color.blue($color)); + + @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue; +} + +// Calculate the contrast ratio between two colors. +// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests +@function _contrast($back, $front) { + $back-lum: _luminance($back) + 0.05; + $fore-lum: _luminance($front) + 0.05; + + @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum)); +} diff --git a/src/material/core/tokens/_m3-system.scss b/src/material/core/tokens/_m3-system.scss index 606bb5d70fbf..b06f76611bc9 100644 --- a/src/material/core/tokens/_m3-system.scss +++ b/src/material/core/tokens/_m3-system.scss @@ -2,7 +2,7 @@ @use '../style/sass-utils'; @use '../theming/config-validation'; @use '../theming/definition'; -@use './m3/definitions'; +@use './m3'; @use 'sass:map'; @use 'sass:meta'; @use 'sass:list'; @@ -90,11 +90,11 @@ /// change the primary color to red, use `mat.theme-overrides((primary: red));` @mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) { $sys-names: map-merge-all( - definitions.md-sys-color-values-light(), - definitions.md-sys-typescale-values(), - definitions.md-sys-elevation-values(), - definitions.md-sys-shape-values(), - definitions.md-sys-state-values()); + m3.md-sys-color-values-light(), + m3.md-sys-typescale-values(), + m3.md-sys-elevation-values(), + m3.md-sys-shape-values(), + m3.md-sys-state-values()); & { @each $name, $value in $overrides { @@ -145,12 +145,12 @@ } @function _generate-sys-colors($ref, $type) { - $light-sys-colors: definitions.md-sys-color-values-light($ref); + $light-sys-colors: m3.md-sys-color-values-light($ref); @if ($type == light) { @return $light-sys-colors; } - $dark-sys-colors: definitions.md-sys-color-values-dark($ref); + $dark-sys-colors: m3.md-sys-color-values-dark($ref); @if ($type == dark) { @return $dark-sys-colors; } @@ -185,7 +185,7 @@ } & { - @each $name, $value in definitions.md-sys-typescale-values($ref) { + @each $name, $value in m3.md-sys-typescale-values($ref) { --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; } } @@ -195,7 +195,7 @@ $shadow-color: map.get( $theme, _mat-theming-internals-do-not-access, color-tokens, (mat, theme), shadow); - @each $name, $value in definitions.md-sys-elevation-values() { + @each $name, $value in m3.md-sys-elevation-values() { $level: map.get($overrides, $name) or $value; $value: elevation.get-box-shadow($level, $shadow-color); & { @@ -206,7 +206,7 @@ @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) { & { - @each $name, $value in definitions.md-sys-shape-values() { + @each $name, $value in m3.md-sys-shape-values() { --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; } } @@ -214,7 +214,7 @@ @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) { & { - @each $name, $value in definitions.md-sys-state-values() { + @each $name, $value in m3.md-sys-state-values() { --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; } } @@ -237,15 +237,15 @@ @function create-system-fallbacks() { $app-vars: ( 'md-sys-color': - _create-system-app-vars-map(definitions.md-sys-color-values-light()), + _create-system-app-vars-map(m3.md-sys-color-values-light()), 'md-sys-typescale': - _create-system-app-vars-map(definitions.md-sys-typescale-values()), + _create-system-app-vars-map(m3.md-sys-typescale-values()), 'md-sys-elevation': - _create-system-app-vars-map(definitions.md-sys-elevation-values()), + _create-system-app-vars-map(m3.md-sys-elevation-values()), 'md-sys-state': - _create-system-app-vars-map(definitions.md-sys-state-values()), + _create-system-app-vars-map(m3.md-sys-state-values()), 'md-sys-shape': - _create-system-app-vars-map(definitions.md-sys-shape-values()), + _create-system-app-vars-map(m3.md-sys-shape-values()), // Add a subset of palette-specific colors used by components instead of system values 'md-ref-palette': _create-system-app-vars-map( diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss index 7dcae56356fb..1ba270e9141d 100644 --- a/src/material/core/tokens/_m3-tokens.scss +++ b/src/material/core/tokens/_m3-tokens.scss @@ -1,11 +1,64 @@ -@use 'sass:map'; -@use '../style/sass-utils'; +@use '../../autocomplete/m3-autocomplete'; +@use '../../badge/m3-badge'; +@use '../../bottom-sheet/m3-bottom-sheet'; +@use '../../button-toggle/m3-standard-button-toggle'; +@use '../../button/m3-extended-fab'; +@use '../../button/m3-fab'; +@use '../../button/m3-fab-small'; +@use '../../button/m3-filled-button'; +@use '../../button/m3-icon-button'; +@use '../../button/m3-outlined-button'; +@use '../../button/m3-protected-button'; +@use '../../button/m3-text-button'; +@use '../../button/m3-tonal-button'; +@use '../../card/m3-card'; +@use '../../card/m3-elevated-card'; +@use '../../card/m3-outlined-card'; +@use '../../checkbox/m3-checkbox'; +@use '../../chips/m3-chip'; +@use '../../datepicker/m3-datepicker'; +@use '../../dialog/m3-dialog'; +@use '../../divider/m3-divider'; +@use '../../expansion/m3-expansion'; +@use '../../form-field/m3-filled-text-field'; +@use '../../form-field/m3-form-field'; +@use '../../form-field/m3-outlined-text-field'; +@use '../../grid-list/m3-grid-list'; +@use '../../icon/m3-icon'; +@use '../../list/m3-list'; +@use '../../menu/m3-menu'; +@use '../../paginator/m3-paginator'; +@use '../../progress-bar/m3-progress-bar'; +@use '../../progress-spinner/m3-progress-spinner'; +@use '../../radio/m3-radio'; +@use '../../select/m3-select'; +@use '../../sidenav/m3-sidenav'; +@use '../../slide-toggle/m3-slide-toggle'; +@use '../../slider/m3-slider'; +@use '../../snack-bar/m3-snack-bar'; +@use '../../sort/m3-sort'; +@use '../../stepper/m3-stepper'; +@use '../../table/m3-table'; +@use '../../tabs/m3-secondary-navigation-tab'; +@use '../../tabs/m3-tab-header'; +@use '../../tabs/m3-tab-indicator'; +@use '../../timepicker/m3-timepicker'; +@use '../../toolbar/m3-toolbar'; +@use '../../tooltip/m3-tooltip'; +@use '../../tree/m3-tree'; @use '../m2' as m2-theming; -@use './m3'; -@use './m3/definitions' as m3-token-definitions; -@use '../tokens/m2' as m2-tokens; +@use '../m3-app'; +@use '../option/m3-optgroup'; +@use '../option/m3-option'; +@use '../ripple/m3-ripple'; +@use '../selection/pseudo-checkbox/m3-full-pseudo-checkbox'; +@use '../selection/pseudo-checkbox/m3-minimal-pseudo-checkbox'; +@use '../style/sass-utils'; @use './density'; @use './format-tokens'; +@use './m2-tokens'; +@use './m3'; +@use 'sass:map'; /// Generates tokens for the given palette with the given prefix. /// @param {Map} $palette The palette to generate tokens for @@ -111,7 +164,7 @@ $_cached-token-slots: null; (mat, theme): map.get($systems, md-sys-color), (mat, typography): map.get($systems, md-sys-typescale), ), - m3.get-m3-tokens($systems, $exclude-hardcoded, $token-slots), + get-m3-tokens($systems, $exclude-hardcoded, $token-slots), ); // Strip out tokens that are systemized by our made up density system. @@ -137,8 +190,8 @@ $_cached-token-slots: null; @function _get-sys-color($type, $ref, $prefix) { $mdc-sys-color: if($type == dark, - m3-token-definitions.md-sys-color-values-dark($ref), - m3-token-definitions.md-sys-color-values-light($ref)); + m3.md-sys-color-values-dark($ref), + m3.md-sys-color-values-light($ref)); @if (sass-utils.$use-system-color-variables) { $keys: ( @@ -298,7 +351,7 @@ $_cached-token-slots: null; @return create-map($keys, $prefix); } - @return m3-token-definitions.md-sys-typescale-values($ref); + @return m3.md-sys-typescale-values($ref); } /// Generates a set of namespaced color tokens for all components. @@ -319,12 +372,12 @@ $_cached-token-slots: null; md-sys-color: $sys-color, // Because the elevation values are always combined with color values to create the box shadow, // elevation needs to be part of the color dimension. - md-sys-elevation: m3-token-definitions.md-sys-elevation-values(), + md-sys-elevation: m3.md-sys-elevation-values(), // Because the state values are sometimes combined with color values to create rgba colors, // state needs to be part of color dimension. // TODO(mmalerba): If at some point we remove the need for these combined values, we can move // state to the base dimension. - md-sys-state: m3-token-definitions.md-sys-state-values(), + md-sys-state: m3.md-sys-state-values(), ))); } @@ -360,7 +413,78 @@ $system-variables-prefix) { @function generate-base-tokens() { // TODO(mmalerba): Exclude density tokens once implemented. @return generate-tokens(( - md-sys-motion: m3-token-definitions.md-sys-motion-values(), - md-sys-shape: m3-token-definitions.md-sys-shape-values(), + md-sys-motion: m3.md-sys-motion-values(), + md-sys-shape: m3.md-sys-shape-values(), ), $include-non-systemized: true); } + +/// Gets the full set of M3 tokens for the given theme object. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @param {Map} $token-slots Possible token slots +/// @return {Map} Full set of M3 tokens +@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) { + $tokens-list: ( + m3-app.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-badge.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-card.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-chip.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-dialog.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-divider.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-elevated-card.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-expansion.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-extended-fab.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-fab-small.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-fab.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-filled-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-filled-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-form-field.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-full-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-icon.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-list.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-menu.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-minimal-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-option.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-outlined-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-outlined-card.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-outlined-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-paginator.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-progress-bar.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-progress-spinner.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-protected-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-radio.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-ripple.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-secondary-navigation-tab.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-select.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-slide-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-slider.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-sort.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-standard-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-stepper.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-tab-header.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-tab-indicator.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-table.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-text-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-tonal-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots), + m3-tree.get-tokens($systems, $exclude-hardcoded, $token-slots), + ); + + $merged-tokens: (); + @each $tokens in $tokens-list { + $merged-tokens: map.deep-merge($merged-tokens, $tokens); + } + + @return $merged-tokens; +} diff --git a/src/material/core/tokens/_m3-utils.scss b/src/material/core/tokens/_m3-utils.scss new file mode 100644 index 000000000000..9efd6c5cab76 --- /dev/null +++ b/src/material/core/tokens/_m3-utils.scss @@ -0,0 +1,85 @@ +@use 'sass:map'; +@use 'sass:list'; +@use 'sass:meta'; + +/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots. +/// @param {List} $prefix The token prefix for the given tokens. +/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix. +/// This param may also be a tuple of maps, the first one representing the default M3 token values, +// and the second containing overrides for different color variants. +// Single map example: +// (token1: green, token2: 2px) +// Tuple example: +// ( +// (token1: green, token2: 2px), +// ( +// secondary: (token1: blue), +// error: (token1: red), +// ) +// ) +/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported. +/// @param {String|null} $variant The name of the variant the token values are for. +/// @return {Map} A map of fully qualified token names to values, for only the supported tokens. +@function namespace($prefix, $values, $slots, $variant: null) { + $result: (); + @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) { + $variants: list.nth($values, 2); + $values: list.nth($values, 1); + @each $variant, $overrides in $variants { + + $result: map.merge($result, namespace($prefix, $overrides, $slots, $variant)); + } + } + $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix))); + $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names); + $prefix: if($variant == null, $prefix, list.append($prefix, $variant)); + @return map.merge($result, ($prefix: $used-m3-tokens)); +} + +/// Hardcode the given value, or null if hardcoded values are excluded. +@function hardcode($value, $exclude-hardcoded) { + @return if($exclude-hardcoded, null, $value); +} + +/// Picks a submap containing only the given keys out the given map. +/// @param {Map} $map The map to pick from. +/// @param {List} $keys The map keys to pick. +/// @return {Map} A submap containing only the given keys. +@function _pick($map, $keys) { + $result: (); + @each $key in $keys { + @if map.has-key($map, $key) { + $result: map.set($result, $key, map.get($map, $key)); + } + } + @return $result; +} + + +/// Filters keys with a null value out of the map. +/// @param {Map} $map The map to filter. +/// @return {Map} The given map with all of the null keys filtered out. +@function _filter-nulls($map) { + $result: (); + @each $key, $val in $map { + @if $val != null { + $result: map.set($result, $key, $val); + } + } + @return $result; +} + +/// Sets all of the standard typography tokens for the given token base name to the given typography +/// level. +/// @param {Map} $systems The MDC system tokens +/// @param {String} $base-name The token base name to get the typography tokens for +/// @param {String} $typography-level The typography level to base the token values on +/// @return {Map} A map containing the typography tokens for the given base token name +@function generate-typography-tokens($systems, $base-name, $typography-level) { + $result: (); + @each $prop in (font, line-height, size, tracking, weight) { + $result: map.set($result, #{$base-name}-#{$prop}, + map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop})); + } + @return $result; +} diff --git a/src/material/core/tokens/_token-definition.scss b/src/material/core/tokens/_token-definition.scss deleted file mode 100644 index 9866b71f5614..000000000000 --- a/src/material/core/tokens/_token-definition.scss +++ /dev/null @@ -1,224 +0,0 @@ -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:math'; -@use '../m2/palette' as m2-palette; -@use '../m2/theming' as m2-theming; -@use '../m2/typography' as m2-typography; - -// Indicates whether we're building internally. Used for backwards compatibility. -$private-is-internal-build: false; - -$_placeholder-color-palette: m2-theming.define-palette(m2-palette.$red-palette); - -// Placeholder color config that can be passed to token getter functions when generating token -// slots. -$placeholder-color-config: ( - primary: $_placeholder-color-palette, - accent: $_placeholder-color-palette, - warn: $_placeholder-color-palette, - is-dark: false, - foreground: m2-palette.$light-theme-foreground-palette, - background: m2-palette.$light-theme-background-palette, -); - -$_placeholder-typography-level-config: m2-typography.typography-config-level-from-mdc(body1); - -// Placeholder typography config that can be passed to token getter functions when generating token -// slots. -$placeholder-typography-config: ( - font-family: 'Roboto, sans-serif', - headline-1: $_placeholder-typography-level-config, - headline-2: $_placeholder-typography-level-config, - headline-3: $_placeholder-typography-level-config, - headline-4: $_placeholder-typography-level-config, - headline-5: $_placeholder-typography-level-config, - headline-6: $_placeholder-typography-level-config, - subtitle-1: $_placeholder-typography-level-config, - subtitle-2: $_placeholder-typography-level-config, - body-1: $_placeholder-typography-level-config, - body-2: $_placeholder-typography-level-config, - caption: $_placeholder-typography-level-config, - button: $_placeholder-typography-level-config, - overline: $_placeholder-typography-level-config, - subheading-1: $_placeholder-typography-level-config, - title: $_placeholder-typography-level-config, -); - -// Placeholder density config that can be passed to token getter functions when generating token -// slots. -$placeholder-density-config: 0; - -$_tokens: null; -$_component-prefix: null; -$_system-fallbacks: null; - -/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots. -/// @param {List} $prefix The token prefix for the given tokens. -/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix. -/// This param may also be a tuple of maps, the first one representing the default M3 token values, -// and the second containing overrides for different color variants. -// Single map example: -// (token1: green, token2: 2px) -// Tuple example: -// ( -// (token1: green, token2: 2px), -// ( -// secondary: (token1: blue), -// error: (token1: red), -// ) -// ) -/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported. -/// @param {String|null} $variant The name of the variant the token values are for. -/// @return {Map} A map of fully qualified token names to values, for only the supported tokens. -@function namespace-tokens($prefix, $values, $slots, $variant: null) { - $result: (); - @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) { - $variants: list.nth($values, 2); - $values: list.nth($values, 1); - @each $variant, $overrides in $variants { - - $result: map.merge($result, namespace-tokens($prefix, $overrides, $slots, $variant)); - } - } - $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix))); - $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names); - $prefix: if($variant == null, $prefix, list.append($prefix, $variant)); - @return map.merge($result, ($prefix: $used-m3-tokens)); -} - -/// Hardcode the given value, or null if hardcoded values are excluded. -@function hardcode($value, $exclude-hardcoded) { - @return if($exclude-hardcoded, null, $value); -} - -/// Sets all of the standard typography tokens for the given token base name to the given typography -/// level. -/// @param {Map} $systems The MDC system tokens -/// @param {String} $base-name The token base name to get the typography tokens for -/// @param {String} $typography-level The typography level to base the token values on -/// @return {Map} A map containing the typography tokens for the given base token name -@function generate-typography-tokens($systems, $base-name, $typography-level) { - $result: (); - @each $prop in (font, line-height, size, tracking, weight) { - $result: map.set($result, #{$base-name}-#{$prop}, - map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop})); - } - @return $result; -} - -/// Maps the values in a map to new values using the given mapping function -/// @param {Map} $map The maps whose values will be mapped to new values. -/// @param {Function} $fn The value mapping function. -/// @param {ArgList} $args Additional arguments to pass to the mapping function. -/// @return {Map} A new map with its values updated using the mapping function. -@function map-values($map, $fn, $args...) { - $result: (); - @each $key, $value in $map { - $result: map.set($result, $key, meta.call($fn, $value, $args...)); - } - @return $result; -} - -/// Renames the keys in a map -/// @param {Map} $map The map whose keys should be renamed -/// @param {Map} $rename-keys A map of original key to renamed key to apply to $map -/// @return {Map} The result of applying the given key renames to the given map. -@function rename-map-keys($map, $rename-keys) { - $result: $map; - @each $old-key-name, $new-key-name in $rename-keys { - @if map.has-key($map, $old-key-name) { - $result: map.set($result, $new-key-name, map.get($map, $old-key-name)); - } - } - @return $result; -} - -/// Inherited function from MDC that computes which contrast tone to use on top of a color. -/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain -/// backwards compatibility. -/// @param {Color} $value Color for which we're calculating the contrast tone. -/// @param {Boolean} $is-dark Whether the current theme is dark. -/// @return {Map} Either `dark` or `light`. -@function contrast-tone($value, $is-dark) { - @if ($value == 'dark') { - @return 'light'; - } - - @if ($value == 'light') { - @return 'dark'; - } - - // Fallback if the app is using a non-color palette (e.g. CSS variable based). - @if (meta.type-of($value) != 'color') { - @return if($is-dark, 'light', 'dark'); - } - - $minimum-contrast: 3.1; - $light-contrast: _contrast($value, #fff); - $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87)); - - @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) { - @return 'dark'; - } - - @return 'light'; -} - -@function _linear-channel-value($channel-value) { - $normalized-channel-value: math.div($channel-value, 255); - - @if ($normalized-channel-value < 0.03928) { - @return math.div($normalized-channel-value, 12.92); - } - - @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4); -} - -// Calculate the luminance for a color. -// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests -@function _luminance($color) { - $red: _linear-channel-value(color.red($color)); - $green: _linear-channel-value(color.green($color)); - $blue: _linear-channel-value(color.blue($color)); - - @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue; -} - -// Calculate the contrast ratio between two colors. -// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests -@function _contrast($back, $front) { - $back-lum: _luminance($back) + 0.05; - $fore-lum: _luminance($front) + 0.05; - - @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum)); -} - -/// Picks a submap containing only the given keys out the given map. -/// @param {Map} $map The map to pick from. -/// @param {List} $keys The map keys to pick. -/// @return {Map} A submap containing only the given keys. -@function _pick($map, $keys) { - $result: (); - @each $key in $keys { - @if map.has-key($map, $key) { - $result: map.set($result, $key, map.get($map, $key)); - } - } - @return $result; -} - - -/// Filters keys with a null value out of the map. -/// @param {Map} $map The map to filter. -/// @return {Map} The given map with all of the null keys filtered out. -@function _filter-nulls($map) { - $result: (); - @each $key, $val in $map { - @if $val != null { - $result: map.set($result, $key, $val); - } - } - @return $result; -} diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss index ebe4d0b22eaf..18bc54461f34 100644 --- a/src/material/core/tokens/_token-utils.scss +++ b/src/material/core/tokens/_token-utils.scss @@ -2,6 +2,7 @@ @use '../style/sass-utils'; @use './m3-system'; @use 'sass:list'; +@use 'sass:meta'; @use 'sass:map'; @use 'sass:string'; @@ -65,16 +66,13 @@ $_system-fallbacks: m3-system.create-system-fallbacks(); @return true; } -// Emits a slot for the given token, provided that it has a non-null value in the token map passed -// to `use-tokens`. +// Returns the token slot value. // Accepts an optional fallback parameter to include in the CSS variable. // If $fallback is `true`, then use the tokens map to get the fallback. // TODO: Remove the use case where we accept "true" and handle any failing client screenshots -@mixin create-token-slot($property, $token, $fallback: null) { +@function slot($token, $fallback: null) { $_assert: _assert-use-tokens($token); - @if map.get($_tokens, $token) != null { - #{$property}: #{_get-token-value($token, $fallback)}; - } + @return _get-token-value($token, $fallback); } // Returns the name of a token including the current prefix. Intended to be used in calculations @@ -84,16 +82,6 @@ $_system-fallbacks: m3-system.create-system-fallbacks(); @return _create-var-name($_component-prefix, $token); } -// Returns a `var()` reference to a specific token. Intended for declarations -// where the token has to be referenced as a part of a larger expression. -// Accepts an optional fallback parameter to include in the CSS variable. -// If $fallback is `true`, then use the tokens map to get the fallback. -// TODO: Remove the use case where we accept "true" and handle any failing client screenshots -@function get-token-variable($token, $fallback: null) { - $_assert: _assert-use-tokens($token); - @return _get-token-value($token, $fallback); -} - // Gets the token's fallback value. Prefers adding a system-level fallback if one exists, otherwise // use the provided fallback. @function _get-token-fallback($token, $fallback: null) { @@ -323,3 +311,37 @@ $_system-fallbacks: m3-system.create-system-fallbacks(); } @return $result; } + +/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots. +/// @param {List} $prefix The token prefix for the given tokens. +/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix. +/// This param may also be a tuple of maps, the first one representing the default M3 token values, +// and the second containing overrides for different color variants. +// Single map example: +// (token1: green, token2: 2px) +// Tuple example: +// ( +// (token1: green, token2: 2px), +// ( +// secondary: (token1: blue), +// error: (token1: red), +// ) +// ) +/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported. +/// @param {String|null} $variant The name of the variant the token values are for. +/// @return {Map} A map of fully qualified token names to values, for only the supported tokens. +@function namespace-tokens($prefix, $values, $slots, $variant: null) { + $result: (); + @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) { + $variants: list.nth($values, 2); + $values: list.nth($values, 1); + @each $variant, $overrides in $variants { + + $result: map.merge($result, namespace-tokens($prefix, $overrides, $slots, $variant)); + } + } + $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix))); + $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names); + $prefix: if($variant == null, $prefix, list.append($prefix, $variant)); + @return map.merge($result, ($prefix: $used-m3-tokens)); +} diff --git a/src/material/core/tokens/m2/BUILD.bazel b/src/material/core/tokens/m2/BUILD.bazel deleted file mode 100644 index e66c0831cc74..000000000000 --- a/src/material/core/tokens/m2/BUILD.bazel +++ /dev/null @@ -1,13 +0,0 @@ -load("//tools:defaults.bzl", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -sass_library( - name = "m2", - srcs = ["_index.scss"], - deps = [ - "//src/material/core/style:sass_utils", - "//src/material/core/theming:_inspection", - "//src/material/core/tokens/m2/mat", - ], -) diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss deleted file mode 100644 index b44a30b53f0c..000000000000 --- a/src/material/core/tokens/m2/_index.scss +++ /dev/null @@ -1,159 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../../style/sass-utils'; -@use './mat/app' as tokens-mat-app; -@use './mat/autocomplete' as tokens-mat-autocomplete; -@use './mat/badge' as tokens-mat-badge; -@use './mat/text-button' as tokens-mat-text-button; -@use './mat/protected-button' as tokens-mat-protected-button; -@use './mat/filled-button' as tokens-mat-filled-button; -@use './mat/outlined-button' as tokens-mat-outlined-button; -@use './mat/dialog' as tokens-mat-dialog; -@use './mat/bottom-sheet' as tokens-mat-bottom-sheet; -@use './mat/card' as tokens-mat-card; -@use './mat/chip' as tokens-mat-chip; -@use './mat/datepicker' as tokens-mat-datepicker; -@use './mat/divider' as tokens-mat-divider; -@use './mat/expansion' as tokens-mat-expansion; -@use './mat/fab' as tokens-mat-fab; -@use './mat/fab-small' as tokens-mat-fab-small; -@use './mat/form-field' as tokens-mat-form-field; -@use './mat/grid-list' as tokens-mat-grid-list; -@use './mat/icon' as tokens-mat-icon; -@use './mat/icon-button' as tokens-mat-icon-button; -@use './mat/list' as tokens-mat-list; -@use './mat/menu' as tokens-mat-menu; -@use './mat/option' as tokens-mat-option; -@use './mat/optgroup' as tokens-mat-optgroup; -@use './mat/paginator' as tokens-mat-paginator; -@use './mat/checkbox' as tokens-mat-checkbox; -@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox; -@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox; -@use './mat/radio' as tokens-mat-radio; -@use './mat/ripple' as tokens-mat-ripple; -@use './mat/select' as tokens-mat-select; -@use './mat/sidenav' as tokens-mat-sidenav; -@use './mat/slider' as tokens-mat-slider; -@use './mat/switch' as tokens-mat-switch; -@use './mat/snack-bar' as tokens-mat-snack-bar; -@use './mat/sort' as tokens-mat-sort; -@use './mat/standard-button-toggle' as tokens-mat-button-toggle; -@use './mat/stepper' as tokens-mat-stepper; -@use './mat/tab-header' as tokens-mat-tab-header; -@use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background; -@use './mat/table' as tokens-mat-table; -@use './mat/toolbar' as tokens-mat-toolbar; -@use './mat/tree' as tokens-mat-tree; -@use './mat/timepicker' as tokens-mat-timepicker; -@use './mat/tonal-button' as tokens-mat-tonal-button; -@use './mat/circular-progress' as tokens-mat-circular-progress; -@use './mat/elevated-card' as tokens-mat-elevated-card; -@use './mat/extended-fab' as tokens-mat-extended-fab; -@use './mat/filled-text-field' as tokens-mat-filled-text-field; -@use './mat/linear-progress' as tokens-mat-linear-progress; -@use './mat/outlined-card' as tokens-mat-outlined-card; -@use './mat/outlined-text-field' as tokens-mat-outlined-text-field; -@use './mat/plain-tooltip' as tokens-mat-plain-tooltip; -@use './mat/secondary-navigation-tab' as tokens-mat-secondary-navigation-tab; -@use './mat/tab-indicator' as tokens-mat-tab-indicator; -@use '../../theming/inspection'; - -/// Gets the tokens for the given theme, m2 tokens module, and theming system. -/// @param {Map} $theme The Angular Material theme object to generate token values from. -/// @param {String} $module The Sass module containing the token getter functions. -/// @param {String} $system The theming system to get tokens for. Valid values are: unthemable, -/// color, typography, density. -/// @return {Map} The token map by calling the token getter for the given system in the given module -/// with the given Angular Material theme. Token names are not fully-qualified. -@function _get-tokens-for-module-and-system($theme, $module, $system) { - @if $system == unthemable { - @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module)); - } - @if not inspection.theme-has($theme, $system) { - @return (); - } - @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module), $theme); -} - -/// Gets the fully qualified tokens map for the given theme and m2 tokens module. -/// @param {Map} $theme The Angular Material theme object to generate token values from. -/// @param {String} $module The Sass module containing the token getter functions. -/// @return {Map} The token map by calling the token getters in the given module with the given -/// Angular Material theme. Token names are fully-qualified. -@function _get-tokens-for-module($theme, $module) { - $tokens: sass-utils.deep-merge-all( - _get-tokens-for-module-and-system($theme, $module, unthemable), - _get-tokens-for-module-and-system($theme, $module, color), - _get-tokens-for-module-and-system($theme, $module, typography), - _get-tokens-for-module-and-system($theme, $module, density) - ); - @return map.set((), map.get(meta.module-variables($module), prefix), $tokens); -} - -/// Gets the full set of M2 tokens for the given theme object. -/// @param {Map} $theme The Angular Material theme object to generate token values from. -/// @return {Map} The token map for the given Angular Material theme. Returned format: -/// ( -/// (fully, qualified, namespace): ( -/// token: value -/// ) -/// ) -@function m2-tokens-from-theme($theme) { - @return sass-utils.deep-merge-all( - _get-tokens-for-module($theme, tokens-mat-app), - _get-tokens-for-module($theme, tokens-mat-autocomplete), - _get-tokens-for-module($theme, tokens-mat-badge), - _get-tokens-for-module($theme, tokens-mat-bottom-sheet), - _get-tokens-for-module($theme, tokens-mat-button-toggle), - _get-tokens-for-module($theme, tokens-mat-card), - _get-tokens-for-module($theme, tokens-mat-chip), - _get-tokens-for-module($theme, tokens-mat-datepicker), - _get-tokens-for-module($theme, tokens-mat-dialog), - _get-tokens-for-module($theme, tokens-mat-divider), - _get-tokens-for-module($theme, tokens-mat-expansion), - _get-tokens-for-module($theme, tokens-mat-fab), - _get-tokens-for-module($theme, tokens-mat-fab-small), - _get-tokens-for-module($theme, tokens-mat-filled-button), - _get-tokens-for-module($theme, tokens-mat-form-field), - _get-tokens-for-module($theme, tokens-mat-grid-list), - _get-tokens-for-module($theme, tokens-mat-icon-button), - _get-tokens-for-module($theme, tokens-mat-icon), - _get-tokens-for-module($theme, tokens-mat-menu), - _get-tokens-for-module($theme, tokens-mat-optgroup), - _get-tokens-for-module($theme, tokens-mat-option), - _get-tokens-for-module($theme, tokens-mat-outlined-button), - _get-tokens-for-module($theme, tokens-mat-paginator), - _get-tokens-for-module($theme, tokens-mat-checkbox), - _get-tokens-for-module($theme, tokens-mat-full-pseudo-checkbox), - _get-tokens-for-module($theme, tokens-mat-list), - _get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox), - _get-tokens-for-module($theme, tokens-mat-protected-button), - _get-tokens-for-module($theme, tokens-mat-radio), - _get-tokens-for-module($theme, tokens-mat-ripple), - _get-tokens-for-module($theme, tokens-mat-select), - _get-tokens-for-module($theme, tokens-mat-sidenav), - _get-tokens-for-module($theme, tokens-mat-slider), - _get-tokens-for-module($theme, tokens-mat-switch), - _get-tokens-for-module($theme, tokens-mat-snack-bar), - _get-tokens-for-module($theme, tokens-mat-sort), - _get-tokens-for-module($theme, tokens-mat-stepper), - _get-tokens-for-module($theme, tokens-mat-tab-header-with-background), - _get-tokens-for-module($theme, tokens-mat-tab-header), - _get-tokens-for-module($theme, tokens-mat-table), - _get-tokens-for-module($theme, tokens-mat-text-button), - _get-tokens-for-module($theme, tokens-mat-toolbar), - _get-tokens-for-module($theme, tokens-mat-tree), - _get-tokens-for-module($theme, tokens-mat-timepicker), - _get-tokens-for-module($theme, tokens-mat-tonal-button), - _get-tokens-for-module($theme, tokens-mat-circular-progress), - _get-tokens-for-module($theme, tokens-mat-elevated-card), - _get-tokens-for-module($theme, tokens-mat-extended-fab), - _get-tokens-for-module($theme, tokens-mat-filled-text-field), - _get-tokens-for-module($theme, tokens-mat-linear-progress), - _get-tokens-for-module($theme, tokens-mat-outlined-card), - _get-tokens-for-module($theme, tokens-mat-outlined-text-field), - _get-tokens-for-module($theme, tokens-mat-plain-tooltip), - _get-tokens-for-module($theme, tokens-mat-tab-indicator), - _get-tokens-for-module($theme, tokens-mat-secondary-navigation-tab), - ); -} diff --git a/src/material/core/tokens/m2/mat/BUILD.bazel b/src/material/core/tokens/m2/mat/BUILD.bazel deleted file mode 100644 index b576a60527e2..000000000000 --- a/src/material/core/tokens/m2/mat/BUILD.bazel +++ /dev/null @@ -1,73 +0,0 @@ -load("//tools:defaults.bzl", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -sass_library( - name = "mat", - srcs = [ - "_app.scss", - "_autocomplete.scss", - "_badge.scss", - "_bottom-sheet.scss", - "_card.scss", - "_checkbox.scss", - "_chip.scss", - "_circular-progress.scss", - "_datepicker.scss", - "_dialog.scss", - "_divider.scss", - "_elevated-card.scss", - "_expansion.scss", - "_extended-fab.scss", - "_fab.scss", - "_fab-small.scss", - "_filled-button.scss", - "_filled-text-field.scss", - "_form-field.scss", - "_full-pseudo-checkbox.scss", - "_grid-list.scss", - "_icon.scss", - "_icon-button.scss", - "_legacy-button-toggle.scss", - "_linear-progress.scss", - "_list.scss", - "_menu.scss", - "_minimal-pseudo-checkbox.scss", - "_optgroup.scss", - "_option.scss", - "_outlined-button.scss", - "_outlined-card.scss", - "_outlined-text-field.scss", - "_paginator.scss", - "_plain-tooltip.scss", - "_protected-button.scss", - "_radio.scss", - "_ripple.scss", - "_secondary-navigation-tab.scss", - "_select.scss", - "_sidenav.scss", - "_slider.scss", - "_snack-bar.scss", - "_sort.scss", - "_standard-button-toggle.scss", - "_stepper.scss", - "_switch.scss", - "_tab-header.scss", - "_tab-header-with-background.scss", - "_tab-indicator.scss", - "_table.scss", - "_text-button.scss", - "_timepicker.scss", - "_tonal-button.scss", - "_toolbar.scss", - "_tree.scss", - ], - deps = [ - "//src/material/core/m2:m2_sass", - "//src/material/core/style:elevation", - "//src/material/core/style:sass_utils", - "//src/material/core/theming", - "//src/material/core/theming:_inspection", - "//src/material/core/tokens:token_definition", - ], -) diff --git a/src/material/core/tokens/m3/BUILD.bazel b/src/material/core/tokens/m3/BUILD.bazel index 79a2c4d44b3f..d9013d84d46c 100644 --- a/src/material/core/tokens/m3/BUILD.bazel +++ b/src/material/core/tokens/m3/BUILD.bazel @@ -4,8 +4,15 @@ package(default_visibility = ["//visibility:public"]) sass_library( name = "m3", - srcs = ["_index.scss"], - deps = [ - "//src/material/core/tokens/m3/mat", + srcs = [ + "_index.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", ], ) diff --git a/src/material/core/tokens/m3/definitions/README.md b/src/material/core/tokens/m3/README.md similarity index 100% rename from src/material/core/tokens/m3/definitions/README.md rename to src/material/core/tokens/m3/README.md diff --git a/src/material/core/tokens/m3/_index.scss b/src/material/core/tokens/m3/_index.scss index f6e664f48dc7..1a4ff56056f6 100644 --- a/src/material/core/tokens/m3/_index.scss +++ b/src/material/core/tokens/m3/_index.scss @@ -1,126 +1,8 @@ -@use 'sass:map'; -@use './mat/app'; -@use './mat/autocomplete'; -@use './mat/badge'; -@use './mat/bottom-sheet'; -@use './mat/card'; -@use './mat/checkbox'; -@use './mat/chip'; -@use './mat/circular-progress'; -@use './mat/datepicker'; -@use './mat/dialog'; -@use './mat/divider'; -@use './mat/elevated-card'; -@use './mat/expansion'; -@use './mat/extended-fab'; -@use './mat/fab'; -@use './mat/fab-small'; -@use './mat/filled-button'; -@use './mat/filled-text-field'; -@use './mat/form-field'; -@use './mat/full-pseudo-checkbox'; -@use './mat/grid-list'; -@use './mat/icon'; -@use './mat/icon-button'; -@use './mat/linear-progress'; -@use './mat/list'; -@use './mat/menu'; -@use './mat/minimal-pseudo-checkbox'; -@use './mat/optgroup'; -@use './mat/option'; -@use './mat/outlined-button'; -@use './mat/outlined-card'; -@use './mat/outlined-text-field'; -@use './mat/paginator'; -@use './mat/plain-tooltip'; -@use './mat/protected-button'; -@use './mat/radio'; -@use './mat/ripple'; -@use './mat/secondary-navigation-tab'; -@use './mat/select'; -@use './mat/sidenav'; -@use './mat/slider'; -@use './mat/snack-bar'; -@use './mat/sort'; -@use './mat/standard-button-toggle'; -@use './mat/stepper'; -@use './mat/switch'; -@use './mat/tab-header'; -@use './mat/tab-indicator'; -@use './mat/table'; -@use './mat/text-button'; -@use './mat/timepicker'; -@use './mat/tonal-button'; -@use './mat/toolbar'; -@use './mat/tree'; - -/// Gets the full set of M3 tokens for the given theme object. -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @param {Map} $token-slots Possible token slots -/// @return {Map} Full set of M3 tokens -@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens-list: ( - app.get-tokens($systems, $exclude-hardcoded, $token-slots), - autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots), - badge.get-tokens($systems, $exclude-hardcoded, $token-slots), - bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots), - card.get-tokens($systems, $exclude-hardcoded, $token-slots), - checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), - chip.get-tokens($systems, $exclude-hardcoded, $token-slots), - circular-progress.get-tokens($systems, $exclude-hardcoded, $token-slots), - datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots), - dialog.get-tokens($systems, $exclude-hardcoded, $token-slots), - divider.get-tokens($systems, $exclude-hardcoded, $token-slots), - elevated-card.get-tokens($systems, $exclude-hardcoded, $token-slots), - expansion.get-tokens($systems, $exclude-hardcoded, $token-slots), - extended-fab.get-tokens($systems, $exclude-hardcoded, $token-slots), - fab.get-tokens($systems, $exclude-hardcoded, $token-slots), - fab-small.get-tokens($systems, $exclude-hardcoded, $token-slots), - filled-button.get-tokens($systems, $exclude-hardcoded, $token-slots), - filled-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots), - form-field.get-tokens($systems, $exclude-hardcoded, $token-slots), - full-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), - grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots), - icon.get-tokens($systems, $exclude-hardcoded, $token-slots), - icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots), - linear-progress.get-tokens($systems, $exclude-hardcoded, $token-slots), - list.get-tokens($systems, $exclude-hardcoded, $token-slots), - menu.get-tokens($systems, $exclude-hardcoded, $token-slots), - minimal-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), - optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots), - option.get-tokens($systems, $exclude-hardcoded, $token-slots), - outlined-button.get-tokens($systems, $exclude-hardcoded, $token-slots), - outlined-card.get-tokens($systems, $exclude-hardcoded, $token-slots), - outlined-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots), - paginator.get-tokens($systems, $exclude-hardcoded, $token-slots), - plain-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots), - protected-button.get-tokens($systems, $exclude-hardcoded, $token-slots), - radio.get-tokens($systems, $exclude-hardcoded, $token-slots), - ripple.get-tokens($systems, $exclude-hardcoded, $token-slots), - secondary-navigation-tab.get-tokens($systems, $exclude-hardcoded, $token-slots), - select.get-tokens($systems, $exclude-hardcoded, $token-slots), - sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots), - slider.get-tokens($systems, $exclude-hardcoded, $token-slots), - snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots), - sort.get-tokens($systems, $exclude-hardcoded, $token-slots), - standard-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots), - stepper.get-tokens($systems, $exclude-hardcoded, $token-slots), - switch.get-tokens($systems, $exclude-hardcoded, $token-slots), - tab-header.get-tokens($systems, $exclude-hardcoded, $token-slots), - tab-indicator.get-tokens($systems, $exclude-hardcoded, $token-slots), - table.get-tokens($systems, $exclude-hardcoded, $token-slots), - text-button.get-tokens($systems, $exclude-hardcoded, $token-slots), - timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots), - tonal-button.get-tokens($systems, $exclude-hardcoded, $token-slots), - toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots), - tree.get-tokens($systems, $exclude-hardcoded, $token-slots), - ); - - $merged-tokens: (); - @each $tokens in $tokens-list { - $merged-tokens: map.deep-merge($merged-tokens, $tokens); - } - - @return $merged-tokens; -} +@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-*; diff --git a/src/material/core/tokens/m3/definitions/_md-ref-palette.scss b/src/material/core/tokens/m3/_md-ref-palette.scss similarity index 100% rename from src/material/core/tokens/m3/definitions/_md-ref-palette.scss rename to src/material/core/tokens/m3/_md-ref-palette.scss diff --git a/src/material/core/tokens/m3/definitions/_md-ref-typeface.scss b/src/material/core/tokens/m3/_md-ref-typeface.scss similarity index 100% rename from src/material/core/tokens/m3/definitions/_md-ref-typeface.scss rename to src/material/core/tokens/m3/_md-ref-typeface.scss diff --git a/src/material/core/tokens/m3/definitions/_md-sys-color.scss b/src/material/core/tokens/m3/_md-sys-color.scss similarity index 100% rename from src/material/core/tokens/m3/definitions/_md-sys-color.scss rename to src/material/core/tokens/m3/_md-sys-color.scss diff --git a/src/material/core/tokens/m3/definitions/_md-sys-elevation.scss b/src/material/core/tokens/m3/_md-sys-elevation.scss similarity index 100% rename from src/material/core/tokens/m3/definitions/_md-sys-elevation.scss rename to src/material/core/tokens/m3/_md-sys-elevation.scss diff --git a/src/material/core/tokens/m3/definitions/_md-sys-motion.scss b/src/material/core/tokens/m3/_md-sys-motion.scss similarity index 100% rename from src/material/core/tokens/m3/definitions/_md-sys-motion.scss rename to src/material/core/tokens/m3/_md-sys-motion.scss diff --git a/src/material/core/tokens/m3/definitions/_md-sys-shape.scss b/src/material/core/tokens/m3/_md-sys-shape.scss similarity index 100% rename from src/material/core/tokens/m3/definitions/_md-sys-shape.scss rename to src/material/core/tokens/m3/_md-sys-shape.scss diff --git a/src/material/core/tokens/m3/definitions/_md-sys-state.scss b/src/material/core/tokens/m3/_md-sys-state.scss similarity index 100% rename from src/material/core/tokens/m3/definitions/_md-sys-state.scss rename to src/material/core/tokens/m3/_md-sys-state.scss diff --git a/src/material/core/tokens/m3/definitions/_md-sys-typescale.scss b/src/material/core/tokens/m3/_md-sys-typescale.scss similarity index 100% rename from src/material/core/tokens/m3/definitions/_md-sys-typescale.scss rename to src/material/core/tokens/m3/_md-sys-typescale.scss diff --git a/src/material/core/tokens/m3/definitions/BUILD.bazel b/src/material/core/tokens/m3/definitions/BUILD.bazel deleted file mode 100644 index 227e3f497f7e..000000000000 --- a/src/material/core/tokens/m3/definitions/BUILD.bazel +++ /dev/null @@ -1,18 +0,0 @@ -load("//tools:defaults.bzl", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -sass_library( - name = "definitions", - srcs = [ - "_index.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", - ], -) diff --git a/src/material/core/tokens/m3/definitions/_index.scss b/src/material/core/tokens/m3/definitions/_index.scss deleted file mode 100644 index 1a4ff56056f6..000000000000 --- a/src/material/core/tokens/m3/definitions/_index.scss +++ /dev/null @@ -1,8 +0,0 @@ -@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-*; diff --git a/src/material/core/tokens/m3/mat/BUILD.bazel b/src/material/core/tokens/m3/mat/BUILD.bazel deleted file mode 100644 index b2db9aaba5b0..000000000000 --- a/src/material/core/tokens/m3/mat/BUILD.bazel +++ /dev/null @@ -1,68 +0,0 @@ -load("//tools:defaults.bzl", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -sass_library( - name = "mat", - srcs = [ - "_app.scss", - "_autocomplete.scss", - "_badge.scss", - "_bottom-sheet.scss", - "_card.scss", - "_checkbox.scss", - "_chip.scss", - "_circular-progress.scss", - "_datepicker.scss", - "_dialog.scss", - "_divider.scss", - "_elevated-card.scss", - "_expansion.scss", - "_extended-fab.scss", - "_fab.scss", - "_fab-small.scss", - "_filled-button.scss", - "_filled-text-field.scss", - "_form-field.scss", - "_full-pseudo-checkbox.scss", - "_grid-list.scss", - "_icon.scss", - "_icon-button.scss", - "_linear-progress.scss", - "_list.scss", - "_menu.scss", - "_minimal-pseudo-checkbox.scss", - "_optgroup.scss", - "_option.scss", - "_outlined-button.scss", - "_outlined-card.scss", - "_outlined-text-field.scss", - "_paginator.scss", - "_plain-tooltip.scss", - "_protected-button.scss", - "_radio.scss", - "_ripple.scss", - "_secondary-navigation-tab.scss", - "_select.scss", - "_sidenav.scss", - "_slider.scss", - "_snack-bar.scss", - "_sort.scss", - "_standard-button-toggle.scss", - "_stepper.scss", - "_switch.scss", - "_tab-header.scss", - "_tab-indicator.scss", - "_table.scss", - "_text-button.scss", - "_timepicker.scss", - "_tonal-button.scss", - "_toolbar.scss", - "_tree.scss", - ], - deps = [ - "//src/material/core/style:elevation", - "//src/material/core/style:sass_utils", - "//src/material/core/tokens:token_definition", - ], -) diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel index 3cefcd6c7e80..37995427ec59 100644 --- a/src/material/datepicker/BUILD.bazel +++ b/src/material/datepicker/BUILD.bazel @@ -10,19 +10,43 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-datepicker.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-datepicker.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_datepicker-theme.scss", ], deps = [ + ":m2", "//src/material/button:icon_button_theme", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -40,8 +64,8 @@ sass_binary( name = "datepicker_content_css", src = "datepicker-content.scss", deps = [ + ":m2", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -49,10 +73,10 @@ sass_binary( name = "calendar_css", src = "calendar.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/focus-indicators", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -60,10 +84,10 @@ sass_binary( name = "calendar_body_css", src = "calendar-body.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:button_common", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -71,9 +95,9 @@ sass_binary( name = "datepicker_toggle_css", src = "datepicker-toggle.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -86,11 +110,11 @@ sass_binary( name = "date_range_input_css", src = "date-range-input.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:variables", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index b5d4ff6ac4a1..eba19985d1c8 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -1,6 +1,6 @@ @use 'sass:color'; @use 'sass:map'; -@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker; +@use './m2-datepicker'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/theming/validation'; @@ -19,17 +19,15 @@ $calendar-weekday-table-font-size: 11px !default; @mixin _calendar-color($theme, $palette-name) { $palette-color: inspection.get-theme-color($theme, $palette-name); - $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color); - $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color); - $calendar-tokens: tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens( + $range-color: m2-datepicker.private-get-range-background-color($palette-color); + $range-tokens: m2-datepicker.get-range-color-tokens($range-color); + $calendar-tokens: m2-datepicker.private-get-calendar-color-palette-color-tokens( $theme, $palette-name ); @include token-utils.create-token-values-mixed( - tokens-mat-datepicker.$prefix, - map.merge($calendar-tokens, $range-tokens) - ); + m2-datepicker.$prefix, map.merge($calendar-tokens, $range-tokens)); } /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -41,9 +39,7 @@ $calendar-weekday-table-font-size: 11px !default; } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-datepicker.$prefix, - tokens-mat-datepicker.get-unthemable-tokens() - ); + m2-datepicker.$prefix, m2-datepicker.get-unthemable-tokens()); } } } @@ -59,9 +55,7 @@ $calendar-weekday-table-font-size: 11px !default; } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-datepicker.$prefix, - tokens-mat-datepicker.get-color-tokens($theme) - ); + m2-datepicker.$prefix, m2-datepicker.get-color-tokens($theme)); } .mat-datepicker-content { @@ -76,20 +70,13 @@ $calendar-weekday-table-font-size: 11px !default; .mat-datepicker-toggle-active { &.mat-accent { - $accent-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens( - $theme, - accent - ); - @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, - $accent-tokens); + $accent-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent); + @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $accent-tokens); } &.mat-warn { - $warn-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens( - $theme, - warn - ); - @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $warn-tokens); + $warn-tokens: m2-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn); + @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $warn-tokens); } } } @@ -103,8 +90,8 @@ $calendar-weekday-table-font-size: 11px !default; } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-datepicker.$prefix, - tokens-mat-datepicker.get-typography-tokens($theme) + m2-datepicker.$prefix, + m2-datepicker.get-typography-tokens($theme) ); } } @@ -112,12 +99,12 @@ $calendar-weekday-table-font-size: 11px !default; @mixin date-range-colors( $range-color, - $comparison-color: tokens-mat-datepicker.$private-default-comparison-color, - $overlap-color: tokens-mat-datepicker.$private-default-overlap-color, + $comparison-color: m2-datepicker.$private-default-comparison-color, + $overlap-color: m2-datepicker.$private-default-overlap-color, $overlap-selected-color: - tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color) + m2-datepicker.private-get-default-overlap-selected-color($overlap-color) ) { - $tokens: tokens-mat-datepicker.get-range-color-tokens( + $tokens: m2-datepicker.get-range-color-tokens( $range-color: $range-color, $comparison-color: $comparison-color, $overlap-color: $overlap-color, @@ -125,7 +112,7 @@ $calendar-weekday-table-font-size: 11px !default; ); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $tokens); + @include token-utils.create-token-values-mixed(m2-datepicker.$prefix, $tokens); } } @@ -150,8 +137,8 @@ $calendar-weekday-table-font-size: 11px !default; @function _define-overrides() { @return ( ( - namespace: tokens-mat-datepicker.$prefix, - tokens: tokens-mat-datepicker.get-token-slots(), + namespace: m2-datepicker.$prefix, + tokens: m2-datepicker.get-token-slots(), ), ); } @@ -191,9 +178,6 @@ $calendar-weekday-table-font-size: 11px !default; 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); $mat-datepicker-tokens: token-utils.get-tokens-for( - $tokens, - tokens-mat-datepicker.$prefix, - $options... - ); - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens); + $tokens, m2-datepicker.$prefix, $options...); + @include token-utils.create-token-values(m2-datepicker.$prefix, $mat-datepicker-tokens); } diff --git a/src/material/core/tokens/m2/mat/_datepicker.scss b/src/material/datepicker/_m2-datepicker.scss similarity index 95% rename from src/material/core/tokens/m2/mat/_datepicker.scss rename to src/material/datepicker/_m2-datepicker.scss index c586fb125fbe..178bc3fdd26e 100644 --- a/src/material/core/tokens/m2/mat/_datepicker.scss +++ b/src/material/datepicker/_m2-datepicker.scss @@ -1,10 +1,10 @@ @use 'sass:color'; @use 'sass:meta'; @use 'sass:math'; -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, datepicker); @@ -175,8 +175,8 @@ $private-default-overlap-color: #a8dab5; @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_datepicker.scss b/src/material/datepicker/_m3-datepicker.scss similarity index 92% rename from src/material/core/tokens/m3/mat/_datepicker.scss rename to src/material/datepicker/_m3-datepicker.scss index 22b565808521..5b75e92704c1 100644 --- a/src/material/core/tokens/m3/mat/_datepicker.scss +++ b/src/material/datepicker/_m3-datepicker.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, datepicker); @@ -42,7 +42,7 @@ $prefix: (mat, datepicker); calendar-period-button-text-color: map.get($systems, md-sys-color, on-surface-variant), calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant), calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant), - calendar-header-divider-color: token-definition.hardcode(transparent, $exclude-hardcoded), + calendar-header-divider-color: m3-utils.hardcode(transparent, $exclude-hardcoded), calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant), calendar-date-today-outline-color: map.get($systems, md-sys-color, primary), calendar-date-today-disabled-state-outline-color: sass-utils.safe-color-change( @@ -50,7 +50,7 @@ $prefix: (mat, datepicker); $alpha: 0.38 ), calendar-date-text-color: map.get($systems, md-sys-color, on-surface), - calendar-date-outline-color: token-definition.hardcode(transparent, $exclude-hardcoded), + calendar-date-outline-color: m3-utils.hardcode(transparent, $exclude-hardcoded), calendar-date-disabled-state-text-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38 @@ -68,9 +68,9 @@ $prefix: (mat, datepicker); calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high), calendar-container-text-color: map.get($systems, md-sys-color, on-surface), calendar-container-elevation-shadow: - token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded), + m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded), calendar-container-touch-elevation-shadow: - token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded), + m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded), calendar-container-shape: map.get($systems, md-sys-shape, corner-large), calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large), calendar-text-font: map.get($systems, md-sys-typescale, body-medium-font), @@ -121,5 +121,5 @@ $prefix: (mat, datepicker); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss index 46d5ad63a5af..d27c6edcd58e 100644 --- a/src/material/datepicker/calendar-body.scss +++ b/src/material/datepicker/calendar-body.scss @@ -2,8 +2,8 @@ @use '@angular/cdk'; @use '../core/style/button-common'; -@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker; @use '../core/tokens/token-utils'; +@use './m2-datepicker'; $calendar-body-label-padding-start: 5% !default; // We don't want the label to jump around when we switch between month and year views, so we use @@ -23,13 +23,14 @@ $calendar-body-cell-content-size: 100% - $calendar-body-cell-content-margin * 2 $calendar-range-end-body-cell-size: $calendar-body-cell-content-size + $calendar-body-cell-content-margin !default; -$_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()); +$token-prefix: m2-datepicker.$prefix; +$token-slots: m2-datepicker.get-token-slots(); // Styles for a highlighted calendar cell (e.g. hovered or focused). @mixin _highlighted-cell($token-name) { & > .mat-calendar-body-cell-content { @include _unselected-cell { - @include token-utils.create-token-slot(background-color, $token-name); + background-color: token-utils.slot($token-name); } } } @@ -47,9 +48,8 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( .mat-calendar-body-today { @include _unselected-cell { - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(border-color, - calendar-date-today-outline-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-color: token-utils.slot(calendar-date-today-outline-color); } } } @@ -61,10 +61,10 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( padding-left: $calendar-body-label-side-padding; padding-right: $calendar-body-label-side-padding; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(font-size, calendar-body-label-text-size); - @include token-utils.create-token-slot(font-weight, calendar-body-label-text-weight); - @include token-utils.create-token-slot(color, calendar-body-label-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-size: token-utils.slot(calendar-body-label-text-size); + font-weight: token-utils.slot(calendar-body-label-text-weight); + color: token-utils.slot(calendar-body-label-text-color); } } @@ -92,9 +92,9 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( margin: 0; // Needs to be repeated here in order to override the user agent styles. - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(font-family, calendar-text-font); - @include token-utils.create-token-slot(font-size, calendar-text-size); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-family: token-utils.slot(calendar-text-font); + font-size: token-utils.slot(calendar-text-size); } @include button-common.reset(); @@ -188,8 +188,8 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( } .mat-calendar-body-in-preview { - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(color, calendar-date-preview-state-outline-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(calendar-date-preview-state-outline-color); } .mat-calendar-body-cell-preview { @@ -219,17 +219,16 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( .mat-calendar-body-disabled { cursor: default; - @include token-utils.use-tokens($_tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { & > .mat-calendar-body-cell-content { @include _unselected-cell { - @include token-utils.create-token-slot(color, calendar-date-disabled-state-text-color); + color: token-utils.slot(calendar-date-disabled-state-text-color); } } & > .mat-calendar-body-today { @include _unselected-cell { - @include token-utils.create-token-slot(border-color, - calendar-date-today-disabled-state-outline-color); + border-color: token-utils.slot(calendar-date-today-disabled-state-outline-color); } } } @@ -264,10 +263,9 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( // Choosing a value clearly larger than the height ensures we get the correct capsule shape. border-radius: $calendar-body-cell-radius; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(color, calendar-date-text-color); - @include token-utils.create-token-slot(border-color, - calendar-date-outline-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(calendar-date-text-color); + border-color: token-utils.slot(calendar-date-outline-color); } // Increase specificity because focus indicator styles are part of the `mat-core` mixin and can @@ -282,7 +280,7 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( } .mat-calendar-body-active { - @include token-utils.use-tokens($_tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .cdk-keyboard-focused &, .cdk-program-focused & { @include _highlighted-cell(calendar-date-focus-state-background-color); } @@ -291,51 +289,46 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( @media (hover: hover) { .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover { - @include token-utils.use-tokens($_tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { @include _highlighted-cell(calendar-date-hover-state-background-color); } } } .mat-calendar-body-selected { - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(background-color, - calendar-date-selected-state-background-color); - @include token-utils.create-token-slot(color, calendar-date-selected-state-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(calendar-date-selected-state-background-color); + color: token-utils.slot(calendar-date-selected-state-text-color); .mat-calendar-body-disabled > & { - @include token-utils.create-token-slot(background-color, - calendar-date-selected-disabled-state-background-color); + background-color: token-utils.slot(calendar-date-selected-disabled-state-background-color); } &.mat-calendar-body-today { - $shadow: token-utils.get-token-variable(calendar-date-today-selected-state-outline-color); + $shadow: token-utils.slot(calendar-date-today-selected-state-outline-color); box-shadow: inset 0 0 0 1px #{$shadow}; } } } -@include token-utils.use-tokens($_tokens...) { +@include token-utils.use-tokens($token-prefix, $token-slots) { $range-color: - token-utils.get-token-variable(calendar-date-in-range-state-background-color); + token-utils.slot(calendar-date-in-range-state-background-color); $comparison-color: - token-utils.get-token-variable(calendar-date-in-comparison-range-state-background-color); + token-utils.slot(calendar-date-in-comparison-range-state-background-color); .mat-calendar-body-in-range::before { - @include token-utils.create-token-slot(background, - calendar-date-in-range-state-background-color); + background: token-utils.slot(calendar-date-in-range-state-background-color); } .mat-calendar-body-comparison-identical, .mat-calendar-body-in-comparison-range::before { - @include token-utils.create-token-slot(background, - calendar-date-in-comparison-range-state-background-color); + background: token-utils.slot(calendar-date-in-comparison-range-state-background-color); } .mat-calendar-body-comparison-identical, .mat-calendar-body-in-comparison-range::before { - @include token-utils.create-token-slot(background, - calendar-date-in-comparison-range-state-background-color); + background: token-utils.slot(calendar-date-in-comparison-range-state-background-color); } .mat-calendar-body-comparison-bridge-start::before, @@ -350,14 +343,12 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots( .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical, .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after { - @include token-utils.create-token-slot(background, - calendar-date-in-overlap-range-state-background-color); + background: token-utils.slot(calendar-date-in-overlap-range-state-background-color); } .mat-calendar-body-comparison-identical.mat-calendar-body-selected, .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected { - @include token-utils.create-token-slot(background, - calendar-date-in-overlap-range-selected-state-background-color); + background: token-utils.slot(calendar-date-in-overlap-range-selected-state-background-color); } } diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss index bf41b9a2b223..04b8fa33374f 100644 --- a/src/material/datepicker/calendar.scss +++ b/src/material/datepicker/calendar.scss @@ -1,8 +1,8 @@ @use '@angular/cdk'; @use '../core/focus-indicators/private'; -@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker; @use '../core/tokens/token-utils'; +@use './m2-datepicker'; $calendar-padding: 8px !default; $calendar-header-divider-width: 1px !default; @@ -15,7 +15,8 @@ $calendar-controls-side-margin: calc(33% / 7 - 16px); $calendar-arrow-size: 5px !default; $calendar-arrow-disabled-opacity: 0.5 !default; -$_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots(); +$token-prefix: m2-datepicker.$prefix; +$token-slots: m2-datepicker.get-token-slots(); .mat-calendar { display: block; @@ -23,9 +24,9 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots() // Prevents layout issues if the line height bleeds in from the body (see #29756). line-height: normal; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(font-family, calendar-text-font); - @include token-utils.create-token-slot(font-size, calendar-text-size); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-family: token-utils.slot(calendar-text-font); + font-size: token-utils.slot(calendar-text-size); } } @@ -52,11 +53,10 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots() min-width: 0; margin: 0 8px; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(font-size, calendar-period-button-text-size); - @include token-utils.create-token-slot(font-weight, calendar-period-button-text-weight); - @include token-utils.create-token-slot(--mat-text-button-label-text-color, - calendar-period-button-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-size: token-utils.slot(calendar-period-button-text-size); + font-weight: token-utils.slot(calendar-period-button-text-weight); + --mat-text-button-label-text-color: #{token-utils.slot(calendar-period-button-text-color)}; } } @@ -67,8 +67,8 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots() margin: 0 0 0 $calendar-arrow-size; vertical-align: middle; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(fill, calendar-period-button-icon-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + fill: token-utils.slot(calendar-period-button-icon-color); } &.mat-calendar-invert { @@ -87,10 +87,10 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots() .mat-calendar-previous-button, .mat-calendar-next-button { - @include token-utils.use-tokens($_tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { // Needs need a bit more specificity to avoid being overwritten by the .mat-icon-button. .mat-datepicker-content &:not(.mat-mdc-button-disabled) { - @include token-utils.create-token-slot(color, calendar-navigation-button-icon-color); + color: token-utils.slot(calendar-navigation-button-icon-color); } } @@ -109,10 +109,10 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots() text-align: center; padding: 0 0 $calendar-padding 0; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(color, calendar-header-text-color); - @include token-utils.create-token-slot(font-size, calendar-header-text-size); - @include token-utils.create-token-slot(font-weight, calendar-header-text-weight); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(calendar-header-text-color); + font-size: token-utils.slot(calendar-header-text-size); + font-weight: token-utils.slot(calendar-header-text-weight); } } @@ -130,8 +130,8 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots() right: -$calendar-padding; height: $calendar-header-divider-width; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(background, calendar-header-divider-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background: token-utils.slot(calendar-header-divider-color); } } } diff --git a/src/material/datepicker/date-range-input.scss b/src/material/datepicker/date-range-input.scss index 49f652f48920..cb58af0cfa70 100644 --- a/src/material/datepicker/date-range-input.scss +++ b/src/material/datepicker/date-range-input.scss @@ -3,12 +3,11 @@ @use '../core/style/variables'; @use '../core/style/vendor-prefixes'; -@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker; @use '../core/tokens/token-utils'; +@use './m2-datepicker'; $date-range-input-separator-spacing: 4px; $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spacing}); -$_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots(); @mixin _placeholder-transition($property) { transition: #{$property} variables.$swift-ease-out-duration @@ -33,11 +32,11 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots() @include _placeholder-transition(opacity); margin: 0 $date-range-input-separator-spacing; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(color, range-input-separator-color); + @include token-utils.use-tokens(m2-datepicker.$prefix, m2-datepicker.get-token-slots()) { + color: token-utils.slot(range-input-separator-color); .mat-form-field-disabled & { - @include token-utils.create-token-slot(color, range-input-disabled-state-separator-color); + color: token-utils.slot(range-input-disabled-state-separator-color); } } @@ -101,10 +100,10 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots() @include _placeholder-transition(color); } - @include token-utils.use-tokens($_tokens...) { + @include token-utils.use-tokens(m2-datepicker.$prefix, m2-datepicker.get-token-slots()) { &[disabled] { - @include token-utils.create-token-slot(color, range-input-disabled-state-text-color); + color: token-utils.slot(range-input-disabled-state-text-color); } } diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss index 57ecd20348b7..ce68ddc2f2b5 100644 --- a/src/material/datepicker/datepicker-content.scss +++ b/src/material/datepicker/datepicker-content.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker; +@use './m2-datepicker'; @use '../core/tokens/token-utils'; $calendar-padding: 8px; @@ -63,11 +63,11 @@ $touch-max-height: 788px; border-radius: 4px; @include token-utils.use-tokens( - tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()) { - @include token-utils.create-token-slot(background-color, calendar-container-background-color); - @include token-utils.create-token-slot(color, calendar-container-text-color); - @include token-utils.create-token-slot(box-shadow, calendar-container-elevation-shadow); - @include token-utils.create-token-slot(border-radius, calendar-container-shape); + m2-datepicker.$prefix, m2-datepicker.get-token-slots()) { + background-color: token-utils.slot(calendar-container-background-color); + color: token-utils.slot(calendar-container-text-color); + box-shadow: token-utils.slot(calendar-container-elevation-shadow); + border-radius: token-utils.slot(calendar-container-shape); } &.mat-datepicker-content-animations-enabled { @@ -115,9 +115,9 @@ $touch-max-height: 788px; max-height: 80vh; @include token-utils.use-tokens( - tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()) { - @include token-utils.create-token-slot(box-shadow, calendar-container-touch-elevation-shadow); - @include token-utils.create-token-slot(border-radius, calendar-container-touch-shape); + m2-datepicker.$prefix, m2-datepicker.get-token-slots()) { + box-shadow: token-utils.slot(calendar-container-touch-elevation-shadow); + border-radius: token-utils.slot(calendar-container-touch-shape); } // Allows for the screen reader close button to be seen in touch UI mode. diff --git a/src/material/datepicker/datepicker-toggle.scss b/src/material/datepicker/datepicker-toggle.scss index 7263655e329f..68de3278d185 100644 --- a/src/material/datepicker/datepicker-toggle.scss +++ b/src/material/datepicker/datepicker-toggle.scss @@ -1,22 +1,20 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker; +@use './m2-datepicker'; @use '../core/tokens/token-utils'; -$_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()); - // We support the case where the form field is disabled, but the datepicker is not. // MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle. .mat-datepicker-toggle { pointer-events: auto; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(color, toggle-icon-color); + @include token-utils.use-tokens(m2-datepicker.$prefix, m2-datepicker.get-token-slots()) { + color: token-utils.slot(toggle-icon-color); } } .mat-datepicker-toggle-active { - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(color, toggle-active-state-icon-color); + @include token-utils.use-tokens(m2-datepicker.$prefix, m2-datepicker.get-token-slots()) { + color: token-utils.slot(toggle-active-state-icon-color); } } diff --git a/src/material/dialog/BUILD.bazel b/src/material/dialog/BUILD.bazel index abef3e70f4a2..3aea5683ba6a 100644 --- a/src/material/dialog/BUILD.bazel +++ b/src/material/dialog/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-dialog.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-dialog.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_dialog-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -37,10 +61,10 @@ sass_binary( name = "css", src = "dialog.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:variables", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index 784919b4e119..76914ee51706 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @use '../core/style/sass-utils'; -@use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog; +@use './m2-dialog'; @use '../core/tokens/token-utils'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @@ -14,9 +14,7 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-dialog.$prefix, - tokens-mat-dialog.get-unthemable-tokens() - ); + m2-dialog.$prefix, m2-dialog.get-unthemable-tokens()); } } } @@ -27,9 +25,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-dialog.$prefix, - tokens-mat-dialog.get-color-tokens($theme) - ); + m2-dialog.$prefix, m2-dialog.get-color-tokens($theme)); } } } @@ -40,9 +36,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-dialog.$prefix, - tokens-mat-dialog.get-typography-tokens($theme) - ); + m2-dialog.$prefix, m2-dialog.get-typography-tokens($theme)); } } } @@ -58,8 +52,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-dialog.$prefix, - tokens: tokens-mat-dialog.get-token-slots(), + namespace: m2-dialog.$prefix, + tokens: m2-dialog.get-token-slots(), ), ); } @@ -93,8 +87,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-dialog.$prefix, - map.get($tokens, tokens-mat-dialog.$prefix) + m2-dialog.$prefix, + map.get($tokens, m2-dialog.$prefix) ); } } diff --git a/src/material/core/tokens/m2/mat/_dialog.scss b/src/material/dialog/_m2-dialog.scss similarity index 87% rename from src/material/core/tokens/m2/mat/_dialog.scss rename to src/material/dialog/_m2-dialog.scss index 22252424e3f8..40c641fb5f27 100644 --- a/src/material/core/tokens/m2/mat/_dialog.scss +++ b/src/material/dialog/_m2-dialog.scss @@ -1,7 +1,7 @@ -@use '../../token-definition'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; -@use '../../../theming/inspection'; +@use '../core/tokens/m2-utils'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/theming/inspection'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, dialog); @@ -32,7 +32,7 @@ $prefix: (mat, dialog); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. - $text-base: if(token-definition.$private-is-internal-build, + $text-base: if(m2-utils.$private-is-internal-build, if($is-dark, #fff, #000), inspection.get-theme-color($theme, foreground, text, 1) ); @@ -70,8 +70,8 @@ $prefix: (mat, dialog); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_dialog.scss b/src/material/dialog/_m3-dialog.scss similarity index 71% rename from src/material/core/tokens/m3/mat/_dialog.scss rename to src/material/dialog/_m3-dialog.scss index 2d648e2ddf60..23f6a4e613ac 100644 --- a/src/material/core/tokens/m3/mat/_dialog.scss +++ b/src/material/dialog/_m3-dialog.scss @@ -1,4 +1,4 @@ -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; @use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -17,17 +17,17 @@ $prefix: (mat, dialog); // trial and error so that the first line of text is 24px from the top and the bottom // of the text is 16px from the content under it. $tokens: ( - actions-alignment: token-definition.hardcode(flex-end, $exclude-hardcoded), - actions-padding: token-definition.hardcode(16px 24px, $exclude-hardcoded), + actions-alignment: m3-utils.hardcode(flex-end, $exclude-hardcoded), + actions-padding: m3-utils.hardcode(16px 24px, $exclude-hardcoded), container-color: map.get($systems, md-sys-color, surface), - container-elevation-shadow: token-definition.hardcode(none, $exclude-hardcoded), - container-max-width: token-definition.hardcode(560px, $exclude-hardcoded), - container-min-width: token-definition.hardcode(280px, $exclude-hardcoded), + container-elevation-shadow: m3-utils.hardcode(none, $exclude-hardcoded), + container-max-width: m3-utils.hardcode(560px, $exclude-hardcoded), + container-min-width: m3-utils.hardcode(280px, $exclude-hardcoded), container-shape: map.get($systems, md-sys-shape, corner-extra-large), container-small-max-width: - token-definition.hardcode(calc(100vw - 32px), $exclude-hardcoded), - content-padding: token-definition.hardcode(20px 24px, $exclude-hardcoded), - headline-padding: token-definition.hardcode(6px 24px 13px, $exclude-hardcoded), + m3-utils.hardcode(calc(100vw - 32px), $exclude-hardcoded), + content-padding: m3-utils.hardcode(20px 24px, $exclude-hardcoded), + headline-padding: m3-utils.hardcode(6px 24px 13px, $exclude-hardcoded), subhead-color: map.get($systems, md-sys-color, on-surface), subhead-font: map.get($systems, md-sys-typescale, headline-small-font), subhead-line-height: map.get($systems, md-sys-typescale, headline-small-line-height), @@ -40,8 +40,8 @@ $prefix: (mat, dialog); supporting-text-size: map.get($systems, md-sys-typescale, body-medium-size), supporting-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking), supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), - with-actions-content-padding: token-definition.hardcode(20px 24px 0, $exclude-hardcoded), + with-actions-content-padding: m3-utils.hardcode(20px 24px 0, $exclude-hardcoded), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss index 3446cc3a3d26..7b89b5dc9007 100644 --- a/src/material/dialog/dialog.scss +++ b/src/material/dialog/dialog.scss @@ -1,5 +1,5 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog; +@use './m2-dialog'; @use '../core/tokens/token-utils'; @use '../core/style/variables'; @@ -20,11 +20,8 @@ $mat-dialog-container-max-height: 95vh !default; // include the `dialog-base`. Eventually we should clean up the usages of this flag. $_emit-fallbacks: true; -@mixin _use-mat-tokens { - @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) { - @content; - } -} +$token-prefix: m2-dialog.$prefix; +$token-slots: m2-dialog.get-token-slots(); // Note that we disable fallback declarations, but we don't disable fallback // values, because there are a lot of internal apps that don't include a proper @@ -45,15 +42,12 @@ $_emit-fallbacks: true; // This needs extra specificity so it doesn't get overwritten by the CDK structural styles. .cdk-overlay-pane.mat-mdc-dialog-panel { - @include _use-mat-tokens { - @include token-utils.create-token-slot(max-width, container-max-width, - $_emit-fallbacks); - @include token-utils.create-token-slot(min-width, container-min-width, - $_emit-fallbacks); + @include token-utils.use-tokens($token-prefix, $token-slots) { + max-width: token-utils.slot(container-max-width, $_emit-fallbacks); + min-width: token-utils.slot(container-min-width, $_emit-fallbacks); @media (variables.$xsmall) { - @include token-utils.create-token-slot(max-width, container-small-max-width, - $_emit-fallbacks); + max-width: token-utils.slot(container-small-max-width, $_emit-fallbacks); } } } @@ -104,14 +98,13 @@ $_emit-fallbacks: true; min-width: inherit; max-width: inherit; - @include _use-mat-tokens { - @include token-utils.create-token-slot(box-shadow, container-elevation-shadow, - $_emit-fallbacks); + @include token-utils.use-tokens($token-prefix, $token-slots) { + box-shadow: token-utils.slot(container-elevation-shadow, $_emit-fallbacks); } - @include _use-mat-tokens { - @include token-utils.create-token-slot(border-radius, container-shape, $_emit-fallbacks); - @include token-utils.create-token-slot(background-color, container-color, $_emit-fallbacks); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-radius: token-utils.slot(container-shape, $_emit-fallbacks); + background-color: token-utils.slot(container-color, $_emit-fallbacks); } [dir='rtl'] & { @@ -149,8 +142,8 @@ $_emit-fallbacks: true; box-sizing: border-box; margin: 0 0 1px; - @include _use-mat-tokens { - @include token-utils.create-token-slot(padding, headline-padding, $_emit-fallbacks); + @include token-utils.use-tokens($token-prefix, $token-slots) { + padding: token-utils.slot(headline-padding, $_emit-fallbacks); } // This was used by MDC to set the text baseline. We should figure out a way to @@ -170,14 +163,13 @@ $_emit-fallbacks: true; // Nested to maintain the old specificity. .mat-mdc-dialog-container & { - @include _use-mat-tokens { - @include token-utils.create-token-slot(color, subhead-color, $_emit-fallbacks); - @include token-utils.create-token-slot(font-family, subhead-font, - if($_emit-fallbacks, inherit, null)); - @include token-utils.create-token-slot(line-height, subhead-line-height, $_emit-fallbacks); - @include token-utils.create-token-slot(font-size, subhead-size, $_emit-fallbacks); - @include token-utils.create-token-slot(font-weight, subhead-weight, $_emit-fallbacks); - @include token-utils.create-token-slot(letter-spacing, subhead-tracking, $_emit-fallbacks); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(subhead-color, $_emit-fallbacks); + font-family: token-utils.slot(subhead-font, if($_emit-fallbacks, inherit, null)); + line-height: token-utils.slot(subhead-line-height, $_emit-fallbacks); + font-size: token-utils.slot(subhead-size, $_emit-fallbacks); + font-weight: token-utils.slot(subhead-weight, $_emit-fallbacks); + letter-spacing: token-utils.slot(subhead-tracking, $_emit-fallbacks); } } } @@ -200,30 +192,26 @@ $_emit-fallbacks: true; // Nested to maintain the old specificity. .mat-mdc-dialog-container & { - @include _use-mat-tokens { - @include token-utils.create-token-slot(color, supporting-text-color, $_emit-fallbacks); - @include token-utils.create-token-slot(font-family, supporting-text-font, - if($_emit-fallbacks, inherit, null)); - @include token-utils.create-token-slot(line-height, supporting-text-line-height, - $_emit-fallbacks); - @include token-utils.create-token-slot(font-size, supporting-text-size, $_emit-fallbacks); - @include token-utils.create-token-slot(font-weight, supporting-text-weight, $_emit-fallbacks); - @include token-utils.create-token-slot(letter-spacing, supporting-text-tracking, - $_emit-fallbacks); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(supporting-text-color, $_emit-fallbacks); + font-family: token-utils.slot(supporting-text-font, if($_emit-fallbacks, inherit, null)); + line-height: token-utils.slot(supporting-text-line-height, $_emit-fallbacks); + font-size: token-utils.slot(supporting-text-size, $_emit-fallbacks); + font-weight: token-utils.slot(supporting-text-weight, $_emit-fallbacks); + letter-spacing: token-utils.slot(supporting-text-tracking, $_emit-fallbacks); } } - @include _use-mat-tokens { + @include token-utils.use-tokens($token-prefix, $token-slots) { // These styles need a bit more specificity. .mat-mdc-dialog-container & { - @include token-utils.create-token-slot(padding, content-padding, $_emit-fallbacks); + padding: token-utils.slot(content-padding, $_emit-fallbacks); } // Note: we can achieve this with a `:has` selector, but it results in an // increased specificity which breaks a lot of internal clients. .mat-mdc-dialog-container-with-actions & { - @include token-utils.create-token-slot(padding, with-actions-content-padding, - $_emit-fallbacks); + padding: token-utils.slot(with-actions-content-padding, $_emit-fallbacks); } } @@ -247,9 +235,9 @@ $_emit-fallbacks: true; // For backwards compatibility, actions align at start by default. MDC usually // aligns actions at the end of the container. - @include _use-mat-tokens { - @include token-utils.create-token-slot(padding, actions-padding, $_emit-fallbacks); - @include token-utils.create-token-slot(justify-content, actions-alignment, $_emit-fallbacks); + @include token-utils.use-tokens($token-prefix, $token-slots) { + padding: token-utils.slot(actions-padding, $_emit-fallbacks); + justify-content: token-utils.slot(actions-alignment, $_emit-fallbacks); } @include cdk.high-contrast { diff --git a/src/material/divider/BUILD.bazel b/src/material/divider/BUILD.bazel index 6302d0b18280..751003a87729 100644 --- a/src/material/divider/BUILD.bazel +++ b/src/material/divider/BUILD.bazel @@ -10,16 +10,40 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-divider.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-divider.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = ["_divider-theme.scss"], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -32,8 +56,8 @@ sass_binary( name = "css", src = "divider.scss", deps = [ + ":m2", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index 6b1ecabc35c6..2193c1ec468c 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -4,7 +4,7 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/divider' as tokens-mat-divider; +@use './m2-divider'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -12,9 +12,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-divider.$prefix, - tokens-mat-divider.get-unthemable-tokens() - ); + m2-divider.$prefix, m2-divider.get-unthemable-tokens()); } } } @@ -25,9 +23,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-divider.$prefix, - tokens-mat-divider.get-color-tokens($theme) - ); + m2-divider.$prefix, m2-divider.get-color-tokens($theme)); } } } @@ -50,8 +46,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-divider.$prefix, - tokens: tokens-mat-divider.get-token-slots(), + namespace: m2-divider.$prefix, + tokens: m2-divider.get-token-slots(), ), ); } @@ -85,8 +81,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-divider.$prefix, - map.get($tokens, tokens-mat-divider.$prefix) + m2-divider.$prefix, + map.get($tokens, m2-divider.$prefix) ); } } diff --git a/src/material/core/tokens/m2/mat/_divider.scss b/src/material/divider/_m2-divider.scss similarity index 76% rename from src/material/core/tokens/m2/mat/_divider.scss rename to src/material/divider/_m2-divider.scss index 9128b54f6b1b..6940edbf1d65 100644 --- a/src/material/core/tokens/m2/mat/_divider.scss +++ b/src/material/divider/_m2-divider.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, divider); @@ -35,8 +35,8 @@ $prefix: (mat, divider); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_divider.scss b/src/material/divider/_m3-divider.scss similarity index 76% rename from src/material/core/tokens/m3/mat/_divider.scss rename to src/material/divider/_m3-divider.scss index f986303d4242..2a1b605846c4 100644 --- a/src/material/core/tokens/m3/mat/_divider.scss +++ b/src/material/divider/_m3-divider.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, divider); @@ -11,9 +11,9 @@ $prefix: (mat, divider); /// @return {Map} A set of custom tokens for the mat-divider @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - width: token-definition.hardcode(1px, $exclude-hardcoded), + width: m3-utils.hardcode(1px, $exclude-hardcoded), color: map.get($systems, md-sys-color, outline), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/divider/divider.scss b/src/material/divider/divider.scss index e23890740e9c..bbde097ef05d 100644 --- a/src/material/divider/divider.scss +++ b/src/material/divider/divider.scss @@ -1,5 +1,5 @@ @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/divider' as tokens-mat-divider; +@use './m2-divider'; $inset-margin: 80px; @@ -7,16 +7,15 @@ $inset-margin: 80px; display: block; margin: 0; border-top-style: solid; - @include token-utils.use-tokens( - tokens-mat-divider.$prefix, tokens-mat-divider.get-token-slots()) { - @include token-utils.create-token-slot(border-top-color, color); - @include token-utils.create-token-slot(border-top-width, width); + @include token-utils.use-tokens(m2-divider.$prefix, m2-divider.get-token-slots()) { + border-top-color: token-utils.slot(color); + border-top-width: token-utils.slot(width); &.mat-divider-vertical { border-top: 0; border-right-style: solid; - @include token-utils.create-token-slot(border-right-color, color); - @include token-utils.create-token-slot(border-right-width, width); + border-right-color: token-utils.slot(color); + border-right-width: token-utils.slot(width); } } diff --git a/src/material/expansion/BUILD.bazel b/src/material/expansion/BUILD.bazel index 799f89d9a33c..3258e8017a61 100644 --- a/src/material/expansion/BUILD.bazel +++ b/src/material/expansion/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-expansion.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-expansion.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_expansion-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,11 +54,11 @@ sass_binary( name = "css", src = "expansion-panel.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:elevation", "//src/material/core/style:variables", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -42,10 +66,10 @@ sass_binary( name = "header_css", src = "expansion-panel-header.scss", deps = [ + ":m2", ":variables", "//src/cdk:sass_lib", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index cdc60a8461d9..13d21e537a81 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -5,7 +5,7 @@ @use '../core/typography/typography'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion; +@use './m2-expansion'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -13,9 +13,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-unthemable-tokens() - ); + m2-expansion.$prefix, m2-expansion.get-unthemable-tokens()); } } } @@ -26,9 +24,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-color-tokens($theme) - ); + m2-expansion.$prefix, m2-expansion.get-color-tokens($theme)); } } } @@ -42,9 +38,7 @@ @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-typography-tokens($theme) - ); + m2-expansion.$prefix, m2-expansion.get-typography-tokens($theme)); } } } @@ -55,9 +49,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-expansion.$prefix, - tokens-mat-expansion.get-density-tokens($theme) - ); + m2-expansion.$prefix, m2-expansion.get-density-tokens($theme)); } } } @@ -66,8 +58,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-expansion.$prefix, - tokens: tokens-mat-expansion.get-token-slots(), + namespace: m2-expansion.$prefix, + tokens: m2-expansion.get-token-slots(), ), ); } @@ -101,8 +93,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-expansion.$prefix, - map.get($tokens, tokens-mat-expansion.$prefix) + m2-expansion.$prefix, + map.get($tokens, m2-expansion.$prefix) ); } } diff --git a/src/material/core/tokens/m2/mat/_expansion.scss b/src/material/expansion/_m2-expansion.scss similarity index 90% rename from src/material/core/tokens/m2/mat/_expansion.scss rename to src/material/expansion/_m2-expansion.scss index ce1411507e74..4a33f72367e1 100644 --- a/src/material/core/tokens/m2/mat/_expansion.scss +++ b/src/material/expansion/_m2-expansion.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, expansion); @@ -81,8 +81,8 @@ $prefix: (mat, expansion); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_expansion.scss b/src/material/expansion/_m3-expansion.scss similarity index 72% rename from src/material/core/tokens/m3/mat/_expansion.scss rename to src/material/expansion/_m3-expansion.scss index 155674bb6d14..35df80c355da 100644 --- a/src/material/core/tokens/m3/mat/_expansion.scss +++ b/src/material/expansion/_m3-expansion.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, expansion); @@ -12,12 +12,12 @@ $prefix: (mat, expansion); /// @return {Map} A set of custom tokens for the mat-expansion @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, header-text, title-medium), - token-definition.generate-typography-tokens($systems, container-text, body-large), + m3-utils.generate-typography-tokens($systems, header-text, title-medium), + m3-utils.generate-typography-tokens($systems, container-text, body-large), ( - container-shape: token-definition.hardcode(12px, $exclude-hardcoded), - legacy-header-indicator-display: token-definition.hardcode(none, $exclude-hardcoded), - header-indicator-display: token-definition.hardcode(inline-block, $exclude-hardcoded), + container-shape: m3-utils.hardcode(12px, $exclude-hardcoded), + legacy-header-indicator-display: m3-utils.hardcode(none, $exclude-hardcoded), + header-indicator-display: m3-utils.hardcode(inline-block, $exclude-hardcoded), container-background-color: map.get($systems, md-sys-color, surface), container-text-color: map.get($systems, md-sys-color, on-surface), actions-divider-color: map.get($systems, md-sys-color, outline), @@ -37,5 +37,5 @@ $prefix: (mat, expansion); ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss index 976fb620ff7f..c9a9af2826bc 100644 --- a/src/material/expansion/expansion-panel-header.scss +++ b/src/material/expansion/expansion-panel-header.scss @@ -1,8 +1,11 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion; +@use './m2-expansion'; @use '../core/tokens/token-utils'; @use './expansion-variables'; +$token-prefix: m2-expansion.$prefix; +$token-slots: m2-expansion.get-token-slots(); + .mat-expansion-panel-header { display: flex; flex-direction: row; @@ -19,40 +22,39 @@ border-radius: inherit; } - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(height, header-collapsed-state-height); - @include token-utils.create-token-slot(font-family, header-text-font); - @include token-utils.create-token-slot(font-size, header-text-size); - @include token-utils.create-token-slot(font-weight, header-text-weight); - @include token-utils.create-token-slot(line-height, header-text-line-height); - @include token-utils.create-token-slot(letter-spacing, header-text-tracking); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(header-collapsed-state-height); + font-family: token-utils.slot(header-text-font); + font-size: token-utils.slot(header-text-size); + font-weight: token-utils.slot(header-text-weight); + line-height: token-utils.slot(header-text-line-height); + letter-spacing: token-utils.slot(header-text-tracking); &.mat-expanded { - @include token-utils.create-token-slot(height, header-expanded-state-height); + height: token-utils.slot(header-expanded-state-height); } &[aria-disabled='true'] { - @include token-utils.create-token-slot(color, header-disabled-state-text-color); + color: token-utils.slot(header-disabled-state-text-color); } &:not([aria-disabled='true']) { cursor: pointer; .mat-expansion-panel:not(.mat-expanded) &:hover { - @include token-utils.create-token-slot(background, header-hover-state-layer-color); + background: token-utils.slot(header-hover-state-layer-color); // Disable the hover on touch devices since it can appear like it is stuck. We can't use // `@media (hover)` above, because the desktop support browser support isn't great. @media (hover: none) { - @include token-utils.create-token-slot(background, container-background-color); + background: token-utils.slot(container-background-color); } } // The `.mat-expansion-panel` here is redundant, but we need the additional specificity. .mat-expansion-panel &.cdk-keyboard-focused, .mat-expansion-panel &.cdk-program-focused { - @include token-utils.create-token-slot(background, header-focus-state-layer-color); + background: token-utils.slot(header-focus-state-layer-color); } } } @@ -113,9 +115,8 @@ } .mat-expansion-panel-header-title { - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(color, header-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(header-text-color); } } @@ -140,9 +141,8 @@ .mat-expansion-panel-header-description { flex-grow: 2; - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(color, header-description-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(header-description-color); } } @@ -166,10 +166,9 @@ transform: rotate(45deg); vertical-align: middle; - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(color, header-indicator-color); - @include token-utils.create-token-slot(display, legacy-header-indicator-display, + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(header-indicator-color); + display: token-utils.slot(legacy-header-indicator-display, inline-block); } } @@ -186,10 +185,9 @@ // Ideally we'd make the container `inline-flex`, but that affects M2. vertical-align: middle; - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(fill, header-indicator-color); - @include token-utils.create-token-slot(display, header-indicator-display, none); + @include token-utils.use-tokens($token-prefix, $token-slots) { + fill: token-utils.slot(header-indicator-color); + display: token-utils.slot(header-indicator-display, none); } } } diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss index c9be77e66bcc..99f62abbdab1 100644 --- a/src/material/expansion/expansion-panel.scss +++ b/src/material/expansion/expansion-panel.scss @@ -1,10 +1,13 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion; +@use './m2-expansion'; @use '../core/tokens/token-utils'; @use '../core/style/variables'; @use '../core/style/elevation'; +$token-prefix: m2-expansion.$prefix; +$token-slots: m2-expansion.get-token-slots(); + .mat-expansion-panel { box-sizing: content-box; display: block; @@ -20,11 +23,10 @@ // focus indicator relatively positions the header. position: relative; - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(background, container-background-color); - @include token-utils.create-token-slot(color, container-text-color); - @include token-utils.create-token-slot(border-radius, container-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background: token-utils.slot(container-background-color); + color: token-utils.slot(container-text-color); + border-radius: token-utils.slot(container-shape); } @include elevation.overridable-elevation(2); @@ -34,16 +36,15 @@ border-radius: 0; } - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { &:first-of-type { - @include token-utils.create-token-slot(border-top-right-radius, container-shape); - @include token-utils.create-token-slot(border-top-left-radius, container-shape); + border-top-right-radius: token-utils.slot(container-shape); + border-top-left-radius: token-utils.slot(container-shape); } &:last-of-type { - @include token-utils.create-token-slot(border-bottom-right-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-left-radius, container-shape); + border-bottom-right-radius: token-utils.slot(container-shape); + border-bottom-left-radius: token-utils.slot(container-shape); } } } @@ -104,13 +105,12 @@ visibility: visible; } - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(font-family, container-text-font); - @include token-utils.create-token-slot(font-size, container-text-size); - @include token-utils.create-token-slot(font-weight, container-text-weight); - @include token-utils.create-token-slot(line-height, container-text-line-height); - @include token-utils.create-token-slot(letter-spacing, container-text-tracking); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-family: token-utils.slot(container-text-font); + font-size: token-utils.slot(container-text-size); + font-weight: token-utils.slot(container-text-weight); + line-height: token-utils.slot(container-text-line-height); + letter-spacing: token-utils.slot(container-text-tracking); } } @@ -140,9 +140,8 @@ justify-content: flex-end; padding: 16px 8px 16px 24px; - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(border-top-color, actions-divider-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-top-color: token-utils.slot(actions-divider-color); } .mat-button-base, .mat-mdc-button-base { diff --git a/src/material/form-field/BUILD.bazel b/src/material/form-field/BUILD.bazel index 0160f7721608..884e3c352a55 100644 --- a/src/material/form-field/BUILD.bazel +++ b/src/material/form-field/BUILD.bazel @@ -9,6 +9,34 @@ load("//tools:defaults2.bzl", "ng_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-filled-text-field.scss", + "_m3-form-field.scss", + "_m3-outlined-text-field.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-filled-text-field.scss", + "_m2-form-field.scss", + "_m2-outlined-text-field.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ @@ -20,7 +48,6 @@ sass_library( "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -32,7 +59,6 @@ sass_binary( ":form_field_partials", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -47,7 +73,6 @@ sass_library( "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -70,7 +95,6 @@ sass_library( "//src/material/core/style:layout_common", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/form-field/_form-field-focus-overlay.scss b/src/material/form-field/_form-field-focus-overlay.scss index c5b7c42313b4..5d9c37d3420f 100644 --- a/src/material/form-field/_form-field-focus-overlay.scss +++ b/src/material/form-field/_form-field-focus-overlay.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field; +@use './m2-form-field'; @use '../core/tokens/token-utils'; @use '../core/style/layout-common'; @@ -16,15 +16,15 @@ pointer-events: none; // Make sure we don't block click on the prefix/suffix. @include token-utils.use-tokens( - tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) { - @include token-utils.create-token-slot(background-color, state-layer-color); + m2-form-field.$prefix, m2-form-field.get-token-slots()) { + background-color: token-utils.slot(state-layer-color); .mat-mdc-text-field-wrapper:hover & { - @include token-utils.create-token-slot(opacity, hover-state-layer-opacity); + opacity: token-utils.slot(hover-state-layer-opacity); } .mat-mdc-form-field.mat-focused & { - @include token-utils.create-token-slot(opacity, focus-state-layer-opacity); + opacity: token-utils.slot(focus-state-layer-opacity); } } } diff --git a/src/material/form-field/_form-field-native-select.scss b/src/material/form-field/_form-field-native-select.scss index defc1094500f..16279807959d 100644 --- a/src/material/form-field/_form-field-native-select.scss +++ b/src/material/form-field/_form-field-native-select.scss @@ -1,5 +1,5 @@ @use 'sass:math'; -@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field; +@use './m2-form-field'; @use '../core/tokens/token-utils'; // Width of the Material Design form-field select arrow. @@ -10,8 +10,6 @@ $mat-form-field-select-arrow-height: 5px; // that the absolute positioned arrow does not overlap the select content. $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px; -$_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots(); - // Mixin that creates styles for native select controls in a form-field. @mixin private-form-field-native-select() { // Remove the native select down arrow and ensure that the native appearance @@ -32,13 +30,13 @@ $_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots() } &:not(.mat-mdc-native-select-inline) { - @include token-utils.use-tokens($_tokens...) { + @include token-utils.use-tokens(m2-form-field.$prefix, m2-form-field.get-token-slots()) { option { - @include token-utils.create-token-slot(color, select-option-text-color); + color: token-utils.slot(select-option-text-color); } option:disabled { - @include token-utils.create-token-slot(color, select-disabled-option-text-color); + color: token-utils.slot(select-disabled-option-text-color); } } } @@ -64,8 +62,8 @@ $_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots() // Make the arrow non-clickable so the user can click on the form control under it. pointer-events: none; - @include token-utils.use-tokens($_tokens...) { - @include token-utils.create-token-slot(color, enabled-select-arrow-color); + @include token-utils.use-tokens(m2-form-field.$prefix, m2-form-field.get-token-slots()) { + color: token-utils.slot(enabled-select-arrow-color); } [dir='rtl'] & { @@ -74,13 +72,13 @@ $_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots() } } - @include token-utils.use-tokens($_tokens...) { + @include token-utils.use-tokens(m2-form-field.$prefix, m2-form-field.get-token-slots()) { &.mat-focused .mat-mdc-form-field-infix::after { - @include token-utils.create-token-slot(color, focus-select-arrow-color); + color: token-utils.slot(focus-select-arrow-color); } &.mat-form-field-disabled .mat-mdc-form-field-infix::after { - @include token-utils.create-token-slot(color, disabled-select-arrow-color); + color: token-utils.slot(disabled-select-arrow-color); } } diff --git a/src/material/form-field/_form-field-subscript.scss b/src/material/form-field/_form-field-subscript.scss index 2e3da86d9899..7a9e48508b86 100644 --- a/src/material/form-field/_form-field-subscript.scss +++ b/src/material/form-field/_form-field-subscript.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field; +@use './m2-form-field'; @use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; @@ -72,9 +72,9 @@ .mat-mdc-form-field-error { display: block; - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-token-slots()) { - @include token-utils.create-token-slot(color, error-text-color); + @include token-utils.use-tokens( + m2-form-field.$prefix, m2-form-field.get-token-slots()) { + color: token-utils.slot(error-text-color); } } @@ -82,14 +82,14 @@ // jumps when hints or errors are displayed. .mat-mdc-form-field-subscript-wrapper, .mat-mdc-form-field-bottom-align::before { - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-token-slots()) { + @include token-utils.use-tokens( + m2-form-field.$prefix, m2-form-field.get-token-slots()) { @include vendor-prefixes.smooth-font(); - @include token-utils.create-token-slot(font-family, subscript-text-font); - @include token-utils.create-token-slot(line-height, subscript-text-line-height); - @include token-utils.create-token-slot(font-size, subscript-text-size); - @include token-utils.create-token-slot(letter-spacing, subscript-text-tracking); - @include token-utils.create-token-slot(font-weight, subscript-text-weight); + font-family: token-utils.slot(subscript-text-font); + line-height: token-utils.slot(subscript-text-line-height); + font-size: token-utils.slot(subscript-text-size); + letter-spacing: token-utils.slot(subscript-text-tracking); + font-weight: token-utils.slot(subscript-text-weight); } } } diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 735d0eb179cd..fd7d61c859f4 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -1,6 +1,6 @@ -@use '../core/tokens/m2/mat/filled-text-field' as tokens-mat-filled-text-field; -@use '../core/tokens/m2/mat/outlined-text-field' as tokens-mat-outlined-text-field; -@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field; +@use './m2-filled-text-field'; +@use './m2-outlined-text-field'; +@use './m2-form-field'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/theming/validation'; @@ -17,16 +17,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-filled-text-field.$prefix, - tokens-mat-filled-text-field.get-unthemable-tokens() + m2-filled-text-field.$prefix, + m2-filled-text-field.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-text-field.$prefix, - tokens-mat-outlined-text-field.get-unthemable-tokens() + m2-outlined-text-field.$prefix, + m2-outlined-text-field.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-unthemable-tokens() + m2-form-field.$prefix, + m2-form-field.get-unthemable-tokens() ); } } @@ -43,46 +43,46 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-filled-text-field.$prefix, - tokens-mat-filled-text-field.get-color-tokens($theme) + m2-filled-text-field.$prefix, + m2-filled-text-field.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-text-field.$prefix, - tokens-mat-outlined-text-field.get-color-tokens($theme) + m2-outlined-text-field.$prefix, + m2-outlined-text-field.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-color-tokens($theme) + m2-form-field.$prefix, + m2-form-field.get-color-tokens($theme) ); } .mat-mdc-form-field.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-filled-text-field.$prefix, - tokens-mat-filled-text-field.private-get-color-palette-color-tokens($theme, accent) + m2-filled-text-field.$prefix, + m2-filled-text-field.private-get-color-palette-color-tokens($theme, accent) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-text-field.$prefix, - tokens-mat-outlined-text-field.private-get-color-palette-color-tokens($theme, accent) + m2-outlined-text-field.$prefix, + m2-outlined-text-field.private-get-color-palette-color-tokens($theme, accent) ); @include token-utils.create-token-values-mixed( - tokens-mat-form-field.$prefix, - tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent) + m2-form-field.$prefix, + m2-form-field.private-get-color-palette-color-tokens($theme, accent) ); } .mat-mdc-form-field.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-filled-text-field.$prefix, - tokens-mat-filled-text-field.private-get-color-palette-color-tokens($theme, warn) + m2-filled-text-field.$prefix, + m2-filled-text-field.private-get-color-palette-color-tokens($theme, warn) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-text-field.$prefix, - tokens-mat-outlined-text-field.private-get-color-palette-color-tokens($theme, warn) + m2-outlined-text-field.$prefix, + m2-outlined-text-field.private-get-color-palette-color-tokens($theme, warn) ); @include token-utils.create-token-values-mixed( - tokens-mat-form-field.$prefix, - tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn) + m2-form-field.$prefix, + m2-form-field.private-get-color-palette-color-tokens($theme, warn) ); } } @@ -96,16 +96,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-filled-text-field.$prefix, - tokens-mat-filled-text-field.get-typography-tokens($theme) + m2-filled-text-field.$prefix, + m2-filled-text-field.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-outlined-text-field.$prefix, - tokens-mat-outlined-text-field.get-typography-tokens($theme) + m2-outlined-text-field.$prefix, + m2-outlined-text-field.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-typography-tokens($theme) + m2-form-field.$prefix, + m2-form-field.get-typography-tokens($theme) ); } } @@ -119,8 +119,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-density-tokens($theme) + m2-form-field.$prefix, + m2-form-field.get-density-tokens($theme) ); } } @@ -128,23 +128,23 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $filled-text-field-tokens: tokens-mat-filled-text-field.get-token-slots(); - $outlined-text-field-tokens: tokens-mat-outlined-text-field.get-token-slots(); - $form-field-tokens: tokens-mat-form-field.get-token-slots(); + $filled-text-field-tokens: m2-filled-text-field.get-token-slots(); + $outlined-text-field-tokens: m2-outlined-text-field.get-token-slots(); + $form-field-tokens: m2-form-field.get-token-slots(); @return ( ( - namespace: tokens-mat-filled-text-field.$prefix, + namespace: m2-filled-text-field.$prefix, tokens: $filled-text-field-tokens, prefix: 'filled-', ), ( - namespace: tokens-mat-outlined-text-field.$prefix, + namespace: m2-outlined-text-field.$prefix, tokens: $outlined-text-field-tokens, prefix: 'outlined-', ), ( - namespace: tokens-mat-form-field.$prefix, + namespace: m2-form-field.$prefix, tokens: $form-field-tokens, ) ); @@ -186,26 +186,26 @@ ); $mdc-filled-text-field-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-filled-text-field.$prefix, + m2-filled-text-field.$prefix, $options... ); $mdc-outlined-text-field-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-outlined-text-field.$prefix, + m2-outlined-text-field.$prefix, $options... ); $mat-form-field-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-form-field.$prefix, + m2-form-field.$prefix, $options... ); @include token-utils.create-token-values( - tokens-mat-filled-text-field.$prefix, + m2-filled-text-field.$prefix, $mdc-filled-text-field-tokens ); @include token-utils.create-token-values( - tokens-mat-outlined-text-field.$prefix, + m2-outlined-text-field.$prefix, $mdc-outlined-text-field-tokens ); - @include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens); + @include token-utils.create-token-values(m2-form-field.$prefix, $mat-form-field-tokens); } diff --git a/src/material/core/tokens/m2/mat/_filled-text-field.scss b/src/material/form-field/_m2-filled-text-field.scss similarity index 88% rename from src/material/core/tokens/m2/mat/_filled-text-field.scss rename to src/material/form-field/_m2-filled-text-field.scss index 855356464235..d402d00f32b5 100644 --- a/src/material/core/tokens/m2/mat/_filled-text-field.scss +++ b/src/material/form-field/_m2-filled-text-field.scss @@ -1,9 +1,9 @@ @use 'sass:color'; @use 'sass:map'; @use 'sass:meta'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, filled-text-field); @@ -32,11 +32,11 @@ $prefix: (mat, filled-text-field); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. - $text-color-base: if(token-definition.$private-is-internal-build, $on-surface, + $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, text, 1)); - $disabled-text-color-base: if(token-definition.$private-is-internal-build, $on-surface, + $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, disabled-text, 1)); - $divider-base: if(token-definition.$private-is-internal-build, $on-surface, + $divider-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, divider, 1)); @return map.merge($color-tokens, ( @@ -107,8 +107,8 @@ $prefix: (mat, filled-text-field); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_form-field.scss b/src/material/form-field/_m2-form-field.scss similarity index 95% rename from src/material/core/tokens/m2/mat/_form-field.scss rename to src/material/form-field/_m2-form-field.scss index 1531cb14d8cf..28dd9c753c24 100644 --- a/src/material/core/tokens/m2/mat/_form-field.scss +++ b/src/material/form-field/_m2-form-field.scss @@ -1,10 +1,10 @@ @use 'sass:math'; @use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../m2/palette' as m2-palette; +@use '../core/tokens/m2-utils'; +@use '../core/style/sass-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/m2/palette' as m2-palette; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, form-field); @@ -158,8 +158,8 @@ $prefix: (mat, form-field); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_outlined-text-field.scss b/src/material/form-field/_m2-outlined-text-field.scss similarity index 87% rename from src/material/core/tokens/m2/mat/_outlined-text-field.scss rename to src/material/form-field/_m2-outlined-text-field.scss index 9a6ba64788ae..91cc0862fcd8 100644 --- a/src/material/core/tokens/m2/mat/_outlined-text-field.scss +++ b/src/material/form-field/_m2-outlined-text-field.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, outlined-text-field); @@ -29,11 +29,11 @@ $prefix: (mat, outlined-text-field); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. $on-surface: if($is-dark, #fff, #000); - $text-color-base: if(token-definition.$private-is-internal-build, $on-surface, + $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, text, 1)); - $disabled-text-color-base: if(token-definition.$private-is-internal-build, $on-surface, + $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, disabled-text, 1)); - $divider-base: if(token-definition.$private-is-internal-build, $on-surface, + $divider-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, divider, 1)); @return map.merge($color-tokens, ( @@ -93,8 +93,8 @@ $prefix: (mat, outlined-text-field); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_filled-text-field.scss b/src/material/form-field/_m3-filled-text-field.scss similarity index 95% rename from src/material/core/tokens/m3/mat/_filled-text-field.scss rename to src/material/form-field/_m3-filled-text-field.scss index 7d42909f0235..0d30406a5deb 100644 --- a/src/material/core/tokens/m3/mat/_filled-text-field.scss +++ b/src/material/form-field/_m3-filled-text-field.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m3-utils'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, filled-text-field); @@ -64,5 +64,5 @@ $prefix: (mat, filled-text-field); ), ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_form-field.scss b/src/material/form-field/_m3-form-field.scss similarity index 85% rename from src/material/core/tokens/m3/mat/_form-field.scss rename to src/material/form-field/_m3-form-field.scss index 1e332fc22145..36a2f50c2128 100644 --- a/src/material/core/tokens/m3/mat/_form-field.scss +++ b/src/material/form-field/_m3-form-field.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, form-field); @@ -12,8 +12,8 @@ $prefix: (mat, form-field); /// @return {Map} A set of custom tokens for the mat-form-field @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, container-text, body-large), - token-definition.generate-typography-tokens($systems, subscript-text, body-small), + m3-utils.generate-typography-tokens($systems, container-text, body-large), + m3-utils.generate-typography-tokens($systems, subscript-text, body-small), ( disabled-input-text-placeholder-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), @@ -26,7 +26,7 @@ $prefix: (mat, form-field); disabled-select-arrow-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), - focus-state-layer-opacity: token-definition.hardcode(0, $exclude-hardcoded), + focus-state-layer-opacity: m3-utils.hardcode(0, $exclude-hardcoded), focus-select-arrow-color: map.get($systems, md-sys-color, primary), leading-icon-color: map.get($systems, md-sys-color, on-surface-variant), disabled-leading-icon-color: sass-utils.safe-color-change( @@ -54,5 +54,5 @@ $prefix: (mat, form-field); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_outlined-text-field.scss b/src/material/form-field/_m3-outlined-text-field.scss similarity index 95% rename from src/material/core/tokens/m3/mat/_outlined-text-field.scss rename to src/material/form-field/_m3-outlined-text-field.scss index e5eeec45ce8b..5661cef3f306 100644 --- a/src/material/core/tokens/m3/mat/_outlined-text-field.scss +++ b/src/material/form-field/_m3-outlined-text-field.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m3-utils'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, outlined-text-field); @@ -61,5 +61,5 @@ $prefix: (mat, outlined-text-field); ), ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/form-field/_mdc-text-field-density-overrides.scss b/src/material/form-field/_mdc-text-field-density-overrides.scss index 9540bf057301..e8b2da41ed4a 100644 --- a/src/material/form-field/_mdc-text-field-density-overrides.scss +++ b/src/material/form-field/_mdc-text-field-density-overrides.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field; +@use './m2-form-field'; @use '../core/tokens/token-utils'; // Mixin that includes the density styles for form fields. MDC provides their own density @@ -10,23 +10,21 @@ // based on the density scale. @mixin private-text-field-density-overrides() { @include token-utils.use-tokens( - tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) { - $height: token-utils.get-token-variable(container-height); + m2-form-field.$prefix, m2-form-field.get-token-slots()) { + $height: token-utils.slot(container-height); .mat-mdc-form-field-infix { // We add a minimum height to the infix container to ensure that custom controls have the // same default vertical space as text-field inputs (with respect to the vertical padding). min-height: #{$height}; - @include token-utils.create-token-slot(padding-top, - filled-with-label-container-padding-top); - @include token-utils.create-token-slot(padding-bottom, - filled-with-label-container-padding-bottom); + padding-top: token-utils.slot(filled-with-label-container-padding-top); + padding-bottom: token-utils.slot(filled-with-label-container-padding-bottom); .mdc-text-field--outlined &, .mdc-text-field--no-label & { - @include token-utils.create-token-slot(padding-top, container-vertical-padding); - @include token-utils.create-token-slot(padding-bottom, container-vertical-padding); + padding-top: token-utils.slot(container-vertical-padding); + padding-bottom: token-utils.slot(container-vertical-padding); } } @@ -40,7 +38,7 @@ // We need to conditionally hide the floating label based on the height of the form field. .mdc-text-field--filled .mat-mdc-floating-label { - display: token-utils.get-token-variable(filled-label-display, $fallback: block); + display: token-utils.slot(filled-label-display, $fallback: block); } // For the outline appearance, we re-create the active floating label transform. This is diff --git a/src/material/form-field/_mdc-text-field-structure-overrides.scss b/src/material/form-field/_mdc-text-field-structure-overrides.scss index 772c1c0476fe..96419c6b5223 100644 --- a/src/material/form-field/_mdc-text-field-structure-overrides.scss +++ b/src/material/form-field/_mdc-text-field-structure-overrides.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field; +@use './m2-form-field'; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; @@ -117,8 +117,8 @@ $_enable-form-field-will-change-reset: true; .mat-form-field-disabled .mdc-text-field__input { @include vendor-prefixes.input-placeholder { @include token-utils.use-tokens( - tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) { - @include token-utils.create-token-slot(color, disabled-input-text-placeholder-color); + m2-form-field.$prefix, m2-form-field.get-token-slots()) { + color: token-utils.slot(disabled-input-text-placeholder-color); } } } diff --git a/src/material/form-field/_mdc-text-field-structure.scss b/src/material/form-field/_mdc-text-field-structure.scss index 4a9c5df58d23..03774045f5ca 100644 --- a/src/material/form-field/_mdc-text-field-structure.scss +++ b/src/material/form-field/_mdc-text-field-structure.scss @@ -1,20 +1,16 @@ @use '@angular/cdk'; @use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/filled-text-field' as tokens-mat-filled-text-field; -@use '../core/tokens/m2/mat/outlined-text-field' as tokens-mat-outlined-text-field; +@use './m2-filled-text-field'; +@use './m2-outlined-text-field'; + +$filled-token-prefix: m2-filled-text-field.$prefix; +$filled-token-slots: m2-filled-text-field.get-token-slots(); +$outlined-token-prefix: m2-outlined-text-field.$prefix; +$outlined-token-slots: m2-outlined-text-field.get-token-slots(); // Includes the structural styles for the form field inherited from MDC. @mixin private-text-field-structure { - $filled-slots: ( - tokens-mat-filled-text-field.$prefix, - tokens-mat-filled-text-field.get-token-slots() - ); - $outlined-slots: ( - tokens-mat-outlined-text-field.$prefix, - tokens-mat-outlined-text-field.get-token-slots() - ); - .mdc-text-field { display: inline-flex; align-items: baseline; @@ -97,11 +93,11 @@ pointer-events: auto; } - @include token-utils.use-tokens($filled-slots...) { + @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) { @include _input-tokens('.mdc-text-field--filled'); } - @include token-utils.use-tokens($outlined-slots...) { + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { @include _input-tokens('.mdc-text-field--outlined'); } @@ -117,16 +113,16 @@ border-bottom-right-radius: 0; border-bottom-left-radius: 0; - @include token-utils.use-tokens($filled-slots...) { - @include token-utils.create-token-slot(border-top-left-radius, container-shape); - @include token-utils.create-token-slot(border-top-right-radius, container-shape); + @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) { + border-top-left-radius: token-utils.slot(container-shape); + border-top-right-radius: token-utils.slot(container-shape); &:not(.mdc-text-field--disabled) { - @include token-utils.create-token-slot(background-color, container-color); + background-color: token-utils.slot(container-color); } &.mdc-text-field--disabled { - @include token-utils.create-token-slot(background-color, disabled-container-color); + background-color: token-utils.slot(disabled-container-color); } } } @@ -135,8 +131,8 @@ height: 56px; overflow: visible; - @include token-utils.use-tokens($outlined-slots...) { - $shape-var: token-utils.get-token-variable(container-shape); + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { + $shape-var: token-utils.slot(container-shape); padding-right: max(16px, #{$shape-var}); padding-left: max(16px, calc(#{$shape-var} + 4px)); @@ -210,11 +206,11 @@ display: none; } - @include token-utils.use-tokens($filled-slots...) { + @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) { @include _floating-label-tokens('.mdc-text-field--filled'); } - @include token-utils.use-tokens($outlined-slots...) { + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { @include _floating-label-tokens('.mdc-text-field--outlined'); } } @@ -297,42 +293,42 @@ border-width: 2px; } - @include token-utils.use-tokens($outlined-slots...) { + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { // Moved out into variables because the selectors we inherited were too long. $enabled-selector: '.mdc-text-field--outlined:not(.mdc-text-field--disabled)'; $hover-selector: ':not(.mdc-text-field--focused):hover'; #{$enabled-selector} & { - @include token-utils.create-token-slot(border-color, outline-color); - @include token-utils.create-token-slot(border-width, outline-width); + border-color: token-utils.slot(outline-color); + border-width: token-utils.slot(outline-width); } #{$enabled-selector}#{$hover-selector} & { - @include token-utils.create-token-slot(border-color, hover-outline-color); + border-color: token-utils.slot(hover-outline-color); } #{$enabled-selector}.mdc-text-field--focused & { - @include token-utils.create-token-slot(border-color, focus-outline-color); + border-color: token-utils.slot(focus-outline-color); } .mdc-text-field--outlined.mdc-text-field--disabled & { - @include token-utils.create-token-slot(border-color, disabled-outline-color); + border-color: token-utils.slot(disabled-outline-color); } #{$enabled-selector}.mdc-text-field--invalid & { - @include token-utils.create-token-slot(border-color, error-outline-color); + border-color: token-utils.slot(error-outline-color); } #{$enabled-selector}.mdc-text-field--invalid#{$hover-selector} .mdc-notched-outline & { - @include token-utils.create-token-slot(border-color, error-hover-outline-color); + border-color: token-utils.slot(error-hover-outline-color); } #{$enabled-selector}.mdc-text-field--invalid.mdc-text-field--focused & { - @include token-utils.create-token-slot(border-color, error-focus-outline-color); + border-color: token-utils.slot(error-focus-outline-color); } #{$enabled-selector}.mdc-text-field--focused .mdc-notched-outline & { - @include token-utils.create-token-slot(border-width, focus-outline-width); + border-width: token-utils.slot(focus-outline-width); } } } @@ -343,12 +339,12 @@ border-top-right-radius: 0; border-bottom-right-radius: 0; - @include token-utils.use-tokens($outlined-slots...) { - @include token-utils.create-token-slot(border-top-left-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-left-radius, container-shape); + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { + border-top-left-radius: token-utils.slot(container-shape); + border-bottom-left-radius: token-utils.slot(container-shape); .mdc-text-field--outlined .mdc-notched-outline & { - $shape-var: token-utils.get-token-variable(container-shape); + $shape-var: token-utils.slot(container-shape); width: max(12px, #{$shape-var}); } } @@ -359,9 +355,9 @@ border-bottom-left-radius: 0; border-top-left-radius: 0; - @include token-utils.use-tokens($outlined-slots...) { - @include token-utils.create-token-slot(border-top-right-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-right-radius, container-shape); + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { + border-top-right-radius: token-utils.slot(container-shape); + border-bottom-right-radius: token-utils.slot(container-shape); } } } @@ -373,9 +369,9 @@ border-top-left-radius: 0; border-bottom-left-radius: 0; - @include token-utils.use-tokens($outlined-slots...) { - @include token-utils.create-token-slot(border-top-right-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-right-radius, container-shape); + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { + border-top-right-radius: token-utils.slot(container-shape); + border-bottom-right-radius: token-utils.slot(container-shape); } [dir='rtl'] & { @@ -384,9 +380,9 @@ border-top-right-radius: 0; border-bottom-right-radius: 0; - @include token-utils.use-tokens($outlined-slots...) { - @include token-utils.create-token-slot(border-top-left-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-left-radius, container-shape); + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { + border-top-left-radius: token-utils.slot(container-shape); + border-bottom-left-radius: token-utils.slot(container-shape); } } } @@ -395,9 +391,9 @@ flex: 0 0 auto; width: auto; - @include token-utils.use-tokens($outlined-slots...) { + @include token-utils.use-tokens($outlined-token-prefix, $outlined-token-slots) { .mdc-text-field--outlined .mdc-notched-outline & { - $shape-var: token-utils.get-token-variable(container-shape); + $shape-var: token-utils.slot(container-shape); max-width: min( var(--mat-form-field-notch-max-width, 100%), calc(100% - max(12px, #{$shape-var}) * 2) @@ -444,35 +440,29 @@ &::before { z-index: 1; - @include token-utils.use-tokens($filled-slots...) { + @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) { $enabled-field: '.mdc-text-field--filled:not(.mdc-text-field--disabled)'; - @include token-utils.create-token-slot(border-bottom-width, active-indicator-height); + border-bottom-width: token-utils.slot(active-indicator-height); #{$enabled-field} & { - @include token-utils.create-token-slot(border-bottom-color, active-indicator-color); + border-bottom-color: token-utils.slot(active-indicator-color); } #{$enabled-field}:not(.mdc-text-field--focused):hover & { - @include token-utils.create-token-slot(border-bottom-color, hover-active-indicator-color); + border-bottom-color: token-utils.slot(hover-active-indicator-color); } .mdc-text-field--filled.mdc-text-field--disabled & { - @include token-utils.create-token-slot( - border-bottom-color, - disabled-active-indicator-color - ); + border-bottom-color: token-utils.slot(disabled-active-indicator-color); } #{$enabled-field}.mdc-text-field--invalid & { - @include token-utils.create-token-slot(border-bottom-color, error-active-indicator-color); + border-bottom-color: token-utils.slot(error-active-indicator-color); } #{$enabled-field}.mdc-text-field--invalid:not(.mdc-text-field--focused):hover & { - @include token-utils.create-token-slot( - border-bottom-color, - error-hover-active-indicator-color - ); + border-bottom-color: token-utils.slot(error-hover-active-indicator-color); } } } @@ -482,23 +472,17 @@ opacity: 0; z-index: 2; - @include token-utils.use-tokens($filled-slots...) { + @include token-utils.use-tokens($filled-token-prefix, $filled-token-slots) { .mdc-text-field--filled & { - @include token-utils.create-token-slot( - border-bottom-width, - focus-active-indicator-height - ); + border-bottom-width: token-utils.slot(focus-active-indicator-height); } .mdc-text-field--filled:not(.mdc-text-field--disabled) & { - @include token-utils.create-token-slot(border-bottom-color, focus-active-indicator-color); + border-bottom-color: token-utils.slot(focus-active-indicator-color); } .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) & { - @include token-utils.create-token-slot( - border-bottom-color, - error-focus-active-indicator-color - ); + border-bottom-color: token-utils.slot(error-focus-active-indicator-color); } } } @@ -523,58 +507,58 @@ $enabled-field: '#{$selector}:not(.mdc-text-field--disabled)'; #{$enabled-field} & { - @include token-utils.create-token-slot(color, label-text-color); + color: token-utils.slot(label-text-color); } #{$enabled-field}.mdc-text-field--focused & { - @include token-utils.create-token-slot(color, focus-label-text-color); + color: token-utils.slot(focus-label-text-color); } #{$enabled-field}:not(.mdc-text-field--focused):hover & { - @include token-utils.create-token-slot(color, hover-label-text-color); + color: token-utils.slot(hover-label-text-color); } #{$selector}.mdc-text-field--disabled & { - @include token-utils.create-token-slot(color, disabled-label-text-color); + color: token-utils.slot(disabled-label-text-color); } #{$enabled-field}.mdc-text-field--invalid & { - @include token-utils.create-token-slot(color, error-label-text-color); + color: token-utils.slot(error-label-text-color); } #{$enabled-field}.mdc-text-field--invalid.mdc-text-field--focused & { - @include token-utils.create-token-slot(color, error-focus-label-text-color); + color: token-utils.slot(error-focus-label-text-color); } #{$enabled-field}.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover & { - @include token-utils.create-token-slot(color, error-hover-label-text-color); + color: token-utils.slot(error-hover-label-text-color); } #{$selector} & { - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(font-weight, label-text-weight); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + font-weight: token-utils.slot(label-text-weight); + letter-spacing: token-utils.slot(label-text-tracking); } } // Includes the tokens for the input for a specific form field variant. @mixin _input-tokens($selector) { #{$selector}:not(.mdc-text-field--disabled) & { - @include token-utils.create-token-slot(color, input-text-color); - @include token-utils.create-token-slot(caret-color, caret-color); + color: token-utils.slot(input-text-color); + caret-color: token-utils.slot(caret-color); @include vendor-prefixes.input-placeholder { - @include token-utils.create-token-slot(color, input-text-placeholder-color); + color: token-utils.slot(input-text-placeholder-color); } } #{$selector}.mdc-text-field--invalid:not(.mdc-text-field--disabled) & { - @include token-utils.create-token-slot(caret-color, error-caret-color); + caret-color: token-utils.slot(error-caret-color); } #{$selector}.mdc-text-field--disabled & { - @include token-utils.create-token-slot(color, disabled-input-text-color); + color: token-utils.slot(disabled-input-text-color); } } diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss index 0dcbe41561c1..65d0bed2570b 100644 --- a/src/material/form-field/form-field.scss +++ b/src/material/form-field/form-field.scss @@ -1,6 +1,6 @@ @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; -@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field; +@use './m2-form-field'; @use './form-field-subscript'; @use './form-field-focus-overlay'; @use './form-field-high-contrast'; @@ -45,17 +45,17 @@ $_icon-prefix-infix-padding: 4px; // To avoid problems with text-align. text-align: left; - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-token-slots()) { + @include token-utils.use-tokens( + m2-form-field.$prefix, m2-form-field.get-token-slots()) { @include vendor-prefixes.smooth-font(); - @include token-utils.create-token-slot(font-family, container-text-font); - @include token-utils.create-token-slot(line-height, container-text-line-height); - @include token-utils.create-token-slot(font-size, container-text-size); - @include token-utils.create-token-slot(letter-spacing, container-text-tracking); - @include token-utils.create-token-slot(font-weight, container-text-weight); + font-family: token-utils.slot(container-text-font); + line-height: token-utils.slot(container-text-line-height); + font-size: token-utils.slot(container-text-size); + letter-spacing: token-utils.slot(container-text-tracking); + font-weight: token-utils.slot(container-text-weight); .mdc-text-field--outlined { - $token-value: token-utils.get-token-variable(outlined-label-text-populated-size); + $token-value: token-utils.slot(outlined-label-text-populated-size); // For the non-upgraded notch label (i.e. when rendered on the server), also // use the correct typography. @@ -115,36 +115,36 @@ $_icon-prefix-infix-padding: 4px; } .mat-mdc-form-field-icon-prefix { - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-token-slots()) { - @include token-utils.create-token-slot(color, leading-icon-color); + @include token-utils.use-tokens( + m2-form-field.$prefix, m2-form-field.get-token-slots()) { + color: token-utils.slot(leading-icon-color); .mat-form-field-disabled & { - @include token-utils.create-token-slot(color, disabled-leading-icon-color); + color: token-utils.slot(disabled-leading-icon-color); } } } .mat-mdc-form-field-icon-suffix { - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-token-slots()) { - @include token-utils.create-token-slot(color, trailing-icon-color); + @include token-utils.use-tokens( + m2-form-field.$prefix, m2-form-field.get-token-slots()) { + color: token-utils.slot(trailing-icon-color); .mat-form-field-disabled & { - @include token-utils.create-token-slot(color, disabled-trailing-icon-color); + color: token-utils.slot(disabled-trailing-icon-color); } .mat-form-field-invalid & { - @include token-utils.create-token-slot(color, error-trailing-icon-color); + color: token-utils.slot(error-trailing-icon-color); } .mat-form-field-invalid:not(.mat-focused):not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper:hover & { - @include token-utils.create-token-slot(color, error-hover-trailing-icon-color); + color: token-utils.slot(error-hover-trailing-icon-color); } .mat-form-field-invalid.mat-focused .mat-mdc-text-field-wrapper & { - @include token-utils.create-token-slot(color, error-focus-trailing-icon-color); + color: token-utils.slot(error-focus-trailing-icon-color); } } } diff --git a/src/material/grid-list/BUILD.bazel b/src/material/grid-list/BUILD.bazel index ea54a9eb810d..87acce5a26af 100644 --- a/src/material/grid-list/BUILD.bazel +++ b/src/material/grid-list/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-grid-list.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-grid-list.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_grid-list-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,10 +54,10 @@ sass_binary( name = "css", src = "grid-list.scss", deps = [ + ":m2", "//src/material/core/style:layout_common", "//src/material/core/style:list_common", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss index 5ae82b3ed0c3..57ecae1c983f 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -3,7 +3,7 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list; +@use './m2-grid-list'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @@ -28,9 +28,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-grid-list.$prefix, - tokens-mat-grid-list.get-typography-tokens($theme) - ); + m2-grid-list.$prefix, m2-grid-list.get-typography-tokens($theme)); } } } @@ -46,8 +44,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-grid-list.$prefix, - tokens: tokens-mat-grid-list.get-token-slots(), + namespace: m2-grid-list.$prefix, + tokens: m2-grid-list.get-token-slots(), ), ); } @@ -81,8 +79,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-grid-list.$prefix, - map.get($tokens, tokens-mat-grid-list.$prefix) + m2-grid-list.$prefix, + map.get($tokens, m2-grid-list.$prefix) ); } } diff --git a/src/material/core/tokens/m2/mat/_grid-list.scss b/src/material/grid-list/_m2-grid-list.scss similarity index 83% rename from src/material/core/tokens/m2/mat/_grid-list.scss rename to src/material/grid-list/_m2-grid-list.scss index 5119aae3c550..0c593c5eda8c 100644 --- a/src/material/core/tokens/m2/mat/_grid-list.scss +++ b/src/material/grid-list/_m2-grid-list.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, grid-list); @@ -39,8 +39,8 @@ $prefix: (mat, grid-list); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_grid-list.scss b/src/material/grid-list/_m3-grid-list.scss similarity index 88% rename from src/material/core/tokens/m3/mat/_grid-list.scss rename to src/material/grid-list/_m3-grid-list.scss index 95f678d86778..75a882d46a38 100644 --- a/src/material/core/tokens/m3/mat/_grid-list.scss +++ b/src/material/grid-list/_m3-grid-list.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, grid-list); @@ -17,5 +17,5 @@ $prefix: (mat, grid-list); tile-footer-secondary-text-size: map.get($systems, md-sys-typescale, body-medium), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/grid-list/grid-list.scss b/src/material/grid-list/grid-list.scss index d687513d1e4b..65f8d51e3dfb 100644 --- a/src/material/grid-list/grid-list.scss +++ b/src/material/grid-list/grid-list.scss @@ -1,6 +1,6 @@ @use '../core/style/list-common'; @use '../core/style/layout-common'; -@use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list; +@use './m2-grid-list'; @use '../core/tokens/token-utils'; @@ -72,18 +72,18 @@ $text-padding: 16px; .mat-grid-tile-header { @include token-utils.use-tokens( - tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) { - $secondary-token-name: token-utils.get-token-variable(tile-header-secondary-text-size); - @include token-utils.create-token-slot(font-size, tile-header-primary-text-size); + m2-grid-list.$prefix, m2-grid-list.get-token-slots()) { + $secondary-token-name: token-utils.slot(tile-header-secondary-text-size); + font-size: token-utils.slot(tile-header-primary-text-size); @include list-common.base(#{$secondary-token-name}); } } .mat-grid-tile-footer { @include token-utils.use-tokens( - tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) { - $secondary-token-name: token-utils.get-token-variable(tile-footer-secondary-text-size); - @include token-utils.create-token-slot(font-size, tile-footer-primary-text-size); + m2-grid-list.$prefix, m2-grid-list.get-token-slots()) { + $secondary-token-name: token-utils.slot(tile-footer-secondary-text-size); + font-size: token-utils.slot(tile-footer-primary-text-size); @include list-common.base(#{$secondary-token-name}); } } diff --git a/src/material/icon/BUILD.bazel b/src/material/icon/BUILD.bazel index 165813d03bfd..95a5bc8858f9 100644 --- a/src/material/icon/BUILD.bazel +++ b/src/material/icon/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-icon.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-icon.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_icon-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -29,9 +53,9 @@ sass_binary( name = "css", src = "icon.scss", deps = [ + ":m2", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index 551ee717db53..5c4f1a213da3 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -1,14 +1,14 @@ -@use '../core/theming/theming'; +@use '../core/style/sass-utils'; @use '../core/theming/inspection'; +@use '../core/theming/theming'; @use '../core/theming/validation'; -@use '../core/tokens/m2/mat/icon' as tokens-mat-icon; @use '../core/tokens/token-utils'; -@use '../core/style/sass-utils'; +@use './m2-icon'; @mixin _palette-colors($theme, $palette-name) { $color: inspection.get-theme-color($theme, $palette-name, text); - $tokens: tokens-mat-icon.private-get-icon-color-tokens($color); - @include token-utils.create-token-values-mixed(tokens-mat-icon.$prefix, $tokens); + $tokens: m2-icon.private-get-icon-color-tokens($color); + @include token-utils.create-token-values-mixed(m2-icon.$prefix, $tokens); } /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -32,8 +32,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-icon.$prefix, - tokens-mat-icon.get-color-tokens($theme) + m2-icon.$prefix, + m2-icon.get-color-tokens($theme) ); } @@ -75,8 +75,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-icon.$prefix, - tokens: tokens-mat-icon.get-token-slots(), + namespace: m2-icon.$prefix, + tokens: m2-icon.get-token-slots(), ), ); } @@ -115,6 +115,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-icon-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-icon.$prefix, $mat-icon-tokens); + $mat-icon-tokens: token-utils.get-tokens-for($tokens, m2-icon.$prefix, $options...); + @include token-utils.create-token-values(m2-icon.$prefix, $mat-icon-tokens); } diff --git a/src/material/core/tokens/m2/mat/_icon.scss b/src/material/icon/_m2-icon.scss similarity index 80% rename from src/material/core/tokens/m2/mat/_icon.scss rename to src/material/icon/_m2-icon.scss index 9d7a74d4fbc4..29d5a869471b 100644 --- a/src/material/core/tokens/m2/mat/_icon.scss +++ b/src/material/icon/_m2-icon.scss @@ -1,5 +1,5 @@ -@use '../../token-definition'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, icon); @@ -38,8 +38,8 @@ $prefix: (mat, icon); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_icon.scss b/src/material/icon/_m3-icon.scss similarity index 82% rename from src/material/core/tokens/m3/mat/_icon.scss rename to src/material/icon/_m3-icon.scss index 37af048af4b9..9883fe468d34 100644 --- a/src/material/core/tokens/m3/mat/_icon.scss +++ b/src/material/icon/_m3-icon.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, icon); @@ -11,7 +11,7 @@ $prefix: (mat, icon); /// @return {Map} A set of custom tokens for the mat-icon @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - color: token-definition.hardcode(inherit, $exclude-hardcoded), + color: m3-utils.hardcode(inherit, $exclude-hardcoded), ); $variant-tokens: ( @@ -31,5 +31,5 @@ $prefix: (mat, icon); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss index bddac57f92e0..10cf58d39fa3 100644 --- a/src/material/icon/icon.scss +++ b/src/material/icon/icon.scss @@ -1,5 +1,5 @@ @use '../core/style/vendor-prefixes'; -@use '../core/tokens/m2/mat/icon' as tokens-mat-icon; +@use './m2-icon'; @use '../core/tokens/token-utils'; // The width/height of the icon element. @@ -15,8 +15,8 @@ $size: 24px !default; // `warn` because there we want the additional specificity. mat-icon { &, &.mat-primary, &.mat-accent, &.mat-warn { - @include token-utils.use-tokens(tokens-mat-icon.$prefix, tokens-mat-icon.get-token-slots()) { - @include token-utils.create-token-slot(color, color); + @include token-utils.use-tokens(m2-icon.$prefix, m2-icon.get-token-slots()) { + color: token-utils.slot(color); } } } diff --git a/src/material/list/BUILD.bazel b/src/material/list/BUILD.bazel index 7d96910de6cd..e9e0b87aa086 100644 --- a/src/material/list/BUILD.bazel +++ b/src/material/list/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-list.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-list.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_list-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -32,9 +56,9 @@ sass_binary( deps = [ ":list_inherited_structure", ":list_item_hcm_indicator", + ":m2", "//src/material/core/style:layout_common", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -48,9 +72,9 @@ sass_library( name = "list_inherited_structure", srcs = ["_list-inherited-structure.scss"], deps = [ + ":m2", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/list/_list-inherited-structure.scss b/src/material/list/_list-inherited-structure.scss index b1fdf798e501..1b8b30ef04f6 100644 --- a/src/material/list/_list-inherited-structure.scss +++ b/src/material/list/_list-inherited-structure.scss @@ -1,11 +1,12 @@ @use '../core/style/vendor-prefixes'; -@use '../core/tokens/m2/mat/list' as tokens-mat-list; @use '../core/tokens/token-utils'; +@use './m2-list'; + +$token-prefix: m2-list.$prefix; +$token-slots: m2-list.get-token-slots(); // Includes the structural styles for the list that were inherited from MDC. @mixin private-list-inherited-structural-styles { - $tokens: (tokens-mat-list.$prefix, tokens-mat-list.get-token-slots()); - .mdc-list { margin: 0; padding: 8px 0; @@ -27,13 +28,12 @@ padding-left: 16px; padding-right: 16px; - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(background-color, list-item-container-color); - @include token-utils.create-token-slot(border-radius, list-item-container-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(list-item-container-color); + border-radius: token-utils.slot(list-item-container-shape); &.mdc-list-item--selected { - @include token-utils.create-token-slot(background-color, - list-item-selected-container-color); + background-color: token-utils.slot(list-item-selected-container-color); } } @@ -46,8 +46,8 @@ } &.mdc-list-item--with-one-line { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(height, list-item-one-line-container-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(list-item-one-line-container-height); } .mdc-list-item__start { @@ -62,8 +62,8 @@ } &.mdc-list-item--with-two-lines { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(height, list-item-two-line-container-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(list-item-two-line-container-height); } .mdc-list-item__start { @@ -78,8 +78,8 @@ } &.mdc-list-item--with-three-lines { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(height, list-item-three-line-container-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(list-item-three-line-container-height); } .mdc-list-item__start { @@ -118,11 +118,11 @@ flex-shrink: 0; pointer-events: none; - @include token-utils.use-tokens($tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-list-item--with-leading-icon & { - @include token-utils.create-token-slot(color, list-item-leading-icon-color); - @include token-utils.create-token-slot(width, list-item-leading-icon-size); - @include token-utils.create-token-slot(height, list-item-leading-icon-size); + color: token-utils.slot(list-item-leading-icon-color); + width: token-utils.slot(list-item-leading-icon-size); + height: token-utils.slot(list-item-leading-icon-size); margin-left: 16px; margin-right: 32px; } @@ -133,13 +133,13 @@ } .mdc-list-item--with-leading-icon:hover & { - @include token-utils.create-token-slot(color, list-item-hover-leading-icon-color); + color: token-utils.slot(list-item-hover-leading-icon-color); } // This is the same in RTL, but we need the specificity. .mdc-list-item--with-leading-avatar & { - @include token-utils.create-token-slot(width, list-item-leading-avatar-size); - @include token-utils.create-token-slot(height, list-item-leading-avatar-size); + width: token-utils.slot(list-item-leading-avatar-size); + height: token-utils.slot(list-item-leading-avatar-size); margin-left: 16px; margin-right: 16px; border-radius: 50%; @@ -158,38 +158,33 @@ flex-shrink: 0; pointer-events: none; - @include token-utils.use-tokens($tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-list-item--with-trailing-meta & { - @include token-utils.create-token-slot(font-family, - list-item-trailing-supporting-text-font); - @include token-utils.create-token-slot(line-height, - list-item-trailing-supporting-text-line-height); - @include token-utils.create-token-slot(font-size, - list-item-trailing-supporting-text-size); - @include token-utils.create-token-slot(font-weight, - list-item-trailing-supporting-text-weight); - @include token-utils.create-token-slot(letter-spacing, - list-item-trailing-supporting-text-tracking); + font-family: token-utils.slot(list-item-trailing-supporting-text-font); + line-height: token-utils.slot(list-item-trailing-supporting-text-line-height); + font-size: token-utils.slot(list-item-trailing-supporting-text-size); + font-weight: token-utils.slot(list-item-trailing-supporting-text-weight); + letter-spacing: token-utils.slot(list-item-trailing-supporting-text-tracking); } .mdc-list-item--with-trailing-icon & { - @include token-utils.create-token-slot(color, list-item-trailing-icon-color); - @include token-utils.create-token-slot(width, list-item-trailing-icon-size); - @include token-utils.create-token-slot(height, list-item-trailing-icon-size); + color: token-utils.slot(list-item-trailing-icon-color); + width: token-utils.slot(list-item-trailing-icon-size); + height: token-utils.slot(list-item-trailing-icon-size); } .mdc-list-item--with-trailing-icon:hover & { - @include token-utils.create-token-slot(color, list-item-hover-trailing-icon-color); + color: token-utils.slot(list-item-hover-trailing-icon-color); } // For some reason this has an increased specificity just for the `color`. // Keeping it in place for now to reduce the amount of screenshot diffs. .mdc-list-item.mdc-list-item--with-trailing-meta & { - @include token-utils.create-token-slot(color, list-item-trailing-supporting-text-color); + color: token-utils.slot(list-item-trailing-supporting-text-color); } .mdc-list-item--selected.mdc-list-item--with-trailing-icon & { - @include token-utils.create-token-slot(color, list-item-selected-trailing-icon-color); + color: token-utils.slot(list-item-selected-trailing-icon-color); } } } @@ -213,20 +208,20 @@ white-space: nowrap; overflow: hidden; - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(color, list-item-label-text-color); - @include token-utils.create-token-slot(font-family, list-item-label-text-font); - @include token-utils.create-token-slot(line-height, list-item-label-text-line-height); - @include token-utils.create-token-slot(font-size, list-item-label-text-size); - @include token-utils.create-token-slot(font-weight, list-item-label-text-weight); - @include token-utils.create-token-slot(letter-spacing, list-item-label-text-tracking); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(list-item-label-text-color); + font-family: token-utils.slot(list-item-label-text-font); + line-height: token-utils.slot(list-item-label-text-line-height); + font-size: token-utils.slot(list-item-label-text-size); + font-weight: token-utils.slot(list-item-label-text-weight); + letter-spacing: token-utils.slot(list-item-label-text-tracking); .mdc-list-item:hover & { - @include token-utils.create-token-slot(color, list-item-hover-label-text-color); + color: token-utils.slot(list-item-hover-label-text-color); } .mdc-list-item:focus & { - @include token-utils.create-token-slot(color, list-item-focus-label-text-color); + color: token-utils.slot(list-item-focus-label-text-color); } } @@ -264,13 +259,13 @@ display: block; margin-top: 0; - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(color, list-item-supporting-text-color); - @include token-utils.create-token-slot(font-family, list-item-supporting-text-font); - @include token-utils.create-token-slot(line-height, list-item-supporting-text-line-height); - @include token-utils.create-token-slot(font-size, list-item-supporting-text-size); - @include token-utils.create-token-slot(font-weight, list-item-supporting-text-weight); - @include token-utils.create-token-slot(letter-spacing, list-item-supporting-text-tracking); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(list-item-supporting-text-color); + font-family: token-utils.slot(list-item-supporting-text-font); + line-height: token-utils.slot(list-item-supporting-text-line-height); + font-size: token-utils.slot(list-item-supporting-text-size); + font-weight: token-utils.slot(list-item-supporting-text-weight); + letter-spacing: token-utils.slot(list-item-supporting-text-tracking); } &::before { @@ -475,22 +470,22 @@ .mdc-list-item__primary-text, .mdc-list-item__secondary-text { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(opacity, list-item-disabled-label-text-opacity); + @include token-utils.use-tokens($token-prefix, $token-slots) { + opacity: token-utils.slot(list-item-disabled-label-text-opacity); } } &.mdc-list-item--with-leading-icon .mdc-list-item__start { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(color, list-item-disabled-leading-icon-color); - @include token-utils.create-token-slot(opacity, list-item-disabled-leading-icon-opacity); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(list-item-disabled-leading-icon-color); + opacity: token-utils.slot(list-item-disabled-leading-icon-opacity); } } &.mdc-list-item--with-trailing-icon .mdc-list-item__end { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(color, list-item-disabled-trailing-icon-color); - @include token-utils.create-token-slot(opacity, list-item-disabled-trailing-icon-opacity); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(list-item-disabled-trailing-icon-color); + opacity: token-utils.slot(list-item-disabled-trailing-icon-opacity); } } } diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index bd15d3628cf3..2f3e8ea78a34 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -1,14 +1,14 @@ @use 'sass:map'; +@use '../checkbox/m2-checkbox'; @use '../core/style/sass-utils'; -@use '../core/theming/theming'; @use '../core/theming/inspection'; +@use '../core/theming/theming'; @use '../core/theming/validation'; -@use '../core/tokens/m2/mat/list' as tokens-mat-list; -@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox; -@use '../core/tokens/m2/mat/radio' as tokens-mat-radio; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; +@use '../radio/m2-radio'; +@use './m2-list'; @mixin base($theme) { // Add default values for tokens not related to color, typography, or density. @@ -17,9 +17,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-list.$prefix, - tokens-mat-list.get-unthemable-tokens() - ); + m2-list.$prefix, m2-list.get-unthemable-tokens()); } } } @@ -30,25 +28,21 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-list.$prefix, - tokens-mat-list.get-color-tokens($theme) - ); + m2-list.$prefix, m2-list.get-color-tokens($theme)); } .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, primary) - ); + m2-radio.$prefix, m2-radio.get-color-tokens($theme, primary)); } .mat-accent { .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, accent) + m2-radio.$prefix, + m2-radio.get-color-tokens($theme, accent) ); } } @@ -57,28 +51,28 @@ .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, warn) + m2-radio.$prefix, + m2-radio.get-color-tokens($theme, warn) ); } } .mat-mdc-list-option { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-color-tokens($theme, primary) + m2-checkbox.$prefix, + m2-checkbox.get-color-tokens($theme, primary) ); } .mat-mdc-list-option.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-color-tokens($theme, accent) + m2-checkbox.$prefix, + m2-checkbox.get-color-tokens($theme, accent) ); } .mat-mdc-list-option.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-checkbox.$prefix, - tokens-mat-checkbox.get-color-tokens($theme, warn) + m2-checkbox.$prefix, + m2-checkbox.get-color-tokens($theme, warn) ); } @@ -116,17 +110,13 @@ @include sass-utils.current-selector-or-root() { // TODO: See if this can be removed @include token-utils.create-token-values-mixed( - tokens-mat-list.$prefix, - tokens-mat-list.get-density-tokens($theme) - ); + m2-list.$prefix, m2-list.get-density-tokens($theme)); } .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-density-tokens($theme) - ); + m2-radio.$prefix, m2-radio.get-density-tokens($theme)); } // TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based @@ -174,9 +164,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-list.$prefix, - tokens-mat-list.get-typography-tokens($theme) - ); + m2-list.$prefix, m2-list.get-typography-tokens($theme)); } // MDC does not have tokens for the subheader. @@ -192,8 +180,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-list.$prefix, - tokens: tokens-mat-list.get-token-slots(), + namespace: m2-list.$prefix, + tokens: m2-list.get-token-slots(), ), ); } @@ -225,6 +213,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-list-tokens: token-utils.get-tokens-for($tokens, tokens-mat-list.$prefix); - @include token-utils.create-token-values(tokens-mat-list.$prefix, $mat-list-tokens); + $mat-list-tokens: token-utils.get-tokens-for($tokens, m2-list.$prefix); + @include token-utils.create-token-values(m2-list.$prefix, $mat-list-tokens); } diff --git a/src/material/core/tokens/m2/mat/_list.scss b/src/material/list/_m2-list.scss similarity index 94% rename from src/material/core/tokens/m2/mat/_list.scss rename to src/material/list/_m2-list.scss index 721eaf636153..1d09b9c4c81b 100644 --- a/src/material/core/tokens/m2/mat/_list.scss +++ b/src/material/list/_m2-list.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../style/sass-utils'; -@use '../../../theming/inspection'; +@use '../core/tokens/m2-utils'; +@use '../core/style/sass-utils'; +@use '../core/theming/inspection'; @use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -126,8 +126,8 @@ $prefix: (mat, list); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_list.scss b/src/material/list/_m3-list.scss similarity index 97% rename from src/material/core/tokens/m3/mat/_list.scss rename to src/material/list/_m3-list.scss index 021837bd6e0f..fcd37d1aac15 100644 --- a/src/material/core/tokens/m3/mat/_list.scss +++ b/src/material/list/_m3-list.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, list); @@ -74,5 +74,5 @@ $prefix: (mat, list); list-item-two-line-container-height: if($exclude-hardcoded, null, 72px), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 7a2150cbd1fe..210396e57b57 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -1,5 +1,5 @@ @use '../core/style/layout-common'; -@use '../core/tokens/m2/mat/list' as tokens-mat-list; +@use './m2-list'; @use '../core/tokens/token-utils'; @use './list-item-hcm-indicator'; @use './list-inherited-structure'; @@ -7,28 +7,28 @@ @include list-inherited-structure.private-list-inherited-structural-styles; // Add additional slots for the MDC list tokens, needed in Angular Material. -@include token-utils.use-tokens(tokens-mat-list.$prefix, tokens-mat-list.get-token-slots()) { +@include token-utils.use-tokens(m2-list.$prefix, m2-list.get-token-slots()) { // MDC allows focus and hover colors to take precedence over disabled color. We add the disabled // color here with higher specificity so that the disabled color takes precedence. // TODO(mmalerba): Dicuss with MDC whether to change this in their code. .mdc-list-item.mdc-list-item--disabled .mdc-list-item__primary-text { - @include token-utils.create-token-slot(color, list-item-disabled-label-text-color); + color: token-utils.slot(list-item-disabled-label-text-color); } // We don't use MDC's state layer since it's tied in with their ripple. Instead we emit slots // for our own state layer. // TODO(mmalerba): Consider using MDC's ripple & state layer. .mdc-list-item:hover::before { - @include token-utils.create-token-slot(background-color, list-item-hover-state-layer-color); - @include token-utils.create-token-slot(opacity, list-item-hover-state-layer-opacity); + background-color: token-utils.slot(list-item-hover-state-layer-color); + opacity: token-utils.slot(list-item-hover-state-layer-opacity); } .mdc-list-item.mdc-list-item--disabled::before { - @include token-utils.create-token-slot(background-color, list-item-disabled-state-layer-color); - @include token-utils.create-token-slot(opacity, list-item-disabled-state-layer-opacity); + background-color: token-utils.slot(list-item-disabled-state-layer-color); + opacity: token-utils.slot(list-item-disabled-state-layer-opacity); } .mdc-list-item:focus::before { - @include token-utils.create-token-slot(background-color, list-item-focus-state-layer-color); - @include token-utils.create-token-slot(opacity, list-item-focus-state-layer-opacity); + background-color: token-utils.slot(list-item-focus-state-layer-color); + opacity: token-utils.slot(list-item-focus-state-layer-opacity); } // Apply the disabled opacity to the checkbox/radio indicators. @@ -37,7 +37,7 @@ .mdc-list-item--disabled { .mdc-radio, .mdc-checkbox { - @include token-utils.create-token-slot(opacity, list-item-disabled-label-text-opacity); + opacity: token-utils.slot(list-item-disabled-label-text-opacity); } } @@ -46,15 +46,15 @@ // TODO(mmalerba): We should try to change MDC's recommended DOM or change ours to match their // recommendation. .mdc-list-item--with-leading-avatar .mat-mdc-list-item-avatar { - @include token-utils.create-token-slot(border-radius, list-item-leading-avatar-shape); - @include token-utils.create-token-slot(background-color, list-item-leading-avatar-color); + border-radius: token-utils.slot(list-item-leading-avatar-shape); + background-color: token-utils.slot(list-item-leading-avatar-color); } // Set font-size of leading icon to same value as its width and height. Ensure icon scales to // "list-item-leading-icon-size" token. In Angular Material, the icon is on the same element as // ".mdc-list-item__start", rather than a child of ".mdc-list-item__start". .mat-mdc-list-item-icon { - @include token-utils.create-token-slot(font-size, list-item-leading-icon-size); + font-size: token-utils.slot(list-item-leading-icon-size); } } @@ -170,21 +170,18 @@ mat-action-list button { } } -@include token-utils.use-tokens(tokens-mat-list.$prefix, tokens-mat-list.get-token-slots()) { +@include token-utils.use-tokens(m2-list.$prefix, m2-list.get-token-slots()) { .mdc-list-item--with-leading-icon .mdc-list-item__start { - @include token-utils.create-token-slot(margin-inline-start, list-item-leading-icon-start-space); - @include token-utils.create-token-slot(margin-inline-end, list-item-leading-icon-end-space); + margin-inline-start: token-utils.slot(list-item-leading-icon-start-space); + margin-inline-end: token-utils.slot(list-item-leading-icon-end-space); } .mat-mdc-nav-list .mat-mdc-list-item { - @include token-utils.create-token-slot(border-radius, active-indicator-shape); - @include token-utils.create-token-slot( - --mat-focus-indicator-border-radius, - active-indicator-shape - ); + border-radius: token-utils.slot(active-indicator-shape); + --mat-focus-indicator-border-radius: #{token-utils.slot(active-indicator-shape)}; &.mdc-list-item--activated { - @include token-utils.create-token-slot(background-color, active-indicator-color); + background-color: token-utils.slot(active-indicator-color); } } } diff --git a/src/material/menu/BUILD.bazel b/src/material/menu/BUILD.bazel index 2532c265860a..7eb5018667a8 100644 --- a/src/material/menu/BUILD.bazel +++ b/src/material/menu/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-menu.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-menu.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_menu-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,12 +54,12 @@ sass_binary( name = "css", src = "menu.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:button_common", "//src/material/core/style:menu_common", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_menu.scss b/src/material/menu/_m2-menu.scss similarity index 87% rename from src/material/core/tokens/m2/mat/_menu.scss rename to src/material/menu/_m2-menu.scss index bf3e68248b23..dd4655c8835d 100644 --- a/src/material/core/tokens/m2/mat/_menu.scss +++ b/src/material/menu/_m2-menu.scss @@ -1,7 +1,7 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../style/elevation'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, menu); @@ -64,8 +64,8 @@ $prefix: (mat, menu); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_menu.scss b/src/material/menu/_m3-menu.scss similarity index 58% rename from src/material/core/tokens/m3/mat/_menu.scss rename to src/material/menu/_m3-menu.scss index 879c27f1c9ab..a23b6da9e49e 100644 --- a/src/material/core/tokens/m3/mat/_menu.scss +++ b/src/material/menu/_m3-menu.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; -@use '../../../style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, menu); @@ -13,15 +13,15 @@ $prefix: (mat, menu); /// @return {Map} A set of custom tokens for the mat-menu @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, item-label-text, label-large), + m3-utils.generate-typography-tokens($systems, item-label-text, label-large), ( container-shape: map.get($systems, md-sys-shape, corner-extra-small), divider-color: map.get($systems, md-sys-color, surface-variant), - divider-bottom-spacing: token-definition.hardcode(8px, $exclude-hardcoded), - divider-top-spacing: token-definition.hardcode(8px, $exclude-hardcoded), + divider-bottom-spacing: m3-utils.hardcode(8px, $exclude-hardcoded), + divider-top-spacing: m3-utils.hardcode(8px, $exclude-hardcoded), item-label-text-color: map.get($systems, md-sys-color, on-surface), item-icon-color: map.get($systems, md-sys-color, on-surface-variant), - item-icon-size: token-definition.hardcode(24px, $exclude-hardcoded), + item-icon-size: m3-utils.hardcode(24px, $exclude-hardcoded), item-hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) @@ -30,16 +30,16 @@ $prefix: (mat, menu); map.get($systems, md-sys-color, on-surface), $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) ), - item-spacing: token-definition.hardcode(12px, $exclude-hardcoded), - item-leading-spacing: token-definition.hardcode(12px, $exclude-hardcoded), - item-trailing-spacing: token-definition.hardcode(12px, $exclude-hardcoded), - item-with-icon-leading-spacing: token-definition.hardcode(12px, $exclude-hardcoded), - item-with-icon-trailing-spacing: token-definition.hardcode(12px, $exclude-hardcoded), + item-spacing: m3-utils.hardcode(12px, $exclude-hardcoded), + item-leading-spacing: m3-utils.hardcode(12px, $exclude-hardcoded), + item-trailing-spacing: m3-utils.hardcode(12px, $exclude-hardcoded), + item-with-icon-leading-spacing: m3-utils.hardcode(12px, $exclude-hardcoded), + item-with-icon-trailing-spacing: m3-utils.hardcode(12px, $exclude-hardcoded), container-color: map.get($systems, md-sys-color, surface-container), - container-elevation-shadow: token-definition.hardcode( + container-elevation-shadow: m3-utils.hardcode( elevation.get-box-shadow(2), $exclude-hardcoded), ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index 6bad25053474..68c8d8c1a56d 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../core/tokens/m2/mat/menu' as tokens-mat-menu; +@use './m2-menu'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @use '../core/theming/theming'; @@ -13,9 +13,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-menu.$prefix, - tokens-mat-menu.get-unthemable-tokens() - ); + m2-menu.$prefix, m2-menu.get-unthemable-tokens()); } } } @@ -26,9 +24,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-menu.$prefix, - tokens-mat-menu.get-color-tokens($theme) - ); + m2-menu.$prefix, m2-menu.get-color-tokens($theme)); } } } @@ -39,9 +35,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-menu.$prefix, - tokens-mat-menu.get-typography-tokens($theme) - ); + m2-menu.$prefix, m2-menu.get-typography-tokens($theme)); } } } @@ -57,8 +51,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-menu.$prefix, - tokens: tokens-mat-menu.get-token-slots(), + namespace: m2-menu.$prefix, + tokens: m2-menu.get-token-slots(), ), ); } @@ -92,8 +86,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-menu.$prefix, - map.get($tokens, tokens-mat-menu.$prefix) + m2-menu.$prefix, + map.get($tokens, m2-menu.$prefix) ); } } diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss index b5544945ff9c..517f0626b524 100644 --- a/src/material/menu/menu.scss +++ b/src/material/menu/menu.scss @@ -1,10 +1,13 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/menu' as tokens-mat-menu; +@use './m2-menu'; @use '../core/tokens/token-utils'; @use '../core/style/menu-common'; @use '../core/style/button-common'; @use '../core/style/vendor-prefixes'; +$token-prefix: m2-menu.$prefix; +$token-slots: m2-menu.get-token-slots(); + // Prevent rendering mat-menu as it can affect the flex layout. mat-menu { display: none; @@ -21,12 +24,12 @@ mat-menu { flex: 1; white-space: normal; - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { - @include token-utils.create-token-slot(font-family, item-label-text-font); - @include token-utils.create-token-slot(line-height, item-label-text-line-height); - @include token-utils.create-token-slot(font-size, item-label-text-size); - @include token-utils.create-token-slot(letter-spacing, item-label-text-tracking); - @include token-utils.create-token-slot(font-weight, item-label-text-weight); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-family: token-utils.slot(item-label-text-font); + line-height: token-utils.slot(item-label-text-line-height); + font-size: token-utils.slot(item-label-text-size); + letter-spacing: token-utils.slot(item-label-text-tracking); + font-weight: token-utils.slot(item-label-text-weight); } } } @@ -59,10 +62,10 @@ mat-menu { outline: 0; animation: _mat-menu-enter 120ms cubic-bezier(0, 0, 0.2, 1); - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { - @include token-utils.create-token-slot(border-radius, container-shape); - @include token-utils.create-token-slot(background-color, container-color); - @include token-utils.create-token-slot(box-shadow, container-elevation-shadow); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-radius: token-utils.slot(container-shape); + background-color: token-utils.slot(container-color); + box-shadow: token-utils.slot(container-elevation-shadow); } // TODO(crisbeto): we don't need this for anything, but it was there when @@ -103,13 +106,10 @@ mat-menu { .mat-divider { // Use margin instead of padding since divider uses border-top to render out the line. - @include token-utils.use-tokens( - tokens-mat-menu.$prefix, - tokens-mat-menu.get-token-slots() - ) { - color: token-utils.get-token-variable(divider-color); - margin-bottom: token-utils.get-token-variable(divider-bottom-spacing); - margin-top: token-utils.get-token-variable(divider-top-spacing); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(divider-color); + margin-bottom: token-utils.slot(divider-bottom-spacing); + margin-top: token-utils.slot(divider-top-spacing); } } } @@ -135,43 +135,43 @@ mat-menu { margin: 0; // Resolves an issue where buttons have an extra 2px margin on Safari. min-height: 48px; - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { - @include token-utils.create-token-slot(padding-left, item-leading-spacing); - @include token-utils.create-token-slot(padding-right, item-trailing-spacing); + @include token-utils.use-tokens($token-prefix, $token-slots) { + padding-left: token-utils.slot(item-leading-spacing); + padding-right: token-utils.slot(item-trailing-spacing); } @include button-common.reset; - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { $icons-selector: '.material-icons, mat-icon, [matButtonIcon]'; [dir='rtl'] & { - @include token-utils.create-token-slot(padding-left, item-trailing-spacing); - @include token-utils.create-token-slot(padding-right, item-leading-spacing); + padding-left: token-utils.slot(item-trailing-spacing); + padding-right: token-utils.slot(item-leading-spacing); } &:has(#{$icons-selector}) { - @include token-utils.create-token-slot(padding-left, item-with-icon-leading-spacing); - @include token-utils.create-token-slot(padding-right, item-with-icon-trailing-spacing); + padding-left: token-utils.slot(item-with-icon-leading-spacing); + padding-right: token-utils.slot(item-with-icon-trailing-spacing); } [dir='rtl'] &:has(#{$icons-selector}) { - @include token-utils.create-token-slot(padding-left, item-with-icon-trailing-spacing); - @include token-utils.create-token-slot(padding-right, item-with-icon-leading-spacing); + padding-left: token-utils.slot(item-with-icon-trailing-spacing); + padding-right: token-utils.slot(item-with-icon-leading-spacing); } } - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { // The class selector isn't specific enough to overide the link pseudo selectors so we need // to target them specifically, otherwise the item color might be overwritten by the user // agent resets of the app. &, &:visited, &:link { - @include token-utils.create-token-slot(color, item-label-text-color); + color: token-utils.slot(item-label-text-color); } .mat-icon-no-color, .mat-mdc-menu-submenu-icon { - @include token-utils.create-token-slot(color, item-icon-color); + color: token-utils.slot(item-icon-color); } } @@ -201,10 +201,10 @@ mat-menu { .mat-icon { flex-shrink: 0; - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { - margin-right: token-utils.get-token-variable(item-spacing); - height: token-utils.get-token-variable(item-icon-size); - width: token-utils.get-token-variable(item-icon-size); + @include token-utils.use-tokens($token-prefix, $token-slots) { + margin-right: token-utils.slot(item-spacing); + height: token-utils.slot(item-icon-size); + width: token-utils.slot(item-icon-size); } } @@ -213,22 +213,22 @@ mat-menu { .mat-icon { margin-right: 0; - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { - margin-left: token-utils.get-token-variable(item-spacing); + @include token-utils.use-tokens($token-prefix, $token-slots) { + margin-left: token-utils.slot(item-spacing); } } } &:not([disabled]) { - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { &:hover { - @include token-utils.create-token-slot(background-color, item-hover-state-layer-color); + background-color: token-utils.slot(item-hover-state-layer-color); } &.cdk-program-focused, &.cdk-keyboard-focused, &.mat-mdc-menu-item-highlighted { - @include token-utils.create-token-slot(background-color, item-focus-state-layer-color); + background-color: token-utils.slot(item-focus-state-layer-color); } } } @@ -243,10 +243,10 @@ mat-menu { } .mat-mdc-menu-submenu-icon { - @include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { @include menu-common.item-submenu-icon( - token-utils.get-token-variable(item-spacing), - token-utils.get-token-variable(item-icon-size) + token-utils.slot(item-spacing), + token-utils.slot(item-icon-size) ); } } diff --git a/src/material/paginator/BUILD.bazel b/src/material/paginator/BUILD.bazel index f7c6809140a8..2eba7c001b49 100644 --- a/src/material/paginator/BUILD.bazel +++ b/src/material/paginator/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-paginator.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-paginator.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_paginator-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,10 +54,10 @@ sass_binary( name = "css", src = "paginator.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_paginator.scss b/src/material/paginator/_m2-paginator.scss similarity index 90% rename from src/material/core/tokens/m2/mat/_paginator.scss rename to src/material/paginator/_m2-paginator.scss index 05d2c28f9756..971e20b8aae7 100644 --- a/src/material/core/tokens/m2/mat/_paginator.scss +++ b/src/material/paginator/_m2-paginator.scss @@ -1,9 +1,9 @@ @use 'sass:math'; @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, paginator); @@ -81,8 +81,8 @@ $prefix: (mat, paginator); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_paginator.scss b/src/material/paginator/_m3-paginator.scss similarity index 81% rename from src/material/core/tokens/m3/mat/_paginator.scss rename to src/material/paginator/_m3-paginator.scss index 1d9119378d58..ca2ad1e85995 100644 --- a/src/material/core/tokens/m3/mat/_paginator.scss +++ b/src/material/paginator/_m3-paginator.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, paginator); @@ -12,7 +12,7 @@ $prefix: (mat, paginator); /// @return {Map} A set of custom tokens for the mat-paginator @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, container-text, body-small), + m3-utils.generate-typography-tokens($systems, container-text, body-small), ( container-text-color: map.get($systems, md-sys-color, on-surface), container-background-color: map.get($systems, md-sys-color, surface), @@ -23,5 +23,5 @@ $prefix: (mat, paginator); ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index c2290940a82b..887ddd382ad3 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @use 'sass:meta'; -@use '../core/tokens/m2/mat/paginator' as tokens-mat-paginator; +@use './m2-paginator'; @use '../core/style/sass-utils'; @use '../core/typography/typography'; @use '../core/theming/theming'; @@ -21,9 +21,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-color-tokens($theme) - ); + m2-paginator.$prefix, m2-paginator.get-color-tokens($theme)); } } } @@ -34,9 +32,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-typography-tokens($theme) - ); + m2-paginator.$prefix, m2-paginator.get-typography-tokens($theme)); } } } @@ -55,9 +51,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-density-tokens($theme) - ); + m2-paginator.$prefix, m2-paginator.get-density-tokens($theme)); } } } @@ -66,8 +60,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-paginator.$prefix, - tokens: tokens-mat-paginator.get-token-slots(), + namespace: m2-paginator.$prefix, + tokens: m2-paginator.get-token-slots(), ), ); } @@ -101,8 +95,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-paginator.$prefix, - map.get($tokens, tokens-mat-paginator.$prefix) + m2-paginator.$prefix, + map.get($tokens, m2-paginator.$prefix) ); } } diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss index ab3e9e9b06ec..f25fe623a386 100644 --- a/src/material/paginator/paginator.scss +++ b/src/material/paginator/paginator.scss @@ -1,5 +1,5 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/paginator' as tokens-mat-paginator; +@use './m2-paginator'; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; @@ -14,34 +14,29 @@ $touch-target-height: 48px; $range-label-margin: 0 32px 0 24px; $button-icon-size: 28px; +$token-prefix: m2-paginator.$prefix; +$token-slots: m2-paginator.get-token-slots(); + .mat-mdc-paginator { display: block; - @include token-utils.use-tokens( - tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-token-slots() - ) { + @include token-utils.use-tokens($token-prefix, $token-slots) { @include vendor-prefixes.smooth-font(); - @include token-utils.create-token-slot(color, container-text-color); - @include token-utils.create-token-slot(background-color, container-background-color); - @include token-utils.create-token-slot(font-family, container-text-font); - @include token-utils.create-token-slot(line-height, container-text-line-height); - @include token-utils.create-token-slot(font-size, container-text-size); - @include token-utils.create-token-slot(font-weight, container-text-weight); - @include token-utils.create-token-slot(letter-spacing, container-text-tracking); + color: token-utils.slot(container-text-color); + background-color: token-utils.slot(container-background-color); + font-family: token-utils.slot(container-text-font); + line-height: token-utils.slot(container-text-line-height); + font-size: token-utils.slot(container-text-size); + font-weight: token-utils.slot(container-text-weight); + letter-spacing: token-utils.slot(container-text-tracking); // Apply custom form-field density for paginator. - @include token-utils.create-token-slot( - --mat-form-field-container-height, - form-field-container-height - ); - @include token-utils.create-token-slot( - --mat-form-field-container-vertical-padding, - form-field-container-vertical-padding - ); + --mat-form-field-container-height: #{token-utils.slot(form-field-container-height)}; + --mat-form-field-container-vertical-padding: #{ + token-utils.slot(form-field-container-vertical-padding)}; .mat-mdc-select-value { - @include token-utils.create-token-slot(font-size, select-trigger-text-size); + font-size: #{token-utils.slot(select-trigger-text-size)}; } } @@ -72,11 +67,8 @@ $button-icon-size: 28px; flex-wrap: wrap; width: 100%; - @include token-utils.use-tokens( - tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-token-slots() - ) { - @include token-utils.create-token-slot(min-height, container-size); + @include token-utils.use-tokens($token-prefix, $token-slots) { + min-height: token-utils.slot(container-size); } } @@ -113,14 +105,11 @@ $button-icon-size: 28px; display: inline-block; width: $button-icon-size; - @include token-utils.use-tokens( - tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-token-slots() - ) { - @include token-utils.create-token-slot(fill, enabled-icon-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + fill: token-utils.slot(enabled-icon-color); .mat-mdc-icon-button[aria-disabled] & { - @include token-utils.create-token-slot(fill, disabled-icon-color); + fill: token-utils.slot(disabled-icon-color); } } @@ -146,11 +135,8 @@ $button-icon-size: 28px; } .mat-mdc-paginator-touch-target { - @include token-utils.use-tokens( - tokens-mat-paginator.$prefix, - tokens-mat-paginator.get-token-slots() - ) { - @include token-utils.create-token-slot(display, touch-target-display); + @include token-utils.use-tokens($token-prefix, $token-slots) { + display: token-utils.slot(touch-target-display); } position: absolute; diff --git a/src/material/progress-bar/BUILD.bazel b/src/material/progress-bar/BUILD.bazel index e13a947e3d7a..6392feacb8d8 100644 --- a/src/material/progress-bar/BUILD.bazel +++ b/src/material/progress-bar/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-progress-bar.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-progress-bar.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_progress-bar-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -29,10 +53,10 @@ sass_binary( name = "css", src = "progress-bar.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_linear-progress.scss b/src/material/progress-bar/_m2-progress-bar.scss similarity index 84% rename from src/material/core/tokens/m2/mat/_linear-progress.scss rename to src/material/progress-bar/_m2-progress-bar.scss index 35a77a14a3c7..eb2831110ab4 100644 --- a/src/material/core/tokens/m2/mat/_linear-progress.scss +++ b/src/material/progress-bar/_m2-progress-bar.scss @@ -1,6 +1,6 @@ -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; @use 'sass:color'; @use 'sass:meta'; @@ -53,8 +53,8 @@ $prefix: (mat, linear-progress); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_linear-progress.scss b/src/material/progress-bar/_m3-progress-bar.scss similarity index 91% rename from src/material/core/tokens/m3/mat/_linear-progress.scss rename to src/material/progress-bar/_m3-progress-bar.scss index d52a66f5d9c2..2e93f60856bb 100644 --- a/src/material/core/tokens/m3/mat/_linear-progress.scss +++ b/src/material/progress-bar/_m3-progress-bar.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, linear-progress); @@ -34,5 +34,5 @@ $prefix: (mat, linear-progress); ), ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss index 30c8479e8077..50d554be6fa8 100644 --- a/src/material/progress-bar/_progress-bar-theme.scss +++ b/src/material/progress-bar/_progress-bar-theme.scss @@ -3,7 +3,7 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/linear-progress' as tokens-mat-linear-progress; +@use './m2-progress-bar'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-progress-bar. @@ -15,8 +15,8 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-unthemable-tokens() + m2-progress-bar.$prefix, + m2-progress-bar.get-unthemable-tokens() ); } } @@ -24,8 +24,8 @@ @mixin _palette-styles($theme, $palette-name) { @include token-utils.create-token-values-mixed( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-color-tokens($theme, $palette-name) + m2-progress-bar.$prefix, + m2-progress-bar.get-color-tokens($theme, $palette-name) ); } @@ -66,8 +66,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-linear-progress.$prefix, - tokens: tokens-mat-linear-progress.get-token-slots(), + namespace: m2-progress-bar.$prefix, + tokens: m2-progress-bar.get-token-slots(), ), ); } @@ -106,6 +106,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $tokens: token-utils.get-tokens-for($tokens, tokens-mat-linear-progress.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-linear-progress.$prefix, $tokens); + $tokens: token-utils.get-tokens-for($tokens, m2-progress-bar.$prefix, $options...); + @include token-utils.create-token-values(m2-progress-bar.$prefix, $tokens); } diff --git a/src/material/progress-bar/progress-bar.scss b/src/material/progress-bar/progress-bar.scss index 903df4740530..f30c6fb8a5e5 100644 --- a/src/material/progress-bar/progress-bar.scss +++ b/src/material/progress-bar/progress-bar.scss @@ -1,8 +1,11 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/linear-progress' as tokens-mat-linear-progress; +@use './m2-progress-bar'; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; +$token-prefix: m2-progress-bar.$prefix; +$token-slots: m2-progress-bar.get-token-slots(); + .mat-mdc-progress-bar { // Explicitly set to `block` since the browser defaults custom elements to `inline`. display: block; @@ -41,12 +44,9 @@ overflow-x: hidden; transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); - @include token-utils.use-tokens( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-token-slots() - ) { - $track-variable: token-utils.get-token-variable(track-height); - $indicator-height-variable: token-utils.get-token-variable(active-indicator-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + $track-variable: token-utils.slot(track-height); + $indicator-height-variable: token-utils.slot(active-indicator-height); height: max(#{$track-variable}, #{$indicator-height-variable}); } @@ -65,11 +65,8 @@ transform-origin: top left; transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); - @include token-utils.use-tokens( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-token-slots() - ) { - @include token-utils.create-token-slot(height, active-indicator-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(active-indicator-height); } .mdc-linear-progress--indeterminate & { @@ -89,12 +86,9 @@ animation: none; border-top-style: solid; - @include token-utils.use-tokens( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-token-slots() - ) { - @include token-utils.create-token-slot(border-color, active-indicator-color); - @include token-utils.create-token-slot(border-top-width, active-indicator-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-color: token-utils.slot(active-indicator-color); + border-top-width: token-utils.slot(active-indicator-height); } } @@ -107,12 +101,9 @@ width: 100%; overflow: hidden; - @include token-utils.use-tokens( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-token-slots() - ) { - @include token-utils.create-token-slot(height, track-height); - @include token-utils.create-token-slot(border-radius, track-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(track-height); + border-radius: token-utils.slot(track-shape); } } @@ -128,11 +119,8 @@ transform: rotate(180deg); animation: mdc-linear-progress-buffering 250ms infinite linear; - @include token-utils.use-tokens( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-token-slots() - ) { - @include token-utils.create-token-slot(background-color, track-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(track-color); } @include cdk.high-contrast { @@ -149,11 +137,8 @@ flex: 0 1 100%; transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); - @include token-utils.use-tokens( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-token-slots() - ) { - @include token-utils.create-token-slot(background-color, track-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(track-color); } } @@ -214,11 +199,8 @@ @keyframes mdc-linear-progress-buffering { from { - @include token-utils.use-tokens( - tokens-mat-linear-progress.$prefix, - tokens-mat-linear-progress.get-token-slots() - ) { - $track-variable: token-utils.get-token-variable(track-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + $track-variable: token-utils.slot(track-height); transform: rotate(180deg) translateX(calc(#{$track-variable} * -2.5)); } } diff --git a/src/material/progress-spinner/BUILD.bazel b/src/material/progress-spinner/BUILD.bazel index 779b25c40dca..0f226948c7d8 100644 --- a/src/material/progress-spinner/BUILD.bazel +++ b/src/material/progress-spinner/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-progress-spinner.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-progress-spinner.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_progress-spinner-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -29,9 +53,9 @@ sass_binary( name = "css", src = "progress-spinner.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_circular-progress.scss b/src/material/progress-spinner/_m2-progress-spinner.scss similarity index 80% rename from src/material/core/tokens/m2/mat/_circular-progress.scss rename to src/material/progress-spinner/_m2-progress-spinner.scss index 79831ca361ae..34cddd3331aa 100644 --- a/src/material/core/tokens/m2/mat/_circular-progress.scss +++ b/src/material/progress-spinner/_m2-progress-spinner.scss @@ -1,6 +1,6 @@ -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, circular-progress); @@ -40,8 +40,8 @@ $prefix: (mat, circular-progress); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_circular-progress.scss b/src/material/progress-spinner/_m3-progress-spinner.scss similarity index 93% rename from src/material/core/tokens/m3/mat/_circular-progress.scss rename to src/material/progress-spinner/_m3-progress-spinner.scss index 8d4ff8df5d78..1ed88a9a13bf 100644 --- a/src/material/core/tokens/m3/mat/_circular-progress.scss +++ b/src/material/progress-spinner/_m3-progress-spinner.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, circular-progress); @@ -29,6 +29,6 @@ $prefix: (mat, circular-progress); ) ); - @return token-definition.namespace-tokens( + @return m3-utils.namespace( $prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss index dd013ca317d2..081205b2600d 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -3,7 +3,7 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/circular-progress' as tokens-mat-circular-progress; +@use './m2-progress-spinner'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-progress-spinner. @@ -14,8 +14,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-circular-progress.$prefix, - tokens-mat-circular-progress.get-unthemable-tokens() + m2-progress-spinner.$prefix, + m2-progress-spinner.get-unthemable-tokens() ); } } @@ -32,21 +32,21 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-circular-progress.$prefix, - tokens-mat-circular-progress.get-color-tokens($theme, primary) + m2-progress-spinner.$prefix, + m2-progress-spinner.get-color-tokens($theme, primary) ); .mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-circular-progress.$prefix, - tokens-mat-circular-progress.get-color-tokens($theme, accent) + m2-progress-spinner.$prefix, + m2-progress-spinner.get-color-tokens($theme, accent) ); } .mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-circular-progress.$prefix, - tokens-mat-circular-progress.get-color-tokens($theme, warn) + m2-progress-spinner.$prefix, + m2-progress-spinner.get-color-tokens($theme, warn) ); } } @@ -67,8 +67,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-circular-progress.$prefix, - tokens: tokens-mat-circular-progress.get-token-slots(), + namespace: m2-progress-spinner.$prefix, + tokens: m2-progress-spinner.get-token-slots(), ), ); } @@ -109,11 +109,11 @@ ); $mdc-circular-progress-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-circular-progress.$prefix, + m2-progress-spinner.$prefix, $options... ); @include token-utils.create-token-values( - tokens-mat-circular-progress.$prefix, + m2-progress-spinner.$prefix, $mdc-circular-progress-tokens ); } diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss index 5429c81370b4..574cf184c4b6 100644 --- a/src/material/progress-spinner/progress-spinner.scss +++ b/src/material/progress-spinner/progress-spinner.scss @@ -1,6 +1,6 @@ @use '@angular/cdk'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/circular-progress' as tokens-mat-circular-progress; +@use './m2-progress-spinner'; .mat-mdc-progress-spinner { // Explicitly set to `block` since the browser defaults custom elements to `inline`. @@ -18,10 +18,10 @@ circle { @include token-utils.use-tokens( - tokens-mat-circular-progress.$prefix, - tokens-mat-circular-progress.get-token-slots() + m2-progress-spinner.$prefix, + m2-progress-spinner.get-token-slots() ) { - @include token-utils.create-token-slot(stroke-width, active-indicator-width); + stroke-width: token-utils.slot(active-indicator-width); } } @@ -94,10 +94,10 @@ .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle, .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic { @include token-utils.use-tokens( - tokens-mat-circular-progress.$prefix, - tokens-mat-circular-progress.get-token-slots() + m2-progress-spinner.$prefix, + m2-progress-spinner.get-token-slots() ) { - @include token-utils.create-token-slot(stroke, active-indicator-color); + stroke: token-utils.slot(active-indicator-color); } @include cdk.high-contrast { diff --git a/src/material/radio/BUILD.bazel b/src/material/radio/BUILD.bazel index c12b7532dc0a..fde57fd2bfdb 100644 --- a/src/material/radio/BUILD.bazel +++ b/src/material/radio/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-radio.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-radio.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_radio-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,8 +54,8 @@ sass_library( name = "radio_common", srcs = ["_radio-common.scss"], deps = [ + ":m2", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -39,10 +63,10 @@ sass_binary( name = "css", src = "radio.scss", deps = [ + ":m2", ":radio_common", "//src/material/core/style:layout_common", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_radio.scss b/src/material/radio/_m2-radio.scss similarity index 88% rename from src/material/core/tokens/m2/mat/_radio.scss rename to src/material/radio/_m2-radio.scss index 2deb727fcdbb..55fa86124b7d 100644 --- a/src/material/core/tokens/m2/mat/_radio.scss +++ b/src/material/radio/_m2-radio.scss @@ -1,10 +1,10 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../m2/palette' as m2-palette; -@use '../../../m2/theming' as m2-theming; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/m2/palette' as m2-palette; +@use '../core/m2/theming' as m2-theming; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, radio); @@ -78,8 +78,8 @@ $prefix: (mat, radio); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_radio.scss b/src/material/radio/_m3-radio.scss similarity index 95% rename from src/material/core/tokens/m3/mat/_radio.scss rename to src/material/radio/_m3-radio.scss index 1d37880292e6..b1f01204edf8 100644 --- a/src/material/core/tokens/m3/mat/_radio.scss +++ b/src/material/radio/_m3-radio.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, radio); @@ -62,5 +62,5 @@ $prefix: (mat, radio); ), ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/radio/_radio-common.scss b/src/material/radio/_radio-common.scss index 7d12af0ff0a7..c0836cd35482 100644 --- a/src/material/radio/_radio-common.scss +++ b/src/material/radio/_radio-common.scss @@ -1,8 +1,11 @@ -@use '../core/tokens/m2/mat/radio' as tokens-mat-radio; +@use './m2-radio'; @use '../core/tokens/token-utils'; $_icon-size: 20px; +$token-prefix: m2-radio.$prefix; +$token-slots: m2-radio.get-token-slots(); + @function _enter-transition($name) { @return $name 90ms cubic-bezier(0, 0, 0.2, 1); } @@ -13,8 +16,6 @@ $_icon-size: 20px; // Structural styles for a radio button. Shared with the selection list. @mixin radio-structure($is-interactive) { - $tokens: tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots(); - .mdc-radio { display: inline-block; position: relative; @@ -28,8 +29,8 @@ $_icon-size: 20px; // Removing it will likely lead to screenshot diffs. will-change: opacity, transform, border-color, color; - @include token-utils.use-tokens($tokens...) { - $size-token: token-utils.get-token-variable(state-layer-size); + @include token-utils.use-tokens($token-prefix, $token-slots) { + $size-token: token-utils.slot(state-layer-size); padding: calc((#{$size-token} - #{$_icon-size}) / 2); } @@ -44,8 +45,8 @@ $_icon-size: 20px; &:hover > .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background { > .mdc-radio__outer-circle { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(border-color, unselected-hover-icon-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-color: token-utils.slot(unselected-hover-icon-color); } } } @@ -53,16 +54,16 @@ $_icon-size: 20px; &:hover > .mdc-radio__native-control:enabled:checked + .mdc-radio__background { > .mdc-radio__outer-circle, > .mdc-radio__inner-circle { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(border-color, selected-hover-icon-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-color: token-utils.slot(selected-hover-icon-color); } } } &:active > .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background { > .mdc-radio__outer-circle { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(border-color, unselected-pressed-icon-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-color: token-utils.slot(unselected-pressed-icon-color); } } } @@ -70,8 +71,8 @@ $_icon-size: 20px; &:active > .mdc-radio__native-control:enabled:checked + .mdc-radio__background { > .mdc-radio__outer-circle, > .mdc-radio__inner-circle { - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(border-color, selected-pressed-icon-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-color: token-utils.slot(selected-pressed-icon-color); } } } @@ -94,8 +95,8 @@ $_icon-size: 20px; content: ''; transition: _exit-transition(opacity), _exit-transition(transform); - @include token-utils.use-tokens($tokens...) { - $size: token-utils.get-token-variable(state-layer-size); + @include token-utils.use-tokens($token-prefix, $token-slots) { + $size: token-utils.slot(state-layer-size); $offset: calc(-1 * (#{$size} - #{$_icon-size}) / 2); width: $size; height: $size; @@ -143,9 +144,9 @@ $_icon-size: 20px; cursor: inherit; z-index: 1; - @include token-utils.use-tokens($tokens...) { - @include token-utils.create-token-slot(width, state-layer-size); - @include token-utils.create-token-slot(height, state-layer-size); + @include token-utils.use-tokens($token-prefix, $token-slots) { + width: token-utils.slot(state-layer-size); + height: token-utils.slot(state-layer-size); } &:checked, &:disabled { @@ -171,10 +172,10 @@ $_icon-size: 20px; } &:disabled { - @include token-utils.use-tokens($tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { &:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle { - @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color); - @include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity); + border-color: token-utils.slot(disabled-unselected-icon-color); + opacity: token-utils.slot(disabled-unselected-icon-opacity); } + .mdc-radio__background { @@ -182,23 +183,23 @@ $_icon-size: 20px; > .mdc-radio__inner-circle, > .mdc-radio__outer-circle { - @include token-utils.create-token-slot(border-color, disabled-selected-icon-color); - @include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity); + border-color: token-utils.slot(disabled-selected-icon-color); + opacity: token-utils.slot(disabled-selected-icon-opacity); } } } } &:enabled { - @include token-utils.use-tokens($tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { &:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle { - @include token-utils.create-token-slot(border-color, unselected-icon-color); + border-color: token-utils.slot(unselected-icon-color); } &:checked + .mdc-radio__background { > .mdc-radio__outer-circle, > .mdc-radio__inner-circle { - @include token-utils.create-token-slot(border-color, selected-icon-color); + border-color: token-utils.slot(selected-icon-color); } } @@ -206,7 +207,7 @@ $_icon-size: 20px; &:focus:checked + .mdc-radio__background { > .mdc-radio__inner-circle, > .mdc-radio__outer-circle { - @include token-utils.create-token-slot(border-color, selected-focus-icon-color); + border-color: token-utils.slot(selected-focus-icon-color); } } } @@ -223,12 +224,12 @@ $_icon-size: 20px; &.mat-mdc-radio-disabled-interactive .mdc-radio--disabled { pointer-events: auto; - @include token-utils.use-tokens($tokens...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { // stylelint-disable selector-combinator-space-before .mdc-radio__native-control:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle { - @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color); - @include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity); + border-color: token-utils.slot(disabled-unselected-icon-color); + opacity: token-utils.slot(disabled-unselected-icon-opacity); } // stylelint-enable selector-combinator-space-before @@ -237,8 +238,8 @@ $_icon-size: 20px; .mdc-radio__native-control + .mdc-radio__background { > .mdc-radio__inner-circle, > .mdc-radio__outer-circle { - @include token-utils.create-token-slot(border-color, disabled-selected-icon-color); - @include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity); + border-color: token-utils.slot(disabled-selected-icon-color); + opacity: token-utils.slot(disabled-selected-icon-opacity); } } } diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index 3617c2dbd255..ac4d40e166b0 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -4,7 +4,7 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mat/radio' as tokens-mat-radio; +@use './m2-radio'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-radio. @@ -15,9 +15,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-unthemable-tokens() - ); + m2-radio.$prefix, m2-radio.get-unthemable-tokens()); } } } @@ -34,22 +32,22 @@ .mat-mdc-radio-button { &.mat-primary { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, primary) + m2-radio.$prefix, + m2-radio.get-color-tokens($theme, primary) ); } &.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme) + m2-radio.$prefix, + m2-radio.get-color-tokens($theme) ); } &.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, warn) + m2-radio.$prefix, + m2-radio.get-color-tokens($theme, warn) ); } } @@ -64,8 +62,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-typography-tokens($theme) + m2-radio.$prefix, + m2-radio.get-typography-tokens($theme) ); } } @@ -81,8 +79,8 @@ @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-radio.$prefix, - tokens-mat-radio.get-density-tokens($theme) + m2-radio.$prefix, + m2-radio.get-density-tokens($theme) ); } } @@ -92,8 +90,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-radio.$prefix, - tokens: tokens-mat-radio.get-token-slots(), + namespace: m2-radio.$prefix, + tokens: m2-radio.get-token-slots(), ), ); } @@ -132,6 +130,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mat-radio.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens); + $mat-radio-tokens: token-utils.get-tokens-for($tokens, m2-radio.$prefix, $options...); + @include token-utils.create-token-values(m2-radio.$prefix, $mat-radio-tokens); } diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss index 423f15ab224b..a240eb54a884 100644 --- a/src/material/radio/radio.scss +++ b/src/material/radio/radio.scss @@ -1,44 +1,47 @@ -@use '../core/tokens/m2/mat/radio' as tokens-mat-radio; +@use './m2-radio'; @use '../core/tokens/token-utils'; @use '../core/style/layout-common'; @use './radio-common'; +$token-prefix: m2-radio.$prefix; +$token-slots: m2-radio.get-token-slots(); + .mat-mdc-radio-button { -webkit-tap-highlight-color: transparent; @include radio-common.radio-structure(true); @include radio-common.radio-noop-animations(); - @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-radio__background::before { - @include token-utils.create-token-slot(background-color, ripple-color); + background-color: token-utils.slot(ripple-color); } &.mat-mdc-radio-checked { .mat-ripple-element, .mdc-radio__background::before { - @include token-utils.create-token-slot(background-color, checked-ripple-color); + background-color: token-utils.slot(checked-ripple-color); } } &.mat-mdc-radio-disabled-interactive .mdc-radio--disabled { .mat-ripple-element, .mdc-radio__background::before { - @include token-utils.create-token-slot(background-color, ripple-color); + background-color: token-utils.slot(ripple-color); } } .mat-internal-form-field { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(font-weight, label-text-weight); + color: token-utils.slot(label-text-color); + font-family: token-utils.slot(label-text-font); + line-height: token-utils.slot(label-text-line-height); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + font-weight: token-utils.slot(label-text-weight); } .mdc-radio--disabled + label { - @include token-utils.create-token-slot(color, disabled-label-color); + color: token-utils.slot(disabled-label-color); } } @@ -60,10 +63,10 @@ // We don't inherit the border focus style from MDC since we don't use their ripple. // Instead we need to replicate it here. - @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-radio > .mdc-radio__native-control:focus:enabled:not(:checked) { & ~ .mdc-radio__background > .mdc-radio__outer-circle { - @include token-utils.create-token-slot(border-color, unselected-focus-icon-color); + border-color: token-utils.slot(unselected-focus-icon-color); } } } @@ -94,8 +97,8 @@ width: 48px; transform: translate(-50%, -50%); - @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) { - @include token-utils.create-token-slot(display, touch-target-display); + @include token-utils.use-tokens($token-prefix, $token-slots) { + display: token-utils.slot(touch-target-display); } [dir='rtl'] & { diff --git a/src/material/select/BUILD.bazel b/src/material/select/BUILD.bazel index e6386b506bfa..7bd8a4fb2d7b 100644 --- a/src/material/select/BUILD.bazel +++ b/src/material/select/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-select.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-select.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_select-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,11 +54,11 @@ sass_binary( name = "css", src = "select.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:variables", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_select.scss b/src/material/select/_m2-select.scss similarity index 82% rename from src/material/core/tokens/m2/mat/_select.scss rename to src/material/select/_m2-select.scss index 7e5c41bc302f..08cb7cbc5ef7 100644 --- a/src/material/core/tokens/m2/mat/_select.scss +++ b/src/material/select/_m2-select.scss @@ -1,9 +1,9 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../theming/theming'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/theming/theming'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, select); @@ -23,11 +23,11 @@ $prefix: (mat, select); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. $on-surface: if($is-dark, #fff, #000); - $text-color-base: if(token-definition.$private-is-internal-build, $on-surface, + $text-color-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, text, 1)); - $disabled-text-color-base: if(token-definition.$private-is-internal-build, $on-surface, + $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, disabled-text, 1)); - $icon-color-base: if(token-definition.$private-is-internal-build, $on-surface, + $icon-color-base: if(m2-utils.$private-is-internal-build, $on-surface, inspection.get-theme-color($theme, foreground, divider, 1)); @return ( @@ -74,8 +74,8 @@ $prefix: (mat, select); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_select.scss b/src/material/select/_m3-select.scss similarity index 82% rename from src/material/core/tokens/m3/mat/_select.scss rename to src/material/select/_m3-select.scss index 1dff1e980d6c..263364b013dd 100644 --- a/src/material/core/tokens/m3/mat/_select.scss +++ b/src/material/select/_m3-select.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../../style/elevation'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/style/elevation'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, select); @@ -13,7 +13,7 @@ $prefix: (mat, select); /// @return {Map} A set of custom tokens for the mat-select @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, trigger-text, body-large), + m3-utils.generate-typography-tokens($systems, trigger-text, body-large), ( panel-background-color: map.get($systems, md-sys-color, surface-container), enabled-trigger-text-color: map.get($systems, md-sys-color, on-surface), @@ -26,7 +26,7 @@ $prefix: (mat, select); focused-arrow-color: map.get($systems, md-sys-color, primary), invalid-arrow-color: map.get($systems, md-sys-color, error), container-elevation-shadow: - token-definition.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded), + m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded), ) ); @@ -44,5 +44,5 @@ $prefix: (mat, select); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index 3c4ba1a88ee6..096973d132ea 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -1,11 +1,10 @@ -@use '../core/tokens/m2/mat/select' as tokens-mat-select; -@use '../core/tokens/token-utils'; @use '../core/style/sass-utils'; - -@use '../core/theming/theming'; @use '../core/theming/inspection'; +@use '../core/theming/theming'; @use '../core/theming/validation'; +@use '../core/tokens/token-utils'; @use '../core/typography/typography'; +@use './m2-select'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-select. @@ -15,8 +14,8 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - $mat-tokens: tokens-mat-select.get-unthemable-tokens(); - @include token-utils.create-token-values-mixed(tokens-mat-select.$prefix, $mat-tokens); + $mat-tokens: m2-select.get-unthemable-tokens(); + @include token-utils.create-token-values-mixed(m2-select.$prefix, $mat-tokens); } } } @@ -32,21 +31,21 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($theme) + m2-select.$prefix, + m2-select.get-color-tokens($theme) ); .mat-mdc-form-field.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($theme, accent) + m2-select.$prefix, + m2-select.get-color-tokens($theme, accent) ); } .mat-mdc-form-field.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-select.$prefix, - tokens-mat-select.get-color-tokens($theme, warn) + m2-select.$prefix, + m2-select.get-color-tokens($theme, warn) ); } } @@ -61,8 +60,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-select.$prefix, - tokens-mat-select.get-typography-tokens($theme) + m2-select.$prefix, + m2-select.get-typography-tokens($theme) ); } } @@ -76,8 +75,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-select.$prefix, - tokens-mat-select.get-density-tokens($theme) + m2-select.$prefix, + m2-select.get-density-tokens($theme) ); } } @@ -87,8 +86,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-select.$prefix, - tokens: tokens-mat-select.get-token-slots(), + namespace: m2-select.$prefix, + tokens: m2-select.get-token-slots(), ), ); } @@ -127,6 +126,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-select-tokens: token-utils.get-tokens-for($tokens, tokens-mat-select.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-select-tokens); + $mat-select-tokens: token-utils.get-tokens-for($tokens, m2-select.$prefix, $options...); + @include token-utils.create-token-values(m2-select.$prefix, $mat-select-tokens); } diff --git a/src/material/select/select.scss b/src/material/select/select.scss index 7a1db8747383..68d57248a191 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -3,7 +3,7 @@ @use '../core/style/vendor-prefixes'; @use '../core/style/variables'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/select' as tokens-mat-select; +@use './m2-select'; $mat-select-arrow-size: 5px !default; $mat-select-arrow-margin: 4px !default; @@ -13,6 +13,9 @@ $mat-select-placeholder-arrow-space: 2 * $leading-width: 12px !default; $scale: 0.75 !default; +$token-prefix: m2-select.$prefix; +$token-slots: m2-select.get-token-slots(); + @keyframes _mat-select-enter { from { opacity: 0; @@ -40,33 +43,30 @@ $scale: 0.75 !default; width: 100%; outline: none; - @include token-utils.use-tokens( - tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { @include vendor-prefixes.smooth-font(); - @include token-utils.create-token-slot(color, enabled-trigger-text-color); - @include token-utils.create-token-slot(font-family, trigger-text-font); - @include token-utils.create-token-slot(line-height, trigger-text-line-height); - @include token-utils.create-token-slot(font-size, trigger-text-size); - @include token-utils.create-token-slot(font-weight, trigger-text-weight); - @include token-utils.create-token-slot(letter-spacing, trigger-text-tracking); + color: token-utils.slot(enabled-trigger-text-color); + font-family: token-utils.slot(trigger-text-font); + line-height: token-utils.slot(trigger-text-line-height); + font-size: token-utils.slot(trigger-text-size); + font-weight: token-utils.slot(trigger-text-weight); + letter-spacing: token-utils.slot(trigger-text-tracking); } } -@include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { +@include token-utils.use-tokens($token-prefix, $token-slots) { div.mat-mdc-select-panel { - @include token-utils.create-token-slot(box-shadow, container-elevation-shadow); + box-shadow: token-utils.slot(container-elevation-shadow); } } .mat-mdc-select-disabled { - @include token-utils.use-tokens( - tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { - @include token-utils.create-token-slot(color, disabled-trigger-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(disabled-trigger-text-color); } .mat-mdc-select-placeholder { - @include token-utils.use-tokens( - tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { - @include token-utils.create-token-slot(color, disabled-trigger-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(disabled-trigger-text-color); } } } @@ -111,8 +111,8 @@ $scale: 0.75 !default; .mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow, .mat-form-field-invalid:not(.mat-form-field-disabled) .mat-mdc-form-field-infix::after { - @include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { - @include token-utils.create-token-slot(color, invalid-arrow-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(invalid-arrow-color); } } @@ -121,16 +121,15 @@ $scale: 0.75 !default; height: $mat-select-arrow-size; position: relative; - @include token-utils.use-tokens( - tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { - @include token-utils.create-token-slot(color, enabled-arrow-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(enabled-arrow-color); .mat-mdc-form-field.mat-focused & { - @include token-utils.create-token-slot(color, focused-arrow-color); + color: token-utils.slot(focused-arrow-color); } .mat-mdc-form-field .mat-mdc-select.mat-mdc-select-disabled & { - @include token-utils.create-token-slot(color, disabled-arrow-color); + color: token-utils.slot(disabled-arrow-color); } } @@ -168,9 +167,8 @@ div.mat-mdc-select-panel { // Workaround in case other MDC menu surface styles bleed in. position: static; - @include token-utils.use-tokens( - tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { - @include token-utils.create-token-slot(background-color, panel-background-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(panel-background-color); } @include cdk.high-contrast { @@ -209,9 +207,8 @@ div.mat-mdc-select-panel { math.div(variables.$swift-ease-out-duration, 3) variables.$swift-ease-out-timing-function; - @include token-utils.use-tokens( - tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { - @include token-utils.create-token-slot(color, placeholder-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(placeholder-text-color); } .mat-mdc-form-field:not(.mat-form-field-animations-enabled) &, @@ -277,8 +274,8 @@ div.mat-mdc-select-panel { visibility: hidden; } -@include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { +@include token-utils.use-tokens($token-prefix, $token-slots) { .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper { - @include token-utils.create-token-slot(transform, arrow-transform); + transform: token-utils.slot(arrow-transform); } } diff --git a/src/material/sidenav/BUILD.bazel b/src/material/sidenav/BUILD.bazel index a08e0bdac4c6..efb995798cd5 100644 --- a/src/material/sidenav/BUILD.bazel +++ b/src/material/sidenav/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-sidenav.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-sidenav.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_sidenav-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -29,11 +53,11 @@ sass_binary( name = "css", src = "drawer.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:layout_common", "//src/material/core/style:variables", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_sidenav.scss b/src/material/sidenav/_m2-sidenav.scss similarity index 87% rename from src/material/core/tokens/m2/mat/_sidenav.scss rename to src/material/sidenav/_m2-sidenav.scss index a8be8b73c7c8..5f35c59afa30 100644 --- a/src/material/core/tokens/m2/mat/_sidenav.scss +++ b/src/material/sidenav/_m2-sidenav.scss @@ -1,9 +1,9 @@ @use 'sass:color'; @use 'sass:meta'; -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, sidenav); @@ -59,8 +59,8 @@ $prefix: (mat, sidenav); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_sidenav.scss b/src/material/sidenav/_m3-sidenav.scss similarity index 71% rename from src/material/core/tokens/m3/mat/_sidenav.scss rename to src/material/sidenav/_m3-sidenav.scss index c4ffe42de0cd..b4cebe5237ea 100644 --- a/src/material/core/tokens/m3/mat/_sidenav.scss +++ b/src/material/sidenav/_m3-sidenav.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, sidenav); @@ -12,9 +12,9 @@ $prefix: (mat, sidenav); /// @return {Map} A set of custom tokens for the mat-sidenav @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - container-elevation-shadow: token-definition.hardcode(none, $exclude-hardcoded), - container-divider-color: token-definition.hardcode(transparent, $exclude-hardcoded), - container-width: token-definition.hardcode(360px, $exclude-hardcoded), + container-elevation-shadow: m3-utils.hardcode(none, $exclude-hardcoded), + container-divider-color: m3-utils.hardcode(transparent, $exclude-hardcoded), + container-width: m3-utils.hardcode(360px, $exclude-hardcoded), container-shape: map.get($systems, md-sys-shape, corner-large), container-background-color: map.get($systems, md-sys-color, surface), container-text-color: map.get($systems, md-sys-color, on-surface-variant), @@ -24,5 +24,5 @@ $prefix: (mat, sidenav); map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index 8bf69e5b9f23..ad5872fb778b 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -1,10 +1,10 @@ @use 'sass:map'; -@use '../core/theming/theming'; +@use '../core/style/sass-utils'; @use '../core/theming/inspection'; +@use '../core/theming/theming'; @use '../core/theming/validation'; -@use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav; @use '../core/tokens/token-utils'; -@use '../core/style/sass-utils'; +@use './m2-sidenav'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -12,9 +12,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-unthemable-tokens() - ); + m2-sidenav.$prefix, m2-sidenav.get-unthemable-tokens()); } } } @@ -25,9 +23,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-color-tokens($theme) - ); + m2-sidenav.$prefix, m2-sidenav.get-color-tokens($theme)); } } } @@ -50,8 +46,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-sidenav.$prefix, - tokens: tokens-mat-sidenav.get-token-slots(), + namespace: m2-sidenav.$prefix, + tokens: m2-sidenav.get-token-slots(), ), ); } @@ -85,8 +81,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-sidenav.$prefix, - map.get($tokens, tokens-mat-sidenav.$prefix) + m2-sidenav.$prefix, + map.get($tokens, m2-sidenav.$prefix) ); } } diff --git a/src/material/sidenav/drawer.scss b/src/material/sidenav/drawer.scss index 717c141dc2dd..f0b8e68198da 100644 --- a/src/material/sidenav/drawer.scss +++ b/src/material/sidenav/drawer.scss @@ -1,6 +1,6 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav; +@use './m2-sidenav'; @use '../core/tokens/token-utils'; @use '../core/style/variables'; @use '../core/style/layout-common'; @@ -10,6 +10,9 @@ $drawer-side-drawer-z-index: 2; $drawer-backdrop-z-index: 3; $drawer-over-drawer-z-index: 4; +$token-prefix: m2-sidenav.$prefix; +$token-slots: m2-sidenav.get-token-slots(); + // Mixin that creates a new stacking context. // see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context @mixin drawer-stacking-context($z-index: 1) { @@ -27,12 +30,9 @@ $drawer-over-drawer-z-index: 4; // the application content does not get messed up with our own CSS. @include drawer-stacking-context(); - @include token-utils.use-tokens( - tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-token-slots() - ) { - @include token-utils.create-token-slot(color, content-text-color); - @include token-utils.create-token-slot(background-color, content-background-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(content-text-color); + background-color: token-utils.slot(content-background-color); } box-sizing: border-box; @@ -86,11 +86,8 @@ $drawer-over-drawer-z-index: 4; &.mat-drawer-shown { visibility: visible; - @include token-utils.use-tokens( - tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-token-slots() - ) { - @include token-utils.create-token-slot(background-color, scrim-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(scrim-color); } } @@ -132,16 +129,13 @@ $drawer-over-drawer-z-index: 4; @include drawer-stacking-context($drawer-over-drawer-z-index); - @include token-utils.use-tokens( - tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-token-slots() - ) { - @include token-utils.create-token-slot(color, container-text-color); - @include token-utils.create-token-slot(box-shadow, container-elevation-shadow); - @include token-utils.create-token-slot(background-color, container-background-color); - @include token-utils.create-token-slot(border-top-right-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-right-radius, container-shape); - @include token-utils.create-token-slot(width, container-width); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(container-text-color); + box-shadow: token-utils.slot(container-elevation-shadow); + background-color: token-utils.slot(container-background-color); + border-top-right-radius: token-utils.slot(container-shape); + border-bottom-right-radius: token-utils.slot(container-shape); + width: token-utils.slot(container-width); } display: block; @@ -177,31 +171,25 @@ $drawer-over-drawer-z-index: 4; right: 0; transform: translate3d(100%, 0, 0); - @include token-utils.use-tokens( - tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-token-slots() - ) { - @include token-utils.create-token-slot(border-top-left-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-left-radius, container-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-top-left-radius: token-utils.slot(container-shape); + border-bottom-left-radius: token-utils.slot(container-shape); border-top-right-radius: 0; border-bottom-right-radius: 0; } } [dir='rtl'] & { - @include token-utils.use-tokens( - tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-token-slots() - ) { - @include token-utils.create-token-slot(border-top-left-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-left-radius, container-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-top-left-radius: token-utils.slot(container-shape); + border-bottom-left-radius: token-utils.slot(container-shape); border-top-right-radius: 0; border-bottom-right-radius: 0; transform: translate3d(100%, 0, 0); &.mat-drawer-end { - @include token-utils.create-token-slot(border-top-right-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-right-radius, container-shape); + border-top-right-radius: token-utils.slot(container-shape); + border-bottom-right-radius: token-utils.slot(container-shape); border-top-left-radius: 0; border-bottom-left-radius: 0; left: 0; @@ -240,28 +228,28 @@ $drawer-over-drawer-z-index: 4; box-shadow: none; @include token-utils.use-tokens( - tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.get-token-slots() + $token-prefix, + $token-slots ) { - @include token-utils.create-token-slot(border-right-color, container-divider-color); + border-right-color: token-utils.slot(container-divider-color); border-right-width: 1px; border-right-style: solid; &.mat-drawer-end { - @include token-utils.create-token-slot(border-left-color, container-divider-color); + border-left-color: token-utils.slot(container-divider-color); border-left-width: 1px; border-left-style: solid; border-right: none; } [dir='rtl'] & { - @include token-utils.create-token-slot(border-left-color, container-divider-color); + border-left-color: token-utils.slot(container-divider-color); border-left-width: 1px; border-left-style: solid; border-right: none; // Clears the default LTR border. &.mat-drawer-end { - @include token-utils.create-token-slot(border-right-color, container-divider-color); + border-right-color: token-utils.slot(container-divider-color); border-right-width: 1px; border-right-style: solid; border-left: none; diff --git a/src/material/slide-toggle/BUILD.bazel b/src/material/slide-toggle/BUILD.bazel index 768713c8ef42..8c76f3f4a33d 100644 --- a/src/material/slide-toggle/BUILD.bazel +++ b/src/material/slide-toggle/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-slide-toggle.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-slide-toggle.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_slide-toggle-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,11 +54,11 @@ sass_binary( name = "css", src = "slide-toggle.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:layout_common", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/slide-toggle/_m2-slide-toggle.scss similarity index 94% rename from src/material/core/tokens/m2/mat/_switch.scss rename to src/material/slide-toggle/_m2-slide-toggle.scss index 1e2b3583a9d7..1deee3c44597 100644 --- a/src/material/core/tokens/m2/mat/_switch.scss +++ b/src/material/slide-toggle/_m2-slide-toggle.scss @@ -1,9 +1,9 @@ -@use '../../token-definition'; -@use '../../../style/sass-utils'; +@use '../core/style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/theming/inspection'; +@use '../core/theming/theming'; +@use '../core/tokens/m2-utils'; @use 'sass:map'; -@use '../../../theming/inspection'; -@use '../../../theming/theming'; -@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, switch); @@ -160,8 +160,8 @@ $prefix: (mat, switch); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_switch.scss b/src/material/slide-toggle/_m3-slide-toggle.scss similarity index 86% rename from src/material/core/tokens/m3/mat/_switch.scss rename to src/material/slide-toggle/_m3-slide-toggle.scss index 9e96d9698433..dc709239cc96 100644 --- a/src/material/core/tokens/m3/mat/_switch.scss +++ b/src/material/slide-toggle/_m3-slide-toggle.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/elevation'; +@use '../core/tokens/m3-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, switch); @@ -32,25 +32,25 @@ $prefix: (mat, switch); disabled-unselected-track-color: map.get($systems, md-sys-color, surface-variant), disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface), disabled-unselected-track-outline-width: - token-definition.hardcode(2px, $exclude-hardcoded), + m3-utils.hardcode(2px, $exclude-hardcoded), handle-shape: map.get($systems, md-sys-shape, corner-full), - hidden-track-opacity: token-definition.hardcode(0, $exclude-hardcoded), - hidden-track-transition: token-definition.hardcode(opacity 75ms, $exclude-hardcoded), + hidden-track-opacity: m3-utils.hardcode(0, $exclude-hardcoded), + hidden-track-transition: m3-utils.hardcode(opacity 75ms, $exclude-hardcoded), label-text-color: map.get($systems, md-sys-color, on-surface), label-text-font: map.get($systems, md-sys-typescale, body-medium-font), label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height), label-text-size: map.get($systems, md-sys-typescale, body-medium-size), label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking), label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), - pressed-handle-size: token-definition.hardcode(28px, $exclude-hardcoded), + pressed-handle-size: m3-utils.hardcode(28px, $exclude-hardcoded), selected-focus-handle-color: map.get($systems, md-sys-color, primary-container), selected-focus-state-layer-color: map.get($systems, md-sys-color, primary), selected-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), selected-focus-track-color: map.get($systems, md-sys-color, primary), selected-handle-color: map.get($systems, md-sys-color, on-primary), - selected-handle-horizontal-margin: token-definition.hardcode(0 24px, $exclude-hardcoded), - selected-handle-size: token-definition.hardcode(24px, $exclude-hardcoded), + selected-handle-horizontal-margin: m3-utils.hardcode(0 24px, $exclude-hardcoded), + selected-handle-size: m3-utils.hardcode(24px, $exclude-hardcoded), selected-hover-handle-color: map.get($systems, md-sys-color, primary-container), selected-hover-state-layer-color: map.get($systems, md-sys-color, primary), selected-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), @@ -59,16 +59,16 @@ $prefix: (mat, switch); selected-icon-size: if($exclude-hardcoded, null, 16px), selected-pressed-handle-color: map.get($systems, md-sys-color, primary-container), selected-pressed-handle-horizontal-margin: - token-definition.hardcode(0 22px, $exclude-hardcoded), + m3-utils.hardcode(0 22px, $exclude-hardcoded), selected-pressed-state-layer-color: map.get($systems, md-sys-color, primary), selected-pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), selected-pressed-track-color: map.get($systems, md-sys-color, primary), selected-track-color: map.get($systems, md-sys-color, primary), - selected-track-outline-color: token-definition.hardcode(transparent, $exclude-hardcoded), - selected-track-outline-width: token-definition.hardcode(2px, $exclude-hardcoded), + selected-track-outline-color: m3-utils.hardcode(transparent, $exclude-hardcoded), + selected-track-outline-width: m3-utils.hardcode(2px, $exclude-hardcoded), selected-with-icon-handle-horizontal-margin: - token-definition.hardcode(0 24px, $exclude-hardcoded), + m3-utils.hardcode(0 24px, $exclude-hardcoded), state-layer-size: if($exclude-hardcoded, null, 40px), track-height: if($exclude-hardcoded, null, 32px), track-outline-color: map.get($systems, md-sys-color, outline), @@ -82,8 +82,8 @@ $prefix: (mat, switch); unselected-focus-track-color: map.get($systems, md-sys-color, surface-variant), unselected-handle-color: map.get($systems, md-sys-color, outline), unselected-handle-horizontal-margin: - token-definition.hardcode(0 8px, $exclude-hardcoded), - unselected-handle-size: token-definition.hardcode(16px, $exclude-hardcoded), + m3-utils.hardcode(0 8px, $exclude-hardcoded), + unselected-handle-size: m3-utils.hardcode(16px, $exclude-hardcoded), unselected-hover-handle-color: map.get($systems, md-sys-color, on-surface-variant), unselected-hover-state-layer-color: map.get($systems, md-sys-color, on-surface), unselected-hover-state-layer-opacity: @@ -93,17 +93,17 @@ $prefix: (mat, switch); unselected-icon-size: if($exclude-hardcoded, null, 16px), unselected-pressed-handle-color: map.get($systems, md-sys-color, on-surface-variant), unselected-pressed-handle-horizontal-margin: - token-definition.hardcode(0 2px, $exclude-hardcoded), + m3-utils.hardcode(0 2px, $exclude-hardcoded), unselected-pressed-state-layer-color: map.get($systems, md-sys-color, on-surface), unselected-pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), unselected-pressed-track-color: map.get($systems, md-sys-color, surface-variant), unselected-track-color: map.get($systems, md-sys-color, surface-variant), unselected-with-icon-handle-horizontal-margin: - token-definition.hardcode(0 4px, $exclude-hardcoded), - visible-track-opacity: token-definition.hardcode(1, $exclude-hardcoded), - visible-track-transition: token-definition.hardcode(opacity 75ms, $exclude-hardcoded), - with-icon-handle-size: token-definition.hardcode(24px, $exclude-hardcoded), + m3-utils.hardcode(0 4px, $exclude-hardcoded), + visible-track-opacity: m3-utils.hardcode(1, $exclude-hardcoded), + visible-track-transition: m3-utils.hardcode(opacity 75ms, $exclude-hardcoded), + with-icon-handle-size: m3-utils.hardcode(24px, $exclude-hardcoded), ); $elevation-tokens: (handle-elevation, disabled-handle-elevation); @@ -161,5 +161,5 @@ $prefix: (mat, switch); ), ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index d2c9dc3e77e7..e96917aae945 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -5,7 +5,7 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mat/switch' as tokens-mat-switch; +@use './m2-slide-toggle'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-slide-toggle. @@ -17,14 +17,14 @@ @include sass-utils.current-selector-or-root() { // TODO: See if this can be removed @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.get-unthemable-tokens() + m2-slide-toggle.$prefix, + m2-slide-toggle.get-unthemable-tokens() ); .mat-mdc-slide-toggle { @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.get-unthemable-tokens() + m2-slide-toggle.$prefix, + m2-slide-toggle.get-unthemable-tokens() ); } } @@ -40,13 +40,13 @@ @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { - $mat-tokens: tokens-mat-switch.get-color-tokens($theme); + $mat-tokens: m2-slide-toggle.get-color-tokens($theme); // Add values for MDC slide toggles tokens @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.get-color-tokens($theme) + m2-slide-toggle.$prefix, + m2-slide-toggle.get-color-tokens($theme) ); & { @@ -76,15 +76,15 @@ // Change the color palette related tokens to accent or warn if applicable &.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.private-get-color-palette-color-tokens($theme, accent) + m2-slide-toggle.$prefix, + m2-slide-toggle.private-get-color-palette-color-tokens($theme, accent) ); } &.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.private-get-color-palette-color-tokens($theme, warn) + m2-slide-toggle.$prefix, + m2-slide-toggle.private-get-color-palette-color-tokens($theme, warn) ); } } @@ -101,14 +101,14 @@ @include sass-utils.current-selector-or-root() { // TODO: See if this can be removed @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.get-typography-tokens($theme) + m2-slide-toggle.$prefix, + m2-slide-toggle.get-typography-tokens($theme) ); .mat-mdc-slide-toggle { @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.get-typography-tokens($theme) + m2-slide-toggle.$prefix, + m2-slide-toggle.get-typography-tokens($theme) ); } } @@ -124,14 +124,14 @@ @include sass-utils.current-selector-or-root() { // TODO: See if this can be removed @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.get-density-tokens($theme) + m2-slide-toggle.$prefix, + m2-slide-toggle.get-density-tokens($theme) ); .mat-mdc-slide-toggle { @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.get-density-tokens($theme) + m2-slide-toggle.$prefix, + m2-slide-toggle.get-density-tokens($theme) ); } } @@ -142,8 +142,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-switch.$prefix, - tokens: tokens-mat-switch.get-token-slots(), + namespace: m2-slide-toggle.$prefix, + tokens: m2-slide-toggle.get-token-slots(), ), ); } @@ -182,10 +182,10 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix); + $mat-switch-tokens: token-utils.get-tokens-for($tokens, m2-slide-toggle.$prefix); $mat-switch-tokens-options: - token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix, $options...); + token-utils.get-tokens-for($tokens, m2-slide-toggle.$prefix, $options...); $tokens: map.merge($mat-switch-tokens, $mat-switch-tokens-options); - @include token-utils.create-token-values(tokens-mat-switch.$prefix, $tokens); + @include token-utils.create-token-values(m2-slide-toggle.$prefix, $tokens); } diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index 770b1aaf3ba3..5f34892ce07b 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -1,12 +1,15 @@ -@use '@angular/cdk'; @use '../core/style/layout-common'; -@use '../core/tokens/m2/mat/switch' as tokens-mat-switch; -@use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; +@use '../core/tokens/token-utils'; +@use './m2-slide-toggle'; +@use '@angular/cdk'; -$_mat-slots: (tokens-mat-switch.$prefix, tokens-mat-switch.get-token-slots()); $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled'; +$token-prefix: m2-slide-toggle.$prefix; +$token-slots: m2-slide-toggle.get-token-slots(); + + .mdc-switch { align-items: center; background: none; @@ -20,8 +23,8 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc padding: 0; position: relative; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(width, track-width); + @include token-utils.use-tokens($token-prefix, $token-slots) { + width: token-utils.slot(track-width); } &.mdc-switch--disabled { @@ -39,12 +42,12 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc position: relative; width: 100%; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(height, track-height); - @include token-utils.create-token-slot(border-radius, track-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(track-height); + border-radius: token-utils.slot(track-shape); .mdc-switch--disabled.mdc-switch & { - @include token-utils.create-token-slot(opacity, disabled-track-opacity); + opacity: token-utils.slot(disabled-track-opacity); } } @@ -59,20 +62,18 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc position: absolute; width: 100%; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(border-width, track-outline-width); - @include token-utils.create-token-slot(border-color, track-outline-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-width: token-utils.slot(track-outline-width); + border-color: token-utils.slot(track-outline-color); .mdc-switch--selected & { - @include token-utils.create-token-slot(border-width, selected-track-outline-width); - @include token-utils.create-token-slot(border-color, selected-track-outline-color); + border-width: token-utils.slot(selected-track-outline-width); + border-color: token-utils.slot(selected-track-outline-color); } .mdc-switch--disabled & { - @include token-utils.create-token-slot(border-width, - disabled-unselected-track-outline-width); - @include token-utils.create-token-slot(border-color, - disabled-unselected-track-outline-color); + border-width: token-utils.slot(disabled-unselected-track-outline-width); + border-color: token-utils.slot(disabled-unselected-track-outline-color); } } } @@ -85,8 +86,8 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1); transform: translateX(0); - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(background, unselected-track-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background: token-utils.slot(unselected-track-color); } .mdc-switch--selected & { @@ -98,36 +99,36 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc } } - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-switch--selected & { - @include token-utils.create-token-slot(opacity, hidden-track-opacity); - @include token-utils.create-token-slot(transition, hidden-track-transition); + opacity: token-utils.slot(hidden-track-opacity); + transition: token-utils.slot(hidden-track-transition); } .mdc-switch--unselected & { - @include token-utils.create-token-slot(opacity, visible-track-opacity); - @include token-utils.create-token-slot(transition, visible-track-transition); + opacity: token-utils.slot(visible-track-opacity); + transition: token-utils.slot(visible-track-transition); } } - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-switch:enabled:hover:not(:focus):not(:active) & { - @include token-utils.create-token-slot(background, unselected-hover-track-color); + background: token-utils.slot(unselected-hover-track-color); } .mdc-switch:enabled:focus:not(:active) & { - @include token-utils.create-token-slot(background, unselected-focus-track-color); + background: token-utils.slot(unselected-focus-track-color); } .mdc-switch:enabled:active & { - @include token-utils.create-token-slot(background, unselected-pressed-track-color); + background: token-utils.slot(unselected-pressed-track-color); } #{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &, #{$_interactive-disabled-selector}:focus:not(:active) &, #{$_interactive-disabled-selector}:active &, .mdc-switch.mdc-switch--disabled & { - @include token-utils.create-token-slot(background, disabled-unselected-track-color); + background: token-utils.slot(disabled-unselected-track-color); } } } @@ -135,8 +136,8 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc &::after { transform: translateX(-100%); - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(background, selected-track-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background: token-utils.slot(selected-track-color); } [dir='rtl'] & { @@ -147,36 +148,36 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc transform: translateX(0); } - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-switch--selected & { - @include token-utils.create-token-slot(opacity, visible-track-opacity); - @include token-utils.create-token-slot(transition, visible-track-transition); + opacity: token-utils.slot(visible-track-opacity); + transition: token-utils.slot(visible-track-transition); } .mdc-switch--unselected & { - @include token-utils.create-token-slot(opacity, hidden-track-opacity); - @include token-utils.create-token-slot(transition, hidden-track-transition); + opacity: token-utils.slot(hidden-track-opacity); + transition: token-utils.slot(hidden-track-transition); } } - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-switch:enabled:hover:not(:focus):not(:active) & { - @include token-utils.create-token-slot(background, selected-hover-track-color); + background: token-utils.slot(selected-hover-track-color); } .mdc-switch:enabled:focus:not(:active) & { - @include token-utils.create-token-slot(background, selected-focus-track-color); + background: token-utils.slot(selected-focus-track-color); } .mdc-switch:enabled:active & { - @include token-utils.create-token-slot(background, selected-pressed-track-color); + background: token-utils.slot(selected-pressed-track-color); } #{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &, #{$_interactive-disabled-selector}:focus:not(:active) &, #{$_interactive-disabled-selector}:active &, .mdc-switch.mdc-switch--disabled & { - @include token-utils.create-token-slot(background, disabled-selected-track-color); + background: token-utils.slot(disabled-selected-track-color); } } } @@ -192,8 +193,8 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc right: auto; transform: translateX(0); - @include token-utils.use-tokens($_mat-slots...) { - width: calc(100% - #{token-utils.get-token-variable(handle-width)}); + @include token-utils.use-tokens($token-prefix, $token-slots) { + width: calc(100% - #{token-utils.slot(handle-width)}); } [dir='rtl'] & { @@ -226,10 +227,10 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc height 75ms cubic-bezier(0.4, 0, 0.2, 1), margin 75ms cubic-bezier(0.4, 0, 0.2, 1); - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(width, handle-width); - @include token-utils.create-token-slot(height, handle-height); - @include token-utils.create-token-slot(border-radius, handle-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + width: token-utils.slot(handle-width); + height: token-utils.slot(handle-height); + border-radius: token-utils.slot(handle-shape); } [dir='rtl'] & { @@ -237,52 +238,51 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc right: 0; } - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-slide-toggle .mdc-switch--unselected & { - @include token-utils.create-token-slot(width, unselected-handle-size); - @include token-utils.create-token-slot(height, unselected-handle-size); - @include token-utils.create-token-slot(margin, unselected-handle-horizontal-margin); + width: token-utils.slot(unselected-handle-size); + height: token-utils.slot(unselected-handle-size); + margin: token-utils.slot(unselected-handle-horizontal-margin); &:has(.mdc-switch__icons) { - @include token-utils.create-token-slot(margin, - unselected-with-icon-handle-horizontal-margin); + margin: token-utils.slot(unselected-with-icon-handle-horizontal-margin); } } .mat-mdc-slide-toggle .mdc-switch--selected & { - @include token-utils.create-token-slot(width, selected-handle-size); - @include token-utils.create-token-slot(height, selected-handle-size); - @include token-utils.create-token-slot(margin, selected-handle-horizontal-margin); + width: token-utils.slot(selected-handle-size); + height: token-utils.slot(selected-handle-size); + margin: token-utils.slot(selected-handle-horizontal-margin); &:has(.mdc-switch__icons) { - @include token-utils.create-token-slot(margin, selected-with-icon-handle-horizontal-margin); + margin: token-utils.slot(selected-with-icon-handle-horizontal-margin); } } .mat-mdc-slide-toggle &:has(.mdc-switch__icons) { - @include token-utils.create-token-slot(width, with-icon-handle-size); - @include token-utils.create-token-slot(height, with-icon-handle-size); + width: token-utils.slot(with-icon-handle-size); + height: token-utils.slot(with-icon-handle-size); } .mat-mdc-slide-toggle .mdc-switch:active:not(.mdc-switch--disabled) & { - @include token-utils.create-token-slot(width, pressed-handle-size); - @include token-utils.create-token-slot(height, pressed-handle-size); + width: token-utils.slot(pressed-handle-size); + height: token-utils.slot(pressed-handle-size); } .mat-mdc-slide-toggle .mdc-switch--selected:active:not(.mdc-switch--disabled) & { - @include token-utils.create-token-slot(margin, selected-pressed-handle-horizontal-margin); + margin: token-utils.slot(selected-pressed-handle-horizontal-margin); } .mat-mdc-slide-toggle .mdc-switch--unselected:active:not(.mdc-switch--disabled) & { - @include token-utils.create-token-slot(margin, unselected-pressed-handle-horizontal-margin); + margin: token-utils.slot(unselected-pressed-handle-horizontal-margin); } .mdc-switch--disabled.mdc-switch--selected &::after { - @include token-utils.create-token-slot(opacity, disabled-selected-handle-opacity); + opacity: token-utils.slot(disabled-selected-handle-opacity); } .mdc-switch--disabled.mdc-switch--unselected &::after { - @include token-utils.create-token-slot(opacity, disabled-unselected-handle-opacity); + opacity: token-utils.slot(disabled-unselected-handle-opacity); } } @@ -306,54 +306,54 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc } } - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { &::after { .mdc-switch--selected:enabled & { - @include token-utils.create-token-slot(background, selected-handle-color); + background: token-utils.slot(selected-handle-color); } .mdc-switch--selected:enabled:hover:not(:focus):not(:active) & { - @include token-utils.create-token-slot(background, selected-hover-handle-color); + background: token-utils.slot(selected-hover-handle-color); } .mdc-switch--selected:enabled:focus:not(:active) & { - @include token-utils.create-token-slot(background, selected-focus-handle-color); + background: token-utils.slot(selected-focus-handle-color); } .mdc-switch--selected:enabled:active & { - @include token-utils.create-token-slot(background, selected-pressed-handle-color); + background: token-utils.slot(selected-pressed-handle-color); } #{$_interactive-disabled-selector}.mdc-switch--selected:hover:not(:focus):not(:active) &, #{$_interactive-disabled-selector}.mdc-switch--selected:focus:not(:active) &, #{$_interactive-disabled-selector}.mdc-switch--selected:active &, .mdc-switch--selected.mdc-switch--disabled & { - @include token-utils.create-token-slot(background, disabled-selected-handle-color); + background: token-utils.slot(disabled-selected-handle-color); } .mdc-switch--unselected:enabled & { - @include token-utils.create-token-slot(background, unselected-handle-color); + background: token-utils.slot(unselected-handle-color); } .mdc-switch--unselected:enabled:hover:not(:focus):not(:active) & { - @include token-utils.create-token-slot(background, unselected-hover-handle-color); + background: token-utils.slot(unselected-hover-handle-color); } .mdc-switch--unselected:enabled:focus:not(:active) & { - @include token-utils.create-token-slot(background, unselected-focus-handle-color); + background: token-utils.slot(unselected-focus-handle-color); } .mdc-switch--unselected:enabled:active & { - @include token-utils.create-token-slot(background, unselected-pressed-handle-color); + background: token-utils.slot(unselected-pressed-handle-color); } .mdc-switch--unselected.mdc-switch--disabled & { - @include token-utils.create-token-slot(background, disabled-unselected-handle-color); + background: token-utils.slot(disabled-unselected-handle-color); } } &::before { - @include token-utils.create-token-slot(background, handle-surface-color); + background: token-utils.slot(handle-surface-color); } } } @@ -366,16 +366,16 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc right: 0; top: 0; - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-switch:enabled & { - @include token-utils.create-token-slot(box-shadow, handle-elevation-shadow); + box-shadow: token-utils.slot(handle-elevation-shadow); } #{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &, #{$_interactive-disabled-selector}:focus:not(:active) &, #{$_interactive-disabled-selector}:active &, .mdc-switch.mdc-switch--disabled & { - @include token-utils.create-token-slot(box-shadow, disabled-handle-elevation-shadow); + box-shadow: token-utils.slot(disabled-handle-elevation-shadow); } } } @@ -387,9 +387,9 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc transform: translate(-50%, -50%); z-index: -1; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(width, state-layer-size); - @include token-utils.create-token-slot(height, state-layer-size); + @include token-utils.use-tokens($token-prefix, $token-slots) { + width: token-utils.slot(state-layer-size); + height: token-utils.slot(state-layer-size); } &::after { @@ -414,35 +414,35 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc opacity: 0.12; } - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { #{$_interactive-disabled-selector}:enabled:focus &, #{$_interactive-disabled-selector}:enabled:active &, #{$_interactive-disabled-selector}:enabled:hover:not(:focus) &, .mdc-switch--unselected:enabled:hover:not(:focus) & { - @include token-utils.create-token-slot(background, unselected-hover-state-layer-color); + background: token-utils.slot(unselected-hover-state-layer-color); } .mdc-switch--unselected:enabled:focus & { - @include token-utils.create-token-slot(background, unselected-focus-state-layer-color); + background: token-utils.slot(unselected-focus-state-layer-color); } .mdc-switch--unselected:enabled:active & { - @include token-utils.create-token-slot(background, unselected-pressed-state-layer-color); - @include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity); + background: token-utils.slot(unselected-pressed-state-layer-color); + opacity: token-utils.slot(unselected-pressed-state-layer-opacity); transition: opacity 75ms linear; } .mdc-switch--selected:enabled:hover:not(:focus) & { - @include token-utils.create-token-slot(background, selected-hover-state-layer-color); + background: token-utils.slot(selected-hover-state-layer-color); } .mdc-switch--selected:enabled:focus & { - @include token-utils.create-token-slot(background, selected-focus-state-layer-color); + background: token-utils.slot(selected-focus-state-layer-color); } .mdc-switch--selected:enabled:active & { - @include token-utils.create-token-slot(background, selected-pressed-state-layer-color); - @include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity); + background: token-utils.slot(selected-pressed-state-layer-color); + opacity: token-utils.slot(selected-pressed-state-layer-opacity); transition: opacity 75ms linear; } } @@ -458,13 +458,13 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc // Works around a rendering issue in Safari 18.3 (see #30487). transform: translateZ(0); - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-switch--disabled.mdc-switch--unselected & { - @include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity); + opacity: token-utils.slot(disabled-unselected-icon-opacity); } .mdc-switch--disabled.mdc-switch--selected & { - @include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity); + opacity: token-utils.slot(disabled-selected-icon-opacity); } } } @@ -479,25 +479,25 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc opacity: 0; transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1); - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mdc-switch--unselected & { - @include token-utils.create-token-slot(width, unselected-icon-size); - @include token-utils.create-token-slot(height, unselected-icon-size); - @include token-utils.create-token-slot(fill, unselected-icon-color); + width: token-utils.slot(unselected-icon-size); + height: token-utils.slot(unselected-icon-size); + fill: token-utils.slot(unselected-icon-color); } .mdc-switch--unselected.mdc-switch--disabled & { - @include token-utils.create-token-slot(fill, disabled-unselected-icon-color); + fill: token-utils.slot(disabled-unselected-icon-color); } .mdc-switch--selected & { - @include token-utils.create-token-slot(width, selected-icon-size); - @include token-utils.create-token-slot(height, selected-icon-size); - @include token-utils.create-token-slot(fill, selected-icon-color); + width: token-utils.slot(selected-icon-size); + height: token-utils.slot(selected-icon-size); + fill: token-utils.slot(selected-icon-color); } .mdc-switch--selected.mdc-switch--disabled & { - @include token-utils.create-token-slot(fill, disabled-selected-icon-color); + fill: token-utils.slot(disabled-selected-icon-color); } } } @@ -540,13 +540,13 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc } .mat-internal-form-field { - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(color, label-text-color); - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(font-weight, label-text-weight); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(label-text-color); + font-family: token-utils.slot(label-text-font); + line-height: token-utils.slot(label-text-line-height); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + font-weight: token-utils.slot(label-text-weight); } } diff --git a/src/material/slider/BUILD.bazel b/src/material/slider/BUILD.bazel index 4b5c81caef60..c279d6720095 100644 --- a/src/material/slider/BUILD.bazel +++ b/src/material/slider/BUILD.bazel @@ -11,18 +11,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-slider.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-slider.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_slider-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -31,10 +55,10 @@ sass_binary( name = "slider-css", src = "slider.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_slider.scss b/src/material/slider/_m2-slider.scss similarity index 91% rename from src/material/core/tokens/m2/mat/_slider.scss rename to src/material/slider/_m2-slider.scss index 267169f34d2d..054c97a14c47 100644 --- a/src/material/core/tokens/m2/mat/_slider.scss +++ b/src/material/slider/_m2-slider.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; -@use '../../../theming/inspection'; -@use '../../../style/elevation'; +@use '../core/tokens/m2-utils'; +@use '../core/style/sass-utils'; +@use '../core/theming/inspection'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, slider); @@ -98,8 +98,8 @@ $prefix: (mat, slider); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_slider.scss b/src/material/slider/_m3-slider.scss similarity index 88% rename from src/material/core/tokens/m3/mat/_slider.scss rename to src/material/slider/_m3-slider.scss index 1eaf0ab81712..46ef07d5d071 100644 --- a/src/material/core/tokens/m3/mat/_slider.scss +++ b/src/material/slider/_m3-slider.scss @@ -1,7 +1,7 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; -@use '../../../style/elevation'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, slider); @@ -18,17 +18,17 @@ $prefix: (mat, slider); map.get($systems, md-sys-color, primary), $alpha: 0.05), focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: 0.2), - value-indicator-opacity: token-definition.hardcode(1, $exclude-hardcoded), - value-indicator-padding: token-definition.hardcode(0, $exclude-hardcoded), - value-indicator-width: token-definition.hardcode(28px, $exclude-hardcoded), - value-indicator-height: token-definition.hardcode(28px, $exclude-hardcoded), - value-indicator-caret-display: token-definition.hardcode(none, $exclude-hardcoded), + value-indicator-opacity: m3-utils.hardcode(1, $exclude-hardcoded), + value-indicator-padding: m3-utils.hardcode(0, $exclude-hardcoded), + value-indicator-width: m3-utils.hardcode(28px, $exclude-hardcoded), + value-indicator-height: m3-utils.hardcode(28px, $exclude-hardcoded), + value-indicator-caret-display: m3-utils.hardcode(none, $exclude-hardcoded), value-indicator-border-radius: - token-definition.hardcode(50% 50% 50% 0, $exclude-hardcoded), + m3-utils.hardcode(50% 50% 50% 0, $exclude-hardcoded), value-indicator-text-transform: - token-definition.hardcode(rotate(45deg), $exclude-hardcoded), + m3-utils.hardcode(rotate(45deg), $exclude-hardcoded), value-indicator-container-transform: - token-definition.hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded), + m3-utils.hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded), active-track-color: map.get($systems, md-sys-color, primary), active-track-height: if($exclude-hardcoded, null, 4px), active-track-shape: map.get($systems, md-sys-shape, corner-full), @@ -117,5 +117,5 @@ $prefix: (mat, slider); ), ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss index 172fa30ca3b8..9c500dcca421 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -4,7 +4,7 @@ @use '../core/typography/typography'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/slider' as tokens-mat-slider; +@use './m2-slider'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-slider. @@ -15,9 +15,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-slider.$prefix, - tokens-mat-slider.get-unthemable-tokens() - ); + m2-slider.$prefix, m2-slider.get-unthemable-tokens()); } } } @@ -33,22 +31,16 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-slider.$prefix, - tokens-mat-slider.get-color-tokens($theme) - ); + m2-slider.$prefix, m2-slider.get-color-tokens($theme)); .mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-slider.$prefix, - tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent) - ); + m2-slider.$prefix, m2-slider.private-get-color-palette-color-tokens($theme, accent)); } .mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-slider.$prefix, - tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn) - ); + m2-slider.$prefix, m2-slider.private-get-color-palette-color-tokens($theme, warn)); } } } @@ -62,9 +54,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-slider.$prefix, - tokens-mat-slider.get-typography-tokens($theme) - ); + m2-slider.$prefix, m2-slider.get-typography-tokens($theme)); } } } @@ -77,9 +67,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-slider.$prefix, - tokens-mat-slider.get-density-tokens($theme) - ); + m2-slider.$prefix, m2-slider.get-density-tokens($theme)); } } } @@ -88,8 +76,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-slider.$prefix, - tokens: tokens-mat-slider.get-token-slots(), + namespace: m2-slider.$prefix, + tokens: m2-slider.get-token-slots(), ), ); } @@ -128,6 +116,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...); - @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-slider-tokens); + $mat-slider-tokens: token-utils.get-tokens-for($tokens, m2-slider.$prefix, $options...); + @include token-utils.create-token-values(m2-slider.$prefix, $mat-slider-tokens); } diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index 9ca727b1fdbf..1bdbfbf5b7fa 100644 --- a/src/material/slider/slider.scss +++ b/src/material/slider/slider.scss @@ -1,11 +1,13 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/slider' as tokens-mat-slider; +@use './m2-slider'; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; $mat-slider-min-size: 128px !default; $mat-slider-horizontal-margin: 8px !default; -$_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); + +$token-prefix: m2-slider.$prefix; +$token-slots: m2-slider.get-token-slots(); .mdc-slider__track { position: absolute; @@ -14,8 +16,8 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); width: 100%; pointer-events: none; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(height, inactive-track-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(inactive-track-height); } } @@ -30,10 +32,10 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); .mdc-slider__track--active { overflow: hidden; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(border-radius, active-track-shape); - $active-height-ref: token-utils.get-token-variable(active-track-height); - $inactive-height-ref: token-utils.get-token-variable(inactive-track-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-radius: token-utils.slot(active-track-shape); + $active-height-ref: token-utils.slot(active-track-height); + $inactive-height-ref: token-utils.slot(inactive-track-height); height: $active-height-ref; top: calc((#{$inactive-height-ref} - #{$active-height-ref}) / 2); } @@ -48,12 +50,12 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); transform-origin: left; transition: transform 80ms ease; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(border-color, active-track-color); - @include token-utils.create-token-slot(border-top-width, active-track-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-color: token-utils.slot(active-track-color); + border-top-width: token-utils.slot(active-track-height); .mdc-slider--disabled & { - @include token-utils.create-token-slot(border-color, disabled-active-track-color); + border-color: token-utils.slot(disabled-active-track-color); } } @@ -68,13 +70,13 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); top: 0; opacity: 0.24; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(background-color, inactive-track-color); - @include token-utils.create-token-slot(height, inactive-track-height); - @include token-utils.create-token-slot(border-radius, inactive-track-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(inactive-track-color); + height: token-utils.slot(inactive-track-height); + border-radius: token-utils.slot(inactive-track-shape); .mdc-slider--disabled & { - @include token-utils.create-token-slot(background-color, disabled-inactive-track-color); + background-color: token-utils.slot(disabled-inactive-track-color); opacity: 0.24; } } @@ -104,8 +106,8 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); position: absolute; transform: translateX(-50%); - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(transform, value-indicator-container-transform); + @include token-utils.use-tokens($token-prefix, $token-slots) { + transform: token-utils.slot(value-indicator-container-transform); } .mdc-slider__thumb--with-indicator & { @@ -128,17 +130,17 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); // the word-break of the value indicator. word-break: normal; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(background-color, label-container-color); - @include token-utils.create-token-slot(color, label-label-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(label-container-color); + color: token-utils.slot(label-label-text-color); } - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(width, value-indicator-width); - @include token-utils.create-token-slot(height, value-indicator-height); - @include token-utils.create-token-slot(padding, value-indicator-padding); - @include token-utils.create-token-slot(opacity, value-indicator-opacity); - @include token-utils.create-token-slot(border-radius, value-indicator-border-radius); + @include token-utils.use-tokens($token-prefix, $token-slots) { + width: token-utils.slot(value-indicator-width); + height: token-utils.slot(value-indicator-height); + padding: token-utils.slot(value-indicator-padding); + opacity: token-utils.slot(value-indicator-opacity); + border-radius: token-utils.slot(value-indicator-border-radius); } .mdc-slider__thumb--with-indicator & { @@ -158,12 +160,12 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); transform: translateX(-50%); width: 0; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(display, value-indicator-caret-display); + @include token-utils.use-tokens($token-prefix, $token-slots) { + display: token-utils.slot(value-indicator-caret-display); } - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(border-top-color, label-container-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-top-color: token-utils.slot(label-container-color); } } @@ -188,17 +190,17 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); .mdc-slider__value-indicator-text { text-align: center; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(width, value-indicator-width); - @include token-utils.create-token-slot(transform, value-indicator-text-transform); + @include token-utils.use-tokens($token-prefix, $token-slots) { + width: token-utils.slot(value-indicator-width); + transform: token-utils.slot(value-indicator-text-transform); } - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(font-family, label-label-text-font); - @include token-utils.create-token-slot(font-size, label-label-text-size); - @include token-utils.create-token-slot(font-weight, label-label-text-weight); - @include token-utils.create-token-slot(line-height, label-label-text-line-height); - @include token-utils.create-token-slot(letter-spacing, label-label-text-tracking); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-family: token-utils.slot(label-label-text-font); + font-size: token-utils.slot(label-label-text-size); + font-weight: token-utils.slot(label-label-text-weight); + line-height: token-utils.slot(label-label-text-line-height); + letter-spacing: token-utils.slot(label-label-text-tracking); } } @@ -233,31 +235,31 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); transform: translate(-50%, -50%); border-style: solid; - @include token-utils.use-tokens($_mat-slots...) { - $width-ref: token-utils.get-token-variable(handle-width); - $height-ref: token-utils.get-token-variable(handle-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + $width-ref: token-utils.slot(handle-width); + $height-ref: token-utils.slot(handle-height); width: $width-ref; height: $height-ref; border-width: calc(#{$height-ref} / 2) calc(#{$width-ref} / 2); - @include token-utils.create-token-slot(box-shadow, handle-elevation); - @include token-utils.create-token-slot(background-color, handle-color); - @include token-utils.create-token-slot(border-color, handle-color); - @include token-utils.create-token-slot(border-radius, handle-shape); + box-shadow: token-utils.slot(handle-elevation); + background-color: token-utils.slot(handle-color); + border-color: token-utils.slot(handle-color); + border-radius: token-utils.slot(handle-shape); .mdc-slider__thumb:hover & { - @include token-utils.create-token-slot(background-color, hover-handle-color); - @include token-utils.create-token-slot(border-color, hover-handle-color); + background-color: token-utils.slot(hover-handle-color); + border-color: token-utils.slot(hover-handle-color); } .mdc-slider__thumb--focused & { - @include token-utils.create-token-slot(background-color, focus-handle-color); - @include token-utils.create-token-slot(border-color, focus-handle-color); + background-color: token-utils.slot(focus-handle-color); + border-color: token-utils.slot(focus-handle-color); } .mdc-slider--disabled & { - @include token-utils.create-token-slot(background-color, disabled-handle-color); - @include token-utils.create-token-slot(border-color, disabled-handle-color); + background-color: token-utils.slot(disabled-handle-color); + border-color: token-utils.slot(disabled-handle-color); } } @@ -267,9 +269,9 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); border: solid 1px #fff; box-sizing: content-box; - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(border-color, with-overlap-handle-outline-color); - @include token-utils.create-token-slot(border-width, with-overlap-handle-outline-width); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-color: token-utils.slot(with-overlap-handle-outline-color); + border-width: token-utils.slot(with-overlap-handle-outline-width); } } } @@ -287,32 +289,29 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); .mdc-slider__tick-mark--active, .mdc-slider__tick-mark--inactive { - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(width, with-tick-marks-container-size); - @include token-utils.create-token-slot(height, with-tick-marks-container-size); - @include token-utils.create-token-slot(border-radius, with-tick-marks-container-shape); + @include token-utils.use-tokens($token-prefix, $token-slots) { + width: token-utils.slot(with-tick-marks-container-size); + height: token-utils.slot(with-tick-marks-container-size); + border-radius: token-utils.slot(with-tick-marks-container-shape); } } .mdc-slider__tick-mark--inactive { - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(opacity, with-tick-marks-inactive-container-opacity); - @include token-utils.create-token-slot(background-color, - with-tick-marks-inactive-container-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + opacity: token-utils.slot(with-tick-marks-inactive-container-opacity); + background-color: token-utils.slot(with-tick-marks-inactive-container-color); .mdc-slider--disabled & { - @include token-utils.create-token-slot(opacity, with-tick-marks-inactive-container-opacity); - @include token-utils.create-token-slot(background-color, - with-tick-marks-disabled-container-color); + opacity: token-utils.slot(with-tick-marks-inactive-container-opacity); + background-color: token-utils.slot(with-tick-marks-disabled-container-color); } } } .mdc-slider__tick-mark--active { - @include token-utils.use-tokens($_mat-slots...) { - @include token-utils.create-token-slot(opacity, with-tick-marks-active-container-opacity); - @include token-utils.create-token-slot(background-color, - with-tick-marks-active-container-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + opacity: token-utils.slot(with-tick-marks-active-container-opacity); + background-color: token-utils.slot(with-tick-marks-active-container-color); } } @@ -390,21 +389,21 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); } // Add slots for custom Angular Material slider tokens. - @include token-utils.use-tokens($_mat-slots...) { + @include token-utils.use-tokens($token-prefix, $token-slots) { // The `.mat-ripple` wrapper here is redundant, but we need it to // increase the specificity due to how some styles are setup in g3. .mat-ripple { .mat-ripple-element { - @include token-utils.create-token-slot(background-color, ripple-color); + background-color: token-utils.slot(ripple-color); } .mat-mdc-slider-hover-ripple { - @include token-utils.create-token-slot(background-color, hover-state-layer-color); + background-color: token-utils.slot(hover-state-layer-color); } .mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple { - @include token-utils.create-token-slot(background-color, focus-state-layer-color); + background-color: token-utils.slot(focus-state-layer-color); } } } diff --git a/src/material/snack-bar/BUILD.bazel b/src/material/snack-bar/BUILD.bazel index b08271d089ba..86e300b9256b 100644 --- a/src/material/snack-bar/BUILD.bazel +++ b/src/material/snack-bar/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-snack-bar.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-snack-bar.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_snack-bar-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,10 +54,10 @@ sass_binary( name = "container_css", src = "snack-bar-container.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:elevation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_snack-bar.scss b/src/material/snack-bar/_m2-snack-bar.scss similarity index 85% rename from src/material/core/tokens/m2/mat/_snack-bar.scss rename to src/material/snack-bar/_m2-snack-bar.scss index 2fe2494bfda8..9db12843824a 100644 --- a/src/material/core/tokens/m2/mat/_snack-bar.scss +++ b/src/material/snack-bar/_m2-snack-bar.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; @use 'sass:meta'; @use 'sass:color'; @@ -55,8 +55,8 @@ $prefix: (mat, snack-bar); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_snack-bar.scss b/src/material/snack-bar/_m3-snack-bar.scss similarity index 91% rename from src/material/core/tokens/m3/mat/_snack-bar.scss rename to src/material/snack-bar/_m3-snack-bar.scss index 36fcb82ea0f0..52ad45f0d2e8 100644 --- a/src/material/core/tokens/m3/mat/_snack-bar.scss +++ b/src/material/snack-bar/_m3-snack-bar.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, snack-bar); @@ -21,5 +21,5 @@ $prefix: (mat, snack-bar); supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index c130b25a0f39..ec133baaab0d 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -5,7 +5,7 @@ @use '../core/style/sass-utils'; @use '../core/typography/typography'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar; +@use './m2-snack-bar'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -14,9 +14,7 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-snack-bar.$prefix, - tokens-mat-snack-bar.get-unthemable-tokens() - ); + m2-snack-bar.$prefix, m2-snack-bar.get-unthemable-tokens()); } } } @@ -27,9 +25,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-snack-bar.$prefix, - tokens-mat-snack-bar.get-color-tokens($theme) - ); + m2-snack-bar.$prefix, m2-snack-bar.get-color-tokens($theme)); } } } @@ -40,9 +36,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-snack-bar.$prefix, - tokens-mat-snack-bar.get-typography-tokens($theme) - ); + m2-snack-bar.$prefix, m2-snack-bar.get-typography-tokens($theme)); } } } @@ -54,8 +48,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-snack-bar.$prefix, - tokens: tokens-mat-snack-bar.get-token-slots(), + namespace: m2-snack-bar.$prefix, + tokens: m2-snack-bar.get-token-slots(), ), ); } @@ -91,8 +85,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-snack-bar.$prefix, - map.get($tokens, tokens-mat-snack-bar.$prefix) + m2-snack-bar.$prefix, + map.get($tokens, m2-snack-bar.$prefix) ); } } diff --git a/src/material/snack-bar/snack-bar-container.scss b/src/material/snack-bar/snack-bar-container.scss index a66981954966..1e03ff9bfb32 100644 --- a/src/material/snack-bar/snack-bar-container.scss +++ b/src/material/snack-bar/snack-bar-container.scss @@ -1,11 +1,14 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar; -@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; +@use './m2-snack-bar'; +@use '../button/m2-text-button'; @use '../core/tokens/token-utils'; @use '../core/style/elevation'; $_side-padding: 8px; +$token-prefix: m2-snack-bar.$prefix; +$token-slots: m2-snack-bar.get-token-slots(); + @keyframes _mat-snack-bar-enter { from { transform: scale(0.8); @@ -87,14 +90,11 @@ $_side-padding: 8px; outline: solid 1px; } - @include token-utils.use-tokens( - tokens-mat-snack-bar.$prefix, - tokens-mat-snack-bar.get-token-slots() - ) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-snack-bar-container & { - @include token-utils.create-token-slot(color, supporting-text-color); - @include token-utils.create-token-slot(border-radius, container-shape); - @include token-utils.create-token-slot(background-color, container-color); + color: token-utils.slot(supporting-text-color); + border-radius: token-utils.slot(container-shape); + background-color: token-utils.slot(container-color); } } } @@ -111,15 +111,12 @@ $_side-padding: 8px; padding-right: 16px; } - @include token-utils.use-tokens( - tokens-mat-snack-bar.$prefix, - tokens-mat-snack-bar.get-token-slots() - ) { + @include token-utils.use-tokens($token-prefix, $token-slots) { .mat-mdc-snack-bar-container & { - @include token-utils.create-token-slot(font-family, supporting-text-font); - @include token-utils.create-token-slot(font-size, supporting-text-size); - @include token-utils.create-token-slot(font-weight, supporting-text-weight); - @include token-utils.create-token-slot(line-height, supporting-text-line-height); + font-family: token-utils.slot(supporting-text-font); + font-size: token-utils.slot(supporting-text-size); + font-weight: token-utils.slot(supporting-text-weight); + line-height: token-utils.slot(supporting-text-line-height); } } } @@ -147,16 +144,13 @@ $_side-padding: 8px; // MDC's `action-label-text-color` should be able to do this, but the button theme has a // higher specificity so it ends up overriding it. Define our own variable that we can // use to control the color instead. - @include token-utils.use-tokens( - tokens-mat-snack-bar.$prefix, - tokens-mat-snack-bar.get-token-slots() - ) { - @include token-utils.create-token-slot(color, button-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(button-color); } } // Darken the ripples in the button so they're visible against the dark background. - @include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, ( + @include token-utils.create-token-values-mixed(m2-text-button.$prefix, ( state-layer-color: currentColor, ripple-color: currentColor, )); diff --git a/src/material/sort/BUILD.bazel b/src/material/sort/BUILD.bazel index 8505cc8832f0..4cd845d5c0c0 100644 --- a/src/material/sort/BUILD.bazel +++ b/src/material/sort/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-sort.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-sort.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_sort-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,9 +54,9 @@ sass_binary( name = "css", src = "sort-header.scss", deps = [ + ":m2", "//src/material/core/focus-indicators", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_sort.scss b/src/material/sort/_m2-sort.scss similarity index 86% rename from src/material/core/tokens/m2/mat/_sort.scss rename to src/material/sort/_m2-sort.scss index 2c2e6f98ca4b..67e37fe1fda7 100644 --- a/src/material/core/tokens/m2/mat/_sort.scss +++ b/src/material/sort/_m2-sort.scss @@ -1,8 +1,8 @@ @use 'sass:color'; @use 'sass:meta'; -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, sort); @@ -53,8 +53,8 @@ $prefix: (mat, sort); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_sort.scss b/src/material/sort/_m3-sort.scss similarity index 83% rename from src/material/core/tokens/m3/mat/_sort.scss rename to src/material/sort/_m3-sort.scss index 2342e71c757a..b9cadc762fdd 100644 --- a/src/material/core/tokens/m3/mat/_sort.scss +++ b/src/material/sort/_m3-sort.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, sort); @@ -14,5 +14,5 @@ $prefix: (mat, sort); arrow-color: map.get($systems, md-sys-color, on-surface), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index 33b9e546c2fe..8ba1b069eac4 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../core/tokens/m2/mat/sort' as tokens-mat-sort; +@use './m2-sort'; @use '../core/style/sass-utils'; @use '../core/typography/typography'; @use '../core/theming/theming'; @@ -20,9 +20,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-sort.$prefix, - tokens-mat-sort.get-color-tokens($theme) - ); + m2-sort.$prefix, m2-sort.get-color-tokens($theme)); } } } @@ -33,9 +31,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-sort.$prefix, - tokens-mat-sort.get-typography-tokens($theme) - ); + m2-sort.$prefix, m2-sort.get-typography-tokens($theme)); } } } @@ -46,9 +42,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-sort.$prefix, - tokens-mat-sort.get-density-tokens($theme) - ); + m2-sort.$prefix, m2-sort.get-density-tokens($theme)); } } } @@ -57,8 +51,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-sort.$prefix, - tokens: tokens-mat-sort.get-token-slots(), + namespace: m2-sort.$prefix, + tokens: m2-sort.get-token-slots(), ), ); } @@ -92,8 +86,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-sort.$prefix, - map.get($tokens, tokens-mat-sort.$prefix) + m2-sort.$prefix, + map.get($tokens, m2-sort.$prefix) ); } } diff --git a/src/material/sort/sort-header.scss b/src/material/sort/sort-header.scss index ee01087a5a9e..54ad6f0e9dea 100644 --- a/src/material/sort/sort-header.scss +++ b/src/material/sort/sort-header.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mat/sort' as tokens-mat-sort; +@use './m2-sort'; @use '../core/tokens/token-utils'; @use '../core/focus-indicators/private'; @@ -77,8 +77,8 @@ opacity: 0; overflow: visible; - @include token-utils.use-tokens(tokens-mat-sort.$prefix, tokens-mat-sort.get-token-slots()) { - @include token-utils.create-token-slot(color, arrow-color); + @include token-utils.use-tokens(m2-sort.$prefix, m2-sort.get-token-slots()) { + color: token-utils.slot(arrow-color); } .mat-sort-header.cdk-keyboard-focused &, diff --git a/src/material/stepper/BUILD.bazel b/src/material/stepper/BUILD.bazel index f46e8e12f420..5a8272bd0b63 100644 --- a/src/material/stepper/BUILD.bazel +++ b/src/material/stepper/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-stepper.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-stepper.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_stepper-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,10 +54,10 @@ sass_binary( name = "css", src = "stepper.scss", deps = [ + ":m2", ":variables", "//src/cdk:sass_lib", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -41,11 +65,11 @@ sass_binary( name = "header_css", src = "step-header.scss", deps = [ + ":m2", ":variables", "//src/cdk:sass_lib", "//src/material/core/style:layout_common", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_stepper.scss b/src/material/stepper/_m2-stepper.scss similarity index 91% rename from src/material/core/tokens/m2/mat/_stepper.scss rename to src/material/stepper/_m2-stepper.scss index 35e4faad806e..6963ef3b0925 100644 --- a/src/material/core/tokens/m2/mat/_stepper.scss +++ b/src/material/stepper/_m2-stepper.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, stepper); @@ -86,8 +86,8 @@ $prefix: (mat, stepper); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_stepper.scss b/src/material/stepper/_m3-stepper.scss similarity index 95% rename from src/material/core/tokens/m3/mat/_stepper.scss rename to src/material/stepper/_m3-stepper.scss index 1315c5191fb3..09ecd961e1d8 100644 --- a/src/material/core/tokens/m3/mat/_stepper.scss +++ b/src/material/stepper/_m3-stepper.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, stepper); @@ -32,7 +32,7 @@ $prefix: (mat, stepper); header-error-state-label-text-color: map.get($systems, md-sys-color, error), header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error), header-error-state-icon-background-color: - token-definition.hardcode(transparent, $exclude-hardcoded), + m3-utils.hardcode(transparent, $exclude-hardcoded), container-text-font: map.get($systems, md-sys-typescale, body-medium-font), header-label-text-font: map.get($systems, md-sys-typescale, title-small-font), header-label-text-size: map.get($systems, md-sys-typescale, title-small-size), @@ -75,5 +75,5 @@ $prefix: (mat, stepper); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index a2748c8a7ee5..3bc2d3f53fda 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -4,7 +4,7 @@ @use '../core/typography/typography'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper; +@use './m2-stepper'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for mat-stepper. @@ -27,21 +27,21 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-stepper.$prefix, - tokens-mat-stepper.get-color-tokens($theme) + m2-stepper.$prefix, + m2-stepper.get-color-tokens($theme) ); .mat-step-header.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mat-stepper.$prefix, - tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent) + m2-stepper.$prefix, + m2-stepper.private-get-color-palette-color-tokens($theme, accent) ); } .mat-step-header.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mat-stepper.$prefix, - tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn) + m2-stepper.$prefix, + m2-stepper.private-get-color-palette-color-tokens($theme, warn) ); } } @@ -56,8 +56,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-stepper.$prefix, - tokens-mat-stepper.get-typography-tokens($theme) + m2-stepper.$prefix, + m2-stepper.get-typography-tokens($theme) ); } } @@ -71,8 +71,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-stepper.$prefix, - tokens-mat-stepper.get-density-tokens($theme) + m2-stepper.$prefix, + m2-stepper.get-density-tokens($theme) ); } } @@ -82,8 +82,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-stepper.$prefix, - tokens: tokens-mat-stepper.get-token-slots(), + namespace: m2-stepper.$prefix, + tokens: m2-stepper.get-token-slots(), ), ); } @@ -125,9 +125,9 @@ @if ($tokens != ()) { $mat-stepper-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-stepper.$prefix, + m2-stepper.$prefix, $options... ); - @include token-utils.create-token-values(tokens-mat-stepper.$prefix, $mat-stepper-tokens); + @include token-utils.create-token-values(m2-stepper.$prefix, $mat-stepper-tokens); } } diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss index deb5c063c0af..92e241eac38a 100644 --- a/src/material/stepper/step-header.scss +++ b/src/material/stepper/step-header.scss @@ -1,9 +1,12 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper; -@use '../core/tokens/token-utils'; @use '../core/style/layout-common'; +@use '../core/tokens/token-utils'; +@use './m2-stepper'; @use './stepper-variables'; +$token-prefix: m2-stepper.$prefix; +$token-slots: m2-stepper.get-token-slots(); + .mat-step-header { overflow: hidden; outline: none; @@ -22,19 +25,18 @@ cursor: default; } - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { &:hover:not([aria-disabled]), &:hover[aria-disabled='false'] { - @include token-utils.create-token-slot(background-color, header-hover-state-layer-color); - @include token-utils.create-token-slot(border-radius, header-hover-state-layer-shape); + background-color: token-utils.slot(header-hover-state-layer-color); + border-radius: token-utils.slot(header-hover-state-layer-shape); } &.cdk-keyboard-focused, &.cdk-program-focused { - @include token-utils.create-token-slot(background-color, header-focus-state-layer-color); - @include token-utils.create-token-slot(border-radius, header-focus-state-layer-shape); + background-color: token-utils.slot(header-focus-state-layer-color); + border-radius: token-utils.slot(header-focus-state-layer-shape); } } @@ -72,9 +74,8 @@ .mat-step-optional { font-size: stepper-variables.$step-sub-label-font-size; - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(color, header-optional-label-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(header-optional-label-text-color); } } @@ -90,10 +91,9 @@ flex-shrink: 0; position: relative; - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(color, header-icon-foreground-color); - @include token-utils.create-token-slot(background-color, header-icon-background-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + color: token-utils.slot(header-icon-foreground-color); + background-color: token-utils.slot(header-icon-background-color); } } @@ -116,12 +116,9 @@ } .mat-step-icon-state-error { - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(background-color, - header-error-state-icon-background-color); - @include token-utils.create-token-slot(color, - header-error-state-icon-foreground-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(header-error-state-icon-background-color); + color: token-utils.slot(header-error-state-icon-foreground-color); } .mat-icon { @@ -139,25 +136,24 @@ min-width: stepper-variables.$label-min-width; vertical-align: middle; - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(font-family, header-label-text-font); - @include token-utils.create-token-slot(font-size, header-label-text-size); - @include token-utils.create-token-slot(font-weight, header-label-text-weight); - @include token-utils.create-token-slot(color, header-label-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-family: token-utils.slot(header-label-text-font); + font-size: token-utils.slot(header-label-text-size); + font-weight: token-utils.slot(header-label-text-weight); + color: token-utils.slot(header-label-text-color); &.mat-step-label-active { - @include token-utils.create-token-slot(color, header-selected-state-label-text-color); + color: token-utils.slot(header-selected-state-label-text-color); } &.mat-step-label-error { - @include token-utils.create-token-slot(color, header-error-state-label-text-color); - @include token-utils.create-token-slot(font-size, header-error-state-label-text-size); + color: token-utils.slot(header-error-state-label-text-color); + font-size: token-utils.slot(header-error-state-label-text-size); } &.mat-step-label-selected { - @include token-utils.create-token-slot(font-size, header-selected-state-label-text-size); - @include token-utils.create-token-slot(font-weight, header-selected-state-label-text-weight); + font-size: token-utils.slot(header-selected-state-label-text-size); + font-weight: token-utils.slot(header-selected-state-label-text-weight); } } } @@ -175,31 +171,22 @@ } .mat-step-icon-selected { - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(background-color, - header-selected-state-icon-background-color); - @include token-utils.create-token-slot(color, - header-selected-state-icon-foreground-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(header-selected-state-icon-background-color); + color: token-utils.slot(header-selected-state-icon-foreground-color); } } .mat-step-icon-state-done { - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(background-color, - header-done-state-icon-background-color); - @include token-utils.create-token-slot(color, - header-done-state-icon-foreground-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(header-done-state-icon-background-color); + color: token-utils.slot(header-done-state-icon-foreground-color); } } .mat-step-icon-state-edit { - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(background-color, - header-edit-state-icon-background-color); - @include token-utils.create-token-slot(color, - header-edit-state-icon-foreground-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(header-edit-state-icon-background-color); + color: token-utils.slot(header-edit-state-icon-foreground-color); } } diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss index 19ab2d88ea56..a271ddd4b11e 100644 --- a/src/material/stepper/stepper.scss +++ b/src/material/stepper/stepper.scss @@ -1,23 +1,25 @@ @use 'sass:math'; @use '@angular/cdk'; -@use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper; +@use './m2-stepper'; @use '../core/tokens/token-utils'; @use './stepper-variables'; // Gets the `calc` expression for the vertical padding of the stepper header. @function _get-vertical-padding-calc() { - $height: token-utils.get-token-variable(header-height); + $height: token-utils.slot(header-height); @return calc(calc(#{$height} - #{stepper-variables.$label-header-height}) / 2); } +$token-prefix: m2-stepper.$prefix; +$token-slots: m2-stepper.get-token-slots(); + .mat-stepper-vertical, .mat-stepper-horizontal { display: block; - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(font-family, container-text-font); - @include token-utils.create-token-slot(background, container-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + font-family: token-utils.slot(container-text-font); + background: token-utils.slot(container-color); } } @@ -43,9 +45,8 @@ margin: 0 stepper-variables.$line-gap - stepper-variables.$side-gap; min-width: stepper-variables.$line-gap + stepper-variables.$side-gap; - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(border-top-color, line-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + border-top-color: token-utils.slot(line-color); .mat-stepper-label-position-bottom & { $vertical-padding: _get-vertical-padding-calc(); @@ -77,9 +78,8 @@ align-items: center; padding: 0 stepper-variables.$side-gap; - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { - @include token-utils.create-token-slot(height, header-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(header-height); } .mat-step-icon { @@ -92,13 +92,12 @@ } } - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { $vertical-padding: _get-vertical-padding-calc(); &::before, &::after { - @include token-utils.create-token-slot(border-top-color, line-color); + border-top-color: token-utils.slot(line-color); } .mat-stepper-label-position-bottom & { @@ -157,8 +156,7 @@ // We can't use `max-height` here, because it breaks the flexbox centering in IE. height: stepper-variables.$label-header-height; - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { padding: #{_get-vertical-padding-calc()} stepper-variables.$side-gap; } @@ -273,12 +271,11 @@ border-left-width: stepper-variables.$line-width; border-left-style: solid; - @include token-utils.use-tokens( - tokens-mat-stepper.$prefix, tokens-mat-stepper.get-token-slots()) { + @include token-utils.use-tokens($token-prefix, $token-slots) { $vertical-padding: _get-vertical-padding-calc(); $vertical-offset: calc(#{stepper-variables.$line-gap} - #{$vertical-padding}); - @include token-utils.create-token-slot(border-left-color, line-color); + border-left-color: token-utils.slot(line-color); // Ensures that the vertical lines for the step content exceed into the step // headers with a given distance (`$mat-stepper-line-gap`) to the step icon. diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel index 59ab1f789135..9340001666db 100644 --- a/src/material/table/BUILD.bazel +++ b/src/material/table/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-table.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-table.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_table-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -38,9 +62,9 @@ sass_binary( src = "table.scss", deps = [ ":flex_sass", + ":m2", "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_table.scss b/src/material/table/_m2-table.scss similarity index 90% rename from src/material/core/tokens/m2/mat/_table.scss rename to src/material/table/_m2-table.scss index c99a1be0c690..aff938ffe713 100644 --- a/src/material/core/tokens/m2/mat/_table.scss +++ b/src/material/table/_m2-table.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/tokens/m2-utils'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, table); @@ -86,8 +86,8 @@ $prefix: (mat, table); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_table.scss b/src/material/table/_m3-table.scss similarity index 65% rename from src/material/core/tokens/m3/mat/_table.scss rename to src/material/table/_m3-table.scss index ab7cf1b4f2f1..cec7d081f7e6 100644 --- a/src/material/core/tokens/m3/mat/_table.scss +++ b/src/material/table/_m3-table.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, table); @@ -12,12 +12,12 @@ $prefix: (mat, table); /// @return {Map} A set of custom tokens for the mat-table @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, header-headline, title-small), - token-definition.generate-typography-tokens($systems, row-item-label-text, body-medium), - token-definition.generate-typography-tokens( + m3-utils.generate-typography-tokens($systems, header-headline, title-small), + m3-utils.generate-typography-tokens($systems, row-item-label-text, body-medium), + m3-utils.generate-typography-tokens( $systems, footer-supporting-text, body-medium), ( - row-item-outline-width: token-definition.hardcode(1px, $exclude-hardcoded), + row-item-outline-width: m3-utils.hardcode(1px, $exclude-hardcoded), background-color: map.get($systems, md-sys-color, surface), header-headline-color: map.get($systems, md-sys-color, on-surface), row-item-label-text-color: map.get($systems, md-sys-color, on-surface), @@ -25,5 +25,5 @@ $prefix: (mat, table); ), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index 6773c8e84322..3189a304ec57 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../core/tokens/m2/mat/table' as tokens-mat-table; +@use './m2-table'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/theming/validation'; @@ -13,9 +13,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-table.$prefix, - tokens-mat-table.get-unthemable-tokens() - ); + m2-table.$prefix, m2-table.get-unthemable-tokens()); } } } @@ -26,9 +24,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-table.$prefix, - tokens-mat-table.get-color-tokens($theme) - ); + m2-table.$prefix, m2-table.get-color-tokens($theme)); } } } @@ -39,9 +35,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-table.$prefix, - tokens-mat-table.get-typography-tokens($theme) - ); + m2-table.$prefix, m2-table.get-typography-tokens($theme)); } } } @@ -52,9 +46,7 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-table.$prefix, - tokens-mat-table.get-density-tokens($theme) - ); + m2-table.$prefix, m2-table.get-density-tokens($theme)); } } } @@ -63,8 +55,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-table.$prefix, - tokens: tokens-mat-table.get-token-slots(), + namespace: m2-table.$prefix, + tokens: m2-table.get-token-slots(), ), ); } @@ -98,8 +90,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-table.$prefix, - map.get($tokens, tokens-mat-table.$prefix) + m2-table.$prefix, + map.get($tokens, m2-table.$prefix) ); } } diff --git a/src/material/table/table.scss b/src/material/table/table.scss index 1d36a2e3d830..5dab30bae5d6 100644 --- a/src/material/table/table.scss +++ b/src/material/table/table.scss @@ -1,6 +1,6 @@ -@use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/table' as tokens-mat-table; @use '../core/style/vendor-prefixes'; +@use '../core/tokens/token-utils'; +@use './m2-table'; @use './table-flex-styles'; .mat-mdc-table-sticky { @@ -10,9 +10,12 @@ position: sticky !important; } +$token-prefix: m2-table.$prefix; +$token-slots: m2-table.get-token-slots(); + @mixin _cell-border { - @include token-utils.create-token-slot(border-bottom-color, row-item-outline-color, true); - @include token-utils.create-token-slot(border-bottom-width, row-item-outline-width, true); + border-bottom-color: token-utils.slot(row-item-outline-color, true); + border-bottom-width: token-utils.slot(row-item-outline-width, true); border-bottom-style: solid; } @@ -25,8 +28,8 @@ table-layout: auto; white-space: normal; - @include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) { - @include token-utils.create-token-slot(background-color, background-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background-color: token-utils.slot(background-color); } } @@ -46,22 +49,22 @@ padding: 0 16px; } -@include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) { +@include token-utils.use-tokens($token-prefix, $token-slots) { // TODO(crisbeto): these tokens have default values in order to make the initial token // work easier to land in g3. Eventually we should remove them. .mat-mdc-header-row { @include vendor-prefixes.smooth-font; - @include token-utils.create-token-slot(height, header-container-height, 56px); - @include token-utils.create-token-slot(color, header-headline-color, true); - @include token-utils.create-token-slot(font-family, header-headline-font, true); - @include token-utils.create-token-slot(line-height, header-headline-line-height); - @include token-utils.create-token-slot(font-size, header-headline-size, 14px); - @include token-utils.create-token-slot(font-weight, header-headline-weight, 500); + height: token-utils.slot(header-container-height, 56px); + color: token-utils.slot(header-headline-color, true); + font-family: token-utils.slot(header-headline-font, true); + line-height: token-utils.slot(header-headline-line-height); + font-size: token-utils.slot(header-headline-size, 14px); + font-weight: token-utils.slot(header-headline-weight, 500); } .mat-mdc-row { - @include token-utils.create-token-slot(height, row-item-container-height, 52px); - @include token-utils.create-token-slot(color, row-item-label-text-color, true); + height: token-utils.slot(row-item-container-height, 52px); + color: token-utils.slot(row-item-label-text-color, true); } // Note that while it's redundant to apply the typography both to the row @@ -71,26 +74,26 @@ .mat-mdc-row, .mdc-data-table__content { @include vendor-prefixes.smooth-font; - @include token-utils.create-token-slot(font-family, row-item-label-text-font, true); - @include token-utils.create-token-slot(line-height, row-item-label-text-line-height); - @include token-utils.create-token-slot(font-size, row-item-label-text-size, 14px); - @include token-utils.create-token-slot(font-weight, row-item-label-text-weight); + font-family: token-utils.slot(row-item-label-text-font, true); + line-height: token-utils.slot(row-item-label-text-line-height); + font-size: token-utils.slot(row-item-label-text-size, 14px); + font-weight: token-utils.slot(row-item-label-text-weight); } .mat-mdc-footer-row { @include vendor-prefixes.smooth-font; - @include token-utils.create-token-slot(height, footer-container-height, 52px); - @include token-utils.create-token-slot(color, row-item-label-text-color, true); - @include token-utils.create-token-slot(font-family, footer-supporting-text-font, true); - @include token-utils.create-token-slot(line-height, footer-supporting-text-line-height); - @include token-utils.create-token-slot(font-size, footer-supporting-text-size, 14px); - @include token-utils.create-token-slot(font-weight, footer-supporting-text-weight); - @include token-utils.create-token-slot(letter-spacing, footer-supporting-text-tracking); + height: token-utils.slot(footer-container-height, 52px); + color: token-utils.slot(row-item-label-text-color, true); + font-family: token-utils.slot(footer-supporting-text-font, true); + line-height: token-utils.slot(footer-supporting-text-line-height); + font-size: token-utils.slot(footer-supporting-text-size, 14px); + font-weight: token-utils.slot(footer-supporting-text-weight); + letter-spacing: token-utils.slot(footer-supporting-text-tracking); } .mat-mdc-header-cell { @include _cell-border; - @include token-utils.create-token-slot(letter-spacing, header-headline-tracking); + letter-spacing: token-utils.slot(header-headline-tracking); font-weight: inherit; line-height: inherit; box-sizing: border-box; @@ -110,7 +113,7 @@ .mat-mdc-cell { @include _cell-border; - @include token-utils.create-token-slot(letter-spacing, row-item-label-text-tracking); + letter-spacing: token-utils.slot(row-item-label-text-tracking); line-height: inherit; .mdc-data-table__row:last-child > & { @@ -119,7 +122,7 @@ } .mat-mdc-footer-cell { - @include token-utils.create-token-slot(letter-spacing, row-item-label-text-tracking); + letter-spacing: token-utils.slot(row-item-label-text-tracking); } } diff --git a/src/material/tabs/BUILD.bazel b/src/material/tabs/BUILD.bazel index 28c53dc0bd4d..bc6040676d9d 100644 --- a/src/material/tabs/BUILD.bazel +++ b/src/material/tabs/BUILD.bazel @@ -10,6 +10,35 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-secondary-navigation-tab.scss", + "_m3-tab-header.scss", + "_m3-tab-indicator.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-secondary-navigation-tab.scss", + "_m2-tab-header.scss", + "_m2-tab-header-with-background.scss", + "_m2-tab-indicator.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ @@ -21,7 +50,6 @@ sass_library( "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -34,7 +62,6 @@ sass_library( deps = [ "//src/material/core/style:vendor_prefixes", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) @@ -42,6 +69,7 @@ sass_binary( name = "tab_group_css", src = "tab-group.scss", deps = [ + ":m2", ":sass", "//src/material/core/style:private", "//src/material/core/style:variables", diff --git a/src/material/core/tokens/m2/mat/_secondary-navigation-tab.scss b/src/material/tabs/_m2-secondary-navigation-tab.scss similarity index 82% rename from src/material/core/tokens/m2/mat/_secondary-navigation-tab.scss rename to src/material/tabs/_m2-secondary-navigation-tab.scss index ade7e88c755a..428baf1d5e71 100644 --- a/src/material/core/tokens/m2/mat/_secondary-navigation-tab.scss +++ b/src/material/tabs/_m2-secondary-navigation-tab.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, secondary-navigation-tab); @@ -51,8 +51,8 @@ $prefix: (mat, secondary-navigation-tab); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_tab-header-with-background.scss b/src/material/tabs/_m2-tab-header-with-background.scss similarity index 78% rename from src/material/core/tokens/m2/mat/_tab-header-with-background.scss rename to src/material/tabs/_m2-tab-header-with-background.scss index 5a0417a8d674..08a97366bf91 100644 --- a/src/material/core/tokens/m2/mat/_tab-header-with-background.scss +++ b/src/material/tabs/_m2-tab-header-with-background.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tab-header-with-background); @@ -35,8 +35,8 @@ $prefix: (mat, tab-header-with-background); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_tab-header.scss b/src/material/tabs/_m2-tab-header.scss similarity index 89% rename from src/material/core/tokens/m2/mat/_tab-header.scss rename to src/material/tabs/_m2-tab-header.scss index 1ce5211a1721..77e47bb44120 100644 --- a/src/material/core/tokens/m2/mat/_tab-header.scss +++ b/src/material/tabs/_m2-tab-header.scss @@ -1,6 +1,6 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tab-header); @@ -65,8 +65,8 @@ $prefix: (mat, tab-header); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m2/mat/_tab-indicator.scss b/src/material/tabs/_m2-tab-indicator.scss similarity index 81% rename from src/material/core/tokens/m2/mat/_tab-indicator.scss rename to src/material/tabs/_m2-tab-indicator.scss index dd01037cb09d..7bf156e483a2 100644 --- a/src/material/core/tokens/m2/mat/_tab-indicator.scss +++ b/src/material/tabs/_m2-tab-indicator.scss @@ -1,6 +1,6 @@ -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tab-indicator); @@ -41,8 +41,8 @@ $prefix: (mat, tab-indicator); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_secondary-navigation-tab.scss b/src/material/tabs/_m3-secondary-navigation-tab.scss similarity index 83% rename from src/material/core/tokens/m3/mat/_secondary-navigation-tab.scss rename to src/material/tabs/_m3-secondary-navigation-tab.scss index ca7ac2a2f779..ef6d551bf8a6 100644 --- a/src/material/core/tokens/m3/mat/_secondary-navigation-tab.scss +++ b/src/material/tabs/_m3-secondary-navigation-tab.scss @@ -1,4 +1,4 @@ -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, secondary-navigation-tab); @@ -13,5 +13,5 @@ $prefix: (mat, secondary-navigation-tab); container-height: if($exclude-hardcoded, null, 48px), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_tab-header.scss b/src/material/tabs/_m3-tab-header.scss similarity index 86% rename from src/material/core/tokens/m3/mat/_tab-header.scss rename to src/material/tabs/_m3-tab-header.scss index 39b693065c36..0996669f9633 100644 --- a/src/material/core/tokens/m3/mat/_tab-header.scss +++ b/src/material/tabs/_m3-tab-header.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tab-header); @@ -12,10 +12,10 @@ $prefix: (mat, tab-header); /// @return {Map} A set of custom tokens for the mat-tab-header @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, label-text, title-small), + m3-utils.generate-typography-tokens($systems, label-text, title-small), ( divider-color: map.get($systems, md-sys-color, surface-variant), - divider-height: token-definition.hardcode(1px, $exclude-hardcoded), + divider-height: m3-utils.hardcode(1px, $exclude-hardcoded), pagination-icon-color: map.get($systems, md-sys-color, on-surface), inactive-label-text-color: map.get($systems, md-sys-color, on-surface), active-label-text-color: map.get($systems, md-sys-color, on-surface), @@ -47,6 +47,6 @@ $prefix: (mat, tab-header); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_tab-indicator.scss b/src/material/tabs/_m3-tab-indicator.scss similarity index 77% rename from src/material/core/tokens/m3/mat/_tab-indicator.scss rename to src/material/tabs/_m3-tab-indicator.scss index 6f502c031a77..c986e080cb4a 100644 --- a/src/material/core/tokens/m3/mat/_tab-indicator.scss +++ b/src/material/tabs/_m3-tab-indicator.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tab-indicator); @@ -11,8 +11,8 @@ $prefix: (mat, tab-indicator); /// @return {Map} A set of tokens for the MDC tab-indicator @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - active-indicator-height: token-definition.hardcode(2px, $exclude-hardcoded), - active-indicator-shape: token-definition.hardcode(0, $exclude-hardcoded), + active-indicator-height: m3-utils.hardcode(2px, $exclude-hardcoded), + active-indicator-shape: m3-utils.hardcode(0, $exclude-hardcoded), active-indicator-color: map.get($systems, md-sys-color, primary), ); @@ -30,5 +30,5 @@ $prefix: (mat, tab-indicator); ) ); - @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); + @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss index 4d4f12007487..405664a38588 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -1,11 +1,10 @@ @use '../core/style/vendor-prefixes'; -@use '../core/tokens/m2/mat/tab-indicator' as tokens-mat-tab-indicator; -@use '../core/tokens/m2/mat/secondary-navigation-tab' as tokens-mat-secondary-navigation-tab; -@use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header; -@use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background; +@use './m2-tab-indicator'; +@use './m2-secondary-navigation-tab'; +@use './m2-tab-header'; +@use './m2-tab-header-with-background'; @use '../core/tokens/token-utils'; - $mat-tab-animation-duration: 500ms !default; // Combines the various structural styles we need for the tab group and tab nav bar. @@ -103,21 +102,21 @@ $mat-tab-animation-duration: 500ms !default; background: none; @include token-utils.use-tokens( - tokens-mat-secondary-navigation-tab.$prefix, - tokens-mat-secondary-navigation-tab.get-token-slots() + m2-secondary-navigation-tab.$prefix, + m2-secondary-navigation-tab.get-token-slots() ) { - @include token-utils.create-token-slot(height, container-height); + height: token-utils.slot(container-height); } @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { - @include token-utils.create-token-slot(font-family, label-text-font); - @include token-utils.create-token-slot(font-size, label-text-size); - @include token-utils.create-token-slot(letter-spacing, label-text-tracking); - @include token-utils.create-token-slot(line-height, label-text-line-height); - @include token-utils.create-token-slot(font-weight, label-text-weight); + font-family: token-utils.slot(label-text-font); + font-size: token-utils.slot(label-text-size); + letter-spacing: token-utils.slot(label-text-tracking); + line-height: token-utils.slot(label-text-line-height); + font-weight: token-utils.slot(label-text-weight); } &.mdc-tab { @@ -129,54 +128,54 @@ $mat-tab-animation-duration: 500ms !default; .mdc-tab-indicator__content--underline { @include token-utils.use-tokens( - tokens-mat-tab-indicator.$prefix, - tokens-mat-tab-indicator.get-token-slots() + m2-tab-indicator.$prefix, + m2-tab-indicator.get-token-slots() ) { - @include token-utils.create-token-slot(border-color, active-indicator-color); - @include token-utils.create-token-slot(border-top-width, active-indicator-height); - @include token-utils.create-token-slot(border-radius, active-indicator-shape); + border-color: token-utils.slot(active-indicator-color); + border-top-width: token-utils.slot(active-indicator-height); + border-radius: token-utils.slot(active-indicator-shape); } } @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { &:hover .mdc-tab__text-label { - @include token-utils.create-token-slot(color, inactive-hover-label-text-color); + color: token-utils.slot(inactive-hover-label-text-color); } &:focus .mdc-tab__text-label { - @include token-utils.create-token-slot(color, inactive-focus-label-text-color); + color: token-utils.slot(inactive-focus-label-text-color); } &.mdc-tab--active { .mdc-tab__text-label { - @include token-utils.create-token-slot(color, active-label-text-color); + color: token-utils.slot(active-label-text-color); } .mdc-tab__ripple::before, .mat-ripple-element { - @include token-utils.create-token-slot(background-color, active-ripple-color); + background-color: token-utils.slot(active-ripple-color); } &:hover { .mdc-tab__text-label { - @include token-utils.create-token-slot(color, active-hover-label-text-color); + color: token-utils.slot(active-hover-label-text-color); } .mdc-tab-indicator__content--underline { - @include token-utils.create-token-slot(border-color, active-hover-indicator-color); + border-color: token-utils.slot(active-hover-indicator-color); } } &:focus { .mdc-tab__text-label { - @include token-utils.create-token-slot(color, active-focus-label-text-color); + color: token-utils.slot(active-focus-label-text-color); } .mdc-tab-indicator__content--underline { - @include token-utils.create-token-slot(border-color, active-focus-indicator-color); + border-color: token-utils.slot(active-focus-indicator-color); } } } @@ -200,12 +199,12 @@ $mat-tab-animation-duration: 500ms !default; } @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { .mdc-tab__ripple::before, .mat-ripple-element { - @include token-utils.create-token-slot(background-color, disabled-ripple-color); + background-color: token-utils.slot(disabled-ripple-color); } } } @@ -224,19 +223,19 @@ $mat-tab-animation-duration: 500ms !default; pointer-events: none; @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { - @include token-utils.create-token-slot(background-color, inactive-ripple-color); + background-color: token-utils.slot(inactive-ripple-color); } } .mdc-tab__text-label { @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { - @include token-utils.create-token-slot(color, inactive-label-text-color); + color: token-utils.slot(inactive-label-text-color); } // We support projecting icons into the tab. These styles ensure that they're centered. @@ -271,10 +270,10 @@ $mat-tab-animation-duration: 500ms !default; opacity: 0.12; @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { - @include token-utils.create-token-slot(background-color, inactive-ripple-color); + background-color: token-utils.slot(inactive-ripple-color); } } } @@ -315,10 +314,10 @@ $mat-tab-animation-duration: 500ms !default; opacity: 0.12; @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { - @include token-utils.create-token-slot(background-color, inactive-ripple-color); + background-color: token-utils.slot(inactive-ripple-color); } } @@ -352,10 +351,10 @@ $mat-tab-animation-duration: 500ms !default; width: 8px; @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { - @include token-utils.create-token-slot(border-color, pagination-icon-color); + border-color: token-utils.slot(pagination-icon-color); } } @@ -403,10 +402,10 @@ $mat-tab-animation-duration: 500ms !default; .cdk-drop-list &, &.cdk-drop-list { @include token-utils.use-tokens( - tokens-mat-secondary-navigation-tab.$prefix, - tokens-mat-secondary-navigation-tab.get-token-slots() + m2-secondary-navigation-tab.$prefix, + m2-secondary-navigation-tab.get-token-slots() ) { - @include token-utils.create-token-slot(min-height, container-height); + min-height: token-utils.slot(container-height); } } } @@ -420,19 +419,19 @@ $mat-tab-animation-duration: 500ms !default; overflow: hidden; z-index: 1; @include token-utils.use-tokens( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-token-slots() + m2-tab-header.$prefix, + m2-tab-header.get-token-slots() ) { border-bottom-style: solid; - @include token-utils.create-token-slot(border-bottom-width, divider-height); - @include token-utils.create-token-slot(border-bottom-color, divider-color); + border-bottom-width: token-utils.slot(divider-height); + border-bottom-color: token-utils.slot(divider-color); @if ($inverted-header-selector) { #{$inverted-header-selector} & { border-bottom: none; border-top-style: solid; - @include token-utils.create-token-slot(border-top-width, divider-height); - @include token-utils.create-token-slot(border-top-color, divider-color); + border-top-width: token-utils.slot(divider-height); + border-top-color: token-utils.slot(divider-color); } } } @@ -441,14 +440,14 @@ $mat-tab-animation-duration: 500ms !default; @mixin paginated-tab-header-with-background($header-selector, $tab-selector) { &.mat-tabs-with-background { @include token-utils.use-tokens( - tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-token-slots() + m2-tab-header-with-background.$prefix, + m2-tab-header-with-background.get-token-slots() ) { // Note that these selectors target direct descendants so // that the styles don't apply to any nested tab groups. > #{$header-selector}, > .mat-mdc-tab-header-pagination { // Set background color for the tab group - @include token-utils.create-token-slot(background-color, background-color); + background-color: token-utils.slot(background-color); } // Note: this is only scoped to primary, because the legacy tabs had the incorrect behavior @@ -458,22 +457,22 @@ $mat-tab-animation-duration: 500ms !default; &.mat-primary > #{$header-selector} { // Set labels to contrast against background #{$tab-selector} .mdc-tab__text-label { - @include token-utils.create-token-slot(color, foreground-color); + color: token-utils.slot(foreground-color); } .mdc-tab-indicator__content--underline { - @include token-utils.create-token-slot(border-color, foreground-color); + border-color: token-utils.slot(foreground-color); } } &:not(.mat-primary) > #{$header-selector} { #{$tab-selector}:not(.mdc-tab--active) { .mdc-tab__text-label { - @include token-utils.create-token-slot(color, foreground-color); + color: token-utils.slot(foreground-color); } .mdc-tab-indicator__content--underline { - @include token-utils.create-token-slot(border-color, foreground-color); + border-color: token-utils.slot(foreground-color); } } } @@ -481,15 +480,15 @@ $mat-tab-animation-duration: 500ms !default; > #{$header-selector}, > .mat-mdc-tab-header-pagination { .mat-mdc-tab-header-pagination-chevron, .mat-focus-indicator::before { - @include token-utils.create-token-slot(border-color, foreground-color); + border-color: token-utils.slot(foreground-color); } .mat-ripple-element, .mdc-tab__ripple::before { - @include token-utils.create-token-slot(background-color, foreground-color); + background-color: token-utils.slot(foreground-color); } .mat-mdc-tab-header-pagination-chevron { - @include token-utils.create-token-slot(color, foreground-color); + color: token-utils.slot(foreground-color); } } } diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index 73dca4636a22..ffdd5d0968d0 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -1,8 +1,8 @@ @use '../core/style/sass-utils'; -@use '../core/tokens/m2/mat/secondary-navigation-tab' as tokens-mat-secondary-navigation-tab; -@use '../core/tokens/m2/mat/tab-indicator' as tokens-mat-tab-indicator; -@use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header; -@use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background; +@use './m2-secondary-navigation-tab'; +@use './m2-tab-indicator'; +@use './m2-tab-header'; +@use './m2-tab-header-with-background'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/theming/validation'; @@ -18,20 +18,20 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-secondary-navigation-tab.$prefix, - tokens-mat-secondary-navigation-tab.get-unthemable-tokens() + m2-secondary-navigation-tab.$prefix, + m2-secondary-navigation-tab.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-indicator.$prefix, - tokens-mat-tab-indicator.get-unthemable-tokens() + m2-tab-indicator.$prefix, + m2-tab-indicator.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-unthemable-tokens() + m2-tab-header.$prefix, + m2-tab-header.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-unthemable-tokens() + m2-tab-header-with-background.$prefix, + m2-tab-header-with-background.get-unthemable-tokens() ); } } @@ -75,23 +75,23 @@ @mixin _background-styles($theme, $palette-name) { @include token-utils.create-token-values-mixed( - tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-color-tokens($theme, $palette-name) + m2-tab-header-with-background.$prefix, + m2-tab-header-with-background.get-color-tokens($theme, $palette-name) ); } @mixin _palette-styles($theme, $palette-name) { @include token-utils.create-token-values-mixed( - tokens-mat-secondary-navigation-tab.$prefix, - tokens-mat-secondary-navigation-tab.get-color-tokens($theme, $palette-name) + m2-secondary-navigation-tab.$prefix, + m2-secondary-navigation-tab.get-color-tokens($theme, $palette-name) ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-indicator.$prefix, - tokens-mat-tab-indicator.get-color-tokens($theme, $palette-name) + m2-tab-indicator.$prefix, + m2-tab-indicator.get-color-tokens($theme, $palette-name) ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-color-tokens($theme, $palette-name) + m2-tab-header.$prefix, + m2-tab-header.get-color-tokens($theme, $palette-name) ); } @@ -103,20 +103,20 @@ } @else { .mat-mdc-tab-header { @include token-utils.create-token-values-mixed( - tokens-mat-secondary-navigation-tab.$prefix, - tokens-mat-secondary-navigation-tab.get-typography-tokens($theme) + m2-secondary-navigation-tab.$prefix, + m2-secondary-navigation-tab.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-indicator.$prefix, - tokens-mat-tab-indicator.get-typography-tokens($theme) + m2-tab-indicator.$prefix, + m2-tab-indicator.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-typography-tokens($theme) + m2-tab-header.$prefix, + m2-tab-header.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-typography-tokens($theme) + m2-tab-header-with-background.$prefix, + m2-tab-header-with-background.get-typography-tokens($theme) ); } } @@ -130,20 +130,20 @@ } @else { .mat-mdc-tab-header { @include token-utils.create-token-values-mixed( - tokens-mat-secondary-navigation-tab.$prefix, - tokens-mat-secondary-navigation-tab.get-density-tokens($theme) + m2-secondary-navigation-tab.$prefix, + m2-secondary-navigation-tab.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-indicator.$prefix, - tokens-mat-tab-indicator.get-density-tokens($theme) + m2-tab-indicator.$prefix, + m2-tab-indicator.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-header.$prefix, - tokens-mat-tab-header.get-density-tokens($theme) + m2-tab-header.$prefix, + m2-tab-header.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mat-tab-header-with-background.$prefix, - tokens-mat-tab-header-with-background.get-density-tokens($theme) + m2-tab-header-with-background.$prefix, + m2-tab-header-with-background.get-density-tokens($theme) ); } } @@ -151,26 +151,26 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $tab-tokens: tokens-mat-secondary-navigation-tab.get-token-slots(); - $tab-indicator-tokens: tokens-mat-tab-indicator.get-token-slots(); - $tab-header-tokens: tokens-mat-tab-header.get-token-slots(); - $tab-header-with-background-tokens: tokens-mat-tab-header-with-background.get-token-slots(); + $tab-tokens: m2-secondary-navigation-tab.get-token-slots(); + $tab-indicator-tokens: m2-tab-indicator.get-token-slots(); + $tab-header-tokens: m2-tab-header.get-token-slots(); + $tab-header-with-background-tokens: m2-tab-header-with-background.get-token-slots(); @return ( ( - namespace: tokens-mat-secondary-navigation-tab.$prefix, + namespace: m2-secondary-navigation-tab.$prefix, tokens: $tab-tokens, ), ( - namespace: tokens-mat-tab-indicator.$prefix, + namespace: m2-tab-indicator.$prefix, tokens: $tab-indicator-tokens, ), ( - namespace: tokens-mat-tab-header.$prefix, + namespace: m2-tab-header.$prefix, tokens: $tab-header-tokens, ), ( - namespace: tokens-mat-tab-header-with-background.$prefix, + namespace: m2-tab-header-with-background.$prefix, tokens: $tab-header-with-background-tokens, ), ); @@ -212,27 +212,27 @@ ); $mdc-tab-indicator-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-tab-indicator.$prefix, + m2-tab-indicator.$prefix, $options... ); $mat-tab-header-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-tab-header.$prefix, + m2-tab-header.$prefix, $options... ); // Don't pass $options here, because the mdc-tab doesn't have color variants, // only the mdc-tab-indicator and mat-tab-header do. $mdc-secondary-navigation-tab-tokens: token-utils.get-tokens-for( $tokens, - tokens-mat-secondary-navigation-tab.$prefix + m2-secondary-navigation-tab.$prefix ); @include token-utils.create-token-values( - tokens-mat-secondary-navigation-tab.$prefix, + m2-secondary-navigation-tab.$prefix, $mdc-secondary-navigation-tab-tokens ); @include token-utils.create-token-values( - tokens-mat-tab-indicator.$prefix, + m2-tab-indicator.$prefix, $mdc-tab-indicator-tokens ); - @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, $mat-tab-header-tokens); + @include token-utils.create-token-values(m2-tab-header.$prefix, $mat-tab-header-tokens); } diff --git a/src/material/timepicker/BUILD.bazel b/src/material/timepicker/BUILD.bazel index 93f808ccad35..f9f33bdae7b1 100644 --- a/src/material/timepicker/BUILD.bazel +++ b/src/material/timepicker/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-timepicker.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-timepicker.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_timepicker-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,9 +54,9 @@ sass_binary( name = "timepicker_css", src = "timepicker.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_timepicker.scss b/src/material/timepicker/_m2-timepicker.scss similarity index 76% rename from src/material/core/tokens/m2/mat/_timepicker.scss rename to src/material/timepicker/_m2-timepicker.scss index c40620529cf9..430b9b8678bd 100644 --- a/src/material/core/tokens/m2/mat/_timepicker.scss +++ b/src/material/timepicker/_m2-timepicker.scss @@ -1,7 +1,7 @@ -@use '../../token-definition'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../../style/elevation'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, timepicker); @@ -37,8 +37,8 @@ $prefix: (mat, timepicker); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_timepicker.scss b/src/material/timepicker/_m3-timepicker.scss similarity index 75% rename from src/material/core/tokens/m3/mat/_timepicker.scss rename to src/material/timepicker/_m3-timepicker.scss index 8e9388d3ac6c..3edc539c0926 100644 --- a/src/material/core/tokens/m3/mat/_timepicker.scss +++ b/src/material/timepicker/_m3-timepicker.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; +@use '../core/style/elevation'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, timepicker); @@ -15,8 +15,8 @@ $prefix: (mat, timepicker); container-background-color: map.get($systems, md-sys-color, surface-container), container-shape: map.get($systems, md-sys-shape, corner-extra-small), container-elevation-shadow: - token-definition.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded), + m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/timepicker/_timepicker-theme.scss b/src/material/timepicker/_timepicker-theme.scss index da6d3640d47b..b9df0d896fd8 100644 --- a/src/material/timepicker/_timepicker-theme.scss +++ b/src/material/timepicker/_timepicker-theme.scss @@ -4,7 +4,7 @@ @use '../core/theming/validation'; @use '../core/typography/typography'; @use '../core/style/sass-utils'; -@use '../core/tokens/m2/mat/timepicker' as tokens-mat-timepicker; +@use './m2-timepicker'; @use '../core/tokens/token-utils'; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -16,8 +16,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-timepicker.$prefix, - tokens-mat-timepicker.get-unthemable-tokens() + m2-timepicker.$prefix, + m2-timepicker.get-unthemable-tokens() ); } } @@ -34,8 +34,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-timepicker.$prefix, - tokens-mat-timepicker.get-color-tokens($theme) + m2-timepicker.$prefix, + m2-timepicker.get-color-tokens($theme) ); } } @@ -49,8 +49,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-timepicker.$prefix, - tokens-mat-timepicker.get-typography-tokens($theme) + m2-timepicker.$prefix, + m2-timepicker.get-typography-tokens($theme) ); } } @@ -64,8 +64,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-timepicker.$prefix, - tokens-mat-timepicker.get-density-tokens($theme) + m2-timepicker.$prefix, + m2-timepicker.get-density-tokens($theme) ); } } @@ -75,8 +75,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-timepicker.$prefix, - tokens: tokens-mat-timepicker.get-token-slots(), + namespace: m2-timepicker.$prefix, + tokens: m2-timepicker.get-token-slots(), ), ); } @@ -117,8 +117,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-timepicker.$prefix, - map.get($tokens, tokens-mat-timepicker.$prefix) + m2-timepicker.$prefix, + map.get($tokens, m2-timepicker.$prefix) ); } } diff --git a/src/material/timepicker/timepicker.scss b/src/material/timepicker/timepicker.scss index fd98d9c01294..b7386d88b733 100644 --- a/src/material/timepicker/timepicker.scss +++ b/src/material/timepicker/timepicker.scss @@ -1,6 +1,6 @@ @use '@angular/cdk'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/timepicker' as tokens-mat-timepicker; +@use './m2-timepicker'; @keyframes _mat-timepicker-enter { from { @@ -36,12 +36,11 @@ mat-timepicker { padding: 8px 0; box-sizing: border-box; - @include token-utils.use-tokens( - tokens-mat-timepicker.$prefix, tokens-mat-timepicker.get-token-slots()) { - @include token-utils.create-token-slot(border-bottom-left-radius, container-shape); - @include token-utils.create-token-slot(border-bottom-right-radius, container-shape); - @include token-utils.create-token-slot(box-shadow, container-elevation-shadow); - @include token-utils.create-token-slot(background-color, container-background-color); + @include token-utils.use-tokens(m2-timepicker.$prefix, m2-timepicker.get-token-slots()) { + border-bottom-left-radius: token-utils.slot(container-shape); + border-bottom-right-radius: token-utils.slot(container-shape); + box-shadow: token-utils.slot(container-elevation-shadow); + background-color: token-utils.slot(container-background-color); } @include cdk.high-contrast { @@ -52,10 +51,9 @@ mat-timepicker { border-bottom-left-radius: 0; border-bottom-right-radius: 0; - @include token-utils.use-tokens( - tokens-mat-timepicker.$prefix, tokens-mat-timepicker.get-token-slots()) { - @include token-utils.create-token-slot(border-top-left-radius, container-shape); - @include token-utils.create-token-slot(border-top-right-radius, container-shape); + @include token-utils.use-tokens(m2-timepicker.$prefix, m2-timepicker.get-token-slots()) { + border-top-left-radius: token-utils.slot(container-shape); + border-top-right-radius: token-utils.slot(container-shape); } } } diff --git a/src/material/toolbar/BUILD.bazel b/src/material/toolbar/BUILD.bazel index 64b1535667bb..f06c8fe6563a 100644 --- a/src/material/toolbar/BUILD.bazel +++ b/src/material/toolbar/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-toolbar.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-toolbar.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_toolbar-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,10 +54,10 @@ sass_binary( name = "css", src = "toolbar.scss", deps = [ + ":m2", "//src/cdk:sass_lib", "//src/material/core/style:variables", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_toolbar.scss b/src/material/toolbar/_m2-toolbar.scss similarity index 86% rename from src/material/core/tokens/m2/mat/_toolbar.scss rename to src/material/toolbar/_m2-toolbar.scss index b36128500826..c4b2ca60a8e1 100644 --- a/src/material/core/tokens/m2/mat/_toolbar.scss +++ b/src/material/toolbar/_m2-toolbar.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, toolbar); @@ -68,8 +68,8 @@ $prefix: (mat, toolbar); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_toolbar.scss b/src/material/toolbar/_m3-toolbar.scss similarity index 75% rename from src/material/core/tokens/m3/mat/_toolbar.scss rename to src/material/toolbar/_m3-toolbar.scss index efd9bef32585..e1d58cf3b394 100644 --- a/src/material/core/tokens/m3/mat/_toolbar.scss +++ b/src/material/toolbar/_m3-toolbar.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, toolbar); @@ -12,12 +12,12 @@ $prefix: (mat, toolbar); /// @return {Map} A set of custom tokens for the mat-toolbar @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, title-text, title-large), + m3-utils.generate-typography-tokens($systems, title-text, title-large), ( container-background-color: map.get($systems, md-sys-color, surface), container-text-color: map.get($systems, md-sys-color, on-surface), ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss index b19bd8ebc7b7..73d992afb2eb 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -1,16 +1,16 @@ @use 'sass:map'; -@use '../core/theming/theming'; +@use '../core/style/sass-utils'; @use '../core/theming/inspection'; +@use '../core/theming/theming'; @use '../core/theming/validation'; -@use '../core/typography/typography'; -@use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar; @use '../core/tokens/token-utils'; -@use '../core/style/sass-utils'; +@use '../core/typography/typography'; +@use './m2-toolbar'; @mixin _palette-styles($theme, $palette-name) { @include token-utils.create-token-values-mixed( - tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.private-get-color-palette-color-tokens( + m2-toolbar.$prefix, + m2-toolbar.private-get-color-palette-color-tokens( $background-color: inspection.get-theme-color($theme, $palette-name), $text-color: inspection.get-theme-color($theme, $palette-name, default-contrast) ) @@ -26,8 +26,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-color-tokens($theme) + m2-toolbar.$prefix, + m2-toolbar.get-color-tokens($theme) ); } @@ -56,8 +56,8 @@ @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-typography-tokens($theme) + m2-toolbar.$prefix, + m2-toolbar.get-typography-tokens($theme) ); } } @@ -69,8 +69,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-toolbar.$prefix, - tokens-mat-toolbar.get-density-tokens($theme) + m2-toolbar.$prefix, + m2-toolbar.get-density-tokens($theme) ); } } @@ -80,8 +80,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-toolbar.$prefix, - tokens: tokens-mat-toolbar.get-token-slots(), + namespace: m2-toolbar.$prefix, + tokens: m2-toolbar.get-token-slots(), ), ); } @@ -117,8 +117,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-toolbar.$prefix, - map.get($tokens, tokens-mat-toolbar.$prefix) + m2-toolbar.$prefix, + map.get($tokens, m2-toolbar.$prefix) ); } } diff --git a/src/material/toolbar/toolbar.scss b/src/material/toolbar/toolbar.scss index 6d60f13cf7d0..296bdc3a85df 100644 --- a/src/material/toolbar/toolbar.scss +++ b/src/material/toolbar/toolbar.scss @@ -1,28 +1,30 @@ @use '@angular/cdk'; -@use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar; -@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; -@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button; +@use '../button/m2-outlined-button'; +@use '../button/m2-text-button'; @use '../core/style/variables'; +@use '../core/tokens/token-utils'; +@use './m2-toolbar'; $row-padding: 16px !default; +$token-prefix: m2-toolbar.$prefix; +$token-slots: m2-toolbar.get-token-slots(); + // @deprecated @breaking-change 8.0.0 // TODO: Remove once internal g3 apps no longer depend on this variable. Tracked with: COMP-303. $height-mobile-portrait: 56px !default; .mat-toolbar { - @include token-utils.use-tokens( - tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) { - @include token-utils.create-token-slot(background, container-background-color); - @include token-utils.create-token-slot(color, container-text-color); + @include token-utils.use-tokens($token-prefix, $token-slots) { + background: token-utils.slot(container-background-color); + color: token-utils.slot(container-text-color); &, h1, h2, h3, h4, h5, h6 { - @include token-utils.create-token-slot(font-family, title-text-font); - @include token-utils.create-token-slot(font-size, title-text-size); - @include token-utils.create-token-slot(line-height, title-text-line-height); - @include token-utils.create-token-slot(font-weight, title-text-weight); - @include token-utils.create-token-slot(letter-spacing, title-text-tracking); + font-family: token-utils.slot(title-text-font); + font-size: token-utils.slot(title-text-size); + line-height: token-utils.slot(title-text-line-height); + font-weight: token-utils.slot(title-text-weight); + letter-spacing: token-utils.slot(title-text-tracking); margin: 0; } } @@ -54,18 +56,18 @@ $height-mobile-portrait: 56px !default; $color-token: null; @include token-utils.use-tokens( - tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) { - $color-token: token-utils.get-token-variable(container-text-color); + $token-prefix, $token-slots) { + $color-token: token-utils.slot(container-text-color); } @include token-utils.use-tokens( - tokens-mat-text-button.$prefix, tokens-mat-text-button.get-token-slots()) { + m2-text-button.$prefix, m2-text-button.get-token-slots()) { $token: token-utils.get-token-variable-name(label-text-color); #{$token}: #{$color-token}; } @include token-utils.use-tokens( - tokens-mat-outlined-button.$prefix, tokens-mat-outlined-button.get-token-slots()) { + m2-outlined-button.$prefix, m2-outlined-button.get-token-slots()) { $token: token-utils.get-token-variable-name(label-text-color); #{$token}: #{$color-token}; } @@ -87,12 +89,11 @@ $height-mobile-portrait: 56px !default; // Disable text wrapping inside of the toolbar. Developers are still able to overwrite it. white-space: nowrap; - @include token-utils.use-tokens( - tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) { - @include token-utils.create-token-slot(height, standard-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + height: token-utils.slot(standard-height); @media (variables.$xsmall) { - @include token-utils.create-token-slot(height, mobile-height); + height: token-utils.slot(mobile-height); } } } @@ -103,15 +104,14 @@ $height-mobile-portrait: 56px !default; flex-direction: column; width: 100%; - @include token-utils.use-tokens( - tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) { - @include token-utils.create-token-slot(min-height, standard-height); + @include token-utils.use-tokens($token-prefix, $token-slots) { + min-height: token-utils.slot(standard-height); // As per specs, toolbars should have a different height in mobile devices. This has been // specified in the old guidelines and is still observable in the new specifications by // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy @media (variables.$xsmall) { - @include token-utils.create-token-slot(min-height, mobile-height); + min-height: token-utils.slot(mobile-height); } } } diff --git a/src/material/tooltip/BUILD.bazel b/src/material/tooltip/BUILD.bazel index 0db2f1b8732c..196c999a71c0 100644 --- a/src/material/tooltip/BUILD.bazel +++ b/src/material/tooltip/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-tooltip.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-tooltip.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_tooltip-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,8 +54,8 @@ sass_binary( name = "css", src = "tooltip.scss", deps = [ + ":m2", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_plain-tooltip.scss b/src/material/tooltip/_m2-tooltip.scss similarity index 84% rename from src/material/core/tokens/m2/mat/_plain-tooltip.scss rename to src/material/tooltip/_m2-tooltip.scss index 458a084411c0..42798623bfba 100644 --- a/src/material/core/tokens/m2/mat/_plain-tooltip.scss +++ b/src/material/tooltip/_m2-tooltip.scss @@ -1,6 +1,6 @@ -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, plain-tooltip); @@ -47,8 +47,8 @@ $prefix: (mat, plain-tooltip); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_plain-tooltip.scss b/src/material/tooltip/_m3-tooltip.scss similarity index 91% rename from src/material/core/tokens/m3/mat/_plain-tooltip.scss rename to src/material/tooltip/_m3-tooltip.scss index 39daa0ab4068..adce1ec123b9 100644 --- a/src/material/core/tokens/m3/mat/_plain-tooltip.scss +++ b/src/material/tooltip/_m3-tooltip.scss @@ -1,4 +1,4 @@ -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; @use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -21,5 +21,5 @@ $prefix: (mat, plain-tooltip); supporting-text-weight: map.get($systems, md-sys-typescale, body-small-weight) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index 979a60b09243..70a0a9de6a51 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -4,7 +4,7 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mat/plain-tooltip' as tokens-mat-plain-tooltip; +@use './m2-tooltip'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -13,8 +13,8 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-plain-tooltip.$prefix, - tokens-mat-plain-tooltip.get-unthemable-tokens() + m2-tooltip.$prefix, + m2-tooltip.get-unthemable-tokens() ); } } @@ -26,8 +26,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-plain-tooltip.$prefix, - tokens-mat-plain-tooltip.get-color-tokens($theme) + m2-tooltip.$prefix, + m2-tooltip.get-color-tokens($theme) ); } } @@ -39,8 +39,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-plain-tooltip.$prefix, - tokens-mat-plain-tooltip.get-typography-tokens($theme) + m2-tooltip.$prefix, + m2-tooltip.get-typography-tokens($theme) ); } } @@ -52,8 +52,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-plain-tooltip.$prefix, - tokens-mat-plain-tooltip.get-density-tokens($theme) + m2-tooltip.$prefix, + m2-tooltip.get-density-tokens($theme) ); } } @@ -63,8 +63,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-plain-tooltip.$prefix, - tokens: tokens-mat-plain-tooltip.get-token-slots(), + namespace: m2-tooltip.$prefix, + tokens: m2-tooltip.get-token-slots(), ), ); } @@ -97,7 +97,7 @@ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); @if $tokens != () { - $tokens: token-utils.get-tokens-for($tokens, tokens-mat-plain-tooltip.$prefix); - @include token-utils.create-token-values(tokens-mat-plain-tooltip.$prefix, $tokens); + $tokens: token-utils.get-tokens-for($tokens, m2-tooltip.$prefix); + @include token-utils.create-token-values(m2-tooltip.$prefix, $tokens); } } diff --git a/src/material/tooltip/tooltip.scss b/src/material/tooltip/tooltip.scss index 6970107db724..5da06030c133 100644 --- a/src/material/tooltip/tooltip.scss +++ b/src/material/tooltip/tooltip.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mat/plain-tooltip' as tokens-mat-plain-tooltip; +@use './m2-tooltip'; @use '../core/tokens/token-utils'; .mat-mdc-tooltip { @@ -61,18 +61,15 @@ // MDC and removing them is likely to cause screenshot differences. will-change: transform, opacity; - @include token-utils.use-tokens( - tokens-mat-plain-tooltip.$prefix, - tokens-mat-plain-tooltip.get-token-slots() - ) { - @include token-utils.create-token-slot(background-color, container-color); - @include token-utils.create-token-slot(color, supporting-text-color); - @include token-utils.create-token-slot(border-radius, container-shape); - @include token-utils.create-token-slot(font-family, supporting-text-font); - @include token-utils.create-token-slot(font-size, supporting-text-size); - @include token-utils.create-token-slot(font-weight, supporting-text-weight); - @include token-utils.create-token-slot(line-height, supporting-text-line-height); - @include token-utils.create-token-slot(letter-spacing, supporting-text-tracking); + @include token-utils.use-tokens(m2-tooltip.$prefix, m2-tooltip.get-token-slots()) { + background-color: token-utils.slot(container-color); + color: token-utils.slot(supporting-text-color); + border-radius: token-utils.slot(container-shape); + font-family: token-utils.slot(supporting-text-font); + font-size: token-utils.slot(supporting-text-size); + font-weight: token-utils.slot(supporting-text-weight); + line-height: token-utils.slot(supporting-text-line-height); + letter-spacing: token-utils.slot(supporting-text-tracking); } // Renders an outline in high contrast mode. diff --git a/src/material/tree/BUILD.bazel b/src/material/tree/BUILD.bazel index 979bec9e9aee..2c376dfde87e 100644 --- a/src/material/tree/BUILD.bazel +++ b/src/material/tree/BUILD.bazel @@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "m3", + srcs = [ + "_m3-tree.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_utils", + ], +) + +sass_library( + name = "m2", + srcs = [ + "_m2-tree.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:m2_utils", + ], +) + sass_library( name = "theme", srcs = [ "_tree-theme.scss", ], deps = [ + ":m2", "//src/material/core/style:sass_utils", "//src/material/core/theming", "//src/material/core/theming:_inspection", "//src/material/core/theming:_validation", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", "//src/material/core/typography", ], ) @@ -30,8 +54,8 @@ sass_binary( name = "css", src = "tree.scss", deps = [ + ":m2", "//src/material/core/tokens:token_utils", - "//src/material/core/tokens/m2/mat", ], ) diff --git a/src/material/core/tokens/m2/mat/_tree.scss b/src/material/tree/_m2-tree.scss similarity index 83% rename from src/material/core/tokens/m2/mat/_tree.scss rename to src/material/tree/_m2-tree.scss index cd1e84c8fbf9..0e0ee8f6dbc5 100644 --- a/src/material/core/tokens/m2/mat/_tree.scss +++ b/src/material/tree/_m2-tree.scss @@ -1,8 +1,8 @@ @use 'sass:map'; -@use '../../token-definition'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/theming/theming'; +@use '../core/theming/inspection'; +@use '../core/style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tree); @@ -55,8 +55,8 @@ $prefix: (mat, tree); @function get-token-slots() { @return sass-utils.deep-merge-all( get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) + get-color-tokens(m2-utils.$placeholder-color-config), + get-typography-tokens(m2-utils.$placeholder-typography-config), + get-density-tokens(m2-utils.$placeholder-density-config) ); } diff --git a/src/material/core/tokens/m3/mat/_tree.scss b/src/material/tree/_m3-tree.scss similarity index 88% rename from src/material/core/tokens/m3/mat/_tree.scss rename to src/material/tree/_m3-tree.scss index 18d24ed43eda..3fc9221b3faf 100644 --- a/src/material/core/tokens/m3/mat/_tree.scss +++ b/src/material/tree/_m3-tree.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '../../token-definition'; +@use '../core/tokens/m3-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, tree); @@ -18,5 +18,5 @@ $prefix: (mat, tree); node-text-weight: map.get($systems, md-sys-typescale, body-large-weight), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return m3-utils.namespace($prefix, $tokens, $token-slots); } diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss index 7fbba9b10065..0a53ce4d4870 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -5,7 +5,7 @@ @use '../core/typography/typography'; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mat/tree' as tokens-mat-tree; +@use './m2-tree'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -20,8 +20,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-tree.$prefix, - tokens-mat-tree.get-color-tokens($theme) + m2-tree.$prefix, + m2-tree.get-color-tokens($theme) ); } } @@ -36,8 +36,8 @@ @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-tree.$prefix, - tokens-mat-tree.get-typography-tokens($theme) + m2-tree.$prefix, + m2-tree.get-typography-tokens($theme) ); } } @@ -51,8 +51,8 @@ @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mat-tree.$prefix, - tokens-mat-tree.get-density-tokens($theme) + m2-tree.$prefix, + m2-tree.get-density-tokens($theme) ); } } @@ -62,8 +62,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mat-tree.$prefix, - tokens: tokens-mat-tree.get-token-slots(), + namespace: m2-tree.$prefix, + tokens: m2-tree.get-token-slots(), ), ); } @@ -97,8 +97,8 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mat-tree.$prefix, - map.get($tokens, tokens-mat-tree.$prefix) + m2-tree.$prefix, + map.get($tokens, m2-tree.$prefix) ); } } diff --git a/src/material/tree/tree.scss b/src/material/tree/tree.scss index b9ebf77f750c..c6f11a992633 100644 --- a/src/material/tree/tree.scss +++ b/src/material/tree/tree.scss @@ -1,21 +1,21 @@ -@use '../core/tokens/m2/mat/tree' as tokens-mat-tree; @use '../core/tokens/token-utils'; +@use './m2-tree'; .mat-tree { display: block; - @include token-utils.use-tokens(tokens-mat-tree.$prefix, tokens-mat-tree.get-token-slots()) { - @include token-utils.create-token-slot(background-color, container-background-color); + @include token-utils.use-tokens(m2-tree.$prefix, m2-tree.get-token-slots()) { + background-color: token-utils.slot(container-background-color); } } .mat-tree-node, .mat-nested-tree-node { - @include token-utils.use-tokens(tokens-mat-tree.$prefix, tokens-mat-tree.get-token-slots()) { - @include token-utils.create-token-slot(color, node-text-color); - @include token-utils.create-token-slot(font-family, node-text-font); - @include token-utils.create-token-slot(font-size, node-text-size); - @include token-utils.create-token-slot(font-weight, node-text-weight); + @include token-utils.use-tokens(m2-tree.$prefix, m2-tree.get-token-slots()) { + color: token-utils.slot(node-text-color); + font-family: token-utils.slot(node-text-font); + font-size: token-utils.slot(node-text-size); + font-weight: token-utils.slot(node-text-weight); } } @@ -25,10 +25,10 @@ flex: 1; word-wrap: break-word; - @include token-utils.use-tokens(tokens-mat-tree.$prefix, tokens-mat-tree.get-token-slots()) { + @include token-utils.use-tokens(m2-tree.$prefix, m2-tree.get-token-slots()) { // TODO: before tokens were introduced, the `min-height` only applied to the // non-nested tree node. Should it apply to the nested one as well? - @include token-utils.create-token-slot(min-height, node-min-height); + min-height: token-utils.slot(node-min-height); } } diff --git a/tools/extract-tokens/extract-tokens.ts b/tools/extract-tokens/extract-tokens.ts index 7611a0851e55..122b1689af1f 100644 --- a/tools/extract-tokens/extract-tokens.ts +++ b/tools/extract-tokens/extract-tokens.ts @@ -97,6 +97,7 @@ function extractTokens(themePath: string): Token[] { // console in JSON format. This call captures it so it can be parsed. // Note: this is using the synchronous `compileString`, even though the Sass docs claim the async // version is faster. From local testing the synchronous version was faster (~2s versus ~5s). + console.error(pathToFileURL(absoluteThemePath)); compileString(toCompile, { loadPaths: [srcPath], url: pathToFileURL(absoluteThemePath), From bec60a9ca3f7d974edd3bad1a75dae1fc9dd1010 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 4 Apr 2025 05:38:08 -0600 Subject: [PATCH 2/2] refactor: correct card prefix --- src/material/card/card.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/material/card/card.scss b/src/material/card/card.scss index ed97a93bd38d..477b9cc95683 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -95,8 +95,7 @@ $mat-card-default-padding: 16px !default; } // Add slots for custom Angular Material card tokens. -@include token-utils.use-tokens( - m2-outlined-card.$prefix, m2-card.get-token-slots()) { +@include token-utils.use-tokens(m2-card.$prefix, m2-card.get-token-slots()) { .mat-mdc-card-title { font-family: token-utils.slot(title-text-font); line-height: token-utils.slot(title-text-line-height);