@netlify/spark-ui 1.32.1 → 1.34.0-alpha.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/README.md +17 -1
- package/package.json +5 -1
- package/packages/styles/app.css +189 -0
- package/packages/styles/tokens.compat.css +375 -1
- package/packages/styles/tokens.css +707 -333
- package/packages/tokens/app.d.ts +114 -0
- package/packages/tokens/app.js +114 -0
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/* Autogenerated by scripts/app-tokens-plugin.mjs. DO NOT EDIT! */
|
|
2
|
+
|
|
3
|
+
export declare const colorFacetsBlue000: string;
|
|
4
|
+
export declare const colorFacetsBlue100: string;
|
|
5
|
+
export declare const colorFacetsBlue200: string;
|
|
6
|
+
export declare const colorFacetsBlue300: string;
|
|
7
|
+
export declare const colorFacetsBlue400: string;
|
|
8
|
+
export declare const colorFacetsBlue500: string;
|
|
9
|
+
export declare const colorFacetsBlue600: string;
|
|
10
|
+
export declare const colorFacetsBlue700: string;
|
|
11
|
+
export declare const colorFacetsBlue800: string;
|
|
12
|
+
export declare const colorFacetsBlue900: string;
|
|
13
|
+
export declare const colorFacetsGold000: string;
|
|
14
|
+
export declare const colorFacetsGold100: string;
|
|
15
|
+
export declare const colorFacetsGold200: string;
|
|
16
|
+
export declare const colorFacetsGold300: string;
|
|
17
|
+
export declare const colorFacetsGold400: string;
|
|
18
|
+
export declare const colorFacetsGold500: string;
|
|
19
|
+
export declare const colorFacetsGold600: string;
|
|
20
|
+
export declare const colorFacetsGold700: string;
|
|
21
|
+
export declare const colorFacetsGold800: string;
|
|
22
|
+
export declare const colorFacetsGold900: string;
|
|
23
|
+
export declare const colorFacetsGreen000: string;
|
|
24
|
+
export declare const colorFacetsGreen100: string;
|
|
25
|
+
export declare const colorFacetsGreen200: string;
|
|
26
|
+
export declare const colorFacetsGreen300: string;
|
|
27
|
+
export declare const colorFacetsGreen400: string;
|
|
28
|
+
export declare const colorFacetsGreen500: string;
|
|
29
|
+
export declare const colorFacetsGreen600: string;
|
|
30
|
+
export declare const colorFacetsGreen700: string;
|
|
31
|
+
export declare const colorFacetsGreen800: string;
|
|
32
|
+
export declare const colorFacetsGreen900: string;
|
|
33
|
+
export declare const colorFacetsNeutralDark000: string;
|
|
34
|
+
export declare const colorFacetsNeutralDark100: string;
|
|
35
|
+
export declare const colorFacetsNeutralDark200: string;
|
|
36
|
+
export declare const colorFacetsNeutralDark300: string;
|
|
37
|
+
export declare const colorFacetsNeutralDark400: string;
|
|
38
|
+
export declare const colorFacetsNeutralDark500: string;
|
|
39
|
+
export declare const colorFacetsNeutralDark600: string;
|
|
40
|
+
export declare const colorFacetsNeutralDark700: string;
|
|
41
|
+
export declare const colorFacetsNeutralDark800: string;
|
|
42
|
+
export declare const colorFacetsNeutralDark900: string;
|
|
43
|
+
export declare const colorFacetsNeutralLight000: string;
|
|
44
|
+
export declare const colorFacetsNeutralLight100: string;
|
|
45
|
+
export declare const colorFacetsNeutralLight200: string;
|
|
46
|
+
export declare const colorFacetsNeutralLight300: string;
|
|
47
|
+
export declare const colorFacetsNeutralLight400: string;
|
|
48
|
+
export declare const colorFacetsNeutralLight500: string;
|
|
49
|
+
export declare const colorFacetsNeutralLight600: string;
|
|
50
|
+
export declare const colorFacetsNeutralLight700: string;
|
|
51
|
+
export declare const colorFacetsNeutralLight800: string;
|
|
52
|
+
export declare const colorFacetsPink000: string;
|
|
53
|
+
export declare const colorFacetsPink100: string;
|
|
54
|
+
export declare const colorFacetsPink200: string;
|
|
55
|
+
export declare const colorFacetsPink300: string;
|
|
56
|
+
export declare const colorFacetsPink400: string;
|
|
57
|
+
export declare const colorFacetsPink500: string;
|
|
58
|
+
export declare const colorFacetsPink600: string;
|
|
59
|
+
export declare const colorFacetsPink700: string;
|
|
60
|
+
export declare const colorFacetsPink800: string;
|
|
61
|
+
export declare const colorFacetsPink900: string;
|
|
62
|
+
export declare const colorFacetsPurple000: string;
|
|
63
|
+
export declare const colorFacetsPurple100: string;
|
|
64
|
+
export declare const colorFacetsPurple200: string;
|
|
65
|
+
export declare const colorFacetsPurple300: string;
|
|
66
|
+
export declare const colorFacetsPurple400: string;
|
|
67
|
+
export declare const colorFacetsPurple500: string;
|
|
68
|
+
export declare const colorFacetsPurple600: string;
|
|
69
|
+
export declare const colorFacetsPurple700: string;
|
|
70
|
+
export declare const colorFacetsPurple800: string;
|
|
71
|
+
export declare const colorFacetsPurple900: string;
|
|
72
|
+
export declare const colorFacetsRed000: string;
|
|
73
|
+
export declare const colorFacetsRed100: string;
|
|
74
|
+
export declare const colorFacetsRed200: string;
|
|
75
|
+
export declare const colorFacetsRed300: string;
|
|
76
|
+
export declare const colorFacetsRed400: string;
|
|
77
|
+
export declare const colorFacetsRed500: string;
|
|
78
|
+
export declare const colorFacetsRed600: string;
|
|
79
|
+
export declare const colorFacetsRed700: string;
|
|
80
|
+
export declare const colorFacetsRed800: string;
|
|
81
|
+
export declare const colorFacetsRed900: string;
|
|
82
|
+
export declare const colorFacetsTeal000: string;
|
|
83
|
+
export declare const colorFacetsTeal100: string;
|
|
84
|
+
export declare const colorFacetsTeal200: string;
|
|
85
|
+
export declare const colorFacetsTeal300: string;
|
|
86
|
+
export declare const colorFacetsTeal400: string;
|
|
87
|
+
export declare const colorFacetsTeal500: string;
|
|
88
|
+
export declare const colorFacetsTeal600: string;
|
|
89
|
+
export declare const colorFacetsTeal700: string;
|
|
90
|
+
export declare const colorFacetsTeal800: string;
|
|
91
|
+
export declare const colorFacetsTeal900: string;
|
|
92
|
+
export declare const effectShadowDarkDeep: string;
|
|
93
|
+
export declare const effectShadowDarkShallow: string;
|
|
94
|
+
export declare const effectShadowLightDeep: string;
|
|
95
|
+
export declare const effectShadowLightShallow: string;
|
|
96
|
+
export declare const sizeBorderRadiusBig: string;
|
|
97
|
+
export declare const sizeBorderRadiusSmall: string;
|
|
98
|
+
export declare const typographyFontsMono: string;
|
|
99
|
+
export declare const typographyFontsSans: string;
|
|
100
|
+
export declare const typographySize4xl: string;
|
|
101
|
+
export declare const typographySizeLarge: string;
|
|
102
|
+
export declare const typographySizeMedium: string;
|
|
103
|
+
export declare const typographySizeSmall: string;
|
|
104
|
+
export declare const typographySizeTiny: string;
|
|
105
|
+
export declare const typographySizeXl: string;
|
|
106
|
+
export declare const typographySizeXxl: string;
|
|
107
|
+
export declare const typographySizeXxxl: string;
|
|
108
|
+
export declare const typographyWeightBlack: number;
|
|
109
|
+
export declare const typographyWeightBold: number;
|
|
110
|
+
export declare const typographyWeightLight: number;
|
|
111
|
+
export declare const typographyWeightMedium: number;
|
|
112
|
+
export declare const typographyWeightRegular: number;
|
|
113
|
+
export declare const typographyWeightSemibold: number;
|
|
114
|
+
export declare const typographyWeightThin: number;
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/* Autogenerated by scripts/app-tokens-plugin.mjs. DO NOT EDIT! */
|
|
2
|
+
|
|
3
|
+
export const colorFacetsBlue000 = "#edf4ff";
|
|
4
|
+
export const colorFacetsBlue100 = "#cde2ff";
|
|
5
|
+
export const colorFacetsBlue200 = "#b5d2fb";
|
|
6
|
+
export const colorFacetsBlue300 = "#9cbef6";
|
|
7
|
+
export const colorFacetsBlue400 = "#80abfa";
|
|
8
|
+
export const colorFacetsBlue500 = "#5d8df5";
|
|
9
|
+
export const colorFacetsBlue600 = "#316bf4";
|
|
10
|
+
export const colorFacetsBlue700 = "#2e51ed";
|
|
11
|
+
export const colorFacetsBlue800 = "#2036a1";
|
|
12
|
+
export const colorFacetsBlue900 = "#1b205b";
|
|
13
|
+
export const colorFacetsGold000 = "#fdf5d8";
|
|
14
|
+
export const colorFacetsGold100 = "#f6e0a5";
|
|
15
|
+
export const colorFacetsGold200 = "#facd6f";
|
|
16
|
+
export const colorFacetsGold300 = "#fbb13d";
|
|
17
|
+
export const colorFacetsGold400 = "#f98e21";
|
|
18
|
+
export const colorFacetsGold500 = "#d5771a";
|
|
19
|
+
export const colorFacetsGold600 = "#a85d13";
|
|
20
|
+
export const colorFacetsGold700 = "#8c4c0d";
|
|
21
|
+
export const colorFacetsGold800 = "#603408";
|
|
22
|
+
export const colorFacetsGold900 = "#332213";
|
|
23
|
+
export const colorFacetsGreen000 = "#e7fce9";
|
|
24
|
+
export const colorFacetsGreen100 = "#bef9c6";
|
|
25
|
+
export const colorFacetsGreen200 = "#93f5a5";
|
|
26
|
+
export const colorFacetsGreen300 = "#64d87f";
|
|
27
|
+
export const colorFacetsGreen400 = "#3ac364";
|
|
28
|
+
export const colorFacetsGreen500 = "#31a855";
|
|
29
|
+
export const colorFacetsGreen600 = "#228240";
|
|
30
|
+
export const colorFacetsGreen700 = "#1a6b34";
|
|
31
|
+
export const colorFacetsGreen800 = "#0f4a21";
|
|
32
|
+
export const colorFacetsGreen900 = "#152a19";
|
|
33
|
+
export const colorFacetsNeutralDark000 = "#ffffff";
|
|
34
|
+
export const colorFacetsNeutralDark100 = "#e6ecf2";
|
|
35
|
+
export const colorFacetsNeutralDark200 = "#abb5bf";
|
|
36
|
+
export const colorFacetsNeutralDark300 = "#7e8792";
|
|
37
|
+
export const colorFacetsNeutralDark400 = "#4d565f";
|
|
38
|
+
export const colorFacetsNeutralDark500 = "#3b434c";
|
|
39
|
+
export const colorFacetsNeutralDark600 = "#272f38";
|
|
40
|
+
export const colorFacetsNeutralDark700 = "#1e242c";
|
|
41
|
+
export const colorFacetsNeutralDark800 = "#12181f";
|
|
42
|
+
export const colorFacetsNeutralDark900 = "#060b10";
|
|
43
|
+
export const colorFacetsNeutralLight000 = "#ffffff";
|
|
44
|
+
export const colorFacetsNeutralLight100 = "#f6f6f7";
|
|
45
|
+
export const colorFacetsNeutralLight200 = "#e9ebed";
|
|
46
|
+
export const colorFacetsNeutralLight300 = "#d1d5da";
|
|
47
|
+
export const colorFacetsNeutralLight400 = "#9da7b2";
|
|
48
|
+
export const colorFacetsNeutralLight500 = "#778089";
|
|
49
|
+
export const colorFacetsNeutralLight600 = "#545a61";
|
|
50
|
+
export const colorFacetsNeutralLight700 = "#353a3e";
|
|
51
|
+
export const colorFacetsNeutralLight800 = "#181a1c";
|
|
52
|
+
export const colorFacetsPink000 = "#fcf0fb";
|
|
53
|
+
export const colorFacetsPink100 = "#f6d2f2";
|
|
54
|
+
export const colorFacetsPink200 = "#f7bcf3";
|
|
55
|
+
export const colorFacetsPink300 = "#f3a8ee";
|
|
56
|
+
export const colorFacetsPink400 = "#ef7feb";
|
|
57
|
+
export const colorFacetsPink500 = "#df5adc";
|
|
58
|
+
export const colorFacetsPink600 = "#b938b8";
|
|
59
|
+
export const colorFacetsPink700 = "#9a2d99";
|
|
60
|
+
export const colorFacetsPink800 = "#6c1d6b";
|
|
61
|
+
export const colorFacetsPink900 = "#381b37";
|
|
62
|
+
export const colorFacetsPurple000 = "#f5f2fc";
|
|
63
|
+
export const colorFacetsPurple100 = "#e2d9f7";
|
|
64
|
+
export const colorFacetsPurple200 = "#d8c7ff";
|
|
65
|
+
export const colorFacetsPurple300 = "#cab9f4";
|
|
66
|
+
export const colorFacetsPurple400 = "#b49df1";
|
|
67
|
+
export const colorFacetsPurple500 = "#9b80ed";
|
|
68
|
+
export const colorFacetsPurple600 = "#775ce7";
|
|
69
|
+
export const colorFacetsPurple700 = "#614aca";
|
|
70
|
+
export const colorFacetsPurple800 = "#382aa4";
|
|
71
|
+
export const colorFacetsPurple900 = "#292142";
|
|
72
|
+
export const colorFacetsRed000 = "#fbeeed";
|
|
73
|
+
export const colorFacetsRed100 = "#fbd3d0";
|
|
74
|
+
export const colorFacetsRed200 = "#ffbdba";
|
|
75
|
+
export const colorFacetsRed300 = "#ffada9";
|
|
76
|
+
export const colorFacetsRed400 = "#fe8382";
|
|
77
|
+
export const colorFacetsRed500 = "#fe4e5c";
|
|
78
|
+
export const colorFacetsRed600 = "#d62740";
|
|
79
|
+
export const colorFacetsRed700 = "#af2536";
|
|
80
|
+
export const colorFacetsRed800 = "#800a20";
|
|
81
|
+
export const colorFacetsRed900 = "#3d1c1b";
|
|
82
|
+
export const colorFacetsTeal000 = "#defffe";
|
|
83
|
+
export const colorFacetsTeal100 = "#8efbf7";
|
|
84
|
+
export const colorFacetsTeal200 = "#32e6e2";
|
|
85
|
+
export const colorFacetsTeal300 = "#14d8d4";
|
|
86
|
+
export const colorFacetsTeal400 = "#05bdba";
|
|
87
|
+
export const colorFacetsTeal500 = "#04a29f";
|
|
88
|
+
export const colorFacetsTeal600 = "#02807d";
|
|
89
|
+
export const colorFacetsTeal700 = "#016968";
|
|
90
|
+
export const colorFacetsTeal800 = "#014847";
|
|
91
|
+
export const colorFacetsTeal900 = "#0c2a2a";
|
|
92
|
+
export const effectShadowDarkDeep = "0 16px 24px 0 rgb(6 11 16 / 20%), 0 6px 30px 0 rgb(6 11 16 / 30%), 0 8px 10px 0 rgb(6 11 16 / 40%)";
|
|
93
|
+
export const effectShadowDarkShallow = "0 1px 10px 0 rgb(18 24 31 / 60%), 0 2px 4px 0 rgb(18 24 31 / 40%)";
|
|
94
|
+
export const effectShadowLightDeep = "0 16px 24px 0 rgb(24 26 28 / 7%), 0 6px 30px 0 rgb(24 26 28 / 6%), 0 8px 10px 0 rgb(24 26 28 / 10%)";
|
|
95
|
+
export const effectShadowLightShallow = "0 1px 10px 0 rgb(53 58 62 / 6%), 0 2px 4px 0 rgb(53 58 62 / 8%)";
|
|
96
|
+
export const sizeBorderRadiusBig = "8px";
|
|
97
|
+
export const sizeBorderRadiusSmall = "6px";
|
|
98
|
+
export const typographyFontsMono = "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace";
|
|
99
|
+
export const typographyFontsSans = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
|
|
100
|
+
export const typographySize4xl = "104px";
|
|
101
|
+
export const typographySizeLarge = "18px";
|
|
102
|
+
export const typographySizeMedium = "16px";
|
|
103
|
+
export const typographySizeSmall = "14px";
|
|
104
|
+
export const typographySizeTiny = "12px";
|
|
105
|
+
export const typographySizeXl = "20px";
|
|
106
|
+
export const typographySizeXxl = "36px";
|
|
107
|
+
export const typographySizeXxxl = "64px";
|
|
108
|
+
export const typographyWeightBlack = 900;
|
|
109
|
+
export const typographyWeightBold = 700;
|
|
110
|
+
export const typographyWeightLight = 300;
|
|
111
|
+
export const typographyWeightMedium = 500;
|
|
112
|
+
export const typographyWeightRegular = 400;
|
|
113
|
+
export const typographyWeightSemibold = 600;
|
|
114
|
+
export const typographyWeightThin = 100;
|