@use "sass:map";
@use "sass:list";
@use "sass:color";

/* --------------------------------------- 
		Basic colors
--------------------------------------- */

// Light Mode Colors
//$color-primary: #ff7500 !default;
$color-primary: #ff7500 !default;
$color-secondary: #ff9900 !default;
$color-accent: #ff0000 !default;
$color-subtle: #fff4eb !default;
$color-notification: #ff4d4d !default;

// Dark Mode Colors
//$dark-color-primary: #ff7500 !default;
$dark-color-primary: #ff7000 !default;
$dark-color-secondary: #ff9900 !default;
$dark-color-accent: #ff0000 !default;
$dark-color-subtle: #3d1c00 !default;
$dark-color-notification: #ff4d4d !default;

// Gray scale - To-do: Replace with neutral colors (see variabled below gray scale)
$color-black: #000000;
$color-white: #ffffff;
$color-gray-black: #222222;
$color-gray-darkest: #333333 !default;
$color-gray-darker: #666666;
$color-gray-dark: #888888;
$color-gray-base: #bbbbbb;
$color-gray-light: #cccccc;
$color-gray-lighter: #dddddd;
$color-gray-lightest: #f4f4f4;
$color-gray-white: #fcfcfc;

// Generate tones of the primary color
$color-primary-tones: (
  100: white,
  98: generate-material-tone($color-primary, 98),
  95: generate-material-tone($color-primary, 95),
  90: generate-material-tone($color-primary, 90),
  80: generate-material-tone($color-primary, 80),
  70: generate-material-tone($color-primary, 70),
  60: generate-material-tone($color-primary, 60),
  50: $color-primary, // Basis
  40: generate-material-tone($color-primary, 40),
  30: generate-material-tone($color-primary, 30),
  20: generate-material-tone($color-primary, 20),
  10: generate-material-tone($color-primary, 10),
  0: black
);

// Generate tones of the primary color in dark mode
$color-primary-tones-dark: (
  100: black,
  98: generate-material-tone($dark-color-primary, 4),
  95: generate-material-tone($dark-color-primary, 6),
  90: generate-material-tone($dark-color-primary, 15),
  80: generate-material-tone($dark-color-primary, 20),
  70: generate-material-tone($dark-color-primary, 30),
  60: generate-material-tone($dark-color-primary, 40),
  50: $dark-color-primary, // Basis
  40: generate-material-tone($dark-color-primary, 60),
  30: generate-material-tone($dark-color-primary, 70),
  20: generate-material-tone($dark-color-primary, 80),
  10: generate-material-tone($dark-color-primary, 90),
  0: white
);

// Neutral scale
$neutral-scale: (
  100: #FFFFFF,
  99: #fbfbfb,
  98: #f8f8fa,
  95: #f4f4f4,
  92: #EEEEEE,
  90: #E1E1E1,
  80: #C9C9C9,
  70: #AAAAAA,
  60: #909090,
  50: #767676,
  40: #5E5E5E,
  35: #545252,
  30: #484646,
  25: #3C3B3B,
  20: #313030,
  15: #262526,
  10: #1C1B1C,
  5: #111111,
  0: #000000
);

/* --------------------------------------- 
		Theme related colors
--------------------------------------- */

// Button defaults 
$default-sidebar-buttons: true !default;
$button-background-color: $color-primary !default;
$button-border-color: $button-background-color;
$button-text-color: #fff !default;
$button-hover-background-color: darken($button-background-color, 5%) !default; //$color-secondary !default;
$button-hover-border-color: $button-hover-background-color; //$color-secondary !default;
$button-hover-text-color: #fff !default;
$button-active-background-color: $button-hover-background-color !default;
$button-active-border-color: $button-active-background-color;
$button-active-text-color: #fff !default;
$dark-button-background-color: $dark-color-primary !default;
$dark-button-hover-background-color: darken($dark-button-background-color, 5%) !default;
$dark-button-border-color: $dark-button-background-color;
$dark-button-hover-border-color: $dark-button-hover-background-color;
$dark-button-text-color: #fff !default;
$dark-button-hover-text-color: #fff !default;

// Tile colors
$tile-color: $color-white;
$tile-color-hover: $color-subtle;
$tile-color-active: $color-gray-white;
$tile-color-highlight: $color-gray-darker;
$background-color-dark: #222222;
$tile-color-dark: #333333;
$tile-color-hover-dark: $dark-color-subtle;
$tile-color-active-dark: #666666; 
$tile-color-highlight-dark: $color-gray-dark;

// Input List
$input-list-active-background-light: #e5e7ec !default;
$input-list-active-background-dark: #444 !default;

