storyloco 2.7.0 → 2.7.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 (2) hide show
  1. package/package.json +1 -1
  2. package/packages/shared/dist/plugin.css +7 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "storyloco",
3
- "version": "2.7.0",
3
+ "version": "2.7.1",
4
4
  "description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
5
5
  "keywords": [
6
6
  "storyblok",
package/packages/shared/dist/plugin.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Shared look for UI Loco's Storyblok space plugins (Shop, Mux Library), close to Storyblok's own
2
2
  editor UI. Wrap the plugin in `.plugin` and use its classes: card, button, segments, search,
3
- status, table, empty, problem, skeleton. Import with `import 'storyloco/shared/plugin.css'`. */
3
+ status (with data-tone good, warn, danger or neutral), table, empty, problem, skeleton. Import with `import 'storyloco/shared/plugin.css'`. */
4
4
  .plugin {
5
5
  --sb-ink: #1b243f;
6
6
  --sb-muted: #5f6781;
@@ -310,7 +310,8 @@
310
310
  padding: 0 8px;
311
311
  }
312
312
 
313
- /* A dot and the word, so state never rides on colour alone. */
313
+ /* A dot and the word, so state never rides on colour alone. Each plugin maps its own statuses
314
+ to a tone: <span class="status" data-tone="good">Paid</span>. */
314
315
  & .status {
315
316
  align-items: center;
316
317
  border-radius: 999px;
@@ -329,40 +330,25 @@
329
330
  inline-size: 6px;
330
331
  }
331
332
 
332
- &[data-status='paid'] {
333
+ &[data-tone='good'] {
333
334
  background: var(--sb-good-wash);
334
335
  color: var(--sb-good);
335
336
  }
336
337
 
337
- &[data-status='pending'] {
338
+ &[data-tone='warn'] {
338
339
  background: var(--sb-warn-wash);
339
340
  color: var(--sb-warn);
340
341
  }
341
342
 
342
- &[data-status='failed'] {
343
+ &[data-tone='danger'] {
343
344
  background: var(--sb-danger-wash);
344
345
  color: var(--sb-danger);
345
346
  }
346
347
 
347
- &[data-status='refunded'] {
348
+ &[data-tone='neutral'] {
348
349
  background: var(--sb-raised);
349
350
  color: var(--sb-muted);
350
351
  }
351
-
352
- &[data-status='ready'] {
353
- background: var(--sb-good-wash);
354
- color: var(--sb-good);
355
- }
356
-
357
- &:is([data-status='preparing'], [data-status='unused']) {
358
- background: var(--sb-warn-wash);
359
- color: var(--sb-warn);
360
- }
361
-
362
- &[data-status='errored'] {
363
- background: var(--sb-danger-wash);
364
- color: var(--sb-danger);
365
- }
366
352
  }
367
353
 
368
354
  & .table {