mirror of
https://github.com/zitadel/zitadel.git
synced 2025-08-26 05:44:08 +00:00
feat(console): MDC components (#6482)
mdc components --------- Co-authored-by: Elio Bischof <eliobischof@gmail.com>
This commit is contained in:
Max Peintner
5
console/src/styles/ailerons.scss
Normal file
5
console/src/styles/ailerons.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@font-face {
|
||||
font-family: ailerons;
|
||||
font-display: auto;
|
||||
src: url(../assets/ailerons.otf) format('opentype');
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin cnsl-color-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$secondary-text: map-get($foreground, secondary-text);
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin cnsl-error-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat.get-color-from-palette($warn, 500);
|
||||
$warn-color: map-get($warn, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.cnsl-error {
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin input-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$primary-light-color: mat.get-color-from-palette($primary, 200);
|
||||
$primary-color: map-get($primary, 500);
|
||||
$primary-light-color: map-get($primary, 200);
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat.get-color-from-palette($warn, 500);
|
||||
$warn-color: map-get($warn, 500);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
[cnslInput],
|
||||
.mat-select {
|
||||
.mat-mdc-select {
|
||||
box-sizing: border-box;
|
||||
padding-inline-start: 10px;
|
||||
outline: none;
|
||||
@@ -30,7 +28,7 @@
|
||||
background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
width: 100%;
|
||||
color: mat.get-color-from-palette($foreground, text);
|
||||
color: map-get($foreground, text);
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
@@ -64,8 +62,8 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.mat-paginator {
|
||||
.mat-select {
|
||||
.mat-mdc-paginator {
|
||||
.mat-mdc-select {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../assets/fonts/lato/Lato-Regular.ttf) format('truetype');
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); // @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// src: url(../assets/fonts/lato/Lato-Regular.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url(../assets/fonts/lato/Lato-Black.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: normal;
|
||||
// font-weight: 900;
|
||||
// src: url(../assets/fonts/lato/Lato-Black.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: url(../assets/fonts/lato/Lato-BlackItalic.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: italic;
|
||||
// font-weight: 900;
|
||||
// src: url(../assets/fonts/lato/Lato-BlackItalic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(../assets/fonts/lato/Lato-Bold.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: normal;
|
||||
// font-weight: 700;
|
||||
// src: url(../assets/fonts/lato/Lato-Bold.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url(../assets/fonts/lato/Lato-BoldItalic.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: italic;
|
||||
// font-weight: 700;
|
||||
// src: url(../assets/fonts/lato/Lato-BoldItalic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url(../assets/fonts/lato/Lato-Italic.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: italic;
|
||||
// font-weight: 400;
|
||||
// src: url(../assets/fonts/lato/Lato-Italic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(../assets/fonts/lato/Lato-Light.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: normal;
|
||||
// font-weight: 300;
|
||||
// src: url(../assets/fonts/lato/Lato-Light.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: url(../assets/fonts/lato/Lato-LightItalic.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: italic;
|
||||
// font-weight: 300;
|
||||
// src: url(../assets/fonts/lato/Lato-LightItalic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: url(../assets/fonts/lato/Lato-Thin.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: normal;
|
||||
// font-weight: 100;
|
||||
// src: url(../assets/fonts/lato/Lato-Thin.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
src: url(../assets/fonts/lato/Lato-ThinItalic.ttf) format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: Lato;
|
||||
// font-style: italic;
|
||||
// font-weight: 100;
|
||||
// src: url(../assets/fonts/lato/Lato-ThinItalic.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin link-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$primary-color-lighter: mat.get-color-from-palette($primary, A300);
|
||||
$primary-color: map-get($primary, 500);
|
||||
$primary-color-lighter: map-get($primary, A300);
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
}
|
||||
// a:not([mat-icon-button]):not([mat-stroked-button]):not([mat-raised-button]) {
|
||||
// color: $primary-color;
|
||||
// }
|
||||
|
||||
a:hover {
|
||||
color: $primary-color-lighter;
|
||||
}
|
||||
// a:not([mat-icon-button]):not([mat-stroked-button]):not([mat-raised-button]):hover {
|
||||
// color: $primary-color-lighter;
|
||||
// }
|
||||
}
|
||||
|
||||
43
console/src/styles/palette-helper.scss
Normal file
43
console/src/styles/palette-helper.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
@function modify-palette($theme, $map, $partial) {
|
||||
// A theme is a map with the following structure:
|
||||
// (
|
||||
// color: (..., background),
|
||||
// ...,
|
||||
// background: ...
|
||||
// )
|
||||
//
|
||||
// We need to replace the background color in two palettes.
|
||||
// Once in the background palette inside the color map.
|
||||
// Again in the background palette itself.
|
||||
|
||||
// Replace the background in the color object's background palette.
|
||||
$theme-color: map-get($theme, color);
|
||||
$color-map-palette: map-get($theme-color, $map);
|
||||
$color-map-palette: map-merge($color-map-palette, $partial);
|
||||
|
||||
// Replace the background in the background palette.
|
||||
$background-palette: map-get($theme, $map);
|
||||
$background-palette: map-merge($background-palette, $partial);
|
||||
|
||||
// Merge the changes into a new theme.
|
||||
$modified-theme-color: map-merge(
|
||||
$theme-color,
|
||||
(
|
||||
$map: $color-map-palette,
|
||||
)
|
||||
);
|
||||
$modified-theme: map-merge(
|
||||
$theme,
|
||||
(
|
||||
color: $modified-theme-color,
|
||||
)
|
||||
);
|
||||
$modified-theme: map-merge(
|
||||
$modified-theme,
|
||||
(
|
||||
$map: $background-palette,
|
||||
)
|
||||
);
|
||||
|
||||
@return $modified-theme;
|
||||
}
|
||||
134
console/src/styles/palette.scss
Normal file
134
console/src/styles/palette.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
$cnsl-dark-theme-text: #ffffff;
|
||||
$cnsl-light-theme-text: hsla(0, 0%, 0%, 0.87);
|
||||
|
||||
$caos-dark-primary: (
|
||||
50: #f1f7fd,
|
||||
100: #afd1f2,
|
||||
200: #7fb5ea,
|
||||
300: #4192e0,
|
||||
400: #2782dc,
|
||||
500: #2073c4,
|
||||
600: #1c64aa,
|
||||
700: #17548f,
|
||||
800: #134575,
|
||||
900: #0f355b,
|
||||
A100: #e4f2ff,
|
||||
A200: #7ebfff,
|
||||
A400: #278df0,
|
||||
A700: #1d80e0,
|
||||
contrast: (
|
||||
50: hsla(0, 0%, 0%, 0.87),
|
||||
100: hsla(0, 0%, 0%, 0.87),
|
||||
200: hsla(0, 0%, 0%, 0.87),
|
||||
300: hsla(0, 0%, 0%, 0.87),
|
||||
400: hsla(0, 0%, 0%, 0.87),
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: hsla(0, 0%, 0%, 0.87),
|
||||
A200: hsla(0, 0%, 0%, 0.87),
|
||||
A400: hsla(0, 0%, 0%, 0.87),
|
||||
A700: hsla(0, 0%, 0%, 0.87),
|
||||
),
|
||||
);
|
||||
|
||||
$caos-light-primary: (
|
||||
50: #ffffff,
|
||||
100: #ebedfa,
|
||||
200: #bec6ef,
|
||||
300: #8594e0,
|
||||
400: #6c7eda,
|
||||
500: #5469d4,
|
||||
600: #3c54ce,
|
||||
700: #2f46bc,
|
||||
800: #293da3,
|
||||
900: #23348b,
|
||||
A100: #ffffff,
|
||||
A200: #c5cefc,
|
||||
A400: #7085ea,
|
||||
A700: #6478de,
|
||||
contrast: (
|
||||
50: hsla(0, 0%, 0%, 0.87),
|
||||
100: hsla(0, 0%, 0%, 0.87),
|
||||
200: hsla(0, 0%, 0%, 0.87),
|
||||
300: hsla(0, 0%, 0%, 0.87),
|
||||
400: hsla(0, 0%, 0%, 0.87),
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: hsla(0, 0%, 0%, 0.87),
|
||||
A200: hsla(0, 0%, 0%, 0.87),
|
||||
A400: hsla(0, 0%, 0%, 0.87),
|
||||
A700: hsla(0, 0%, 0%, 0.87),
|
||||
),
|
||||
);
|
||||
|
||||
$caos-dark-warn: (
|
||||
50: #ffe7eb,
|
||||
100: #ffc4ce,
|
||||
200: #ff9dad,
|
||||
300: #ff768c,
|
||||
400: #ff5874,
|
||||
500: #ff3b5b,
|
||||
600: #ff3553,
|
||||
700: #ff2d49,
|
||||
800: #ff2640,
|
||||
900: #ff192f,
|
||||
A100: #ffffff,
|
||||
A200: #fffdfd,
|
||||
A400: #ffcace,
|
||||
A700: #ffb1b7,
|
||||
contrast: (
|
||||
50: $cnsl-dark-theme-text,
|
||||
100: $cnsl-dark-theme-text,
|
||||
200: $cnsl-dark-theme-text,
|
||||
300: $cnsl-dark-theme-text,
|
||||
400: $cnsl-dark-theme-text,
|
||||
500: $cnsl-light-theme-text,
|
||||
600: $cnsl-light-theme-text,
|
||||
700: $cnsl-light-theme-text,
|
||||
800: $cnsl-light-theme-text,
|
||||
900: $cnsl-light-theme-text,
|
||||
A100: $cnsl-dark-theme-text,
|
||||
A200: $cnsl-light-theme-text,
|
||||
A400: $cnsl-light-theme-text,
|
||||
A700: $cnsl-light-theme-text,
|
||||
),
|
||||
);
|
||||
|
||||
$caos-light-warn: (
|
||||
50: #f9e8eb,
|
||||
100: #f0c5cc,
|
||||
200: #e69eab,
|
||||
300: #dc7789,
|
||||
400: #d55a6f,
|
||||
500: #cd3d56,
|
||||
600: #c8374f,
|
||||
700: #c12f45,
|
||||
800: #ba273c,
|
||||
900: #ae1a2b,
|
||||
A100: #ffe4e6,
|
||||
A200: #ffb1b9,
|
||||
A400: #ff7e8b,
|
||||
A700: #ff6474,
|
||||
contrast: (
|
||||
50: $cnsl-dark-theme-text,
|
||||
100: $cnsl-dark-theme-text,
|
||||
200: $cnsl-dark-theme-text,
|
||||
300: $cnsl-dark-theme-text,
|
||||
400: $cnsl-dark-theme-text,
|
||||
500: $cnsl-light-theme-text,
|
||||
600: $cnsl-light-theme-text,
|
||||
700: $cnsl-light-theme-text,
|
||||
800: $cnsl-light-theme-text,
|
||||
900: $cnsl-light-theme-text,
|
||||
A100: $cnsl-dark-theme-text,
|
||||
A200: $cnsl-light-theme-text,
|
||||
A400: $cnsl-light-theme-text,
|
||||
A700: $cnsl-light-theme-text,
|
||||
),
|
||||
);
|
||||
@@ -1,14 +1,12 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin table-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$primary-color: map-get($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.mat-table,
|
||||
.mat-paginator {
|
||||
.mat-mdc-table,
|
||||
.mat-mdc-paginator {
|
||||
background-color: inherit !important;
|
||||
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
@@ -28,7 +26,7 @@
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
|
||||
&.mat-header-cell {
|
||||
&.mat-mdc-header-cell {
|
||||
color: map-get($foreground, text);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
@@ -40,7 +38,7 @@
|
||||
}
|
||||
|
||||
tr {
|
||||
&.mat-header-row {
|
||||
&.mat-mdc-header-row {
|
||||
height: 40px !important;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
@@ -78,7 +76,7 @@
|
||||
padding: 0 0.5rem !important;
|
||||
}
|
||||
|
||||
td .mat-checkbox,
|
||||
td .mat-mdc-checkbox,
|
||||
th .mat-checkbox {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@@ -96,15 +94,27 @@
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 65px;
|
||||
max-width: 65px;
|
||||
padding-right: 1rem !important;
|
||||
width: 80px;
|
||||
max-width: 80px;
|
||||
|
||||
.checkbox {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
th .selection {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.state {
|
||||
border-radius: 50vw;
|
||||
padding: 2px 0.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4);
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin toast-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat.get-color-from-palette($warn, 500);
|
||||
$warn-color: map-get($warn, 500);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
@@ -12,7 +10,13 @@
|
||||
// }
|
||||
|
||||
.data-e2e-failure {
|
||||
color: $warn-color !important;
|
||||
background-color: mat.get-color-from-palette($background, cards) !important;
|
||||
.mdc-snackbar__surface {
|
||||
background-color: map-get($background, toast) !important;
|
||||
color: $warn-color !important;
|
||||
|
||||
* {
|
||||
color: $warn-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user