stream light theme
add variables file to create stream light theme
This commit is contained in:
4
fonts.css
Normal file
4
fonts.css
Normal file
@@ -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');
|
||||
}
|
||||
9
index.css
Normal file
9
index.css
Normal file
@@ -0,0 +1,9 @@
|
||||
/* Imports */
|
||||
@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 "./fonts.css";
|
||||
@import "./variables.css";
|
||||
231
variables.css
Normal file
231
variables.css
Normal file
@@ -0,0 +1,231 @@
|
||||
:root {
|
||||
/* company color pallete */
|
||||
--streamnavy: #263367;
|
||||
--streamblue: #014ea8;
|
||||
--darkbluegray: #191928;
|
||||
--darkgray: #53575a;
|
||||
--gray: #b1b3b2;
|
||||
--lightgray: #d9d8d4;
|
||||
--darkred: #9e272b;
|
||||
--alarmred: #e22028;
|
||||
--sunsetorange: #de7c33;
|
||||
--goldenyellow: #f4b834;
|
||||
--coolpurple: #7266b7;
|
||||
--tagvalue-color: var(--streamblue);
|
||||
--units-color: var(--gray);
|
||||
/* Alarm status */
|
||||
--alarm-diag: var(--darkgray);
|
||||
--alarm-low: var(--coolpurple);
|
||||
--alarm-med: var(--goldenyellow);
|
||||
--alarm-high: var(--sunsetorange);
|
||||
--alarm-crit: var(--alarmred);
|
||||
|
||||
/* Electrical color */
|
||||
--elec-on: #e23030;
|
||||
--elec-off: #8fca94;
|
||||
--elec-tripped: var(--goldenyellow);
|
||||
--elec-maintenance: var(--sunsetorange);
|
||||
--elec-disabled: var(--gray);
|
||||
|
||||
/* States Performance */
|
||||
--state-running: #ffffff;
|
||||
--state-standby: var(--gray);
|
||||
--state-faulted: var(--alarmred);
|
||||
--state-auto: #013d85;
|
||||
--state-manual: var(--coolpurple);
|
||||
--state-maintenance:var(--sunsetorange);
|
||||
|
||||
/* Acción Principal (Control de Proceso) */
|
||||
--action-primary: var(--streamblue);
|
||||
--action-primary-hover: #013d85;
|
||||
--action-primary-text: #ffffff;
|
||||
|
||||
/* Acción Crítica (Impacto Físico) */
|
||||
--action-danger: var(--alarmred);
|
||||
--action-danger-hover: var(--darkred);
|
||||
--action-danger-text: #ffffff;
|
||||
|
||||
/* Acción Neutra (Navegación / Cancelar) */
|
||||
--action-secondary: var(--lightgray);
|
||||
--action-secondary-hover: var(--gray);
|
||||
--action-secondary-text: var(--darkgray);
|
||||
|
||||
/* Estado Deshabilitado */
|
||||
--action-disabled: var(--gray);
|
||||
--action-disabled-text: #767676;
|
||||
|
||||
/* --- MONITOREO DE DATOS --- */
|
||||
--data-normal: #2073d3;
|
||||
--data-high: #d32020;
|
||||
--data-low: #20d3bb;
|
||||
--tagvalue-color: var(--data-normal);
|
||||
--units-color: var(--gray);
|
||||
|
||||
/* Texto */
|
||||
--text-primary: #161616;
|
||||
--text-secondary: #5E5E5E;
|
||||
--text-inverse: #ffffff;
|
||||
--text-muted: #767676; /* Unidades y detalles */
|
||||
|
||||
/* nav styles */
|
||||
--navtree-bgcolor: #0e1742;
|
||||
--navtree-color: var(--lightgray);
|
||||
--navtreeitem-hover-color: var(--white);
|
||||
--navtreeitem-hover-bgcolor: var(--navtree-bgcolor);
|
||||
--navtreeitem-active-color: var(--white);
|
||||
--navtreeitem-active-bgcolor: #143663;
|
||||
--idk-what: #0d1741;
|
||||
|
||||
/*Begin Standard Ignition*/
|
||||
--white: var(--lightgray);
|
||||
--black: #000000;
|
||||
--red-20: #FAD4D4;
|
||||
--red-30: #F99797;
|
||||
--red-50: #F55353;
|
||||
--red-60: #DE1B1B;
|
||||
--red-90: #661414;
|
||||
|
||||
/* Neutrals */
|
||||
--neutral-10: var(--lightgray);
|
||||
--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: var(--red-50); /* red-50 */
|
||||
--qual-6: var(--red-90); /* red-90 */
|
||||
--qual-7: #038537; /* green-60 */
|
||||
--qual-8: #114599; /* blue-80 */
|
||||
--qual-9: #ED5393; /* magenta-50 */
|
||||
--qual-10: #CF7911; /* bronze-50 */
|
||||
|
||||
--containerRoot: #F2F2F2; /* var(--neutral-10) the root container, depth 0 */
|
||||
--container: var(--neutral-20); /* standard container, depth 1 */
|
||||
--containerNested: var(--neutral-30); /* nested container, depth 2 */
|
||||
|
||||
--icon: var(--neutral-70);
|
||||
--icon--hover: var(--neutral-60);
|
||||
--icon--disabled: var(--neutral-40);
|
||||
--icon--selected: var(--neutral-10);
|
||||
|
||||
/* 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.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
--boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);
|
||||
|
||||
/* 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.50); /* black, 50% opacity */
|
||||
--opacity-85: rgba(0, 0, 0, 0.85); /* black, 85% opacity */
|
||||
/* Typography */
|
||||
--font-NotoSans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
/* Component Context Menu */
|
||||
--contextBackground: var(--white);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
Reference in New Issue
Block a user