@netlify/spark-ui 2.0.0 → 2.1.0
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
CHANGED
|
@@ -79,7 +79,9 @@ Tokens are converted into CSS variables using the [terrazzo](https://terrazzo.ap
|
|
|
79
79
|
|
|
80
80
|
### App tokens
|
|
81
81
|
|
|
82
|
-
`@netlify/spark-ui/styles/app
|
|
82
|
+
`@netlify/spark-ui/styles/app/*.css` and `@netlify/spark-ui/tokens/app` publish app.netlify.com's tokens under the names and file layout it has always read from `@netlify/netlify-design-tokens`: `color.rgb.css` has the `--colorRgbFacets*` RGB channels (with a `[data-brand="hues"]` block), `shadow.css` has `--effectShadow*`, and `tokens/app` has JS exports of hex colors, font sizes, weights, families and radii. `scripts/app-tokens-plugin.mjs` writes them during `build:tokens`.
|
|
83
|
+
|
|
84
|
+
To publish another CSS file, add it to `cssFiles` in `terrazzo.config.mjs` with the tokens it holds (`'palette'`, or a token ID prefix such as `'app.effect.shadow'`) and, optionally, a `format` (`'rgb'` writes a color's channels). Tokens the hues brand changes get a `[data-brand="hues"]` block automatically.
|
|
83
85
|
|
|
84
86
|
### Themes and brands
|
|
85
87
|
|
package/package.json
CHANGED
|
@@ -90,10 +90,6 @@
|
|
|
90
90
|
--colorRgbFacetsTeal700: 1 105 104;
|
|
91
91
|
--colorRgbFacetsTeal800: 1 72 71;
|
|
92
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
93
|
}
|
|
98
94
|
|
|
99
95
|
[data-brand="hues"] {
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* Autogenerated by scripts/app-tokens-plugin.mjs. DO NOT EDIT! */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--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%);
|
|
5
|
+
--effectShadowDarkShallow: 0 1px 10px 0 rgb(18 24 31 / 60%), 0 2px 4px 0 rgb(18 24 31 / 40%);
|
|
6
|
+
--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%);
|
|
7
|
+
--effectShadowLightShallow: 0 1px 10px 0 rgb(53 58 62 / 6%), 0 2px 4px 0 rgb(53 58 62 / 8%);
|
|
8
|
+
}
|
|
@@ -128,6 +128,167 @@
|
|
|
128
128
|
--ntl-green-800: rgb(5.8824% 29.02% 12.941%);
|
|
129
129
|
--ntl-green-900: rgb(8.2353% 16.471% 9.8039%);
|
|
130
130
|
--ntl-heading-text-color: var(--ntl-neutral-800);
|
|
131
|
+
--ntl-hues-blue-black-000: rgb(95.686% 96.863% 97.647%);
|
|
132
|
+
--ntl-hues-blue-black-100: rgb(76.471% 79.608% 80.784%);
|
|
133
|
+
--ntl-hues-blue-black-200: rgb(57.647% 61.961% 63.922%);
|
|
134
|
+
--ntl-hues-blue-black-300: rgb(39.216% 45.098% 47.059%);
|
|
135
|
+
--ntl-hues-blue-black-400: rgb(21.569% 28.235% 30.588%);
|
|
136
|
+
--ntl-hues-blue-black-500: rgb(2.7451% 10.588% 13.333%);
|
|
137
|
+
--ntl-hues-blue-black-600: rgb(1.5686% 8.2353% 10.588%);
|
|
138
|
+
--ntl-hues-blue-black-700: rgb(1.1765% 5.8824% 7.8431%);
|
|
139
|
+
--ntl-hues-blue-black-800: rgb(0.39216% 3.5294% 5.098%);
|
|
140
|
+
--ntl-hues-blue-black-900: rgb(0.39216% 1.9608% 2.7451%);
|
|
141
|
+
--ntl-hues-cobalt-000: rgb(95.294% 96.863% 100%);
|
|
142
|
+
--ntl-hues-cobalt-100: rgb(80% 87.059% 100%);
|
|
143
|
+
--ntl-hues-cobalt-200: rgb(64.314% 76.863% 100%);
|
|
144
|
+
--ntl-hues-cobalt-300: rgb(47.843% 65.882% 99.608%);
|
|
145
|
+
--ntl-hues-cobalt-400: rgb(30.196% 53.725% 99.216%);
|
|
146
|
+
--ntl-hues-cobalt-500: rgb(2.3529% 36.863% 100%);
|
|
147
|
+
--ntl-hues-cobalt-600: rgb(0% 28.627% 81.569%);
|
|
148
|
+
--ntl-hues-cobalt-700: rgb(0% 21.176% 62.745%);
|
|
149
|
+
--ntl-hues-cobalt-800: rgb(0% 14.51% 45.098%);
|
|
150
|
+
--ntl-hues-cobalt-900: rgb(0% 7.8431% 28.627%);
|
|
151
|
+
--ntl-hues-deep-teal-000: rgb(93.333% 97.647% 100%);
|
|
152
|
+
--ntl-hues-deep-teal-100: rgb(78.039% 88.235% 94.118%);
|
|
153
|
+
--ntl-hues-deep-teal-200: rgb(63.137% 78.824% 87.451%);
|
|
154
|
+
--ntl-hues-deep-teal-300: rgb(47.451% 68.627% 80.392%);
|
|
155
|
+
--ntl-hues-deep-teal-400: rgb(30.588% 58.431% 72.941%);
|
|
156
|
+
--ntl-hues-deep-teal-500: rgb(3.9216% 46.667% 63.529%);
|
|
157
|
+
--ntl-hues-deep-teal-600: rgb(0.39216% 37.255% 51.373%);
|
|
158
|
+
--ntl-hues-deep-teal-700: rgb(0.39216% 28.235% 39.216%);
|
|
159
|
+
--ntl-hues-deep-teal-800: rgb(0.39216% 19.608% 27.843%);
|
|
160
|
+
--ntl-hues-deep-teal-900: rgb(0% 11.765% 17.255%);
|
|
161
|
+
--ntl-hues-gold-000: rgb(99.216% 96.471% 90.98%);
|
|
162
|
+
--ntl-hues-gold-100: rgb(99.608% 93.333% 81.961%);
|
|
163
|
+
--ntl-hues-gold-200: rgb(100% 90.588% 72.549%);
|
|
164
|
+
--ntl-hues-gold-300: rgb(100% 87.059% 62.745%);
|
|
165
|
+
--ntl-hues-gold-400: rgb(100% 83.529% 51.765%);
|
|
166
|
+
--ntl-hues-gold-500: rgb(99.216% 79.608% 39.608%);
|
|
167
|
+
--ntl-hues-gold-600: rgb(76.471% 60% 25.098%);
|
|
168
|
+
--ntl-hues-gold-700: rgb(54.902% 41.176% 9.8039%);
|
|
169
|
+
--ntl-hues-gold-800: rgb(34.118% 24.314% 0.78431%);
|
|
170
|
+
--ntl-hues-gold-900: rgb(14.51% 9.4118% 0%);
|
|
171
|
+
--ntl-hues-gray-000: rgb(99.216% 99.216% 99.216%);
|
|
172
|
+
--ntl-hues-gray-100: rgb(95.294% 95.686% 95.686%);
|
|
173
|
+
--ntl-hues-gray-200: rgb(91.765% 92.941% 93.333%);
|
|
174
|
+
--ntl-hues-gray-300: rgb(88.235% 90.196% 90.98%);
|
|
175
|
+
--ntl-hues-gray-400: rgb(84.706% 87.843% 89.02%);
|
|
176
|
+
--ntl-hues-gray-500: rgb(81.176% 85.098% 86.667%);
|
|
177
|
+
--ntl-hues-gray-600: rgb(63.922% 69.02% 70.98%);
|
|
178
|
+
--ntl-hues-gray-700: rgb(47.843% 53.725% 56.078%);
|
|
179
|
+
--ntl-hues-gray-800: rgb(32.157% 39.216% 41.569%);
|
|
180
|
+
--ntl-hues-gray-900: rgb(17.647% 25.49% 28.235%);
|
|
181
|
+
--ntl-hues-green-000: rgb(92.549% 98.824% 93.725%);
|
|
182
|
+
--ntl-hues-green-100: rgb(81.176% 94.118% 83.922%);
|
|
183
|
+
--ntl-hues-green-200: rgb(69.02% 89.02% 74.118%);
|
|
184
|
+
--ntl-hues-green-300: rgb(56.471% 83.922% 63.922%);
|
|
185
|
+
--ntl-hues-green-400: rgb(42.745% 78.039% 53.333%);
|
|
186
|
+
--ntl-hues-green-500: rgb(24.706% 71.373% 41.961%);
|
|
187
|
+
--ntl-hues-green-600: rgb(14.118% 55.686% 30.98%);
|
|
188
|
+
--ntl-hues-green-700: rgb(1.1765% 41.176% 20.392%);
|
|
189
|
+
--ntl-hues-green-800: rgb(0.39216% 26.667% 12.157%);
|
|
190
|
+
--ntl-hues-green-900: rgb(0% 13.333% 4.7059%);
|
|
191
|
+
--ntl-hues-lilac-000: rgb(96.863% 96.078% 100%);
|
|
192
|
+
--ntl-hues-lilac-100: rgb(92.549% 91.765% 100%);
|
|
193
|
+
--ntl-hues-lilac-200: rgb(88.627% 87.059% 100%);
|
|
194
|
+
--ntl-hues-lilac-300: rgb(84.706% 82.353% 100%);
|
|
195
|
+
--ntl-hues-lilac-400: rgb(80.392% 76.863% 100%);
|
|
196
|
+
--ntl-hues-lilac-500: rgb(75.686% 70.98% 100%);
|
|
197
|
+
--ntl-hues-lilac-600: rgb(57.647% 53.725% 78.039%);
|
|
198
|
+
--ntl-hues-lilac-700: rgb(40.784% 37.255% 57.255%);
|
|
199
|
+
--ntl-hues-lilac-800: rgb(25.098% 21.961% 37.647%);
|
|
200
|
+
--ntl-hues-lilac-900: rgb(10.588% 8.2353% 20%);
|
|
201
|
+
--ntl-hues-lime-000: rgb(94.902% 98.431% 89.804%);
|
|
202
|
+
--ntl-hues-lime-100: rgb(90.588% 98.039% 79.216%);
|
|
203
|
+
--ntl-hues-lime-200: rgb(86.667% 97.255% 68.235%);
|
|
204
|
+
--ntl-hues-lime-300: rgb(82.353% 96.078% 56.471%);
|
|
205
|
+
--ntl-hues-lime-400: rgb(78.039% 94.902% 42.745%);
|
|
206
|
+
--ntl-hues-lime-500: rgb(73.333% 93.333% 23.529%);
|
|
207
|
+
--ntl-hues-lime-600: rgb(54.51% 70.98% 1.1765%);
|
|
208
|
+
--ntl-hues-lime-700: rgb(37.647% 49.804% 2.7451%);
|
|
209
|
+
--ntl-hues-lime-800: rgb(21.961% 29.804% 0%);
|
|
210
|
+
--ntl-hues-lime-900: rgb(8.2353% 12.157% 0%);
|
|
211
|
+
--ntl-hues-orange-000: rgb(100% 95.686% 94.118%);
|
|
212
|
+
--ntl-hues-orange-100: rgb(100% 87.843% 83.529%);
|
|
213
|
+
--ntl-hues-orange-200: rgb(100% 79.216% 72.157%);
|
|
214
|
+
--ntl-hues-orange-300: rgb(99.608% 70.196% 60%);
|
|
215
|
+
--ntl-hues-orange-400: rgb(100% 59.608% 45.49%);
|
|
216
|
+
--ntl-hues-orange-500: rgb(100% 45.882% 25.882%);
|
|
217
|
+
--ntl-hues-orange-600: rgb(79.216% 33.333% 15.686%);
|
|
218
|
+
--ntl-hues-orange-700: rgb(59.608% 21.176% 4.7059%);
|
|
219
|
+
--ntl-hues-orange-800: rgb(39.608% 11.765% 0%);
|
|
220
|
+
--ntl-hues-orange-900: rgb(20.392% 4.3137% 0%);
|
|
221
|
+
--ntl-hues-peach-000: rgb(100% 96.078% 92.941%);
|
|
222
|
+
--ntl-hues-peach-100: rgb(100% 92.157% 86.275%);
|
|
223
|
+
--ntl-hues-peach-200: rgb(100% 87.843% 79.608%);
|
|
224
|
+
--ntl-hues-peach-300: rgb(100% 83.922% 72.157%);
|
|
225
|
+
--ntl-hues-peach-400: rgb(100% 79.216% 63.922%);
|
|
226
|
+
--ntl-hues-peach-500: rgb(100% 73.725% 54.118%);
|
|
227
|
+
--ntl-hues-peach-600: rgb(77.647% 55.294% 38.431%);
|
|
228
|
+
--ntl-hues-peach-700: rgb(56.078% 38.039% 23.922%);
|
|
229
|
+
--ntl-hues-peach-800: rgb(36.078% 21.961% 10.196%);
|
|
230
|
+
--ntl-hues-peach-900: rgb(17.255% 7.451% 0%);
|
|
231
|
+
--ntl-hues-pink-000: rgb(100% 95.294% 96.863%);
|
|
232
|
+
--ntl-hues-pink-100: rgb(100% 85.098% 90.196%);
|
|
233
|
+
--ntl-hues-pink-200: rgb(99.608% 74.51% 83.137%);
|
|
234
|
+
--ntl-hues-pink-300: rgb(100% 62.353% 76.471%);
|
|
235
|
+
--ntl-hues-pink-400: rgb(99.608% 48.235% 69.02%);
|
|
236
|
+
--ntl-hues-pink-500: rgb(100% 23.922% 61.176%);
|
|
237
|
+
--ntl-hues-pink-600: rgb(80% 13.333% 47.451%);
|
|
238
|
+
--ntl-hues-pink-700: rgb(60.392% 1.5686% 34.51%);
|
|
239
|
+
--ntl-hues-pink-800: rgb(40% 0.78431% 22.353%);
|
|
240
|
+
--ntl-hues-pink-900: rgb(21.569% 0% 10.98%);
|
|
241
|
+
--ntl-hues-plum-000: rgb(99.216% 95.294% 99.608%);
|
|
242
|
+
--ntl-hues-plum-100: rgb(87.843% 80% 88.627%);
|
|
243
|
+
--ntl-hues-plum-200: rgb(76.471% 65.098% 77.647%);
|
|
244
|
+
--ntl-hues-plum-300: rgb(64.706% 49.804% 66.275%);
|
|
245
|
+
--ntl-hues-plum-400: rgb(52.157% 34.51% 54.51%);
|
|
246
|
+
--ntl-hues-plum-500: rgb(38.039% 17.647% 40.784%);
|
|
247
|
+
--ntl-hues-plum-600: rgb(31.373% 14.118% 33.725%);
|
|
248
|
+
--ntl-hues-plum-700: rgb(25.098% 10.196% 27.059%);
|
|
249
|
+
--ntl-hues-plum-800: rgb(18.824% 7.0588% 20.784%);
|
|
250
|
+
--ntl-hues-plum-900: rgb(13.333% 3.5294% 14.51%);
|
|
251
|
+
--ntl-hues-purple-000: rgb(95.686% 96.471% 100%);
|
|
252
|
+
--ntl-hues-purple-100: rgb(82.353% 85.882% 99.608%);
|
|
253
|
+
--ntl-hues-purple-200: rgb(69.02% 74.51% 99.608%);
|
|
254
|
+
--ntl-hues-purple-300: rgb(55.686% 62.353% 99.608%);
|
|
255
|
+
--ntl-hues-purple-400: rgb(42.745% 49.02% 99.216%);
|
|
256
|
+
--ntl-hues-purple-500: rgb(30.588% 28.627% 100%);
|
|
257
|
+
--ntl-hues-purple-600: rgb(23.922% 21.176% 82.745%);
|
|
258
|
+
--ntl-hues-purple-700: rgb(17.647% 13.725% 66.275%);
|
|
259
|
+
--ntl-hues-purple-800: rgb(11.765% 6.2745% 50.196%);
|
|
260
|
+
--ntl-hues-purple-900: rgb(6.6667% 0% 34.902%);
|
|
261
|
+
--ntl-hues-red-000: rgb(100% 95.686% 95.294%);
|
|
262
|
+
--ntl-hues-red-100: rgb(100% 85.098% 83.529%);
|
|
263
|
+
--ntl-hues-red-200: rgb(99.608% 74.118% 71.765%);
|
|
264
|
+
--ntl-hues-red-300: rgb(100% 61.961% 58.431%);
|
|
265
|
+
--ntl-hues-red-400: rgb(99.608% 47.451% 44.314%);
|
|
266
|
+
--ntl-hues-red-500: rgb(97.255% 27.843% 27.843%);
|
|
267
|
+
--ntl-hues-red-600: rgb(78.039% 18.039% 19.216%);
|
|
268
|
+
--ntl-hues-red-700: rgb(59.608% 7.451% 10.588%);
|
|
269
|
+
--ntl-hues-red-800: rgb(41.176% 0% 4.3137%);
|
|
270
|
+
--ntl-hues-red-900: rgb(22.745% 0% 1.1765%);
|
|
271
|
+
--ntl-hues-sky-000: rgb(90.98% 98.431% 99.216%);
|
|
272
|
+
--ntl-hues-sky-100: rgb(79.608% 96.078% 98.039%);
|
|
273
|
+
--ntl-hues-sky-200: rgb(67.451% 93.333% 96.471%);
|
|
274
|
+
--ntl-hues-sky-300: rgb(54.118% 90.588% 94.51%);
|
|
275
|
+
--ntl-hues-sky-400: rgb(37.647% 87.059% 92.549%);
|
|
276
|
+
--ntl-hues-sky-500: rgb(0.39216% 83.137% 89.804%);
|
|
277
|
+
--ntl-hues-sky-600: rgb(0.39216% 63.529% 68.627%);
|
|
278
|
+
--ntl-hues-sky-700: rgb(1.5686% 45.098% 49.02%);
|
|
279
|
+
--ntl-hues-sky-800: rgb(0.78431% 27.843% 30.196%);
|
|
280
|
+
--ntl-hues-sky-900: rgb(0% 12.157% 13.725%);
|
|
281
|
+
--ntl-hues-turquoise-000: rgb(90.98% 98.824% 96.863%);
|
|
282
|
+
--ntl-hues-turquoise-100: rgb(80% 96.863% 93.333%);
|
|
283
|
+
--ntl-hues-turquoise-200: rgb(68.235% 94.902% 89.412%);
|
|
284
|
+
--ntl-hues-turquoise-300: rgb(55.294% 92.549% 85.49%);
|
|
285
|
+
--ntl-hues-turquoise-400: rgb(38.824% 90.196% 81.569%);
|
|
286
|
+
--ntl-hues-turquoise-500: rgb(6.2745% 86.667% 76.863%);
|
|
287
|
+
--ntl-hues-turquoise-600: rgb(3.5294% 66.275% 58.431%);
|
|
288
|
+
--ntl-hues-turquoise-700: rgb(2.7451% 47.059% 41.176%);
|
|
289
|
+
--ntl-hues-turquoise-800: rgb(0% 29.02% 25.098%);
|
|
290
|
+
--ntl-hues-turquoise-900: rgb(0% 12.549% 10.588%);
|
|
291
|
+
--ntl-hues-white: rgb(100% 100% 100%);
|
|
131
292
|
--ntl-line-height-heading: 1.1;
|
|
132
293
|
--ntl-line-height-loose: 2;
|
|
133
294
|
--ntl-line-height-none: 1;
|