@acorex/styles 5.8.0 → 5.9.0

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 (32) hide show
  1. package/index.js +195 -0
  2. package/index.scss +3 -4
  3. package/package.json +1 -1
  4. package/src/base/index.scss +3 -1
  5. package/src/components/_action-sheet.scss +1 -1
  6. package/src/components/_alert.scss +1 -5
  7. package/src/components/_avatar.scss +1 -1
  8. package/src/components/_badge.scss +146 -26
  9. package/src/components/_breadcrumbs.scss +12 -8
  10. package/src/components/_button.scss +2 -2
  11. package/src/components/_collapse.scss +5 -11
  12. package/src/components/_color-palette.scss +4 -20
  13. package/src/components/_color-picker.scss +1 -1
  14. package/src/components/_data-table.scss +1 -1
  15. package/src/components/_decoration.scss +3 -3
  16. package/src/components/_editor-container.scss +1 -1
  17. package/src/components/_fieldset.scss +1 -1
  18. package/src/components/_input.scss +1 -1
  19. package/src/components/_menu.scss +1 -1
  20. package/src/components/_popup.scss +3 -3
  21. package/src/components/_progress.scss +9 -10
  22. package/src/components/_range-slider.scss +161 -30
  23. package/src/components/_result.scss +2 -2
  24. package/src/components/_selection-list.scss +1 -1
  25. package/src/components/_table.scss +5 -5
  26. package/src/icons/demo.html +556 -556
  27. package/src/icons/fonts/acorex-icon.svg +46 -46
  28. package/src/icons/style.css +138 -138
  29. package/src/icons/style.scss +215 -215
  30. package/src/icons/variables.scss +41 -41
  31. package/src/utility/_mixins.scss +3 -66
  32. package/src/utility/index.scss +3 -3
package/src/components/_input.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @apply ax-outline-none ax-p-0;
5
5
  font-size: inherit;
6
6
  &:focus {
7
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-md;
7
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-default;
8
8
  }
