@mussonindustrial/pyro-mui-joy/src/colors/light.css

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

:root {
    /* Light Theme */
    --joy-background-color: rgb(255, 255, 255);
    --joy-palette-primary-50: #edf5fd;
    --joy-palette-primary-100: #e3effb;
    --joy-palette-primary-200: #c7dff7;
    --joy-palette-primary-300: #97c3f0;
    --joy-palette-primary-400: #4393e4;
    --joy-palette-primary-500: #0b6bcb;
    --joy-palette-primary-600: #185ea5;
    --joy-palette-primary-700: #12467b;
    --joy-palette-primary-800: #0a2744;
    --joy-palette-primary-900: #051423;
    --joy-palette-primary-plainColor: var(--joy-palette-primary-500, #0b6bcb);
    --joy-palette-primary-plainHoverBg: var(--joy-palette-primary-100, #e3effb);
    --joy-palette-primary-plainActiveBg: var(
        --joy-palette-primary-200,
        #c7dff7
    );
    --joy-palette-primary-plainDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-primary-outlinedColor: var(
        --joy-palette-primary-500,
        #0b6bcb
    );
    --joy-palette-primary-outlinedBorder: var(
        --joy-palette-primary-300,
        #97c3f0
    );
    --joy-palette-primary-outlinedHoverBg: var(
        --joy-palette-primary-100,
        #e3effb
    );
    --joy-palette-primary-outlinedActiveBg: var(
        --joy-palette-primary-200,
        #c7dff7
    );
    --joy-palette-primary-outlinedDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-primary-outlinedDisabledBorder: var(
        --joy-palette-neutral-200,
        #dde7ee
    );
    --joy-palette-primary-softColor: var(--joy-palette-primary-700, #12467b);
    --joy-palette-primary-softBg: var(--joy-palette-primary-100, #e3effb);
    --joy-palette-primary-softHoverBg: var(--joy-palette-primary-200, #c7dff7);
    --joy-palette-primary-softActiveColor: var(
        --joy-palette-primary-800,
        #0a2744
    );
    --joy-palette-primary-softActiveBg: var(--joy-palette-primary-300, #97c3f0);
    --joy-palette-primary-softDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-primary-softDisabledBg: var(
        --joy-palette-neutral-50,
        #fbfcfe
    );
    --joy-palette-primary-solidColor: var(--joy-palette-common-white, #fff);
    --joy-palette-primary-solidBg: var(--joy-palette-primary-500, #0b6bcb);
    --joy-palette-primary-solidHoverBg: var(--joy-palette-primary-600, #185ea5);
    --joy-palette-primary-solidActiveBg: var(
        --joy-palette-primary-700,
        #12467b
    );
    --joy-palette-primary-solidDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-primary-solidDisabledBg: var(
        --joy-palette-neutral-100,
        #f0f4f8
    );
    --joy-palette-primary-mainChannel: 11 107 203;
    --joy-palette-primary-lightChannel: 199 223 247;
    --joy-palette-primary-darkChannel: 18 70 123;
    --joy-palette-neutral-50: #fbfcfe;
    --joy-palette-neutral-100: #f0f4f8;
    --joy-palette-neutral-200: #dde7ee;
    --joy-palette-neutral-300: #cdd7e1;
    --joy-palette-neutral-400: #9fa6ad;
    --joy-palette-neutral-500: #636b74;
    --joy-palette-neutral-600: #555e68;
    --joy-palette-neutral-700: #32383e;
    --joy-palette-neutral-800: #171a1c;
    --joy-palette-neutral-900: #0b0d0e;
    --joy-palette-neutral-plainColor: var(--joy-palette-neutral-700, #32383e);
    --joy-palette-neutral-plainHoverBg: var(--joy-palette-neutral-100, #f0f4f8);
    --joy-palette-neutral-plainActiveBg: var(
        --joy-palette-neutral-200,
        #dde7ee
    );
    --joy-palette-neutral-plainDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-neutral-outlinedColor: var(
        --joy-palette-neutral-700,
        #32383e
    );
    --joy-palette-neutral-outlinedBorder: var(
        --joy-palette-neutral-300,
        #cdd7e1
    );
    --joy-palette-neutral-outlinedHoverBg: var(
        --joy-palette-neutral-100,
        #f0f4f8
    );
    --joy-palette-neutral-outlinedActiveBg: var(
        --joy-palette-neutral-200,
        #dde7ee
    );
    --joy-palette-neutral-outlinedDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-neutral-outlinedDisabledBorder: var(
        --joy-palette-neutral-200,
        #dde7ee
    );
    --joy-palette-neutral-softColor: var(--joy-palette-neutral-700, #32383e);
    --joy-palette-neutral-softBg: var(--joy-palette-neutral-100, #f0f4f8);
    --joy-palette-neutral-softHoverBg: var(--joy-palette-neutral-200, #dde7ee);
    --joy-palette-neutral-softActiveColor: var(
        --joy-palette-neutral-800,
        #171a1c
    );
    --joy-palette-neutral-softActiveBg: var(--joy-palette-neutral-300, #cdd7e1);
    --joy-palette-neutral-softDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-neutral-softDisabledBg: var(
        --joy-palette-neutral-50,
        #fbfcfe
    );
    --joy-palette-neutral-solidColor: var(--joy-palette-common-white, #fff);
    --joy-palette-neutral-solidBg: var(--joy-palette-neutral-500, #636b74);
    --joy-palette-neutral-solidHoverBg: var(--joy-palette-neutral-600, #555e68);
    --joy-palette-neutral-solidActiveBg: var(
        --joy-palette-neutral-700,
        #32383e
    );
    --joy-palette-neutral-solidDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-neutral-solidDisabledBg: var(
        --joy-palette-neutral-100,
        #f0f4f8
    );
    --joy-palette-neutral-plainHoverColor: var(
        --joy-palette-neutral-900,
        #0b0d0e
    );
    --joy-palette-neutral-mainChannel: 99 107 116;
    --joy-palette-neutral-lightChannel: 221 231 238;
    --joy-palette-neutral-darkChannel: 50 56 62;
    --joy-palette-danger-50: #fef6f6;
    --joy-palette-danger-100: #fce4e4;
    --joy-palette-danger-200: #f7c5c5;
    --joy-palette-danger-300: #f09898;
    --joy-palette-danger-400: #e47474;
    --joy-palette-danger-500: #c41c1c;
    --joy-palette-danger-600: #a51818;
    --joy-palette-danger-700: #7d1212;
    --joy-palette-danger-800: #430a0a;
    --joy-palette-danger-900: #240505;
    --joy-palette-danger-plainColor: var(--joy-palette-danger-500, #c41c1c);
    --joy-palette-danger-plainHoverBg: var(--joy-palette-danger-100, #fce4e4);
    --joy-palette-danger-plainActiveBg: var(--joy-palette-danger-200, #f7c5c5);
    --joy-palette-danger-plainDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-danger-outlinedColor: var(--joy-palette-danger-500, #c41c1c);
    --joy-palette-danger-outlinedBorder: var(--joy-palette-danger-300, #f09898);
    --joy-palette-danger-outlinedHoverBg: var(
        --joy-palette-danger-100,
        #fce4e4
    );
    --joy-palette-danger-outlinedActiveBg: var(
        --joy-palette-danger-200,
        #f7c5c5
    );
    --joy-palette-danger-outlinedDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-danger-outlinedDisabledBorder: var(
        --joy-palette-neutral-200,
        #dde7ee
    );
    --joy-palette-danger-softColor: var(--joy-palette-danger-700, #7d1212);
    --joy-palette-danger-softBg: var(--joy-palette-danger-100, #fce4e4);
    --joy-palette-danger-softHoverBg: var(--joy-palette-danger-200, #f7c5c5);
    --joy-palette-danger-softActiveColor: var(
        --joy-palette-danger-800,
        #430a0a
    );
    --joy-palette-danger-softActiveBg: var(--joy-palette-danger-300, #f09898);
    --joy-palette-danger-softDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-danger-softDisabledBg: var(--joy-palette-neutral-50, #fbfcfe);
    --joy-palette-danger-solidColor: var(--joy-palette-common-white, #fff);
    --joy-palette-danger-solidBg: var(--joy-palette-danger-500, #c41c1c);
    --joy-palette-danger-solidHoverBg: var(--joy-palette-danger-600, #a51818);
    --joy-palette-danger-solidActiveBg: var(--joy-palette-danger-700, #7d1212);
    --joy-palette-danger-solidDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-danger-solidDisabledBg: var(
        --joy-palette-neutral-100,
        #f0f4f8
    );
    --joy-palette-danger-mainChannel: 196 28 28;
    --joy-palette-danger-lightChannel: 247 197 197;
    --joy-palette-danger-darkChannel: 125 18 18;
    --joy-palette-info-50: #fdf7ff;
    --joy-palette-info-100: #f4eaff;
    --joy-palette-info-200: #e1cbff;
    --joy-palette-info-300: #c69eff;
    --joy-palette-info-400: #a374f9;
    --joy-palette-info-500: #814dde;
    --joy-palette-info-600: #5f35ae;
    --joy-palette-info-700: #452382;
    --joy-palette-info-800: #301761;
    --joy-palette-info-900: #1d0a42;
    --joy-palette-info-plainColor: var(--joy-palette-info-500, #0b6bcb);
    --joy-palette-info-plainHoverBg: var(--joy-palette-info-100, #e3effb);
    --joy-palette-info-plainActiveBg: var(--joy-palette-info-200, #c7dff7);
    --joy-palette-info-plainDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-info-outlinedColor: var(--joy-palette-info-500, #0b6bcb);
    --joy-palette-info-outlinedBorder: var(--joy-palette-info-300, #97c3f0);
    --joy-palette-info-outlinedHoverBg: var(--joy-palette-info-100, #e3effb);
    --joy-palette-info-outlinedActiveBg: var(--joy-palette-info-200, #c7dff7);
    --joy-palette-info-outlinedDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-info-outlinedDisabledBorder: var(
        --joy-palette-neutral-200,
        #dde7ee
    );
    --joy-palette-info-softColor: var(--joy-palette-info-700, #12467b);
    --joy-palette-info-softBg: var(--joy-palette-info-100, #e3effb);
    --joy-palette-info-softHoverBg: var(--joy-palette-info-200, #c7dff7);
    --joy-palette-info-softActiveColor: var(--joy-palette-info-800, #0a2744);
    --joy-palette-info-softActiveBg: var(--joy-palette-info-300, #97c3f0);
    --joy-palette-info-softDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-info-softDisabledBg: var(--joy-palette-neutral-50, #fbfcfe);
    --joy-palette-info-solidColor: var(--joy-palette-common-white, #fff);
    --joy-palette-info-solidBg: var(--joy-palette-info-500, #0b6bcb);
    --joy-palette-info-solidHoverBg: var(--joy-palette-info-600, #185ea5);
    --joy-palette-info-solidActiveBg: var(--joy-palette-info-700, #12467b);
    --joy-palette-info-solidDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-info-solidDisabledBg: var(--joy-palette-neutral-100, #f0f4f8);
    --joy-palette-info-mainChannel: 129 77 222;
    --joy-palette-info-lightChannel: 225 203 255;
    --joy-palette-info-darkChannel: 48 23 97;
    --joy-palette-success-50: #f6fef6;
    --joy-palette-success-100: #e3fbe3;
    --joy-palette-success-200: #c7f7c7;
    --joy-palette-success-300: #a1e8a1;
    --joy-palette-success-400: #51bc51;
    --joy-palette-success-500: #1f7a1f;
    --joy-palette-success-600: #136c13;
    --joy-palette-success-700: #0a470a;
    --joy-palette-success-800: #042f04;
    --joy-palette-success-900: #021d02;
    --joy-palette-success-plainColor: var(--joy-palette-success-500, #1f7a1f);
    --joy-palette-success-plainHoverBg: var(--joy-palette-success-100, #e3fbe3);
    --joy-palette-success-plainActiveBg: var(
        --joy-palette-success-200,
        #c7f7c7
    );
    --joy-palette-success-plainDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-success-outlinedColor: var(
        --joy-palette-success-500,
        #1f7a1f
    );
    --joy-palette-success-outlinedBorder: var(
        --joy-palette-success-300,
        #a1e8a1
    );
    --joy-palette-success-outlinedHoverBg: var(
        --joy-palette-success-100,
        #e3fbe3
    );
    --joy-palette-success-outlinedActiveBg: var(
        --joy-palette-success-200,
        #c7f7c7
    );
    --joy-palette-success-outlinedDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-success-outlinedDisabledBorder: var(
        --joy-palette-neutral-200,
        #dde7ee
    );
    --joy-palette-success-softColor: var(--joy-palette-success-700, #0a470a);
    --joy-palette-success-softBg: var(--joy-palette-success-100, #e3fbe3);
    --joy-palette-success-softHoverBg: var(--joy-palette-success-200, #c7f7c7);
    --joy-palette-success-softActiveColor: var(
        --joy-palette-success-800,
        #042f04
    );
    --joy-palette-success-softActiveBg: var(--joy-palette-success-300, #a1e8a1);
    --joy-palette-success-softDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-success-softDisabledBg: var(
        --joy-palette-neutral-50,
        #fbfcfe
    );
    --joy-palette-success-solidColor: var(--joy-palette-common-white, #fff);
    --joy-palette-success-solidBg: var(--joy-palette-success-500, #1f7a1f);
    --joy-palette-success-solidHoverBg: var(--joy-palette-success-600, #136c13);
    --joy-palette-success-solidActiveBg: var(
        --joy-palette-success-700,
        #0a470a
    );
    --joy-palette-success-solidDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-success-solidDisabledBg: var(
        --joy-palette-neutral-100,
        #f0f4f8
    );
    --joy-palette-success-mainChannel: 31 122 31;
    --joy-palette-success-lightChannel: 199 247 199;
    --joy-palette-success-darkChannel: 10 71 10;
    --joy-palette-warning-50: #fefaf6;
    --joy-palette-warning-100: #fdf0e1;
    --joy-palette-warning-200: #fce1c2;
    --joy-palette-warning-300: #f3c896;
    --joy-palette-warning-400: #ea9a3e;
    --joy-palette-warning-500: #9a5b13;
    --joy-palette-warning-600: #72430d;
    --joy-palette-warning-700: #492b08;
    --joy-palette-warning-800: #2e1b05;
    --joy-palette-warning-900: #1d1002;
    --joy-palette-warning-plainColor: var(--joy-palette-warning-500, #9a5b13);
    --joy-palette-warning-plainHoverBg: var(--joy-palette-warning-100, #fdf0e1);
    --joy-palette-warning-plainActiveBg: var(
        --joy-palette-warning-200,
        #fce1c2
    );
    --joy-palette-warning-plainDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-warning-outlinedColor: var(
        --joy-palette-warning-500,
        #9a5b13
    );
    --joy-palette-warning-outlinedBorder: var(
        --joy-palette-warning-300,
        #f3c896
    );
    --joy-palette-warning-outlinedHoverBg: var(
        --joy-palette-warning-100,
        #fdf0e1
    );
    --joy-palette-warning-outlinedActiveBg: var(
        --joy-palette-warning-200,
        #fce1c2
    );
    --joy-palette-warning-outlinedDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-warning-outlinedDisabledBorder: var(
        --joy-palette-neutral-200,
        #dde7ee
    );
    --joy-palette-warning-softColor: var(--joy-palette-warning-700, #492b08);
    --joy-palette-warning-softBg: var(--joy-palette-warning-100, #fdf0e1);
    --joy-palette-warning-softHoverBg: var(--joy-palette-warning-200, #fce1c2);
    --joy-palette-warning-softActiveColor: var(
        --joy-palette-warning-800,
        #2e1b05
    );
    --joy-palette-warning-softActiveBg: var(--joy-palette-warning-300, #f3c896);
    --joy-palette-warning-softDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-warning-softDisabledBg: var(
        --joy-palette-neutral-50,
        #fbfcfe
    );
    --joy-palette-warning-solidColor: var(--joy-palette-common-white, #fff);
    --joy-palette-warning-solidBg: var(--joy-palette-warning-500, #9a5b13);
    --joy-palette-warning-solidHoverBg: var(--joy-palette-warning-600, #72430d);
    --joy-palette-warning-solidActiveBg: var(
        --joy-palette-warning-700,
        #492b08
    );
    --joy-palette-warning-solidDisabledColor: var(
        --joy-palette-neutral-400,
        #9fa6ad
    );
    --joy-palette-warning-solidDisabledBg: var(
        --joy-palette-neutral-100,
        #f0f4f8
    );
    --joy-palette-warning-mainChannel: 154 91 19;
    --joy-palette-warning-lightChannel: 252 225 194;
    --joy-palette-warning-darkChannel: 73 43 8;
    --joy-palette-common-white: #fff;
    --joy-palette-common-black: #000;
    --joy-palette-text-primary: var(--joy-palette-neutral-800, #171a1c);
    --joy-palette-text-secondary: var(--joy-palette-neutral-700, #32383e);
    --joy-palette-text-tertiary: var(--joy-palette-neutral-600, #555e68);
    --joy-palette-text-icon: var(--joy-palette-neutral-500, #636b74);
    --joy-palette-background-body: var(--joy-palette-common-white, #fff);
    --joy-palette-background-surface: var(--joy-palette-neutral-50, #fbfcfe);
    --joy-palette-background-popup: var(--joy-palette-common-white, #fff);
    --joy-palette-background-level1: var(--joy-palette-neutral-100, #f0f4f8);
    --joy-palette-background-level2: var(--joy-palette-neutral-200, #dde7ee);
    --joy-palette-background-level3: var(--joy-palette-neutral-300, #cdd7e1);
    --joy-palette-background-tooltip: var(--joy-palette-neutral-500, #636b74);
    --joy-palette-background-backdrop: rgba(
        var(--joy-palette-neutral-darkChannel, 11 13 14) / 0.25
    );
    --joy-palette-divider: rgba(
        var(--joy-palette-neutral-mainChannel, 99 107 116) / 0.2
    );
    --joy-palette-focusVisible: var(--joy-palette-primary-500, #0b6bcb);
    --joy-shadowRing: 0 0 #000;
    --joy-shadowChannel: 21 21 21;
    --joy-shadowOpacity: 0.08;

    --joy-palette-background-highlight: rgba(240, 247, 255, 0.5);
    --joy-palette-background-highlight-image: radial-gradient(
            at 51% 52%,
            rgba(240, 247, 255, 0.5) 0px,
            transparent 50%
        ),
        radial-gradient(at 80% 0%, #ffffff 0px, transparent 20%),
        radial-gradient(at 0% 95%, rgba(194, 224, 255, 0.3), transparent 40%),
        radial-gradient(at 0% 20%, #f0f7ff 0px, transparent 50%),
        radial-gradient(
            at 93% 85%,
            rgba(194, 224, 255, 0.2) 0px,
            transparent 50%
        );

    @include perspective-symbol(
        joy-light,
        running,
        var(--joy-palette-common-white),
        var(--joy-palette-neutral-700)
    );
    @include perspective-symbol(
        joy-light,
        stopped,
        var(--joy-palette-neutral-400),
        var(--joy-palette-neutral-700)
    );
    @include perspective-symbol(
        joy-light,
        default,
        var(--joy-palette-neutral-400),
        var(--joy-palette-neutral-700)
    );
    @include perspective-symbol(
        joy-light,
        faulted,
        var(--joy-palette-danger-500),
        var(--joy-palette-danger-700)
    );
}

:focus {
    outline: none;
}

/* prettier-ignore */
[psc='Joy/Variant/soft'] [psc='Joy/Variant/color-inversion'][psc='Joy/Variant/color-inversion']:not(
    [psc='Joy/Variant/skip-inverted-colors'],
    [psc='Joy/Variant/skip-inverted-colors'] *
) {

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

    --joy-palette-focusVisible: var(--joy-palette-500, #9a5b13);
    --joy-palette-background-body: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.1
    );
    --joy-palette-background-surface: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.08
    );
    --joy-palette-background-level1: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.2
    );
    --joy-palette-background-level2: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.32
    );
    --joy-palette-background-level3: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.48
    );
    --joy-palette-text-primary: var(--joy-palette-700, #492b08);
    --joy-palette-text-secondary: rgba(var(--joy-palette-darkChannel, 73 43 8) / 0.8);
    --joy-palette-text-tertiary: rgba(var(--joy-palette-darkChannel, 73 43 8) / 0.68);
    --joy-palette-text-icon: var(--joy-palette-500, #9a5b13);
    --joy-palette-divider: rgba(var(--joy-palette-mainChannel, 154 91 19) / 0.32);
    --joy-palette-plainColor: rgba(var(--joy-palette-darkChannel, 73 43 8) / 0.8);
    --joy-palette-plainHoverColor: rgba(var(--joy-palette-darkChannel, 73 43 8) / 1);
    --joy-palette-plainHoverBg: rgba(var(--joy-palette-mainChannel, 154 91 19) / 0.12);
    --joy-palette-plainActiveBg: rgba(var(--joy-palette-mainChannel, 154 91 19) / 0.24);
    --joy-palette-plainDisabledColor: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.6
    );
    --joy-palette-outlinedColor: rgba(var(--joy-palette-mainChannel, 154 91 19) / 1);
    --joy-palette-outlinedBorder: rgba(var(--joy-palette-mainChannel, 154 91 19) / 0.4);
    --joy-palette-outlinedHoverColor: var(--joy-palette-600, #72430d);
    --joy-palette-outlinedHoverBorder: var(--joy-palette-300, #f3c896);
    --joy-palette-outlinedHoverBg: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.12
    );
    --joy-palette-outlinedActiveBg: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.24
    );
    --joy-palette-outlinedDisabledColor: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.6
    );
    --joy-palette-outlinedDisabledBorder: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.12
    );
    --joy-palette-softColor: var(--joy-palette-600, #72430d);
    --joy-palette-softBg: rgba(var(--joy-palette-lightChannel, 252 225 194) / 0.8);
    --joy-palette-softHoverColor: var(--joy-palette-700, #492b08);
    --joy-palette-softHoverBg: var(--joy-palette-200, #fce1c2);
    --joy-palette-softActiveBg: var(--joy-palette-300, #f3c896);
    --joy-palette-softDisabledColor: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.6
    );
    --joy-palette-softDisabledBg: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.08
    );
    --joy-palette-solidColor: var(--joy-palette-common-white, #fff);
    --joy-palette-solidBg: var(--joy-palette-500, #9a5b13);
    --joy-palette-solidHoverColor: var(--joy-palette-common-white, #fff);
    --joy-palette-solidHoverBg: var(--joy-palette-600, #72430d);
    --joy-palette-solidActiveBg: var(--joy-palette-600, #72430d);
    --joy-palette-solidDisabledColor: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.6
    );
    --joy-palette-solidDisabledBg: rgba(
        var(--joy-palette-mainChannel, 154 91 19) / 0.08
    );
}

/* prettier-ignore */
[psc='Joy/Variant/solid'] [psc='Joy/Variant/color-inversion'][psc='Joy/Variant/color-inversion']:not(
    [psc='Joy/Variant/skip-inverted-colors'],
    [psc='Joy/Variant/skip-inverted-colors'] *
) {

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

    --joy-palette-focusVisible: var(--joy-palette-200, #dde7ee);
    --joy-palette-background-body: rgba(0 0 0 / 0.1);
    --joy-palette-background-surface: rgba(0 0 0 / 0.06);
    --joy-palette-background-popup: var(--joy-palette-700, #32383e);
    --joy-palette-background-level1: rgba(
        var(--joy-palette-darkChannel, 50 56 62) / 0.2
    );
    --joy-palette-background-level2: rgba(
        var(--joy-palette-darkChannel, 50 56 62) / 0.36
    );
    --joy-palette-background-level3: rgba(
        var(--joy-palette-darkChannel, 50 56 62) / 0.6
    );
    --joy-palette-text-primary: var(--joy-palette-common-white, #fff);
    --joy-palette-text-secondary: var(--joy-palette-200, #dde7ee);
    --joy-palette-text-tertiary: var(--joy-palette-300, #cdd7e1);
    --joy-palette-text-icon: var(--joy-palette-200, #dde7ee);
    --joy-palette-divider: rgba(var(--joy-palette-lightChannel, 221 231 238) / 0.32);
    --joy-palette-plainColor: var(--joy-palette-50, #fbfcfe);
    --joy-palette-plainHoverColor: #fff;
    --joy-palette-plainHoverBg: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.12
    );
    --joy-palette-plainActiveBg: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.32
    );
    --joy-palette-plainDisabledColor: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.72
    );
    --joy-palette-outlinedColor: var(--joy-palette-50, #fbfcfe);
    --joy-palette-outlinedBorder: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.5
    );
    --joy-palette-outlinedHoverColor: #fff;
    --joy-palette-outlinedHoverBorder: var(--joy-palette-300, #cdd7e1);
    --joy-palette-outlinedHoverBg: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.12
    );
    --joy-palette-outlinedActiveBg: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.32
    );
    --joy-palette-outlinedDisabledColor: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.72
    );
    --joy-palette-outlinedDisabledBorder: rgba(255 255 255 / 0.2);
    --joy-palette-softColor: var(--joy-palette-common-white, #fff);
    --joy-palette-softHoverColor: var(--joy-palette-common-white, #fff);
    --joy-palette-softBg: rgba(var(--joy-palette-lightChannel, 221 231 238) / 0.24);
    --joy-palette-softHoverBg: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.36
    );
    --joy-palette-softActiveBg: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.16
    );
    --joy-palette-softActiveColor: #fff;
    --joy-palette-softDisabledColor: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.72
    );
    --joy-palette-softDisabledBg: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.1
    );
    --joy-palette-solidColor: var(--joy-palette-600, #555e68);
    --joy-palette-solidBg: var(--joy-palette-common-white, #fff);
    --joy-palette-solidHoverBg: var(--joy-palette-common-white, #fff);
    --joy-palette-solidActiveBg: var(--joy-palette-100, #f0f4f8);
    --joy-palette-solidDisabledColor: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.72
    );
    --joy-palette-solidDisabledBg: rgba(
        var(--joy-palette-lightChannel, 221 231 238) / 0.1
    );
}