@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-button-toggle.scss

@@ -1,384 +1,383 @@
-@use "matcha-buttons" as *;
-@mixin _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions) {
-
-    &:not([inactivetype]),
-    &[inactivetype="solid"] {
-        @each $colorName in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-                            background: var(--matcha-color-#{$colorName});
-                            color: var(--matcha-color-#{$colorName}-contrast);
-                            box-shadow: 0 0 0 0px inset;
-
-                            .ripple {
-                                background: var(--matcha-color-#{$colorName}-contrast-alpha); // 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 in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-                            background: var(--matcha-color-surface);
-                            color: var(--matcha-color-#{$colorName});
-                            box-shadow: 0 0 0 0px inset;
-
-                            .ripple {
-                                background: var(--matcha-color-#{$colorName}-alpha); // 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 in $color-functions {
-                &[inactivecolor="#{'' + $colorName}"] {
-                    .button-group {
-
-                        button[matcha-button],
-                        a[matcha-button] {
-
-                            //botão não ativo
-                            &:not([active]) {
-                                color: var(--matcha-color-#{$colorName});
-                                background: transparent;
-                                box-shadow: 0 0 0 2px var(--matcha-color-#{$colorName}) inset;
-
-                                .ripple {
-                                    background: var(--matcha-color-#{$colorName}-alpha); // 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 in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-                            color: var(--matcha-color-#{$colorName});
-                            background: var(--matcha-color-#{$colorName}-alpha);
-                            box-shadow: 0 0 0 0px;
-
-                            .ripple {
-                                background: var(--matcha-color-#{$colorName}-contrast-alpha) // 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 in $color-functions {
-            &[inactivecolor="#{'' + $colorName}"] {
-                .button-group {
-
-                    button[matcha-button],
-                    a[matcha-button] {
-                        &:not([active]) {
-
-                            background: transparent;
-                            color: var(--matcha-color-#{$colorName});
-                            box-shadow: 0 0 0 0px;
-
-                            .ripple {
-                                background: var(--matcha-color-#{$colorName}-alpha); // 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) {
-    // Nomes de cor (semânticas + paleta). Cores vêm de var(--matcha-color-*) — sem getRed/$theme.
-    $color-functions: "red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal",
-        "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey",
-        "primary", "accent", "success", "warn", "danger", "info", "disabled";
-
-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);
-                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);
-                }
-            }
-        }
-
-    }
-}
-}
-
-// =============================================================================
-// A11y / modernity media queries
-// =============================================================================
-
-// Forced colors (Windows High Contrast) — borders/bg podem sumir,
-// SelectedItem/CanvasText são tokens system sempre visíveis.
-@media (forced-colors: active) {
-    matcha-button-toggle .button-group {
-        button[matcha-button],
-        a[matcha-button] {
-            border: 1px solid CanvasText;
-
-            &[active] {
-                background: SelectedItem !important;
-                color: SelectedItemText !important;
-                border-color: SelectedItem;
-            }
-
-            &:focus-visible {
-                outline: 2px solid CanvasText !important;
-                outline-offset: 2px;
-            }
-        }
-    }
-}
-
-// Reduced motion — mata transitions de hover/active state.
-@media (prefers-reduced-motion: reduce) {
-    matcha-button-toggle .button-group {
-        button[matcha-button],
-        a[matcha-button] {
-            transition: none !important;
-            animation: none !important;
-        }
-    }
-}
-
-// Print — controles de UI somem em impressão.
-@media print {
-    matcha-button-toggle {
-        display: none !important;
-    }
-}
-
-// =============================================================================
-// 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;
-                }
-            }
-        }
-    }
-}
+@use "matcha-buttons" as *;
+@mixin _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions) {
+
+    &:not([inactivetype]),
+    &[inactivetype="solid"] {
+        @each $colorName in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            background: var(--matcha-color-#{$colorName});
+                            color: var(--matcha-color-#{$colorName}-contrast);
+                            box-shadow: 0 0 0 0px inset;
+
+                            .ripple {
+                                background: var(--matcha-color-#{$colorName}-contrast-alpha); // 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 in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            background: var(--matcha-color-surface);
+                            color: var(--matcha-color-#{$colorName});
+                            box-shadow: 0 0 0 0px inset;
+
+                            .ripple {
+                                background: var(--matcha-color-#{$colorName}-alpha); // 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 in $color-functions {
+                &[inactivecolor="#{'' + $colorName}"] {
+                    .button-group {
+
+                        button[matcha-button],
+                        a[matcha-button] {
+
+                            //botão não ativo
+                            &:not([active]) {
+                                color: var(--matcha-color-#{$colorName});
+                                background: transparent;
+                                box-shadow: 0 0 0 2px var(--matcha-color-#{$colorName}) inset;
+
+                                .ripple {
+                                    background: var(--matcha-color-#{$colorName}-alpha); // 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 in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+                            color: var(--matcha-color-#{$colorName});
+                            background: var(--matcha-color-#{$colorName}-alpha);
+                            box-shadow: 0 0 0 0px;
+
+                            .ripple {
+                                background: var(--matcha-color-#{$colorName}-contrast-alpha) // 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 in $color-functions {
+            &[inactivecolor="#{'' + $colorName}"] {
+                .button-group {
+
+                    button[matcha-button],
+                    a[matcha-button] {
+                        &:not([active]) {
+
+                            background: transparent;
+                            color: var(--matcha-color-#{$colorName});
+                            box-shadow: 0 0 0 0px;
+
+                            .ripple {
+                                background: var(--matcha-color-#{$colorName}-alpha); // 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) {
+    // Nomes de cor (semânticas + paleta). Cores vêm de var(--matcha-color-*) — sem getRed/$theme.
+    $color-functions: "red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal",
+        "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey",
+        "primary", "accent", "success", "warn", "danger", "info", "disabled";
+
+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);
+                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] {
+                    @include disabled-solid-button($theme);
+
+                    &[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);
+                    }
+                }
+            }
+        }
+
+    }
+}
+}
+
+// =============================================================================
+// A11y / modernity media queries
+// =============================================================================
+
+// Forced colors (Windows High Contrast) — borders/bg podem sumir,
+// SelectedItem/CanvasText são tokens system sempre visíveis.
+@media (forced-colors: active) {
+    matcha-button-toggle .button-group {
+        button[matcha-button],
+        a[matcha-button] {
+            border: 1px solid CanvasText;
+
+            &[active] {
+                background: SelectedItem !important;
+                color: SelectedItemText !important;
+                border-color: SelectedItem;
+            }
+
+            &:focus-visible {
+                outline: 2px solid CanvasText !important;
+                outline-offset: 2px;
+            }
+        }
+    }
+}
+
+// Reduced motion — mata transitions de hover/active state.
+@media (prefers-reduced-motion: reduce) {
+    matcha-button-toggle .button-group {
+        button[matcha-button],
+        a[matcha-button] {
+            transition: none !important;
+            animation: none !important;
+        }
+    }
+}
+
+// Print — controles de UI somem em impressão.
+@media print {
+    matcha-button-toggle {
+        display: none !important;
+    }
+}
+
+// =============================================================================
+// 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;
+                }
+            }
+        }
+    }
+}