@acorex/styles 19.8.0-next.18 → 19.8.0-next.19
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/package.json +1 -1
- package/tailwind-base.js +42 -4
package/package.json
CHANGED
package/tailwind-base.js
CHANGED
|
@@ -38,6 +38,12 @@ const _bgColors = {
|
|
|
38
38
|
'surface-dark': 'rgba(var(--ax-sys-color-surface-dark), <alpha-value>)',
|
|
39
39
|
'surface-input': 'rgba(var(--ax-sys-color-input-surface), <alpha-value>)',
|
|
40
40
|
..._onColors,
|
|
41
|
+
primary: { DEFAULT: 'rgba(var(--ax-sys-color-primary-500), <alpha-value>)' },
|
|
42
|
+
secondary: { DEFAULT: 'rgba(var(--ax-sys-color-secondary-500), <alpha-value>)' },
|
|
43
|
+
success: { DEFAULT: 'rgba(var(--ax-sys-color-success-500), <alpha-value>)' },
|
|
44
|
+
warning: { DEFAULT: 'rgba(var(--ax-sys-color-warning-500), <alpha-value>)' },
|
|
45
|
+
danger: { DEFAULT: 'rgba(var(--ax-sys-color-danger-500), <alpha-value>)' },
|
|
46
|
+
ghost: { DEFAULT: 'rgba(var(--ax-sys-color-ghost-500), <alpha-value>)' },
|
|
41
47
|
};
|
|
42
48
|
|
|
43
49
|
const _textColors = {
|
|
@@ -50,6 +56,12 @@ const _textColors = {
|
|
|
50
56
|
'surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
|
|
51
57
|
'surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
|
|
52
58
|
'surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
|
|
59
|
+
primary: { DEFAULT: 'rgba(var(--ax-sys-color-on-primary), <alpha-value>)' },
|
|
60
|
+
secondary: { DEFAULT: 'rgba(var(--ax-sys-color-on-secondary), <alpha-value>)' },
|
|
61
|
+
success: { DEFAULT: 'rgba(var(--ax-sys-color-on-success), <alpha-value>)' },
|
|
62
|
+
warning: { DEFAULT: 'rgba(var(--ax-sys-color-on-warning), <alpha-value>)' },
|
|
63
|
+
danger: { DEFAULT: 'rgba(var(--ax-sys-color-on-danger), <alpha-value>)' },
|
|
64
|
+
ghost: { DEFAULT: 'rgba(var(--ax-sys-color-on-ghost), <alpha-value>)' },
|
|
53
65
|
};
|
|
54
66
|
|
|
55
67
|
const _borderColors = {
|
|
@@ -60,13 +72,38 @@ const _borderColors = {
|
|
|
60
72
|
'surface-high': 'rgba(var(--ax-sys-color-border-surface-high), <alpha-value>)',
|
|
61
73
|
'surface-dark': 'rgba(var(--ax-sys-color-border-surface-dark), <alpha-value>)',
|
|
62
74
|
'surface-highest': 'rgba(var(--ax-sys-color-border-surface-highest), <alpha-value>)',
|
|
75
|
+
primary: { DEFAULT: 'rgba(var(--ax-sys-color-primary-500), <alpha-value>)' },
|
|
76
|
+
secondary: { DEFAULT: 'rgba(var(--ax-sys-color-secondary-500), <alpha-value>)' },
|
|
77
|
+
success: { DEFAULT: 'rgba(var(--ax-sys-color-success-500), <alpha-value>)' },
|
|
78
|
+
warning: { DEFAULT: 'rgba(var(--ax-sys-color-warning-500), <alpha-value>)' },
|
|
79
|
+
danger: { DEFAULT: 'rgba(var(--ax-sys-color-danger-500), <alpha-value>)' },
|
|
80
|
+
ghost: { DEFAULT: 'rgba(var(--ax-sys-color-ghost-500), <alpha-value>)' },
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
const _onColor = {
|
|
84
|
+
on: {
|
|
85
|
+
primary: 'rgba(var(--ax-sys-color-on-primary), <alpha-value>)',
|
|
86
|
+
secondary: 'rgba(var(--ax-sys-color-on-secondary), <alpha-value>)',
|
|
87
|
+
success: 'rgba(var(--ax-sys-color-on-success), <alpha-value>)',
|
|
88
|
+
warning: 'rgba(var(--ax-sys-color-on-warning), <alpha-value>)',
|
|
89
|
+
danger: 'rgba(var(--ax-sys-color-on-danger), <alpha-value>)',
|
|
90
|
+
ghost: 'rgba(var(--ax-sys-color-on-ghost), <alpha-value>)',
|
|
91
|
+
},
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
const _onContrastColor = {
|
|
95
|
+
'on-contrast': {
|
|
96
|
+
primary: 'rgba(var(--ax-sys-color-on-contrast-primary), <alpha-value>)',
|
|
97
|
+
secondary: 'rgba(var(--ax-sys-color-on-contrast-secondary), <alpha-value>)',
|
|
98
|
+
success: 'rgba(var(--ax-sys-color-on-contrast-success), <alpha-value>)',
|
|
99
|
+
warning: 'rgba(var(--ax-sys-color-on-contrast-warning), <alpha-value>)',
|
|
100
|
+
danger: 'rgba(var(--ax-sys-color-on-contrast-danger), <alpha-value>)',
|
|
101
|
+
ghost: 'rgba(var(--ax-sys-color-on-contrast-ghost), <alpha-value>)',
|
|
102
|
+
},
|
|
63
103
|
};
|
|
64
104
|
|
|
65
105
|
const createPalete = function (colorName) {
|
|
66
106
|
return {
|
|
67
|
-
DEFAULT: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
|
|
68
|
-
text: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
|
|
69
|
-
'contrast-text': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
|
|
70
107
|
50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
|
|
71
108
|
100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
|
|
72
109
|
200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
|
|
@@ -94,6 +131,8 @@ module.exports = withAnimations({
|
|
|
94
131
|
danger: createPalete('danger'),
|
|
95
132
|
warning: createPalete('warning'),
|
|
96
133
|
ghost: createPalete('ghost'),
|
|
134
|
+
..._onColor,
|
|
135
|
+
..._onContrastColor,
|
|
97
136
|
},
|
|
98
137
|
textColor: {
|
|
99
138
|
..._textColors,
|
|
@@ -101,7 +140,6 @@ module.exports = withAnimations({
|
|
|
101
140
|
backgroundColor: {
|
|
102
141
|
..._bgColors,
|
|
103
142
|
},
|
|
104
|
-
|
|
105
143
|
borderColor: {
|
|
106
144
|
DEFAULT: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
|
|
107
145
|
default: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
|