@mussonindustrial/pyro-mui-joy
Version:
A port of Material UI Joy Theme for Ignition by Inductive Automation
157 lines (134 loc) • 5.32 kB
CSS
:root {
--white: #ffffff;
--black: #000000;
/* Neutrals */
--neutral-10: #fafafa;
--neutral-20: #f4f4f4;
--neutral-30: #d8d8d8;
--neutral-40: #bdbdbd;
--neutral-50: #a1a1a1;
--neutral-60: #767676;
--neutral-70: #5e5e5e;
--neutral-80: #515151;
--neutral-90: #323232;
--neutral-100: #161616;
/* Sequential */
--seq-1: #ae74e8; /* purple-50 */
--seq-2: #9659d6; /* purple-60 */
--seq-3: #7d3cbd; /* purple-70 */
--seq-4: #642b9e; /* purple-80 */
--seq-5: #4b2175; /* purple-90 */
--seq-6: #371c52; /* purple-100 */
/* Data Viz: Diverging */
--div-1: #642b9e; /* purple-80 */
--div-2: #7d3cbd; /* purple-70 */
--div-3: #9656d6; /* purple-60 */
--div-4: #ae74e8; /* purple-50 */
--div-5: #c79bf2; /* purple-40 */
--div-6: #dabcf7; /* purple-30 */
--div-7: #ead9fa; /* purple-20 */
--div-8: #f5f0fa; /* purple-10 */
--div-9: #d7faf8; /* teal-10 */
--div-10: #83f2eb; /* teal-20 */
--div-11: #43ded3; /* teal-30 */
--div-12: #21c2b7; /* teal-40 */
--div-13: #0ea197; /* teal-50 */
--div-14: #08827a; /* teal-60 */
--div-15: #086962; /* teal-70 */
--div-16: #09524d; /* teal-80 */
/* Data Viz: Qualitative */
--qual-1: #7d3cbd; /* purple-70 */
--qual-2: #229ad6; /* primary-50 */
--qual-3: #086962; /* teal-70 */
--qual-4: #b01355; /* magenta-70 */
--qual-5: #f55353; /* red-50 */
--qual-6: #661414; /* red-90 */
--qual-7: #038537; /* green-60 */
--qual-8: #114599; /* blue-80 */
--qual-9: #ed5393; /* magenta-50 */
--qual-10: #cf7911; /* bronze-50 */
--containerRoot: var(--neutral-10); /* the root container, depth 0 */
--container: var(--neutral-20); /* standard container, depth 1 */
--containerNested: var(--neutral-30); /* nested container, depth 2 */
--input: var(--white);
--input--disabled: var(--neutral-40);
--icon: var(--neutral-70);
--icon--hover: var(--neutral-60);
--icon--disabled: var(--neutral-40);
--icon--selected: var(--neutral-10);
--label: var(--neutral-90);
--label--disabled: var(--neutral-60);
/* Borders */
--border: var(--neutral-50);
--border--disabled: var(--neutral-50);
--containerBorder: 1px solid var(--border);
/* Box Shadow */
--boxShadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
--boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
--boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
--boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
--boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.3),
0 15px 12px rgba(0, 0, 0, 0.22);
--boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);
/* Call to action. */
--callToAction: #0c7bb3; /* primary-60 */
--callToActionHighlight: #e8f4fa; /* primary-10 */
--callToAction--hover: #229ad6; /* primary-50 */
--callToAction--active: #066391; /* primary-70 */
--callToAction--disabled: var(--neutral-50);
/* Functional */
--error: #de1b1b; /* red-60 */
--info: #3272d9; /* blue-60 */
--infoSecondary: #accbfc; /* blue-30 */
--warning: #ad5f00; /* bronze-60 */
--warningSecondary: #f5bc76; /* bronze-30 */
--success: #038537; /* green-60 */
/* Border Radius */
--borderRadius: 4px;
--borderRadiusInput: 2px;
/* Opacity */
--opacity-25: rgba(0, 0, 0, 0.25); /* black, 50% opacity */
--opacity-50: rgba(0, 0, 0, 0.5); /* black, 50% opacity */
--opacity-85: rgba(0, 0, 0, 0.85); /* black, 85% opacity */
/* Typography */
--font-NotoSans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Helvetica, Arial, sans-serif;
/* Components */
/* LED Display */
--indicator: #1ec963; /* green-40 */
--indicatorOff: #0a2e18; /* green-100 */
/* Checkbox */
--checkbox--checked: var(--callToAction);
--checkbox--unchecked: var(--border);
--checkbox--indeterminate: var(--callToAction);
--checkbox--disabled: var(--input--disabled);
/* Progress Bar */
--progressLinearTrack--determinate: var(--neutral-10);
--progressLinearTrack--indeterminate: var(--neutral-10);
--progressLinearBar--determinate: var(--infoSecondary);
--progressLinearBar--indeterminate: var(--border);
/* Toggle Switch */
--toggleSwitch--selected: var(--callToAction);
--toggleSwitch--unselected: var(--neutral-10);
/* Radio */
--radio--selected: var(--callToAction);
--radio--unselected: var(--border);
--radio--disabled: var(--input--disabled);
/* Piping */
--pipePrimaryFill: var(--neutral-20);
--pipeSecondaryFill: #cccccc;
--pipeStroke: var(--neutral-70);
--pipeSelectStroke: var(--callToAction);
/* Symbols */
--symbolFill--default: var(--neutral-40);
--symbolFillAnimation--default: var(--neutral-50);
--symbolStroke--default: var(--neutral-70);
--symbolFill--running: var(--white);
--symbolFillAnimation--running: var(--neutral-50);
--symbolStroke--running: var(--neutral-70);
--symbolFill--stopped: var(--neutral-40);
--symbolStroke--stopped: var(--neutral-70);
--symbolFill--faulted: #fab6b6;
--symbolStroke--faulted: #b80d0d;
}