TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-12 11:07:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): improve project counters, dark primary color change, smaller UI improvements (#4620)

Browse Source 
* dark primary color change, project counter, link color improvements

* update fallback colors

* fallback colors

Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-11-17 08:43:53 +01:00
committed by GitHub
parent dbb18342a1
commit 7db87f4646
15 changed files with 323 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

431
internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss
View File

@@ -15,251 +15,220 @@ $light-input-border: #00000040;
$light-input-border-hover: #1a1b1b;
$lgn-dark-brand: (
50: #fff,
100: #dde6f3,
200: #b4c9e4,
300: #7fa3d1,
400: #6992c9,
500: #5282c1,
600: #4072b4,
700: #38649d,
800: #305687,
900: #284770,
A100: #fff,
A200: #dde6f3,
A300: #6992c9,
A400: #38649d,
A500: #666,
A600: #fff,
A700: #8795a1,
A800: #2d2e30,
A900: #212224,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
)
50: #f1f7fd,
100: #afd1f2,
200: #7fb5ea,
300: #4192e0,
400: #2782dc,
500: #2073c4,
600: #1c64aa,
700: #17548f,
800: #134575,
900: #0f355b,
A100: #fff,
A200: #dde6f3,
A300: #6992c9,
A400: #38649d,
A500: #666,
A600: #fff,
A700: #8795a1,
A800: #2d2e30,
A900: #212224,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
),
);
$lgn-light-brand: (
50: #eaedfa,
100: #ccd2f2,
200: #aab4ea,
300: #8796e1,
400: #6e80da,
500: #5469d4,
600: #4d61cf,
700: #4356c9,
800: #3a4cc3,
900: #293bb9,
A100: #f9faff,
A200: #c6ccff,
A300: #939fff,
A400: #7a88ff,
A500: #333,
A600: #000,
A700: #8795a1,
A800: white,
A900: #fafafa,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
)
50: #eaedfa,
100: #ccd2f2,
200: #aab4ea,
300: #8796e1,
400: #6e80da,
500: #5469d4,
600: #4d61cf,
700: #4356c9,
800: #3a4cc3,
900: #293bb9,
A100: #f9faff,
A200: #c6ccff,
A300: #939fff,
A400: #7a88ff,
A500: #333,
A600: #000,
A700: #8795a1,
A800: white,
A900: #fafafa,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
),
);
// skip accent color for first gen theming
// $lgn-accent-color: (
// 50: #ebf4f2,
// 100: #cce3de,
// 200: #abd1c9,
// 300: #89bfb3,
// 400: #6fb1a2,
// 500: #56a392,
// 600: #4f9b8a,
// 700: #45917f,
// 800: #3c8875,
// 900: #2b7763,
// A100: #beffed,
// A200: #8bffde,
// A400: #58ffd0,
// A700: #3effc9,
// contrast: (
// 50: $dark-primary-text,
// 100: $dark-primary-text,
// 200: $dark-primary-text,
// 300: $dark-primary-text,
// 400: $dark-primary-text,
// 500: $light-primary-text,
// 600: $light-primary-text,
// 700: $light-primary-text,
// 800: $light-primary-text,
// 900: $light-primary-text,
// A100: $dark-primary-text,
// A200: $light-primary-text,
// A400: $light-primary-text,
// A700: $light-primary-text,
// )
// );
$lgn-warn: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
A100: #ff8a80,
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
)
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
A100: #ff8a80,
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
),
);
$lgn-grey: (
50: #fafafa,
100: #f5f5f5,
200: #eeeeee,
300: #e0e0e0,
400: #bdbdbd,
500: #9e9e9e,
600: #757575,
700: #616161,
800: #424242,
900: #212121,
A100: #ffffff,
A200: #eeeeee,
A400: #bdbdbd,
A700: #616161,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $dark-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $dark-primary-text,
A400: $dark-primary-text,
A700: $light-primary-text,
)
50: #fafafa,
100: #f5f5f5,
200: #eeeeee,
300: #e0e0e0,
400: #bdbdbd,
500: #9e9e9e,
600: #757575,
700: #616161,
800: #424242,
900: #212121,
A100: #ffffff,
A200: #eeeeee,
A400: #bdbdbd,
A700: #616161,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $dark-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $dark-primary-text,
A400: $dark-primary-text,
A700: $light-primary-text,
),
);
$lgn-light-theme-background: (
background: map-get($lgn-grey, 50),
hover: rgba(black, 0.04),
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map-get($lgn-grey, 300),
selected-disabled-button: map-get($lgn-grey, 400),
tooltip: map-get($lgn-grey, 700),
input: #fafafa50,
footer: #fafafa,
qrcode: #fafafa, // use black ground on white background because inverted qrcode colors are not allowed
account-selector-hover: rgba(black, 0.02),
account-selector-active: rgba(black, 0.05),
google: #ffffff,
background: map-get($lgn-grey, 50),
hover: rgba(black, 0.04),
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map-get($lgn-grey, 300),
selected-disabled-button: map-get($lgn-grey, 400),
tooltip: map-get($lgn-grey, 700),
input: #fafafa50,
footer: #fafafa,
qrcode: #fafafa,
// use black ground on white background because inverted qrcode colors are not allowed
account-selector-hover: rgba(black, 0.02),
account-selector-active: rgba(black, 0.05),
google: #ffffff,
);
$lgn-dark-theme-background: (
background: #212224,
hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
disabled-button: rgba(white, 0.12),
raised-button: map-get($lgn-grey, 800),
focused-button: $light-focused,
selected-button: map-get($lgn-grey, 900),
selected-disabled-button: map-get($lgn-grey, 800),
tooltip: map-get($lgn-grey, 700),
input: rgba(black, .2),
footer: #212224,
qrcode: white, // needs white background to recognize borders,
account-selector-hover: rgba(white, 0.02),
account-selector-active: rgba(white, 0.05),
google: #ffffff,
background: #212224,
hover: rgba(white, 0.04),
// TODO(kara): check style with Material Design UX
disabled-button: rgba(white, 0.12),
raised-button: map-get($lgn-grey, 800),
focused-button: $light-focused,
selected-button: map-get($lgn-grey, 900),
selected-disabled-button: map-get($lgn-grey, 800),
tooltip: map-get($lgn-grey, 700),
input: rgba(black, 0.2),
footer: #212224,
qrcode: white,
// needs white background to recognize borders,
account-selector-hover: rgba(white, 0.02),
account-selector-active: rgba(white, 0.05),
google: #ffffff,
);
$lgn-light-theme-foreground: (
footer-links: map-get($lgn-light-brand, 500),
footer-line: #e3e8ee,
base: black,
input-border: $light-input-border,
radio-border: $light-input-border,
input-border-hover: $light-input-border-hover,
input-placeholder: map-get($lgn-grey, 600),
label: map-get($lgn-grey, 600),//#697386
divider: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
elevation: black,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
text: rgba(black, 0.87),
qrcode: black,
google-text: #8b8d8d,
footer-links: map-get($lgn-light-brand, 500),
footer-line: #e3e8ee,
base: black,
input-border: $light-input-border,
radio-border: $light-input-border,
input-border-hover: $light-input-border-hover,
input-placeholder: map-get($lgn-grey, 600),
label: map-get($lgn-grey, 600),
divider: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
elevation: black,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
text: rgba(black, 0.87),
qrcode: black,
google-text: #8b8d8d,
);
$lgn-dark-theme-foreground: (
footer-links: map-get($lgn-grey, 500),
footer-line: #303131,
base: white,
input-border: $dark-input-border,
radio-border: $dark-input-border,
input-border-hover: $dark-input-border-hover,
input-placeholder: map-get($lgn-grey, 600),
label: map-get($lgn-grey, 600),// #8795a1,
divider: $light-dividers,
disabled: $light-disabled-text,
disabled-button: rgba(white, 0.3),
elevation: black,
secondary-text: $light-secondary-text,
icon: white,
text: white,
qrcode: black,
google-text: #8b8d8d,
footer-links: map-get($lgn-grey, 500),
footer-line: #303131,
base: white,
input-border: $dark-input-border,
radio-border: $dark-input-border,
input-border-hover: $dark-input-border-hover,
input-placeholder: map-get($lgn-grey, 600),
label: map-get($lgn-grey, 600),
divider: $light-dividers,
disabled: $light-disabled-text,
disabled-button: rgba(white, 0.3),
elevation: black,
secondary-text: $light-secondary-text,
icon: white,
text: white,
qrcode: black,
google-text: #8b8d8d,
);

