@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-highlight.scss

@@ -1,164 +1,164 @@
-// =============================================================================
-// matcha-highlight — syntax highlighting via Prism.js, 1:1 com tokens DSV3.
-//
-// Antes: 5 temas (matcha/vs-code-dark/vs-code-light/dracula/none) com cores
-// hex hardcoded. Default monocromático (todos tokens em getBlue($theme) — bug).
-// Zero consumidores usavam temas alternativos — todos usam theme="matcha".
-//
-// Agora: 1 tema canônico (default), 100% tokens semânticos DSV3, auto-adapta
-// dark/light via CSS vars. A prop `[theme]` continua sendo aceita pra compat
-// dos 30+ consumidores existentes — é ignorada e renderiza o tema canon.
-// =============================================================================
-
-@mixin matcha-highlight-theme($theme) {
-    matcha-highlight {
-        padding: 16px;
-        border-radius: var(--matcha-radius-lg, 8px);
-        display: flex;
-        overflow: auto;
-        position: relative;
-        min-height: 56px;
-
-        // ── Variáveis Prism — tokens semânticos DSV3 ─────────────────────
-        // Auto-adapta dark/light via CSS vars subjacentes.
-        --prism-bg:           var(--matcha-color-surface-inner);
-        --prism-text:         var(--matcha-color-text-primary);
-        --prism-comment:      var(--matcha-color-text-label);
-        --prism-punctuation:  var(--matcha-color-text-secondary);
-        --prism-operator:     var(--matcha-color-text-secondary);
-
-        --prism-keyword:      var(--matcha-color-accent);
-        --prism-class:        var(--matcha-color-accent);
-
-        --prism-string:       var(--matcha-color-success);
-        --prism-regex:        var(--matcha-color-success);
-
-        --prism-number:       var(--matcha-color-primary);
-        --prism-function:     var(--matcha-color-primary);
-        --prism-property:     var(--matcha-color-primary);
-        --prism-variable:     var(--matcha-color-text-primary);
-        --prism-constant:     var(--matcha-color-primary);
-
-        --prism-type:         var(--matcha-color-warn);
-        --prism-attribute:    var(--matcha-color-warn);
-
-        --prism-tag:          var(--matcha-color-danger);
-        --prism-important:    var(--matcha-color-danger);
-
-        --code-font-family:
-            'Fira Code', Consolas, Menlo, Monaco, 'Andale Mono', 'Liberation Mono',
-            'Courier New', Courier, monospace;
-        --code-font-size: 13px;
-        --code-line-height: 1.6;
-
-        // ── Estilos base ─────────────────────────────────────────────────
-        background: var(--prism-bg);
-
-        pre, code { margin: 0; padding: 0; }
-
-        code[class*="language-"],
-        pre[class*="language-"] {
-            color: var(--prism-text);
-            background: var(--prism-bg);
-            text-shadow: none;
-            font-family: var(--code-font-family);
-            font-size: var(--code-font-size);
-            text-align: left;
-            white-space: pre;
-            word-spacing: normal;
-            word-break: normal;
-            word-wrap: normal;
-            line-height: var(--code-line-height);
-            tab-size: 4;
-            hyphens: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        pre[class*="language-"] {
-            overflow: auto;
-            border-radius: var(--matcha-radius-lg, 8px);
-        }
-
-        code[class*="language-"] {
-            background: transparent;
-        }
-
-        // ── Token cores (mapeamento Prism → CSS vars semânticas) ─────────
-        .token.comment,
-        .token.prolog,
-        .token.doctype,
-        .token.cdata {
-            color: var(--prism-comment);
-            font-style: italic;
-        }
-
-        .token.punctuation { color: var(--prism-punctuation); }
-
-        .token.property,
-        .token.tag,
-        .token.symbol,
-        .token.deleted {
-            color: var(--prism-tag);
-        }
-
-        .token.boolean,
-        .token.number,
-        .token.constant {
-            color: var(--prism-number);
-        }
-
-        .token.selector,
-        .token.attr-name,
-        .token.string,
-        .token.char,
-        .token.builtin,
-        .token.inserted {
-            color: var(--prism-string);
-        }
-
-        .token.operator,
-        .token.entity,
-        .token.url,
-        .language-css .token.string,
-        .style .token.string,
-        .token.variable {
-            color: var(--prism-operator);
-        }
-
-        .token.atrule,
-        .token.attr-value,
-        .token.function,
-        .token.class-name {
-            color: var(--prism-function);
-        }
-
-        .token.keyword { color: var(--prism-keyword); }
-
-        .token.regex { color: var(--prism-regex); }
-
-        .token.important {
-            color: var(--prism-important);
-            font-weight: bold;
-        }
-
-        .token.bold   { font-weight: bold; }
-        .token.italic { font-style: italic; }
-        .token.entity { cursor: help; }
-
-        // ── Container + copy button ──────────────────────────────────────
-        .matcha-highlight-container {
-            position: relative;
-            border-radius: var(--matcha-radius-lg, 8px);
-        }
-
-        .copy-button {
-            opacity: 0;
-            transition: opacity 0.2s ease;
-        }
-
-        &:hover .copy-button { opacity: 1; }
-
-        .highlight-content { position: relative; }
-    }
-}
+// =============================================================================
+// matcha-highlight — syntax highlighting via Prism.js, 1:1 com tokens DSV3.
+//
+// Antes: 5 temas (matcha/vs-code-dark/vs-code-light/dracula/none) com cores
+// hex hardcoded. Default monocromático (todos tokens em getBlue($theme) — bug).
+// Zero consumidores usavam temas alternativos — todos usam theme="matcha".
+//
+// Agora: 1 tema canônico (default), 100% tokens semânticos DSV3, auto-adapta
+// dark/light via CSS vars. A prop `[theme]` continua sendo aceita pra compat
+// dos 30+ consumidores existentes — é ignorada e renderiza o tema canon.
+// =============================================================================
+
+@mixin matcha-highlight-theme($theme) {
+    matcha-highlight {
+        padding: 16px;
+        border-radius: var(--matcha-radius-lg, 8px);
+        display: flex;
+        overflow: auto;
+        position: relative;
+        min-height: 56px;
+
+        // ── Variáveis Prism — tokens semânticos DSV3 ─────────────────────
+        // Auto-adapta dark/light via CSS vars subjacentes.
+        --prism-bg:           var(--matcha-color-surface-inner);
+        --prism-text:         var(--matcha-color-text-primary);
+        --prism-comment:      var(--matcha-color-text-label);
+        --prism-punctuation:  var(--matcha-color-text-secondary);
+        --prism-operator:     var(--matcha-color-text-secondary);
+
+        --prism-keyword:      var(--matcha-color-accent);
+        --prism-class:        var(--matcha-color-accent);
+
+        --prism-string:       var(--matcha-color-success);
+        --prism-regex:        var(--matcha-color-success);
+
+        --prism-number:       var(--matcha-color-primary);
+        --prism-function:     var(--matcha-color-primary);
+        --prism-property:     var(--matcha-color-primary);
+        --prism-variable:     var(--matcha-color-text-primary);
+        --prism-constant:     var(--matcha-color-primary);
+
+        --prism-type:         var(--matcha-color-warn);
+        --prism-attribute:    var(--matcha-color-warn);
+
+        --prism-tag:          var(--matcha-color-danger);
+        --prism-important:    var(--matcha-color-danger);
+
+        --code-font-family:
+            'Fira Code', Consolas, Menlo, Monaco, 'Andale Mono', 'Liberation Mono',
+            'Courier New', Courier, monospace;
+        --code-font-size: 13px;
+        --code-line-height: 1.6;
+
+        // ── Estilos base ─────────────────────────────────────────────────
+        background: var(--prism-bg);
+
+        pre, code { margin: 0; padding: 0; }
+
+        code[class*="language-"],
+        pre[class*="language-"] {
+            color: var(--prism-text);
+            background: var(--prism-bg);
+            text-shadow: none;
+            font-family: var(--code-font-family);
+            font-size: var(--code-font-size);
+            text-align: left;
+            white-space: pre;
+            word-spacing: normal;
+            word-break: normal;
+            word-wrap: normal;
+            line-height: var(--code-line-height);
+            tab-size: 4;
+            hyphens: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        pre[class*="language-"] {
+            overflow: auto;
+            border-radius: var(--matcha-radius-lg, 8px);
+        }
+
+        code[class*="language-"] {
+            background: transparent;
+        }
+
+        // ── Token cores (mapeamento Prism → CSS vars semânticas) ─────────
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: var(--prism-comment);
+            font-style: italic;
+        }
+
+        .token.punctuation { color: var(--prism-punctuation); }
+
+        .token.property,
+        .token.tag,
+        .token.symbol,
+        .token.deleted {
+            color: var(--prism-tag);
+        }
+
+        .token.boolean,
+        .token.number,
+        .token.constant {
+            color: var(--prism-number);
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.builtin,
+        .token.inserted {
+            color: var(--prism-string);
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string,
+        .token.variable {
+            color: var(--prism-operator);
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.function,
+        .token.class-name {
+            color: var(--prism-function);
+        }
+
+        .token.keyword { color: var(--prism-keyword); }
+
+        .token.regex { color: var(--prism-regex); }
+
+        .token.important {
+            color: var(--prism-important);
+            font-weight: bold;
+        }
+
+        .token.bold   { font-weight: bold; }
+        .token.italic { font-style: italic; }
+        .token.entity { cursor: help; }
+
+        // ── Container + copy button ──────────────────────────────────────
+        .matcha-highlight-container {
+            position: relative;
+            border-radius: var(--matcha-radius-lg, 8px);
+        }
+
+        .copy-button {
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        &:hover .copy-button { opacity: 1; }
+
+        .highlight-content { position: relative; }
+    }
+}

package/components/matcha-hint-text.scss

@@ -1,90 +1,90 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "../abstracts/functions" as *;
-@use "../tokens/breakpoints-tokens" as *;
-// =============================================================================
-// matcha-hint-text.scss — Hint/error/warning/info/success text
-// Aligned with Figma matcha/hint-text: Tipo(4) × Tamanho(SM/MD) = 8 variants
-// =============================================================================
-
-@mixin generate-matcha-hint-size-classes($helper-breakpoints) {
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
-
-            &[size#{$infix}="sm"],
-            &[size#{$infix}="tiny"] {
-                font-size: px-to-rem(12px);
-                line-height: px-to-rem(16px);
-
-                matcha-icon span {
-                    width: px-to-rem(16px);
-                    height: px-to-rem(16px);
-                    font-size: px-to-rem(16px);
-                    line-height: px-to-rem(16px);
-                }
-            }
-
-            &[size#{$infix}="md"],
-            &[size#{$infix}="medium"] {
-                font-size: px-to-rem(14px);
-                line-height: px-to-rem(24px);
-
-                matcha-icon,
-                matcha-icon span {
-                    width: px-to-rem(24px);
-                    height: px-to-rem(24px);
-                    font-size: px-to-rem(24px);
-                    line-height: px-to-rem(24px);
-                }
-            }
-        }
-    }
-}
-
-@mixin matcha-hint-text($theme) {
-    matcha-hint-text {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        gap: var(--matcha-space-050, 4px);
-
-        @include generate-matcha-hint-size-classes($helper-breakpoints);
-
-        &[type="error"] {
-            color: var(--matcha-color-danger);
-        }
-
-        &[type="warning"] {
-            color: var(--matcha-color-warn);
-        }
-
-        &[type="info"] {
-            color: var(--matcha-color-info);
-        }
-
-        &[type="success"] {
-            color: var(--matcha-color-success);
-        }
-    }
-}
-
-// ── Forced colors ──
-// Em high-contrast, type colors viram CanvasText (perdem distinção semântica).
-// Texto fica legível; signal visual fica via prefix do consumer (ícone, etc).
-@media (forced-colors: active) {
-    matcha-hint-text {
-        color: CanvasText !important;
-    }
-}
-
-// ── Reduced motion ──
-@media (prefers-reduced-motion: reduce) {
-    matcha-hint-text {
-        transition: none !important;
-        animation: none !important;
-    }
-}
-
-// ── Print ──
-// Hint text é informacional (validation/error) — mantém visível.
-// Sem mudança necessária — fonte herdada do contexto já é apropriada pra papel.
+@use "../abstracts/media-breakpoint" as *;
+@use "../abstracts/functions" as *;
+@use "../tokens/breakpoints-tokens" as *;
+// =============================================================================
+// matcha-hint-text.scss — Hint/error/warning/info/success text
+// Aligned with Figma matcha/hint-text: Tipo(4) × Tamanho(SM/MD) = 8 variants
+// =============================================================================
+
+@mixin generate-matcha-hint-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="sm"],
+            &[size#{$infix}="tiny"] {
+                font-size: px-to-rem(12px);
+                line-height: px-to-rem(16px);
+
+                matcha-icon span {
+                    width: px-to-rem(16px);
+                    height: px-to-rem(16px);
+                    font-size: px-to-rem(16px);
+                    line-height: px-to-rem(16px);
+                }
+            }
+
+            &[size#{$infix}="md"],
+            &[size#{$infix}="medium"] {
+                font-size: px-to-rem(14px);
+                line-height: px-to-rem(24px);
+
+                matcha-icon,
+                matcha-icon span {
+                    width: px-to-rem(24px);
+                    height: px-to-rem(24px);
+                    font-size: px-to-rem(24px);
+                    line-height: px-to-rem(24px);
+                }
+            }
+        }
+    }
+}
+
+@mixin matcha-hint-text($theme) {
+    matcha-hint-text {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-050, 4px);
+
+        @include generate-matcha-hint-size-classes($helper-breakpoints);
+
+        &[type="error"] {
+            color: var(--matcha-color-danger);
+        }
+
+        &[type="warning"] {
+            color: var(--matcha-color-warn);
+        }
+
+        &[type="info"] {
+            color: var(--matcha-color-info);
+        }
+
+        &[type="success"] {
+            color: var(--matcha-color-success);
+        }
+    }
+}
+
+// ── Forced colors ──
+// Em high-contrast, type colors viram CanvasText (perdem distinção semântica).
+// Texto fica legível; signal visual fica via prefix do consumer (ícone, etc).
+@media (forced-colors: active) {
+    matcha-hint-text {
+        color: CanvasText !important;
+    }
+}
+
+// ── Reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+    matcha-hint-text {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+// ── Print ──
+// Hint text é informacional (validation/error) — mantém visível.
+// Sem mudança necessária — fonte herdada do contexto já é apropriada pra papel.