rancher
/
dashboard
mirror of https://github.com/rancher/dashboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update colors for installed apps 

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
This commit is contained in:
Phillip Rak 2025-09-08 14:24:38 -07:00
parent d854645ccf
commit 2d6fd4f756
5 changed files with 120 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pkg/rancher-components/src/components/BadgeState/BadgeState.vue
View File

@ -79,22 +79,24 @@ export default defineComponent({
border-radius: 20px;
&.bg-info {
border-color: var(--info);
color: var(--on-info-banner);
background: var(--info-badge, var(--info-banner));
}
&.bg-error {
border-color: var(--error);
color: var(--on-error-banner);
background: var(--error-badge, var(--error-banner));
}
&.bg-warning {
border-color: var(--warning);
color: var(--on-warning-banner);
background: var(--warning-badge, var(--warning-banner));
}
// Successful states are de-emphasized by using [text-]color instead of background-color
&.bg-success {
color: var(--success);
background: transparent;
border-color: var(--success);
color: var(--on-success-banner, var(--success-text));
background: var(--success-badge, var(--success));
}
// Added badge-disabled instead of bg-disabled since bg-disabled is used in other places with !important styling, an investigation is needed to make the naming consistent

3
pkg/rancher-components/src/components/Banner/Banner.vue
View File

@ -231,12 +231,13 @@ $icon-size: 24px;
.warning & {
background: var(--warning-banner-bg);
border-color: var(--warning);
color: var(--warning-banner-text, var(--body-text));
}
.error & {
background: var(--error-banner-bg);
border-color: var(--error);
color: var(--error);
color: var(--error-banner-text, var(--error));
}
&.stacked {

29
shell/assets/styles/global/_button.scss
View File

@ -64,7 +64,7 @@ button,
}
//btn roles
.role-primary {
BUTTON.role-primary, A.role-primary {
background: var(--primary);
color: var(--primary-text);
@ -82,6 +82,14 @@ button,
@include focus-outline;
outline-offset: 2px;
}
&.btn {
&:disabled {
background: var(--primary) !important;
color: var(--primary-text) !important;
opacity: 0.5;
}
}
}
.role-secondary {
@ -189,6 +197,25 @@ fieldset[disabled] .btn {
padding: 0;
border-radius: var(--border-radius);
//TODO: Remove important specifier here and in bg-primary/bg-disabled
.bg-primary {
background: var(--toggle-on-bg, var(--primary));
color: var(--toggle-on-color, var(--primary-hover-text));
&:hover {
background: var(--active-hover) !important;
}
}
.bg-disabled {
background: var(--toggle-off-bg, var(--disabled-bg)) !important;
color: var(--toggle-off-color, var(--body-text));
&:hover {
background: var(--toggle-off-hover, var(--disabled-bg)) !important;
}
}
.btn {
position: relative;
display: inline-flex;

82
shell/assets/styles/themes/_modern.scss
View File

@ -90,6 +90,14 @@ BODY, .theme-light {
--on-tertiary : var(--link);
--tertiary-hover : var(--non-primary-hover);
--active : #{$primary-110};
--on-active : #{$grey-0};
--toggle-on-bg : var(--active);
--toggle-on-color : var(--on-active);
--toggle-off-bg : #{$grey-5};
--toggle-off-color : #{$grey-50};
--toggle-off-hover : #{$grey-10};
--active : #{$primary-110};
--on-active : #{$grey-0};
--active-hover : #{lighten($primary-110, 5%)};
@ -505,17 +513,15 @@ BODY, .theme-light {
--progress-bg : #{$medium};
--progress-divider : #{$medium};
--sortable-table-bg : #{darken($lightest, 5%)};
--sortable-table-row-bg : #{$lightest};
--sortable-table-header-bg : #{$lighter};
--sortable-table-bg : #{darken($grey-0, 5%)};
--sortable-table-row-bg : #{$grey-0};
--sortable-table-header-bg : #{$grey-5};
--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-hover-bg : #{$grey-5};
--sortable-table-selected-bg : var(--primary-light-bg);
--sortable-table-group-label : #{$lighter};
--sortable-table-group-label : #{$secondary};
--sortable-table-body-divider : #{$medium};
--tag-primary : #{$darkest};
--tag-bg : #EEEFF5;
@ -701,6 +707,21 @@ BODY, .theme-light {
--rc-inactive-disabled-border: #{$gray001};
--rc-disabled-background: #{$gray001};
--rc-disabled-text-color: #{$gray004};
--warning-badge : #{$warning};
--on-warning-banner : #{darken($warning, 60%)};
--success-badge : #{rgba($success, 0.10)};
--on-success-banner : #{$success};
--info-badge : #{rgba($info, 0.10)};
--on-info-banner : #{$info};
--error-badge : #{$error};
--on-error-banner : #FFFFFF;
--error-banner-text: #{$error};
--warning-banner-text: var(--warning-text);
}
BODY, .theme-dark {
@ -730,6 +751,11 @@ BODY, .theme-dark {
// menu cluster description active+hover
$desc-light: #EEEFF4;
$success : #00FF32;
$warning : #FFCA4D;
$error : #B13333;
$info : #1F67DB;
$secondary: $lighter;
$disabled: $light;
@ -764,6 +790,12 @@ BODY, .theme-dark {
--category-active : #{$primary-75};
--category-active-hover : #{$grey-70};
--toggle-on-bg : var(--active);
--toggle-on-color : var(--on-active);
--toggle-off-bg : #{$grey-80};
--toggle-off-color : #{$grey-30};
--toggle-off-hover : #{$grey-90};
--slate: #{$slate};
--default : #{$dark};
@ -875,13 +907,13 @@ BODY, .theme-dark {
--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};
--sortable-table-bg : #{darken($body-bg, 10%)};
--sortable-table-row-bg : var(--body-bg);
--sortable-table-header-bg : #{darken($body-bg, 15%)};
--sortable-table-top-divider : var(--body-border);
--sortable-table-hover-bg : #{lighten($body-bg, 5%)};
--sortable-table-selected-bg : #{lighten($body-bg, 15%)};
--sortable-table-group-label : #{$grey-30};
--tag-primary : #{$lightest};
--tag-bg : #{$medium};
@ -1007,5 +1039,25 @@ BODY, .theme-dark {
--rc-disabled-background: #{$gray005};
--rc-disabled-text-color: #{$gray004};
--error-text : #FFAC99;
--warning-text : #{$warning};
--success-badge : #{rgba($success, 10%)};
--on-success-banner : #{$success};
--warning-badge : #ffcc00;
--on-warning-banner : #{darken($warning, 60%)};
--info-badge : #{rgba($info, 30%)};
--on-info-banner : #{lighten($info, 50%)};
--error-badge : #{$error};
--on-error-banner : #FFFFFF;
--error-banner-bg: #301D1D;
--warning-banner-text : var(--warning-text);
--error-banner-text : var(--error-text);
}

23
shell/components/IconOrSvg.vue
View File

@ -24,12 +24,16 @@ const cssCache = {};
const colors = {
header: {
color: '--header-btn-text',
hover: '--header-btn-text-hover'
color: '--on-tertiary',
hover: '--on-tertiary',
colorFallback: '--header-btn-text',
hoverFallback: '--header-btn-text-hover',
},
primary: {
color: '--link',
hover: '--primary-hover-text'
color: '--link',
hover: '--primary-hover-text',
colorFallback: '--link',
hoverFallback: '--primary-hover-text',
}
};
@ -65,13 +69,16 @@ export default {
},
methods: {
getComputedStyleFor(cssVar) {
return normalizeHex(mapStandardColors((window.getComputedStyle(document.body).getPropertyValue(cssVar)).trim()));
getComputedStyleFor(cssVar, fallback) {
const value = window.getComputedStyle(document.body).getPropertyValue(cssVar).trim();
return normalizeHex(mapStandardColors(value ?? fallback));
},
setColor() {
const uiColor = this.getComputedStyleFor(colors[this.color].color);
const hoverColor = this.getComputedStyleFor(colors[this.color].hover);
const colorConfig = colors[this.color];
const uiColor = this.getComputedStyleFor(colorConfig.color, colorConfig.colorFallback);
const hoverColor = this.getComputedStyleFor(colorConfig.hover, colorConfig.hoverFallback);
if (!uiColor || !hoverColor) {
return;