indicator-ui 0.1.121 → 0.1.123

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 (24) hide show
  1. package/dist/index.css +261 -193
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +87 -32
  4. package/dist/index.js.map +1 -1
  5. package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss +5 -4
  6. package/dist/scss/ui/Buttons/styles/mixins/properties/index.scss +0 -1
  7. package/dist/scss/ui/Buttons/styles/mixins/properties/link-gray.scss +11 -0
  8. package/dist/scss/ui/Buttons/styles/mixins/properties/primary.scss +19 -29
  9. package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-color.scss +49 -39
  10. package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-gray.scss +41 -46
  11. package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss +49 -0
  12. package/dist/scss/ui/Buttons/styles/mixins/properties/tab.scss +49 -0
  13. package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-color.scss +32 -32
  14. package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss +29 -29
  15. package/dist/scss/ui/Buttons/styles/mixins/properties/warning-secondary-color.scss +21 -0
  16. package/dist/ts/src/hooks/index.d.ts +1 -0
  17. package/dist/ts/src/hooks/useLoading.d.ts +17 -0
  18. package/dist/ts/src/test/pages/{ButtonsPage.d.ts → ButtonsPage/ButtonsPage.d.ts} +1 -1
  19. package/dist/ts/src/test/pages/index.d.ts +1 -1
  20. package/dist/ts/src/ui/Buttons/types/ButtonTypes.d.ts +1 -1
  21. package/dist/ts/src/ui/Tag/ui/FilterTag.d.ts +1 -1
  22. package/docs/CSSVariables/CSSThemeCustomize.md +61 -0
  23. package/package.json +1 -1
  24. package/dist/scss/ui/Buttons/styles/mixins/properties/link-dark-theme.scss +0 -52