// Login defaults 
$login-overlay-color: 255, 255, 255 !default;
$login-overlay-transparency: 40% !default;
$login-has-gradient: false !default;
$login-gradient-direction: 1 !default;
$login-gradient-first-color: 255, 255, 255 !default;
$login-gradient-second-color: 255, 255, 255 !default;
$login-overlay-blur: 0px !default;

// Logo's
$navbar-logo: false !default;
$navbar-logo-dark: $navbar-logo !default;
$navbar-logo-small: false !default;
$navbar-logo-small-dark: $navbar-logo-small !default;

// Background images
$background-image-full-screen: true !default; 
$sidebar-has-background-image: true !default;
$background-mode: 1 !default;
$background-image-position-x: 60% !default;
$background-image-position-y: 20% !default;

$sidebar-background-image: url(../images/background.jpg) !default;
$body-background-image: url(../images/background.jpg) !default;
$sidebar-background-image-position: $background-image-position-x $background-image-position-y;

// Background overlay settings
$background-overlay-color-light: 255, 255, 255 !default;
$background-overlay-transparency-light: 40% !default;
$background-has-gradient-light: false !default;
$background-gradient-first-color-light: 255, 255, 255 !default;
$background-gradient-second-color-light: 255, 255, 255 !default;
$background-gradient-direction-light: 1 !default;
$background-overlay-blur-light: 0px !default;

$background-overlay-color-dark: 0, 0, 0 !default;
$background-overlay-transparency-dark: 40% !default;
$background-has-gradient-dark: false !default;
$background-gradient-first-color-dark: 240, 79, 1 !default;
$background-gradient-second-color-dark: 197, 25, 101 !default;
$background-gradient-direction-dark: 1 !default;
$background-overlay-blur-dark: 0px !default;

// Background overlay settings - From new To-do: cleanup/merge
$sidebar-background-color-light: 255, 255, 255 !default;
$background-overlay-transparency-light: 54% !default;
$sidebar-background-color-dark: 0, 0, 0 !default;
$background-overlay-transparency-dark: 54% !default;

// Transparent background
$trans-background-color: RGBA(255, 255, 255, 0.8);
$trans-background-color-dark: RGBA(37, 42, 53, 0.8);

// Set the background image settings
@if ($background-mode == 1) {
	// 1 Full
	$background-image-full-screen: true;
	$sidebar-has-background-image: true;
} @else if ($background-mode == 2) {
	// 2 Sidebar
	$background-image-full-screen: false;
	$sidebar-has-background-image: true;
} @else {
	// 0 None
	$background-image-full-screen: false;
	$sidebar-has-background-image: false;
}

// Logo's
$login-logo: false !default;
$login-logo-height: 90px !default;
$navbar-logo: false !default;
$navbar-logo-dark: $navbar-logo !default;
$navbar-logo-small: false !default;
$navbar-logo-small-dark: $navbar-logo-small !default;

$navbar-logo-height: 45px !default; // default value: 0
@if ($login-logo == false and $navbar-logo != false) {
	$login-logo: $navbar-logo;
}

// Sidebar defaults
$sidebar-width: 280px !default;
$sidebar-width-collapsed: 80px !default;
$sidebar-button-transparency-light: 50% !default;
$sidebar-button-blur-light: 5px !default;
$sidebar-button-background-color-light: 255, 255, 255 !default;
$sidebar-button-hover-background-color-light: 255, 255, 255 !default;
$sidebar-button-active-background-color-light: 0, 0, 0 !default;
$sidebar-button-text-color-light: #000000 !default;
$sidebar-button-hover-text-color-light: #000000 !default;
$sidebar-button-active-text-color-light: #000000 !default;
$sidebar-button-hover-transparency-light: 50% !default;
$sidebar-button-active-transparency-light: 70% !default;

$sidebar-button-transparency-dark: 30% !default;
$sidebar-button-blur-dark: 5px !default;
$sidebar-button-background-color-dark: 0, 0, 0 !default;
$sidebar-button-hover-background-color-dark: 0, 0, 0 !default;
$sidebar-button-active-background-color-dark: 255, 255, 255 !default;
$sidebar-button-text-color-dark: #ffffff !default;
$sidebar-button-hover-text-color-dark: #ffffff !default;
$sidebar-button-active-text-color-dark: #ffffff !default;
$sidebar-button-hover-transparency-dark: 50% !default;
$sidebar-button-active-transparency-dark: 20% !default;

