@acorex/styles 19.10.0 → 19.10.2
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/README.md +22 -20
- package/components/_editor-container.scss +6 -13
- package/package.json +1 -1
- package/tailwind-base.js +9 -9
- package/themes/default.scss +35 -12
package/README.md
CHANGED
|
@@ -1,32 +1,34 @@
|
|
|
1
|
-
# ACoreX Styles
|
|
2
1
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://acorexui.com/acorex-slang-dark.svg">
|
|
8
|
-
<img alt="Acorex - Design System, UI Framework, App Builder" src="https://acorexui.com/acorex-slang.svg" width="100%">
|
|
9
|
-
</picture>
|
|
10
|
-
</p>
|
|
11
|
-
|
|
12
|
-
<div style="text-align: center;">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://acorexui.com/public/acorex-slang-dark.svg">
|
|
4
|
+
<img alt="Acorex - Design System, UI Framework, App Builder" src="https://acorexui.com/public/acorex-slang-dark.svg" width="100%">
|
|
5
|
+
</picture>
|
|
13
6
|
|
|
14
7
|
[]()
|
|
15
8
|
|
|
16
|
-
|
|
9
|
+
# ACoreX
|
|
10
|
+
|
|
11
|
+
ACoreX is an UI framework based on angular. With over 50+ beautiful fully responsive and accessible components for everyone.
|
|
17
12
|
|
|
18
13
|
A few links to help you get started:
|
|
19
14
|
|
|
20
15
|
- [ACoreX: Documentation, Guides](https://acorexui.com)
|
|
21
16
|
|
|
22
|
-
##
|
|
17
|
+
## Team Leads
|
|
18
|
+
|
|
19
|
+
| Arash Oshnoudi | Ali Safari |
|
|
20
|
+
|--------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|
|
|
21
|
+
|  |  |
|
|
22
|
+
|
|
23
|
+
## Develop Team
|
|
24
|
+
|
|
25
|
+
| Reza Safari | Matin Givi | Shahin Kahrizi | Mohammad Parsaeifard | Mojtaba Erfan Rad |
|
|
26
|
+
|-----------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------|
|
|
27
|
+
|  |  |  |  |  |
|
|
23
28
|
|
|
24
|
-
| Arash Oshnoudi | Ali Safari | Matin Givi | Reza Safari |
|
|
25
|
-
| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
26
|
-
|  |  |  |  |
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
## Design Team
|
|
29
31
|
|
|
30
|
-
|
|
|
31
|
-
|
|
32
|
-
|  |  |
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
.ax-editor-container {
|
|
5
5
|
--ax-comp-editor-font-size: 0.875rem;
|
|
6
6
|
--ax-comp-editor-gap: 0.5rem;
|
|
7
|
-
--ax-comp-editor-space-start-size: 0.
|
|
8
|
-
--ax-comp-editor-space-end-size: 0.
|
|
7
|
+
--ax-comp-editor-space-start-size: 0.5rem;
|
|
8
|
+
--ax-comp-editor-space-end-size: 0.5rem;
|
|
9
|
+
--ax-comp-editor-space-block-size: 0.5rem;
|
|
9
10
|
--ax-comp-editor-height: var(--ax-sys-size-base);
|
|
10
11
|
--ax-comp-editor-placeholder-space-x: 0.75rem;
|
|
11
12
|
|
|
@@ -173,10 +174,7 @@
|
|
|
173
174
|
& > ax-suffix {
|
|
174
175
|
height: 100%;
|
|
175
176
|
|
|
176
|
-
ax-
|
|
177
|
-
ax-text,
|
|
178
|
-
ax-icon,
|
|
179
|
-
.ax-editor-container {
|
|
177
|
+
*:not(ax-kbd, ax-kbd-item, kbd) {
|
|
180
178
|
display: flex;
|
|
181
179
|
height: 100%;
|
|
182
180
|
align-items: center;
|
|
@@ -218,7 +216,6 @@
|
|
|
218
216
|
--ax-comp-editor-space-end-size: 0.25rem;
|
|
219
217
|
--ax-comp-editor-button-font-size: 0.625rem;
|
|
220
218
|
--ax-comp-editor-gap: 0.25rem;
|
|
221
|
-
--ax-comp-editor-height: 1.5rem;
|
|
222
219
|
}
|
|
223
220
|
.ax-sm .ax-editor-container,
|
|
224
221
|
.ax-editor-container.ax-sm {
|
|
@@ -227,17 +224,15 @@
|
|
|
227
224
|
--ax-comp-editor-space-end-size: 0.5rem;
|
|
228
225
|
--ax-comp-editor-button-font-size: 0.75rem;
|
|
229
226
|
--ax-comp-editor-gap: 0.375rem;
|
|
230
|
-
--ax-comp-editor-height: 1.969rem;
|
|
231
227
|
}
|
|
232
228
|
|
|
233
229
|
.ax-md .ax-editor-container,
|
|
234
230
|
.ax-editor-container,
|
|
235
231
|
.ax-editor-container.ax-md {
|
|
236
|
-
--ax-comp-editor-space-start-size:
|
|
237
|
-
--ax-comp-editor-space-end-size:
|
|
232
|
+
--ax-comp-editor-space-start-size: 0.5rem;
|
|
233
|
+
--ax-comp-editor-space-end-size: 0.5rem;
|
|
238
234
|
--ax-comp-editor-button-font-size: 0.875rem;
|
|
239
235
|
--ax-comp-editor-gap: 0.5rem;
|
|
240
|
-
--ax-comp-editor-height: 2.5rem;
|
|
241
236
|
}
|
|
242
237
|
|
|
243
238
|
.ax-lg .ax-editor-container,
|
|
@@ -247,7 +242,6 @@
|
|
|
247
242
|
--ax-comp-editor-space-end-size: 1.125rem;
|
|
248
243
|
--ax-comp-editor-button-font-size: 0.875rem;
|
|
249
244
|
--ax-comp-editor-gap: 0.625rem;
|
|
250
|
-
--ax-comp-editor-height: 3.375rem;
|
|
251
245
|
}
|
|
252
246
|
|
|
253
247
|
.ax-xl .ax-editor-container,
|
|
@@ -257,5 +251,4 @@
|
|
|
257
251
|
--ax-comp-editor-space-end-size: 1.5rem;
|
|
258
252
|
--ax-comp-editor-button-font-size: 1rem;
|
|
259
253
|
--ax-comp-editor-gap: 0.75rem;
|
|
260
|
-
--ax-comp-editor-height: 3.938rem;
|
|
261
254
|
}
|
package/package.json
CHANGED
package/tailwind-base.js
CHANGED
|
@@ -78,7 +78,7 @@ const UTILITY_CLASSES = {
|
|
|
78
78
|
'.heading': {
|
|
79
79
|
width: '100%',
|
|
80
80
|
'border-bottom': '1px solid',
|
|
81
|
-
'border-color': 'rgba(var(--ax-sys-border-
|
|
81
|
+
'border-color': 'rgba(var(--ax-sys-color-border-lightest-surface))',
|
|
82
82
|
'line-height': '0.1em',
|
|
83
83
|
margin: '1rem auto',
|
|
84
84
|
},
|
|
@@ -96,14 +96,14 @@ const UTILITY_CLASSES = {
|
|
|
96
96
|
'text-align': 'end',
|
|
97
97
|
},
|
|
98
98
|
'.links': {
|
|
99
|
-
color: 'rgba(var(--ax-sys-color-primary-
|
|
99
|
+
color: 'rgba(var(--ax-sys-color-primary-surface))',
|
|
100
100
|
cursor: 'pointer',
|
|
101
101
|
},
|
|
102
102
|
'.links:hover': {
|
|
103
103
|
'text-decoration': 'underline',
|
|
104
104
|
},
|
|
105
105
|
'.links:visited': {
|
|
106
|
-
color: 'rgba(var(--ax-sys-color-primary-
|
|
106
|
+
color: 'rgba(var(--ax-sys-color-primary-darker))',
|
|
107
107
|
},
|
|
108
108
|
'.animate-slow': {
|
|
109
109
|
animationDuration: '2s',
|
|
@@ -124,28 +124,28 @@ const UTILITY_CLASSES = {
|
|
|
124
124
|
animationDuration: '250ms',
|
|
125
125
|
},
|
|
126
126
|
'.card': {
|
|
127
|
-
backgroundColor: 'rgb(var(--ax-color-surface))',
|
|
127
|
+
backgroundColor: 'rgb(var(--ax-sys-color-surface))',
|
|
128
128
|
border: '1px solid',
|
|
129
|
-
borderColor: 'rgb(var(--ax-sys-border-
|
|
129
|
+
borderColor: 'rgb(var(--ax-sys-color-border-lightest-surface))',
|
|
130
130
|
borderRadius: 'var(--ax-sys-border-radius)',
|
|
131
131
|
},
|
|
132
132
|
'.tabs-fit': {
|
|
133
133
|
width: '100%',
|
|
134
134
|
},
|
|
135
135
|
'.xs': {
|
|
136
|
-
'--ax-sys-size-base': '
|
|
136
|
+
'--ax-sys-size-base': '1.5rem',
|
|
137
137
|
},
|
|
138
138
|
'.sm': {
|
|
139
|
-
'--ax-sys-size-base': '
|
|
139
|
+
'--ax-sys-size-base': '2rem',
|
|
140
140
|
},
|
|
141
141
|
'.md': {
|
|
142
142
|
'--ax-sys-size-base': '2.5rem',
|
|
143
143
|
},
|
|
144
144
|
'.lg': {
|
|
145
|
-
'--ax-sys-size-base': '
|
|
145
|
+
'--ax-sys-size-base': '3.375rem',
|
|
146
146
|
},
|
|
147
147
|
'.xl': {
|
|
148
|
-
'--ax-sys-size-base': '
|
|
148
|
+
'--ax-sys-size-base': '4rem',
|
|
149
149
|
},
|
|
150
150
|
'.surface': {
|
|
151
151
|
backgroundColor: 'rgb(var(--ax-sys-color-surface))',
|
package/themes/default.scss
CHANGED
|
@@ -1,38 +1,61 @@
|
|
|
1
|
-
@use '../utils/index.scss' as
|
|
1
|
+
@use '../utils/index.scss' as utils; // import ACoreX utilities for using generate-pallete-variables function
|
|
2
2
|
|
|
3
|
+
/*
|
|
4
|
+
Color themes that have multiple fixed primary colors, etc. that can range from 50 to 950, also generate 7 surfaces of these colors by default that are used to color components. If these colors have the same value, they are used for light mode and dark mode, but if you give the color key two colors, it uses the first color for light mode and the second color for dark mode. For example, you can see the color Danger
|
|
5
|
+
*/
|
|
3
6
|
$theme-colors: (
|
|
4
7
|
'primary': oklch(0.623 0.214 259.815),
|
|
5
|
-
'secondary':
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
'secondary': (
|
|
9
|
+
oklch(24.65% 0.0531 250.05),
|
|
10
|
+
oklch(47.03% 0.0531 250.05),
|
|
11
|
+
),
|
|
12
|
+
'success': (
|
|
13
|
+
oklch(62.71% 0.1699 149.21),
|
|
14
|
+
oklch(80.03% 0.1821 151.71),
|
|
15
|
+
),
|
|
16
|
+
'warning': (
|
|
17
|
+
oklch(81.17% 0.188 70.08),
|
|
18
|
+
oklch(86.5% 0.188 70.08),
|
|
19
|
+
),
|
|
8
20
|
'danger': (
|
|
9
21
|
oklch(0.645 0.246 16.439),
|
|
10
22
|
oklch(0.712 0.194 13.428),
|
|
11
23
|
),
|
|
12
24
|
);
|
|
13
25
|
|
|
26
|
+
/*
|
|
27
|
+
Surface colors for creating layouts, each color has a start and an end,
|
|
28
|
+
which we use to create the color spectrum of surfaces.
|
|
29
|
+
The colors are different for dark and light mode.
|
|
30
|
+
*/
|
|
14
31
|
$theme-surfaces: (
|
|
32
|
+
// Surfaces for light mode
|
|
15
33
|
'light-start': #ffffff,
|
|
16
34
|
'light-end': #d4d4d4,
|
|
35
|
+
|
|
36
|
+
// Surfaces for dark mode
|
|
17
37
|
'dark-start': #27272a,
|
|
18
|
-
'dark-end': #09090b
|
|
38
|
+
'dark-end': #09090b
|
|
19
39
|
);
|
|
20
40
|
|
|
21
41
|
$options: (
|
|
22
42
|
'color-range': true,
|
|
43
|
+
// Color range production 50 to 950, if you don't need them you can put false
|
|
23
44
|
'light': #ffffff,
|
|
24
|
-
|
|
45
|
+
// White is always a fixed color in the project, used in some special cases and does not change in light mode and dark mode.
|
|
46
|
+
'dark': #09090b, // // dark is always a fixed color in the project, used in some special cases and does not change in light mode and dark mode.
|
|
25
47
|
);
|
|
26
48
|
|
|
49
|
+
/*
|
|
50
|
+
Importing default variables and overriding them with higher values
|
|
51
|
+
*/
|
|
27
52
|
@forward '../variables/index.scss';
|
|
28
53
|
|
|
29
54
|
:root,
|
|
30
55
|
.ax-light {
|
|
31
|
-
--ax-sys-body-font-size: 1rem;
|
|
32
|
-
--ax-sys-size-base: 2.5rem;
|
|
33
|
-
--ax-sys-border-radius: 0.5rem;
|
|
34
|
-
--ax-sys-color-body-text: 0, 0, 0;
|
|
35
|
-
--ax-sys-color-input-text: 0, 0, 0;
|
|
56
|
+
--ax-sys-body-font-size: 1rem; // Body font size
|
|
57
|
+
--ax-sys-size-base: 2.5rem; // Variable height of elements, such as inputs and buttons
|
|
58
|
+
--ax-sys-border-radius: 0.5rem; // Default roundness value for corners
|
|
36
59
|
}
|
|
37
60
|
|
|
38
|
-
@include generate-pallete-variables($theme-colors, $theme-surfaces, $options);
|
|
61
|
+
@include utils.generate-pallete-variables($theme-colors, $theme-surfaces, $options);
|