@acorex/styles 5.0.23 → 5.0.24

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/base/index.scss +10 -9
  3. package/src/components/_alert.scss +3 -3
  4. package/src/components/_badge.scss +37 -4
  5. package/src/components/_button.scss +19 -19
  6. package/src/components/_drawer.scss +1 -1
  7. package/src/components/_dropdown.scss +29 -30
  8. package/src/components/_editor-container.scss +2 -2
  9. package/src/components/_list.scss +1 -1
  10. package/src/components/_tabs.scss +1 -1
  11. package/src/utility/_mixins.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.23",
3
+ "version": "5.0.24",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/base/index.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import "../utility/mixins";
2
2
 
3
3
  [class*=" ax-ic-"],
4
- [class^=ax-ic-] {
4
+ [class^="ax-ic-"] {
5
5
  vertical-align: middle;
6
6
  }
7
7
 
@@ -18,13 +18,14 @@ body {
18
18
  background-color: rgb(var(--ax-color-default-background));
19
19
  color: rgba(var(--ax-color-default-color));
20
20
  height: 100%;
21
- font-size: 16px
21
+ font-size: 16px;
22
22
  }
23
23
 
24
- // .ax-control {
25
- // @apply ax-border-light-300 ax-bg-white;
26
- // }
27
-
28
- // .ax-surface {
29
- // @apply ax-bg-white ax-border-light-300;
30
- // }
24
+ .ax-sm {
25
+ --ax-base-size: 6px;
26
+ font-size: 0.75rem
27
+ }
28
+ .ax-lg {
29
+ --ax-base-size: 10px;
30
+ font-size: 1.125rem
31
+ }
package/src/components/_alert.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  }
24
24
  }
25
25
  .ax-alert-content {
26
- @apply ax-block ax-text-sm;
26
+ @apply ax-block ax-text-sm ax-break-words;
27
27
 
28
28
  ul {
29
29
  @apply ax-my-2 ax-ms-5 ax-list-disc;
@@ -39,7 +39,7 @@
39
39
  .ax-alert-buttons {
40
40
  @apply ax-flex ax-mt-4;
41
41
  .ax-alert-button {
42
- @apply ax-text-base lg:ax-text-sm ax-font-semibold ax-me-4 ax-cursor-pointer;
42
+ @apply ax-text-sm ax-font-semibold ax-me-4 ax-cursor-pointer;
43
43
  }
44
44
  }
45
45
  }
@@ -48,7 +48,7 @@
48
48
  .ax-alert-suffix {
49
49
  .ax-alert-buttons {
50
50
  .ax-alert-button {
51
- @apply ax-me-0.5 ax-text-base lg:ax-text-sm ax-font-semibold ax-cursor-pointer;
51
+ @apply ax-me-0.5 ax-text-sm ax-font-semibold ax-cursor-pointer;
52
52
  i {
53
53
  @apply ax-mx-1;
54
54
  }
package/src/components/_badge.scss CHANGED
@@ -1,11 +1,44 @@
1
1
  @layer components {
2
2
  .ax-badge {
3
- @apply ax-rounded ax-py-1 ax-px-2 ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm;
3
+ @apply ax-rounded ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm ax-px-2;
4
+ min-width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px);
5
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px);
6
+
4
7
  ax-prefix {
5
- @apply ax-me-1.5
8
+ @apply ax-me-1.5;
6
9
  }
7
10
  ax-suffix {
8
- @apply ax-ms-1.5
11
+ @apply ax-ms-1.5;
12
+ }
13
+ &.ax-badge-icon {
14
+ ax-prefix,
15
+ ax-suffix {
16
+ @apply ax-m-0;
17
+ }
18
+ }
19
+ &.ax-primary-default{
20
+ @apply ax-bg-primary-100 ax-text-primary-600 dark:ax-bg-primary-300;
21
+ }
22
+ &.ax-secondary-default{
23
+ @apply ax-bg-secondary-100 ax-text-secondary-600 dark:ax-bg-secondary-300 ;
24
+ }
25
+ &.ax-success-default{
26
+ @apply ax-bg-success-100 ax-text-success-600 dark:ax-bg-success-300 ;
27
+ }
28
+ &.ax-warning-default{
29
+ @apply ax-bg-warning-100 ax-text-warning-700 dark:ax-bg-warning-300 ;
30
+ }
31
+ &.ax-danger-default{
32
+ @apply ax-bg-danger-100 ax-text-danger-600 dark:ax-bg-danger-300 ;
33
+ }
34
+ &.ax-info-default{
35
+ @apply ax-bg-info-100 ax-text-info-600 dark:ax-bg-info-300 ;
36
+ }
37
+ &.ax-light-default{
38
+ @apply ax-bg-light-200 ax-text-light-700;
39
+ }
40
+ &.ax-dark-default{
41
+ @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-300 dark:ax-text-dark-50;
9
42
  }
10
43
  }
11
- }
44
+ }
package/src/components/_button.scss CHANGED
@@ -32,25 +32,25 @@
32
32
  @apply ax-text-base;
33
33
  }
