@acorex/styles 5.0.17 → 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.
@@ -60,16 +60,16 @@
60
60
  }
61
61
 
62
62
  &.ax-state-holiday {
63
- @apply ax-text-danger;
63
+ @apply ax-text-danger-500;
64
64
  &:hover {
65
65
  @apply ax-text-black dark:ax-text-light-100;
66
66
  }
67
67
  }
68
68
 
69
69
  &.ax-state-today {
70
- @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary dark:ax-bg-primary dark:ax-text-primary-fore;
70
+ @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
71
71
  &:hover {
72
- @apply ax-text-primary dark:ax-text-primary-fore;
72
+ @apply ax-text-primary-500 dark:ax-text-primary-fore;
73
73
  }
74
74
  }
75
75
 
@@ -78,7 +78,7 @@
78
78
  }
79
79
 
80
80
  &.ax-state-selected {
81
- @apply ax-bg-primary ax-text-primary-fore ax-opacity-100;
81
+ @apply ax-bg-primary-500 ax-text-primary-fore ax-opacity-100;
82
82
 
83
83
  &:hover {
84
84
  @apply ax-text-primary-fore;
@@ -87,43 +87,43 @@
87
87
 
88
88
  &.ax-state-event {
89
89
  &::after {
90
- @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark;
90
+ @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark-500;
91
91
  content: "";
92
92
  }
93
93
 
94
94
  &.ax-state-event-primary {
95
95
  &::after {
96
- @apply ax-bg-primary;
96
+ @apply ax-bg-primary-500;
97
97
  }
98
98
  }
99
99
 
100
100
  &.ax-state-event-secondary {
101
101
  &::after {
102
- @apply ax-bg-secondary;
102
+ @apply ax-bg-secondary-500;
103
103
  }
104
104
  }
105
105
 
106
106
  &.ax-state-event-success {
107
107
  &::after {
108
- @apply ax-bg-success;
108
+ @apply ax-bg-success-500;
109
109
  }
110
110
  }
111
111
 
112
112
  &.ax-state-event-warning {
113
113
  &::after {
114
- @apply ax-bg-warning;
114
+ @apply ax-bg-warning-500;
115
115
  }
116
116
  }
117
117
 
118
118
  &.ax-state-event-danger {
119
119
  &::after {
120
- @apply ax-bg-danger;
120
+ @apply ax-bg-danger-500;
121
121
  }
122
122
  }
123
123
 
124
124
  &.ax-state-event-info {
125
125
  &::after {
126
- @apply ax-bg-info;
126
+ @apply ax-bg-info-500;
127
127
  }
128
128
  }
129
129
  }
@@ -4,17 +4,18 @@
4
4
 
5
5
  .ax-wrapper {
6
6
  &.ax-state-disabled {
7
- @apply ax-cursor-not-allowed ax-opacity-60;
7
+ @apply ax-cursor-not-allowed ax-opacity-80;
8
8
  input[type=checkbox] {
9
9
  @apply ax-cursor-not-allowed;
10
10
  }
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 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-controll;
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
- @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
18
+ @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
18
19
  }
19
20
  &:checked {
20
21
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
@@ -23,7 +24,7 @@
23
24
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
24
25
  }
25
26
  &:focus {
26
- @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
27
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
27
28
  }
28
29
  }
29
30
  ax-label {
@@ -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
  }
@@ -30,29 +31,29 @@
30
31
  .ax-dialog-footer {
31
32
  @apply ax-col-span-12 ax-flex ax-justify-end;
32
33
  }
33
- &.ax-primary {
34
+ &.ax-primary-default {
34
35
  .ax-dialog-icon {
35
- @apply ax-text-primary ax-bg-primary-200;
36
+ @apply ax-text-primary-500 ax-bg-primary-200;
36
37
  }
37
38
  }
38
- &.ax-success {
39
+ &.ax-success-default {
39
40
  .ax-dialog-icon {
40
- @apply ax-text-success ax-bg-success-200;
41
+ @apply ax-text-success-500 ax-bg-success-200;
41
42
  }
42
43
  }
43
- &.ax-danger {
44
+ &.ax-danger-default {
44
45
  .ax-dialog-icon {
45
- @apply ax-text-danger ax-bg-danger-200;
46
+ @apply ax-text-danger-500 ax-bg-danger-200;
46
47
  }
47
48
  }
48
- &.ax-warning {
49
+ &.ax-warning-default {
49
50
  .ax-dialog-icon {
50
- @apply ax-text-warning ax-bg-warning-200;
51
+ @apply ax-text-warning-500 ax-bg-warning-200;
51
52
  }
52
53
  }
53
- &.ax-info {
54
+ &.ax-info-default {
54
55
  .ax-dialog-icon {
55
- @apply ax-text-info ax-bg-info-200;
56
+ @apply ax-text-info-500 ax-bg-info-200;
56
57
  }
57
58
  }
58
59
 
@@ -18,7 +18,8 @@
18
18
  }
19
19
 
20
20
  .ax-overlay-pane {
21
- @apply ax-bg-white ax-controll;
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;
@@ -44,7 +45,7 @@
44
45
  @apply ax-flex ax-flex-row ax-ps-2;
45
46
  }
46
47
 
47
- &.ax-primary {
48
+ &.ax-primary-default {
48
49
  @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
49
50
 
50
51
  &:hover,
@@ -61,7 +62,7 @@
61
62
  }
62
63
  }
63
64
 
64
- &.ax-secondary {
65
+ &.ax-secondary-default {
65
66
  @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
66
67
 
67
68
  &:hover,
@@ -78,7 +79,7 @@
78
79
  }
79
80
  }
80
81
 
81
- &.ax-warning {
82
+ &.ax-warning-default {
82
83
  @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
83
84
 
84
85
  &:hover,
@@ -95,7 +96,7 @@
95
96
  }
96
97
  }
97
98
 
98
- &.ax-danger {
99
+ &.ax-danger-default {
99
100
  @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
100
101
 
101
102
  &:hover,
@@ -112,7 +113,7 @@
112
113
  }
113
114
  }
114
115
 
115
- &.ax-success {
116
+ &.ax-success-default {
116
117
  @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
117
118
 
118
119
  &:hover,
@@ -129,7 +130,7 @@
129
130
  }
130
131
  }
131
132
 
132
- &.ax-info {
133
+ &.ax-info-default {
133
134
  @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
134
135
 
135
136
  &:hover,
@@ -146,7 +147,7 @@
146
147
  }
147
148
  }
148
149
 
149
- &.ax-dark {
150
+ &.ax-dark-default {
150
151
  @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
151
152
 
152
153
  &:hover,
@@ -163,7 +164,7 @@
163
164
  }
164
165
  }
165
166
 
166
- &.ax-light {
167
+ &.ax-light-default {
167
168
  @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
168
169
 
169
170
  &:hover,
@@ -1,9 +1,11 @@
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-controll;
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
- @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
8
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
7
9
  }
8
10
  &.ax-button-icon {
9
11
  @apply ax-px-2;
@@ -65,9 +67,9 @@
65
67
  }
66
68
  }
67
69
  &.ax-state-error {
68
- @apply ax-border-danger;
70
+ @apply ax-border-danger-500;
69
71
  .ax-input {
70
- @apply ax-placeholder-danger;
72
+ @apply ax-placeholder-danger-500;
71
73
  }
72
74
  &:focus-within {
73
75
  @apply ax-ring-0 ax-ring-transparent;
@@ -2,7 +2,7 @@
2
2
  .ax-form-field {
3
3
  @apply ax-mb-2 ax-relative;
4
4
  .ax-error-msg {
5
- @apply ax-absolute ax--bottom-5 ax-text-danger ax-text-xs;
5
+ @apply ax-absolute ax--bottom-5 ax-text-danger-500 ax-text-xs;
6
6
  }
7
7
  }
8
8
  }
@@ -3,7 +3,7 @@
3
3
  @apply ax-outline-none ax-text-base ax-p-0;
4
4
  line-height: 20px;
5
5
  &:focus {
6
- @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
6
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
7
7
  }
8
8
  &.ax-state-disabled {
9
9
  background-color: rgb(var(--ax-color-disabled)) !important;
@@ -26,12 +26,12 @@
26
26
  }
27
27
  }
28
28
  &.ax-state-selected {
29
- @apply ax-bg-primary-100 ax-text-primary ax-font-medium dark:ax-bg-primary dark:ax-text-primary-50;
29
+ @apply ax-bg-primary-100 ax-text-primary-500 ax-font-medium dark:ax-bg-primary-500 dark:ax-text-primary-50;
30
30
  }
31
31
  &:focus,
32
32
  &.ax-state-focus {
33
33
  &:not(.ax-state-selected) {
34
- @apply ax-outline-none ax-bg-primary-50 ax-text-primary;
34
+ @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500;
35
35
  }
36
36
  }
37
37
  }
@@ -23,12 +23,12 @@
23
23
  }
24
24
 
25
25
  &::before {
26
- @apply ax-bg-primary;
26
+ @apply ax-bg-primary-500;
27
27
  animation: pulse2 2s ease-in-out infinite;
28
28
  }
29
29
 
30
30
  &::after {
31
- @apply ax-bg-primary;
31
+ @apply ax-bg-primary-500;
32
32
  animation: pulse2 2s 1s ease-in-out infinite;
33
33
  }
34
34
  }
@@ -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;
@@ -3,13 +3,15 @@
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 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-controll;
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
- @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
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");
10
12
  }
11
13
  &:focus {
12
- @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
14
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
13
15
  }
14
16
  }
15
17
  ax-label {
@@ -3,6 +3,9 @@
3
3
  .ax-select-box-selection {
4
4
  @apply ax-flex ax-justify-center ax-items-center ax-outline-none;
5
5
 
6
+ .ax-badge{
7
+ @apply dark:ax-bg-white/[0.16] dark:ax-text-light-100;
8
+ }
6
9
  .ax-dropdown-chips {
7
10
  @apply ax-flex ax-overflow-x-auto;
8
11
  }
@@ -15,13 +15,13 @@
15
15
  }
16
16
 
17
17
  &.ax-state-error {
18
- @apply ax-text-danger;
18
+ @apply ax-text-danger-500;
19
19
  .ax-checkbox-checkmark {
20
- @apply ax-border-danger;
20
+ @apply ax-border-danger-500;
21
21
  }
22
22
 
23
23
  .ax-radio-checkmark {
24
- @apply ax-border-danger;
24
+ @apply ax-border-danger-500;
25
25
  }
26
26
  }
27
27
  }
@@ -7,11 +7,7 @@
7
7
  @apply ax-bg-light-100;
8
8
  }
