@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-avatar.scss

@@ -10,46 +10,71 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  overflow: hidden;
+  // SEM overflow:hidden — o status indicator fica no canto fora do círculo
+  // visível e seria cortado. A <img> com border-radius inherit já se arredonda
+  // sozinha; SVG e Initials ficam dentro dos bounds.
   border-radius: var(--matcha-radius-pill, 9999px);
 
   font-weight: var(--matcha-weight-medium, 500);
   user-select: none;
   flex-shrink: 0;
+}
+
+// =============================================================================
+// Ring colored (additive) — controlado pelo [ring] @Input do component.
+// 2px solid + halo alpha externo. Não ocupa layout (box-shadow puro).
+//
+// Aplicado no .matcha-avatar INNER (não no host) porque o inner é quem tem
+// width/height/border-radius:pill — box-shadow segue o radius desse elemento
+// e renderiza circular. No host (inline default) sairia retangular.
+// =============================================================================
+matcha-avatar[ring] .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-avatar-ring-color, currentColor);
+}
 
-  // ── Sizes (aligned with Figma) ──
+matcha-avatar[ring]:not([ring="neutral"]) .matcha-avatar {
+  box-shadow:
+    0 0 0 2px transparent,
+    0 0 0 3px var(--matcha-avatar-ring-color, currentColor),
+    0 0 0 5px var(--matcha-avatar-ring-halo, transparent);
+}
+
+// ── Variants (sizes, initials, icon, disabled) — nested em .matcha-avatar pra
+// usar `&.matcha-avatar-*` syntax. Bloco separado do base styles (linha 8-21)
+// porque matcha-avatar[ring] (acima) é regra absoluta, não nested.
+.matcha-avatar {
+  // ── Sizes — Canonical 5-step scale: tiny 24 · small 40 · medium 56 · large 80 · huge 96.
+  // Abbreviations kept as @deprecated aliases, mapped BY PIXEL SIZE (old 32px `sm` dropped → tiny).
+  // NOTE: --matcha-avatar-* tokens still carry the legacy abbreviated names; re-tier them to
+  // tiny/small/medium/large/huge on the Figma/DSV3 side (token rename is design-driven).
+  &.matcha-avatar-tiny,
   &.matcha-avatar-xs,
-  &.matcha-avatar-tiny {
+  &.matcha-avatar-sm {
     width: var(--matcha-avatar-xs, 24px);
     height: var(--matcha-avatar-xs, 24px);
     font-size: var(--matcha-text-2xs, 10px);
     line-height: 1;
   }
 
-  &.matcha-avatar-sm,
-  &.matcha-avatar-small {
-    width: var(--matcha-avatar-sm, 32px);
-    height: var(--matcha-avatar-sm, 32px);
-    font-size: var(--matcha-text-sm, 12px);
-    line-height: 1;
-  }
-
-  &.matcha-avatar-md,
-  &.matcha-avatar-medium {
+  &.matcha-avatar-small,
+  &.matcha-avatar-md {
     width: var(--matcha-avatar-md, 40px);
     height: var(--matcha-avatar-md, 40px);
     font-size: var(--matcha-text-md, 14px);
     line-height: 1;
   }
 
-  &.matcha-avatar-lg,
-  &.matcha-avatar-large {
+  &.matcha-avatar-medium,
+  &.matcha-avatar-lg {
     width: var(--matcha-avatar-lg, 56px);
     height: var(--matcha-avatar-lg, 56px);
     font-size: var(--matcha-text-2xl, 20px);
     line-height: 1;
   }
 
+  &.matcha-avatar-large,
   &.matcha-avatar-xl {
     width: var(--matcha-avatar-xl, 80px);
     height: var(--matcha-avatar-xl, 80px);
@@ -57,8 +82,8 @@
     line-height: 1;
   }
 
-  &.matcha-avatar-2xl,
-  &.matcha-avatar-huge {
+  &.matcha-avatar-huge,
+  &.matcha-avatar-2xl {
     width: var(--matcha-avatar-2xl, 96px);
     height: var(--matcha-avatar-2xl, 96px);
     font-size: var(--matcha-text-4xl, 32px);
@@ -94,14 +119,94 @@
   }
 }
 
+// ── Placeholder — vazado canônico (Figma matcha/avatar 5668:32088) ──────────
+// SVG usa fill-rule=evenodd: disco preenchido com currentColor + silhueta vazada.
+// `currentColor` do disco precisa ser a COR DA MARCA (não o contrast da .color class
+// global, que é branco/preto). Override aqui força o token de palette.
+.matcha-avatar.matcha-avatar--placeholder {
+  background: transparent !important;
+
+  &.light-blue { color: var(--matcha-color-palette-light-blue) !important; }
+  &.pink       { color: var(--matcha-color-palette-pink) !important; }
+  &.teal       { color: var(--matcha-color-palette-teal) !important; }
+  &.purple     { color: var(--matcha-color-palette-purple) !important; }
+  &.orange     { color: var(--matcha-color-palette-orange) !important; }
+  &.yellow     { color: var(--matcha-color-palette-yellow) !important; }
+  &.neutral    { color: var(--matcha-color-icon-default) !important; }
+}
+
+// Neutral em Initials — cinza canônico Figma (icon-default).
+.matcha-avatar:not(.matcha-avatar--placeholder).neutral {
+  background: var(--matcha-color-icon-default);
+}
+
+// ── Initials — bg + fg por palette canônica Figma DSV3 (6 cores) ────────────
+// O palette inverte por tema (light=tons saturados, dark=tons claros). text-primary
+// também inverte (#1a1d21 light / #e8eaed dark). Combinar os dois → contraste péssimo
+// em dark mode (1.2-2.9:1 FAIL). Por isso fg é fixed-per-color, não token-based.
+//
+// Light mode: pink/teal/purple bg escuros → fg branco. light-blue/orange/yellow bg
+//             claros → fg preto (light-blue precisa #000 puro pra AA por 0.08).
+// Dark mode:  todos os bg ficam lighter → fg preto funciona em tudo (5-12:1).
+
+.matcha-avatar:not(.matcha-avatar--placeholder) {
+  // Backgrounds (mesmo seletor pros 2 temas — palette token já inverte sozinho).
+  &.light-blue { background: var(--matcha-color-palette-light-blue); }
+  &.pink       { background: var(--matcha-color-palette-pink); }
+  &.teal       { background: var(--matcha-color-palette-teal); }
+  &.purple     { background: var(--matcha-color-palette-purple); }
+  &.orange     { background: var(--matcha-color-palette-orange); }
+  &.yellow     { background: var(--matcha-color-palette-yellow); }
+}
+
+// Light mode — bgs saturados (pink/teal/purple = escuros), fg branco passa AA.
+// orange/yellow/light-blue = claros, fg precisa ser dark (#000 pra light-blue por margem).
+.theme-default-light .matcha-avatar:not(.matcha-avatar--placeholder) {
+  &.light-blue { color: #000; }              // 5.42:1 AA
+  &.pink       { color: #fff; }              // 4.95:1 AA
+  &.teal       { color: #fff; }              // 5.32:1 AA
+  &.purple     { color: #fff; }              // 6.30:1 AA
+  &.orange     { color: #1a1a1a; }           // 4.59:1 AA
+  &.yellow     { color: #1a1a1a; }           // 8.52:1 AAA
+  &.neutral    { color: #fff; }              // icon-default #5f656b vs #fff = 5.18:1 AA
+}
+
+// Dark mode — todos os bgs ficam lighter (#54c5f7, #e46291, #4fb7ad, etc).
+// Texto branco falha em todos. Texto dark funciona em todos.
+.theme-default-dark .matcha-avatar:not(.matcha-avatar--placeholder) {
+  &.light-blue { color: #1a1a1a; }           // 8.87:1 AAA
+  &.pink       { color: #1a1a1a; }           // 5.35:1 AA
+  &.teal       { color: #1a1a1a; }           // 7.22:1 AAA
+  &.purple     { color: #1a1a1a; }           // 4.98:1 AA
+  &.orange     { color: #1a1a1a; }           // 8.58:1 AAA
+  &.yellow     { color: #1a1a1a; }           // 11.94:1 AAA
+  &.neutral    { color: #1a1a1a; }           // icon-default #9aa0a6 vs #1a1a1a = 5.97:1 AA
+}
+
+// ── Screen reader only utility (visualmente oculto, lido por AT) ────────────
+.matcha-avatar-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 // ── Status indicator ────────────────────────────────────────────────────────
+// Cores estruturais (online/offline/busy) ficam fora do mixin pra renderizar
+// independente de classe de tema (`theme-default-light`, etc.). Tokens com
+// fallback hardcoded resolvem o caso de tema não inicializado.
 
 .matcha-avatar-status {
   position: absolute;
   bottom: 0;
   right: 0;
   border-radius: var(--matcha-radius-pill, 9999px);
-  border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface, white);
+  border: var(--matcha-border-thin, 2px) solid var(--matcha-color-surface-card, #fff);
   box-sizing: border-box;
 
   // Size scales with avatar
@@ -121,41 +226,76 @@
 
   .matcha-avatar-2xl &,
   .matcha-avatar-huge & { width: var(--matcha-avatar-status-2xl, 18px); height: var(--matcha-avatar-status-2xl, 18px); }
+
+  // Cores estruturais — fallback hardcoded pra funcionar mesmo sem tema.
+  &.matcha-avatar-status--online  { background-color: var(--matcha-color-success, #16a34a); }
+  &.matcha-avatar-status--offline { background-color: var(--matcha-color-text-placeholder, #9ca3af); }
+  &.matcha-avatar-status--busy    { background-color: var(--matcha-color-danger, #dc2626); }
 }
 
 // ── Theme mixin ─────────────────────────────────────────────────────────────
 
 @mixin matcha-avatar-theme($theme) {
   .matcha-avatar {
-    .matcha-avatar-icon {
-      color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
-    }
+    // Placeholder: SVG usa fill="currentColor" e herda do host. A classe de
+    // cor (.blue/.orange/etc) define color=foreground + background=cor cheia,
+    // então o icon vazado fica visível na cor escolhida pelo usuário.
+    // Sem fallback hardcoded aqui — quando o user não passa color, o @Input
+    // default 'blue' resolve via .blue do matcha-style.css.
 
     &.matcha-avatar--disabled,
     &.color-disabled {
-      background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-      color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
-
-      .matcha-avatar-icon {
-        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
-      }
+      background-color: var(--matcha-color-disabled-bg);
+      color: var(--matcha-color-disabled-fg);
     }
   }
 
-  // ── Status colors ──
+  // Status border-color por tema (estrutural já resolve cores de fundo via tokens).
   .matcha-avatar-status {
-    border-color: var(--matcha-color-surface, #{getSurface($theme)});
+    border-color: var(--matcha-color-surface-card);
+  }
+}
+
+// =============================================================================
+// A11y / modernity media queries
+// =============================================================================
 
-    &.matcha-avatar-status--online {
-      background-color: var(--matcha-color-success, #{getSuccess($theme)});
+// Forced colors (Windows High Contrast) — bg colors podem virar invisíveis,
+// usar SelectedItem/Highlight pros estados, CanvasText/Canvas pra borders.
+@media (forced-colors: active) {
+  .matcha-avatar {
+    border: 1px solid CanvasText;
+
+    &.matcha-avatar--disabled,
+    &.color-disabled {
+      opacity: 0.5;
+      border-color: GrayText;
     }
+  }
+
+  // Status dot — em high-contrast as 3 cores ficam idênticas. Compensamos
+  // com pattern visual: online=fill, offline=outline, busy=outline duplo.
+  .matcha-avatar-status {
+    background: SelectedItem !important;
+    border: 2px solid Canvas !important;
 
     &.matcha-avatar-status--offline {
-      background-color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+      background: Canvas !important;
+      border: 2px solid CanvasText !important;
     }
 
     &.matcha-avatar-status--busy {
-      background-color: var(--matcha-color-danger, #{getDanger($theme)});
+      background: SelectedItem !important;
+      box-shadow: 0 0 0 2px Canvas, 0 0 0 4px CanvasText;
     }
   }
 }
+
+// Reduced motion — mata todas transitions/animations.
+@media (prefers-reduced-motion: reduce) {
+  .matcha-avatar,
+  .matcha-avatar-status {
+    transition: none !important;
+    animation: none !important;
+  }
+}

package/components/matcha-badge.scss

@@ -44,8 +44,8 @@
   min-width: var(--matcha-space-250, 20px);
   height: var(--matcha-space-250, 20px);
   padding: 1px var(--matcha-space-050, 4px);
-  font-size: var(--matcha-text-caption, 11px);
-  line-height: var(--matcha-leading-caption, 14px);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  line-height: var(--matcha-leading-p-tiny, 14px);
   font-weight: var(--matcha-weight-regular, 400);
   letter-spacing: 0;
   border-width: var(--matcha-border-thin, 2px);
@@ -56,8 +56,8 @@
 .matcha-badge--label {
   position: static;
   padding: var(--matcha-space-025, 2px) var(--matcha-space-100, 8px);
-  font-size: var(--matcha-text-caption, 11px);
-  line-height: var(--matcha-leading-caption, 14px);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  line-height: var(--matcha-leading-p-tiny, 14px);
   font-weight: var(--matcha-weight-regular, 400);
   gap: var(--matcha-space-050, 4px);
 }
@@ -89,32 +89,32 @@
 
 @mixin matcha-badge-theme($theme) {
   .matcha-badge--accent {
-    background-color: var(--matcha-color-badge-bg, #{getAccent($theme)});
-    color: var(--matcha-color-badge-fg, #{getAccentContrast($theme)});
+    background-color: var(--matcha-color-badge-bg, var(--matcha-color-accent));
+    color: var(--matcha-color-badge-fg, var(--matcha-color-accent-contrast));
   }
 
   .matcha-badge--danger {
-    background-color: var(--matcha-color-badge-danger-bg, #{getDanger($theme)});
-    color: var(--matcha-color-badge-danger-fg, #{getDangerContrast($theme)});
+    background-color: var(--matcha-color-badge-danger-bg, var(--matcha-color-danger));
+    color: var(--matcha-color-badge-danger-fg, var(--matcha-color-danger-contrast));
   }
 
   .matcha-badge--warn {
-    background-color: var(--matcha-color-badge-warn-bg, #{getWarn($theme)});
-    color: var(--matcha-color-badge-warn-fg, #{getWarnContrast($theme)});
+    background-color: var(--matcha-color-badge-warn-bg, var(--matcha-color-warn));
+    color: var(--matcha-color-badge-warn-fg, var(--matcha-color-warn-contrast));
   }
 
   .matcha-badge--success {
-    background-color: var(--matcha-color-badge-success-bg, #{getSuccess($theme)});
-    color: var(--matcha-color-badge-success-fg, #{getSuccessContrast($theme)});
+    background-color: var(--matcha-color-badge-success-bg, var(--matcha-color-success));
+    color: var(--matcha-color-badge-success-fg, var(--matcha-color-success-contrast));
   }
 
   .matcha-badge--info {
-    background-color: var(--matcha-color-badge-info-bg, #{getInfo($theme)});
-    color: var(--matcha-color-badge-info-fg, #{getInfoContrast($theme)});
+    background-color: var(--matcha-color-badge-info-bg, var(--matcha-color-info));
+    color: var(--matcha-color-badge-info-fg, var(--matcha-color-info-contrast));
   }
 
   .matcha-badge--dot,
   .matcha-badge--count {
-    border-color: var(--matcha-color-badge-border, #{getSurface($theme)});
+    border-color: var(--matcha-color-badge-border);
   }
 }