color-palette.scss

@import '@/styles/media-queries.scss';

:root {
  /* Basic*/
  --primary: #5cabca; // Main accent color
  --background: #0b1021; // Page background
  --background-darker: #05070e; // Used for navigation bar, footer and fills

  /* Action Colors */
  --info: #04e4f4;
  --success: #20e253;
  --warning: #f6f000;
  --error: #fca016;
  --danger: #f80363;
  --neutral: #272f4d;
  --white: #fff;
  --black: #000;

  /* Modified Colors */
  --item-group-background: #0b1021cc;
  --medium-grey: #5e6474;
  --item-background: #607d8b33;
  --item-background-hover: #607d8b4d;

  /* Semi-Transparent Black*/
  --transparent-70: #000000b3;
  --transparent-50: #00000080;
  --transparent-30: #0000004d;

  /* Semi-Transparent White*/
  --transparent-white-70: #ffffffb3;
  --transparent-white-50: #ffffff80;
  --transparent-white-30: #ffffff4d;
  --transparent-white-10: #ffffff0f;

  /* Color variables for specific components
  * all variables are optional, since they inherit initial values from above*
  * Using specific variables makes overriding for custom themes really easy */
  --heading-text-color: var(--primary);
  // Nav-bar links 
  --nav-link-text-color: var(--primary);
  --nav-link-background-color: #607d8b33;
  --nav-link-text-color-hover: var(--primary);
  --nav-link-background-color-hover: #607d8b33;
  --nav-link-border-color: transparent;
  --nav-link-border-color-hover: var(--primary);
  --nav-link-shadow: 1px 1px 2px #232323;
  --nav-link-shadow-hover: 1px 1px 2px #232323;
  // Link items and sections
  --item-text-color: var(--primary);
  --item-text-color-hover: var(--item-text-color);
  --item-group-outer-background: var(--primary);
  --item-group-heading-text-color: var(--item-group-background);
  --item-group-heading-text-color-hover: var(--background);
  // Homepage settings
  --settings-text-color: var(--primary);
  --settings-background: var(--background);
  // Config menu
  --config-settings-color: var(--primary);
  --config-settings-background: var(--background-darker);
  --config-code-color: var(--background);
  --config-code-background: var(--white);
  --code-editor-color: var(--black);
  --code-editor-background: var(--white);
  // Widgets
  --widget-text-color: var(--primary);
  --widget-background-color: var(--background-darker);
  --widget-accent-color: var(--background);
  --widget-base-background: transparent;
  // Interactive editor
  --interactive-editor-color: var(--primary);
  --interactive-editor-background: var(--background);
  --interactive-editor-background-darker: var(--background-darker);
  // Cloud backup/ restore menu
  --cloud-backup-color: var(--config-settings-color);
  --cloud-backup-background: var(--config-settings-background);
  // Search bar (on homepage)
  --search-container-background: var(--background-darker);
  --search-field-background: var(--background);
  --search-label-color: var(--settings-text-color);
  // Page footer
  --footer-text-color: var(--medium-grey);
  --footer-text-color-link:  var(--primary);
  --footer-background: var(--background-darker);
  // Right-click context menu
  --context-menu-background: var(--background);
  --context-menu-color: var(--primary);
  --context-menu-secondary-color: var(--background-darker);
  // Workspace view
  --side-bar-background: var(--background-darker);
  --side-bar-background-lighter: var(--background);
  --side-bar-color: var(--primary);
  --side-bar-item-background: var(--side-bar-background);
  --side-bar-item-color: var(--side-bar-color);
  --workspace-web-content-background: var(--background);
  // Minimal view
  --minimal-view-background-color: var(--background);
  --minimal-view-title-color: var(--primary);
  --minimal-view-settings-color: var(--primary);
  --minimal-view-section-heading-color: var(--primary);
  --minimal-view-section-heading-background: var(--background-darker);
  --minimal-view-search-background: var(--background-darker);
  --minimal-view-search-color: var(--primary);
  --minimal-view-group-color: var(--primary);
  --minimal-view-group-background: var(--background-darker);
  // Login page
  --login-form-color: var(--primary);
  --login-form-background: var(--background);
  --login-form-background-secondary: var(--background-darker);
  // About page
  --about-page-color: var(--white);
  --about-page-background: var(--background);
  --about-page-accent: var(--primary);
  // Webpage colors, highlight, scrollbar
  --scroll-bar-color: var(--primary);
  --scroll-bar-background: var(--background-darker);
  --highlight-color: var(--background);
  --highlight-background: var(--primary);
  --progress-bar: var(--primary);
  // Misc components
  --loading-screen-color: var(--primary);
  --loading-screen-background: var(--background);
  --status-check-tooltip-background: var(--background-darker);
  --status-check-tooltip-color: var(--primary);
  --welcome-popup-background: var(--background-darker);
  --welcome-popup-text-color: var(--primary);
  --toast-background: var(--primary);
  --toast-color: var(--background);
  --description-tooltip-background: var(--background-darker);
  --description-tooltip-color: var(--primary);
}