@inchurch/matcha-core 21.3.2 → 21.3.3

package/core.scss

@@ -848,6 +848,64 @@ $font-weight-token-map: (
 }
 @include generate-line-height-classes($helper-breakpoints);
 
+// -----------------------------------------------------------------------------------------------------
+// @ Text Styles (composite — Figma matcha/text/*) → size + weight + line-height (+ letter-spacing/transform)
+//   Uma classe aplica o text style INTEIRO, token-backed. Nomes seguem --matcha-text-* (canônico DS).
+//   Não colide com os utilitários text-* single-prop (center/uppercase/truncate/...): sufixos distintos.
+//   Pareamento size/weight/leading/tracking espelha matcha-theme/tokens/_emit-tokens.scss:103-148
+//   (weight por estilo não é tokenizado → mapeia pro --matcha-weight-* correspondente).
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-style-classes($helper-breakpoints) {
+    // name: (size, weight, line-height, letter-spacing-or-null, text-transform-or-null)
+    $text-styles: (
+        display-hero: (var(--matcha-text-display-hero, 36px), var(--matcha-weight-extrabold, 800), var(--matcha-leading-display-hero, 40px), var(--matcha-tracking-display-hero, -1.2px), null),
+        display:      (var(--matcha-text-display, 32px),      var(--matcha-weight-bold, 700),      var(--matcha-leading-display, 40px),      var(--matcha-tracking-display, -0.3px), null),
+        headline:     (var(--matcha-text-headline, 24px),     var(--matcha-weight-bold, 700),      var(--matcha-leading-headline, 32px),     var(--matcha-tracking-headline, -0.3px), null),
+        title-lg:     (var(--matcha-text-title-lg, 20px),     var(--matcha-weight-semibold, 600),  var(--matcha-leading-title-lg, 28px),     null, null),
+        title-md:     (var(--matcha-text-title-md, 18px),     var(--matcha-weight-semibold, 600),  var(--matcha-leading-title-md, 24px),     null, null),
+        title-sm:     (var(--matcha-text-title-sm, 16px),     var(--matcha-weight-semibold, 600),  var(--matcha-leading-title-sm, 22px),     null, null),
+        title-xs:     (var(--matcha-text-title-xs, 14px),     var(--matcha-weight-extrabold, 800), var(--matcha-leading-title-xs, 20px),     null, null),
+        body-lg:      (var(--matcha-text-body-lg, 16px),      var(--matcha-weight-regular, 400),   var(--matcha-leading-body-lg, 24px),      null, null),
+        body-md:      (var(--matcha-text-body-md, 14px),      var(--matcha-weight-regular, 400),   var(--matcha-leading-body-md, 20px),      null, null),
+        body-sm:      (var(--matcha-text-body-sm, 12px),      var(--matcha-weight-regular, 400),   var(--matcha-leading-body-sm, 16px),      null, null),
+        p-tiny:       (var(--matcha-text-p-tiny, 11px),       var(--matcha-weight-regular, 400),   var(--matcha-leading-p-tiny, 14px),       var(--matcha-tracking-p-tiny, 0.3px), null),
+        label-lg:     (var(--matcha-text-label-lg, 16px),     var(--matcha-weight-medium, 500),    var(--matcha-leading-label-lg, 22px),     null, null),
+        label-md:     (var(--matcha-text-label-md, 14px),     var(--matcha-weight-medium, 500),    var(--matcha-leading-label-md, 20px),     null, null),
+        label-sm:     (var(--matcha-text-label-sm, 12px),     var(--matcha-weight-medium, 500),    var(--matcha-leading-label-sm, 16px),     null, null),
+        overline:     (var(--matcha-text-overline, 10px),     var(--matcha-weight-semibold, 600),  var(--matcha-leading-overline, 14px),     var(--matcha-tracking-overline, 1px), uppercase),
+    );
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @each $name, $props in $text-styles {
+                $size:      list.nth($props, 1);
+                $weight:    list.nth($props, 2);
+                $leading:   list.nth($props, 3);
+                $tracking:  list.nth($props, 4);
+                $transform: list.nth($props, 5);
+
+                .text#{$infix}-#{$name} {
+                    font-size: $size;
+                    font-weight: $weight;
+                    line-height: $leading;
+                    @if $tracking != null { letter-spacing: $tracking; }
+                    @if $transform != null { text-transform: $transform; }
+                }
+                .text#{$infix}-#{$name}--force {
+                    font-size: $size !important;
+                    font-weight: $weight !important;
+                    line-height: $leading !important;
+                    @if $tracking != null { letter-spacing: $tracking !important; }
+                    @if $transform != null { text-transform: $transform !important; }
+                }
+            }
+        }
+    }
+}
+@include generate-text-style-classes($helper-breakpoints);
+
 // -----------------------------------------------------------------------------------------------------
 // @ Aspect Ratio classes
 // -----------------------------------------------------------------------------------------------------
@@ -1270,6 +1328,50 @@ $font-weight-token-map: (
 }
 @include generate-border-size-classes($helper-breakpoints);
 
