@acorex/styles 7.11.6 → 7.12.1

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 (33) hide show
  1. package/index.css +159 -933
  2. package/index.min.css +1 -1
  3. package/index.scss +0 -1
  4. package/package.json +2 -2
  5. package/src/base/index.scss +0 -2
  6. package/src/icons/demo-files/demo.css +27 -19
  7. package/src/icons/demo-files/demo.js +23 -24
  8. package/src/icons/selection.json +1289 -1
  9. package/src/icons/style.css +78 -77
  10. package/src/icons/style.scss +79 -79
  11. package/src/icons/variables.scss +77 -78
  12. package/src/mixins/_look.scss +15 -61
  13. package/src/mixins/_media.scss +20 -20
  14. package/src/mixins/_util.scss +0 -15
  15. package/src/shared/_actionsheet.scss +1 -38
  16. package/src/shared/_check-box.scss +7 -21
  17. package/src/shared/_decoration.scss +14 -31
  18. package/src/shared/_drop-down.scss +10 -37
  19. package/src/shared/_editor-container.scss +32 -76
  20. package/src/shared/_general-button.scss +31 -41
  21. package/src/shared/_inputs.scss +8 -10
  22. package/src/shared/_list.scss +29 -80
  23. package/src/shared/_radio.scss +8 -37
  24. package/src/shared/_table.scss +20 -47
  25. package/src/shared/_utils.scss +9 -49
  26. package/src/themes/default.css +1 -1
  27. package/src/themes/default.scss +107 -86
  28. package/src/utility/index.scss +0 -36
  29. package/src/variables/index.scss +2 -2
  30. package/tailwind-base.js +76 -154
  31. package/src/animations/index.scss +0 -88
  32. package/src/base/_normalize.scss +0 -438
  33. package/src/base/_theme.scss +0 -0
