@nettyapps/ntyux 21.0.24 → 21.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/fesm2022/nettyapps-ntyux.mjs +35 -57
  2. package/fesm2022/nettyapps-ntyux.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/themes/deep-bluetheme.css +65 -75
  5. package/themes/graytheme.css +66 -76
  6. package/themes/greentheme.css +66 -76
  7. package/themes/nettytheme.css +313 -0
  8. package/themes/orangetheme.css +65 -75
  9. package/themes/purpletheme.css +65 -75
  10. package/themes/redtheme.css +65 -75
  11. package/themes/themes.css +1 -0
  12. package/types/nettyapps-ntyux.d.ts +14 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nettyapps/ntyux",
3
- "version": "21.0.24",
3
+ "version": "21.0.26",
4
4
  "description": "Generic UI components for NettyApps Angular applications.",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/themes/deep-bluetheme.css CHANGED
@@ -4,20 +4,9 @@
4
4
  color-scheme: dark;
5
5
 
6
6
  /* Required field */
7
- --mat-sys-required: light-dark(
8
- var(--mat-sys-secondary-container),
9
- var(--mat-sys-inverse-primary)
10
- );
11
-
12
- --mat-nty-save-record-header-bar: light-dark(
13
- var(--mat-sys-secondary-container),
14
- var(--mat-sys-primary)
15
- );
16
-
17
- --mat-nty-save-record-identifier: light-dark(
18
- var(--mat-sys-on-primary-container),
19
- var(--mat-sys-on-primary)
20
- );
7
+ --mat-sys-required: var(--mat-sys-inverse-primary);
8
+ --mat-nty-save-record-header-bar: var(--mat-sys-primary);
9
+ --mat-nty-save-record-identifier: var(--mat-sys-on-primary);
21
10
 
22
11
  /* Alert */
23
12
  --mat-sys-netty-success: #00f0a0;
@@ -30,81 +19,82 @@
30
19
  --mat-sys-netty-on-warning-container: #ffb800;
31
20
 
32
21
  /* Primary palette variables */