9
9
  &:focus {
10
- @apply ax-outline-none
11
- ax-ring-2
12
- ax-ring-primary
13
- ax-ring-opacity-100
14
- ax-border-transparent;
10
+ @apply ax-outline-none ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
15
11
  }
16
12
  .ax-side-menu-icon {
17
13
  @apply ax-pr-2 ax-h-full ax-flex ax-items-center;
@@ -28,11 +28,10 @@
28
28
  left: 0;
29
29
  right: 0;
30
30
  bottom: 0;
31
- background-color: rgb(var(--ax-color-light-400));
32
31
  -webkit-transition: 0.2s;
33
32
  transition: 0.2s;
34
33
  border-radius: 25px;
35
- @apply ax-controll;
34
+ @apply ax-bg-light-400 dark:ax-border-transparent dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
36
35
  &::before {
37
36
  content: "";
38
37
  position: absolute;
@@ -47,7 +46,7 @@
47
46
  }
48
47
  }
49
48
  input:focus~.ax-switch-slider {
50
- @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
49
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
51
50
  }
52
51
  &.ax-sm {
53
52
  width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
@@ -93,7 +92,7 @@
93
92
  }
94
93
  &.ax-state-error {
95
94
  .ax-switch-slider {
96
- @apply ax-ring-2 ax-ring-danger ax-ring-opacity-100 ax-border-transparent;
95
+ @apply ax-ring-2 ax-ring-danger-500 ax-ring-opacity-100 ax-border-transparent;
97
96
  }
98
97
  }
