TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-10 05:22:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): apply text color, fallback to zitadel themes if colors not adequate (#3087)

Browse Source 
* feat: fallback to real themes if colors not adequate

* lint
This commit is contained in:
Max Peintner
2022-01-21 16:08:32 +01:00
committed by GitHub
parent bca337319c
commit f485a52d9a
3 changed files with 94 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
console/src/styles.scss
View File

@@ -221,14 +221,17 @@ $caos-light-warn: (
),
);
$caos-dark-theme-text: var(--theme-dark-text);
$caos-light-theme-text: var(--theme-light-text);
$caos-dark-theme-background: (
status-bar: map_get($caos-dark-background, 300),
app-bar: map_get($caos-dark-background, 500),
background: map_get($caos-dark-background, 500),
hover: rgba(black, .04),
hover: rgba(black, 0.04),
card: map_get($caos-dark-background, 400),
dialog: map_get($caos-dark-background, 500),
disabled-button: rgba(black, .12),
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map_get($caos-dark-background, 300),
@@ -246,10 +249,10 @@ $caos-light-theme-background: (
status-bar: map_get($caos-light-background, 300),
app-bar: map_get($caos-light-background, 100),
background: map_get($caos-light-background, 500),
hover: rgba(black, .04),
hover: rgba(black, 0.04),
card: map_get($caos-light-background, 400),
dialog: map_get($caos-light-background, 500),
disabled-button: rgba(black, .12),
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $light-focused,
selected-button: map_get($caos-light-background, 300),
@@ -268,17 +271,17 @@ $caos-dark-theme-foreground: (
divider: $light-dividers,
dividers: $light-dividers,
disabled: $light-disabled-text,
disabled-button: rgba(white, .26),
disabled-button: rgba(white, 0.26),
disabled-text: $light-disabled-text,
elevation: black,
hint-text: $light-disabled-text,
secondary-text: $light-secondary-text,
icon: rgba(white, .54),
icons: rgba(white, .54),
text: rgba(white, .87),
slider-min: rgba(white, .87),
slider-off: rgba(white, .26),
slider-off-active: rgba(white, .38),
icon: rgba(white, 0.54),
icons: rgba(white, 0.54),
text: $caos-dark-theme-text,
slider-min: rgba(white, 0.87),
slider-off: rgba(white, 0.26),
slider-off-active: rgba(white, 0.38),
infosection: #f0f0f0,
warninfosection: #ffc1c1,
successinfosection: #cbf4c9,
@@ -289,17 +292,17 @@ $caos-light-theme-foreground: (
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, .26),
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
elevation: black,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, .54),
icons: rgba(black, .54),
text: rgba(black, .87),
slider-min: rgba(black, .87),
slider-off: rgba(black, .26),
slider-off-active: rgba(black, .38),
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: $caos-light-theme-text,
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
infosection: #4a4a4a,
warninfosection: #620e0e,
successinfosection: #0e6245,
@@ -357,12 +360,12 @@ $custom-typography:
.main-container,
.mat-dialog-container {
background-color: map-get($background, background);
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: map-get($background, background);
border-radius: 8px;
}
@@ -397,29 +400,29 @@ $custom-typography:
.main-container,
.mat-dialog-container {
background-color: map-get($background, background);
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: map-get($background, background);
border-radius: 8px;
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: map-get($background, background);
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
::-webkit-scrollbar-thumb {
background-color: #737c8870;
border-radius: 8px;
cursor: pointer;
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
.root-header {
@@ -502,5 +505,5 @@ i {
}
.mat-checkbox-inner-container.mat-checkbox-inner-container-no-side-margin {
margin-right: .5rem !important;
margin-right: 0.5rem !important;
}