@acorex/styles 5.0.23 → 5.0.27

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 (17) hide show
  1. package/package.json +1 -1
  2. package/src/base/index.scss +22 -9
  3. package/src/components/_alert.scss +20 -13
  4. package/src/components/_badge.scss +37 -4
  5. package/src/components/_button.scss +19 -19
  6. package/src/components/_checkbox.scss +7 -6
  7. package/src/components/_drawer.scss +1 -1
  8. package/src/components/_dropdown.scss +29 -30
  9. package/src/components/_editor-container.scss +21 -19
  10. package/src/components/_input.scss +2 -1
  11. package/src/components/_list.scss +1 -1
  12. package/src/components/_popup.scss +16 -16
  13. package/src/components/_radio.scss +1 -1
  14. package/src/components/_tabs.scss +1 -1
  15. package/src/utility/_mixins.scss +2 -2
  16. package/src/utility/index.scss +16 -0
  17. package/dark.scss +0 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.23",
3
+ "version": "5.0.27",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/base/index.scss CHANGED
@@ -1,13 +1,13 @@
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
 
8
8
  :root {
9
9
  --ax-base-size: 8px;
10
- --ax-base-ratio: 5;
10
+ --ax-base-ratio: 6;
11
11
  --ax-color-default-background: 255, 255, 255;
12
12
  --ax-color-default-color: 107, 114, 128;
13
13
  @include colors($theme-colors);
@@ -18,13 +18,26 @@ 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
24
 
28
- // .ax-surface {
29
- // @apply ax-bg-white ax-border-light-300;
30
- // }
25
+ html.ax-dark,
26
+ html.ax-dark * {
27
+ --tw-ring-offset-color: #151b24;
28
+ --ax-color-default-background: 21 27 36;
29
+ --ax-color-default-color: 255 255 255;
30
+ --ax-color-border: 55 65 81;
31
+ --ax-color-placeholder: 161 161 161;
32
+ .ax-skeleton {
33
+ &.ax-skeleton-animate {
34
+ &::before {
35
+ content: "";
36
+ background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
37
+ }
38
+ }
39
+ }
40
+ .cdk-overlay-dark-backdrop {
41
+ background: rgba(0, 0, 0, 0.5) !important;
42
+ }
43
+ }
package/src/components/_alert.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ax-alert {
3
- @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-baseline ax-rounded;
3
+ @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-center ax-rounded ax-border;
4
4
  transition: visibility 0s, opacity 0.5s ease-in-out;
5
5
  &.ax-state-hidden {
6
6
  visibility: hidden;
@@ -11,7 +11,7 @@
11
11
  opacity: 1;
12
12
  }
13
13
  .ax-alert-icon {
14
- @apply ax-text-xl ax-align-text-bottom;
14
+ @apply ax-text-xl ax-self-baseline;
15
15
 
16
16
  }
17
17
  .ax-alert-body {
@@ -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,16 +39,23 @@
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
  }
46
46
 
47
+ }
48
+ .ax-alert-prefix {
49
+ .ax-alert-buttons{
50
+ @apply ax-flex;
51
+ }
52
+
47
53
  }
48
54
  .ax-alert-suffix {
49
55
  .ax-alert-buttons {
56
+ @apply ax-flex;
50
57
  .ax-alert-button {
51
- @apply ax-me-0.5 ax-text-base lg:ax-text-sm ax-font-semibold ax-cursor-pointer;
58
+ @apply ax-me-0.5 ax-text-sm ax-font-semibold ax-cursor-pointer;
52
59
  i {
53
60
  @apply ax-mx-1;
54
61
  }
@@ -56,7 +63,7 @@
56
63
  }
57
64
  }
58
65
  &.ax-primary-default {
59
- @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-50;
66
+ @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-600 dark:ax-text-primary-50 ax-border-primary-500/10;
60
67
  .ax-alert-title {
61
68
  @apply ax-text-primary-700 dark:ax-text-primary-100;
62
69
  }
@@ -67,7 +74,7 @@
67
74
  }
68
75
  }
69
76
  &.ax-secondary-default {
70
- @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-50;
77
+ @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-600 dark:ax-text-secondary-50 ax-border-secondary-500/10;
71
78
  .ax-alert-title {
72
79
  @apply ax-text-secondary-700 dark:ax-text-secondary-100;
73
80
  }
@@ -78,7 +85,7 @@
78
85
  }
79
86
  }
80
87
  &.ax-success-default {
81
- @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-50;
88
+ @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-600 dark:ax-text-success-50 ax-border-success-500/10;
82
89
  .ax-alert-title {
83
90
  @apply ax-text-success-700 dark:ax-text-success-100;
84
91
  }
@@ -89,7 +96,7 @@
89
96
  }
