@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-tooltip.scss

@@ -1,224 +1,224 @@
-// =============================================================================
-// matcha-tooltip.scss — Tooltip with arrow (4 positions + close variant)
-// Aligned with Figma DSV3 matcha/tooltip (14846:89): 5 variants
-//
-// Figma canonical:
-//   bg     = var(--matcha-color-text-primary, #e8eaed)        (light em dark theme)
-//   text   = var(--matcha-color-surface-card, #1c1f26)        (dark sobre bg light)
-//   pad    = 8 16 (variante close: 8 12 8 16, gap 8)
-//   radius = 8 (var(--matcha-radius-lg))
-//   font   = Manrope Medium 14/20, letter-spacing 0.2
-//   arrow  = 13.856 × 6 (triângulo, mesma cor do bg)
-// =============================================================================
-
-.matcha-tooltip-content {
-    position: absolute;
-    z-index: var(--matcha-z-tooltip, 400);
-
-    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-    border-radius: var(--matcha-radius-lg, 8px);
-
-    font-family: var(--matcha-font-family, 'Manrope', sans-serif);
-    font-size: var(--matcha-text-body-md, 14px);
-    font-weight: var(--matcha-weight-medium, 500);
-    line-height: var(--matcha-leading-body-md, 20px);
-    letter-spacing: 0.2px;
-
-    width: auto;
-    max-width: 500px;
-    text-overflow: ellipsis;
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--matcha-space-100, 8px);
-    text-align: center;
-    // Tooltip informativo NÃO captura o ponteiro — clicar "através" dele atinge o
-    // elemento abaixo (ex.: pills clicáveis do stepper, botões pequenos). Tooltip
-    // sobrepondo o trigger jamais deve bloquear o clique. Só o variante interativo
-    // --with-close reativa pointer-events (pra clicar no X / hover-to-stay).
-    pointer-events: none;
-
-    // Variante com close — gap 8, pr-12 (espaço pro X) + ponteiro ativo (interativa)
-    &.matcha-tooltip-content--with-close {
-        padding-right: var(--matcha-space-150, 12px);
-        pointer-events: auto;
-    }
-}
-
-// ── Arrow (mesma cor do bg) — 13.856×6 — ::after triangular ────────────────
-// Tamanho via border-style: solid trick. base 13.856 ≈ 2×7px borders → border-width
-// horizontal ~7, vertical 6. Mantemos arredondado pelo Figma (13.856 × 6).
-//
-// Posicionamento: arrow normalmente centrada no box (left: 50% ou top: 50%), mas
-// quando o tooltip é clamped pela viewport, o directive computa um shift em px
-// (--matcha-tooltip-arrow-shift-x / -y) pra arrow re-alinhar com o trigger.
-// Default 0px (fallback puro 50% — comportamento padrão sem clamp).
-.matcha-tooltip-content_above::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 6px 7px 0 7px;
-    bottom: -6px;
-    left: calc(50% + var(--matcha-tooltip-arrow-shift-x, 0px));
-    transform: translateX(-50%);
-}
-
-.matcha-tooltip-content_below::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 7px 6px 7px;
-    top: -6px;
-    left: calc(50% + var(--matcha-tooltip-arrow-shift-x, 0px));
-    transform: translateX(-50%);
-}
-
-.matcha-tooltip-content_left::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 7px 0 7px 6px;
-    top: calc(50% + var(--matcha-tooltip-arrow-shift-y, 0px));
-    right: -6px;
-    transform: translateY(-50%);
-}
-
-.matcha-tooltip-content_right::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 7px 6px 7px 0;
-    top: calc(50% + var(--matcha-tooltip-arrow-shift-y, 0px));
-    left: -6px;
-    transform: translateY(-50%);
-}
-
-// ── Close button (16×16 com X via Matcha icon font) ────────────────────────
-.matcha-tooltip-close {
-    appearance: none;
-    background: transparent;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    pointer-events: auto;
-    transition: opacity var(--matcha-duration-instant, 80ms) ease;
-
-    &::before {
-        content: "\e92a";
-        font-family: 'MatchaIcons';
-        font-size: var(--matcha-icon-size-sm, 16px);
-        line-height: 16px;
-        width: 16px;
-        height: 16px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &:focus-visible {
-        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
-        outline-offset: 2px;
-        border-radius: var(--matcha-radius-sm, 4px);
-    }
-}
-
-// =============================================================================
-// Theme mixin — cores do bg/text/arrow vinculadas ao tema
-// =============================================================================
-@mixin matcha-tooltip-theme($theme) {
-    .matcha-tooltip-content {
-        // Figma: bg = text-primary (light em dark theme), text = surface-card (dark)
-        background-color: var(--matcha-color-text-primary);
-        color: var(--matcha-color-surface-card);
-        box-shadow: var(--matcha-shadow-2, 0 4px 12px rgba(0, 0, 0, 0.18));
-    }
-
-    // Arrow: mesma cor do bg, lado oposto à direção do tooltip
-    .matcha-tooltip-content_above::after {
-        border-color: var(--matcha-color-text-primary)
-                      transparent transparent transparent;
-    }
-    .matcha-tooltip-content_below::after {
-        border-color: transparent transparent
-                      var(--matcha-color-text-primary) transparent;
-    }
-    .matcha-tooltip-content_left::after {
-        border-color: transparent transparent transparent
-                      var(--matcha-color-text-primary);
-    }
-    .matcha-tooltip-content_right::after {
-        border-color: transparent
-                      var(--matcha-color-text-primary)
-                      transparent transparent;
-    }
-
-    .matcha-tooltip-close {
-        color: var(--matcha-color-surface-card);
-        opacity: 0.7;
-
-        &:hover  { opacity: 1; }
-        &:active { opacity: 0.9; }
-    }
-}
-
-// =============================================================================
-// A11y / modernity media queries
-// =============================================================================
-
-// Forced colors (Windows High Contrast) — usa system colors visíveis.
-@media (forced-colors: active) {
-    .matcha-tooltip-content {
-        background: Canvas !important;
-        color: CanvasText !important;
-        border: 1px solid CanvasText;
-        box-shadow: none !important;
-    }
-
-    .matcha-tooltip-content_above::after,
-    .matcha-tooltip-content_below::after,
-    .matcha-tooltip-content_left::after,
-    .matcha-tooltip-content_right::after {
-        // Arrow vira invisível em high-contrast (sem solução elegante com border-color),
-        // a borda do tooltip cobre a função de delimitação visual.
-        display: none;
-    }
-
-    .matcha-tooltip-close:focus-visible {
-        outline: 2px solid CanvasText !important;
-    }
-}
-
-// Reduced motion — entra/sai sem animação.
-@media (prefers-reduced-motion: reduce) {
-    .matcha-tooltip-content {
-        transition: none !important;
-        animation: none !important;
-    }
-
-    .matcha-tooltip-close {
-        transition: none !important;
-    }
-}
-
-// Print — chrome flutuante some.
-@media print {
-    .matcha-tooltip-content {
-        display: none !important;
-    }
-}
+// =============================================================================
+// matcha-tooltip.scss — Tooltip with arrow (4 positions + close variant)
+// Aligned with Figma DSV3 matcha/tooltip (14846:89): 5 variants
+//
+// Figma canonical:
+//   bg     = var(--matcha-color-text-primary, #e8eaed)        (light em dark theme)
+//   text   = var(--matcha-color-surface-card, #1c1f26)        (dark sobre bg light)
+//   pad    = 8 16 (variante close: 8 12 8 16, gap 8)
+//   radius = 8 (var(--matcha-radius-lg))
+//   font   = Manrope Medium 14/20, letter-spacing 0.2
+//   arrow  = 13.856 × 6 (triângulo, mesma cor do bg)
+// =============================================================================
+
+.matcha-tooltip-content {
+    position: absolute;
+    z-index: var(--matcha-z-tooltip, 400);
+
+    padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+    border-radius: var(--matcha-radius-lg, 8px);
+
+    font-family: var(--matcha-font-family, 'Manrope', sans-serif);
+    font-size: var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-body-md, 20px);
+    letter-spacing: 0.2px;
+
+    width: auto;
+    max-width: 500px;
+    text-overflow: ellipsis;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--matcha-space-100, 8px);
+    text-align: center;
+    // Tooltip informativo NÃO captura o ponteiro — clicar "através" dele atinge o
+    // elemento abaixo (ex.: pills clicáveis do stepper, botões pequenos). Tooltip
+    // sobrepondo o trigger jamais deve bloquear o clique. Só o variante interativo
+    // --with-close reativa pointer-events (pra clicar no X / hover-to-stay).
+    pointer-events: none;
+
+    // Variante com close — gap 8, pr-12 (espaço pro X) + ponteiro ativo (interativa)
+    &.matcha-tooltip-content--with-close {
+        padding-right: var(--matcha-space-150, 12px);
+        pointer-events: auto;
+    }
+}
+
+// ── Arrow (mesma cor do bg) — 13.856×6 — ::after triangular ────────────────
+// Tamanho via border-style: solid trick. base 13.856 ≈ 2×7px borders → border-width
+// horizontal ~7, vertical 6. Mantemos arredondado pelo Figma (13.856 × 6).
+//
+// Posicionamento: arrow normalmente centrada no box (left: 50% ou top: 50%), mas
+// quando o tooltip é clamped pela viewport, o directive computa um shift em px
+// (--matcha-tooltip-arrow-shift-x / -y) pra arrow re-alinhar com o trigger.
+// Default 0px (fallback puro 50% — comportamento padrão sem clamp).
+.matcha-tooltip-content_above::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 6px 7px 0 7px;
+    bottom: -6px;
+    left: calc(50% + var(--matcha-tooltip-arrow-shift-x, 0px));
+    transform: translateX(-50%);
+}
+
+.matcha-tooltip-content_below::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 7px 6px 7px;
+    top: -6px;
+    left: calc(50% + var(--matcha-tooltip-arrow-shift-x, 0px));
+    transform: translateX(-50%);
+}
+
+.matcha-tooltip-content_left::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 7px 0 7px 6px;
+    top: calc(50% + var(--matcha-tooltip-arrow-shift-y, 0px));
+    right: -6px;
+    transform: translateY(-50%);
+}
+
+.matcha-tooltip-content_right::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 7px 6px 7px 0;
+    top: calc(50% + var(--matcha-tooltip-arrow-shift-y, 0px));
+    left: -6px;
+    transform: translateY(-50%);
+}
+
+// ── Close button (16×16 com X via Matcha icon font) ────────────────────────
+.matcha-tooltip-close {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    pointer-events: auto;
+    transition: opacity var(--matcha-duration-instant, 80ms) ease;
+
+    &::before {
+        content: "\e92a";
+        font-family: 'MatchaIcons';
+        font-size: var(--matcha-icon-size-sm, 16px);
+        line-height: 16px;
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
+        outline-offset: 2px;
+        border-radius: var(--matcha-radius-sm, 4px);
+    }
+}
+
+// =============================================================================
+// Theme mixin — cores do bg/text/arrow vinculadas ao tema
+// =============================================================================
+@mixin matcha-tooltip-theme($theme) {
+    .matcha-tooltip-content {
+        // Figma: bg = text-primary (light em dark theme), text = surface-card (dark)
+        background-color: var(--matcha-color-text-primary);
+        color: var(--matcha-color-surface-card);
+        box-shadow: var(--matcha-shadow-2, 0 4px 12px rgba(0, 0, 0, 0.18));
+    }
+
+    // Arrow: mesma cor do bg, lado oposto à direção do tooltip
+    .matcha-tooltip-content_above::after {
+        border-color: var(--matcha-color-text-primary)
+                      transparent transparent transparent;
+    }
+    .matcha-tooltip-content_below::after {
+        border-color: transparent transparent
+                      var(--matcha-color-text-primary) transparent;
+    }
+    .matcha-tooltip-content_left::after {
+        border-color: transparent transparent transparent
+                      var(--matcha-color-text-primary);
+    }
+    .matcha-tooltip-content_right::after {
+        border-color: transparent
+                      var(--matcha-color-text-primary)
+                      transparent transparent;
+    }
+
+    .matcha-tooltip-close {
+        color: var(--matcha-color-surface-card);
+        opacity: 0.7;
+
+        &:hover  { opacity: 1; }
+        &:active { opacity: 0.9; }
+    }
+}
+
+// =============================================================================
+// A11y / modernity media queries
+// =============================================================================
+
+// Forced colors (Windows High Contrast) — usa system colors visíveis.
+@media (forced-colors: active) {
+    .matcha-tooltip-content {
+        background: Canvas !important;
+        color: CanvasText !important;
+        border: 1px solid CanvasText;
+        box-shadow: none !important;
+    }
+
+    .matcha-tooltip-content_above::after,
+    .matcha-tooltip-content_below::after,
+    .matcha-tooltip-content_left::after,
+    .matcha-tooltip-content_right::after {
+        // Arrow vira invisível em high-contrast (sem solução elegante com border-color),
+        // a borda do tooltip cobre a função de delimitação visual.
+        display: none;
+    }
+
+    .matcha-tooltip-close:focus-visible {
+        outline: 2px solid CanvasText !important;
+    }
+}
+
+// Reduced motion — entra/sai sem animação.
+@media (prefers-reduced-motion: reduce) {
+    .matcha-tooltip-content {
+        transition: none !important;
+        animation: none !important;
+    }
+
+    .matcha-tooltip-close {
+        transition: none !important;
+    }
+}
+
+// Print — chrome flutuante some.
+@media print {
+    .matcha-tooltip-content {
+        display: none !important;
+    }
+}