@tylertech/forge 3.0.0-next.23 → 3.0.0-next.24

package/styles/theme/_theme-values.scss

@@ -1,246 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use '@material/theme/color-palette' as mdc-color-palette;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use './keys';
-
-/// MDC theme variable overrides
-$primary: mdc-color-palette.$indigo-500 !default;
-$on-primary: #ffffff !default;
-$secondary: mdc-color-palette.$amber-500 !default;
-$on-secondary: #000000 !default;
-$accent: $secondary !default;
-$on-accent: $on-secondary !default;
-$background: mdc-color-palette.$grey-50 !default;
-$surface: #ffffff !default;
-$on-surface: #000000 !default;
-$error: #b00020 !default;
-$on-error: #ffffff !default;
-$text-disabled-on-background: rgba(0, 0, 0, 0.12) !default;
-
-// Tyler theme variables
-$success: #2e7d32 !default;
-$success-muted: #a5d6a7 !default;
-$success-text-muted: #1b5e20 !default;
-$warning: #d14900 !default;
-$warning-muted: #ffdba6 !default;
-$warning-text-muted: #a03a03 !default;
-$danger: $error !default;
-$danger-hover: #db8a98; //350 37 86
-$danger-muted: #ffcdd2 !default;
-$danger-text-muted: #a22d0e !default;
-$info-primary: #1a237e !default;
-$info-primary-muted: #bbdefb !default;
-$info-primary-text-muted: #1a237e !default;
-$info-secondary: #000000 !default;
-$info-secondary-muted: #e0e0e0 !default;
-$info-secondary-text-muted: #000000 !default;
-$info: mdc-color-palette.$grey-800 !default;
-$label-color: mdc-color-palette.$grey-700 !default;
-$icon-color: mdc-color-palette.$grey-600 !default;
-$disabled-color: mdc-color-palette.$grey-500 !default;
-$border-color: mdc-color-palette.$grey-300 !default;
-$disabled-background: #f0f0f0 !default;
-$border: 1px solid $border-color !default;
-$text-primary-color: rgba(0, 0, 0, 0.87) !default;
-$text-secondary-color: rgba(0, 0, 0, 0.54) !default;
-$tertiary: mdc-color-palette.$indigo-a400 !default;
-$on-tertiary: #ffffff !default;
-$danger: $theme-danger !default;
-$warning: $theme-warning !default;
-$success: $theme-success !default;
-$info: $theme-info !default;
-$form-field-icon-disabled-on-background: rgba(0, 0, 0, 0.26) !default;
-$form-field-text-disabled-on-background: rgba(0, 0, 0, 0.6) !default;
-$form-field-disabled-on-background: mdc-color-palette.$grey-100 !default;
-$form-field-label-on-background: rgba(0, 0, 0, 0.65) !default;
-$label-disabled-on-background: rgba(0, 0, 0, 0.38) !default;
-$elevated-surface: $surface !default;
-$on-elevated-surface: rgba(0, 0, 0, 0.87) !default;
-$popup-elevation: mdc-elevation-theme.elevation-box-shadow(2) !default;
-$scrollbar-width: 16px !default;
-$scrollbar-height: 16px !default;
-$scrollbar-thumb-min-height: 32px !default;
-$scrollbar-thumb-min-width: 32px !default;
-$scrollbar-thumb: mdc-color-palette.$grey-400 !default;
-$scrollbar-thumb-hover: mdc-color-palette.$grey-500 !default;
-$scrollbar-track: #f0f0f0 !default;
-$scrollbar-track-hover: #ececec !default;
-
-$z-index-surface: 1 !default;
-$z-index-header: 4 !default;
-$z-index-backdrop: 7 !default;
-$z-index-dialog: 8 !default;
-$z-index-notification: 9 !default;
-$z-index-popup: 10 !default;
-$z-index-overlay: 10 !default;
-$z-index-tooltip: 11 !default;
-
-$z-index-values: (
-  surface: $z-index-surface,
-  header: $z-index-header,
-  backdrop: $z-index-backdrop,
-  dialog: $z-index-dialog,
-  notification: $z-index-notification,
-  popup: $z-index-popup,
-  overlay: $z-index-overlay,
-  tooltip: $z-index-tooltip
-) !default;
-
-/// Colors to display in light and dark contrast contexts
-$text-colors: (
-  dark: (
-    primary: rgba(0, 0, 0, 0.87),
-    secondary: rgba(0, 0, 0, 0.54),
-    hint: rgba(0, 0, 0, 0.38),
-    disabled: rgba(0, 0, 0, 0.38),
-    disabled-secondary: rgba(0, 0, 0, 0.12),
-    icon: rgba(0, 0, 0, 0.38)
-  ),
-  light: (
-    primary: rgba(255, 255, 255, 0.87),
-    secondary: rgba(255, 255, 255, 0.7),
-    secondary-alternative: rgba(255, 255, 255, 0.54),
-    hint: rgba(255, 255, 255, 0.5),
-    disabled: rgba(255, 255, 255, 0.5),
-    disabled-secondary: rgba(255, 255, 255, 0.12),
-    icon: rgba(255, 255, 255, 0.5)
-  ),
-) !default;
-
-/// A map of text emphasis opacities by name
-$text-emphasis: (
-  high: 0.87,
-  medium: 0.6,
-  disabled: 0.38,
-) !default;
-
-/// A map of background colors and their contrast color to use on that background
-$background-colors: (
-  primary: $primary,
-  danger: $danger,
-  warning: $warning,
-  success: $success,
-  info-primary: $info-primary,
-  info-secondary: $info-secondary,
-  contrast: (
-    primary: #ffffff,
-    danger: #ffffff,
-    warning: #ffffff,
-    success: #ffffff,
-    info-primary: #ffffff,
-    info-secondary: #ffffff
-  )
-);
-
-/// Returns the original property values map
-@function original-property-values() {
-  @return map.merge((), $_property-values-copy);
-}
-
-/// Calculare color contrast on specific fill colors
-@function color-on-background($text-style, $fill-color) {
-  $contrast-tone: mdc-theme-color.contrast-tone($fill-color);
-  @return map.get(map.get($text-colors, $contrast-tone), $text-style);
-}
-
-/// A map of theme/custom property names and corresponding values
-$property-values: (
-  tertiary: $tertiary,
-  on-tertiary: $on-tertiary,
-  border-color: $border-color,
-  danger: $danger,
-  error-hover: $danger-hover,
-  warning: $warning,
-  success: $success,
-  info: $info,
-  icon-color: $icon-color,
-  form-field-label-on-background: $form-field-label-on-background,
-  form-field-icon-disabled-on-background: $form-field-icon-disabled-on-background,
-  form-field-text-disabled-on-background: $form-field-text-disabled-on-background,
-  form-field-disabled-on-background: $form-field-disabled-on-background,
-  label-disabled-on-background: $label-disabled-on-background,
-  elevated-surface: $elevated-surface,
-  on-elevated-surface: $on-elevated-surface,
-  popup-elevation: $popup-elevation,
-  scrollbar-thumb: $scrollbar-thumb,
-  scrollbar-thumb-hover: $scrollbar-thumb-hover,
-  scrollbar-track: $scrollbar-track,
-  scrollbar-track-hover: $scrollbar-track-hover
-) !default;
-
-// Add our theme property values to the theme key store
-@include keys.set-values($property-values, $options: (custom-property-prefix: theme));
-
-/// Keep track of the original values for comparison in case they are customized later
-$_property-values-copy: $property-values;
-
-/// MDC theme property map
-$mdc-property-values: (
-  primary: $primary,
-  secondary: $secondary,
-  background: $background,
-  error: $error,
-  on-primary: $on-primary,
-  on-secondary: $on-secondary,
-  surface: $surface,
-  on-surface: $on-surface,
-  on-error: $on-error,
-  text-primary-on-background: color-on-background(primary, $background),
-  text-secondary-on-background: color-on-background(secondary, $background),
-  text-hint-on-background: color-on-background(hint, $background),
-  text-disabled-on-background: color-on-background(disabled-secondary, $background),
-  text-icon-on-background: color-on-background(icon, $background),
-  text-primary-on-light: color-on-background(primary, light),
-  text-secondary-on-light: color-on-background(secondary, light),
-  text-hint-on-light: color-on-background(hint, light),
-  text-disabled-on-light: color-on-background(disabled, light),
-  text-icon-on-light: color-on-background(icon, light),
-  text-primary-on-dark: color-on-background(primary, dark),
-  text-secondary-on-dark: color-on-background(secondary, dark),
-  text-hint-on-dark: color-on-background(hint, dark),
-  text-disabled-on-dark: color-on-background(disabled, dark),
-  text-icon-on-dark: color-on-background(icon, dark)
-) !default;
-
-$property-values-dark: (
-  // Core theme variables from MDC
-  primary: #{mdc-color-palette.$indigo-a100},
-  secondary: #{mdc-color-palette.$amber-200},
-  background: #{mdc-color-palette.$grey-900},
-  surface: #2c2c2c,
-  error: #cf6679,
-  on-primary: #000000,
-  on-secondary: #000000,
-  on-surface: #ffffff,
-  on-error: #000000,
-  text-primary-on-dark: #000000,
-  text-primary-on-background: rgba(255, 255, 255, 0.87),
-  text-secondary-on-background: rgba(255, 255, 255, 0.54),
-  text-hint-on-background: rgba(255, 255, 255, 0.38),
-  text-icon-on-background: rgba(255, 255, 255, 0.38),
-  text-disabled-on-background: rgba(255, 255, 255, 0.12),
-  text-disabled-on-light: rgba(255, 255, 255, 0.38),
-  text-secondary-on-light: rgba(255, 255, 255, 0.54),
-
-  // forge-specific theme properties
-  tertiary: #{mdc-color-palette.$amber-200},
-  border-color: #464646,
-  form-field-icon-disabled-on-background: rgba(255, 255, 255, 0.26),
-  form-field-disabled-on-background: #353535,
-  form-field-text-disabled-on-background: rgba(255, 255, 255, 0.6),
-  form-field-label-on-background: rgba(255, 255, 255, 0.65),
-  label-disabled-on-background: rgba(255, 255, 255, 0.38),
-  scrollbar-thumb: #{mdc-color-palette.$grey-600},
-  scrollbar-thumb-hover: #{mdc-color-palette.$grey-500},
-  scrollbar-track: #3a3a3a,
-  scrollbar-track-hover: #{mdc-color-palette.$grey-800},
-  elevated-surface: #363636,
-  on-elevated-surface: rgba(255, 255, 255, 0.87),
-  popup-elevation: #{mdc-elevation-theme.elevation-box-shadow(16)}
-) !default;