/* --------------------------------------- 
		Color palette light mode
--------------------------------------- */
$colors: (
	// basic colors
	primary: $color-primary,
	primary-tone: $color-primary-tones,
	accent: $color-accent,
	secondary: $color-secondary,
	subtle: $color-subtle,
	color-notification: $color-notification,
	// To-do: use neutral scale and delete gray-0 to 8
	neutral: $neutral-scale, 
	gray-0: $color-gray-black,
	gray-1: $color-gray-darkest,
	gray-2: $color-gray-darker,
	gray-3: $color-gray-dark,
	gray-4: $color-gray-base,
	gray-5: $color-gray-light,
	gray-6: $color-gray-lighter,
	gray-7: $color-gray-lightest,
	gray-8: $color-gray-white,
	// Background colors
	background-color-default: $color-white,
	background-color-translucent-default: #ffffff80,
	background-item-color-default: #eeeeee,
	background-item-color-read-only: #e5e7ec,
	background-color-filter-group: $color-gray-white,
	// Text colors
	text-color-default: $color-black,
	text-color-inverse: $color-white,
	text-color-p: $color-black,
	text-color-h1: $color-black,
	text-color-h2: $color-black,
	text-color-a: $color-black,
	text-color-a-hover: $color-primary,
	//text-color-error: #ed1c24,
	text-color-sidebar-active: $color-white,
	text-color-placeholder: $color-gray-base,
	// Buttons
	button-text-color: $button-text-color,
	button-hover-text-color: $button-hover-text-color,
	button-background-color: $button-background-color,
	button-hover-background-color: $button-hover-background-color,
	button-border-color: $button-border-color,
	button-hover-border-color: $button-hover-border-color,
	// General
	background-color: $color-white,
	wrapper-background: $color-white,
	switch-handle: $tile-color-active,
	dbq-element-header-5: $color-gray-base,
	border-color: $color-gray-lighter,
	border-color-light: $color-gray-lightest,
	dropdown-text-color: $color-gray-dark,
	box-shadow-color: rgba(0, 0, 0, 0.1),
	// State colors
	background-color-info: #eef2fa,
	border-color-info: #89a7e0,
	text-color-info: #2e5aac,
	background-color-warning: #fff4ec,
	border-color-warning: #ff8f39,
	text-color-warning: #b95000,
	background-color-error: #feefef,
	border-color-error: #f48989,
	text-color-error: #da1414,
	background-color-success: #edf9f0,
	border-color-success: #5aca75,
	text-color-success: #287d3c,
	// List
	list-standard-font-color: $color-black,
	input-list-active-background: $input-list-active-background-light,
	// Body
	background-pop-up: $color-white,
	background-body: $color-white,
	background-body-image-overlay: RGBA($background-overlay-color-light, $background-overlay-transparency-light),
	background-body-has-gradient: $background-has-gradient-light,
	background-body-gradient-first-color: $background-gradient-first-color-light,
	background-body-gradient-second-color: $background-gradient-second-color-light,
	background-body-overlay-transparency: $background-overlay-transparency-light,
	background-body-gradient-direction: $background-gradient-direction-light,
	background-overlay-blur: $background-overlay-blur-light,
	// Forms
	background-button-disabled: #647987,
	elevated-background-color: #ffffff,
	// Login screen
	login-container-background: $color-white,
	login-overlay-color: RGBA($login-overlay-color, $login-overlay-transparency),
	// Filters
	filter-tile-background: #f4f4f4,
	// Sidebar
	sidebar-background: get-primary-color-tone(98),
	sidebar-background-sub-items: $color-primary,
	sidebar-tile-background: $tile-color,
	sidebar-tile-background-hover: $tile-color-hover,
	sidebar-tile-background-active: $tile-color-active,
	sidebar-scrollbar-color: $color-white,
	sidebar-scrollbar-thumb-color: $color-gray-lighter, //$color-gray-light,
	sidebar-scrollbar-thumb-hover-color: $color-primary,
	// Graph
	graph-background: $color-white,
	graph-trans-background: $trans-background-color,
	graph-tile-background: $color-white,
	graph-text: $color-black,
	graph-grid-line: $color-black,
	graph-border-color: #f1f4f7,
	graph-box-shadow: 0px 3px 5px RGBA(0, 24, 62, 0.1),
	// Source Code Editor
	source-code-editor-background-color: #ffffff,
	source-code-editor-border-color: #e5e7ec,
	source-code-editor-line-number-background-color: #f5f7f9,
	source-code-editor-line-number-text-color: #505050,
	source-code-editor-default-text-color: #001323,
	source-code-editor-selected-background-color: RGBA(0, 0, 0, 0.05),
	source-code-editor-selected-text-color: blue,
	source-code-editor-selected-comment-text-color: #acb6ce,
	source-code-editor-property-text-color: #4abaff,
	source-code-editor-atom-text-color: #000000,
	source-code-editor-number-text-color: #ab5b20,
	source-code-editor-bracket-text-color: #000000,
	source-code-editor-tag-text-color: #ae5f2b,
	source-code-editor-attribute-text-color: #22538f,
	source-code-editor-keyword-text-color: #002bff,
	source-code-editor-builtin-text-color: #000000,
	source-code-editor-comment-text-color: #008000,
	source-code-editor-string-text-color: #5d7926,
	source-code-editor-cursor-color: #626d86,
	// Calendar
	calendar-background: $color-white,
	calendar-trans-background: RGBA(255, 255, 255, 0.4),
	// Knowledgebase
	knowledgebase-h1-color: $color-gray-darkest,
	knowledgebase-h2-color: $color-gray-darkest,
	knowledgebase-h3-color: $color-gray-darkest,
	knowledgebase-h4-color: $color-gray-darkest,
	knowledgebase-info-container-color: #4188ff,
	knowledgebase-info-container-background: #e7f5fe,
	knowledgebase-warning-container-color: #ff9f00,
	knowledgebase-warning-container-background: #fef4ea,
	knowledgebase-success-container-color: #155724,
	knowledgebase-success-container-background: #d4edda,
	// Classlist
	classlist-background: $color-white,
	classlist-trans-background: RGBA(255, 255, 255, 0.4),
	classlist-background-active: $tile-color-active,
	classlist-background-highlight: $tile-color-highlight,
	classlist-header-background: $color-gray-lightest,
	classlist-color-active: $color-gray-lightest,
	classlist-row-border: $color-gray-lightest,
	// Classlist - TreeGrid
	classlist-tree-grid-scrollbar-background-color: #eee,
	classlist-tree-grid-scrollbar-navigation-button-color: #333,
    classlist-tree-grid-scrollbar-track-background-color: #ccc,
    classlist-tree-grid-scrollbar-thumb-background-color: #fff,
    classlist-tree-grid-scrollbar-thumb-border: 1px solid #aaa,
	// Kanban
	kanban-background: $color-white,
	kanban-trans-background: RGBA(255, 255, 255, 0.4),
	kanban-column-item-background: RGBA(255, 255, 255, 0.3),
	kanban-tile-background: #f5f5f5,
	kanban-tile-trans-background: RGBA(255, 255, 255, 0.3),
	kanban-tile-tag-background: RGBA(255, 255, 255, 0.3),
	kanban-tile-tag-extra-background: #ddd,
	// Loader
	loader-background: $trans-background-color,
	// Popup menu
	popup-menu-background: #fff,
	popup-menu-trans-background: $trans-background-color,
	popup-menu-hover-background: RGBA(0, 0, 0, 0.05),
	popup-menu-border-color: #f1f4f7,
	popup-menu-box-shadow: 0px 3px 5px RGBA(0, 24, 62, 0.1),
	// Sidebar buttons
	sidebar-button-transparency: $sidebar-button-transparency-light,
	sidebar-button-background-color: $sidebar-button-background-color-light,
	sidebar-button-hover-background-color: $sidebar-button-hover-background-color-light,
	sidebar-button-active-background-color: $sidebar-button-active-background-color-light,
	sidebar-button-text-color: $sidebar-button-text-color-light,
	sidebar-button-hover-text-color: $sidebar-button-hover-text-color-light,
	sidebar-button-active-text-color: $sidebar-button-active-text-color-light,
	sidebar-button-hover-transparency: $sidebar-button-hover-transparency-light,
	sidebar-button-active-transparency: $sidebar-button-active-transparency-light,
	// Nav tabs
	nav-tabs-background-color: $color-primary,
	nav-tabs-background-active: $tile-color-active,
	nav-tabs-background-hover: $tile-color-hover,
	nav-tabs-text-color-disabled: $color-gray-base,
	nav-tabs-text-color: $color-white,
	// Navigation bar
	navbar-logo-img: $navbar-logo,
	navbar-logo-img-small: $navbar-logo-small,
	// Breadcrumbs
	breadcrumbs-background-color: $color-primary,
	// Classlist folders
	classlist-folder-tile-background: $tile-color,
	classlist-folder-tile-icon-background: transparent,
	classlist-folder-tile-background-hover: $tile-color-hover,
	classlists-folder-tile-border: 1px solid #eee,
	// Kennisbank
	dbqkbc-folder-tile-icon-background: RGBA(0, 0, 0, 0.7),
	dbqdcltl-folder-tile-icon-background: RGBA(0, 0, 0, 0.7),
	dbqdcltl-folder-tile-drop-shadow: RGBA(0,0,0,0.1),
	// White / Dark mode default background
	default-background: $color-white,
	inverse-background: $color-black,
	// Select
	select-option-background: #f5f7f9,
	// Input list
	input-list-item-background: #f0f2f5,
	input-list-item-even-background: #f6faff,
	// Modal
	modal-header-background: get-primary-color-tone(98), //#ffffff,
	modal-header-border-color: #e2e7f3,
	modal-header-color: #001323,
	modal-footer-background: get-primary-color-tone(98),
	modal-footer-color: #5a5a5a,
	modal-footer-border-color: #e2e7f3,
	modal-body-background: get-primary-color-tone(98),
	modal-label-background: #f0f2f5,
	modal-label-color: #595f6e,
	modal-border-color: #e5e7ec,
	modal-disabled-color: #e5e7ec,
	modal-input-background: #ffffff,
	modal-error-background: #fee5e4,
	modal-error-border: #d5473c,
	modal-error-color: #b64f4b,
	modal-input-color: #001323,
	modal-input-disabled-color: #999,
	// Workflow
	workflow-background: $color-white,
	workflow-grid-color: #f1f1f1,
	workflow-grid-trans-color: RGBA(255, 255, 255, 0.2),
	workflow-node-border-color: $color-white,
	workflow-node-border-trans-color: RGBA(255, 255, 255, 0.2),

	// To-do: cleanup not the right place for specific colors
	dbqft-list-item-color: $color-black,
	dbqft-list-item-hover-background-color: rgba(255, 255, 255,.24),
	dbqft-list-item-active-background-color: rgba(255, 255, 255,.48),
	dbqft-list-collapse-button-background-color: rgba(248, 248, 248, 1),
	dbq-right-column-background-color: rgba(255,255,255,.80),
	dbq-right-column-background-color-no-image: #F8F8F8,
	dbq-left-column-background-color: rgba(255,255,255,.54),
	dbq-left-column-background-color-no-transparency: #ffffff,
	dbq-left-column-background-overlay: RGBA($sidebar-background-color-light, $background-overlay-transparency-light)
);

