From e2175e5306f02f350c4c297bf9562ef7e1ad0fb0 Mon Sep 17 00:00:00 2001 From: Emmanuel Hernandez Cruz Date: Wed, 15 Apr 2026 22:06:46 +0000 Subject: [PATCH] stream light theme add variables file to create stream light theme --- fonts.css | 4 + index.css | 9 ++ variables.css | 231 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 244 insertions(+) create mode 100644 fonts.css create mode 100644 index.css create mode 100644 variables.css diff --git a/fonts.css b/fonts.css new file mode 100644 index 0000000..31998a1 --- /dev/null +++ b/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'); +} diff --git a/index.css b/index.css new file mode 100644 index 0000000..4647d82 --- /dev/null +++ b/index.css @@ -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"; \ No newline at end of file diff --git a/variables.css b/variables.css new file mode 100644 index 0000000..bfe0e4e --- /dev/null +++ b/variables.css @@ -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); +} \ No newline at end of file