package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss CHANGED
@@ -3,10 +3,11 @@
3
3
  @mixin base-button() {
4
4
  cursor: pointer;
5
5
  transition: background-color ease-out 0.2s;
6
- border-radius: 8px;
6
+ border-radius: var(--ui-button-radius, 8px);
7
7
  position: relative;
8
8
  @include modify-flex($align-items: center, $justify-content: center);
9
9
 
10
+
10
11
  .loader {
11
12
  width: fit-content;
12
13
  height: fit-content;
@@ -30,14 +31,14 @@
30
31
  .counter {
31
32
  min-width: 24px;
32
33
  height: 24px;
33
- padding: 4px 2px;
34
+ padding: 4px 6px;
34
35
  border-radius: 12px;
35
36
  position: absolute;
36
37
  top: 0;
37
38
  left: 0;
38
39
  transform: translate(-2px, -2px);
39
40
  text-align: center;
40
- background-color: var(--blue-dark-500);
41
+ background-color: var(--primary-500);
41
42
  @include fnt($size: 14, $line-height: 16, $weight: 500, $color: var(--base-white));
42
43
  }
43
44
 
@@ -47,7 +48,7 @@
47
48
  .text, .textSecondary {
48
49
  flex: none;
49
50
  text-align: center;
50
- transition: color, weight 0.2s;
51
+ transition: color ease-out 0.2s, weight ease-out 0.2s;
51
52
  }
52
53
 
53
54
  .textSecondary {
package/dist/scss/ui/Buttons/styles/mixins/properties/index.scss CHANGED
@@ -10,7 +10,6 @@
10
10
  @forward "link-color";
11
11
  @forward "link-black";
12
12
  @forward "link-gray";
13
- @forward "link-dark-theme";
14
13
  @forward "warning-primary";
15
14
  @forward "warning-secondary-color";
16
15
  @forward "warning-link-color";
package/dist/scss/ui/Buttons/styles/mixins/properties/link-gray.scss CHANGED
@@ -10,6 +10,17 @@
10
10
  .icon {
11
11
  @include modify-svg($stroke: var(--gray-500));
12
12
  }
13
+ @include darkTheme {
14
+ .content {
15
+ .text, .textSecondary {
16
+ @include fnt-flex($color: var(--base-white));
17
+ }
18
+ }
19
+
20
+ .icon {
21
+ @include modify-svg($stroke: var(--base-white));
22
+ }
23
+ }
13
24
  }
14
25
 
15
26
  @mixin linkGrayButton {
package/dist/scss/ui/Buttons/styles/mixins/properties/primary.scss CHANGED
@@ -2,34 +2,41 @@
2
2
 
3
3
  @mixin primaryButton {
4
4
  border-radius: 8px;
5
- background-color: var(--primary-500);
6
- border: 1px solid transparent;
7
- box-shadow: 0 1px 2px 0 #1018280D;
8
-
9
- .loader {
10
- @include modify-svg($stroke: var(--base-white));
11
- }
5
+ background-color: var(--ui-button-primary-background-color, var(--primary-500));
6
+ border: 1px solid var(--ui-button-primary-border-color, transparent);
7
+ box-shadow: var(--ui-button-primary-box-shadowr, 0 1px 2px 0 #1018280D);
12
8
 
9
+ .loader,
13
10
  .icon {
14
- @include modify-svg($stroke: var(--base-white));
11
+ @include modify-svg($stroke: var(--ui-button-primary-icon-color, var(--base-white)));
15
12
  }
16
13
 
17
14
  .content {
18
15
  .text, .textSecondary {
19
- @include fnt-flex($color: var(--base-white));
16
+ @include fnt-flex($color: var(--ui-button-primary-text-color, var(--base-white)));
20
17
  }
21
18
  }
22
19
 
23
20
  &:not(.disabled):not(:disabled) {
24
21
  @include tablet-plus {
25
22
  &:hover {
26
- background-color: var(--primary-600);
23
+ background-color: var(--ui-button-primary-background-color, var(--primary-600));
24
+ border: 1px solid var(--ui-button-primary-border-color, transparent);
25
+ .loader,
26
+ .icon {
27
+ @include modify-svg($stroke: var(--ui-button-primary-hover-icon-color, var(--base-white)));
28
+ }
27
29
  }
28
30
  }
29
31
 
30
32
  @include tablet {
31
33
  &:active {
32
- background-color: var(--primary-600);
34
+ background-color: var(--ui-button-primary-background-color, var(--primary-600));
35
+ border: 1px solid var(--ui-button-primary-border-color, transparent);
36
+ .loader,
37
+ .icon {
38
+ @include modify-svg($stroke: var(--ui-button-primary-hover-icon-color, var(--base-white)));
39
+ }
33
40
  }
34
41
  }
35
42
  }
@@ -42,23 +49,6 @@
42
49
 
43
50
  &:disabled, &.disabled {
44
51
  opacity: 0.3;
45
- }
46
- }
47
-
48
- @mixin primaryDarkThemeButton {
49
- background-color: var(--rose-500);
50
-
51
- &:not(.disabled):not(:disabled) {
52
- @include tablet-plus {
53
- &:hover {
54
- background-color: var(--rose-600);
55
- }
56
- }
57
-
58
- @include tablet {
59
- &:active {
60
- background-color: var(--rose-600);
61
- }
62
- }
52
+ pointer-events: none;
63
53
  }
64
54
  }
package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-color.scss CHANGED
@@ -1,37 +1,42 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
3
  @mixin secondaryColorButton {
4
- border-radius: 8px;
5
- background-color: var(--base-white);
6
- border: 1px solid var(--primary-200);
7
- box-shadow: 0 1px 2px 0 #1018280D;
8
-
9
- .loader {
10
- @include modify-svg($stroke: var(--primary-500));
11
- }
4
+ border-radius: var(--ui-button-radius, 8px);
5
+ background-color: var(--ui-button-secondary-color-background-color, var(--base-white));
6
+ border: 1px solid var(--ui-button-secondary-color-border-color, var(--primary-200));
7
+ box-shadow: var(--ui-button-secondary-color-box-shadow, 0 1px 2px 0 #1018280D);
12
8
 
9
+ .loader,
13
10
  .icon {
14
- @include modify-svg($stroke: var(--primary-500));
11
+ @include modify-svg($stroke: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
15
12
  }
16
13
 
17
14
  .content {
18
15
  .text, .textSecondary {
19
- @include fnt-flex($color: var(--primary-500));
16
+ @include fnt-flex($color: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
20
17
  }
21
18
  }
22
19
 
23
20
  &:not(.disabled):not(:disabled) {
24
21
  @include tablet-plus {
25
22
  &:hover {
26
- background-color: var(--primary-50);
27
- border: 1px solid var(--primary-300);
23
+ background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-50));
24
+ border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-300));
25
+ .loader,
26
+ .icon {
27
+ @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
28
+ }
28
29
  }
29
30
  }
30
31
 
31
32
  @include tablet {
32
33
  &:active {
33
- background-color: var(--primary-50);
34
- border: 1px solid var(--primary-300);
34
+ background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-50));
35
+ border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-300));
36
+ .loader,
37
+ .icon {
38
+ @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
39
+ }
35
40
  }
36
41
  }
37
42
  }
