@acorex/styles 5.0.22 → 5.0.23

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 (13) hide show
  1. package/dark.scss +1 -31
  2. package/package.json +1 -1
  3. package/src/base/index.scss +6 -6
  4. package/src/components/_alert.scss +7 -7
  5. package/src/components/_checkbox.scss +2 -1
  6. package/src/components/_dialog.scss +2 -1
  7. package/src/components/_dropdown.scss +2 -1
  8. package/src/components/_editor-container.scss +3 -1
  9. package/src/components/_popup.scss +2 -1
  10. package/src/components/_radio.scss +3 -1
  11. package/src/components/_tabs.scss +77 -61
  12. package/src/components/_toast.scss +2 -2
  13. package/src/utility/_mixins.scss +16 -1
package/dark.scss CHANGED
@@ -5,7 +5,6 @@ html.ax-dark * {
5
5
  --ax-color-default-color: 255 255 255;
6
6
  --ax-color-border: 55 65 81;
7
7
  --ax-color-placeholder: 161 161 161;
8
-
9
8
  .ax-skeleton {
10
9
  &.ax-skeleton-animate {
11
10
  &::before {
@@ -14,36 +13,7 @@ html.ax-dark * {
14
13
  }
15
14
  }
16
15
  }
17
-
18
16
  .cdk-overlay-dark-backdrop {
19
- background: rgba(0, 0, 0, 0.8) !important;
20
- }
21
-
22
- .ax-control {
23
- @apply ax-border-transparent ax-bg-white/[0.16] ax-backdrop-blur-3xl;
24
- }
25
-
26
- .ax-surface {
27
- @apply ax-bg-white/20 ax-border-white/[0.1] ax-backdrop-blur-3xl;
28
- }
29
-
30
- .ax-radio {
31
- &:checked {
32
- @apply ax-border-primary-500 ax-bg-primary-500;
33
- }
34
- }
35
-
36
- .ax-checkbox {
37
- &:checked,
38
- &:indeterminate {
39
- @apply ax-bg-primary-500;
40
- }
41
- }
42
- .cdk-overlay-pane {
43
- .ax-editor-container,
44
- input[type="checkbox"],
45
- input[type="radio"] {
46
- @apply ax-bg-black/[0.2];
47
- }
17
+ background: rgba(0, 0, 0, 0.5) !important;
48
18
  }
49
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.22",
3
+ "version": "5.0.23",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/base/index.scss CHANGED
@@ -21,10 +21,10 @@ body {
21
21
  font-size: 16px
22
22
  }
23
23
 
24
- .ax-control {
25
- @apply ax-border-light-300 ax-bg-white;
26
- }
24
+ // .ax-control {
25
+ // @apply ax-border-light-300 ax-bg-white;
26
+ // }
27
27
 
28
- .ax-surface {
29
- @apply ax-bg-white ax-border-light-300;
30
- }
28
+ // .ax-surface {
29
+ // @apply ax-bg-white ax-border-light-300;
30
+ // }
package/src/components/_alert.scss CHANGED
@@ -62,7 +62,7 @@
62
62
  }
63
63
  .ax-alert-button {
64
64
  &:hover {
65
- @apply ax-text-primary-800;
65
+ @apply ax-text-primary-900;
66
66
  }
67
67
  }
68
68
  }
@@ -73,7 +73,7 @@
73
73
  }
74
74
  .ax-alert-button {
75
75
  &:hover {
76
- @apply ax-text-secondary-800;
76
+ @apply ax-text-secondary-900;
77
77
  }
78
78
  }
79
79
  }
@@ -84,7 +84,7 @@
84
84
  }
85
85
  .ax-alert-button {
86
86
  &:hover {
87
- @apply ax-text-success-800;
87
+ @apply ax-text-success-900;
88
88
  }
89
89
  }
90
90
  }
@@ -95,7 +95,7 @@
95
95
  }
96
96
  .ax-alert-button {
97
97
  &:hover {
98
- @apply ax-text-warning-800;
98
+ @apply ax-text-warning-900;
99
99
  }
100
100
  }
101
101
  }
@@ -106,7 +106,7 @@
106
106
  }
107
107
  .ax-alert-button {
108
108
  &:hover {
109
- @apply ax-text-danger-800;
109
+ @apply ax-text-danger-900;
110
110
  }
111
111
  }
112
112
  }
@@ -117,7 +117,7 @@
117
117
  }
118
118
  .ax-alert-button {
119
119
  &:hover {
120
- @apply ax-text-info-800;
120
+ @apply ax-text-info-900;
121
121
  }
122
122
  }
123
123
  }
@@ -128,7 +128,7 @@
128
128
  }
129
129
  .ax-alert-button {
130
130
  &:hover {
131
- @apply ax-text-light-800;
131
+ @apply ax-text-light-900;
132
132
  }
133
133
  }
134
134
  }
package/src/components/_checkbox.scss CHANGED
@@ -11,7 +11,8 @@
11
11
  }
12
12
  }
