@netlify/spark-ui 1.33.0 → 2.0.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.
Files changed (5) hide show
  1. package/README.md +19 -0
  2. package/package.json +34 -11
  3. package/packages/styles/app.css +189 -0
  4. package/packages/tokens/app.d.ts +114 -0
  5. package/packages/tokens/app.js +114 -0
package/README.md CHANGED
@@ -51,6 +51,20 @@ Prettier is used to format the code. To format the codebase, run:
51
51
  npm run format
52
52
  ```
53
53
 
54
+ ## Optional dependencies
55
+
56
+ Installing `@netlify/spark-ui` adds no other packages. Tokens, styles and assets work on their own; components need their libraries installed alongside:
57
+
58
+ | Using | Install |
59
+ | ------------------------------------------------------------------- | ---------------------------------------------------------- |
60
+ | Preact components (`@netlify/spark-ui`, `@netlify/spark-ui/preact`) | `preact` |
61
+ | `CodeBlock.astro` | `@shikijs/transformers` |
62
+ | `YoutubeVideo.astro` | `@astro-community/astro-embed-youtube` |
63
+ | `FilterableGrid` | `@zachleat/details-utils`, `@zachleat/filter-container` |
64
+ | `@netlify/spark-ui/components` (uncompiled source) | `preact`, `@kapaai/react-sdk`, `marked`, `fflate`, `rusha` |
65
+
66
+ `@netlify/spark-ui/preact` bundles the Kapa SDK, `marked`, `fflate` and `rusha`, so prefer it over the uncompiled `components` entry.
67
+
54
68
  ## Design Tokens
55
69
 
56
70
  Tokens provide a shared foundation of colors, typography, spacing, and more for our sites and apps. All token information is stored in the `/tokens` directory. These aim to follow standards proposed in the [Design Tokens Format Module](https://tr.designtokens.org/format/).
@@ -60,8 +74,13 @@ Tokens are converted into CSS variables using the [terrazzo](https://terrazzo.ap
60
74
  - `tokens/base/`: every token, with its light-mode value in the current brand
61
75
  - `tokens/themes/dark.json`: the tokens that change in dark mode, with their dark values
62
76
  - `tokens/brands/hues.json`: the palette ramps for the hues brand
77
+ - `tokens/base/app.json`: app.netlify.com's own values (fonts, sizes, weights, radii, shadows), kept out of `tokens.css`
63
78
  - `tokens/resolver.json`: how Terrazzo layers the files above. A new file in `tokens/base/` must be listed here; the build fails if it isn't.
64
79
 
80
+ ### App tokens
81
+
82
+ `@netlify/spark-ui/styles/app.css` and `@netlify/spark-ui/tokens/app` publish app.netlify.com's tokens under the names it has always read from `@netlify/netlify-design-tokens`: `--colorRgbFacets*` RGB channels (with a `[data-brand="hues"]` block), `--effectShadow*`, and JS exports of hex colors, font sizes, weights, families and radii. `scripts/app-tokens-plugin.mjs` writes them during `build:tokens`.
83
+
65
84
  ### Themes and brands
66
85
 
67
86
  Dark mode follows `prefers-color-scheme`, and `data-theme="dark"` or `data-theme="light"` on any element overrides it for that element and its children.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@netlify/spark-ui",
3
3
  "description": "Assets, design tokens, components, and utilities",
4
- "version": "1.33.0",
4
+ "version": "2.0.0-alpha.1",
5
5
  "type": "module",
6
6
  "main": "dist/components/preact/index.js",
7
7
  "types": "dist/components/preact/index.d.ts",
@@ -31,6 +31,10 @@
31
31
  "./assets/icons/*.svg": "./packages/assets/icons/*.svg",
32
32
  "./logos/*.svg": "./packages/assets/logos/*.svg",
33
33
  "./styles/*.css": "./packages/styles/*.css",
34
+ "./tokens/app": {
35
+ "types": "./packages/tokens/app.d.ts",
36
+ "default": "./packages/tokens/app.js"
37
+ },
34
38
  "./assets/*": "./packages/assets/*",
35
39
  "./components": "./packages/components/index.ts",
36
40
  "./components/FilterableGrid": "./packages/components/FilterableGrid/index.ts",
@@ -38,36 +42,34 @@
38
42
  "./utils": "./packages/utils/index.ts",
39
43
  "./analytics": "./packages/analytics/index.ts"
40
44
  },
41
- "dependencies": {
45
+ "devDependencies": {
42
46
  "@astro-community/astro-embed-youtube": "^0.5.10",
43
47
  "@kapaai/react-sdk": "^0.9.0",
44
- "@shikijs/transformers": "^3.3.0",
45
- "@zachleat/details-utils": "^2.0.2",
46
- "@zachleat/filter-container": "^4.0.0",
47
- "fflate": "^0.8.2",
48
- "marked": "^15.0.11",
49
- "rusha": "^0.8.14"
50
- },
51
- "devDependencies": {
52
48
  "@preact/preset-vite": "^2.10.1",
53
49
  "@semantic-release/changelog": "^6.0.3",
54
50
  "@semantic-release/git": "^10.0.1",
55
51
  "@semantic-release/npm": "^13.0.0",
52
+ "@shikijs/transformers": "^3.3.0",
56
53
  "@terrazzo/cli": "^2.7.1",
57
54
  "@terrazzo/plugin-css": "^2.7.1",
58
55
  "@types/gtag.js": "^0.0.20",
59
56
  "@typescript-eslint/eslint-plugin": "^8.26.0",
60
57
  "@typescript-eslint/parser": "^8.26.0",
58
+ "@zachleat/details-utils": "^2.0.2",
59
+ "@zachleat/filter-container": "^4.0.0",
61
60
  "astro-eslint-parser": "^1.2.1",
62
61
  "eslint": "^10.0.0",
63
62
  "eslint-config-prettier": "^10.1.1",
64
63
  "eslint-plugin-astro": "^1.3.1",
65
64
  "fake-indexeddb": "^6.2.5",
65
+ "fflate": "^0.8.2",
66
66
  "glob": "^11.0.1",
67
67
  "happy-dom": "^20.11.6",
68
+ "marked": "^15.0.11",
68
69
  "preact": "^10.26.4",
69
70
  "prettier": "^3.5.3",
70
71
  "prettier-plugin-astro": "^0.14.1",
72
+ "rusha": "^0.8.14",
71
73
  "semantic-release": "^25.0.0",
72
74
  "tslib": "^2.8.1",
73
75
  "typescript": "^5.8.2",
@@ -78,6 +80,27 @@
78
80
  "vitest": "^4.1.10"
79
81
  },
80
82
  "peerDependencies": {
81
- "preact": "^10.26.4"
83
+ "@astro-community/astro-embed-youtube": "^0.5.0",
84
+ "@shikijs/transformers": "^3.0.0",
85
+ "@zachleat/details-utils": "^2.0.0",
86
+ "@zachleat/filter-container": "^4.0.0",
87
+ "preact": "^10.0.0"
88
+ },
89
+ "peerDependenciesMeta": {
90
+ "@astro-community/astro-embed-youtube": {
91
+ "optional": true
92
+ },
93
+ "@shikijs/transformers": {
94
+ "optional": true
95
+ },
96
+ "@zachleat/details-utils": {
97
+ "optional": true
98
+ },
99
+ "@zachleat/filter-container": {
100
+ "optional": true
101
+ },
102
+ "preact": {
103
+ "optional": true
104
+ }
82
105
  }
83
106
  }
package/packages/styles/app.css ADDED
@@ -0,0 +1,189 @@
1
+ /* Autogenerated by scripts/app-tokens-plugin.mjs. DO NOT EDIT! */
2
+
3
+ :root {
4
+ --colorRgbFacetsBlue000: 237 244 255;
5
+ --colorRgbFacetsBlue100: 205 226 255;
6
+ --colorRgbFacetsBlue200: 181 210 251;
7
+ --colorRgbFacetsBlue300: 156 190 246;
8
+ --colorRgbFacetsBlue400: 128 171 250;
9
+ --colorRgbFacetsBlue500: 93 141 245;
10
+ --colorRgbFacetsBlue600: 49 107 244;
11
+ --colorRgbFacetsBlue700: 46 81 237;
12
+ --colorRgbFacetsBlue800: 32 54 161;
13
+ --colorRgbFacetsBlue900: 27 32 91;
14
+ --colorRgbFacetsGold000: 253 245 216;
15
+ --colorRgbFacetsGold100: 246 224 165;
16
+ --colorRgbFacetsGold200: 250 205 111;
17
+ --colorRgbFacetsGold300: 251 177 61;
18
+ --colorRgbFacetsGold400: 249 142 33;
19
+ --colorRgbFacetsGold500: 213 119 26;
20
+ --colorRgbFacetsGold600: 168 93 19;
21
+ --colorRgbFacetsGold700: 140 76 13;
22
+ --colorRgbFacetsGold800: 96 52 8;
23
+ --colorRgbFacetsGold900: 51 34 19;
24
+ --colorRgbFacetsGreen000: 231 252 233;
25
+ --colorRgbFacetsGreen100: 190 249 198;
26
+ --colorRgbFacetsGreen200: 147 245 165;
27
+ --colorRgbFacetsGreen300: 100 216 127;
28
+ --colorRgbFacetsGreen400: 58 195 100;
29
+ --colorRgbFacetsGreen500: 49 168 85;
30
+ --colorRgbFacetsGreen600: 34 130 64;
31
+ --colorRgbFacetsGreen700: 26 107 52;
32
+ --colorRgbFacetsGreen800: 15 74 33;
33
+ --colorRgbFacetsGreen900: 21 42 25;
34
+ --colorRgbFacetsNeutralDark000: 255 255 255;
35
+ --colorRgbFacetsNeutralDark100: 230 236 242;
36
+ --colorRgbFacetsNeutralDark200: 171 181 191;
37
+ --colorRgbFacetsNeutralDark300: 126 135 146;
38
+ --colorRgbFacetsNeutralDark400: 77 86 95;
39
+ --colorRgbFacetsNeutralDark500: 59 67 76;
40
+ --colorRgbFacetsNeutralDark600: 39 47 56;
41
+ --colorRgbFacetsNeutralDark700: 30 36 44;
42
+ --colorRgbFacetsNeutralDark800: 18 24 31;
43
+ --colorRgbFacetsNeutralDark900: 6 11 16;
44
+ --colorRgbFacetsNeutralLight000: 255 255 255;
45
+ --colorRgbFacetsNeutralLight100: 246 246 247;
46
+ --colorRgbFacetsNeutralLight200: 233 235 237;
47
+ --colorRgbFacetsNeutralLight300: 209 213 218;
48
+ --colorRgbFacetsNeutralLight400: 157 167 178;
49
+ --colorRgbFacetsNeutralLight500: 119 128 137;
50
+ --colorRgbFacetsNeutralLight600: 84 90 97;
51
+ --colorRgbFacetsNeutralLight700: 53 58 62;
52
+ --colorRgbFacetsNeutralLight800: 24 26 28;
53
+ --colorRgbFacetsPink000: 252 240 251;
54
+ --colorRgbFacetsPink100: 246 210 242;
55
+ --colorRgbFacetsPink200: 247 188 243;
56
+ --colorRgbFacetsPink300: 243 168 238;
57
+ --colorRgbFacetsPink400: 239 127 235;
58
+ --colorRgbFacetsPink500: 223 90 220;
59
+ --colorRgbFacetsPink600: 185 56 184;
60
+ --colorRgbFacetsPink700: 154 45 153;
61
+ --colorRgbFacetsPink800: 108 29 107;
62
+ --colorRgbFacetsPink900: 56 27 55;
63
+ --colorRgbFacetsPurple000: 245 242 252;
64
+ --colorRgbFacetsPurple100: 226 217 247;
65
+ --colorRgbFacetsPurple200: 216 199 255;
66
+ --colorRgbFacetsPurple300: 202 185 244;
67
+ --colorRgbFacetsPurple400: 180 157 241;
68
+ --colorRgbFacetsPurple500: 155 128 237;
69
+ --colorRgbFacetsPurple600: 119 92 231;
70
+ --colorRgbFacetsPurple700: 97 74 202;
71
+ --colorRgbFacetsPurple800: 56 42 164;
72
+ --colorRgbFacetsPurple900: 41 33 66;
73
+ --colorRgbFacetsRed000: 251 238 237;
74
+ --colorRgbFacetsRed100: 251 211 208;
75
+ --colorRgbFacetsRed200: 255 189 186;
76
+ --colorRgbFacetsRed300: 255 173 169;
77
+ --colorRgbFacetsRed400: 254 131 130;
78
+ --colorRgbFacetsRed500: 254 78 92;
79
+ --colorRgbFacetsRed600: 214 39 64;
80
+ --colorRgbFacetsRed700: 175 37 54;
81
+ --colorRgbFacetsRed800: 128 10 32;
82
+ --colorRgbFacetsRed900: 61 28 27;
83
+ --colorRgbFacetsTeal000: 222 255 254;
84
+ --colorRgbFacetsTeal100: 142 251 247;
85
+ --colorRgbFacetsTeal200: 50 230 226;
86
+ --colorRgbFacetsTeal300: 20 216 212;
87
+ --colorRgbFacetsTeal400: 5 189 186;
88
+ --colorRgbFacetsTeal500: 4 162 159;
89
+ --colorRgbFacetsTeal600: 2 128 125;
90
+ --colorRgbFacetsTeal700: 1 105 104;
91
+ --colorRgbFacetsTeal800: 1 72 71;
92
+ --colorRgbFacetsTeal900: 12 42 42;
93
+ --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%);
94
+ --effectShadowDarkShallow: 0 1px 10px 0 rgb(18 24 31 / 60%), 0 2px 4px 0 rgb(18 24 31 / 40%);
95
+ --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%);
96
+ --effectShadowLightShallow: 0 1px 10px 0 rgb(53 58 62 / 6%), 0 2px 4px 0 rgb(53 58 62 / 8%);
97
+ }
98
+
99
+ [data-brand="hues"] {
100
+ --colorRgbFacetsBlue000: 237 244 255;
101
+ --colorRgbFacetsBlue100: 205 226 255;
102
+ --colorRgbFacetsBlue200: 181 210 251;
103
+ --colorRgbFacetsBlue300: 156 190 246;
104
+ --colorRgbFacetsBlue400: 128 171 250;
105
+ --colorRgbFacetsBlue500: 93 141 245;
106
+ --colorRgbFacetsBlue600: 49 107 244;
107
+ --colorRgbFacetsBlue700: 46 81 237;
108
+ --colorRgbFacetsBlue800: 32 54 161;
109
+ --colorRgbFacetsBlue900: 27 32 91;
110
+ --colorRgbFacetsGold000: 253 245 216;
111
+ --colorRgbFacetsGold100: 246 224 165;
112
+ --colorRgbFacetsGold200: 250 205 111;
113
+ --colorRgbFacetsGold300: 251 177 61;
114
+ --colorRgbFacetsGold400: 249 142 33;
115
+ --colorRgbFacetsGold500: 213 119 26;
116
+ --colorRgbFacetsGold600: 168 93 19;
117
+ --colorRgbFacetsGold700: 140 76 13;
118
+ --colorRgbFacetsGold800: 96 52 8;
119
+ --colorRgbFacetsGold900: 51 34 19;
120
+ --colorRgbFacetsGreen000: 231 252 233;
121
+ --colorRgbFacetsGreen100: 190 249 198;
122
+ --colorRgbFacetsGreen200: 147 245 165;
123
+ --colorRgbFacetsGreen300: 100 216 127;
124
+ --colorRgbFacetsGreen400: 58 195 100;
125
+ --colorRgbFacetsGreen500: 49 168 85;
126
+ --colorRgbFacetsGreen600: 34 130 64;
127
+ --colorRgbFacetsGreen700: 26 107 52;
128
+ --colorRgbFacetsGreen800: 15 74 33;
129
+ --colorRgbFacetsGreen900: 21 42 25;
130
+ --colorRgbFacetsNeutralDark000: 255 255 255;
131
+ --colorRgbFacetsNeutralDark100: 230 236 242;
132
+ --colorRgbFacetsNeutralDark200: 171 181 191;
133
+ --colorRgbFacetsNeutralDark300: 126 135 146;
134
+ --colorRgbFacetsNeutralDark400: 77 86 95;
135
+ --colorRgbFacetsNeutralDark500: 59 67 76;
136
+ --colorRgbFacetsNeutralDark600: 39 47 56;
137
+ --colorRgbFacetsNeutralDark700: 30 36 44;
138
+ --colorRgbFacetsNeutralDark800: 18 24 31;
139
+ --colorRgbFacetsNeutralDark900: 6 11 16;
140
+ --colorRgbFacetsNeutralLight000: 255 255 255;
141
+ --colorRgbFacetsNeutralLight100: 246 246 247;
142
+ --colorRgbFacetsNeutralLight200: 233 235 237;
143
+ --colorRgbFacetsNeutralLight300: 209 213 218;
144
+ --colorRgbFacetsNeutralLight400: 157 167 178;
145
+ --colorRgbFacetsNeutralLight500: 119 128 137;
146
+ --colorRgbFacetsNeutralLight600: 84 90 97;
147
+ --colorRgbFacetsNeutralLight700: 53 58 62;
148
+ --colorRgbFacetsNeutralLight800: 24 26 28;
149
+ --colorRgbFacetsPink000: 252 240 251;
150
+ --colorRgbFacetsPink100: 246 210 242;
151
+ --colorRgbFacetsPink200: 247 188 243;
152
+ --colorRgbFacetsPink300: 243 168 238;
153
+ --colorRgbFacetsPink400: 239 127 235;
154
+ --colorRgbFacetsPink500: 223 90 220;
155
+ --colorRgbFacetsPink600: 185 56 184;
156
+ --colorRgbFacetsPink700: 154 45 153;
157
+ --colorRgbFacetsPink800: 108 29 107;
158
+ --colorRgbFacetsPink900: 56 27 55;
159
+ --colorRgbFacetsPurple000: 245 242 252;
160
+ --colorRgbFacetsPurple100: 226 217 247;
161
+ --colorRgbFacetsPurple200: 216 199 255;
162
+ --colorRgbFacetsPurple300: 202 185 244;
163
+ --colorRgbFacetsPurple400: 180 157 241;
164
+ --colorRgbFacetsPurple500: 155 128 237;
165
+ --colorRgbFacetsPurple600: 119 92 231;
166
+ --colorRgbFacetsPurple700: 97 74 202;
167
+ --colorRgbFacetsPurple800: 56 42 164;
168
+ --colorRgbFacetsPurple900: 41 33 66;
169
+ --colorRgbFacetsRed000: 251 238 237;
170
+ --colorRgbFacetsRed100: 251 211 208;
171
+ --colorRgbFacetsRed200: 255 189 186;
172
+ --colorRgbFacetsRed300: 255 173 169;
173
+ --colorRgbFacetsRed400: 254 131 130;
174
+ --colorRgbFacetsRed500: 254 78 92;
175
+ --colorRgbFacetsRed600: 214 39 64;
176
+ --colorRgbFacetsRed700: 175 37 54;
177
+ --colorRgbFacetsRed800: 128 10 32;
178
+ --colorRgbFacetsRed900: 61 28 27;
179
+ --colorRgbFacetsTeal000: 222 255 254;
180
+ --colorRgbFacetsTeal100: 142 251 247;
181
+ --colorRgbFacetsTeal200: 50 230 226;
182
+ --colorRgbFacetsTeal300: 20 216 212;
183
+ --colorRgbFacetsTeal400: 5 189 186;
184
+ --colorRgbFacetsTeal500: 4 162 159;
185
+ --colorRgbFacetsTeal600: 2 128 125;
186
+ --colorRgbFacetsTeal700: 1 105 104;
187
+ --colorRgbFacetsTeal800: 1 72 71;
188
+ --colorRgbFacetsTeal900: 12 42 42;
189
+ }
package/packages/tokens/app.d.ts ADDED
@@ -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;
package/packages/tokens/app.js ADDED
@@ -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;