/* --------------------------------------- 
		Color palette dark mode
--------------------------------------- */
$colors-dark: (
	// basic colors
	primary: $dark-color-primary,
	primary-tone: $color-primary-tones-dark,
	accent: $dark-color-accent,
	secondary: $dark-color-secondary,
	subtle: $dark-color-subtle,
	color-notification: $dark-color-notification,
	// To-do: use neutral scale and delete gray-0 to 8
	neutral: $neutral-scale,
	gray-8: $color-gray-black,
	gray-7: $color-gray-darkest,
	gray-6: $color-gray-darker,
	gray-5: $color-gray-dark,
	gray-4: $color-gray-base,
	gray-3: $color-gray-light,
	gray-2: $color-gray-lighter,
	gray-1: $color-gray-lightest,
	gray-0: $color-gray-white,
	// Background colors
	background-color-default: $color-gray-black,
	background-color-translucent-default: #00000080,
	background-item-color-default: $color-gray-darkest,
	background-item-color-read-only: #26292f,
	background-color-filter-group: $color-gray-darkest,
	// Text colors
	text-color-default: $color-white,
	text-color-inverse: $color-black,
	text-color-p: $color-white,
	text-color-h1: $color-white,
	text-color-h2: $color-white,
	text-color-a: $color-white,
	text-color-a-hover: $color-primary,
	//text-color-error: #ed1c24,
	text-color-sidebar-active: $color-white,
	text-color-placeholder: $color-gray-base,
	// Buttons
	button-text-color: $dark-button-text-color,
	button-hover-text-color: $dark-button-hover-text-color,
	button-background-color: $dark-button-background-color,
	button-hover-background-color: $dark-button-hover-background-color,
	button-border-color: $dark-button-border-color,
	button-hover-border-color: $dark-button-hover-border-color,
	// General
	background-color: $color-black,
	switch-handle: $tile-color-active-dark,
	wrapper-background: $color-black,
	dbq-element-header-5: $color-white,
	border-color: $color-gray-darkest,
	border-color-light: $color-gray-darkest,
	dropdown-text-color: $color-gray-lightest,
	box-shadow-color: rgba(0, 0, 0, 0.3),
	// State colors
	background-color-info: #0b1325,
	border-color-info: #25498e,
	text-color-info: #8ba9e0,
	background-color-warning: #311400,
	border-color-warning: #9c4300,
	text-color-warning: #ffa25c,
	background-color-error: #2e0202,
	border-color-error: #ae1010,
	text-color-error: #f38282,
	background-color-success: #0c2412,
	border-color-success: #236e35,
	text-color-success: #7cd591,
	// List
	list-standard-font-color: $color-white,
	input-list-active-background: $input-list-active-background-dark,
	// Body
	background-pop-up: $color-gray-darkest,
	background-body: #121212,
	background-body-image-overlay: RGBA($background-overlay-color-dark, $background-overlay-transparency-dark),
	background-body-has-gradient: $background-has-gradient-dark,
	background-body-gradient-first-color: $background-gradient-first-color-dark,
	background-body-gradient-second-color: $background-gradient-second-color-dark,
	background-body-overlay-transparency: $background-overlay-transparency-dark,
	background-body-gradient-direction: $background-gradient-direction-dark,
	background-overlay-blur: $background-overlay-blur-dark,
	// Forms
	background-button-disabled: #3c414c,
	elevated-background-color: #1a1e23,
	// Filters
	filter-tile-background: $tile-color-dark,
	// Sidebar
	sidebar-background: $background-color-dark,
	sidebar-background-sub-items: $color-primary,
	sidebar-tile-background: $tile-color-dark,
	sidebar-tile-background-hover: $tile-color-hover-dark,
	sidebar-tile-background-active: $tile-color-active-dark,
	sidebar-scrollbar-color: $color-gray-darkest,
	sidebar-scrollbar-thumb-color: $color-gray-darker,
	sidebar-scrollbar-thumb-hover-color: $color-primary,
	// Graph
	graph-background: $background-color-dark,
	graph-trans-background: $trans-background-color-dark,
	graph-tile-background: $background-color-dark,
	graph-text: $color-white,
	graph-grid-line: $color-white,
	graph-border-color: #3c414c,
	graph-box-shadow: 0px 2px 5px RGBA(255, 255, 255, 0.5),
	// Source Code Editor
	source-code-editor-background-color: #1a1e23,
	source-code-editor-border-color: #3c414c,
	source-code-editor-line-number-background-color: #26292f,
	source-code-editor-line-number-text-color: #a7aab2,
	source-code-editor-default-text-color: #fff,
	source-code-editor-selected-background-color: #3c414c,
	source-code-editor-selected-text-color: blue,
	source-code-editor-selected-comment-text-color: #acb6ce,
	source-code-editor-property-text-color: #49ccb6,
	source-code-editor-atom-text-color: #4abaff,
	source-code-editor-number-text-color: #4abaff,
	source-code-editor-bracket-text-color: #ffffff,
	source-code-editor-tag-text-color: #7ee787,
	source-code-editor-attribute-text-color: #d2a8ff,
	source-code-editor-keyword-text-color: #4498ff,
	source-code-editor-builtin-text-color: #ffffff,
	source-code-editor-comment-text-color: #57A64A,
	source-code-editor-string-text-color: #4dd4f1,
	source-code-editor-cursor-color: #626d86,
	// Classlist
	classlist-background: $background-color-dark,
	classlist-trans-background: RGBA(0, 0, 0, 0.4),
	classlist-background-active: $tile-color-active-dark,
	classlist-background-highlight: $tile-color-highlight-dark,
	classlist-color-active: $color-gray-darkest,
	classlist-header-background: #111111,
	classlist-row-border: #111111,
	// Classlist - TreeGrid
	classlist-tree-grid-scrollbar-background-color: #121212,
	classlist-tree-grid-scrollbar-navigation-button-color: #fff,
    classlist-tree-grid-scrollbar-track-background-color: #666,
    classlist-tree-grid-scrollbar-thumb-background-color: #222,
    classlist-tree-grid-scrollbar-thumb-border: 1px solid #555,
	// Calendar
	calendar-background: $background-color-dark,
	calendar-trans-background: RGBA(0, 0, 0, 0.4),
	// Knowledgebase
	knowledgebase-h1-color: $color-gray-lightest,
	knowledgebase-h2-color: $color-gray-lightest,
	knowledgebase-h3-color: $color-gray-lightest,
	knowledgebase-h4-color: $color-gray-lightest,
	knowledgebase-info-container-color: #4188ff,
	knowledgebase-info-container-background: #002238,
	knowledgebase-warning-container-color: #ff9f00,
	knowledgebase-warning-container-background: #301800,
	knowledgebase-success-container-color: #155724,
	knowledgebase-success-container-background: #d4edda,
	// Kanban
	kanban-background: $background-color-dark,
	kanban-trans-background: RGBA(0, 0, 0, 0.4),
	kanban-column-item-background: RGBA(0, 0, 0, 0.3),
	kanban-tile-background: #3c414c,
	kanban-tile-tile-background: RGBA(255, 255, 255, 0.2),
	kanban-tile-tag-background: RGBA(0, 0, 0, 0.3),
	kanban-tile-tag-extra-background: #333,
	// Loader
	loader-background: RGBA(0, 0, 0, 0.4),
	// Popup menu
	popup-menu-background: #292f37,
	popup-menu-trans-background: $trans-background-color-dark,
	popup-menu-hover-background: RGBA(255, 255, 255, 0.8),
	popup-menu-border-color: #3c414c,
	popup-menu-box-shadow: 0px 2px 5px RGBA(0, 0, 0, 0.5),
	// Sidebar buttons
	sidebar-button-transparency: $sidebar-button-transparency-dark,
	sidebar-button-background-color: $sidebar-button-background-color-dark,
	sidebar-button-hover-background-color: $sidebar-button-hover-background-color-dark,
	sidebar-button-active-background-color: $sidebar-button-active-background-color-dark,
	sidebar-button-text-color: $sidebar-button-text-color-dark,
	sidebar-button-hover-text-color: $sidebar-button-hover-text-color-dark,
	sidebar-button-active-text-color: $sidebar-button-active-text-color-dark,
	sidebar-button-hover-transparency: $sidebar-button-hover-transparency-dark,
	sidebar-button-active-transparency: $sidebar-button-active-transparency-dark,
	// Nav tabs
	nav-tabs-background-color: $color-primary,
	nav-tabs-background-active: $tile-color-active-dark,
	nav-tabs-background-hover: $tile-color-hover-dark,
	nav-tabs-text-color-disabled: $color-gray-darker,
	nav-tabs-text-color: $color-white,
	// Navigation bar
	navbar-logo-img: $navbar-logo-dark,
	navbar-logo-img-small: $navbar-logo-small-dark,
	// Breadcrumbs
	breadcrumbs-background-color: $color-primary,
	// Classlist folders
	classlist-folder-tile-background: $tile-color-dark,
	classlist-folder-tile-icon-background: $color-gray-darker,
	classlist-folder-tile-background-hover: $tile-color-hover,
	classlists-folder-tile-border: 1px solid #222,
	// Kennisbank
	dbqkbc-folder-tile-icon-background: RGBA(255, 255, 255, 0.2),
	dbqdcltl-folder-tile-icon-background: RGBA(255, 255, 255, 0.2),
	dbqdcltl-folder-tile-drop-shadow: RGBA(0,0,0,0.3),
	// White / Dark mode default background
	default-background: $background-color-dark,
	inverse-background: $color-white,
	// Select
	select-option-background: #1a1e23,
	// Input list
	input-list-item-background: #26292f,
	input-list-item-even-background: #202125,
	// Modal
	modal-header-background: #111111,
	modal-header-border-color: #292f37,
	modal-header-color: #dcdcdc,
	modal-footer-background: #111111,
	modal-footer-border-color: #292f37,
	modal-footer-color: #ffffff,
	modal-body-background: #111111,
	modal-label-background: #26292f,
	modal-label-color: #a7aab2,
	modal-border-color: #3c414c,
	modal-disabled-color: #26292f,
	modal-input-background: #1a1e23,
	modal-error-background: #210100,
	modal-error-border: #d5473c,
	modal-error-color: #b64f4b,
	modal-input-color: #fdfdfd,
	modal-input-disabled-color: #999,
	// Workflow
	workflow-background: $background-color-dark,
	workflow-grid-color: RGBA(255, 255, 255, 0.2),
	workflow-grid-trans-color: RGBA(255, 255, 255, 0.2),
	workflow-node-border-color: #333333,
	workflow-node-border-trans-color: RGBA(255, 255, 255, 0.2),

	// To-do: cleanup not the right place for specific colors
	dbqft-list-item-color: $color-white,
	dbqft-list-item-hover-background-color: rgba(0, 0, 0,.24),
	dbqft-list-item-active-background-color: rgba(0, 0, 0,.48),
	dbqft-list-collapse-button-background-color:rgba(15, 15, 15, 1),
	dbq-right-column-background-color: rgba(0,0,0,.40),
	dbq-right-column-background-color-no-image: #121212,
	dbq-left-column-background-color: rgba(0,0,0,.54),
	dbq-left-column-background-color-no-transparency: #000000,
	dbq-left-column-background-overlay: RGBA($sidebar-background-color-dark, $background-overlay-transparency-dark)
);

