Skip to content

Commit

Permalink
feat(components): optimizing the main theme file (#2210)
Browse files Browse the repository at this point in the history
  • Loading branch information
@owilliams320
owilliams320 authored Jul 31, 2024
1 parent 0d89dad commit 69facc1
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 294 deletions.
3 changes: 2 additions & 1 deletion libs/components/src/list/nav-list-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@
}

:host([selected]),
:host([activated]) {
:host([activated]),
:host([hasActivatedChild]) {
.mdc-deprecated-list-item__graphic.material-icons {
font-variation-settings: 'FILL' 1;
}
Expand Down
315 changes: 22 additions & 293 deletions libs/components/src/theme/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,21 @@
@mixin css-variable-theme-tokens($theme, $prefix: 'cv') {
@mixin css-variable-tokens($theme, $prefix: 'cv-theme') {
@each $key, $value in $theme {
--#{$prefix}-theme-#{$key}: #{map-get($theme, $key)};
--#{$prefix}-#{$key}: #{map-get($theme, $key)};
}
}

@mixin components-theme($theme, $typography) {
// Covalent theme tokens as css variables
@include css-variable-theme-tokens($theme);

// Foreground colors
--mdc-theme-primary: #{map-get($theme, primary)};
--mdc-theme-secondary: #{map-get($theme, secondary)};
--mdc-theme-error: #{map-get($theme, error)};
--mdc-theme-negative: #{map-get($theme, error)};
--mdc-theme-positive: #{map-get($theme, positive)};
--mdc-theme-caution: #{map-get($theme, caution)};
--mdc-theme-emphasis: #{map-get($theme, emphasis)};

// Alias for primary
--mdc-theme-accent: #{map-get($theme, accent)};

// Background colors
--mdc-theme-background: #{map-get($theme, background)};
--mdc-ripple-color: #{map-get($theme, on-surface)};
--mdc-theme-surface: #{map-get($theme, surface)};
--mdc-theme-surface-canvas: #{map-get($theme, surface-canvas)};
--mdc-theme-surface-primary: #{map-get($theme, surface-primary)};
--mdc-theme-surface-primary-highlight: #{map-get(
$theme,
surface-primary-highlight
)};
--mdc-theme-surface-primary-highlight-hover: #{map-get(
$theme,
surface-primary-highlight-hover
)};
--mdc-theme-surface-secondary: #{map-get($theme, surface-secondary)};
--mdc-theme-surface-secondary-highlight: #{map-get(
$theme,
surface-secondary-highlight
)};
--mdc-theme-surface-secondary-highlight-hover: #{map-get(
$theme,
surface-secondary-highlight-hover
)};
--mdc-theme-surface-caution: #{map-get($theme, surface-caution)};
--mdc-theme-surface-caution-highlight: #{map-get(
$theme,
surface-caution-highlight
)};
--mdc-theme-surface-caution-highlight-hover: #{map-get(
$theme,
surface-caution-highlight-hover
)};
--mdc-theme-surface-negative: #{map-get($theme, surface-negative)};
--mdc-theme-surface-negative-highlight: #{map-get(
$theme,
surface-negative-highlight
)};
--mdc-theme-surface-negative-highlight-hover: #{map-get(
$theme,
surface-negative-highlight-hover
)};
--mdc-theme-surface-positive: #{map-get($theme, surface-positive)};
--mdc-theme-surface-positive-highlight: #{map-get(
$theme,
surface-positive-highlight
)};
--mdc-theme-surface-positive-highlight-hover: #{map-get(
$theme,
surface-positive-highlight-hover
)};
--mdc-theme-surface-neutral: #{map-get($theme, surface-neutral)};
--mdc-theme-surface-neutral-highlight: #{map-get(
$theme,
surface-neutral-highlight
)};
--mdc-theme-surface-neutral-highlight-hover: #{map-get(
$theme,
surface-neutral-highlight-hover
)};
--mdc-theme-surface-emphasis: #{map-get($theme, surface-emphasis)};
--mdc-theme-surface-emphasis-highlight: #{map-get(
$theme,
surface-emphasis-highlight
)};
--mdc-theme-surface-emphasis-highlight-hover: #{map-get(
$theme,
surface-emphasis-highlight-hover
)};
--mdc-theme-on-primary: #{map-get($theme, on-primary)};
--mdc-theme-on-secondary: #{map-get($theme, on-secondary)};
--mdc-theme-on-surface: #{map-get($theme, on-surface)};
@include css-variable-tokens($theme);
// Covalent typography tokens as css variables
@include css-variable-tokens($typography, 'cv-typography');
// Material tokens as css variables
@include css-variable-tokens($theme, 'mdc-theme');
// Material typography tokens as css variables
@include css-variable-tokens($typography, 'mdc-typography');