@@ -43,38 +48,43 @@
43
48
  &:disabled, &.disabled {
44
49
  opacity: 0.5;
45
50
  }
46
- }
47
51
 
48
- @mixin secondaryColorDarkThemeButton {
49
- background-color: transparent;
50
- border: 1px solid var(--rose-900);
52
+ @include darkTheme {
53
+ background-color: var(--ui-button-secondary-color-background-color, transparent);
54
+ border: 1px solid var(--ui-button-secondary-color-border-color, var(--primary-900));
51
55
 
52
- .loader {
53
- @include modify-svg($stroke: var(--rose-500));
54
- }
55
-
56
- .icon {
57
- @include modify-svg($stroke: var(--rose-500));
58
- }
59
-
60
- .content {
61
- .text, .textSecondary {
62
- @include fnt-flex($color: var(--rose-500));
56
+ .loader,
57
+ .icon {
58
+ @include modify-svg($stroke: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
63
59
  }
64
- }
65
60
 
66
- &:not(.disabled):not(:disabled) {
67
- @include tablet-plus {
68
- &:hover {
69
- background-color: var(--rose-950);
70
- border: 1px solid var(--rose-700);
61
+ .content {
62
+ .text, .textSecondary {
63
+ @include fnt-flex($color: var(--ui-button-secondary-color-text-color, var(--primary-500)));
71
64
  }
72
65
  }
73
66
 
74
- @include tablet {
75
- &:active {
76
- background-color: var(--rose-950);
77
- border: 1px solid var(--rose-700);
67
+ &:not(.disabled):not(:disabled) {
68
+ @include tablet-plus {
69
+ &:hover {
70
+ background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-950));
71
+ border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-700));
72
+ .loader,
73
+ .icon {
74
+ @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
75
+ }
76
+ }
77
+ }
78
+
79
+ @include tablet {
80
+ &:active {
81
+ background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-950));
82
+ border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-700));
83
+ .loader,
84
+ .icon {
85
+ @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
86
+ }
87
+ }
78
88
  }
79
89
  }
80
90
  }
package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-gray.scss CHANGED
@@ -1,44 +1,41 @@
1
1
  @use '../../../../../styles' as *;
2
2
 
