@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-checkbox.scss

@@ -1,255 +1,255 @@
-// =============================================================================
-// matcha-checkbox.scss — Figma DSV3 matcha/checkbox (628fe66922)
-// Touch target 36×36 pill + SVG glyph 24×24 (off / checked / indeterminate).
-// Input nativo sr-only mantém a11y; visual via SVG inline no template.
-// =============================================================================
-
-@mixin matcha-checkbox($theme) {
-    matcha-checkbox {
-        // ── Off state — glyph cinza (icon-default) ─────────────────────────
-        // Default applies to all colors (vector unchecked é sempre cinza).
-        .matcha-checkbox-icon--outline {
-            color: var(--matcha-color-icon-default);
-        }
-
-        // ── Hover (off) — bg sutil surface alpha (Figma matcha/state-layer) ─
-        &:not([disabled]):hover .matcha-checkbox-container {
-            background: var(--matcha-color-surface-hover, rgba(0, 0, 0, 0.04));
-            box-shadow: var(--matcha-shadow-1);
-        }
-
-        // ── Hover/Focus quando checked/indeterminate — accent-alpha bg ─────
-        &:not([disabled]):hover :is([checked], [indeterminate]) ~ .matcha-checkbox-container,
-        // fallback global (estado checked/indeterminate sem condicional)
-        &:not([disabled]):hover .matcha-checkbox-container:has(.matcha-checkbox-icon--checked),
-        &:not([disabled]):hover .matcha-checkbox-container:has(.matcha-checkbox-icon--indeterminate) {
-            background: var(--matcha-color-accent-alpha, rgba(0, 148, 0, 0.1));
-        }
-
-        // ── Focus visible — border 2px info (Figma) ────────────────────────
-        .matcha-checkbox-container:has(input:focus-visible) {
-            box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-info);
-        }
-
-        // ── Cores per-color: checked + indeterminate fill = a cor escolhida
-        // O .matcha-checkbox-icon--outline ignora color (sempre cinza).
-
-        // Sem [color]: accent
-        &:not([color]) .matcha-checkbox-icon--checked,
-        &:not([color]) .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent); }
-
-        // Semântica
-        &[color="accent"]  .matcha-checkbox-icon--checked,
-        &[color="accent"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent); }
-        &[color="primary"] .matcha-checkbox-icon--checked,
-        &[color="primary"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-primary); }
-        &[color="success"] .matcha-checkbox-icon--checked,
-        &[color="success"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-success); }
-        &[color="warn"]    .matcha-checkbox-icon--checked,
-        &[color="warn"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-warn); }
-        &[color="danger"]  .matcha-checkbox-icon--checked,
-        &[color="danger"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-danger); }
-        &[color="info"]    .matcha-checkbox-icon--checked,
-        &[color="info"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-info); }
-
-        // ── Error state — glyph fica danger (override em outline, checked, indeterminate)
-        &.matcha-checkbox-error,
-        &[error] {
-            .matcha-checkbox-icon { color: var(--matcha-color-danger); }
-        }
-
-        // ── Disabled — opacity reduzida (host) ─────────────────────────────
-        &[disabled] .matcha-checkbox-icon { color: var(--matcha-color-icon-default); }
-
-        // Label colors
-        .matcha-checkbox-label { color: var(--matcha-checkbox-label-color, var(--matcha-color-text-primary)); }
-
-        &[disabled] .matcha-checkbox-label {
-            color: var(--matcha-color-disabled-fg);
-        }
-    }
-}
-
-// =============================================================================
-// Bloco estrutural — fora do mixin de tema
-// Spec Figma matcha/checkbox: touch target 36×36 pill, SVG glyph 24×24 inset.
-// =============================================================================
-
-// Touch target pill 36×36 — Figma spec, sem token genérico equivalente
-$matcha-checkbox-touch: 36px;
-
-// Touch target — pill com state layer (hover halo + active overlay)
-.matcha-checkbox-container {
-    position:        relative;
-    display:         inline-flex;
-    align-items:     center;
-    justify-content: center;
-    width:           $matcha-checkbox-touch;
-    height:          $matcha-checkbox-touch;
-    flex-shrink:     0;
-    border-radius:   var(--matcha-radius-pill);
-    overflow:        hidden;
-    transition:
-        background-color var(--matcha-duration-instant) var(--matcha-easing-standard),
-        box-shadow       var(--matcha-duration-instant) var(--matcha-easing-standard);
-
-    // State layer ::before — halo translúcido pra hover/active
-    &::before {
-        content:        '';
-        position:       absolute;
-        inset:          0;
-        background:     currentColor;
-        opacity:        0;
-        border-radius:  inherit;
-        pointer-events: none;
-        transition:     opacity var(--matcha-duration-instant) linear;
-    }
-}
-
-// Active overlay — só quando não disabled
-matcha-checkbox:not([disabled]) .matcha-checkbox-container:active::before {
-    opacity: var(--matcha-state-active);
-}
-
-matcha-checkbox {
-    display: inline-block;  // host wrapper — sem flex próprio (label faz layout)
-    cursor:  pointer;
-
-    // Label interno controla o layout horizontal (touch target + texto).
-    // align-items: center centraliza visualmente o LABEL com o glyph 24×24
-    // do touch target. Description/hint fluem abaixo via column do .matcha-checkbox-text.
-    > .matcha-checkbox {
-        display:     inline-flex;
-        align-items: center;
-        gap:         var(--matcha-space-100);
-        cursor:      pointer;
-    }
-
-    // Input nativo — sr-only (semântica + sincroniza estado, sem visual próprio)
-    input[type="checkbox"] {
-        position:    absolute;
-        width:       var(--matcha-border-hairline);
-        height:      var(--matcha-border-hairline);
-        padding:     0;
-        margin:      calc(-1 * var(--matcha-border-hairline));
-        overflow:    hidden;
-        clip:        rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border:      0;
-    }
-
-    // SVG glyph — 24×24 dentro do touch target 36×36 (centralizado por flex)
-    .matcha-checkbox-icon {
-        width:          24px; // Figma matcha/icon size canonical
-        height:         24px;
-        flex-shrink:    0;
-        pointer-events: none;
-        transition:     color var(--matcha-duration-fast) var(--matcha-easing-standard);
-    }
-
-    // Label column — gap 2 entre label/description/hint. Sem padding-top
-    // (centralização vem do align-items:center do flex pai).
-    .matcha-checkbox-text {
-        display:        flex;
-        flex-direction: column;
-        gap:            var(--matcha-space-025);
-        min-width:      0;
-    }
-
-    // Label — Figma matcha/text/body-sm (12/16 Regular)
-    .matcha-checkbox-label {
-        font-family: var(--matcha-font-family);
-        font-size:   var(--matcha-text-body-sm);
-        font-weight: var(--matcha-weight-regular);
-        line-height: var(--matcha-leading-body-sm);
-        user-select: none;
-        cursor:      pointer;
-    }
-
-    // Asterisco de required — danger color, espaçamento sutil
-    .matcha-checkbox-required {
-        color:        var(--matcha-color-danger);
-        margin-left:  var(--matcha-space-025);
-        user-select:  none;
-    }
-
-    // Description — Figma matcha/text/caption (11/14 Regular text-secondary)
-    .matcha-checkbox-description {
-        font-family:    var(--matcha-font-family);
-        font-size:      var(--matcha-text-p-tiny);
-        font-weight:    var(--matcha-weight-regular);
-        line-height:    var(--matcha-leading-p-tiny);
-        letter-spacing: var(--matcha-letter-spacing-caption);
-        color:          var(--matcha-color-text-secondary);
-        user-select:    none;
-    }
-
-    // Hint text — Figma matcha/text/caption (11/14). Cor secondary por default,
-    // vira danger quando o host tem error (.matcha-checkbox-error).
-    .matcha-checkbox-hint {
-        font-family:    var(--matcha-font-family);
-        font-size:      var(--matcha-text-p-tiny);
-        font-weight:    var(--matcha-weight-regular);
-        line-height:    var(--matcha-leading-p-tiny);
-        letter-spacing: var(--matcha-letter-spacing-caption);
-        color:          var(--matcha-color-text-secondary);
-        user-select:    none;
-    }
-    // Error state: hint danger + glyph danger (override em todos os 3 SVGs)
-    .matcha-checkbox-error {
-        .matcha-checkbox-hint { color: var(--matcha-color-danger); }
-        .matcha-checkbox-icon { color: var(--matcha-color-danger); }
-    }
-
-    // Disabled — opacity 0.5 (Figma) + bloqueio de pointer events
-    &[disabled] {
-        pointer-events: none;
-        cursor:         default;
-        opacity:        var(--matcha-opacity-secondary); // 0.54 ≈ Figma 0.5
-
-        .matcha-checkbox-label { cursor: default; }
-    }
-
-    // Reduced motion (WCAG 2.3.3)
-    @media (prefers-reduced-motion: reduce) {
-        .matcha-checkbox-container,
-        .matcha-checkbox-container::before,
-        .matcha-checkbox-icon { transition: none; }
-    }
-}
-
-// ── Forced colors (Windows High Contrast) ──
-@media (forced-colors: active) {
-    matcha-checkbox {
-        .matcha-checkbox-box {
-            border: 1px solid CanvasText !important;
-            background: Canvas !important;
-        }
-
-        &.is-checked .matcha-checkbox-box,
-        &[checked] .matcha-checkbox-box {
-            background: Highlight !important;
-            border-color: Highlight !important;
-        }
-
-        &:focus-visible .matcha-checkbox-box {
-            outline: 2px solid CanvasText !important;
-            outline-offset: 2px;
-        }
-
-        &.is-disabled,
-        &[disabled] {
-            opacity: 0.5;
-
-            .matcha-checkbox-box { border-color: GrayText !important; }
-        }
-    }
-}
-
-// ── Print ──
-// Checkbox preserva estado (form value matter em papel).
-@media print {
-    matcha-checkbox .matcha-checkbox-box {
-        border: 1px solid currentColor !important;
-    }
-}
+// =============================================================================
+// matcha-checkbox.scss — Figma DSV3 matcha/checkbox (628fe66922)
+// Touch target 36×36 pill + SVG glyph 24×24 (off / checked / indeterminate).
+// Input nativo sr-only mantém a11y; visual via SVG inline no template.
+// =============================================================================
+
+@mixin matcha-checkbox($theme) {
+    matcha-checkbox {
+        // ── Off state — glyph cinza (icon-default) ─────────────────────────
+        // Default applies to all colors (vector unchecked é sempre cinza).
+        .matcha-checkbox-icon--outline {
+            color: var(--matcha-color-icon-default);
+        }
+
+        // ── Hover (off) — bg sutil surface alpha (Figma matcha/state-layer) ─
+        &:not([disabled]):hover .matcha-checkbox-container {
+            background: var(--matcha-color-surface-hover, rgba(0, 0, 0, 0.04));
+            box-shadow: var(--matcha-shadow-1);
+        }
+
+        // ── Hover/Focus quando checked/indeterminate — accent-alpha bg ─────
+        &:not([disabled]):hover :is([checked], [indeterminate]) ~ .matcha-checkbox-container,
+        // fallback global (estado checked/indeterminate sem condicional)
+        &:not([disabled]):hover .matcha-checkbox-container:has(.matcha-checkbox-icon--checked),
+        &:not([disabled]):hover .matcha-checkbox-container:has(.matcha-checkbox-icon--indeterminate) {
+            background: var(--matcha-color-accent-alpha, rgba(0, 148, 0, 0.1));
+        }
+
+        // ── Focus visible — border 2px info (Figma) ────────────────────────
+        .matcha-checkbox-container:has(input:focus-visible) {
+            box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-info);
+        }
+
+        // ── Cores per-color: checked + indeterminate fill = a cor escolhida
+        // O .matcha-checkbox-icon--outline ignora color (sempre cinza).
+
+        // Sem [color]: accent
+        &:not([color]) .matcha-checkbox-icon--checked,
+        &:not([color]) .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent); }
+
+        // Semântica
+        &[color="accent"]  .matcha-checkbox-icon--checked,
+        &[color="accent"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-accent); }
+        &[color="primary"] .matcha-checkbox-icon--checked,
+        &[color="primary"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-primary); }
+        &[color="success"] .matcha-checkbox-icon--checked,
+        &[color="success"] .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-success); }
+        &[color="warn"]    .matcha-checkbox-icon--checked,
+        &[color="warn"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-warn); }
+        &[color="danger"]  .matcha-checkbox-icon--checked,
+        &[color="danger"]  .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-danger); }
+        &[color="info"]    .matcha-checkbox-icon--checked,
+        &[color="info"]    .matcha-checkbox-icon--indeterminate { color: var(--matcha-color-info); }
+
+        // ── Error state — glyph fica danger (override em outline, checked, indeterminate)
+        &.matcha-checkbox-error,
+        &[error] {
+            .matcha-checkbox-icon { color: var(--matcha-color-danger); }
+        }
+
+        // ── Disabled — opacity reduzida (host) ─────────────────────────────
+        &[disabled] .matcha-checkbox-icon { color: var(--matcha-color-icon-default); }
+
+        // Label colors
+        .matcha-checkbox-label { color: var(--matcha-checkbox-label-color, var(--matcha-color-text-primary)); }
+
+        &[disabled] .matcha-checkbox-label {
+            color: var(--matcha-color-disabled-fg);
+        }
+    }
+}
+
+// =============================================================================
+// Bloco estrutural — fora do mixin de tema
+// Spec Figma matcha/checkbox: touch target 36×36 pill, SVG glyph 24×24 inset.
+// =============================================================================
+
+// Touch target pill 36×36 — Figma spec, sem token genérico equivalente
+$matcha-checkbox-touch: 36px;
+
+// Touch target — pill com state layer (hover halo + active overlay)
+.matcha-checkbox-container {
+    position:        relative;
+    display:         inline-flex;
+    align-items:     center;
+    justify-content: center;
+    width:           $matcha-checkbox-touch;
+    height:          $matcha-checkbox-touch;
+    flex-shrink:     0;
+    border-radius:   var(--matcha-radius-pill);
+    overflow:        hidden;
+    transition:
+        background-color var(--matcha-duration-instant) var(--matcha-easing-standard),
+        box-shadow       var(--matcha-duration-instant) var(--matcha-easing-standard);
+
+    // State layer ::before — halo translúcido pra hover/active
+    &::before {
+        content:        '';
+        position:       absolute;
+        inset:          0;
+        background:     currentColor;
+        opacity:        0;
+        border-radius:  inherit;
+        pointer-events: none;
+        transition:     opacity var(--matcha-duration-instant) linear;
+    }
+}
+
+// Active overlay — só quando não disabled
+matcha-checkbox:not([disabled]) .matcha-checkbox-container:active::before {
+    opacity: var(--matcha-state-active);
+}
+
+matcha-checkbox {
+    display: inline-block;  // host wrapper — sem flex próprio (label faz layout)
+    cursor:  pointer;
+
+    // Label interno controla o layout horizontal (touch target + texto).
+    // align-items: center centraliza visualmente o LABEL com o glyph 24×24
+    // do touch target. Description/hint fluem abaixo via column do .matcha-checkbox-text.
+    > .matcha-checkbox {
+        display:     inline-flex;
+        align-items: center;
+        gap:         var(--matcha-space-100);
+        cursor:      pointer;
+    }
+
+    // Input nativo — sr-only (semântica + sincroniza estado, sem visual próprio)
+    input[type="checkbox"] {
+        position:    absolute;
+        width:       var(--matcha-border-hairline);
+        height:      var(--matcha-border-hairline);
+        padding:     0;
+        margin:      calc(-1 * var(--matcha-border-hairline));
+        overflow:    hidden;
+        clip:        rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border:      0;
+    }
+
+    // SVG glyph — 24×24 dentro do touch target 36×36 (centralizado por flex)
+    .matcha-checkbox-icon {
+        width:          24px; // Figma matcha/icon size canonical
+        height:         24px;
+        flex-shrink:    0;
+        pointer-events: none;
+        transition:     color var(--matcha-duration-fast) var(--matcha-easing-standard);
+    }
+
+    // Label column — gap 2 entre label/description/hint. Sem padding-top
+    // (centralização vem do align-items:center do flex pai).
+    .matcha-checkbox-text {
+        display:        flex;
+        flex-direction: column;
+        gap:            var(--matcha-space-025);
+        min-width:      0;
+    }
+
+    // Label — Figma matcha/text/body-sm (12/16 Regular)
+    .matcha-checkbox-label {
+        font-family: var(--matcha-font-family);
+        font-size:   var(--matcha-text-body-sm);
+        font-weight: var(--matcha-weight-regular);
+        line-height: var(--matcha-leading-body-sm);
+        user-select: none;
+        cursor:      pointer;
+    }
+
+    // Asterisco de required — danger color, espaçamento sutil
+    .matcha-checkbox-required {
+        color:        var(--matcha-color-danger);
+        margin-left:  var(--matcha-space-025);
+        user-select:  none;
+    }
+
+    // Description — Figma matcha/text/caption (11/14 Regular text-secondary)
+    .matcha-checkbox-description {
+        font-family:    var(--matcha-font-family);
+        font-size:      var(--matcha-text-p-tiny);
+        font-weight:    var(--matcha-weight-regular);
+        line-height:    var(--matcha-leading-p-tiny);
+        letter-spacing: var(--matcha-letter-spacing-caption);
+        color:          var(--matcha-color-text-secondary);
+        user-select:    none;
+    }
+
+    // Hint text — Figma matcha/text/caption (11/14). Cor secondary por default,
+    // vira danger quando o host tem error (.matcha-checkbox-error).
+    .matcha-checkbox-hint {
+        font-family:    var(--matcha-font-family);
+        font-size:      var(--matcha-text-p-tiny);
+        font-weight:    var(--matcha-weight-regular);
+        line-height:    var(--matcha-leading-p-tiny);
+        letter-spacing: var(--matcha-letter-spacing-caption);
+        color:          var(--matcha-color-text-secondary);
+        user-select:    none;
+    }
+    // Error state: hint danger + glyph danger (override em todos os 3 SVGs)
+    .matcha-checkbox-error {
+        .matcha-checkbox-hint { color: var(--matcha-color-danger); }
+        .matcha-checkbox-icon { color: var(--matcha-color-danger); }
+    }
+
+    // Disabled — opacity 0.5 (Figma) + bloqueio de pointer events
+    &[disabled] {
+        pointer-events: none;
+        cursor:         default;
+        opacity:        var(--matcha-opacity-secondary); // 0.54 ≈ Figma 0.5
+
+        .matcha-checkbox-label { cursor: default; }
+    }
+
+    // Reduced motion (WCAG 2.3.3)
+    @media (prefers-reduced-motion: reduce) {
+        .matcha-checkbox-container,
+        .matcha-checkbox-container::before,
+        .matcha-checkbox-icon { transition: none; }
+    }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+    matcha-checkbox {
+        .matcha-checkbox-box {
+            border: 1px solid CanvasText !important;
+            background: Canvas !important;
+        }
+
+        &.is-checked .matcha-checkbox-box,
+        &[checked] .matcha-checkbox-box {
+            background: Highlight !important;
+            border-color: Highlight !important;
+        }
+
+        &:focus-visible .matcha-checkbox-box {
+            outline: 2px solid CanvasText !important;
+            outline-offset: 2px;
+        }
+
+        &.is-disabled,
+        &[disabled] {
+            opacity: 0.5;
+
+            .matcha-checkbox-box { border-color: GrayText !important; }
+        }
+    }
+}
+
+// ── Print ──
+// Checkbox preserva estado (form value matter em papel).
+@media print {
+    matcha-checkbox .matcha-checkbox-box {
+        border: 1px solid currentColor !important;
+    }
+}