indicator-ui 0.1.119 → 0.1.121

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 (27) hide show
  1. package/dist/index.css +949 -1023
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +11 -10
  4. package/dist/index.js.map +1 -1
  5. package/dist/scss/styles/colors/secondary.scss +12 -12
  6. package/dist/scss/styles/mixins/formFieldMixins.scss +55 -0
  7. package/dist/scss/styles/mixins/index.scss +1 -0
  8. package/dist/scss/styles/mixins/utils.scss +8 -0
  9. package/dist/scss/test/pages/style.scss +6 -0
  10. package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss +14 -22
  11. package/dist/scss/ui/CheckboxMark/styles/mixins/checkbox-mark.scss +17 -117
  12. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checked.scss +21 -22
  13. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/correct.scss +43 -45
  14. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/disabled.scss +15 -31
  15. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/error.scss +17 -11
  16. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/incorrect.scss +38 -22
  17. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/indeterminate.scss +8 -4
  18. package/dist/scss/ui/CheckboxMark/styles/mixins/properties/radio.scss +1 -7
  19. package/dist/ts/src/test/pages/ButtonsPage.d.ts +1 -0
  20. package/dist/ts/src/test/pages/index.d.ts +1 -1
  21. package/dist/ts/src/ui/Buttons/types/ButtonTypes.d.ts +5 -1
  22. package/dist/ts/src/ui/Tag/ui/FilterTag.d.ts +1 -1
  23. package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useFormPaginatedSelectField.d.ts +6 -5
  24. package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useSelectFieldState.d.ts +1 -1
  25. package/docs/CSSVariables/CSSThemeCustomize.md +123 -0
  26. package/package.json +1 -1
  27. /package/dist/ts/src/test/pages/{FieldsPage.d.ts → FieldsPage/FieldsPage.d.ts} +0 -0