90
97
  }
91
98
  &.ax-warning-default {
92
- @apply ax-bg-warning-50 ax-text-warning-500 dark:ax-bg-warning-600 dark:ax-text-white;
99
+ @apply ax-bg-warning-50 ax-text-warning-500 dark:ax-bg-warning-600 dark:ax-text-white ax-border-warning-500/10;
93
100
  .ax-alert-title {
94
101
  @apply ax-text-warning-700 dark:ax-text-warning-100;
95
102
  }
@@ -100,7 +107,7 @@
100
107
  }
101
108
  }
102
109
  &.ax-danger-default {
103
- @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-50;
110
+ @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-600 dark:ax-text-danger-50 ax-border-danger-500/10;
104
111
  .ax-alert-title {
105
112
  @apply ax-text-danger-700 dark:ax-text-danger-100;
106
113
  }
@@ -111,7 +118,7 @@
111
118
  }
112
119
  }
113
120
  &.ax-info-default {
114
- @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-50;
121
+ @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-600 dark:ax-text-info-50 ax-border-info-500/10;
115
122
  .ax-alert-title {
116
123
  @apply ax-text-info-700 dark:ax-text-info-100;
117
124
  }
@@ -122,7 +129,7 @@
122
129
  }
123
130
  }
124
131
  &.ax-light-default {
125
- @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50;
132
+ @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50 ax-border-light-500/10;
126
133
  .ax-alert-title {
127
134
  @apply ax-text-light-fore dark:ax-text-light-100;
128
135
  }
@@ -133,7 +140,7 @@
133
140
  }
134
141
  }
135
142
  &.ax-dark-default {
136
- @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-400 dark:ax-text-dark-50;
143
+ @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-400 dark:ax-text-dark-50 ax-border-dark-500/10;
137
144
  .ax-alert-title {
138
145
  @apply ax-text-dark-fore dark:ax-text-dark-100;
139
146
  }
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)) - 15px);
5
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
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/_checkbox.scss CHANGED
@@ -1,18 +1,19 @@
1
1
  @layer components {
2
- ax-check-box {
2
+ ax-check-box,
3
+ .ax-check-box {
3
4
  @apply ax-justify-start ax-w-max ax-flex;
4
-
5
+
5
6
  .ax-wrapper {
6
7
  &.ax-state-disabled {
7
8
  @apply ax-cursor-not-allowed ax-opacity-80;
8
- input[type=checkbox] {
9
+ input[type="checkbox"] {
9
10
  @apply ax-cursor-not-allowed;
10
11
  }
11
12
  }
12
13
  }
13
- input[type=checkbox] {
14
+ input[type="checkbox"] {
14
15
  @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');
16
+ @include control-dark("editor");
16
17
  &:checked,
17
18
  &:indeterminate {
18
19
  @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
@@ -34,4 +35,4 @@
34
35
  }
35
36
  }
36
37
  }
37
- }
38
+ }
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
@@ -3,7 +3,9 @@
3
3
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
4
4
  @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
5
5
  @include control-dark('editor');
6
-
6
+ @screen md {
7
+ @apply ax-text-sm;
8
+ }
7
9
  &:focus-within {
8
10
  @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
9
11
  }
@@ -20,21 +22,21 @@
20
22
  .ax-input {
21
23
  line-height: 4 !important;
22
24
  min-width: 1%;
23
- @apply ax-text-base ax-flex-1 ax-bg-transparent ax-border-none ax-px-2;
24
- @screen md {
25
- @apply ax-text-sm;
26
- }
25
+ foont-size:inherit;
26
+
27
+ @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5;
28
+
27
29
  &:focus {
28
30
  box-shadow: none;
29
31
  }
30
32
  }
31
33
  ax-prefix {
32
- * {
34
+ *,ax-button {
33
35
  @apply ax-rounded-s;
34
36
  }
35
37
  }
36
38
  ax-suffix {
37
- * {
39
+ *,ax-button {
38
40
  @apply ax-rounded-e;
39
41
  }
40
42
  }
@@ -75,17 +77,17 @@
75
77
  @apply ax-ring-0 ax-ring-transparent;
76
78
  }
77
79
  }
78
- &.ax-sm {
79
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
80
- .ax-input {
81
- @apply ax-text-xs;
82
- }
83
- }
84
- &.ax-lg {
85
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
86
- .ax-input {
87
- @apply ax-text-lg;
88
- }
89
- }
80
+ // &.ax-sm {
81
+ // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
82
+ // .ax-input {
83
+ // @apply ax-text-xs;
84
+ // }
85
+ // }
86
+ // &.ax-lg {
87
+ // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
88
+ // .ax-input {
89
+ // @apply ax-text-lg;
90
+ // }
91
+ // }
90
92
  }
91
93
  }