package/styles/theme/_theme.scss

@@ -1,279 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use 'sass:list';
-@use '@material/theme/css';
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/replace';
-@use '@material/elevation/elevation-theme' as elevation-theme;
-@use './custom-properties';
-@use './keys';
-@use './theme-values';
-@use './theme-utils';
-@use '../core/styles/scrollbar';
-
-@function text-emphasis($emphasis) {
-  @return map.get(theme-values.$text-emphasis, $emphasis);
-}
-
-@function is-theme-key($style) {
-  @return map.has-key(theme-values.$property-values, $style);
-}
-
-/// Applies a dynamic value to the specified property. This mixin should be used
-/// in theme style mixins when setting properties.
-@mixin _property($property, $value, $gss: (), $replace: null, $important: false) {
-  @if custom-properties.is-custom-prop($value) {
-    // $value is a custom property Map
-    @include custom-properties.declaration($property, $value, $gss: $gss, $important: $important);
-  } @else if keys.is-key($value) {
-    // $value is a key String
-    $custom-prop: keys.create-custom-property($value);
-
-    @if is-theme-key($value) {
-      // Determine if we need to use a compile-time updated value to support
-      // Angular.
-      $key: $value;
-      // (changed: Bool, value: *)
-      $result: deprecated-get-global-theme-key-value-if-changed($key);
-
-      @if map.get($result, changed) {
-        // $property-values was changed at compile time. Use the
-        // global value instead. Otherwise if it was not changed, continue
-        // using the key store normally.
-        $custom-prop: keys.create-custom-property($key);
-        $custom-prop: custom-properties.set-fallback($custom-prop, map.get($result, value));
-      }
-    }
-
-    @include custom-properties.declaration($property, $custom-prop, $gss: $gss, $important: $important);
-  } @else {
-    // $value is a standard CSS value
-    $fallback: null;
-    @if $replace {
-      // If any replacements are null, treat the entire value as null (do not
-      // emit anything).
-      @each $name, $replacement in $replace {
-        @if $replacement == null {
-          $value: null;
-        }
-      }
-    }
-
-    @if $replace and $value {
-      @if meta.type-of($replace) != 'map' {
-        @error 'forge-theme: Invalid replacement #{$replace}. Must be a Map.';
-      }
-
-      $replace-map-fallback: ();
-      $replace-map-value: ();
-      $needs-fallback: false;
-
-      @each $name, $replacement in $replace {
-        @if custom-properties.is-custom-prop($replacement) {
-          $replace-value: custom-properties.get-declaration-value($replacement);
-          $replace-fallback: custom-properties.get-declaration-fallback($replacement);
-
-          @if $replace-fallback {
-            $needs-fallback: true;
-          }
-
-          $replace-map-value: map.set($replace-map-value, $name, $replace-value);
-          $replace-map-fallback: map.set($replace-map-fallback, $name, $replace-fallback);
-        } @else {
-          $replace-map-value: map.set($replace-map-value, $name, $replacement);
-          $replace-map-fallback: map.set($replace-map-fallback, $name, $replacement);
-        }
-      }
-
-      @if meta.type-of($value) == 'string' {
-        @if $needs-fallback {
-          $fallback: replace.replace-string($value, $replace-map-fallback);
-        }
-        $value: replace.replace-string($value, $replace-map-value);
-      } @else if meta.type-of($value) == 'list' {
-        @if $needs-fallback {
-          $fallback: replace.replace-list($value, $replace-map-fallback);
-        }
-        $value: replace.replace-list($value, $replace-map-value);
-      } @else {
-        @error 'forge-theme: Invalid replacement value #{$value}. $replace may only be used with string or list values.';
-      }
-    }
-
-    @include css.declaration($property, $value, $fallback-value: $fallback, $gss: $gss, $important: $important);
-  }
-}
-
-/// Checks if the global $forge-theme-property-values was dynamically changed at
-/// compile time. Typically, $property-values is configured once, but a Sass
-/// hack allows the variable to be changed multiple times and effectively
-/// support dynamic values.
-@function deprecated-get-global-theme-key-value-if-changed($key) {
-  $current-global-value: map.get(theme-values.$property-values, $key);
-  $original-property-values: theme-values.original-property-values();
-  $configured-global-value: map.get($original-property-values, $key);
-  @if $current-global-value != $configured-global-value {
-    @return (value: $current-global-value, changed: true);
-  }
-  @return (changed: false);
-}
-
-/// Consolidates the MDC and Forge theming systems by conditionally checking for existing theme keys
-/// and fetching the value from either system based on existence.
-@mixin property($property, $value, $gss: (), $replace: null, $important: false) {
-  @if map.has-key(theme-values.$property-values, $value) {
-    @include _property($property, $value);
-  } @else {
-    @include mdc-theme.property($property, $value);
-  }
-}
-
-/// Creates a z-index style from a prefined z-index map using a CSS custom property (with a fallback value);
-@mixin z-index($type, $customPropName: null, $prefix: forge) {
-  @if not map.has-key(theme-values.$z-index-values, $type) {
-    @error "Invalid type: '#{$type}'. Choose one of: #{map.keys($z-index-values)}";
-  }
-
-  $value: map.get(theme-values.$z-index-values, $type);
-
-  @if $customPropName == null {
-    $customPropName: --#{$prefix}-z-index-#{$type};
-  }
-
-  @include css-custom-property(z-index, $customPropName, $value);
-}
-
-/// Allow for setting a custom css property with a fallback property value
-@mixin css-custom-property($property, $varname, $fallback-value: null, $important: false) {
-  @include custom-properties.declaration($property, (
-    varname: $varname,
-    fallback: $fallback-value
-  ), $important: $important);
-}
-
-@mixin scrollbar {
-  @include scrollbar.base;
-}
-
-@function elevation($z-value, $color: elevation-theme.$baseline-color, $opacity-boost: 0) {
-  @if type-of($z-value) != number or not unitless($z-value) {
-    @error '$z-value must be a unitless number, but received "#{$z-value}"';
-  }
-
-  @if $z-value < 0 or $z-value > 24 {
-    @error '$z-value must be between 0 and 24, but received "#{$z-value}"';
-  }
-
-  $color: mdc-theme-color.prop-value($color);
-
-  $umbra-z-value: map.get(elevation-theme.$umbra-map, $z-value);
-  $penumbra-z-value: map.get(elevation-theme.$penumbra-map, $z-value);
-  $ambient-z-value: map.get(elevation-theme.$ambient-map, $z-value);
-
-  $umbra-color: rgba($color, elevation-theme.$umbra-opacity + $opacity-boost);
-  $penumbra-color: rgba($color, elevation-theme.$penumbra-opacity + $opacity-boost);
-  $ambient-color: rgba($color, elevation-theme.$ambient-opacity + $opacity-boost);
-
-  @return #{$umbra-z-value} #{$umbra-color}, #{$penumbra-z-value} #{$penumbra-color}, #{$ambient-z-value} #{$ambient-color};
-}
-
-@mixin shadow($z-value, $color: elevation-theme.$baseline-color, $opacity-boost: 0) {
-  box-shadow: elevation($z-value, $color, $opacity-boost);
-}
-
-
-/// Validates keys in provided theme configuration by comparing with original
-/// theme configuration.
-/// Use this in component's `theme()` mixin implementation to validate if
-/// provided theme configuration has supported theme configuration keys.
-/// @param {Map} $origin-theme - Original theme configuration in Sass map format
-///     that has all supported keys.
-/// @param {Map} $custom-theme - Provided theme configuration in Sass map format
-///     that should be validated against `$origin-theme`.
-/// @examples
-///     @mixin theme($theme) {
-///       @include theme.validate-theme($light-theme, $theme);
-///
-///       // ...
-///     }
-@mixin validate-theme($origin-theme, $custom-theme, $test-only: false) {
-  $origin-keys: map.keys($origin-theme);
-  $unsupported-keys: ();
-  $unsupported-custom-prop-keys: ();
-
-  @each $key, $value in $custom-theme {
-    @if (not list.index($origin-keys, $key)) {
-      $unsupported-keys: list.append(
-        $unsupported-keys,
-        $key,
-        $separator: comma
-      );
-    }
-
-    $is-prop: custom-properties.is-custom-prop($value) or
-      custom-properties.is-custom-prop-string($value);
-    @if $is-prop {
-      $unsupported-custom-prop-keys: list.append(
-        $unsupported-custom-prop-keys,
-        $key,
-        $separator: comma
-      );
-    }
-  }
-
-  @if list.length($unsupported-keys) > 0 {
-    $error-message: 'Unsupported keys found: #{$unsupported-keys}. Expected one of: #{$origin-keys}.';
-
-    @if $test-only {
-      content: $error-message;
-    } @else {
-      @error $error-message;
-    }
-  }
-
-  @if list.length($unsupported-custom-prop-keys) > 0 {
-    $error-message: 'Custom properties are not supported for theme map keys: #{$unsupported-custom-prop-keys}';
-
-    @if $test-only {
-      content: $error-message;
-    } @else {
-      @error $error-message;
-    }
-  }
-}
-
-/// Generates CSS custom property definitions based on theme value overrides provided.
-/// @param {Map} $theme - Theme configuration in Sass map format that has all supported keys.
-/// @examples
-///     :root {
-///       @include theme.provide-theme((
-///         primary: #ff0000,
-///         secondary: #00ff00
-///       ));
-///     }
-@mixin provide-theme($theme, $auto: false, $prefix: forge) {
-  @each $style, $value in $theme {
-    @if map.has-key(theme-values.$mdc-property-values, $style) {
-      --mdc-theme-#{$style}: #{$value};
-    } @else if map.has-key(theme-values.$property-values, $style) {
-      --#{$prefix}-theme-#{$style}: #{$value};
-    } @else {
-      @error 'Invalid theme property provided: #{$style}';
-    }
-  }
-}
-
-@mixin theme-properties($component, $theme, $default-theme, $prefix: forge) {
-  @each $style, $value in $theme {
-    @if map.has-key($default-theme, $style) {
-      --#{$prefix}-#{$component}-theme-#{$style}: #{$value};
-    } @else {
-      @include provide-theme(($style: $value));
-    }
-  }
-}

