Skip to content

Commit

Permalink
fix(checkbox): support logical shapes
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 527283325
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed Apr 26, 2023
1 parent fb72f17 commit e62b16b
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 48 deletions.
95 changes: 48 additions & 47 deletions checkbox/lib/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
//

// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
// go/keep-sorted end
// go/keep-sorted start
@use '../../focus/focus-ring';
@use '../../ripple/ripple';
@use '../../sass/theme';
@use '../../tokens';
// go/keep-sorted end

Expand All @@ -26,32 +26,69 @@ $_indeterminate-bottom-left: 4px, -10px;
$_checkmark-bottom-left: 7px, -14px;

@mixin theme($tokens) {
$tokens: _resolve-tokens($tokens);
$tokens: theme.validate-theme(
_resolve-tokens(tokens.md-comp-checkbox-values()),
$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'
)
);
$tokens: theme.create-theme-vars($tokens, checkbox);

@include theme.emit-theme-vars($tokens);
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
}

@if $value {
--md-checkbox-#{$token}: #{$value};
}
}
}

@mixin styles() {
$tokens: _resolve-tokens(tokens.md-comp-checkbox-values());
$tokens: theme.create-theme-vars($tokens, checkbox);
$tokens: tokens.md-comp-checkbox-values();

:host {
@each $token, $value in $tokens {
--_#{$token}: #{$value};
--_#{$token}: var(--md-checkbox-#{$token}, #{$value});
}

border-radius: var(--_container-shape);
// Support logical shape properties
--_container-shape-start-start: var(
--md-checkbox-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-checkbox-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-checkbox-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-checkbox-shape-end-start,
var(--_container-shape)
);

border-start-start-radius: var(--_container-shape-start-start);
border-start-end-radius: var(--_container-shape-start-end);
border-end-end-radius: var(--_container-shape-end-end);
border-end-start-radius: var(--_container-shape-end-start);
display: inline-flex;
height: 48px;
position: relative;
vertical-align: top; // Fix extra space when placed inside display: block
width: 48px;
-webkit-tap-highlight-color: transparent;

@include focus-ring.theme(
(
'offset': -2px,
)
);
}

input {
Expand Down Expand Up @@ -129,17 +166,6 @@ $_checkmark-bottom-left: 7px, -14px;
transform: scale(1);
}

// Focus ring

md-focus-ring {
@include focus-ring.theme(
(
offset: -2px,
shape: map.get(tokens.md-sys-shape-values(), corner-full),
)
);
}

// Ripple

md-ripple {
Expand Down Expand Up @@ -429,28 +455,3 @@ $_checkmark-bottom-left: 7px, -14px;
fill: var(--_selected-disabled-icon-color);
}
}

@function _resolve-tokens($tokens) {
// Remove deprecated tokens
$tokens: map.remove(
$tokens,
'disabled-unselected-icon-color',
'disabled-unselected-icon-opacity',
'disabled-selected-icon-color',
'disabled-selected-icon-opacity',
'unselected-icon-color',
'unselected-focus-icon-color',
'unselected-hover-icon-color',
'unselected-pressed-icon-color'
);
// Remove unsupported tokens
$tokens: map.remove(
$tokens,
'selected-disabled-container-outline-width',
'selected-focus-outline-width',
'selected-hover-outline-width',
'selected-outline-width',
'selected-pressed-outline-width'
);
@return $tokens;
}
79 changes: 78 additions & 1 deletion tokens/_md-comp-checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@use './md-sys-shape';
@use './md-sys-state';
@use './v0_172/md-comp-checkbox';
@use './values';
// go/keep-sorted end

$_default: (
Expand All @@ -16,6 +17,82 @@ $_default: (
'md-sys-state': md-sys-state.values(),
);

$supported-tokens: (
// go/keep-sorted start
'container-shape',
'container-size',
'error-focus-state-layer-color',
'error-focus-state-layer-opacity',
'error-hover-state-layer-color',
'error-hover-state-layer-opacity',
'error-pressed-state-layer-color',
'error-pressed-state-layer-opacity',
'icon-size',
'selected-container-color',
'selected-disabled-container-color',
'selected-disabled-container-opacity',
'selected-disabled-icon-color',
'selected-error-container-color',
'selected-error-focus-container-color',
'selected-error-focus-icon-color',
'selected-error-hover-container-color',
'selected-error-hover-icon-color',
'selected-error-icon-color',
'selected-error-pressed-container-color',
'selected-error-pressed-icon-color',
'selected-focus-container-color',
'selected-focus-icon-color',
'selected-focus-state-layer-color',
'selected-focus-state-layer-opacity',
'selected-hover-container-color',
'selected-hover-icon-color',
'selected-hover-state-layer-color',
'selected-hover-state-layer-opacity',
'selected-icon-color',
'selected-pressed-container-color',
'selected-pressed-icon-color',
'selected-pressed-state-layer-color',
'selected-pressed-state-layer-opacity',
'state-layer-shape',
'state-layer-size',
'unselected-disabled-container-opacity',
'unselected-disabled-outline-color',
'unselected-disabled-outline-width',
'unselected-error-focus-outline-color',
'unselected-error-hover-outline-color',
'unselected-error-outline-color',
'unselected-error-pressed-outline-color',
'unselected-focus-outline-color',
'unselected-focus-outline-width',
'unselected-focus-state-layer-color',
'unselected-focus-state-layer-opacity',
'unselected-hover-outline-color',
'unselected-hover-outline-width',
'unselected-hover-state-layer-color',
'unselected-hover-state-layer-opacity',
'unselected-outline-color',
'unselected-outline-width',
'unselected-pressed-outline-color',
'unselected-pressed-outline-width',
'unselected-pressed-state-layer-color',
'unselected-pressed-state-layer-opacity',
// go/keep-sorted end
);

$unsupported-tokens: (
'selected-disabled-container-outline-width',
'selected-focus-outline-width',
'selected-hover-outline-width',
'selected-outline-width',
'selected-pressed-outline-width'
);

@function values($deps: $_default, $exclude-hardcoded-values: false) {
@return md-comp-checkbox.values($deps, $exclude-hardcoded-values);
$tokens: values.validate(
md-comp-checkbox.values($deps, $exclude-hardcoded-values),
$supported-tokens: $supported-tokens,
$unsupported-tokens: $unsupported-tokens
);

@return $tokens;
}

0 comments on commit e62b16b

Please sign in to comment.