Upload of projects and themes

2026-02-17 18:14:44 +00:00
parent 00ee2e1ee1
commit c7730b9da4
302 changed files with 24019 additions and 2 deletions
--- a/gateway_frontend/themes/oracle-dark/archivefile.css
+++ b/gateway_frontend/themes/oracle-dark/archivefile.css
@@ -0,0 +1,370 @@
+:root {
+    /* =========================================
+       1. PRIMITIVES
+       Define base color palette for the theme.
+       ========================================= */
+
+    /* Oracle Pallete */
+    --palette-oracle-red: #C74634;
+    --palette-slate-50-1: #C2D4D4;
+    --palette-slate-50-2: #A0BBBB;
+    --palette-slate-50-3: #85A8A8;
+    --palette-slate-50-4: #6A9595;
+    --palette-slate-100-1: #697778;
+    --palette-slate-100-2: #778788;
+    --palette-slate-100-3: #8F9D9E;
+    --palette-slate-100-4: #A8B2B3;
+    --palette-slate-150-1: #3C4545;
+    --palette-slate-150-2: #4C5757;
+    --palette-slate-150-3: #617070;
+    --palette-slate-150-4: #778888;
+    --palette-slate-200-1: #2B3333;
+    --palette-slate-200-2: #4C5757;
+    --palette-slate-200-3: #617070;
+    --palette-slate-200-4: #778888;
+    --palette-neutral-30-1: #F1EFED;
+    --palette-neutral-30-2: #DED9D4;
+    --palette-neutral-30-3: #CAC2BB;
+    --palette-neutral-30-4: #B6ACA2;
+
+
+    /* Base colors */
+    --palette-gray-1: #b1b3b2;
+    --palette-gray-2: #d9d8d4;
+    --palette-red-10: #FAF0F0;
+    --palette-red-20: #661414;
+    --palette-red-30: #8A2020;
+    --palette-red-50: #F55353;
+    --palette-red-60: #FA8E8E;
+
+    /*Begin Standard Ignition*/
+    --white: #FFFFFF;
+    --black: hsl(0, 0%, 0%);
+
+    /* Neutrals */
+    --neutral-10: var(--palette-slate-100-1);
+    --neutral-20: #778788;
+    --neutral-30: #8F9D9E;
+    --neutral-40: #A8B2B3;
+    --neutral-50: #767676;
+    --neutral-60: #A1A1A1;
+    --neutral-70: #BDBDBD;
+    --neutral-80: #D8D8D8;
+    --neutral-90: #F4F4F4;
+    --neutral-100: #FAFAFA;
+
+    /* =========================================
+       2. FUNCTIONAL
+       Define functional color palette for the theme.
+       ========================================= */
+
+    /* Alarm colors */
+    --alarm-critical: #D32F2F;
+    --alarm-high: #F57C00;
+    --alarm-medium: #FBC02D;
+    --alarm-low: #0288D1;
+    --alarm-info: #70539B;
+
+    /*One Line color*/
+    --oneline-green: #8fca94;
+    --oneline-yellow: #f4b834;
+    --oneline-red: #e23030;
+    --oneline-gray: #d9d8d4;
+
+    /*High Performance */
+    --high-performance-white: #ffffff;
+    --high-performance-gray: #9c9c9c;
+    --high-performance-red: #e23030;
+    --high-performance-blue: #a9d9ff;
+    --high-performance-purple: #7266b7;
+    --high-performance-green: #8fca94;
+    --high-performance-yellow: #f4b834;
+
+    /* Data Viz: Sequential */
+    --seq-1: #9656D6;
+    --seq-2: #AE74E8;
+    --seq-3: #C79BF2;
+    --seq-4: #DABCF7;
+    --seq-5: #EAD9FA;
+    --seq-6: #F5F0FA;
+
+    /* Data Viz: Diverging */
+    --div-1: #642B9E;
+    --div-2: #7D3CBD;
+    --div-3: #9656D6;
+    --div-4: #AE74E8;
+    --div-5: #C79BF2;
+    --div-6: #DABCF7;
+    --div-7: #EAD9FA;
+    --div-8: #F5F0FA;
+    --div-9: #D7FAF8;
+    --div-10: #83F2EB;
+    --div-11: #43DED3;
+    --div-12: #21C2B7;
+    --div-13: #0EA197;
+    --div-14: #08827A;
+    --div-15: #086962;
+    --div-16: #09524D;
+
+    /* Data Viz: Qualitative */
+    --qual-1: #9656D6;
+    --qual-2: #53BAED;
+    --qual-3: #08827A;
+    --qual-4: #F78BB8;
+    --qual-5: var(--red-50);
+    --qual-6: var(--red-10);
+    --qual-7: #46E385;
+    --qual-8: #5691F0;
+    --qual-9: #ED5393;
+    --qual-10: #E89C3F;
+
+    /* Functional */
+    --error: var(--palette-red-50);
+    --info: #5691F0;
+    --info-secondary: #114599;
+    --warning: #CF7911;
+    --warning-secondary: #693D07;
+    --success: #0AA648;
+
+    /* LED Display */
+    --indicator: #1EC963;
+    --indicatorOff: #0A2E18;
+
+    /* =========================================
+       3. OBJECTS
+       Define object color palette for the theme.
+       ========================================= */
+    /* value styles */
+    --tag-value-color: var(--palette-slate-50-1);
+    --tag-units-color: var(--palette-slate-50-4);
+
+    /* naviagtion styles */
+    --navtree-color: var(--palette-neutral-30-2);
+    --navtree-bgcolor: var(--palette-slate-150-1);
+    --navtreeitem-hover-color: var(--palette-neutral-30-2);
+    --navtreeitem-hover-bgcolor: var(--palette-slate-150-2);
+    --navtreeitem-active-color: var(--palette-neutral-30-2);
+    --navtreeitem-active-bgcolor: var(--palette-slate-150-2);
+    --idk-what: #0d1741;
+
+    /* Containers */
+    --container-root: var(--palette-slate-200-1);
+    /* the root container, depth 0 */
+    --container: var(--palette-slate-150-1);
+    /* standard container, depth 1 */
+    --container-nested: var(--palette-slate-150-2);
+    /* nested container, depth 2 */
+
+    /* Inputs */
+    --input: var(--black);
+    /* standard input */
+    --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);
+    --container-border: 1px solid rgba(255, 255, 255, 0.1);
+
+    /* Box Shadow */
+    --box-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.45);
+    --box-shadow-2: 0 10px 20px rgba(0, 0, 0, 0.5), 0 6px 6px rgba(0, 0, 0, 0.3);
+    --box-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.55), 0 6px 6px rgba(0, 0, 0, 0.55);
+    --box-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.60), 0 10px 10px rgba(0, 0, 0, 0.60);
+    --box-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.65), 0 15px 12px rgba(0, 0, 0, 0.65);
+
+    --box-shadow-inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);
+
+    /* --- Data Grids / Tables --- */
+    --table-header-bg: var(--palette-slate-100-2);
+    --table-header-text: var(--white);
+    --table-row-bg: var(--palette-slate-150-1);
+    --table-row-alt-bg: var(--palette-slate-150-2);
+    /* Zebra stripe color */
+    --table-row-hover: var(--palette-slate-150-3);
+    --table-border: var(--palette-slate-100-1);
+
+    /* --- Typography Scale --- */
+    --text-xs: 0.75rem;
+    /* 12px - Labels */
+    --text-sm: 0.875rem;
+    /* 14px - Body text */
+    --text-md: 1rem;
+    /* 16px - Standard values */
+    --text-lg: 1.25rem;
+    /* 20px - Sub-headers */
+    --text-xl: 1.5rem;
+    /* 24px - Headers */
+    --text-2xl: 2rem;
+    /* 32px - KPI Values */
+    --text-color: var(--palette-neutral-30-3);
+
+    /* Font Weights */
+    --weight-light: 300;
+    --weight-reg: 400;
+    --weight-bold: 700;
+
+    /* --- Charts & Trends --- */
+    --chart-bg: transparent;
+    /* Or var(--palette-slate-150-1) */
+    --chart-grid-lines: var(--palette-slate-100-1);
+    --chart-axis-text: var(--palette-slate-50-2);
+    --chart-crosshair: var(--white);
+    --chart-tooltip-bg: var(--palette-slate-150-4);
+
+    /* Call to action. */
+    --call-to-action: #229AD6;
+    --call-to-action-highlight: #0C2938;
+    --call-to-action-hover: #0C7BB3;
+    --call-to-action-active: #53BAED;
+    --call-to-action-active-alt: #093952;
+    --call-to-action-active-alt-invis: #0A6291;
+    --call-to-action-disabled: var(--neutral-50);
+
+    /* Border Radius */
+    --border-radius: 4px;
+    --border-radius-input: 2px;
+
+    /* Opacity */
+    --opacity-25: rgba(0, 0, 0, 0.25);
+    --opacity-50: rgba(0, 0, 0, 0.50);
+    --opacity-85: rgba(0, 0, 0, 0.85);
+
+    /* Typography */
+    --font-NotoSans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+
+    /* Checkbox */
+    --checkbox--checked: var(--call-to-action);
+    --checkbox--unchecked: var(--border);
+    --checkbox--indeterminate: var(--call-to-action);
+    --checkbox--disabled: var(--input-disabled);
+
+    /* Progress Bar */
+    --progressLinearTrack--determinate: var(--neutral-10);
+    --progressLinearTrack--indeterminate: var(--neutral-10);
+    --progressLinearBar--determinate: var(--info-secondary);
+    --progressLinearBar--indeterminate: var(--border);
+
+    /* Toggle Switch */
+    --toggleSwitch--selected: var(--call-to-action);
+    --toggleSwitch--unselected: var(--neutral-10);
+
+    /* Radio */
+    --radio--selected: var(--call-to-action);
+    --radio--unselected: var(--border);
+    --radio--disabled: var(--input-disabled);
+
+    /* Piping */
+    --pipePrimaryFill: var(--neutral-20);
+    --pipeSecondaryFill: #5a5a5a;
+    --pipeStroke: var(--neutral-70);
+    --pipeSelectStroke: var(--call-to-action);
+
+    /* Component Context Menu */
+    --contextBackground: var(--black);
+
+    /* 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;
+
+    /* Layers */
+    --z-background: -1;
+    --z-card: 10;
+    --z-header: 100;
+    --z-popup: 500;
+    --z-alarm-banner: 1000;
+    --z-tooltip: 2000;
+
+    /* Spacing Scale */
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 16px;
+    --space-lg: 24px;
+    --space-xl: 32px;
+
+    /* State Backgrounds (with opacity) */
+    --bg-error-subtle: rgba(226, 48, 48, 0.1);
+    /* 10% Red */
+    --bg-success-subtle: rgba(10, 166, 72, 0.1);
+    /* 10% Green */
+}
+
+.psc-navtree {
+    font-family: Nunito Sans;
+    font-size: 16;
+    font-weight: 100;
+    color: var(--navtree-color);
+    background-color: var(--navtree-bgcolor);
+}
+
+.psc-navtree .ia_treeComponent__node__icon {
+    fill: var(--navtree-color);
+    width: 30px;
+    height: 30px;
+}
+
+.psc-navtree .tree-item-label .label-wrapper.label-wrapper-icon {
+    flex: 0 0 30px;
+}
+
+.psc-navtree .expand-icon,
+.psc-navtree .terminal-expand-icon,
+.psc-navtree .ia_treeComponent__alignmentGuide {
+    display: none;
+}
+
+.psc-navtree .terminal-node .label-wrapper-icon {
+    visibility: hidden;
+}
+
+.psc-navtree .ia_treeComponent__node--selected {
+    background-color: var(--navtreeitem-active-bgcolor);
+    color: var(--navtreeitem-active-color);
+    font-weight: 100;
+}
+
+.psc-navtree .node-wrapper {
+    min-width: calc(100% - 20px) !important;
+}
+
+.psc-navtree .node-selected::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -12px;
+    /* Adjust this value to control how far the point extends outwards */
+    bottom: 0;
+    width: 12px;
+    /* Adjust width to control the size of the diamond side */
+    background-color: var(--navtreeitem-active-bgcolor);
+    /* Same as the container's background */
+    clip-path: polygon(0 0, 100% 50%, 0 100%);
+    /* Points outward to create the diamond shape */
+}
+
+.psc-navtree .node-selected .ia_treeComponent__node__icon {
+    fill: var(--navtreeitem-active-color);
+}
+
+.psc-navtree .ia_treeComponent__node:hover:not(.psc-navtree .ia_treeComponent__node--selected) {
+    background-color: var(--navtreeitem-hover-bgcolor);
+    color: var(--navtreeitem-hover-color);
+    font-weight: 100;
+}
+
+.psc-navtree .ia_treeComponent__node:hover:not(.psc-navtree .ia_treeComponent__node--selected) .ia_treeComponent__node__icon {
+    fill: var(--navtreeitem-active-color);
+}
--- a/gateway_frontend/themes/oracle-dark/config.json
+++ b/gateway_frontend/themes/oracle-dark/config.json
@@ -0,0 +1,4 @@
+{
+  "entrypoint": "index.css",
+  "isPrivate": false
+}
--- a/gateway_frontend/themes/oracle-dark/fonts.css
+++ b/gateway_frontend/themes/oracle-dark/fonts.css
@@ -0,0 +1,4 @@
+@font-face {
+    font-family: "Nunito Sans";
+    src: local('Nunito Sans'), local('Nunito'), url('/data/perspective/fonts/NunitoSans-VariableFont.ttf') format('truetype-variations');
+}
--- a/gateway_frontend/themes/oracle-dark/globals.css
+++ b/gateway_frontend/themes/oracle-dark/globals.css
@@ -0,0 +1,6 @@
+@import "../light/globals.css";
+
+::selection {
+    background: #697778;
+    color: var(--label);
+}
--- a/gateway_frontend/themes/oracle-dark/index.css
+++ b/gateway_frontend/themes/oracle-dark/index.css
@@ -0,0 +1,9 @@
+@import "../light/globals.css";
+@import "../light/app/index.css";
+@import "../light/common/index.css";
+@import "../light/designer/index.css";
+@import "../light/palette/index.css";
+
+@import "./variables.css";
+@import "./fonts.css";
+@import "./globals.css";
--- a/gateway_frontend/themes/oracle-dark/resource.json
+++ b/gateway_frontend/themes/oracle-dark/resource.json
@@ -0,0 +1,13 @@
+{
+  "scope": "G",
+  "description": "The light-warm theme for Perspective.",
+  "version": 1,
+  "restricted": false,
+  "overridable": true,
+  "files": [
+    "config.json",
+    "index.css",
+    "variables.css"
+  ],
+  "attributes": {}
+}
--- a/gateway_frontend/themes/oracle-dark/variables.css
+++ b/gateway_frontend/themes/oracle-dark/variables.css
@@ -0,0 +1,276 @@
+:root {
+    /* =========================================
+     1. PRIMITIVES
+     Define base color palette for the theme.
+     ========================================= */
+
+    /* --- ORACLE PALETTE (The Truth) --- */
+    --palette-oracle-red: #C74634;
+
+    /* Slates (Teal/Greys) - Used for Surfaces & Borders */
+    --palette-slate-50-1: #C2D4D4;
+    /* Lightest Teal */
+    --palette-slate-50-2: #A0BBBB;
+    --palette-slate-50-3: #85A8A8;
+    --palette-slate-50-4: #6A9595;
+    /* Vibrant Teal */
+
+    --palette-slate-100-1: #697778;
+    /* Mid Grey */
+    --palette-slate-100-2: #778788;
+    --palette-slate-100-3: #8F9D9E;
+    --palette-slate-100-4: #A8B2B3;
+
+    --palette-slate-150-1: #3C4545;
+    /* Card Surface */
+    --palette-slate-150-2: #4C5757;
+    /* Card Hover */
+    --palette-slate-150-3: #617070;
+    --palette-slate-150-4: #778888;
+
+    --palette-slate-200-1: #2B3333;
+    /* Background Root */
+    --palette-slate-200-2: #4C5757;
+    --palette-slate-200-3: #617070;
+    --palette-slate-200-4: #778888;
+
+    /* Warm Neutrals - Used for Text */
+    --palette-neutral-30-1: #F1EFED;
+    /* Main Text */
+    --palette-neutral-30-2: #DED9D4;
+    /* Secondary Text */
+    --palette-neutral-30-3: #CAC2BB;
+    /* Disabled Text */
+    --palette-neutral-30-4: #B6ACA2;
+
+    /* Standard Colors */
+    --white: #FFFFFF;
+    --black: #1A1A1A;
+    /* Never use pure #000000 in dark mode */
+
+    /* --- REFACTORED NEUTRALS (Mapped to Palette) --- */
+    /* We replace the random greys with your Slate Palette */
+    --neutral-10: var(--palette-slate-150-1);
+    /* Darkest */
+    --neutral-20: var(--palette-slate-150-2);
+    --neutral-30: var(--palette-slate-150-3);
+    --neutral-40: var(--palette-slate-100-1);
+    --neutral-50: var(--palette-slate-100-2);
+    /* Borders */
+    --neutral-60: var(--palette-slate-100-4);
+    --neutral-70: var(--palette-slate-50-4);
+    --neutral-80: var(--palette-slate-50-2);
+    --neutral-90: var(--palette-neutral-30-2);
+    --neutral-100: var(--palette-neutral-30-1);
+    /* Lightest */
+
+
+    /* =========================================
+     2. FUNCTIONAL
+     ========================================= */
+
+    /* Alarm colors */
+    --alarm-critical: #D32F2F;
+    --alarm-high: #F57C00;
+    --alarm-medium: #FBC02D;
+    --alarm-low: #0288D1;
+    --alarm-info: #70539B;
+
+    /* One Line & HP (High Performance) */
+    --oneline-green: #8fca94;
+    --oneline-yellow: #f4b834;
+    --oneline-red: #e23030;
+    --oneline-gray: var(--palette-slate-100-2);
+
+    --high-performance-white: var(--white);
+    --high-performance-gray: var(--palette-slate-100-1);
+    --high-performance-red: var(--oneline-red);
+    --high-performance-blue: #a9d9ff;
+    --high-performance-purple: #7266b7;
+    --high-performance-green: var(--oneline-green);
+    --high-performance-yellow: var(--oneline-yellow);
+
+    /* Functional Status */
+    --error: var(--alarm-critical);
+    --info: #5691F0;
+    --info-secondary: #114599;
+    --warning: var(--alarm-medium);
+    --warning-secondary: #693D07;
+    --success: var(--oneline-green);
+
+    /* =========================================
+     3. OBJECTS
+     ========================================= */
+
+    /* Containers & Surfaces */
+    --container-root: var(--palette-slate-200-1);
+    /* The deep floor */
+    --container: var(--palette-slate-150-1);
+    /* The card surface */
+    --container-nested: var(--palette-slate-150-2);
+    /* Slightly lighter */
+
+    /* Inputs (Mapped to Slate) */
+    --input: var(--palette-slate-200-1);
+    /* Dark input background */
+    --input-disabled: var(--palette-slate-150-3);
+
+    /* Icons & Labels */
+    --icon: var(--palette-neutral-30-3);
+    --icon-hover: var(--white);
+    --icon-disabled: var(--palette-slate-100-1);
+    --icon-selected: var(--palette-oracle-red);
+    /* Brand Pop */
+
+    --label: var(--palette-neutral-30-1);
+    --label-disabled: var(--palette-slate-100-2);
+
+    /* Borders (Mapped to Slate) */
+    --border: var(--palette-slate-100-1);
+    --border-disabled: var(--palette-slate-150-3);
+    --container-border: 1px solid rgba(255, 255, 255, 0.1);
+    /* Glass Edge */
+
+    /* --- REFACTORED BOX SHADOWS (Smooth Curve) --- */
+    /* Level 1: Subtle lift (Buttons, Inputs) */
+    --box-shadow-1: 0 2px 4px rgba(0, 0, 0, 0.4);
+
+    /* Level 2: Standard Card (Resting state) */
+    --box-shadow-2: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+
+    /* Level 3: Hover State / Dropdowns */
+    --box-shadow-3: 0 8px 16px rgba(0, 0, 0, 0.6);
+
+    /* Level 4: Modals / Drawers (High Lift) */
+    --box-shadow-4: 0 16px 24px rgba(0, 0, 0, 0.65);
+
+    /* Level 5: Critical Alerts (Floating high) */
+    --box-shadow-5: 0 24px 48px rgba(0, 0, 0, 0.75);
+
+    --box-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5);
+
+
+    /* --- Data Grids / Tables --- */
+    --table-header-bg: var(--palette-slate-150-3);
+    --table-header-text: var(--palette-neutral-30-1);
+    --table-row-bg: var(--palette-slate-150-1);
+    --table-row-alt-bg: rgba(255, 255, 255, 0.03);
+    /* Subtle Transparency for stripe */
+    --table-row-hover: var(--palette-slate-150-2);
+    --table-border: var(--palette-slate-100-1);
+
+    /* --- Typography --- */
+    --text-color: var(--palette-neutral-30-1);
+    --text-muted: var(--palette-neutral-30-3);
+    /* --- Typography Scale --- */
+    --text-xs: 0.75rem;
+    /* 12px - Labels */
+    --text-sm: 0.875rem;
+    /* 14px - Body text */
+    --text-md: 1rem;
+    /* 16px - Standard values */
+    --text-lg: 1.25rem;
+    /* 20px - Sub-headers */
+    --text-xl: 1.5rem;
+    /* 24px - Headers */
+    --text-2xl: 2rem;
+
+    /* Weights */
+    --weight-light: 300;
+    --weight-reg: 400;
+    --weight-bold: 700;
+    --font-NotoSans: 'Nunito Sans', -apple-system, sans-serif;
+
+    /* --- ACTIONS (Consolidated) --- */
+    /* We use the Oracle Red for Primary Actions, or Slate-50-4 for Secondary */
+    --call-to-action: var(--palette-slate-50-4);
+    --call-to-action-highlight: #5A8585;
+    /* Lighter Red */
+    --call-to-action-hover: #4A7575;
+    /* Darker Red */
+    --call-to-action-disabled: var(--palette-slate-100-1);
+    /* DESTRUCTIVE: Keep Oracle Red ONLY for dangerous actions */
+    --destructive: var(--palette-slate-50-4);
+    --destructive-hover: #4A7575;
+
+    /* SECONDARY: Neutral (Ghost style) */
+    --secondary-action: transparent;
+    --secondary-action-border: var(--palette-slate-100-2);
+    --secondary-action-text: var(--palette-neutral-30-1);
+    /* Checkbox / Radio */
+    --checkbox--checked: var(--palette-slate-50-4);
+    /* Teal check is safer than Red */
+    --checkbox--unchecked: var(--border);
+    --checkbox--disabled: var(--input-disabled);
+
+    --toggleSwitch--selected: var(--palette-slate-50-4);
+    /* Teal */
+    --toggleSwitch--unselected: var(--palette-slate-150-3);
+    /* Border Radius */
+    --border-radius: 4px;
+    --border-radius-input: 2px;
+
+    /* Opacity */
+    --opacity-25: rgba(0, 0, 0, 0.25);
+    --opacity-50: rgba(0, 0, 0, 0.50);
+    --opacity-85: rgba(0, 0, 0, 0.85);
+
+    /* Typography */
+    --font-NotoSans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+
+    /* Checkbox */
+    --checkbox--checked: var(--call-to-action);
+    --checkbox--unchecked: var(--border);
+    --checkbox--indeterminate: var(--call-to-action);
+    --checkbox--disabled: var(--input-disabled);
+
+    /* Progress Bar */
+    --progressLinearTrack--determinate: var(--neutral-10);
+    --progressLinearTrack--indeterminate: var(--neutral-10);
+    --progressLinearBar--determinate: var(--info-secondary);
+    --progressLinearBar--indeterminate: var(--border);
+
+    /* Toggle Switch */
+    --toggleSwitch--selected: var(--call-to-action);
+    --toggleSwitch--unselected: var(--neutral-10);
+
+    /* Radio */
+    --radio--selected: var(--call-to-action);
+    --radio--unselected: var(--border);
+    --radio--disabled: var(--input-disabled);
+
+    /* Piping */
+    --pipePrimaryFill: var(--neutral-20);
+    --pipeSecondaryFill: #5a5a5a;
+    --pipeStroke: var(--neutral-70);
+    --pipeSelectStroke: var(--call-to-action);
+
+    /* Component Context Menu */
+    --contextBackground: var(--black);
+
+    /* 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;
+
+    /* --- LAYERS --- */
+    --z-background: -1;
+    --z-card: 10;
+    --z-header: 100;
+    --z-popup: 500;
+    --z-alarm-banner: 1000;
+    --z-tooltip: 2000;
+    /* Spacing Scale */
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 16px;
+    --space-lg: 24px;
+    --space-xl: 32px;
+}