diff --git a/cypress/e2e/tests/pages/global-settings/settings-p2.spec.ts b/cypress/e2e/tests/pages/global-settings/settings-p2.spec.ts
index edfb52a85dc..614441ca0b9 100644
--- a/cypress/e2e/tests/pages/global-settings/settings-p2.spec.ts
+++ b/cypress/e2e/tests/pages/global-settings/settings-p2.spec.ts
@@ -261,7 +261,7 @@ describe('Settings', { testIsolation: 'off' }, () => {
it('can update ui-brand', { tags: ['@globalSettings', '@adminUser'] }, () => {
// We probably want a better way to distinguish between rancher and suse logos. I'm doing this as part of the vue3 migration and trying to keep things as similar as possible.
const rancherLogoWidth = 167;
- const suseRancherLogoWidth = 140;
+ const suseRancherLogoWidth = 200;
// Update setting
SettingsPagePo.navTo();
diff --git a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
index d3d7df292f9..e2d505f8bb7 100644
--- a/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
+++ b/pkg/rancher-components/src/components/Form/Checkbox/Checkbox.vue
@@ -445,7 +445,7 @@ $fontColor: var(--input-label);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity:1;
- border: 1px solid var(--active, var(--primary));
+ border: 1px solid var(--checkbox-border, var(--primary));
}
// Custom Checkbox tick
diff --git a/shell/assets/brand/suse/dark/rancher-logo.svg b/shell/assets/brand/suse/dark/rancher-logo.svg
index 0203f5209d1..8b84e3277c5 100644
--- a/shell/assets/brand/suse/dark/rancher-logo.svg
+++ b/shell/assets/brand/suse/dark/rancher-logo.svg
@@ -1 +1,64 @@
-
\ No newline at end of file
+
+
+
diff --git a/shell/assets/brand/suse/rancher-logo.svg b/shell/assets/brand/suse/rancher-logo.svg
index 061b1b1df98..40dd128b0c6 100644
--- a/shell/assets/brand/suse/rancher-logo.svg
+++ b/shell/assets/brand/suse/rancher-logo.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/shell/assets/styles/themes/_modern.scss b/shell/assets/styles/themes/_modern.scss
index fd2ef742f80..b5d1a68c34c 100644
--- a/shell/assets/styles/themes/_modern.scss
+++ b/shell/assets/styles/themes/_modern.scss
@@ -49,6 +49,14 @@ $primary-50 : #A7BFF1; // Active dark
$primary-20 : #EDF2FC;
$primary-15 : #EEF1F6; // Category active light
+$green-140 : #025937;
+$green-120 : #008657;
+$green-jungle : #30BA78;
+$green-80 : #42D29F;
+$green-60 : #83E1BE;
+$green-40 : #C0EFDE;
+$green-20 : #EAFAF4;
+
$secondary : $grey-50;
$link : $primary-80;
@@ -847,7 +855,7 @@ BODY, .theme-dark {
// Header, Footer and Consent banner defaults
--banner-text-color : #{$lightest};
- --primary-keyboard-focus : #6889EE;
+ --primary-keyboard-focus : hsl(from var(--primary) h s calc(l + 10));
--nav-bg : #{$body-bg};
--nav-active : #333;
diff --git a/shell/assets/styles/themes/_suse.scss b/shell/assets/styles/themes/_suse.scss
index 34fc349aa5e..6d1debb890b 100644
--- a/shell/assets/styles/themes/_suse.scss
+++ b/shell/assets/styles/themes/_suse.scss
@@ -1,27 +1,84 @@
.suse {
- $primary: hsl(225, 100%, 57%);
- $info: mix($primary, $secondary, 50%);
- $selected: rgba($primary, .5);
-
- --primary : #{$primary};
- --primary-text : #fff;
- --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));
-
- --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)};
+ $green-jungle : #30BA78;
+ $light-green-jungle: #4DD192;
+ $lighter-green-jungle: #72EEB3;
+ $jungle-120: #008657;
+
+ &.theme-light {
+ --primary: #{$jungle-120};
+ --primary-text: #FFFFFF;
+ --primary-hover: #006B46;
+ --primary-hover-bg: #006B46;
+ --primary-border: #{$green-120};
+
+ --link: #4871C7;
+ --active-nav: #{$green-140};
+
+ --non-primary-text: #{$green-120};
+ --non-primary-hover: #{$green-20};
+
+ --secondary: var(--body-bg);
+ --secondary-border: var(--primary);
+ --on-secondary: var(--non-primary-text);
+ --secondary-hover: var(--non-primary-hover);
+
+ --tertiary: transparent;
+ --on-tertiary: var(--non-primary-text);
+ --on-tertiary-hover: var(--non-primary-text);
+ --on-tertiary-header: var(--non-primary-text);
+ --on-tertiary-header-hover: var(--non-primary-text);
+ --tertiary-hover: var(--non-primary-hover);
+ --tertiary-hover-app-bar: var(--non-primary-text);
+
+ $super-light-green: #F4F6F5;
+ --active: #{$green-140};
+ --on-active: #{$grey-0};
+ --active-hover: #{lighten($green-140, 5%)};
+ --category-active: #{$super-light-green};
+ --category-active-hover: #e8eeeb;
+
+ --checkbox-tick : var(--on-active);
+ --checkbox-border : var(--body-border);
+ --checkbox-tick-disabled : #{darken($disabled, 40%)};
+ --checkbox-disabled-bg : #{$disabled};
+ --checkbox-ticked-bg : var(--active);
+ }
+
+ &.theme-dark {
+ --link: #9BBFFD;
+ --active-nav: #{$green-40};
+
+ --primary: #{$light-green-jungle};
+ --primary-text: #{$grey-90};
+ --primary-hover: #{$lighter-green-jungle};
+ --primary-hover-bg: #{$lighter-green-jungle};
+ --primary-border: #{$lighter-green-jungle};
+
+ --non-primary-text: #{$lighter-green-jungle};
+ --non-primary-hover: #1E372B;
+
+ --secondary: var(--body-bg);
+ --secondary-border: var(--non-primary-text);
+ --on-secondary: var(--non-primary-text);
+ --secondary-hover: var(--non-primary-hover);
+
+ --tertiary: transparent;
+ --on-tertiary: var(--non-primary-text);
+ --on-tertiary-hover: var(--non-primary-text);
+ --on-tertiary-header: var(--non-primary-text);
+ --on-tertiary-header-hover: var(--non-primary-text);
+ --tertiary-hover: var(--non-primary-hover);
+ --tertiary-hover-app-bar: var(--non-primary-text);
+
+ $category-active:#303633;
+ --active: #{$green-40};
+ --on-active: #{$grey-90};
+ --active-hover: #{$green-60};
+ --category-active: #{$category-active};
+ --category-active-hover: #{lighten($category-active, 10%)};
+
+ --toggle-off-bg: #{$grey-70};
+ --sortable-table-selected-bg: #3f4350;
+ }
}
diff --git a/shell/components/ClusterIconMenu.vue b/shell/components/ClusterIconMenu.vue
index c8420529bdc..0cef8aa47dd 100644
--- a/shell/components/ClusterIconMenu.vue
+++ b/shell/components/ClusterIconMenu.vue
@@ -119,7 +119,7 @@ export default {