@inchurch/matcha-theme 21.3.3 → 22.0.0

package/tokens/_static-tokens.scss

@@ -1,137 +1,137 @@
-// =============================================================================
-// DOCUMENTO GERADO AUTOMATICAMENTE — NÃO EDITE À MÃO.
-//   Fonte:   tokens/matcha/primitives/global.json   (Figma · Tokens Studio)
-//   Gerador: scripts/matcha-tokens/gen-static.js    (gate: gen-static.js --check)
-//   Para mudar um valor: edite a fonte e rode o gerador (não edite este arquivo).
-// =============================================================================
-// Tokens NÃO-cor (mode-agnostic). matcha-static-tokens() emite declarações CRUAS
-// (sem seletor): o caller define o escopo (hoje dentro do tema via _emit-tokens.scss;
-// :root mode-agnostic no Track B). Curados sem fonte Figma (avatar, scrim, matcha/text/*
-// compostos, leading/tracking, aliases) ficam no _emit-tokens.scss — backlog matcha-theme-008.
-
-@mixin matcha-static-tokens() {
-  --matcha-font-family: Manrope, sans-serif;
-  --matcha-font-size-2xs: 10px;
-  --matcha-font-size-xs: 12px;
-  --matcha-font-size-sm: 14px;
-  --matcha-font-size-md: 16px;
-  --matcha-font-size-lg: 18px;
-  --matcha-font-size-xl: 20px;
-  --matcha-font-size-2xl: 24px;
-  --matcha-font-size-3xl: 32px;
-  --matcha-font-size-3xs: 8px;
-  --matcha-font-size-4xl: 36px;
-  --matcha-font-size-5xl: 48px;
-  --matcha-font-size-6xl: 60px;
-  --matcha-font-size-7xl: 72px;
-  --matcha-weight-normal: 400;
-  --matcha-weight-medium: 500;
-  --matcha-weight-semi-bold: 600;
-  --matcha-weight-bold: 700;
-  --matcha-weight-black: 900;
-  --matcha-weight-extrabold: 800;
-  --matcha-weight-extralight: 200;
-  --matcha-weight-light: 300;
-  --matcha-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
-  --matcha-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
-  --matcha-easing-decelerated: cubic-bezier(0.0, 0.0, 0.2, 1);
-  --matcha-easing-accelerated: cubic-bezier(0.4, 0.0, 1, 1);
-  --matcha-space-100: 8px;
-  --matcha-space-150: 12px;
-  --matcha-space-200: 16px;
-  --matcha-space-250: 20px;
-  --matcha-space-300: 24px;
-  --matcha-space-400: 32px;
-  --matcha-space-500: 40px;
-  --matcha-space-600: 48px;
-  --matcha-space-800: 64px;
-  --matcha-space-1000: 80px;
-  --matcha-space-1200: 96px;
-  --matcha-space-050: 4px;
-  --matcha-space-075: 6px;
-  --matcha-space-025: 2px;
-  --matcha-radius-none: 0;
-  --matcha-radius-sm: 2px;
-  --matcha-radius-md: 4px;
-  --matcha-radius-lg: 8px;
-  --matcha-radius-xl: 16px;
-  --matcha-radius-pill: 9999px;
-  --matcha-radius-2xl: 12px;
-  --matcha-radius-3xs: 6px;
-  --matcha-radius-3xl: 24px;
-  --matcha-border-hairline: 1px;
-  --matcha-border-thin: 2px;
-  --matcha-border-medium: 4px;
-  --matcha-border-thick: 8px;
-  --matcha-opacity-hover: 0.04;
-  --matcha-opacity-subtle: 0.1;
-  --matcha-opacity-medium: 0.2;
-  --matcha-opacity-strong: 0.3;
-  --matcha-opacity-disabled: 0.38;
-  --matcha-opacity-secondary: 0.54;
-  --matcha-opacity-high: 0.87;
-  --matcha-duration-instant: 80ms;
-  --matcha-duration-fast: 200ms;
-  --matcha-duration-normal: 400ms;
-  --matcha-duration-slow: 600ms;
-  --matcha-line-height-none: 1;
-  --matcha-line-height-tight: 1.2;
-  --matcha-line-height-normal: 1.5;
-  --matcha-line-height-relaxed: 1.75;
-  --matcha-letter-spacing-tight: -0.5px;
-  --matcha-letter-spacing-normal: 0px;
-  --matcha-letter-spacing-wide: 0.5px;
-  --matcha-letter-spacing-wider: 1px;
-  --matcha-z-base: 1;
-  --matcha-z-dropdown: 100;
-  --matcha-z-sticky: 200;
-  --matcha-z-popover: 300;
-  --matcha-z-tooltip: 400;
-  --matcha-z-modal-bg: 998;
-  --matcha-z-modal: 999;
-  --matcha-z-overlay: 1000;
-  --matcha-grid-frame-notebook: 1360px;
-  --matcha-grid-frame-wide: 1920px;
-  --matcha-grid-frame-mobile: 375px;
-  --matcha-grid-frame-tablet: 768px;
-  --matcha-grid-sidebar-rail: 72px;
-  --matcha-grid-sidebar-submenu: 216px;
-  --matcha-grid-sidebar-gap: 16px;
-  --matcha-grid-sidebar-total: 304px;
-  --matcha-grid-col-painel-full: 72px;
-  --matcha-grid-col-painel-rail: 88px;
-  --matcha-grid-col-painel-compact: 96px;
-  --matcha-grid-col-wide-full: 120px;
-  --matcha-grid-col-wide-rail: 112px;
-  --matcha-grid-col-public-mobile: 80px;
-  --matcha-grid-col-public-tablet: 64px;
-  --matcha-grid-col-public-desktop: 80px;
-  --matcha-grid-gutter-compact: 8px;
-  --matcha-grid-gutter-default: 16px;
-  --matcha-grid-gutter-wide: 16px;
-  --matcha-grid-content-painel-full: 1040px;
-  --matcha-grid-content-painel-rail: 1232px;
-  --matcha-grid-header-height: 56px;
-  --matcha-grid-offset-wide-full: 304px;
-  --matcha-grid-offset-wide-rail: 248px;
-  --matcha-grid-offset-painel-full: 304px;
-  --matcha-grid-offset-painel-rail: 96px;
-  --matcha-grid-offset-painel-compact: 24px;
-  --matcha-grid-max-content-width: 1600px;
-  --matcha-grid-content-wide-full: 1616px;
-  --matcha-grid-content-wide-rail: 1520px;
-  --matcha-icon-size-sm: 16px;
-  --matcha-icon-size-md: 24px;
-  --matcha-icon-size-lg: 32px;
-  --matcha-icon-size-xl: 48px;
-  --matcha-state-layer-hover: 0.08;
-  --matcha-state-layer-active: 0.16;
-  --matcha-state-layer-pressed: 0.12;
-  --matcha-state-layer-subtle: 0.04;
-  --matcha-bp-xs: 480px;
-  --matcha-bp-sm: 640px;
-  --matcha-bp-md: 768px;
-  --matcha-bp-lg: 1024px;
-  --matcha-bp-xl: 1280px;
-  --matcha-bp-2xl: 1536px;
-}
+// =============================================================================
+// DOCUMENTO GERADO AUTOMATICAMENTE — NÃO EDITE À MÃO.
+//   Fonte:   tokens/matcha/primitives/global.json   (Figma · Tokens Studio)
+//   Gerador: scripts/matcha-tokens/gen-static.js    (gate: gen-static.js --check)
+//   Para mudar um valor: edite a fonte e rode o gerador (não edite este arquivo).
+// =============================================================================
+// Tokens NÃO-cor (mode-agnostic). matcha-static-tokens() emite declarações CRUAS
+// (sem seletor): o caller define o escopo (hoje dentro do tema via _emit-tokens.scss;
+// :root mode-agnostic no Track B). Curados sem fonte Figma (avatar, scrim, matcha/text/*
+// compostos, leading/tracking, aliases) ficam no _emit-tokens.scss — backlog matcha-theme-008.
+
+@mixin matcha-static-tokens() {
+  --matcha-font-family: Manrope, sans-serif;
+  --matcha-font-size-2xs: 10px;
+  --matcha-font-size-xs: 12px;
+  --matcha-font-size-sm: 14px;
+  --matcha-font-size-md: 16px;
+  --matcha-font-size-lg: 18px;
+  --matcha-font-size-xl: 20px;
+  --matcha-font-size-2xl: 24px;
+  --matcha-font-size-3xl: 32px;
+  --matcha-font-size-3xs: 8px;
+  --matcha-font-size-4xl: 36px;
+  --matcha-font-size-5xl: 48px;
+  --matcha-font-size-6xl: 60px;
+  --matcha-font-size-7xl: 72px;
+  --matcha-weight-normal: 400;
+  --matcha-weight-medium: 500;
+  --matcha-weight-semi-bold: 600;
+  --matcha-weight-bold: 700;
+  --matcha-weight-black: 900;
+  --matcha-weight-extrabold: 800;
+  --matcha-weight-extralight: 200;
+  --matcha-weight-light: 300;
+  --matcha-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
+  --matcha-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
+  --matcha-easing-decelerated: cubic-bezier(0.0, 0.0, 0.2, 1);
+  --matcha-easing-accelerated: cubic-bezier(0.4, 0.0, 1, 1);
+  --matcha-space-100: 8px;
+  --matcha-space-150: 12px;
+  --matcha-space-200: 16px;
+  --matcha-space-250: 20px;
+  --matcha-space-300: 24px;
+  --matcha-space-400: 32px;
+  --matcha-space-500: 40px;
+  --matcha-space-600: 48px;
+  --matcha-space-800: 64px;
+  --matcha-space-1000: 80px;
+  --matcha-space-1200: 96px;
+  --matcha-space-050: 4px;
+  --matcha-space-075: 6px;
+  --matcha-space-025: 2px;
+  --matcha-radius-none: 0;
+  --matcha-radius-sm: 2px;
+  --matcha-radius-md: 4px;
+  --matcha-radius-lg: 8px;
+  --matcha-radius-xl: 16px;
+  --matcha-radius-pill: 9999px;
+  --matcha-radius-2xl: 12px;
+  --matcha-radius-3xs: 6px;
+  --matcha-radius-3xl: 24px;
+  --matcha-border-hairline: 1px;
+  --matcha-border-thin: 2px;
+  --matcha-border-medium: 4px;
+  --matcha-border-thick: 8px;
+  --matcha-opacity-hover: 0.04;
+  --matcha-opacity-subtle: 0.1;
+  --matcha-opacity-medium: 0.2;
+  --matcha-opacity-strong: 0.3;
+  --matcha-opacity-disabled: 0.38;
+  --matcha-opacity-secondary: 0.54;
+  --matcha-opacity-high: 0.87;
+  --matcha-duration-instant: 80ms;
+  --matcha-duration-fast: 200ms;
+  --matcha-duration-normal: 400ms;
+  --matcha-duration-slow: 600ms;
+  --matcha-line-height-none: 1;
+  --matcha-line-height-tight: 1.2;
+  --matcha-line-height-normal: 1.5;
+  --matcha-line-height-relaxed: 1.75;
+  --matcha-letter-spacing-tight: -0.5px;
+  --matcha-letter-spacing-normal: 0px;
+  --matcha-letter-spacing-wide: 0.5px;
+  --matcha-letter-spacing-wider: 1px;
+  --matcha-z-base: 1;
+  --matcha-z-dropdown: 100;
+  --matcha-z-sticky: 200;
+  --matcha-z-popover: 300;
+  --matcha-z-tooltip: 400;
+  --matcha-z-modal-bg: 998;
+  --matcha-z-modal: 999;
+  --matcha-z-overlay: 1000;
+  --matcha-grid-frame-notebook: 1360px;
+  --matcha-grid-frame-wide: 1920px;
+  --matcha-grid-frame-mobile: 375px;
+  --matcha-grid-frame-tablet: 768px;
+  --matcha-grid-sidebar-rail: 72px;
+  --matcha-grid-sidebar-submenu: 216px;
+  --matcha-grid-sidebar-gap: 16px;
+  --matcha-grid-sidebar-total: 304px;
+  --matcha-grid-col-painel-full: 72px;
+  --matcha-grid-col-painel-rail: 88px;
+  --matcha-grid-col-painel-compact: 96px;
+  --matcha-grid-col-wide-full: 120px;
+  --matcha-grid-col-wide-rail: 112px;
+  --matcha-grid-col-public-mobile: 80px;
+  --matcha-grid-col-public-tablet: 64px;
+  --matcha-grid-col-public-desktop: 80px;
+  --matcha-grid-gutter-compact: 8px;
+  --matcha-grid-gutter-default: 16px;
+  --matcha-grid-gutter-wide: 16px;
+  --matcha-grid-content-painel-full: 1040px;
+  --matcha-grid-content-painel-rail: 1232px;
+  --matcha-grid-header-height: 56px;
+  --matcha-grid-offset-wide-full: 304px;
+  --matcha-grid-offset-wide-rail: 248px;
+  --matcha-grid-offset-painel-full: 304px;
+  --matcha-grid-offset-painel-rail: 96px;
+  --matcha-grid-offset-painel-compact: 24px;
+  --matcha-grid-max-content-width: 1600px;
+  --matcha-grid-content-wide-full: 1616px;
+  --matcha-grid-content-wide-rail: 1520px;
+  --matcha-icon-size-sm: 16px;
+  --matcha-icon-size-md: 24px;
+  --matcha-icon-size-lg: 32px;
+  --matcha-icon-size-xl: 48px;
+  --matcha-state-layer-hover: 0.08;
+  --matcha-state-layer-active: 0.16;
+  --matcha-state-layer-pressed: 0.12;
+  --matcha-state-layer-subtle: 0.04;
+  --matcha-bp-xs: 480px;
+  --matcha-bp-sm: 640px;
+  --matcha-bp-md: 768px;
+  --matcha-bp-lg: 1024px;
+  --matcha-bp-xl: 1280px;
+  --matcha-bp-2xl: 1536px;
+}

