@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.9

package/assets/styles/themes/_dark.scss

@@ -1,262 +1,275 @@
-.theme-dark {
-  // Local variables for reused colors
-
-  //dark sidebar
-  $darkest: #141419;
-
-  //dark body
-  $darker: #1b1c21;
-
-  //dark inputs
-  $dark: #27292e;
-
-  //dark borders and button
-  $medium: #4a4b52;
-
-  // dark disabled,
-  $light: #6c6c76;
-
-  //dark secondary
-  $lighter: #b6b6c2;
-
-  // dark main text
-  $lightest: #ffffff;
-
-  // menu cluster description active+hover
-  $desc-light: #EEEFF4;
-
-  $secondary: $lighter;
-  $disabled: $light;
-
-  //Contrast colors
-  $contrasted-dark: $lightest !default;
-  $contrasted-light: $darkest !default;
-
-  $drag-over: #DCDEE7;
-
-  $slate: #4B4F6B;
-
-  --slate: #{$slate};
-
-  --default                    : #{$dark};
-  --default-text               : #{$light};
-  --default-hover-bg           : #{darken($dark, 10%)};
-  --default-hover-text         : #{saturate($lightest, 20%)};
-  --default-active-bg          : #{darken($dark, 25%)};
-  --default-active-text        : #{contrast-color(darken($dark, 25%))};
-  --default-border             : #{$dark};
-  --default-banner-bg          : #{rgba($dark, 0.15)};
-  --default-light-bg           : #{rgba($dark, 0.05)};
-  --slider-light-bg            : #{rgba($darker, 1)};
-  --slider-light-bg-right      : #{rgba($darker, 0)};
-
-  --muted                      : #{$disabled};
-  --deemphasized               : #{$disabled};
-
-  --body-bg                    : #{$darker};
-  --body-text                  : #{$lightest};
-  --scrollbar-thumb            : #{$medium};
-  --scrollbar-thumb-dropdown   : #{$medium};
-
-  --side-menu-desc             : #{$desc-light};
-
-  --header-bg                  : #{$darker};
-  --header-border              : #{$medium};
-  --header-btn-bg              : transparent;
-  --header-btn-text            : #{$lightest};
-  --header-btn-text-hover      : #{$lightest};
-  --header-input-text          : #{$lightest};
-
-  // Header, Footer and Consent banner defaults
-  --banner-text-color          : #{$lightest};
-
-  --nav-bg                     : #{$darkest};
-  --nav-active                 : #333;
-  --nav-border                 : #{$medium};
-  --nav-hover                  : var(--primary);
-  --nav-expander-hover         : var(--primary-banner-bg);
-  --nav-icon-badge-bg          : #{$dark};
-
-  --disabled-bg                : #{darken($disabled, 10%)};
-  --disabled-text              : #{$secondary};
-  --box-bg                     : #{$darkest};
-  --subtle-border              : #{$darkest};
-  --border                     : #{$medium};
-
-  --topmenu-bg                 : #{$darkest};
-  --topmenu-text               : #{$lightest};
-  --topmost-border             : #{$medium};
-  --topmost-shadow             : #{lighten($darkest, 5%)};
-  --topmost-light-hover        : #{$medium};
-
-  --accent-btn                 : var(--primary-banner-bg);
-  --accent-btn-hover           : var(--primary);
-  --accent-btn-hover-text      : #{$lightest};
-
-  --modal-bg                   : #{$dark};
-  --modal-border               : #{$medium};
-  --subtle-overlay-bg          : #{rgba($darkest, 0.75)};
-  --overlay-bg                 : #{rgba($darkest, 0.75)};
-  --shadow                     : #{rgba($darkest, 0.9)};
-
-  --checkbox-tick              : #{$lightest};
-  --checkbox-border            : #{$medium};
-  --checkbox-tick-disabled     : #{lighten($disabled, 50%)};
-  --checkbox-disabled-bg       : #{$disabled};
-  --checkbox-ticked-bg         : var(--link);
-
-  --drag-over-inner-bg         : #{rgba($drag-over, 0.9)};
-  --drag-over-outer-bg         : #{rgba($drag-over, 0)};
-
-  --dropdown-bg                : #{mix($medium, $dark, 10%)};
-  --dropdown-border            : #{$light};
-  --dropdown-divider           : #{$light};
-  --dropdown-text              : #{$lightest};
-  --dropdown-active-text       : #{$lightest};
-  --dropdown-active-bg         : #{$light};
-  --dropdown-hover-text        : #{$lightest};
-  --dropdown-hover-bg          : #{$slate};
-  --dropdown-disabled-bg       : #{$disabled};
-  --dropdown-disabled-text     : #{$disabled};
-  --dropdown-group-text        : #{$lighter};
-  --dropdown-highlight-text    : var(--link);
-
-  --notification-unread-bg     : var(--primary-banner-bg);
-
-  --input-text                 : #{$lightest};
-  --input-label                : #{$lighter};
-  --input-placeholder          : #{$disabled};
-  --input-border               : var(--border);
-  --input-bg                   : var(--body-bg);
-  --input-bg-accent            : #{darken($dark, 3%)};
-  --input-hover-bg             : var(--box-bg);
-  --input-focus-bg             : var(--box-bg);
-  --input-disabled-text        : #{darken($lightest, 50%)};
-  --input-disabled-label       : #{darken($lighter, 30%)};
-  --input-disabled-bg          : #{darken($disabled, 30%)};
-  --input-disabled-border      : #{darken($medium, 30%)};
-  --input-disabled-placeholder : #{darken($disabled, 10%)};
-  --input-addon-bg             : #{$darker};
-
-  --label-secondary           : #{$lighter};
-
-  --progress-bg                : #{$medium};
-  --progress-divider           : #{$lightest};
-
-  --sortable-table-bg          : #{lighten($darkest, 10%)};
-  --sortable-table-row-bg      : #{$darker};;
-  --sortable-table-header-bg   : #{$darkest};
-  --sortable-table-top-divider : var(--border);
-  --sortable-table-hover-bg    : #{$darkest};
-  --sortable-table-selected-bg : var(--primary-light-bg);
-  --sortable-table-group-label : #{$lighter};
-
-  --tag-primary                : #{$lightest};
-  --tag-bg                     : #{$medium};
-
-  --popover-bg                 : #{$darker};
-  --popover-border             : var(--border);
-  --popover-text               : var(--body-text);
-
-  --tooltip-bg                 : #{$medium};
-  --tooltip-border             : var(--tag-primary);
-  --tooltip-text               : var(--body-text);
-  --tooltip-text-warning       : var(--body-text);
-
-
-  --tabbed-border              : #{$medium};
-  --tabbed-sidebar-bg          : #{$darkest};
-  --tabbed-container-bg        : #{mix($medium, $dark, 20%)};
-
-  --yaml-editor-bg             : #{$darkest};
-  --drawer-body-bg             : #{$darkest};
-
-  --diff-border                : var(--border);
-  --diff-header-bg             : var(--nav-bg);
-  --diff-header-border         : var(--border);
-  --diff-header                : #{rgba($darkest, 0.3)};
-  --diff-linenum-bg            : var(--nav-bg);
-  --diff-linenum               : var(--muted);
-  --diff-linenum-border        : var(--border);
-  --diff-line-ins-bg           : $success;
-  --diff-line-del-bg           : #{rgba($error, 0.75)};
-  --diff-del-bg                : #{rgba($error, 0.3)};
-  --diff-del-border            : #{$error};
-  --diff-ins-bg                : #{rgba($success, 0.3)};
-  --diff-ins-border            : #{rgba($success, 0.5)};
-  --diff-chg-ins               : #{rgba($success, 0.25)};
-  --diff-chg-del               : #{rgba($warning, 0.5)};
-  --diff-chg-dela               : #{rgba($warning, 1)};
-  --diff-empty-placeholder     : #{$darker};
-
-
-  --wm-tabs-bg                 : #{mix($medium, $dark, 10%)};
-  --wm-tab-bg                  : #{$darkest};
-  --wm-closer-hover-bg         : #{$medium};
-  --wm-tab-active-bg           : #{$darker};
-  --wm-title-bg                : #{$darkest};
-  --wm-title-border            : #{$medium};
-  --wm-body-bg                 : #{$darkest};
-  --wm-border                  : black;
-
-  --glance-divider             : #{$medium};
-
-  --resource-gauge-back-circle : 74, 75, 82, 0.5;
-
-  --simple-box-bg              : #{$darker};
-  --simple-box-border          : #{$medium};
-  --simple-box-divider         : #{$medium};
-  --simple-box-shadow          : none;
-
-  --terminal-bg                : var(--wm-body-bg);
-  --terminal-cursor            : var(--warning);
-  --terminal-selection         : #{$selected};
-  --terminal-text              : var(--body-text);
-
-  --logs-bg                    : var(--wm-body-bg);
-  --logs-highlight             : var(--wm-body-bg);
-  --logs-highlight-bg          : var(--warning);
-  --logs-text                  : var(--body-text);
-
-  --gauge-divider              : rgba(255, 255, 255, 0.3);
-  --gauge-success-primary      : 75, 95, 64;
-  --gauge-success-secondary    : 150, 189, 127;
-  --gauge-warning-primary      : 218, 195, 66;
-  --gauge-warning-secondary    : 109, 98, 33;
-  --gauge-error-primary        : 239, 90, 83;
-  --gauge-error-secondary      : 120, 45, 42;
-
-  --product-icon               : #{$lighter};
-  --product-icon-active        : #{$lightest};
-
-  --badge-state-disabled-text  : #{$desc-light};
-  --badge-state-disabled-bg    : #{$medium};
-  --badge-state-disabled-border: #{$lighter};
-
-  --click-badge-error          : #{$lightest};
-  --click-badge-error-bg       : #F43434;
-  --click-badge-error-border   : #FF8080;
-
-  --click-badge-warning        : #662E00;
-  --click-badge-warning-bg     : #FFCA4D;
-  --click-badge-warning-border : #F2870D;
-
-  --click-badge-success        : #00FF32;
-  --click-badge-success-bg     : #354240;
-  --click-badge-success-border : #4DFF70;
+.classic {
+  &.theme-dark {
+    // Local variables for reused colors
+
+    //dark sidebar
+    $darkest: #141419;
+
+    //dark body
+    $darker: #1b1c21;
+
+    //dark inputs
+    $dark: #27292e;
+
+    //dark borders and button
+    $medium: #4a4b52;
+
+    // dark disabled,
+    $light: #6c6c76;
+
+    //dark secondary
+    $lighter: #b6b6c2;
+
+    // dark main text
+    $lightest: #ffffff;
+
+    // menu cluster description active+hover
+    $desc-light: #EEEFF4;
+
+    $secondary: $lighter;
+    $disabled: $light;
+
+    //Contrast colors
+    $contrasted-dark: $lightest !default;
+    $contrasted-light: $darkest !default;
+
+    $drag-over: #DCDEE7;
+
+    $slate: #4B4F6B;
+
+    --slate: #{$slate};
+
+    --default                    : #{$dark};
+    --default-text               : #{$light};
+    --default-hover-bg           : #{darken($dark, 10%)};
+    --default-hover-text         : #{saturate($lightest, 20%)};
+    --default-active-bg          : #{darken($dark, 25%)};
+    --default-active-text        : #{contrast-color(darken($dark, 25%))};
+    --default-border             : #{$dark};
+    --default-banner-bg          : #{rgba($dark, 0.15)};
+    --default-light-bg           : #{rgba($dark, 0.05)};
+    --slider-light-bg            : #{rgba($darker, 1)};
+    --slider-light-bg-right      : #{rgba($darker, 0)};
+
+    --muted                      : #{$disabled};
+    --deemphasized               : #{$disabled};
+
+    --body-bg                    : #{$darker};
+    --body-text                  : #{$lightest};
+    --scrollbar-thumb            : #{$medium};
+    --scrollbar-thumb-dropdown   : #{$medium};
+
+    --side-menu-desc             : #{$desc-light};
+
+    --header-bg                  : #{$darker};
+    --header-border              : #{$medium};
+    --header-btn-bg              : transparent;
+    --header-btn-text            : #{$lightest};
+    --header-btn-text-hover      : #{$lightest};
+    --header-input-text          : #{$lightest};
+
+    // Header, Footer and Consent banner defaults
+    --banner-text-color          : #{$lightest};
+
+    --nav-bg                     : #{$darkest};
+    --nav-active                 : #333;
+    --nav-border                 : #{$medium};
+    --nav-hover                  : var(--primary);
+    --nav-expander-hover         : var(--primary-banner-bg);
+    --nav-icon-badge-bg          : #{$dark};
+
+    --disabled-bg                : #{darken($disabled, 10%)};
+    --disabled-text              : #{$secondary};
+    --box-bg                     : #{$darkest};
+    --subtle-border              : #{$darkest};
+    --border                     : #{$medium};
+
+    --topmenu-bg                 : #{$darkest};
+    --topmenu-text               : #{$lightest};
+    --topmost-border             : #{$medium};
+    --topmost-shadow             : #{lighten($darkest, 5%)};
+    --topmost-light-hover        : #{$medium};
+
+    --accent-btn                 : var(--primary-banner-bg);
+    --accent-btn-hover           : var(--primary);
+    --accent-btn-hover-text      : #{$lightest};
+
+    --modal-bg                   : #{$dark};
+    --modal-border               : #{$medium};
+    --subtle-overlay-bg          : #{rgba($darkest, 0.75)};
+    --overlay-bg                 : #{rgba($darkest, 0.75)};
+    --shadow                     : #{rgba($darkest, 0.9)};
+
+    --checkbox-tick              : #{$lightest};
+    --checkbox-border            : #{$medium};
+    --checkbox-tick-disabled     : #{lighten($disabled, 50%)};
+    --checkbox-disabled-bg       : #{$disabled};
+    --checkbox-ticked-bg         : var(--link);
+
+    --drag-over-inner-bg         : #{rgba($drag-over, 0.9)};
+    --drag-over-outer-bg         : #{rgba($drag-over, 0)};
+
+    --dropdown-bg                : #{mix($medium, $dark, 10%)};
+    --dropdown-border            : #{$light};
+    --dropdown-divider           : #{$light};
+    --dropdown-text              : #{$lightest};
+    --dropdown-active-text       : #{$lightest};
+    --dropdown-active-bg         : #{$light};
+    --dropdown-hover-text        : #{$lightest};
+    --dropdown-hover-bg          : #{$slate};
+    --dropdown-disabled-bg       : #{$disabled};
+    --dropdown-disabled-text     : #{$disabled};
+    --dropdown-group-text        : #{$lighter};
+    --dropdown-highlight-text    : var(--link);
+
+    --notification-unread-bg     : var(--primary-banner-bg);
+
+    --input-text                 : #{$lightest};
+    --input-label                : #{$lighter};
+    --input-placeholder          : #{$disabled};
+    --input-border               : var(--border);
+    --input-bg                   : var(--body-bg);
+    --input-bg-accent            : #{darken($dark, 3%)};
+    --input-hover-bg             : var(--box-bg);
+    --input-focus-bg             : var(--box-bg);
+    --input-disabled-text        : #{darken($lightest, 50%)};
+    --input-disabled-label       : #{darken($lighter, 30%)};
+    --input-disabled-bg          : #{darken($disabled, 30%)};
+    --input-disabled-border      : #{darken($medium, 30%)};
+    --input-disabled-placeholder : #{darken($disabled, 10%)};
+    --input-addon-bg             : #{$darker};
+
+    --label-secondary           : #{$lighter};
+
+    --progress-bg                : #{$medium};
+    --progress-divider           : #{$lightest};
+
+    --sortable-table-bg          : #{lighten($darkest, 10%)};
+    --sortable-table-row-bg      : #{$darker};;
+    --sortable-table-header-bg   : #{$darkest};
+    --sortable-table-top-divider : var(--border);
+    --sortable-table-hover-bg    : #{$darkest};
+    --sortable-table-selected-bg : var(--primary-light-bg);
+    --sortable-table-group-label : #{$lighter};
+
+    --tag-primary                : #{$lightest};
+    --tag-bg                     : #{$medium};
+
+    --popover-bg                 : #{$darker};
+    --popover-border             : var(--border);
+    --popover-text               : var(--body-text);
+
+    --tooltip-bg                 : #{$medium};
+    --tooltip-border             : var(--tag-primary);
+    --tooltip-text               : var(--body-text);
+    --tooltip-text-warning       : var(--body-text);
+
+
+    --tabbed-border              : #{$medium};
+    --tabbed-sidebar-bg          : #{$darkest};
+    --tabbed-container-bg        : #{mix($medium, $dark, 20%)};
+
+    --yaml-editor-bg             : #{$darkest};
+    --drawer-body-bg             : #{$darkest};
+
+    --diff-border                : var(--border);
+    --diff-header-bg             : var(--nav-bg);
+    --diff-header-border         : var(--border);
+    --diff-header                : #{rgba($darkest, 0.3)};
+    --diff-linenum-bg            : var(--nav-bg);
+    --diff-linenum               : var(--muted);
+    --diff-linenum-border        : var(--border);
+    --diff-line-ins-bg           : $success;
+    --diff-line-del-bg           : #{rgba($error, 0.75)};
+    --diff-del-bg                : #{rgba($error, 0.3)};
+    --diff-del-border            : #{$error};
+    --diff-ins-bg                : #{rgba($success, 0.3)};
+    --diff-ins-border            : #{rgba($success, 0.5)};
+    --diff-chg-ins               : #{rgba($success, 0.25)};
+    --diff-chg-del               : #{rgba($warning, 0.5)};
+    --diff-chg-dela               : #{rgba($warning, 1)};
+    --diff-empty-placeholder     : #{$darker};
+
+
+    --wm-tabs-bg                 : #{mix($medium, $dark, 10%)};
+    --wm-tab-bg                  : #{$darkest};
+    --wm-closer-hover-bg         : #{$medium};
+    --wm-tab-active-bg           : #{$darker};
+    --wm-title-bg                : #{$darkest};
+    --wm-title-border            : #{$medium};
+    --wm-body-bg                 : #{$darkest};
+    --wm-border                  : black;
+
+    --glance-divider             : #{$medium};
+
+    --resource-gauge-back-circle : 74, 75, 82, 0.5;
+
+    --simple-box-bg              : #{$darker};
+    --simple-box-border          : #{$medium};
+    --simple-box-divider         : #{$medium};
+    --simple-box-shadow          : none;
+
+    --terminal-bg                : var(--wm-body-bg);
+    --terminal-cursor            : var(--warning);
+    --terminal-selection         : #{$selected};
+    --terminal-text              : var(--body-text);
+
+    --logs-bg                    : var(--wm-body-bg);
+    --logs-highlight             : var(--wm-body-bg);
+    --logs-highlight-bg          : var(--warning);
+    --logs-text                  : var(--body-text);
+
+    --gauge-divider              : rgba(255, 255, 255, 0.3);
+    --gauge-success-primary      : 75, 95, 64;
+    --gauge-success-secondary    : 150, 189, 127;
+    --gauge-warning-primary      : 218, 195, 66;
+    --gauge-warning-secondary    : 109, 98, 33;
+    --gauge-error-primary        : 239, 90, 83;
+    --gauge-error-secondary      : 120, 45, 42;
+
+    --product-icon               : #{$lighter};
+    --product-icon-active        : #{$lightest};
+
+    --badge-state-disabled-text  : #{$desc-light};
+    --badge-state-disabled-bg    : #{$medium};
+    --badge-state-disabled-border: #{$lighter};
+
+    --click-badge-error          : #{$lightest};
+    --click-badge-error-bg       : #F43434;
+    --click-badge-error-border   : #FF8080;
+
+    --click-badge-warning        : #662E00;
+    --click-badge-warning-bg     : #FFCA4D;
+    --click-badge-warning-border : #F2870D;
+
+    --click-badge-success        : #00FF32;
+    --click-badge-success-bg     : #354240;
+    --click-badge-success-border : #4DFF70;
+    
+    --click-badge-info           : #{$lightest};
+    --click-badge-info-bg        : #{$info};
+    --click-badge-info-border    : #ACD2EC;
+    --bubble-bg                  : #{$darkest};
+
+    $slate: #4B4F6B;
+
+    --slate: #{$slate};
+
+    --link-text-secondary: #{$secondary};
+
+    .secondary-text-link {
+      color: var(--link-text-secondary);
+    }
+
+    --rc-active-background: #{$gray006};
+    --rc-active-disabled-background: #{$gray006};
+    --rc-active-border: #{$gray005};
   
-  --click-badge-info           : #{$lightest};
-  --click-badge-info-bg        : #{$info};
-  --click-badge-info-border    : #ACD2EC;
-  --bubble-bg                  : #{$darkest};
-
-  $slate: #4B4F6B;
-
-  --slate: #{$slate};
-
-  --link-text-secondary: #{$secondary};
-
-  .secondary-text-link {
-    color: var(--link-text-secondary);
+    --rc-inactive-border: #{$gray005};
+    --rc-inactive-background: #{$gray005};
+    --rc-inactive-disabled-border: #{$gray004};
+  
+    --rc-disabled-background: #{$gray005};
+    --rc-disabled-text-color: #{$gray004};
   }
 }