// Semantic color maps
$colors: map.merge($colors, (
    border-color: map-get($neutral-scale, 95)
));

$colors-dark: map.merge($colors-dark, (
    border-color: map-get($neutral-scale, 25)
));

// Primary color tones
$color-primary-tone-7: color(primary-tone, 100);
$color-primary-tone-6: color(primary-tone, 98);
$color-primary-tone-5: color(primary-tone, 95);
$color-primary-tone-4: color(primary-tone, 90);
$color-primary-tone-3: color(primary-tone, 80);
$color-primary-tone-2: color(primary-tone, 70);
$color-primary-tone-1: color(primary-tone, 60);
$color-primary-tone-0: color(primary-tone, 50);
$color-primary-tone--1: color(primary-tone, 40);
$color-primary-tone--2: color(primary-tone, 30);
$color-primary-tone--3: color(primary-tone, 20);
$color-primary-tone--4: color(primary-tone, 10);
$color-primary-tone--5: color(primary-tone, 0);
$color-primary: $color-primary-tone-0;
$color-subtle: $color-primary-tone-4;

// Neutral tones
$color-neutral-100: color(neutral, 100);
$color-neutral-99:  color(neutral, 99);
$color-neutral-98:  color(neutral, 98);
$color-neutral-95:  color(neutral, 95);
$color-neutral-92:  color(neutral, 92);
$color-neutral-90:  color(neutral, 90);
$color-neutral-80:  color(neutral, 80);
$color-neutral-70:  color(neutral, 70);
$color-neutral-60:  color(neutral, 60);
$color-neutral-50:  color(neutral, 50);
$color-neutral-40:  color(neutral, 40);
$color-neutral-35:  color(neutral, 35);
$color-neutral-30:  color(neutral, 30);
$color-neutral-25:  color(neutral, 25);
$color-neutral-20:  color(neutral, 20);
$color-neutral-15:  color(neutral, 15);
$color-neutral-10:  color(neutral, 10);
$color-neutral-5:   color(neutral, 5);
$color-neutral-0:   color(neutral, 0);