package/tokens/_typography-tokens.scss

@@ -1,65 +1,65 @@
-// =============================================================================
-// Typography Tokens — Aligned with Figma matcha/text/* (Manrope)
-// =============================================================================
-
-// ── Font Family ──
-$font-family-base: 'Manrope, "Helvetica Neue", Arial, sans-serif';
-$font-family-mono: '"JetBrains Mono", "Fira Code", "Consolas", monospace';
-
-// ── Font Sizes (matches Figma scale) ──
-$font-size-2xs: 10px;
-$font-size-xs: 11px;
-$font-size-sm: 12px;
-$font-size-md: 14px;
-$font-size-lg: 16px;
-$font-size-xl: 18px;
-$font-size-2xl: 20px;
-$font-size-3xl: 24px;
-$font-size-4xl: 32px;
-$font-size-5xl: 40px;
-$font-size-base: 16px;
-
-// ── Font Weights (Manrope supports 200-800) ──
-$font-weight-regular: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-$font-weight-extrabold: 800;
-
-// ── Line Heights (matches Figma styles) ──
-$line-height-xs: 14px;
-$line-height-sm: 16px;
-$line-height-md: 20px;
-$line-height-lg: 22px;
-$line-height-xl: 24px;
-$line-height-2xl: 28px;
-$line-height-3xl: 32px;
-$line-height-4xl: 40px;
-$line-height-5xl: 48px;
-
-// ── Legacy aliases (retrocompatibility) ──
-$size-font-xxsmall: $font-size-2xs;
-$size-font-xsmall: $font-size-sm;
-$size-font-small: $font-size-md;
-$size-font-medium: $font-size-lg;
-$size-font-big: $font-size-xl;
-$size-font-large: $font-size-2xl;
-$size-font-xlarge: $font-size-3xl;
-$size-font-xxlarge: $font-size-4xl;
-$size-font-2-xxlarge: $font-size-5xl;
-$size-font-base: $font-size-base;
-$size-font-weight-thin: 100;
-$size-font-weight-extra-light: 200;
-$size-font-weight-light: 300;
-$size-font-weight-normal: $font-weight-regular;
-$size-font-weight-medium: $font-weight-medium;
-$size-font-weight-semi-bold: $font-weight-semibold;
-$size-font-weight-bold: $font-weight-bold;
-$size-font-weight-extra-bold: $font-weight-extrabold;
-$size-font-weight-black: 900;
-$size-line-height-minimum: 32px;
-$size-line-height-small: 40px;
-$size-line-height-medium: 48px;
-$size-line-height-large: 56px;
-$size-line-height-xlarge: 64px;
-$size-line-height-xxlarge: 72px;
+// =============================================================================
+// Typography Tokens — Aligned with Figma matcha/text/* (Manrope)
+// =============================================================================
+
+// ── Font Family ──
+$font-family-base: 'Manrope, "Helvetica Neue", Arial, sans-serif';
+$font-family-mono: '"JetBrains Mono", "Fira Code", "Consolas", monospace';
+
+// ── Font Sizes (matches Figma scale) ──
+$font-size-2xs: 10px;
+$font-size-xs: 11px;
+$font-size-sm: 12px;
+$font-size-md: 14px;
+$font-size-lg: 16px;
+$font-size-xl: 18px;
+$font-size-2xl: 20px;
+$font-size-3xl: 24px;
+$font-size-4xl: 32px;
+$font-size-5xl: 40px;
+$font-size-base: 16px;
+
+// ── Font Weights (Manrope supports 200-800) ──
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+
+// ── Line Heights (matches Figma styles) ──
+$line-height-xs: 14px;
+$line-height-sm: 16px;
+$line-height-md: 20px;
+$line-height-lg: 22px;
+$line-height-xl: 24px;
+$line-height-2xl: 28px;
+$line-height-3xl: 32px;
+$line-height-4xl: 40px;
+$line-height-5xl: 48px;
+
+// ── Legacy aliases (retrocompatibility) ──
+$size-font-xxsmall: $font-size-2xs;
+$size-font-xsmall: $font-size-sm;
+$size-font-small: $font-size-md;
+$size-font-medium: $font-size-lg;
+$size-font-big: $font-size-xl;
+$size-font-large: $font-size-2xl;
+$size-font-xlarge: $font-size-3xl;
+$size-font-xxlarge: $font-size-4xl;
+$size-font-2-xxlarge: $font-size-5xl;
+$size-font-base: $font-size-base;
+$size-font-weight-thin: 100;
+$size-font-weight-extra-light: 200;
+$size-font-weight-light: 300;
+$size-font-weight-normal: $font-weight-regular;
+$size-font-weight-medium: $font-weight-medium;
+$size-font-weight-semi-bold: $font-weight-semibold;
+$size-font-weight-bold: $font-weight-bold;
+$size-font-weight-extra-bold: $font-weight-extrabold;
+$size-font-weight-black: 900;
+$size-line-height-minimum: 32px;
+$size-line-height-small: 40px;
+$size-line-height-medium: 48px;
+$size-line-height-large: 56px;
+$size-line-height-xlarge: 64px;
+$size-line-height-xxlarge: 72px;

