@acorex/styles 7.4.8 → 7.5.1

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 (19) hide show
  1. package/index.scss +0 -4
  2. package/package.json +1 -1
  3. package/src/base/_normalize.scss +19 -5
  4. package/src/icons/demo-files/demo.js +23 -24
  5. package/src/icons/selection.json +1103 -1
  6. package/src/mixins/_appearance.scss +8 -5
  7. package/src/shared/_decoration.scss +2 -1
  8. package/src/shared/_drop-down.scss +10 -4
  9. package/src/shared/_editor-container.scss +15 -14
  10. package/src/shared/_general-button.scss +27 -8
  11. package/src/shared/_list.scss +4 -4
  12. package/src/shared/_skeleton.scss +7 -2
  13. package/src/shared/_table.scss +92 -86
  14. package/src/shared/_utils.scss +26 -20
  15. package/src/shared/index.scss +12 -13
  16. package/src/themes/default.scss +16 -11
  17. package/src/variables/_colors.scss +1 -1
  18. package/tailwind-base.js +16 -1
  19. package/src/shared/_icon-control.scss +0 -0
package/src/mixins/_appearance.scss CHANGED
@@ -1,8 +1,9 @@
1
- @mixin solid-appearance() {
1
+ @mixin solid-look() {
2
2
  background-color: rgba(var(--ax-color-input-surface));
3
3
  border: 1px solid;
4
4
  border-color: rgba(var(--ax-color-border-default));
5
5
  border-radius: var(--ax-rounded-border-default);
6
+
6
7
  &:focus-within {
7
8
  border-color: rgba(var(--ax-color-primary-500));
8
9
  box-shadow: 0 0 0 1px rgba(var(--ax-color-primary-500));
@@ -33,9 +34,11 @@
33
34
  }
34
35
  }
35
36
  }
36
- @mixin flat-appearance() {
37
+ @mixin flat-look() {
37
38
  border-bottom: 1px solid;
38
39
  border-color: rgba(var(--ax-color-border-default));
40
+ border-radius: 0;
41
+
39
42
  &:focus-within {
40
43
  border-color: rgba(var(--ax-color-primary-500));
41
44
  }
@@ -61,12 +64,12 @@
61
64
  }
62
65
  }
63
66
 