34
34
  }
35
- &.ax-sm {
36
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
37
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - var(--ax-base-size)) !important;
38
- @apply ax-text-sm;
39
- .ax-ic {
40
- @apply ax-text-sm;
41
- }
42
- }
43
- &.ax-lg {
44
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
45
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + var(--ax-base-size)) !important;
46
- @apply ax-text-lg;
47
- &.ax-button-icon {
48
- @apply ax-px-3;
49
- }
50
- .ax-ic {
51
- @apply ax-text-3xl;
52
- }
53
- }
35
+ // &.ax-sm {
36
+ // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
37
+ // line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - var(--ax-base-size)) !important;
38
+ // @apply ax-text-sm;
39
+ // .ax-ic {
40
+ // @apply ax-text-sm;
41
+ // }
42
+ // }
43
+ // &.ax-lg {
44
+ // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
45
+ // line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + var(--ax-base-size)) !important;
46
+ // @apply ax-text-lg;
47
+ // &.ax-button-icon {
48
+ // @apply ax-px-3;
49
+ // }
50
+ // .ax-ic {
51
+ // @apply ax-text-3xl;
52
+ // }
53
+ // }
54
54
  ax-loading-spinner {
55
55
  @apply ax-flex ax-pe-1;
56
56
  svg {
package/src/components/_drawer.scss CHANGED
@@ -72,7 +72,7 @@
72
72
  }
73
73
 
74
74
  .ax-drawer-content {
75
- @apply ax-flex-1;
75
+ @apply ax-flex-1 ax-overflow-auto;
76
76
  width: var(--attr-content-width);
77
77
  }
78
78
  }
