npm - @inchurch/matcha-theme - Versions diffs - 20.0.11 → 20.277.0 - Mend

@inchurch/matcha-theme 20.0.11 → 20.277.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/abstracts/_colors.scss +404 -404
package/abstracts/_elevation.scss +102 -102
package/abstracts/_functions.scss +1186 -1212
package/abstracts/_media-breakpoint.scss +23 -23
package/abstracts/_theme-api.scss +230 -0
package/abstracts/_typography.scss +127 -127
package/base/_reset.scss +438 -438
package/components/app-page-header.scss +259 -0
package/components/matcha-accordion.scss +293 -157
package/components/matcha-audio-player.scss +1 -2
package/components/matcha-autocomplete.scss +10 -11
package/components/matcha-avatar.scss +173 -33
package/components/matcha-badge.scss +15 -15
package/components/matcha-breadcrumb.scss +231 -126
package/components/matcha-button-toggle.scss +46 -2
package/components/matcha-buttons.scss +908 -784
package/components/matcha-calendar.scss +99 -35
package/components/matcha-cards.scss +58 -33
package/components/matcha-chart-card.scss +5 -12
package/components/matcha-checkbox.scss +191 -490
package/components/matcha-chip.scss +297 -212
package/components/matcha-color-pick.scss +1 -2
package/components/matcha-command-palette.scss +290 -63
package/components/matcha-crop.scss +406 -172
package/components/matcha-date.scss +81 -81
package/components/matcha-divider.scss +86 -31
package/components/matcha-draggable.scss +4 -5
package/components/matcha-drawer.scss +207 -66
package/components/matcha-drop-image.scss +14 -0
package/components/matcha-drop-list.scss +87 -47
package/components/matcha-emoji.scss +2 -2
package/components/matcha-empty-state.scss +195 -83
package/components/matcha-file-uploader.scss +462 -0
package/components/matcha-flag.scss +93 -52
package/components/matcha-footer.scss +67 -164
package/components/matcha-form-field.scss +55 -3
package/components/matcha-form-section.scss +100 -101
package/components/matcha-header.scss +134 -325
package/components/matcha-highlight.scss +65 -197
package/components/matcha-hint-text.scss +25 -4
package/components/matcha-horizontal-tree.scss +316 -317
package/components/matcha-icon.scss +37 -45
package/components/matcha-image.scss +2 -3
package/components/matcha-list.scss +14 -15
package/components/matcha-menu.scss +15 -2
package/components/matcha-modal.scss +59 -86
package/components/matcha-nav.scss +362 -231
package/components/matcha-notification.scss +412 -197
package/components/matcha-option.scss +98 -23
package/components/matcha-page-builder.scss +16 -16
package/components/matcha-paginator.scss +688 -235
package/components/matcha-panel.scss +42 -27
package/components/matcha-profile-card.scss +50 -50
package/components/matcha-progress-bar.scss +257 -153
package/components/matcha-radio.scss +244 -452
package/components/matcha-scrollbar.scss +1 -2
package/components/matcha-scrollbox-shadow.scss +120 -122
package/components/matcha-section.scss +5 -9
package/components/matcha-select-multiple.scss +56 -0
package/components/matcha-select.scss +10 -10
package/components/matcha-skeleton.scss +24 -7
package/components/matcha-slide-toggle.scss +80 -301
package/components/matcha-slider.scss +174 -77
package/components/matcha-snack-bar.scss +123 -131
package/components/matcha-spin.scss +12 -103
package/components/matcha-spinner.scss +76 -57
package/components/matcha-status-pill.scss +82 -0
package/components/matcha-stepper.scss +376 -177
package/components/matcha-table.scss +568 -785
package/components/matcha-tabs.scss +622 -469
package/components/matcha-text-editor.scss +78 -78
package/components/matcha-time.scss +2 -2
package/components/matcha-toolbar.scss +359 -206
package/components/matcha-tooltip.scss +158 -62
package/components/matcha-tree-view.scss +189 -0
package/fonts/manrope/manrope-latin-ext.woff2 +0 -0
package/fonts/manrope/manrope-latin.woff2 +0 -0
package/layout/matcha-page-layout.scss +4 -4
package/main.scss +237 -265
package/package.json +1 -1
package/tokens/_animations-tokens.scss +37 -37
package/tokens/_breakpoints-tokens.scss +35 -26
package/tokens/_color-tokens.scss +1149 -1152
package/tokens/_css-custom-properties.scss +704 -568
package/tokens/_primitives.scss +82 -0
package/tokens/_semantic-aliases.scss +120 -0
package/tokens/_spacing-tokens.scss +94 -94
package/vendors/angular-editor.scss +56 -56
package/vendors/angular-material-fixes.scss +297 -297
package/vendors/charts.scss +92 -92
package/vendors/ng5-slider.scss +56 -56
package/vendors/ngx-material-timepicker.scss +50 -50
package/components/matcha-uploader.scss +0 -215
package/fonts/CircularStd-Black.eot +0 -0
package/fonts/CircularStd-Black.svg +0 -3426
package/fonts/CircularStd-Black.ttf +0 -0
package/fonts/CircularStd-Black.woff +0 -0
package/fonts/CircularStd-Black.woff2 +0 -0
package/fonts/CircularStd-Bold.eot +0 -0
package/fonts/CircularStd-Bold.otf +0 -0
package/fonts/CircularStd-Bold.svg +0 -13532
package/fonts/CircularStd-Bold.ttf +0 -0
package/fonts/CircularStd-Bold.woff +0 -0
package/fonts/CircularStd-Bold.woff2 +0 -0
package/fonts/CircularStd-Medium.eot +0 -0
package/fonts/CircularStd-Medium.otf +0 -0
package/fonts/CircularStd-Medium.svg +0 -13511
package/fonts/CircularStd-Medium.ttf +0 -0
package/fonts/CircularStd-Medium.woff +0 -0
package/fonts/CircularStd-Medium.woff2 +0 -0
package/fonts/CircularStd-Regular.eot +0 -0
package/fonts/CircularStd-Regular.otf +0 -0
package/fonts/CircularStd-Regular.svg +0 -2378
package/fonts/CircularStd-Regular.ttf +0 -0
package/fonts/CircularStd-Regular.woff +0 -0
package/fonts/CircularStd-Regular.woff2 +0 -0