64
- @mixin outline-appearance() {
67
+ @mixin outline-look() {
65
68
  background-color: transparent !important;
66
69
  }
67
70
 
68
- @mixin fill-appearance() {
69
- background-color: rgba(var(--ax-color-input-surface-fill));
71
+ @mixin fill-look() {
72
+ background-color: rgba(var(--ax-color-on-surface));
70
73
  border-radius: var(--ax-rounded-border-default);
71
74
  &:focus-within {
72
75
  box-shadow: 0 0 0 2px rgba(var(--ax-color-primary-500));
package/src/shared/_decoration.scss CHANGED
@@ -55,6 +55,7 @@ ax-sub-title {
55
55
  }
56
56
  ax-form-hint {
57
57
  font-size: 0.875rem;
58
- color: rgba(var(--ax-color-text-default));
58
+ color: rgba(var(--ax-color-text-default), 0.75);
59
59
  margin-top: 0.5rem;
60
+ display: block;
60
61
  }
package/src/shared/_drop-down.scss CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  &:hover,
11
11
  &:focus {
12
- background-color: rgba(var(--ax-color-default), 0.5);
12
+ background-color: rgba(var(--ax-color-on-surface));
13
13
  color: rgba(var(--ax-color-#{$color}-600));
14
14
  }
15
15
 
@@ -26,14 +26,14 @@
26
26
 
27
27
  &.ax-default-default {
28
28
  background-color: transparent;
29
- color: rgba(var(--ax-color-default-fore));
29
+ color: rgba(var(--ax-color-text-default));
30
30
  border: transparent;
31
31
 
32
32
  &:hover,
33
33
  &:focus,
34
34
  &:active {
35
- background-color: rgba(var(--ax-color-default), 0.5);
36
- color: rgba(var(--ax-color-default-fore));
35
+ background-color: rgba(var(--ax-color-on-surface));
36
+ color: rgba(var(--ax-color-on-surface-fore));
37
37
  }
38
38
 
39
39
  &.ax-state-selected {
@@ -127,6 +127,12 @@
127
127
  user-select: none;
128
128
  cursor: pointer;
129
129
 
130
+ &:hover {
131
+ &:not(&.ax-state-disabled) {
132
+ background-color: rgba(var(--ax-color-on-surface));
133
+ }
134
+ }
135
+
130
136
  &.ax-divide {
131
137
  border: 1px solid;
132
138
  border-color: rgba(var(--ax-color-border-default));
package/src/shared/_editor-container.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  @include darkMode() {
4
4
  .ax-editor-container {
5
- &.ax-appearance-fill {
5
+ &.ax-look-fill {
6
6
  &.ax-state-error {
7
7
  background-color: rgba(var(--ax-color-danger-500), 0.25);
8
8
  }
@@ -17,22 +17,23 @@
17
17
  width: 100%;
18
18
  height: var(--ax-size-default);
19
19
  display: flex;
20
+ align-items: center;
20
21
  color: rgba(var(--ax-color-input-surface-fore));
21
22
  font-size: 0.875rem;
22
23
  overflow: hidden;
23
24
 
24
- &.ax-appearance-solid,
25
- &.ax-appearance-outline {
26
- @include solid-appearance();
25
+ &.ax-look-solid,
26
+ &.ax-look-outline {
27
+ @include solid-look();
27
28
  }
28
- &.ax-appearance-flat {
29
- @include flat-appearance();
29
+ &.ax-look-flat {
30
+ @include flat-look();
30
31
  }
31
- &.ax-appearance-outline {
32
- @include outline-appearance();
32
+ &.ax-look-outline {
33
+ @include outline-look();
33
34
  }
34
- &.ax-appearance-fill {
35
- @include fill-appearance();
35
+ &.ax-look-fill {
36
+ @include fill-look();
36
37
  }
37
38
 
38
39
  .ax-editor-input {
@@ -46,7 +47,7 @@
46
47
  padding: 0 0.75rem;
47
48
 
48
49
  &::placeholder {
49
- color: rgba(var(--ax-color-text-default), 0.25);
50
+ color: rgba(var(--ax-color-text-default), 0.5);
50
51
  font-weight: 500;
51
52
  font-size: inherit;
52
53
  }
@@ -92,7 +93,7 @@
92
93
  height: 100%;
93
94
  font-size: 1.25rem;
94
95
  line-height: 1.25rem;
95
- color: rgba(var(--ax-color-default-fore));
96
+ color: rgba(var(--ax-color-text-default));
96
97
  }
97
98
 
98
99
  &.ax-button-icon {
@@ -186,8 +187,8 @@ span.ripple {
186
187
  position: absolute;
187
188
  border-radius: 50%;
188
189
  transform: scale(0);
189
- animation: ripple 300ms linear;
190
- background-color: rgba(var(--ax-color-white), 0.7);
190
+ animation: ripple 500ms linear;
191
+ background-color: rgba(var(--ax-color-white), 0.16);
191
192
  @keyframes ripple {
192
193
  to {
193
194
  transform: scale(4);
package/src/shared/_general-button.scss CHANGED
@@ -7,16 +7,15 @@
7
7
  font-size: 0.875rem;
8
8
  cursor: pointer;
9
9
  transition: background-color 0.3s;
10
- color: rgba(var(--ax-color-default-fore), 0.6);
11
-
10
+ color: rgba(var(--ax-color-text-default), 0.6);
11
+ border-radius: var(--ax-rounded-border-default);
12
12
  &:is(&:hover):not(&:disabled, .ax-state-disabled) {
13
- background: rgba(var(--ax-color-default));
14
- color: rgba(var(--ax-color-default-fore), 0.87);
13
+ color: rgba(var(--ax-color-primary-500));
15
14
  }
16
15
 
17
16
  &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
18
- background-color: rgba(var(--ax-color-default));
19
- outline-color: transparent;
17
+ color: rgba(var(--ax-color-primary-700));
18
+ // outline-color: transparent;
20
19
  }
21
20
 
22
21
  &:is(&:active):not(&:disabled, .ax-state-disabled) {
@@ -26,8 +25,8 @@
26
25
  &.ax-button-icon {
27
26
  padding: 0 0.5rem;
28
27
  font-size: 1.25rem;
29
- min-width: var(--ax-size-default);
30
- width: var(--ax-size-default);
28
+ // min-width: var(--ax-size-default);
29
+ // width: var(--ax-size-default);
31
30
  // min-height: 100%;
32
31
  > button {
33
32
  display: flex;
@@ -45,3 +44,23 @@
45
44
  cursor: not-allowed;
46
45
  }
47
46
  }
47
+ .ax-clear-button {
48
+ font-size: 1rem;
49
+ line-height: 1;
50
+ color: rgba(var(--ax-color-text-default), 0.6);
51
+ height: var(--ax-size-default);
52
+ display: inline-flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ padding: 0 0.5rem;
56
+ > button {
57
+ display: flex;
58
+ }
59
+ &:is(&:hover):not(&:disabled, .ax-state-disabled) {
60
+ color: rgba(var(--ax-color-text-default), 0.75);
61
+ }
62
+ &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
63
+ color: rgba(var(--ax-color-text-default));
64
+ // outline-color: transparent;
65
+ }
66
+ }
package/src/shared/_list.scss CHANGED
@@ -122,8 +122,8 @@
122
122
  }
123
123
  }
124
124
  &.ax-state-selected {
125
- background-color: rgba(var(--ax-color-default)) !important;
126
- color: rgba(var(--ax-color-default-fore)) !important;
125
+ background-color: rgba(var(--ax-color-primary-500)) !important;
126
+ color: rgba(var(--ax-color-primary-fore)) !important;
127
127
  .ax-selected-icon {
128
128
  color: rgba(var(--ax-color-primary-500));
129
129
  font-size: 1.5rem;
@@ -142,10 +142,10 @@
142
142
 
143
143
  &:focus-visible,
144
144
  &:hover {
145
- background-color: rgba(var(--ax-color-default));
145
+ background-color: rgba(var(--ax-color-on-surface));
146
146
  }
147
147
  &.ax-state-focus {
148
- background-color: rgba(var(--ax-color-default));
148
+ background-color: rgba(var(--ax-color-on-surface));
149
149
  }
150
150
  }
151
151
  }
package/src/shared/_skeleton.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  .ax-skeleton {
2
2
  position: relative;
3
3
  overflow: hidden;
4
- background-color: rgba(var(--ax-color-default));
4
+ background-color: rgba(var(--ax-color-black), 0.5);
5
5
  &.ax-skeleton-animate {
6
6
  &::before {
7
7
  content: '';
@@ -11,7 +11,12 @@
11
11
  height: 100%;
12
12
  width: 14rem;
13
13
  left: -200px;
14
- background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-default-fore), 0.15) 50%, transparent 100%);
14
+ background: linear-gradient(
15
+ to right,
16
+ transparent 0%,
17
+ rgba(var(--ax-color-black), 0.15) 50%,
18
+ transparent 100%
19
+ );
15
20
  animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
16
21
  }
17
22
  }
package/src/shared/_table.scss CHANGED
@@ -1,111 +1,117 @@
1
- @layer components {
1
+ @import '../mixins/index.scss';
2
+ @include darkMode() {
2
3
  .ax-table {
3
- width: 100%;
4
- border-radius: var(--ax-rounded-border-default);
5
- border-spacing: 0px;
6
- border-collapse: collapse;
7
- border: 1px solid;
4
+ thead {
5
+ background-color: rgba(var(--ax-color-on-surface));
6
+ }
7
+ }
8
+ }
9
+ .ax-table {
10
+ width: 100%;
11
+ border-radius: var(--ax-rounded-border-default);
12
+ border-spacing: 0px;
13
+ border-collapse: collapse;
14
+ border: 1px solid;
15
+ border-color: rgba(var(--ax-color-border-default));
16
+ overflow: hidden;
17
+ font-size: 0.875rem;
18
+ td {
19
+ border-bottom: 1px solid;
8
20
  border-color: rgba(var(--ax-color-border-default));
9
- overflow: hidden;
10
- font-size: 0.875rem;
11
- td {
12
- border-bottom: 1px solid;
13
- border-color: rgba(var(--ax-color-border-default));
21
+ padding: 0.875rem 1rem;
22
+ }
23
+ thead {
24
+ background-color: rgba(var(--ax-color-on-surface));
25
+ border-bottom: 1px solid;
26
+ border-color: rgba(var(--ax-color-border-default));
27
+ th {
28
+ text-transform: uppercase;
29
+ font-weight: 500;
30
+ text-align: start;
14
31
  padding: 0.875rem 1rem;
15
32
  }
33
+ }
34
+ &.ax-table-alternate {
35
+ tbody {
36
+ tr {
37
+ &:nth-child(even) {
38
+ background-color: rgba(var(--ax-color-on-surface));
39
+ }
40
+ }
41
+ }
42
+ }
43
+ &.ax-table-bordered {
16
44
  thead {
17
- background-color: rgba(var(--ax-color-default));
18
- border-bottom: 1px solid;
19
- border-color: rgba(var(--ax-color-border-default));
20
45
  th {
21
- text-transform: uppercase;
22
- font-weight: 500;
23
- text-align: start;
24
- padding: 0.875rem 1rem;
46
+ border-top: 0 !important;
25
47
  }
26
48
  }
27
- &.ax-table-alternate {
28
- tbody {
29
- tr {
30
- &:nth-child(even) {
31
- background-color: rgba(var(--ax-color-default));
49
+ tbody {
50
+ tr {
51
+ &:last-child {
52
+ td {
53
+ border-bottom: 0 !important;
32
54
  }
33
55
  }
34
- }
35
- }
36
- &.ax-table-bordered {
37
- thead {
38
- th {
39
- border-top: 0 !important;
40
- }
41
- }
42
- tbody {
43
- tr {
56
+ td {
44
57
  &:last-child {
45
- td {
46
- border-bottom: 0 !important;
47
- }
48
- }
49
- td {
50
- &:last-child {
51
- border-bottom: 0 !important;
52
- }
58
+ border-bottom: 0 !important;
53
59
  }
54
60
  }
55
61
  }
62
+ }
56
63
 
57
- td,
58
- th {
59
- border: 1px solid;
60
- border-color: rgba(var(--ax-color-border-default));
61
- &:first-child {
62
- border-inline-start-width: 0px;
63
- }
64
- &:last-child {
65
- border-inline-end-width: 0px;
66
- }
64
+ td,
65
+ th {
66
+ border: 1px solid;
67
+ border-color: rgba(var(--ax-color-border-default));
68
+ &:first-child {
69
+ border-inline-start-width: 0px;
70
+ }
71
+ &:last-child {
72
+ border-inline-end-width: 0px;
67
73
  }
68
74
  }
69
- @media screen and (max-width: 601px) {
70
- &.ax-table-responsive {
71
- overflow-wrap: break-word;
72
- display: block;
73
- border: 0px;
74
- thead {
75
- position: absolute;
76
- inset-inline-start: -100%;
77
- top: -100%;
78
- }
75
+ }
76
+ @media screen and (max-width: 601px) {
77
+ &.ax-table-responsive {
78
+ overflow-wrap: break-word;
79
+ display: block;
80
+ border: 0px;
81
+ thead {
82
+ position: absolute;
83
+ inset-inline-start: -100%;
84
+ top: -100%;
85
+ }
79
86
 
80
- td {
81
- display: block;
82
- float: inline-start;
83
- width: 100%;
84
- clear: both;
85
- background: rgba(var(--ax-color-surface));
86
- padding: 0.375rem 0.625rem;
87
- box-sizing: border-box;
88
- &:last-child {
89
- border: 0;
90
- }
91
- &:before {
92
- content: attr(data-label);
93
- display: block;
94
- font-weight: bold;
95
- }
96
- }
97
- tr {
98
- border: 1px solid;
99
- border-color: rgba(var(--ax-color-border-default));
87
+ td {
88
+ display: block;
89
+ float: inline-start;
90
+ width: 100%;
91
+ clear: both;
92
+ background: rgba(var(--ax-color-surface));
93
+ padding: 0.375rem 0.625rem;
94
+ box-sizing: border-box;
95
+ &:last-child {
96
+ border: 0;
100
97
  }
101
- tr,
102
- tbody {
98
+ &:before {
99
+ content: attr(data-label);
103
100
  display: block;
104
- width: 100%;
105
- float: inline-start;
106
- margin-bottom: 0.625rem;
101
+ font-weight: bold;
107
102
  }
108
103
  }
104
+ tr {
105
+ border: 1px solid;
106
+ border-color: rgba(var(--ax-color-border-default));
107
+ }
108
+ tr,
109
+ tbody {
110
+ display: block;
111
+ width: 100%;
112
+ float: inline-start;
113
+ margin-bottom: 0.625rem;
114
+ }
109
115
  }
110
116
  }
111
117
  }
package/src/shared/_utils.scss CHANGED
@@ -5,26 +5,6 @@
5
5
  vertical-align: middle;
6
6
  }
7
7
 
8
- .ax-rotaion-0 {
9
- transform: rotate(0);
10
- }
11
-
12
- @each $deg in $degrees {
13
- .ax-rotation-#{$deg} {
14
- transform: rotate(#{$deg}deg);
15
- }
16
-
17
- .-ax-rotation-#{$deg} {
18
- transform: rotate(-#{$deg}deg);
19
- }
20
- }
21
-
22
- .ax-transition-all {
23
- transition-property: all;
24
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
25
- transition-duration: 150ms;
26
- }
27
-
28
8
  .ax-w-full {
29
9
  width: 100%;
30
10
  }
@@ -50,6 +30,32 @@
50
30
  border-color: rgba(var(--ax-color-border-default));
51
31
  border-radius: var(--ax-rounded-border-default);
52
32
  }
33
+
53
34
  .ax-hidden {
54
35
  display: none;
55
36
  }
37
+
38
+ .ax-drop-over-state {
39
+ width: 100%;
40
+ height: 100%;
41
+ position: absolute;
42
+ top: 0;
43
+ inset-inline-start: 0;
44
+ background-color: rgba(var(--ax-color-primary-500), 0.15);
45
+ pointer-events: none;
46
+ outline: 2px dashed rgba(var(--ax-color-primary-500));
47
+ outline-offset: -4px;
48
+ border-radius: inherit;
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ flex-direction: column;
53
+ font-size: 0.875rem;
54
+ gap: 0.5rem;
55
+ cursor: pointer;
56
+ color: rgba(var(--ax-color-primary-700));
57
+ transition: all 0.3s;
58
+ .ax-icon {
59
+ font-size: 1.5rem;
60
+ }
61
+ }
package/src/shared/index.scss CHANGED
@@ -1,13 +1,12 @@
1
- @import "./actionsheet";
2
- @import "./check-box";
3
- @import "./decoration";
4
- @import "./drop-down";
5
- @import "./editor-container";
6
- @import "./general-button";
7
- @import "./icon-control";
8
- @import "./inputs";
9
- @import "./list";
10
- @import "./radio";
11
- @import "./skeleton";
12
- @import "./table";
13
- @import "./utils";
1
+ @import './actionsheet';
2
+ @import './check-box';
3
+ @import './decoration';
4
+ @import './drop-down';
5
+ @import './editor-container';
6
+ @import './general-button';
7
+ @import './inputs';
8
+ @import './list';
9
+ @import './radio';
10
+ @import './skeleton';
11
+ @import './table';
12
+ @import './utils';
package/src/themes/default.scss CHANGED
@@ -2,25 +2,21 @@
2
2
  --ax-size-base: 2.5rem;
3
3
  --ax-size-default: var(--ax-size-base);
4
4
 
5
- --ax-rounded-border-default: 0.375rem;
5
+ --ax-rounded-border-default: 0.5rem;
6
6
  --ax-color-border-default: 224, 224, 224;
7
7
 
8
- --ax-color-background-default: 246, 247, 249;
8
+ --ax-color-background-default: 249, 250, 251;
9
9
  --ax-color-text-default: 22, 22, 22;
10
10
 
11
11
  --ax-color-surface: 255, 255, 255;
12
12
  --ax-color-surface-fore: 22, 22, 22;
13
13
 
14
- --ax-color-on-surface: 248, 248, 248;
14
+ --ax-color-on-surface: 243, 244, 246;
15
15
  --ax-color-on-surface-fore: 22, 22, 22;
16
16
 
17
17
  --ax-color-input-surface: 255, 255, 255;
18
- --ax-color-input-surface-fill: 247, 247, 247;
19
18
  --ax-color-input-surface-fore: 22, 22, 22;
20
19
 
21
- --ax-color-default: 229, 231, 235;
22
- --ax-color-default-fore: 22, 22, 22;
23
-
24
20
  --ax-color-ghost: 255, 255, 255;
25
21
  --ax-color-ghost-fore: 22, 22, 22;
26
22
 
@@ -101,6 +97,19 @@
101
97
  --ax-color-info-800: 55, 48, 163;
102
98
  --ax-color-info-900: 49, 46, 129;
103
99
  --ax-color-info-950: 30, 27, 75;
100
+
101
+ --ax-color-neutral-fore: 3, 7, 18;
102
+ --ax-color-neutral-50: 249, 250, 251;
103
+ --ax-color-neutral-100: 243, 244, 246;
104
+ --ax-color-neutral-200: 229, 231, 235;
105
+ --ax-color-neutral-300: 209, 213, 219;
106
+ --ax-color-neutral-400: 156, 163, 175;
107
+ --ax-color-neutral-500: 107, 114, 128;
108
+ --ax-color-neutral-600: 75, 85, 99;
109
+ --ax-color-neutral-700: 55, 65, 81;
110
+ --ax-color-neutral-800: 31, 41, 55;
111
+ --ax-color-neutral-900: 17, 24, 39;
112
+ --ax-color-neutral-950: 3, 7, 18;
104
113
  }
105
114
 
106
115
  .ax-dark {
@@ -110,7 +119,6 @@
110
119
  --ax-color-text-default: 255, 255, 255;
111
120
 
112
121
  --ax-color-surface: 31, 41, 55;
113
- --ax-color-input-surface-fill: 31, 41, 55;
114
122
  --ax-color-surface-fore: 255, 255, 255;
115
123
 
116
124
  --ax-color-on-surface: 55, 65, 81;
@@ -119,9 +127,6 @@
119
127
  --ax-color-input-surface: 38, 45, 57;
120
128
  --ax-color-input-surface-fore: 224, 224, 224;
121
129
 
122
- --ax-color-default: 77, 91, 113;
123
- --ax-color-default-fore: 255, 255, 255;
124
-
125
130
  --ax-color-ghost: 77, 91, 113;
126
131
  --ax-color-ghost-fore: 255, 255, 255;
127
132
  }
package/src/variables/_colors.scss CHANGED
@@ -1,2 +1,2 @@
1
1
  $color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
2
- $look_names: 'default', 'outline', 'blank';
2
+ $look_names: 'solid', 'outline', 'blank';
package/tailwind-base.js CHANGED
@@ -117,6 +117,21 @@ module.exports = withAnimations({
117
117
  900: withOpacityValue('--ax-color-info-900'),
118
118
  950: withOpacityValue('--ax-color-info-950'),
119
119
  },
120
+ neutral: {
121
+ DEFAULT: withOpacityValue('--ax-color-neutral-500'),
122
+ fore: withOpacityValue('--ax-color-neutral-fore'),
123
+ 50: withOpacityValue('--ax-color-neutral-50'),
124
+ 100: withOpacityValue('--ax-color-neutral-100'),
125
+ 200: withOpacityValue('--ax-color-neutral-200'),
126
+ 300: withOpacityValue('--ax-color-neutral-300'),
127
+ 400: withOpacityValue('--ax-color-neutral-400'),
128
+ 500: withOpacityValue('--ax-color-neutral-500'),
129
+ 600: withOpacityValue('--ax-color-neutral-600'),
130
+ 700: withOpacityValue('--ax-color-neutral-700'),
131
+ 800: withOpacityValue('--ax-color-neutral-800'),
132
+ 900: withOpacityValue('--ax-color-neutral-900'),
133
+ 950: withOpacityValue('--ax-color-neutral-950'),
134
+ },
120
135
  },
121
136
  textColor: {
122
137
  DEFAULT: withOpacityValue('--ax-color-text-default'),
@@ -265,7 +280,7 @@ module.exports = withAnimations({
265
280
  '.skeleton': {
266
281
  position: 'relative',
267
282
  overflow: 'hidden',
268
- backgroundColor: 'rgba(var(--ax-color-default), 0.15)',
283
+ backgroundColor: 'rgba(var(--ax-color-black), 0.15)',
269
284
  },
270
285
  '.skeleton-animate': {},
271
286
  '.xs': {
package/src/shared/_icon-control.scss DELETED
File without changes