9
9
  &.ax-state-disabled {
10
10
  @include control-states("editor-disabled");
package/src/components/_menu.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  a {
21
- @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-mb-2 ax-px-2.5 ax-py-3 ax-rounded-md;
21
+ @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-mb-2 ax-px-2.5 ax-py-3 ax-rounded-default;
22
22
 
23
23
  &.active {
24
24
  @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
package/src/components/_popup.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  @layer components {
2
2
 
3
3
  .ax-popup {
4
- @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-max-h-[98vh] ax-min-h-fit ax-mx-auto;
4
+ @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-max-h-[98vh] ax-min-h-fit ax-mx-auto ax-overflow-hidden;
5
5
  @include control-states("surface");
6
6
  ax-header,
7
7
  ax-footer {
8
- @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700;
9
- @include control-states("editor");
8
+ @apply ax-bg-white ax-p-4 ax-border-light-200 dark:ax-border-light-700;
9
+ @include control-states("surface");
10
10
  }
11
11
  ax-footer
12
12
  {
package/src/components/_progress.scss CHANGED
@@ -9,8 +9,7 @@
9
9
  @apply ax-ps-2;
10
10
  }
11
11
  .ax-progress-bar-container {
12
- @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 ax-flex ax-rounded-full;
13
- @include control-states("editor");
12
+ @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 dark:ax-bg-white/10 ax-flex ax-rounded-full;
14
13
  .ax-progress-bar-rise {
15
14
  max-width: 100%;
16
15
  transition: width 1s;
@@ -20,42 +19,42 @@
20
19
 
21
20
  &.ax-primary-default {
22
21
  .ax-progress-bar-rise {
23
- @apply ax-bg-primary-500;
22
+ @apply ax-bg-primary-500 dark:ax-bg-primary-800;
24
23
  }
25
24
  }
26
25
  &.ax-secondary-default {
27
26
  .ax-progress-bar-rise {
28
- @apply ax-bg-secondary-500;
27
+ @apply ax-bg-secondary-500 dark:ax-bg-secondary-800;
29
28
  }
30
29
  }
31
30
  &.ax-success-default {
32
31
  .ax-progress-bar-rise {
33
- @apply ax-bg-success-500;
32
+ @apply ax-bg-success-500 dark:ax-bg-success-800;
34
33
  }
35
34
  }
36
35
  &.ax-warning-default {
37
36
  .ax-progress-bar-rise {
38
- @apply ax-bg-warning-500;
37
+ @apply ax-bg-warning-500 dark:ax-bg-warning-800;
39
38
  }
40
39
  }
41
40
  &.ax-danger-default {
42
41
  .ax-progress-bar-rise {
43
- @apply ax-bg-danger-500;
42
+ @apply ax-bg-danger-500 dark:ax-bg-danger-800;
44
43
  }
45
44
  }
46
45
  &.ax-info-default {
47
46
  .ax-progress-bar-rise {
48
- @apply ax-bg-info-500;
47
+ @apply ax-bg-info-500 dark:ax-bg-info-800;
49
48
  }
50
49
  }
51
50
  &.ax-light-default {
52
51
  .ax-progress-bar-rise {
53
- @apply ax-bg-light-300;
52
+ @apply ax-bg-light-300 dark:ax-border-light-500;
54
53
  }
55
54
  }
56
55
  &.ax-dark-default {
57
56
  .ax-progress-bar-rise {
58
- @apply ax-bg-dark-500 dark:ax-bg-dark-300;
57
+ @apply ax-bg-dark-500 dark:ax-bg-dark-200;
59
58
  }
60
59
  }
61
60
  }
package/src/components/_range-slider.scss CHANGED
@@ -1,72 +1,203 @@
1
1
  @layer components {
2
+ .ax-dark {
3
+ ax-range-slider {
4
+ &.ax-primary-default {
5
+ input {
6
+ background: linear-gradient(
7
+ to right,
8
+ rgb(var(--ax-color-primary-800)) 0%,
9
+ rgb(var(--ax-color-primary-800)) var(--ax-current-value),
10
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
11
+ rgba(255, 255, 255, 0.1) 100%
12
+ );
13
+ }
14
+ }
15
+ &.ax-secondary-default {
16
+ input {
17
+ background: linear-gradient(
18
+ to right,
19
+ rgb(var(--ax-color-secondary-800)) 0%,
20
+ rgb(var(--ax-color-secondary-800)) var(--ax-current-value),
21
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
22
+ rgba(255, 255, 255, 0.1) 100%
23
+ );
24
+ }
25
+ }
26
+ &.ax-success-default {
27
+ input {
28
+ background: linear-gradient(
29
+ to right,
30
+ rgb(var(--ax-color-success-800)) 0%,
31
+ rgb(var(--ax-color-success-800)) var(--ax-current-value),
32
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
33
+ rgba(255, 255, 255, 0.1) 100%
34
+ );
35
+ }
36
+ }
37
+ &.ax-warning-default {
38
+ input {
39
+ background: linear-gradient(
40
+ to right,
41
+ rgb(var(--ax-color-warning-800)) 0%,
42
+ rgb(var(--ax-color-warning-800)) var(--ax-current-value),
43
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
44
+ rgba(255, 255, 255, 0.1) 100%
45
+ );
46
+ }
47
+ }
48
+ &.ax-danger-default {
49
+ input {
50
+ background: linear-gradient(
51
+ to right,
52
+ rgb(var(--ax-color-danger-800)) 0%,
53
+ rgb(var(--ax-color-danger-800)) var(--ax-current-value),
54
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
55
+ rgba(255, 255, 255, 0.1) 100%
56
+ );
57
+ }
58
+ }
59
+ &.ax-info-default {
60
+ input {
61
+ background: linear-gradient(
62
+ to right,
63
+ rgb(var(--ax-color-info-800)) 0%,
64
+ rgb(var(--ax-color-info-800)) var(--ax-current-value),
65
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
66
+ rgba(255, 255, 255, 0.1) 100%
67
+ );
68
+ }
69
+ }
70
+ &.ax-light-default {
71
+ input {
72
+ background: linear-gradient(
73
+ to right,
74
+ rgb(var(--ax-color-light-600)) 0%,
75
+ rgb(var(--ax-color-light-600)) var(--ax-current-value),
76
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
77
+ rgba(255, 255, 255, 0.1) 100%
78
+ );
79
+ }
80
+ }
81
+ &.ax-dark-default {
82
+ input {
83
+ background: linear-gradient(
84
+ to right,
85
+ rgb(var(--ax-color-dark-200)) 0%,
86
+ rgb(var(--ax-color-dark-200)) var(--ax-current-value),
87
+ rgba(255, 255, 255, 0.1) var(--ax-current-value),
88
+ rgba(255, 255, 255, 0.1) 100%
89
+ );
90
+ }
91
+ }
92
+ }
93
+ }
2
94
  ax-range-slider {
3
95
  @apply ax-w-full;
4
- --ax-current-value:0%;
96
+ --ax-current-value: 0%;
5
97
  input {
6
- @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-100 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-light-600;
98
+ @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-200 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-white/10;
7
99
  &::-webkit-slider-thumb {
8
- @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
100
+ @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 dark:ax-border-white/[0.1] ax-rounded-full ax-cursor-pointer dark:ax-bg-light-400;
9
101
  }
10
102
  &::-moz-range-thumb {
11
- @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-rounded-full ax-cursor-pointer dark:ax-bg-light-500;
103
+ @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 dark:ax-border-white/[0.1] ax-rounded-full ax-cursor-pointer dark:ax-bg-light-400;
12
104
  }
13
-
14
105
  }
15
106
 
16
- &.ax-primary-default
17
- {
107
+ &.ax-primary-default {
18
108
  input {
19
- background: linear-gradient(to right, rgb(var(--ax-color-primary-500)) 0%, rgb(var(--ax-color-primary-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
109
+ background: linear-gradient(
110
+ to right,
111
+ rgb(var(--ax-color-primary-500)) 0%,
112
+ rgb(var(--ax-color-primary-500)) var(--ax-current-value),
113
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
114
+ rgb(var(--ax-color-light-100)) 100%
115
+ );
20
116
  }
21
117
  }
22
118
 
23
- &.ax-secondary-default
24
- {
119
+ &.ax-secondary-default {
25
120
  input {
26
- background: linear-gradient(to right, rgb(var(--ax-color-secondary-500)) 0%, rgb(var(--ax-color-secondary-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
121
+ background: linear-gradient(
122
+ to right,
123
+ rgb(var(--ax-color-secondary-500)) 0%,
124
+ rgb(var(--ax-color-secondary-500)) var(--ax-current-value),
125
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
126
+ rgb(var(--ax-color-light-100)) 100%
127
+ );
27
128
  }
28
129
  }
29
130
 
30
- &.ax-danger-default
31
- {
131
+ &.ax-danger-default {
32
132
  input {
33
- background: linear-gradient(to right, rgb(var(--ax-color-danger-500)) 0%, rgb(var(--ax-color-danger-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
133
+ background: linear-gradient(
134
+ to right,
135
+ rgb(var(--ax-color-danger-500)) 0%,
136
+ rgb(var(--ax-color-danger-500)) var(--ax-current-value),
137
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
138
+ rgb(var(--ax-color-light-100)) 100%
139
+ );
34
140
  }
35
141
  }
36
142
 
37
- &.ax-success-default
38
- {
143
+ &.ax-success-default {
39
144
  input {
40
- background: linear-gradient(to right, rgb(var(--ax-color-success-500)) 0%, rgb(var(--ax-color-success-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
145
+ background: linear-gradient(
146
+ to right,
147
+ rgb(var(--ax-color-success-500)) 0%,
148
+ rgb(var(--ax-color-success-500)) var(--ax-current-value),
149
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
150
+ rgb(var(--ax-color-light-100)) 100%
151
+ );
41
152
  }
42
153
  }
43
154
 
44
- &.ax-warning-default
45
- {
155
+ &.ax-warning-default {
46
156
  input {
47
- background: linear-gradient(to right, rgb(var(--ax-color-warning-500)) 0%, rgb(var(--ax-color-warning-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
157
+ background: linear-gradient(
158
+ to right,
159
+ rgb(var(--ax-color-warning-500)) 0%,
160
+ rgb(var(--ax-color-warning-500)) var(--ax-current-value),
161
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
162
+ rgb(var(--ax-color-light-100)) 100%
163
+ );
48
164
  }
49
165
  }
50
166
 
51
- &.ax-info-default
52
- {
167
+ &.ax-info-default {
53
168
  input {
54
- background: linear-gradient(to right, rgb(var(--ax-color-info-500)) 0%, rgb(var(--ax-color-info-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
169
+ background: linear-gradient(
170
+ to right,
171
+ rgb(var(--ax-color-info-500)) 0%,
172
+ rgb(var(--ax-color-info-500)) var(--ax-current-value),
173
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
174
+ rgb(var(--ax-color-light-100)) 100%
175
+ );
55
176
  }
56
177
  }
57
178
 
58
- &.ax-light-default
59
- {
179
+ &.ax-light-default {
60
180
  input {
61
- background: linear-gradient(to right, rgb(var(--ax-color-light-500)) 0%, rgb(var(--ax-color-light-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
181
+ background: linear-gradient(
182
+ to right,
183
+ rgb(var(--ax-color-light-500)) 0%,
184
+ rgb(var(--ax-color-light-500)) var(--ax-current-value),
185
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
186
+ rgb(var(--ax-color-light-100)) 100%
187
+ );
62
188
  }
63
189
  }
64
190
 
65
- &.ax-dark-default
66
- {
191
+ &.ax-dark-default {
67
192
  input {
68
- background: linear-gradient(to right, rgb(var(--ax-color-dark-500)) 0%, rgb(var(--ax-color-dark-500)) var(--ax-current-value),rgb(var(--ax-color-light-100)) var(--ax-current-value), rgb(var(--ax-color-light-100)) 100%);
193
+ background: linear-gradient(
194
+ to right,
195
+ rgb(var(--ax-color-dark-500)) 0%,
196
+ rgb(var(--ax-color-dark-500)) var(--ax-current-value),
197
+ rgb(var(--ax-color-light-100)) var(--ax-current-value),
198
+ rgb(var(--ax-color-light-100)) 100%
199
+ );
69
200
  }
70
201
  }
71
202
  }
72
- }
203
+ }
package/src/components/_result.scss CHANGED
@@ -7,10 +7,10 @@
7
7
  }
8
8
  .ax-result-title,
9
9
  .ax-result-description {
10
- @apply ax-mt-4 ax-text-center;
10
+ @apply ax-mt-2 ax-text-center;
11
11
  }
12
12
  .ax-result-title {
13
- @apply ax-text-2xl ax-font-semibold ax-text-light-700 dark:ax-text-light-50;
13
+ @apply ax-text-lg ax-font-semibold ax-text-light-700 dark:ax-text-light-50;
14
14
  }
15
15
  .ax-result-description {
16
16
  @apply ax-text-sm ax-text-light-500 dark:ax-text-light-100;
package/src/components/_selection-list.scss CHANGED
@@ -43,7 +43,7 @@
43
43
  .ax-selection-list {
44
44
  &.ax-vertical,&.ax-horizontal {
45
45
  & > div {
46
- @apply ax-p-4 ax-border ax-border-light-300 dark:ax-border-white/[0.09] ax-rounded-md ax-shadow-sm;
46
+ @apply ax-p-4 ax-border ax-border-light-300 dark:ax-border-white/[0.09] ax-rounded-default ax-shadow-sm;
47
47
  &.ax-state-selected {
48
48
  @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500 ax-shadow-primary-500;
49
49
  }
package/src/components/_table.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  @layer components {
2
2
  .ax-table {
3
- @apply ax-w-full ax-rounded-md ax-border-collapse ax-border ax-border-light-200 dark:ax-border-white/[0.06] ;
3
+ @apply ax-w-full ax-rounded-default ax-border-collapse ax-border ax-border-light-200 dark:ax-border-white/10 ax-overflow-hidden;
4
4
  td {
5
- @apply ax-border-b ax-border-light-200 dark:ax-border-white/[0.06] ax-px-6 ax-py-4 ax-text-sm;
5
+ @apply ax-border-b ax-border-light-200 dark:ax-border-white/10 ax-px-6 ax-py-4 ax-text-sm;
6
6
  }
7
7
  thead {
8
- @apply ax-bg-light-100 dark:ax-bg-light-700 ax-shadow-sm ax-border-b ax-border-light-200 dark:ax-border-white/[0.06];
8
+ @apply ax-bg-light-100 dark:ax-bg-white/10 ax-shadow-sm ax-border-b ax-border-light-200 dark:ax-border-white/10;
9
9
  th {
10
10
  @apply ax-text-sm ax-font-bold ax-text-start ax-py-4 ax-px-6;
11
11
  }
@@ -44,7 +44,7 @@
44
44
 
45
45
  td,
46
46
  th {
47
- @apply ax-border ax-border-light-200 dark:ax-border-white/[0.06];
47
+ @apply ax-border ax-border-light-200 dark:ax-border-white/10;
48
48
  &:first-child {
49
49
  @apply ax-border-s-0;
50
50
  }
@@ -69,7 +69,7 @@
69
69
  }
70
70
  }
71
71
  tr {
72
- @apply ax-border ax-border-light-200 dark:ax-border-white/[0.06];
72
+ @apply ax-border ax-border-light-200 dark:ax-border-white/10;
73
73
  }
74
74
  tr,
75
75
  tbody {