package/vendors/charts.scss

@@ -1,90 +1,90 @@
-@use "../abstracts/elevation" as *;
-@mixin vendor-chart($theme) {
-    // theme-agnóstico: cores via var(--matcha-color-*) (runtime). $theme mantido só
-    // na assinatura por retrocompat dos call sites (removido na limpeza de params).
-
-    // Fixer wrappers
-    .matcha-card,
-    .matcha-card-flat,
-    .matcha-section {
-
-        //Google Chart
-        google-chart {
-            width: 100% !important;
-            max-width: 100% !important;
-            min-width: 100% !important;
-            height: 100%;
-        }
-
-        google-chart * {
-            max-width: 100% !important;
-        }
-    }
-
-    #ngxcharts {
-        ngx-charts-chart {
-            svg {
-                height: 400px;
-                width: 400px;
-
-                g {}
-            }
-        }
-    }
-
-    .chart-legend {
-        background-color: transparent;
-        padding: 0;
-        width: 200px !important;
-        min-width: 200px;
-        max-width: 300px;
-        display: -webkit-box;
-        display: flex;
-        right: 0;
-
-        div {
-            width: 100% !important;
-        }
-
-        .legend-labels {
-            background: transparent !important;
-
-            .active {
-                .legend-label-text {
-                    color: var(--matcha-color-text-label);
-                }
-            }
-        }
-
-        .legend-label-color {
-            border-radius: 12px !important;
-        }
-
-        .legend-label-text {
-            font-weight: normal;
-            font-size: 16px !important;
-            line-height: 20px;
-            color: var(--matcha-color-fg);
-        }
-    }
-
-    // Large devices (tablets and small monitors, 1024px and up < 1440px)
-    @media (min-width: 1024px) {
-        .chart-legend {
-            margin: 0 24px 0 0;
-            border-radius: 8px;
-            position: absolute;
-            background-color: var(--matcha-color-surface-bg-alpha);
-            @include elevation(1);
-        }
-    }
-
-    .pie-chart {
-        .pie-label {
-            fill: var(--matcha-color-text-label);
-            font-size: 16px !important;
-            line-height: 20px;
-            padding: 8px;
-        }
-    }
-}
+@use "../abstracts/elevation" as *;
+@mixin vendor-chart($theme) {
+    // theme-agnóstico: cores via var(--matcha-color-*) (runtime). $theme mantido só
+    // na assinatura por retrocompat dos call sites (removido na limpeza de params).
+
+    // Fixer wrappers
+    .matcha-card,
+    .matcha-card-flat,
+    .matcha-section {
+
+        //Google Chart
+        google-chart {
+            width: 100% !important;
+            max-width: 100% !important;
+            min-width: 100% !important;
+            height: 100%;
+        }
+
+        google-chart * {
+            max-width: 100% !important;
+        }
+    }
+
+    #ngxcharts {
+        ngx-charts-chart {
+            svg {
+                height: 400px;
+                width: 400px;
+
+                g {}
+            }
+        }
+    }
+
+    .chart-legend {
+        background-color: transparent;
+        padding: 0;
+        width: 200px !important;
+        min-width: 200px;
+        max-width: 300px;
+        display: -webkit-box;
+        display: flex;
+        right: 0;
+
+        div {
+            width: 100% !important;
+        }
+
+        .legend-labels {
+            background: transparent !important;
+
+            .active {
+                .legend-label-text {
+                    color: var(--matcha-color-text-label);
+                }
+            }
+        }
+
+        .legend-label-color {
+            border-radius: 12px !important;
+        }
+
+        .legend-label-text {
+            font-weight: normal;
+            font-size: 16px !important;
+            line-height: 20px;
+            color: var(--matcha-color-fg);
+        }
+    }
+
+    // Large devices (tablets and small monitors, 1024px and up < 1440px)
+    @media (min-width: 1024px) {
+        .chart-legend {
+            margin: 0 24px 0 0;
+            border-radius: 8px;
+            position: absolute;
+            background-color: var(--matcha-color-surface-bg-alpha);
+            @include elevation(1);
+        }
+    }
+
+    .pie-chart {
+        .pie-label {
+            fill: var(--matcha-color-text-label);
+            font-size: 16px !important;
+            line-height: 20px;
+            padding: 8px;
+        }
+    }
+}