// Layer color maps
$layer-colors: (
  0: map-get($neutral-scale, 100),
  1: map-get($neutral-scale, 99),
  2: map-get($neutral-scale, 98),
  3: map-get($neutral-scale, 95),
  4: map-get($neutral-scale, 90),
  5: map-get($neutral-scale, 80),
  6: map-get($neutral-scale, 70),
  7: map-get($neutral-scale, 60),
  8: map-get($neutral-scale, 50),
  9: map-get($neutral-scale, 40),
  10: map-get($neutral-scale, 35),
  11: map-get($neutral-scale, 30),
  12: map-get($neutral-scale, 25)

);

$layer-colors-dark: (
  0: map-get($neutral-scale, 5),
  1: map-get($neutral-scale, 10),
  2: map-get($neutral-scale, 20),
  3: map-get($neutral-scale, 25),
  4: map-get($neutral-scale, 30),
  5: map-get($neutral-scale, 35),
  6: map-get($neutral-scale, 40),
  7: map-get($neutral-scale, 50),
  8: map-get($neutral-scale, 60),
  9: map-get($neutral-scale, 70),
  10: map-get($neutral-scale, 80),
  11: map-get($neutral-scale, 90),
  12: map-get($neutral-scale, 92)
);

// Layers
$color-layer-0: custom-color(0, $layer-colors, $layer-colors-dark);
$color-layer-1: custom-color(1, $layer-colors, $layer-colors-dark);
$color-layer-2: custom-color(2, $layer-colors, $layer-colors-dark);
$color-layer-3: custom-color(3, $layer-colors, $layer-colors-dark);
$color-layer-4: custom-color(4, $layer-colors, $layer-colors-dark);
$color-layer-5: custom-color(5, $layer-colors, $layer-colors-dark);
$color-layer-6: custom-color(6, $layer-colors, $layer-colors-dark);
$color-layer-7: custom-color(7, $layer-colors, $layer-colors-dark);
$color-layer-8: custom-color(8, $layer-colors, $layer-colors-dark);
$color-layer-9: custom-color(9, $layer-colors, $layer-colors-dark);
$color-layer-10: custom-color(10, $layer-colors, $layer-colors-dark);
$color-layer-11: custom-color(11, $layer-colors, $layer-colors-dark);
$color-layer-12: custom-color(12, $layer-colors, $layer-colors-dark);

// Render engine
$render-engine-background-color: $color-layer-1;
$render-engine-element-line-color: $color-layer-4;
$render-engine-element-text-pre-background-color: $color-layer-3; // <pre></pre> displays text as code
$render-engine-element-text-pre-color: $color-layer-10;

// Semantic colors
//$global-elevated-block-default-background-color: if($dark-theme, rgba(255,255,255,0.04), rgba(0,0,0,0.03));
$global-elevated-block-default-background-color: $color-layer-2;

// Old variables
$color-gray-1: color(gray-1);
$color-gray-2: color(gray-2);
$color-gray-3: color(gray-3);
$color-gray-4: color(gray-4);
$color-gray-5: color(gray-5);
$color-gray-6: color(gray-6);
$color-gray-7: color(gray-7);
$color-gray-8: color(gray-8);
$background-color-filter-group: color(background-color-filter-group);
$text-color-inverse: color(text-color-inverse);
$text-color-warning: color(text-color-warning);
$default-background-color: color(default-background);