mirror of
https://github.com/material-components/material-web.git
synced 2024-11-13 00:29:03 +03:00
chore(switch): merge static/theme-styles
PiperOrigin-RevId: 482926043
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
4568e25dcc
commit
aff34c73ea
@ -3,5 +3,4 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@forward './lib/switch-theme' show
|
||||
theme;
|
||||
@forward './lib/switch' show theme;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
@use '../../ripple/ripple-theme';
|
||||
|
||||
@mixin theme-styles() {
|
||||
@mixin styles() {
|
||||
.md3-switch__handle-container {
|
||||
$margin: calc(var(--_track-width) - var(--_track-height));
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
@mixin theme-styles() {
|
||||
@mixin styles() {
|
||||
.md3-switch__icon {
|
||||
.md3-switch--selected & {
|
||||
width: var(--_selected-icon-size);
|
||||
@ -1,224 +0,0 @@
|
||||
//
|
||||
// Copyright 2021 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// stylelint-disable selector-class-pattern --
|
||||
// Selector '.md3-*' should only be used in this project.
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
@use '../../focus/focus-ring';
|
||||
@use '../../sass/color';
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/shape';
|
||||
@use '../../sass/theme';
|
||||
@use '../../sass/var';
|
||||
@use '../../tokens';
|
||||
|
||||
@use './switch-track-theme';
|
||||
@use './switch-handle-theme';
|
||||
@use './switch-icon-theme';
|
||||
|
||||
$_default-deps: (
|
||||
md-sys-color: tokens.md-sys-color-values-light-dynamic(),
|
||||
md-sys-elevation: tokens.md-sys-elevation-values(),
|
||||
md-sys-shape: tokens.md-sys-shape-values(),
|
||||
md-sys-state: tokens.md-sys-state-values(),
|
||||
);
|
||||
|
||||
@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
|
||||
$values: tokens.md-comp-switch-values($deps, $exclude-hardcoded-values);
|
||||
|
||||
// Add missing tokens.
|
||||
$values: map.merge(
|
||||
$values,
|
||||
(
|
||||
// TODO(b/230013081): remove this once the missing token is added.
|
||||
unselected-track-outline-color: map.get($deps, md-sys-color, outline)
|
||||
)
|
||||
);
|
||||
|
||||
// Mark opacity tokens as not hardcoded
|
||||
@if $exclude-hardcoded-values {
|
||||
// If opacity value is null (e.g. for dark theme map, only the color
|
||||
// changes, so the opacity value is null), use the default opacity value.
|
||||
// Otherwise, the color is not flattened, meaning that the color would
|
||||
// be applied without any opacity, which is incorrect.
|
||||
$fullValues: tokens.md-comp-switch-values($deps);
|
||||
$values: map.merge(
|
||||
$values,
|
||||
(
|
||||
disabled-selected-handle-opacity:
|
||||
map.get($fullValues, disabled-selected-handle-opacity),
|
||||
disabled-unselected-handle-opacity:
|
||||
map.get($fullValues, disabled-unselected-handle-opacity),
|
||||
disabled-track-opacity: map.get($fullValues, disabled-track-opacity),
|
||||
disabled-selected-icon-opacity:
|
||||
map.get($fullValues, disabled-selected-icon-opacity),
|
||||
disabled-unselected-icon-opacity:
|
||||
map.get($fullValues, disabled-unselected-icon-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@return $values;
|
||||
}
|
||||
|
||||
// PRIVATE PROPERTIES
|
||||
|
||||
$_touch-target-size: 48px;
|
||||
|
||||
$_selected: '.md3-switch--selected';
|
||||
$_unselected: '.md3-switch--unselected';
|
||||
|
||||
// PUBLIC PROPERTIES
|
||||
|
||||
$light-theme: values();
|
||||
$dark-theme: values(
|
||||
(
|
||||
md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
|
||||
),
|
||||
$exclude-hardcoded-values: true
|
||||
);
|
||||
|
||||
$_forced-colors-theme: (
|
||||
disabled-selected-icon-color: GrayText,
|
||||
disabled-selected-icon-opacity: 1,
|
||||
disabled-selected-track-color: GrayText,
|
||||
disabled-track-opacity: 1,
|
||||
disabled-unselected-handle-color: GrayText,
|
||||
disabled-unselected-handle-opacity: 1,
|
||||
disabled-unselected-icon-color: Canvas,
|
||||
disabled-unselected-icon-opacity: 1,
|
||||
selected-focus-track-color: ButtonText,
|
||||
selected-hover-track-color: ButtonText,
|
||||
selected-icon-color: ButtonText,
|
||||
selected-pressed-track-color: ButtonText,
|
||||
selected-track-color: ButtonText,
|
||||
unselected-focus-handle-color: ButtonText,
|
||||
unselected-handle-color: ButtonText,
|
||||
unselected-hover-handle-color: ButtonText,
|
||||
unselected-icon-color: Canvas,
|
||||
unselected-pressed-handle-color: ButtonText,
|
||||
);
|
||||
|
||||
@function _resolve-theme($theme, $resolvers) {
|
||||
$theme: shape.resolve-theme(
|
||||
$theme,
|
||||
map.get($resolvers, shape),
|
||||
track-shape,
|
||||
handle-shape
|
||||
);
|
||||
$theme: _flatten-disable-colors($theme);
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
@function _warn-of-not-implemented($theme) {
|
||||
// TODO(b/230484095): remove this warning once these are implemented.
|
||||
@if (
|
||||
map.has-key($theme, selected-handle-height) or
|
||||
map.has-key($theme, selected-handle-width) or
|
||||
map.has-key($theme, unselected-handle-height) or
|
||||
map.has-key($theme, unselected-handle-width) or
|
||||
map.has-key($theme, pressed-handle-height) or
|
||||
map.has-key($theme, pressed-handle-width)
|
||||
) {
|
||||
@warn '`handle-height` and `handle-width` are not yet implemented. see b/230484095';
|
||||
}
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
@mixin theme($theme, $resolvers: resolvers.$material) {
|
||||
$theme: _warn-of-not-implemented($theme);
|
||||
$theme: theme.validate-theme($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, switch);
|
||||
|
||||
@include theme.emit-theme-vars($theme);
|
||||
}
|
||||
|
||||
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
||||
$theme: _warn-of-not-implemented($theme);
|
||||
$theme: theme.validate-theme-styles($light-theme, $theme);
|
||||
$theme: _resolve-theme($theme, $resolvers);
|
||||
$theme: theme.create-theme-vars($theme, switch);
|
||||
|
||||
* {
|
||||
@each $token, $value in $theme {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
.md3-switch {
|
||||
width: var(--_track-width);
|
||||
height: var(--_track-height);
|
||||
|
||||
// Track shape
|
||||
border-start-start-radius: var(--_track-shape-start-start);
|
||||
border-start-end-radius: var(--_track-shape-start-end);
|
||||
border-end-end-radius: var(--_track-shape-end-end);
|
||||
border-end-start-radius: var(--_track-shape-end-start);
|
||||
|
||||
// TODO(b/230630968): create a forced-colors-mode mixin
|
||||
@media screen and (forced-colors: active) {
|
||||
@include theme($_forced-colors-theme);
|
||||
}
|
||||
}
|
||||
|
||||
md-focus-ring {
|
||||
// TODO(b/231741594): use `track-shape` once this is not deleted.
|
||||
$track-shape: var(--_track-shape-start-start);
|
||||
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
ring-radius: $track-shape,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@include switch-track-theme.theme-styles();
|
||||
|
||||
@include switch-handle-theme.theme-styles();
|
||||
|
||||
@include switch-icon-theme.theme-styles();
|
||||
}
|
||||
|
||||
@function _flatten-disable-colors($theme) {
|
||||
@return color.join-color-and-opacity-pairs(
|
||||
$theme,
|
||||
(
|
||||
// Disabled Handle
|
||||
(
|
||||
color-key: disabled-selected-handle-color,
|
||||
opacity-key: disabled-selected-handle-opacity
|
||||
),
|
||||
(
|
||||
color-key: disabled-unselected-handle-color,
|
||||
opacity-key: disabled-unselected-handle-opacity
|
||||
),
|
||||
// Disabled Track
|
||||
(
|
||||
color-key: disabled-selected-track-color,
|
||||
opacity-key: disabled-track-opacity
|
||||
),
|
||||
(
|
||||
color-key: disabled-unselected-track-color,
|
||||
opacity-key: disabled-track-opacity
|
||||
),
|
||||
(
|
||||
color-key: disabled-unselected-track-outline-color,
|
||||
opacity-key: disabled-track-opacity
|
||||
),
|
||||
// Disabled Icon
|
||||
(
|
||||
color-key: disabled-selected-icon-color,
|
||||
opacity-key: disabled-selected-icon-opacity
|
||||
),
|
||||
(
|
||||
color-key: disabled-unselected-icon-color,
|
||||
opacity-key: disabled-unselected-icon-opacity
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -8,23 +8,95 @@
|
||||
|
||||
// PUBLIC PROPERTIES
|
||||
|
||||
@use 'sass:map';
|
||||
@use '../../focus/focus-ring';
|
||||
@use '../../motion/animation';
|
||||
@use '../../sass/color';
|
||||
@use '../../sass/resolvers';
|
||||
@use '../../sass/shape';
|
||||
@use '../../sass/theme';
|
||||
@use '../../sass/touch-target';
|
||||
@use '../../sass/var';
|
||||
@use '../../tokens';
|
||||
|
||||
@use './track';
|
||||
@use './handle';
|
||||
@use './icon';
|
||||
|
||||
// TODO(b/230768994): update animation timing
|
||||
$animation-duration: 75ms;
|
||||
$icon-exit-duration: 0.4 * $animation-duration;
|
||||
$icon-enter-duration: $animation-duration - $icon-exit-duration;
|
||||
|
||||
// PUBLIC API
|
||||
$_touch-target-size: 48px;
|
||||
|
||||
$_forced-colors-theme: (
|
||||
disabled-selected-icon-color: GrayText,
|
||||
disabled-selected-icon-opacity: 1,
|
||||
disabled-selected-track-color: GrayText,
|
||||
disabled-track-opacity: 1,
|
||||
disabled-unselected-handle-color: GrayText,
|
||||
disabled-unselected-handle-opacity: 1,
|
||||
disabled-unselected-icon-color: Canvas,
|
||||
disabled-unselected-icon-opacity: 1,
|
||||
selected-focus-track-color: ButtonText,
|
||||
selected-hover-track-color: ButtonText,
|
||||
selected-icon-color: ButtonText,
|
||||
selected-pressed-track-color: ButtonText,
|
||||
selected-track-color: ButtonText,
|
||||
unselected-focus-handle-color: ButtonText,
|
||||
unselected-handle-color: ButtonText,
|
||||
unselected-hover-handle-color: ButtonText,
|
||||
unselected-icon-color: Canvas,
|
||||
unselected-pressed-handle-color: ButtonText,
|
||||
);
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: _warn-of-not-implemented($tokens);
|
||||
$tokens: theme.validate-theme(tokens.md-comp-switch-values(), $tokens);
|
||||
$tokens: _resolve-tokens($tokens);
|
||||
$tokens: theme.create-theme-vars($tokens, switch);
|
||||
|
||||
@include theme.emit-theme-vars($tokens);
|
||||
}
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-switch-values();
|
||||
$tokens: _resolve-tokens($tokens);
|
||||
|
||||
// Add missing tokens.
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
// TODO(b/230013081): remove this once the missing token is added.
|
||||
unselected-track-outline-color:
|
||||
map.get(tokens.md-sys-color-values-light-dynamic(), outline)
|
||||
)
|
||||
);
|
||||
|
||||
$tokens: theme.create-theme-vars($tokens, switch);
|
||||
|
||||
* {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin static-styles() {
|
||||
:host {
|
||||
display: inline-flex;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
md-focus-ring {
|
||||
// TODO(b/231741594): use `track-shape` once this is not deleted.
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
ring-radius: var(--_track-shape-start-start),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.md3-switch {
|
||||
align-items: center;
|
||||
background: none;
|
||||
@ -36,6 +108,19 @@ $icon-enter-duration: $animation-duration - $icon-exit-duration;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: var(--_track-width);
|
||||
height: var(--_track-height);
|
||||
|
||||
// Track shape
|
||||
border-start-start-radius: var(--_track-shape-start-start);
|
||||
border-start-end-radius: var(--_track-shape-start-end);
|
||||
border-end-end-radius: var(--_track-shape-end-end);
|
||||
border-end-start-radius: var(--_track-shape-end-start);
|
||||
|
||||
// TODO(b/230630968): create a forced-colors-mode mixin
|
||||
@media screen and (forced-colors: active) {
|
||||
@include theme($_forced-colors-theme);
|
||||
}
|
||||
}
|
||||
|
||||
// Track
|
||||
@ -157,4 +242,73 @@ $icon-enter-duration: $animation-duration - $icon-exit-duration;
|
||||
.md3-switch__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include track.styles();
|
||||
@include handle.styles();
|
||||
@include icon.styles();
|
||||
}
|
||||
|
||||
@function _resolve-tokens($theme) {
|
||||
$theme: shape.resolve-theme(
|
||||
$theme,
|
||||
map.get(resolvers.$material, shape),
|
||||
track-shape,
|
||||
handle-shape
|
||||
);
|
||||
$theme: _flatten-disable-colors($theme);
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
@function _flatten-disable-colors($theme) {
|
||||
@return color.join-color-and-opacity-pairs(
|
||||
$theme,
|
||||
(
|
||||
// Disabled Handle
|
||||
(
|
||||
color-key: disabled-selected-handle-color,
|
||||
opacity-key: disabled-selected-handle-opacity
|
||||
),
|
||||
(
|
||||
color-key: disabled-unselected-handle-color,
|
||||
opacity-key: disabled-unselected-handle-opacity
|
||||
),
|
||||
// Disabled Track
|
||||
(
|
||||
color-key: disabled-selected-track-color,
|
||||
opacity-key: disabled-track-opacity
|
||||
),
|
||||
(
|
||||
color-key: disabled-unselected-track-color,
|
||||
opacity-key: disabled-track-opacity
|
||||
),
|
||||
(
|
||||
color-key: disabled-unselected-track-outline-color,
|
||||
opacity-key: disabled-track-opacity
|
||||
),
|
||||
// Disabled Icon
|
||||
(
|
||||
color-key: disabled-selected-icon-color,
|
||||
opacity-key: disabled-selected-icon-opacity
|
||||
),
|
||||
(
|
||||
color-key: disabled-unselected-icon-color,
|
||||
opacity-key: disabled-unselected-icon-opacity
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@function _warn-of-not-implemented($theme) {
|
||||
// TODO(b/230484095): remove this warning once these are implemented.
|
||||
@if (
|
||||
map.get($theme, selected-handle-height) or
|
||||
map.get($theme, selected-handle-width) or
|
||||
map.get($theme, unselected-handle-height) or
|
||||
map.get($theme, unselected-handle-width) or
|
||||
map.get($theme, pressed-handle-height) or
|
||||
map.get($theme, pressed-handle-width)
|
||||
) {
|
||||
@warn '`handle-height` and `handle-width` are not yet implemented. see b/230484095';
|
||||
}
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
@mixin theme-styles() {
|
||||
@mixin styles() {
|
||||
.md3-switch__track {
|
||||
background-color: var(--_selected-track-color);
|
||||
|
||||
@ -4,8 +4,5 @@
|
||||
//
|
||||
|
||||
@use './switch';
|
||||
@use './switch-theme';
|
||||
|
||||
@include switch.static-styles();
|
||||
|
||||
@include switch-theme.theme-styles(switch-theme.$light-theme);
|
||||
@include switch.styles;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user