3
3
  @mixin secondaryGrayButton {
4
- border-radius: 8px;
5
- background-color: var(--base-white);
6
- box-shadow: 0 1px 2px 0 #1018280D;
7
- border: 1px solid var(--gray-300);
8
-
9
- .loader {
10
- @include modify-svg($stroke: var(--gray-700));
11
- }
4
+ border-radius: var(--ui-button-radius, 8px);
5
+ background-color: var(--ui-button-secondary-gray-background-color, var(--base-white));
6
+ border: 1px solid var(--ui-button-secondary-gray-border-color, var(--gray-300));
7
+ box-shadow: var(--ui-button-secondary-gray-box-shadow, 0 1px 2px 0 #1018280D);
12
8
 
9
+ .loader,
13
10
  .icon {
14
- @include modify-svg($stroke: var(--gray-700));
11
+ @include modify-svg($stroke: var(--ui-button-secondary-gray-icon-color, var(--gray-700)));
15
12
  }
16
13
 
17
14
  .content {
18
15
  .text, .textSecondary {
19
- @include fnt-flex($color: var(--gray-700));
16
+ @include fnt-flex($color: var(--ui-button-secondary-gray-icon-color, var(--gray-700)));
20
17
  }
21
18
  }
22
19
 
23
20
  &:not(.disabled):not(:disabled) {
24
21
  @include tablet-plus {
25
22
  &:hover {
26
- background-color: var(--gray-50);
27
- border: 1px solid var(--gray-300);
23
+ background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-50));
24
+ border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-300));
28
25
 
29
26
  .text {
30
- color: var(--gray-800);
27
+ color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-800));
31
28
  }
32
29
  }
33
30
  }
34
31
 
35
32
  @include tablet {
36
33
  &:active {
37
- background-color: var(--gray-50);
38
- border: 1px solid var(--gray-300);
34
+ background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-50));
35
+ border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-300));
39
36
 
40
37
  .text {
41
- color: var(--gray-800);
38
+ color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-800));
42
39
  }
43
40
  }
44
41
  }
@@ -52,47 +49,45 @@
52
49
  &:disabled, &.disabled {
53
50
  opacity: 0.5;
54
51
  }
55
- }
56
52
 
57
- @mixin secondaryGrayDarkThemeButton {
58
- background-color: transparent;
59
- border: 1px solid var(--gray-iron-700);
53
+ @include darkTheme {
54
+ background-color: var(--ui-button-secondary-gray-background-color, transparent);
55
+ border: 1px solid var(--ui-button-secondary-gray-border-color, var(--gray-iron-700));
56
+ box-shadow: var(--ui-button-secondary-gray-box-shadow, 0 1px 2px 0 #1018280D);
60
57
 
61
- .loader {
62
- @include modify-svg($stroke: var(--gray-iron-200));
63
- }
64
-
65
- .icon {
66
- @include modify-svg($stroke: var(--gray-iron-200));
67
- }
58
+ .loader,
59
+ .icon {
60
+ @include modify-svg($stroke: var(--ui-button-secondary-gray-icon-color, var(--gray-200)));
61
+ }
68
62
 
69
- .content {
70
- .text, .textSecondary {
71
- @include fnt-flex($color: var(--gray-iron-200));
63
+ .content {
64
+ .text, .textSecondary {
65
+ @include fnt-flex($color: var(--ui-button-secondary-gray-text-color, var(--gray-200)));
66
+ }
72
67
  }
73
- }
74
68
 
75
- &:not(.disabled):not(:disabled) {
76
- @include tablet-plus {
77
- &:hover {
78
- background-color: var(--gray-iron-800);
79
- border: 1px solid var(--gray-iron-700);
69
+ &:not(.disabled):not(:disabled) {
70
+ @include tablet-plus {
71
+ &:hover {
72
+ background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-800));
73
+ border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-700));
80
74
 
81
- .text {
82
- color: var(--gray-iron-200);
75
+ .text {
76
+ color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-200));
77
+ }
83
78
  }
84
79
  }
85
- }
86
80
 
87
- @include tablet {
88
- &:active {
89
- background-color: var(--gray-iron-800);
90
- border: 1px solid var(--gray-iron-700);
81
+ @include tablet {
82
+ &:active {
83
+ background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-800));
84
+ border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-700));
91
85
 
92
- .text {
93
- color: var(--gray-iron-200);
86
+ .text {
87
+ color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-200));
88
+ }
94
89
  }
95
90
  }
96
91
  }
97
92
  }
98
- }
93
+ }
package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss CHANGED
@@ -53,4 +53,53 @@
53
53
  &:disabled, &.disabled {
54
54
  opacity: 0.5;
55
55
  }
