@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/checkbox.scss CHANGED
@@ -1,26 +1,100 @@
1
1
  @use '@angular/material' as mat;
2
+
3
+ // -----NOTE-----
4
+ // To make default field looks like MD size without setting *--size-md class, fallbak values for corresponding variables(padding and font size) are changet to match MD size. Variables names are correct.
2
5
  :root {
3
6
  @include mat.checkbox-overrides(
4
7
  (
5
- state-layer-size: 20px,
6
- selected-hover-state-layer-opacity: 0,
7
- selected-focus-state-layer-opacity: 0,
8
+ // Label color
9
+ label-text-color: var(--src-text-body-main, #111827),
10
+ // Icon color
11
+ selected-checkmark-color: var(--src-icon-main-invert),
12
+ disabled-selected-checkmark-color: var(--src-icon-main-invert),
13
+ // Border color (selected state bg is match with selected state border color)
14
+ unselected-icon-color: var(--src-border-input-basic, #d1d5db),
15
+ selected-icon-color: var(--src-ui-accent-default, #017bff),
16
+ unselected-hover-icon-color: var(--src-border-input-hover, #9ca3af),
17
+ selected-hover-icon-color: var(--src-ui-accent-default-hover, #016fe6),
18
+ unselected-focus-icon-color: var(--src-border-input-basic, #d1d5db),
19
+ selected-focus-icon-color: var(--src-ui-accent-default, #017bff),
20
+ disabled-selected-icon-color: var(
21
+ --src-ui-accent-disabled,
22
+ rgba(148, 163, 184, 0.24)
23
+ ),
24
+ disabled-unselected-icon-color: var(--src-border-input-basic, #d1d5db),
25
+ // layer for focus state: should be transparent, but opacity: 1, because focus ring is a box shadow
26
+ selected-focus-state-layer-opacity: 1,
27
+ unselected-focus-state-layer-opacity: 1,
8
28
  unselected-hover-state-layer-opacity: 0,
9
- unselected-focus-state-layer-opacity: 0,
10
- unselected-hover-icon-color: var(--src-color-border-strong-hover),
11
- unselected-focus-icon-color: var(--src-color-border-strong-hover),
29
+ selected-hover-state-layer-opacity: 0,
30
+ selected-focus-state-layer-color: transparent,
31
+ unselected-focus-state-layer-color: transparent
12
32
  )
13
33
  );
14
34
  }
15
35
 
16
36
  .mat-mdc-checkbox {
37
+ --srcCheckboxSize: var(--src-icon-size, var(--src-space-5));
38
+ --mat-checkbox-state-layer-size: var(--srcCheckboxSize);
39
+ --mat-checkbox-label-text-size: var(
40
+ --src-text-fontSize,
41
+ var(--src-font-size-sm)
42
+ );
43
+ --mat-checkbox-label-text-line-height: var(
44
+ --src-text-lineHeight,
45
+ var(--src-font-line-sm)
46
+ );
47
+ --mat-checkbox-label-text-tracking: 0;
48
+ --mat-checkbox-label-text-weight: 500;
49
+ --bgColor: var(--src-surface-container-main, #fff);
50
+ &:hover {
51
+ --bgColor: linear-gradient(
52
+ 0deg,
53
+ var(--src-surface-container-on-top, rgba(148, 163, 184, 0.08)) 0%,
54
+ var(--src-surface-container-on-top, rgba(148, 163, 184, 0.08)) 100%
55
+ )
56
+ var(--src-surface-container-main, #fff);
57
+ }
58
+
59
+ .mdc-checkbox {
60
+ width: var(--srcCheckboxSize);
61
+ height: var(--srcCheckboxSize);
62
+ flex: 0 0 var(--srcCheckboxSize);
63
+ padding: calc(
64
+ (var(--mat-checkbox-state-layer-size, 40px) - var(--srcCheckboxSize)) / 2
65
+ );
66
+ }
67
+
68
+ .mdc-checkbox__ripple {
69
+ border-radius: var(--src-border-rounded-xs, var(--src-space-1));
70
+ box-shadow: var(--srcFormElementFocusRing);
71
+ }
72
+
73
+ .mdc-checkbox__native-control:focus + .mdc-checkbox__ripple {
74
+ --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
75
+ var(--src-shadow-light, rgba(148, 163, 184, 0.16));
76
+ }
77
+
78
+ .mdc-checkbox__native-control:focus:checked + .mdc-checkbox__ripple {
79
+ --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
80
+ var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
81
+ }
82
+
17
83
  .mdc-checkbox__background {
18
- width: 20px;
19
- height: 20px;
20
- padding: 2px;
21
- border-radius: var(--src-br-small);
22
- border: 2px solid var(--src-color-border-strong);
23
- border-color: var(--src-color-border-strong);
84
+ width: var(--srcCheckboxSize);
85
+ height: var(--srcCheckboxSize);
86
+ top: calc(
87
+ (var(--mat-checkbox-state-layer-size, 40px) - var(--srcCheckboxSize)) / 2
88
+ );
89
+ left: calc(
90
+ (var(--mat-checkbox-state-layer-size, 40px) - var(--srcCheckboxSize)) / 2
91
+ );
92
+
93
+ border-radius: var(--src-border-rounded-xs, var(--src-space-1));
94
+ border: var(--src-border-border, 1px) solid
95
+ var(--src-border-input-basic, #d1d5db);
96
+ background: var(--bgColor);
97
+
24
98
  transform: none;
25
99
 
26
100
  .mdc-checkbox__checkmark {
@@ -34,15 +108,25 @@
34
108
  }
35
109
 
36
110
  .mat-internal-form-field > label {
37
- padding-left: 8px;
111
+ padding-left: var(--src-gap-lg, var(--src-space-3));
38
112
  }
39
113
  }
40
114
 
41
115
  .mat-pseudo-checkbox.mat-pseudo-checkbox-full {
42
- --mat-full-pseudo-checkbox-unselected-icon-color: var(
43
- --src-color-border-strong
116
+ --srcCheckboxSize: var(--src-icon-size, var(--src-space-5));
117
+ --mat-pseudo-checkbox-full-selected-icon-color: var(
118
+ --src-ui-accent-default,
119
+ #017bff
44
120
  );
45
- width: 20px;
46
- height: 20px;
47
- border-radius: var(--src-br-small);
121
+ --mat-pseudo-checkbox-full-selected-checkmark-color: #fff;
122
+ --mat-pseudo-checkbox-full-unselected-icon-color: var(
123
+ --src-border-input-basic,
124
+ #d1d5db
125
+ );
126
+
127
+ // --mat-pseudo-checkbox-minimal-selected-checkmark-color: #fff;
128
+ width: var(--srcCheckboxSize);
129
+ height: var(--srcCheckboxSize);
130
+ border-radius: var(--src-border-rounded-xs, var(--src-space-1));
131
+ border-width: 1px;
48
132
  }
package/styles/material/form-field.scss CHANGED
@@ -1,59 +1,279 @@
1
1
  @use '@angular/material' as mat;
2
2
 
3
- // Customize the entire app. Change :root to your selector if you want to scope the styles.
3
+ // Mat form fields customization
4
+ // - General outline overrides
5
+ // - mat-form-field-appearance-outline background overrides
6
+ // - mat-form-field-appearance-outline text and outline overrides
7
+ // - overrides for secondary colorScheme
8
+ // - overrides for ghost colorScheme
9
+ // - mat hint - disabled, use SourceHint instead
10
+ // - slots inside input field
11
+ // -----NOTE-----
12
+ // To make default field looks like MD size without setting *--size-md class, fallbak values for corresponding variables(padding and font size) are changet to match MD size. Variables names are correct.
13
+
14
+ // COLORS: basic override for outlines and icons
4
15
  :root {
5
16
  @include mat.form-field-overrides(
6
17
  (
7
- outlined-container-shape: var(--src-br-small),
8
- outlined-outline-width: 1px,
9
- container-text-size: var(--src-fs-base),
10
- outlined-hover-outline-color: var(--src-color-border-strong),
11
- outlined-focus-outline-width: 1px,
12
- outlined-focus-outline-color: var(--src-color-border-strong),
13
- container-vertical-padding: 6px,
14
18
  container-height: auto,
15
- outlined-label-text-size: var(--src-fs-base),
16
19
  leading-icon-color: var(--src-color-icon-default),
20
+ outlined-input-text-placeholder-color: var(
21
+ --src-text-ui-secondary-grey,
22
+ #9ca3af
23
+ ),
17
24
  disabled-leading-icon-color: var(--src-color-icon-disabled),
18
25
  trailing-icon-color: var(--src-color-icon-default),
26
+ outlined-focus-outline-width: 1px,
27
+ outlined-outline-color: var(--src-border-input-basic, #d1d5db),
28
+ outlined-hover-outline-color: var(--src-border-input-hover, #9ca3af),
29
+ outlined-focus-outline-color: var(--src-border-input-active, #017bff),
30
+ outlined-error-outline-color: var(--src-border-input-error, #f24122),
31
+ outlined-error-focus-outline-color: var(--src-border-input-error, #f24122),
32
+ outlined-error-hover-outline-color: var(
33
+ --src-border-input-error-hover,
34
+ #f24122
35
+ ),
36
+ )
37
+ );
38
+ }
39
+ // COLORS: Field background changes
40
+ .mat-form-field-appearance-outline {
41
+ --_bgColor: var(--src-surface-container-main, #fff);
42
+ background-color: var(--_bgColor, #fff);
43
+
44
+ &:hover {
45
+ --_bgColor: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
46
+ }
47
+
48
+ &.mat-focused {
49
+ --_bgColor: var(--src-surface-container-main, #fff);
50
+ box-shadow: var(--srcFormElementFocusRing);
51
+
52
+ &:hover {
53
+ --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
54
+ }
55
+ }
56
+
57
+ &[class*='--state-success'] {
58
+ &:hover {
59
+ --_bgColor: var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08));
60
+ }
61
+ }
62
+
63
+ &[class*='--state-error'],
64
+ &.mat-form-field-invalid {
65
+ &:hover {
66
+ --_bgColor: var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08));
67
+ }
68
+ }
69
+
70
+ &.src-input--secondary {
71
+ --_bgColor: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
72
+
73
+ &:hover {
74
+ --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
75
+ }
76
+ &.mat-focused {
77
+ --_bgColor: var(--src-surface-container-main, #fff);
78
+
79
+ &:hover {
80
+ --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
81
+ }
82
+ }
83
+
84
+ &[class*='--state-success'] {
85
+ --_bgColor: var(--src-surface-container-main, #fff);
86
+ &:hover {
87
+ --_bgColor: var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08));
88
+ }
89
+ &.mat-focused:hover {
90
+ --_bgColor: var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08));
91
+ }
92
+ }
93
+
94
+ &[class*='--state-error'],
95
+ &.mat-form-field-invalid {
96
+ --_bgColor: var(--src-surface-container-main, #fff);
97
+ &:hover {
98
+ --_bgColor: var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08));
99
+ }
100
+ &.mat-focused:hover {
101
+ --_bgColor: var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08));
102
+ }
103
+ }
104
+ }
105
+ }
106
+ // SIZES: Form field text and outlines changes
107
+ .mat-form-field-appearance-outline {
108
+ // Sizing
109
+ --mat-mdc-form-field-floating-label-scale: 1;
110
+ --mat-form-field-container-height: auto;
111
+ --mat-form-field-outlined-container-shape: var(
112
+ --src-border-rounded,
113
+ var(--src-space-1-5)
114
+ );
115
+ --mat-form-field-outlined-input-text-color: var(
116
+ --src-text-ui-secondary-main,
117
+ #111827
118
+ );
119
+ --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
120
+ var(--src-shadow-focus, rgba(1, 123, 255, 0.16));
121
+ border-radius: var(--mat-form-field-outlined-container-shape);
122
+
123
+ &[class*='--state-success'] {
124
+ --mat-form-field-outlined-input-text-color: var(
125
+ --src-text-ui-success-main,
126
+ #16a34a
127
+ );
128
+ --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
129
+ var(--src-shadow-success, rgba(22, 163, 74, 0.12));
130
+
131
+ @include mat.form-field-overrides(
132
+ (
133
+ leading-icon-color: var(--src-color-icon-success, #16a34a),
134
+ trailing-icon-color: var(--src-color-icon-success, #16a34a),
135
+ outlined-outline-color: var(--src-border-input-success, #22c55e),
136
+ outlined-hover-outline-color: var(
137
+ --src-border-input-success-hover,
138
+ #16a34a
139
+ ),
140
+ outlined-focus-outline-color: var(--src-border-input-success, #22c55e),
141
+ )
142
+ );
143
+ }
144
+
145
+ &[class*='--state-error'],
146
+ &.mat-form-field-invalid {
147
+ --mat-form-field-outlined-input-text-color: var(
148
+ --src-text-ui-distruct-main,
149
+ #c5280c
150
+ );
151
+ --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
152
+ var(--src-shadow-error, rgba(239, 68, 68, 0.16));
153
+
154
+ @include mat.form-field-overrides(
155
+ (
156
+ leading-icon-color: var(--src-icon-error, #f24122),
157
+ trailing-icon-color: var(--src-icon-error, #f24122),
158
+ outlined-outline-color: var(--src-border-input-error),
159
+ outlined-hover-outline-color: var(--src-border-input-error-hover),
160
+ outlined-focus-outline-color: var(--src-border-input-error),
161
+ )
162
+ );
163
+ }
164
+
165
+ .mat-mdc-text-field-wrapper {
166
+ padding-left: var(--src-padding-sm, var(--src-space-3));
167
+ padding-right: var(--src-padding-xs, var(--src-space-2));
168
+ border-radius: var(--mat-form-field-outlined-container-shape);
169
+ font-family: var(--src-font-family-header, Inter);
170
+ font-size: var(--src-text-fontSize, var(--src-font-size-sm));
171
+ font-style: normal;
172
+ font-weight: 500;
173
+ line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
174
+ letter-spacing: 0;
175
+ }
176
+
177
+ .mat-mdc-form-field-infix {
178
+ --mat-form-field-container-vertical-padding: var(
179
+ --src-padding-xs,
180
+ var(--src-space-2)
181
+ );
182
+ --mat-form-field-filled-with-label-container-padding-top: var(
183
+ --src-padding-xs,
184
+ var(--src-space-2)
185
+ );
186
+ }
187
+ }
188
+ // Secondary colorScheme
189
+ .src-input--secondary {
190
+ @include mat.form-field-overrides(
191
+ (
19
192
  outlined-input-text-placeholder-color: var(
20
- --src-color-text-default-disabled
193
+ --src-text-ui-secondary-grey,
194
+ #9ca3af
21
195
  ),
196
+ outlined-outline-color: transparent,
197
+ outlined-hover-outline-color: transparent,
22
198
  )
23
199
  );
24
200
  }
201
+ // Ghost colorScheme
202
+ .src-input--ghost {
203
+ @include mat.form-field-overrides(
204
+ (
205
+ outlined-outline-color: transparent,
206
+ outlined-hover-outline-color: transparent,
207
+ )
208
+ );
25
209
 
26
- .mat-mdc-text-field-wrapper {
27
- box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
210
+ &[class*='--state-success'] {
211
+ @include mat.form-field-overrides(
212
+ (
213
+ outlined-outline-color: transparent,
214
+ outlined-hover-outline-color: transparent,
215
+ )
216
+ );
217
+ }
218
+ &[class*='--state-error'] {
219
+ @include mat.form-field-overrides(
220
+ (
221
+ outlined-outline-color: transparent,
222
+ outlined-hover-outline-color: transparent,
223
+ )
224
+ );
225
+ }
28
226
  }
227
+
29
228
  // Mat Hints are disabled in favour of using SourceHint Component
30
229
  .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
31
230
  display: none;
32
231
  height: 0;
33
232
  }
34
233
 
35
- .mdc-text-field.mdc-text-field--outlined {
36
- border-top-left-radius: var(--src-br-small);
37
- border-top-right-radius: var(--src-br-small);
38
- border-bottom-right-radius: var(--src-br-small);
39
- border-bottom-left-radius: var(--src-br-small);
40
- }
41
- .mat-mdc-form-field.mat-focused .mdc-text-field--outlined {
42
- box-shadow:
43
- 0 0 0 1px #fff,
44
- 0 0 0 3px var(--src-color-border-primary);
45
- }
46
-
47
- .mat-mdc-form-field-icon-prefix,
48
- .mat-mdc-form-field-icon-suffix {
49
- aspect-ratio: 1;
50
- width: 100%;
51
- height: 100%;
52
- max-height: 36px;
53
- max-width: 36px;
54
- display: flex;
55
- align-items: center;
56
- justify-content: center;
57
- // TODO: make better decision.
58
- padding: 0 4px !important;
234
+ // Slot for label inside form field
235
+ .mat-mdc-form-field-text-prefix {
236
+ label {
237
+ padding-right: var(--src-gap-md, 6px);
238
+ white-space: nowrap;
239
+ }
240
+ }
241
+ // Slots for icons and buttons
242
+
243
+ .mat-mdc-form-field-has-icon-prefix,
244
+ .mat-mdc-form-field-has-icon-suffix {
245
+ .mat-mdc-form-field-flex {
246
+ display: grid;
247
+ grid-template-columns: var(--formFieldWithIconsGrid);
248
+ gap: 0;
249
+ color: var(--src-icon-grey);
250
+
251
+ .mat-mdc-form-field-infix {
252
+ text-overflow: ellipsis;
253
+ overflow: hidden;
254
+ width: 100%;
255
+ }
256
+ }
257
+ .mat-mdc-form-field-icon-prefix,
258
+ .mat-mdc-form-field-icon-suffix {
259
+ // Slot for one icon. TODO: add support for multiple icons
260
+ aspect-ratio: 1;
261
+ height: 100%;
262
+ padding: 0;
263
+ display: flex;
264
+ align-items: center;
265
+ justify-content: center;
266
+ }
267
+ }
268
+
269
+ .mat-mdc-form-field-has-icon-prefix {
270
+ --formFieldWithIconsGrid: auto minmax(0, 1fr);
271
+ }
272
+
273
+ .mat-mdc-form-field-has-icon-suffix {
274
+ --formFieldWithIconsGrid: minmax(0, 1fr) auto;
275
+ }
276
+
277
+ .mat-mdc-form-field-has-icon-prefix.mat-mdc-form-field-has-icon-suffix {
278
+ --formFieldWithIconsGrid: auto minmax(0, 1fr) auto;
59
279
  }
package/styles/material/radio.scss CHANGED
@@ -2,32 +2,90 @@
2
2
  :root {
3
3
  @include mat.radio-overrides(
4
4
  (
5
- state-layer-size: 20px,
6
- unselected-hover-icon-color: var(--src-color-border-strong-hover),
7
- unselected-focus-icon-color: var(--src-color-border-strong-hover),
8
- unselected-icon-color: var(--src-color-border-strong),
5
+ // Label color
6
+ label-text-color: var(--src-text-body-main, #111827),
7
+ //
9
8
  ripple-color: transparent,
10
9
  checked-ripple-color: transparent,
11
- selected-hover-icon-color: var(--src-color-border-primary),
10
+ unselected-icon-color: var(--src-border-input-basic, #d1d5db),
11
+ selected-icon-color: var(--src-ui-accent-default, #017bff),
12
+ unselected-hover-icon-color: var(--src-border-input-hover, #9ca3af),
13
+ selected-hover-icon-color: var(--src-ui-accent-default-hover, #016fe6),
14
+ unselected-focus-icon-color: var(--src-border-input-basic, #d1d5db),
15
+ selected-focus-icon-color: var(--src-ui-accent-default, #017bff),
16
+ disabled-selected-icon-color: var(
17
+ --src-ui-accent-disabled,
18
+ rgba(148, 163, 184, 0.24)
19
+ ),
20
+ disabled-unselected-icon-color: var(--src-border-input-basic, #d1d5db)
12
21
  )
13
22
  );
14
23
  }
15
- .mat-mdc-radio-button {
16
- --mdc-radio-selected-icon-color: transparent;
24
+ // .mat-accent here just to increase specificity
25
+ .mat-mdc-radio-button.mat-accent {
26
+ --srcRadioSize: var(--src-icon-size, var(--src-space-5));
27
+ --mat-radio-state-layer-size: var(--srcRadioSize);
28
+ --mat-radio-label-text-line-height: var(
29
+ --src-text-lineHeight,
30
+ var(--src-font-line-sm)
31
+ );
32
+ --mat-radio-label-text-size: var(
33
+ --src-text-fontSize,
34
+ var(--src-font-size-sm)
35
+ );
36
+ --mat-radio-label-text-tracking: 0;
37
+ --mat-radio-label-text-weight: 500;
38
+
39
+ .mdc-radio {
40
+ width: var(--srcRadioSize);
41
+ height: var(--srcRadioSize);
42
+
43
+ padding: calc(
44
+ (var(--mat-radio-state-layer-size, 40px) - var(--srcRadioSize)) / 2
45
+ );
46
+ }
47
+
17
48
  &.mat-mdc-radio-checked {
18
49
  --mdc-radio-selected-icon-color: var(--src-color-border-primary);
19
50
  --mdc-radio-selected-hover-icon-color: var(--src-color-border-primary);
20
-
21
- .mdc-radio__inner-circle {
22
- border-color: #fff !important;
23
- }
51
+ }
52
+ .mdc-radio__outer-circle {
53
+ border-width: 2px;
54
+ }
55
+ .mdc-radio__native-control:checked
56
+ + .mdc-radio__background
57
+ > .mdc-radio__inner-circle {
58
+ display: none;
59
+ }
60
+ .mdc-radio__native-control:enabled:checked
61
+ + .mdc-radio__background
62
+ > .mdc-radio__outer-circle {
63
+ border-width: 4px;
64
+ }
65
+ .mdc-radio__background {
66
+ width: 100%;
67
+ height: 100%;
68
+ }
69
+ .mat-internal-form-field > label {
70
+ padding-left: var(--src-gap-lg, var(--src-space-3));
24
71
  }
25
72
  }
26
73
  .mat-mdc-radio-button
27
- .mdc-radio__native-control:enabled:checked
28
- + .mdc-radio__background
29
- > .mdc-radio__outer-circle {
30
- border-width: 5px;
74
+ .mdc-radio__native-control
75
+ + .mdc-radio__background::before {
76
+ opacity: 1 !important;
77
+ top: calc(
78
+ -1 * (var(--mat-radio-state-layer-size, 40px) - var(--srcRadioSize)) / 2
79
+ );
80
+ left: calc(
81
+ -1 * (var(--mat-radio-state-layer-size, 40px) - var(--srcRadioSize)) / 2
82
+ );
83
+ }
84
+
85
+ .mat-mdc-radio-button
86
+ .mdc-radio__native-control:focus
87
+ + .mdc-radio__background::before {
88
+ box-shadow: var(--srcFormElementFocusRing);
31
89
  }
32
90
 
33
91
  .mat-mdc-radio-group {
package/styles/material/select.scss CHANGED
@@ -4,39 +4,59 @@
4
4
  :root {
5
5
  @include mat.select-overrides(
6
6
  (
7
- // panel-background-color: orange,
8
- panel-background-color: var(--src-color-bg-default),
9
- enabled-trigger-text-color: var(--src-color-text-default),
10
- enabled-arrow-color: var(--src-color-icon-default),
11
- disabled-arrow-color: var(--src-color-icon-default-disabled),
12
- focused-arrow-color: var(--src-color-icon-primary),
13
- invalid-arrow-color: var(--src-color-icon-default),
14
- container-elevation-shadow: var(--src-shadow-large),
15
- trigger-text-size: var(--src-fs-base, 14px),
16
- trigger-text-line-height: var(--src-lh-base, 20px),
17
- placeholder-text-color: var(--src-color-text-default-disabled)
7
+ panel-background-color: var(--src-surface-container-main, #fff),
8
+ enabled-arrow-color: var(--src-icon-default, #374151),
9
+ disabled-arrow-color: var(--src-icon-disabled, #9ca3af),
10
+ focused-arrow-color: var(--src-icon-label, #6b7280),
11
+ invalid-arrow-color: var(--src-icon-error, #f24122),
12
+ placeholder-text-color: var(--src-color-text-default-disabled),
18
13
  )
19
14
  );
20
15
 
21
16
  @include mat.core-overrides(
22
17
  (
23
- option-selected-state-layer-color: var(--src-color-bg-default-active),
24
- option-selected-state-label-text-color: var(--src-color-text-default),
25
- option-hover-state-layer-color: var(--src-color-bg-default-hover),
26
- option-focus-state-layer-color: var(--src-color-bg-default-hover),
18
+ option-selected-state-layer-color: var(
19
+ --src-ui-secondary-active,
20
+ rgba(1, 123, 255, 0.12)
21
+ ),
22
+ option-selected-state-label-text-color: var(
23
+ --src-text-body-secondary,
24
+ #4b5563
25
+ ),
26
+ option-hover-state-layer-color: var(
27
+ --src-ui-secondary-default-hover,
28
+ rgba(148, 163, 184, 0.08)
29
+ ),
30
+ option-focus-state-layer-color: var(
31
+ --src-ui-secondary-default-hover,
32
+ rgba(148, 163, 184, 0.08)
33
+ ),
27
34
  )
28
35
  );
29
36
  }
30
37
 
31
- .mat-mdc-form-field {
32
- --mat-mdc-form-field-floating-label-scale: 1;
33
- width: 100%;
38
+ .mat-form-field-appearance-outline {
39
+ --mat-select-enabled-trigger-text-color: var(
40
+ --src-text-ui-secondary-main,
41
+ #111827
42
+ );
43
+ &[class*='--state-success'] {
44
+ --mat-select-enabled-trigger-text-color: var(
45
+ --src-text-ui-success-main,
46
+ #16a34a
47
+ );
48
+ }
49
+ &[class*='--state-error'],
50
+ &.mat-form-field-invalid {
51
+ --mat-select-enabled-trigger-text-color: var(
52
+ --src-text-ui-distruct-main,
53
+ #c5280c
54
+ );
55
+ }
34
56
  }
35
- .mdc-text-field {
36
- // --mat-form-field-container-height: auto;
37
57
 
38
- // --mat-form-field-container-vertical-padding: 8px;
39
- // --mat-form-field-container-height:
58
+ .mat-mdc-select-trigger .mat-mdc-select-arrow-wrapper {
59
+ height: initial;
40
60
  }
41
61
 
42
62
  // Custom additional styling for select panel
@@ -75,23 +95,21 @@
75
95
  }
76
96
 
77
97
  .mat-mdc-option.src-list__item {
78
- // min-height: 48px;
98
+ // Size does not changes because size property is not implemented for select
79
99
  display: flex;
80
100
  min-height: initial;
81
- padding: 8px;
101
+ border-radius: var(--src-border-rounded, 4px);
102
+ padding: var(--src-padding-xs, 6px) var(--src-padding-xs, 6px)
103
+ var(--src-padding-xs, 6px) var(--src-padding-sm, 8px);
82
104
 
83
- .mat-pseudo-checkbox.mat-mdc-option-pseudo-checkbox.mat-pseudo-checkbox-minimal {
84
- --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
85
- --src-color-icon-primary
86
- );
87
- }
105
+ font-size: var(--src-text-fontSize, 14px);
106
+ font-style: normal;
107
+ font-weight: 500;
108
+ line-height: var(--src-text-lineHeight, 20px);
88
109
 
89
- &.mat-mdc-option-multiple {
90
- --mdc-list-list-item-selected-container-color: var(
91
- --src-color-bg-default-active
92
- );
93
- &.mdc-list-item--selected {
94
- background-color: var(--mdc-list-list-item-selected-container-color);
95
- }
110
+ .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
111
+ width: 10px;
112
+ height: 5px;
113
+ color: var(--src-icon-info);
96
114
  }
97
115
  }