Skip to content
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/material/button-toggle/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ package(default_visibility = ["//visibility:public"])
sass_library(
name = "m3",
srcs = [
"_m3-standard-button-toggle.scss",
"_m3-button-toggle.scss",
],
deps = [
"//src/material/core/style:sass_utils",
Expand All @@ -24,8 +24,7 @@ sass_library(
sass_library(
name = "m2",
srcs = [
"_m2-legacy-button-toggle.scss",
"_m2-standard-button-toggle.scss",
"_m2-button-toggle.scss",
],
deps = [
"//src/material/core/style:elevation",
Expand Down
49 changes: 13 additions & 36 deletions src/material/button-toggle/_button-toggle-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@
@use '../core/theming/validation';
@use '../core/tokens/token-utils';
@use '../core/typography/typography';
@use './m2-legacy-button-toggle';
@use './m2-standard-button-toggle';
@use './m2-button-toggle';

/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
/// for the mat-button-toggle.
Expand All @@ -16,12 +15,8 @@
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values-mixed(
m2-legacy-button-toggle.$prefix,
m2-legacy-button-toggle.get-unthemable-tokens()
);
@include token-utils.create-token-values-mixed(
m2-standard-button-toggle.$prefix,
m2-standard-button-toggle.get-unthemable-tokens()
m2-button-toggle.$prefix,
m2-button-toggle.get-unthemable-tokens()
);
}
}
Expand All @@ -38,12 +33,8 @@
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values-mixed(
m2-legacy-button-toggle.$prefix,
m2-legacy-button-toggle.get-color-tokens($theme)
);
@include token-utils.create-token-values-mixed(
m2-standard-button-toggle.$prefix,
m2-standard-button-toggle.get-color-tokens($theme)
m2-button-toggle.$prefix,
m2-button-toggle.get-color-tokens($theme)
);
}
}
Expand All @@ -57,12 +48,8 @@
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values-mixed(
m2-legacy-button-toggle.$prefix,
m2-legacy-button-toggle.get-typography-tokens($theme)
);
@include token-utils.create-token-values-mixed(
m2-standard-button-toggle.$prefix,
m2-standard-button-toggle.get-typography-tokens($theme)
m2-button-toggle.$prefix,
m2-button-toggle.get-typography-tokens($theme)
);
}
}
Expand All @@ -76,30 +63,20 @@
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values-mixed(
m2-legacy-button-toggle.$prefix,
m2-legacy-button-toggle.get-density-tokens($theme)
);
@include token-utils.create-token-values-mixed(
m2-standard-button-toggle.$prefix,
m2-standard-button-toggle.get-density-tokens($theme)
m2-button-toggle.$prefix,
m2-button-toggle.get-density-tokens($theme)
);
}
}
}

/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@function _define-overrides() {
$legacy-tokens: m2-legacy-button-toggle.get-token-slots();
$standard-tokens: m2-standard-button-toggle.get-token-slots();
$standard-tokens: m2-button-toggle.get-token-slots();

@return (
(
namespace: m2-legacy-button-toggle.$prefix,
tokens: $legacy-tokens,
prefix: 'legacy-',
),
(
namespace: m2-standard-button-toggle.$prefix,
namespace: m2-button-toggle.$prefix,
tokens: $standard-tokens,
),
);
Expand Down Expand Up @@ -141,11 +118,11 @@
);
$mat-standard-button-toggle-tokens: token-utils.get-tokens-for(
$tokens,
m2-standard-button-toggle.$prefix,
m2-button-toggle.$prefix,
$options...
);
@include token-utils.create-token-values(
m2-standard-button-toggle.$prefix,
m2-button-toggle.$prefix,
$mat-standard-button-toggle-tokens
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,12 @@ $prefix: (mat, button-toggle);
// but may be in a future version of the theming API.
@function get-unthemable-tokens() {
@return (
shape: 4px,
hover-state-layer-opacity: 0.04,
focus-state-layer-opacity: 0.12,
hover-state-layer-opacity: 0.04,
legacy-focus-state-layer-opacity: 1,
legacy-height: 36px,
legacy-shape: 2px,
shape: 4px,
);
}

Expand All @@ -33,19 +36,31 @@ $prefix: (mat, button-toggle);
$theme-divider-color);

@return (
text-color: inspection.get-theme-color($theme, foreground, text),
background-color: inspection.get-theme-color($theme, background, card),
state-layer-color: sass-utils.safe-color-change(
inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
selected-state-background-color: inspection.get-theme-color(
$theme, background, selected-button),
selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
disabled-state-background-color: inspection.get-theme-color($theme, background, card),
disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
disabled-selected-state-background-color:
inspection.get-theme-color($theme, background, selected-disabled-button),
inspection.get-theme-color($theme, background, selected-disabled-button),
disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
disabled-state-background-color: inspection.get-theme-color($theme, background, card),
disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
divider-color: $divider-color,
legacy-disabled-selected-state-background-color:
inspection.get-theme-color($theme, background, selected-disabled-button),
legacy-disabled-state-background-color:
inspection.get-theme-color($theme, background, disabled-button-toggle),
legacy-disabled-state-text-color:
inspection.get-theme-color($theme, foreground, disabled-button),
legacy-selected-state-background-color:
inspection.get-theme-color($theme, background, selected-button),
legacy-selected-state-text-color:
inspection.get-theme-color($theme, foreground, secondary-text),
legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button),
legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
selected-state-background-color:
inspection.get-theme-color($theme, background, selected-button),
selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
state-layer-color: sass-utils.safe-color-change(
inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
text-color: inspection.get-theme-color($theme, foreground, text),
);
}

Expand All @@ -57,6 +72,11 @@ $prefix: (mat, button-toggle);
label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
legacy-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
legacy-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
legacy-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
legacy-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
legacy-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
);
}

Expand Down
59 changes: 0 additions & 59 deletions src/material/button-toggle/_m2-legacy-button-toggle.scss

This file was deleted.

Loading
Loading