From 7db87f4646521475401ed8152b5c842157d00dc9 Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Thu, 17 Nov 2022 08:43:53 +0100 Subject: [PATCH] fix(console): improve project counters, dark primary color change, smaller UI improvements (#4620) * dark primary color change, project counter, link color improvements * update fallback colors * fallback colors Co-authored-by: Livio Spring --- cmd/defaults.yaml | 6 +- .../app/modules/footer/footer.component.scss | 9 +- .../nav-toggle/nav-toggle.component.html | 7 +- .../nav-toggle/nav-toggle.component.scss | 17 +- .../src/app/modules/nav/nav.component.html | 16 +- .../src/app/modules/nav/nav.component.scss | 14 + console/src/app/modules/nav/nav.component.ts | 13 +- .../private-labeling-policy.component.ts | 22 +- .../search-user-autocomplete.component.scss | 12 +- .../auth-user-detail.component.html | 4 +- .../auth-user-detail.component.scss | 4 + console/src/app/services/theme.service.ts | 16 +- .../themes/scss/styles/theming/palette.scss | 431 ++++++++---------- .../resources/themes/scss/styles/vars.scss | 20 +- .../resources/themes/zitadel/css/zitadel.css | 20 +- 15 files changed, 323 insertions(+), 288 deletions(-) diff --git a/cmd/defaults.yaml b/cmd/defaults.yaml index 06a728ef24..1ce991644d 100644 --- a/cmd/defaults.yaml +++ b/cmd/defaults.yaml @@ -226,8 +226,6 @@ SAML: # Company: ZITADEL # EmailAddress: hi@zitadel.com - - Login: LanguageCookieName: zitadel.login.lang CSRFCookieName: zitadel.login.csrf @@ -318,7 +316,7 @@ Actions: # wildcard sub domains are currently unsupported DenyList: - localhost - - '127.0.0.1' + - "127.0.0.1" DefaultInstance: InstanceName: @@ -429,7 +427,7 @@ DefaultInstance: BackgroundColor: "#fafafa" WarnColor: "#cd3d56" FontColor: "#000000" - PrimaryColorDark: "#bbbafa" + PrimaryColorDark: "#2073c4" BackgroundColorDark: "#111827" WarnColorDark: "#ff3b5b" FontColorDark: "#ffffff" diff --git a/console/src/app/modules/footer/footer.component.scss b/console/src/app/modules/footer/footer.component.scss index 8756ed29db..87e5629684 100644 --- a/console/src/app/modules/footer/footer.component.scss +++ b/console/src/app/modules/footer/footer.component.scss @@ -3,7 +3,9 @@ $warn: map-get($theme, warn); $background: map-get($theme, background); $accent: map-get($theme, accent); - $primary-color: mat.get-color-from-palette($primary, 500); + + $lighter-primary-color: mat.get-color-from-palette($primary, 300); + $darker-primary-color: mat.get-color-from-palette($primary, 700); $warn-color: mat.get-color-from-palette($warn, 500); $accent-color: mat.get-color-from-palette($accent, 500); @@ -11,6 +13,7 @@ $is-dark-theme: map-get($theme, is-dark); $back: map-get($background, background); $secondary-text: map-get($foreground, secondary-text); + $link-hover-color: if($is-dark-theme, $lighter-primary-color, $darker-primary-color); .footer-wrapper { padding: 2rem; @@ -46,7 +49,7 @@ } &:hover { - color: $primary-color; + color: $link-hover-color; } } } @@ -114,7 +117,7 @@ } &:hover { - color: $primary-color; + color: $link-hover-color; i { visibility: visible; diff --git a/console/src/app/modules/nav-toggle/nav-toggle.component.html b/console/src/app/modules/nav-toggle/nav-toggle.component.html index 35ca967148..7454498bf1 100644 --- a/console/src/app/modules/nav-toggle/nav-toggle.component.html +++ b/console/src/app/modules/nav-toggle/nav-toggle.component.html @@ -1,6 +1,11 @@ diff --git a/console/src/app/modules/nav-toggle/nav-toggle.component.scss b/console/src/app/modules/nav-toggle/nav-toggle.component.scss index 0e4a1a7227..2b813eafcd 100644 --- a/console/src/app/modules/nav-toggle/nav-toggle.component.scss +++ b/console/src/app/modules/nav-toggle/nav-toggle.component.scss @@ -31,6 +31,8 @@ background: none; cursor: pointer; font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif; + box-sizing: border-box; + height: 27px; .c_label { display: flex; @@ -38,8 +40,19 @@ text-align: center; .count { - display: none; + display: flex; + align-items: center; + justify-content: center; + height: 17px; + width: 17px; + border-radius: 50%; + padding: 2px; + margin: -2px -9px -2px 8px; margin-left: 6px; + background-color: if($is-dark-theme, #ffffff20, #00000020); + line-height: 18px; + font-size: 11px; + transition: background 0.2s ease; } } @@ -63,7 +76,7 @@ .c_label { .count { - display: inline-block; + background-color: if($is-dark-theme, #00000020, #ffffff20); } } } diff --git a/console/src/app/modules/nav/nav.component.html b/console/src/app/modules/nav/nav.component.html index bd020d94e4..ad48606c39 100644 --- a/console/src/app/modules/nav/nav.component.html +++ b/console/src/app/modules/nav/nav.component.html @@ -121,14 +121,14 @@ >
{{ 'MENU.PROJECT' | translate }} - ({{ - ((mgmtService.ownedProjectsCount | async) ?? 0) + - ((mgmtService.grantedProjectsCount | async) ?? 0) - }}) + +
+ {{ count }} +
+
+ 99+ +
+
diff --git a/console/src/app/modules/nav/nav.component.scss b/console/src/app/modules/nav/nav.component.scss index e16f5502cb..80e6e685fb 100644 --- a/console/src/app/modules/nav/nav.component.scss +++ b/console/src/app/modules/nav/nav.component.scss @@ -64,6 +64,8 @@ margin: 0.25rem 2px; white-space: nowrap; position: relative; + box-sizing: border-box; + height: 27px; .c_label { display: flex; @@ -72,7 +74,18 @@ .count { display: none; + align-items: center; + justify-content: center; + height: 17px; + width: 17px; + border-radius: 50%; + padding: 2px; + margin: -2px -9px -2px 8px; margin-left: 6px; + background-color: if($is-dark-theme, #ffffff20, #00000020); + line-height: 18px; + font-size: 11px; + transition: background 0.2s ease; } } @@ -97,6 +110,7 @@ .c_label { .count { display: inline-block; + background-color: if($is-dark-theme, #00000020, #ffffff20); } } } diff --git a/console/src/app/modules/nav/nav.component.ts b/console/src/app/modules/nav/nav.component.ts index 6f254f6ab3..d82f71cf30 100644 --- a/console/src/app/modules/nav/nav.component.ts +++ b/console/src/app/modules/nav/nav.component.ts @@ -4,7 +4,7 @@ import { HttpClient } from '@angular/common/http'; import { Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core'; import { UntypedFormControl } from '@angular/forms'; import { Router } from '@angular/router'; -import { BehaviorSubject, map, Observable, Subject, take } from 'rxjs'; +import { BehaviorSubject, combineLatest, forkJoin, map, merge, Observable, Subject, switchMap, take } from 'rxjs'; import { Org } from 'src/app/proto/generated/zitadel/org_pb'; import { User } from 'src/app/proto/generated/zitadel/user_pb'; import { AuthenticationService } from 'src/app/services/authentication.service'; @@ -132,4 +132,15 @@ export class NavComponent implements OnDestroy { public openHelp() { this.shortcutService.openOverviewDialog(); } + + public get projectcounter(): Observable { + return combineLatest({ + owned: this.mgmtService.ownedProjectsCount, + granted: this.mgmtService.grantedProjectsCount, + }).pipe( + map(({ owned, granted }) => { + return (owned ?? 0) + (granted ?? 0); + }), + ); + } } diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts index 805265505e..5a8940bbcb 100644 --- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts +++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts @@ -20,7 +20,15 @@ import { AdminService } from 'src/app/services/admin.service'; import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.service'; import { ManagementService } from 'src/app/services/mgmt.service'; import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service'; -import { ThemeService } from 'src/app/services/theme.service'; +import { + BACKGROUND, + DARK_BACKGROUND, + DARK_PRIMARY, + DARK_WARN, + PRIMARY, + ThemeService, + WARN, +} from 'src/app/services/theme.service'; import { ToastService } from 'src/app/services/toast.service'; import { InfoSectionType } from '../../info-section/info-section.component'; @@ -637,14 +645,14 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy { } private applyToConsole(labelpolicy: LabelPolicy.AsObject): void { - const darkPrimary = labelpolicy?.primaryColorDark || '#bbbafa'; - const lightPrimary = labelpolicy?.primaryColor || '#5469d4'; + const darkPrimary = labelpolicy?.primaryColorDark || DARK_PRIMARY; + const lightPrimary = labelpolicy?.primaryColor || PRIMARY; - const darkWarn = labelpolicy?.warnColorDark || '#ff3b5b'; - const lightWarn = labelpolicy?.warnColor || '#cd3d56'; + const darkWarn = labelpolicy?.warnColorDark || DARK_WARN; + const lightWarn = labelpolicy?.warnColor || WARN; - const darkBackground = labelpolicy?.backgroundColorDark || '#111827'; - const lightBackground = labelpolicy?.backgroundColor || '#fafafa'; + const darkBackground = labelpolicy?.backgroundColorDark || DARK_BACKGROUND; + const lightBackground = labelpolicy?.backgroundColor || BACKGROUND; this.themeService.savePrimaryColor(darkPrimary, true); this.themeService.savePrimaryColor(lightPrimary, false); diff --git a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss index a20e4ca13f..78ecaee09a 100644 --- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss +++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss @@ -3,9 +3,16 @@ @mixin search-user-autocomplete-theme($theme) { $primary: map-get($theme, primary); $primary-color: mat.get-color-from-palette($primary, 500); + $lighter-primary-color: mat.get-color-from-palette($primary, 300); + $darker-primary-color: mat.get-color-from-palette($primary, 700); + $background: map-get($theme, background); $foreground: map-get($theme, foreground); $secondary-text: map-get($foreground, secondary-text); + $is-dark-theme: map-get($theme, is-dark); + + $link-hover-color: if($is-dark-theme, mat.get-color-from-palette($primary, 200), $primary-color); + $link-color: if($is-dark-theme, $lighter-primary-color, $primary-color); .user-autocomplete-found { margin: 0.5rem 0; @@ -67,11 +74,12 @@ margin-top: 0.5rem; a { - color: $primary-color; + color: $link-color; + transition: color 0.2s ease; &:hover { cursor: pointer; - color: mat.get-color-from-palette($primary, 400); + color: $link-hover-color; text-decoration: underline; } } diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html index bc4c1da4ba..1af8a87432 100644 --- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html +++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html @@ -12,7 +12,9 @@
- +
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss index dd0410a521..404497483f 100644 --- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss +++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss @@ -88,6 +88,10 @@ } } +.user-spinner-wrapper { + margin: 1rem 0; +} + .icon-button { .icon { font-size: 1.2rem; diff --git a/console/src/app/services/theme.service.ts b/console/src/app/services/theme.service.ts index 2064571a0d..858fea68f1 100644 --- a/console/src/app/services/theme.service.ts +++ b/console/src/app/services/theme.service.ts @@ -13,17 +13,17 @@ export interface Color { contrastColor: string; } -const DARK_PRIMARY = '#bbbafa'; -const PRIMARY = '#5469d4'; +export const DARK_PRIMARY = '#2073c4'; +export const PRIMARY = '#5469d4'; -const DARK_WARN = '#ff3b5b'; -const WARN = '#cd3d56'; +export const DARK_WARN = '#ff3b5b'; +export const WARN = '#cd3d56'; -const DARK_BACKGROUND = '#111827'; -const BACKGROUND = '#fafafa'; +export const DARK_BACKGROUND = '#111827'; +export const BACKGROUND = '#fafafa'; -const DARK_TEXT = '#ffffff'; -const TEXT = '#000000'; +export const DARK_TEXT = '#ffffff'; +export const TEXT = '#000000'; @Injectable() export class ThemeService { diff --git a/internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss b/internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss index 57c677ed1c..e8f5b424e9 100644 --- a/internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss +++ b/internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss @@ -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, ); diff --git a/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss b/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss index 6e81533922..597a8ee4df 100644 --- a/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss +++ b/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss @@ -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; diff --git a/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css b/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css index c7b0dccdc3..161b6da636 100644 --- a/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css +++ b/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css @@ -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;