@spectrum-web-components/styles 1.8.0 → 1.9.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 (4) hide show
  1. package/package.json +2 -2
  2. package/tokens/express/system-theme-bridge.css +33 -2
  3. package/tokens/spectrum/system-theme-bridge.css +31 -0
  4. package/tokens-v2/system-theme-bridge.css +43 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "1.8.0",
3
+ "version": "1.9.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -121,7 +121,7 @@
121
121
  "css"
122
122
  ],
123
123
  "dependencies": {
124
- "@spectrum-web-components/base": "1.8.0",
124
+ "@spectrum-web-components/base": "1.9.0",
125
125
  "lit": "^2.5.0 || ^3.1.3"
126
126
  },
127
127
  "customElements": "custom-elements.json",
package/tokens/express/system-theme-bridge.css CHANGED
@@ -291,6 +291,9 @@
291
291
  --system-divider-background-color: var(--spectrum-gray-300);
292
292
  --system-divider-background-color-static-white: var(--spectrum-transparent-white-300);
293
293
  --system-divider-background-color-static-black: var(--spectrum-transparent-black-300);
294
+ --system-alert-dialog-divider-background-color: var(--spectrum-gray-300);
295
+ --system-alert-dialog-divider-background-color-static-white: var(--spectrum-transparent-white-300);
296
+ --system-alert-dialog-divider-background-color-static-black: var(--spectrum-transparent-black-300);
294
297
  --system-drop-zone-border-color: var(--spectrum-gray-300);
295
298
  --system-field-group-margin: var(--spectrum-spacing-300);
296
299
  --system-field-group-readonly-delimiter: ",";
@@ -630,13 +633,21 @@
630
633
  --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200);
631
634
  --system-textfield-background-color: var(--spectrum-gray-50);
632
635
  --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color);
633
- --system-textfield-border-color: var(--spectrum-gray-400);
634
- --system-textfield-border-color-hover: var(--spectrum-gray-500);
636
+ --system-textfield-border-color: var(--spectrum-gray-500);
637
+ --system-textfield-border-color-hover: var(--spectrum-gray-600);
635
638
  --system-textfield-border-color-focus: var(--spectrum-gray-800);
636
639
  --system-textfield-border-color-focus-hover: var(--spectrum-gray-900);
637
640
  --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900);
638
641
  --system-textfield-border-color-disabled: var(--spectrum-gray-200);
639
642
  --system-textfield-border-width: var(--spectrum-border-width-200);
643
+ --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
644
+ --system-textfield-spacing-block-start-small: var(--spectrum-component-top-to-text-75);
645
+ --system-textfield-spacing-block-start-large: var(--spectrum-component-top-to-text-200);
646
+ --system-textfield-spacing-block-start-extra-large: var(--spectrum-component-top-to-text-300);
647
+ --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
648
+ --system-textfield-spacing-block-end-small: var(--spectrum-component-bottom-to-text-75);
649
+ --system-textfield-spacing-block-end-large: var(--spectrum-component-bottom-to-text-200);
650
+ --system-textfield-spacing-block-end-extra-large: var(--spectrum-component-bottom-to-text-300);
640
651
  --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
641
652
  --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small);
642
653
  --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
@@ -646,4 +657,24 @@
646
657
  --system-toast-background-color-default: var(--spectrum-neutral-background-color-default);
647
658
  --system-toast-divider-color: var(--spectrum-transparent-white-300);
648
659
  --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default);
660
+ --system-field-label-top-to-text: var(--spectrum-component-top-to-text-100);
661
+ --system-field-label-top-to-text-small: var(--spectrum-component-top-to-text-75);
662
+ --system-field-label-top-to-text-large: var(--spectrum-component-top-to-text-200);
663
+ --system-field-label-top-to-text-extra-large: var(--spectrum-component-top-to-text-300);
664
+ --system-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
665
+ --system-field-label-bottom-to-text-small: var(--spectrum-component-bottom-to-text-75);
666
+ --system-field-label-bottom-to-text-large: var(--spectrum-component-bottom-to-text-200);
667
+ --system-field-label-bottom-to-text-extra-large: var(--spectrum-component-bottom-to-text-300);
668
+ --system-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
669
+ --system-helptext-top-to-text-small: var(--spectrum-component-top-to-text-75);
670
+ --system-helptext-top-to-text-large: var(--spectrum-component-top-to-text-200);
671
+ --system-helptext-top-to-text-extra-large: var(--spectrum-component-top-to-text-300);
672
+ --system-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
673
+ --system-helptext-bottom-to-text-small: var(--spectrum-component-bottom-to-text-75);
674
+ --system-helptext-bottom-to-text-large: var(--spectrum-component-bottom-to-text-200);
675
+ --system-helptext-bottom-to-text-extra-large: var(--spectrum-component-bottom-to-text-300);
676
+ --system-textfield-corner-radius: var(--spectrum-corner-radius-100);
677
+ --system-textfield-corner-radius-small: var(--spectrum-corner-radius-100);
678
+ --system-textfield-corner-radius-large: var(--spectrum-corner-radius-100);
679
+ --system-textfield-corner-radius-extra-large: var(--spectrum-corner-radius-100);
649
680
  }