56
+
57
+ @include darkTheme {
58
+ background-color: var(--gray-700);
59
+ box-shadow: 0 1px 2px 0 #05070c8a;
60
+
61
+ .loader {
62
+ @include modify-svg($stroke: var(--gray-400));
63
+ }
64
+
65
+ .icon {
66
+ @include modify-svg($stroke: var(--gray-400));
67
+ }
68
+
69
+ .content {
70
+ .text, .textSecondary {
71
+ @include fnt-flex($color: var(--gray-400));
72
+ }
73
+ }
74
+
75
+ &:not(.disabled):not(:disabled) {
76
+ @include tablet-plus {
77
+ &:hover {
78
+ background-color: var(--gray-600);
79
+
80
+ .icon {
81
+ @include modify-svg($stroke: var(--gray-200));
82
+ }
83
+
84
+ .text {
85
+ color: var(--gray-200);
86
+ }
87
+ }
88
+ }
89
+
90
+ @include tablet {
91
+ &:active {
92
+ background-color: var(--gray-600);
93
+
94
+ .icon {
95
+ @include modify-svg($stroke: var(--gray-200));
96
+ }
97
+
98
+ .text {
99
+ color: var(--gray-200);
100
+ }
101
+ }
102
+ }
103
+ }
104
+ }
56
105
  }
package/dist/scss/ui/Buttons/styles/mixins/properties/tab.scss CHANGED
@@ -53,4 +53,53 @@
53
53
  &:disabled, &.disabled {
54
54
  opacity: 0.5;
55
55
  }
56
+
57
+ @include darkTheme {
58
+ background-color: var(--gray-900);
59
+ box-shadow: 0 1px 2px 0 #05070c8a;
60
+
61
+ .loader {
62
+ @include modify-svg($stroke: var(--gray-400));
63
+ }
64
+
65
+ .icon {
66
+ @include modify-svg($stroke: var(--gray-400));
67
+ }
68
+
69
+ .content {
70
+ .text, .textSecondary {
71
+ @include fnt-flex($color: var(--gray-400));
72
+ }
73
+ }
74
+
75
+ &:not(.disabled):not(:disabled) {
76
+ @include tablet-plus {
77
+ &:hover {
78
+ background-color: var(--gray-800);
79
+
80
+ .icon {
81
+ @include modify-svg($stroke: var(--gray-200));
82
+ }
83
+
84
+ .text {
85
+ color: var(--gray-200);
86
+ }
87
+ }
88
+ }
89
+
90
+ @include tablet {
91
+ &:active {
92
+ background-color: var(--gray-800);
93
+
94
+ .icon {
95
+ @include modify-svg($stroke: var(--gray-200));
96
+ }
97
+
98
+ .text {
99
+ color: var(--gray-200);
100
+ }
101
+ }
102
+ }
103
+ }
104
+ }
56
105
  }
package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-color.scss CHANGED
@@ -12,6 +12,19 @@
12
12
  }
13
13
  }
14
14
 
15
+ @mixin tertiaryColorDarkThemeButton-hover-state {
16
+ .content {
17
+ .text, .textSecondary {
18
+ @include fnt-flex($color: var(--primary-700));
19
+ }
20
+ }
21
+
22
+ .icon {
23
+ @include modify-svg($stroke: var(--primary-700));
24
+ }
25
+ }
26
+
27
+
15
28
  @mixin tertiaryColorButton {
16
29
  border: 1px solid transparent;
17
30
 
@@ -46,46 +59,33 @@
46
59
  &:disabled, &.disabled {
47
60
  opacity: 0.5;
48
61
  }
49
- }
50
-
51
62
 
