@acorex/styles 5.0.22 → 5.0.26

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 (18) hide show
  1. package/package.json +1 -1
  2. package/src/base/index.scss +21 -8
  3. package/src/components/_alert.scss +27 -20
  4. package/src/components/_badge.scss +37 -4
  5. package/src/components/_button.scss +19 -19
  6. package/src/components/_checkbox.scss +8 -6
  7. package/src/components/_dialog.scss +2 -1
  8. package/src/components/_drawer.scss +1 -1
  9. package/src/components/_dropdown.scss +30 -30
  10. package/src/components/_editor-container.scss +5 -3
  11. package/src/components/_list.scss +1 -1
  12. package/src/components/_popup.scss +18 -17
  13. package/src/components/_radio.scss +4 -2
  14. package/src/components/_tabs.scss +77 -61
  15. package/src/components/_toast.scss +2 -2
  16. package/src/utility/_mixins.scss +16 -1
  17. package/src/utility/index.scss +11 -0
  18. package/dark.scss +0 -49
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.22",
3
+ "version": "5.0.26",
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;
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
+ }
30
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,84 +63,84 @@
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
  }
63
70
  .ax-alert-button {
64
71
  &:hover {
65
- @apply ax-text-primary-800;
72
+ @apply ax-text-primary-900;
66
73
  }
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
  }
74
81
  .ax-alert-button {
75
82
  &:hover {
76
- @apply ax-text-secondary-800;
83
+ @apply ax-text-secondary-900;
77
84
  }
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
  }
85
92
  .ax-alert-button {
86
93
  &:hover {
87
- @apply ax-text-success-800;
94
+ @apply ax-text-success-900;
88
95
  }
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
  }
96
103
  .ax-alert-button {
97
104
  &:hover {
98
- @apply ax-text-warning-800;
105
+ @apply ax-text-warning-900;
99
106
  }
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
  }
107
114
  .ax-alert-button {
108
115
  &:hover {
109
- @apply ax-text-danger-800;
116
+ @apply ax-text-danger-900;
110
117
  }
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
  }
118
125
  .ax-alert-button {
119
126
  &:hover {
120
- @apply ax-text-info-800;
127
+ @apply ax-text-info-900;
121
128
  }
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
  }
129
136
  .ax-alert-button {
130
137
  &:hover {
131
- @apply ax-text-light-800;
138
+ @apply ax-text-light-900;
132
139
  }
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)) - 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/_checkbox.scss CHANGED
@@ -1,17 +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
- @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
+ input[type="checkbox"] {
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;
16
+ @include control-dark("editor");
15
17
  &:checked,
16
18
  &:indeterminate {
17
19
  @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
@@ -33,4 +35,4 @@
33
35
  }
34
36
  }
35
37
  }
36
- }
38
+ }
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/_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;
@@ -18,7 +17,8 @@
18
17
  }
19
18
 
