/* stores configurable variables used for styling colors light mode general content interactive elements browser-related UI elements forms utility dark mode general content interactive elements browser-related UI elements forms utility negotiating colors based on the choosen theme gradients fonts typography sizes spacing button shape input shape transitions */ /* colors */ /* ================================================================================ */ /* light mode */ /* -------------------------------------------------------------------------------- */ :root { /* general content */ /* ---------------------------------------- */ /* whole page background */ --pos-color-light-page-background: #F3F4F6; /* background color used under the content (grid, cards, panels) */ --pos-color-light-content-background: #fff; /* general content text */ --pos-color-light-content-text: #11151C; /* general content icons (moight be different shade due to contrast) */ --pos-color-light-content-icon: #405568; /* sidenotes, metadata, table headers */ --pos-color-light-content-text-supplementary: #6B7280; /* prominent text used to highlight important information */ --pos-color-light-content-text-prominent: #000; /* content text when placed on an inverted contrasty background */ --pos-color-light-content-inverted-text: var(--pos-color-light-content-background); /* dividers, separators, frames, table rows */ --pos-color-light-frame: #E2E8F0; /* highlighted elements background, like a navigation item when it is hovered or panels that need to stand out from the rest of the page like a filters panel */ --pos-color-light-highlight-background: #E7ECF3; /* highlighted elements text and icons */ --pos-color-light-highlight-text: var(--pos-color-light-content-text); /* background of sections of the page that needs to really stand out, like call to actions */ --pos-color-light-standout-background: #192F4A; /* background of sections of the page that needs to really stand out when poitner hovers over */ --pos-color-light-standout-background-hover: #194F90; /* text and icons placed on the sections that needs to really stand out */ --pos-color-light-standout-text: #fff; /* interactive elements */ /* ---------------------------------------- */ /* active elements suggesting a possible interaction */ --pos-color-light-interactive: #194F90; /* active elements with possible interaction when a pointer is over them */ --pos-color-light-interactive-hover: #192F4A; /* active elements with possible interaction when they are pressed */ --pos-color-light-interactive-active: #192F4A; /* disabled elements that could become or has been interactive */ --pos-color-light-interactive-disabled: #BFDBFE; /* primary action button background */ --pos-color-light-button-primary-background: #194F90; /* primary action button text and icons */ --pos-color-light-button-primary-text: #fff; /* border around primary action button */ --pos-color-light-button-primary-frame: var(--pos-color-light-button-primary-background); /* primary action button background when a pointer is over it */ --pos-color-light-button-primary-hover-background: #192F4A; /* primary action button text and icons icons when a pointer is over it */ --pos-color-light-button-primary-hover-text: #fff; /* border around primary action button when a pointer is over it */ --pos-color-light-button-primary-hover-frame: var(--pos-color-light-button-primary-hover-background); /* primary action button background when it is being pressed */ --pos-color-light-button-primary-active-background: var(--pos-color-light-button-primary-hover-background); /* primary action button text and icons icons when it is being pressed */ --pos-color-light-button-primary-active-text: var(--pos-color-light-button-primary-hover-text); /* border around primary action button when it is being pressed */ --pos-color-light-button-primary-active-frame: var(--pos-color-light-button-primary-hover-frame); /* primary action button background when it is disabled */ --pos-color-light-button-primary-disabled-background: color-mix(in srgb, var(--pos-color-light-button-primary-background) 30%, transparent 70%); /* primary action button text and icons when it is disabled */ --pos-color-light-button-primary-disabled-text: var(--pos-color-light-button-primary-text); /* border around primary action button when it is disabled */ --pos-color-light-button-primary-disabled-frame: var(--pos-color-light-button-primary-disabled-background); /* secondary action button background */ --pos-color-light-button-secondary-background: #fff; /* secondary action button text and icons */ --pos-color-light-button-secondary-text: var(--pos-color-light-interactive); /* border around secondary action button */ --pos-color-light-button-secondary-frame: var(--pos-color-light-button-primary-background); /* secondary action button background when a pointer is over it */ --pos-color-light-button-secondary-hover-background: #E2E8F0; /* secondary action button text and icons icons when a pointer is over it */ --pos-color-light-button-secondary-hover-text: var(--pos-color-light-interactive-hover); /* border around secondary action button when a pointer is over it */ --pos-color-light-button-secondary-hover-frame: var(--pos-color-light-button-primary-hover-background); /* secondary action button background when it is being pressed */ --pos-color-light-button-secondary-active-background: var(--pos-color-light-button-primary-active-background); /* secondary action button text and icons icons when it is being pressed */ --pos-color-light-button-secondary-active-text: var(--pos-color-light-button-secondary-hover-text); /* border around secondary action button when it is being pressed */ --pos-color-light-button-secondary-active-frame: var(--pos-color-light-button-secondary-hover-frame); /* secondary action button background when it is disabled */ --pos-color-light-button-secondary-disabled-background: color-mix(in srgb, var(--pos-color-light-button-secondary-background) 30%, transparent 70%); /* secondary action button text and icons when it is disabled */ --pos-color-light-button-secondary-disabled-text: var(--pos-color-light-interactive-disabled); /* border around secondary action button when it is disabled */ --pos-color-light-button-secondary-disabled-frame: color-mix(in srgb, var(--pos-color-light-button-secondary-frame) 30%, transparent 70%); /* colors user for variety of browser-related UI elements */ /* ---------------------------------------- */ /* outline for focused elements */ --pos-color-light-focused: #08898F; /* background color for selected text */ --pos-color-light-selection-background: #08898F; /* foreground color for selected text */ --pos-color-light-selection-text: #fff; /* forms */ /* ---------------------------------------- */ /* placeholder text in input fields */ --pos-color-light-input-placeholder: color-mix(in srgb, var(--pos-color-light-input-text) 50%, transparent 50%); /* input field background */ --pos-color-light-input-background: #fff; /* input field text and icon */ --pos-color-light-input-text: #6B7280; /* border around input field */ --pos-color-light-input-frame: #6b7280; /* input field background when a pointer is over it */ --pos-color-light-input-hover-background: var(--pos-color-light-input-background); /* input field text and icon when a pointer is over it */ --pos-color-light-input-hover-text: var(--pos-color-light-input-text); /* border around input field when a pointer is over it */ --pos-color-light-input-hover-frame: #194F90; /* input field background when it is being focused */ --pos-color-light-input-active-background: var(--pos-color-light-input-background); /* input field text and icon when it is being focused */ --pos-color-light-input-active-text: #080910; /* border around input field when it is being focused */ --pos-color-light-input-active-frame: #6B7280; /* background of disabled input field */ --pos-color-light-input-disabled-background: var(--pos-color-light-input-background); /* text and icon of disabled input field */ --pos-color-light-input-disabled-text: color-mix(in srgb, var(--pos-color-light-input-text) 40%, transparent 60%); /* border around input field when it is disabled */ --pos-color-light-input-disabled-frame: color-mix(in srgb, var(--pos-color-light-input-frame) 40%, transparent 60%); /* utility */ /* ---------------------------------------- */ /* errors, actions that can't be undone */ --pos-color-light-important: #B91C1C; --pos-color-light-important-hover: #520E0E; --pos-color-light-important-disabled: #FECACA; /* warnings, actions that might have unwanted consequences */ --pos-color-light-warning: #F3B14E; --pos-color-light-warning-hover: #593E15; --pos-color-light-warning-disabled: #FFE9C8; /* confirmations of a successful actions */ --pos-color-light-confirmation: #0F7B0A; --pos-color-light-confirmation-hover: #0A4607; --pos-color-light-confirmation-disabled: #BBDDD3; }