@mussonindustrial/pyro-mui-joy
Version:
A port of Material UI Joy Theme for Ignition by Inductive Automation
158 lines (134 loc) • 5.51 kB
CSS
:root {
--white: #ffffff;
--black: hsl(0, 0%, 0%);
/* Neutrals */
--neutral-10: #161616; /* neutral-100 */
--neutral-20: #323232; /* neutral-90 */
--neutral-30: #515151; /* neutral-80 */
--neutral-40: #5e5e5e; /* neutral-70 */
--neutral-50: #767676; /* neutral-60 */
--neutral-60: #a1a1a1; /* neutral-50 */
--neutral-70: #bdbdbd; /* neutral-40 */
--neutral-80: #d8d8d8; /* neutral-30 */
--neutral-90: #f4f4f4; /* neutral-20 */
--neutral-100: #fafafa; /* neutral-10 */
/* Data Viz: Sequential */
--seq-1: #9656d6; /* purple-60 */
--seq-2: #ae74e8; /* purple-50 */
--seq-3: #c79bf2; /* purple-40 */
--seq-4: #dabcf7; /* purple-30 */
--seq-5: #ead9fa; /* purple-20 */
--seq-6: #f5f0fa; /* purple-10 */
/* 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: #9656d6; /* purple-60 */
--qual-2: #53baed; /* primary-40 */
--qual-3: #08827a; /* teal-60 */
--qual-4: #f78bb8; /* magenta-40 */
--qual-5: #f55353; /* red-50 */
--qual-6: #faf0f0; /* red-10 */
--qual-7: #46e385; /* green-30 */
--qual-8: #5691f0; /* blue-50 */
--qual-9: #ed5393; /* magenta-50 */
--qual-10: #e89c3f; /* bronze-40 */
--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(--black);
--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: #229ad6; /* primary-50 */
--callToActionHighlight: #0c2938; /* primary-100 */
--callToAction--hover: #0c7bb3; /* primary-60 */
--callToAction--active: #53baed; /* primary-40 */
--callToAction--disabled: var(--neutral-50);
/* Functional */
--error: #f55353; /* red-50 */
--info: #5691f0; /* blue-50 */
--infoSecondary: #114599; /* blue-80 */
--warning: #cf7911; /* bronze-50 */
--warningSecondary: #693d07; /* bronze-80 */
--success: #0aa648; /* green-50 */
/* 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: #5a5a5a;
--pipeStroke: var(--neutral-70);
--pipeSelectStroke: var(--callToAction);
/* Symbols */
--symbolFill--default: var(--neutral-20);
--symbolStroke--default: var(--neutral-70);
--symbolFillAnimation--default: var(--neutral-80);
--symbolFill--running: var(--neutral-50);
--symbolFillAnimation--running: var(--neutral-80);
--symbolStroke--running: var(--neutral-70);
--symbolFill--stopped: var(--black);
--symbolStroke--stopped: var(--neutral-70);
--symbolFill--faulted: #8f0e0e;
--symbolStroke--faulted: #fa8e8e;
}