@lucca-front/scss 7.2.0 → 7.3.0

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 (17) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +1 -1
  3. package/src/components/_button.scss +109 -74
  4. package/src/components/_form.scss +13 -11
  5. package/src/components/inputs/checkbox/_checkbox.scss +41 -37
  6. package/src/components/inputs/field/_field.framed.scss +6 -1
  7. package/src/components/inputs/radio/_radio.scss +49 -49
  8. package/src/components/inputs/radio-buttons/_radio-buttons.scss +46 -21
  9. package/src/components/inputs/switch/_switch.scss +8 -7
  10. package/src/components/inputs/textfield/_textfield.framed.scss +11 -59
  11. package/src/components/inputs/textfield/_textfield.outlined.scss +15 -6
  12. package/src/components/inputs/textfield/_textfield.scss +6 -5
  13. package/src/mixins/_forms.scss +28 -24
  14. package/src/theming/_commons.scss +1 -1
  15. package/src/theming/components/_radio.theme.scss +1 -1
  16. package/src/theming/components/_switch.theme.scss +1 -1
  17. package/src/theming/components/_textfield.theme.scss +3 -3
package/src/components/inputs/radio/_radio.scss CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  &:checked ~ .radio-label {
16
16
  &::after {
17
- transform: scale(.55);
17
+ transform: scale(0.55);
18
18
  }
19
19
  }
20
20
  }
@@ -22,34 +22,35 @@
22
22
  .radio-label {
23
23
  cursor: pointer;
24
24
  display: inline-block;
25
- line-height: _component("radio.label.line-height");
26
- padding: _component("radio.label.padding");
27
- transition: color _theme("commons.animations.durations.fast") ease;
25
+ line-height: _component('radio.label.line-height');
26
+ padding: _component('radio.label.padding');
27
+ transition: color _theme('commons.animations.durations.fast') ease;
28
28
 
29
29
  &::before {
30
+ background-color: _color("white");
30
31
  border-radius: 50%;
31
- content: "";
32
+ content: '';
32
33
  display: block;
33
- height: _component("radio.input.size");
34
+ height: _component('radio.input.size');
34
35
  left: 0;
35
36
  position: absolute;
36
- top: _component("radio.input.top");
37
- transition: all _theme("commons.animations.durations.fast") ease;
38
- width: _component("radio.input.size");
37
+ top: _component('radio.input.top');
38
+ transition: all _theme('commons.animations.durations.fast') ease;
39
+ width: _component('radio.input.size');
39
40
  }
40
41
 
41
42
  &::after {
42
43
  border-radius: 50%;
43
44
  color: transparent;
44
- content: "";
45
+ content: '';
45
46
  display: block;
46
- height: _component("radio.input.size");
47
+ height: _component('radio.input.size');
47
48
  left: 0;
48
49
  position: absolute;
49
- top: _component("radio.input.top");
50
+ top: _component('radio.input.top');
50
51
  transform: scale(0);
51
- transition: all _theme("commons.animations.durations.fast") ease;
52
- width: _component("radio.input.size");
52
+ transition: all _theme('commons.animations.durations.fast') ease;
53
+ width: _component('radio.input.size');
53
54
  }
54
55
  }
55
56
 
@@ -58,68 +59,65 @@
58
59
 