+// -----------------------------------------------------------------------------------------------------
+// @ Border Named Widths (token-backed — Figma matcha/border/{hairline,thin,medium,thick})
+//   Espelha o gerador numérico acima, mas nomeado e ligado ao token. Cor herda currentColor
+//   (cor de borda continua sendo token do tema — matcha-core não gera border-color).
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-border-named-classes($helper-breakpoints){
+    $border-named: (
+        hairline: var(--matcha-border-hairline, 1px),
+        thin:     var(--matcha-border-thin, 2px),
+        medium:   var(--matcha-border-medium, 4px),
+        thick:    var(--matcha-border-thick, 8px),
+    );
+    $border-directions: (bottom: bb, top: bt, left: bl, right: br);
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @each $name, $width in $border-named {
+                .border#{$infix}-#{$name},
+                .b#{$infix}-#{$name} {
+                    border: $width solid;
+                }
+                .border#{$infix}-#{$name}--force,
+                .b#{$infix}-#{$name}--force {
+                    border: $width solid !important;
+                }
+
+                @each $direction, $abbrev in $border-directions {
+                    .border-#{$direction}#{$infix}-#{$name},
+                    .#{$abbrev}#{$infix}-#{$name} {
+                        border-#{$direction}: $width solid;
+                    }
+                    .border-#{$direction}#{$infix}-#{$name}--force,
+                    .#{$abbrev}#{$infix}-#{$name}--force {
+                        border-#{$direction}: $width solid !important;
+                    }
+                }
+            }
+        }
+    }
+}
+@include generate-border-named-classes($helper-breakpoints);
+
 // -----------------------------------------------------------------------------------------------------
 // @ Border Style
 // -----------------------------------------------------------------------------------------------------
@@ -1389,6 +1491,39 @@ $font-weight-token-map: (
 }
 @include generate-radius-classes($helper-breakpoints);
 
+// -----------------------------------------------------------------------------------------------------
+// @ Shadow / Elevation (token-backed — Figma matcha/elevation/level-{1-4} → --matcha-shadow-*)
+//   Classe utilitária CANÔNICA de sombra. NÃO confundir com o legado .elevation-z-* (Material,
+//   deprecado, gerado no matcha-theme). Alternância light/dark vem do próprio token.
+//   Fallbacks (light) via unquote() — a sombra é multi-camada (vírgulas) e não pode entrar
+//   crua num mapa Sass. Mantidos fiéis a matcha-theme/tokens/_elevation-tokens.scss.
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-shadow-classes() {
+    $shadow-map: (
+        1: unquote("var(--matcha-shadow-1, 0 8px 24px -8px rgba(45, 122, 47, 0.04), 0 2px 8px -1px rgba(26, 44, 30, 0.08), 0 1px 2px rgba(26, 44, 30, 0.04))"),
+        2: unquote("var(--matcha-shadow-2, 0 12px 32px -10px rgba(45, 122, 47, 0.05), 0 4px 16px -2px rgba(26, 44, 30, 0.10), 0 2px 4px -1px rgba(26, 44, 30, 0.05))"),
+        3: unquote("var(--matcha-shadow-3, 0 16px 40px -12px rgba(45, 122, 47, 0.06), 0 12px 32px -4px rgba(26, 44, 30, 0.14), 0 4px 8px -2px rgba(26, 44, 30, 0.08))"),
+        4: unquote("var(--matcha-shadow-4, 0 24px 48px -16px rgba(45, 122, 47, 0.08), 0 24px 48px -8px rgba(26, 44, 30, 0.18), 0 8px 16px -4px rgba(26, 44, 30, 0.10))"),
+    );
+
+    @each $level, $value in $shadow-map {
+        .shadow-#{$level} {
+            box-shadow: $value;
+        }
+        .shadow-#{$level}--force {
+            box-shadow: $value !important;
+        }
+    }
+
+    .shadow-none {
+        box-shadow: none;
+    }
+    .shadow-none--force {
+        box-shadow: none !important;
+    }
+}
+@include generate-shadow-classes();
+
 // -----------------------------------------------------------------------------------------------------
 // @ Hover - Show/Hide
 // -----------------------------------------------------------------------------------------------------
@@ -1419,6 +1554,56 @@ $font-weight-token-map: (
 }
 @include generate-transition-classes();
 
+// -----------------------------------------------------------------------------------------------------
+// @ Motion — token-backed (Figma matcha/duration/*, matcha/easing/*)
+//   Complementa o legado .ts-* (100/300ms hardcoded, mantido). Estas ligam nos tokens do DS.
+//   .duration-* → transition-duration · .ease-* → transition-timing-function
+//   .transition-* → atalho composto (all + duração + easing standard)
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-motion-classes() {
+    $duration-map: (
+        instant: var(--matcha-duration-instant, 80ms),
+        fast:    var(--matcha-duration-fast, 200ms),
+        normal:  var(--matcha-duration-normal, 400ms),
+        slow:    var(--matcha-duration-slow, 600ms),
+    );
+    $easing-map: (
+        standard:    unquote("var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))"),
+        emphasized:  unquote("var(--matcha-easing-emphasized, cubic-bezier(0.2, 0, 0, 1))"),
+        decelerated: unquote("var(--matcha-easing-decelerated, cubic-bezier(0, 0, 0.2, 1))"),
+        accelerated: unquote("var(--matcha-easing-accelerated, cubic-bezier(0.4, 0, 1, 1))"),
+    );
+    $standard-ease: unquote("var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))");
+
+    @each $name, $value in $duration-map {
+        .duration-#{$name} {
+            transition-duration: $value;
+        }
+        .duration-#{$name}--force {
+            transition-duration: $value !important;
+        }
+    }
+
+    @each $name, $value in $easing-map {
+        .ease-#{$name} {
+            transition-timing-function: $value;
+        }
+        .ease-#{$name}--force {
+            transition-timing-function: $value !important;
+        }
+    }
+
+    @each $name, $value in $duration-map {
+        .transition-#{$name} {
+            transition: all $value $standard-ease;
+        }
+        .transition-#{$name}--force {
+            transition: all $value $standard-ease !important;
+        }
+    }
+}
+@include generate-motion-classes();
+
 // -----------------------------------------------------------------------------------------------------
 // @ Rotate Animation
 // -----------------------------------------------------------------------------------------------------