20
19
  .ax-overlay-pane {
21
- @apply ax-bg-white ax-control;
20
+ @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
21
+ @include control-dark("surface");
22
22
 
23
23
  &.ax-dropdown-list {
24
24
  @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
@@ -26,7 +26,7 @@
26
26
  ax-button-item {
27
27
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
28
28
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
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;
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;
30
30
 
31
31
  &.ax-divide {
32
32
  @apply ax-border-t ax-border ax-border-solid;
@@ -49,15 +49,15 @@
49
49
 
50
50
  &:hover,
51
51
  &:focus {
52
- @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;
53
53
  }
54
54
 
55
55
  &:active {
56
- @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;
57
57
  }
58
58
 
59
59
  &.ax-state-selected {
60
- @apply ax-bg-primary-200;
60
+ @apply ax-bg-primary-200 dark:ax-bg-primary-600 dark:ax-text-primary-100;
61
61
  }
62
62
  }
63
63
 
@@ -66,15 +66,15 @@
66
66
 
67
67
  &:hover,
68
68
  &:focus {
69
- @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;
70
70
  }
71
71
 
72
72
  &:active {
73
- @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;
74
74
  }
75
75
 
76
76
  &.ax-state-selected {
77
- @apply ax-bg-secondary-200;
77
+ @apply ax-bg-secondary-200 dark:ax-bg-secondary-600 dark:ax-text-secondary-100;
78
78
  }
79
79
  }
80
80
 
@@ -83,15 +83,15 @@
83
83
 
84
84
  &:hover,
85
85
  &:focus {
86
- @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;
87
87
  }
88
88
 
89
89
  &:active {
90
- @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;
91
91
  }
92
92
 
93
93
  &.ax-state-selected {
94
- @apply ax-bg-warning-200;
94
+ @apply ax-bg-warning-200 dark:ax-bg-warning-600 dark:ax-text-warning-100;
95
95
  }
96
96
  }
97
97
 
@@ -100,15 +100,15 @@
100
100
 
101
101
  &:hover,
102
102
  &:focus {
103
- @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;
104
104
  }
105
105
 
106
106
  &:active {
107
- @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;
108
108
  }
109
109
 
110
110
  &.ax-state-selected {
111
- @apply ax-bg-danger-200;
111
+ @apply ax-bg-danger-200 dark:ax-bg-danger-600 dark:ax-text-danger-100;
112
112
  }
113
113
  }
114
114
 
@@ -117,15 +117,15 @@
117
117
 
118
118
  &:hover,
119
119
  &:focus {
120
- @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;
121
121
  }
122
122
 
123
123
  &:active {
124
- @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;
125
125
  }
126
126
 
127
127
  &.ax-state-selected {
128
- @apply ax-bg-success-200;
128
+ @apply ax-bg-success-200 dark:ax-bg-success-600 dark:ax-text-success-100;
129
129
  }
130
130
  }
131
131
 
@@ -134,52 +134,52 @@
134
134
 
135
135
  &:hover,
136
136
  &:focus {
137
- @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;
138
138
  }
139
139
 
140
140
  &:active {
141
- @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;
142
142
  }
143
143
 
144
144
  &.ax-state-selected {
145
- @apply ax-bg-info-200;
145
+ @apply ax-bg-info-200 dark:ax-bg-info-600 dark:ax-text-info-100;
146
146
  }
147
147
  }
148
148
 
149
149
  &.ax-dark-default {
150
- @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;
151
151
 
152
152
  &:hover,
153
153
  &:focus {
154
- @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;
155
155
  }
156
156
 
157
157
  &:active {
158
- @apply ax-bg-dark-100 ax-text-dark-700;
158
+ @apply ax-bg-dark-100 ax-text-dark-700 dark:ax-text-dark-100;
159
159
  }
160
160
 
161
161
  &.ax-state-selected {
162
- @apply ax-bg-dark-200;
162
+ @apply ax-bg-dark-200 dark:ax-bg-dark-400 dark:ax-text-dark-100;
163
163
  }
164
164
  }
165
165
 
166
166
  &.ax-light-default {
167
- @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
167
+ @apply ax-bg-transparent ax-text-light-500 ax-border-transparent;
168
168
 
169
169
  &:hover,
170
170
  &:focus {
171
- @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;
172
172
  }
173
173
 
174
174
  &:active {
175
- @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;
176
176
  }
177
177
 
178
178
  &.ax-state-selected {
179
- @apply ax-bg-light-600;
179
+ @apply ax-bg-light-200 dark:ax-bg-light-600 dark:ax-text-light-100;
180
180
  }
181
181
  }
182
182
  }
183
183
  }
184
184
  }
185
- }
185
+ }
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
  }
@@ -27,12 +29,12 @@
27
29
  }
28
30
  }
