@mussonindustrial/pyro-mui-joy/src/common/mixins.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

$variants: (plain, outlined, soft, solid);
$states: (Hover, Active, Disabled);
$drivenProperties: (Color, Bg, Border);
$staticProperties: (borderWidth, borderStyle);

@mixin palette-default($component, $palette: primary) {
}

@mixin variant-default($component, $variant: solid) {
}

@mixin component-state($component, $state) {
    @each $property in $drivenProperties {
        /* prettier-ignore */
        --joy-$(component)-$(property): var(
            --joy-variant-$(state)$(property),
            var(--joy-variant-default$(state)$(property))
        );
    }
}

@mixin component-state-forced($component, $variant, $state) {
    @each $property in $drivenProperties {
        /* prettier-ignore */
        --joy-$(component)-$(property): var(
            --joy-variant-$(variant)$(state)$(property),
            var(--joy-variant-default$(state)$(property))
        );
    }
}

@mixin variant-support($component) {
    @each $property in $staticProperties {
        --joy-$(component)-$(property): var(
            --joy-variant-$(property),
            var(--joy-variant-default-$(property))
        );
    }

    @each $property in $drivenProperties {
        --joy-$(component)-$(property): var(
            --joy-variant-$(property),
            var(--joy-variant-default$(property))
        );
    }
}

@mixin variant-forced($component, $variant) {
    @each $property in $drivenProperties {
        /* prettier-ignore */
        --joy-variant-$(property): var(--joy-palette-$(variant)$(property));

        @each $state in $states {
            /* prettier-ignore */
            --joy-variant-$(state)$(property): var(
                --joy-palette-$(variant)$(state)$(property),
                var(--joy-palette-$(variant)$(property))
            );
        }
    }

    @each $property in $staticProperties {
        --joy-variant-$(property): var(--joy-variant-$(variant)-$(property));
    }
}

@mixin palette-forced($component, $palette) {
    @each $step in $steps {
        /* prettier-ignore */
        --joy-palette-$(step): var(--joy-palette-$(palette)-$(step));
    }

    @each $variant in $variants {
        @each $attribute in $attributes {
            /* prettier-ignore */
            --joy-palette-$(variant)$(attribute): var(
                --joy-palette-$(palette)-$(variant)$(attribute)
            );

            @each $state in $states {
                /* prettier-ignore */
                --joy-palette-$(variant)$(state)$(attribute): var(
                    --joy-palette-$(palette)-$(variant)$(state)$(attribute),
                    var(--joy-palette-$(palette)-$(variant)$(attribute))
                );
            }
        }
    }
}

@mixin style-forced($component, $variant, $palette) {
    @each $property in $drivenProperties {
        /* prettier-ignore */
        --joy-$(component)-$(property): var(
            --joy-palette-$(palette)-$(variant)$(property)
        );

        @each $state in $states {
            /* prettier-ignore */
            --joy-$(component)-$(state)$(property): var(
                --joy-palette-$(palette)-$(variant)$(state)$(property),
                var(--joy-palette-$(palette)-$(variant)$(property))
            );
        }
    }

    @each $property in $staticProperties {
        --joy-$(component)-$(property): var(
            --joy-variant-$(variant)-$(property)
        );
    }
}

@mixin perspective-symbol($theme, $state, $fill, $stroke) {
    --joy-symbolFill--joy-$(state): var(
        --joy-$(theme)-symbolFill--joy-$(state),
        $(fill)
    ) !important;
    --joy-symbolStroke--joy-$(state): var(
        --joy-$(theme)-symbolStroke--joy-$(state),
        $(stroke)
    ) !important;
}