package/abstracts/_media-breakpoint.scss CHANGED Viewed

@@ -1,23 +1,23 @@
-// -------------------------------------------------------------------------------------------------------------------
-// @ Theme mixins
-// --------------------------------------------------------------------------------------------------------------------
-/*
-    Esse mixin foi criado para não precisar escrever o valor em pixels de cada breakpoint toda vez que for necessário
-    criar um media query. Se em algum momento for necessário alterar o valor de um breakpoint, basta alterar o valor nos
-    tokens e o mixin irá se encarregar de atualizar todos os media queries que utilizam aquele breakpoint.
-    Exemplo de uso:
-*/
-@mixin media-breakpoint($breakpointName) {
-    $mediaQuery: map-get($breakpoints, $breakpointName);
-    @if ($mediaQuery == null) {
-        @content;
-    } @else {
-        @media #{$mediaQuery} {
-            @content;
-        }
-    }
-}
+// -------------------------------------------------------------------------------------------------------------------
+// @ Theme mixins
+// --------------------------------------------------------------------------------------------------------------------
+/*
+    Esse mixin foi criado para não precisar escrever o valor em pixels de cada breakpoint toda vez que for necessário
+    criar um media query. Se em algum momento for necessário alterar o valor de um breakpoint, basta alterar o valor nos
+    tokens e o mixin irá se encarregar de atualizar todos os media queries que utilizam aquele breakpoint.
+    Exemplo de uso:
+*/
+@mixin media-breakpoint($breakpointName) {
+    $mediaQuery: map-get($breakpoints, $breakpointName);
+    @if ($mediaQuery == null) {
+        @content;
+    } @else {
+        @media #{$mediaQuery} {
+            @content;
+        }
+    }
+}

package/abstracts/_theme-api.scss ADDED Viewed