package/dist/scss/styles/colors/secondary.scss CHANGED
@@ -1,12 +1,12 @@
1
- $blue-dark-25: #F5F8FF !default;
2
- $blue-dark-50: #EFF4FF !default;
3
- $blue-dark-100: #D1E0FF !default;
4
- $blue-dark-200: #B2CCFF !default;
5
- $blue-dark-300: #84ADFF !default;
6
- $blue-dark-400: #528BFF !default;
7
- $blue-dark-500: #2970FF !default;
8
- $blue-dark-600: #155EEF !default;
9
- $blue-dark-700: #004EEB !default;
10
- $blue-dark-800: #0040C1 !default;
11
- $blue-dark-900: #00359E !default;
12
- $blue-dark-950: #002266 !default;
1
+ $blue-dark-25: var(--blue-dark-25) !default;
2
+ $blue-dark-50: var(--blue-dark-50) !default;
3
+ $blue-dark-100: var(--blue-dark-100) !default;
4
+ $blue-dark-200: var(--blue-dark-200) !default;
5
+ $blue-dark-300: var(--blue-dark-300) !default;
6
+ $blue-dark-400: var(--blue-dark-400) !default;
7
+ $blue-dark-500: var(--blue-dark-500) !default;
8
+ $blue-dark-600: var(--blue-dark-600) !default;
9
+ $blue-dark-700: var(--blue-dark-700) !default;
10
+ $blue-dark-800: var(--blue-dark-800) !default;
11
+ $blue-dark-900: var(--blue-dark-900) !default;
12
+ $blue-dark-950: var(--blue-dark-950) !default;
package/dist/scss/styles/mixins/formFieldMixins.scss ADDED
@@ -0,0 +1,55 @@
1
+ @use './themes' as *;
2
+
3
+ @mixin formFieldDisabled {
4
+ background-color: var(--ui-form-field-disabled-background-color, var(--gray-50));
5
+ border: 1px solid var(--ui-form-field-disabled-border-color, var(--gray-300));
6
+ color: var(--ui-form-field-disabled-text-color, var(--gray-500));
7
+
8
+ @include darkTheme {
9
+ background-color: var(--ui-form-field-disabled-background-color, var(--gray-950));
10
+ border: 1px solid var(--ui-form-field-disabled-border-color, var(--gray-800));
11
+ color: var(--ui-form-field-disabled-text-color, var(--gray-25))
12
+ }
13
+ }
14
+
15
+ @mixin formFieldFocus {
16
+ background-color: var(--ui-form-field-focus-background-color, var(--ui-form-field-background-color, var(--base-white)));
17
+ border: 1px solid var(--ui-form-field-focus-border-color, var(--ui-form-field-border-color, var(--gray-400)));
18
+ box-shadow: var(--ui-form-field-focus-box-shadow, var(--ui-form-field-box-shadow, 0 1px 2px 0 #1018280D));
19
+ color: var(--ui-form-field-focus-text-color, var(--ui-form-field-text-color, var(--gray-900)));
20
+
21
+ @include darkTheme {
22
+ background-color: var(--ui-form-field-focus-background-color, var(--ui-form-field-background-color, var(--gray-950)));
23
+ border: 1px solid var(--ui-form-field-focus-border-color, var(--ui-form-field-border-color, var(--gray-700)));
24
+ box-shadow: var(--ui-form-field-focus-box-shadow, var(--ui-form-field-box-shadow, 0 1px 2px 0 #1018280D));
25
+ color: var(--ui-form-field-focus-text-color, var(--ui-form-field-text-color, var(--gray-25)));
26
+ }
27
+ }
28
+
29
+ @mixin formFieldError {
30
+ background-color: var(--ui-form-field-error-background-color, var(--base-white));
31
+ border: 1px solid var(--ui-form-field-error-border-color, var(--error-300));
32
+ box-shadow: var(--ui-form-field-error-box-shadow, 0 1px 2px 0 #1018280D);
33
+ color: var(--ui-form-field-error-text-color, var(--gray-900));
34
+
35
+ @include darkTheme {
36
+ background-color: var(--ui-form-field-error-background-color, var(--ui-form-field-background-color, var(--gray-950)));
37
+ border: 1px solid var(--ui-form-field-error-border-color, var(--error-900));
38
+ box-shadow: var(--ui-form-field-error-box-shadow, var(--ui-form-field-box-shadow, 0 1px 2px 0 #1018280D));
39
+ color: var(--ui-form-field-error-text-color, var(--ui-form-field-text-color, var(--gray-25)));
40
+ }
41
+ }
42
+
43
+ @mixin formFieldErrorFocus {
44
+ background-color: var(--ui-form-field-error-focus-background-color, var(--base-white));
45
+ border: 1px solid var(--ui-form-field-error-focus-border-color, var(--error-400));
46
+ box-shadow: var(--ui-form-field-error-focus-box-shadow, 0 1px 2px 0 #1018280D);
47
+ color: var(--ui-form-field-error-focus-text-color, var(--gray-900));
48
+
49
+ @include darkTheme {
50
+ background-color: var(--ui-form-field-error-focus-background-color, var(--ui-form-field-error-background-color, var(--ui-form-field-background-color, var(--gray-950))));
51
+ border: 1px solid var(--ui-form-field-error-focus-border-color, var(--ui-form-field-error-border-color, var(--error-700)));
52
+ box-shadow: var(--ui-form-field-error-focus-box-shadow, var(--ui-form-field-error-box-shadow, 0 1px 2px 0 #1018280D));
53
+ color: var(--ui-form-field-error-focus-text-color, var(--gray-25));
54
+ }
55
+ }
package/dist/scss/styles/mixins/index.scss CHANGED
@@ -6,3 +6,4 @@
6
6
  @forward "changeSvg";
7
7
  @forward "themes";
8
8
  @forward "utils";
9
+ @forward "formFieldMixins";
package/dist/scss/styles/mixins/utils.scss CHANGED
@@ -7,4 +7,12 @@
7
7
  display: none; /* Chrome, Safari, Opera */
8
8
  }
9
9
  }
10
+ }
11
+
12
+ @mixin hover {
13
+ @media (hover: hover) {
14
+ &:hover {
15
+ @content;
16
+ }
17
+ }
10
18
  }
package/dist/scss/test/pages/style.scss ADDED
@@ -0,0 +1,6 @@
1
+
2
+ :root {
3
+ [data-theme='green'] {
4
+ //--base-white: black;
5
+ }
6
+ }
package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss CHANGED
@@ -1,30 +1,28 @@
1
1
  @use '../../../../styles' as *;
2
2
 
3
- @mixin checkbox-mark-base-hover($theme) {
4
- @if $theme == 'light' {
5
- background-color: var(--primary-50);
6
- border: 1px solid var(--primary-200);
7
- } @else {
8
- background-color: var(--gray-iron-800);
9
- border: 1px solid var(--gray-iron-500);
3
+ @mixin checkbox-mark-base-hover() {
4
+ background-color: var(--ui-checkbox-mark-focus-background-color, var(--ui-checkbox-mark-background-color, var(--primary-50)));
5
+ border: 1px solid var(--ui-checkbox-mark-focus-border-color, var(--ui-checkbox-mark-border-color, var(--primary-200)));
6
+ @include darkTheme {
7
+ background-color: var(--ui-checkbox-mark-focus-background-color, var(--ui-checkbox-mark-background-color, var(--gray-800)));
8
+ border: 1px solid var(--ui-checkbox-mark-focus-border-color, var(--ui-checkbox-mark-border-color, var(--gray-500)));
10
9
  }
11
10
  }
12
11
 
13
- @mixin checkbox-mark-base($theme: 'light') {
12
+ @mixin checkbox-mark-base() {
14
13
  width: 20px;
15
14
  height: 20px;
16
15
  flex: none;
17
-
18
- @if $theme == 'light' {
19
- background-color: var(--base-white);
20
- border: 1px solid var(--gray-300);
21
- } @else {
22
- background-color: var(--gray-iron-900);
23
- border: 1px solid var(--gray-iron-500);
24
- }
25
16
  box-sizing: border-box;
26
17
  cursor: pointer;
27
18
  overflow: hidden;
19
+ background-color: var(--ui-checkbox-mark-background-color, var(--base-white));
20
+ border: 1px solid var(--ui-checkbox-mark-border-color, var(--gray-300));
21
+
22
+ @include darkTheme {
23
+ background-color: var(--ui-checkbox-mark-background-color, var(--gray-900));
24
+ border: 1px solid var(--ui-checkbox-mark-border-color, var(--gray-500));
25
+ }
28
26
 
29
27
  @include centerInsideContent();
30
28
  @include modify-svg($stroke-width: 4) {
@@ -32,10 +30,4 @@
32
30
  height: 14px;
33
31
  flex: none;
34
32
  }
35
-
36
- @include tablet-plus {
37
- &:hover {
38
- @include checkbox-mark-base-hover($theme);
39
- }
40
- }
41
33
  }
package/dist/scss/ui/CheckboxMark/styles/mixins/checkbox-mark.scss CHANGED
@@ -6,21 +6,18 @@
6
6
  .checkboxMark {
7
7
  transition: all ease-out 0.2s;
8
8
 
9
-
10
- &[data-theme='light'] {
11
- @include base.checkbox-mark-base('light');
12
-
9
+ @include base.checkbox-mark-base();
13
10
 
14
11
  &.checkbox {
15
12
  @include properties.checkbox();
16
13
  }
17
14
 
18
15
  &.radio {
19
- @include properties.radio('light');
16
+ @include properties.radio();
20
17
  }
21
18
 
22
19
  &.checked {
23
- @include properties.checked('light');
20
+ @include properties.checked();
24
21
  }
25
22
 
26
23
  &.indeterminate {
@@ -32,107 +29,19 @@
32
29
  }
33
30
 
34
31
  &.disabled {
35
- @include properties.disabled('light');
32
+ @include properties.disabled();
36
33
  }
37
34
 
38
35
  &.correct {
39
36
  &.checked {
40
- @include properties.correct-checked('light');
41
-
42
- &.disabled {
43
- @include properties.correct-disabled('light');
44
- }
45
- }
46
- }
47
-
48
- &.incorrect {
49
- &.checked {
50
- @include properties.incorrect-checked();
37
+ @include properties.correct-checked();
51
38
 
52
39
  &.disabled {
53
- @include properties.incorrect-disabled();
54
- }
55
- }
56
- }
57
-
58
- @include tablet-plus {
59
- &.hover {
60
- @include base.checkbox-mark-base-hover('light');
61
-
62
- &.checked {
63
- @include properties.checked-hover('light');
64
- }
65
-
66
- &.indeterminate {
67
- @include properties.indeterminate-hover();
68
- }
69
-
70
- &.error {
71
- @include properties.error-hover();
72
- }
73
-
74
- &.disabled {
75
- @include properties.disabled-hover('light');
76
- }
77
-
78
- &.correct {
79
- &.checked {
80
- @include properties.correct-checked-hover('light');
81
-
82
- &.disabled {
83
- @include properties.correct-disabled-hover('light');
84
- }
85
- }
86
- }
87
-
88
- &.incorrect {
89
- &.checked {
90
- @include properties.incorrect-checked-hover();
91
-
92
- &.disabled {
93
- @include properties.incorrect-disabled-hover();
94
- }
95
- }
40
+ @include properties.correct-checked-disabled();
96
41
  }
97
42
  }
98
- }
99
- }
100
-
101
- &[data-theme='dark'] {
102
- @include base.checkbox-mark-base('dark');
103
-
104
-
105
- &.checkbox {
106
- @include properties.checkbox();
107
- }
108
-
109
- &.radio {
110
- @include properties.radio('dark');
111
- }
112
-
113
- &.checked {
114
- @include properties.checked('dark');
115
- }
116
-
117
- &.indeterminate {
118
- @include properties.indeterminate();
119
- }
120
-
121
- &.error {
122
- @include properties.error();
123
- }
124
-
125
- &.disabled {
126
- @include properties.disabled('dark');
127
- }
128
-
129
- &.correct {
130
- &.checked {
131
- @include properties.correct-checked('dark');
132
-
133
- &.disabled {
134
- @include properties.correct-disabled('dark');
135
- }
43
+ &.disabled {
44
+ @include properties.correct-disabled();
136
45
  }
137
46
  }
138
47
 
@@ -141,52 +50,43 @@
141
50
  @include properties.incorrect-checked();
142
51
 
143
52
  &.disabled {
144
- @include properties.incorrect-disabled();
53
+ @include properties.incorrect-checked-disabled();
145
54
  }
146
55
  }
56
+ &.disabled {
57
+ @include properties.incorrect-disabled();
58
+ }
147
59
  }
148
60
 
149
- @include tablet-plus {
61
+ @media (hover: hover) {
150
62
  &.hover {
151
- @include base.checkbox-mark-base-hover('dark');
63
+ @include base.checkbox-mark-base-hover();
152
64
 
153
65
  &.checked {
154
- @include properties.checked-hover('dark');
66
+ @include properties.checked-hover();
155
67
  }
156
68
 
157
69
  &.indeterminate {
158
70
  @include properties.indeterminate-hover();
159
71
  }
160
72
 
73
+ &.checked.error,
161
74
  &.error {
162
75
  @include properties.error-hover();
163
76
  }
164
77
 
165
- &.disabled {
166
- @include properties.disabled-hover('dark');
167
- }
168
-
169
78
  &.correct {
170
79
  &.checked {
171
- @include properties.correct-checked-hover('dark');
172
-
173
- &.disabled {
174
- @include properties.correct-disabled-hover('dark');
175
- }
80
+ @include properties.correct-checked-hover();
176
81
  }
177
82
  }
178
83
 
179
84
  &.incorrect {
180
85
  &.checked {
181
86
  @include properties.incorrect-checked-hover();
182
-
183
- &.disabled {
184
- @include properties.incorrect-disabled-hover();
185
- }
186
87
  }
187
88
  }
188
89
  }
189
90
  }
190
- }
191
91
  }
192
92
  }
package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checked.scss CHANGED
@@ -1,32 +1,31 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
- @mixin checked-hover($theme) {
4
- @if $theme == 'light' {
5
- border: 1px solid var(--primary-400);
6
- } @else {
7
- background-color: var(--rose-900);
8
- border: 1px solid var(--rose-700);
3
+ @mixin checked-hover() {
4
+ background-color: var(--ui-checkbox-mark-active-focus-background-color, var(--ui-checkbox-mark-active-background-color, var(--primary-50)));
5
+ border: 1px solid var(--ui-checkbox-mark-active-focus-border-color, var(--ui-checkbox-mark-active-border-color, var(--primary-400)));
6
+ @include darkTheme {
7
+ background-color: var(--ui-checkbox-mark-active-focus-background-color, var(--ui-checkbox-mark-active-background-color, var(--primary-900)));
8
+ border: 1px solid var(--ui-checkbox-mark-active-focus-border-color, var(--ui-checkbox-mark-active-border-color, var(--primary-700)));
9
9
  }
10
10
  }
11
11
 
12
- @mixin checked($theme: 'light') {
13
- @if $theme == 'light' {
14
- background-color: var(--primary-50);
15
- border: 1px solid var(--primary-200);
16
- @include modify-svg($stroke: var(--primary-500));
17
- } @else {
18
- background-color: var(--rose-950);
19
- border: 1px solid var(--rose-700);
20
- @include modify-svg($stroke: var(--rose-600));
21
- }
12
+ @mixin checked() {
13
+ background-color: var(--ui-checkbox-mark-active-background-color, var(--primary-50));
14
+ border: 1px solid var(--ui-checkbox-mark-active-border-color, var(--primary-200));
15
+ @include modify-svg($stroke: var(--ui-checkbox-mark-active-symbol-color, var(--primary-500)));
22
16
 
23
- &:after {
24
- display: block;
25
- }
17
+ @include darkTheme {
18
+ background-color: var(--ui-checkbox-mark-active-background-color, var(--primary-950));
19
+ border: 1px solid var(--ui-checkbox-mark-active-border-color, var(--primary-700));
20
+ @include modify-svg($stroke: var(--ui-checkbox-mark-active-symbol-color, var(--primary-600)));
21
+ @include fnt-flex($color: var(--ui-checkbox-mark-active-symbol-color, var(--primary-600)));
26
22
 
27
- @include tablet-plus {
28
- &:hover {
29
- @include checked-hover($theme);
23
+ &:after {
24
+ background-color: var(--ui-checkbox-mark-active-symbol-color, var(--primary-600));
30
25
  }
31
26
  }
27
+ &:after {
28
+ background-color: var(--ui-checkbox-mark-active-symbol-color, var(--primary-500));
29
+ display: block;
30
+ }
32
31
  }
package/dist/scss/ui/CheckboxMark/styles/mixins/properties/correct.scss CHANGED
@@ -1,69 +1,67 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
- @mixin correct-checked-hover($theme) {
4
- border: transparent;
5
- @if $theme == 'light' {
6
- background-color: var(--primary-600);
7
- } @else {
8
- background-color: var(--rose-700);
9
- }
10
- }
3
+ @mixin correct-checked-hover() {
4
+ border: transparent !important;
5
+ background-color: var(--primary-600) !important;
11
6
 
12
- @mixin correct-disabled-hover($theme) {
13
- border: transparent;
14
- @if $theme == 'light' {
15
- background-color: var(--gray-300);
16
- } @else {
17
- background-color: var(--gray-iron-600);
7
+ @include darkTheme {
8
+ border: transparent !important;
9
+ background-color: var(--primary-700) !important;
18
10
  }
19
11
  }
20
12
 
21
- @mixin correct-checked($theme: 'light') {
13
+ @mixin correct-checked() {
22
14
  border: transparent;
23
- @if $theme == 'light' {
24
- background-color: var(--primary-500);
25
- @include fnt($color: var(--base-white));
26
- @include modify-svg($stroke: var(--base-white));
27
- } @else {
28
- background-color: var(--rose-600);
29
- @include fnt($color: var(--gray-iron-50));
30
- @include modify-svg($stroke: var(--gray-iron-50));
31
- }
15
+ background-color: var(--primary-500);
32
16
 
33
17
  @include fnt($size: 14, $line-height: 14, $weight: 500);
18
+ @include fnt($color: var(--base-white));
19
+ @include modify-svg($stroke: var(--base-white));
34
20
 
35
- &:after {
36
- display: none;
21
+ @include darkTheme {
22
+ background-color: var(--primary-600);
23
+ @include fnt($color: var(--gray-50));
24
+ @include modify-svg($stroke: var(--gray-50));
37
25
  }
38
26
 
39
- @include tablet-plus {
40
- &:hover {
41
- @include correct-checked-hover($theme);
42
- }
27
+ &:after {
28
+ display: none;
43
29
  }
44
30
  }
45
31
 
46
- @mixin correct-disabled($theme: 'light') {
32
+ @mixin correct-checked-disabled() {
47
33
  border: transparent;
48
- @if $theme == 'light' {
49
- background-color: var(--gray-300);
50
- @include fnt($color: var(--base-white));
51
- @include modify-svg($stroke: var(--base-white));
52
- } @else {
53
- background-color: var(--gray-iron-600);
54
- @include fnt($color: var(--gray-iron-500));
55
- @include modify-svg($stroke: var(--gray-iron-500));
56
- }
57
-
34
+ background-color: var(--gray-300);
58
35
  @include fnt($size: 14, $line-height: 14, $weight: 500);
36
+ @include fnt($color: var(--base-white));
37
+ @include modify-svg($stroke: var(--base-white));
38
+
39
+ @include darkTheme {
40
+ background-color: var(--gray-700);
41
+ @include fnt($color: var(--gray-500));
42
+ @include modify-svg($stroke: var(--gray-500));
43
+ }
59
44
 
60
45
  &:after {
61
46
  display: none;
62
47
  }
48
+ }
49
+
63
50
 
64
- @include tablet-plus {
65
- &:hover {
66
- @include correct-disabled-hover($theme);
67
- }
51
+ @mixin correct-disabled() {
52
+ border: 1px solid var(--gray-300);
53
+ background-color: var(--gray-100);
54
+ @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--gray-300));
55
+ @include modify-svg($stroke: var(--base-white));
56
+
57
+ @include darkTheme {
58
+ border: 1px solid var(--gray-700);
59
+ background-color: var(--gray-800);
60
+ @include fnt($color: var(--gray-500));
61
+ @include modify-svg($stroke: var(--gray-500));
62
+ }
63
+
64
+ &:after {
65
+ display: none;
68
66
  }
69
67
  }
package/dist/scss/ui/CheckboxMark/styles/mixins/properties/disabled.scss CHANGED
@@ -1,43 +1,27 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
- @mixin disabled-hover($theme) {
4
- @if $theme == 'light' {
5
- background-color: var(--gray-100);
6
- border: 1px solid var(--gray-300);
7
-
8
- @include modify-svg($stroke: var(--gray-300));
9
- @include fnt-flex($color: var(--gray-300));
10
- } @else {
11
- background-color: var(--gray-iron-800);
12
- border: 1px solid var(--gray-iron-700);
13
- }
14
- }
15
-
16
- @mixin disabled($theme: 'light') {
3
+ @mixin disabled() {
17
4
  cursor: default;
18
5
 
19
- @if $theme == 'light' {
20
- background-color: var(--gray-100);
21
- border: 1px solid var(--gray-300);
6
+ background-color: var(--ui-checkbox-mark-disabled-background-color, var(--gray-100));
7
+ border: 1px solid var(--ui-checkbox-mark-disabled-border-color, var(--gray-300));
22
8
 
23
- &:after {
24
- background-color: var(--gray-300);
25
- }
26
- } @else {
27
- background-color: var(--gray-iron-800);
28
- border: 1px solid var(--gray-iron-700);
9
+ @include modify-svg($stroke: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-300)));
10
+ @include fnt-flex($color: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-300)));
29
11
 
30
- &:after {
31
- background-color: var(--gray-iron-700);
32
- }
12
+ &:after {
13
+ background-color: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-300));
33
14
  }
34
15
 
35
- @include modify-svg($stroke: var(--gray-300));
36
- @include fnt-flex($color: var(--gray-300));
16
+ @include darkTheme {
17
+ background-color: var(--ui-checkbox-mark-disabled-background-color, var(--gray-800));
18
+ border: 1px solid var(--ui-checkbox-mark-disabled-border-color, var(--gray-700));
37
19
 
38
- @include tablet-plus {
39
- &:hover {
40
- @include disabled-hover($theme);
20
+ @include modify-svg($stroke: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-700)));
21
+ @include fnt-flex($color: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-700)));
22
+
23
+ &:after {
24
+ background-color: var(--ui-checkbox-mark-disabled-symbol-color, var(--gray-700));
41
25
  }
42
26
  }
43
27
  }
package/dist/scss/ui/CheckboxMark/styles/mixins/properties/error.scss CHANGED
@@ -1,24 +1,30 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
3
  @mixin error-hover() {
4
- background-color: var(--error-50);
5
- border: 1px solid var(--error-400);
4
+ background-color: var(--ui-checkbox-mark-error-focus-background-color, var(--ui-checkbox-mark-error-background-color, var(--error-50)));
5
+ border: 1px solid var(--ui-checkbox-mark-error-focus-border-color, var(--ui-checkbox-mark-error-border-color, var(--error-400)));
6
+ @include darkTheme {
7
+ background-color: var(--ui-checkbox-mark-error-focus-background-color, var(--ui-checkbox-mark-error-background-color, var(--error-900)));
8
+ border: 1px solid var(--ui-checkbox-mark-error-focus-border-color, var(--ui-checkbox-mark-error-border-color, var(--error-700)));
9
+ }
6
10
  }
7
11
 
8
12
  @mixin error() {
9
- background-color: var(--error-50);
10
- border: 1px solid var(--error-200);
13
+ background-color: var(--ui-checkbox-mark-error-background-color, var(--error-50));
14
+ border: 1px solid var(--ui-checkbox-mark-error-border-color, var(--error-200));
11
15
 
12
- @include modify-svg($stroke: var(--error-500));
13
- @include fnt-flex($color: var(--error-500));
16
+ @include modify-svg($stroke: var(--ui-checkbox-mark-error-symbol-color, var(--error-500)));
14
17
 
15
18
  &:after {
16
- background-color: var(--error-500);
19
+ background-color: var(--ui-checkbox-mark-error-symbol-color, var(--error-500));
20
+ @include darkTheme {
21
+ background-color: var(--ui-checkbox-mark-error-symbol-color, var(--error-600));
22
+ }
17
23
  }
18
24
 
19
- @include tablet-plus {
20
- &:hover {
21
- @include error-hover();
22
- }
25
+ @include darkTheme {
26
+ background-color: var(--ui-checkbox-mark-error-background-color, var(--error-950));
27
+ border: 1px solid var(--ui-checkbox-mark-error-border-color, var(--error-700));
28
+ @include modify-svg($stroke: var(--ui-checkbox-mark-error-symbol-color, var(--error-600)));
23
29
  }
24
30
  }