13
13
  input[type=checkbox] {
14
- @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-control;
14
+ @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
15
+ @include control-dark('editor');
15
16
  &:checked,
16
17
  &:indeterminate {
17
18
  @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
package/src/components/_dialog.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @layer components {
2
2
  .ax-dialog {
3
- @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden ax-surface;
3
+ @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
4
+ @include control-dark('surface');
4
5
  @screen sm {
5
6
  width: 98vw;
6
7
  }
package/src/components/_dropdown.scss CHANGED
@@ -18,7 +18,8 @@
18
18
  }
19
19
 
20
20
  .ax-overlay-pane {
21
- @apply ax-bg-white ax-control;
21
+ @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
22
+ @include control-dark('surface');
22
23
 
23
24
  &.ax-dropdown-list {
24
25
  @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
package/src/components/_editor-container.scss CHANGED
@@ -1,7 +1,9 @@
1
1
  @layer components {
2
2
  .ax-editor-container {
3
3
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
4
- @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-control;
4
+ @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
5
+ @include control-dark('editor');
6
+
5
7
  &:focus-within {
6
8
  @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
7
9
  }
package/src/components/_popup.scss CHANGED
@@ -15,7 +15,8 @@
15
15
  .ax-popup {
16
16
  max-height: 98vh;
17
17
  min-height: fit-content;
18
- @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-surface;
18
+ @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0;
19
+ @include control-dark('surface');
19
20
 
20
21
  header {
21
22
  @apply ax-flex ax-justify-between ax-px-3 ax-py-2;
package/src/components/_radio.scss CHANGED
@@ -3,7 +3,9 @@
3
3
  @apply ax-text-sm ax-font-medium ax-text-light-700;
4
4
 
5
5
  .ax-radio {
6
- @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-control;
6
+ @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
7
+ @include control-dark('editor');
8
+
7
9
  &:checked {
8
10
  @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;
9
11
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
package/src/components/_tabs.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @apply ax-flex;
7
7
 
8
8
  ax-tab-item {
9
- @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center;
9
+ @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative;
10
10
  min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
11
11
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
12
12
 
@@ -36,68 +36,76 @@
36
36
  }
37
37
  }
38
38
 
39
- &>.ax-tab-controll {
39
+ & > .ax-tab-controll {
40
40
  @apply ax-flex ax-items-center ax-justify-center ax-px-1 ax-cursor-pointer;
41
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
41
+ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
42
+ 0 1px 10px 0 rgba(0, 0, 0, 0.12);
42
43
  }
43
44
 
44
- &.ax-vertical {
45
- .ax-items-wrapper {
46
- @apply ax-flex-col;
45
+
46
+ &.ax-horizontal {
47
+ &.ax-look-default {
48
+ @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
49
+ @include control-dark("editor");
47
50
 
48
51
  ax-tab-item {
49
- @apply ax-text-center ax-justify-start ax-py-2 ax-mb-1;
50
- &:last-child{
51
- @apply ax-mb-0
52
- }
53
- }
54
- }
52
+ @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
53
+ @include control-dark("editor");
55
54
 
56
- &.ax-look-default {
57
- @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-control ;
55
+ border-bottom-color: transparent !important;
58
56
 
59
- ax-tab-item {
60
- @apply ax-bg-white ax-border-s ax-border-solid ax-border-light-300 ax-border-b-0 dark:ax-text-light-200;
57
+ &:first-child {
58
+ @apply ax-rounded-l;
59
+ }
60
+
61
+ &:last-child {
62
+ @apply ax-rounded-r ax-border-r-0;
63
+ }
61
64
 
62
65
  &:hover,
63
66
  &.ax-state-active {
64
- border-inline-start-color: rgb(var(--ax-color-primary)) !important;
67
+ border-bottom-color: rgb(var(--ax-color-primary)) !important;
65
68
  }
66
69
  }
67
70
  }
68
71
 
69
72
  &.ax-look-start-line {
73
+ @apply ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
70
74
  ax-tab-item {
71
- @apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
72
-
73
75
  &.ax-state-active {
74
- @apply ax-border-primary-500 ax-text-primary-500;
75
-
76
- &:hover {
77
- @apply ax-border-primary-500;
76
+ @apply ax-text-primary-500;
77
+ &::after {
78
+ @apply ax-absolute ax-top-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
79
+ content: "";
78
80
  }
81
+
79
82
  }
80
-
81
83
  &:hover {
82
- @apply ax-border-primary-500 ax-text-primary-500;
84
+ &::after {
85
+ @apply ax-absolute ax-top-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
86
+ content: "";
87
+ }
83
88
  }
84
89
  }
85
90
  }
86
91
 
87
92
  &.ax-look-end-line {
93
+ @apply ax-border-b ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
88
94
  ax-tab-item {
89
- @apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
90
95
 
91
96
  &.ax-state-active {
92
- @apply ax-border-primary-500 ax-text-primary-500;
93
-
94
- &:hover {
95
- @apply ax-border-primary-500;
97
+ @apply ax-text-primary-500;
98
+ &::after {
99
+ @apply ax-absolute ax-bottom-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
100
+ content: "";
96
101
  }
102
+
97
103
  }
98
-
99
104
  &:hover {
100
- @apply ax-border-primary-500 ax-text-primary-500;
105
+ &::after {
106
+ @apply ax-absolute ax-bottom-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
107
+ content: "";
108
+ }
101
109
  }
102
110
  }
103
111
  }
@@ -107,56 +115,59 @@
107
115
  @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
108
116
 
109
117
  &:hover {
110
- @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-100;
118
+ @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
111
119
  }
112
120
 
113
121
  &.ax-state-active {
114
- @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50;
122
+ @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
115
123
  }
116
124
  }
117
125
  }
118
126
 
119
127
  &.ax-look-pills-color {
120
128
  ax-tab-item {
121
- @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
129
+ @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
122
130
 
123
131
  &:hover {
124
- @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-100;
132
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
125
133
  }
126
134
 
127
135
  &.ax-state-active {
128
- @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-50;
136
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
129
137
  }
130
138
  }
131
139
  }
132
140
  }
133
141
 
134
- &.ax-horizontal {
135
- &.ax-look-default {
136
- @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-control;
142
+ &.ax-vertical {
143
+ .ax-items-wrapper {
144
+ @apply ax-flex-col;
137
145
 
138
146
  ax-tab-item {
139
- @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 ax-control dark:ax-text-light-200;
140
- border-bottom-color: transparent !important;
147
+ @apply ax-text-center ax-justify-start ax-py-2;
148
+
149
+ }
150
+ }
141
151
 
142
- &:first-child {
143
- @apply ax-rounded-l;
144
- }
152
+ &.ax-look-default {
153
+ @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
154
+ @include control-dark("editor");
145
155
 
156
+ ax-tab-item {
157
+ @apply ax-bg-white ax-border-s ax-border-solid ax-border-light-300 ax-border-b-0 dark:ax-text-light-200 ax-mb-1;
146
158
  &:last-child {
147
- @apply ax-rounded-r ax-border-r-0;
159
+ @apply ax-mb-0;
148
160
  }
149
-
150
161
  &:hover,
151
162
  &.ax-state-active {
152
- border-bottom-color: rgb(var(--ax-color-primary)) !important;
163
+ border-inline-start-color: rgb(var(--ax-color-primary)) !important;
153
164
  }
154
165
  }
155
166
  }
156
167
 
157
168
  &.ax-look-start-line {
158
169
  ax-tab-item {
159
- @apply ax-border-t-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
170
+ @apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
160
171
 
161
172
  &.ax-state-active {
162
173
  @apply ax-border-primary-500 ax-text-primary-500;
@@ -174,11 +185,11 @@
174
185
 
175
186
  &.ax-look-end-line {
176
187
  ax-tab-item {
177
- @apply ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
188
+ @apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
178
189
 
179
190
  &.ax-state-active {
180
- @apply ax-border-primary-500 ax-text-primary-500;
181
-
191
+ @apply ax-border-primary-500 ax-text-primary-500;
192
+
182
193
  &:hover {
183
194
  @apply ax-border-primary-500;
184
195
  }
@@ -192,31 +203,36 @@
192
203
 
193
204
  &.ax-look-pills {
194
205
  ax-tab-item {
195
- @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
196
-
206
+ @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
207
+ &:last-child {
208
+ @apply ax-mb-0;
209
+ }
197
210
  &:hover {
198
- @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
211
+ @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-100;
199
212
  }
200
213
 
201
214
  &.ax-state-active {
202
- @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
215
+ @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50;
203
216
  }
204
217
  }
205
218
  }
206
219
 
207
220
  &.ax-look-pills-color {
208
221
  ax-tab-item {
209
- @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
210
-
222
+ @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
223
+ &:last-child {
224
+ @apply ax-mb-0;
225
+ }
211
226
  &:hover {
212
- @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
227
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-100;
213
228
  }
214
229
 
215
230
  &.ax-state-active {
216
- @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
231
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-50;
217
232
  }
218
233
  }
219
234
  }
220
235
  }
236
+
221
237
  }
222
- }
238
+ }
package/src/components/_toast.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .ax-toast {
3
- @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-300 ax-border ax-border-solid ax-rounded-lg ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center ax-surface;
4
-
3
+ @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-300 ax-border ax-border-solid ax-rounded-lg ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
4
+ @include control-dark('surface');
5
5
  @screen sm {
6
6
  width: 98vw;
7
7
  }
package/src/utility/_mixins.scss CHANGED
@@ -35,4 +35,19 @@
35
35
  --ax-color-#{$name}: #{$color};
36
36
  }
37
37
  }
38
- }
38
+ }
39
+
40
+ @mixin control-dark($type) {
41
+
42
+ @if($type == "editor"){
43
+ @apply dark:ax-border-light-200/[0.05] dark:ax-bg-white/[0.03] dark:ax-backdrop-blur-3xl;
44
+ }
45
+ @if($type == "surface"){
46
+ @apply dark:ax-bg-default-background dark:ax-border-light-200/[0.05] dark:ax-shadow-md;
47
+
48
+ }
49
+
50
+ }
51
+
52
+ // @include control-dark('editor');
53
+ // @include control-dark('surface');