// Overrides that dont fit in the theme map
--mdc-theme-border: #{map-get($theme, divider)};

// Alias for primary
--mdc-theme-surface-accent: #{map-get($theme, surface-primary)};
--mdc-theme-surface-accent-highlight: #{map-get(
$theme,
Expand All @@ -103,215 +25,22 @@
$theme,
surface-primary-highlight-hover
)};

// Tooltip
--mdc-plain-tooltip-container-color: #{map-get($theme, inverse-surface)};
--mdc-plain-tooltip-supporting-text-color: #{map-get(
$theme,
inverse-on-surface
)};

// Typography
--mdc-typography-font-family: #{map-get($typography, font-family)};
--mdc-typography-headline1-font-family: #{map-get(
$typography,
headline1-font-family
)};
--mdc-typography-headline1-font-size: #{map-get(
$typography,
headline1-font-size
)};
--mdc-typography-headline1-font-weight: #{map-get(
$typography,
headline1-font-weight
)};
--mdc-typography-headline1-line-height: #{map-get(
$typography,
headline1-line-height
)};
--mdc-typography-headline2-font-family: #{map-get(
$typography,
headline2-font-family
)};
--mdc-typography-headline2-font-size: #{map-get(
$typography,
headline2-font-size
)};
--mdc-typography-headline2-font-weight: #{map-get(
$typography,
headline2-font-weight
)};
--mdc-typography-headline2-line-height: #{map-get(
$typography,
headline2-line-height
)};
--mdc-typography-headline3-font-family: #{map-get(
$typography,
headline3-font-family
)};
--mdc-typography-headline3-font-size: #{map-get(
$typography,
headline3-font-size
)};
--mdc-typography-headline3-font-weight: #{map-get(
$typography,
headline3-font-weight
)};
--mdc-typography-headline3-line-height: #{map-get(
$typography,
headline3-line-height
)};
--mdc-typography-headline4-font-family: #{map-get(
$typography,
headline4-font-family
)};
--mdc-typography-headline4-font-size: #{map-get(
$typography,
headline4-font-size
)};
--mdc-typography-headline4-font-weight: #{map-get(
$typography,
headline4-font-weight
)};
--mdc-typography-headline4-line-height: #{map-get(
$typography,
headline4-line-height
)};
--mdc-typography-headline5-font-family: #{map-get(
$typography,
headline5-font-family
)};
--mdc-typography-headline5-font-size: #{map-get(
$typography,
headline5-font-size
)};
--mdc-typography-headline5-font-weight: #{map-get(
$typography,
headline5-font-weight
)};
--mdc-typography-headline5-line-height: #{map-get(
$typography,
headline5-line-height
)};
--mdc-typography-headline6-font-family: #{map-get(
$typography,
headline6-font-family
)};
--mdc-typography-headline6-font-size: #{map-get(
$typography,
headline6-font-size
)};
--mdc-typography-headline6-font-weight: #{map-get(
$typography,
headline6-font-weight
)};
--mdc-typography-headline6-line-height: #{map-get(
$typography,
headline6-line-height
)};
--mdc-typography-subtitle1-font-family: #{map-get(
$typography,
subtitle1-font-family
)};
--mdc-typography-subtitle1-font-size: #{map-get(
$typography,
subtitle1-font-size
)};
--mdc-typography-subtitle1-font-weight: #{map-get(
$typography,
subtitle1-font-weight
)};
--mdc-typography-subtitle1-line-height: #{map-get(
$typography,
subtitle1-line-height
)};
--mdc-typography-subtitle2-font-family: #{map-get(
$typography,
subtitle2-font-family
)};
--mdc-typography-subtitle2-font-size: #{map-get(
$typography,
subtitle2-font-size
)};
--mdc-typography-subtitle2-font-weight: #{map-get(
$typography,
subtitle2-font-weight
)};
--mdc-typography-subtitle2-line-height: #{map-get(
$typography,
subtitle2-line-height
)};
--mdc-typography-body1-font-family: var(--mdc-typography-font-family);
--mdc-typography-body1-font-size: #{map-get($typography, body1-font-size)};
--mdc-typography-body1-font-weight: #{map-get($typography, body1-font-weight)};
--mdc-typography-body1-line-height: #{map-get($typography, body1-line-height)};
--mdc-typography-body2-font-family: var(--mdc-typography-font-family);
--mdc-typography-body2-font-size: #{map-get($typography, body2-font-size)};
--mdc-typography-body2-font-weight: #{map-get($typography, body2-font-weight)};
--mdc-typography-body2-line-height: #{map-get($typography, body2-line-height)};
--mdc-typography-button-font-family: #{map-get(
$typography,
button-font-family
)};
--mdc-typography-button-font-size: #{map-get($typography, button-font-size)};
--mdc-typography-button-font-weight: #{map-get(
$typography,
button-font-weight
)};
--mdc-typography-button-line-height: #{map-get(
$typography,
button-line-height
)};
--mdc-typography-button-letter-spacing: 0;
--mdc-typography-button-text-transform: none;
--mdc-typography-caption-font-family: var(--mdc-typography-font-family);
--mdc-typography-caption-font-size: #{map-get($typography, caption-font-size)};
--mdc-typography-caption-font-weight: #{map-get(
$typography,
caption-font-weight
)};
--mdc-typography-caption-line-height: #{map-get(
$typography,
caption-line-height
)};

