@datarobot/design-system 30.8.0 → 30.10.0

package/styles/scoped/themes/midnight-gray.css

@@ -0,0 +1,1082 @@
+/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].use[2]!../../webpack/plugins/append-css-variables.js??ruleSet[1].rules[7].use[3]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[7].use[4]!./src/styles/theme-configs/midnight-gray.less ***!
+  \******************************************************************************************************************************************************************************************************************************************************************************************************************************/
+[data-ds] { --ds-midnight-gray-100: #111519;--ds-midnight-gray-90: #181D21;--ds-midnight-gray-80: #1D2226;--ds-midnight-gray-70: #22272B;--ds-midnight-gray-60: #2A3036;--ds-midnight-gray-55: #30373D;--ds-midnight-gray-50: #3E454D;--ds-midnight-gray-40: #727B84;--ds-midnight-gray-30: #8F97A1;--ds-midnight-gray-20: #B7BFC7;--ds-midnight-gray-10: #E8EBED;--ds-midnight-gray-0: #FFFFFF;--ds-midnight-azure-50: #26A9F4;--ds-midnight-azure-40: #42C0FC;--ds-midnight-azure-30: #7DD3FD;--ds-midnight-red-90: #722222;--ds-midnight-red-80: #9A3131;--ds-midnight-red-70: #C24141;--ds-midnight-red-60: #E85656;--ds-midnight-red-50: #ED7171;--ds-midnight-red-40: #F79797;--ds-midnight-red-30: #F6B2B1;--ds-midnight-red-20: #FAD3D2;--ds-midnight-red-10: #FFE6E5;--ds-midnight-red-0: #FFF2F2;--ds-midnight-yellow-90: #613A00;--ds-midnight-yellow-80: #7E5400;--ds-midnight-yellow-70: #966900;--ds-midnight-yellow-60: #B68D00;--ds-midnight-yellow-50: #CEB31C;--ds-midnight-yellow-40: #E5D74C;--ds-midnight-yellow-30: #FBFB7C;--ds-midnight-yellow-20: #FEFDB1;--ds-midnight-yellow-10: #FFF8D4;--ds-midnight-yellow-0: #FFFDF2;--ds-midnight-green-90: #004D33;--ds-midnight-green-80: #016B3E;--ds-midnight-green-70: #008A48;--ds-midnight-green-60: #00A854;--ds-midnight-green-50: #2BC46F;--ds-midnight-green-40: #56DF8A;--ds-midnight-green-30: #81FBA5;--ds-midnight-green-20: #B9FDCD;--ds-midnight-green-10: #D4FFDA;--ds-midnight-green-0: #F2FFF4;--ds-midnight-blue-50: #6494F6;--ds-midnight-blue-40: #87ADF8;--ds-midnight-blue-30: #ABC5FA;--ds-midnight-purple-100: #220F66;--ds-midnight-purple-90: #352099;--ds-midnight-purple-80: #4830CB;--ds-midnight-purple-70: #5C41FF;--ds-midnight-purple-60: #7770F9;--ds-midnight-purple-50: #909BF5;--ds-midnight-purple-40: #A7B0F7;--ds-midnight-purple-30: #BFC6FA;--ds-midnight-purple-20: #D6DBFC;--ds-midnight-purple-10: #EDF1FF;--ds-midnight-purple-0: #F6F8FE;--ds-midnight-pink-50: #E865D0;--ds-midnight-pink-40: #E98AD6;--ds-midnight-pink-30: #EAAFDC;--ds-midnight-orange-50: #E98C3B;--ds-midnight-orange-40: #EDA769;--ds-midnight-orange-30: #F4C196;--ds-midnight-apple-50: #83BA2E;--ds-midnight-apple-40: #9BD555;--ds-midnight-apple-30: #2C4C01;--ds-midnight-turquoise-50: #30AAB2;--ds-midnight-turquoise-40: #61BFC5;--ds-midnight-turquoise-30: #91D4D9; }[data-ds][data-theme='midnight-gray'] {
+  /*#region Common */
+  --text-primary: #E8EBED;
+  --text-secondary: #B7BFC7;
+  --text-uppercased: #B7BFC7;
+  --focus-outline-color: #E8EBED;
+  --subtext-font-size: 0.875rem;
+  --subtext-line-height: 1.25rem;
+  --action-success-text: #56DF8A;
+  --action-failure-text: #F79797;
+  --action-warning-text: #E5D74C;
+  --action-success-visual: #56DF8A;
+  --action-failure-visual: #ED7171;
+  --action-warning-visual: #E5D74C;
+  /*#endregion */
+  --accent-primary: #909BF5;
+  --accent-secondary: #A7B0F7;
+  --page-background-color: #181D21;
+  --modal-background-color: #181D21;
+  --base-border-color: #2A3036;
+  --link-color: #26A9F4;
+  --link-hovered-color: #42C0FC;
+  --link-disabled-color: #8F97A1;
+  --link-font-weight: 400;
+  --muted-link-color: #E8EBED;
+  --muted-link-hovered-color: #42C0FC;
+  --muted-link-disabled-color: #8F97A1;
+  /*#endregion */
+  /*#region ActionBar component */
+  --action-bar-search-container-height: 1.25rem;
+  --action-bar-tray-bg: #2A3036;
+  --action-bar-search-icon-color: #FFFFFF;
+  --action-bar-search-font-weight: 700;
+  --action-bar-search-active-border-bottom: #909BF5;
+  --action-bar-search-line-height: 1.25rem;
+  --action-bar-search-base-padding: 0px;
+  --action-bar-search-input-bottom-padding: 0px;
+  --action-bar-search-input-font-weight: 400;
+  --action-bar-search-width: 100%;
+  --action-bar-remove-icon-right: 0px;
+  --action-bar-active-color: var(--button-command-color-highlighted);
+  --action-bar-height: 2.25rem;
+  --action-bar-padding: 1rem;
+  --action-bar-items-offset: 1rem;
+  --action-bar-border-radius: 0.375rem;
+  /*#endregion */
+  /*#region Alert component */
+  --var-alert-padding: 1rem 1rem 0.5rem;
+  --var-alert-text-color: var(--text-secondary);
+  --var-alert-text-size: 0.75rem;
+  --var-alert-text-line-height: 1rem;
+  --var-alert-border-radius: 0.375rem;
+  --var-alert-failure-bg: #2A3036;
+  --var-alert-warning-bg: #2A3036;
+  --var-alert-success-bg: #2A3036;
+  --var-alert-info-bg: #2A3036;
+  --var-alert-text-weight: 400;
+  --var-alert-buttons-margin: 1rem;
+  --var-alert-failure-highlight-color: var(--action-failure-visual);
+  --var-alert-warning-highlight-color: var(--action-warning-visual);
+  --var-alert-success-highlight-color: var(--action-success-visual);
+  --var-alert-info-highlight-color: #FFFFFF;
+  --var-alert-failure-accent-color: var(--action-failure-visual);
+  --var-alert-info-accent-color: #FFFFFF;
+  --var-alert-warning-accent-color: var(--action-warning-visual);
+  --var-alert-success-accent-color: var(--action-success-visual);
+  --var-alert-failure-button-color: var(--button-command-color);
+  --var-alert-info-button-color: var(--button-command-color);
+  --var-alert-warning-button-color: var(--button-command-color);
+  --var-alert-success-button-color: var(--button-command-color);
+  --var-alert-failure-hover-color: var(--button-command-color-highlighted);
+  --var-alert-info-hover-color: var(--button-command-color-highlighted);
+  --var-alert-warning-hover-color: var(--button-command-color-highlighted);
+  --var-alert-success-hover-color: var(--button-command-color-highlighted);
+  /*#endregion */
+  /*#region Avatar component (avatar.less) */
+  --avatar-icon-initials-color: #E8EBED;
+  --avatar-icon-initials-bg-color: #3E454D;
+  /*#endregion */
+  /*#region Badge component */
+  --badge-border-radius: 0.625rem;
+  --badge-side-padding: 0.5rem;
+  --badge-up-bottom-padding: 0.125rem;
+  --badge-text-transfrom: unset;
+  --badge-font-weight: 400;
+  --badge-letter-spacing: unset;
+  --badge-inline-spacing: 0.5rem;
+  --badge-plain-bg: #8F97A1;
+  --badge-plain-hover-bg: #B7BFC7;
+  --badge-plain-color: #2A3036;
+  --badge-plain-highlighted-color: #2A3036;
+  --badge-plain-border: transparent;
+  --badge-plain-outlined-color: #E8EBED;
+  --badge-plain-outlined-hover-color: #FFFFFF;
+  --badge-success-bg: #2BC46F;
+  --badge-success-hover-bg: #56DF8A;
+  --badge-success-color: #2A3036;
+  --badge-success-highlighted-color: #2A3036;
+  --badge-success-border: transparent;
+  --badge-success-outlined-color: #56DF8A;
+  --badge-success-outlined-hover-color: #56DF8A;
+  --badge-warning-bg: #E5D74C;
+  --badge-warning-hover-bg: #FBFB7C;
+  --badge-warning-color: #2A3036;
+  --badge-warning-highlighted-color: #2A3036;
+  --badge-warning-border: transparent;
+  --badge-warning-outlined-color: #E5D74C;
+  --badge-warning-outlined-hover-color: #FBFB7C;
+  --badge-error-bg: #ED7171;
+  --badge-error-hover-bg: #F79797;
+  --badge-error-color: #2A3036;
+  --badge-error-highlighted-color: #2A3036;
+  --badge-error-border: transparent;
+  --badge-error-outlined-color: #F79797;
+  --badge-error-outlined-hover-color: #F6B2B1;
+  --badge-info-bg: #26A9F4;
+  --badge-info-hover-bg: #42C0FC;
+  --badge-info-color: #2A3036;
+  --badge-info-highlighted-color: #2A3036;
+  --badge-info-border: transparent;
+  --badge-info-outlined-color: #26A9F4;
+  --badge-info-outlined-hover-color: #26A9F4;
+  --badge-dark-bg: #3E454D;
+  --badge-dark-hover-bg: #30373D;
+  --badge-dark-color: #E8EBED;
+  --badge-dark-highlighted-color: #FFFFFF;
+  --badge-dark-border: transparent;
+  --badge-dark-outlined-color: #B7BFC7;
+  --badge-dark-outlined-hover-color: #E8EBED;
+  /* Contextual */
+  --badge-pink-bg: #E865D0;
+  --badge-pink-hover-bg: #E98AD6;
+  --badge-pink-color: #2A3036;
+  --badge-pink-highlighted-color: #2A3036;
+  --badge-pink-border: transparent;
+  --badge-pink-outlined-color: #E98AD6;
+  --badge-pink-outlined-hover-color: #EAAFDC;
+  --badge-turquoise-bg: #30AAB2;
+  --badge-turquoise-hover-bg: #61BFC5;
+  --badge-turquoise-color: #2A3036;
+  --badge-turquoise-highlighted-color: #2A3036;
+  --badge-turquoise-border: transparent;
+  --badge-turquoise-outlined-color: #61BFC5;
+  --badge-turquoise-outlined-hover-color: #91D4D9;
+  --badge-purple-bg: #909BF5;
+  --badge-purple-hover-bg: #A7B0F7;
+  --badge-purple-color: #2A3036;
+  --badge-purple-highlighted-color: #2A3036;
+  --badge-purple-border: transparent;
+  --badge-purple-outlined-color: #909BF5;
+  --badge-purple-outlined-hover-color: #A7B0F7;
+  --badge-blue-bg: #6494F6;
+  --badge-blue-hover-bg: #87ADF8;
+  --badge-blue-color: #2A3036;
+  --badge-blue-highlighted-color: #2A3036;
+  --badge-blue-border: transparent;
+  --badge-blue-outlined-color: #87ADF8;
+  --badge-blue-outlined-hover-color: #ABC5FA;
+  --badge-orange-bg: #EDA769;
+  --badge-orange-hover-bg: #F4C196;
+  --badge-orange-color: #2A3036;
+  --badge-orange-highlighted-color: #2A3036;
+  --badge-orange-border: transparent;
+  --badge-orange-outlined-color: #EDA769;
+  --badge-orange-outlined-hover-color: #F4C196;
+  --badge-apple-bg: #83BA2E;
+  --badge-apple-hover-bg: #9BD555;
+  --badge-apple-color: #2A3036;
+  --badge-apple-highlighted-color: #2A3036;
+  --badge-apple-border: transparent;
+  --badge-apple-outlined-color: #9BD555;
+  --badge-apple-outlined-hover-color: #2C4C01;
+  /* Loading and Disabled states */
+  --badge-disabled-bg: #3E454D;
+  --badge-disabled-color: #B7BFC7;
+  --badge-disabled-border: transparent;
+  --badge-disabled-outlined-color: #8F97A1;
+  --badge-loading-bg: #3E454D;
+  --badge-loading-color: #B7BFC7;
+  --badge-loading-border: transparent;
+  --badge-loading-outlined-color: #8F97A1;
+  /*#endregion */
+  /*#region Button component */
+  --button-primary-highlighted-bg: #A7B0F7;
+  --button-primary-active-bg: #BFC6FA;
+  --button-primary-color: #181D21;
+  --button-disabled-color: #8F97A1;
+  --button-primary-disabled-bg: #3E454D;
+  --button-primary-bg: #FFFFFF;
+  --buttton-attention-bg: #C24141;
+  --button-attention-color: #FFFFFF;
+  --button-attention-highlighted-bg: #9A3131;
+  --button-secondary-color: #E8EBED;
+  --button-secondary-border-color: #B7BFC7;
+  --button-secondary-bg: transparent;
+  --button-secondary-transparent-bg: #181D21;
+  --button-secondary-highlighted-color: #A7B0F7;
+  --button-secondary-highlighted-bg: #30373D;
+  --button-secondary-highlighted-border-color: #A7B0F7;
+  --button-secondary-disabled-bg: transparent;
+  --button-disabled-border-color: #8F97A1;
+  --round-icon-button-hover-bg: #30373D;
+  --round-icon-button-active-bg: #2A3036;
+  --button-icon-highlighted-color: #A7B0F7;
+  --round-icon-button-border-radius: 0.375rem;
+  --round-icon-button-height-default: 2.25rem;
+  --round-icon-button-width-default: 2.25rem;
+  --round-icon-button-height-xs: 1.25rem;
+  --round-icon-button-width-xs: 1.25rem;
+  --round-icon-button-height-sm: 1.25rem;
+  --round-icon-button-width-sm: 1.25rem;
+  --round-icon-button-height-lg: 2.25rem;
+  --round-icon-button-width-lg: 2.25rem;
+  --round-icon-button-font-size-default: 0.875rem;
+  --round-icon-button-font-size-lg: 0.875rem;
+  --round-icon-button-font-size-xs: 0.875rem;
+  --round-icon-button-font-size-sm: 0.875rem;
+  --round-icon-button-color: #E8EBED;
+  --button-command-color: #E8EBED;
+  --button-command-color-highlighted: #A7B0F7;
+  --button-command-color-active: #BFC6FA;
+  --button-border-radius: 0.375rem;
+  --button-font-weight: 600;
+  --button-primary-disabled-border-color: transparent;
+  --button-icon-margin: 0.25rem;
+  --ghost-button-hover-color: #30373D;
+  --ghost-button-active-color: #3E454D;
+  --ghost-button-line-height: 1.25rem;
+  --ghost-button-hover-text-color: var(--text-primary);
+  /*#endregion */
+  /*#region Chat Legend */
+  --chat-message-divider-color: #2A3036;
+  --chat-message-body-editable-content-bg-color: #2A3036;
+  --chat-message-body-editable-content-border-color: #3E454D;
+  --chat-message-body-border-radius: 0.375rem;
+  /*#endregion */
+  /*#region Chart Legend */
+  --chart-legend-item-text-color: #E8EBED;
+  --chart-legend-item-text-hover-color: #FFFFFF;
+  /*#endregion */
+  /*#region Checkbox component */
+  --checkbox-accent: #909BF5;
+  --checkbox-hover-accent: #A7B0F7;
+  --checked-checkbox-img: url("data:image/svg+xml;utf8,<svg width=%2711%27 height=%278%27 viewBox=%270 0 11 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M1 4L4 7L10 1%27 stroke=%27%23111519%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>");
+  --checked-disabled-checkbox-img: url("data:image/svg+xml;utf8,<svg width=%2711%27 height=%278%27 viewBox=%270 0 11 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M1 4L4 7L10 1%27 stroke=%27%23111519%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>");
+  --checkbox-hover-unselected-accent: #A7B0F7;
+  --checkbox-focus-accent: #A7B0F7;
+  --checkbox-focus-unselected-accent: #A7B0F7;
+  --checkbox-inner-color: transparent;
+  --checkbox-outline-color: transparent;
+  --checkbox-focus-shadow-color: transparent;
+  --checkbox-stroke-color: #111519;
+  --checkbox-disabled-stroke-color: #111519;
+  --checkbox-disabled-inner-color: transparent;
+  --checkbox-disabled-label-color: #8F97A1;
+  --checkbox-disabled-color: #8F97A1;
+  --checkbox-disabled-border-color: #8F97A1;
+  --checkbox-border-color: #E8EBED;
+  --checkbox-border-width: 0.0625rem;
+  --checkbox-label-color: #E8EBED;
+  --checkbox-label-color-hovered: #FFFFFF;
+  --checkbox-subtext-color: #B7BFC7;
+  --disabled-checkbox-subtext-color: #8F97A1;
+  --checkbox-line-height: 1.25rem;
+  /*#endregion */
+  /*#region CollapsiblePanel component */
+  --collapsible-panel-border-color: #2A3036;
+  --collapsible-panel-arrow-color: #B7BFC7;
+  --collapsible-panel-text-color: #E8EBED;
+  --collapsible-panel-hover-background: #30373D;
+  --collapsible-panel-section-header-hover-text-color: #A7B0F7;
+  --collapsible-panel-section-header-hover-button-color: #A7B0F7;
+  --collapsible-panel-standalone-background: #22272B;
+  --collapsible-panel-standalone-border-color: #2A3036;
+  --collapsible-panel-standalone-border-radius: 0.375rem;
+  /*#endregion */
+  /*#region CollapsibleSidebar component */
+  --collapsible-sidebar-background: #1D2226;
+  --collapsible-sidebar-border: 0.0625rem solid #2A3036;
+  --collapsible-sidebar-top: 0.75rem;
+  --collapsible-sidebar-button-border-left: 3.125rem;
+  --collapsible-sidebar-button-border-right: 3.125rem;
+  --collapsible-sidebar-button-width: 1.25rem;
+  --collapsible-sidebar-button-height: 1.25rem;
+  --collapsible-sidebar-button-font-size: 0.625rem;
+  --collapsible-sidebar-button-translate-left: 0px;
+  --collapsible-sidebar-button-translate-right: 0px;
+  --collapsible-sidebar-button-left: -0.625rem;
+  --collapsible-sidebar-button-hover-border: 0.125rem solid #A7B0F7;
+  --collapsible-sidebar-button-hover-color: #A7B0F7;
+  --collapsible-sidebar-button-hover: #A7B0F7;
+  --collapsible-sidebar-button-opacity: 1;
+  --collapsible-sidebar-button-pointer-events: auto;
+  --collapsible-sidebar-border-color: #2A3036;
+  --collapsible-sidebar-box-shadow: none;
+  --collapsible-sidebar-border-display: block;
+  --collapsible-sidebar-min-width: 2.75rem;
+  --collapsible-header-font-weight: 700;
+  /*#endregion */
+  /*#region ClosableTabs component */
+  --closable-tabs-text-color: #FFFFFF;
+  --closable-tabs-bg-color: #2A3036;
+  --closable-tabs-tag-bg-color: #3E454D;
+  --closable-tabs-selected-tab-bg-color: #111519;
+  --closable-tabs-content-bg-color: #111519;
+  --closable-tabs-border-radius: 0.375rem 0.375rem 0 0;
+  /*#endregion */
+  /*#region CopyToClipboard component */
+  --copy-to-clipboard-icon-copied-color: #56DF8A;
+  --copy-to-clipboard-text-color: #FFFFFF;
+  --copy-to-clipboard-disabled-color: #8F97A1;
+  /*#endregion */
+  /*#region Counter component */
+  --counter-font-weight: 400;
+  --counter-font-size: 0.75rem;
+  --counter-padding: 0 0.25rem;
+  --counter-plain-background: #B7BFC7;
+  --counter-plain-color: #2A3036;
+  --counter-dark-background: #3E454D;
+  --counter-dark-color: #E8EBED;
+  --counter-info-background: #26A9F4;
+  --counter-info-color: #2A3036;
+  --counter-error-background: #ED7171;
+  --counter-error-color: #2A3036;
+  --counter-warning-background: #E5D74C;
+  --counter-warning-color: #2A3036;
+  --counter-success-background: #2BC46F;
+  --counter-success-color: #2A3036;
+  --counter-pink-background: #E865D0;
+  --counter-pink-color: #2A3036;
+  --counter-turquoise-background: #30AAB2;
+  --counter-turquoise-color: #2A3036;
+  --counter-purple-background: #909BF5;
+  --counter-purple-color: #2A3036;
+  --counter-blue-background: #6494F6;
+  --counter-blue-color: #2A3036;
+  --counter-orange-background: #EDA769;
+  --counter-orange-color: #2A3036;
+  --counter-apple-background: #83BA2E;
+  --counter-apple-color: #2A3036;
+  --counter-plain-outline-color: #E8EBED;
+  --counter-plain-border-color: transparent;
+  --counter-dark-outline-color: #B7BFC7;
+  --counter-dark-border-color: transparent;
+  --counter-info-outline-color: #26A9F4;
+  --counter-info-border-color: transparent;
+  --counter-error-outline-color: #ED7171;
+  --counter-error-border-color: transparent;
+  --counter-warning-outline-color: #E5D74C;
+  --counter-warning-border-color: transparent;
+  --counter-success-outline-color: #2BC46F;
+  --counter-success-border-color: transparent;
+  --counter-pink-outline-color: #E865D0;
+  --counter-pink-border-color: transparent;
+  --counter-turquoise-outline-color: #30AAB2;
+  --counter-turquoise-border-color: transparent;
+  --counter-purple-outline-color: #909BF5;
+  --counter-purple-border-color: transparent;
+  --counter-blue-outline-color: #6494F6;
+  --counter-blue-border-color: transparent;
+  --counter-orange-outline-color: #EDA769;
+  --counter-orange-border-color: transparent;
+  --counter-apple-outline-color: #83BA2E;
+  --counter-apple-border-color: transparent;
+  /*#endregion */
+  /*#region Datetime component */
+  --datetime-picker-background: var(--dropdown-bg);
+  --datetime-picker-hover-background: #30373D;
+  --datetime-picker-selected-date-color: #111519;
+  --datetime-picker-tile-text-color: #E8EBED;
+  --datetime-picker-tile-old-color: #8F97A1;
+  --datetime-picker-selected-hover-bg: #A7B0F7;
+  --datetime-picker-calendar-icon-color: var(--input-icon-color);
+  --datetime-picker-calendar-icon-disabled-color: #3E454D;
+  --datetime-picker-switcher-color: #E8EBED;
+  --datetime-picker-prev-next-color: #E8EBED;
+  --datetime-picker-selected-tile-color: #909BF5;
+  --datetime-picker-tile-border-radius: 0.25rem;
+  --datetime-picker-rdtSwitch-font-weight: 400;
+  /*#endregion */
+  /*#region DateRangePicker component */
+  --datetime-range-picker-dropdown-button-color: #E8EBED;
+  --datetime-range-picker-dropdown-button-hover-color: #A7B0F7;
+  --datetime-range-picker-arrow-icon-color: #8F97A1;
+  --datetime-range-picker-range-bg-color: #3E454D;
+  /*#endregion */
+  /*#region DragNDropList component */
+  --drag-n-drop-list-item-color: #22272B;
+  --drag-n-drop-list-item-drag-handler-color: #8F97A1;
+  --drag-n-drop-list-item-hover-bg: #30373D;
+  --drag-n-drop-list-item-border: 0.0625rem solid #2A3036;
+  --drag-n-drop-list-item-hover-border: 0.0625rem solid #3E454D;
+  --drag-n-drop-list-item-name-weight: 700;
+  --drag-n-drop-list-item-active-border: 0.0625rem solid #7770F9;
+  --drag-n-drop-list-item-error-border: 0.0625rem solid #ED7171;
+  --drag-n-drop-list-item-border-radius: 0.375rem;
+  --drag-n-drop-list-item-height: auto;
+  --drag-n-drop-list-item-padding: 0.5rem 0.75rem;
+  --drag-n-drop-list-item-drag-handler-margin-right: 0.75rem;
+  --drag-n-drop-list-item-dragging-border: 0.0625rem dashed #3E454D;
+  --drag-n-drop-list-item-margin-bottom: 0.5rem;
+  /*#endregion */
+  /*#region Dropdown component */
+  --dropdown-bg: #2A3036;
+  --dropdown-border-color: #3E454D;
+  --dropdown-border-radius: 0.375rem;
+  --dropdown-trigger-color: #E8EBED;
+  --dropdown-selectbox-trigger-color: #E8EBED;
+  --dropdown-trigger-highlighted-color: #909BF5;
+  --dropdown-trigger-round-icon-highlighted-color: var(--button-icon-highlighted-color);
+  --dropdown-trigger-disabled-color: #8F97A1;
+  --dropdown-text-color: #E8EBED;
+  --dropdown-text-highlighted-color: #E8EBED;
+  --dropdown-text-disabled-color: #8F97A1;
+  --dropdown-active-text-color: #E8EBED;
+  --dropdown-active-text-highlighted-color: #E8EBED;
+  --dropdown-active-background-color: #3E454D;
+  --dropdown-highlight-bg: #30373D;
+  --dropdown-highlight-left-border-width: 0.25rem;
+  --dropdown-highlight-left-border-color: #909BF5;
+  --dropdown-box-shadow: 0px 0px 1.5rem -0.1875rem rgba(17, 21, 25, 0.54), 0.625rem 0.625rem 1.625rem 0.1875rem rgba(17, 21, 25, 0.44);
+  --dropdown-selectbox-trigger-border: none;
+  --dropdown-selectbox-trigger-border-error: 0.0625rem solid #ED7171;
+  --dropdown-selectbox-trigger-border-success: 0.0625rem solid #2BC46F;
+  --dropdown-selectbox-trigger-border-warning: 0.0625rem solid #CEB31C;
+  --dropdown-section-title-bottom-border: 0.0625rem solid #3E454D;
+  --dropdown-section-title-margin: 0.5rem 1rem;
+  --dropdown-section-sub-padding: 1.5rem;
+  --dropdown-section-title-font-weight: 400;
+  /*#endregion */
+  /*#region EmptyState */
+  --empty-state-title-margin: 1rem;
+  --empty-state-title-weight: 700;
+  --empty-state-title-font-size: 1rem;
+  --empty-state-title-line-height: 1.25rem;
+  --empty-state-description-margin: 0.25rem;
+  --empty-state-description-weight: 400;
+  --empty-state-description-font-size: 0.75rem;
+  --empty-state-description-line-height: 1rem;
+  --empty-state-button-margin: 1rem;
+  /*#endregion */
+  /*#region File tree */
+  --file-tree-active-item-color: #E8EBED;
+  --file-tree-inactive-item-color: #B7BFC7;
+  --file-tree-disabled-item-color: #8F97A1;
+  --file-tree-item-height: 2.25rem;
+  --file-tree-item-border-color: #3E454D;
+  /*#endregion */
+  /*#region FileUploader component */
+  --file-uploader-border-color: #8F97A1;
+  --file-uploader-border-hover-color: #B7BFC7;
+  --file-uploader-border-width: 0.0625rem;
+  --file-uploader-icon-color: #8F97A1;
+  --file-uploader-on-drag-background: #2A3036;
+  --file-uploader-on-drag-border-color: #909BF5;
+  --file-uploader-cloud-icon-color: #B7BFC7;
+  --file-uploader-border-color-error: #ED7171;
+  --file-uploader-disabled-border-color: #8F97A1;
+  --file-uploader-disabled-color: #8F97A1;
+  --file-uploader-input-background-color: transparent;
+  --file-uploader-input-hover-background: #30373D;
+  --file-uploader-description-color: #8F97A1;
+  --file-uploader-description-hover-color: #B7BFC7;
+  --file-uploader-single-name-font-weight: 400;
+  --file-uploader-cloud-icon-display: none;
+  --file-uploader-accepted-formats-text-color: #8F97A1;
+  --file-uploader-expanded-has-file-background: #2A3036;
+  --file-uploader-expanded-has-file-border: 0.0625rem solid #3E454D;
+  --file-uploader-label-color: #E8EBED;
+  --file-uploader-border-radius: 0.375rem;
+  /*#endregion */
+  /*#region files-upload-area component */
+  --files-upload-area-overlay-bg: rgba(42, 48, 54, 0.8);
+  --files-upload-area-overlay-border-color: #909BF5;
+  /*#endregion */
+  /*#region FloatingPanel component */
+  --floating-panel-resizer-width: 0.75rem;
+  --floating-panel-bg: #1D2226;
+  --floating-panel-border-color: #3E454D;
+  --floating-panel-border-radius: 0.5rem;
+  --floating-panel-border-shadow: 0 0 1.125rem -0.25rem rgba(17, 21, 25, 0.5), 0.5rem 0.5rem 1.25rem 0.125rem rgba(17, 21, 25, 0.4);
+  --floating-panel-drag-handle-color: #8F97A1;
+  --floating-panel-docked-width: 23.75rem;
+  --floating-panel-header-bg: #2A3036;
+  --floating-panel-header-color: var(--text-primary);
+  --floating-panel-dock-highlight-color: var(--accent-secondary);
+  /*#endregion */
+  /*#region FormField component */
+  --active-box-shadow-thickness: 0.0625rem;
+  --focused-input-password-toggle-hover-color: #30373D;
+  --form-field-margin-top: 1rem;
+  /*#endregion */
+  /*#region Full Screen Drawer */
+  --full-screen-drawer-bg: #181D21;
+  --full-screen-drawer-header-bg: #22272B;
+  --full-screen-drawer-header-border: #2A3036;
+  --full-screen-drawer-disabled-header-bg: #1D2226;
+  /*#endregion */
+  /*#region GranularProgressBar component */
+  --granular-progress-bar-item-bg: #3E454D;
+  --granular-progress-bar-item-active-bg: #909BF5;
+  /*#endregion */
+  /*#region Icon Sidebar  component */
+  --icon-sidebar-background: #1D2226;
+  --icon-sidebar-border: #2A3036;
+  --icon-sidebar-icon-color: #B7BFC7;
+  --icon-sidebar-text-color: #B7BFC7;
+  --icon-sidebar-icon-hover-color: #E8EBED;
+  --icon-sidebar-text-hover-color: #B7BFC7;
+  --icon-sidebar-icon-container-hover-color: #30373D;
+  --icon-sidebar-icon-selected-color: #FFFFFF;
+  --icon-sidebar-text-selected-color: #E8EBED;
+  --icon-sidebar-icon-container-selected-color: #3E454D;
+  --icon-sidebar-icon-disabled-color: #8F97A1;
+  --icon-sidebar-text-disabled-color: #8F97A1;
+  --icon-sidebar-divider-background: #3E454D;
+  /*#endregion */
+  /*#region Inline Edit  component */
+  --inline-edit-no-text-color: #8F97A1;
+  --inline-edit-hover-text-container-color: #22272B;
+  --inline-edit-hover-text-container-border-color: #3E454D;
+  --inline-edit-button-size: 1.25rem;
+  --inline-edit-button-icon-size: 0.625rem;
+  --inline-edit-border-radius: 0.375rem;
+  /*#endregion */
+  /*#region Input component */
+  --input-bg: #2A3036;
+  --input-bg-hovered: #2A3036;
+  --input-bg-disabled: #2A3036;
+  --input-bg-focused: #2A3036;
+  --input-bg-focused-autofill: #3E454D;
+  --input-color: var(--text-primary);
+  --input-color-focused: var(--text-primary);
+  --input-icon-color: #B7BFC7;
+  --input-icon-color-focused: #B7BFC7;
+  --input-focused-border-color: #909BF5;
+  --input-placeholder-color: #8F97A1;
+  --input-placeholder-color-hovered: #B7BFC7;
+  --input-placeholder-color-focused: #8F97A1;
+  --input-disabled-color: #8F97A1;
+  --input-disabled-label-color: #8F97A1;
+  --input-disabled-border-color: #3E454D;
+  --input-hovered-border-color: #727B84;
+  --input-border-color: #3E454D;
+  --input-label-weight: 400;
+  --input-border-width: 0.0625rem;
+  --input-border-boxshadow: inset 0 0 0 0.0625rem var(--input-border-color);
+  --input-focused-boxshadow: inset 0 0 0 var(--input-border-width) var(--input-focused-border-color);
+  --input-failure-shadow-color: transparent;
+  --input-success-shadow-color: transparent;
+  --input-warning-shadow-color: transparent;
+  --input-failure-color: var(--action-failure-visual);
+  --input-warning-color: var(--action-warning-visual);
+  --input-success-color: var(--action-success-visual);
+  --input-border-radius: 0.375rem;
+  --input-label-color: #E8EBED;
+  --input-readonly-label-color: #B7BFC7;
+  --input-subtext-margin-bottom: 0.25rem;
+  /*#endregion */
+  /*#region CustomCard component */
+  --custom-card-content-border-color: #3E454D;
+  --custom-card-background: #22272B;
+  --custom-card-border-color: transparent;
+  --custom-card-box-shadow: none;
+  --custom-card-icon-hover-background: transparent;
+  --custom-card-hover-background: #30373D;
+  --custom-card-hover-border-color: #3E454D;
+  --custom-card-disabled-background: #22272B;
+  --custom-card-disabled-color: #8F97A1;
+  --custom-card-selected-color: #909BF5;
+  --custom-card-selected-background-color: #2A3036;
+  --custom-card-hover-box-shadow: 0px 0px 1.5rem -0.1875rem rgba(17, 21, 25, 0.54), 0.625rem 0.625rem 1.625rem 0.1875rem rgba(17, 21, 25, 0.44);
+  --custom-card-icon-color: #E8EBED;
+  --custom-card-icon-hover-color: #A7B0F7;
+  --custom-card-icon-disabled-color: #8F97A1;
+  --custom-card-top-line-blue-color: #A7B0F7;
+  --custom-card-top-line-orange-color: #E98C3B;
+  --custom-card-top-line-green-color: #56DF8A;
+  --custom-card-top-line-red-color: #F6B2B1;
+  --custom-card-border-radius: 0.375rem;
+  /*#endregion */
+  /*#region ListCard component */
+  --list-card-border-radius: 0.375rem;
+  --list-card-bg: #2A3036;
+  --list-card-icon-bg: #3E454D;
+  --list-card-glyph-color: #E8EBED;
+  --list-card-highlighted-bg: #30373D;
+  --list-card-icon-highlighted-bg: #3E454D;
+  --list-card-disabled-bg: #22272B;
+  --list-card-icon-disabled-bg: #2A3036;
+  --list-card-icon-disabled-color: #8F97A1;
+  --list-card-chevron-color: var(--text-primary);
+  --list-card-chevron-disabled-color: #8F97A1;
+  --list-card-chevron-hover-color: var(--text-primary);
+  --list-card-disabled-text: #8F97A1;
+  --list-card-border: #3E454D;
+  --list-card-active-header-font-weight: 400;
+  --list-card-highlighted-border: #727B84;
+  --list-card-error-color: #ED7171;
+  --list-card-skeleton-bg: #3E454D;
+  --list-card-skeleton-highlighted-bg: #727B84;
+  --list-card-disabled-button-text: #8F97A1;
+  --list-card-hover-details-text: #B7BFC7;
+  --list-card-glyph-top-padding: 0.75rem;
+  --list-card-glyph-side-padding: 0.5rem;
+  --list-card-active-shadow: unset;
+  --list-card-active-header: #E8EBED;
+  /*#endregion */
+  /*#region LoadingBackdrop */
+  --loading-backdrop-bg: #111519;
+  /*#endregion */
+  /*#region Markdown component */
+  --markdown-border-color: #E8EBED;
+  /*#endregion */
+  /*#region Message component */
+  --message-text-color: var(--text-primary);
+  --message-font-weight: 400;
+  --message-color-success: var(--action-success-text);
+  --message-color-failure: var(--action-failure-text);
+  --message-color-warning: var(--action-warning-text);
+  --message-color-info: #E8EBED;
+  --message-color-in-progress: #B7BFC7;
+  --message-color-expired: #B7BFC7;
+  --message-color-disabled: #B7BFC7;
+  --message-color-thinking: #B7BFC7;
+  /*#endregion */
+  /*#region Modal */
+  --modal-backdrop-bg: rgba(0, 0, 0, 0.8);
+  --modal-border-color: var(--base-border-color);
+  --modal-box-shadow: none;
+  --modal-min-height: 13.75rem;
+  --modal-width: 31.25rem;
+  --modal-padding: 1rem;
+  --modal-header-padding: 0 0 0.5rem 0;
+  --modal-footer-padding: 0.5rem 0 0 0;
+  --modal-header-title-margin: 0;
+  --modal-header-title-font-size: 1.25rem;
+  --modal-header-title-font-weight: 700;
+  --modal-header-title-font-line-height: 1.5rem;
+  --modal-body-padding: 1rem 0 1.5rem 0;
+  --modal-footer-buttons-alignment: flex-end;
+  --modal-footer-confirm-button-order: 1;
+  --modal-content-border-radius: 0.5rem;
+  /*#endregion */
+  /*#region MultiSelectTypeahead component */
+  --multi-select-outline-width: 0.0625rem;
+  --multi-select-font-size: 0.75rem;
+  --multi-select-label-bg: #3E454D;
+  --multi-select-label-radius: 0.375rem;
+  --multi-select-label-hover-bg: #727B84;
+  --multi-select-label-hover-color: #FFFFFF;
+  --multi-select-label-focused-bg: #3E454D;
+  --multi-select-label-disabled-bg: #3E454D;
+  --multi-select-label-error-color: var(--action-failure-text);
+  --input-color-disabled: #B7BFC7;
+  --multi-select-button-hover-color: #FFFFFF;
+  --multi-select-clear-all-button-color: #B7BFC7;
+  --multi-select-clear-all-button-active-color: #FFFFFF;
+  --multi-select-hover-box-shadow: unset;
+  --multi-select-hover-border-color: var(--input-hovered-border-color);
+  --multi-select-no-item-text-color: #B7BFC7;
+  --multi-select-checkbox-select-all-border: #3E454D;
+  /*#endregion */
+  /*#region Notification */
+  --notification-toast-popup-align: start;
+  --notification-toast-container-flex-direction: column-reverse;
+  --notification-toast-container-top-position: unset;
+  --notification-toast-container-bottom-position: 0.75rem;
+  --notifications-toast-bg: #2A3036;
+  --notification-toast-border-color: transparent;
+  --notification-toast-border-radius: 0.375rem;
+  --notification-toast-border: none;
+  --notification-toast-padding: 0.25rem 0;
+  --notification-toast-box-shadow: none;
+  --notification-toast-left-border-width: 0.25rem;
+  --notification-toast-left-border-style: solid;
+  --notification-toast-icon-height: 1.375rem;
+  --notification-toast-icon-alignment: unset;
+  --notification-toast-icon-margin: 0.75rem;
+  --notification-toast-failure-icon-bg: transparent;
+  --notification-toast-failure-icon-color: var(--action-failure-visual);
+  --notification-toast-success-icon-bg: transparent;
+  --notification-toast-success-icon-color: var(--action-success-visual);
+  --notification-toast-warning-icon-bg: transparent;
+  --notification-toast-warning-icon-color: var(--action-warning-visual);
+  --notification-toast-info-icon-bg: transparent;
+  --notification-toast-info-icon-color: #FFFFFF;
+  --notification-toast-content-align: flex-start;
+  --notification-toast-action-padding: 0.25rem;
+  --notification-toast-action-margin-top: 0.5rem;
+  /*#endregion */
+  /*#region PaginationNew component */
+  --pagination-summary-color: #B7BFC7;
+  /*#endregion */
+  /*#region Pill component */
+  --pill-bg: #3E454D;
+  --pill-color: #E8EBED;
+  --pill-color-hover: #B7BFC7;
+  --pill-active: #A7B0F7;
+  --pill-active-hover: #909BF5;
+  /*#endregion */
+  /*#region ProgressBar component */
+  --progress-height: 0.25rem;
+  --progress-border-color: #3E454D;
+  --progress-default-color: #909BF5;
+  --progress-success-color: var(--action-success-visual);
+  --progress-warning-color: var(--action-warning-visual);
+  --progress-failure-color: var(--action-failure-visual);
+  /*#endregion */
+  /*#region RadioButton component */
+  --radio-circle-size: 1rem;
+  --radio-circle-size-large: 0.875rem;
+  --radio-circle-thickness: 0.0625rem;
+  --radio-dot-size: 0.375rem;
+  --radio-dot-offset: 0.125rem;
+  --radio-circle-line-height: 1.25rem;
+  --radio-circle-color: #E8EBED;
+  --radio-circle-hover-color: #A7B0F7;
+  --radio-label-padding-left: 1.5rem;
+  --radio-label-color: #E8EBED;
+  --radio-label-hover-color: #FFFFFF;
+  --radio-dot-color: #909BF5;
+  --radio-dot-hover-color: #A7B0F7;
+  --radio-checked-circle-color: #909BF5;
+  --radio-checked-circle-focus-color: #A7B0F7;
+  --radio-checked-circle-hover-color: #A7B0F7;
+  --radio-disabled-dot-color: #8F97A1;
+  --radio-disabled-circle-color: #8F97A1;
+  --radio-disabled-label-color: #8F97A1;
+  --radio-disabled-checked-circle-color: #8F97A1;
+  --radio-group-label-font-size: 0.875rem;
+  --radio-group-label-font-weight: 400;
+  --radio-group-label-line-height: 1.25rem;
+  /*#endregion */
+  /*#region RangeSlider component */
+  --range-slider-bg: #3E454D;
+  --range-slider-bg-color: #909BF5;
+  --range-slider-bg-color-active: #A7B0F7;
+  --range-slider-thumb-bg: #FFFFFF;
+  --range-slider-handle-border-color: transparent;
+  --range-slider-active-path-disabled-bg: #727B84;
+  --range-slider-thumb-active: unset;
+  --range-slider-thumb-focus: unset;
+  --range-slider-thumb-bg-active: #FFFFFF;
+  --range-slider-thumb-bg-lg: #FFFFFF;
+  --range-slider-thumb-bg-lg-active: #FFFFFF;
+  --range-slider-thumb-bg-xl: #FFFFFF;
+  --range-slider-thumb-bg-xl-active: #FFFFFF;
+  --range-slider-thumb-disabled-bg: #B7BFC7;
+  --range-slider-thumb-disabled-bg-active: #B7BFC7;
+  --range-slider-thumb-disabled-border: transparent;
+  --range-slider-thumb-disabled-bg-lg: #B7BFC7;
+  --range-slider-thumb-disabled-bg-xl: #B7BFC7;
+  --range-slider-thumb-disabled-bg-active-lg: #B7BFC7;
+  --range-slider-thumb-disabled-bg-active-xl: #B7BFC7;
+  --range-slider-handle-diameter-active: 1rem;
+  --range-slider-handle-diameter-large-active: 1.5rem;
+  --range-slider-handle-diameter-extra-large-active: 2rem;
+  /*#endregion */
+  /*#region Selectable tiles component */
+  --selectable-tiles-item-text-color: #E8EBED;
+  --selectable-tiles-item-bg: #22272B;
+  --selectable-tiles-item-border-radius: 0.375rem;
+  --selectable-tiles-item-border: 0.0625rem solid #3E454D;
+  --selectable-tiles-item-hover-bg: #30373D;
+  --selectable-tiles-item-hover-border: 0.0625rem solid #3E454D;
+  --selectable-tiles-item-selected-text-color: inherit;
+  --selectable-tiles-item-selected: #2A3036;
+  --selectable-tiles-item-selected-hover: #30373D;
+  --selected-tiles-item-selected-border: 0.0625rem solid #909BF5;
+  --selected-tiles-item-disabled-border: 0.0625rem solid #3E454D;
+  --selected-tiles-item-selected-disabled-border: 0.0625rem solid #909BF5;
+  --selectable-tiles-item-selected-disabled-bg: #2A3036;
+  --selectable-tiles-item-disabled-bg: #22272B;
+  --selectable-tiles-item-disabled-text-color: #8F97A1;
+  --selectable-tiles-item-selected-disabled-text-color: #8F97A1;
+  --selectable-tiles-item-label-with-image-flex-jc: center;
+  --selectable-tiles-item-padding-md: 0.75rem 1rem;
+  --selectable-tiles-item-padding-sm: 0.25rem 0.5rem;
+  /*#endregion */
+  /*#region SidebarMenu component */
+  --sidebar-active-title-color: #E8EBED;
+  --sidebar-submenu-font-weight: 400;
+  --sidebar-submenu-color: #E8EBED;
+  --sidebar-submenu-color-disabled: #8F97A1;
+  --sidebar-menu-active-item-hover-bg: #2A3036;
+  --sidebar-menu-item-hover-bg: #30373D;
+  --sidebar-sebmenu-link-max-width: unset;
+  --sidebar-sebmenu-link-padding: 0.25rem 0.25rem 0.25rem 0.75rem;
+  --sidebar-menu-max-width: 15rem;
+  --sidebar-value-color: #8F97A1;
+  --sidebar-submenu-error-color: #ED7171;
+  --sidebar-submenu-error-hover-color: #ED7171;
+  --sidebar-manu-active-border-color: #909BF5;
+  --sidebar-menu-item-wrapper-margin: 0.5rem;
+  --sidebar-menu-item-last-child-margin: 0;
+  --sidebar-menu-item-cancel-btn-bg: #181D21;
+  --sidebar-menu-item-active-border-radius: 0px 0.375rem 0.375rem 0px;
+  --sidebar-menu-item-active-border-width: 0.125rem;
+  --sidebar-submenu-helper-color: var(--text-secondary);
+  /*#endregion */
+  /*#region Splitter component */
+  --splitter-bg: #2A3036;
+  /*#endregion */
+  /*#region Stepper */
+  --stepper-item-icon-color: #B7BFC7;
+  --stepper-item-active-icon-color: #181D21;
+  --stepper-item-visited-icon-color: #FFFFFF;
+  --stepper-item-completed-icon-color: #56DF8A;
+  --stepper-item-icon-color-hovered: #E8EBED;
+  --stepper-item-icon-bg-color: #3E454D;
+  --stepper-item-active-icon-bg-color: #909BF5;
+  --stepper-item-completed-icon-bg-color: #3E454D;
+  --stepper-item-visited-icon-bg-color: #7770F9;
+  --stepper-item-icon-bg-color-hovered: #727B84;
+  --stepper-item-active-icon-bg-color-hovered: #A7B0F7;
+  --stepper-item-completed-icon-bg-color-hovered: #727B84;
+  --stepper-item-visited-icon-bg-color-hovered: #5C41FF;
+  --stepper-item-rect-bg: #3E454D;
+  --stepper-label-font-size: 0.875rem;
+  --stepper-label-font-weight: 700;
+  --stepper-label-line-height: 1.25rem;
+  --stepper-label-color: #E8EBED;
+  --stepper-label-color-hovered: #FFFFFF;
+  --stepper-helper-text-font-size: 0.75rem;
+  --stepper-helper-text-font-weight: 400;
+  --stepper-helper-text-line-height: 1rem;
+  --stepper-helper-text-color: #B7BFC7;
+  --stepper-color-disabled: #8F97A1;
+  --stepper-item-icon-bg-color-disabled: #3E454D;
+  --stepper-item-icon-bg-color-errored: #E8EBED;
+  --stepper-item-icon-color-errored: #E85656;
+  --stepper-helper-text-color-errored: #ED7171;
+  /*#endregion */
+  /*#region VerticalTimeline */
+  --vertical-timeline-connector-line-color: #3E454D;
+  --vertical-timeline-circle-color: #727B84;
+  --vertical-timeline-selected-circle-color: #E8EBED;
+  --vertical-timeline-disabled-border-color: #3E454D;
+  --vertical-timeline-disabled-font-color: #8F97A1;
+  --vertical-timeline-icon-color: #E8EBED;
+  --vertical-timeline-hover-bg: #30373D;
+  --vertical-timeline-selected-bg: #2A3036;
+  --vertical-timeline-selected-border: #2A3036;
+  --vertical-timeline-circle-size: 0.5rem;
+  --vertical-timeline-iconed-circle-size: 1.5rem;
+  --vertical-timeline-icon-font-size: 0.625rem;
+  --vertical-timeline-connector-line-width: 0.0625rem;
+  --vertical-timeline-circled-title-line-height: 1.25rem;
+  /*#endregion */
+  /*#region Sub navigation component */
+  --sub-header-active-color: #A7B0F7;
+  --sub-header-active-hover-color: #A7B0F7;
+  --sub-header-hover-color: #ffffff;
+  --sub-header-underline-color: #3E454D;
+  --sub-header-item-disabled-color: #8F97A1;
+  --sub-header-item: #B7BFC7;
+  --sub-header-tab-active-border-color: #909BF5;
+  --sub-header-tab-hover-border-color: #3E454D;
+  --subnavigation-ghost-color: #B7BFC7;
+  --subnavigation-ghost-active-color: var(--button-secondary-color);
+  --subnavigation-ghost-active-bg-color: var(--ghost-button-active-color);
+  --subnavigation-ghost-hover-bg-color: var(--ghost-button-active-color);
+  /*#endregion */
+  /*#region Skeleton component */
+  --skeleton-background: #2A3036;
+  --skeleton-animation-background: #3E454D;
+  /*#endregion */
+  /*#region Table component */
+  --table-color: #B7BFC7;
+  --simple-table-sublevel-header-color: #B7BFC7;
+  --simple-table-sublevel-background-color: transparent;
+  --table-header-color: #B7BFC7;
+  --table-cell-padding: 0.75rem 0.5rem;
+  --sublevel-table-color: var(--text-primary);
+  --sublevel-table-header-color: #B7BFC7;
+  --sublevel-table-row-font-weight: 400;
+  --sublevel-table-header-line-height: 1.25rem;
+  --table-header-bg: #181D21;
+  --table-header-justify-content: space-between;
+  --table-header-th-border-right: 0.5rem;
+  --table-header-th-right-border-display: block;
+  --table-row-odd-bg: #1D2226;
+  --table-row-even-bg: #181D21;
+  --table-row-hover-bg: #30373D;
+  --table-active-row-bg: #2A3036;
+  --table-row-highlight-bg: #3E454D;
+  --table-row-highlight-color: #E8EBED;
+  --table-row-highlight-primary-color: #FFFFFF;
+  --table-header-border-color: var(--base-border-color);
+  --table-body-border-color: transparent;
+  --sortable-table-column-hover: var(--text-primary);
+  --sublevel-table-body-border-color: var(--base-border-color);
+  --table-active-item-color: #909BF5;
+  --table-selected-item-color: var(--text-primary);
+  --table-active-item-left-border-color: #909BF5;
+  --table-disabled-text-color: #8F97A1;
+  --table-row-highlighted-text: #909BF5;
+  --table-selected-item-bg-color: #2A3036;
+  --table-checkbox-column-flex-grow: 0;
+  /*#endregion */
+  /*#region React-Table component */
+  --react-table-s-row-height: 1.75rem;
+  --react-table-m-row-height: 3rem;
+  --react-table-l-row-height: 4.25rem;
+  --react-table-flexible-row-height: 3.75rem;
+  --react-table-nested-header-height: 2.25rem;
+  --react-table-flexible-top-bottom-padding: 0.75rem;
+  --react-table-nested-top-bottom-padding: 0.5rem;
+  --react-table-top-bottom-padding: 0.25rem;
+  --react-table-row-border: #2A3036;
+  --react-table-cell-background: #181D21;
+  --react-table-pinned-border-color: #2A3036;
+  --react-table-pinned-border-box-shadow: 0.0625rem 0px 0px 0px rgba(17, 21, 25, 0.02), 0.1875rem 0px 0px 0px rgba(17, 21, 25, 0.04), 0.3125rem 0px 0px 0px rgba(17, 21, 25, 0.06), 0.4375rem 0px 0px 0px rgba(17, 21, 25, 0.08), 0.5625rem 0px 0px 0px rgba(17, 21, 25, 0.1), 0.6875rem 0px 0px 0px rgba(17, 21, 25, 0.12);
+  --react-table-actions-column-border: -0.0625rem 0px 0px 0px rgba(17, 21, 25, 0.02), -0.1875rem 0px 0px 0px rgba(17, 21, 25, 0.04), -0.3125rem 0px 0px 0px rgba(17, 21, 25, 0.06), -0.4375rem 0px 0px 0px rgba(17, 21, 25, 0.08), -0.5625rem 0px 0px 0px rgba(17, 21, 25, 0.1), -0.6875rem 0px 0px 0px rgba(17, 21, 25, 0.12);
+  --react-table-header-text-color: #B7BFC7;
+  --react-table-header-hover-text-color: #E8EBED;
+  --react-table-header-border: #2A3036;
+  --react-table-header-border-color: var(--base-border-color);
+  --react-table-header-hover-border-color: #A7B0F7;
+  --react-table-header-cell-menu-item-padding: 0.25rem 1rem;
+  --react-table-hover-color: #30373D;
+  --react-table-selected-color: #2A3036;
+  --react-table-selected-border: #3E454D;
+  --react-table-selected-border-color: #909BF5;
+  --react-table-sort-icon-color: #909BF5;
+  --react-table-footer-background: #181D21;
+  --react-table-footer-border: 0.0625rem solid #2A3036;
+  --react-table-footer-bottom-border: var(--react-table-footer-border);
+  --react-table-footer-side-border: unset;
+  --react-table-not-active-setting-color: #8F97A1;
+  --react-table-settings-group-border-color: #3E454D;
+  --react-table-settings-drag-handler-color: #3E454D;
+  --react-table-settings-drag-handler-hover-color: #8F97A1;
+  --react-table-container-border: transparent;
+  --react-table-container-background: #181D21;
+  --react-table-expanded-background: #1D2226;
+  --react-table-expanded-container-shadow: 0 0.75rem 2rem -0.125rem rgba(17, 21, 25, 0.58);
+  --react-table-expanded-row-shadow: 0px -0.75rem 2rem rgba(17, 21, 25, 0.58);
+  --react-table-container-border: #2A3036;
+  --react-table-container-border-radius: 0.375rem;
+  --react-table-disabled-click-row-color: #8F97A1;
+  /*#endregion */
+  /*#region Tabs component */
+  --tabgroup-container-background: #2A3036;
+  --tabgroup-container-border: 0.125rem solid #2A3036;
+  --tabgroup-container-border-radius: 0.5rem;
+  --tabgroup-container-width: fit-content;
+  --tabgroup-tab-text-color: #E8EBED;
+  --tabgroup-tab-line-height: 1rem;
+  --tabgroup-tab-bg-color: transparent;
+  --tabgroup-tab-border-color: #727B84;
+  --selected-tabgroup-tab-color: #FFFFFF;
+  --selected-tabgroup-tab-bg: #3E454D;
+  --selected-tabgroup-tab-border-color: #727B84;
+  --disabled-tabgroup-tab-border-color: #727B84;
+  --disabled-tabgroup-tab-color: #727B84;
+  --disabled-tabgroup-tab-bg-color: transparent;
+  --highlighted-tabgroup-tab-color: #FFFFFF;
+  --highlighted-tabgroup-tab-bg-color: #30373D;
+  --highlighted-tabgroup-tab-border-color: #727B84;
+  --selected-disabled-tabgroup-tab-bg: transparent;
+  --selected-disabled-tabgroup-tab-text-color: #8F97A1;
+  --tabgroup-tab-radius: 0.375rem;
+  --tabgroup-first-tab-border-radius: var(--tabgroup-tab-radius) var(--tabgroup-tab-radius) var(--tabgroup-tab-radius) var(--tabgroup-tab-radius);
+  --tabgroup-middle-tab-border-radius: var(--tabgroup-tab-radius) var(--tabgroup-tab-radius) var(--tabgroup-tab-radius) var(--tabgroup-tab-radius);
+  --tabgroup-last-tab-border-radius: var(--tabgroup-tab-radius) var(--tabgroup-tab-radius) var(--tabgroup-tab-radius) var(--tabgroup-tab-radius);
+  --tabgroup-tab-padding: 0.5rem 1rem;
+  --tabgroup-tab-small-padding: 0.25rem 0.75rem;
+  --tabgroup-tab-border-size: 0;
+  /*#endregion */
+  /*#region ToggleSwitch */
+  --toggle-bg: transparent;
+  --toggle-area-border-color: #B7BFC7;
+  --toggle-knob-color: #FFFFFF;
+  --toggle-active-knob-color: #181D21;
+  --toggle-active-border-color: #909BF5;
+  --toggle-checked-bg-color: #909BF5;
+  --toggle-active-focused-bg: #A7B0F7;
+  --toggle-disabled-knob-bg: #8F97A1;
+  --toggle-disabled-checked-knob-bg: #727B84;
+  --toggle-disabled-area-color: #8F97A1;
+  --toggle-disabled-text-color: #8F97A1;
+  --toggle-disabled-checked-knob-color: #22272B;
+  --toggle-pulse-bg: rgba(144, 155, 245, 0.5);
+  --toggle-not-checked-border-color: #A7B0F7;
+  --toggle-not-checked-bg-color: #2A3036;
+  --toggle-active-focused-border-color: #A7B0F7;
+  --toggle-primary-label-color: #A7B0F7;
+  --toggle-subtext-color: #B7BFC7;
+  --toggle-subtext-disabled-color: #8F97A1;
+  --toggle-hover-color: #FFFFFF;
+  /*#endregion */
+  /*#region ZoomControls component */
+  --zoom-controls-background: #2A3036;
+  --zoom-controls-border: #3E454D;
+  --zoom-controls-border-radius: 0.375rem;
+  --zoom-controls-padding: 0;
+  /*#endregion */
+  /*#region BreadCrumbs component */
+  --breadcrumbs-text-color: #E8EBED;
+  --breadcrumbs-link-color: #B7BFC7;
+  --breadcrumbs-link-hover-color: #FFFFFF;
+  --breadcrumbs-ellipsis-icon-active: #2A3036;
+  --breadcrumbs-ellipsis-icon-border-radius: 0.375rem;
+  --breadcrumbs-secondary-text-color: #E8EBED;
+  --breadcrumbs-ellipsis-icon-hover: #2A3036;
+  --breadcrumbs-hover-text-decoration: underline;
+  --breadcrumbs-link-font-weight: 400;
+  --breadcrumbs-last-link-font-weight: 600;
+  --breadcrumbs-link-font-size: 0.875rem;
+  --breadcrumb-item-trigger-hover-color: #A7B0F7;
+  /*#endregion */
+  /*#region Tooltip component */
+  --tooltip-text-color: #E8EBED;
+  --tooltip-border-color: #3E454D;
+  --tooltip_bg: #2A3036;
+  --tooltip-border-radius: 0.375rem;
+  --tooltip-docs-link-color: #A7B0F7;
+  /*#endregion */
+  /*#region Text Editor component */
+  --text-editor-toolbar-bg: #181D21;
+  --text-editor-toolbar-border: none;
+  --text-editor-border: 0.0625rem solid #3E454D;
+  --text-editor-border-radius: 0.375rem;
+  --text-editor-header-border-color: #3E454D;
+  --text-editor-no-text-color: #8F97A1;
+  --text-editor-border-hover-color: #3E454D;
+  --text-editor-background-hover-color: #22272B;
+  --text-editor-active-color: #909BF5;
+  --text-editor-button-hover-color: #727B84;
+  --text-editor-button-active-color: #909BF5;
+  /*#endregion */
+  /*#region TextMergeView component */
+  --deleted-main-color: #ED7171;
+  --deleted-with-opacity-color: rgba(237, 113, 113, 0.5);
+  --deleted-line-color: rgba(237, 113, 113, 0.08);
+  --changed-main-color: #56DF8A;
+  --changed-with-opacity-color: rgba(86, 223, 138, 0.5);
+  --changed-line-color: rgba(86, 223, 138, 0.08);
+  /*#endregion */
+  /*#region Sidebar Card component */
+  --sidebar-card-bg: #1D2226;
+  --sidebar-card-active-border: #909BF5;
+  --sidebar-card-active-bg: #2A3036;
+  --sidebar-card-hover-bg: #30373D;
+  --sidebar-disabled-color: #8F97A1;
+  /*#endregion */
+  /*#region CodeEditor component */
+  --code-editor-border-radius: 0.375rem;
+  --code-editor-selected-background: #3E454D;
+  /*#endregion */
+  /*#region Pill component */
+  --pill-border-radius: 0.375rem;
+  /*#endregion */
+  /*#region LoadingAnimation component */
+  --cube-animation-border-image: linear-gradient(45deg, #5C41FF, #909BF5) 1;
+  /*#endregion */
+  /*#region Tour component */
+  --tour-text-color: var(--text-primary);
+  --tour-bg-color: #2A3036;
+  --tour-border-color: #3E454D;
+  --tour-example-content-header-img-bg-color: #E5D74C;
+  --advanced-tour-anchor-bg-color: #909BF5;
+  --advanced-tour-anchor-border-color: #D6DBFC;
+  --advanced-tour-anchor-shadow-color: #D6DBFC;
+  --advanced-tour-anchor-color: #22272B;
+  --advanced-tour-anchor-highlight: #ED7171;
+  --advanced-tour-bg-color: #2A3036;
+  --advanced-tour-border-color: #3E454D;
+  --advanced-tour-box-shadow: 0.625rem 0.625rem 1.625rem 0.1875rem rgba(17, 21, 25, 0.44), 0px 0px 1.5rem -0.1875rem rgba(17, 21, 25, 0.54);
+  --advanced-tour-example-first-step-icon-bg-color: #E5D74C;
+  --advanced-tour-example-second-step-icon-bg-color: #BFC6FA;
+  --advanced-tour-example-third-step-icon-bg-color: #F6B2B1;
+  --advanced-tour-example-link-label-color: #8F97A1;
+  --advanced-tour-z-index: 1045;
+  /*#endregion */
+}
+