@inchurch/matcha-theme 20.0.3

package/components/matcha-tabs.scss

@@ -0,0 +1,469 @@
+@use "sass:map";
+
+@mixin _colorize-inactive-type-basic($theme, $color-functions) {
+    &[inactivetype="basic"] {
+        @each $colorName, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active-item="true"]) {
+                            background: var(--matcha-color-surface, #{getSurface($theme)});
+                            color: call(#{$colorFn}, $theme);
+                            box-shadow: 0 0 0 0px inset;
+
+                            .ripple {
+                                background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            &:not([active-item="true"]) {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        @include _disabled-basic-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-outline($theme, $color-functions) {
+    &[inactivetype="outline"] {
+
+        //disabled false
+        &:not([disabled="true"]) {
+            @each $colorName, $colorFn in $color-functions {
+                &[inactivecolor="#{'' + $colorName}"] {
+                    .button-group matcha-tab-item {
+
+                        button[matcha-button],
+                        a[matcha-button] {
+
+                            //botão não ativo
+                            &:not([active-item="true"]) {
+                                color: call(#{$colorFn}, $theme);
+                                background: transparent;
+                                box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
+
+                                .ripple {
+                                    background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        //disabled true
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            >.button-group matcha-tab-item {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active-item="true"]) {
+                        @include _disabled-outline-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-alpha($theme, $color-functions) {
+    &[inactivetype="alpha"] {
+        @each $colorName, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active-item="true"]) {
+                            color: call(#{$colorFn}, $theme);
+                            background: call(#{$colorFn}Alpha, $theme);
+                            box-shadow: 0 0 0 0px;
+
+                            .ripple {
+                                background: call(#{$colorFn}ContrastAlpha, $theme); // ok: legacy ripple color token
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            .button-group matcha-tab-item {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active-item="true"]) {
+                        @include _disabled-alpha-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-link($theme, $color-functions) {
+
+    &[inactivetype="link"] {
+        @each $colorName, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group matcha-tab-item {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active-item="true"]) {
+
+                            background: transparent;
+                            color: call(#{$colorFn}, $theme);
+                            box-shadow: 0 0 0 0px;
+
+                            .ripple {
+                                background: call(#{$colorFn}Alpha, $theme); // ok: legacy ripple color token
+                            }
+
+                        }
+                    }
+                }
+            }
+        }
+
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            .button-group matcha-tab-item {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active-item="true"]) {
+                        @include _disabled-link-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+
+@mixin matcha-tabs($theme) {
+    $color-functions: (
+        red: getRed,
+        pink: getPink,
+        purple: getPurple,
+        deep-purple: getDeepPurple,
+        indigo: getIndigo,
+        blue: getBlue,
+        light-blue: getLightBlue,
+        cyan: getCyan,
+        teal: getTeal,
+        green: getGreen,
+        light-green: getLightGreen,
+        lime: getLime,
+        yellow: getYellow,
+        amber: getAmber,
+        orange: getOrange,
+        deep-orange: getDeepOrange,
+        brown: getBrown,
+        grey: getGrey,
+        blue-grey: getBlueGrey,
+        primary: getPrimary,
+        accent: getAccent,
+        success: getSuccess,
+        warn: getWarn,
+        danger: getDanger,
+        info: getInfo,
+        disabled: getDisabled,
+    );
+
+matcha-tabs {
+    display: flex;
+    @include _colorize-inactive-type-basic($theme, $color-functions);
+    @include _colorize-inactive-type-outline($theme, $color-functions);
+    @include _colorize-inactive-type-alpha($theme, $color-functions);
+    @include _colorize-inactive-type-link($theme, $color-functions);
+
+    .button-group matcha-tab-item {
+        button[matcha-button],
+        a[matcha-button] {
+            &:focus-visible:not([disabled]):not([disabled="true"]) {
+                outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+                outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+            }
+        }
+    }
+
+    &[disabled],
+    &[disabled]:not([disabled="false"]),
+    &[disabled="true"] {
+        .button-group matcha-tab-item {
+
+            button[matcha-button],
+            a[matcha-button] {
+                &[active-item="true"] {
+
+                    &[outline],
+                    &[outline]:not([outline="false"]),
+                    &[outline="true"] {
+                        @include _disabled-outline-button($theme);
+                    }
+
+                    &[basic],
+                    &[basic]:not([basic="false"]),
+                    &[basic="true"] {
+                        @include _disabled-basic-button($theme);
+                    }
+
+                    &[alpha],
+                    &[alpha]:not([alpha="false"]),
+                    &[alpha="true"] {
+                        @include _disabled-alpha-button($theme);
+                    }
+
+                    &[link],
+                    &[link]:not([link="false"]),
+                    &[link="true"] {
+                        @include _disabled-link-button($theme);
+                    }
+                }
+            }
+        }
+
+    }
+}
+}
+
+.button-group {
+    &.gap-0 {
+        gap: 0 !important;
+
+        // Ajuste border-radius quando gap = 0
+        matcha-tab-item:first-child button[matcha-button] {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        matcha-tab-item:last-child button[matcha-button] {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        matcha-tab-item:not(:first-child):not(:last-child) button[matcha-button] {
+            border-radius: 0;
+        }
+    }
+}
+
+// =============================================================================
+// MODERNIZED TAB STYLES — Aligned with Figma matcha/tab/item
+// Tipo: Underline (classic nav) | Card (icon card)
+// Estado: Default | Selecionado | Disabled
+// =============================================================================
+
+@mixin matcha-tabs-modern($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  // ── Underline Tab ──────────────────────────────────────────────────────
+  // Figma: bottom-border 4px, surface/card bg, accent when selected
+
+  .matcha-tab-underline {
+    display: flex;
+    align-items: stretch;
+    background: transparent; // herda fundo da página (funciona light + dark)
+    border-radius: var(--matcha-radius-md, 4px);
+    overflow: hidden;
+
+    // Subtle bottom divider on the container
+    border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, #{getDisabled($theme)});
+
+    .matcha-tab-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--matcha-space-100, 8px);
+      padding: var(--matcha-space-200, 16px) var(--matcha-space-500, 40px);
+      border: none;
+      background: none;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      font-family: var(--matcha-font-family);
+      font-size: var(--matcha-text-body-lg, 16px);
+      font-weight: var(--matcha-weight-regular, 400);
+      line-height: var(--matcha-leading-body-lg, 24px);
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+      white-space: nowrap;
+
+      // Bottom indicator (inactive: transparent, active: accent)
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: transparent;
+        transition: background var(--matcha-duration-instant, 80ms) linear;
+      }
+
+      // State layer
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: currentColor;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--matcha-duration-instant, 80ms) linear;
+      }
+      &:hover:not(:disabled):not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+      &:active:not(:disabled):not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+      // ── Selected ──
+      &.active,
+      &[aria-selected="true"] {
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+        font-weight: var(--matcha-weight-semibold, 600);
+        line-height: var(--matcha-leading-title-sm, 22px);
+
+        &::after {
+          background: var(--matcha-color-accent, #{getAccent($theme)});
+        }
+      }
+
+      // ── Disabled ──
+      &:disabled,
+      &[disabled] {
+        opacity: 0.5;
+        pointer-events: none; cursor: default;
+        pointer-events: none;
+      }
+
+      // ── Focus ──
+      &:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+      }
+    }
+
+    // Equal-width tabs (mobile/responsive)
+    &.matcha-tab-equal .matcha-tab-item {
+      flex: 1 0 0;
+    }
+  }
+
+  // ── Card Tab ───────────────────────────────────────────────────────────
+  // Figma: card with radius-md, 2px accent border when selected
+
+  .matcha-tab-card {
+    display: flex;
+    align-items: stretch;
+    gap: var(--matcha-space-100, 8px);
+    flex-wrap: wrap;
+
+    .matcha-tab-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--matcha-space-100, 8px);
+      padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+      border: 2px solid transparent;
+      border-radius: var(--matcha-radius-md, 4px);
+      background: var(--matcha-color-surface, #{getSurface($theme)});
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      font-family: var(--matcha-font-family);
+      font-size: var(--matcha-text-body-md, 14px);
+      font-weight: var(--matcha-weight-regular, 400);
+      line-height: var(--matcha-leading-body-md, 20px);
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+
+      // State layer
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: currentColor;
+        opacity: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        transition: opacity var(--matcha-duration-instant, 80ms) linear;
+      }
+      &:hover:not(:disabled):not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+      &:active:not(:disabled):not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+      // ── Selected ──
+      &.active,
+      &[aria-selected="true"] {
+        border-color: var(--matcha-color-accent, #{getAccent($theme)});
+        color: var(--matcha-color-accent, #{getAccent($theme)});
+        font-weight: var(--matcha-weight-medium, 500);
+      }
+
+      // ── Disabled ──
+      &:disabled,
+      &[disabled] {
+        opacity: 0.5;
+        pointer-events: none; cursor: default;
+        pointer-events: none;
+      }
+
+      // ── Focus ──
+      &:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+      }
+
+      // ── Vertical layout ──
+      &.matcha-tab-vertical {
+        flex-direction: column;
+        text-align: center;
+      }
+    }
+  }
+
+  // ── Icon inside tab items ──
+  .matcha-tab-underline,
+  .matcha-tab-card {
+    .matcha-tab-item {
+      matcha-icon {
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  .matcha-tab-underline .matcha-tab-item::before,
+  .matcha-tab-underline .matcha-tab-item::after,
+  .matcha-tab-card .matcha-tab-item::before {
+    transition: none;
+  }
+}

package/components/matcha-text-editor.scss

@@ -0,0 +1,151 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-text-editor.scss — Rich text editor wrapper (Tiptap)
+// Aligned with Figma matcha/text-editor:
+//   Toolbar (icon-buttons) + Editor area (Tiptap content) + Footer (word count)
+// Angular: matcha-text-editor
+// =============================================================================
+
+@mixin matcha-text-editor-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-text-editor {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+    border-color: var(--matcha-color-border, #{getGrey($theme)});
+
+    &:focus-within {
+      border-color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+  }
+
+  .matcha-text-editor__placeholder {
+    color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+  }
+
+  .matcha-text-editor__content {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-text-editor__word-count {
+    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
+  }
+
+  .matcha-text-editor__toolbar-btn--active {
+    background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+    color: var(--matcha-color-accent, #{getAccent($theme)});
+  }
+
+  // ── ProseMirror color overrides (need $theme) ──
+  .matcha-text-editor__content .ProseMirror {
+    a {
+      color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    blockquote {
+      border-left-color: var(--matcha-color-accent, #{getAccent($theme)});
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-text-editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--matcha-border-hairline, 1px) solid transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: border-color var(--matcha-duration-instant, 80ms) linear;
+}
+
+// ── Toolbar ──
+.matcha-text-editor__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-025, 2px);
+  padding: var(--matcha-space-050, 4px) var(--matcha-space-100, 8px);
+  flex-wrap: wrap;
+}
+
+.matcha-text-editor__toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-025, 2px);
+}
+
+.matcha-text-editor__toolbar-sep {
+  width: 1px;
+  height: var(--matcha-icon-size-md, 24px);
+  margin: 0 var(--matcha-space-050, 4px);
+  opacity: 0.2;
+}
+
+// ── Editor content ──
+.matcha-text-editor__content {
+  flex: 1;
+  min-height: 200px;
+  padding: var(--matcha-space-200, 16px);
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  line-height: var(--matcha-leading-body-md, 20px);
+  outline: none;
+
+  // Tiptap overrides
+  .ProseMirror {
+    outline: none;
+    min-height: inherit;
+
+    p { margin: 0 0 var(--matcha-space-100, 8px); }
+    h1, h2, h3 { font-family: var(--matcha-font-family); font-weight: 700; }
+    ul, ol { padding-left: var(--matcha-space-300, 24px); }
+    a { color: var(--matcha-color-accent); text-decoration: underline; }
+    blockquote {
+      border-left: var(--matcha-border-medium, 4px) solid var(--matcha-color-accent);
+      padding-left: var(--matcha-space-200, 16px);
+      margin-left: 0;
+      opacity: 0.8;
+    }
+  }
+}
+
+.matcha-text-editor__placeholder {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+}
+
+// ── Footer ──
+.matcha-text-editor__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+}
+
+.matcha-text-editor__word-count {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-caption, 11px);
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@include media-breakpoint('xs') {
+  .matcha-text-editor__content {
+    min-height: 160px;
+    padding: var(--matcha-space-150, 12px);
+  }
+
+  .matcha-text-editor__toolbar {
+    padding: var(--matcha-space-050, 4px);
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-text-editor {
+    transition: none;
+  }
+}

package/components/matcha-time.scss

@@ -0,0 +1,33 @@
+// =========================================================
+// * Matcha Time Styles
+// =========================================================
+@mixin matcha-time-theme($theme) {
+  .matcha-time-input {
+    width: 100%;
+    font-size: 14px;
+    font-family: inherit;
+    line-height: 1.5;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+
+    &::placeholder {
+      color: getGrey($theme);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+      color: getGrey($theme);
+    }
+  }
+
+  // Integração com matcha-form-field
+  matcha-form-field {
+    matcha-time {
+      width: 100%;
+      display: block;
+    }
+  }
+}

package/components/matcha-timepicker.scss

@@ -0,0 +1,13 @@
+// =============================================================================
+// matcha-timepicker.scss — Theme mixin (stub)
+// Componente refatorado pra input + botão de ícone (native picker).
+// Todo layout/visual do field vem de matcha-form-field.scss.
+// Estrutura interna (.matcha-time-container / .matcha-time-input /
+// .matcha-time-picker-button) é estilizada em matcha-time.component.scss.
+// Mixin mantido vazio pra não quebrar main.scss.
+// =============================================================================
+
+@mixin matcha-timepicker-theme($theme) {
+    // Intencionalmente vazio — matcha-time não precisa de tema próprio hoje.
+    // Cores/borda/estado vêm do wrapper matcha-form-field.
+}