59
60
  .radio {
60
61
  @mixin radioColoring($palette) {
61
- .radio-input:checked ~ .radio-label {
62
+
63
+ .radio-label {
62
64
  &::before {
63
- border: 2px solid _color($palette, "700");
65
+ border: 2px solid _color($palette, 700);
64
66
  }
67
+ }
65
68
 
69
+ .radio-input:checked ~ .radio-label {
66
70
  &::after {
67
- background-color: _color($palette, "700");
71
+ background-color: _color($palette, 700);
68
72
  }
73
+ }
69
74
 
75
+ .radio-input:not(:disabled):checked ~ .radio-label {
70
76
  &:hover {
71
77
  &::before {
72
- border-color: _color($palette, "600");
78
+ border-color: _color($palette, 600);
73
79
  }
74
80
 
75
81
  &::after {
76
- background-color: _color($palette, "600");
82
+ background-color: _color($palette, '600');
77
83
  }
78
84
  }
79
85
  }
80
-
81
- .radio-label {
82
- &::before {
83
- border: 2px solid _color($palette, "700");
84
- }
85
-
86
+
87
+ .radio-input:not(:disabled) ~ .radio-label {
86
88
  &:hover {
87
- &::after {
88
- background-color: _color($palette, "600");
89
- }
90
-
91
89
  &::before {
92
- border-color: _color($palette, "600");
90
+ border-color: _color($palette, 600);
93
91
  }
94
92
  }
95
93
  }
96
94
 
95
+
97
96
  .radio-input {
98
97
  &:focus ~ .radio-label {
99
98
  &::before {
100
- box-shadow: 0 0 0 4px _color($palette, "200");
101
- border-color: _color($palette, "600");
99
+ box-shadow: 0 0 0 4px _color($palette, '200');
100
+ border-color: _color($palette, '600');
102
101
  }
103
102
 
104
103
  &::after {
105
- background-color: _color($palette, "600");
104
+ background-color: _color($palette, '600');
106
105
  }
107
106
  }
108
107
  }
109
108
  }
110
109
 
111
110
  // default color
112
- @include radioColoring("radio.default-palette");
111
+ @include radioColoring('radio.default-palette');
113
112
 
114
113
  // palette colors
115
- @each $name, $palette in _getMap("palettes") {
114
+ @each $name, $palette in _getMap('palettes') {
116
115
  &.palette-#{$name} {
117
116
  @include radioColoring($name);
118
117
  }
119
118
  }
120
119
  }
121
120
 
122
-
123
121
  // MODS
124
122
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
125
123
 
@@ -132,14 +130,15 @@
132
130
  }
133
131
 
134
132
  &.mod-small .radio-label {
135
- line-height: _theme("sizes.small.line-height");
136
- font-size: _theme("sizes.small.font-size");
137
- padding: _component("radio.label.small-padding");
138
-
139
- &::before, &::after {
140
- height: _theme("sizes.small.font-size");
141
- width: _theme("sizes.small.font-size");
142
- top: _component("radio.input.small-top");
133
+ line-height: _theme('sizes.small.line-height');
134
+ font-size: _theme('sizes.small.font-size');
135
+ padding: _component('radio.label.small-padding');
136
+
137
+ &::before,
138
+ &::after {
139
+ height: _theme('sizes.small.font-size');
140
+ width: _theme('sizes.small.font-size');
141
+ top: _component('radio.input.small-top');
143
142
  }
144
143
  }
145
144
  }
@@ -148,23 +147,24 @@
148
147
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
149
148
 
150
149
  .radio .radio-input {
151
- &[disabled] {
150
+ &[disabled],
151
+ &[read-only] {
152
152
  ~ .radio-label {
153
- color: _color("grey");
153
+ color: _color('grey', '500');
154
154
  cursor: default;
155
155
 
156
156
  &::before {
157
- border: 2px solid _color("grey", "500");
157
+ border: 2px solid _color('grey', '500');
158
158
  }
159
159
  }
160
160
 
161
161
  &:checked ~ .radio-label {
162
162
  &::before {
163
- border: 2px solid _color("grey", "500");
163
+ border: 2px solid _color('grey', '500');
164
164
  }
165
165
 
166
166
  &::after {
167
- background-color: _color("grey", "500");
167
+ background-color: _color('grey', '500');
168
168
  }
169
169
  }
170
170
  }
package/src/components/inputs/radio-buttons/_radio-buttons.scss CHANGED
@@ -23,12 +23,14 @@
23
23
  .radioButtons-item-input {
24
24
  @include mask;
25
25
 
26
- &:checked ~ .radioButtons-item-label {
26
+ &:checked ~ .radioButtons-item-label,
27
+ &:focus ~ .radioButtons-item-label {
27
28
  z-index: 2;
28
29
  }
29
30
  }
30
31
 
31
32
  .radioButtons-item-label {
33
+ background-color: _color("white");
32
34
  cursor: pointer;
33
35
  display: block;
34
36
  overflow: hidden;
@@ -41,45 +43,51 @@
41
43
  // PALETTES
42
44
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
43
45
  @mixin radioLabelColoring($palette) {
44
- color: _color($palette, "800");
45
- box-shadow: inset 0 0 0 1px _color($palette, "200");
46
+ color: _color($palette, 700);
47
+ box-shadow: inset 0 0 0 1px _color($palette, 200);
46
48
 
47
49
  &:hover {
48
- background-color: _color($palette, "50");
49
- box-shadow: inset 0 0 0 1px _color($palette, "200");
50
+ background-color: _color($palette, 50);
51
+ box-shadow: _theme('commons.elevations.elevation-1'), inset 0 0 0 1px _color($palette, 200);
50
52
  }
51
53
  }
52
54
 
53
55
  @mixin radioInputColoring($palette) {
56
+
54
57
  &:checked ~ .radioButtons-item-label {
55
- background-color: _color($palette, "50");
56
- box-shadow: inset 0 0 0 1px _color($palette, "200");
57
- color: _color($palette, "700");
58
+ background-color: _color($palette, 50);
59
+ box-shadow: inset 0 0 0 1px _color($palette, 400);
60
+ color: _color($palette, 700);
58
61
 
59
62
  &:hover {
60
- background-color: _color($palette, "100");
61
- box-shadow: inset 0 0 0 1px _color($palette, "400");
62
- }
63
-
64
- &:focus {
65
- box-shadow: 0 0 0 4px _color($palette, "200"), inset 0 0 0 1px _color($palette, "400");
63
+ box-shadow: _theme('commons.elevations.elevation-1'), inset 0 0 0 1px _color($palette, 400);
66
64
  }
67
65
  }
68
66
 
69
67
  &:focus ~ .radioButtons-item-label {
70
- box-shadow: 0 0 0 4px _color($palette, "200"), inset 0 0 0 1px _color($palette, "400");
68
+ box-shadow: 0 0 0 4px _color($palette, 200), inset 0 0 0 1px _color($palette, 400);
69
+ }
70
+
71
+ &:focus:checked ~ .radioButtons-item-label {
72
+ background-color: _color($palette, 100);
73
+ box-shadow: 0 0 0 4px _color($palette, 200), inset 0 0 0 1px _color($palette, 600);
74
+ }
75
+
76
+ &:focus:not(:checked) ~ .radioButtons-item-label {
77
+ background-color: _color("grey", 50);
71
78
  }
72
79
  }
73
80
 
74
81
  .radioButtons {
75
82
  @each $name, $palette in _getMap("palettes") {
76
83
  &.palette-#{$name} {
77
- .radioButtons-item-label {
78
- @include radioLabelColoring($name);
79
- }
80
84
 
81
- .radioButtons-item-input {
85
+ .radioButtons-item-input:not(:disabled, .is-disabled) {
82
86
  @include radioInputColoring($name);
87
+
88
+ ~ .radioButtons-item-label {
89
+ @include radioLabelColoring($name);
90
+ }
83
91
  }
84
92
  }
85
93
  }
@@ -97,7 +105,7 @@
97
105
  }
98
106
  }
99
107
 
100
- .radioButtons-item-input {
108
+ .radioButtons-item-input:not(:disabled, .is-disabled) {
101
109
  // default color
102
110
  @include radioInputColoring("radioButtons.default-palette");
103
111
 
@@ -111,7 +119,6 @@
111
119
 
112
120
  // MODS
113
121
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
114
-
115
122
  .radioButtons {
116
123
  &.mod-small {
117
124
  .radioButtons-item-label {
@@ -121,3 +128,21 @@
121
128
  }
122
129
  }
123
130
  }
131
+
132
+ // STATES
133
+ // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
134
+ .radioButtons-item-input {
135
+
136
+ &:disabled ~ .radioButtons-item-label,
137
+ &.is-disabled ~ .radioButtons-item-label { // legacy
138
+ box-shadow: inset 0 0 0 1px _color("grey", 200);
139
+ color: _color("grey", 500);
140
+ cursor: default;
141
+ z-index: -1;
142
+ }
143
+
144
+ &:checked:disabled ~ .radioButtons-item-label,
145
+ &:checked.is-disabled ~ .radioButtons-item-label { // legacy
146
+ background-color: _color("grey", 100);
147
+ }
148
+ }
package/src/components/inputs/switch/_switch.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  .switch {
2
+ display: block;
2
3
  position: relative;
3
4
  }
4
5
 
@@ -143,7 +144,7 @@
143
144
  }
144
145
  }
145
146
 
146
- &:active ~ .switch-label {
147
+ &:active:not([disabled], [readonly]) ~ .switch-label {
147
148
  &::before {
148
149
  background-color: _color("secondary", "800");
149
150
  box-shadow: 0 0 0 4px _color("secondary", "300");
@@ -161,22 +162,22 @@
161
162
  cursor: default;
162
163
 
163
164
  &::before {
164
- background-color: _color("grey", "500");
165
+ background-color: _color("grey", "200");
165
166
  }
166
167
 
167
168
  &::after {
168
- background-color: _color("grey", "300");
169
+ background-color: _color("grey", "500");
169
170
  }
170
171
  }
171
172
 
172
173
  &:checked ~ .switch-label {
173
174
  &::before {
174
- background-color: _color("secondary", "500");
175
- color: _color("secondary", "700");
175
+ background-color: _color("grey", "200");
176
+ color: _color("grey", "500");
176
177
  }
177
178
 
178
179
  &::after {
179
- background-color: _color("secondary", "200");
180
+ background-color: _color("grey", "500");
180
181
  }
181
182
  }
182
183
  }
@@ -195,7 +196,7 @@
195
196
  Active
196
197
  */
197
198
 
198
- &:active ~ .switch-label {
199
+ &:active:not([disabled], [readonly]) ~ .switch-label {
199
200
  &::before {
200
201
  background-color: _color("grey", "800");
201
202
  box-shadow: 0 0 0 4px _color("grey", "300");
package/src/components/inputs/textfield/_textfield.framed.scss CHANGED
@@ -60,74 +60,26 @@
60
60
  .textfield-input {
61
61
  width: 100%;
62
62
  border-radius: 0;
63
- background-color: _color("white");
64
63
  box-shadow: fakeborderoverlay(_component("field.framed.border"));
65
64
  padding: _component("field.framed.top-padding") _component("field.framed.side-padding") _component("field.framed.bottom-padding");
66
65
  line-height: _theme("sizes.standard.line-height");
67
66
 
68
- &:not(:disabled) {
69
- &:not(.is-error) {
70
- &:not(.is-success) {
71
- &:not(.is-valid) {
72
- &:not(.is-warning) {
73
- &:not(.is-invalid) {
74
- &:not(.ng-invalid) {
75
- background-color: white;
76
-
77
- &:hover {
78
- background-color: _component("field.framed.color50");
79
- }
80
-
81
- &:focus {
82
- background-color: white;
83
- box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
84
- }
85
- }
86
- }
87
- }
88
- }
89
- }
90
- }
91
-
92
- &.is-error {
93
- box-shadow: fakeborderoverlay(_color("error"));
94
- z-index: 3;
67
+ &:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
68
+ background-color: _color("white");
95
69
 
96
- &:hover {
97
- background-color: _color("error", "100");
98
- }
99
-
100
- &:focus {
101
- background-color: white;
102
- box-shadow: fakeborderoverlay(_color("error")), 0 0 0 4px _color("error", "50");
103
- }
70
+ &:hover,
71
+ &:focus {
72
+ position: relative;
73
+ z-index: 1;
74
+ background-color: _color("white");
75
+ box-shadow: fakeborderoverlay(_component("field.framed.color"));
104
76
  }
105
77
 
106
- &.is-warning {
107
- background-color: white;
108
-
109
- &:hover {
110
- background-color: _color("warning", "50");
111
- }
112
-
113
- &:focus {
114
- background-color: white;
115
- box-shadow: fakeborderoverlay(_color("warning")), 0 0 0 4px _color("warning", "50");
116
- }
78
+ &:focus {
79
+ z-index: 4;
80
+ box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
117
81
  }
118
82
 
119
- &.is-valid, &.is-success {
120
- background-color: white;
121
-
122
- &:hover {
123
- background-color: _color("success", "50");
124
- }
125
-
126
- &:focus {
127
- background-color: white;
128
- box-shadow: fakeborderoverlay(_color("success")), 0 0 0 4px _color("success", "50");
129
- }
130
- }
131
83
  }
132
84
 
133
85
  &:invalid {
package/src/components/inputs/textfield/_textfield.outlined.scss CHANGED
@@ -4,16 +4,21 @@
4
4
  box-shadow: inset 0 0 0 _component("textfield.outlined.border.width") _component("textfield.outlined.border.default-color");
5
5
  background-color: _color("white");
6
6
  }
7
+
7
8
  &:hover .textfield-input {
8
- box-shadow: inset 0 0 0 _component("textfield.outlined.border.width") _color($palette, 200);
9
- background-color: _color($palette, 50);
9
+ &:not([disabled], &[readonly], &.is-disabled, &.is-readonly) {
10
+ box-shadow: inset 0 0 0 _component("textfield.outlined.border.width") _color($palette, 200);
11
+ background-color: _color($palette, 50);
12
+ }
10
13
  }
11
14
 
12
15
  &.is-focused .textfield-input,
13
16
  .textfield-input.is-focused,
14
17
  .textfield-input:focus {
15
- background-color: _color("white");
16
- box-shadow: 0 0 0 4px _color($palette, 200), inset 0 0 0 _component("textfield.outlined.border.width") _color($palette, 600);
18
+ &:not([disabled], &[readonly], &.is-disabled, &.is-readonly) {
19
+ background-color: _color("white");
20
+ box-shadow: 0 0 0 4px _color($palette, 200), inset 0 0 0 _component("textfield.outlined.border.width") _color($palette, 600);
21
+ }
17
22
  }
18
23
  }
19
24
 
@@ -42,7 +47,9 @@
42
47
  &,
43
48
  &:focus,
44
49
  &.is-focused {
45
- background-color: _theme("commons.disabled.background");
50
+ background-color: _component("textfield.disabled.background");
51
+ color: _component("textfield.disabled.color");
52
+ cursor: default;
46
53
  box-shadow: none;
47
54
  }
48
55
  }
@@ -53,7 +60,9 @@
53
60
  &[readonly],
54
61
  &.is-disabled,
55
62
  &.is-readonly {
56
- background-color: _theme("commons.disabled.background");
63
+ background-color: _component("textfield.disabled.background");
64
+ color: _component("textfield.disabled.color");
65
+ cursor: default;
57
66
  box-shadow: none;
58
67
  }
59
68
  }
package/src/components/inputs/textfield/_textfield.scss CHANGED
@@ -111,7 +111,7 @@
111
111
 
112
112
  .textfield-input {
113
113
  padding-right: _theme("spacings.bigger") !important;
114
-
114
+
115
115
  &::-ms-reveal {
116
116
  display: none;
117
117
  }
@@ -387,12 +387,13 @@
387
387
  @include field-input("textfield");
388
388
 
389
389
  &[disabled], &[readonly], &.is-disabled, &.is-readonly {
390
- background-color: _theme("commons.disabled.background");
391
- color: _theme("commons.disabled.color");
392
- cursor: not-allowed;
390
+ background-color: _component("textfield.disabled.background");
391
+ box-shadow: none;
392
+ color: _component("textfield.disabled.color");
393
+ cursor: default;
393
394
 
394
395
  &::placeholder {
395
- color: _theme("commons.disabled.placeholder");
396
+ color: _component("textfield.disabled.color");
396
397
  }
397
398
  }
398
399
  }
package/src/mixins/_forms.scss CHANGED
@@ -1,33 +1,35 @@
1
1
  @import "../mixins/utilities";
2
2
 
3
3
  @mixin fieldState($fieldname, $state) {
4
- background-color: _color($state, "50");
4
+ &:not(:disabled, .is-disabled) {
5
+ background-color: _color($state, "50");
5
6
 
6
- ~ .#{$fieldname}-label, ~ .#{$fieldname}-suffix {
7
- color: _color($state);
8
- }
9
-
10
- &::placeholder {
11
- color: _color($state, "400");
12
- }
7
+ ~ .#{$fieldname}-label, ~ .#{$fieldname}-suffix {
8
+ color: _color($state);
9
+ }
13
10
 
14
- &:focus {
15
11
  &::placeholder {
16
- color: _color($state, "300");
12
+ color: _color($state, "400");
17
13
  }
18
- }
19
14
 
20
- &:focus ~ .#{$fieldname}-label, &.is-focused ~ .#{$fieldname}-label {
21
- color: _color($state);
22
- }
15
+ &:focus {
16
+ &::placeholder {
17
+ color: _color($state, "300");
18
+ }
19
+ }
23
20
 
24
- &:focus {
25
- background-color: white;
26
- box-shadow: 0 0 0 4px _color($state, "200"), 0 0 0 1px _color($state) inset;
27
- }
21
+ &:focus ~ .#{$fieldname}-label, &.is-focused ~ .#{$fieldname}-label {
22
+ color: _color($state);
23
+ }
28
24
 
29
- @if ($state == "error") {
30
- box-shadow: 0 0 0 1px _color($state);
25
+ &:focus {
26
+ background-color: white;
27
+ box-shadow: 0 0 0 4px _color($state, "200"), 0 0 0 1px _color($state) inset;
28
+ }
29
+
30
+ @if ($state == "error") {
31
+ box-shadow: 0 0 0 1px _color($state);
32
+ }
31
33
  }
32
34
  }
33
35
 
@@ -160,10 +162,12 @@
160
162
  }
161
163
 
162
164
  @if ($fieldname == "radiosfield") {
163
- ~ .radio-label,
164
- ~ .checkbox-label {
165
- &::before {
166
- border-color: _color("error");
165
+ &:not(:disabled) {
166
+ ~ .radio-label,
167
+ ~ .checkbox-label {
168
+ &::before {
169
+ border-color: _color("error");
170
+ }
167
171
  }
168
172
  }
169
173
  }
package/src/theming/_commons.scss CHANGED
@@ -15,7 +15,7 @@ $commons: (
15
15
  ),
16
16
  disabled: (
17
17
  opacity: .4,
18
- background: #E5E5E5,
18
+ background: _color("grey", 100),
19
19
  color: #999999,
20
20
  placeholder: #BBBBBB
21
21
  ),
package/src/theming/components/_radio.theme.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  $radio: (
2
2
  // theming
3
- default-palette: _getMap("palettes.primary"),
3
+ default-palette: _getMap("palettes.grey"),
4
4
  label: (
5
5
  line-height: 1.5rem,
6
6
  padding: 0 0 0 1.5rem,
package/src/theming/components/_switch.theme.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  $switch: (
2
2
  // theming
3
- top: -1px,
3
+ top: 1px,
4
4
  small-top: 2px,
5
5
  icon-top: 1px,
6
6
  icon-left: 1px,
package/src/theming/components/_textfield.theme.scss CHANGED
@@ -20,13 +20,13 @@ $textfield: (
20
20
  ),
21
21
 
22
22
  disabled: (
23
- background: #F5F5F5,
24
- color: #999999
23
+ background: _color("grey", "100"),
24
+ color: _color("grey", "400")
25
25
  ),
26
26
 
27
27
  suffix: (
28
28
  top: 2rem,
29
- padding-right: 1.5rem
29
+ padding-right: 1.5rem
30
30
  ),
31
31
 
32
32
  sizes: (