@acorex/styles 19.10.1 → 19.10.3
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/generators/tailwind-class-generator.js +18 -0
- package/package.json +1 -1
- package/tailwind-base.js +14 -6
- package/themes/default.scss +12 -5
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
|
-
|  |  |
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* You can give it the variable name you added in the theme file as input and generate color range classes from 50 to 950.
|
|
3
|
+
*/
|
|
4
|
+
|
|
1
5
|
export const createPalette = function (colorName) {
|
|
2
6
|
return {
|
|
3
7
|
DEFAULT: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
|
|
@@ -15,6 +19,11 @@ export const createPalette = function (colorName) {
|
|
|
15
19
|
950: `rgba(var(--ax-sys-color-${colorName}-950), <alpha-value>)`,
|
|
16
20
|
};
|
|
17
21
|
};
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* To be able to create additional color classes you need to use the createSurface.
|
|
25
|
+
* This function generates seven surface colors. Also, if you want to have surfaces in all Tailwind properties, you can put them in colors.
|
|
26
|
+
*/
|
|
18
27
|
export const createSurfaces = function (colorName) {
|
|
19
28
|
return {
|
|
20
29
|
lightest: `rgba(var(--ax-sys-color-${colorName}-lightest-surface), <alpha-value>)`,
|
|
@@ -27,6 +36,11 @@ export const createSurfaces = function (colorName) {
|
|
|
27
36
|
on: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
|
|
28
37
|
};
|
|
29
38
|
};
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* The on surface color is based on the surface color of the same name,
|
|
42
|
+
* so you can generate it with createOnSurface for both text and other colors.
|
|
43
|
+
*/
|
|
30
44
|
export const createOnSurfaces = function (colorName) {
|
|
31
45
|
return {
|
|
32
46
|
'on-lightest': `rgba(var(--ax-sys-color-on-${colorName}-lightest-surface), <alpha-value>)`,
|
|
@@ -39,6 +53,10 @@ export const createOnSurfaces = function (colorName) {
|
|
|
39
53
|
'on-contrast': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
|
|
40
54
|
};
|
|
41
55
|
};
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* The board color is only used for border colors, which you can generate with the createBorderSurfaces function.
|
|
59
|
+
*/
|
|
42
60
|
export const createBorderSurfaces = function (colorName) {
|
|
43
61
|
return {
|
|
44
62
|
lightest: `rgba(var(--ax-sys-color-border-${colorName}-lightest-surface), <alpha-value>)`,
|
package/package.json
CHANGED
package/tailwind-base.js
CHANGED
|
@@ -10,11 +10,15 @@ const childSelector = plugin(function ({ addVariant }) {
|
|
|
10
10
|
});
|
|
11
11
|
|
|
12
12
|
const SURFACE_BG = {
|
|
13
|
+
DEFAULT: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
|
|
13
14
|
default: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
|
|
15
|
+
|
|
14
16
|
lightest: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
|
|
15
17
|
lighter: 'rgba(var(--ax-sys-color-lighter-surface), <alpha-value>)',
|
|
16
18
|
light: 'rgba(var(--ax-sys-color-light-surface), <alpha-value>)',
|
|
19
|
+
|
|
17
20
|
surface: 'rgba(var(--ax-sys-color-surface), <alpha-value>)',
|
|
21
|
+
|
|
18
22
|
dark: 'rgba(var(--ax-sys-color-dark-surface), <alpha-value>)',
|
|
19
23
|
darker: 'rgba(var(--ax-sys-color-darker-surface), <alpha-value>)',
|
|
20
24
|
darkest: 'rgba(var(--ax-sys-color-darkest-surface), <alpha-value>)',
|
|
@@ -22,11 +26,15 @@ const SURFACE_BG = {
|
|
|
22
26
|
|
|
23
27
|
const SURFACES_ON = {
|
|
24
28
|
on: {
|
|
29
|
+
DEFAULT: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
|
|
30
|
+
default: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
|
|
31
|
+
|
|
25
32
|
lightest: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
|
|
26
33
|
lighter: 'rgba(var(--ax-sys-color-on-lighter-surface), <alpha-value>)',
|
|
27
34
|
light: 'rgba(var(--ax-sys-color-on-light-surface), <alpha-value>)',
|
|
28
|
-
|
|
35
|
+
|
|
29
36
|
surface: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
|
|
37
|
+
|
|
30
38
|
dark: 'rgba(var(--ax-sys-color-on-dark-surface), <alpha-value>)',
|
|
31
39
|
darker: 'rgba(var(--ax-sys-color-on-darker-surface), <alpha-value>)',
|
|
32
40
|
darkest: 'rgba(var(--ax-sys-color-on-darkest-surface), <alpha-value>)',
|
|
@@ -34,11 +42,15 @@ const SURFACES_ON = {
|
|
|
34
42
|
};
|
|
35
43
|
|
|
36
44
|
const SURFACE_BORDER = {
|
|
45
|
+
DEFAULT: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
|
|
46
|
+
default: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
|
|
47
|
+
|
|
37
48
|
lightest: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
|
|
38
49
|
lighter: 'rgba(var(--ax-sys-color-border-lighter-surface), <alpha-value>)',
|
|
39
50
|
light: 'rgba(var(--ax-sys-color-border-light-surface), <alpha-value>)',
|
|
40
|
-
|
|
51
|
+
|
|
41
52
|
surface: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
|
|
53
|
+
|
|
42
54
|
dark: 'rgba(var(--ax-sys-color-border-dark-surface), <alpha-value>)',
|
|
43
55
|
darker: 'rgba(var(--ax-sys-color-border-darker-surface), <alpha-value>)',
|
|
44
56
|
darkest: 'rgba(var(--ax-sys-color-border-darkest-surface), <alpha-value>)',
|
|
@@ -218,8 +230,6 @@ module.exports = withAnimations({
|
|
|
218
230
|
...SURFACES_ON,
|
|
219
231
|
},
|
|
220
232
|
backgroundColor: {
|
|
221
|
-
DEFAULT: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
|
|
222
|
-
default: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
|
|
223
233
|
primary: createSurfaces('primary'),
|
|
224
234
|
secondary: createSurfaces('secondary'),
|
|
225
235
|
success: createSurfaces('success'),
|
|
@@ -229,8 +239,6 @@ module.exports = withAnimations({
|
|
|
229
239
|
...SURFACES_ON,
|
|
230
240
|
},
|
|
231
241
|
borderColor: {
|
|
232
|
-
DEFAULT: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
|
|
233
|
-
default: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
|
|
234
242
|
primary: createBorderSurfaces('primary'),
|
|
235
243
|
secondary: createBorderSurfaces('secondary'),
|
|
236
244
|
success: createBorderSurfaces('success'),
|
package/themes/default.scss
CHANGED
|
@@ -5,13 +5,20 @@ Color themes that have multiple fixed primary colors, etc. that can range from 5
|
|
|
5
5
|
*/
|
|
6
6
|
$theme-colors: (
|
|
7
7
|
'primary': oklch(0.623 0.214 259.815),
|
|
8
|
-
'secondary':
|
|
9
|
-
|
|
10
|
-
|
|
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
|
+
),
|
|
11
20
|
'danger': (
|
|
12
|
-
// Danger color for light mode
|
|
13
21
|
oklch(0.645 0.246 16.439),
|
|
14
|
-
// Danger color for dark mode
|
|
15
22
|
oklch(0.712 0.194 13.428),
|
|
16
23
|
),
|
|
17
24
|
);
|