99
98
  &.ax-state-disabled {
@@ -123,7 +122,7 @@
123
122
  }
124
123
  }
125
124
  input:focus~.ax-switch-slider {
126
- @apply ax-ring-success;
125
+ @apply ax-ring-success-500;
127
126
  }
128
127
  }
129
128
  &.ax-secondary {
@@ -135,7 +134,7 @@
135
134
  }
136
135
  }
137
136
  input:focus~.ax-switch-slider {
138
- @apply ax-ring-secondary;
137
+ @apply ax-ring-secondary-500;
139
138
  }
140
139
  }
141
140
  &.ax-danger {
@@ -147,7 +146,7 @@
147
146
  }
148
147
  }
149
148
  input:focus~.ax-switch-slider {
150
- @apply ax-ring-danger;
149
+ @apply ax-ring-danger-500;
151
150
  }
152
151
  }
153
152
  &.ax-warning {
@@ -159,7 +158,7 @@
159
158
  }
160
159
  }
161
160
  input:focus~.ax-switch-slider {
162
- @apply ax-ring-warning;
161
+ @apply ax-ring-warning-500;
163
162
  }
164
163
  }
165
164
  &.ax-info {
@@ -171,7 +170,7 @@
171
170
  }
172
171
  }
173
172
  input:focus~.ax-switch-slider {
174
- @apply ax-ring-info;
173
+ @apply ax-ring-info-500;
175
174
  }
176
175
  }
177
176
  &.ax-light {
@@ -183,7 +182,7 @@
183
182
  }
184
183
  }
185
184
  input:focus~.ax-switch-slider {
186
- @apply ax-ring-light;
185
+ @apply ax-ring-light-500;
187
186
  }
188
187
  }
189
188
  &.ax-dark {
@@ -195,7 +194,7 @@
195
194
  }
196
195
  }
197
196
  input:focus~.ax-switch-slider {
198
- @apply ax-ring-dark;
197
+ @apply ax-ring-dark-500;
199
198
  }
200
199
  }
201
200
  }