mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
61eb08e7b1
According to the [M3 spec](https://m3.material.io/components/buttons/specs#899b9107-0127-4a01-8f4c-87f19323a1b4), Text Buttons have less side padding than the other Button variants. PiperOrigin-RevId: 463712391
58 lines
1.8 KiB
SCSS
58 lines
1.8 KiB
SCSS
//
|
|
// Copyright 2021 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
@use 'sass:map';
|
|
@use '@material/web/sass/resolvers';
|
|
@use '@material/web/sass/theme';
|
|
@use '@material/web/sass/typography';
|
|
@use '@material/web/tokens';
|
|
@use './button-theme';
|
|
@use './icon-theme';
|
|
|
|
$_custom-property-prefix: 'text-button';
|
|
|
|
$light-theme: tokens.md-comp-text-button-values();
|
|
|
|
@mixin theme($theme, $resolvers: resolvers.$material) {
|
|
$theme: theme.validate-theme($light-theme, $theme);
|
|
$theme: _resolve-theme($theme, $resolvers);
|
|
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
|
|
|
@include theme.emit-theme-vars($theme);
|
|
}
|
|
|
|
@mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
|
$theme: theme.validate-theme-styles($light-theme, $theme);
|
|
// TODO(b/198759625): Remove once spacing tokens are formally added
|
|
$theme: map.set($theme, 'spacing-leading', 12px);
|
|
$theme: map.set($theme, 'spacing-trailing', 12px);
|
|
$theme: map.set($theme, 'with-icon-spacing-leading', 12px);
|
|
$theme: map.set($theme, 'with-icon-spacing-trailing', 16px);
|
|
$theme: map.set($theme, 'with-trailing-icon-spacing-leading', 16px);
|
|
$theme: map.set($theme, 'with-trailing-icon-spacing-trailing', 12px);
|
|
$theme: _resolve-theme($theme, $resolvers);
|
|
$theme: theme.create-theme-vars($theme, $_custom-property-prefix);
|
|
|
|
@include button-theme.theme-styles($theme);
|
|
@include icon-theme.theme-styles($theme);
|
|
}
|
|
|
|
@function _resolve-theme($theme, $resolvers) {
|
|
// TODO(b/233066105): Clean up this removal of extraneous tokens
|
|
$theme: map.remove(
|
|
$theme,
|
|
'disabled-container-color',
|
|
'disabled-container-opacity'
|
|
);
|
|
$theme: button-theme.flatten-disabled-colors($theme);
|
|
$theme: button-theme.remove-unsupported-tokens($theme);
|
|
$theme: typography.resolve-theme(
|
|
$theme,
|
|
map.get($resolvers, 'typography'),
|
|
'label-text'
|
|
);
|
|
@return $theme;
|
|
}
|