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

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

$palettes: (primary, neutral, danger, info, success, warning);
$variants: (plain, outlined, soft, solid);
$states: (Hover, Active, Disabled);
$attributes: (Color, Bg, Border);
$steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);

@each $palette in $palettes {
    [psc='Joy/Palette/$(palette)'] {
        --joy-palette-mainChannel: var(--joy-palette-$(palette)-mainChannel);
        --joy-palette-lightChannel: var(--joy-palette-$(palette)-lightChannel);
        --joy-palette-darkChannel: var(--joy-palette-$(palette)-darkChannel);
        --joy-palette-focusedHighlight: var(
            --joy-palette-$(palette)-focusedHighlight
        );

        @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-$(variant)$(attribute))
                    );
                }
            }
        }
    }
}

@mixin palette-default($component, $palette: primary) {
    &:not(
            :where(
                    [psc='Joy/Palette/danger'],
                    [psc='Joy/Palette/info'],
                    [psc='Joy/Palette/neutral'],
                    [psc='Joy/Palette/primary'],
                    [psc='Joy/Palette/success'],
                    [psc='Joy/Palette/warning']
                )
        ) {
        @each $variant in $variants {
            @each $property in $drivenProperties {
                /* prettier-ignore */
                --joy-$(component)-default-$(variant)$(property): var(
                    --joy-palette-$(palette)-$(variant)$(property)
                );

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

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