@mussonindustrial/pyro-mui-joy/src/common/variants.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);

:root {
    --joy-variant-plain-borderWidth: 0px;
    --joy-variant-plain-borderStyle: none;
    --joy-variant-outlined-borderWidth: 1px;
    --joy-variant-outlined-borderStyle: solid;
    --joy-variant-soft-borderWidth: 0px;
    --joy-variant-soft-borderStyle: none;
    --joy-variant-solid-borderWidth: 0px;
    --joy-variant-solid-borderStyle: none;

    /* Default to outlined neutral */
    @each $property in $drivenProperties {
        --joy-variant-default$(property): var(
            --joy-palette-neutral-outlined$(property)
        );
        --joy-variant-$(property): var(
            --joy-palette-neutral-outlined$(property)
        );

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

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

@each $variant in $variants {
    [psc='Joy/Variant/$(variant)'] {
        @each $property in $drivenProperties {
            /* prettier-ignore */
            --joy-variant-$(property): var(--joy-palette-$(variant)$(property), unset);

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

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

        &:disabled {
            pointer-events: none;
            cursor: default;
        }
    }
}