package/src/components/_input.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @layer components {
2
2
  .ax-input {
3
- @apply ax-outline-none ax-text-base ax-p-0;
3
+ @apply ax-outline-none ax-p-0;
4
+ foont-size:inherit;
4
5
  line-height: 20px;
5
6
  &:focus {
6
7
  @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
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/_popup.scss CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
  }
47
47
 
48
- &.ax-full {
48
+ &.ax-popup-full {
49
49
  @apply ax-w-screen ax-h-screen;
50
50
  }
51
51
 
@@ -54,66 +54,66 @@
54
54
  }
55
55
 
56
56
  @media all and (min-width: 1280px) {
57
- &.ax-sm {
57
+ &.ax-popup-sm {
58
58
  width: 420px !important;
59
59
  }
60
60
 
61
- &.ax-md {
61
+ &.ax-popup-md {
62
62
  width: 680px !important;
63
63
  }
64
64
 
65
- &.ax-lg {
65
+ &.ax-popup-lg {
66
66
  width: 1024px !important;
67
67
  }
68
68
  }
69
69
 
70
70
  @media all and (min-width: 1024px) and (max-width: 1279px) {
71
- &.ax-sm {
71
+ &.ax-popup-sm {
72
72
  width: 100vw;
73
73
  max-height: 100vh;
74
74
  }
75
75
 
76
- &.ax-md {
76
+ &.ax-popup-md {
77
77
  width: 500px !important;
78
78
  }
79
79
 
80
- &.ax-lg {
80
+ &.ax-popup-lg {
81
81
  width: 900px !important;
82
82
  }
83
83
  }
84
84
 
85
85
  @media all and (min-width: 768px) and (max-width: 1023px) {
86
- &.ax-sm {
86
+ &.ax-popup-sm {
87
87
  width: 100vw;
88
88
  max-height: 100vh;
89
89
  }
90
90
 
91
- &.ax-md {
91
+ &.ax-popup-md {
92
92
  width: 500px !important;
93
93
  }
94
94
 
95
- &.ax-lg {
95
+ &.ax-popup-lg {
96
96
  width: 700px !important;
97
97
  }
98
98
  }
99
99
 
100
100
  @media all and (min-width: 425px) and (max-width: 767px) {
101
- &.ax-sm {
101
+ &.ax-popup-sm {
102
102
  width: 100vw;
103
103
  max-height: 100vh;
104
104
  }
105
105
 
106
- &.ax-md,
107
- &.ax-lg {
106
+ &.ax-popup-md,
107
+ &.ax-popup-lg {
108
108
  width: 460px !important;
109
109
  }
110
110
  }
111
111
 
112
112
  @media all and (min-width: 0px) and (max-width: 424px) {
113
113
 
114
- &.ax-sm,
115
- &.ax-md,
116
- &.ax-lg {
114
+ &.ax-popup-sm,
115
+ &.ax-popup-md,
116
+ &.ax-popup-lg {
117
117
  width: 100vw;
118
118
  max-height: 100vh;
119
119
  }
package/src/components/_radio.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- ax-radio {
2
+ ax-radio,.ax-radio {
3
3
  @apply ax-text-sm ax-font-medium ax-text-light-700;
4
4
 
5
5
  .ax-radio {
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
 
package/src/utility/index.scss CHANGED
@@ -0,0 +1,16 @@
1
+ @layer utilities {
2
+ .ax-sm {
3
+ --ax-base-size: 6px;
4
+ font-size: 0.75rem;
5
+ *{
6
+ font-size: 0.75rem;
7
+ }
8
+ }
9
+ .ax-lg {
10
+ --ax-base-size: 10px;
11
+ font-size: 1.125rem;
12
+ * {
13
+ font-size: 1.125rem;
14
+ }
15
+ }
16
+ }
package/dark.scss DELETED
@@ -1,19 +0,0 @@
1
- html.ax-dark,
2
- html.ax-dark * {
3
- --tw-ring-offset-color: #151b24;
4
- --ax-color-default-background: 21 27 36;
5
- --ax-color-default-color: 255 255 255;
6
- --ax-color-border: 55 65 81;
7
- --ax-color-placeholder: 161 161 161;
8
- .ax-skeleton {
9
- &.ax-skeleton-animate {
10
- &::before {
11
- content: "";
12
- background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
13
- }
14
- }
15
- }
16
- .cdk-overlay-dark-backdrop {
17
- background: rgba(0, 0, 0, 0.5) !important;
18
- }
19
- }