@deenruv/admin-ui-plugin 1.0.0

package/lib/admin-ui/styles/theme/dark.scss

@@ -0,0 +1,591 @@
+// Deenruv dark theme
+// Based on this dark theme example from Scott Mathis:
+// https://github.com/mathisscott/clarity-theming-starter/blob/20f4680b43a9a7fd3d43a6ba36f717fdafc6e570/src/_dark-theme.scss
+:root [data-theme="dark"] {
+    --color-grey-100: hsl(211, 10%, 90%);
+    --color-grey-200: hsl(211, 10%, 67%);
+    --color-grey-300: hsl(211, 10%, 47%);
+    --color-grey-400: hsl(208, 14%, 39%);
+    --color-grey-500: hsl(208, 16%, 34%);
+    --color-grey-600: hsl(198, 28%, 18%);
+    --color-grey-700: hsl(201, 30%, 15%);
+    --color-grey-800: hsl(201, 30%, 13%);
+    --color-grey-900: hsl(203, 30%, 8%);
+
+    --color-component-bg-100: hsl(201, 30%, 18%);
+    --color-component-bg-200: hsl(201, 30%, 22%);
+    --color-component-bg-300: hsl(201, 30%, 28%);
+    --color-component-border-100: var(--color-grey-700);
+    --color-component-border-200: var(--color-grey-600);
+    --color-component-border-300: var(--color-grey-500);
+    --color-text-100: hsl(210, 16%, 93%);
+    --color-text-200: hsl(203, 16%, 72%);
+    --color-text-300: var(--color-grey-300);
+    --color-text-inverse: var(--clr-global-font-color);
+    --color-text-active: var(--color-primary-600);
+
+    --color-weight-100: hsl(201 30% 15%);
+    --color-weight-125: hsl(201 30% 17%);
+    --color-weight-150: hsl(201 30% 20%);
+    --color-weight-200: hsl(201 30% 35%);
+    --color-weight-300: hsl(201 30% 45%);
+    --color-weight-400: hsl(201 30% 55%);
+    --color-weight-500: hsl(201 30% 65%);
+    --color-weight-600: hsl(201 30% 75%);
+    --color-weight-700: hsl(201 30% 85%);
+    --color-weight-800: hsl(201 30% 90%);
+    --color-weight-900: hsl(201 30% 92%);
+    --color-weight-950: hsl(201 30% 94%);
+    --color-weight-975: hsl(201 30% 96%);
+    --color-weight-1000: hsl(201 30% 98%);
+
+
+    --color-scrollbar-bg: var(--color-weight-125);
+    --color-scrollbar-thumb: var(--color-weight-200);
+    --color-scrollbar-thumb-hover: var(--color-weight-300);
+    --color-surface-bg: hsl(201, 30%, 13%);
+    --color-page-header:hsl(201, 30%, 15%);
+    --color-page-header-item-bg: var(--color-weight-150);
+    --color-top-bar-bg: hsl(201, 30%, 15%);
+    --color-left-nav-bg: hsl(201, 30%, 20%);
+    --color-left-nav-text-hover: var(--color-primary-200);
+
+    --color-card-border: var(--color-weight-150);
+    --color-card-bg: var(--color-weight-100);
+
+    --color-button-bg: var(--color-weight-150);
+    --color-button-hover-bg: var(--color-weight-200);
+    --color-button-ghost-bg: var(--color-weight-125);
+    --color-button-ghost-text: var(--color-text-100);
+    --color-button-ghost-hover-text: var(--color-primary-100);
+    --color-button-ghost-hover-bg: var(--color-weight-200);
+    --color-button-small-bg: var(--color-weight-150);
+    --color-button-small-hover-bg: var(--color-weight-200);
+    --color-button-small-text: var(--color-weight-700);
+
+    --color-channel-switcher-bg: var(--color-weight-125);
+    --color-channel-switcher-hover-bg: var(--color-weight-100);
+
+    --color-chip-warning-border: var(--color-warning-800);
+    --color-chip-warning-text: #fff;
+    --color-chip-warning-bg: var(--color-warning-700);
+    --color-chip-success-border: var(--color-success-800);
+    --color-chip-success-text: #fff;
+    --color-chip-success-bg: var(--color-success-700);
+    --color-chip-error-border: var(--color-error-800);
+    --color-chip-error-text: #fff;
+    --color-chip-error-bg: var(--color-error-700);
+
+    --color-icon-button: var(--color-grey-200);
+    --color-icon-button-hover: var(--color-primary-200);
+    --color-form-input-bg: var(--color-weight-150);
+    --color-form-input-focus: var(--color-primary-500);
+
+    --color-json-editor-background-color: var(--color-grey-600);
+    --color-json-editor-text: var(--color-grey-100);
+    --color-json-editor-string: var(--color-secondary-300);
+    --color-json-editor-number: var(--color-primary-300);
+    --color-json-editor-boolean: var(--color-primary-300);
+    --color-json-editor-null: var(--color-grey-300-grey-500);
+    --color-json-editor-key: var(--color-success-300);
+    --color-json-editor-error: var(--color-error-200);
+
+    --color-split-view-separator-border: var(--color-weight-150);
+    --color-split-view-separator-resize-border: var(--color-primary-700);
+
+
+    // clarity styles
+    --clr-global-app-background: hsl(201, 30%, 15%);
+    --clr-global-selection-color: hsl(203, 32%, 29%);
+    --clr-global-hover-bg-color: hsl(201, 31%, 23%);
+
+    --clr-close-color--normal: hsl(201, 17%, 80%);
+    --clr-close-color--normal-opacity: 1;
+    --clr-close-color--hover: hsl(201, 0%, 100%);
+    --clr-close-color--hover-opacity: 1;
+
+    --clr-popover-box-shadow-color: hsla(0, 0%, 0%, 0.5);
+
+    --clr-link-visited-color: var(--color-weight-700);
+    --clr-link-hover-color: var(--color-weight-700);
+    --clr-link-active-color: var(--color-weight-700);
+    --clr-link-color: var(--color-weight-700);
+
+    --clr-theme-alert-font-color: hsl(210, 16%, 93%);
+    --clr-theme-app-alert-font-color: hsl(0, 0%, 0%);
+
+    /*****************
+    * Badge
+    */
+    --clr-badge-font-color-light: hsl(0, 0%, 0%);
+    --clr-badge-font-color-dark: hsl(0, 0%, 0%);
+    --clr-badge-info-bg-color: hsl(198, 65%, 57%);
+    --clr-badge-info-color: hsl(0, 0%, 0%);
+    --clr-badge-success-bg-color: hsl(90, 67%, 38%);
+    --clr-badge-success-color: hsl(0, 0%, 0%);
+    --clr-badge-warning-bg-color: hsl(49, 98%, 51%);
+    --clr-badge-warning-color: hsl(0, 0%, 0%);
+    --clr-badge-danger-bg-color: hsl(3, 90%, 62%);
+    --clr-badge-danger-color: hsl(0, 0%, 0%);
+    --clr-badge-gray-bg-color: hsl(211, 10%, 47%);
+    --clr-badge-purple-bg-color: hsl(281, 44%, 62%);
+    --clr-badge-blue-bg-color: hsl(201, 100%, 36%);
+    --clr-badge-orange-bg-color: hsl(31, 100%, 60%);
+    --clr-badge-light-blue-bg-color: hsl(194, 57%, 71%);
+    // END: Badge
+
+    /*****************
+    * Buttons
+    */
+
+    // Use these to control the disabled appearance for all buttons.
+    --clr-btn-disabled-font-color: hsl(0, 0%, 0%);
+    --clr-btn-outline-disabled-font-color: hsl(0, 0%, 100%);
+    --clr-btn-disabled-bg-color: hsl(0, 0%, 100%);
+    --clr-btn-disabled-border-color: hsl(0, 0%, 100%);
+
+    // Disabled icon color
+    --clr-btn-icon-disabled-color: var(--clr-btn-outline-disabled-font-color);
+
+    // Default button
+    --clr-btn-default-color: hsl(198, 65%, 57%); // border-color, color, checked-background-color
+    --clr-btn-default-bg-color: transparent; // background-color, disabled-background-color
+    --clr-btn-default-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
+    --clr-btn-default-hover-color: hsl(194, 78%, 63%); // hover-color
+    --clr-btn-default-box-shadow-color: hsl(0, 0%, 0%); // active-box-shadow-color
+    --clr-btn-default-checked-color: hsl(0, 0%, 100%); // checked-color
+    --clr-btn-default-checked-bg-color: var(--clr-btn-default-color);
+    --clr-btn-default-disabled-color: var(--clr-btn-outline-disabled-font-color); // disabled-color
+    --clr-btn-default-disabled-border-color: var(--clr-btn-disabled-border-color); // disabled-border-color
+
+    // Default button
+    --clr-btn-default-outline-color: hsl(198, 65%, 57%); // border-color, color, checked-background-color
+    --clr-btn-default-outline-bg-color: transparent; // background-color, disabled-background-color
+    --clr-btn-default-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
+    --clr-btn-default-outline-hover-color: hsl(194, 78%, 63%); // hover-color
+    --clr-btn-default-outline-box-shadow-color: hsl(0, 0%, 0%); // active-box-shadow-color
+    --clr-btn-default-outline-checked-color: hsl(0, 0%, 100%); // checked-color
+    --clr-btn-default-outline-checked-bg-color: var(--clr-btn-default-outline-color); // checked-color
+    --clr-btn-default-outline-disabled-color: var(--clr-btn-outline-disabled-font-color); // disabled-color
+    --clr-btn-default-outline-disabled-border-color: var(--clr-btn-disabled-border-color); // disabled-border-color
+    --clr-btn-default-outline-disabled-checked-color: var(--clr-btn-disabled-bg-color);
+
+    // Primary button
+    --clr-btn-primary-color: hsl(0, 0%, 0%); // color, checked-background-color
+    --clr-btn-primary-bg-color: hsl(198, 65%, 57%); // background-color, disabled-background-color
+    --clr-btn-primary-border-color: hsl(198, 65%, 57%); // border-color
+    --clr-btn-primary-hover-bg-color: hsl(194, 78%, 63%); // hover-background-color
+    --clr-btn-primary-hover-color: hsl(0, 0%, 0%); // hover-color
+    --clr-btn-primary-box-shadow-color: hsl(205, 100%, 34%); // active-box-shadow-color
+    --clr-btn-primary-checked-color: hsl(0, 0%, 100%); // checked-color
+    --clr-btn-primary-disabled-color: var(--clr-btn-disabled-font-color); // disabled-color
+    --clr-btn-primary-disabled-bg-color: var(--clr-btn-disabled-bg-color); // disabled-bg-color
+    --clr-btn-primary-disabled-border-color: var(--clr-btn-disabled-border-color); // disabled-border-color
+
+    // Success button
+    --clr-btn-success-color: hsl(0, 0%, 0%); // color, checked-color,
+    --clr-btn-success-bg-color: hsl(92, 79%, 40%); // background-color, border-color
+    --clr-btn-success-hover-bg-color: hsl(83, 77%, 44%); // hover-background-color
+    --clr-btn-success-hover-color: var(--clr-btn-success-color); // hover-color
+    --clr-btn-success-box-shadow-color: hsl(98, 100%, 21%); // active-box-shadow-color
+    --clr-btn-success-checked-bg-color: var(--clr-btn-success-hover-bg-color); // checked-background-color
+    --clr-btn-success-disabled-color: var(--clr-btn-disabled-font-color); // disabled-color
+    --clr-btn-success-disabled-bg-color: var(--clr-btn-disabled-bg-color); // disabled-background-color
+    --clr-btn-success-disabled-border-color: var(--clr-btn-disabled-border-color); // disabled-border-color
+
+    // Success outline button
+    --clr-btn-success-outline-color: hsl(92, 79%, 40%); // color
+    --clr-btn-success-outline-border-color: hsl(92, 79%, 40%); // border-color, checked-background-color
+    --clr-btn-success-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
+    --clr-btn-success-outline-hover-color: hsl(83, 77%, 44%); // hover-color
+    --clr-btn-success-outline-box-shadow-color: hsl(0, 0%, 0%); // active-box-shadow-color
+    --clr-btn-success-outline-checked-color: hsl(0, 0%, 100%); // checked-color
+    --clr-btn-success-outline-disabled-color: var(--clr-btn-outline-disabled-font-color); // disabled-color
+    --clr-btn-success-outline-disabled-bg-color: transparent; // disabled-background-color
+    --clr-btn-success-outline-disabled-border-color: var(--clr-btn-disabled-border-color); // disabled-border-color
+
+    // Danger button
+    --clr-btn-danger-color: hsl(0, 0%, 0%); // color, checked-color,
+    --clr-btn-danger-bg-color: hsl(3, 90%, 62%); // background-color, border-color
+    --clr-btn-danger-hover-bg-color: hsl(3, 100%, 69%); // hover-background-color
+    --clr-btn-danger-hover-color: var(--clr-btn-danger-color); // hover-color
+    --clr-btn-danger-box-shadow-color: hsl(10, 100%, 39%); // active-box-shadow-color
+    --clr-btn-danger-checked-bg-color: hsl(10, 100%, 39%); // checked-background-color
+    --clr-btn-danger-disabled-color: var(--clr-btn-disabled-font-color); // disabled-color),
+    --clr-btn-danger-disabled-bg-color: var(--clr-btn-disabled-bg-color); // disabled-background-color
+    --clr-btn-danger-disabled-border-color: var(--clr-btn-disabled-border-color); // disabled-border-color
+
+    // Danger outline button
+    --clr-btn-danger-outline-border-color: hsl(3, 90%, 62%); // border-color
+    --clr-btn-danger-outline-color: hsl(3, 90%, 62%); // color
+    --clr-btn-danger-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
+    --clr-btn-danger-outline-hover-color: hsl(3, 100%, 69%); // hover-color
+    --clr-btn-danger-outline-box-shadow-color: hsl(0, 0%, 0%); // active-box-shadow-color
+    --clr-btn-danger-outline-checked-bg-color: hsl(3, 90%, 62%); // checked-background-color
+    --clr-btn-danger-outline-checked-color: hsl(0, 0%, 100%); // checked-color
+    --clr-btn-danger-outline-disabled-color: var(--clr-btn-outline-disabled-font-color); // disabled-color
+    --clr-btn-danger-outline-disabled-bg-color: transparent; // disabled-background-color
+    --clr-btn-danger-outline-disabled-border-color: var(--clr-btn-disabled-border-color); // disabled-border-color
+
+    // Link button
+    --clr-btn-link-color: hsl(198, 65%, 57%); // color
+    --clr-btn-link-hover-color: hsl(194, 78%, 63%); // hover-color
+    --clr-btn-link-checked-color: hsl(198, 65%, 57%); // checked-color
+    --clr-btn-link-disabled-color: var(--clr-btn-outline-disabled-font-color); // disabled-color
+
+    // Inverse button
+    --clr-btn-inverse-border-color: hsl(210, 16%, 93%); // border-color
+    --clr-btn-inverse-bg-color: transparent; // background-color
+    --clr-btn-inverse-color: hsl(210, 16%, 93%); // color
+    --clr-btn-inverse-hover-bg-color: rgba(0, 0, 0, 0.1); // hover-background-color
+    --clr-btn-inverse-hover-color: hsl(0, 0%, 100%); // hover-color
+    --clr-btn-inverse-box-shadow-color: hsl(203, 14%, 70%); // active-box-shadow-color
+    --clr-btn-inverse-checked-bg-color: hsla(0, 0%, 100%, 0.15); // checked-background-color
+    --clr-btn-inverse-checked-color: hsl(0, 0%, 100%); // checked-color
+    --clr-btn-inverse-disabled-color: var(--clr-btn-outline-disabled-font-color); // disabled-color
+    --clr-btn-inverse-disabled-border-color: var(--clr-btn-disabled-border-color); // disabled-border-color
+    // END: Buttons
+
+    /**********
+    * Card
+    */
+    --clr-card-header-title-color: var(--color-text-200);
+    --clr-card-bg-color: hsl(198, 28%, 18%);
+    --clr-card-border-color: hsl(203, 30%, 13%);
+    --clr-card-title-color: hsl(210, 16%, 93%);
+    --clr-card-box-shadow-color: var(--clr-card-border-color);
+    --clr-card-box-shadow: 0 0.15rem 0 0 var(--clr-card-border-color);
+    --clr-card-divider-color: var(--clr-card-border-color);
+    // END: Card
+
+    /**********
+    * Datagrid
+    */
+    --clr-datagrid-icon-color: hsl(203, 16%, 72%);
+    --clr-datagrid-row-hover: hsl(201, 31%, 23%);
+    --clr-datagrid-row-selected: hsl(0, 0%, 100%);
+    --clr-datagrid-popover-bg-color: hsl(198, 28%, 18%);
+    --clr-datagrid-action-toggle: hsl(203, 16%, 72%);
+    --clr-datagrid-pagination-btn-color: hsl(210, 16%, 93%);
+    --clr-datagrid-pagination-btn-disabled-color: hsl(210, 16%, 93%);
+    --clr-datagrid-pagination-btn-disabled-opacity: 0.46;
+    --clr-datagrid-pagination-input-border-color: hsl(208, 16%, 34%);
+    --clr-datagrid-pagination-input-border-focus-color: hsl(198, 65%, 57%);
+    --clr-datagrid-popover-border-color: hsl(0, 0%, 0%);
+    --clr-datagrid-action-popover-hover-color: var(--clr-datagrid-row-hover);
+    --clr-datagrid-loading-background: rgba(0, 0, 0, 0.5);
+    // END: Datagrid
+
+    /*********
+    * Dropdown
+    */
+    --clr-dropdown-active-text-color: hsl(0, 0%, 100%);
+    --clr-dropdown-bg-color: hsl(198, 28%, 18%);
+    --clr-dropdown-border-color: rgb(62, 97, 116);
+    --clr-dropdown-text-color: hsl(203, 16%, 72%);
+    --clr-dropdown-item-color: hsl(203, 16%, 72%);
+    --clr-dropdown-item-hover-color: hsl(203, 16%, 72%);
+    --clr-dropdown-child-border-color: hsl(0, 0%, 0%);
+    --clr-dropdown-bg-active-color: var(--clr-global-selection-color);
+    --clr-dropdown-bg-hover-color: var(--clr-global-hover-bg-color);
+    --clr-dropdown-selection-color: hsl(203, 32%, 29%);
+    --clr-dropdown-box-shadow: var(--clr-popover-box-shadow-color);
+    --clr-dropdown-divider-color: var(--clr-dropdown-border-color);
+    --clr-dropdown-header-color: hsl(203, 16%, 72%);
+    // END: Dropdown overrides
+
+    // Datepicker
+    --clr-calendar-background-color: hsl(198, 28%, 18%);
+    --clr-calendar-border-color: hsl(0, 0%, 0%);
+    --clr-datepicker-trigger-color: hsl(198, 65%, 57%);
+    --clr-datepicker-trigger-hover-color: hsl(194, 78%, 63%);
+    --clr-calendar-btn-color: hsl(198, 65%, 57%);
+    --clr-calendar-btn-hover-focus-color: hsl(201, 31%, 23%);
+    --clr-calendar-active-cell-background-color: hsl(203, 32%, 29%);
+    --clr-calendar-active-focus-cell-background-color: hsl(203, 32%, 29%);
+    --clr-calendar-today-date-cell-color: hsl(0, 0%, 100%);
+    --clr-calendar-active-cell-color: hsl(0, 0%, 100%);
+
+    /******
+    * Forms: TODO: track down component usages and names
+    */
+
+    //GENERIC
+    --clr-forms-label-color: hsl(203, 16%, 72%);
+    --clr-forms-text-color: hsl(210, 16%, 13%);
+    --clr-forms-invalid-color: hsl(3, 90%, 62%);
+    --clr-forms-subtext-color: hsl(0, 0%, 45%);
+    --clr-forms-subtext-color: hsl(203, 16%, 72%);
+    --clr-forms-border-color: hsl(203, 16%, 72%);
+    --clr-forms-focused-color: hsl(198, 65%, 57%);
+
+    // Textarea
+    --clr-forms-textarea-background-color: hsl(201, 30%, 13%);
+    --clr-forms-select-multiple-background-color: hsl(198, 28%, 18%);
+    --clr-forms-select-multiple-border-color: hsl(0, 0%, 0%);
+
+    // Select
+    --clr-forms-select-option-color: hsl(201, 30%, 13%); // Option bg color on chrome/windows is white.
+
+    // Checkbox
+    --clr-forms-checkbox-label-color: hsl(203, 16%, 72%);
+    --clr-forms-checkbox-background-color: hsl(198, 65%, 57%); // Use color here
+    --clr-forms-checkbox-checked-shadow: inset 0 0 0 0.3rem var(--clr-forms-checkbox-background-color);
+    --clr-forms-checkbox-indeterminate-border-color: hsl(203, 16%, 72%);
+    --clr-forms-checkbox-mark-color: hsl(0, 0%, 0%);
+    --clr-forms-checkbox-disabled-background-color: hsl(204, 10%, 60%);
+    --clr-forms-checkbox-disabled-mark-color: hsl(0, 0%, 0%);
+
+    // Radio
+    --clr-forms-radio-label-color: hsl(203, 16%, 72%);
+    --clr-forms-radio-selected-shadow: var(--clr-forms-checkbox-checked-shadow);
+    --clr-forms-radio-focused-shadow: 0 0 0.1rem 0.1rem var(--clr-link-active-color);
+    --clr-forms-radio-disabled-background-color: hsl(0, 0%, 0%);
+    --clr-forms-radio-disabled-mark-color: var(--clr-forms-checkbox-disabled-mark-color);
+    --clr-forms-radio-disabled-shadow: var(--clr-forms-checkbox-checked-shadow);
+
+    /**********
+    * Header
+    */
+    --clr-header-bg-color: hsl(201, 30%, 11%);
+    --clr-header-default-bg-color: var(--clr-header-bg-color);
+    --clr-header-1-bg-color: var(--clr-header-bg-color);
+    --clr-header-2-bg-color: hsl(195, 65%, 24%);
+    --clr-header-3-bg-color: hsl(206, 63%, 27%);
+    --clr-header-4-bg-color: hsl(315, 27%, 28%);
+    --clr-header-5-bg-color: hsl(233, 26%, 33%);
+    --clr-header-6-bg-color: hsl(203, 30%, 8%);
+    // END Header overrides
+
+    /**********
+    * Icons
+    */
+    --clr-icon-color-success: hsl(92, 79%, 40%);
+    --clr-icon-color-error: hsl(3, 90%, 62%);
+    --clr-icon-color-warning: hsl(49, 98%, 51%);
+    --clr-icon-color-info: hsl(198, 65%, 57%);
+    --clr-icon-color-inverse: hsl(0, 0%, 100%);
+    --clr-icon-color-highlight: hsl(198, 65%, 57%);
+    // END: Icons
+
+    /*****************
+    * Label
+    */
+    --clr-label-font-color-light: hsl(0, 0%, 100%);
+    --clr-label-font-color-dark: hsl(0, 0%, 0%);
+    --clr-label-bg-hover-color: hsl(0, 0%, 34%);
+    --clr-label-gray-bg-color: hsl(211, 10%, 47%);
+    --clr-label-purple-bg-color: hsl(281, 44%, 62%);
+    --clr-label-blue-bg-color: hsl(201, 100%, 36%);
+    --clr-label-orange-bg-color: hsl(31, 100%, 60%);
+    --clr-label-light-blue-bg-color: hsl(194, 57%, 71%);
+    --clr-label-info-bg-color: hsl(198, 79%, 28%);
+    --clr-label-info-font-color: var(--clr-label-font-color-light);
+    --clr-label-info-border-color: var(--clr-label-info-bg-color);
+    --clr-label-success-bg-color: hsl(122, 45%, 23%);
+    --clr-label-success-font-color: var(--clr-label-font-color-light);
+    --clr-label-success-border-color: var(--clr-label-success-bg-color);
+    --clr-label-danger-bg-color: hsl(357, 50%, 35%);
+    --clr-label-danger-font-color: var(--clr-label-font-color-light);
+    --clr-label-danger-border-color: var(--clr-label-danger-bg-color);
+    --clr-label-warning-bg-color: hsl(47, 87%, 27%);
+    --clr-label-warning-font-color: var(--clr-label-font-color-light);
+    --clr-label-warning-border-color: var(--clr-label-warning-bg-color);
+    // END: Labels
+
+    /********
+    * Login
+    */
+    --login-wrapper-inner-bg: var(--color-weight-150);
+    --clr-login-background-color: var(--clr-global-app-background);
+    --clr-login-background: '%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%22736px%22%20height%3D%22838px%22%20viewBox%3D%220%200%20736%20838%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3Evector%20art%3C%2Ftitle%3E%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%20id%3D%22symbols%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Login%22%20transform%3D%22translate(-504.000000%2C%200.000000)%22%3E%3Cg%20id%3D%22replaceable-image%22%20transform%3D%22translate(504.000000%2C%200.000000)%22%3E%3Cg%20id%3D%22vector-art%22%20transform%3D%22translate(-78.000000%2C%20-82.000000)%22%3E%3Crect%20id%3D%22Rectangle-path%22%20fill%3D%22%2322343E%22%20x%3D%220%22%20y%3D%220.38%22%20width%3D%221127.55%22%20height%3D%22921.62%22%3E%3C%2Frect%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%232F657B%22%20points%3D%220%203.06%200%20599.24%20298.14%20301.43%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23438597%22%20points%3D%220%20408.65%200%20599.24%2095.29%20504.06%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%232F657B%22%20points%3D%22918.21%20921.95%20818.63%20822.3%20718.89%20921.95%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%233B758E%22%20points%3D%22818.63%20822.3%20298.14%20301.43%200%20599.24%200%20655.02%20266.51%20921.95%20718.89%20921.95%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23579EB2%22%20points%3D%22512.67%20921.95%2095.29%20504.06%200%20599.24%200%20654.97%20267.06%20921.95%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23344B57%22%20points%3D%22266.51%20921.95%200%20655.02%200%20921.95%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23A7C9D5%22%20points%3D%221128%200%20799.58%200%201128%20329.83%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23344B57%22%20points%3D%221128%20329.83%20799.58%200%20599.9%200%20298.14%20301.43%20818.63%20822.3%201128%20513.18%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
+    // END LOGIN
+
+    /**********
+    * Modal
+    */
+    --clr-modal-close-color: hsl(203, 16%, 72%);
+    --clr-modal-bg-color: hsl(198, 28%, 18%);
+    --clr-modal-title-color: var(--clr-global-font-color);
+    --clr-modal-backdrop-color: hsla(0, 0%, 0%, 0.85);
+    --clr-modal-text-color: var(--color-text-100);
+    // END Modal
+
+    /***************
+    * Nav
+    */
+    --clr-sliding-panel-text-color: hsl(0, 0%, 34%);
+    --clr-transition-style: ease;
+    --clr-nav-background-color: var(--clr-header-bg-color);
+    --clr-responsive-nav-hover-bg: var(--clr-global-selection-color);
+    --clr-sliding-panel-text-color: hsl(0, 0%, 100%);
+
+    --clr-sidenav-border-color: var(--color-component-border-100);
+    --clr-sidenav-link-hover-color: var(--color-component-bg-200);
+    --clr-sidenav-color: var(--clr-global-font-color);
+    --clr-sidenav-header-color: var(--clr-global-font-color);
+    --clr-sidenav-link-active-color: hsl(210, 16%, 93%);
+    --clr-sidenav-link-active-bg-color: var(--color-component-bg-300);
+
+    --clr-subnav-bg-color: var(--color-component-bg-200);
+    --clr-nav-shadow: 0 -0.05rem 0 hsl(208, 16%, 34%) inset;
+    // END Nav
+
+    /**************
+    * Progress Bars
+    */
+    --clr-progress-defaultBarColor: hsl(198, 65%, 57%);
+    --clr-progress-success-color: hsl(92, 79%, 40%);
+    --clr-progress-danger-color: hsl(3, 90%, 62%);
+    --clr-progress-warning-color: var(--clr-progress-danger-color);
+    --clr-progress-bg-color: hsl(200, 23%, 25%);
+    // END Progress Bars
+
+    /*********
+    * Signpost
+    */
+    --clr-signpost-action-color: hsl(210, 16%, 93%);
+    --clr-signpost-action-hover-color: hsl(198, 65%, 57%);
+    --clr-signpost-content-bg-color: hsl(198, 28%, 18%);
+    --clr-signpost-content-border-color: hsl(0, 0%, 0%);
+    --clr-signpost-border-size: 0.5rem;
+    --clr-signpost-pointer-border: var(--clr-signpost-border-size solid --clr-signpost-content-border-color);
+    --clr-signpost-pointer-invisible-border: var(--clr-signpost-border-size solid transparent);
+    --clr-signpost-pointer-psuedo-border: var(--clr-signpost-border-size solid --clr-signpost-content-bg-color);
+
+    // END Signpost overrides
+
+    /*********
+    * Spinner
+    */
+    --clr-spinner-color: hsl(198, 65%, 57%);
+    --clr-spinner-bg-color: hsl(200, 23%, 25%);
+    --clr-spinner-opacity: 1;
+    // END Spinners
+
+    /**********
+    * Table
+    */
+    --clr-thead-bgcolor: hsl(201, 30%, 15%);
+    --clr-table-bgcolor: hsl(198, 28%, 18%);
+    --clr-table-font-color: hsl(203, 16%, 72%);
+    --clr-thead-color: var(--clr-table-font-color);
+    --clr-datagrid-default-border-color: hsl(208, 16%, 34%);
+    --clr-table-header-border-bottom-color: var(--clr-datagrid-default-border-color);
+    --clr-table-footer-border-top-color: var(--clr-datagrid-default-border-color);
+    --clr-tablerow-bordercolor: var(--color-component-border-100);
+    --clr-table-border-color: var(--clr-datagrid-default-border-color);
+    --clr-table-bordercolor: var(--clr-datagrid-default-border-color);
+    --clr-table-borderstyle: 0.05rem solid var(--clr-datagrid-default-border-color);
+    --color-table-header-border: var(--color-weight-150);
+    --color-table-row-hover-bg: var(--color-weight-125);
+    --color-table-row-active-bg: var(--color-primary-900);
+    --color-table-row-separator: var(--color-weight-150);
+    --data-table-filter-box-shadow: inset -1px 6px 5px 0px hsla(201, 30%, 5%, 0.2);
+    // END: Table
+
+    /**********
+    * Tabs
+    */
+    --clr-nav-box-shadow-color: var(--color-component-border-100);
+    --clr-nav-active-box-shadow-color: hsl(198, 65%, 57%);
+    --clr-nav-link-active-color: hsl(0, 0%, 100%);
+    --clr-nav-link-color: hsl(203, 16%, 72%);
+    // END: Tabs
+
+    /**
+    * Timeline
+    */
+
+    // colors
+    --clr-timeline-line-color: hsl(203, 16%, 72%);
+    --clr-timeline-step-header-color: hsl(210, 17%, 93%);
+    --clr-timeline-step-title-color: hsl(203, 16%, 72%); // #565656
+    --clr-timeline-step-description-color: hsl(203, 16%, 72%); // #565656
+
+    --clr-timeline-incomplete-step-color: hsl(210, 17%, 93%);
+    --clr-timeline-current-step-color: hsl(198, 65%, 57%);
+    --clr-timeline-success-step-color: hsl(92, 79%, 40%);
+    --clr-timeline-error-step-color: hsl(3, 90%, 62%);
+    // END Timeline
+
+    /**********
+    * Tooltip
+    */
+    --clr-tooltip-color: hsl(0, 0%, 0%);
+    --clr-tooltip-background-color: hsl(0, 0%, 100%);
+    // END: Tooltip
+
+    /**********
+    * Tree View
+    */
+    --clr-tree-node-caret-link-hover-color: hsl(0, 0%, 100%);
+    --clr-tree-link-hover-color: hsl(0, 0%, 93%);
+    --clr-tree-link-hover-color: var(--clr-global-hover-bg-color);
+    --clr-tree-link-selection-color: var(--clr-global-selection-color);
+    --clr-tree-link-text-color: hsl(203, 16%, 72%);
+    --clr-tree-node-caret-color: hsl(203, 16%, 72%);
+    // END Tree View variables
+
+    /**********
+    * Typography
+    */
+    --clr-global-font-color: var(--color-text-100);
+    --clr-global-font-color-secondary: var(--color-text-100);
+
+    --clr-h1-color: var(--clr-global-font-color);
+    --clr-h2-color: var(--clr-global-font-color);
+    --clr-h3-color: var(--clr-global-font-color);
+    --clr-h4-color: var(--clr-global-font-color);
+    --clr-h5-color: var(--clr-global-font-color);
+    --clr-h6-color: var(--clr-global-font-color-secondary);
+
+    --clr-p1-color: var(--clr-global-font-color-secondary);
+    --clr-p2-color: var(--clr-global-font-color-secondary);
+    --clr-p3-color: var(--clr-global-font-color-secondary);
+    --clr-p4-color: var(--clr-global-font-color);
+    --clr-p5-color: var(--clr-global-font-color);
+    --clr-p6-color: var(--clr-global-font-color);
+    --clr-p7-color: var(--clr-global-font-color);
+    --clr-p8-color: var(--clr-global-font-color);
+
+    // ACCORDION
+    --clr-accordion-text-color: var(--clr-color-neutral-0);
+    --clr-accordion-active-background-color: var(--clr-global-selection-color);
+    --clr-accordion-header-hover-background-color: var(--clr-global-selection-color);
+    --clr-accordion-content-background-color: hsl(198, 28%, 18%);
+    --clr-accordion-header-background-color: hsl(201, 30%, 15%);
+    --clr-accordion-border-left-color: hsl(202, 30%, 24%);
+    --clr-accordion-border-color: hsl(208, 16%, 34%);
+    // END: ACCORDION
+
+    --clr-list-item-color: var(--color-text-100);
+
+
+    clr-icon {
+        &.is-green,
+        &.is-success {
+            fill: var(--clr-icon-color-success);
+        }
+        &.is-red,
+        &.is-danger,
+        &.is-error {
+            fill: var(--clr-icon-color-error);
+        }
+        &.is-warning {
+            fill: var(--clr-icon-color-warning);
+        }
+        &.is-blue,
+        &.is-info {
+            fill: var(--clr-icon-color-info);
+        }
+        &.is-white,
+        &.is-inverse {
+            fill: var(--clr-icon-color-inverse);
+        }
+        &.is-highlight {
+            fill: var(--clr-icon-color-highlight);
+        }
+    }
+
+}