// Text
--mdc-theme-text-primary-on-background: #{map-get(
$theme,
text-primary-on-background
)};
--mdc-theme-text-secondary-on-background: #{map-get(
$theme,
text-secondary-on-background
)};
--mdc-theme-text-hint-on-background: #{map-get(
$theme,
text-hint-on-background
)};
--mdc-theme-text-disabled-on-background: #{map-get(
$theme,
text-disabled-on-background
)};
--mdc-theme-text-icon-on-background: #{map-get(
$theme,
text-icon-on-background
)};
--mdc-theme-text-primary-on-light: #{map-get($theme, text-primary-on-light)};
--mdc-theme-text-secondary-on-light: #{map-get(
$theme,
text-secondary-on-light
)};
--mdc-theme-text-hint-on-light: #{map-get($theme, text-hint-on-light)};
--mdc-theme-text-disabled-on-light: #{map-get($theme, text-disabled-on-light)};
--mdc-theme-text-icon-on-light: #{map-get($theme, text-icon-on-light)};
--mdc-theme-text-primary-on-dark: #{map-get($theme, text-primary-on-dark)};
--mdc-theme-text-secondary-on-dark: #{map-get($theme, text-secondary-on-dark)};
--mdc-theme-text-hint-on-dark: #{map-get($theme, text-hint-on-dark)};
--mdc-theme-text-disabled-on-dark: #{map-get($theme, text-disabled-on-dark)};
--mdc-theme-text-icon-on-dark: #{map-get($theme, text-icon-on-dark)};
// Icons
--mdc-icon-font: 'Material Symbols Outlined';

// Ripple
--mdc-ripple-color: #{map-get($theme, on-surface)};

// Shape
--mdc-shape-small: 8px;
--mdc-shape-medium: 8px;

// Tooltip
--mdc-plain-tooltip-container-color: #{map-get($theme, inverse-surface)};
--mdc-plain-tooltip-supporting-text-color: #{map-get(
$theme,
inverse-on-surface
)};
}

0 comments on commit 69facc1

Please sign in to comment.