package/styles/typography/_mixins.scss

@@ -1,73 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:list';
-@use 'sass:map';
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '../theme';
-@use './variables';
-@use '../theme/custom-properties';
-
-@mixin core-styles() {
-  :root {
-    // forge-specific MDC typography overrides
-    @each $style, $properties in variables.$mdc-typography-overrides {
-      @each $property in map.keys($properties) {
-        --mdc-typography-#{$style}-#{$property}: #{map.get($properties, $property)};
-      }
-    }
-  }
-}
-
-@mixin apply-additional-styles($styles, $style) {
-  @if map.has-key($styles, $style) {
-    $additional-styles: map.get($styles, $style);
-    @each $additional-style in map.keys($additional-styles) {
-      #{$additional-style}: #{map.get($additional-styles, $additional-style)};
-    }
-  }
-}
-
-/// Generates all styles for a specific typography style.
-@mixin typography($style, $query: mdc-feature-targeting.all(), $exclude-props: ()) {
-  // We first check if the style exists in the MDC typography styles map and pass to MDC if so,
-  // otherwise we handle it and assumed it's a Forge-specfic style
-  @if map.has-key(mdc-typography.$styles, $style) {
-    @include mdc-typography.typography($style);
-  } @else {
-    $feat-typography: mdc-feature-targeting.create-target($query, typography);
-    $style-props: map.get(variables.$styles, $style);
-  
-    @if not map.has-key(variables.$styles, $style) {
-      @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map-keys(variables.$styles)}";
-    }
-  
-    @include mdc-typography.smooth-font($query: $query);
-    @include mdc-feature-targeting.targets($feat-typography) {
-      @each $key, $value in $style-props {
-        @if list.index($exclude-props, $key) == null {
-          $fallback: $value;
-          @if $key == 'font-family' {
-            // Each style has its own font-family custom property, but should
-            // fallback to a generic font-family property. This allows
-            // customizing the font-family for all styles or only specific ones.
-            $fallback: (
-              varname: --forge-typography-font-family,
-              fallback: $fallback
-            );
-          }
-  
-          @include theme.property($key, (
-            varname: --forge-typography-#{$style}-#{$key},
-            fallback: $fallback
-          ));
-        }
-      }
-    }
-  }
-}

