@3dsource/source-ui 0.0.28 → 0.0.30

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 (11) hide show
  1. package/README.md +57 -62
  2. package/fesm2022/3dsource-source-ui.mjs +143 -143
  3. package/fesm2022/3dsource-source-ui.mjs.map +1 -1
  4. package/package.json +2 -2
  5. package/styles/material/checkbox.scss +102 -18
  6. package/styles/material/form-field.scss +256 -36
  7. package/styles/material/radio.scss +73 -15
  8. package/styles/material/select.scss +54 -36
  9. package/styles/material/theme.scss +307 -301
  10. package/styles/material/toggle.scss +82 -24
  11. package/styles/toastr/toastr.scss +1 -1
package/styles/material/theme.scss CHANGED
@@ -1,328 +1,334 @@
1
- @use '@angular/material' as mat;
2
- /* Note: Color palettes are generated from primary: #017BFF, neutral: #fff, error: #C5280C */
3
- :root {
4
- /* COLOR SYSTEM VARIABLES */
5
- color-scheme: light;
6
- /* Primary palette variables */
7
- // --mat-sys-primary: light-dark(var(--src-color-brand-500), #adc7ff);
8
- --mat-sys-primary: light-dark(#017bff, #adc7ff);
9
- --mat-sys-on-primary: light-dark(var(--src-color-text-inverse), #002e68);
10
- --mat-sys-primary-container: light-dark(var(--src-color-bg-primary), #004493);
11
- --mat-sys-on-primary-container: light-dark(
12
- var(--src-color-text-inverse),
13
- #d8e2ff
14
- );
15
- // --mat-sys-inverse-primary: light-dark(#adc7ff, #017BFF);
16
- // --mat-sys-primary-fixed: light-dark(#d8e2ff, #d8e2ff);
17
- // --mat-sys-primary-fixed-dim: light-dark(#adc7ff, #adc7ff);
18
- // --mat-sys-on-primary-fixed: light-dark(#001a41, #001a41);
19
- // --mat-sys-on-primary-fixed-variant: light-dark(#004493, #004493);
1
+ // @use '@angular/material' as mat;
2
+ // /* Note: Color palettes are generated from primary: #017BFF, neutral: #fff, error: #C5280C */
3
+ // :root {
4
+ // /* COLOR SYSTEM VARIABLES */
5
+ // color-scheme: light;
6
+ // /* Primary palette variables */
7
+ // // --mat-sys-primary: light-dark(var(--src-color-brand-500), #adc7ff);
8
+ // --mat-sys-primary: light-dark(#017bff, #adc7ff);
9
+ // --mat-sys-on-primary: light-dark(var(--src-color-text-inverse), #002e68);
10
+ // --mat-sys-primary-container: light-dark(var(--src-color-bg-primary), #004493);
11
+ // --mat-sys-on-primary-container: light-dark(
12
+ // var(--src-color-text-inverse),
13
+ // #d8e2ff
14
+ // );
15
+ // // --mat-sys-inverse-primary: light-dark(#adc7ff, #017BFF);
16
+ // // --mat-sys-primary-fixed: light-dark(#d8e2ff, #d8e2ff);
17
+ // // --mat-sys-primary-fixed-dim: light-dark(#adc7ff, #adc7ff);
18
+ // // --mat-sys-on-primary-fixed: light-dark(#001a41, #001a41);
19
+ // // --mat-sys-on-primary-fixed-variant: light-dark(#004493, #004493);
20
20
 
21
- /* Secondary palette variables - like in toastr */
22
- --mat-sys-secondary: light-dark(#0d1825, #adc7ff);
23
- --mat-sys-on-secondary: light-dark(var(--src-color-text-inverse), #082f64);
24
- --mat-sys-secondary-container: light-dark(#2d3745, #26467c);
25
- --mat-sys-on-secondary-container: light-dark(
26
- var(--src-color-text-inverse),
27
- #d8e2ff
28
- );
29
- // --mat-sys-secondary-fixed: light-dark(#d8e2ff, #d8e2ff);
30
- // --mat-sys-secondary-fixed-dim: light-dark(#adc7ff, #adc7ff);
31
- // --mat-sys-on-secondary-fixed: light-dark(#001a41, #001a41);
32
- // --mat-sys-on-secondary-fixed-variant: light-dark(#26467c, #26467c);
21
+ // /* Secondary palette variables - like in toastr */
22
+ // --mat-sys-secondary: light-dark(#0d1825, #adc7ff);
23
+ // --mat-sys-on-secondary: light-dark(var(--src-color-text-inverse), #082f64);
24
+ // --mat-sys-secondary-container: light-dark(#2d3745, #26467c);
25
+ // --mat-sys-on-secondary-container: light-dark(
26
+ // var(--src-color-text-inverse),
27
+ // #d8e2ff
28
+ // );
29
+ // // --mat-sys-secondary-fixed: light-dark(#d8e2ff, #d8e2ff);
30
+ // // --mat-sys-secondary-fixed-dim: light-dark(#adc7ff, #adc7ff);
31
+ // // --mat-sys-on-secondary-fixed: light-dark(#001a41, #001a41);
32
+ // // --mat-sys-on-secondary-fixed-variant: light-dark(#26467c, #26467c);
33
33
 
34
- /* Tertiary palette variables */
35
- --mat-sys-tertiary: light-dark(var(--src-color-green-700), #eeb0ff);
36
- --mat-sys-on-tertiary: light-dark(var(--src-color-text-inverse), #53006e);
37
- --mat-sys-tertiary-container: light-dark(var(--src-color-green-500), #750699);
38
- --mat-sys-on-tertiary-container: light-dark(
39
- var(--src-color-text-inverse),
40
- #fad7ff
41
- );
42
- // --mat-sys-tertiary-fixed: light-dark(#fad7ff, #fad7ff);
43
- // --mat-sys-tertiary-fixed-dim: light-dark(#eeb0ff, #eeb0ff);
44
- // --mat-sys-on-tertiary-fixed: light-dark(#330045, #330045);
45
- // --mat-sys-on-tertiary-fixed-variant: light-dark(#750699, #750699);
34
+ // /* Tertiary palette variables */
35
+ // --mat-sys-tertiary: light-dark(var(--src-color-green-700), #eeb0ff);
36
+ // --mat-sys-on-tertiary: light-dark(var(--src-color-text-inverse), #53006e);
37
+ // --mat-sys-tertiary-container: light-dark(var(--src-color-green-500), #750699);
38
+ // --mat-sys-on-tertiary-container: light-dark(
39
+ // var(--src-color-text-inverse),
40
+ // #fad7ff
41
+ // );
42
+ // // --mat-sys-tertiary-fixed: light-dark(#fad7ff, #fad7ff);
43
+ // // --mat-sys-tertiary-fixed-dim: light-dark(#eeb0ff, #eeb0ff);
44
+ // // --mat-sys-on-tertiary-fixed: light-dark(#330045, #330045);
45
+ // // --mat-sys-on-tertiary-fixed-variant: light-dark(#750699, #750699);
46
46
 
47
- /* Neutral palette variables */
48
- --mat-sys-background: light-dark(var(--src-color-bg-default), #1f2937);
49
- --mat-sys-on-background: light-dark(var(--src-color-text-default), #e2e2e2);
50
- --mat-sys-surface: light-dark(var(--src-color-bg-default-subdued), #1f2937);
51
- // --mat-sys-surface-dim: light-dark(#dadada, #1F2937);
52
- // --mat-sys-surface-bright: light-dark(#f9f9f9, #37393a);
53
- // --mat-sys-surface-container-lowest: light-dark(#ffffff, #0c0f0f);
54
- // --mat-sys-surface-container: light-dark(#eeeeee, #1e2020);
55
- // --mat-sys-surface-container-high: light-dark(#e8e8e8, #282a2b);
56
- // --mat-sys-surface-container-highest: light-dark(#e2e2e2, #333535);
57
- --mat-sys-on-surface: light-dark(var(--src-color-text-default), #e2e2e2);
58
- --mat-sys-shadow: light-dark(#000000, #000000);
59
- --mat-sys-scrim: light-dark(#000000, #000000);
60
- --mat-sys-surface-tint: light-dark(#017bff, #adc7ff);
61
- // --mat-sys-inverse-surface: light-dark(#2f3131, #e2e2e2);
62
- // --mat-sys-inverse-on-surface: light-dark(#f0f1f1, #2f3131);
63
- --mat-sys-outline: light-dark(var(--src-color-border-strong), #8b90a0);
64
- --mat-sys-outline-variant: light-dark(
65
- var(--src-color-border-default),
66
- #414754
67
- );
68
- --mat-sys-neutral10: light-dark(
69
- #1a1c1c,
70
- #1a1c1c
71
- ); /* Variable used for the form field native select option text color */
47
+ // /* Neutral palette variables */
48
+ // --mat-sys-background: light-dark(var(--src-color-bg-default), #1f2937);
49
+ // --mat-sys-on-background: light-dark(var(--src-color-text-default), #e2e2e2);
50
+ // --mat-sys-surface: light-dark(var(--src-color-bg-default-subdued), #1f2937);
51
+ // // --mat-sys-surface-dim: light-dark(#dadada, #1F2937);
52
+ // // --mat-sys-surface-bright: light-dark(#f9f9f9, #37393a);
53
+ // // --mat-sys-surface-container-lowest: light-dark(#ffffff, #0c0f0f);
54
+ // // --mat-sys-surface-container: light-dark(#eeeeee, #1e2020);
55
+ // // --mat-sys-surface-container-high: light-dark(#e8e8e8, #282a2b);
56
+ // // --mat-sys-surface-container-highest: light-dark(#e2e2e2, #333535);
57
+ // --mat-sys-on-surface: light-dark(var(--src-color-text-default), #e2e2e2);
58
+ // --mat-sys-shadow: light-dark(#000000, #000000);
59
+ // --mat-sys-scrim: light-dark(#000000, #000000);
60
+ // --mat-sys-surface-tint: light-dark(#017bff, #adc7ff);
61
+ // // --mat-sys-inverse-surface: light-dark(#2f3131, #e2e2e2);
62
+ // // --mat-sys-inverse-on-surface: light-dark(#f0f1f1, #2f3131);
63
+ // --mat-sys-outline: light-dark(var(--src-color-border-strong), #8b90a0);
64
+ // --mat-sys-outline-variant: light-dark(
65
+ // var(--src-color-border-default),
66
+ // #414754
67
+ // );
68
+ // --mat-sys-neutral10: light-dark(
69
+ // #1a1c1c,
70
+ // #1a1c1c
71
+ // ); /* Variable used for the form field native select option text color */
72
72
 
73
- /* Error palette variables */
74
- --mat-sys-error: light-dark(var(--src-color-bg-critical), #fef3f1);
75
- --mat-sys-on-error: light-dark(var(--src-color-text-inverse), #9f200a);
76
- --mat-sys-error-container: light-dark(
77
- var(--src-color-bg-critical-subdued),
78
- #8e1300
79
- );
80
- --mat-sys-on-error-container: light-dark(
81
- var(--src-color-text-critical),
82
- #fef3f1
83
- );
73
+ // /* Error palette variables */
74
+ // --mat-sys-error: light-dark(var(--src-color-bg-critical), #fef3f1);
75
+ // --mat-sys-on-error: light-dark(var(--src-color-text-inverse), #9f200a);
76
+ // --mat-sys-error-container: light-dark(
77
+ // var(--src-color-bg-critical-subdued),
78
+ // #8e1300
79
+ // );
80
+ // --mat-sys-on-error-container: light-dark(
81
+ // var(--src-color-text-critical),
82
+ // #fef3f1
83
+ // );
84
84
 
85
- /* Neutral variant palette variables */
86
- --mat-sys-surface-variant: light-dark(
87
- var(--src-color-bg-default-subdued),
88
- #414754
89
- );
90
- --mat-sys-on-surface-variant: light-dark(
91
- var(--src-color-text-default),
92
- #c1c6d7
93
- );
94
- --mat-sys-neutral-variant20: light-dark(
95
- #2b303d,
96
- #2b303d
97
- ); /* Variable used for the sidenav scrim (container background shadow when opened) */
85
+ // /* Neutral variant palette variables */
86
+ // --mat-sys-surface-variant: light-dark(
87
+ // var(--src-color-bg-default-subdued),
88
+ // #414754
89
+ // );
90
+ // --mat-sys-on-surface-variant: light-dark(
91
+ // var(--src-color-text-default),
92
+ // #c1c6d7
93
+ // );
94
+ // --mat-sys-neutral-variant20: light-dark(
95
+ // #2b303d,
96
+ // #2b303d
97
+ // ); /* Variable used for the sidenav scrim (container background shadow when opened) */
98
98
 
99
- /* TYPOGRAPHY SYSTEM VARIABLES */
99
+ // /* TYPOGRAPHY SYSTEM VARIABLES */
100
100
 
101
- /* Typography variables. Only used in the different typescale system variables. */
102
- --mat-sys-brand-font-family: Inter; /* The font-family to use for brand text. */
103
- --mat-sys-plain-font-family: Inter; /* The font-family to use for plain text. */
104
- --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
105
- --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
106
- --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
101
+ // /* Typography variables. Only used in the different typescale system variables. */
102
+ // --mat-sys-brand-font-family: Inter; /* The font-family to use for brand text. */
103
+ // --mat-sys-plain-font-family: Inter; /* The font-family to use for plain text. */
104
+ // --mat-sys-bold-font-weight: var(
105
+ // ----src-font-weight-bold
106
+ // ); /* The font-weight to use for bold text. */
107
+ // --mat-sys-medium-font-weight: var(
108
+ // --src-font-weight-medium
109
+ // ); /* The font-weight to use for medium text. */
110
+ // --mat-sys-regular-font-weight: var(
111
+ // --src-font-weight-regular
112
+ // ); /* The font-weight to use for regular text. */
107
113
 
108
- /* Typescale variables. */
109
- /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
110
- tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */
111
- --mat-sys-body-large: var(--mat-sys-body-large-weight)
112
- var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height)
113
- var(--mat-sys-body-large-font);
114
- --mat-sys-body-large-font: var(--mat-sys-plain-font-family);
115
- --mat-sys-body-large-line-height: 1.75;
116
- --mat-sys-body-large-size: 16px;
117
- --mat-sys-body-large-tracking: 0;
118
- --mat-sys-body-large-weight: var(--mat-sys-regular-font-weight);
114
+ // /* Typescale variables. */
115
+ // /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
116
+ // tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */
117
+ // --mat-sys-body-large: var(--mat-sys-body-large-weight)
118
+ // var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height)
119
+ // var(--mat-sys-body-large-font);
120
+ // --mat-sys-body-large-font: var(--mat-sys-plain-font-family);
121
+ // --mat-sys-body-large-line-height: 1.75;
122
+ // --mat-sys-body-large-size: var(--src-font-size-lg);
123
+ // --mat-sys-body-large-tracking: 0;
124
+ // --mat-sys-body-large-weight: var(--mat-sys-regular-font-weight);
119
125
 
120
- /* Body medium typescale */
121
- --mat-sys-body-medium: var(--mat-sys-body-medium-weight)
122
- var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height)
123
- var(--mat-sys-body-medium-font);
124
- --mat-sys-body-medium-font: var(--mat-sys-plain-font-family);
125
- --mat-sys-body-medium-line-height: 1.43;
126
- --mat-sys-body-medium-size: 14px;
127
- --mat-sys-body-medium-tracking: 0;
128
- --mat-sys-body-medium-weight: var(--mat-sys-regular-font-weight);
126
+ // /* Body medium typescale */
127
+ // --mat-sys-body-medium: var(--mat-sys-body-medium-weight)
128
+ // var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height)
129
+ // var(--mat-sys-body-medium-font);
130
+ // --mat-sys-body-medium-font: var(--mat-sys-plain-font-family);
131
+ // --mat-sys-body-medium-line-height: 1.43;
132
+ // --mat-sys-body-medium-size: 14px;
133
+ // --mat-sys-body-medium-tracking: 0;
134
+ // --mat-sys-body-medium-weight: var(--mat-sys-regular-font-weight);
129
135
 
130
- /* Body small typescale */
131
- --mat-sys-body-small: var(--mat-sys-body-small-weight)
132
- var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height)
133
- var(--mat-sys-body-small-font);
134
- --mat-sys-body-small-font: var(--mat-sys-plain-font-family);
135
- --mat-sys-body-small-line-height: 1.33;
136
- --mat-sys-body-small-size: 12px;
137
- --mat-sys-body-small-tracking: 0;
138
- --mat-sys-body-small-weight: var(--mat-sys-regular-font-weight);
136
+ // /* Body small typescale */
137
+ // --mat-sys-body-small: var(--mat-sys-body-small-weight)
138
+ // var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height)
139
+ // var(--mat-sys-body-small-font);
140
+ // --mat-sys-body-small-font: var(--mat-sys-plain-font-family);
141
+ // --mat-sys-body-small-line-height: 1.33;
142
+ // --mat-sys-body-small-size: 12px;
143
+ // --mat-sys-body-small-tracking: 0;
144
+ // --mat-sys-body-small-weight: var(--mat-sys-regular-font-weight);
139
145
 
140
- /* TODO: Where it's used? */
141
- /* Display large typescale */
142
- --mat-sys-display-large: var(--mat-sys-display-large-weight)
143
- var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height)
144
- var(--mat-sys-display-large-font);
145
- --mat-sys-display-large-font: var(--mat-sys-brand-font-family);
146
- --mat-sys-display-large-line-height: 4rem;
147
- --mat-sys-display-large-size: 3.562rem;
148
- --mat-sys-display-large-tracking: -0.016rem;
149
- --mat-sys-display-large-weight: var(--mat-sys-regular-font-weight);
146
+ // /* TODO: Where it's used? */
147
+ // /* Display large typescale */
148
+ // --mat-sys-display-large: var(--mat-sys-display-large-weight)
149
+ // var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height)
150
+ // var(--mat-sys-display-large-font);
151
+ // --mat-sys-display-large-font: var(--mat-sys-brand-font-family);
152
+ // --mat-sys-display-large-line-height: 4rem;
153
+ // --mat-sys-display-large-size: 3.562rem;
154
+ // --mat-sys-display-large-tracking: -0.016rem;
155
+ // --mat-sys-display-large-weight: var(--mat-sys-regular-font-weight);
150
156
 
151
- /* Display medium typescale */
152
- --mat-sys-display-medium: var(--mat-sys-display-medium-weight)
153
- var(--mat-sys-display-medium-size) /
154
- var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);
155
- --mat-sys-display-medium-font: var(--mat-sys-brand-font-family);
156
- --mat-sys-display-medium-line-height: 3.25rem;
157
- --mat-sys-display-medium-size: 2.812rem;
158
- --mat-sys-display-medium-tracking: 0;
159
- --mat-sys-display-medium-weight: var(--mat-sys-regular-font-weight);
157
+ // /* Display medium typescale */
158
+ // --mat-sys-display-medium: var(--mat-sys-display-medium-weight)
159
+ // var(--mat-sys-display-medium-size) /
160
+ // var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);
161
+ // --mat-sys-display-medium-font: var(--mat-sys-brand-font-family);
162
+ // --mat-sys-display-medium-line-height: 3.25rem;
163
+ // --mat-sys-display-medium-size: 2.812rem;
164
+ // --mat-sys-display-medium-tracking: 0;
165
+ // --mat-sys-display-medium-weight: var(--mat-sys-regular-font-weight);
160
166
 
161
- /* Display small typescale */
162
- --mat-sys-display-small: var(--mat-sys-display-small-weight)
163
- var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height)
164
- var(--mat-sys-display-small-font);
165
- --mat-sys-display-small-font: var(--mat-sys-brand-font-family);
166
- --mat-sys-display-small-line-height: 2.75rem;
167
- --mat-sys-display-small-size: 2.25rem;
168
- --mat-sys-display-small-tracking: 0;
169
- --mat-sys-display-small-weight: var(--mat-sys-regular-font-weight);
167
+ // /* Display small typescale */
168
+ // --mat-sys-display-small: var(--mat-sys-display-small-weight)
169
+ // var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height)
170
+ // var(--mat-sys-display-small-font);
171
+ // --mat-sys-display-small-font: var(--mat-sys-brand-font-family);
172
+ // --mat-sys-display-small-line-height: 2.75rem;
173
+ // --mat-sys-display-small-size: 2.25rem;
174
+ // --mat-sys-display-small-tracking: 0;
175
+ // --mat-sys-display-small-weight: var(--mat-sys-regular-font-weight);
170
176
 
171
- /* Headline large typescale */
172
- --mat-sys-headline-large: var(--mat-sys-headline-large-weight)
173
- var(--mat-sys-headline-large-size) /
174
- var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);
175
- --mat-sys-headline-large-font: var(--mat-sys-brand-font-family);
176
- --mat-sys-headline-large-line-height: 2.5rem;
177
- --mat-sys-headline-large-size: 2rem;
178
- --mat-sys-headline-large-tracking: 0;
179
- --mat-sys-headline-large-weight: var(--mat-sys-regular-font-weight);
177
+ // /* Headline large typescale */
178
+ // --mat-sys-headline-large: var(--mat-sys-headline-large-weight)
179
+ // var(--mat-sys-headline-large-size) /
180
+ // var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);
181
+ // --mat-sys-headline-large-font: var(--mat-sys-brand-font-family);
182
+ // --mat-sys-headline-large-line-height: 2.5rem;
183
+ // --mat-sys-headline-large-size: 2rem;
184
+ // --mat-sys-headline-large-tracking: 0;
185
+ // --mat-sys-headline-large-weight: var(--mat-sys-regular-font-weight);
180
186
 
181
- /* Headline medium typescale */
182
- --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight)
183
- var(--mat-sys-headline-medium-size) /
184
- var(--mat-sys-headline-medium-line-height)
185
- var(--mat-sys-headline-medium-font);
186
- --mat-sys-headline-medium-font: var(--mat-sys-brand-font-family);
187
- --mat-sys-headline-medium-line-height: 2.25rem;
188
- --mat-sys-headline-medium-size: 1.75rem;
189
- --mat-sys-headline-medium-tracking: 0;
190
- --mat-sys-headline-medium-weight: var(--mat-sys-regular-font-weight);
187
+ // /* Headline medium typescale */
188
+ // --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight)
189
+ // var(--mat-sys-headline-medium-size) /
190
+ // var(--mat-sys-headline-medium-line-height)
191
+ // var(--mat-sys-headline-medium-font);
192
+ // --mat-sys-headline-medium-font: var(--mat-sys-brand-font-family);
193
+ // --mat-sys-headline-medium-line-height: 2.25rem;
194
+ // --mat-sys-headline-medium-size: 1.75rem;
195
+ // --mat-sys-headline-medium-tracking: 0;
196
+ // --mat-sys-headline-medium-weight: var(--mat-sys-regular-font-weight);
191
197
 
192
- /* Headline small typescale */
193
- --mat-sys-headline-small: var(--mat-sys-headline-small-weight)
194
- var(--mat-sys-headline-small-size) /
195
- var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);
196
- --mat-sys-headline-small-font: var(--mat-sys-brand-font-family);
197
- --mat-sys-headline-small-line-height: 2rem;
198
- --mat-sys-headline-small-size: 1.5rem;
199
- --mat-sys-headline-small-tracking: 0;
200
- --mat-sys-headline-small-weight: var(--mat-sys-regular-font-weight);
198
+ // /* Headline small typescale */
199
+ // --mat-sys-headline-small: var(--mat-sys-headline-small-weight)
200
+ // var(--mat-sys-headline-small-size) /
201
+ // var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);
202
+ // --mat-sys-headline-small-font: var(--mat-sys-brand-font-family);
203
+ // --mat-sys-headline-small-line-height: 2rem;
204
+ // --mat-sys-headline-small-size: 1.5rem;
205
+ // --mat-sys-headline-small-tracking: 0;
206
+ // --mat-sys-headline-small-weight: var(--mat-sys-regular-font-weight);
201
207
 
202
- /* Label large typescale */
203
- --mat-sys-label-large: var(--mat-sys-label-large-weight)
204
- var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height)
205
- var(--mat-sys-label-large-font);
206
- --mat-sys-label-large-font: var(--mat-sys-plain-font-family);
207
- --mat-sys-label-large-line-height: 1.25rem;
208
- --mat-sys-label-large-size: 0.875rem;
209
- --mat-sys-label-large-tracking: 0.006rem;
210
- --mat-sys-label-large-weight: var(--mat-sys-medium-font-weight);
211
- --mat-sys-label-large-weight-prominent: var(--mat-sys-bold-font-weight);
208
+ // /* Label large typescale */
209
+ // --mat-sys-label-large: var(--mat-sys-label-large-weight)
210
+ // var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height)
211
+ // var(--mat-sys-label-large-font);
212
+ // --mat-sys-label-large-font: var(--mat-sys-plain-font-family);
213
+ // --mat-sys-label-large-line-height: 1.25rem;
214
+ // --mat-sys-label-large-size: 0.875rem;
215
+ // --mat-sys-label-large-tracking: 0.006rem;
216
+ // --mat-sys-label-large-weight: var(--mat-sys-medium-font-weight);
217
+ // --mat-sys-label-large-weight-prominent: var(--mat-sys-bold-font-weight);
212
218
 
213
- /* Label medium typescale - same as body medium */
214
- --mat-sys-label-medium: var(--mat-sys-label-medium-weight)
215
- var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height)
216
- var(--mat-sys-label-medium-font);
217
- --mat-sys-label-medium-font: var(--mat-sys-plain-font-family);
218
- --mat-sys-label-medium-line-height: var(--mat-sys-body-medium-line-height);
219
- --mat-sys-label-medium-size: var(--mat-sys-body-medium-size);
220
- --mat-sys-label-medium-tracking: 0;
221
- --mat-sys-label-medium-weight: var(--mat-sys-medium-font-weight);
222
- --mat-sys-label-medium-weight-prominent: var(--mat-sys-bold-font-weight);
219
+ // /* Label medium typescale - same as body medium */
220
+ // --mat-sys-label-medium: var(--mat-sys-label-medium-weight)
221
+ // var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height)
222
+ // var(--mat-sys-label-medium-font);
223
+ // --mat-sys-label-medium-font: var(--mat-sys-plain-font-family);
224
+ // --mat-sys-label-medium-line-height: var(--mat-sys-body-medium-line-height);
225
+ // --mat-sys-label-medium-size: var(--mat-sys-body-medium-size);
226
+ // --mat-sys-label-medium-tracking: 0;
227
+ // --mat-sys-label-medium-weight: var(--mat-sys-medium-font-weight);
228
+ // --mat-sys-label-medium-weight-prominent: var(--mat-sys-bold-font-weight);
223
229
 
224
- /* Label small typescale */
225
- --mat-sys-label-small: var(--mat-sys-label-small-weight)
226
- var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height)
227
- var(--mat-sys-label-small-font);
228
- --mat-sys-label-small-font: var(--mat-sys-plain-font-family);
229
- --mat-sys-label-small-line-height: 1rem;
230
- --mat-sys-label-small-size: 0.688rem;
231
- --mat-sys-label-small-tracking: 0.031rem;
232
- --mat-sys-label-small-weight: var(--mat-sys-medium-font-weight);
230
+ // /* Label small typescale */
231
+ // --mat-sys-label-small: var(--mat-sys-label-small-weight)
232
+ // var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height)
233
+ // var(--mat-sys-label-small-font);
234
+ // --mat-sys-label-small-font: var(--mat-sys-plain-font-family);
235
+ // --mat-sys-label-small-line-height: 1rem;
236
+ // --mat-sys-label-small-size: 0.688rem;
237
+ // --mat-sys-label-small-tracking: 0.031rem;
238
+ // --mat-sys-label-small-weight: var(--mat-sys-medium-font-weight);
233
239
 
234
- /* Title large typescale */
235
- --mat-sys-title-large: var(--mat-sys-title-large-weight)
236
- var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height)
237
- var(--mat-sys-title-large-font);
238
- --mat-sys-title-large-font: var(--mat-sys-brand-font-family);
239
- --mat-sys-title-large-line-height: 1.75rem;
240
- --mat-sys-title-large-size: 1.375rem;
241
- --mat-sys-title-large-tracking: 0;
242
- --mat-sys-title-large-weight: var(--mat-sys-regular-font-weight);
240
+ // /* Title large typescale */
241
+ // --mat-sys-title-large: var(--mat-sys-title-large-weight)
242
+ // var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height)
243
+ // var(--mat-sys-title-large-font);
244
+ // --mat-sys-title-large-font: var(--mat-sys-brand-font-family);
245
+ // --mat-sys-title-large-line-height: 1.75rem;
246
+ // --mat-sys-title-large-size: 1.375rem;
247
+ // --mat-sys-title-large-tracking: 0;
248
+ // --mat-sys-title-large-weight: var(--mat-sys-regular-font-weight);
243
249
 
244
- /* Title medium typescale */
245
- --mat-sys-title-medium: var(--mat-sys-title-medium-weight)
246
- var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
247
- var(--mat-sys-title-medium-font);
248
- --mat-sys-title-medium-font: var(--mat-sys-plain-font-family);
249
- --mat-sys-title-medium-line-height: 1.5rem;
250
- --mat-sys-title-medium-size: 1rem;
251
- --mat-sys-title-medium-tracking: 0.009rem;
252
- --mat-sys-title-medium-weight: var(--mat-sys-medium-font-weight);
250
+ // /* Title medium typescale */
251
+ // --mat-sys-title-medium: var(--mat-sys-title-medium-weight)
252
+ // var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
253
+ // var(--mat-sys-title-medium-font);
254
+ // --mat-sys-title-medium-font: var(--mat-sys-plain-font-family);
255
+ // --mat-sys-title-medium-line-height: 1.5rem;
256
+ // --mat-sys-title-medium-size: 1rem;
257
+ // --mat-sys-title-medium-tracking: 0.009rem;
258
+ // --mat-sys-title-medium-weight: var(--mat-sys-medium-font-weight);
253
259
 
254
- /* Title small typescale */
255
- --mat-sys-title-small: var(--mat-sys-title-small-weight)
256
- var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height)
257
- var(--mat-sys-title-small-font);
258
- --mat-sys-title-small-font: var(--mat-sys-plain-font-family);
259
- --mat-sys-title-small-line-height: var(--lh-small);
260
- --mat-sys-title-small-size: var(--fs-small);
261
- --mat-sys-title-small-tracking: 0;
262
- --mat-sys-title-small-weight: var(--mat-sys-regular-font-weight);
260
+ // /* Title small typescale */
261
+ // --mat-sys-title-small: var(--mat-sys-title-small-weight)
262
+ // var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height)
263
+ // var(--mat-sys-title-small-font);
264
+ // --mat-sys-title-small-font: var(--mat-sys-plain-font-family);
265
+ // --mat-sys-title-small-line-height: var(--lh-small);
266
+ // --mat-sys-title-small-size: var(--fs-small);
267
+ // --mat-sys-title-small-tracking: 0;
268
+ // --mat-sys-title-small-weight: var(--mat-sys-regular-font-weight);
263
269
 
264
- /* ELEVATION SYSTEM VARIABLES */
270
+ // /* ELEVATION SYSTEM VARIABLES */
265
271
 
266
- /* Box shadow colors. Only used in the elevation level system variables. */
267
- --mat-sys-umbra-color: color-mix(
268
- in srgb,
269
- var(--mat-sys-shadow),
270
- transparent 80%
271
- );
272
- --mat-sys-penumbra-color: color-mix(
273
- in srgb,
274
- var(--mat-sys-shadow),
275
- transparent 86%
276
- );
277
- --mat-sys-ambient-color: color-mix(
278
- in srgb,
279
- var(--mat-sys-shadow),
280
- transparent 88%
281
- );
272
+ // /* Box shadow colors. Only used in the elevation level system variables. */
273
+ // --mat-sys-umbra-color: color-mix(
274
+ // in srgb,
275
+ // var(--mat-sys-shadow),
276
+ // transparent 80%
277
+ // );
278
+ // --mat-sys-penumbra-color: color-mix(
279
+ // in srgb,
280
+ // var(--mat-sys-shadow),
281
+ // transparent 86%
282
+ // );
283
+ // --mat-sys-ambient-color: color-mix(
284
+ // in srgb,
285
+ // var(--mat-sys-shadow),
286
+ // transparent 88%
287
+ // );
282
288
 
283
- /* Elevation level system variables. These are used as the value for box-shadow CSS property. */
284
- --mat-sys-level0:
285
- 0px 0px 0px 0px var(--mat-sys-umbra-color),
286
- 0px 0px 0px 0px var(--mat-sys-penumbra-color),
287
- 0px 0px 0px 0px var(--mat-sys-ambient-color);
288
- --mat-sys-level1:
289
- 0px 2px 1px -1px var(--mat-sys-umbra-color),
290
- 0px 1px 1px 0px var(--mat-sys-penumbra-color),
291
- 0px 1px 3px 0px var(--mat-sys-ambient-color);
292
- --mat-sys-level2:
293
- 0px 3px 3px -2px var(--mat-sys-umbra-color),
294
- 0px 3px 4px 0px var(--mat-sys-penumbra-color),
295
- 0px 1px 8px 0px var(--mat-sys-ambient-color);
296
- --mat-sys-level3:
297
- 0px 3px 5px -1px var(--mat-sys-umbra-color),
298
- 0px 6px 10px 0px var(--mat-sys-penumbra-color),
299
- 0px 1px 18px 0px var(--mat-sys-ambient-color);
300
- --mat-sys-level4:
301
- 0px 5px 5px -3px var(--mat-sys-umbra-color),
302
- 0px 8px 10px 1px var(--mat-sys-penumbra-color),
303
- 0px 3px 14px 2px var(--mat-sys-ambient-color);
304
- --mat-sys-level5:
305
- 0px 7px 8px -4px var(--mat-sys-umbra-color),
306
- 0px 12px 17px 2px var(--mat-sys-penumbra-color),
307
- 0px 5px 22px 4px var(--mat-sys-ambient-color);
289
+ // /* Elevation level system variables. These are used as the value for box-shadow CSS property. */
290
+ // --mat-sys-level0:
291
+ // 0px 0px 0px 0px var(--mat-sys-umbra-color),
292
+ // 0px 0px 0px 0px var(--mat-sys-penumbra-color),
293
+ // 0px 0px 0px 0px var(--mat-sys-ambient-color);
294
+ // --mat-sys-level1:
295
+ // 0px 2px 1px -1px var(--mat-sys-umbra-color),
296
+ // 0px 1px 1px 0px var(--mat-sys-penumbra-color),
297
+ // 0px 1px 3px 0px var(--mat-sys-ambient-color);
298
+ // --mat-sys-level2:
299
+ // 0px 3px 3px -2px var(--mat-sys-umbra-color),
300
+ // 0px 3px 4px 0px var(--mat-sys-penumbra-color),
301
+ // 0px 1px 8px 0px var(--mat-sys-ambient-color);
302
+ // --mat-sys-level3:
303
+ // 0px 3px 5px -1px var(--mat-sys-umbra-color),
304
+ // 0px 6px 10px 0px var(--mat-sys-penumbra-color),
305
+ // 0px 1px 18px 0px var(--mat-sys-ambient-color);
306
+ // --mat-sys-level4:
307
+ // 0px 5px 5px -3px var(--mat-sys-umbra-color),
308
+ // 0px 8px 10px 1px var(--mat-sys-penumbra-color),
309
+ // 0px 3px 14px 2px var(--mat-sys-ambient-color);
310
+ // --mat-sys-level5:
311
+ // 0px 7px 8px -4px var(--mat-sys-umbra-color),
312
+ // 0px 12px 17px 2px var(--mat-sys-penumbra-color),
313
+ // 0px 5px 22px 4px var(--mat-sys-ambient-color);
308
314
 
309
- /* SHAPE SYSTEM VARIABLES */
310
- --mat-sys-corner-extra-large: 24px;
311
- --mat-sys-corner-extra-large-top: 24px 24px 0 0;
312
- --mat-sys-corner-extra-small: 2px;
313
- --mat-sys-corner-extra-small-top: 2px 2px 0 0;
314
- --mat-sys-corner-full: 9999px;
315
- --mat-sys-corner-large: 16px;
316
- --mat-sys-corner-large-end: 0 16px 16px 0;
317
- --mat-sys-corner-large-start: 16px 0 0 16px;
318
- --mat-sys-corner-large-top: 16px 16px 0 0;
319
- --mat-sys-corner-medium: 8px;
320
- --mat-sys-corner-none: 0;
321
- --mat-sys-corner-small: 4px;
315
+ // /* SHAPE SYSTEM VARIABLES */
316
+ // --mat-sys-corner-extra-large: 24px;
317
+ // --mat-sys-corner-extra-large-top: 24px 24px 0 0;
318
+ // --mat-sys-corner-extra-small: 2px;
319
+ // --mat-sys-corner-extra-small-top: 2px 2px 0 0;
320
+ // --mat-sys-corner-full: 9999px;
321
+ // --mat-sys-corner-large: 16px;
322
+ // --mat-sys-corner-large-end: 0 16px 16px 0;
323
+ // --mat-sys-corner-large-start: 16px 0 0 16px;
324
+ // --mat-sys-corner-large-top: 16px 16px 0 0;
325
+ // --mat-sys-corner-medium: 8px;
326
+ // --mat-sys-corner-none: 0;
327
+ // --mat-sys-corner-small: 4px;
322
328
 
323
- /* STATE SYSTEM VARIABLES */
324
- --mat-sys-dragged-state-layer-opacity: 0.16;
325
- --mat-sys-focus-state-layer-opacity: 0.12;
326
- --mat-sys-hover-state-layer-opacity: 0.08;
327
- --mat-sys-pressed-state-layer-opacity: 0.12;
328
- }
329
+ // /* STATE SYSTEM VARIABLES */
330
+ // --mat-sys-dragged-state-layer-opacity: 0.16;
331
+ // --mat-sys-focus-state-layer-opacity: 0.12;
332
+ // --mat-sys-hover-state-layer-opacity: 0.08;
333
+ // --mat-sys-pressed-state-layer-opacity: 0.12;
334
+ // }