@inchurch/matcha-theme 20.0.3

package/components/matcha-breadcrumb.scss

@@ -0,0 +1,126 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-breadcrumb.scss — Navigation breadcrumb trail
+// Aligned with Figma matcha/breadcrumb/item:
+//   Estado(3: Link, Atual, Disabled) × Ícone?(2: Yes, No)
+//   Separator: matcha/icon/chevron (Right) between items
+// =============================================================================
+
+@mixin matcha-breadcrumb-theme($theme) {
+  $is-dark: map.get($theme, is-dark);
+
+  matcha-breadcrumb {
+    // ── Link items ──
+    .breadcrumb-item-link {
+      background: var(--matcha-color-surface-2, #{getSurfaceAlpha($theme)});
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+
+      &:hover:not([disabled]):not(.disabled) {
+        .breadcrumb-state {
+          opacity: var(--matcha-state-hover, 0.08);
+        }
+      }
+
+      &:active:not([disabled]):not(.disabled) {
+        .breadcrumb-state {
+          opacity: var(--matcha-state-active, 0.12);
+        }
+      }
+
+      &: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);
+      }
+    }
+
+    // ── Current page ──
+    .breadcrumb-item-current {
+      color: var(--matcha-color-fg, #{getForeground($theme)});
+    }
+
+    // ── Separator ──
+    .breadcrumb-separator {
+      color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+    }
+
+    // ── Disabled ──
+    .breadcrumb-item-link.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+
+  // ── Breadcrumb item (link) ──
+  .breadcrumb-item-link {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-150, 12px);
+    border: none;
+    border-radius: var(--matcha-radius-lg, 8px);
+    cursor: pointer;
+    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);
+    white-space: nowrap;
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+
+    // State layer
+    .breadcrumb-state {
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      opacity: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+
+    matcha-icon {
+      flex-shrink: 0;
+    }
+  }
+
+  // ── Current page ──
+  .breadcrumb-item-current {
+    display: flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    padding: var(--matcha-space-150, 12px) 0;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-body-md, 20px);
+    white-space: nowrap;
+
+    matcha-icon {
+      flex-shrink: 0;
+    }
+  }
+
+  // ── Separator ──
+  .breadcrumb-separator {
+    flex-shrink: 0;
+    width: var(--matcha-icon-size-sm, 16px);
+    height: var(--matcha-icon-size-sm, 16px);
+  }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  matcha-breadcrumb .breadcrumb-state {
+    transition: none;
+  }
+}

package/components/matcha-button-toggle.scss

@@ -0,0 +1,363 @@
+@mixin _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions) {
+
+    &:not([inactivetype]),
+    &[inactivetype="solid"] {
+        @each $colorName, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            background: call(#{$colorFn}, $theme);
+                            color: call(#{$colorFn}Contrast, $theme);
+                            box-shadow: 0 0 0 0px inset;
+
+                            .ripple {
+                                background: call(#{$colorFn}ContrastAlpha, $theme); // ok: legacy ripple color token
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &[disabled],
+        &[disabled]:not([disabled="false"]),
+        &[disabled="true"] {
+            .button-group {
+
+                button[matcha-button],
+                a[matcha-button] {
+                    &:not([active]) {
+                        @include _disabled-solid-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
+    &[inactivetype="basic"] {
+        @each $colorName, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            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"] {
+            .button-group {
+
+                button[matcha-button],
+                a[matcha-button] {
+                    &:not([active]) {
+                        @include _disabled-basic-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions) {
+    &[inactivetype="outline"] {
+
+        //disabled false
+        &:not([disabled="true"]) {
+            @each $colorName, $colorFn in $color-functions {
+                &[inactivecolor="#{'' + $colorName}"] {
+                    .button-group {
+
+                        button[matcha-button],
+                        a[matcha-button] {
+
+                            //botão não ativo
+                            &:not([active]) {
+                                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 {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active]) {
+                        @include _disabled-outline-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
+    &[inactivetype="alpha"] {
+        @each $colorName, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            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 {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active]) {
+                        @include _disabled-alpha-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin _colorize-inactive-type-link-button-toggle-item($theme, $color-functions) {
+
+    &[inactivetype="link"] {
+        @each $colorName, $colorFn in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+
+                            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 {
+
+                button[matcha-button],
+                a[matcha-button] {
+
+                    //botão não ativo
+                    &:not([active]) {
+                        @include _disabled-link-button($theme);
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+
+@mixin matcha-button-toggle($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-button-toggle {
+    display: flex;
+    @include _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions);
+    @include _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions);
+    @include _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions);
+    @include _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions);
+    @include _colorize-inactive-type-link-button-toggle-item($theme, $color-functions);
+
+    .button-group {
+        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 {
+
+            button[matcha-button],
+            a[matcha-button] {
+                &[active] {
+
+                    &[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);
+                    }
+
+                    @include _disabled-solid-button($theme);
+                }
+            }
+        }
+
+    }
+}
+}
+
+// =============================================================================
+// Structural rules — aligned with Figma matcha/button-toggle:
+//   Gap=Segmented: buttons share borders (1px hairline between, 2px thin outside)
+//   Gap=Separated: buttons stand apart with gap=space/200 and full radius-lg each
+// =============================================================================
+matcha-button-toggle {
+    display: block;
+    width: 100%;
+
+    .button-group {
+        display: flex;
+        width: 100%;
+        align-items: stretch;
+
+        // Children flex-share — each button takes equal width across the row
+        > button[matcha-button],
+        > a[matcha-button] {
+            flex: 1 1 0;
+            min-width: 0;
+        }
+
+        // ── Separated (default: gap = space/200) ──────────────────────────
+        // Each button keeps its own full radius and border-thin (2px).
+        // gap already handled by flex gap via [gap] binding in TS.
+
+        // ── Segmented (gap = 0): box-shadows dos outline overlappam ───────
+        // matcha-button usa box-shadow inset (não border), então usamos
+        // margin-left negativo pra sobrepor a borda do vizinho.
+        &.gap-0 {
+            gap: 0 !important;
+
+            button[matcha-button],
+            a[matcha-button] {
+                position: relative;
+                border-radius: 0;
+
+                // First: radius só no lado esquerdo
+                &:first-child {
+                    border-top-left-radius: var(--matcha-radius-lg, 8px);
+                    border-bottom-left-radius: var(--matcha-radius-lg, 8px);
+                }
+
+                // Last: radius só no lado direito
+                &:last-child {
+                    border-top-right-radius: var(--matcha-radius-lg, 8px);
+                    border-bottom-right-radius: var(--matcha-radius-lg, 8px);
+                }
+
+                // Overlap de 2px com vizinho anterior pra fundir bordas
+                &:not(:first-child) {
+                    margin-left: calc(-1 * var(--matcha-border-thin, 2px));
+                }
+
+                // Active (filled) fica no topo pra borda não ser recortada
+                &[active]:not([active="false"]),
+                &:not([outline]):not([basic]):not([ghost])[color] {
+                    z-index: 1;
+                }
+            }
+        }
+    }
+}