@finsemble/finsemble-ui 6.3.0-beta.20211021 → 6.3.2

package/react/assets/css/defaultTheme.css

@@ -1,356 +1,356 @@
-/*!
- * defaultTheme.css
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-
-:root {
-	/* Color Variables:  Use these variables to make broad-sweeping changes to the colors throughout the application. */
-	--core-primary: #22262f;
-	--core-primary-1: #171a20;
-	--core-primary-2: #373b43;
-	--core-primary-3: #3d4455;
-	--core-primary-4: #5b606f;
-	--core-primary-5: #acb2c0;
-
-	--accent-primary: #42a5ba;
-	--accent-primary-1: #36788b;
-
-	--accent-positive: #2cc13f;
-	--accent-positive-1: #27ae38;
-
-	--accent-aware: #f5a623;
-	--accent-aware-1: #dc951f;
-	--accent-aware-2: #f0e400d9;
-
-	--accent-negative: #f26666;
-	--accent-negative-1: #b54f4f;
-
-	--scrollbar-color: #ffffff;
-	/* Font Variables:  Use these variables to make changes to the global font styles. */
-	--font-family: "OpenSans", sans-serif;
-
-	--font-color: #ffffff;
-	--font-color-1: var(--core-primary-5);
-	--font-color-1-shadow: rgba(172, 178, 192, 0.8); /* 172, 178, 19 same as --font-color-1: var(--core-primary-5);  */
-	--font-color-2: #000000;
-	--font-shadow: rgba(0, 0, 0, 0.5);
-	--font-shadow-light: rgba(255, 255, 255, 0.4);
-	--font-color-3: rgb(10, 140, 244);
-
-	--font-weight: 600;
-	--font-weight-1: 400;
-	--font-weight-2: bold;
-
-	--font-size: 12px;
-	--font-size-large: 14px;
-	--font-size-larger: 16px;
-	--font-size-xl: 21px;
-
-	/* Component Variables:  Use these variables to make granular changes to specific components. */
-
-	/* Toolbar */
-	--toolbar-font-size: var(--font-size);
-	--toolbar-font-color: var(--font-color);
-	--toolbar-font-weight: var(--font-weight);
-
-	--toolbar-height: 39px;
-	--toolbar-brand-logo-width: 14px;
-	--toolbar-brand-logo-height: 16px;
-	--toolbar-favorite-delete-icon: var(--core-primary-5);
-	--toolbar-favorite-delete-icon-hover: var(--accent-negative);
-	--toolbar-background-color: var(--core-primary);
-	--toolbar-button-hover-color: var(--core-primary-3);
-	--toolbar-resize-area-color: var(--core-primary-3);
-
-	--toolbar-icon-workspace-color: var(--accent-aware);
-	--toolbar-icon-app-color: var(--accent-primary);
-	--toolbar-icon-font-size: 13px;
-	--toolbar-icon-color: var(--font-color);
-
-	--toolbar-separator: 1px solid rgba(255, 255, 255, 0.3);
-	--dashbar-divider-color: var(--toolbar-font-color);
-
-	/* Window Title bar */
-	--titleBar-height: 25px;
-	--titleBar-font-size: var(--font-size);
-	--titleBar-icon-font-size: 8px;
-	--titlebar-icon-color: var(--font-color);
-	--titleBar-font-weight: var(--font-weight);
-	--titleBar-active-font-color: var(--font-color); /* Not in use by default */
-	--titleBar-inactive-font-color: var(--font-color-1);
-	--titleBar-linker-font-color: var(--font-color-2);
-	--titleBar-linker-font-color-blur: var(--font-color);
-
-	--titleBar-background-inactive-color: var(--core-primary);
-	--titleBar-background-active-color: var(--core-primary);
-	--titlebar-tab-active-font-color: var(--font-color);
-	--titlebar-tab-inactive-font-color: var(--font-color-1);
-	--titlebar-tab-hover-font-color: var(--font-color);
-	--titlebar-tab-icon-font-color: var(--accent-primary);
-	--titlebar-tab-hover-background-color: var(--core-primary-2);
-	--titlebar-tab-active-background-color: var(--core-primary-3);
-	--titlebar-tab-inactive-background-color: var(--core-primary-1);
-	--titlebar-tab-ghost-background-color: var(--accent-primary-1);
-	--titlebar-tab-ghost-border-color: var(--accent-primary);
-
-	--titlebar-icon-color: var(--font-color-1);
-	--titlebar-icon-hover-color: var(--font-color);
-	--titleBar-button-hover-active-color: var(--core-primary-4);
-	--titleBar-button-hover-inactive-color: var(--core-primary-3);
-	--titleBar-button-highlight-active-color: var(--accent-primary);
-	--titleBar-button-highlight-inactive-color: var(--accent-primary-1);
-	--titleBar-button-hover-negative-color: var(--accent-negative);
-	--titleBar-button-hover-linker-group: var(--core-primary-3);
-
-	/* Dialogs (e.g., singleInput and yesNo) */
-	--dialog-title-font-size: 21px;
-	--dialog-title-font-weight: var(--font-weight-1);
-	--dialog-title-font-family: var(--font-family);
-	--dialog-title-font-color: var(--font-color);
-	--dialog-question-font-size: var(--font-size);
-	--dialog-question-font-weight: var(--font-weight-1);
-	--dialog-question-font-color: var(--font-color-1);
-
-	--dialog-background-color: var(--core-primary);
-	--dialog-font-color: var(--font-color);
-	--dialog-input-font-size: var(--font-size);
-	--dialog-input-font-color: var(--font-color);
-	--dialog-input-font-weight: var(--font-weight-1);
-	--dialog-input-background-color: transparent;
-	--dialog-input-border-color: var(--core-primary-3);
-	--dialog-input-border-focus-color: var(--accent-primary-1);
-	--dialog-input-border-error-color: var(--accent-negative);
-
-	/* Buttons and Inputs */
-	--button-font-size: var(--font-size);
-	--button-font-weight: var(--font-weight);
-
-	--button-affirmative-background-color: var(--accent-primary);
-	--button-affirmative-border-color: transparent;
-	--button-affirmative-background-hover-color: var(--accent-primary-1);
-	--button-affirmative-border-hover-color: transparent;
-
-	--button-neutral-background-color: transparent;
-	--button-neutral-border-color: transparent;
-	--button-neutral-border-hover-color: var(--core-primary-5);
-
-	--button-negative-background-color: var(--accent-negative);
-	--button-negative-border-color: var(--accent-negative-1);
-	--button-negative-background-hover-color: var(--accent-negative-1);
-	--button-negative-border-hover-color: var(--accent-negative-1);
-
-	--button-disabled-color: var(--core-primary-4);
-	--input-negative-border-color: var(--accent-negative); /* Currently not in use */
-
-	/* Menus */
-	--menu-font-size: var(--font-size);
-	--menu-font-icon-size: 13px;
-	--menu-action-icon-color: var(--core-primary-5);
-	--menu-font-weight: var(--font-weight);
-	--menu-font-color: var(--font-color);
-	--menu-active-workspace-font-weight: var(--font-weight-2);
-	--menu-active-workspace-font-color: var(--accent-aware);
-
-	--menu-background-color: var(--core-primary);
-	--menu-dragHandle-color: var(--core-primary-4);
-	--menu-actions-background-color: var(--core-primary);
-	--menu-actions-hover-color: var(--core-primary-3);
-	--menu-content-background-color: var(--core-primary);
-	--menu-content-hover-color: var(--core-primary-3);
-
-	--menu-favorite-hover-color: var(--accent-primary);
-	--menu-favorite-active-hover-color: var(--accent-primary-1);
-	--menu-delete-background-hover-color: var(--accent-negative);
-
-	--menu-linker-selected-font-color: var(--font-color);
-	--menu-linker-selected-font-size: var(--font-size);
-
-	--icon-avatar-default-background-color: var(--core-primary-4);
-	--icon-avatar-workspace-background-color: var(--accent-positive);
-	--icon-avatar-component-background-color: var(--accent-primary);
-	--icon-avatar-component-inactive-background-color: var(--accent-primary-1);
-
-	/* Search Menu */
-	--search-menu-font-size: var(--font-size);
-	--search-menu-font-color: var(--core-primary-5);
-	--search-input-font-color: black;
-	--search-input-background-color: white;
-	--search-input-border-color: var(--core-primary-3);
-	--search-input-focused-border-color: var(--accent-primary);
-	--search-input-clear-search-color: var(--core-primary-5);
-	--search-input-clear-search-hover-color: var(--menu-font-color);
-	--search-menu-header-color: var(--accent-primary);
-
-	--search-hover-background-color: var(--core-primary-3);
-
-	--search-header-font-size: 14px;
-	--search-header-font-color: var(--accent-primary);
-	--search-header-font-weight: var(--font-weight-2);
-
-	--search-result-font-color: var(--core-primary-5);
-	--search-result-font-weight: var(--font-weight-1);
-	--search-result-highlighter-color: var(--menu-font-color);
-	--search-result-selected-color: var(--core-primary-3);
-
-	/* Window Frame */
-	--window-frame-inactive-color: var(--core-primary);
-	--window-frame-active-color: var(--core-primary-2);
-	--window-border-color: rgba(61, 69, 85, 0.2);
-
-	/* Window Scrims and Masks */
-	--groupMask-background-color: var(--accent-primary);
-	--groupMask-border-color: var(--accent-primary-1);
-
-	--scrim-icon-font-color: var(--font-color);
-	--scrim-icon-font-size: 100px;
-
-	--scrim-positive-background-color: var(--accent-primary-1);
-	--scrim-negative-background-color: var(--accent-negative);
-
-	/* User Preferences */
-	--content-font-size: var(--font-size);
-	--content-header-font-size: 16px;
-	--content-header-font-color: var(--accent-primary);
-	--content-font-color: var(--font-color);
-	--content-font-weight: var(--font-weight);
-
-	--content-nav-header-font-size: 16px;
-	--content-nav-header-font-weight: var(--font-weight);
-	--content-nav-header-background-color: var(--core-primary-2);
-	--content-nav-background-color: var(--core-primary);
-	--content-nav-highlighter: var(--core-primary-3);
-	--content-nav-highlighter-hover: var(--core-primary-2);
-	--content-background-color: var(--core-primary-1);
-	--content-hint-font-color: var(--font-color-1);
-	--content-component-list-font-size: var(--font-size);
-
-	--content-list-border-color: var(--core-primary-5);
-	--content-list-highlighter: var(--core-primary-3);
-	--content-list-drag-icon-color: var(--core-primary-4);
-	--content-list-item-flagged-color: var(--accent-primary);
-	--content-list-editor-font-color: var(--font-color);
-	--content-list-editor-highlighted-text: var(--accent-primary);
-
-	--content-button-label-font-size: var(--font-size);
-	--content-button-disabled-border-color: var(--core-primary-2);
-	--content-button-icon-color: var(--font-color-1);
-	--content-button-neutral-hover-color: var(--core-primary-4);
-
-	--content-checkbox-check-color: var(--font-color);
-	--content-checkbox-background-color: var(--accent-primary);
-	--content-checkbox-unchecked-border-color: var(--core-primary-5);
-
-	--content-card-background-color: var(--core-primary-2);
-	--content-card-bestMatch-background-color: var(--core-primary-2);
-	--content-card-icon-background-color: var(--accent-primary-1);
-	--content-card-icon-font-size: 20px;
-	--content-card-title-font-size: var(--font-size);
-	--content-back-font-size: 13px;
-	--content-close-hover-color: var(--accent-negative);
-
-	--content-warning-text: var(--accent-aware);
-	--content-restart-button-color: var(--accent-primary-1);
-
-	/* Notifications */
-	--notification-body-background-color: var(--toolbar-background-color);
-	--notification-body-font-color: var(--font-color);
-	--notification-body-font-family: var(--font-family);
-	--notification-logo-width: 14px;
-	--notification-title-font-size: 13px;
-	--notification-title-font-weight: var(--font-weight);
-	--notification-close-icon-hover-color: var(--accent-negative);
-	--notification-description-font-size: 13px;
-
-	/* Process Monitor */
-	--procMonitor-font-color: var(--font-color);
-	--procMonitor-font-size: var(--font-size);
-	--procMonitor-font-weight: var(--font-weight-1);
-	--procMonitor-component-name-font-weight: var(--font-weight-1);
-	--procMonitor-process-name-font-weight: var(--font-weight);
-
-	--procMonitor-background-color: var(--core-primary);
-	--procMonitor-list-border-color: var(--core-primary-3);
-	--procMonitor-close-component-font-color: var(--font-color-1);
-
-	--procMonitor-warning-background-color: var(--accent-aware-1);
-	--procMonitor-negative-border-color: var(--accent-negative-1);
-	--procMonitor-negative-background-color: var(--accent-negative);
-
-	--procMonitor-close-hover-color: var(--accent-negative);
-
-	/* App Catalog */
-	--catalog-font-size-header: 14px;
-	--catalog-font-size-text: var(--font-size);
-	--catalog-font-weight: var(--font-weight);
-	--catalog-carousel-font-weight: var(--font-weight-2);
-	--catalog-font-color: var(--font-color);
-	--catalog-tag-font-color: var(--core-primary-5);
-	--catalog-toast-background-color: var(--core-primary);
-	--catalog-background-color: var(--core-primary-1);
-	--catalog-pagination-dots-color: var(--core-primary-3);
-	--catalog-pagination-dots-active-color: var(--core-primary-4);
-	--catalog-hero-border-color: transparent;
-	--catalog-hero-background-color: var(--core-primary-2);
-	--catalog-card-background-color: var(--core-primary);
-	--catalog-card-checkmark-unselected-color: var(--core-primary-4);
-	--catalog-card-checkmark-selected-color: var(--accent-positive);
-	--catalog-section-header-font-color: var(--accent-primary);
-	--catalog-search-border-color: var(--core-primary-4);
-	--catalog-search-active-border-color: var(--accent-primary-1);
-	--catalog-disabled-button-background-color: var(--core-primary-3);
-
-	/* Shared Tag Styles */
-	--tag-font-size: 11px;
-	--tag-background-color: var(--core-primary-2);
-	--tag-background-hover-color: var(--core-primary-3);
-	--tag-font-color: var(--font-color);
-	--tag-font-weight: var(--font-weight-1);
-	--tag-close-icon-hover-color: var(--accent-negative);
-	--tag-checkmark-icon-color: var(--accent-positive);
-
-	/* App Menu */
-	--appMenu-font-size: var(--font-size);
-	--appMenu-font-weight: var(--font-weight);
-	--appMenu-tag-font-weight: var(--font-weight-1);
-	--appMenu-font-color: var(--font-color);
-	--appMenu-leftNav-background-color: var(--core-primary);
-	--appMenu-close-hover-color: var(--accent-negative);
-	--appMenu-leftNav-highlighter-hover: var(--core-primary-2);
-	--appMenu-leftNav-highlighter: var(--core-primary-3);
-	--appMenu-leftNav-icon-color: var(--core-primary-4);
-	--appMenu-leftNav-contextMenu-background-color: var(--core-primary-3);
-	--appMenu-background-color: var(--core-primary-1);
-	--appMenu-actions-menu-background-color: var(--core-primary-2);
-	--appMenu-app-item-hover-background-color: var(--core-primary-3);
-	--appMenu-app-favorite-color: var(--accent-primary);
-	--appMenu-app-icon-color: var(--accent-primary);
-	--appMenu-sort-inactive-border-color: var(--core-primary-5);
-	--appMenu-sort-active-color: var(--accent-primary-1);
-	--appMenu-search-input-inactive-color: var(--core-primary-3);
-	--appMenu-search-input-active-color: var(--accent-primary-1);
-	--appMenu-search-input-error-color: var(--accent-negative);
-	--appMenu-edit-icon-hover-color: var(--core-primary-4);
-	--appMenu-separator-color: var(--core-primary-3);
-	--appMenu-icon-color: var(--font-color-1);
-
-	/* Notifications */
-	--notification-primary-color: var(--core-primary);
-	--notification-secondary-color: var(--core-primary-5);
-
-	--notification-contrast-color: var(--accent-primary);
-	--notification-secondary-contrast-color: var(--core-primary-1);
-
-	--notification-background-color: var(--notification-primary-color);
-	--notification-drawer-background-color: var(--notification-secondary-contrast-color);
-
-	--notification-font-family: var(--font-family);
-	--notification-font-color: var(--font-color);
-
-	--notification-alert-dot-color: var(--accent-negative-1);
-	--notification-highlight-border-color: var(--accent-aware-2);
-
-	--content-button-neutral-hover-color: var(--core-primary-4);
-	--appMenu-edit-icon-hover-color: var(--core-primary-4);
-	--catalog-pagination-dots-active-color: var(--core-primary-4);
-}
+/*!
+ * defaultTheme.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+:root {
+	/* Color Variables:  Use these variables to make broad-sweeping changes to the colors throughout the application. */
+	--core-primary: #22262f;
+	--core-primary-1: #171a20;
+	--core-primary-2: #373b43;
+	--core-primary-3: #3d4455;
+	--core-primary-4: #5b606f;
+	--core-primary-5: #acb2c0;
+
+	--accent-primary: #42a5ba;
+	--accent-primary-1: #36788b;
+
+	--accent-positive: #2cc13f;
+	--accent-positive-1: #27ae38;
+
+	--accent-aware: #f5a623;
+	--accent-aware-1: #dc951f;
+	--accent-aware-2: #f0e400d9;
+
+	--accent-negative: #f26666;
+	--accent-negative-1: #b54f4f;
+
+	--scrollbar-color: #ffffff;
+	/* Font Variables:  Use these variables to make changes to the global font styles. */
+	--font-family: "OpenSans", sans-serif;
+
+	--font-color: #ffffff;
+	--font-color-1: var(--core-primary-5);
+	--font-color-1-shadow: rgba(172, 178, 192, 0.8); /* 172, 178, 19 same as --font-color-1: var(--core-primary-5);  */
+	--font-color-2: #000000;
+	--font-shadow: rgba(0, 0, 0, 0.5);
+	--font-shadow-light: rgba(255, 255, 255, 0.4);
+	--font-color-3: rgb(10, 140, 244);
+
+	--font-weight: 600;
+	--font-weight-1: 400;
+	--font-weight-2: bold;
+
+	--font-size: 12px;
+	--font-size-large: 14px;
+	--font-size-larger: 16px;
+	--font-size-xl: 21px;
+
+	/* Component Variables:  Use these variables to make granular changes to specific components. */
+
+	/* Toolbar */
+	--toolbar-font-size: var(--font-size);
+	--toolbar-font-color: var(--font-color);
+	--toolbar-font-weight: var(--font-weight);
+
+	--toolbar-height: 39px;
+	--toolbar-brand-logo-width: 14px;
+	--toolbar-brand-logo-height: 16px;
+	--toolbar-favorite-delete-icon: var(--core-primary-5);
+	--toolbar-favorite-delete-icon-hover: var(--accent-negative);
+	--toolbar-background-color: var(--core-primary);
+	--toolbar-button-hover-color: var(--core-primary-3);
+	--toolbar-resize-area-color: var(--core-primary-3);
+
+	--toolbar-icon-workspace-color: var(--accent-aware);
+	--toolbar-icon-app-color: var(--accent-primary);
+	--toolbar-icon-font-size: 13px;
+	--toolbar-icon-color: var(--font-color);
+
+	--toolbar-separator: 1px solid rgba(255, 255, 255, 0.3);
+	--dashbar-divider-color: var(--toolbar-font-color);
+
+	/* Window Title bar */
+	--titleBar-height: 25px;
+	--titleBar-font-size: var(--font-size);
+	--titleBar-icon-font-size: 8px;
+	--titlebar-icon-color: var(--font-color);
+	--titleBar-font-weight: var(--font-weight);
+	--titleBar-active-font-color: var(--font-color); /* Not in use by default */
+	--titleBar-inactive-font-color: var(--font-color-1);
+	--titleBar-linker-font-color: var(--font-color-2);
+	--titleBar-linker-font-color-blur: var(--font-color);
+
+	--titleBar-background-inactive-color: var(--core-primary);
+	--titleBar-background-active-color: var(--core-primary);
+	--titlebar-tab-active-font-color: var(--font-color);
+	--titlebar-tab-inactive-font-color: var(--font-color-1);
+	--titlebar-tab-hover-font-color: var(--font-color);
+	--titlebar-tab-icon-font-color: var(--accent-primary);
+	--titlebar-tab-hover-background-color: var(--core-primary-2);
+	--titlebar-tab-active-background-color: var(--core-primary-3);
+	--titlebar-tab-inactive-background-color: var(--core-primary-1);
+	--titlebar-tab-ghost-background-color: var(--accent-primary-1);
+	--titlebar-tab-ghost-border-color: var(--accent-primary);
+
+	--titlebar-icon-color: var(--font-color-1);
+	--titlebar-icon-hover-color: var(--font-color);
+	--titleBar-button-hover-active-color: var(--core-primary-4);
+	--titleBar-button-hover-inactive-color: var(--core-primary-3);
+	--titleBar-button-highlight-active-color: var(--accent-primary);
+	--titleBar-button-highlight-inactive-color: var(--accent-primary-1);
+	--titleBar-button-hover-negative-color: var(--accent-negative);
+	--titleBar-button-hover-linker-group: var(--core-primary-3);
+
+	/* Dialogs (e.g., singleInput and yesNo) */
+	--dialog-title-font-size: 21px;
+	--dialog-title-font-weight: var(--font-weight-1);
+	--dialog-title-font-family: var(--font-family);
+	--dialog-title-font-color: var(--font-color);
+	--dialog-question-font-size: var(--font-size);
+	--dialog-question-font-weight: var(--font-weight-1);
+	--dialog-question-font-color: var(--font-color-1);
+
+	--dialog-background-color: var(--core-primary);
+	--dialog-font-color: var(--font-color);
+	--dialog-input-font-size: var(--font-size);
+	--dialog-input-font-color: var(--font-color);
+	--dialog-input-font-weight: var(--font-weight-1);
+	--dialog-input-background-color: transparent;
+	--dialog-input-border-color: var(--core-primary-3);
+	--dialog-input-border-focus-color: var(--accent-primary-1);
+	--dialog-input-border-error-color: var(--accent-negative);
+
+	/* Buttons and Inputs */
+	--button-font-size: var(--font-size);
+	--button-font-weight: var(--font-weight);
+
+	--button-affirmative-background-color: var(--accent-primary);
+	--button-affirmative-border-color: transparent;
+	--button-affirmative-background-hover-color: var(--accent-primary-1);
+	--button-affirmative-border-hover-color: transparent;
+
+	--button-neutral-background-color: transparent;
+	--button-neutral-border-color: transparent;
+	--button-neutral-border-hover-color: var(--core-primary-5);
+
+	--button-negative-background-color: var(--accent-negative);
+	--button-negative-border-color: var(--accent-negative-1);
+	--button-negative-background-hover-color: var(--accent-negative-1);
+	--button-negative-border-hover-color: var(--accent-negative-1);
+
+	--button-disabled-color: var(--core-primary-4);
+	--input-negative-border-color: var(--accent-negative); /* Currently not in use */
+
+	/* Menus */
+	--menu-font-size: var(--font-size);
+	--menu-font-icon-size: 13px;
+	--menu-action-icon-color: var(--core-primary-5);
+	--menu-font-weight: var(--font-weight);
+	--menu-font-color: var(--font-color);
+	--menu-active-workspace-font-weight: var(--font-weight-2);
+	--menu-active-workspace-font-color: var(--accent-aware);
+
+	--menu-background-color: var(--core-primary);
+	--menu-dragHandle-color: var(--core-primary-4);
+	--menu-actions-background-color: var(--core-primary);
+	--menu-actions-hover-color: var(--core-primary-3);
+	--menu-content-background-color: var(--core-primary);
+	--menu-content-hover-color: var(--core-primary-3);
+
+	--menu-favorite-hover-color: var(--accent-primary);
+	--menu-favorite-active-hover-color: var(--accent-primary-1);
+	--menu-delete-background-hover-color: var(--accent-negative);
+
+	--menu-linker-selected-font-color: var(--font-color);
+	--menu-linker-selected-font-size: var(--font-size);
+
+	--icon-avatar-default-background-color: var(--core-primary-4);
+	--icon-avatar-workspace-background-color: var(--accent-positive);
+	--icon-avatar-component-background-color: var(--accent-primary);
+	--icon-avatar-component-inactive-background-color: var(--accent-primary-1);
+
+	/* Search Menu */
+	--search-menu-font-size: var(--font-size);
+	--search-menu-font-color: var(--core-primary-5);
+	--search-input-font-color: black;
+	--search-input-background-color: white;
+	--search-input-border-color: var(--core-primary-3);
+	--search-input-focused-border-color: var(--accent-primary);
+	--search-input-clear-search-color: var(--core-primary-5);
+	--search-input-clear-search-hover-color: var(--menu-font-color);
+	--search-menu-header-color: var(--accent-primary);
+
+	--search-hover-background-color: var(--core-primary-3);
+
+	--search-header-font-size: 14px;
+	--search-header-font-color: var(--accent-primary);
+	--search-header-font-weight: var(--font-weight-2);
+
+	--search-result-font-color: var(--core-primary-5);
+	--search-result-font-weight: var(--font-weight-1);
+	--search-result-highlighter-color: var(--menu-font-color);
+	--search-result-selected-color: var(--core-primary-3);
+
+	/* Window Frame */
+	--window-frame-inactive-color: var(--core-primary);
+	--window-frame-active-color: var(--core-primary-2);
+	--window-border-color: rgba(61, 69, 85, 0.2);
+
+	/* Window Scrims and Masks */
+	--groupMask-background-color: var(--accent-primary);
+	--groupMask-border-color: var(--accent-primary-1);
+
+	--scrim-icon-font-color: var(--font-color);
+	--scrim-icon-font-size: 100px;
+
+	--scrim-positive-background-color: var(--accent-primary-1);
+	--scrim-negative-background-color: var(--accent-negative);
+
+	/* User Preferences */
+	--content-font-size: var(--font-size);
+	--content-header-font-size: 16px;
+	--content-header-font-color: var(--accent-primary);
+	--content-font-color: var(--font-color);
+	--content-font-weight: var(--font-weight);
+
+	--content-nav-header-font-size: 16px;
+	--content-nav-header-font-weight: var(--font-weight);
+	--content-nav-header-background-color: var(--core-primary-2);
+	--content-nav-background-color: var(--core-primary);
+	--content-nav-highlighter: var(--core-primary-3);
+	--content-nav-highlighter-hover: var(--core-primary-2);
+	--content-background-color: var(--core-primary-1);
+	--content-hint-font-color: var(--font-color-1);
+	--content-component-list-font-size: var(--font-size);
+
+	--content-list-border-color: var(--core-primary-5);
+	--content-list-highlighter: var(--core-primary-3);
+	--content-list-drag-icon-color: var(--core-primary-4);
+	--content-list-item-flagged-color: var(--accent-primary);
+	--content-list-editor-font-color: var(--font-color);
+	--content-list-editor-highlighted-text: var(--accent-primary);
+
+	--content-button-label-font-size: var(--font-size);
+	--content-button-disabled-border-color: var(--core-primary-2);
+	--content-button-icon-color: var(--font-color-1);
+	--content-button-neutral-hover-color: var(--core-primary-4);
+
+	--content-checkbox-check-color: var(--font-color);
+	--content-checkbox-background-color: var(--accent-primary);
+	--content-checkbox-unchecked-border-color: var(--core-primary-5);
+
+	--content-card-background-color: var(--core-primary-2);
+	--content-card-bestMatch-background-color: var(--core-primary-2);
+	--content-card-icon-background-color: var(--accent-primary-1);
+	--content-card-icon-font-size: 20px;
+	--content-card-title-font-size: var(--font-size);
+	--content-back-font-size: 13px;
+	--content-close-hover-color: var(--accent-negative);
+
+	--content-warning-text: var(--accent-aware);
+	--content-restart-button-color: var(--accent-primary-1);
+
+	/* Notifications */
+	--notification-body-background-color: var(--toolbar-background-color);
+	--notification-body-font-color: var(--font-color);
+	--notification-body-font-family: var(--font-family);
+	--notification-logo-width: 14px;
+	--notification-title-font-size: 13px;
+	--notification-title-font-weight: var(--font-weight);
+	--notification-close-icon-hover-color: var(--accent-negative);
+	--notification-description-font-size: 13px;
+
+	/* Process Monitor */
+	--procMonitor-font-color: var(--font-color);
+	--procMonitor-font-size: var(--font-size);
+	--procMonitor-font-weight: var(--font-weight-1);
+	--procMonitor-component-name-font-weight: var(--font-weight-1);
+	--procMonitor-process-name-font-weight: var(--font-weight);
+
+	--procMonitor-background-color: var(--core-primary);
+	--procMonitor-list-border-color: var(--core-primary-3);
+	--procMonitor-close-component-font-color: var(--font-color-1);
+
+	--procMonitor-warning-background-color: var(--accent-aware-1);
+	--procMonitor-negative-border-color: var(--accent-negative-1);
+	--procMonitor-negative-background-color: var(--accent-negative);
+
+	--procMonitor-close-hover-color: var(--accent-negative);
+
+	/* App Catalog */
+	--catalog-font-size-header: 14px;
+	--catalog-font-size-text: var(--font-size);
+	--catalog-font-weight: var(--font-weight);
+	--catalog-carousel-font-weight: var(--font-weight-2);
+	--catalog-font-color: var(--font-color);
+	--catalog-tag-font-color: var(--core-primary-5);
+	--catalog-toast-background-color: var(--core-primary);
+	--catalog-background-color: var(--core-primary-1);
+	--catalog-pagination-dots-color: var(--core-primary-3);
+	--catalog-pagination-dots-active-color: var(--core-primary-4);
+	--catalog-hero-border-color: transparent;
+	--catalog-hero-background-color: var(--core-primary-2);
+	--catalog-card-background-color: var(--core-primary);
+	--catalog-card-checkmark-unselected-color: var(--core-primary-4);
+	--catalog-card-checkmark-selected-color: var(--accent-positive);
+	--catalog-section-header-font-color: var(--accent-primary);
+	--catalog-search-border-color: var(--core-primary-4);
+	--catalog-search-active-border-color: var(--accent-primary-1);
+	--catalog-disabled-button-background-color: var(--core-primary-3);
+
+	/* Shared Tag Styles */
+	--tag-font-size: 11px;
+	--tag-background-color: var(--core-primary-2);
+	--tag-background-hover-color: var(--core-primary-3);
+	--tag-font-color: var(--font-color);
+	--tag-font-weight: var(--font-weight-1);
+	--tag-close-icon-hover-color: var(--accent-negative);
+	--tag-checkmark-icon-color: var(--accent-positive);
+
+	/* App Menu */
+	--appMenu-font-size: var(--font-size);
+	--appMenu-font-weight: var(--font-weight);
+	--appMenu-tag-font-weight: var(--font-weight-1);
+	--appMenu-font-color: var(--font-color);
+	--appMenu-leftNav-background-color: var(--core-primary);
+	--appMenu-close-hover-color: var(--accent-negative);
+	--appMenu-leftNav-highlighter-hover: var(--core-primary-2);
+	--appMenu-leftNav-highlighter: var(--core-primary-3);
+	--appMenu-leftNav-icon-color: var(--core-primary-4);
+	--appMenu-leftNav-contextMenu-background-color: var(--core-primary-3);
+	--appMenu-background-color: var(--core-primary-1);
+	--appMenu-actions-menu-background-color: var(--core-primary-2);
+	--appMenu-app-item-hover-background-color: var(--core-primary-3);
+	--appMenu-app-favorite-color: var(--accent-primary);
+	--appMenu-app-icon-color: var(--accent-primary);
+	--appMenu-sort-inactive-border-color: var(--core-primary-5);
+	--appMenu-sort-active-color: var(--accent-primary-1);
+	--appMenu-search-input-inactive-color: var(--core-primary-3);
+	--appMenu-search-input-active-color: var(--accent-primary-1);
+	--appMenu-search-input-error-color: var(--accent-negative);
+	--appMenu-edit-icon-hover-color: var(--core-primary-4);
+	--appMenu-separator-color: var(--core-primary-3);
+	--appMenu-icon-color: var(--font-color-1);
+
+	/* Notifications */
+	--notification-primary-color: var(--core-primary);
+	--notification-secondary-color: var(--core-primary-5);
+
+	--notification-contrast-color: var(--accent-primary);
+	--notification-secondary-contrast-color: var(--core-primary-1);
+
+	--notification-background-color: var(--notification-primary-color);
+	--notification-drawer-background-color: var(--notification-secondary-contrast-color);
+
+	--notification-font-family: var(--font-family);
+	--notification-font-color: var(--font-color);
+
+	--notification-alert-dot-color: var(--accent-negative-1);
+	--notification-highlight-border-color: var(--accent-aware-2);
+
+	--content-button-neutral-hover-color: var(--core-primary-4);
+	--appMenu-edit-icon-hover-color: var(--core-primary-4);
+	--catalog-pagination-dots-active-color: var(--core-primary-4);
+}