@inchurch/matcha-theme 20.0.3

package/components/matcha-horizontal-tree.scss

@@ -0,0 +1,317 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-horizontal-tree.scss — Horizontal org tree with connector lines
+// Angular: matcha-horizontal-tree
+// =============================================================================
+
+@mixin matcha-horizontal-tree-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .svg-line line {
+    stroke: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+  }
+
+  .child {
+    .the-line-connect-first {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    .the-line-connect {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    .the-line-connect-last {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    .the-line-connect-first-modal {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+    }
+
+    .the-line-connect-second-modal {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+    }
+
+    .the-line-connect-last-modal {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+    }
+
+    .the-line-connect-start-modal {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+    }
+
+    .the-line-connect-middle {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-border, #{getGrey($theme)});
+    }
+  }
+
+  .tree-node {
+    &-content {
+      &-btn-add-node {
+        background: var(--matcha-color-surface, #{getSurface($theme)});
+        box-shadow: inset 0 0 0 3px var(--matcha-color-accent, #{getAccent($theme)});
+
+        &-i {
+          color: var(--matcha-color-accent, #{getAccent($theme)});
+        }
+      }
+    }
+  }
+
+  .tree-first-node {
+    &-begin {
+      &-btn-add-node {
+        background: var(--matcha-color-surface, #{getSurface($theme)});
+        box-shadow: inset 0 0 0 3px var(--matcha-color-accent, #{getAccent($theme)});
+
+        &-i {
+          color: var(--matcha-color-accent, #{getAccent($theme)});
+        }
+      }
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.svg-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+
+  line {
+    stroke-width: var(--matcha-border-medium, 4px);
+  }
+}
+
+.child {
+  display: flex;
+  position: relative;
+  pointer-events: none;
+
+  div {
+    pointer-events: all;
+  }
+
+  .the-line-connect-first {
+    width: 56px;
+    height: var(--matcha-border-medium, 4px);
+    margin: 56px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    z-index: 0;
+    background: transparent;
+  }
+
+  .the-line-connect {
+    width: 56px;
+    height: 92px;
+    margin: -34px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    z-index: 0;
+    background: transparent;
+    border-radius: 0 0 0 40px;
+  }
+
+  .the-line-connect-last {
+    width: 56px;
+    height: 136px;
+    margin: -80px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    z-index: 0;
+    border-radius: 0 0 0 40px;
+    background: transparent;
+  }
+
+  .the-line-connect-first-modal {
+    width: 56px;
+    height: var(--matcha-border-medium, 4px);
+    margin: 56px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    z-index: 0;
+    background: transparent;
+  }
+
+  .the-line-connect-second-modal {
+    width: 56px;
+    border-radius: 0 0 0 40px;
+    z-index: 1;
+    margin: -16px -16px 56px -40px;
+    height: 72px;
+    display: flex;
+    position: absolute;
+    background: transparent;
+  }
+
+  .the-line-connect-last-modal {
+    width: 56px;
+    height: 150px;
+    margin: -90px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    border-radius: 0 0 0 40px;
+    z-index: 1;
+    background: transparent;
+  }
+
+  .the-line-connect-start-modal {
+    height: 92px;
+    margin: -34px -16px 56px -40px;
+    width: 56px;
+    border-radius: 0 0 0 40px;
+    z-index: 1;
+    display: flex;
+    position: absolute;
+    background: transparent;
+  }
+
+  .the-line-connect-middle {
+    height: 92px;
+    margin: -34px -16px 56px -40px;
+    width: 56px;
+    border-radius: 0 0 0 40px;
+    z-index: 0;
+    display: flex;
+    position: absolute;
+    background: transparent;
+  }
+}
+
+.tree-node {
+  min-width: 264px;
+  max-width: 264px;
+  width: 264px;
+  height: 80px;
+  z-index: 1;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--matcha-space-050, 4px);
+
+    &-title {
+      font-family: var(--matcha-font-family);
+      font-size: var(--matcha-text-body-sm, 12px);
+      line-height: var(--matcha-leading-body-sm, 16px);
+      display: flex;
+      margin: 0 0 var(--matcha-space-050, 4px) 0;
+      align-items: center;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      font-weight: var(--matcha-weight-bold, 700);
+
+      &-bullet {
+        height: var(--matcha-space-200, 16px);
+        width: var(--matcha-space-100, 8px);
+        margin: 0 var(--matcha-space-100, 8px) 0 0;
+        display: inline-block;
+        position: relative;
+        border-radius: var(--matcha-radius-pill, 9999px);
+      }
+    }
+  }
+
+  &-content {
+    display: flex;
+    justify-content: space-between;
+
+    &-profile {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      &-avatar {
+        border-radius: var(--matcha-radius-pill, 9999px);
+        min-width: var(--matcha-icon-size-md, 24px);
+        min-height: var(--matcha-icon-size-md, 24px);
+        width: var(--matcha-icon-size-md, 24px);
+        height: var(--matcha-icon-size-md, 24px);
+        max-width: var(--matcha-icon-size-md, 24px);
+        max-height: var(--matcha-icon-size-md, 24px);
+      }
+
+      &-name {
+        width: calc(100% - 48px);
+        display: flex;
+        line-height: var(--matcha-leading-body-md, 20px);
+        font-size: var(--matcha-text-title-sm, 16px);
+        margin: 0 0 0 var(--matcha-space-100, 8px);
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        white-space: nowrap;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    &-btn-add-node {
+      position: absolute;
+      margin: var(--matcha-space-300, 24px) 0 0 236px;
+      width: var(--matcha-icon-size-md, 24px);
+      height: var(--matcha-icon-size-md, 24px);
+
+      &-i {
+        line-height: var(--matcha-leading-body-sm, 16px);
+        border-radius: var(--matcha-radius-pill, 9999px);
+      }
+    }
+  }
+}
+
+.tree-first-node {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 264px;
+  max-width: 264px;
+  width: 264px;
+  height: 80px;
+  margin: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) -10px var(--matcha-space-200, 16px);
+  border-radius: var(--matcha-radius-lg, 8px);
+  position: relative;
+  z-index: 1;
+
+  &-begin {
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-title-sm, 16px);
+    font-weight: var(--matcha-weight-bold, 700);
+    line-height: var(--matcha-leading-body-sm, 16px);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    white-space: initial;
+    -webkit-box-orient: vertical;
+    text-transform: capitalize;
+
+    &-btn-add-node {
+      width: var(--matcha-icon-size-md, 24px);
+      height: var(--matcha-icon-size-md, 24px);
+      display: block;
+      margin: 0 auto;
+      position: relative;
+      z-index: 1;
+
+      &-i {
+        line-height: var(--matcha-leading-body-sm, 16px);
+        border-radius: var(--matcha-radius-pill, 9999px);
+      }
+    }
+  }
+}
+
+.matcha-horizontal-tree {
+  overflow: auto;
+  user-select: none;
+  -webkit-user-select: none;
+}

package/components/matcha-icon.scss

@@ -0,0 +1,106 @@
+// =============================================================================
+// matcha-icon.scss — Icon sizing and theming tokens
+// Aligned with Figma matcha/icon-slot (glyph + container)
+// =============================================================================
+
+// ── Icon glyph sizes ────────────────────────────────────────────────────────
+// These override the generated matcha-icons.css with CSS custom properties
+// so consumers can adjust icon sizes at runtime.
+//
+// Glyph scale:  xs(12) → sm(16) → md(24) → lg(32) → xl(48)
+// Container:    24px     32px     40px     48px     64px   (glyph + 2×8px padding)
+
+$icon-size-xs: 12px;
+$icon-size-sm: 16px;
+$icon-size-md: 24px;
+$icon-size-lg: 32px;
+$icon-size-xl: 48px;
+
+// ── Material Symbols Rounded — aplicação global da font ─────────────────
+// Usa as propriedades herdáveis (font-family, font-feature-settings) no host
+// para que o texto filho (ligature) renderize como glyph.
+matcha-icon[library="symbols"] {
+  font-family: 'Material Symbols Rounded', sans-serif !important;
+  font-weight: normal;
+  font-style: normal;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga' !important;
+  overflow: hidden;
+}
+
+[class^="i-matcha-"],
+[class*=" i-matcha-"],
+matcha-icon[library="symbols"] {
+  font-size: var(--matcha-icon-size-md, #{$icon-size-md});
+  width: var(--matcha-icon-size-md, #{$icon-size-md});
+  height: var(--matcha-icon-size-md, #{$icon-size-md});
+  line-height: var(--matcha-icon-size-md, #{$icon-size-md});
+
+  &.i-size-xs,
+  &[size="xs"] {
+    font-size: var(--matcha-icon-size-xs, #{$icon-size-xs});
+    width: var(--matcha-icon-size-xs, #{$icon-size-xs});
+    height: var(--matcha-icon-size-xs, #{$icon-size-xs});
+    line-height: var(--matcha-icon-size-xs, #{$icon-size-xs});
+  }
+
+  &.i-size-sm,
+  &[size="sm"] {
+    font-size: var(--matcha-icon-size-sm, #{$icon-size-sm});
+    width: var(--matcha-icon-size-sm, #{$icon-size-sm});
+    height: var(--matcha-icon-size-sm, #{$icon-size-sm});
+    line-height: var(--matcha-icon-size-sm, #{$icon-size-sm});
+  }
+
+  &.i-size-md,
+  &[size="md"] {
+    font-size: var(--matcha-icon-size-md, #{$icon-size-md});
+    width: var(--matcha-icon-size-md, #{$icon-size-md});
+    height: var(--matcha-icon-size-md, #{$icon-size-md});
+    line-height: var(--matcha-icon-size-md, #{$icon-size-md});
+  }
+
+  &.i-size-lg,
+  &[size="lg"] {
+    font-size: var(--matcha-icon-size-lg, #{$icon-size-lg});
+    width: var(--matcha-icon-size-lg, #{$icon-size-lg});
+    height: var(--matcha-icon-size-lg, #{$icon-size-lg});
+    line-height: var(--matcha-icon-size-lg, #{$icon-size-lg});
+  }
+
+  &.i-size-xl,
+  &[size="xl"] {
+    font-size: var(--matcha-icon-size-xl, #{$icon-size-xl});
+    width: var(--matcha-icon-size-xl, #{$icon-size-xl});
+    height: var(--matcha-icon-size-xl, #{$icon-size-xl});
+    line-height: var(--matcha-icon-size-xl, #{$icon-size-xl});
+  }
+}
+
+// ── Theme mixin (color inheritance) ─────────────────────────────────────────
+@mixin matcha-icon-theme($theme) {
+  matcha-icon,
+  [class^="i-matcha-"],
+  [class*=" i-matcha-"] {
+    color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
+
+    &.color-fg,       &[color="fg"]       { color: var(--matcha-color-fg, #{getForeground($theme)}); }
+    &.color-accent,   &[color="accent"]   { color: var(--matcha-color-accent, #{getAccent($theme)}); }
+    &.color-primary,  &[color="primary"]  { color: var(--matcha-color-primary, #{getPrimary($theme)}); }
+    &.color-danger,   &[color="danger"]   { color: var(--matcha-color-danger, #{getDanger($theme)}); }
+    &.color-warn,     &[color="warn"]     { color: var(--matcha-color-warn, #{getWarn($theme)}); }
+    &.color-success,  &[color="success"]  { color: var(--matcha-color-success, #{getSuccess($theme)}); }
+
+    &[disabled],
+    &.disabled {
+      opacity: var(--matcha-opacity-disabled, 0.38);
+    }
+  }
+}

package/components/matcha-image.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-image.scss — Image container with aspect ratio support
+// Aligned with Figma matcha/image:
+//   Estado(2: Desativo, Ativado) × Ratio(16:9 default)
+// Angular: matcha-image
+// =============================================================================
+
+@mixin matcha-image-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  .matcha-image {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+  }
+
+  .matcha-image__placeholder-icon {
+    color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--matcha-radius-lg, 8px);
+  overflow: hidden;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.matcha-image__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.matcha-image__placeholder-icon {
+  width: var(--matcha-icon-size-lg, 48px);
+  height: var(--matcha-icon-size-lg, 48px);
+  opacity: 0.5;
+}
+
+// ── Ratios ──────────────────────────────────────────────────────────────────
+
+.matcha-image--1x1 {
+  aspect-ratio: 1 / 1;
+}
+
+.matcha-image--4x3 {
+  aspect-ratio: 4 / 3;
+}
+
+.matcha-image--3x2 {
+  aspect-ratio: 3 / 2;
+}
+
+// 16:9 is default, no modifier needed

package/components/matcha-list.scss

@@ -0,0 +1,212 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-list.scss — List & List Item (navigation, settings, content lists)
+// =============================================================================
+
+// ── State layer ─────────────────────────────────────────────────────────────
+
+.matcha-list-item {
+    position: relative;
+    overflow: hidden;
+
+    &::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(.matcha-list-item--disabled)::before {
+        opacity: var(--matcha-state-hover, 0.08);
+    }
+
+    &:active:not(.matcha-list-item--disabled)::before {
+        opacity: var(--matcha-state-active, 0.12);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::before { transition: none; }
+    }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-list-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    // ── List container ──
+    matcha-list,
+    matcha-nav-list {
+        display: block;
+        padding: var(--matcha-space-100, 8px) 0;
+
+        &.matcha-list-dense {
+            matcha-list-item,
+            .matcha-list-item {
+                min-height: 36px;
+            }
+        }
+    }
+
+    // ── List item ──
+    matcha-list-item,
+    a[matcha-list-item],
+    button[matcha-list-item],
+    .matcha-list-item {
+        display: flex;
+        align-items: center;
+        min-height: 48px;
+        padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+        border-radius: var(--matcha-radius-md, 4px);
+        cursor: pointer;
+        outline: none;
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+        text-decoration: none;
+        transition: background-color 150ms;
+
+        // Focus ring
+        &: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);
+        }
+
+        // Disabled
+        &.matcha-list-item--disabled,
+        &.matcha-list-item-disabled {
+            opacity: var(--matcha-opacity-disabled, 0.38);
+            pointer-events: none;
+            cursor: default;
+        }
+
+        // Active/Selected
+        &.matcha-list-item--active {
+            background-color: var(--matcha-color-accent-surface, #{getAccentAlpha($theme)});
+
+            .matcha-list-item__label {
+                color: var(--matcha-color-accent, #{getAccent($theme)});
+                font-weight: 600;
+            }
+
+            .matcha-list-item__leading {
+                color: var(--matcha-color-accent, #{getAccent($theme)});
+            }
+        }
+    }
+
+    // ── Item content layout ──
+    .matcha-list-item-content,
+    .matcha-list-item__content {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: var(--matcha-space-150, 12px);
+    }
+
+    // ── Leading (icon, avatar) ──
+    .matcha-list-item__leading {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--matcha-color-hint, #{getGrey($theme)});
+    }
+
+    // ── Text area (label + description) ──
+    .matcha-list-item__text {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--matcha-space-025, 2px);
+    }
+
+    .matcha-list-item__label {
+        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-fg, #{getForeground($theme)});
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .matcha-list-item__description {
+        font-size: var(--matcha-text-body-sm, 12px);
+        font-weight: var(--matcha-weight-regular, 400);
+        line-height: var(--matcha-leading-body-sm, 16px);
+        color: var(--matcha-color-hint, #{getGrey($theme)});
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // ── Trailing (chevron, badge, switch, meta) ──
+    .matcha-list-item__trailing {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+        color: var(--matcha-color-hint, #{getGrey($theme)});
+    }
+
+    // ── Divider between items ──
+    .matcha-list-divider {
+        height: var(--matcha-border-hairline, 1px);
+        margin: var(--matcha-space-050, 4px) var(--matcha-space-200, 16px);
+        background-color: var(--matcha-color-border, #{getGrey($theme)});
+        opacity: var(--matcha-opacity-subtle, 0.10);
+    }
+
+    // ── Section header ──
+    .matcha-list-subheader {
+        display: flex;
+        align-items: center;
+        padding: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) var(--matcha-space-075, 6px);
+        font-size: var(--matcha-text-caption, 11px);
+        font-weight: var(--matcha-weight-medium, 500);
+        line-height: var(--matcha-leading-caption, 14px);
+        letter-spacing: var(--matcha-letter-spacing-wide, 0.5px);
+        text-transform: uppercase;
+        color: var(--matcha-color-hint, #{getGrey($theme)});
+    }
+
+    // ── 2-line variant (with description) ──
+    .matcha-list-item--two-line,
+    matcha-list-item.matcha-list-item--two-line {
+        min-height: 64px;
+        padding-top: var(--matcha-space-150, 12px);
+        padding-bottom: var(--matcha-space-150, 12px);
+    }
+
+    // ── Dense variant ──
+    .matcha-list--dense {
+        matcha-list-item,
+        .matcha-list-item {
+            min-height: 36px;
+            padding: var(--matcha-space-050, 4px) var(--matcha-space-200, 16px);
+
+            .matcha-list-item__label {
+                font-size: var(--matcha-text-button-sm, 13px);
+            }
+        }
+    }
+
+    // ── Inset (leading space without icon) ──
+    .matcha-list-item--inset {
+        padding-left: calc(var(--matcha-space-200, 16px) + 36px);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        matcha-list-item,
+        .matcha-list-item {
+            transition: none;
+        }
+    }
+}