@3dsource/source-ui 0.0.29 → 0.0.31

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 +30 -18
  2. package/fesm2022/3dsource-source-ui.mjs +44 -44
  3. package/fesm2022/3dsource-source-ui.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/styles/material/checkbox.scss +102 -18
  6. package/styles/material/form-field.scss +259 -33
  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-visible + .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-visible: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,285 @@
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
+ outlined-disabled-outline-color: transparent,
37
+ )
38
+ );
39
+ }
40
+ // COLORS: Field background changes
41
+ .mat-form-field-appearance-outline {
42
+ --_bgColor: var(--src-surface-container-main, #fff);
43
+ background-color: var(--_bgColor, #fff);
44
+
45
+ &:hover {
46
+ --_bgColor: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
47
+ }
48
+
49
+ &.mat-focused {
50
+ --_bgColor: var(--src-surface-container-main, #fff);
51
+ box-shadow: var(--srcFormElementFocusRing);
52
+
53
+ &:hover {
54
+ --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
55
+ }
56
+ }
57
+
58
+ &[class*='--state-success'] {
59
+ &:hover {
60
+ --_bgColor: var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08));
61
+ }
62
+ }
63
+
64
+ &[class*='--state-error'],
65
+ &.mat-form-field-invalid {
66
+ &:hover {
67
+ --_bgColor: var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08));
68
+ }
69
+ }
70
+
71
+ &.src-input--secondary {
72
+ --_bgColor: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
73
+
74
+ &:hover {
75
+ --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
76
+ }
77
+ &.mat-focused {
78
+ --_bgColor: var(--src-surface-container-main, #fff);
79
+
80
+ &:hover {
81
+ --_bgColor: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
82
+ }
83
+ }
84
+
85
+ &[class*='--state-success'] {
86
+ --_bgColor: var(--src-surface-container-main, #fff);
87
+ &:hover {
88
+ --_bgColor: var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08));
89
+ }
90
+ &.mat-focused:hover {
91
+ --_bgColor: var(--src-ui-input-success-hover, rgba(22, 163, 74, 0.08));
92
+ }
93
+ }
94
+
95
+ &[class*='--state-error'],
96
+ &.mat-form-field-invalid {
97
+ --_bgColor: var(--src-surface-container-main, #fff);
98
+ &:hover {
99
+ --_bgColor: var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08));
100
+ }
101
+ &.mat-focused:hover {
102
+ --_bgColor: var(--src-ui-input-error-hover, rgba(239, 68, 68, 0.08));
103
+ }
104
+ }
105
+ }
106
+
107
+ &.mat-form-field-disabled {
108
+ --_bgColor: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
109
+ }
110
+ }
111
+ // SIZES: Form field text and outlines changes
112
+ .mat-form-field-appearance-outline {
113
+ width: 100%;
114
+ // Sizing
115
+ --mat-mdc-form-field-floating-label-scale: 1;
116
+ --mat-form-field-container-height: auto;
117
+ --mat-form-field-outlined-container-shape: var(
118
+ --src-border-rounded,
119
+ var(--src-space-1-5)
120
+ );
121
+ --mat-form-field-outlined-input-text-color: var(
122
+ --src-text-ui-secondary-main,
123
+ #111827
124
+ );
125
+ --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
126
+ var(--src-shadow-focus, rgba(1, 123, 255, 0.16));
127
+ border-radius: var(--mat-form-field-outlined-container-shape);
128
+
129
+ &[class*='--state-success'] {
130
+ --mat-form-field-outlined-input-text-color: var(
131
+ --src-text-ui-success-main,
132
+ #16a34a
133
+ );
134
+ --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
135
+ var(--src-shadow-success, rgba(22, 163, 74, 0.12));
136
+
137
+ @include mat.form-field-overrides(
138
+ (
139
+ leading-icon-color: var(--src-color-icon-success, #16a34a),
140
+ trailing-icon-color: var(--src-color-icon-success, #16a34a),
141
+ outlined-outline-color: var(--src-border-input-success, #22c55e),
142
+ outlined-hover-outline-color: var(
143
+ --src-border-input-success-hover,
144
+ #16a34a
145
+ ),
146
+ outlined-focus-outline-color: var(--src-border-input-success, #22c55e),
147
+ )
148
+ );
149
+ }
150
+
151
+ &[class*='--state-error'],
152
+ &.mat-form-field-invalid {
153
+ --mat-form-field-outlined-input-text-color: var(
154
+ --src-text-ui-distruct-main,
155
+ #c5280c
156
+ );
157
+ --srcFormElementFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
158
+ var(--src-shadow-error, rgba(239, 68, 68, 0.16));
159
+
160
+ @include mat.form-field-overrides(
161
+ (
162
+ leading-icon-color: var(--src-icon-error, #f24122),
163
+ trailing-icon-color: var(--src-icon-error, #f24122),
164
+ outlined-outline-color: var(--src-border-input-error),
165
+ outlined-hover-outline-color: var(--src-border-input-error-hover),
166
+ outlined-focus-outline-color: var(--src-border-input-error),
167
+ )
168
+ );
169
+ }
170
+
171
+ .mat-mdc-text-field-wrapper {
172
+ padding-left: var(--src-padding-sm, var(--src-space-3));
173
+ padding-right: var(--src-padding-xs, var(--src-space-2));
174
+ border-radius: var(--mat-form-field-outlined-container-shape);
175
+ font-family: var(--src-font-family-header, Inter);
176
+ font-size: var(--src-text-fontSize, var(--src-font-size-sm));
177
+ font-style: normal;
178
+ font-weight: 500;
179
+ line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
180
+ letter-spacing: 0;
181
+ }
182
+
183
+ .mat-mdc-form-field-infix {
184
+ --mat-form-field-container-vertical-padding: var(
185
+ --src-padding-xs,
186
+ var(--src-space-2)
187
+ );
188
+ --mat-form-field-filled-with-label-container-padding-top: var(
189
+ --src-padding-xs,
190
+ var(--src-space-2)
191
+ );
192
+ }
193
+ }
194
+ // Secondary colorScheme
195
+ .src-input--secondary {
196
+ @include mat.form-field-overrides(
197
+ (
19
198
  outlined-input-text-placeholder-color: var(
20
- --src-color-text-default-disabled
199
+ --src-text-ui-secondary-grey,
200
+ #9ca3af
21
201
  ),
202
+ outlined-outline-color: transparent,
203
+ outlined-hover-outline-color: transparent,
22
204
  )
23
205
  );
24
206
  }
207
+ // Ghost colorScheme
208
+ .src-input--ghost {
209
+ @include mat.form-field-overrides(
210
+ (
211
+ outlined-outline-color: transparent,
212
+ outlined-hover-outline-color: transparent,
213
+ )
214
+ );
25
215
 
26
- .mat-mdc-text-field-wrapper {
27
- box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
216
+ &[class*='--state-success'] {
217
+ @include mat.form-field-overrides(
218
+ (
219
+ outlined-outline-color: transparent,
220
+ outlined-hover-outline-color: transparent,
221
+ )
222
+ );
223
+ }
224
+ &[class*='--state-error'] {
225
+ @include mat.form-field-overrides(
226
+ (
227
+ outlined-outline-color: transparent,
228
+ outlined-hover-outline-color: transparent,
229
+ )
230
+ );
231
+ }
28
232
  }
233
+
29
234
  // Mat Hints are disabled in favour of using SourceHint Component
30
235
  .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
31
236
  display: none;
32
237
  height: 0;
33
238
  }
34
239
 
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);
240
+ // Slot for label inside form field
241
+ .mat-mdc-form-field-text-prefix {
242
+ label {
243
+ padding-right: var(--src-gap-md, 6px);
244
+ white-space: nowrap;
245
+ }
40
246
  }
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);
247
+ // Slots for icons and buttons
248
+
249
+ .mat-mdc-form-field-has-icon-prefix,
250
+ .mat-mdc-form-field-has-icon-suffix {
251
+ .mat-mdc-form-field-flex {
252
+ display: grid;
253
+ grid-template-columns: var(--formFieldWithIconsGrid);
254
+ gap: 0;
255
+ color: var(--src-icon-grey);
256
+
257
+ .mat-mdc-form-field-infix {
258
+ text-overflow: ellipsis;
259
+ overflow: hidden;
260
+ width: 100%;
261
+ }
262
+ }
263
+ .mat-mdc-form-field-icon-prefix,
264
+ .mat-mdc-form-field-icon-suffix {
265
+ // Slot for one icon. TODO: add support for multiple icons
266
+ aspect-ratio: 1;
267
+ height: 100%;
268
+ padding: 0;
269
+ display: flex;
270
+ align-items: center;
271
+ justify-content: center;
272
+ }
45
273
  }
46
274
 
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;
275
+ .mat-mdc-form-field-has-icon-prefix {
276
+ --formFieldWithIconsGrid: auto minmax(0, 1fr);
277
+ }
278
+
279
+ .mat-mdc-form-field-has-icon-suffix {
280
+ --formFieldWithIconsGrid: minmax(0, 1fr) auto;
281
+ }
282
+
283
+ .mat-mdc-form-field-has-icon-prefix.mat-mdc-form-field-has-icon-suffix {
284
+ --formFieldWithIconsGrid: auto minmax(0, 1fr) auto;
59
285
  }
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-visible
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
  }