Skip to content

Commit f9dc89b

Browse files
andrewseguinandrewseguin
committed
refactor: combine pseudocheckbox tokens
1 parent e528639 commit f9dc89b

11 files changed

+90
-206
lines changed

‎src/material/core/_core-theme.scss

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@
1212
@use 'ripple/m2-ripple';
1313
@use 'option/m2-option';
1414
@use 'option/m2-optgroup';
15-
@use 'selection/pseudo-checkbox/m2-full-pseudo-checkbox';
16-
@use 'selection/pseudo-checkbox/m2-minimal-pseudo-checkbox';
15+
@use 'selection/pseudo-checkbox/m2-pseudo-checkbox';
1716

1817
@mixin base($theme) {
1918
@if inspection.get-theme-version($theme) == 1 {
@@ -81,15 +80,10 @@
8180
(namespace: m2-option.$prefix, tokens: $option-tokens, prefix: 'option-'),
8281
(namespace: m2-optgroup.$prefix, tokens: $optgroup-tokens, prefix: 'optgroup-'),
8382
(
84-
namespace: m2-full-pseudo-checkbox.$prefix,
85-
tokens: $full-pseudo-checkbox-tokens,
86-
prefix: 'pseudo-checkbox-full-'
83+
namespace: m2-pseudo-checkbox.$prefix,
84+
tokens: m2-pseudo-checkbox.get-token-slots(),
85+
prefix: 'pseudo-checkbox-'
8786
),
88-
(
89-
namespace: m2-minimal-pseudo-checkbox.$prefix,
90-
tokens: $minimal-pseudo-checkbox-tokens,
91-
prefix: 'pseudo-checkbox-minimal-'
92-
)
9387
);
9488
}
9589

@@ -132,14 +126,9 @@
132126
m2-optgroup.$prefix,
133127
$options...
134128
);
135-
$mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
136-
$tokens,
137-
m2-full-pseudo-checkbox.$prefix,
138-
$options...
139-
);
140-
$mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
129+
$mat-pseudo-checkbox-tokens: token-utils.get-tokens-for(
141130
$tokens,
142-
m2-minimal-pseudo-checkbox.$prefix,
131+
m2-pseudo-checkbox.$prefix,
143132
$options...
144133
);
145134

@@ -148,11 +137,7 @@
148137
@include token-utils.create-token-values(m2-option.$prefix, $mat-option-tokens);
149138
@include token-utils.create-token-values(m2-optgroup.$prefix, $mat-optgroup-tokens);
150139
@include token-utils.create-token-values(
151-
m2-full-pseudo-checkbox.$prefix,
152-
$mat-full-pseudo-checkbox-tokens
153-
);
154-
@include token-utils.create-token-values(
155-
m2-minimal-pseudo-checkbox.$prefix,
156-
$mat-minimal-pseudo-checkbox-tokens
140+
m2-pseudo-checkbox.$prefix,
141+
$mat-pseudo-checkbox-tokens
157142
);
158143
}