@@ -0,0 +1,230 @@
+// =============================================================================
+// MATCHA THEME API — criação de temas por override de CSS custom properties
+// =============================================================================
+//
+// Um tema Matcha adicional é uma SKIN: uma classe que sobrescreve as CSS vars
+// de cor (--matcha-color-*) emitidas pelos temas default. Os component mixins
+// consomem cor exclusivamente via var(--matcha-*), então a skin re-tematiza a
+// lib inteira sem recompilar matcha-components() (~20k linhas de CSS por tema).
+//
+// CONTRATO DE RUNTIME (duas classes no <body>):
+//   <body class="theme-default-dark theme-nerd">
+//   1. `theme-default-light` OU `theme-default-dark` — a BASE, escolhida pelo
+//      `base` do config. Fornece tudo que ainda é decidido em compile-time
+//      pelos component mixins (blocos `@if $is-dark` estruturais, shadows
+//      default, classes utilitárias) — ver backlog `matcha-theme-003`.
+//   2. `theme-<nome>` — a skin gerada por `matcha-define-theme()`. Deve ser
+//      emitida DEPOIS dos temas default no CSS (ordem de fonte vence, mesma
+//      especificidade).
+//
+// USO:
+//   @use "@inchurch/matcha-theme/main.scss" as matcha;
+//   @include matcha.matcha-define-theme(meu-tema, (
+//     base: dark,
+//     colors: (
+//       // 9 seeds obrigatórios:
+//       surface-bg: #000, surface: #0a120a, text-primary: #33ff33,
+//       accent: #33ff33, primary: #00cc66, success: #33ff33,
+//       danger: #ff3333, warn: #ffcc00, info: #00ccff,
+//       // + qualquer token de $matcha-color-tokens como override fino:
+//       text-muted: #1faa1f,
+//     ),
+//     // opcionais:
+//     shadows: (1: 0 0 4px rgba(51, 255, 51, .4)),  // --matcha-shadow-<n>
+//     font-family: ("Fira Code", monospace),         // --matcha-font-family
+//     radius: (md: 0, lg: 0, pill: 0),               // --matcha-radius-<k>
+//   ));
+//
+// O QUE A SKIN NÃO COBRE (limitações conhecidas — docs/theme-stress-test.md):
+//   - blocos `@if $is-dark` estruturais (calendar, section, drawer, chart-card,
+//     skeleton, reset) seguem a base light/dark escolhida;
+//   - cores hardcoded em componentes (ex.: matcha-page-builder — backlog
+//     `matcha-page-builder-001`);
+//   - cores passadas por @Input/JS (charts) não leem CSS var automaticamente.
+//
+// =============================================================================
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+$-matcha-theme-bases: (light, dark);
+$-matcha-required-seeds: (surface-bg, surface, text-primary, accent, primary, success, danger, warn, info);
+// ── Helpers de contraste ────────────────────────────────────────────────────
+// Luminância perceptual aproximada (YIQ, 0–255).
+@function matcha-yiq($color) {
+  $r: color.channel($color, "red", $space: rgb);
+  $g: color.channel($color, "green", $space: rgb);
+  $b: color.channel($color, "blue", $space: rgb);
+  @return math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
+}
+// Foreground de texto opaco sobre $color (padrão dos tokens *-text-on).
+@function matcha-text-on($color) {
+  @return if(matcha-yiq($color) >= 150, #1a1d21, #ffffff);
+}
+// Foreground de contraste no padrão dos tokens *-contrast (preto .87 / branco).
+@function matcha-contrast-on($color) {
+  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .87), #ffffff);
+}
+@function matcha-contrast-alpha-on($color) {
+  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .1), rgba(255, 255, 255, .1));
+}
+// ── Derivação de família de papel (primary/accent/feedback) ────────────────
+// Gera <role>, <role>-hover/-pressed/-alpha/-contrast/-contrast-alpha/
+// -surface-hover/-surface-pressed a partir do seed. Direção do hover segue a
+// base: temas light escurecem no hover, temas dark clareiam (padrão DSV3).
+@function matcha-role-tokens($role, $seed, $surface-bg, $is-dark) {
+  @return (
+    #{$role}: $seed,
+    #{$role}-hover: color.scale($seed, $lightness: if($is-dark, 18%, -12%)),
+    #{$role}-pressed: color.scale($seed, $lightness: if($is-dark, 32%, -20%)),
+    #{$role}-alpha: rgba($seed, .1),
+    #{$role}-contrast: matcha-contrast-on($seed),
+    #{$role}-contrast-alpha: matcha-contrast-alpha-on($seed),
+    #{$role}-surface-hover: color.mix($seed, $surface-bg, 10%),
+    #{$role}-surface-pressed: color.mix($seed, $surface-bg, 22%),
+  );
+}
+// ── Construção do mapa completo de cores do tema ────────────────────────────
+// Parte dos defaults da base (light/dark), aplica as famílias derivadas dos
+// seeds e, por último, os overrides explícitos de `colors` — ou seja, QUALQUER
+// chave de $matcha-color-tokens pode ser cravada no config e vence a derivação.
+@function matcha-build-color-map($config) {
+  $base: map.get($config, base);
+  @if not list.index($-matcha-theme-bases, $base) {
+    @error "matcha-build-color-map: `base` deve ser `light` ou `dark` (recebido: #{meta.inspect($base)}).";
+  }
+  $seeds: map.get($config, colors);
+  @each $required in $-matcha-required-seeds {
+    @if not map.has-key($seeds or (), $required) {
+      @error "matcha-build-color-map: seed obrigatório ausente em `colors`: #{$required}. Obrigatórios: #{meta.inspect($-matcha-required-seeds)}.";
+    }
+  }
+  $is-dark: $base == dark;
+  $defaults: if($is-dark, $matcha-colors-dark, $matcha-colors-light);
+  $surface-bg: map.get($seeds, surface-bg);
+  $surface: map.get($seeds, surface);
+  $text: map.get($seeds, text-primary);
+  $accent: map.get($seeds, accent);
+  // Superfícies e estrutura
+  $derived: (
+    surface-bg: $surface-bg,
+    surface-bg-alpha: rgba($surface-bg, .5),
+    surface: $surface,
+    surface-card: $surface,
+    surface-card-strong: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
+    surface-inner: if($is-dark, color.scale($surface, $lightness: 8%), $surface-bg),
+    surface-card-alpha: rgba($surface, if($is-dark, .5, .85)),
+    surface-sidebar: color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)),
+    surface-sidebar-hover: color.scale($surface-bg, $lightness: if($is-dark, -12%, -9%)),
+    surface-table-row-hover: color.mix($text, $surface, 4%),
+    surface-border: color.mix($text, $surface-bg, 10%),
+    surface-border-strong: color.mix($text, $surface-bg, 22%),
+    surface-hover: rgba(color.scale($surface-bg, $lightness: if($is-dark, -25%, -4%)), .5),
+    bg: $surface-bg,
+    // Texto e ícones
+    fg: $text,
+    fg-alpha: rgba($text, .5),
+    text-primary: $text,
+    text-secondary: color.mix($text, $surface-bg, 78%),
+    text-muted: color.mix($text, $surface-bg, 62%),
+    text-label: color.mix($text, $surface-bg, 55%),
+    text-placeholder: color.mix($text, $surface-bg, 55%),
+    text-hint: color.mix($text, $surface-bg, 55%),
+    icon-default: color.mix($text, $surface-bg, 65%),
+    icon-active: color.mix($text, $surface-bg, 88%),
+    // Neutral + interaction
+    neutral: color.mix($text, $surface-bg, if($is-dark, 12%, 8%)),
+    neutral-contrast: matcha-text-on(color.mix($text, $surface-bg, if($is-dark, 12%, 8%))),
+    neutral-alpha: rgba($text, .08),
+    neutral-hover: color.mix($text, $surface-bg, if($is-dark, 18%, 14%)),
+    interaction-disabled-bg: color.mix($text, $surface-bg, 14%),
+    interaction-disabled-bg-alpha: rgba(color.mix($text, $surface-bg, 14%), .5),
+    interaction-disabled-fg: color.mix($text, $surface-bg, 45%),
+    interaction-disabled-border: color.mix($text, $surface-bg, 18%),
+    disabled: color.mix($text, $surface-bg, 14%),
+    disabled-bg: color.mix($text, $surface-bg, 14%),
+    disabled-fg: color.mix($text, $surface-bg, 45%),
+    disabled-border: color.mix($text, $surface-bg, 18%),
+    focus-ring: $accent,
+    // Elevação (cores; shadows são tokens --matcha-shadow-* à parte)
+    elevation-surface-1: $surface,
+    elevation-surface-2: color.scale($surface, $lightness: if($is-dark, 8%, 50%)),
+    elevation-surface-3: color.scale($surface, $lightness: if($is-dark, 14%, 50%)),
+    state-layer-fg: if($is-dark, #ffffff, #000000),
+  );
+  // Papéis semânticos derivados dos seeds
+  @each $role in (accent, primary, success, danger, warn, info) {
+    $derived: map.merge($derived, matcha-role-tokens($role, map.get($seeds, $role), $surface-bg, $is-dark));
+  }
+  // Extras por papel (tokens que só algumas famílias têm)
+  $primary: map.get($seeds, primary);
+  $derived: map.merge($derived, (
+    accent-text-on: matcha-text-on($accent),
+    accent-light: color.scale($accent, $lightness: 45%),
+    accent-dark: color.scale($accent, $lightness: -30%),
+    primary-light: color.scale($primary, $lightness: 45%),
+    primary-dark: color.scale($primary, $lightness: -35%),
+    success-fill: map.get($seeds, success),
+    danger-fill: map.get($seeds, danger),
+    warn-fill: map.get($seeds, warn),
+  ));
+  // accent-2 só deriva se o seed opcional vier (senão herda da base)
+  @if map.has-key($seeds, accent-2) {
+    $accent-2: map.get($seeds, accent-2);
+    $derived: map.merge($derived, (
+      accent-2: $accent-2,
+      accent-2-contrast: matcha-text-on($accent-2),
+      accent-2-alpha: rgba($accent-2, .1),
+      accent-2-surface: color.mix($accent-2, $surface-bg, 14%),
+    ));
+  }
+  // defaults da base < derivados < overrides explícitos do config
+  @return map.merge(map.merge($defaults, $derived), $seeds);
+}
+// ── API pública ─────────────────────────────────────────────────────────────
+// Emite a classe `.theme-<nome>` com o override completo das CSS vars de cor
+// (+ shadows/font-family/radius opcionais). Ver contrato de runtime no topo.
+@mixin matcha-define-theme($name, $config) {
+  .theme-#{$name} {
+    @include matcha-emit-color-properties(matcha-build-color-map($config));
+    $shadows: map.get($config, shadows);
+    @if $shadows {
+      @each $level, $value in $shadows {
+        --matcha-shadow-#{$level}: #{$value};
+      }
+    }
+    $font-family: map.get($config, font-family);
+    @if $font-family {
+      --matcha-font-family: #{$font-family};
+    }
+    $radius: map.get($config, radius);
+    @if $radius {
+      @each $key, $value in $radius {
+        --matcha-radius-#{$key}: #{$value};
+      }
+    }
+  }
+}

