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

feat(console): codemirror code editor for actions (#2736)

Browse Source 
* feat: codemirror code editor

* cleanup

* lint

* mat import

* lint
This commit is contained in:
Max Peintner
2021-12-08 10:48:23 +01:00
committed by GitHub
parent 211dc7c21f
commit 7bf7379a05
11 changed files with 492 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
console/src/styles.scss
View File

@@ -1,5 +1,6 @@
@use '@angular/material' as mat;
@import '~codemirror/lib/codemirror';
@import './component-themes';
@import '@angular/material/theming';
@@ -23,22 +24,21 @@
}
$caos-dark-primary: (
50 : var(--theme-dark-primary-50),
100 : var(--theme-dark-primary-100),
200 : var(--theme-dark-primary-200),
300 : var(--theme-dark-primary-300),
400 : var(--theme-dark-primary-400),
500 : var(--theme-dark-primary-500),
600 : var(--theme-dark-primary-600),
700 : var(--theme-dark-primary-700),
800 : var(--theme-dark-primary-800),
900 : var(--theme-dark-primary-900),
A100 : var(--theme-dark-primary-A100),
A200 : var(--theme-dark-primary-A200),
A400 : var(--theme-dark-primary-A400),
A700 : var(--theme-dark-primary-A700),
contrast:
(
50: var(--theme-dark-primary-50),
100: var(--theme-dark-primary-100),
200: var(--theme-dark-primary-200),
300: var(--theme-dark-primary-300),
400: var(--theme-dark-primary-400),
500: var(--theme-dark-primary-500),
600: var(--theme-dark-primary-600),
700: var(--theme-dark-primary-700),
800: var(--theme-dark-primary-800),
900: var(--theme-dark-primary-900),
A100: var(--theme-dark-primary-A100),
A200: var(--theme-dark-primary-A200),
A400: var(--theme-dark-primary-A400),
A700: var(--theme-dark-primary-A700),
contrast: (
50: var(--theme-dark-primary-contrast-50),
100: var(--theme-dark-primary-contrast-100),
200: var(--theme-dark-primary-contrast-200),
@@ -52,27 +52,26 @@ $caos-dark-primary: (
A100: var(--theme-dark-primary-contrast-A100),
A200: var(--theme-dark-primary-contrast-A200),
A400: var(--theme-dark-primary-contrast-A400),
A700: var(--theme-dark-primary-contrast-A700)
)
A700: var(--theme-dark-primary-contrast-A700),
),
);
$caos-light-primary: (
50 : var(--theme-light-primary-50),
100 : var(--theme-light-primary-100),
200 : var(--theme-light-primary-200),
300 : var(--theme-light-primary-300),
400 : var(--theme-light-primary-400),
500 : var(--theme-light-primary-500),
600 : var(--theme-light-primary-600),
700 : var(--theme-light-primary-700),
800 : var(--theme-light-primary-800),
900 : var(--theme-light-primary-900),
A100 : var(--theme-light-primary-A100),
A200 : var(--theme-light-primary-A200),
A400 : var(--theme-light-primary-A400),
A700 : var(--theme-light-primary-A700),
contrast:
(
50: var(--theme-light-primary-50),
100: var(--theme-light-primary-100),
200: var(--theme-light-primary-200),
300: var(--theme-light-primary-300),
400: var(--theme-light-primary-400),
500: var(--theme-light-primary-500),
600: var(--theme-light-primary-600),
700: var(--theme-light-primary-700),
800: var(--theme-light-primary-800),
900: var(--theme-light-primary-900),
A100: var(--theme-light-primary-A100),
A200: var(--theme-light-primary-A200),
A400: var(--theme-light-primary-A400),
A700: var(--theme-light-primary-A700),
contrast: (
50: var(--theme-light-primary-contrast-50),
100: var(--theme-light-primary-contrast-100),
200: var(--theme-light-primary-contrast-200),
@@ -86,27 +85,26 @@ $caos-light-primary: (
A100: var(--theme-light-primary-contrast-A100),
A200: var(--theme-light-primary-contrast-A200),
A400: var(--theme-light-primary-contrast-A400),
A700: var(--theme-light-primary-contrast-A700)
)
A700: var(--theme-light-primary-contrast-A700),
),
);
$caos-dark-background: (
50 : var(--theme-dark-background-50),
100 : var(--theme-dark-background-100),
200 : var(--theme-dark-background-200),
300 : var(--theme-dark-background-300),
400 : var(--theme-dark-background-400),
500 : var(--theme-dark-background-500),
600 : var(--theme-dark-background-600),
700 : var(--theme-dark-background-700),
800 : var(--theme-dark-background-800),
900 : var(--theme-dark-background-900),
A100 : var(--theme-dark-background-A100),
A200 : var(--theme-dark-background-A200),
A400 : var(--theme-dark-background-A400),
A700 : var(--theme-dark-background-A700),
contrast:
(
50: var(--theme-dark-background-50),
100: var(--theme-dark-background-100),
200: var(--theme-dark-background-200),
300: var(--theme-dark-background-300),
400: var(--theme-dark-background-400),
500: var(--theme-dark-background-500),
600: var(--theme-dark-background-600),
700: var(--theme-dark-background-700),
800: var(--theme-dark-background-800),
900: var(--theme-dark-background-900),
A100: var(--theme-dark-background-A100),
A200: var(--theme-dark-background-A200),
A400: var(--theme-dark-background-A400),
A700: var(--theme-dark-background-A700),
contrast: (
50: var(--theme-dark-background-contrast-50),
100: var(--theme-dark-background-contrast-100),
200: var(--theme-dark-background-contrast-200),
@@ -120,27 +118,26 @@ $caos-dark-background: (
A100: var(--theme-dark-background-contrast-A100),
A200: var(--theme-dark-background-contrast-A200),
A400: var(--theme-dark-background-contrast-A400),
A700: var(--theme-dark-background-contrast-A700)
)
A700: var(--theme-dark-background-contrast-A700),
),
);
$caos-light-background: (
50 : var(--theme-light-background-50),
100 : var(--theme-light-background-100),
200 : var(--theme-light-background-200),
300 : var(--theme-light-background-300),
400 : var(--theme-light-background-400),
500 : var(--theme-light-background-500),
600 : var(--theme-light-background-600),
700 : var(--theme-light-background-700),
800 : var(--theme-light-background-800),
900 : var(--theme-light-background-900),
A100 : var(--theme-light-background-A100),
A200 : var(--theme-light-background-A200),
A400 : var(--theme-light-background-A400),
A700 : var(--theme-light-background-A700),
contrast:
(
50: var(--theme-light-background-50),
100: var(--theme-light-background-100),
200: var(--theme-light-background-200),
300: var(--theme-light-background-300),
400: var(--theme-light-background-400),
500: var(--theme-light-background-500),
600: var(--theme-light-background-600),
700: var(--theme-light-background-700),
800: var(--theme-light-background-800),
900: var(--theme-light-background-900),
A100: var(--theme-light-background-A100),
A200: var(--theme-light-background-A200),
A400: var(--theme-light-background-A400),
A700: var(--theme-light-background-A700),
contrast: (
50: var(--theme-light-background-contrast-50),
100: var(--theme-light-background-contrast-100),
200: var(--theme-light-background-contrast-200),
@@ -154,27 +151,26 @@ $caos-light-background: (
A100: var(--theme-light-background-contrast-A100),
A200: var(--theme-light-background-contrast-A200),
A400: var(--theme-light-background-contrast-A400),
A700: var(--theme-light-background-contrast-A700)
)
A700: var(--theme-light-background-contrast-A700),
),
);
$caos-dark-warn: (
50 : var(--theme-dark-warn-50),
100 : var(--theme-dark-warn-100),
200 : var(--theme-dark-warn-200),
300 : var(--theme-dark-warn-300),
400 : var(--theme-dark-warn-400),
500 : var(--theme-dark-warn-500),
600 : var(--theme-dark-warn-600),
700 : var(--theme-dark-warn-700),
800 : var(--theme-dark-warn-800),
900 : var(--theme-dark-warn-900),
A100 : var(--theme-dark-warn-A100),
A200 : var(--theme-dark-warn-A200),
A400 : var(--theme-dark-warn-A400),
A700 : var(--theme-dark-warn-A700),
contrast:
(
50: var(--theme-dark-warn-50),
100: var(--theme-dark-warn-100),
200: var(--theme-dark-warn-200),
300: var(--theme-dark-warn-300),
400: var(--theme-dark-warn-400),
500: var(--theme-dark-warn-500),
600: var(--theme-dark-warn-600),
700: var(--theme-dark-warn-700),
800: var(--theme-dark-warn-800),
900: var(--theme-dark-warn-900),
A100: var(--theme-dark-warn-A100),
A200: var(--theme-dark-warn-A200),
A400: var(--theme-dark-warn-A400),
A700: var(--theme-dark-warn-A700),
contrast: (
50: var(--theme-dark-warn-contrast-50),
100: var(--theme-dark-warn-contrast-100),
200: var(--theme-dark-warn-contrast-200),
@@ -188,27 +184,26 @@ $caos-dark-warn: (
A100: var(--theme-dark-warn-contrast-A100),
A200: var(--theme-dark-warn-contrast-A200),
A400: var(--theme-dark-warn-contrast-A400),
A700: var(--theme-dark-warn-contrast-A700)
)
A700: var(--theme-dark-warn-contrast-A700),
),
);
$caos-light-warn: (
50 : var(--theme-light-warn-50),
100 : var(--theme-light-warn-100),
200 : var(--theme-light-warn-200),
300 : var(--theme-light-warn-300),
400 : var(--theme-light-warn-400),
500 : var(--theme-light-warn-500),
600 : var(--theme-light-warn-600),
700 : var(--theme-light-warn-700),
800 : var(--theme-light-warn-800),
900 : var(--theme-light-warn-900),
A100 : var(--theme-light-warn-A100),
A200 : var(--theme-light-warn-A200),
A400 : var(--theme-light-warn-A400),
A700 : var(--theme-light-warn-A700),
contrast:
(
50: var(--theme-light-warn-50),
100: var(--theme-light-warn-100),
200: var(--theme-light-warn-200),
300: var(--theme-light-warn-300),
400: var(--theme-light-warn-400),
500: var(--theme-light-warn-500),
600: var(--theme-light-warn-600),
700: var(--theme-light-warn-700),
800: var(--theme-light-warn-800),
900: var(--theme-light-warn-900),
A100: var(--theme-light-warn-A100),
A200: var(--theme-light-warn-A200),
A400: var(--theme-light-warn-A400),
A700: var(--theme-light-warn-A700),
contrast: (
50: var(--theme-light-warn-contrast-50),
100: var(--theme-light-warn-contrast-100),
200: var(--theme-light-warn-contrast-200),
@@ -222,8 +217,8 @@ $caos-light-warn: (
A100: var(--theme-light-warn-contrast-A100),
A200: var(--theme-light-warn-contrast-A200),
A400: var(--theme-light-warn-contrast-A400),
A700: var(--theme-light-warn-contrast-A700)
)
A700: var(--theme-light-warn-contrast-A700),
),
);
$caos-dark-theme-background: (
@@ -244,7 +239,7 @@ $caos-dark-theme-background: (
tooltip: map_get($mat-gray, 700),
infosection: map_get($caos-dark-background, 300),
warninfosection: #4f566b,
successinfosection: #4f566b
successinfosection: #4f566b,
);
$caos-light-theme-background: (
@@ -265,7 +260,7 @@ $caos-light-theme-background: (
tooltip: map_get($mat-gray, 700),
infosection: #e4e4e4,
warninfosection: #ffc1c1,
successinfosection: #cbf4c9
successinfosection: #cbf4c9,
);
$caos-dark-theme-foreground: (
@@ -286,7 +281,7 @@ $caos-dark-theme-foreground: (
slider-off-active: rgba(white, .38),
infosection: #f0f0f0,
warninfosection: #ffc1c1,
successinfosection: #cbf4c9
successinfosection: #cbf4c9,
);
$caos-light-theme-foreground: (
@@ -307,7 +302,7 @@ $caos-light-theme-foreground: (
slider-off-active: rgba(black, .38),
infosection: #4a4a4a,
warninfosection: #620e0e,
successinfosection: #0e6245
successinfosection: #0e6245,
);
$caos-dark-app-theme: (
@@ -316,7 +311,7 @@ $caos-dark-app-theme: (
warn: mat-palette($caos-dark-warn),
is-dark: true,
foreground: $caos-dark-theme-foreground,
background: $caos-dark-theme-background
background: $caos-dark-theme-background,
);
$caos-light-app-theme: (
@@ -325,10 +320,13 @@ $caos-light-app-theme: (
warn: mat-palette($caos-light-warn),
is-dark: false,
foreground: $caos-light-theme-foreground,
background: $caos-light-theme-background
background: $caos-light-theme-background,
);
$custom-typography: mat.define-typography-config($font-family: 'Lato');
$custom-typography:
mat.define-typography-config(
$font-family: 'Lato',
);
@include mat.core($custom-typography);
@include component-themes($caos-dark-app-theme);
@@ -443,14 +441,14 @@ body {
'Lato',
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
}