Skip to content

Commit

Permalink
feat(material-experimental/theming): add M3 tabs support
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmalerba
mmalerba committed Nov 8, 2023
1 parent ab73ceb commit 09a2cc1
Show file tree
Hide file tree
Showing 5 changed files with 277 additions and 178 deletions.
3 changes: 3 additions & 0 deletions src/dev-app/theme-m3.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ html {
@include mat.slide-toggle-theme($light-theme);
@include mat.slider-theme($light-theme);
@include mat.snack-bar-theme($light-theme);
@include mat.tabs-theme($light-theme);
@include mat.toolbar-theme($light-theme);
@include mat.tooltip-theme($light-theme);
@include mat.tree-theme($light-theme);
Expand All @@ -63,6 +64,7 @@ html {
@include mat.slide-toggle-color($dark-theme);
@include mat.slider-color($dark-theme);
@include mat.snack-bar-color($dark-theme);
@include mat.tabs-color($dark-theme);
@include mat.toolbar-color($dark-theme);
@include mat.tooltip-color($dark-theme);
@include mat.tree-color($dark-theme);
Expand All @@ -81,6 +83,7 @@ html {
@include mat.slide-toggle-density($scale-theme);
@include mat.slider-density($scale-theme);
@include mat.snack-bar-density($scale-theme);
@include mat.tabs-density($scale-theme);
@include mat.toolbar-density($scale-theme);
@include mat.tooltip-density($scale-theme);
@include mat.tree-density($scale-theme);
Expand Down
58 changes: 48 additions & 10 deletions src/material-experimental/theming/_custom-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@
/// @return {Map} A set of custom tokens for the mat-card
@function card($systems, $exclude-hardcoded) {
@return mat.private-merge-all(
_generate-typography-tokens($systems, title-text, title-large),
_generate-typography-tokens($systems, subtitle-text, title-medium),
(
subtitle-text-color: map.get($systems, md-sys-color, on-surface)
)
_generate-typography-tokens($systems, title-text, title-large),
_generate-typography-tokens($systems, subtitle-text, title-medium),
(
subtitle-text-color: map.get($systems, md-sys-color, on-surface)
)
);
}

Expand All @@ -36,11 +36,11 @@
/// @return {Map} A set of custom tokens for the mat-toolbar
@function toolbar($systems, $exclude-hardcoded) {
@return mat.private-merge-all(
_generate-typography-tokens($systems, title-text, title-large),
(
container-background-color: map.get($systems, md-sys-color, surface),
container-text-color: map.get($systems, md-sys-color, on-surface),
)
_generate-typography-tokens($systems, title-text, title-large),
(
container-background-color: map.get($systems, md-sys-color, surface),
container-text-color: map.get($systems, md-sys-color, on-surface),
)
);
}

Expand Down Expand Up @@ -84,6 +84,44 @@
);
}

/// Generates custom tokens for the mat-tab-header.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the mat-tab-header
@function tab-header($systems, $exclude-hardcoded) {
@return mat.private-merge-all(
_generate-typography-tokens($systems, label-text, title-small),
(
disabled-ripple-color: transparent, // TODO(mmalerba): Figure out correct value.
pagination-icon-color: map.get($systems, md-sys-color, on-surface),
inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
active-label-text-color: map.get($systems, md-sys-color, on-surface),
active-ripple-color: map.get($systems, md-sys-color, on-surface),
inactive-ripple-color: map.get($systems, md-sys-color, on-surface),
inactive-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
inactive-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
active-focus-label-text-color: map.get($systems, md-sys-color, primary),
active-hover-label-text-color: map.get($systems, md-sys-color, primary),
active-focus-indicator-color: map.get($systems, md-sys-color, primary),
active-hover-indicator-color: map.get($systems, md-sys-color, primary),
),
);
}

/// Generates custom tokens for the mdc-tab-indicator. (MDC has a tab-indicator component, but they
/// seem to have made up the tokens rather than using ones generated from the token database,
/// therefore we need a custom token function for it).
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the mdc-tab-indicator
@function tab-indicator($systems, $exclude-hardcoded) {
@return (
active-indicator-height: 2px,
active-indicator-shape: 0,
active-indicator-color: map.get($systems, md-sys-color, primary),
);
}

/// Generates custom tokens for the mat-tree.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
Expand Down
58 changes: 32 additions & 26 deletions src/material-experimental/theming/_m3-density.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,39 @@
// TODO(mmalerba): Add density tokens for remaining components.
$_density-tokens: (
// MDC tokens
(mdc, checkbox): (
state-layer-size: (40px, 36px, 32px, 28px),
),
(mdc, elevated-card): (),
(mdc, outlined-card): (),
(mdc, slider): (),
(mdc, snackbar): (),
(mdc, plain-tooltip): (),
(mdc, circular-progress): (),
(mdc, radio): (
state-layer-size: (40px, 36px, 32px, 28px),
),
(mdc, linear-progress): (),
(mdc, switch): (),
(mdc, checkbox): (
state-layer-size: (40px, 36px, 32px, 28px),
),
(mdc, elevated-card): (),
(mdc, outlined-card): (),
(mdc, slider): (),
(mdc, snackbar): (),
(mdc, plain-tooltip): (),
(mdc, circular-progress): (),
(mdc, radio): (
state-layer-size: (40px, 36px, 32px, 28px),
),
(mdc, linear-progress): (),
(mdc, switch): (),
(mdc, tab): (
container-height: (48px, 44px, 40px, 36px, 32px)
),
(mdc, tab-indicator): (),

// Custom Angular Material tokens
(mat, card): (),
(mat, toolbar): (
standard-height: (64px, 60px, 56px, 52px),
mobile-height: (56px, 52px, 48px, 44px),
),
(mat, slider): (),
(mat, snack-bar): (),
(mat, radio): (),
(mat, slide-toggle): (),
(mat, tree): (
node-min-height: (48px, 44px, 40px, 36px, 28px),
),
(mat, card): (),
(mat, toolbar): (
standard-height: (64px, 60px, 56px, 52px),
mobile-height: (56px, 52px, 48px, 44px),
),
(mat, slider): (),
(mat, snack-bar): (),
(mat, radio): (),
(mat, slide-toggle): (),
(mat, tab-header): (),
(mat, tree): (
node-min-height: (48px, 44px, 40px, 36px, 28px),
),
);

/// Gets the value for the given density scale from the given set of density values.
Expand Down
198 changes: 107 additions & 91 deletions src/material-experimental/theming/_m3-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,97 +168,113 @@
// TODO(mmalerba): Fill in remaining tokens.
$result: mat.private-merge-all(
// Add the system color & typography tokens (so we can give users access via an API).
(
(mdc, theme): map.get($systems, md-sys-color),
(mdc, typography): map.get($systems, md-sys-typescale),
),
// Get the official MDC component tokens
_namespace-tokens(
(mdc, checkbox),
_fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
$token-slots
),
_namespace-tokens(
(mdc, elevated-card),
mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, outlined-card),
mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, slider),
mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, snackbar),
mdc-tokens.md-comp-snackbar-values($systems, $exclude-hardcoded),
$token-slots,
),
_namespace-tokens(
(mdc, switch),
mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, plain-tooltip),
mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, circular-progress),
mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, radio),
mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, linear-progress),
mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
$token-slots),
// Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
// values.
_namespace-tokens(
(mat, card),
custom-tokens.card($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, toolbar),
custom-tokens.toolbar($systems, $exclude-hardcoded),
$token-slots,
),
_namespace-tokens(
(mat, slide-toggle),
custom-tokens.slide-toggle($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, slider),
custom-tokens.slider($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, snack-bar),
custom-tokens.snack-bar($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, radio),
custom-tokens.radio($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, tree),
custom-tokens.tree($systems, $exclude-hardcoded),
$token-slots
),
(
(mdc, theme): map.get($systems, md-sys-color),
(mdc, typography): map.get($systems, md-sys-typescale),
),
// Get the official MDC component tokens
_namespace-tokens(
(mdc, checkbox),
_fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
$token-slots
),
_namespace-tokens(
(mdc, elevated-card),
mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, outlined-card),
mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, slider),
mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, snackbar),
mdc-tokens.md-comp-snackbar-values($systems, $exclude-hardcoded),
$token-slots,
),
_namespace-tokens(
(mdc, switch),
mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, plain-tooltip),
mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, circular-progress),
mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, radio),
mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, linear-progress),
mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, tab),
mdc-tokens.md-comp-secondary-navigation-tab-values($systems, $exclude-hardcoded),
$token-slots
),
// Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
// values.
_namespace-tokens(
(mdc, tab-indicator),
custom-tokens.tab-indicator($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, card),
custom-tokens.card($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, toolbar),
custom-tokens.toolbar($systems, $exclude-hardcoded),
$token-slots,
),
_namespace-tokens(
(mat, slide-toggle),
custom-tokens.slide-toggle($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, slider),
custom-tokens.slider($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, snack-bar),
custom-tokens.snack-bar($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, radio),
custom-tokens.radio($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, tab-header),
custom-tokens.tree($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, tree),
custom-tokens.tree($systems, $exclude-hardcoded),
$token-slots
),
);

// Strip out tokens that are systemized by our made up density system.
Expand Down
Loading

0 comments on commit 09a2cc1

Please sign in to comment.