29
31
  ax-prefix {
30
- * {
32
+ *,ax-button {
31
33
  @apply ax-rounded-s;
32
34
  }
33
35
  }
34
36
  ax-suffix {
35
- * {
37
+ *,ax-button {
36
38
  @apply ax-rounded-e;
37
39
  }
38
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/_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;
@@ -44,7 +45,7 @@
44
45
  }
45
46
  }
46
47
 
47
- &.ax-full {
48
+ &.ax-popup-full {
48
49
  @apply ax-w-screen ax-h-screen;
49
50
  }
50
51
 
@@ -53,66 +54,66 @@
53
54
  }
54
55
 
55
56
  @media all and (min-width: 1280px) {
56
- &.ax-sm {
57
+ &.ax-popup-sm {
57
58
  width: 420px !important;
58
59
  }
59
60
 
60
- &.ax-md {
61
+ &.ax-popup-md {
61
62
  width: 680px !important;
62
63
  }
63
64
 
64
- &.ax-lg {
65
+ &.ax-popup-lg {
65
66
  width: 1024px !important;
66
67
  }
67
68
  }
68
69
 
69
70
  @media all and (min-width: 1024px) and (max-width: 1279px) {
70
- &.ax-sm {
71
+ &.ax-popup-sm {
71
72
  width: 100vw;
72
73
  max-height: 100vh;
73
74
  }
74
75
 
75
- &.ax-md {
76
+ &.ax-popup-md {
76
77
  width: 500px !important;
77
78
  }
78
79
 
79
- &.ax-lg {
80
+ &.ax-popup-lg {
80
81
  width: 900px !important;
81
82
  }
82
83
  }
83
84
 
84
85
  @media all and (min-width: 768px) and (max-width: 1023px) {
85
- &.ax-sm {
86
+ &.ax-popup-sm {
86
87
  width: 100vw;
87
88
  max-height: 100vh;
88
89
  }
89
90
 
90
- &.ax-md {
91
+ &.ax-popup-md {
91
92
  width: 500px !important;
92
93
  }
93
94
 
94
- &.ax-lg {
95
+ &.ax-popup-lg {
95
96
  width: 700px !important;
96
97
  }
97
98
  }
98
99
 
99
100
  @media all and (min-width: 425px) and (max-width: 767px) {
100
- &.ax-sm {
101
+ &.ax-popup-sm {
101
102
  width: 100vw;
102
103
  max-height: 100vh;
103
104
  }
104
105
 
105
- &.ax-md,
106
- &.ax-lg {
106
+ &.ax-popup-md,
107
+ &.ax-popup-lg {
107
108
  width: 460px !important;
108
109
  }
109
110
  }
110
111
 
111
112
  @media all and (min-width: 0px) and (max-width: 424px) {
112
113
 
113
- &.ax-sm,
114
- &.ax-md,
115
- &.ax-lg {
114
+ &.ax-popup-sm,
115
+ &.ax-popup-md,
116
+ &.ax-popup-lg {
116
117
  width: 100vw;
117
118
  max-height: 100vh;
118
119
  }
package/src/components/_radio.scss CHANGED
@@ -1,9 +1,11 @@
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 {
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 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
 
@@ -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-white/[0.16] dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
44
+ }
45
+ @if($type == "surface"){
46
+ @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
47
+
48
+ }
49
+
50
+ }
51
+
52
+ // @include control-dark('editor');
53
+ // @include control-dark('surface');
package/src/utility/index.scss CHANGED
@@ -0,0 +1,11 @@
1
+ @layer utilities {
2
+ .ax-sm {
3
+ --ax-base-size: 6px;
4
+ font-size: 0.75rem
5
+ }
6
+ .ax-lg {
7
+ --ax-base-size: 10px;
8
+ font-size: 1.125rem
9
+ }
10
+
11
+ }
package/dark.scss DELETED
@@ -1,49 +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
-
9
- .ax-skeleton {
10
- &.ax-skeleton-animate {
11
- &::before {
12
- content: "";
13
- background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
14
- }
15
- }
16
- }
17
-
18
- .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
- }
48
- }
49
- }