@inchurch/matcha-theme 20.0.11 → 20.276.0

package/components/matcha-highlight.scss

@@ -1,171 +1,61 @@
-@mixin matcha-highlight-theme($theme) {
-    // ========================================
-    // TEMA PADRÃO (MATCHA)
-    // ========================================
+// =============================================================================
+// 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: 8px;
+        border-radius: var(--matcha-radius-lg, 8px);
         display: flex;
-        overflow:auto;
+        overflow: auto;
         position: relative;
-        min-height:56px;
-
-        // Variáveis CSS para tema padrão (Matcha)
-        --prism-bg: transparent;
-        --prism-text: #{getBlue($theme)};
-        --prism-comment: #{getBlue($theme)};
-        --prism-keyword: #{getBlue($theme)};
-        --prism-string: #{getBlue($theme)};
-        --prism-number: #{getBlue($theme)};
-        --prism-function: #{getBlue($theme)};
-        --prism-variable: #{getBlue($theme)};
-        --prism-type: #{getBlue($theme)};
-        --prism-operator: #{getBlue($theme)};
-        --prism-punctuation: #{getBlue($theme)};
-        --prism-property: #{getBlue($theme)};
-        --prism-tag: #{getBlue($theme)};
-        --prism-attribute: #{getBlue($theme)};
-        --prism-class: #{getBlue($theme)};
-        --prism-constant: #{getBlue($theme)};
-        --prism-regex: #{getBlue($theme)};
-        --prism-important: #{getBlue($theme)};
-
-        --code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
-        --code-font-size: 14px;
+        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;
 
-        // =========================================================================
-        // TEMAS ALTERNATIVOS
-        // =========================================================================
-        // -------------------------------------------------------------------------
-        // Tema claro
-        // -------------------------------------------------------------------------
-        &[theme="vs-code-light"] {
-            --prism-bg: #ffffff;
-            --prism-text: #000000;
-            --prism-comment: #6a9955;
-            --prism-keyword: #0000ff;
-            --prism-string: #a31515;
-            --prism-number: #098658;
-            --prism-function: #795e26;
-            --prism-variable: #001080;
-            --prism-type: #267f99;
-            --prism-operator: #000000;
-            --prism-punctuation: #000000;
-            --prism-property: #0451a5;
-            --prism-tag: #800000;
-            --prism-attribute: #ff0000;
-            --prism-class: #267f99;
-            --prism-constant: #0070c1;
-            --prism-regex: #811f3f;
-            --prism-important: #e50000;
-        }
-
-        // -------------------------------------------------------------------------
-        // Tema escuro
-        // -------------------------------------------------------------------------
-        &[theme="vs-code-dark"] {
-            --prism-bg: #1e1e1e;
-            --prism-text: #d4d4d4;
-            --prism-comment: #6a9955;
-            --prism-keyword: #569cd6;
-            --prism-string: #ce9178;
-            --prism-number: #b5cea8;
-            --prism-function: #dcdcaa;
-            --prism-variable: #9cdcfe;
-            --prism-type: #4ec9b0;
-            --prism-operator: #d4d4d4;
-            --prism-punctuation: #d4d4d4;
-            --prism-property: #92c5f8;
-            --prism-tag: #f44747;
-            --prism-attribute: #92c5f8;
-            --prism-class: #4ec9b0;
-            --prism-constant: #4fc1ff;
-            --prism-regex: #d16969;
-            --prism-important: #ff6b6b;
-        }
-
-        // -------------------------------------------------------------------------
-        // Tema Dracula
-        // -------------------------------------------------------------------------
-        &[theme="dracula"] {
-            --prism-bg: #282a36;
-            --prism-text: #f8f8f2;
-            --prism-comment: #6272a4;
-            --prism-keyword: #ff79c6;
-            --prism-string: #f1fa8c;
-            --prism-number: #bd93f9;
-            --prism-function: #50fa7b;
-            --prism-variable: #8be9fd;
-            --prism-type: #8be9fd;
-            --prism-operator: #ff79c6;
-            --prism-punctuation: #f8f8f2;
-            --prism-property: #66d9ef;
-            --prism-tag: #ff79c6;
-            --prism-attribute: #50fa7b;
-            --prism-class: #bd93f9;
-            --prism-constant: #bd93f9;
-            --prism-regex: #ffb86c;
-            --prism-important: #ff5555;
-        }
-
-        // -------------------------------------------------------------------------
-        // Tema matcha
-        // -------------------------------------------------------------------------
-        &[theme="matcha"] {
-            --prism-bg: #1a2420;
-            --prism-text: #e6f4ea;
-            --prism-comment: #5c7f6e;
-            --prism-keyword: #7fffd4;
-            --prism-string: #b7f774;
-            --prism-number: #6ee7b7;
-            --prism-function: #4ade80;
-            --prism-variable: #a7ffeb;
-            --prism-type: #34d399;
-            --prism-operator: #7fffd4;
-            --prism-punctuation: #e6f4ea;
-            --prism-property: #5eead4;
-            --prism-tag: #2dd4bf;
-            --prism-attribute: #bbf7d0;
-            --prism-class: #6ee7b7;
-            --prism-constant: #99f6e4;
-            --prism-regex: #bef264;
-            --prism-important: #22d3ee;
-        }
-
-        // -------------------------------------------------------------------------
-        // Tema none (sem tema específico - usa cores padrão do sistema)
-        // -------------------------------------------------------------------------
-        &[theme="none"] {
-            --prism-bg: transparent;
-            --prism-text: inherit;
-            --prism-comment: inherit;
-            --prism-keyword: inherit;
-            --prism-string: inherit;
-            --prism-number: inherit;
-            --prism-function: inherit;
-            --prism-variable: inherit;
-            --prism-type: inherit;
-            --prism-operator: inherit;
-            --prism-punctuation: inherit;
-            --prism-property: inherit;
-            --prism-tag: inherit;
-            --prism-attribute: inherit;
-            --prism-class: inherit;
-            --prism-constant: inherit;
-            --prism-regex: inherit;
-            --prism-important: inherit;
-        }
-
-        // ========================================
-        // ESTILOS BASE DO COMPONENTE
-        // ========================================
-
-        pre,code { margin: 0; padding: 0;}
+        // ── Estilos base ─────────────────────────────────────────────────
         background: var(--prism-bg);
 
-        // Estilos base
+        pre, code { margin: 0; padding: 0; }
+
         code[class*="language-"],
         pre[class*="language-"] {
             color: var(--prism-text);
@@ -186,18 +76,15 @@
         }
 
         pre[class*="language-"] {
-            padding: 0;
-            margin: 0;
             overflow: auto;
-            border-radius: 8px;
+            border-radius: var(--matcha-radius-lg, 8px);
         }
 
         code[class*="language-"] {
-            padding: 0;
             background: transparent;
         }
 
-        // Cores específicas para syntax highlighting
+        // ── Token cores (mapeamento Prism → CSS vars semânticas) ─────────
         .token.comment,
         .token.prolog,
         .token.doctype,
@@ -206,20 +93,18 @@
             font-style: italic;
         }
 
