@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-date.scss

@@ -1,81 +1,81 @@
-// =========================================================
-// * Matcha Date Styles
-// =========================================================
-
-@mixin matcha-date-theme($theme) {
-  .matcha-date-input {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-
-    &::placeholder {
-      color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
-    }
-
-    &:disabled {
-      opacity: var(--matcha-opacity-disabled, 0.38);
-      color: var(--matcha-color-disabled, #{getDisabled($theme)});
-    }
-  }
-}
-
-.matcha-date-input {
-  width: 100%;
-  font-size: var(--matcha-text-body-md, 14px);
-  font-family: inherit;
-  line-height: 1.5;
-  color: var(--matcha-text-primary, #333);
-  background-color: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-
-  &::placeholder {
-    color: var(--matcha-text-placeholder, #999);
-  }
-
-  &:disabled {
-    pointer-events: none; cursor: default;
-    opacity: 0.6;
-    color: var(--matcha-text-disabled, #999);
-  }
-
-  // Customização do ícone do calendário
-  &::-webkit-calendar-picker-indicator {
-    cursor: pointer;
-    filter: opacity(0.6);
-    transition: filter 0.2s ease;
-
-    &:hover {
-      filter: opacity(1);
-    }
-  }
-
-  &:disabled::-webkit-calendar-picker-indicator {
-    pointer-events: none; cursor: default;
-    opacity: 0.3;
-  }
-
-  // Firefox
-  &::-moz-calendar-picker-indicator {
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  &:disabled::-moz-calendar-picker-indicator {
-    pointer-events: none; cursor: default;
-    opacity: 0.3;
-  }
-}
-
-// Integração com matcha-form-field
-matcha-form-field {
-  matcha-date {
-    width: 100%;
-    display: block;
-  }
-}
-
+// =========================================================
+// * Matcha Date Styles
+// =========================================================
+
+@mixin matcha-date-theme($theme) {
+  .matcha-date-input {
+    color: var(--matcha-color-fg);
+
+    &::placeholder {
+      color: var(--matcha-color-text-placeholder);
+    }
+
+    &:disabled {
+      opacity: var(--matcha-opacity-disabled, 0.38);
+      color: var(--matcha-color-disabled);
+    }
+  }
+}
+
+.matcha-date-input {
+  width: 100%;
+  font-size: var(--matcha-text-body-md, 14px);
+  font-family: inherit;
+  line-height: 1.5;
+  color: var(--matcha-text-primary, #333);
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  &::placeholder {
+    color: var(--matcha-text-placeholder, #999);
+  }
+
+  &:disabled {
+    pointer-events: none; cursor: default;
+    opacity: 0.6;
+    color: var(--matcha-text-disabled, #999);
+  }
+
+  // Customização do ícone do calendário
+  &::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    filter: opacity(0.6);
+    transition: filter 0.2s ease;
+
+    &:hover {
+      filter: opacity(1);
+    }
+  }
+
+  &:disabled::-webkit-calendar-picker-indicator {
+    pointer-events: none; cursor: default;
+    opacity: 0.3;
+  }
+
+  // Firefox
+  &::-moz-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &:disabled::-moz-calendar-picker-indicator {
+    pointer-events: none; cursor: default;
+    opacity: 0.3;
+  }
+}
+
+// Integração com matcha-form-field
+matcha-form-field {
+  matcha-date {
+    width: 100%;
+    display: block;
+  }
+}
+

package/components/matcha-divider.scss

@@ -1,45 +1,100 @@
 // =============================================================================
-// matcha-divider.scss — Divider line (horizontal/vertical)
-// Aligned with Figma matcha/divider: Direção(Horizontal/Vertical) = 2 variants
+// matcha-divider.scss — Figma DSV3 matcha/divider (14905:34)
+// 2 variants visuais: Direção=Horizontal (280×1px) / Vertical (1×80px+)
+// Cor: matcha/color/text/hint @ matcha/opacity/strong (0.3)
+// Tipografia label: matcha/text/caption (11/14)
+// + extensão M3: slot label opcional ("OU", "Nova seção") + inset variant
 // =============================================================================
 
 // ── Structural ──────────────────────────────────────────────────────────────
+// Note: divider não tem animação por design — não precisa de prefers-reduced-motion.
 
 matcha-divider {
-  display: flex;
-  box-sizing: border-box;
-  flex-shrink: 0;
-
-  &[direction="horizontal"],
-  &:not([direction]) {
-    flex-direction: row;
-    width: 100%;
-
-    .matcha-divider-line {
-      width: 100%;
-      height: 0;
-      border-top: var(--matcha-border-hairline, 1px) solid;
-    }
-  }
+    box-sizing: border-box;
+    flex-shrink: 0;
 
-  &[direction="vertical"] {
-    flex-direction: column;
-    align-self: stretch;
+    // ── Horizontal default (sem direction ou direction="horizontal") ──
+    &[direction="horizontal"],
+    &:not([direction]) {
+        display:        flex;
+        flex-direction: row;
+        align-items:    center;
+        width:          100%;
+    }
 
-    .matcha-divider-line {
-      width: 0;
-      height: 100%;
-      border-left: var(--matcha-border-hairline, 1px) solid;
+    // ── Vertical ──
+    &[direction="vertical"] {
+        display:        inline-flex;
+        flex-direction: column;
+        align-items:    center;
+        align-self:     stretch;
     }
-  }
 }
 
-// ── Theme mixin ─────────────────────────────────────────────────────────────
+// ── Linha — 1px hairline com text/hint @ opacity-strong (canônico Figma) ────
+.matcha-divider-line {
+    flex: 1 1 auto;
+    background-color: var(--matcha-color-text-hint, #9AA0A6);
+    opacity:          var(--matcha-opacity-strong, 0.3);
+    pointer-events:   none;
+}
+
+matcha-divider[direction="horizontal"] .matcha-divider-line,
+matcha-divider:not([direction]) .matcha-divider-line {
+    height:    var(--matcha-border-hairline, 1px);
+    min-width: var(--matcha-border-hairline, 1px);
+}
+
+matcha-divider[direction="vertical"] .matcha-divider-line {
+    width:      var(--matcha-border-hairline, 1px);
+    min-height: var(--matcha-border-hairline, 1px);
+}
+
+// ── Inset variants — linha não-completa (M3 List Divider) ──────────────────
+// Útil em listas com avatar (linha começa depois do avatar)
+matcha-divider[direction="horizontal"][inset="start"] .matcha-divider-line:first-of-type,
+matcha-divider:not([direction])[inset="start"] .matcha-divider-line:first-of-type {
+    margin-left: var(--matcha-space-700, 56px);
+}
+matcha-divider[direction="horizontal"][inset="end"] .matcha-divider-line:last-of-type,
+matcha-divider:not([direction])[inset="end"] .matcha-divider-line:last-of-type {
+    margin-right: var(--matcha-space-300, 24px);
+}
+matcha-divider[direction="horizontal"][inset="both"] .matcha-divider-line,
+matcha-divider:not([direction])[inset="both"] .matcha-divider-line {
+    margin-left: var(--matcha-space-300, 24px);
+    margin-right: var(--matcha-space-300, 24px);
+}
+
+// ── Label slot ──────────────────────────────────────────────────────────────
+// Tipografia: matcha/text/caption (11/14 Regular) text-secondary.
+// Quando vazio (:empty), CSS :has esconde slot + segunda linha.
+.matcha-divider-label {
+    display:         inline-flex;
+    align-items:     center;
+    justify-content: center;
+    flex:            0 0 auto;
+    padding:         0 var(--matcha-space-100, 8px);
+    font-family:     var(--matcha-font-family);
+    font-size:       var(--matcha-text-p-tiny, 11px);
+    font-weight:     var(--matcha-weight-regular, 400);
+    line-height:     var(--matcha-leading-p-tiny, 14px);
+    color:           var(--matcha-color-text-secondary);
+    white-space:     nowrap;
+    user-select:     none;
+}
+
+// Vertical: padding em volta vertical (não horizontal)
+matcha-divider[direction="vertical"] .matcha-divider-label {
+    padding: var(--matcha-space-100, 8px) 0;
+}
+
+// ============================================================================
+// Theme mixin — vazia. Todas as cores/tokens via CSS custom properties globais
+// (já reagem a tema light/dark via _css-custom-properties.scss).
+// Mantida só por compat com main.scss que faz @include matcha-divider-theme($theme).
+// ============================================================================
 
 @mixin matcha-divider-theme($theme) {
-  matcha-divider {
-    .matcha-divider-line {
-      border-color: var(--matcha-color-border, #{getGrey($theme)});
-    }
-  }
+    // Sem overrides — tokens globais bastam.
 }

package/components/matcha-draggable.scss

@@ -6,19 +6,18 @@
 // =============================================================================
 
 @mixin matcha-draggable-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   .matcha-draggable {
     .check-with-label:checked + .label-for-check {
       box-shadow:
-        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface, #{getSurface($theme)}),
-        0 0 0 10px var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface),
+        0 0 0 10px var(--matcha-color-text-placeholder);
     }
 
     .is-selected {
       box-shadow:
-        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface, #{getSurface($theme)}),
-        0 0 0 10px var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+        0 0 0 var(--matcha-border-thick, 8px) var(--matcha-color-surface),
+        0 0 0 10px var(--matcha-color-text-placeholder);
     }
   }
 }