52
- @mixin tertiaryColorDarkThemeButton-hover-state {
53
- .content {
54
- .text, .textSecondary {
55
- @include fnt-flex($color: var(--rose-700));
63
+ @include darkTheme {
64
+ .loader {
65
+ @include modify-svg($stroke: var(--primary-500));
56
66
  }
57
- }
58
67
 
59
- .icon {
60
- @include modify-svg($stroke: var(--rose-700));
61
- }
62
- }
63
-
64
- @mixin tertiaryColorDarkThemeButton {
65
- .loader {
66
- @include modify-svg($stroke: var(--rose-500));
67
- }
68
-
69
- .icon {
70
- @include modify-svg($stroke: var(--rose-500));
71
- }
72
-
73
- .content {
74
- .text, .textSecondary {
75
- @include fnt-flex($color: var(--rose-500));
68
+ .icon {
69
+ @include modify-svg($stroke: var(--primary-500));
76
70
  }
77
- }
78
71
 
79
- &:not(.disabled):not(:disabled) {
80
- @include tablet-plus {
81
- &:hover {
82
- @include tertiaryColorDarkThemeButton-hover-state;
72
+ .content {
73
+ .text, .textSecondary {
74
+ @include fnt-flex($color: var(--primary-500));
83
75
  }
84
76
  }
85
77
 
86
- @include tablet {
87
- &:active {
88
- @include tertiaryColorDarkThemeButton-hover-state;
78
+ &:not(.disabled):not(:disabled) {
79
+ @include tablet-plus {
80
+ &:hover {
81
+ @include tertiaryColorDarkThemeButton-hover-state;
82
+ }
83
+ }
84
+
85
+ @include tablet {
86
+ &:active {
87
+ @include tertiaryColorDarkThemeButton-hover-state;
88
+ }
89
89
  }
90
90
  }
91
91
  }
package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss CHANGED
@@ -46,47 +46,47 @@
46
46
  &:disabled, &.disabled {
47
47
  opacity: 0.5;
48
48
  }
49
- }
50
49
 
50
+ @include darkTheme {
51
+ .loader {
52
+ @include modify-svg($stroke: var(--primary-100));
53
+ }
51
54
 
52
- @mixin tertiaryWhiteDarkThemeButton-hover-state {
53
- .content {
54
- .text, .textSecondary {
55
- @include fnt-flex($color: var(--base-white));
55
+ .icon {
56
+ @include modify-svg($stroke: var(--primary-100));
56
57
  }
57
- }
58
58
 
59
- .icon {
60
- @include modify-svg($stroke: var(--base-white));
61
- }
62
- }
59
+ .content {
60
+ .text, .textSecondary {
61
+ @include fnt-flex($color: var(--primary-100));
62
+ }
63
+ }
63
64
 
64
- @mixin tertiaryWhiteDarkThemeButton {
65
- .loader {
66
- @include modify-svg($stroke: var(--rose-100));
67
- }
65
+ &:not(.disabled):not(:disabled) {
66
+ @include tablet-plus {
67
+ &:hover {
68
+ @include tertiaryWhiteDarkThemeButton-hover-state;
69
+ }
70
+ }
68
71
 
69
- .icon {
70
- @include modify-svg($stroke: var(--rose-100));
72
+ @include tablet {
73
+ &:active {
74
+ @include tertiaryWhiteDarkThemeButton-hover-state;
75
+ }
76
+ }
77
+ }
71
78
  }
79
+ }
80
+
72
81
 
82
+ @mixin tertiaryWhiteDarkThemeButton-hover-state {
73
83
  .content {
74
84
  .text, .textSecondary {
75
- @include fnt-flex($color: var(--rose-100));
85
+ @include fnt-flex($color: var(--base-white));
76
86
  }
77
87
  }
78
88
 
79
- &:not(.disabled):not(:disabled) {
80
- @include tablet-plus {
81
- &:hover {
82
- @include tertiaryWhiteDarkThemeButton-hover-state;
83
- }
84
- }
85
-
86
- @include tablet {
87
- &:active {
88
- @include tertiaryWhiteDarkThemeButton-hover-state;
89
- }
90
- }
89
+ .icon {
90
+ @include modify-svg($stroke: var(--base-white));
91
91
  }
92
92
  }