package/src/components/_dropdown.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @layer components {
2
-
3
2
  ax-drop-down,
4
3
  .ax-drop-down {
5
4
  display: contents;
@@ -19,7 +18,7 @@
19
18
 
20
19
  .ax-overlay-pane {
21
20
  @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
22
- @include control-dark('surface');
21
+ @include control-dark("surface");
23
22
 
24
23
  &.ax-dropdown-list {
25
24
  @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
@@ -27,7 +26,7 @@
27
26
  ax-button-item {
28
27
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
29
28
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
30
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm ax-text-light-600 ax-cursor-pointer;
29
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm ax-text-light-600 ax-cursor-pointer ax-select-none;
31
30
 
32
31
  &.ax-divide {
33
32
  @apply ax-border-t ax-border ax-border-solid;
@@ -50,15 +49,15 @@
50
49
 
51
50
  &:hover,
52
51
  &:focus {
53
- @apply ax-bg-primary-50 ax-text-primary-600;
52
+ @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-primary-500 dark:ax-text-primary-100;
54
53
  }
55
54
 
56
55
  &:active {
57
- @apply ax-bg-primary-100 ax-text-primary-700;
56
+ @apply ax-bg-primary-100 ax-text-primary-700 dark:ax-bg-primary-600 dark:ax-text-primary-100;
58
57
  }
59
58
 
60
59
  &.ax-state-selected {
61
- @apply ax-bg-primary-200;
60
+ @apply ax-bg-primary-200 dark:ax-bg-primary-600 dark:ax-text-primary-100;
62
61
  }
63
62
  }
64
63
 
@@ -67,15 +66,15 @@
67
66
 
68
67
  &:hover,
69
68
  &:focus {
70
- @apply ax-bg-secondary-50 ax-text-secondary-600;
69
+ @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-secondary-500 dark:ax-text-secondary-100;
71
70
  }
72
71
 
73
72
  &:active {
74
- @apply ax-bg-secondary-100 ax-text-secondary-700;
73
+ @apply ax-bg-secondary-100 ax-text-secondary-700 dark:ax-bg-secondary-600 dark:ax-text-secondary-100;
75
74
  }
76
75
 
77
76
  &.ax-state-selected {
78
- @apply ax-bg-secondary-200;
77
+ @apply ax-bg-secondary-200 dark:ax-bg-secondary-600 dark:ax-text-secondary-100;
79
78
  }
80
79
  }
81
80
 
@@ -84,15 +83,15 @@
84
83
 
85
84
  &:hover,
86
85
  &:focus {
87
- @apply ax-bg-warning-50 ax-text-warning-600;
86
+ @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-warning-500 dark:ax-text-warning-100;
88
87
  }
89
88
 
90
89
  &:active {
91
- @apply ax-bg-warning-100 ax-text-warning-700;
90
+ @apply ax-bg-warning-100 ax-text-warning-700 dark:ax-bg-warning-600 dark:ax-text-warning-100;
92
91
  }
93
92
 
94
93
  &.ax-state-selected {
95
- @apply ax-bg-warning-200;
94
+ @apply ax-bg-warning-200 dark:ax-bg-warning-600 dark:ax-text-warning-100;
96
95
  }
97
96
  }
98
97
 
@@ -101,15 +100,15 @@
101
100
 
102
101
  &:hover,
103
102
  &:focus {
104
- @apply ax-bg-danger-50 ax-text-danger-600;
103
+ @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-danger-500 dark:ax-text-danger-100;
105
104
  }
106
105
 
107
106
  &:active {
108
- @apply ax-bg-danger-100 ax-text-danger-700;
107
+ @apply ax-bg-danger-100 ax-text-danger-700 dark:ax-bg-danger-600 dark:ax-text-danger-100;
109
108
  }
110
109
 
111
110
  &.ax-state-selected {
112
- @apply ax-bg-danger-200;
111
+ @apply ax-bg-danger-200 dark:ax-bg-danger-600 dark:ax-text-danger-100;
113
112
  }
114
113
  }
115
114
 
@@ -118,15 +117,15 @@
118
117
 
119
118
  &:hover,
120
119
  &:focus {
121
- @apply ax-bg-success-50 ax-text-success-600;
120
+ @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-success-500 dark:ax-text-success-100;
122
121
  }
123
122
 
124
123
  &:active {
125
- @apply ax-bg-success-100 ax-text-success-700;
124
+ @apply ax-bg-success-100 ax-text-success-700 dark:ax-bg-success-600 dark:ax-text-success-100;
126
125
  }
127
126
 
128
127
  &.ax-state-selected {
129
- @apply ax-bg-success-200;
128
+ @apply ax-bg-success-200 dark:ax-bg-success-600 dark:ax-text-success-100;
130
129
  }
131
130
  }
132
131
 
@@ -135,52 +134,52 @@
135
134
 
136
135
  &:hover,
137
136
  &:focus {
138
- @apply ax-bg-info-50 ax-text-info-600;
137
+ @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-info-500 dark:ax-text-info-100;
139
138
  }
140
139
 
141
140
  &:active {
142
- @apply ax-bg-info-100 ax-text-info-700;
141
+ @apply ax-bg-info-100 ax-text-info-700 dark:ax-bg-info-600 dark:ax-text-info-100;
143
142
  }
144
143
 
145
144
  &.ax-state-selected {
146
- @apply ax-bg-info-200;
145
+ @apply ax-bg-info-200 dark:ax-bg-info-600 dark:ax-text-info-100;
147
146
  }
148
147
  }