package/tokens/spectrum/system-theme-bridge.css CHANGED
@@ -291,6 +291,9 @@
291
291
  --system-divider-background-color: var(--spectrum-gray-300);
292
292
  --system-divider-background-color-static-white: var(--spectrum-transparent-white-300);
293
293
  --system-divider-background-color-static-black: var(--spectrum-transparent-black-300);
294
+ --system-alert-dialog-divider-background-color: var(--spectrum-gray-300);
295
+ --system-alert-dialog-divider-background-color-static-white: var(--spectrum-transparent-white-300);
296
+ --system-alert-dialog-divider-background-color-static-black: var(--spectrum-transparent-black-300);
294
297
  --system-drop-zone-border-color: var(--spectrum-gray-300);
295
298
  --system-field-group-margin: var(--spectrum-spacing-300);
296
299
  --system-field-group-readonly-delimiter: ",";
@@ -642,8 +645,36 @@
642
645
  --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
643
646
  --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large);
644
647
  --system-textfield-quiet-border-color-disabled: var(--spectrum-gray-300);
648
+ --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
649
+ --system-textfield-spacing-block-start-small: var(--spectrum-component-top-to-text-100);
650
+ --system-textfield-spacing-block-start-large: var(--spectrum-component-top-to-text-100);
651
+ --system-textfield-spacing-block-start-extra-large: var(--spectrum-component-top-to-text-100);
652
+ --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
653
+ --system-textfield-spacing-block-end-small: var(--spectrum-component-bottom-to-text-100);
654
+ --system-textfield-spacing-block-end-large: var(--spectrum-component-bottom-to-text-100);
655
+ --system-textfield-spacing-block-end-extra-large: var(--spectrum-component-bottom-to-text-100);
645
656
  --system-thumbnail-border-radius: var(--spectrum-corner-radius-75);
646
657
  --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
647
658
  --system-toast-divider-color: var(--spectrum-transparent-white-300);
648
659
  --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
660
+ --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75);
661
+ --system-field-label-top-to-text-small: var(--spectrum-component-top-to-text-75);
662
+ --system-field-label-top-to-text-large: var(--spectrum-component-top-to-text-100);
663
+ --system-field-label-top-to-text-extra-large: var(--spectrum-component-top-to-text-200);
664
+ --system-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
665
+ --system-field-label-bottom-to-text-small: var(--spectrum-component-bottom-to-text-75);
666
+ --system-field-label-bottom-to-text-large: var(--spectrum-component-bottom-to-text-100);
667
+ --system-field-label-bottom-to-text-extra-large: var(--spectrum-component-bottom-to-text-200);
668
+ --system-helptext-top-to-text: var(--spectrum-component-top-to-text-75);
669
+ --system-helptext-top-to-text-small: var(--spectrum-component-top-to-text-75);
670
+ --system-helptext-top-to-text-large: var(--spectrum-component-top-to-text-100);
671
+ --system-helptext-top-to-text-extra-large: var(--spectrum-component-top-to-text-200);
672
+ --system-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
673
+ --system-helptext-bottom-to-text-small: var(--spectrum-component-bottom-to-text-75);
674
+ --system-helptext-bottom-to-text-large: var(--spectrum-component-bottom-to-text-100);
675
+ --system-helptext-bottom-to-text-extra-large: var(--spectrum-component-bottom-to-text-200);
676
+ --system-textfield-corner-radius: var(--spectrum-corner-radius-100);
677
+ --system-textfield-corner-radius-small: var(--spectrum-corner-radius-100);
678
+ --system-textfield-corner-radius-large: var(--spectrum-corner-radius-100);
679
+ --system-textfield-corner-radius-extra-large: var(--spectrum-corner-radius-100);
649
680
  }
package/tokens-v2/system-theme-bridge.css CHANGED
@@ -290,6 +290,9 @@
290
290
  --system-divider-background-color: var(--spectrum-gray-200);
291
291
  --system-divider-background-color-static-white: var(--spectrum-transparent-white-200);
292
292
  --system-divider-background-color-static-black: var(--spectrum-transparent-black-200);
293
+ --system-alert-dialog-divider-background-color: transparent;
294
+ --system-alert-dialog-divider-background-color-static-white: transparent;
295
+ --system-alert-dialog-divider-background-color-static-black: transparent;
293
296
  --system-drop-zone-border-color: var(--spectrum-gray-200);
294
297
  --system-field-group-margin: var(--spectrum-spacing-300);
295
298
  --system-field-group-readonly-delimiter: ",";
@@ -338,14 +341,14 @@
338
341
  --system-picker-background-color-hover-open: var(--spectrum-gray-200);
339
342
  --system-picker-background-color-active: var(--spectrum-gray-200);
340
343
  --system-picker-background-color-key-focus: var(--spectrum-gray-200);
