@quieto/design-tokens 0.3.0 → 1.0.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +5 -4
  3. package/dist/css/qds.css +63 -0
  4. package/dist/css/qds.dark.css +63 -0
  5. package/dist/css/qds.light.css +63 -0
  6. package/dist/js/tokens.js +5227 -3135
  7. package/dist/tokens.json +5227 -3135
  8. package/package.json +1 -1
  9. package/tokens.json +414 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @quieto/design-tokens
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - ceb2d11: 1.0.0: the first stable release. Nothing is removed or renamed in this release; the major version marks the start of semantic versioning's promise. From here, removing or renaming a token, element, attribute, event, slot, or CSS part waits for the next major version, and the READMEs set out exactly what is public API.
8
+
9
+ ### Minor Changes
10
+
11
+ - f67627c: Add component token sets for the Tier 2 components: `qds-toast`, `qds-checkbox-group`, `qds-spinner`, `qds-avatar`, `qds-breadcrumbs`, and `qds-pagination`.
12
+
3
13
  ## 0.3.0
4
14
 
5
15
  ### Minor Changes
package/README.md CHANGED
@@ -128,11 +128,12 @@ Load Inter and JetBrains Mono yourself, or accept the system fallbacks.
128
128
 
129
129
  ## Versioning
130
130
 