package/src/shared/_general-button.scss CHANGED
@@ -1,66 +1,56 @@
1
1
  .ax-general-button {
2
- display: inline-flex;
3
- align-items: center;
4
- justify-content: center;
5
- padding: 0 1rem;
6
- height: var(--ax-size-default);
7
- font-size: 0.875rem;
8
- cursor: pointer;
9
- transition: background-color 0.3s;
10
- color: rgba(var(--ax-color-text-default), 0.6);
11
- border-radius: var(--ax-rounded-border-default);
12
- &:is(&:hover):not(&:disabled, .ax-state-disabled) {
13
- color: rgba(var(--ax-color-primary-500));
2
+ @apply ax-inline-flex ax-h-default ax-cursor-pointer ax-items-center ax-justify-center ax-rounded-default ax-px-4 ax-text-sm ax-text-default/75;
3
+ &:hover {
4
+ &:not(&:disabled, .ax-state-disabled) {
5
+ @apply ax-text-primary-500;
6
+ }
14
7
  }
15
8
 
16
- &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
17
- color: rgba(var(--ax-color-primary-700));
18
- // outline-color: transparent;
9
+ &:focus,
10
+ &:focus-visible {
11
+ &:not(&:disabled, .ax-state-disabled) {
12
+ @apply ax-text-primary-700;
13
+ }
19
14
  }
20
15
 
21
- &:is(&:active):not(&:disabled, .ax-state-disabled) {
22
- background-color: transparent;
16
+ &:active {
17
+ &:not(&:disabled, .ax-state-disabled) {
18
+ @apply ax-text-primary-300;
19
+ }
23
20
  }
24
21
 
25
22
  &.ax-button-icon {
26
- padding: 0 0.5rem;
27
- font-size: 1.25rem;
28
- // min-width: var(--ax-size-default);
29
- // width: var(--ax-size-default);
30
- // min-height: 100%;
23
+ @apply ax-px-2 ax-text-lg;
31
24
  > button {
32
- display: flex;
25
+ @apply ax-flex;
33
26
  }
34
27
  ax-icon {
35
- font-size: 1.25rem;
28
+ @apply ax-text-lg;
36
29
  }
37
30
  }
38
31
  &.ax-button-rounded {
39
- border-radius: var(--ax-rounded-border-default);
32
+ @apply ax-rounded-default;
40
33
  }
41
34
  &:disabled,
42
35
  &.ax-state-disabled {
43
- opacity: 0.5;
44
- cursor: not-allowed;
36
+ @apply ax-cursor-not-allowed ax-opacity-50;
45
37
  }
46
38
  }
47
39
  .ax-clear-button {
48
- font-size: 1rem;
49
- line-height: 1;
50
- color: rgba(var(--ax-color-text-default), 0.6);
51
- height: var(--ax-size-default);
52
- display: inline-flex;
53
- align-items: center;
54
- justify-content: center;
55
- padding: 0 0.5rem;
40
+ @apply ax-inline-flex ax-h-default ax-items-center ax-justify-center ax-px-3 ax-text-base ax-leading-none ax-text-default/75;
41
+
56
42
  > button {
57
- display: flex;
43
+ @apply ax-flex;
58
44
  }
59
- &:is(&:hover):not(&:disabled, .ax-state-disabled) {
60
- color: rgba(var(--ax-color-text-default), 0.75);
45
+ &:hover {
46
+ &:not(&:disabled, .ax-state-disabled) {
47
+ @apply ax-text-default/50;
48
+ }
61
49
  }
62
- &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
63
- color: rgba(var(--ax-color-text-default));
64
- // outline-color: transparent;
50
+ &:focus,
51
+ &:focus-visible {
52
+ &:not(&:disabled, .ax-state-disabled) {
53
+ @apply ax-text-default;
54
+ }
65
55
  }
66
56
  }
package/src/shared/_inputs.scss CHANGED
@@ -1,12 +1,10 @@
1
1
  .ax-input {
2
- outline: none;
3
- padding: 0;
4
- font-size: inherit;
5
- &:focus {
6
- outline-color: transparent;
7
- }
8
- &.ax-state-disabled {
9
- cursor: not-allowed;
10
- opacity: 0.5;
11
- }
2
+ font-size: inherit;
3
+ @apply ax-p-0 ax-outline-0;
4
+ &:focus {
5
+ @apply ax-outline-transparent;
6
+ }
7
+ &.ax-state-disabled {
8
+ @apply ax-cursor-not-allowed ax-opacity-50;
9
+ }
12
10
  }
package/src/shared/_list.scss CHANGED
@@ -2,131 +2,83 @@
2
2
  @include darkMode() {
3
3
  .ax-list-item {
4
4
  &.ax-state-selected {
5
- background-color: rgba(var(--ax-color-primary-800)) !important;
6
- color: rgba(var(--ax-color-primary-fore)) !important;
5
+ @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
7
6
  .ax-selected-icon {
8
- color: rgba(var(--ax-color-primary-fore));
7
+ @apply ax-text-primary-fore;
9
8
  }
10
9
  }
11
10
  }
12
11
  }
13
12
  .ax-list {
14
- display: flex;
15
- flex-direction: column;
16
- overflow: hidden;
17
- font-size: 0.875rem;
18
- background-color: rgba(var(--ax-color-surface));
19
- height: 100%;
20
- @include media('desktop') {
21
- max-height: 320px;
22
- }
13
+ @apply ax-flex ax-h-full ax-flex-col ax-overflow-hidden ax-bg-surface ax-text-sm md:ax-max-h-80;
23
14
 
24
15
  ax-header,
25
16
  ax-footer {
26
- display: flex;
27
- justify-content: space-between;
28
- align-items: center;
29
- background-color: rgba(var(--ax-color-surface));
30
- border-color: rgba(var(--ax-color-border-default));
17
+ @apply ax-flex ax-items-center ax-justify-between ax-border-default ax-bg-surface;
31
18
  }
32
19
  ax-header {
33
- padding: 1rem;
34
- font-size: 1.125rem;
35
- font-weight: 500;
36
- border-bottom: 1px solid;
37
- border-color: rgba(var(--ax-color-border-default));
20
+ @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
21
+
38
22
  ax-prefix,
39
23
  ax-suffix {
40
- display: flex;
41
- flex-direction: column;
42
- justify-content: flex-start;
24
+ @apply ax-flex ax-flex-col ax-justify-items-start;
43
25
  }
44
26
  ax-prefix {
45
- align-items: flex-start;
27
+ @apply ax-items-start;
46
28
  }
47
29
  ax-suffix {
48
- align-items: flex-end;
49
- }
50
-
51
- @include media('phone') {
52
- font-size: 1rem;
30
+ @apply ax-items-end;
53
31
  }
54
32
  }
55
33
 
56
34
  ax-footer {
57
- border-top: 1px solid;
35
+ @apply ax-border-t;
58
36
  }
59
37
 
60
38
  .ax-content {
61
- flex: 1 1 0%;
62
- overflow-y: auto;
63
- overflow-x: hidden;
39
+ @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
64
40
 
65
41
  &.ax-list-items-container {
66
- padding-top: 0.5rem;
67
- padding-bottom: 0.5rem;
68
- overflow-y: auto;
69
- height: 100%;
70
-
42
+ @apply ax-h-full ax-overflow-y-auto ax-py-2;
71
43
  &.ax-vertical {
72
- display: grid;
73
- grid-template-columns: repeat(1, minmax(0, 1fr));
44
+ @apply ax-grid ax-grid-cols-1;
74
45
 
75
46
  &.ax-divide {
76
- border-top: 1px solid;
77
- border-bottom: 1px solid;
47
+ @apply ax-border-y;
78
48
  }
79
49
  }
80
50
 
81
51
  &.ax-default {
82
- cursor: pointer;
52
+ @apply ax-cursor-pointer;
83
53
 
84
54
  .ax-list-item-group {
85
55
  & > span {
86
- font-weight: 500;
87
- display: flex;
88
- align-items: center;
89
- padding: 0.75rem;
56
+ @apply ax-flex ax-items-center ax-p-3 ax-font-medium;
90
57
  }
91
58
 
92
59
  & > ul {
93
- padding-left: 0.75rem;
94
- padding-right: 0.75rem;
60
+ @apply ax-px-3;
95
61
  }
96
62
  .ax-list-item {
97
- border-radius: var(--ax-rounded-border-default);
98
- margin-bottom: 0.2rem;
63
+ @apply ax-mb-1 ax-rounded-default;
99
64
  }
100
65
  }
101
66
 
102
67
  .ax-list-item {
103
- padding-inline-start: 0.75rem;
104
- padding-inline-end: 1rem;
105
- position: relative;
106
- height: var(--ax-size-default);
107
- display: flex;
108
- justify-content: space-between;
109
- align-items: center;
110
- user-select: none;
111
- @include media('phone') {
112
- font-size: 1rem;
113
- }
68
+ @apply ax-relative ax-flex ax-h-default ax-select-none ax-items-center ax-justify-between ax-pe-4 ax-ps-3 ax-text-base;
114
69
  &:focus,
115
70
  &:focus-visible {
116
- outline: 2px solid transparent;
117
- outline-offset: 2px;
71
+ @apply ax-outline-2 ax-outline-offset-2;
118
72
  }
119
73
  &.ax-state-checkbox {
120
74
  .ax-checkbox-label {
121
- margin-inline-start: 0.5rem;
75
+ @apply ax-ms-2;
122
76
  }
123
77
  }
124
78
  &.ax-state-selected {
125
- background-color: rgba(var(--ax-color-primary-500)) !important;
126
- color: rgba(var(--ax-color-primary-fore)) !important;
79
+ @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
127
80
  .ax-selected-icon {
128
- color: rgba(var(--ax-color-primary-500));
129
- font-size: 1.5rem;
81
+ @apply ax-text-2xl ax-text-primary-500;
130
82
  }
131
83
  }
132
84
 
@@ -136,33 +88,30 @@
136
88
  // }
137
89
 
138
90
  &.ax-state-disabled {
139
- cursor: not-allowed;
140
- opacity: 0.5;
91
+ @apply ax-cursor-not-allowed ax-opacity-50;
141
92
  }
142
93
 
143
94
  &:focus-visible,
144
95
  &:hover {
145
- background-color: rgba(var(--ax-color-on-surface));
96
+ @apply ax-bg-on-surface;
146
97
  }
147
98
  &.ax-state-focus {
148
- background-color: rgba(var(--ax-color-on-surface));
99
+ @apply ax-bg-on-surface;
149
100
  }
150
101
  }
151
102
  }
152
103
 
153
104
  .ax-list-loading-container {
154
- display: flex;
155
- justify-content: center;
156
- padding: 0.5rem;
105
+ @apply ax-flex ax-justify-center ax-p-2;
157
106
  }
158
107
  }
159
108
  }
160
109
 
161
110
  .ax-search-box-container {
162
- padding: 0.5rem;
111
+ @apply ax-p-2;
163
112
 
164
113
  &.ax-state-hidden {
165
- display: none;
114
+ @apply ax-hidden;
166
115
  }
167
116
  }
168
117
  ax-footer {
package/src/shared/_radio.scss CHANGED
@@ -1,49 +1,20 @@
1
1
  @import '../mixins/index.scss';
2
- // @include darkMode() {
3
- // .ax-radio {
4
- // background-color: rgba(var(--ax-color-default));
5
- // }
6
- // }
2
+
7
3
  .ax-radio {
8
- width: 1.125rem;
9
- height: 1.125rem;
10
- border: 1px solid;
11
- border-color: rgba(var(--ax-color-border-default));
12
- border-radius: 99rem;
13
- background-color: rgba(var(--ax-color-input-surface));
14
- outline: 2px solid transparent;
15
- outline-offset: 2px;
16
- vertical-align: middle;
17
- appearance: none;
4
+ @apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded-full ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;
18
5
 
19
6
  &:checked {
20
- border-color: rgba(var(--ax-color-primary-500));
21
7
  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");
22
- background-color: rgba(var(--ax-color-primary-500));
23
- background-repeat: no-repeat;
24
- background-size: contain;
8
+ @apply ax-border-primary-500 ax-bg-primary-500 #{!important};
9
+ @apply ax-bg-contain ax-bg-no-repeat;
25
10
  }
26
11
 
27
- &:focus-visible {
28
- outline-offset: 2px;
29
- outline-width: 2px;
30
- outline-style: solid;
31
- outline-color: rgba(var(--ax-color-primary-500));
12
+ &:focus-visible,
13
+ &:focus {
14
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
32
15
  }
33
16
 
34
17
  &:disabled {
35
- opacity: 0.5;
36
- cursor: not-allowed;
18
+ @apply ax-cursor-not-allowed ax-opacity-50;
37
19
  }
38
20
  }
39
- // @include darkMode() {
40
- // .ax-radio {
41
- // &:checked {
42
- // border-color: rgba(var(--ax-color-primary-200));
43
- // background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
44
- // background-color: rgba(var(--ax-color-primary-200));
45
- // background-repeat: no-repeat;
46
- // background-size: contain;
47
- // }
48
- // }
49
- // }
package/src/shared/_table.scss CHANGED
@@ -2,40 +2,26 @@
2
2
  @include darkMode() {
3
3
  .ax-table {
4
4
  thead {
5
- background-color: rgba(var(--ax-color-on-surface));
5
+ @apply ax-bg-on-surface;
6
6
  }
7
7
  }
8
8
  }
9
9
  .ax-table {
10
- width: 100%;
11
- border-radius: var(--ax-rounded-border-default);
12
- border-spacing: 0px;
13
- border-collapse: collapse;
14
- border: 1px solid;
15
- border-color: rgba(var(--ax-color-border-default));
16
- overflow: hidden;
17
- font-size: 0.875rem;
10
+ @apply ax-w-full ax-border-collapse ax-border-spacing-0 ax-overflow-hidden ax-rounded-default ax-border ax-border-default ax-text-sm;
18
11
  td {
19
- border-bottom: 1px solid;
20
- border-color: rgba(var(--ax-color-border-default));
21
- padding: 0.875rem 1rem;
12
+ @apply ax-border-b ax-border-default ax-px-4 ax-py-3;
22
13
  }
23
14
  thead {
24
- background-color: rgba(var(--ax-color-on-surface));
25
- border-bottom: 1px solid;
26
- border-color: rgba(var(--ax-color-border-default));
15
+ @apply ax-border-b ax-border-default ax-bg-on-surface;
27
16
  th {
28
- text-transform: uppercase;
29
- font-weight: 500;
30
- text-align: start;
31
- padding: 0.875rem 1rem;
17
+ @apply ax-px-4 ax-py-3.5 ax-text-start ax-font-medium ax-uppercase;
32
18
  }
33
19
  }
34
20
  &.ax-table-alternate {
35
21
  tbody {
36
22
  tr {
37
23
  &:nth-child(even) {
38
- background-color: rgba(var(--ax-color-on-surface));
24
+ @apply ax-bg-on-surface;
39
25
  }
40
26
  }
41
27
  }
@@ -43,19 +29,19 @@
43
29
  &.ax-table-bordered {
44
30
  thead {
45
31
  th {
46
- border-top: 0 !important;
32
+ @apply ax-border-t-0 #{!important};
47
33
  }
48
34
  }
49
35
  tbody {
50
36
  tr {
51
37
  &:last-child {
52
38
  td {
53
- border-bottom: 0 !important;
39
+ @apply ax-border-b-0 #{!important};
54
40
  }
55
41
  }
56
42
  td {
57
43
  &:last-child {
58
- border-bottom: 0 !important;
44
+ @apply ax-border-b-0 #{!important};
59
45
  }
60
46
  }
61
47
  }
@@ -63,54 +49,41 @@
63
49
 
64
50
  td,
65
51
  th {
66
- border: 1px solid;
67
- border-color: rgba(var(--ax-color-border-default));
52
+ @apply ax-border ax-border-default;
68
53
  &:first-child {
69
- border-inline-start-width: 0px;
54
+ @apply ax-border-s-0;
70
55
  }
71
56
  &:last-child {
72
- border-inline-end-width: 0px;
57
+ @apply ax-border-e-0;
73
58
  }
74
59
  }
75
60
  }
76
61
  @media screen and (max-width: 601px) {
77
62
  &.ax-table-responsive {
78
- overflow-wrap: break-word;
79
- display: block;
80
- border: 0px;
63
+ @apply ax-block ax-break-words ax-border-0;
81
64
  thead {
82
- position: absolute;
83
- inset-inline-start: -100%;
84
- top: -100%;
65
+ @apply ax-absolute -ax-start-full -ax-top-full;
85
66
  }
86
67
 
87
68
  td {
88
- display: block;
89
69
  float: inline-start;
90
- width: 100%;
91
- clear: both;
92
- background: rgba(var(--ax-color-surface));
93
- padding: 0.375rem 0.625rem;
94
- box-sizing: border-box;
70
+
71
+ @apply ax-clear-both ax-box-border ax-block ax-w-full ax-px-2.5 ax-py-1.5;
95
72
  &:last-child {
96
- border: 0;
73
+ @apply ax-border-0;
97
74
  }
98
75
  &:before {
99
76
  content: attr(data-label);
100
- display: block;
101
- font-weight: bold;
77
+ @apply ax-block ax-font-bold;
102
78
  }
103
79
  }
104
80
  tr {
105
- border: 1px solid;
106
- border-color: rgba(var(--ax-color-border-default));
81
+ @apply ax-border ax-border-default;
107
82
  }
108
83
  tr,
109
84
  tbody {
110
- display: block;
111
- width: 100%;
85
+ @apply ax-mb-2.5 ax-block ax-w-full;
112
86
  float: inline-start;
113
- margin-bottom: 0.625rem;
114
87
  }
115
88
  }
116
89
  }
package/src/shared/_utils.scss CHANGED
@@ -5,73 +5,33 @@
5
5
  vertical-align: middle;
6
6
  }
7
7
 
8
- .ax-w-full {
9
- width: 100%;
10
- }
11
-
12
- .ax-h-full {
13
- height: 100%;
14
- }
15
-
16
8
  .ax-fieldset {
17
- border: 1px solid;
18
- border-color: rgba(var(--ax-color-border-default));
19
- padding: 0.75rem;
20
- border-radius: var(--ax-rounded-border-default);
9
+ @apply ax-rounded-default ax-border ax-border-default ax-p-3;
21
10
  legend {
22
- font-size: 0.875rem;
23
- padding: 0 0.25rem;
11
+ @apply ax-px-1 ax-text-sm;
24
12
  }
25
13
  }
26
14
 
27
15
  .ax-card {
28
- background-color: rgba(var(--ax-color-surface));
29
- border: 1px solid;
30
- border-color: rgba(var(--ax-color-border-default));
31
- border-radius: var(--ax-rounded-border-default);
16
+ @apply ax-rounded-default ax-border ax-border-default ax-bg-surface;
32
17
  }
33
18
 
34
- .ax-hidden {
35
- display: none;
36
- }
37
19
  .ax-drop-zone {
38
20
  > input {
39
- position: absolute;
40
- width: 100%;
41
- height: 100%;
42
- opacity: 0;
43
- cursor: pointer;
21
+ @apply ax-absolute ax-h-full ax-w-full ax-cursor-pointer ax-opacity-0;
44
22
  }
45
23
  }
46
24
  .ax-uploader-overlay-state {
47
- width: 100%;
48
- height: 100%;
49
- position: absolute;
50
- top: 0;
51
- inset-inline-start: 0;
52
- background-color: rgba(var(--ax-color-primary-500), 0.15);
53
- pointer-events: none;
54
- outline: 2px dashed rgba(var(--ax-color-primary-500));
55
- outline-offset: -4px;
56
25
  border-radius: inherit;
57
- display: flex;
58
- align-items: center;
59
- justify-content: center;
60
- flex-direction: column;
61
- font-size: 0.875rem;
62
- gap: 0.5rem;
63
- cursor: pointer;
64
- color: rgba(var(--ax-color-primary-700));
65
- transition: all 0.3s;
66
- z-index: 10;
26
+
27
+ @apply ax-pointer-events-none ax-absolute ax-start-0 ax-top-0 ax-z-10 ax-flex ax-h-full ax-w-full ax-cursor-pointer ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-bg-primary-200/75 ax-text-sm ax-text-primary-fore-tint ax-outline-dashed ax-outline-2 -ax-outline-offset-4 ax-transition-all;
28
+
67
29
  .ax-icon {
68
- font-size: 1.5rem;
30
+ @apply ax-text-2xl;
69
31
  }
70
32
  }
71
33
  @include darkMode() {
72
34
  .ax-uploader-overlay-state {
73
- background-color: rgba(var(--ax-color-primary-200), 0.15);
74
- color: rgba(var(--ax-color-primary-200));
75
- outline: 2px dashed rgba(var(--ax-color-primary-200));
35
+ @apply ax-bg-primary-800/75 ax-text-primary-fore ax-outline-primary-fore;
76
36
  }
77
37
  }
package/src/themes/default.css CHANGED
@@ -1 +1 @@
1
- :root{--ax-size-base: 2.5rem;--ax-size-default: var(--ax-size-base);--ax-rounded-border-default: 0.5rem;--ax-color-border-default: 230, 230, 230;--ax-color-background-default: 249, 250, 251;--ax-color-text-default: 22, 22, 22;--ax-color-surface: 255, 255, 255;--ax-color-surface-fore: 22, 22, 22;--ax-color-on-surface: 243, 244, 246;--ax-color-on-surface-fore: 22, 22, 22;--ax-color-input-surface: 255, 255, 255;--ax-color-input-surface-fore: 22, 22, 22;--ax-color-ghost: 255, 255, 255;--ax-color-ghost-fore: 22, 22, 22;--ax-color-primary-fore: 255, 255, 255;--ax-color-primary-fore-lighten: 32 40 136;--ax-color-primary-50: 239, 243, 255;--ax-color-primary-100: 220, 228, 253;--ax-color-primary-200: 192, 208, 253;--ax-color-primary-300: 149, 179, 251;--ax-color-primary-400: 99, 139, 247;--ax-color-primary-500: 62, 99, 243;--ax-color-primary-600: 55, 79, 233;--ax-color-primary-700: 32, 48, 213;--ax-color-primary-800: 33, 40, 172;--ax-color-primary-900: 32, 40, 136;--ax-color-primary-950: 24, 27, 83;--ax-color-secondary-fore: 255, 255, 255;--ax-color-secondary-fore-lighten: 3, 3, 3;--ax-color-secondary-50: 186, 186, 186;--ax-color-secondary-100: 173, 173, 173;--ax-color-secondary-200: 150, 150, 150;--ax-color-secondary-300: 117, 117, 117;--ax-color-secondary-400: 77, 77, 77;--ax-color-secondary-500: 51, 51, 51;--ax-color-secondary-600: 33, 33, 33;--ax-color-secondary-700: 20, 20, 20;--ax-color-secondary-800: 10, 10, 10;--ax-color-secondary-900: 3, 3, 3;--ax-color-secondary-950: 0, 0, 0;--ax-color-success-fore: 255, 255, 255;--ax-color-success-fore-lighten: 6, 78, 59;--ax-color-success-50: 236, 253, 245;--ax-color-success-100: 209, 250, 229;--ax-color-success-200: 167, 243, 208;--ax-color-success-300: 110, 231, 183;--ax-color-success-400: 52, 211, 153;--ax-color-success-500: 16, 185, 129;--ax-color-success-600: 5, 150, 105;--ax-color-success-700: 4, 120, 87;--ax-color-success-800: 6, 95, 70;--ax-color-success-900: 6, 78, 59;--ax-color-success-950: 2, 44, 34;--ax-color-danger-fore: 255, 255, 255;--ax-color-danger-fore-lighten: 127, 29, 29;--ax-color-danger-50: 254, 242, 242;--ax-color-danger-100: 254, 226, 226;--ax-color-danger-200: 254, 202, 202;--ax-color-danger-300: 252, 165, 165;--ax-color-danger-400: 248, 113, 113;--ax-color-danger-500: 239, 68, 68;--ax-color-danger-600: 220, 38, 38;--ax-color-danger-700: 185, 28, 28;--ax-color-danger-800: 153, 27, 27;--ax-color-danger-900: 127, 29, 29;--ax-color-danger-950: 69, 10, 10;--ax-color-warning-fore: 48, 26, 10;--ax-color-warning-fore-lighten: 255, 111, 0;--ax-color-warning-50: 255, 248, 225;--ax-color-warning-100: 255, 236, 179;--ax-color-warning-200: 255, 224, 130;--ax-color-warning-300: 255, 213, 79;--ax-color-warning-400: 255, 202, 40;--ax-color-warning-500: 255, 193, 7;--ax-color-warning-600: 255, 179, 0;--ax-color-warning-700: 255, 160, 0;--ax-color-warning-800: 255, 143, 0;--ax-color-warning-900: 255, 111, 0;--ax-color-warning-950: 72, 40, 15;--ax-color-info-fore: 255, 255, 255;--ax-color-info-fore-lighten: 49, 46, 129;--ax-color-info-50: 238, 242, 255;--ax-color-info-100: 224, 231, 255;--ax-color-info-200: 199, 210, 254;--ax-color-info-300: 165, 180, 252;--ax-color-info-400: 129, 140, 248;--ax-color-info-500: 99, 102, 241;--ax-color-info-600: 79, 70, 229;--ax-color-info-700: 67, 56, 202;--ax-color-info-800: 55, 48, 163;--ax-color-info-900: 49, 46, 129;--ax-color-info-950: 30, 27, 75;--ax-color-neutral-fore: 255, 255, 255;--ax-color-neutral-fore-lighten: 17, 24, 39;--ax-color-neutral-50: 249, 250, 251;--ax-color-neutral-100: 243, 244, 246;--ax-color-neutral-200: 229, 231, 235;--ax-color-neutral-300: 209, 213, 219;--ax-color-neutral-400: 156, 163, 175;--ax-color-neutral-500: 107, 114, 128;--ax-color-neutral-600: 75, 85, 99;--ax-color-neutral-700: 55, 65, 81;--ax-color-neutral-800: 31, 41, 55;--ax-color-neutral-900: 17, 24, 39;--ax-color-neutral-950: 3, 7, 18}.ax-dark{--ax-color-border-default: 75, 85, 99;--ax-color-background-default: 24, 32, 43;--ax-color-text-default: 255, 255, 255;--ax-color-surface: 31, 41, 55;--ax-color-surface-fore: 255, 255, 255;--ax-color-on-surface: 55, 65, 81;--ax-color-on-surface-fore: 255, 255, 255;--ax-color-input-surface: 38, 45, 57;--ax-color-input-surface-fore: 224, 224, 224;--ax-color-ghost: 77, 91, 113;--ax-color-ghost-fore: 255, 255, 255}
1
+ :root{--ax-size-base: 2.5rem;--ax-size-default: var(--ax-size-base);--ax-rounded-border-default: 0.5rem;--ax-color-border-default: 230, 230, 230;--ax-color-background-default: 249, 250, 251;--ax-color-text-default: 22, 22, 22;--ax-color-surface: 255, 255, 255;--ax-color-surface-fore: 22, 22, 22;--ax-color-on-surface: 243, 244, 246;--ax-color-on-surface-fore: 22, 22, 22;--ax-color-input-surface: 255, 255, 255;--ax-color-input-surface-fore: 22, 22, 22;--ax-color-ghost: 255, 255, 255;--ax-color-ghost-fore: 22, 22, 22;--ax-color-primary: 59, 130, 246;--ax-color-primary-fore: 255, 255, 255;--ax-color-secondary: 0, 0, 0;--ax-color-secondary-fore: 255, 255, 255;--ax-color-success: 16, 185, 129;--ax-color-success-fore: 255, 255, 255;--ax-color-warning: 255, 193, 7;--ax-color-warning-fore: 0, 0, 0;--ax-color-danger: 239, 68, 68;--ax-color-danger-fore: 255, 255, 255;--ax-color-info: 99, 102, 241;--ax-color-info-fore: 255, 255, 255;--ax-color-neutral: 107, 114, 128;--ax-color-neutral-fore: 255, 255, 255}.ax-dark{--ax-color-border-default: 75, 85, 99;--ax-color-background-default: 24, 32, 43;--ax-color-text-default: 255, 255, 255;--ax-color-surface: 31, 41, 55;--ax-color-surface-fore: 255, 255, 255;--ax-color-on-surface: 55, 65, 81;--ax-color-on-surface-fore: 255, 255, 255;--ax-color-input-surface: 38, 45, 57;--ax-color-input-surface-fore: 224, 224, 224;--ax-color-ghost: 77, 91, 113;--ax-color-ghost-fore: 255, 255, 255}