@inchurch/matcha-theme 21.3.3 → 22.0.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);
-
-    &::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;
-  }
-}
-
+// =========================================================
+// * 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,100 +1,100 @@
-// =============================================================================
-// 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 {
-    box-sizing: border-box;
-    flex-shrink: 0;
-
-    // ── Horizontal default (sem direction ou direction="horizontal") ──
-    &[direction="horizontal"],
-    &:not([direction]) {
-        display:        flex;
-        flex-direction: row;
-        align-items:    center;
-        width:          100%;
-    }
-
-    // ── Vertical ──
-    &[direction="vertical"] {
-        display:        inline-flex;
-        flex-direction: column;
-        align-items:    center;
-        align-self:     stretch;
-    }
-}
-
-// ── 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) {
-    // Sem overrides — tokens globais bastam.
-}
+// =============================================================================
+// 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 {
+    box-sizing: border-box;
+    flex-shrink: 0;
+
+    // ── Horizontal default (sem direction ou direction="horizontal") ──
+    &[direction="horizontal"],
+    &:not([direction]) {
+        display:        flex;
+        flex-direction: row;
+        align-items:    center;
+        width:          100%;
+    }
+
+    // ── Vertical ──
+    &[direction="vertical"] {
+        display:        inline-flex;
+        flex-direction: column;
+        align-items:    center;
+        align-self:     stretch;
+    }
+}
+
+// ── 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) {
+    // Sem overrides — tokens globais bastam.
+}

package/components/matcha-draggable.scss

@@ -1,23 +1,23 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-draggable.scss — Draggable item with selection state
-// Angular: matcha-draggable
-// =============================================================================
-
-@mixin matcha-draggable-theme($theme) {
-
-  .matcha-draggable {
-    .check-with-label:checked + .label-for-check {
-      box-shadow:
-        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),
-        0 0 0 10px var(--matcha-color-text-placeholder);
-    }
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-draggable.scss — Draggable item with selection state
+// Angular: matcha-draggable
+// =============================================================================
+
+@mixin matcha-draggable-theme($theme) {
+
+  .matcha-draggable {
+    .check-with-label:checked + .label-for-check {
+      box-shadow:
+        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),
+        0 0 0 10px var(--matcha-color-text-placeholder);
+    }
+  }
+}