-        .token.punctuation {
-            color: var(--prism-punctuation);
-        }
+        .token.punctuation { color: var(--prism-punctuation); }
 
         .token.property,
         .token.tag,
-        .token.constant,
         .token.symbol,
         .token.deleted {
             color: var(--prism-tag);
         }
 
         .token.boolean,
-        .token.number {
+        .token.number,
+        .token.constant {
             color: var(--prism-number);
         }
 
@@ -248,35 +133,23 @@
             color: var(--prism-function);
         }
 
-        .token.keyword {
-            color: var(--prism-keyword);
-        }
+        .token.keyword { color: var(--prism-keyword); }
 
-        .token.regex,
-        .token.important {
-            color: var(--prism-regex);
-        }
+        .token.regex { color: var(--prism-regex); }
 
-        .token.important,
-        .token.bold {
+        .token.important {
+            color: var(--prism-important);
             font-weight: bold;
         }
 
-        .token.italic {
-            font-style: italic;
-        }
-
-        .token.entity {
-            cursor: help;
-        }
-
-        // ========================================
-        // CONTAINER E COPY BUTTON
-        // ========================================
+        .token.bold   { font-weight: bold; }
+        .token.italic { font-style: italic; }
+        .token.entity { cursor: help; }
 
+        // ── Container + copy button ──────────────────────────────────────
         .matcha-highlight-container {
             position: relative;
-            border-radius: 8px;
+            border-radius: var(--matcha-radius-lg, 8px);
         }
 
         .copy-button {
@@ -284,13 +157,8 @@
             transition: opacity 0.2s ease;
         }
 
-        &:hover .copy-button {
-            opacity: 1;
-        }
+        &:hover .copy-button { opacity: 1; }
 
-        .highlight-content {
-            position: relative;
-        }
+        .highlight-content { position: relative; }
     }
-
 }

package/components/matcha-hint-text.scss

@@ -64,3 +64,24 @@
         }
     }
 }
+
+// ── 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.