149
148
 
150
149
  &.ax-dark-default {
151
- @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
150
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-100;
152
151
 
153
152
  &:hover,
154
153
  &:focus {
155
- @apply ax-bg-dark-50 ax-text-dark-600;
154
+ @apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400 dark:ax-text-dark-50;
156
155
  }
157
156
 
158
157
  &:active {
159
- @apply ax-bg-dark-100 ax-text-dark-700;
158
+ @apply ax-bg-dark-100 ax-text-dark-700 dark:ax-text-dark-100;
160
159
  }
161
160
 
162
161
  &.ax-state-selected {
163
- @apply ax-bg-dark-200;
162
+ @apply ax-bg-dark-200 dark:ax-bg-dark-400 dark:ax-text-dark-100;
164
163
  }
165
164
  }
166
165
 
167
166
  &.ax-light-default {
168
- @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
167
+ @apply ax-bg-transparent ax-text-light-500 ax-border-transparent;
169
168
 
170
169
  &:hover,
171
170
  &:focus {
172
- @apply ax-bg-light-500 ax-text-light-800;
171
+ @apply ax-bg-light-50 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
173
172
  }
174
173
 
175
174
  &:active {
176
- @apply ax-bg-light-100 ax-text-light-700;
175
+ @apply ax-bg-light-100 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
177
176
  }
178
177
 
179
178
  &.ax-state-selected {
180
- @apply ax-bg-light-600;
179
+ @apply ax-bg-light-200 dark:ax-bg-light-600 dark:ax-text-light-100;
181
180
  }
182
181
  }
183
182
  }
184
183
  }
185
184
  }
186
- }
185
+ }
package/src/components/_editor-container.scss CHANGED
@@ -29,12 +29,12 @@
29
29
  }
30
30
  }
31
31
  ax-prefix {
32
- * {
32
+ *,ax-button {
33
33
  @apply ax-rounded-s;
34
34
  }
35
35
  }
36
36
  ax-suffix {
37
- * {
37
+ *,ax-button {
38
38
  @apply ax-rounded-e;
39
39
  }
40
40
  }
package/src/components/_list.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  }
5
5
  .ax-list-container {
6
6
  .ax-list-items-container {
7
- @apply ax-py-1 ax-rounded ax-shadow ax-overflow-y-auto ax-h-full ax-border ax-border-solid ax-border-light-300 dark:ax-border-transparent;
7
+ @apply ax-py-1 ax-rounded ax-overflow-y-auto ax-h-full dark:ax-border-transparent;
8
8
  &.ax-vertical {
9
9
  @apply ax-grid ax-grid-cols-1;
10
10
  &.ax-divide {
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 ax-relative;
9
+ @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm;
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
 
package/src/utility/_mixins.scss CHANGED
@@ -40,10 +40,10 @@
40
40
  @mixin control-dark($type) {
41
41
 
42
42
  @if($type == "editor"){
43
- @apply dark:ax-border-light-200/[0.05] dark:ax-bg-white/[0.03] dark:ax-backdrop-blur-3xl;
43
+ @apply dark:ax-border-white/[0.16] dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
44
44
  }
45
45
  @if($type == "surface"){
46
- @apply dark:ax-bg-default-background dark:ax-border-light-200/[0.05] dark:ax-shadow-md;
46
+ @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
47
47
 
48
48
  }
49
49