341
- --system-picker-border-color-default: var(--spectrum-gray-500);
342
- --system-picker-border-color-default-open: var(--spectrum-gray-800);
343
- --system-picker-border-color-hover: var(--spectrum-gray-600);
344
- --system-picker-border-color-hover-open: var(--spectrum-gray-900);
345
- --system-picker-border-color-active: var(--spectrum-gray-700);
346
- --system-picker-border-color-key-focus: var(--spectrum-gray-900);
347
- --system-picker-border-color-disabled: var(--spectrum-gray-300);
348
- --system-picker-border-width: var(--spectrum-border-width-100);
344
+ --system-picker-border-color-default: transparent;
345
+ --system-picker-border-color-default-open: transparent;
346
+ --system-picker-border-color-hover: transparent;
347
+ --system-picker-border-color-hover-open: transparent;
348
+ --system-picker-border-color-active: transparent;
349
+ --system-picker-border-color-key-focus: transparent;
350
+ --system-picker-border-color-disabled: transparent;
351
+ --system-picker-border-width: var(--spectrum-border-width-200);
349
352
  --system-picker-button-background-color: var(--spectrum-gray-100);
350
353
  --system-picker-button-background-color-hover: var(--spectrum-gray-200);
351
354
  --system-picker-button-background-color-down: var(--spectrum-gray-200);
@@ -631,13 +634,21 @@
631
634
  --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
632
635
  --system-textfield-background-color: var(--spectrum-gray-25);
633
636
  --system-textfield-background-color-disabled: var(--spectrum-gray-25);
634
- --system-textfield-border-color: var(--spectrum-gray-500);
635
- --system-textfield-border-color-hover: var(--spectrum-gray-600);
637
+ --system-textfield-border-color: var(--spectrum-gray-300);
638
+ --system-textfield-border-color-hover: var(--spectrum-gray-400);
636
639
  --system-textfield-border-color-focus: var(--spectrum-gray-800);
637
640
  --system-textfield-border-color-focus-hover: var(--spectrum-gray-900);
638
641
  --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-800);
639
- --system-textfield-border-color-disabled: var(--spectrum-gray-300);
640
- --system-textfield-border-width: var(--spectrum-border-width-100);
642
+ --system-textfield-border-color-disabled: var(--spectrum-disabled-border-color);
643
+ --system-textfield-border-width: var(--spectrum-border-width-200);
644
+ --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100);
645
+ --system-textfield-spacing-block-start-small: var(--spectrum-component-top-to-text-75);
646
+ --system-textfield-spacing-block-start-large: var(--spectrum-component-top-to-text-200);
647
+ --system-textfield-spacing-block-start-extra-large: var(--spectrum-component-top-to-text-300);
648
+ --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100);
649
+ --system-textfield-spacing-block-end-small: var(--spectrum-component-bottom-to-text-75);
650
+ --system-textfield-spacing-block-end-large: var(--spectrum-component-bottom-to-text-200);
651
+ --system-textfield-spacing-block-end-extra-large: var(--spectrum-component-bottom-to-text-300);
641
652
  --system-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100);
642
653
  --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75);
643
654
  --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200);
@@ -647,4 +658,24 @@
647
658
  --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
648
659
  --system-toast-divider-color: var(--spectrum-transparent-white-400);
649
660
  --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
661
+ --system-field-label-top-to-text: var(--spectrum-component-top-to-text-100);
662
+ --system-field-label-top-to-text-small: var(--spectrum-component-top-to-text-75);
663
+ --system-field-label-top-to-text-large: var(--spectrum-component-top-to-text-200);
664
+ --system-field-label-top-to-text-extra-large: var(--spectrum-component-top-to-text-300);
665
+ --system-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
666
+ --system-field-label-bottom-to-text-small: var(--spectrum-component-bottom-to-text-75);
667
+ --system-field-label-bottom-to-text-large: var(--spectrum-component-bottom-to-text-200);
668
+ --system-field-label-bottom-to-text-extra-large: var(--spectrum-component-bottom-to-text-300);
669
+ --system-helptext-top-to-text: var(--spectrum-component-top-to-text-100);
670
+ --system-helptext-top-to-text-small: var(--spectrum-component-top-to-text-75);
671
+ --system-helptext-top-to-text-large: var(--spectrum-component-top-to-text-200);
672
+ --system-helptext-top-to-text-extra-large: var(--spectrum-component-top-to-text-300);
673
+ --system-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
674
+ --system-helptext-bottom-to-text-small: var(--spectrum-component-bottom-to-text-75);
675
+ --system-helptext-bottom-to-text-large: var(--spectrum-component-bottom-to-text-200);
676
+ --system-helptext-bottom-to-text-extra-large: var(--spectrum-component-bottom-to-text-300);
677
+ --system-textfield-corner-radius: var(--spectrum-corner-radius-medium-size-medium);
678
+ --system-textfield-corner-radius-small: var(--spectrum-corner-radius-medium-size-small);
679
+ --system-textfield-corner-radius-large: var(--spectrum-corner-radius-medium-size-large);
680
+ --system-textfield-corner-radius-extra-large: var(--spectrum-corner-radius-medium-size-extra-large);
650
681
  }