package/abstracts/_typography.scss CHANGED Viewed

@@ -1,127 +1,127 @@
-// -------------------------------------------------------------------------------------------------------------------
-// @ Typography mixins
-// -------------------------------------------------------------------------------------------------------------------
-// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
-// the individual properties if a value that isn't allowed in the shorthand is passed in.
-@mixin matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
-    // If any of the values are set to `inherit`, we can't use the shorthand
-    // so we fall back to passing in the individual properties.
-    @if (
-        $font-size
-            ==inherit or
-            $font-weight
-            ==inherit or
-            $line-height
-            ==inherit or
-            $font-family
-            ==inherit or
-            $font-size
-            ==null or
-            $font-weight
-            ==null or
-            $line-height
-            ==null or
-            $font-family
-            ==null
-    ) {
-        font-size: $font-size;
-        font-weight: $font-weight;
-        line-height: $line-height;
-        font-family: $font-family;
-    } @else {
-        // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
-        // that we need to use interpolation for `font-size/line-height` in order to prevent
-        // Sass from dividing the two values.
-        font: $font-weight #{$font-size}/#{$line-height} $font-family;
-    }
-}
-// Converts a typography level into CSS styles.
-@mixin matcha-typography-level-to-styles($config, $level) {
-    $font-size: matcha-font-size($config, $level);
-    $font-weight: matcha-font-weight($config, $level);
-    $line-height: matcha-line-height($config, $level);
-    $font-family: matcha-font-family($config, $level);
-    @include matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
-    letter-spacing: matcha-letter-spacing($config, $level);
-}
-// Represents a collection of typography levels.
-// Defaults come from https://material.io/guidelines/style/typography.html
-// Note: The spec doesn't mention letter spacing. The values here come from
-// eyeballing it until it looked exactly like the spec examples.
-// h1 40px headline - bold
-// h2 32px title - medium
-// h3 24px subheading - bold
-// h4 20px subheading - bold
-// h5-5 18px '' - bold
-// h6 18px '' - bold
-// h7 18px '' - bold
-// h8 12px '' - bold
-// m 16px body - regular
-// p 14px body - regular
-// small 12px caption - regular
-@mixin matcha-reset-typography($config) {
-    // Headings — aligned with Figma matcha/text/* styles
-    .h1,
-    h1 {
-        @include matcha-typography-level-to-styles($config, display);
-    }
-    .h2,
-    h2 {
-        @include matcha-typography-level-to-styles($config, headline);
-    }
-    .h3,
-    h3 {
-        @include matcha-typography-level-to-styles($config, title-lg);
-    }
-    .h4,
-    h4 {
-        @include matcha-typography-level-to-styles($config, title-md);
-    }
-    .h5,
-    h5 {
-        @include matcha-typography-level-to-styles($config, title-sm);
-    }
-    .h6,
-    h6 {
-        @include matcha-typography-level-to-styles($config, label-sm);
-    }
-    .text-bold,
-    strong,
-    b {
-        font-weight: matcha-font-weight($config, title-lg);
-    }
-    & {
-        font-family: matcha-font-family($config, body-md);
-    }
-    button {
-        font-family: matcha-font-family($config, button-md);
-        font-weight: matcha-font-weight($config, button-md);
-    }
-    input[type="text"],
-    input[type="email"],
-    input[type="tel"],
-    input[type="url"],
-    input[type="password"],
-    input[type="number"],
-    input[type="search"],
-    textarea {
-        font-family: matcha-font-family($config, body-md);
-        font-weight: matcha-font-weight($config, body-md);
-        font-size: px-to-rem(16px);
-    }
-}
+// -------------------------------------------------------------------------------------------------------------------
+// @ Typography mixins
+// -------------------------------------------------------------------------------------------------------------------
+// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
+// the individual properties if a value that isn't allowed in the shorthand is passed in.
+@mixin matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
+    // If any of the values are set to `inherit`, we can't use the shorthand
+    // so we fall back to passing in the individual properties.
+    @if (
+        $font-size
+            ==inherit or
+            $font-weight
+            ==inherit or
+            $line-height
+            ==inherit or
+            $font-family
+            ==inherit or
+            $font-size
+            ==null or
+            $font-weight
+            ==null or
+            $line-height
+            ==null or
+            $font-family
+            ==null
+    ) {
+        font-size: $font-size;
+        font-weight: $font-weight;
+        line-height: $line-height;
+        font-family: $font-family;
+    } @else {
+        // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
+        // that we need to use interpolation for `font-size/line-height` in order to prevent
+        // Sass from dividing the two values.
+        font: $font-weight #{$font-size}/#{$line-height} $font-family;
+    }
+}
+// Converts a typography level into CSS styles.
+@mixin matcha-typography-level-to-styles($config, $level) {
+    $font-size: matcha-font-size($config, $level);
+    $font-weight: matcha-font-weight($config, $level);
+    $line-height: matcha-line-height($config, $level);
+    $font-family: matcha-font-family($config, $level);
+    @include matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
+    letter-spacing: matcha-letter-spacing($config, $level);
+}
+// Represents a collection of typography levels.
+// Defaults come from https://material.io/guidelines/style/typography.html
+// Note: The spec doesn't mention letter spacing. The values here come from
+// eyeballing it until it looked exactly like the spec examples.
+// h1 40px headline - bold
+// h2 32px title - medium
+// h3 24px subheading - bold
+// h4 20px subheading - bold
+// h5-5 18px '' - bold
+// h6 18px '' - bold
+// h7 18px '' - bold
+// h8 12px '' - bold
+// m 16px body - regular
+// p 14px body - regular
+// small 12px caption - regular
+@mixin matcha-reset-typography($config) {
+    // Headings — aligned with Figma matcha/text/* styles
+    .h1,
+    h1 {
+        @include matcha-typography-level-to-styles($config, display);
+    }
+    .h2,
+    h2 {
+        @include matcha-typography-level-to-styles($config, headline);
+    }
+    .h3,
+    h3 {
+        @include matcha-typography-level-to-styles($config, title-lg);
+    }
+    .h4,
+    h4 {
+        @include matcha-typography-level-to-styles($config, title-md);
+    }
+    .h5,
+    h5 {
+        @include matcha-typography-level-to-styles($config, title-sm);
+    }
+    .h6,
+    h6 {
+        @include matcha-typography-level-to-styles($config, label-sm);
+    }
+    .text-bold,
+    strong,
+    b {
+        font-weight: matcha-font-weight($config, title-lg);
+    }
+    & {
+        font-family: matcha-font-family($config, body-md);
+    }
+    button {
+        font-family: matcha-font-family($config, button-md);
+        font-weight: matcha-font-weight($config, button-md);
+    }
+    input[type="text"],
+    input[type="email"],
+    input[type="tel"],
+    input[type="url"],
+    input[type="password"],
+    input[type="number"],
+    input[type="search"],
+    textarea {
+        font-family: matcha-font-family($config, body-md);
+        font-weight: matcha-font-weight($config, body-md);
+        font-size: px-to-rem(16px);
+    }
+}