33
- --mat-sys-primary: light-dark(#005faf, #a5c8ff);
34
- --mat-sys-on-primary: light-dark(#ffffff, #00315f);
35
- --mat-sys-primary-container: light-dark(#d4e3ff, #004786);
36
- --mat-sys-on-primary-container: light-dark(#001c3a, #d4e3ff);
37
- --mat-sys-inverse-primary: light-dark(#a5c8ff, #005faf);
38
- --mat-sys-primary-fixed: light-dark(#d4e3ff, #d4e3ff);
39
- --mat-sys-primary-fixed-dim: light-dark(#a5c8ff, #a5c8ff);
40
- --mat-sys-on-primary-fixed: light-dark(#001c3a, #001c3a);
41
- --mat-sys-on-primary-fixed-variant: light-dark(#004786, #004786);
22
+ --mat-sys-primary: #a5c8ff;
23
+ --mat-sys-on-primary: #00315f;
24
+ --mat-sys-primary-container: #004786;
25
+ --mat-sys-on-primary-container: #d4e3ff;
26
+ --mat-sys-inverse-primary: #005faf;
27
+ --mat-sys-primary-fixed: #d4e3ff;
28
+ --mat-sys-primary-fixed-dim: #a5c8ff;
29
+ --mat-sys-on-primary-fixed: #001c3a;
30
+ --mat-sys-on-primary-fixed-variant: #004786;
42
31
 
43
32
  /* Secondary palette variables */
44
- --mat-sys-secondary: light-dark(#475f84, #afc8f1);
45
- --mat-sys-on-secondary: light-dark(#ffffff, #163153);
46
- --mat-sys-secondary-container: light-dark(#d4e3ff, #2f486a);
47
- --mat-sys-on-secondary-container: light-dark(#001c3a, #d4e3ff);
48
- --mat-sys-secondary-fixed: light-dark(#d4e3ff, #d4e3ff);
49
- --mat-sys-secondary-fixed-dim: light-dark(#afc8f1, #afc8f1);
50
- --mat-sys-on-secondary-fixed: light-dark(#001c3a, #001c3a);
51
- --mat-sys-on-secondary-fixed-variant: light-dark(#2f486a, #2f486a);
33
+ --mat-sys-secondary: #afc8f1;
34
+ --mat-sys-on-secondary: #163153;
35
+ --mat-sys-secondary-container: #2f486a;
36
+ --mat-sys-on-secondary-container: #d4e3ff;
37
+ --mat-sys-secondary-fixed: #d4e3ff;
38
+ --mat-sys-secondary-fixed-dim: #afc8f1;
39
+ --mat-sys-on-secondary-fixed: #001c3a;
40
+ --mat-sys-on-secondary-fixed-variant: #2f486a;
52
41
 
53
42
  /* Tertiary palette variables */
54
- --mat-sys-tertiary: light-dark(#8540a1, #edb1ff);
55
- --mat-sys-on-tertiary: light-dark(#ffffff, #52046e);
56
- --mat-sys-tertiary-container: light-dark(#f9d8ff, #6b2687);
57
- --mat-sys-on-tertiary-container: light-dark(#320046, #f9d8ff);
58
- --mat-sys-tertiary-fixed: light-dark(#f9d8ff, #f9d8ff);
59
- --mat-sys-tertiary-fixed-dim: light-dark(#edb1ff, #edb1ff);
60
- --mat-sys-on-tertiary-fixed: light-dark(#320046, #320046);
61
- --mat-sys-on-tertiary-fixed-variant: light-dark(#6b2687, #6b2687);
43
+ --mat-sys-tertiary: #edb1ff;
44
+ --mat-sys-on-tertiary: #52046e;
45
+ --mat-sys-tertiary-container: #6b2687;
46
+ --mat-sys-on-tertiary-container: #f9d8ff;
47
+ --mat-sys-tertiary-fixed: #f9d8ff;
48
+ --mat-sys-tertiary-fixed-dim: #edb1ff;
49
+ --mat-sys-on-tertiary-fixed: #320046;
50
+ --mat-sys-on-tertiary-fixed-variant: #6b2687;
62
51
 
63
52
  /* Neutral palette variables */
64
- --mat-sys-background: light-dark(#f9f9ff, #101319);
65
- --mat-sys-on-background: light-dark(#181c21, #e0e2ea);
66
- --mat-sys-surface: light-dark(#f9f9ff, #101319);
67
- --mat-sys-surface-dim: light-dark(#d8dae2, #101319);
68
- --mat-sys-surface-bright: light-dark(#f9f9ff, #363940);
69
- --mat-sys-surface-container-lowest: light-dark(#ffffff, #0b0e14);
70
- --mat-sys-surface-container: light-dark(#ecedf6, #1c2026);
71
- --mat-sys-surface-container-high: light-dark(#e6e8f0, #272a30);
72
- --mat-sys-surface-container-highest: light-dark(#e0e2ea, #32353b);
73
- --mat-sys-on-surface: light-dark(#181c21, #e0e2ea);
74
- --mat-sys-shadow: light-dark(#000000, #000000);
75
- --mat-sys-scrim: light-dark(#000000, #000000);
76
- --mat-sys-surface-tint: light-dark(#005faf, #a5c8ff);
77
- --mat-sys-inverse-surface: light-dark(#2d3037, #e0e2ea);
78
- --mat-sys-inverse-on-surface: light-dark(#eff0f9, #2d3037);
79
- --mat-sys-outline: light-dark(#717783, #8b919e);
80
- --mat-sys-outline-variant: light-dark(#c1c6d4, #414752);
81
- --mat-sys-neutral10: light-dark(
82
- #181c21,
83
- #181c21
84
- ); /* Variable used for the form field native select option text color */
53
+ --mat-sys-background: #101319;
54
+ --mat-sys-on-background: #e0e2ea;
55
+ --mat-sys-surface: #101319;
56
+ --mat-sys-surface-dim: #101319;
57
+ --mat-sys-surface-bright: #363940;
58
+ --mat-sys-surface-container-lowest: #0b0e14;
59
+ --mat-sys-surface-container: #1c2026;
60
+ --mat-sys-surface-container-high: #272a30;
61
+ --mat-sys-surface-container-highest: #32353b;
62
+ --mat-sys-on-surface: #e0e2ea;
63
+ --mat-sys-shadow: #000000;
64
+ --mat-sys-scrim: #000000;
65
+ --mat-sys-surface-tint: #a5c8ff;
66
+ --mat-sys-inverse-surface: #e0e2ea;
67
+ --mat-sys-inverse-on-surface: #2d3037;
68
+ --mat-sys-outline: #8b919e;
69
+ --mat-sys-outline-variant: #414752;
70
+ --mat-sys-neutral10: #181c21;
71
+ /* Variable used for the form field native select option text color */
85
72
 
86
73
  /* Error palette variables */
87
- --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
88
- --mat-sys-on-error: light-dark(#ffffff, #690005);
89
- --mat-sys-error-container: light-dark(#ffdad6, #93000a);
90
- --mat-sys-on-error-container: light-dark(#410002, #ffdad6);
74
+ --mat-sys-error: #ffb4ab;
75
+ --mat-sys-on-error: #690005;
76
+ --mat-sys-error-container: #93000a;
77
+ --mat-sys-on-error-container: #ffdad6;
91
78
 
92
79
  /* Neutral variant palette variables */
93
- --mat-sys-surface-variant: light-dark(#dde2f0, #414752);
94
- --mat-sys-on-surface-variant: light-dark(#414752, #c1c6d4);
95
- --mat-sys-neutral-variant20: light-dark(
96
- #2b313b,
97
- #2b313b
98
- ); /* Variable used for the sidenav scrim (container background shadow when opened) */
80
+ --mat-sys-surface-variant: #414752;
81
+ --mat-sys-on-surface-variant: #c1c6d4;
82
+ --mat-sys-neutral-variant20: #2b313b;
83
+ /* Variable used for the sidenav scrim (container background shadow when opened) */
99
84
 
100
85
  /* TYPOGRAPHY SYSTEM VARIABLES */
101
86
 
102
87
  /* Typography variables. Only used in the different typescale system variables. */
103
- --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
104
- --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
105
- --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
106
- --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
107
- --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
88
+ --mat-sys-brand-font-family: Roboto;
89
+ /* The font-family to use for brand text. */
90
+ --mat-sys-plain-font-family: Roboto;
91
+ /* The font-family to use for plain text. */
92
+ --mat-sys-bold-font-weight: 700;
93
+ /* The font-weight to use for bold text. */
94
+ --mat-sys-medium-font-weight: 500;
95
+ /* The font-weight to use for medium text. */
96
+ --mat-sys-regular-font-weight: 400;
97
+ /* The font-weight to use for regular text. */
108
98
 
109
99
  /* Typescale variables. */
110
100
  /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
package/themes/graytheme.css CHANGED
@@ -4,20 +4,9 @@
4
4
  color-scheme: light;
5
5
 
6
6
  /* Required field */
7
- --mat-sys-required: light-dark(
8
- var(--mat-sys-secondary-container),
9
- var(--mat-sys-inverse-primary)
10
- );
11
-
12
- --mat-nty-save-record-header-bar: light-dark(
13
- var(--mat-sys-secondary-container),
14
- var(--mat-sys-primary)
15
- );
16
-
17
- --mat-nty-save-record-identifier: light-dark(
18
- var(--mat-sys-on-primary-container),
19
- var(--mat-sys-on-primary)
20
- );
7
+ --mat-sys-required: var(--mat-sys-secondary-container);
8
+ --mat-nty-save-record-header-bar: var(--mat-sys-secondary-container);
9
+ --mat-nty-save-record-identifier: var(--mat-sys-on-primary-container);
21
10
 
22
11
  /* Alert */
23
12
  --mat-sys-netty-success: #00f0a0;
@@ -30,82 +19,83 @@
30
19
  --mat-sys-netty-on-warning-container: #ffb800;
31
20
 
32
21
  /* Primary palette variables */
33
- --mat-sys-primary: light-dark(#5e5e5e, #c8c6c6);
34
- --mat-sys-on-primary: light-dark(#ffffff, #303030);
35
- --mat-sys-primary-container: light-dark(#e4e2e2, #464747);
36
- --mat-sys-on-primary-container: light-dark(#1b1c1c, #e4e2e2);
37
- --mat-sys-inverse-primary: light-dark(#c8c6c6, #5e5e5e);
38
- --mat-sys-primary-fixed: light-dark(#e4e2e2, #e4e2e2);
39
- --mat-sys-primary-fixed-dim: light-dark(#c8c6c6, #c8c6c6);
40
- --mat-sys-on-primary-fixed: light-dark(#1b1c1c, #1b1c1c);
41
- --mat-sys-on-primary-fixed-variant: light-dark(#464747, #464747);
22
+ --mat-sys-primary: #5e5e5e;
23
+ --mat-sys-on-primary: #ffffff;
24
+ --mat-sys-primary-container: #e4e2e2;
25
+ --mat-sys-on-primary-container: #1b1c1c;
26
+ --mat-sys-inverse-primary: #c8c6c6;
27
+ --mat-sys-primary-fixed: #e4e2e2;
28
+ --mat-sys-primary-fixed-dim: #c8c6c6;
29
+ --mat-sys-on-primary-fixed: #1b1c1c;
30
+ --mat-sys-on-primary-fixed-variant: #464747;
42
31
 
43
32
  /* Secondary palette variables */
44
- --mat-sys-secondary: light-dark(#5f5e5e, #c8c6c5);
45
- --mat-sys-on-secondary: light-dark(#ffffff, #313030);
46
- --mat-sys-secondary-container: light-dark(#e5e2e1, #474746);
47
- --mat-sys-on-secondary-container: light-dark(#1c1b1b, #e5e2e1);
48
- --mat-sys-secondary-fixed: light-dark(#e5e2e1, #e5e2e1);
49
- --mat-sys-secondary-fixed-dim: light-dark(#c8c6c5, #c8c6c5);
50
- --mat-sys-on-secondary-fixed: light-dark(#1c1b1b, #1c1b1b);
51
- --mat-sys-on-secondary-fixed-variant: light-dark(#474746, #474746);
33
+ --mat-sys-secondary: #5f5e5e;
34
+ --mat-sys-on-secondary: #ffffff;
35
+ --mat-sys-secondary-container: #e5e2e1;
36
+ --mat-sys-on-secondary-container: #1c1b1b;
37
+ --mat-sys-secondary-fixed: #e5e2e1;
38
+ --mat-sys-secondary-fixed-dim: #c8c6c5;
39
+ --mat-sys-on-secondary-fixed: #1c1b1b;
40
+ --mat-sys-on-secondary-fixed-variant: #474746;
52
41
 
53
42
  /* Tertiary palette variables */
54
- --mat-sys-tertiary: light-dark(#615d5f, #cac5c7);
55
- --mat-sys-on-tertiary: light-dark(#ffffff, #323032);
56
- --mat-sys-tertiary-container: light-dark(#e7e1e3, #494648);
57
- --mat-sys-on-tertiary-container: light-dark(#1d1b1d, #e7e1e3);
58
- --mat-sys-tertiary-fixed: light-dark(#e7e1e3, #e7e1e3);
59
- --mat-sys-tertiary-fixed-dim: light-dark(#cac5c7, #cac5c7);
60
- --mat-sys-on-tertiary-fixed: light-dark(#1d1b1d, #1d1b1d);
61
- --mat-sys-on-tertiary-fixed-variant: light-dark(#494648, #494648);
43
+ --mat-sys-tertiary: #615d5f;
44
+ --mat-sys-on-tertiary: #ffffff;
45
+ --mat-sys-tertiary-container: #e7e1e3;
46
+ --mat-sys-on-tertiary-container: #1d1b1d;
47
+ --mat-sys-tertiary-fixed: #e7e1e3;
48
+ --mat-sys-tertiary-fixed-dim: #cac5c7;
49
+ --mat-sys-on-tertiary-fixed: #1d1b1d;
50
+ --mat-sys-on-tertiary-fixed-variant: #494648;
62
51
 
63
52
  /* Neutral palette variables */
64
- --mat-sys-background: light-dark(#fcf8f8, #141313);
65
- --mat-sys-on-background: light-dark(#1c1b1b, #e5e2e1);
66
- --mat-sys-surface: light-dark(#fcf8f8, #141313);
67
- --mat-sys-surface-dim: light-dark(#ddd9d8, #141313);
68
- --mat-sys-surface-bright: light-dark(#fcf8f8, #3a3939);
69
- --mat-sys-surface-container-low: light-dark(#f7f3f2, #1c1b1b);
70
- --mat-sys-surface-container-lowest: light-dark(#ffffff, #0e0e0e);
71
- --mat-sys-surface-container: light-dark(#f1edec, #201f1f);
72
- --mat-sys-surface-container-high: light-dark(#ebe7e7, #2a2a2a);
73
- --mat-sys-surface-container-highest: light-dark(#e5e2e1, #353434);
74
- --mat-sys-on-surface: light-dark(#1c1b1b, #e5e2e1);
75
- --mat-sys-shadow: light-dark(#000000, #000000);
76
- --mat-sys-scrim: light-dark(#000000, #000000);
77
- --mat-sys-surface-tint: light-dark(#5e5e5e, #c8c6c6);
78
- --mat-sys-inverse-surface: light-dark(#313030, #e5e2e1);
79
- --mat-sys-inverse-on-surface: light-dark(#f4f0ef, #313030);
80
- --mat-sys-outline: light-dark(#747878, #8e9192);
81
- --mat-sys-outline-variant: light-dark(#c4c7c7, #444748);
82
- --mat-sys-neutral10: light-dark(
83
- #1c1b1b,
84
- #1c1b1b
85
- ); /* Variable used for the form field native select option text color */
53
+ --mat-sys-background: #fcf8f8;
54
+ --mat-sys-on-background: #1c1b1b;
55
+ --mat-sys-surface: #fcf8f8;
56
+ --mat-sys-surface-dim: #ddd9d8;
57
+ --mat-sys-surface-bright: #fcf8f8;
58
+ --mat-sys-surface-container-low: #f7f3f2;
59
+ --mat-sys-surface-container-lowest: #ffffff;
60
+ --mat-sys-surface-container: #f1edec;
61
+ --mat-sys-surface-container-high: #ebe7e7;
62
+ --mat-sys-surface-container-highest: #e5e2e1;
63
+ --mat-sys-on-surface: #1c1b1b;
64
+ --mat-sys-shadow: #000000;
65
+ --mat-sys-scrim: #000000;
66
+ --mat-sys-surface-tint: #5e5e5e;
67
+ --mat-sys-inverse-surface: #313030;
68
+ --mat-sys-inverse-on-surface: #f4f0ef;
69
+ --mat-sys-outline: #747878;
70
+ --mat-sys-outline-variant: #c4c7c7;
71
+ --mat-sys-neutral10: #1c1b1b;
72
+ /* Variable used for the form field native select option text color */
86
73
 
87
74
  /* Error palette variables */
88
- --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
89
- --mat-sys-on-error: light-dark(#ffffff, #690005);
90
- --mat-sys-error-container: light-dark(#ffdad6, #93000a);
91
- --mat-sys-on-error-container: light-dark(#410002, #ffdad6);
75
+ --mat-sys-error: #ba1a1a;
76
+ --mat-sys-on-error: #ffffff;
77
+ --mat-sys-error-container: #ffdad6;
78
+ --mat-sys-on-error-container: #410002;
92
79
 
93
80
  /* Neutral variant palette variables */
94
- --mat-sys-surface-variant: light-dark(#e0e3e3, #444748);
95
- --mat-sys-on-surface-variant: light-dark(#444748, #c4c7c7);
96
- --mat-sys-neutral-variant20: light-dark(
97
- #2d3132,
98
- #2d3132
99
- ); /* Variable used for the sidenav scrim (container background shadow when opened) */
81
+ --mat-sys-surface-variant: #e0e3e3;
82
+ --mat-sys-on-surface-variant: #444748;
83
+ --mat-sys-neutral-variant20: #2d3132;
84
+ /* Variable used for the sidenav scrim (container background shadow when opened) */
100
85
 
101
86
  /* TYPOGRAPHY SYSTEM VARIABLES */
102
87
 
103
88
  /* Typography variables. Only used in the different typescale system variables. */
104
- --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
105
- --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
106
- --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
107
- --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
108
- --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
89
+ --mat-sys-brand-font-family: Roboto;
90
+ /* The font-family to use for brand text. */
91
+ --mat-sys-plain-font-family: Roboto;
92
+ /* The font-family to use for plain text. */
93
+ --mat-sys-bold-font-weight: 700;
94
+ /* The font-weight to use for bold text. */
95
+ --mat-sys-medium-font-weight: 500;
96
+ /* The font-weight to use for medium text. */
97
+ --mat-sys-regular-font-weight: 400;
98
+ /* The font-weight to use for regular text. */
109
99
 
110
100
  /* Typescale variables. */
111
101
  /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
package/themes/greentheme.css CHANGED
@@ -4,20 +4,9 @@
4
4
  color-scheme: light;
5
5
 
6
6
  /* Required field */
7
- --mat-sys-required: light-dark(
8
- var(--mat-sys-secondary-container),
9
- var(--mat-sys-inverse-primary)
10
- );
11
-
12
- --mat-nty-save-record-header-bar: light-dark(
13
- var(--mat-sys-secondary-container),
14
- var(--mat-sys-primary)
15
- );
16
-
17
- --mat-nty-save-record-identifier: light-dark(
18
- var(--mat-sys-on-primary-container),
19
- var(--mat-sys-on-primary)
20
- );
7
+ --mat-sys-required: var(--mat-sys-secondary-container);
8
+ --mat-nty-save-record-header-bar: var(--mat-sys-secondary-container);
9
+ --mat-nty-save-record-identifier: var(--mat-sys-on-primary-container);
21
10
 
22
11
  /* Alert */
23
12
  --mat-sys-netty-success: #00f0a0;
@@ -30,82 +19,83 @@
30
19
  --mat-sys-netty-on-warning-container: #ffb800;
31
20
 
32
21
  /* Primary palette variables */
33
- --mat-sys-primary: light-dark(#006b5e, #7ad7c6);
34
- --mat-sys-on-primary: light-dark(#ffffff, #003730);
35
- --mat-sys-primary-container: light-dark(#97f3e2, #005047);
36
- --mat-sys-on-primary-container: light-dark(#00201b, #97f3e2);
37
- --mat-sys-inverse-primary: light-dark(#7ad7c6, #006b5e);
38
- --mat-sys-primary-fixed: light-dark(#97f3e2, #97f3e2);
39
- --mat-sys-primary-fixed-dim: light-dark(#7ad7c6, #7ad7c6);
40
- --mat-sys-on-primary-fixed: light-dark(#00201b, #00201b);
41
- --mat-sys-on-primary-fixed-variant: light-dark(#005047, #005047);
22
+ --mat-sys-primary: #006b5e;
23
+ --mat-sys-on-primary: #ffffff;
24
+ --mat-sys-primary-container: #97f3e2;
25
+ --mat-sys-on-primary-container: #00201b;
26
+ --mat-sys-inverse-primary: #7ad7c6;
27
+ --mat-sys-primary-fixed: #97f3e2;
28
+ --mat-sys-primary-fixed-dim: #7ad7c6;
29
+ --mat-sys-on-primary-fixed: #00201b;
30
+ --mat-sys-on-primary-fixed-variant: #005047;
42
31
 
43
32
  /* Secondary palette variables */
44
- --mat-sys-secondary: light-dark(#44655e, #abcec5);
45
- --mat-sys-on-secondary: light-dark(#ffffff, #143630);
46
- --mat-sys-secondary-container: light-dark(#c6eae1, #2c4d46);
47
- --mat-sys-on-secondary-container: light-dark(#00201b, #c6eae1);
48
- --mat-sys-secondary-fixed: light-dark(#c6eae1, #c6eae1);
49
- --mat-sys-secondary-fixed-dim: light-dark(#abcec5, #abcec5);
50
- --mat-sys-on-secondary-fixed: light-dark(#00201b, #00201b);
51
- --mat-sys-on-secondary-fixed-variant: light-dark(#2c4d46, #2c4d46);
33
+ --mat-sys-secondary: #44655e;
34
+ --mat-sys-on-secondary: #ffffff;
35
+ --mat-sys-secondary-container: #c6eae1;
36
+ --mat-sys-on-secondary-container: #00201b;
37
+ --mat-sys-secondary-fixed: #c6eae1;
38
+ --mat-sys-secondary-fixed-dim: #abcec5;
39
+ --mat-sys-on-secondary-fixed: #00201b;
40
+ --mat-sys-on-secondary-fixed-variant: #2c4d46;
52
41
 
53
42
  /* Tertiary palette variables */
54
- --mat-sys-tertiary: light-dark(#695392, #d3bbff);
55
- --mat-sys-on-tertiary: light-dark(#ffffff, #392460);
56
- --mat-sys-tertiary-container: light-dark(#ebddff, #503b78);
57
- --mat-sys-on-tertiary-container: light-dark(#240c4a, #ebddff);
58
- --mat-sys-tertiary-fixed: light-dark(#ebddff, #ebddff);
59
- --mat-sys-tertiary-fixed-dim: light-dark(#d3bbff, #d3bbff);
60
- --mat-sys-on-tertiary-fixed: light-dark(#240c4a, #240c4a);
61
- --mat-sys-on-tertiary-fixed-variant: light-dark(#503b78, #503b78);
43
+ --mat-sys-tertiary: #695392;
44
+ --mat-sys-on-tertiary: #ffffff;
45
+ --mat-sys-tertiary-container: #ebddff;
46
+ --mat-sys-on-tertiary-container: #240c4a;
47
+ --mat-sys-tertiary-fixed: #ebddff;
48
+ --mat-sys-tertiary-fixed-dim: #d3bbff;
49
+ --mat-sys-on-tertiary-fixed: #240c4a;
50
+ --mat-sys-on-tertiary-fixed-variant: #503b78;
62
51
 
63
52
  /* Neutral palette variables */
64
- --mat-sys-background: light-dark(#f6faf8, #101413);
65
- --mat-sys-on-background: light-dark(#181d1b, #dfe3e1);
66
- --mat-sys-surface: light-dark(#f6faf8, #101413);
67
- --mat-sys-surface-dim: light-dark(#d7dbd8, #101413);
68
- --mat-sys-surface-bright: light-dark(#f6faf8, #353a39);
69
- --mat-sys-surface-container-low: light-dark(#f0f4f2, #181d1b);
70
- --mat-sys-surface-container-lowest: light-dark(#ffffff, #0a0f0e);
71
- --mat-sys-surface-container: light-dark(#ebefec, #1c211f);
72
- --mat-sys-surface-container-high: light-dark(#e5e9e7, #262b2a);
73
- --mat-sys-surface-container-highest: light-dark(#dfe3e1, #313634);
74
- --mat-sys-on-surface: light-dark(#181d1b, #dfe3e1);
75
- --mat-sys-shadow: light-dark(#000000, #000000);
76
- --mat-sys-scrim: light-dark(#000000, #000000);
77
- --mat-sys-surface-tint: light-dark(#006b5e, #7ad7c6);
78
- --mat-sys-inverse-surface: light-dark(#2d3130, #dfe3e1);
79
- --mat-sys-inverse-on-surface: light-dark(#eef2ef, #2d3130);
80
- --mat-sys-outline: light-dark(#6e7a76, #879390);
81
- --mat-sys-outline-variant: light-dark(#bdc9c5, #3e4946);
82
- --mat-sys-neutral10: light-dark(
83
- #181d1b,
84
- #181d1b
85
- ); /* Variable used for the form field native select option text color */
53
+ --mat-sys-background: #f6faf8;
54
+ --mat-sys-on-background: #181d1b;
55
+ --mat-sys-surface: #f6faf8;
56
+ --mat-sys-surface-dim: #d7dbd8;
57
+ --mat-sys-surface-bright: #f6faf8;
58
+ --mat-sys-surface-container-low: #f0f4f2;
59
+ --mat-sys-surface-container-lowest: #ffffff;
60
+ --mat-sys-surface-container: #ebefec;
61
+ --mat-sys-surface-container-high: #e5e9e7;
62
+ --mat-sys-surface-container-highest: #dfe3e1;
63
+ --mat-sys-on-surface: #181d1b;
64
+ --mat-sys-shadow: #000000;
65
+ --mat-sys-scrim: #000000;
66
+ --mat-sys-surface-tint: #006b5e;
67
+ --mat-sys-inverse-surface: #2d3130;
68
+ --mat-sys-inverse-on-surface: #eef2ef;
69
+ --mat-sys-outline: #6e7a76;
70
+ --mat-sys-outline-variant: #bdc9c5;
71
+ --mat-sys-neutral10: #181d1b;
72
+ /* Variable used for the form field native select option text color */
86
73
 
87
74
  /* Error palette variables */
88
- --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
89
- --mat-sys-on-error: light-dark(#ffffff, #690005);
90
- --mat-sys-error-container: light-dark(#ffdad6, #93000a);
91
- --mat-sys-on-error-container: light-dark(#410002, #ffdad6);
75
+ --mat-sys-error: #ba1a1a;
76
+ --mat-sys-on-error: #ffffff;
77
+ --mat-sys-error-container: #ffdad6;
78
+ --mat-sys-on-error-container: #410002;
92
79
 
93
80
  /* Neutral variant palette variables */
94
- --mat-sys-surface-variant: light-dark(#d9e5e1, #3e4946);
95
- --mat-sys-on-surface-variant: light-dark(#3e4946, #bdc9c5);
96
- --mat-sys-neutral-variant20: light-dark(
97
- #283330,
98
- #283330
99
- ); /* Variable used for the sidenav scrim (container background shadow when opened) */
81
+ --mat-sys-surface-variant: #d9e5e1;
82
+ --mat-sys-on-surface-variant: #3e4946;
83
+ --mat-sys-neutral-variant20: #283330;
84
+ /* Variable used for the sidenav scrim (container background shadow when opened) */
100
85
 
101
86
  /* TYPOGRAPHY SYSTEM VARIABLES */
102
87
 
103
88
  /* Typography variables. Only used in the different typescale system variables. */
104
- --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
105
- --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
106
- --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
107
- --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
108
- --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
89
+ --mat-sys-brand-font-family: Roboto;
90
+ /* The font-family to use for brand text. */
91
+ --mat-sys-plain-font-family: Roboto;
92
+ /* The font-family to use for plain text. */
93
+ --mat-sys-bold-font-weight: 700;
94
+ /* The font-weight to use for bold text. */
95
+ --mat-sys-medium-font-weight: 500;
96
+ /* The font-weight to use for medium text. */
97
+ --mat-sys-regular-font-weight: 400;
98
+ /* The font-weight to use for regular text. */
109
99
 
110
100
  /* Typescale variables. */
111
101
  /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since