package/styles/typography/_variables.scss

@@ -1,100 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use '@material/typography/typography';
-
-$styles: (
-  headline5-secondary: (
-    font-size: typography.px-to-rem(20px),
-    line-height: typography.px-to-rem(32px),
-    font-weight: map.get(typography.$font-weight-values, regular),
-    letter-spacing: typography.get-letter-spacing_(0.25, 1.25),
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  title: (
-    font-size: typography.px-to-rem(20px),
-    line-height: typography.px-to-rem(32px),
-    font-weight: map.get(typography.$font-weight-values, regular),
-    letter-spacing: typography.get-letter-spacing_(0.25, 1.25),
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  subtitle1-secondary: (
-    font-size: typography.px-to-rem(16px),
-    line-height: typography.px-to-rem(28px),
-    font-weight: map.get(typography.$font-weight-values, medium),
-    letter-spacing: typography.get-letter-spacing_(0.15, 0.9375),
-    text-decoration: inherit,
-    text-transform: inherit
-  ),
-  subtitle2-secondary: (
-    font-size: typography.px-to-rem(14px),
-    line-height: typography.px-to-rem(22px),
-    font-weight: map.get(typography.$font-weight-values, regular),
-    letter-spacing: typography.get-letter-spacing_(0.1, 0.71428571),
-    text-decoration: inherit,
-    text-transform: inherit,
-    color: var(--mdc-theme-text-secondary-on-background)
-  )
-) !default;
-
-$mdc-typography-overrides: (
-  headline1: (
-    font-size: typography.px-to-rem(48px),
-    line-height: typography.px-to-rem(48px),
-    letter-spacing: typography.get-letter-spacing_(-1.5, 3)
-  ),
-  headline2: (
-    font-size: typography.px-to-rem(48px),
-    line-height: typography.px-to-rem(48px),
-    font-weight: map.get(typography.$font-weight-values, regular),
-    letter-spacing: typography.get-letter-spacing_(-1.5, 3)
-  ),
-  headline3: (
-    font-size: typography.px-to-rem(34px),
-    line-height: typography.px-to-rem(34px),
-    letter-spacing: typography.get-letter-spacing_(-1.5, 2.125)
-  ),
-  headline4: (
-    font-size: typography.px-to-rem(24px),
-    line-height: typography.px-to-rem(24px),
-    letter-spacing: typography.get-letter-spacing_(0.25, 1.5)
-  ),
-  headline5: (
-    font-size: typography.px-to-rem(20px),
-    line-height: typography.px-to-rem(32px),
-    font-weight: map.get(typography.$font-weight-values, medium),
-    letter-spacing: typography.get-letter-spacing_(0.25, 2)
-  ),
-  headline6: (
-    font-size: typography.px-to-rem(16px),
-    line-height: normal,
-    font-weight: 400,
-    letter-spacing: normal
-  ),
-  subtitle1: (
-    letter-spacing: typography.get-letter-spacing_(0.15, 0.9375)
-  ),
-  subtitle2: (
-    letter-spacing: typography.get-letter-spacing_(0.1, 0.71428571)
-  ),
-  overline: (
-    text-transform: none
-  ),
-  button: (
-    text-transform: none
-  )
-) !default;
-
-$mdc-typography-additional-styles: (
-  subtitle1: (
-    color: var(--mdc-theme-text-secondary-on-background)
-  ),
-  subtitle2: (
-    color: var(--mdc-theme-text-secondary-on-background)
-  )
-) !default;