@acorex/styles 19.11.9 → 19.11.10
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
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
3
|
*/
|
|
4
|
+
const variations = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
|
|
4
5
|
|
|
5
6
|
export const createPalette = function (colorName) {
|
|
6
7
|
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
@@ -21,10 +22,9 @@ export const createPalette = function (colorName) {
|
|
|
21
22
|
* This function generates seven surface colors. Also, if you want to have surfaces in all Tailwind properties, you can put them in colors.
|
|
22
23
|
*/
|
|
23
24
|
export const createSurfaces = function (colorName) {
|
|
24
|
-
const variations = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
|
|
25
|
-
|
|
26
25
|
return variations.reduce((surfaces, variation) => {
|
|
27
|
-
|
|
26
|
+
const surfaceVariant = variation === 'surface' ? '' : '-surface';
|
|
27
|
+
surfaces[variation] = `rgba(var(--ax-sys-color-${colorName}-${variation}${surfaceVariant}), <alpha-value>)`;
|
|
28
28
|
return surfaces;
|
|
29
29
|
}, {});
|
|
30
30
|
};
|
|
@@ -34,11 +34,10 @@ export const createSurfaces = function (colorName) {
|
|
|
34
34
|
* so you can generate it with createOnSurface for both text and other colors.
|
|
35
35
|
*/
|
|
36
36
|
export const createOnSurfaces = function (colorName) {
|
|
37
|
-
const variations = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest', 'contrast'];
|
|
38
|
-
|
|
39
37
|
return variations.reduce((onSurfaces, variation) => {
|
|
38
|
+
const surfaceVariant = variation === 'surface' ? '' : '-surface';
|
|
40
39
|
const key = variation === 'contrast' ? `on-${variation}` : `on-${variation}`;
|
|
41
|
-
onSurfaces[key] = `rgba(var(--ax-sys-color-on-${colorName}-${variation}), <alpha-value>)`;
|
|
40
|
+
onSurfaces[key] = `rgba(var(--ax-sys-color-on-${colorName}-${variation}${surfaceVariant}), <alpha-value>)`;
|
|
42
41
|
return onSurfaces;
|
|
43
42
|
}, {});
|
|
44
43
|
};
|
|
@@ -47,22 +46,22 @@ export const createOnSurfaces = function (colorName) {
|
|
|
47
46
|
* The board color is only used for border colors, which you can generate with the createBorderSurfaces function.
|
|
48
47
|
*/
|
|
49
48
|
export const createBorderSurfaces = function (colorName) {
|
|
50
|
-
const variations = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
|
|
51
|
-
|
|
52
49
|
return variations.reduce((borderSurfaces, variation) => {
|
|
53
|
-
|
|
50
|
+
const surfaceVariant = variation === 'surface' ? '' : '-surface';
|
|
51
|
+
borderSurfaces[variation] =
|
|
52
|
+
`rgba(var(--ax-sys-color-border-${colorName}-${variation}${surfaceVariant}), <alpha-value>)`;
|
|
54
53
|
return borderSurfaces;
|
|
55
54
|
}, {});
|
|
56
55
|
};
|
|
57
56
|
|
|
58
57
|
export function createColoredSurfaces(colorName) {
|
|
59
|
-
const variations = ['surface', 'lightest', 'lighter', 'light', 'dark', 'darker', 'darkest'];
|
|
60
|
-
|
|
61
58
|
return variations.reduce((classes, variation) => {
|
|
59
|
+
const surfaceVariant = variation === 'surface' ? '' : '-surface';
|
|
60
|
+
|
|
62
61
|
classes[`.${colorName}-${variation}`] = {
|
|
63
|
-
backgroundColor: `rgb(var(--ax-sys-color-${colorName}-${variation}))`,
|
|
64
|
-
color: `rgb(var(--ax-sys-color-on-${colorName}-${variation}))`,
|
|
65
|
-
borderColor: `rgb(var(--ax-sys-color-border-${colorName}-${variation}))`,
|
|
62
|
+
backgroundColor: `rgb(var(--ax-sys-color-${colorName}-${variation}${surfaceVariant}))`,
|
|
63
|
+
color: `rgb(var(--ax-sys-color-on-${colorName}-${variation}${surfaceVariant}))`,
|
|
64
|
+
borderColor: `rgb(var(--ax-sys-color-border-${colorName}-${variation}${surfaceVariant}))`,
|
|
66
65
|
};
|
|
67
66
|
return classes;
|
|
68
67
|
}, {});
|