‎src/material/core/selection/pseudo-checkbox/BUILD.bazel

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ package(default_visibility = ["//visibility:public"])
66
sass_library(
77
name = "m3",
88
srcs = [
9-
"_m3-full-pseudo-checkbox.scss",
10-
"_m3-minimal-pseudo-checkbox.scss",
9+
"_m3-pseudo-checkbox.scss",
1110
],
1211
deps = [
1312
"//src/material/core/style:sass_utils",
@@ -18,8 +17,7 @@ sass_library(
1817
sass_library(
1918
name = "m2",
2019
srcs = [
21-
"_m2-full-pseudo-checkbox.scss",
22-
"_m2-minimal-pseudo-checkbox.scss",
20+
"_m2-pseudo-checkbox.scss",
2321
],
2422
deps = [
2523
"//src/material/core/style:elevation",

‎src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss renamed to ‎src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ $prefix: (mat, pseudo-checkbox-full);
1818
$checkmark-color: inspection.get-theme-color($theme, background, background);
1919

2020
@return (
21-
selected-icon-color: inspection.get-theme-color($theme, $palette-name),
22-
selected-checkmark-color: $checkmark-color,
23-
unselected-icon-color: inspection.get-theme-color($theme, foreground, secondary-text),
24-
disabled-selected-checkmark-color: $checkmark-color,
25-
disabled-unselected-icon-color: $disabled-color,
26-
disabled-selected-icon-color: $disabled-color,
21+
full-selected-icon-color: inspection.get-theme-color($theme, $palette-name),
22+
full-selected-checkmark-color: $checkmark-color,
23+
full-unselected-icon-color: inspection.get-theme-color($theme, foreground, secondary-text),
24+
full-disabled-selected-checkmark-color: $checkmark-color,
25+
full-disabled-unselected-icon-color: $disabled-color,
26+
full-disabled-selected-icon-color: $disabled-color,
27+
minimal-selected-checkmark-color: inspection.get-theme-color($theme, $palette-name),
28+
minimal-disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
2729
);
2830
}
2931

‎src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎src/material/core/selection/pseudo-checkbox/_m3-pseudo-checkbox.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@use 'sass:map';
2+
@use '../../style/sass-utils';
3+
@use '../../tokens/m3-utils';
4+
5+
// The prefix used to generate the fully qualified name for tokens in this file.
6+
$prefix: (mat, pseudo-checkbox-full);
7+
8+
/// Generates custom tokens for the full variant of mat-pseudo-checkbox.
9+
/// @param {Map} $systems The MDC system tokens
10+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
11+
/// @param {Map} $token-slots Possible token slots
12+
/// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox
13+
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
14+
$tokens: (
15+
full-disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface),
16+
full-disabled-selected-icon-color: sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
17+
full-disabled-unselected-icon-color: sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
18+
full-selected-checkmark-color: map.get($systems, md-sys-color, on-primary),
19+
full-selected-icon-color: map.get($systems, md-sys-color, primary),
20+
full-unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
21+
minimal-disabled-selected-checkmark-color: sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
22+
minimal-selected-checkmark-color: map.get($systems, md-sys-color, primary),
23+
);
24+
25+
$variant-tokens: (
26+
// Color variants:
27+
primary: (), // Default, no overrides needed.
28+
secondary: (
29+
full-selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
30+
full-selected-icon-color: map.get($systems, md-sys-color, secondary),
31+
minimal-selected-checkmark-color: map.get($systems, md-sys-color, secondary),
32+
),
33+
tertiary: (
34+
full-selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
35+
full-selected-icon-color: map.get($systems, md-sys-color, tertiary),
36+
minimal-selected-checkmark-color: map.get($systems, md-sys-color, tertiary),
37+
),
38+
error: (
39+
full-selected-checkmark-color: map.get($systems, md-sys-color, on-error),
40+
full-selected-icon-color: map.get($systems, md-sys-color, error),
41+
minimal-selected-checkmark-color: map.get($systems, md-sys-color, error),
42+
)
43+
);
44+
45+
@return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
46+
}

‎src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,13 @@
33
@use '../../theming/validation';
44
@use '../../style/sass-utils';
55
@use '../../tokens/token-utils';
6-
@use './m2-full-pseudo-checkbox';
7-
@use './m2-minimal-pseudo-checkbox';
6+
@use './m2-pseudo-checkbox';
87

98
@mixin _palette-styles($theme, $palette-name) {
109
@include sass-utils.current-selector-or-root() {
1110
@include token-utils.create-token-values-mixed(
12-
m2-full-pseudo-checkbox.$prefix,
13-
m2-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
14-
);
15-
@include token-utils.create-token-values-mixed(
16-
m2-minimal-pseudo-checkbox.$prefix,
17-
m2-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
11+
m2-pseudo-checkbox.$prefix,
12+
m2-pseudo-checkbox.get-color-tokens($theme, $palette-name)
1813
);
1914
}
2015
}
@@ -23,14 +18,10 @@
2318
@include validation.selector-defined(
2419
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
2520
);
26-
$mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
27-
$tokens, m2-full-pseudo-checkbox.$prefix, $options...);
28-
$mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
29-
$tokens, m2-minimal-pseudo-checkbox.$prefix, $options...);
30-
@include token-utils.create-token-values-mixed(
31-
m2-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens);
21+
$mat-pseudo-checkbox-tokens: token-utils.get-tokens-for(
22+
$tokens, m2-pseudo-checkbox.$prefix, $options...);
3223
@include token-utils.create-token-values-mixed(
33-
m2-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens);
24+
m2-pseudo-checkbox.$prefix, $mat-pseudo-checkbox-tokens);
3425
}
3526

3627
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -41,19 +32,10 @@
4132

4233
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
4334
@function _define-overrides() {
44-
$full-pseudo-checkbox-tokens: m2-full-pseudo-checkbox.get-token-slots();
45-
$minimal-pseudo-checkbox-tokens: m2-minimal-pseudo-checkbox.get-token-slots();
46-
4735
@return (
4836
(
49-
namespace: m2-full-pseudo-checkbox.$prefix,
50-
tokens: $full-pseudo-checkbox-tokens,
51-
prefix: 'full-',
52-
),
53-
(
54-
namespace: m2-minimal-pseudo-checkbox.$prefix,
55-
tokens: $minimal-pseudo-checkbox-tokens,
56-
prefix: 'minimal-',
37+
namespace: m2-pseudo-checkbox.$prefix,
38+
tokens: m2-pseudo-checkbox.get-token-slots(),
5739
),
5840
);
5941
}

0 commit comments

Comments
 (0)