@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.8

package/assets/styles/themes/_light.scss

@@ -42,582 +42,611 @@ $selected: rgba(#3D98D3, .5);
 
 $drag-over: #DCDEE7;
 
-BODY, .theme-light {
-
-  --primary                    : #{$primary};
-  --primary-text               : #{contrast-color($primary)};
-  --primary-hover-bg           : #{darken($primary, 10%)};
-  --primary-hover-text         : #{saturate($lightest, 20%)};
-  --primary-active-bg          : #{darken($primary, 25%)};
-  --primary-active-text        : #{contrast-color(darken($primary, 25%))};
-  --primary-border             : #{$primary};
-  --primary-banner-bg          : #{rgba($primary, 0.15)};
-  --primary-light-bg           : #{rgba($primary, 0.05)};
-  --primary-keyboard-focus     : hsl(from var(--primary) h s calc(l - 10));
-
-
-  .text-primary {
-    color: var(--primary) !important;
-  }
-
-  .bg-primary {
-    background-color: var(--primary);
-    color: var(--primary-text);
-
-    &.btn:hover {
-      color: var(--primary-hover-text);
-      background: var(--primary-hover-bg);
-      transition: all 0.3s ease;
+.classic {
+  &.theme-light {
+
+    --primary                    : #{$primary};
+    --primary-text               : #{contrast-color($primary)};
+    --primary-hover-bg           : #{darken($primary, 10%)};
+    --primary-hover-text         : #{saturate($lightest, 20%)};
+    --primary-active-bg          : #{darken($primary, 25%)};
+    --primary-active-text        : #{contrast-color(darken($primary, 25%))};
+    --primary-border             : #{$primary};
+    --primary-banner-bg          : #{rgba($primary, 0.15)};
+    --primary-light-bg           : #{rgba($primary, 0.05)};
+    --primary-keyboard-focus     : hsl(from var(--primary) h s calc(l - 10));
+
+
+    .text-primary {
+      color: var(--primary) !important;
     }
 
-    &.btn:active {
-      color: var(--primary-active-text);
-      background: var(--primary-active-bg);
+    .bg-primary {
+      background-color: var(--primary);
+      color: var(--primary-text);
+
+      &.btn:hover {
+        color: var(--primary-hover-text);
+        background: var(--primary-hover-bg);
+        transition: all 0.3s ease;
       }
-  }
 
-  --link                    : #{$link};
-  --link-text               : #{contrast-color($link)};
-  --link-text-secondary     : #{$darker};
-  --link-hover-bg           : #{darken($link, 10%)};
-  --link-hover-text         : #{saturate($lightest, 20%)};
-  --link-active-bg          : #{darken($link, 25%)};
-  --link-active-text        : #{contrast-color(darken($link, 25%))};
-  --link-border             : #{$link};
-  --link-banner-bg          : #{rgba($link, 0.15)};
-  --link-light-bg           : #{rgba($link, 0.05)};
+      &.btn:active {
+        color: var(--primary-active-text);
+        background: var(--primary-active-bg);
+        }
+    }
+
+    --link                    : #{$link};
+    --link-text               : #{contrast-color($link)};
+    --link-text-secondary     : #{$darker};
+    --link-hover-bg           : #{darken($link, 10%)};
+    --link-hover-text         : #{saturate($lightest, 20%)};
+    --link-active-bg          : #{darken($link, 25%)};
+    --link-active-text        : #{contrast-color(darken($link, 25%))};
+    --link-border             : #{$link};
+    --link-banner-bg          : #{rgba($link, 0.15)};
+    --link-light-bg           : #{rgba($link, 0.05)};
 
 
 
-  .text-link {
-    color: var(--link) !important;
+    .text-link {
+      color: var(--link) !important;
 
-    &.disabled {
-      color: var(--disabled-text) !important;
+      &.disabled {
+        color: var(--disabled-text) !important;
+      }
     }
-  }
 
-  .secondary-text-link {
-    color: var(--link-text-secondary);
-    text-decoration: underline;
+    .secondary-text-link {
+      color: var(--link-text-secondary);
+      text-decoration: underline;
+      cursor: pointer;
 
-    &:hover {
-      text-decoration: none;
+      &:hover {
+        text-decoration: none;
+      }
     }
-  }
 
-  .bg-link {
-    background-color: var(--link);
-    color: var(--link-text);
+    .bg-link {
+      background-color: var(--link);
+      color: var(--link-text);
+
+      &.btn:hover {
+        color: var(--link-hover-text);
+        background: var(--link-hover-bg);
+        transition: all 0.3s ease;
+      }
+
+      &.btn:active {
+        color: var(--link-active-text);
+        background: var(--link-active-bg);
+        }
+    }
 
-    &.btn:hover {
-      color: var(--link-hover-text);
-      background: var(--link-hover-bg);
-      transition: all 0.3s ease;
+    --default                    : #{$light};
+    --default-text               : #{contrast-color($light)};
+    --default-hover-bg           : #{darken($light, 10%)};
+    --default-hover-text         : #{saturate($lightest, 20%)};
+    --default-active-bg          : #{darken($light, 25%)};
+    --default-active-text        : #{contrast-color(darken($light, 25%))};
+    --default-border             : #{$light};
+    --default-banner-bg          : #{rgba($light, 0.15)};
+    --default-light-bg           : #{rgba($light, 0.05)};
+    --slider-light-bg            : #{rgba($lightest, 1)};
+    --slider-light-bg-right      : #{rgba($lightest, 0)};
+
+
+    .text-default {
+      color: var(--default) !important;
     }
 
-    &.btn:active {
-      color: var(--link-active-text);
-      background: var(--link-active-bg);
+    .bg-default {
+      background-color: var(--default);
+      color: var(--default-text);
+
+      &.btn:hover {
+        color: var(--default-hover-text);
+        background: var(--default-hover-bg);
+        transition: all 0.3s ease;
       }
-  }
 
-  --default                    : #{$light};
-  --default-text               : #{contrast-color($light)};
-  --default-hover-bg           : #{darken($light, 10%)};
-  --default-hover-text         : #{saturate($lightest, 20%)};
-  --default-active-bg          : #{darken($light, 25%)};
-  --default-active-text        : #{contrast-color(darken($light, 25%))};
-  --default-border             : #{$light};
-  --default-banner-bg          : #{rgba($light, 0.15)};
-  --default-light-bg           : #{rgba($light, 0.05)};
-  --slider-light-bg            : #{rgba($lightest, 1)};
-  --slider-light-bg-right      : #{rgba($lightest, 0)};
-
-
-  .text-default {
-    color: var(--default) !important;
-  }
+      &.btn:active {
+        color: var(--default-active-text);
+        background: var(--default-active-bg);
+        }
+    }
+
+    --muted                      : #{$dark};
+    --deemphasized               : #717179;
 
-  .bg-default {
-    background-color: var(--default);
-    color: var(--default-text);
+    .text-muted {
+      color: var(--muted) !important;
+    }
+
+    .text-deemphasized {
+      color: var(--deemphasized);
+    }
 
-    &.btn:hover {
-      color: var(--default-hover-text);
-      background: var(--default-hover-bg);
-      transition: all 0.3s ease;
+    --darker                    : #{$darker};
+    --darker-text               : #{contrast-color($darker)};
+    --darker-hover-bg           : #{darken($darker, 10%)};
+    --darker-hover-text         : #{saturate($lightest, 20%)};
+    --darker-active-bg          : #{darken($darker, 25%)};
+    --darker-active-text        : #{contrast-color(darken($darker, 25%))};
+    --darker-border             : #{$darker};
+    --darker-banner-bg          : #{rgba($darker, 0.15)};
+    --darker-light-bg           : #{rgba($darker, 0.05)};
+
+    .text-darker {
+      color: var(--default) !important;
     }
 
-    &.btn:active {
-      color: var(--default-active-text);
-      background: var(--default-active-bg);
+    .bg-darker {
+      background-color: var(--darker);
+      color: var(--darker-text);
+
+      &.btn:hover {
+        color: var(--darker-hover-text);
+        background: var(--darker-hover-bg);
+        transition: all 0.3s ease;
       }
-  }
 
-  --muted                      : #{$dark};
+      &.btn:active {
+        color: var(--darker-active-text);
+        background: var(--darker-active-bg);
+        }
+    }
 
-  .text-muted {
-    color: var(--muted) !important;
-  }
 
-  --darker                    : #{$darker};
-  --darker-text               : #{contrast-color($darker)};
-  --darker-hover-bg           : #{darken($darker, 10%)};
-  --darker-hover-text         : #{saturate($lightest, 20%)};
-  --darker-active-bg          : #{darken($darker, 25%)};
-  --darker-active-text        : #{contrast-color(darken($darker, 25%))};
-  --darker-border             : #{$darker};
-  --darker-banner-bg          : #{rgba($darker, 0.15)};
-  --darker-light-bg           : #{rgba($darker, 0.05)};
-
-  .text-darker {
-    color: var(--default) !important;
-  }
 
-  .bg-darker {
-    background-color: var(--darker);
-    color: var(--darker-text);
+    --success                    : #{$success};
+    --success-text               : #{contrast-color($success)};
+    --success-hover-bg           : #{darken($success, 10%)};
+    --success-hover-text         : #{saturate($lightest, 20%)};
+    --success-active-bg          : #{darken($success, 25%)};
+    --success-active-text        : #{contrast-color(darken($success, 25%))};
+    --success-border             : #{$success};
+    --success-banner-bg          : #{rgba($success, 0.15)};
+    --success-light-bg           : #{rgba($success, 0.05)};
 
-    &.btn:hover {
-      color: var(--darker-hover-text);
-      background: var(--darker-hover-bg);
-      transition: all 0.3s ease;
+    .text-success {
+      color: var(--success) !important;
     }
 
-    &.btn:active {
-      color: var(--darker-active-text);
-      background: var(--darker-active-bg);
-      }
-  }
-
+    .bg-success {
+      background-color: var(--success);
+      color: var(--success-text);
 
+      &.btn:hover {
+        color: var(--success-hover-text);
+        background: var(--success-hover-bg);
+        transition: all 0.3s ease;
+      }
 
-  --success                    : #{$success};
-  --success-text               : #{contrast-color($success)};
-  --success-hover-bg           : #{darken($success, 10%)};
-  --success-hover-text         : #{saturate($lightest, 20%)};
-  --success-active-bg          : #{darken($success, 25%)};
-  --success-active-text        : #{contrast-color(darken($success, 25%))};
-  --success-border             : #{$success};
-  --success-banner-bg          : #{rgba($success, 0.15)};
-  --success-light-bg           : #{rgba($success, 0.05)};
+      &.btn:active {
+        color: var(--success-active-text);
+        background: var(--success-active-bg);
+        }
+    }
 
-  .text-success {
-    color: var(--success) !important;
-  }
 
-  .bg-success {
-    background-color: var(--success);
-    color: var(--success-text);
+    --info                    : #{$info};
+    --info-text               : #{contrast-color($info)};
+    --info-hover-bg           : #{darken($info, 10%)};
+    --info-hover-text         : #{saturate($lightest, 20%)};
+    --info-active-bg          : #{darken($info, 25%)};
+    --info-active-text        : #{contrast-color(darken($info, 25%))};
+    --info-border             : #{$info};
+    --info-banner-bg          : #{rgba($info, 0.15)};
+    --info-light-bg           : #{rgba($info, 0.05)};
 
-    &.btn:hover {
-      color: var(--success-hover-text);
-      background: var(--success-hover-bg);
-      transition: all 0.3s ease;
+    .text-info {
+      color: var(--info) !important;
     }
 
-    &.btn:active {
-      color: var(--success-active-text);
-      background: var(--success-active-bg);
-      }
-  }
+    .bg-info {
+      background-color: var(--info);
+      color: var(--info-text);
 
+      &.btn:hover {
+        color: var(--info-hover-text);
+        background: var(--info-hover-bg);
+        transition: all 0.3s ease;
+      }
 
-  --info                    : #{$info};
-  --info-text               : #{contrast-color($info)};
-  --info-hover-bg           : #{darken($info, 10%)};
-  --info-hover-text         : #{saturate($lightest, 20%)};
-  --info-active-bg          : #{darken($info, 25%)};
-  --info-active-text        : #{contrast-color(darken($info, 25%))};
-  --info-border             : #{$info};
-  --info-banner-bg          : #{rgba($info, 0.15)};
-  --info-light-bg           : #{rgba($info, 0.05)};
+      &.btn:active {
+        color: var(--info-active-text);
+        background: var(--info-active-bg);
+        }
+    }
 
-  .text-info {
-    color: var(--info) !important;
-  }
 
-  .bg-info {
-    background-color: var(--info);
-    color: var(--info-text);
+    --warning                    : #{$warning};
+    --warning-text               : #{contrast-color($warning)};
+    --warning-hover-bg           : #{darken($warning, 10%)};
+    --warning-hover-text         : #{saturate($lightest, 20%)};
+    --warning-active-bg          : #{darken($warning, 25%)};
+    --warning-active-text        : #{contrast-color(darken($warning, 25%))};
+    --warning-border             : #{$warning};
+    --warning-banner-bg          : #{rgba($warning, 0.15)};
+    --warning-light-bg           : #{rgba($warning, 0.05)};
 
-    &.btn:hover {
-      color: var(--info-hover-text);
-      background: var(--info-hover-bg);
-      transition: all 0.3s ease;
+    .text-warning {
+      color: var(--warning) !important;
     }
 
-    &.btn:active {
-      color: var(--info-active-text);
-      background: var(--info-active-bg);
+    .bg-warning {
+      background-color: var(--warning);
+      color: var(--warning-text);
+
+      &.btn:hover {
+        color: var(--warning-hover-text);
+        background: var(--warning-hover-bg);
+        transition: all 0.3s ease;
       }
-  }
 
+      &.btn:active {
+        color: var(--warning-active-text);
+        background: var(--warning-active-bg);
+        }
+    }
 
-  --warning                    : #{$warning};
-  --warning-text               : #{contrast-color($warning)};
-  --warning-hover-bg           : #{darken($warning, 10%)};
-  --warning-hover-text         : #{saturate($lightest, 20%)};
-  --warning-active-bg          : #{darken($warning, 25%)};
-  --warning-active-text        : #{contrast-color(darken($warning, 25%))};
-  --warning-border             : #{$warning};
-  --warning-banner-bg          : #{rgba($warning, 0.15)};
-  --warning-light-bg           : #{rgba($warning, 0.05)};
 
-  .text-warning {
-    color: var(--warning) !important;
-  }
+    --error                    : #{$error};
+    --error-text               : #{contrast-color($error)};
+    --error-hover-bg           : #{darken($error, 10%)};
+    --error-hover-text         : #{saturate($lightest, 20%)};
+    --error-active-bg          : #{darken($error, 25%)};
+    --error-active-text        : #{contrast-color(darken($error, 25%))};
+    --error-border             : #{$error};
+    --error-banner-bg          : #{rgba($error, 0.15)};
+    --error-light-bg           : #{rgba($error, 0.05)};
 
-  .bg-warning {
-    background-color: var(--warning);
-    color: var(--warning-text);
 
-    &.btn:hover {
-      color: var(--warning-hover-text);
-      background: var(--warning-hover-bg);
-      transition: all 0.3s ease;
+    .text-error {
+      color: var(--error) !important;
     }
 
-    &.btn:active {
-      color: var(--warning-active-text);
-      background: var(--warning-active-bg);
+    .bg-error {
+      background-color: var(--error);
+      color: var(--error-text);
+
+      &.btn:hover {
+        color: var(--error-hover-text);
+        background: var(--error-hover-bg);
+        transition: all 0.3s ease;
       }
-  }
 
+      &.btn:active {
+        color: var(--error-active-text);
+        background: var(--error-active-bg);
+        }
+    }
 
-  --error                    : #{$error};
-  --error-text               : #{contrast-color($error)};
-  --error-hover-bg           : #{darken($error, 10%)};
-  --error-hover-text         : #{saturate($lightest, 20%)};
-  --error-active-bg          : #{darken($error, 25%)};
-  --error-active-text        : #{contrast-color(darken($error, 25%))};
-  --error-border             : #{$error};
-  --error-banner-bg          : #{rgba($error, 0.15)};
-  --error-light-bg           : #{rgba($error, 0.05)};
+    --disabled : #{$disabled};
+    --disabled-text : #{contrast-color($disabled)};
+    --disabled-hover-bg : #{darken($disabled, 10%)};
+    --disabled-hover-text : #{saturate($lightest, 20%)};
+    --disabled-active-bg : #{darken($disabled, 25%)};
+    --disabled-active-text : #{contrast-color(darken($disabled, 25%))};
+    --disabled-border : #{$disabled};
+    --disabled-banner-bg : #{rgba($disabled, 0.15)};
+    --disabled-light-bg : #{rgba($disabled, 0.05)};
 
 
-  .text-error {
-    color: var(--error) !important;
-  }
+    .text-disabled {
+      color: var(--disabled) !important;
+    }
 
-  .bg-error {
-    background-color: var(--error);
-    color: var(--error-text);
+    .bg-disabled {
+      background-color: var(--disabled);
+      color: var(--disabled-text);
 
-    &.btn:hover {
-      color: var(--error-hover-text);
-      background: var(--error-hover-bg);
-      transition: all 0.3s ease;
-    }
+      &.btn:hover {
+        color: var(--disabled-hover-text);
+        background: var(--disabled-hover-bg);
+        transition: all 0.3s ease;
+      }
 
-    &.btn:active {
-      color: var(--error-active-text);
-      background: var(--error-active-bg);
+      &.btn:active {
+        color: var(--disabled-active-text);
+        background: var(--disabled-active-bg);
       }
-  }
+    }
 
-  --disabled : #{$disabled};
-  --disabled-text : #{contrast-color($disabled)};
-  --disabled-hover-bg : #{darken($disabled, 10%)};
-  --disabled-hover-text : #{saturate($lightest, 20%)};
-  --disabled-active-bg : #{darken($disabled, 25%)};
-  --disabled-active-text : #{contrast-color(darken($disabled, 25%))};
-  --disabled-border : #{$disabled};
-  --disabled-banner-bg : #{rgba($disabled, 0.15)};
-  --disabled-light-bg : #{rgba($disabled, 0.05)};
 
+    --body-bg                    : #{$lightest};
+    --body-text                  : #{$darkest};
+    --scrollbar-thumb            : #{$dark};
+    --scrollbar-thumb-dropdown   : #{$lighter};
+    --scrollbar-track            : transparent;
+
+    // Header, Footer and Consent banner defaults
+    --banner-text-color          : #{$darkest};
+
+    --header-bg                  : #{$lightest};
+    --header-btn-bg              : transparent;
+    --header-btn-text            : #{$darkest};
+    --header-btn-text-hover      : #{$lightest};
+    --header-input-text          : #{$darkest};
+    --header-height              : 55px;
+    --header-border              : #{$medium};
+    --header-border-size         : 1px;
+    --nav-width                  : 250px;
+    --nav-bg                     : #{$lightest};
+    --nav-active                 : #{$light};
+    --nav-hover                  : #{$medium};
+    --nav-expander-hover         : #{darken($medium, 10%)};
+    --nav-border                 : #{$medium};
+    --nav-border-size            : 1px;
+    --nav-icon-badge-bg          : #{$lightest};
+
+    --footer-bg                  : transparent;
+    --footer-height              : 0px;
+
+    --topmenu-bg                 : #{$lightest};
+    --topmenu-text               : #{$darkest};
+    --topmost-border             : #{$medium};
+    --topmost-shadow             : #{lighten($lightest, 10%)};
+    --topmost-light-hover        : #{$light};
+
+    --disabled-bg                : #{$disabled};
+    --disabled-text              : #{$secondary};
+    --box-bg                     : #{$lighter};
+    --subtle-border              : #{$medium};
+    --border                     : #{$medium};
+    --border-width               : 1px;
+    --border-radius              : 4px;
+    --border-radius-md           : 6px;
+    --border-radius-lg           : 8px;
+    --outline                    : var(--primary);
+    --outline-width              : 1px;
+
+    --accent-btn                 : var(--primary-banner-bg);
+    --accent-btn-hover           : var(--primary);
+    --accent-btn-hover-text      : #{$lightest};
+
+    --modal-bg                   : #{$lightest};
+    --modal-border               : #{$dark};
+    --subtle-overlay-bg          : #{rgba($lighter, 0.75)};
+    --overlay-bg                 : rgba(38, 42, 64, 0.35);
+    --shadow                     : #{rgba($medium, 0.85)};
+
+    --checkbox-tick              : #{$lightest};
+    --checkbox-border            : #{$medium};
+    --checkbox-tick-disabled     : #{darken($disabled, 40%)};
+    --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                : #{$lightest};
+    --dropdown-border            : #{$medium};
+    --dropdown-divider           : #{$medium};
+    --dropdown-text              : #{$darkest};
+    --dropdown-active-text       : #{$lightest};
+    --dropdown-active-bg         : #{$dark};
+    --dropdown-hover-text        : var(--body-text);
+    --dropdown-hover-bg          : #{$light};
+    --dropdown-disabled-text     : var(--muted);
+    --dropdown-disabled-bg       : #{$disabled};
+    --dropdown-group-text        : #{$darker};
+    --dropdown-highlight-text    : var(--link);
+
+    --notification-unread-bg     : var(--primary-banner-bg);
+
+    --card-badge-text            : #ffffff;
+
+    // UNUSED?
+    --card-header                : var(--primary-banner-bg);
+
+    --input-text                 : #{$darkest};
+    --input-label                : #{$secondary};
+    --input-placeholder          : #{darken($disabled, 10%)};
+    --input-border               : var(--border);
+    --input-bg                   : var(--body-bg);
+    --input-bg-accent            : #{darken($light, 2%)};
+    --input-hover-bg             : var(--box-bg);
+    --input-focus-bg             : var(--box-bg);
+    --input-disabled-text        : #{darken($disabled, 60%)};
+    --input-disabled-label       : #{darken($disabled, 40%)};
+    --input-disabled-bg          : #{$disabled};
+    --input-disabled-border      : #{darken($medium, 10%)};
+    --input-disabled-placeholder : #{darken($medium, 15%)};
+    --input-addon-bg             : #{$darker};
+    --input-hover-border         : #{darken($medium, 25%)};
+
+    --label-secondary           : #{$darker};
+
+    --progress-bg                : #{$medium};
+    --progress-divider           : #{$medium};
+
+    --sortable-table-bg          : #{darken($lightest, 5%)};
+    --sortable-table-row-bg      : #{$lightest};
+    --sortable-table-header-bg   : #{$lighter};
+    --sortable-table-top-divider : var(--border);
+    --sortable-table-body-divider : #{$medium};
+
+    --sortable-table-hover-bg    : #{$lighter};
+    //--sortable-table-selected-bg : #{rgba($primary, 0.02)};
+
+    --sortable-table-selected-bg : var(--primary-light-bg);
+    --sortable-table-group-label : #{$secondary};
+
+    --tag-primary                : #{$darkest};
+    --tag-bg                     : #EEEFF5;
+
+    --popover-bg                 : var(--body-bg);
+    --popover-border             : var(--border);
+    --popover-text               : var(--body-text);
+    --popover-border-radius      : var(--border-radius);
+    --tooltip-bg                 : #{$medium};
+    --tooltip-border             : var(--tag-primary);
+    --tooltip-text               : var(--tag-primary);
+    --tooltip-bg-warning         : #{rgba($warning, 0.8)};
+    --tooltip-text-warning       : var(--body-text);
+
+    --tabbed-border              : #{$medium};
+    --tabbed-sidebar-bg          : #{$lighter};
+    --tabbed-container-bg        : #{mix($light, $lighter, 15%)};
+
+    --yaml-editor-bg             : #{$lighter};
+    --drawer-body-bg             : #{$lighter};
+
+    --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-empty-placeholder     : #{$lightest};
+
+    --wm-tabs-bg                 : #{$medium};
+    --wm-tab-bg                  : #{$light};
+    --wm-closer-hover-bg         : #{$lighter};
+    --wm-tab-active-bg           : #{$lighter};
+    --wm-title-bg                : #{$lightest};
+    --wm-title-border            : #{$medium};
+    --wm-body-bg                 : #{$lighter};
+    --wm-border                  : var(--border);
+    --wm-tab-height              : 29px;
+
+    --glance-bg-rgb              : 61, 152, 211;
+    --glance-divider             : #{$medium};
+
+    --resource-gauge-back-circle : 255, 255, 255, 0.15;
+
+    --simple-box-bg              : #{$lightest};
+    --simple-box-border          : #{$medium};
+    --simple-box-divider         : #{$medium};
+    --simple-box-shadow          : none;
+
+    --terminal-bg                : var(--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              : #{$lightest};
+    --gauge-zero                 : #{$medium};
+    --gauge-success-primary      : 150, 189, 127;
+    --gauge-success-secondary    : 190, 211, 172;
+    --gauge-warning-primary      : 238, 226, 176;
+    --gauge-warning-secondary    : 218, 195, 66;
+    --gauge-error-primary        : 249, 186, 171;
+    --gauge-error-secondary      : 239, 90, 83;
+
+    --sizzle-0                   : 180, 210, 30;
+    --sizzle-1                   : 225, 45, 74;
+    --sizzle-2                   : 212, 66, 148;
+    --sizzle-3                   : 0, 169, 217;
+    --sizzle-4                   : 244, 136, 68;
+    --sizzle-5                   : 0, 147, 128;
+    --sizzle-6                   : 136, 81, 165;
+    --sizzle-7                   : 45, 47, 149;
+    --sizzle-8                   : 255, 235, 0;
+
+    --sizzle-success             : #{red($success)}, #{green($success)}, #{blue($success)};
+    --sizzle-info                : #{red($info)},    #{green($info)},    #{blue($info)};
+    --sizzle-warning             : #{red($warning)}, #{green($warning)}, #{blue($warning)};
+    --sizzle-error               : #{red($error)},   #{green($error)},   #{blue($error)};
+    --sizzle-unknown             : #{red($disabled)},#{green($disabled)},#{blue($disabled)};
+
+    $rancher                     : $primary;
+    $partner                     : #FEA424;
+    $other                       : #614EA2;
+
+    --app-rancher-accent         : #{$rancher};
+    --app-rancher-accent-text    : #ffffff;
+
+    --app-partner-accent         : #{$partner};
+    --app-partner-accent-text    : black;
+
+    --app-color1-accent          : rgba(var(--sizzle-1), 1);
+    --app-color1-accent-text     : white;
+
+    --app-color2-accent          : rgba(var(--sizzle-2), 1);
+    --app-color2-accent-text     : white;
+
+    --app-color3-accent          : rgba(var(--sizzle-3), 1);
+    --app-color3-accent-text     : white;
+
+    --app-color4-accent          : rgba(var(--sizzle-4), 1);
+    --app-color4-accent-text     : white;
+
+    --app-color5-accent          : rgba(var(--sizzle-5), 1);
+    --app-color5-accent-text     : white;
+
+    --app-color6-accent          : rgba(var(--sizzle-6), 1);
+    --app-color6-accent-text     : white;
+
+    --app-color7-accent          : rgba(var(--sizzle-7), 1);
+    --app-color7-accent-text     : white;
+
+    --app-color8-accent          : rgba(var(--sizzle-8), 1);
+    --app-color8-accent-text     : white;
+
+    --product-icon               : #{$darker};
+    --product-icon-active        : #{$darkest};
+
+    --badge-state-disabled-text  : #{$darker};
+    --badge-state-disabled-bg    : #{$lighter};
+    --badge-state-disabled-border: #{$medium};
+
+    --gap                        : 8px;
+    --gap-md                     : 16px;
+    --gap-lg                     : 24px;
 
-  .text-disabled {
-    color: var(--disabled) !important;
-  }
+    --click-badge-error          : #{$lightest};
+    --click-badge-error-bg       : #B13333;
+    --click-badge-error-border   : #7C0015;
 
-  .bg-disabled {
-    background-color: var(--disabled);
-    color: var(--disabled-text);
+    --click-badge-warning        : #473900;
+    --click-badge-warning-bg     : #FFE47A;
+    --click-badge-warning-border : #E5A200;
 
-    &.btn:hover {
-      color: var(--disabled-hover-text);
-      background: var(--disabled-hover-bg);
-      transition: all 0.3s ease;
-    }
+    --click-badge-success        : #007032;
+    --click-badge-success-bg     : #CEE4D7;
+    --click-badge-success-border : #1F7043;
 
-    &.btn:active {
-      color: var(--disabled-active-text);
-      background: var(--disabled-active-bg);
-    }
-  }
+    --click-badge-info           : #{$lightest};
+    --click-badge-info-bg        : #{$info};
+    --click-badge-info-border    : #2673A6;
+    --bubble-bg                : #{$lighter};
+
+
+    // These are meant to be the colors used within rancher-components. They will eventually be removed from shell once we have theming working in the components
+    --rc-info: #{$blue001};
+    --rc-info-secondary: #{$blue002};
+
+    --rc-success: #{$green001};
+    --rc-success-secondary: #{$green002};
 
+    --rc-warning: #{$yellow001};
+    --rc-warning-secondary: #{$yellow002};
 
-  --body-bg                    : #{$lightest};
-  --body-text                  : #{$darkest};
-  --scrollbar-thumb            : #{$dark};
-  --scrollbar-thumb-dropdown   : #{$lighter};
-  --scrollbar-track            : transparent;
-
-  // Header, Footer and Consent banner defaults
-  --banner-text-color          : #{$darkest};
-
-  --header-bg                  : #{$lightest};
-  --header-btn-bg              : transparent;
-  --header-btn-text            : #{$darkest};
-  --header-btn-text-hover      : #{$lightest};
-  --header-input-text          : #{$darkest};
-  --header-height              : 55px;
-  --header-border              : #{$medium};
-  --header-border-size         : 1px;
-  --nav-width                  : 250px;
-  --nav-bg                     : #{$lightest};
-  --nav-active                 : #{$light};
-  --nav-hover                  : #{$medium};
-  --nav-expander-hover         : #{darken($medium, 10%)};
-  --nav-border                 : #{$medium};
-  --nav-border-size            : 1px;
-  --nav-icon-badge-bg          : #{$lightest};
-
-  --footer-bg                  : transparent;
-  --footer-height              : 0px;
-
-  --topmenu-bg                 : #{$lightest};
-  --topmenu-text               : #{$darkest};
-  --topmost-border             : #{$medium};
-  --topmost-shadow             : #{lighten($lightest, 10%)};
-  --topmost-light-hover        : #{$light};
-
-  --disabled-bg                : #{$disabled};
-  --disabled-text              : #{$secondary};
-  --box-bg                     : #{$lighter};
-  --subtle-border              : #{$medium};
-  --border                     : #{$medium};
-  --border-width               : 1px;
-  --border-radius              : 4px;
-  --border-radius-md           : 6px;
-  --border-radius-lg           : 8px;
-  --outline                    : var(--primary);
-  --outline-width              : 1px;
-
-  --accent-btn                 : var(--primary-banner-bg);
-  --accent-btn-hover           : var(--primary);
-  --accent-btn-hover-text      : #{$lightest};
-
-  --modal-bg                   : #{$lightest};
-  --modal-border               : #{$dark};
-  --overlay-bg                 : #{rgba($lighter, 0.75)};
-  --shadow                     : #{rgba($medium, 0.85)};
-
-  --checkbox-tick              : #{$lightest};
-  --checkbox-border            : #{$medium};
-  --checkbox-tick-disabled     : #{darken($disabled, 40%)};
-  --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                : #{$lightest};
-  --dropdown-border            : #{$medium};
-  --dropdown-divider           : #{$medium};
-  --dropdown-text              : #{$darkest};
-  --dropdown-active-text       : #{$lightest};
-  --dropdown-active-bg         : #{$dark};
-  --dropdown-hover-text        : var(--body-text);
-  --dropdown-hover-bg          : #{$light};
-  --dropdown-disabled-text     : var(--muted);
-  --dropdown-disabled-bg       : #{$disabled};
-  --dropdown-group-text        : #{$darker};
-  --dropdown-highlight-text    : var(--link);
-
-  --notification-unread-bg     : var(--primary-banner-bg);
-
-  --card-badge-text            : #ffffff;
-
-  // UNUSED?
-  --card-header                : var(--primary-banner-bg);
-
-  --input-text                 : #{$darkest};
-  --input-label                : #{$secondary};
-  --input-placeholder          : #{darken($disabled, 10%)};
-  --input-border               : var(--border);
-  --input-bg                   : var(--body-bg);
-  --input-bg-accent            : #{darken($light, 2%)};
-  --input-hover-bg             : var(--box-bg);
-  --input-focus-bg             : var(--box-bg);
-  --input-disabled-text        : #{darken($disabled, 60%)};
-  --input-disabled-label       : #{darken($disabled, 40%)};
-  --input-disabled-bg          : #{$disabled};
-  --input-disabled-border      : #{darken($medium, 10%)};
-  --input-disabled-placeholder : #{darken($medium, 15%)};
-  --input-addon-bg             : #{$darker};
-  --input-hover-border         : #{darken($medium, 25%)};
-
-  --label-secondary           : #{$darker};
-
-  --progress-bg                : #{$medium};
-  --progress-divider           : #{$medium};
-
-  --sortable-table-bg          : #{darken($lightest, 5%)};
-  --sortable-table-row-bg      : #{$lightest};
-  --sortable-table-header-bg   : #{$lighter};
-  --sortable-table-top-divider : var(--border);
-  --sortable-table-body-divider : #{$medium};
-
-  --sortable-table-hover-bg    : #{$lighter};
-  //--sortable-table-selected-bg : #{rgba($primary, 0.02)};
-
-  --sortable-table-selected-bg : var(--primary-light-bg);
-  --sortable-table-group-label : #{$secondary};
-
-  --tag-primary                : #{$darkest};
-  --tag-bg                     : #{$medium};
-
-  --popover-bg                 : var(--body-bg);
-  --popover-border             : var(--border);
-  --popover-text               : var(--body-text);
-  --popover-border-radius      : var(--border-radius);
-  --tooltip-bg                 : #{$medium};
-  --tooltip-border             : var(--tag-primary);
-  --tooltip-text               : var(--tag-primary);
-  --tooltip-bg-warning         : #{rgba($warning, 0.8)};
-  --tooltip-text-warning       : var(--body-text);
-
-  --tabbed-border              : #{$medium};
-  --tabbed-sidebar-bg          : #{$lighter};
-  --tabbed-container-bg        : #{mix($light, $lighter, 15%)};
-
-  --yaml-editor-bg             : #{$lighter};
-  --drawer-body-bg             : #{$lighter};
-
-  --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-empty-placeholder     : #{$lightest};
-
-  --wm-tabs-bg                 : #{$medium};
-  --wm-tab-bg                  : #{$light};
-  --wm-closer-hover-bg         : #{$lighter};
-  --wm-tab-active-bg           : #{$lighter};
-  --wm-title-bg                : #{$lightest};
-  --wm-title-border            : #{$medium};
-  --wm-body-bg                 : #{$lighter};
-  --wm-border                  : var(--border);
-  --wm-tab-height              : 29px;
-
-  --glance-bg-rgb              : 61, 152, 211;
-  --glance-divider             : #{$medium};
-
-  --resource-gauge-back-circle : 255, 255, 255, 0.15;
-
-  --simple-box-bg              : #{$lightest};
-  --simple-box-border          : #{$medium};
-  --simple-box-divider         : #{$medium};
-  --simple-box-shadow          : none;
-
-  --terminal-bg                : var(--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              : #{$lightest};
-  --gauge-zero                 : #{$medium};
-  --gauge-success-primary      : 150, 189, 127;
-  --gauge-success-secondary    : 190, 211, 172;
-  --gauge-warning-primary      : 238, 226, 176;
-  --gauge-warning-secondary    : 218, 195, 66;
-  --gauge-error-primary        : 249, 186, 171;
-  --gauge-error-secondary      : 239, 90, 83;
-
-  --sizzle-0                   : 180, 210, 30;
-  --sizzle-1                   : 225, 45, 74;
-  --sizzle-2                   : 212, 66, 148;
-  --sizzle-3                   : 0, 169, 217;
-  --sizzle-4                   : 244, 136, 68;
-  --sizzle-5                   : 0, 147, 128;
-  --sizzle-6                   : 136, 81, 165;
-  --sizzle-7                   : 45, 47, 149;
-  --sizzle-8                   : 255, 235, 0;
-
-  --sizzle-success             : #{red($success)}, #{green($success)}, #{blue($success)};
-  --sizzle-info                : #{red($info)},    #{green($info)},    #{blue($info)};
-  --sizzle-warning             : #{red($warning)}, #{green($warning)}, #{blue($warning)};
-  --sizzle-error               : #{red($error)},   #{green($error)},   #{blue($error)};
-  --sizzle-unknown             : #{red($disabled)},#{green($disabled)},#{blue($disabled)};
-
-  $rancher                     : $primary;
-  $partner                     : #FEA424;
-  $other                       : #614EA2;
-
-  --app-rancher-accent         : #{$rancher};
-  --app-rancher-accent-text    : #ffffff;
-
-  --app-partner-accent         : #{$partner};
-  --app-partner-accent-text    : black;
-
-  --app-color1-accent          : rgba(var(--sizzle-1), 1);
-  --app-color1-accent-text     : white;
-
-  --app-color2-accent          : rgba(var(--sizzle-2), 1);
-  --app-color2-accent-text     : white;
-
-  --app-color3-accent          : rgba(var(--sizzle-3), 1);
-  --app-color3-accent-text     : white;
-
-  --app-color4-accent          : rgba(var(--sizzle-4), 1);
-  --app-color4-accent-text     : white;
-
-  --app-color5-accent          : rgba(var(--sizzle-5), 1);
-  --app-color5-accent-text     : white;
-
-  --app-color6-accent          : rgba(var(--sizzle-6), 1);
-  --app-color6-accent-text     : white;
-
-  --app-color7-accent          : rgba(var(--sizzle-7), 1);
-  --app-color7-accent-text     : white;
-
-  --app-color8-accent          : rgba(var(--sizzle-8), 1);
-  --app-color8-accent-text     : white;
-
-  --product-icon               : #{$darker};
-  --product-icon-active        : #{$darkest};
-
-  --badge-state-disabled-text  : #{$darker};
-  --badge-state-disabled-bg    : #{$lighter};
-  --badge-state-disabled-border: #{$medium};
-
-  --gap                        : 8px;
-  --gap-md                     : 16px;
-  --gap-lg                     : 24px;
-
-  --click-badge-error          : #{$lightest};
-  --click-badge-error-bg       : #B13333;
-  --click-badge-error-border   : #7C0015;
-
-  --click-badge-warning        : #473900;
-  --click-badge-warning-bg     : #FFE47A;
-  --click-badge-warning-border : #E5A200;
-
-  --click-badge-success        : #007032;
-  --click-badge-success-bg     : #CEE4D7;
-  --click-badge-success-border : #1F7043;
-
-  --click-badge-info           : #{$lightest};
-  --click-badge-info-bg        : #{$info};
-  --click-badge-info-border    : #2673A6;
-  --bubble-bg                : #{$lighter};
+    --rc-error: #{$red001};
+    --rc-error-secondary: #{$gray003};
+
+    --rc-unknown: #{$gray001};
+    --rc-unknown-secondary: #{$gray004};
+
+    --rc-none: #{$gray002};
+    --rc-none-secondary: #{$gray004};
+  }
 }