20
internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
View File

@@ -117,16 +117,16 @@
}
.lgn-dark-theme {
--zitadel-color-primary-50: #ffffff;
--zitadel-color-primary-100: #dde6f3;
--zitadel-color-primary-200: #b4c9e4;
--zitadel-color-primary-300: #7fa3d1;
--zitadel-color-primary-400: #6992c9;
--zitadel-color-primary-500: #5282c1;
--zitadel-color-primary-600: #4072b4;
--zitadel-color-primary-700: #38649d;
--zitadel-color-primary-800: #305687;
--zitadel-color-primary-900: #284770;
--zitadel-color-primary-50: #f1f7fd;
--zitadel-color-primary-100: #afd1f2;
--zitadel-color-primary-200: #7fb5ea;
--zitadel-color-primary-300: #4192e0;
--zitadel-color-primary-400: #2782dc;
--zitadel-color-primary-500: #2073c4;
--zitadel-color-primary-600: #1c64aa;
--zitadel-color-primary-700: #17548f;
--zitadel-color-primary-800: #134575;
--zitadel-color-primary-900: #0f355b;
--zitadel-color-warn-50: #ffe7eb;
--zitadel-color-warn-100: #ffc4ce;

20
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
View File

@@ -102,16 +102,16 @@
}
.lgn-dark-theme {
--zitadel-color-primary-50: #ffffff;
--zitadel-color-primary-100: #dde6f3;
--zitadel-color-primary-200: #b4c9e4;
--zitadel-color-primary-300: #7fa3d1;
--zitadel-color-primary-400: #6992c9;
--zitadel-color-primary-500: #5282c1;
--zitadel-color-primary-600: #4072b4;
--zitadel-color-primary-700: #38649d;
--zitadel-color-primary-800: #305687;
--zitadel-color-primary-900: #284770;
--zitadel-color-primary-50: #f1f7fd;
--zitadel-color-primary-100: #afd1f2;
--zitadel-color-primary-200: #7fb5ea;
--zitadel-color-primary-300: #4192e0;
--zitadel-color-primary-400: #2782dc;
--zitadel-color-primary-500: #2073c4;
--zitadel-color-primary-600: #1c64aa;
--zitadel-color-primary-700: #17548f;
--zitadel-color-primary-800: #134575;
--zitadel-color-primary-900: #0f355b;
--zitadel-color-warn-50: #ffe7eb;
--zitadel-color-warn-100: #ffc4ce;
--zitadel-color-warn-200: #ff9dad;