131
- This package is pre-1.0, so **token names can change in any minor release.** On `0.x`, npm's
132
- caret range does not cross a minor version: `^0.1.0` installs `0.1.x` but never `0.2.0`, so a
133
- rename will not reach you without an explicit upgrade. The
131
+ This package follows [semantic versioning](https://semver.org). A token's name is its API:
132
+ removing or renaming a token waits for a major version, and new tokens arrive in minor versions. A
133
+ token's value can change in a minor version, since that is a design change rather than an API one —
134
+ a step of the palette retuned for contrast, say — and the
134
135
  [changelog](https://github.com/dillonschultz93/qds/blob/main/packages/design-tokens/CHANGELOG.md)
135
- lists every rename.
136
+ says so whenever one does.
136
137
 
137
138
  ## License
138
139
 
package/dist/css/qds.css CHANGED
@@ -347,6 +347,37 @@
347
347
  --qds-component-menu-item-padding-inline: var(--qds-spacing-300);
348
348
  --qds-component-menu-item-font-size: var(--qds-typography-font-size-200);
349
349
  --qds-component-menu-item-line-height: var(--qds-typography-line-height-normal);
350
+ --qds-component-toast-gap: var(--qds-spacing-300);
351
+ --qds-component-toast-padding: var(--qds-spacing-400);
352
+ --qds-component-toast-margin: var(--qds-spacing-400); /** Distance from the edge of the viewport to the stack of toasts. */
353
+ --qds-component-toast-max-width: var(--qds-size-sm);
354
+ --qds-component-toast-font-size: var(--qds-typography-font-size-200);
355
+ --qds-component-toast-line-height: var(--qds-typography-line-height-normal);
356
+ --qds-component-toast-heading-font-weight: var(--qds-typography-font-weight-semibold);
357
+ --qds-component-checkbox-group-gap: var(--qds-spacing-200);
358
+ --qds-component-checkbox-group-label-font-size: var(--qds-typography-font-size-200);
359
+ --qds-component-checkbox-group-label-font-weight: var(--qds-typography-font-weight-semibold);
360
+ --qds-component-checkbox-group-hint-font-size: var(--qds-typography-font-size-100);
361
+ --qds-component-spinner-sm-width: var(--qds-size-icon-sm);
362
+ --qds-component-spinner-md-width: var(--qds-size-icon-md);
363
+ --qds-component-spinner-lg-width: var(--qds-size-icon-lg);
364
+ --qds-component-avatar-border-radius: var(--qds-border-radius-full);
365
+ --qds-component-avatar-font-weight: var(--qds-typography-font-weight-medium);
366
+ --qds-component-avatar-sm-width: var(--qds-spacing-500); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
367
+ --qds-component-avatar-sm-font-size: var(--qds-typography-font-size-100);
368
+ --qds-component-avatar-md-width: var(--qds-spacing-600); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
369
+ --qds-component-avatar-md-font-size: var(--qds-typography-font-size-200);
370
+ --qds-component-avatar-lg-width: var(--qds-spacing-700); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
371
+ --qds-component-avatar-lg-font-size: var(--qds-typography-font-size-400);
372
+ --qds-component-breadcrumbs-gap: var(--qds-spacing-200);
373
+ --qds-component-breadcrumbs-font-size: var(--qds-typography-font-size-200);
374
+ --qds-component-breadcrumbs-line-height: var(--qds-typography-line-height-normal);
375
+ --qds-component-pagination-gap: var(--qds-spacing-100);
376
+ --qds-component-pagination-min-width: var(--qds-spacing-600); /** A page button is at least this wide, so single digits make a square. */
377
+ --qds-component-pagination-height: var(--qds-spacing-600);
378
+ --qds-component-pagination-padding-inline: var(--qds-spacing-200);
379
+ --qds-component-pagination-font-size: var(--qds-typography-font-size-200);
380
+ --qds-component-pagination-font-weight: var(--qds-typography-font-weight-medium);
350
381
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
351
382
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
352
383
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -581,6 +612,38 @@
581
612
  --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
613
  --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
583
614
  --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
615
+ --qds-component-toast-border-radius: var(--qds-semantic-radius-default);
616
+ --qds-component-toast-border-width: var(--qds-semantic-border-default);
617
+ --qds-component-toast-box-shadow: var(--qds-semantic-elevation-default);
618
+ --qds-component-toast-duration: var(--qds-semantic-animation-subtle);
619
+ --qds-component-toast-color-background-rest: var(--qds-semantic-color-background-raised);
620
+ --qds-component-toast-color-border-rest: var(--qds-semantic-color-border-subtle);
621
+ --qds-component-toast-color-content-rest: var(--qds-semantic-color-content-default);
622
+ --qds-component-toast-info-color-content-rest: var(--qds-semantic-color-content-info);
623
+ --qds-component-toast-success-color-content-rest: var(--qds-semantic-color-content-success);
624
+ --qds-component-toast-warning-color-content-rest: var(--qds-semantic-color-content-warning);
625
+ --qds-component-toast-error-color-content-rest: var(--qds-semantic-color-content-error);
626
+ --qds-component-checkbox-group-label-color-content-rest: var(--qds-semantic-color-content-default);
627
+ --qds-component-checkbox-group-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
628
+ --qds-component-checkbox-group-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
629
+ --qds-component-checkbox-group-error-color-content-rest: var(--qds-semantic-color-content-error);
630
+ --qds-component-spinner-border-width: var(--qds-semantic-border-primary);
631
+ --qds-component-spinner-color-content-rest: var(--qds-semantic-color-content-primary-rest);
632
+ --qds-component-spinner-color-border-rest: var(--qds-semantic-color-border-subtle);
633
+ --qds-component-avatar-color-background-rest: var(--qds-semantic-color-background-neutral);
634
+ --qds-component-avatar-color-content-rest: var(--qds-semantic-color-content-default);
635
+ --qds-component-breadcrumbs-color-content-rest: var(--qds-semantic-color-content-primary-rest);
636
+ --qds-component-breadcrumbs-color-content-hover: var(--qds-semantic-color-content-primary-hover);
637
+ --qds-component-breadcrumbs-current-color-content-rest: var(--qds-semantic-color-content-default);
638
+ --qds-component-breadcrumbs-separator-color-content-rest: var(--qds-semantic-color-content-subtle);
639
+ --qds-component-pagination-border-radius: var(--qds-semantic-radius-default);
640
+ --qds-component-pagination-duration: var(--qds-semantic-animation-default);
641
+ --qds-component-pagination-color-background-hover: var(--qds-semantic-color-background-subtle);
642
+ --qds-component-pagination-color-content-rest: var(--qds-semantic-color-content-default);
643
+ --qds-component-pagination-color-content-disabled: var(--qds-semantic-color-content-subtle);
644
+ --qds-component-pagination-current-color-background-rest: var(--qds-semantic-color-background-primary-rest);
645
+ --qds-component-pagination-current-color-content-rest: var(--qds-semantic-color-content-inverse);
646
+ --qds-component-pagination-ellipsis-color-content-rest: var(--qds-semantic-color-content-subtle);
584
647
  }
585
648
 
586
649
  [data-theme="dark"] {
package/dist/css/qds.dark.css CHANGED
@@ -347,6 +347,37 @@
347
347
  --qds-component-menu-item-padding-inline: var(--qds-spacing-300);
348
348
  --qds-component-menu-item-font-size: var(--qds-typography-font-size-200);
349
349
  --qds-component-menu-item-line-height: var(--qds-typography-line-height-normal);
350
+ --qds-component-toast-gap: var(--qds-spacing-300);
351
+ --qds-component-toast-padding: var(--qds-spacing-400);
352
+ --qds-component-toast-margin: var(--qds-spacing-400); /** Distance from the edge of the viewport to the stack of toasts. */
353
+ --qds-component-toast-max-width: var(--qds-size-sm);
354
+ --qds-component-toast-font-size: var(--qds-typography-font-size-200);
355
+ --qds-component-toast-line-height: var(--qds-typography-line-height-normal);
356
+ --qds-component-toast-heading-font-weight: var(--qds-typography-font-weight-semibold);
357
+ --qds-component-checkbox-group-gap: var(--qds-spacing-200);
358
+ --qds-component-checkbox-group-label-font-size: var(--qds-typography-font-size-200);
359
+ --qds-component-checkbox-group-label-font-weight: var(--qds-typography-font-weight-semibold);
360
+ --qds-component-checkbox-group-hint-font-size: var(--qds-typography-font-size-100);
361
+ --qds-component-spinner-sm-width: var(--qds-size-icon-sm);
362
+ --qds-component-spinner-md-width: var(--qds-size-icon-md);
363
+ --qds-component-spinner-lg-width: var(--qds-size-icon-lg);
364
+ --qds-component-avatar-border-radius: var(--qds-border-radius-full);
365
+ --qds-component-avatar-font-weight: var(--qds-typography-font-weight-medium);
366
+ --qds-component-avatar-sm-width: var(--qds-spacing-500); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
367
+ --qds-component-avatar-sm-font-size: var(--qds-typography-font-size-100);
368
+ --qds-component-avatar-md-width: var(--qds-spacing-600); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
369
+ --qds-component-avatar-md-font-size: var(--qds-typography-font-size-200);
370
+ --qds-component-avatar-lg-width: var(--qds-spacing-700); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
371
+ --qds-component-avatar-lg-font-size: var(--qds-typography-font-size-400);
372
+ --qds-component-breadcrumbs-gap: var(--qds-spacing-200);
373
+ --qds-component-breadcrumbs-font-size: var(--qds-typography-font-size-200);
374
+ --qds-component-breadcrumbs-line-height: var(--qds-typography-line-height-normal);
375
+ --qds-component-pagination-gap: var(--qds-spacing-100);
376
+ --qds-component-pagination-min-width: var(--qds-spacing-600); /** A page button is at least this wide, so single digits make a square. */
377
+ --qds-component-pagination-height: var(--qds-spacing-600);
378
+ --qds-component-pagination-padding-inline: var(--qds-spacing-200);
379
+ --qds-component-pagination-font-size: var(--qds-typography-font-size-200);
380
+ --qds-component-pagination-font-weight: var(--qds-typography-font-weight-medium);
350
381
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
351
382
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
352
383
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -581,4 +612,36 @@
581
612
  --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
613
  --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
583
614
  --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
615
+ --qds-component-toast-border-radius: var(--qds-semantic-radius-default);
616
+ --qds-component-toast-border-width: var(--qds-semantic-border-default);
617
+ --qds-component-toast-box-shadow: var(--qds-semantic-elevation-default);
618
+ --qds-component-toast-duration: var(--qds-semantic-animation-subtle);
619
+ --qds-component-toast-color-background-rest: var(--qds-semantic-color-background-raised);
620
+ --qds-component-toast-color-border-rest: var(--qds-semantic-color-border-subtle);
621
+ --qds-component-toast-color-content-rest: var(--qds-semantic-color-content-default);
622
+ --qds-component-toast-info-color-content-rest: var(--qds-semantic-color-content-info);
623
+ --qds-component-toast-success-color-content-rest: var(--qds-semantic-color-content-success);
624
+ --qds-component-toast-warning-color-content-rest: var(--qds-semantic-color-content-warning);
625
+ --qds-component-toast-error-color-content-rest: var(--qds-semantic-color-content-error);
626
+ --qds-component-checkbox-group-label-color-content-rest: var(--qds-semantic-color-content-default);
627
+ --qds-component-checkbox-group-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
628
+ --qds-component-checkbox-group-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
629
+ --qds-component-checkbox-group-error-color-content-rest: var(--qds-semantic-color-content-error);
630
+ --qds-component-spinner-border-width: var(--qds-semantic-border-primary);
631
+ --qds-component-spinner-color-content-rest: var(--qds-semantic-color-content-primary-rest);
632
+ --qds-component-spinner-color-border-rest: var(--qds-semantic-color-border-subtle);
633
+ --qds-component-avatar-color-background-rest: var(--qds-semantic-color-background-neutral);
634
+ --qds-component-avatar-color-content-rest: var(--qds-semantic-color-content-default);
635
+ --qds-component-breadcrumbs-color-content-rest: var(--qds-semantic-color-content-primary-rest);
636
+ --qds-component-breadcrumbs-color-content-hover: var(--qds-semantic-color-content-primary-hover);
637
+ --qds-component-breadcrumbs-current-color-content-rest: var(--qds-semantic-color-content-default);
638
+ --qds-component-breadcrumbs-separator-color-content-rest: var(--qds-semantic-color-content-subtle);
639
+ --qds-component-pagination-border-radius: var(--qds-semantic-radius-default);
640
+ --qds-component-pagination-duration: var(--qds-semantic-animation-default);
641
+ --qds-component-pagination-color-background-hover: var(--qds-semantic-color-background-subtle);
642
+ --qds-component-pagination-color-content-rest: var(--qds-semantic-color-content-default);
643
+ --qds-component-pagination-color-content-disabled: var(--qds-semantic-color-content-subtle);
644
+ --qds-component-pagination-current-color-background-rest: var(--qds-semantic-color-background-primary-rest);
645
+ --qds-component-pagination-current-color-content-rest: var(--qds-semantic-color-content-inverse);
646
+ --qds-component-pagination-ellipsis-color-content-rest: var(--qds-semantic-color-content-subtle);
584
647
  }
package/dist/css/qds.light.css CHANGED
@@ -347,6 +347,37 @@
347
347
  --qds-component-menu-item-padding-inline: var(--qds-spacing-300);
348
348
  --qds-component-menu-item-font-size: var(--qds-typography-font-size-200);
349
349
  --qds-component-menu-item-line-height: var(--qds-typography-line-height-normal);
350
+ --qds-component-toast-gap: var(--qds-spacing-300);
351
+ --qds-component-toast-padding: var(--qds-spacing-400);
352
+ --qds-component-toast-margin: var(--qds-spacing-400); /** Distance from the edge of the viewport to the stack of toasts. */
353
+ --qds-component-toast-max-width: var(--qds-size-sm);
354
+ --qds-component-toast-font-size: var(--qds-typography-font-size-200);
355
+ --qds-component-toast-line-height: var(--qds-typography-line-height-normal);
356
+ --qds-component-toast-heading-font-weight: var(--qds-typography-font-weight-semibold);
357
+ --qds-component-checkbox-group-gap: var(--qds-spacing-200);
358
+ --qds-component-checkbox-group-label-font-size: var(--qds-typography-font-size-200);
359
+ --qds-component-checkbox-group-label-font-weight: var(--qds-typography-font-weight-semibold);
360
+ --qds-component-checkbox-group-hint-font-size: var(--qds-typography-font-size-100);
361
+ --qds-component-spinner-sm-width: var(--qds-size-icon-sm);
362
+ --qds-component-spinner-md-width: var(--qds-size-icon-md);
363
+ --qds-component-spinner-lg-width: var(--qds-size-icon-lg);
364
+ --qds-component-avatar-border-radius: var(--qds-border-radius-full);
365
+ --qds-component-avatar-font-weight: var(--qds-typography-font-weight-medium);
366
+ --qds-component-avatar-sm-width: var(--qds-spacing-500); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
367
+ --qds-component-avatar-sm-font-size: var(--qds-typography-font-size-100);
368
+ --qds-component-avatar-md-width: var(--qds-spacing-600); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
369
+ --qds-component-avatar-md-font-size: var(--qds-typography-font-size-200);
370
+ --qds-component-avatar-lg-width: var(--qds-spacing-700); /** Square, from the spacing scale, whose steps these sizes match: there is no size step this small. */
371
+ --qds-component-avatar-lg-font-size: var(--qds-typography-font-size-400);
372
+ --qds-component-breadcrumbs-gap: var(--qds-spacing-200);
373
+ --qds-component-breadcrumbs-font-size: var(--qds-typography-font-size-200);
374
+ --qds-component-breadcrumbs-line-height: var(--qds-typography-line-height-normal);
375
+ --qds-component-pagination-gap: var(--qds-spacing-100);
376
+ --qds-component-pagination-min-width: var(--qds-spacing-600); /** A page button is at least this wide, so single digits make a square. */
377
+ --qds-component-pagination-height: var(--qds-spacing-600);
378
+ --qds-component-pagination-padding-inline: var(--qds-spacing-200);
379
+ --qds-component-pagination-font-size: var(--qds-typography-font-size-200);
380
+ --qds-component-pagination-font-weight: var(--qds-typography-font-weight-medium);
350
381
  --qds-semantic-typography-display-font-family: var(--qds-typography-font-family-sans); /** Largest type. Marketing headers and hero sections only. */
351
382
  --qds-semantic-typography-display-font-size: var(--qds-typography-font-size-900); /** Largest type. Marketing headers and hero sections only. */
352
383
  --qds-semantic-typography-display-font-weight: var(--qds-typography-font-weight-bold); /** Largest type. Marketing headers and hero sections only. */
@@ -581,4 +612,36 @@
581
612
  --qds-component-menu-item-color-content-disabled: var(--qds-semantic-color-content-subtle);
582
613
  --qds-component-menu-item-icon-color-content-rest: var(--qds-semantic-color-content-subtle);
583
614
  --qds-component-menu-item-danger-color-content-rest: var(--qds-semantic-color-content-danger);
615
+ --qds-component-toast-border-radius: var(--qds-semantic-radius-default);
616
+ --qds-component-toast-border-width: var(--qds-semantic-border-default);
617
+ --qds-component-toast-box-shadow: var(--qds-semantic-elevation-default);
618
+ --qds-component-toast-duration: var(--qds-semantic-animation-subtle);
619
+ --qds-component-toast-color-background-rest: var(--qds-semantic-color-background-raised);
620
+ --qds-component-toast-color-border-rest: var(--qds-semantic-color-border-subtle);
621
+ --qds-component-toast-color-content-rest: var(--qds-semantic-color-content-default);
622
+ --qds-component-toast-info-color-content-rest: var(--qds-semantic-color-content-info);
623
+ --qds-component-toast-success-color-content-rest: var(--qds-semantic-color-content-success);
624
+ --qds-component-toast-warning-color-content-rest: var(--qds-semantic-color-content-warning);
625
+ --qds-component-toast-error-color-content-rest: var(--qds-semantic-color-content-error);
626
+ --qds-component-checkbox-group-label-color-content-rest: var(--qds-semantic-color-content-default);
627
+ --qds-component-checkbox-group-label-color-content-disabled: var(--qds-semantic-color-content-subtle);
628
+ --qds-component-checkbox-group-hint-color-content-rest: var(--qds-semantic-color-content-subtle);
629
+ --qds-component-checkbox-group-error-color-content-rest: var(--qds-semantic-color-content-error);
630
+ --qds-component-spinner-border-width: var(--qds-semantic-border-primary);
631
+ --qds-component-spinner-color-content-rest: var(--qds-semantic-color-content-primary-rest);
632
+ --qds-component-spinner-color-border-rest: var(--qds-semantic-color-border-subtle);
633
+ --qds-component-avatar-color-background-rest: var(--qds-semantic-color-background-neutral);
634
+ --qds-component-avatar-color-content-rest: var(--qds-semantic-color-content-default);
635
+ --qds-component-breadcrumbs-color-content-rest: var(--qds-semantic-color-content-primary-rest);
636
+ --qds-component-breadcrumbs-color-content-hover: var(--qds-semantic-color-content-primary-hover);
637
+ --qds-component-breadcrumbs-current-color-content-rest: var(--qds-semantic-color-content-default);
638
+ --qds-component-breadcrumbs-separator-color-content-rest: var(--qds-semantic-color-content-subtle);
639
+ --qds-component-pagination-border-radius: var(--qds-semantic-radius-default);
640
+ --qds-component-pagination-duration: var(--qds-semantic-animation-default);
641
+ --qds-component-pagination-color-background-hover: var(--qds-semantic-color-background-subtle);
642
+ --qds-component-pagination-color-content-rest: var(--qds-semantic-color-content-default);
643
+ --qds-component-pagination-color-content-disabled: var(--qds-semantic-color-content-subtle);
644
+ --qds-component-pagination-current-color-background-rest: var(--qds-semantic-color-background-primary-rest);
645
+ --qds-component-pagination-current-color-content-rest: var(--qds-semantic-color-content-inverse);
646
+ --qds-component-pagination-ellipsis-color-content-rest: var(--qds-semantic-color-content-subtle);
584
647
  }