@acorex/styles 19.10.0-next.0 → 19.10.0-next.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.
- package/icons/fontawesome/index.scss +11 -10
- package/icons/huge/huge-bulk/index.scss +4 -4
- package/icons/huge/huge-duotone/index.scss +4 -4
- package/icons/huge/huge-solid-sharp/index.scss +4 -4
- package/icons/huge/huge-solid-standard/index.scss +4 -4
- package/icons/huge/huge-stroke-rounded/index.scss +4 -4
- package/icons/huge/huge-stroke-sharp/index.scss +4 -4
- package/icons/huge/huge-stroke-standard/index.scss +4 -4
- package/icons/huge/huge-twotone/index.scss +4 -4
- package/icons/material/index.scss +5 -4
- package/index.css +1935 -80
- package/index.min.css +1 -1
- package/package.json +1 -1
- package/src/base/index.scss +4 -2
- package/src/mixins/_look.scss +35 -20
- package/src/shared/_action-item.scss +3 -3
- package/src/shared/_actionsheet.scss +6 -7
- package/src/shared/_check-box.scss +14 -8
- package/src/shared/_color-look.scss +822 -0
- package/src/shared/_drop-down.scss +16 -7
- package/src/shared/_editor-container.scss +75 -35
- package/src/shared/_general-button.scss +12 -11
- package/src/shared/_inputs.scss +16 -0
- package/src/shared/_list.scss +41 -15
- package/src/shared/_radio.scss +14 -8
- package/src/shared/_table.scss +30 -9
- package/src/shared/_utils.scss +16 -10
- package/src/shared/index.scss +2 -4
- package/src/utility/index.scss +22 -2
- package/src/variables/_colors.scss +1 -1
- package/tailwind-base.js +73 -123
- package/themes/default.css +1 -1
- package/themes/default.scss +139 -239
- package/src/shared/_ripple.scss +0 -13
- package/themes/test.scss +0 -237
package/src/shared/_table.scss
CHANGED
|
@@ -2,34 +2,39 @@
|
|
|
2
2
|
@include mixins.darkMode() {
|
|
3
3
|
.ax-table {
|
|
4
4
|
thead {
|
|
5
|
-
|
|
5
|
+
// @apply ax-bg-on-surface;
|
|
6
|
+
background-color: rgba(var(--ax-color-on-surface));
|
|
6
7
|
}
|
|
7
8
|
}
|
|
8
9
|
}
|
|
9
10
|
.ax-table {
|
|
11
|
+
// @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;
|
|
10
12
|
width: 100%;
|
|
11
13
|
border-collapse: collapse;
|
|
12
14
|
border-spacing: 0;
|
|
13
15
|
overflow: hidden;
|
|
14
|
-
border-radius: var(--ax-
|
|
16
|
+
border-radius: var(--ax-rounded-border-default);
|
|
15
17
|
border-width: 1px;
|
|
16
|
-
border-color: rgba(var(--ax-
|
|
18
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
17
19
|
font-size: 0.875rem /* 14px */;
|
|
18
20
|
line-height: 1.25rem /* 20px */;
|
|
19
21
|
td {
|
|
22
|
+
// @apply ax-border-b ax-border-default ax-px-4 ax-py-3;
|
|
20
23
|
border-bottom-width: 1px;
|
|
21
|
-
border-color: rgba(var(--ax-
|
|
24
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
22
25
|
padding-left: 1rem /* 16px */;
|
|
23
26
|
padding-right: 1rem /* 16px */;
|
|
24
27
|
padding-top: 0.75rem /* 12px */;
|
|
25
28
|
padding-bottom: 0.75rem /* 12px */;
|
|
26
29
|
}
|
|
27
30
|
thead {
|
|
31
|
+
// @apply ax-border-b ax-border-default ax-bg-on-surface;
|
|
28
32
|
border-bottom-width: 1px;
|
|
29
|
-
border-color: rgba(var(--ax-
|
|
30
|
-
background-color: rgba(var(--ax-
|
|
33
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
34
|
+
background-color: rgba(var(--ax-color-on-surface));
|
|
31
35
|
|
|
32
36
|
th {
|
|
37
|
+
// @apply ax-px-4 ax-py-3.5 ax-text-start ax-font-medium ax-uppercase;
|
|
33
38
|
padding-left: 1rem /* 16px */;
|
|
34
39
|
padding-right: 1rem /* 16px */;
|
|
35
40
|
padding-top: 0.875rem /* 14px */;
|
|
@@ -43,7 +48,8 @@
|
|
|
43
48
|
tbody {
|
|
44
49
|
tr {
|
|
45
50
|
&:nth-child(even) {
|
|
46
|
-
|
|
51
|
+
// @apply ax-bg-on-surface;
|
|
52
|
+
background-color: rgba(var(--ax-color-on-surface));
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
55
|
}
|
|
@@ -51,6 +57,7 @@
|
|
|
51
57
|
&.ax-table-bordered {
|
|
52
58
|
thead {
|
|
53
59
|
th {
|
|
60
|
+
// @apply ax-border-t-0 #{!important};
|
|
54
61
|
border-top-width: 0px !important;
|
|
55
62
|
}
|
|
56
63
|
}
|
|
@@ -58,11 +65,13 @@
|
|
|
58
65
|
tr {
|
|
59
66
|
&:last-child {
|
|
60
67
|
td {
|
|
68
|
+
// @apply ax-border-b-0 #{!important};
|
|
61
69
|
border-bottom-width: 0px !important;
|
|
62
70
|
}
|
|
63
71
|
}
|
|
64
72
|
td {
|
|
65
73
|
&:last-child {
|
|
74
|
+
// @apply ax-border-b-0 #{!important};
|
|
66
75
|
border-bottom-width: 0px !important;
|
|
67
76
|
}
|
|
68
77
|
}
|
|
@@ -71,30 +80,37 @@
|
|
|
71
80
|
|
|
72
81
|
td,
|
|
73
82
|
th {
|
|
83
|
+
// @apply ax-border ax-border-default;
|
|
74
84
|
border-width: 1px;
|
|
75
|
-
border-color: rgba(var(--ax-
|
|
85
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
76
86
|
|
|
77
87
|
&:first-child {
|
|
88
|
+
// @apply ax-border-s-0;
|
|
78
89
|
border-inline-start-width: 0px;
|
|
79
90
|
}
|
|
80
91
|
&:last-child {
|
|
92
|
+
// @apply ax-border-e-0;
|
|
81
93
|
border-inline-end-width: 0px;
|
|
82
94
|
}
|
|
83
95
|
}
|
|
84
96
|
}
|
|
85
97
|
@include mixins.mediaLessThan('xs') {
|
|
86
98
|
&.ax-table-responsive {
|
|
99
|
+
// @apply ax-block ax-break-words ax-border-0;
|
|
87
100
|
display: block;
|
|
88
101
|
overflow-wrap: break-word;
|
|
89
102
|
border-width: 0px;
|
|
90
103
|
|
|
91
104
|
thead {
|
|
105
|
+
// @apply ax-absolute -ax-start-full -ax-top-full;
|
|
92
106
|
position: absolute;
|
|
93
107
|
inset-inline-start: -100%;
|
|
94
108
|
top: -100%;
|
|
95
109
|
}
|
|
96
110
|
|
|
97
111
|
td {
|
|
112
|
+
// @apply ax-clear-both ax-box-border ax-block ax-w-full ax-px-2.5 ax-py-1.5;
|
|
113
|
+
|
|
98
114
|
float: inline-start;
|
|
99
115
|
clear: both;
|
|
100
116
|
box-sizing: border-box;
|
|
@@ -105,20 +121,25 @@
|
|
|
105
121
|
padding-top: 0.375rem /* 6px */;
|
|
106
122
|
padding-bottom: 0.375rem /* 6px */;
|
|
107
123
|
&:last-child {
|
|
124
|
+
// @apply ax-border-0;
|
|
108
125
|
border-width: 0px;
|
|
109
126
|
}
|
|
110
127
|
&:before {
|
|
128
|
+
// @apply ax-block ax-font-bold;
|
|
129
|
+
|
|
111
130
|
content: attr(data-label);
|
|
112
131
|
display: block;
|
|
113
132
|
font-weight: 700;
|
|
114
133
|
}
|
|
115
134
|
}
|
|
116
135
|
tr {
|
|
136
|
+
// @apply ax-border ax-border-default;
|
|
117
137
|
border-width: 1px;
|
|
118
|
-
border-color: rgba(var(--ax-
|
|
138
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
119
139
|
}
|
|
120
140
|
tr,
|
|
121
141
|
tbody {
|
|
142
|
+
// @apply ax-mb-2.5 ax-block ax-w-full;
|
|
122
143
|
float: inline-start;
|
|
123
144
|
margin-bottom: 0.625rem /* 10px */;
|
|
124
145
|
width: 100%;
|
package/src/shared/_utils.scss
CHANGED
|
@@ -11,12 +11,14 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.ax-fieldset {
|
|
14
|
-
|
|
14
|
+
// @apply ax-rounded-default ax-border ax-border-default ax-p-3;
|
|
15
|
+
border-radius: var(--ax-rounded-border-default);
|
|
15
16
|
border-width: 1px;
|
|
16
|
-
border-color: rgba(var(--ax-
|
|
17
|
+
border-color: rgba(var(--ax-color-input-border));
|
|
17
18
|
padding: 0.75rem /* 12px */;
|
|
18
19
|
|
|
19
20
|
legend {
|
|
21
|
+
// @apply ax-px-1 ax-text-sm;
|
|
20
22
|
padding-left: 0.25rem /* 4px */;
|
|
21
23
|
padding-right: 0.25rem /* 4px */;
|
|
22
24
|
font-size: 0.875rem /* 14px */;
|
|
@@ -25,14 +27,16 @@
|
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
.ax-card {
|
|
28
|
-
|
|
30
|
+
// @apply ax-rounded-default ax-border ax-border-default ax-bg-surface;
|
|
31
|
+
border-radius: var(--ax-rounded-border-default);
|
|
29
32
|
border-width: 1px;
|
|
30
|
-
border-color: rgba(var(--ax-
|
|
31
|
-
background-color: rgba(var(--ax-
|
|
33
|
+
border-color: rgba(var(--ax-color-input-border));
|
|
34
|
+
background-color: rgba(var(--ax-color-surface));
|
|
32
35
|
}
|
|
33
36
|
|
|
34
37
|
.ax-drop-zone {
|
|
35
38
|
> input {
|
|
39
|
+
// @apply ax-absolute ax-h-full ax-w-full ax-cursor-pointer ax-opacity-0;
|
|
36
40
|
position: absolute;
|
|
37
41
|
height: 100%;
|
|
38
42
|
width: 100%;
|
|
@@ -41,6 +45,7 @@
|
|
|
41
45
|
}
|
|
42
46
|
}
|
|
43
47
|
.ax-uploader-overlay-state {
|
|
48
|
+
// @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;
|
|
44
49
|
border-radius: inherit;
|
|
45
50
|
pointer-events: none;
|
|
46
51
|
position: absolute;
|
|
@@ -55,10 +60,10 @@
|
|
|
55
60
|
align-items: center;
|
|
56
61
|
justify-content: center;
|
|
57
62
|
gap: 0.5rem /* 8px */;
|
|
58
|
-
background-color: rgba(var(--ax-
|
|
63
|
+
background-color: rgba(var(--ax-color-primary-200), 0.75);
|
|
59
64
|
font-size: 0.875rem /* 14px */;
|
|
60
65
|
line-height: 1.25rem /* 20px */;
|
|
61
|
-
color: rgba(var(--ax-
|
|
66
|
+
color: rgba(var(--ax-color-primary-fore-tint));
|
|
62
67
|
outline-style: dashed;
|
|
63
68
|
outline-offset: -4px;
|
|
64
69
|
transition-property: all;
|
|
@@ -72,8 +77,9 @@
|
|
|
72
77
|
}
|
|
73
78
|
@include util.darkMode() {
|
|
74
79
|
.ax-uploader-overlay-state {
|
|
75
|
-
|
|
76
|
-
color: rgba(var(--ax-
|
|
77
|
-
|
|
80
|
+
// @apply ax-bg-primary-800/75 ax-text-primary-fore ax-outline-primary-fore;
|
|
81
|
+
background-color: rgba(var(--ax-color-primary-800), 0.75);
|
|
82
|
+
color: rgba(var(--ax-color-primary-fore));
|
|
83
|
+
outline-color: rgba(var(--ax-color-primary-fore));
|
|
78
84
|
}
|
|
79
85
|
}
|
package/src/shared/index.scss
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
@forward './action-item';
|
|
2
2
|
@forward './actionsheet';
|
|
3
3
|
@forward './check-box';
|
|
4
|
+
@forward './color-look';
|
|
4
5
|
@forward './drop-down';
|
|
5
|
-
|
|
6
|
+
@forward './editor-container';
|
|
6
7
|
@forward './general-button';
|
|
7
8
|
@forward './inputs';
|
|
8
9
|
@forward './list';
|
|
9
10
|
@forward './radio';
|
|
10
11
|
@forward './table';
|
|
11
12
|
@forward './utils';
|
|
12
|
-
|
|
13
|
-
// new //
|
|
14
|
-
@forward './ripple';
|
package/src/utility/index.scss
CHANGED
|
@@ -1,4 +1,24 @@
|
|
|
1
|
+
.ax-xs {
|
|
2
|
+
--ax-size-default: calc(var(--ax-size-base) - 0.75rem);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.ax-sm {
|
|
6
|
+
--ax-size-default: calc(var(--ax-size-base) - 0.5rem);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.ax-md {
|
|
10
|
+
--ax-size-default: var(--ax-size-base);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.ax-lg {
|
|
14
|
+
--ax-size-default: calc(var(--ax-size-base) + 0.5rem);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ax-xl {
|
|
18
|
+
--ax-size-default: calc(var(--ax-size-base) + 1rem);
|
|
19
|
+
}
|
|
20
|
+
|
|
1
21
|
.ax-placeholder {
|
|
2
|
-
color: rgba(var(--ax-
|
|
3
|
-
font-
|
|
22
|
+
color: rgba(var(--ax-color-input-surface-fore), 0.5);
|
|
23
|
+
font-weight: 500;
|
|
4
24
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
$color_names: 'primary', 'success', 'warning', 'danger', '
|
|
1
|
+
$color_names: 'primary', 'success', 'warning', 'danger', 'neutral';
|
|
2
2
|
$look_names: 'solid', 'twotone', 'outline', 'blank', 'link';
|
package/tailwind-base.js
CHANGED
|
@@ -17,87 +17,36 @@ const childSelector = plugin(function ({ addVariant }) {
|
|
|
17
17
|
addVariant('child-focus-within', '& > *:focus-within');
|
|
18
18
|
});
|
|
19
19
|
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
'
|
|
23
|
-
'on-surface-low': 'rgba(var(--ax-sys-color-on-surface-low), <alpha-value>)',
|
|
24
|
-
'on-surface': 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
|
|
25
|
-
'on-surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
|
|
26
|
-
'on-surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
|
|
27
|
-
'on-surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
|
|
28
|
-
};
|
|
20
|
+
const _colors = {
|
|
21
|
+
ghost: 'rgba(var(--ax-color-ghost), <alpha-value>)',
|
|
22
|
+
'ghost-fore': 'rgba(var(--ax-color-ghost-fore), <alpha-value>)',
|
|
29
23
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
'surface-light': 'rgba(var(--ax-sys-color-surface-light), <alpha-value>)',
|
|
33
|
-
'surface-lowest': 'rgba(var(--ax-sys-color-surface-lowest), <alpha-value>)',
|
|
34
|
-
'surface-low': 'rgba(var(--ax-sys-color-surface-low), <alpha-value>)',
|
|
35
|
-
surface: 'rgba(var(--ax-sys-color-surface), <alpha-value>)',
|
|
36
|
-
'surface-high': 'rgba(var(--ax-sys-color-surface-high), <alpha-value>)',
|
|
37
|
-
'surface-highest': 'rgba(var(--ax-sys-color-surface-highest), <alpha-value>)',
|
|
38
|
-
'surface-dark': 'rgba(var(--ax-sys-color-surface-dark), <alpha-value>)',
|
|
39
|
-
'surface-input': 'rgba(var(--ax-sys-color-input-surface), <alpha-value>)',
|
|
40
|
-
..._onColors,
|
|
41
|
-
};
|
|
24
|
+
surface: 'rgba(var(--ax-color-surface), <alpha-value>)',
|
|
25
|
+
'surface-fore': 'rgba(var(--ax-color-surface-fore), <alpha-value>)',
|
|
42
26
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
default: withOpacityValue('--ax-sys-body-text-color'),
|
|
46
|
-
'surface-light': 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
|
|
47
|
-
'surface-lowest': 'rgba(var(--ax-sys-color-on-surface-lowest), <alpha-value>)',
|
|
48
|
-
'surface-low': 'rgba(var(--ax-sys-color-on-surface-low), <alpha-value>)',
|
|
49
|
-
surface: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
|
|
50
|
-
'surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
|
|
51
|
-
'surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
|
|
52
|
-
'surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
const _borderColors = {
|
|
56
|
-
'surface-light': 'rgba(var(--ax-sys-color-border-surface-light), <alpha-value>)',
|
|
57
|
-
'surface-lowest': 'rgba(var(--ax-sys-color-border-surface-lowest), <alpha-value>)',
|
|
58
|
-
'surface-low': 'rgba(var(--ax-sys-color-border-surface-low), <alpha-value>)',
|
|
59
|
-
surface: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
|
|
60
|
-
'surface-high': 'rgba(var(--ax-sys-color-border-surface-high), <alpha-value>)',
|
|
61
|
-
'surface-dark': 'rgba(var(--ax-sys-color-border-surface-dark), <alpha-value>)',
|
|
62
|
-
'surface-highest': 'rgba(var(--ax-sys-color-border-surface-highest), <alpha-value>)',
|
|
63
|
-
};
|
|
27
|
+
'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
|
|
28
|
+
'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <alpha-value>)',
|
|
64
29
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
primary: 'rgba(var(--ax-sys-color-on-primary), <alpha-value>)',
|
|
68
|
-
secondary: 'rgba(var(--ax-sys-color-on-secondary), <alpha-value>)',
|
|
69
|
-
success: 'rgba(var(--ax-sys-color-on-success), <alpha-value>)',
|
|
70
|
-
warning: 'rgba(var(--ax-sys-color-on-warning), <alpha-value>)',
|
|
71
|
-
danger: 'rgba(var(--ax-sys-color-on-danger), <alpha-value>)',
|
|
72
|
-
ghost: 'rgba(var(--ax-sys-color-on-ghost), <alpha-value>)',
|
|
73
|
-
},
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
const _onContrastColor = {
|
|
77
|
-
'on-contrast': {
|
|
78
|
-
primary: 'rgba(var(--ax-sys-color-on-contrast-primary), <alpha-value>)',
|
|
79
|
-
secondary: 'rgba(var(--ax-sys-color-on-contrast-secondary), <alpha-value>)',
|
|
80
|
-
success: 'rgba(var(--ax-sys-color-on-contrast-success), <alpha-value>)',
|
|
81
|
-
warning: 'rgba(var(--ax-sys-color-on-contrast-warning), <alpha-value>)',
|
|
82
|
-
danger: 'rgba(var(--ax-sys-color-on-contrast-danger), <alpha-value>)',
|
|
83
|
-
ghost: 'rgba(var(--ax-sys-color-on-contrast-ghost), <alpha-value>)',
|
|
84
|
-
},
|
|
30
|
+
'input-surface': 'rgba(var(--ax-color-input-surface), <alpha-value>)',
|
|
31
|
+
'input-surface-fore': 'rgba(var(--ax-color-input-surface-fore), <alpha-value>)',
|
|
85
32
|
};
|
|
86
33
|
|
|
87
34
|
const createPalete = function (colorName) {
|
|
88
35
|
return {
|
|
89
|
-
DEFAULT:
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
36
|
+
DEFAULT: `rgba(var(--ax-color-${colorName}-500), <alpha-value>)`,
|
|
37
|
+
fore: `rgba(var(--ax-color-${colorName}-fore), <alpha-value>)`,
|
|
38
|
+
'fore-tint': `rgba(var(--ax-color-${colorName}-fore-tint), <alpha-value>)`,
|
|
39
|
+
50: `rgba(var(--ax-color-${colorName}-50), <alpha-value>)`,
|
|
40
|
+
100: `rgba(var(--ax-color-${colorName}-100), <alpha-value>)`,
|
|
41
|
+
200: `rgba(var(--ax-color-${colorName}-200), <alpha-value>)`,
|
|
42
|
+
300: `rgba(var(--ax-color-${colorName}-300), <alpha-value>)`,
|
|
43
|
+
400: `rgba(var(--ax-color-${colorName}-400), <alpha-value>)`,
|
|
44
|
+
500: `rgba(var(--ax-color-${colorName}-500), <alpha-value>)`,
|
|
45
|
+
600: `rgba(var(--ax-color-${colorName}-600), <alpha-value>)`,
|
|
46
|
+
700: `rgba(var(--ax-color-${colorName}-700), <alpha-value>)`,
|
|
47
|
+
800: `rgba(var(--ax-color-${colorName}-800), <alpha-value>)`,
|
|
48
|
+
900: `rgba(var(--ax-color-${colorName}-900), <alpha-value>)`,
|
|
49
|
+
950: `rgba(var(--ax-color-${colorName}-950), <alpha-value>)`,
|
|
101
50
|
};
|
|
102
51
|
};
|
|
103
52
|
|
|
@@ -109,32 +58,33 @@ module.exports = withAnimations({
|
|
|
109
58
|
extend: {
|
|
110
59
|
colors: {
|
|
111
60
|
primary: createPalete('primary'),
|
|
112
|
-
secondary: createPalete('secondary'),
|
|
113
61
|
success: createPalete('success'),
|
|
114
62
|
danger: createPalete('danger'),
|
|
115
63
|
warning: createPalete('warning'),
|
|
116
|
-
|
|
117
|
-
...
|
|
118
|
-
..._onContrastColor,
|
|
64
|
+
neutral: createPalete('neutral'),
|
|
65
|
+
..._colors,
|
|
119
66
|
},
|
|
120
67
|
textColor: {
|
|
121
|
-
|
|
68
|
+
DEFAULT: withOpacityValue('--ax-color-text-default'),
|
|
69
|
+
default: withOpacityValue('--ax-color-text-default'),
|
|
70
|
+
..._colors,
|
|
122
71
|
},
|
|
123
72
|
backgroundColor: {
|
|
124
|
-
|
|
73
|
+
default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
|
|
74
|
+
'border-default': 'rgba(var(--ax-color-border-default), <alpha-value>)',
|
|
125
75
|
},
|
|
76
|
+
|
|
126
77
|
borderColor: {
|
|
127
|
-
DEFAULT: 'rgba(var(--ax-
|
|
128
|
-
default: 'rgba(var(--ax-
|
|
129
|
-
input: 'rgba(var(--ax-
|
|
130
|
-
|
|
131
|
-
..._borderColors,
|
|
78
|
+
DEFAULT: 'rgba(var(--ax-color-border-default), <alpha-value>)',
|
|
79
|
+
default: 'rgba(var(--ax-color-border-default), <alpha-value>)',
|
|
80
|
+
input: 'rgba(var(--ax-color-input-border), <alpha-value>)',
|
|
81
|
+
..._colors,
|
|
132
82
|
},
|
|
133
83
|
maxWidth: {
|
|
134
84
|
'8xl': '90rem',
|
|
135
85
|
},
|
|
136
86
|
borderRadius: {
|
|
137
|
-
default: 'var(--ax-
|
|
87
|
+
default: 'var(--ax-rounded-border-default)',
|
|
138
88
|
},
|
|
139
89
|
lineHeight: {
|
|
140
90
|
11: '2.5rem',
|
|
@@ -145,25 +95,25 @@ module.exports = withAnimations({
|
|
|
145
95
|
20: '5rem',
|
|
146
96
|
},
|
|
147
97
|
spacing: {
|
|
148
|
-
default: 'var(--ax-
|
|
98
|
+
default: 'var(--ax-size-default)',
|
|
149
99
|
},
|
|
150
100
|
minWidth: {
|
|
151
|
-
default: 'var(--ax-
|
|
101
|
+
default: 'var(--ax-size-default)',
|
|
152
102
|
},
|
|
153
103
|
width: {
|
|
154
|
-
default: 'var(--ax-
|
|
104
|
+
default: 'var(--ax-size-default)',
|
|
155
105
|
},
|
|
156
106
|
maxHeight: {
|
|
157
|
-
default: 'var(--ax-
|
|
107
|
+
default: 'var(--ax-size-default)',
|
|
158
108
|
},
|
|
159
109
|
minHeight: {
|
|
160
|
-
default: 'var(--ax-
|
|
110
|
+
default: 'var(--ax-size-default)',
|
|
161
111
|
},
|
|
162
112
|
height: {
|
|
163
|
-
default: 'var(--ax-
|
|
113
|
+
default: 'var(--ax-size-default)',
|
|
164
114
|
},
|
|
165
115
|
maxHeight: {
|
|
166
|
-
default: 'var(--ax-
|
|
116
|
+
default: 'var(--ax-size-default)',
|
|
167
117
|
},
|
|
168
118
|
},
|
|
169
119
|
},
|
|
@@ -174,44 +124,44 @@ module.exports = withAnimations({
|
|
|
174
124
|
plugin(function ({ addUtilities }) {
|
|
175
125
|
const acorexClasses = {
|
|
176
126
|
'.h1': {
|
|
177
|
-
'font-size': '
|
|
178
|
-
'font-weight': '
|
|
179
|
-
'line-height': '
|
|
127
|
+
'font-size': '3rem',
|
|
128
|
+
'font-weight': '700',
|
|
129
|
+
'line-height': '3rem',
|
|
180
130
|
},
|
|
181
131
|
'.h2': {
|
|
182
|
-
'font-size': '
|
|
183
|
-
'font-weight': '
|
|
184
|
-
'line-height': '
|
|
132
|
+
'font-size': '2.5rem',
|
|
133
|
+
'font-weight': '700',
|
|
134
|
+
'line-height': '2.5rem',
|
|
185
135
|
},
|
|
186
136
|
'.h3': {
|
|
187
|
-
'font-size': '1.
|
|
188
|
-
'font-weight': '
|
|
189
|
-
'line-height': '1.
|
|
137
|
+
'font-size': '1.875rem',
|
|
138
|
+
'font-weight': '700',
|
|
139
|
+
'line-height': '1.875rem',
|
|
190
140
|
},
|
|
191
141
|
'.h4': {
|
|
192
142
|
'font-size': '1.5rem',
|
|
193
|
-
'font-weight': '
|
|
143
|
+
'font-weight': '700',
|
|
194
144
|
'line-height': '1.5rem',
|
|
195
145
|
},
|
|
196
146
|
'.h5': {
|
|
197
|
-
'font-size': '1.
|
|
198
|
-
'font-weight': '
|
|
199
|
-
'line-height': '1.
|
|
147
|
+
'font-size': '1.25rem',
|
|
148
|
+
'font-weight': '700',
|
|
149
|
+
'line-height': '1.25rem',
|
|
200
150
|
},
|
|
201
151
|
'.h6': {
|
|
202
|
-
'font-size': '
|
|
203
|
-
'font-weight': '
|
|
204
|
-
'line-height': '
|
|
152
|
+
'font-size': '1.125rem',
|
|
153
|
+
'font-weight': '700',
|
|
154
|
+
'line-height': '1.125rem',
|
|
205
155
|
},
|
|
206
156
|
'.heading': {
|
|
207
157
|
width: '100%',
|
|
208
158
|
'border-bottom': '1px solid',
|
|
209
|
-
'border-color': 'rgba(var(--ax-
|
|
159
|
+
'border-color': 'rgba(var(--ax-color-border-default))',
|
|
210
160
|
'line-height': '0.1em',
|
|
211
161
|
margin: '1rem auto',
|
|
212
162
|
},
|
|
213
163
|
'.heading > span': {
|
|
214
|
-
background: 'rgba(var(--ax-
|
|
164
|
+
background: 'rgba(var(--ax-color-surface))',
|
|
215
165
|
padding: '0 0.75rem',
|
|
216
166
|
},
|
|
217
167
|
'.heading-start': {
|
|
@@ -223,15 +173,15 @@ module.exports = withAnimations({
|
|
|
223
173
|
'.heading-end': {
|
|
224
174
|
'text-align': 'end',
|
|
225
175
|
},
|
|
226
|
-
'.
|
|
227
|
-
color: 'rgba(var(--ax-
|
|
176
|
+
'.link': {
|
|
177
|
+
color: 'rgba(var(--ax-color-primary-500))',
|
|
228
178
|
cursor: 'pointer',
|
|
229
179
|
},
|
|
230
|
-
'.
|
|
180
|
+
'.link:hover': {
|
|
231
181
|
'text-decoration': 'underline',
|
|
232
182
|
},
|
|
233
|
-
'.
|
|
234
|
-
color: 'rgba(var(--ax-
|
|
183
|
+
'.link:visited': {
|
|
184
|
+
color: 'rgba(var(--ax-color-primary-700))',
|
|
235
185
|
},
|
|
236
186
|
'.animate-slow': {
|
|
237
187
|
animationDuration: '2s',
|
|
@@ -254,26 +204,26 @@ module.exports = withAnimations({
|
|
|
254
204
|
'.card': {
|
|
255
205
|
backgroundColor: 'rgb(var(--ax-color-surface))',
|
|
256
206
|
border: '1px solid',
|
|
257
|
-
borderColor: 'rgb(var(--ax-
|
|
258
|
-
borderRadius: 'var(--ax-
|
|
207
|
+
borderColor: 'rgb(var(--ax-color-border-default))',
|
|
208
|
+
borderRadius: 'var(--ax-rounded-border-default)',
|
|
259
209
|
},
|
|
260
210
|
'.tabs-fit': {
|
|
261
211
|
width: '100%',
|
|
262
212
|
},
|
|
263
213
|
'.xs': {
|
|
264
|
-
'--ax-
|
|
214
|
+
'--ax-size-default': '2rem',
|
|
265
215
|
},
|
|
266
216
|
'.sm': {
|
|
267
|
-
'--ax-
|
|
217
|
+
'--ax-size-default': '2.25rem',
|
|
268
218
|
},
|
|
269
219
|
'.md': {
|
|
270
|
-
'--ax-
|
|
220
|
+
'--ax-size-default': '2.5rem',
|
|
271
221
|
},
|
|
272
222
|
'.lg': {
|
|
273
|
-
'--ax-
|
|
223
|
+
'--ax-size-default': '3rem',
|
|
274
224
|
},
|
|
275
225
|
'.xl': {
|
|
276
|
-
'--ax-
|
|
226
|
+
'--ax-size-default': '3.5rem',
|
|
277
227
|
},
|
|
278
228
|
};
|
|
279
229
|
addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
|
package/themes/default.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,.ax-light{--ax-
|
|
1
|
+
:root,.ax-light{--ax-size-base: 2.5rem;--ax-size-default: var(--ax-size-base);--ax-icon-weight: 400;--ax-icon-size: 100%;--ax-rounded-border-default: 0.5rem;--ax-color-border-default: 233, 234, 235;--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: 250, 250, 250;--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-input-border: 213, 215, 218;--ax-color-ghost: 255, 255, 255;--ax-color-ghost-fore: 22, 22, 22;--ax-color-primary-fore: 255, 255, 255;--ax-color-primary-fore-tint: 11, 30, 71;--ax-color-primary-50: 244, 247, 254;--ax-color-primary-100: 233, 239, 253;--ax-color-primary-200: 190, 208, 249;--ax-color-primary-300: 146, 177, 245;--ax-color-primary-400: 102, 146, 241;--ax-color-primary-500: 37, 99, 235;--ax-color-primary-600: 33, 89, 212;--ax-color-primary-700: 26, 69, 165;--ax-color-primary-800: 19, 50, 118;--ax-color-primary-900: 11, 30, 71;--ax-color-primary-950: 4, 10, 23;--ax-color-secondary-fore: 255, 255, 255;--ax-color-secondary-fore-tint: 9, 12, 18;--ax-color-secondary-50: 244, 244, 245;--ax-color-secondary-100: 233, 234, 235;--ax-color-secondary-200: 188, 191, 196;--ax-color-secondary-300: 143, 148, 157;--ax-color-secondary-400: 98, 105, 118;--ax-color-secondary-500: 30, 41, 59;--ax-color-secondary-600: 27, 37, 53;--ax-color-secondary-700: 21, 29, 41;--ax-color-secondary-800: 15, 21, 30;--ax-color-secondary-900: 9, 12, 18;--ax-color-secondary-950: 3, 4, 6;--ax-color-success-fore: 255, 255, 255;--ax-color-success-fore-tint: 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-warning-fore: 48, 26, 10;--ax-color-warning-fore-tint: 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-danger-fore: 255, 255, 255;--ax-color-danger-fore-tint: 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-info-fore: 255, 255, 255;--ax-color-info-fore-tint: 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-tint: 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: 34, 38, 47;--ax-color-background-default: 12, 14, 18;--ax-color-text-default: 255, 255, 255;--ax-color-surface: 19, 22, 27;--ax-color-surface-fore: 255, 255, 255;--ax-color-on-surface: 34, 38, 47;--ax-color-on-surface-fore: 255, 255, 255;--ax-color-input-surface: 12, 14, 18;--ax-color-input-surface-fore: 224, 224, 224;--ax-color-input-border: 55, 58, 65;--ax-color-ghost: 77, 91, 113;--ax-color-ghost-fore: 255, 255, 255}
|