mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
chore: create shape logical tokens in Sass component token files
Adds `@material/web/tokens/internal/shape` to take a shape token and create 4 logical tokens from its value. All components' logical shape tokens are now generated by the token files themselves, rather than added in each component's styles. PiperOrigin-RevId: 601783846
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
84536d7416
commit
5e40a1bcec
@ -12,16 +12,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-elevated-button-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-elevated-button-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -39,26 +30,10 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-elevated-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-elevated-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-elevated-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-elevated-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,16 +12,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-filled-button-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-filled-button-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -39,26 +30,10 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-filled-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-filled-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-filled-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-filled-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,16 +12,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-filled-tonal-button-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-filled-tonal-button-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -39,26 +30,10 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-filled-tonal-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-filled-tonal-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-filled-tonal-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-filled-tonal-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,16 +12,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-outlined-button-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-outlined-button-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -39,6 +30,8 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
@ -46,24 +39,6 @@
|
||||
--_container-color: none;
|
||||
--_disabled-container-color: none;
|
||||
--_disabled-container-opacity: 0;
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-outlined-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-outlined-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-outlined-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-outlined-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
.outline {
|
||||
|
||||
@ -12,16 +12,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-text-button-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-text-button-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -39,6 +30,8 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
@ -46,23 +39,5 @@
|
||||
--_container-color: none;
|
||||
--_disabled-container-color: none;
|
||||
--_disabled-container-opacity: 0;
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-text-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-text-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-text-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-text-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,16 +25,7 @@ $_indeterminate-bottom-left: 4px, -10px;
|
||||
$_checkmark-bottom-left: 7px, -14px;
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-checkbox-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: $md-comp-checkbox-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -51,22 +42,6 @@ $_checkmark-bottom-left: 7px, -14px;
|
||||
$exclude-custom-properties: false,
|
||||
);
|
||||
|
||||
// Support logical shape properties
|
||||
$container-shape: map.get($tokens, 'container-shape');
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'container-shape-start-start':
|
||||
var(--md-checkbox-container-shape-start-start, #{$container-shape}),
|
||||
'container-shape-start-end':
|
||||
var(--md-checkbox-container-shape-start-end, #{$container-shape}),
|
||||
'container-shape-end-end':
|
||||
var(--md-checkbox-container-shape-end-end, #{$container-shape}),
|
||||
'container-shape-end-start':
|
||||
var(--md-checkbox-container-shape-end-start, #{$container-shape}),
|
||||
)
|
||||
);
|
||||
|
||||
:host {
|
||||
border-start-start-radius: map.get($tokens, 'container-shape-start-start');
|
||||
border-start-end-radius: map.get($tokens, 'container-shape-start-end');
|
||||
|
||||
@ -5,22 +5,14 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-assist-chip-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-assist-chip-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -38,27 +30,11 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-assist-chip-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-assist-chip-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-assist-chip-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-assist-chip-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
@ -5,22 +5,14 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-filter-chip-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-filter-chip-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -38,27 +30,11 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-filter-chip-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-filter-chip-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-filter-chip-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-filter-chip-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
.selected.elevated::before {
|
||||
|
||||
@ -5,22 +5,14 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-input-chip-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-input-chip-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -38,27 +30,11 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-input-chip-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-input-chip-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-input-chip-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-input-chip-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
:host([avatar]) {
|
||||
|
||||
@ -5,22 +5,14 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-suggestion-chip-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-suggestion-chip-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -38,27 +30,11 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-suggestion-chip-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-suggestion-chip-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-suggestion-chip-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-suggestion-chip-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
@ -12,16 +12,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-dialog-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-dialog-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -40,33 +31,6 @@
|
||||
$exclude-custom-properties: false,
|
||||
);
|
||||
|
||||
// Support logical shape properties
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'container-shape-start-start':
|
||||
var(
|
||||
--md-dialog-container-shape-start-start,
|
||||
map.get($tokens, 'container-shape')
|
||||
),
|
||||
'container-shape-start-end':
|
||||
var(
|
||||
--md-dialog-container-shape-start-end,
|
||||
map.get($tokens, 'container-shape')
|
||||
),
|
||||
'container-shape-end-end':
|
||||
var(
|
||||
--md-dialog-container-shape-end-end,
|
||||
map.get($tokens, 'container-shape')
|
||||
),
|
||||
'container-shape-end-start':
|
||||
var(
|
||||
--md-dialog-container-shape-end-start,
|
||||
map.get($tokens, 'container-shape')
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
:host {
|
||||
border-start-start-radius: map.get($tokens, 'container-shape-start-start');
|
||||
border-start-end-radius: map.get($tokens, 'container-shape-start-end');
|
||||
|
||||
@ -5,26 +5,14 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-fab-branded-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'large-container-shape-start-start',
|
||||
'large-container-shape-start-end',
|
||||
'large-container-shape-end-end',
|
||||
'large-container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-fab-branded-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -42,42 +30,10 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape', 'large-container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-fab-branded-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-fab-branded-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-fab-branded-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-fab-branded-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_large-container-shape-start-start: var(
|
||||
--md-fab-branded-large-container-shape-start-start,
|
||||
var(--_large-container-shape)
|
||||
);
|
||||
--_large-container-shape-start-end: var(
|
||||
--md-fab-branded-large-container-shape-start-end,
|
||||
var(--_large-container-shape)
|
||||
);
|
||||
--_large-container-shape-end-end: var(
|
||||
--md-fab-branded-large-container-shape-end-end,
|
||||
var(--_large-container-shape)
|
||||
);
|
||||
--_large-container-shape-end-start: var(
|
||||
--md-fab-branded-large-container-shape-end-start,
|
||||
var(--_large-container-shape)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,24 +14,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-fab-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'large-container-shape-start-start',
|
||||
'large-container-shape-start-end',
|
||||
'large-container-shape-end-end',
|
||||
'large-container-shape-end-start',
|
||||
'small-container-shape-start-start',
|
||||
'small-container-shape-start-end',
|
||||
'small-container-shape-end-end',
|
||||
'small-container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: ltokens.$md-comp-fab-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -49,60 +32,18 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove(
|
||||
$tokens,
|
||||
'container-shape',
|
||||
'large-container-shape',
|
||||
'small-container-shape'
|
||||
);
|
||||
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-fab-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-fab-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-fab-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-fab-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_large-container-shape-start-start: var(
|
||||
--md-fab-large-container-shape-start-start,
|
||||
var(--_large-container-shape)
|
||||
);
|
||||
--_large-container-shape-start-end: var(
|
||||
--md-fab-large-container-shape-start-end,
|
||||
var(--_large-container-shape)
|
||||
);
|
||||
--_large-container-shape-end-end: var(
|
||||
--md-fab-large-container-shape-end-end,
|
||||
var(--_large-container-shape)
|
||||
);
|
||||
--_large-container-shape-end-start: var(
|
||||
--md-fab-large-container-shape-end-start,
|
||||
var(--_large-container-shape)
|
||||
);
|
||||
--_small-container-shape-start-start: var(
|
||||
--md-fab-small-container-shape-start-start,
|
||||
var(--_small-container-shape)
|
||||
);
|
||||
--_small-container-shape-start-end: var(
|
||||
--md-fab-small-container-shape-start-end,
|
||||
var(--_small-container-shape)
|
||||
);
|
||||
--_small-container-shape-end-end: var(
|
||||
--md-fab-small-container-shape-end-end,
|
||||
var(--_small-container-shape)
|
||||
);
|
||||
--_small-container-shape-end-start: var(
|
||||
--md-fab-small-container-shape-end-start,
|
||||
var(--_small-container-shape)
|
||||
);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -47,38 +47,10 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
|
||||
@layer styles {
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
@if $token == 'container-shape' {
|
||||
// Support logical shape properties. Filled field has a default oblong
|
||||
// shape, which is why the fallback value is unique per corner.
|
||||
|
||||
// Get the raw value without the container-shape custom property.
|
||||
$value: map.get(
|
||||
tokens.md-comp-filled-field-values(
|
||||
$exclude-custom-properties: true,
|
||||
),
|
||||
'container-shape'
|
||||
);
|
||||
|
||||
--_container-shape-start-start: var(
|
||||
--md-filled-field-container-shape-start-start,
|
||||
var(--md-filled-field-container-shape, #{list.nth($value, 1)})
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-filled-field-container-shape-start-end,
|
||||
var(--md-filled-field-container-shape, #{list.nth($value, 2)})
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-filled-field-container-shape-end-end,
|
||||
var(--md-filled-field-container-shape, #{list.nth($value, 3)})
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-filled-field-container-shape-end-start,
|
||||
var(--md-filled-field-container-shape, #{list.nth($value, 4)})
|
||||
);
|
||||
} @else {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -42,27 +42,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
|
||||
@layer styles {
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-outlined-field-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-outlined-field-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-outlined-field-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-outlined-field-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
.outline {
|
||||
|
||||
@ -14,11 +14,7 @@
|
||||
$_md-sys-motion: tokens.md-sys-motion-values();
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-focus-ring-supported-tokens,
|
||||
('shape-start-start', 'shape-start-end', 'shape-end-end', 'shape-end-start')
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-focus-ring-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -41,20 +37,10 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
$width: map.get($tokens, 'width');
|
||||
$inward-offset: map.get($tokens, 'inward-offset');
|
||||
$outward-offset: map.get($tokens, 'outward-offset');
|
||||
// Support logical shape properties
|
||||
$start-start: var(
|
||||
--md-focus-ring-shape-start-start,
|
||||
#{map.get($tokens, 'shape')}
|
||||
);
|
||||
$start-end: var(
|
||||
--md-focus-ring-shape-start-end,
|
||||
#{map.get($tokens, 'shape')}
|
||||
);
|
||||
$end-end: var(--md-focus-ring-shape-end-end, #{map.get($tokens, 'shape')});
|
||||
$end-start: var(
|
||||
--md-focus-ring-shape-end-start,
|
||||
#{map.get($tokens, 'shape')}
|
||||
);
|
||||
$start-start: map.get($tokens, 'shape-start-start');
|
||||
$start-end: map.get($tokens, 'shape-start-end');
|
||||
$end-end: map.get($tokens, 'shape-end-end');
|
||||
$end-start: map.get($tokens, 'shape-end-start');
|
||||
|
||||
:host {
|
||||
animation-delay: 0s, calc($duration * 0.25);
|
||||
|
||||
@ -13,16 +13,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-filled-icon-button-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-filled-icon-button-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -40,27 +31,11 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-filled-icon-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-filled-icon-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-filled-icon-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-filled-icon-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
|
||||
@ -15,16 +15,7 @@
|
||||
$_custom-property-prefix: 'filled-tonal-icon-button';
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-filled-tonal-icon-button-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-filled-tonal-icon-button-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -42,27 +33,11 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-filled-tonal-icon-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-filled-tonal-icon-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-filled-tonal-icon-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-filled-tonal-icon-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
|
||||
@ -14,16 +14,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-outlined-icon-button-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-outlined-icon-button-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -41,27 +32,11 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-outlined-icon-button-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-outlined-icon-button-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-outlined-icon-button-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-outlined-icon-button-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
.outlined {
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../../tokens';
|
||||
// go/keep-sorted end
|
||||
@ -30,26 +33,10 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_shape-start-start: var(
|
||||
--md-outlined-segmented-button-shape-start-start,
|
||||
var(--_shape)
|
||||
);
|
||||
--_shape-start-end: var(
|
||||
--md-outlined-segmented-button-shape-start-end,
|
||||
var(--_shape)
|
||||
);
|
||||
--_shape-end-end: var(
|
||||
--md-outlined-segmented-button-shape-end-end,
|
||||
var(--_shape)
|
||||
);
|
||||
--_shape-end-start: var(
|
||||
--md-outlined-segmented-button-shape-end-start,
|
||||
var(--_shape)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,16 +14,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-filled-select-supported-tokens,
|
||||
(
|
||||
'text-field-container-shape-start-start',
|
||||
'text-field-container-shape-start-end',
|
||||
'text-field-container-shape-end-end',
|
||||
'text-field-container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-filled-select-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -49,51 +40,10 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'text-field-container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
@if $token == 'text-field-container-shape' {
|
||||
// Support logical shape properties. Filled text field has a default
|
||||
// oblong shape, which is why the fallback value is unique per corner.
|
||||
|
||||
// Get the raw value without the text-field-container-shape custom
|
||||
// property.
|
||||
$value: map.get(
|
||||
tokens.md-comp-filled-select-values(
|
||||
$exclude-custom-properties: true,
|
||||
),
|
||||
'text-field-container-shape'
|
||||
);
|
||||
|
||||
--_text-field-container-shape-start-start: var(
|
||||
--md-filled-select-text-field-container-shape-start-start,
|
||||
var(
|
||||
--md-filled-select-text-field-container-shape,
|
||||
#{list.nth($value, 1)}
|
||||
)
|
||||
);
|
||||
--_text-field-container-shape-start-end: var(
|
||||
--md-filled-select-text-field-container-shape-start-end,
|
||||
var(
|
||||
--md-filled-select-text-field-container-shape,
|
||||
#{list.nth($value, 2)}
|
||||
)
|
||||
);
|
||||
--_text-field-container-shape-end-end: var(
|
||||
--md-filled-select-text-field-container-shape-end-end,
|
||||
var(
|
||||
--md-filled-select-text-field-container-shape,
|
||||
#{list.nth($value, 3)}
|
||||
)
|
||||
);
|
||||
--_text-field-container-shape-end-start: var(
|
||||
--md-filled-select-text-field-container-shape-end-start,
|
||||
var(
|
||||
--md-filled-select-text-field-container-shape,
|
||||
#{list.nth($value, 4)}
|
||||
)
|
||||
);
|
||||
} @else {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
@include filled-field.theme(
|
||||
|
||||
@ -14,16 +14,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-outlined-select-supported-tokens,
|
||||
(
|
||||
'text-field-container-shape-start-start',
|
||||
'text-field-container-shape-start-end',
|
||||
'text-field-container-shape-end-end',
|
||||
'text-field-container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-outlined-select-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -41,28 +32,12 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'text-field-container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_text-field-container-shape-start-start: var(
|
||||
--md-outlined-select-text-field-container-shape-start-start,
|
||||
var(--_text-field-container-shape)
|
||||
);
|
||||
--_text-field-container-shape-start-end: var(
|
||||
--md-outlined-select-text-field-container-shape-start-end,
|
||||
var(--_text-field-container-shape)
|
||||
);
|
||||
--_text-field-container-shape-end-end: var(
|
||||
--md-outlined-select-text-field-container-shape-end-end,
|
||||
var(--_text-field-container-shape)
|
||||
);
|
||||
--_text-field-container-shape-end-start: var(
|
||||
--md-outlined-select-text-field-container-shape-end-start,
|
||||
var(--_text-field-container-shape)
|
||||
);
|
||||
|
||||
@include outlined-field.theme(
|
||||
(
|
||||
// go/keep-sorted start
|
||||
|
||||
@ -16,20 +16,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-switch-supported-tokens,
|
||||
(
|
||||
'handle-shape-start-start',
|
||||
'handle-shape-start-end',
|
||||
'handle-shape-end-end',
|
||||
'handle-shape-end-start',
|
||||
'track-shape-start-start',
|
||||
'track-shape-start-end',
|
||||
'track-shape-end-end',
|
||||
'track-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-switch-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -46,41 +33,6 @@
|
||||
$exclude-custom-properties: false,
|
||||
);
|
||||
|
||||
// Support logical shape properties
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'handle-shape-start-start':
|
||||
var(
|
||||
--md-switch-handle-shape-start-start,
|
||||
map.get($tokens, 'handle-shape')
|
||||
),
|
||||
'handle-shape-start-end':
|
||||
var(
|
||||
--md-switch-handle-shape-start-end,
|
||||
map.get($tokens, 'handle-shape')
|
||||
),
|
||||
'handle-shape-end-end':
|
||||
var(--md-switch-handle-shape-end-end, map.get($tokens, 'handle-shape')),
|
||||
'handle-shape-end-start':
|
||||
var(
|
||||
--md-switch-handle-shape-end-start,
|
||||
map.get($tokens, 'handle-shape')
|
||||
),
|
||||
'track-shape-start-start':
|
||||
var(
|
||||
--md-switch-track-shape-start-start,
|
||||
map.get($tokens, 'track-shape')
|
||||
),
|
||||
'track-shape-start-end':
|
||||
var(--md-switch-track-shape-start-end, map.get($tokens, 'track-shape')),
|
||||
'track-shape-end-end':
|
||||
var(--md-switch-track-shape-end-end, map.get($tokens, 'track-shape')),
|
||||
'track-shape-end-start':
|
||||
var(--md-switch-track-shape-end-start, map.get($tokens, 'track-shape')),
|
||||
)
|
||||
);
|
||||
|
||||
@layer styles, hcm;
|
||||
@layer styles {
|
||||
:host {
|
||||
|
||||
@ -5,22 +5,14 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-primary-tab-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-primary-tab-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -38,27 +30,11 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-primary-tab-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-primary-tab-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-primary-tab-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-primary-tab-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
|
||||
.content.stacked {
|
||||
|
||||
@ -5,22 +5,14 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-secondary-tab-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-secondary-tab-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -38,26 +30,10 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-secondary-tab-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-secondary-tab-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-secondary-tab-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-secondary-tab-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,16 +14,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-filled-text-field-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-filled-text-field-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -45,38 +36,10 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
@if $token == 'container-shape' {
|
||||
// Support logical shape properties. Filled text field has a default
|
||||
// oblong shape, which is why the fallback value is unique per corner.
|
||||
|
||||
// Get the raw value without the container-shape custom property.
|
||||
$value: map.get(
|
||||
tokens.md-comp-filled-text-field-values(
|
||||
$exclude-custom-properties: true,
|
||||
),
|
||||
'container-shape'
|
||||
);
|
||||
|
||||
--_container-shape-start-start: var(
|
||||
--md-filled-text-field-container-shape-start-start,
|
||||
var(--md-filled-text-field-container-shape, #{list.nth($value, 1)})
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-filled-text-field-container-shape-start-end,
|
||||
var(--md-filled-text-field-container-shape, #{list.nth($value, 2)})
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-filled-text-field-container-shape-end-end,
|
||||
var(--md-filled-text-field-container-shape, #{list.nth($value, 3)})
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-filled-text-field-container-shape-end-start,
|
||||
var(--md-filled-text-field-container-shape, #{list.nth($value, 4)})
|
||||
);
|
||||
} @else {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
@include filled-field.theme(
|
||||
|
||||
@ -13,16 +13,7 @@
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-outlined-text-field-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
|
||||
$supported-tokens: tokens.$md-comp-outlined-text-field-supported-tokens;
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
@ -40,28 +31,12 @@
|
||||
);
|
||||
|
||||
:host {
|
||||
// Only use the logical properties.
|
||||
$tokens: map.remove($tokens, 'container-shape');
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-outlined-text-field-container-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-outlined-text-field-container-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-outlined-text-field-container-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-outlined-text-field-container-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
|
||||
@include outlined-field.theme(
|
||||
(
|
||||
// go/keep-sorted start
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -20,6 +22,10 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
'disabled-leading-icon-color',
|
||||
@ -90,17 +96,23 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-assist-chip.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-assist-chip.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
'leading-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'trailing-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'icon-label-space': if($exclude-hardcoded-values, null, 8px),
|
||||
'with-leading-icon-leading-space':
|
||||
if($exclude-hardcoded-values, null, 8px),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "flat-*" prefix (b/275577569)
|
||||
'flat-container-elevation': 'container-elevation',
|
||||
@ -126,6 +138,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-assist-chip-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -17,6 +19,10 @@
|
||||
$supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'container-size',
|
||||
'disabled-container-opacity',
|
||||
'disabled-outline-color',
|
||||
@ -98,11 +104,13 @@ $_default: (
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-checkbox.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove default "unselected" prefix (b/292244480)
|
||||
'unselected-disabled-container-opacity': 'disabled-container-opacity',
|
||||
@ -133,6 +141,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-checkbox-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -20,6 +22,10 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'headline-color',
|
||||
'headline-font',
|
||||
'headline-line-height',
|
||||
@ -77,10 +83,13 @@ $unsupported-tokens: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-dialog.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
$tokens: validate.values(
|
||||
md-comp-dialog.values($deps, $exclude-hardcoded-values),
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-icon-color': 'icon-color',
|
||||
@ -92,6 +101,11 @@ $unsupported-tokens: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-dialog-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value}));
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -23,6 +25,10 @@ $supported-tokens: (
|
||||
'container-height',
|
||||
'container-shadow-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-container-color',
|
||||
'disabled-container-elevation',
|
||||
'disabled-container-opacity',
|
||||
@ -81,11 +87,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-elevated-button.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-elevated-button.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
// b/198759625 - Remove once spacing tokens are formally added
|
||||
// go/keep-sorted start
|
||||
'leading-space': if($exclude-hardcoded-values, null, 24px),
|
||||
@ -99,7 +104,14 @@ $_default: (
|
||||
'with-trailing-icon-trailing-space':
|
||||
if($exclude-hardcoded-values, null, 16px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
@ -116,6 +128,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-elevated-button-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -25,6 +27,10 @@ $supported-tokens: (
|
||||
'container-height',
|
||||
'container-shadow-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'container-width',
|
||||
'focus-container-elevation',
|
||||
'focus-label-text-color',
|
||||
@ -40,6 +46,10 @@ $supported-tokens: (
|
||||
'label-text-weight',
|
||||
'large-container-height',
|
||||
'large-container-shape',
|
||||
'large-container-shape-end-end',
|
||||
'large-container-shape-end-start',
|
||||
'large-container-shape-start-end',
|
||||
'large-container-shape-start-start',
|
||||
'large-container-width',
|
||||
'large-icon-size',
|
||||
'lowered-container-color',
|
||||
@ -104,17 +114,37 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-fab-branded.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
$new-tokens,
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape')
|
||||
);
|
||||
|
||||
$new-tokens: map.merge(
|
||||
$new-tokens,
|
||||
shape.get-new-logical-shape-tokens($new-tokens, 'large-container-shape')
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
md-comp-fab-branded.values($deps, $exclude-hardcoded-values),
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values)
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
// Default to `$exclude-custom-properties: false` in the next breaking change.
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
$shape-tokens: ('container-shape', 'large-container-shape');
|
||||
@each $shape-token in $shape-tokens {
|
||||
@if string.index($token, '#{$shape-token}-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-fab-branded-#{$shape-token}, #{$value});
|
||||
}
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -32,6 +34,10 @@ $supported-tokens: (
|
||||
'container-height',
|
||||
'container-shadow-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'container-width',
|
||||
'focus-container-elevation',
|
||||
'focus-icon-color',
|
||||
@ -50,6 +56,10 @@ $supported-tokens: (
|
||||
'label-text-weight',
|
||||
'large-container-height',
|
||||
'large-container-shape',
|
||||
'large-container-shape-end-end',
|
||||
'large-container-shape-end-start',
|
||||
'large-container-shape-start-end',
|
||||
'large-container-shape-start-start',
|
||||
'large-container-width',
|
||||
'large-icon-size',
|
||||
'lowered-container-color',
|
||||
@ -86,6 +96,10 @@ $supported-tokens: (
|
||||
'secondary-pressed-state-layer-color',
|
||||
'small-container-height',
|
||||
'small-container-shape',
|
||||
'small-container-shape-end-end',
|
||||
'small-container-shape-end-start',
|
||||
'small-container-shape-start-end',
|
||||
'small-container-shape-start-start',
|
||||
'small-container-width',
|
||||
'small-icon-size',
|
||||
'tertiary-container-color',
|
||||
@ -237,18 +251,45 @@ $_default: (
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-fab-surface.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
$new-tokens,
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape')
|
||||
);
|
||||
|
||||
$new-tokens: map.merge(
|
||||
$new-tokens,
|
||||
shape.get-new-logical-shape-tokens(
|
||||
$new-tokens,
|
||||
'large-container-shape',
|
||||
'small-container-shape'
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values)
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
// Default to `$exclude-custom-properties: false` in the next breaking change.
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
$shape-tokens: (
|
||||
'container-shape',
|
||||
'large-container-shape',
|
||||
'small-container-shape'
|
||||
);
|
||||
|
||||
@each $shape-token in $shape-tokens {
|
||||
@if string.index($token, '#{$shape-token}-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-fab-#{$shape-token}, #{$value});
|
||||
}
|
||||
}
|
||||
|
||||
$tokens: map.set($tokens, $token, var(--md-fab-#{$token}, #{$value}));
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -23,6 +25,10 @@ $supported-tokens: (
|
||||
'container-height',
|
||||
'container-shadow-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-container-color',
|
||||
'disabled-container-elevation',
|
||||
'disabled-container-opacity',
|
||||
@ -81,11 +87,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-filled-button.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-filled-button.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
// b/198759625 - Remove once spacing tokens are formally added
|
||||
// go/keep-sorted start
|
||||
'leading-space': if($exclude-hardcoded-values, null, 24px),
|
||||
@ -99,7 +104,14 @@ $_default: (
|
||||
'with-trailing-icon-trailing-space':
|
||||
if($exclude-hardcoded-values, null, 16px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
@ -116,6 +128,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-filled-button-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -22,6 +24,10 @@ $supported-tokens: (
|
||||
'bottom-space',
|
||||
'container-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'content-color',
|
||||
'content-font',
|
||||
'content-line-height',
|
||||
@ -253,12 +259,22 @@ $_default: (
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
$tokens: validate.values($tokens, $supported-tokens: $supported-tokens);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
// Default to `$exclude-custom-properties: false` in the next breaking change.
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-filled-field-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -19,6 +21,10 @@ $supported-tokens: (
|
||||
'container-color',
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'container-width',
|
||||
'disabled-container-color',
|
||||
'disabled-container-opacity',
|
||||
@ -72,10 +78,13 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-filled-icon-button.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
$tokens: validate.values(
|
||||
md-comp-filled-icon-button.values($deps, $exclude-hardcoded-values),
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// TODO(b/292244480): remove default unselected prefix
|
||||
'toggle-unselected-focus-icon-color': 'toggle-focus-icon-color',
|
||||
@ -95,6 +104,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-filled-icon-button-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -22,6 +24,10 @@ $supported-tokens: (
|
||||
'text-field-active-indicator-height',
|
||||
'text-field-container-color',
|
||||
'text-field-container-shape',
|
||||
'text-field-container-shape-end-end',
|
||||
'text-field-container-shape-end-start',
|
||||
'text-field-container-shape-start-end',
|
||||
'text-field-container-shape-start-start',
|
||||
'text-field-disabled-active-indicator-color',
|
||||
'text-field-disabled-active-indicator-height',
|
||||
'text-field-disabled-active-indicator-opacity',
|
||||
@ -163,16 +169,27 @@ $_default: (
|
||||
$original-tokens,
|
||||
_get-override-tokens($exclude-hardcoded-values)
|
||||
);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens(
|
||||
$original-tokens,
|
||||
'text-field-container-shape'
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$original-tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
// Default to `$exclude-custom-properties: false` in the next breaking change.
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'text-field-container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-filled-select-text-field-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -23,6 +25,10 @@ $supported-tokens: (
|
||||
'caret-color',
|
||||
'container-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-active-indicator-color',
|
||||
'disabled-active-indicator-height',
|
||||
'disabled-active-indicator-opacity',
|
||||
@ -133,11 +139,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-filled-text-field.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-filled-text-field.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
'leading-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'trailing-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'top-space': if($exclude-hardcoded-values, null, 16px),
|
||||
@ -153,6 +158,13 @@ $_default: (
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
@ -165,6 +177,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-filled-text-field-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -23,6 +25,10 @@ $supported-tokens: (
|
||||
'container-height',
|
||||
'container-shadow-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-container-color',
|
||||
'disabled-container-elevation',
|
||||
'disabled-container-opacity',
|
||||
@ -81,11 +87,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-filled-tonal-button.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-filled-tonal-button.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
// b/198759625 - Remove once spacing tokens are formally added
|
||||
// go/keep-sorted start
|
||||
'leading-space': if($exclude-hardcoded-values, null, 24px),
|
||||
@ -99,7 +104,14 @@ $_default: (
|
||||
'with-trailing-icon-trailing-space':
|
||||
if($exclude-hardcoded-values, null, 16px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
@ -116,6 +128,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-filled-tonal-button-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -19,6 +21,10 @@ $supported-tokens: (
|
||||
'container-color',
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'container-width',
|
||||
'disabled-container-color',
|
||||
'disabled-container-opacity',
|
||||
@ -72,10 +78,17 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-filled-tonal-icon-button.values(
|
||||
$deps,
|
||||
$exclude-hardcoded-values
|
||||
);
|
||||
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
$tokens: validate.values(
|
||||
md-comp-filled-tonal-icon-button.values($deps, $exclude-hardcoded-values),
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// TODO(b/292244480): remove default unselected prefix
|
||||
'toggle-unselected-focus-icon-color': 'toggle-focus-icon-color',
|
||||
@ -95,6 +108,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-filled-tonal-icon-button-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -20,6 +22,10 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
'disabled-leading-icon-color',
|
||||
@ -132,11 +138,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-filter-chip.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-filter-chip.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
'leading-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'trailing-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'icon-label-space': if($exclude-hardcoded-values, null, 8px),
|
||||
@ -144,7 +149,14 @@ $_default: (
|
||||
if($exclude-hardcoded-values, null, 8px),
|
||||
'with-trailing-icon-trailing-space':
|
||||
if($exclude-hardcoded-values, null, 8px),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "unselected-*" and "flat-*" prefix (b/275577569)
|
||||
'elevated-unselected-container-color': 'elevated-container-color',
|
||||
@ -238,6 +250,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-filter-chip-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-motion';
|
||||
@ -21,6 +23,10 @@ $supported-tokens: (
|
||||
'inward-offset',
|
||||
'outward-offset',
|
||||
'shape',
|
||||
'shape-end-end',
|
||||
'shape-end-start',
|
||||
'shape-start-end',
|
||||
'shape-start-start',
|
||||
'width',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
@ -46,12 +52,22 @@ $_default: (
|
||||
'width': if($exclude-hardcoded-values, null, 3px),
|
||||
);
|
||||
|
||||
$tokens: validate.values($tokens, $supported-tokens: $supported-tokens);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'shape');
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
// Default to `$exclude-custom-properties: false` in the next breaking change.
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-focus-ring-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -22,6 +24,10 @@ $supported-tokens: (
|
||||
'avatar-size',
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-avatar-opacity',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
@ -120,11 +126,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-input-chip.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-input-chip.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
'leading-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'trailing-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'icon-label-space': if($exclude-hardcoded-values, null, 8px),
|
||||
@ -132,7 +137,14 @@ $_default: (
|
||||
if($exclude-hardcoded-values, null, 8px),
|
||||
'with-trailing-icon-trailing-space':
|
||||
if($exclude-hardcoded-values, null, 8px),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "unselected-*" prefix (b/275577569)
|
||||
'disabled-unselected-outline-color': 'disabled-outline-color',
|
||||
@ -220,6 +232,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-input-chip-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -19,6 +21,10 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-icon-color',
|
||||
'disabled-icon-opacity',
|
||||
'disabled-label-text-color',
|
||||
@ -77,11 +83,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-outlined-button.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-outlined-button.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
// b/198759625 - Remove once spacing tokens are formally added
|
||||
// go/keep-sorted start
|
||||
'leading-space': if($exclude-hardcoded-values, null, 24px),
|
||||
@ -95,7 +100,14 @@ $_default: (
|
||||
'with-trailing-icon-trailing-space':
|
||||
if($exclude-hardcoded-values, null, 16px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
@ -112,6 +124,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-outlined-button-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -19,6 +21,10 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'bottom-space',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'content-color',
|
||||
'content-font',
|
||||
'content-line-height',
|
||||
@ -228,12 +234,22 @@ $_default: (
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
$tokens: validate.values($tokens, $supported-tokens: $supported-tokens);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
// Default to `$exclude-custom-properties: false` in the next breaking change.
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-outlined-field-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -18,6 +20,10 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'container-width',
|
||||
'disabled-icon-color',
|
||||
'disabled-icon-opacity',
|
||||
@ -65,10 +71,17 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-outlined-icon-button.values(
|
||||
$deps,
|
||||
$exclude-hardcoded-values
|
||||
);
|
||||
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
$tokens: validate.values(
|
||||
md-comp-outlined-icon-button.values($deps, $exclude-hardcoded-values),
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// TODO(b/292244480): remove default unselected prefix
|
||||
'disabled-unselected-outline-color': 'disabled-outline-color',
|
||||
@ -89,6 +102,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-outlined-icon-button-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -4,8 +4,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -40,6 +42,10 @@ $supported-tokens: (
|
||||
'selected-pressed-label-text-color',
|
||||
'selected-pressed-state-layer-color',
|
||||
'shape',
|
||||
'shape-end-end',
|
||||
'shape-end-start',
|
||||
'shape-start-end',
|
||||
'shape-start-start',
|
||||
'unselected-focus-icon-color',
|
||||
'unselected-focus-label-text-color',
|
||||
'unselected-hover-icon-color',
|
||||
@ -79,10 +85,17 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-outlined-segmented-button.values(
|
||||
$deps,
|
||||
$exclude-hardcoded-values
|
||||
);
|
||||
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'shape');
|
||||
$tokens: validate.values(
|
||||
md-comp-outlined-segmented-button.values($deps, $exclude-hardcoded-values),
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-icon-size': 'icon-size',
|
||||
@ -95,6 +108,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-outlined-segmented-button-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -19,6 +21,10 @@
|
||||
$supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'text-field-container-shape',
|
||||
'text-field-container-shape-end-end',
|
||||
'text-field-container-shape-end-start',
|
||||
'text-field-container-shape-start-end',
|
||||
'text-field-container-shape-start-start',
|
||||
'text-field-disabled-input-text-color',
|
||||
'text-field-disabled-input-text-opacity',
|
||||
'text-field-disabled-label-text-color',
|
||||
@ -140,10 +146,17 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-outlined-select.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens(
|
||||
$tokens,
|
||||
'text-field-container-shape'
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
md-comp-outlined-select.values($deps, $exclude-hardcoded-values),
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
$tokens: map.merge(
|
||||
@ -158,6 +171,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'text-field-container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-outlined-select-text-field-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -19,6 +21,10 @@ $supported-tokens: (
|
||||
'bottom-space',
|
||||
'caret-color',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-input-text-color',
|
||||
'disabled-input-text-opacity',
|
||||
'disabled-label-text-color',
|
||||
@ -122,11 +128,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
'leading-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'trailing-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'top-space': if($exclude-hardcoded-values, null, 16px),
|
||||
@ -140,6 +145,13 @@ $_default: (
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens
|
||||
);
|
||||
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
@ -152,6 +164,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-outlined-text-field-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -37,6 +39,10 @@ $supported-tokens: (
|
||||
'container-elevation',
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'focus-icon-color',
|
||||
'focus-label-text-color',
|
||||
'hover-icon-color',
|
||||
@ -87,10 +93,12 @@ $_default: (
|
||||
$exclude-hardcoded-values: $exclude-hardcoded-values
|
||||
);
|
||||
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// rename inactive-
|
||||
'inactive-focus-state-layer-color': 'focus-state-layer-color',
|
||||
@ -137,6 +145,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-primary-tab-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -37,6 +39,10 @@ $supported-tokens: (
|
||||
'container-elevation',
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'focus-icon-color',
|
||||
'focus-label-text-color',
|
||||
'hover-icon-color',
|
||||
@ -86,11 +92,13 @@ $_default: (
|
||||
);
|
||||
|
||||
$tokens: _add-missing-secondary-tokens($tokens);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
'inactive-label-text-color': 'label-text-color',
|
||||
'with-icon-active-icon-color': 'active-icon-color',
|
||||
@ -106,6 +114,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-secondary-tab-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-elevation';
|
||||
@ -20,6 +22,10 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-label-text-color',
|
||||
'disabled-label-text-opacity',
|
||||
'disabled-leading-icon-color',
|
||||
@ -90,17 +96,23 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
'leading-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'trailing-space': if($exclude-hardcoded-values, null, 16px),
|
||||
'icon-label-space': if($exclude-hardcoded-values, null, 8px),
|
||||
'with-leading-icon-leading-space':
|
||||
if($exclude-hardcoded-values, null, 8px),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "flat-*" prefix (b/275577569)
|
||||
'flat-container-elevation': 'container-elevation',
|
||||
@ -130,6 +142,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-suggestion-chip-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -35,6 +37,10 @@ $supported-tokens: (
|
||||
'handle-color',
|
||||
'handle-height',
|
||||
'handle-shape',
|
||||
'handle-shape-end-end',
|
||||
'handle-shape-end-start',
|
||||
'handle-shape-start-end',
|
||||
'handle-shape-start-start',
|
||||
'handle-width',
|
||||
'hover-handle-color',
|
||||
'hover-icon-color',
|
||||
@ -78,6 +84,10 @@ $supported-tokens: (
|
||||
'track-outline-color',
|
||||
'track-outline-width',
|
||||
'track-shape',
|
||||
'track-shape-end-end',
|
||||
'track-shape-end-start',
|
||||
'track-shape-start-end',
|
||||
'track-shape-start-start',
|
||||
'track-width',
|
||||
'with-icon-handle-height',
|
||||
'with-icon-handle-width',
|
||||
@ -104,10 +114,18 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: md-comp-switch.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: shape.get-new-logical-shape-tokens(
|
||||
$tokens,
|
||||
'handle-shape',
|
||||
'track-shape'
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
md-comp-switch.values($deps, $exclude-hardcoded-values),
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove default "unselected" prefix (b/292244480)
|
||||
'disabled-unselected-handle-color': 'disabled-handle-color',
|
||||
@ -148,6 +166,14 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
$shape-tokens: ('handle-shape', 'track-shape');
|
||||
@each $shape-token in $shape-tokens {
|
||||
@if string.index($token, '#{$shape-token}-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-switch-#{$shape-token}, #{$value});
|
||||
}
|
||||
}
|
||||
|
||||
$tokens: map.set($tokens, $token, var(--md-switch-#{$token}, #{$value}));
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
@use 'sass:string';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/shape';
|
||||
@use './internal/validate';
|
||||
@use './md-sys-color';
|
||||
@use './md-sys-shape';
|
||||
@ -19,6 +21,10 @@ $supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-height',
|
||||
'container-shape',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-start-start',
|
||||
'disabled-icon-color',
|
||||
'disabled-icon-opacity',
|
||||
'disabled-label-text-color',
|
||||
@ -70,11 +76,10 @@ $_default: (
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: true
|
||||
) {
|
||||
$tokens: validate.values(
|
||||
md-comp-text-button.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: (
|
||||
$tokens: md-comp-text-button.values($deps, $exclude-hardcoded-values);
|
||||
$new-tokens: map.merge(
|
||||
shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
|
||||
(
|
||||
// b/198759625 - Remove once spacing tokens are formally added
|
||||
// go/keep-sorted start
|
||||
'leading-space': if($exclude-hardcoded-values, null, 12px),
|
||||
@ -88,7 +93,14 @@ $_default: (
|
||||
'with-trailing-icon-trailing-space':
|
||||
if($exclude-hardcoded-values, null, 12px),
|
||||
// go/keep-sorted end
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: validate.values(
|
||||
$tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens,
|
||||
$new-tokens: $new-tokens,
|
||||
$renamed-tokens: (
|
||||
// Remove "with-*" prefixes (b/273534858)
|
||||
'with-icon-disabled-icon-color': 'disabled-icon-color',
|
||||
@ -105,6 +117,11 @@ $_default: (
|
||||
// See b/321816473.
|
||||
@if not $exclude-custom-properties {
|
||||
@each $token, $value in $tokens {
|
||||
@if string.index($token, 'container-shape-') == 1 {
|
||||
// Add fallback to shorthand for logical shape properties.
|
||||
$value: var(--md-text-button-container-shape, #{$value});
|
||||
}
|
||||
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
|
||||
93
tokens/internal/_shape.scss
Normal file
93
tokens/internal/_shape.scss
Normal file
@ -0,0 +1,93 @@
|
||||
//
|
||||
// Copyright 2024 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
@use 'sass:meta';
|
||||
// go/keep-sorted end
|
||||
|
||||
/// Returns a map of 4 logical tokens (start-start, start-end, end-end,
|
||||
/// and end-start) for each of the given shape tokens in the provided token
|
||||
/// map.
|
||||
///
|
||||
/// @example scss
|
||||
/// $tokens: ('container-shape': 16px 16px 0px 0px);
|
||||
/// $new-tokens: shape.get-new-logical-shape-tokens(
|
||||
/// $tokens,
|
||||
/// 'container-shape'
|
||||
/// );
|
||||
/// // (
|
||||
/// // 'container-shape-start-start': 16px,
|
||||
/// // 'container-shape-start-end': 16px,
|
||||
/// // 'container-shape-end-end': 0px,
|
||||
/// // 'container-shape-end-start': 0px,
|
||||
/// // )
|
||||
///
|
||||
/// @param $tokens A Map of tokens.
|
||||
/// @param $shape-tokens One or more shape tokens in the provided map. Each
|
||||
/// shape token will add 4 logical shape tokens to the returned map.
|
||||
/// @return A map with 4 logical tokens for each provided shape token.
|
||||
@function get-new-logical-shape-tokens($tokens, $shape-tokens...) {
|
||||
$new-logical-tokens: ();
|
||||
$logical-suffixes: (
|
||||
// top-left
|
||||
'start-start',
|
||||
// top-right
|
||||
'start-end',
|
||||
// bottom-right
|
||||
'end-end',
|
||||
// bottom-left
|
||||
'end-start'
|
||||
);
|
||||
|
||||
@each $shape-token in $shape-tokens {
|
||||
$shorthand-value: _expand-shorthand-to-list(map.get($tokens, $shape-token));
|
||||
|
||||
@each $logical-suffix in $logical-suffixes {
|
||||
$logical-token: '#{$shape-token}-#{$logical-suffix}';
|
||||
$logical-index: list.index($logical-suffixes, $logical-suffix);
|
||||
|
||||
$new-logical-tokens: map.set(
|
||||
$new-logical-tokens,
|
||||
$logical-token,
|
||||
list.nth($shorthand-value, $logical-index)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@return $new-logical-tokens;
|
||||
}
|
||||
|
||||
@function _expand-shorthand-to-list($shorthand) {
|
||||
@if meta.type-of($shorthand) != 'list' or list.length($shorthand) == 1 {
|
||||
@return ($shorthand, $shorthand, $shorthand, $shorthand);
|
||||
}
|
||||
|
||||
@if list.length($shorthand) == 2 {
|
||||
$top-left-and-bottom-right: list.nth($shorthand, 1);
|
||||
$top-right-and-bottom-left: list.nth($shorthand, 2);
|
||||
@return (
|
||||
$top-left-and-bottom-right,
|
||||
$top-right-and-bottom-left,
|
||||
$top-left-and-bottom-right,
|
||||
$top-right-and-bottom-left
|
||||
);
|
||||
}
|
||||
|
||||
@if list.length($shorthand) == 3 {
|
||||
$top-left: list.nth($shorthand, 1);
|
||||
$top-right-and-bottom-left: list.nth($shorthand, 2);
|
||||
$bottom-right: list.nth($shorthand, 3);
|
||||
@return (
|
||||
$top-left,
|
||||
$top-right-and-bottom-left,
|
||||
$bottom-right,
|
||||
$top-right-and-bottom-left
|
||||
);
|
||||
}
|
||||
|
||||
@return $shorthand;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user