Spectrum Web Components are a LitElement-powered web component library of patterns built on top of the Spectrum CSS specification. Styles for these components are made available (and, in some cases, customizable) via CSS Custom Properties, e.g. var(--spectrum-black). In this package, you will find the CSS Custom Properties that power the various color and size themes defined by Spectrum CSS.

The easiest way to consume these values is via the <sp-theme> element. However, in some cases, it can be useful to have direct access to the files outlining the CSS Custom Properties, on top of which the rest of the component system is built.

yarn add @spectrum-web-components/styles

@import '@spectrum-web-components/styles/all-medium-darkest.css';

This file brings together the global variables and font settings with the "Darkest" color set and "Medium" scale system specification.

@import '@spectrum-web-components/styles/all-medium-dark.css';

This file brings together the global variables and font settings with the "Dark" color set and "Medium" scale system specification.

@import '@spectrum-web-components/styles/all-medium-light.css';

This file brings together the global variables and font settings with the "Light" color set and "Medium" scale system specification.

@import '@spectrum-web-components/styles/all-medium-lightest.css';

This file brings together the global variables and font settings with the "Lightest" color set and "Medium" scale system specification.

@import '@spectrum-web-components/styles/all-large-darkest.css';

This file brings together the global variables and font settings with the "Darkest" color set and "Large" scale system specification.

@import '@spectrum-web-components/styles/all-large-dark.css';

This file brings together the global variables and font settings with the "Dark" color set and "Large" scale system specification.

@import '@spectrum-web-components/styles/all-large-light.css';

This file brings together the global variables and font settings with the "Light" color set and "Large" scale system specification.

@import '@spectrum-web-components/styles/all-large-lightest.css';

This file brings together the global variables and font settings with the "Lightest" color set and "Large" scale system specification.

@import '@spectrum-web-components/styles/theme-darkest.css';

This file provides only the variables needed to power a color palette featuring colors found in the "Darkest" theme.

@import '@spectrum-web-components/styles/theme-dark.css';

This file provides only the variables needed to power a color palette featuring colors found in the "Dark" theme.

@import '@spectrum-web-components/styles/theme-light.css';

This file provides only the variables needed to power a color palette featuring colors found in the "Light" theme.

@import '@spectrum-web-components/styles/theme-lightest.css';

This file provides only the variables needed to power a color palette featuring colors found in the "Lightest" theme.

@import '@spectrum-web-components/styles/scale-medium.css';

This file provides only the variables needed to power the "Medium" scale system specification.

@import '@spectrum-web-components/styles/scale-large.css';

This file provides only the variables needed to power the "Large" scale system specification.

@import '@spectrum-web-components/styles/typography.css';

This file provides a lit-html compliant version of the Spectrum Typography classes.

Changelog

• #5157 9e15a66 Thanks @TarunAdobe! - # Release Note

  Infield Button

  #Section titled Infield Button

  6.1.2

  #Section titled 6.1.2
  • #3615 f09c84a Thanks @Rajdeepc! - ### Infield button fast follows
    • Updated infield button disabled border color to use -spectrum-gray-300 for spectrum-two theme and -spectrum-gray-200 for other themes.

  6.1.1

  #Section titled 6.1.1

  📝 #3536 f77aa72 Thanks @marissahuysentruyt!

  • S2 Foundations fixes
    • Adjusts the background-color of the infield button components within stepper to use gray-100 as opposed to gray-25.
      • This corresponds to the background-color updates picker has for S2.
    • Corrects the border color for the default picker for S2 foundations, using gray-500 (instead of gray-800) to align with other field/form components.
    • Refactors the &.is-keyboardFocused&.is-placeholder selector to &.is-keyboardFocused.spectrum-Picker-label.is-placeholder to avoid unexpectedly targeting the nested placeholder class.

  6.1.0

  #Section titled 6.1.0

  📝 #3541 1a3245c Thanks @castastrophe!

  Dependency alignment across the project.

  • Updated dependencies [205182b, 1a3245c]:
    • @spectrum-css/icon@9.1.0
    • @spectrum-css/tokens@16.0.1

  Number Field

  #Section titled Number Field

  Bump @spectrum-css/stepper to 7.1.3

  7.1.3

  #Section titled 7.1.3

  • #3621 3aec28a Thanks @marissahuysentruyt!

    • Updates -spectrum-stepper-buttons-border-color-keyboard-focus from gray-900 to gray-800 to match the rest of the border color on keyboardFocus.

  7.1.2

  #Section titled 7.1.2

  📝 #3594 6200a63 Thanks @TarunAdobe!

  • Updates Stepper's key-focus border color (-spectrum-stepper-border-color-keyboard-focus) to -spectrum-gray-800.

  7.1.1

  #Section titled 7.1.1

  📝 #3536 f77aa72 Thanks @marissahuysentruyt!

  • S2 Foundations fixes
    • Adjusts the background-color of the infield button components within stepper to use gray-100 as opposed to gray-25.
      • This corresponds to the background-color updates picker has for S2.
    • Corrects the border color for the default picker for S2 foundations, using gray-500 (instead of gray-800) to align with other field/form components.
    • Refactors the &.is-keyboardFocused&.is-placeholder selector to &.is-keyboardFocused.spectrum-Picker-label.is-placeholder to avoid unexpectedly targeting the nested placeholder class.

  7.1.0

  #Section titled 7.1.0

  📝 #3541 1a3245c Thanks @castastrophe!

  Dependency alignment across the project.

  • Updated dependencies [205182b, 9b108f7, 1a3245c]:
    • @spectrum-css/actionbutton@8.0.0
    • @spectrum-css/icon@9.1.0
    • @spectrum-css/infieldbutton@7.0.0
    • @spectrum-css/textfield@9.0.0
    • @spectrum-css/tokens@16.0.1

  Textfield

  #Section titled Textfield

  8.1.1

  #Section titled 8.1.1

  📝 #3575 2e17d10 Thanks @TarunAdobe!

  • Updated border color on keyboard focus state for textfield in spectrum-two theme.

  8.1.0

  #Section titled 8.1.0

  📝 #3539 9b108f7 Thanks @rise-erpelding!

  • Updates invalid icon spacing to be vertically centered for S2.

  📝 #3541 1a3245c Thanks @castastrophe!

  • Dependency alignment across the project.

  Set component peerDependencies as optional to reduce console warnings on downstream projects.

  • Updated dependencies [205182b, 1a3245c]:
    • @spectrum-css/helptext@8.0.0
    • @spectrum-css/tokens@16.0.1

  Search

  #Section titled Search

  8.1.2

  #Section titled 8.1.2
  • #3658 e9fde67 Thanks @rise-erpelding! - Change S2 theme border color to gray-800 on keyfocus per design request in order to align with text field.

  8.1.1

  #Section titled 8.1.1

  📝 #3593 d829abb Thanks @TarunAdobe!

  Updated --spectrum-search-background-color-disabled to --spectrum-gray-25 and --spectrum-search-border-color-disabled to --spectrum-gray-300 for the S2 foundations contexts.

  Also defines disabled quiet border and background colors (--system-search-quiet-background-color-disabled and --system-search-quiet-border-color-disabled) in order to maintain disabled quiet styling.

  8.1.0

  #Section titled 8.1.0

  📝 #3541 1a3245c Thanks @castastrophe!

  Dependency alignment across the project.

  • Updated dependencies [205182b, 9b108f7, 1a3245c]:
    • @spectrum-css/clearbutton@8.0.0
    • @spectrum-css/icon@9.1.0
    • @spectrum-css/textfield@9.0.0
    • @spectrum-css/tokens@16.0.1

• #5349 a9727d2 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

• Updated dependencies []:

  • @spectrum-web-components/base@1.6.0

• #5271 165a904 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

• #5363 4e06533 Thanks @castastrophe! - This update aims to simplify --mod-* access by ensuring local variants and states aren't hooking into those custom properties for overrides. This updates all local variants and states to override the --spectrum-button-* properties instead and adjusts the specificity to ensure no regressions in rendered results.

  From @spectrum-css/button v14.1.3: #3613 Thanks @​rise-erpelding!

  Adjusts static color buttons to more closely resemble the S2 specifications. There are no expected changes to non-static button variants in S2, and no expected changes to other themes.

  This PR includes changes to:

  • Static white primary button (outline variant), static white secondary button (fill variant), static black primary button (outline variant), static black secondary button (fill variant)
  • Static white secondary button (outline variant) and static black secondary button (outline variant) border and background colors
  • Static color buttons' content color
  • Static white primary button (fill variant) and static black primary button (fill variant) background colors

  From @spectrum-css/button v14.1.2: #​3600 Thanks @​rise-erpelding!

  Adjust border colors for static black and static white outline buttons, primary variant to match S2 specifications.

• #5202 fa4be70 Thanks @Rajdeepc! - Updates the picker button component from version 6.0.0-s2-foundations.16 to 6.1.2. The update should bring the background colors for the picker button in line with S2-foundations design specs:

  default state: gray-50 to gray-100 hover state: gray-100 to gray-200 key-focus state: gray-100 to gray-200

• #5277 daeb11f Thanks @renovate! - /Users/cas/Projects/work/spectrum-web-components/yarn.lock

• #5325 6c58f50 Thanks @renovate! - #​3644 Thanks @​marissahuysentruyt!

  This patch update fixes support for --mod-actionbutton-border-radius to make sure it is accessible by consumers and overwrites the default border radius setting when used.

• #5202 fa4be70 Thanks @Rajdeepc! - Updates the combobox component from version 4.0.0-s2-foundations.21 to 4.1.2. This work also addresses the design feedback for combobox in S2 foundations:

  • corrects the border colors for several combobox states including focus, keyboardFocus, focus+hover, disabled, read-only for all themes
  • increases the specificity of the #textfield:hover .input selector to #textfield:hover .input:focus in order to properly render the focus+hover border color styles (within the combobox.css file)
  • adds an additional selector for disabled comboboxes that correctly renders the border colors based on theme context

• Updated dependencies []:

  • @spectrum-web-components/base@1.5.0

• #5140 3cca7ea Thanks @TarunAdobe! - Contextual help now supports a custom maximum width to be set using the --mod-spectrum-contextual-help-popover-maximum-width custom property.

• Updated dependencies []:

  • @spectrum-web-components/base@1.4.0

• Updated dependencies []:
  • @spectrum-web-components/base@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

• opacity-checkerboard: bump CSS version (#5040) (e3bf6d3)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• alert-banner: add alert banner component (#4266) (10d456e)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• styles,theme: add S2 tokens and theme (#4241) (a29e4a2), closes #4232 #4228

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

• asset: use core tokens (99e76f4)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• split-view: expand accessible attribute usage and HCM delivery (cb7c71f)

• infield-button: add infield-button package (057b885)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• picker: ensure the Menu opens in a Tray on mobile (6be2bed)

Note: Version bump only for package @spectrum-web-components/styles

• menu: convert to core tokens (#3254) (da43540)
• picker-button: migrate to core tokens (b39219c)
• sidenav: migrate to core tokens (1846aa3)

Note: Version bump only for package @spectrum-web-components/styles

• accordion: core token migration (#3300) (9650b71)
• tabs,top-nav: use Core Tokens (c6ba355)

Note: Version bump only for package @spectrum-web-components/styles

• search: use core tokens (c62a7cd)

• color-handle,color-loupe: accept updated CSS token names (8c28f6d)

• dropzone: use core tokens (11f7560)
• number-field: use core tokens (23a924e)
• popover: use core tokens (68328cc)
• search,textfield: use core tokens (2ed5135)
• slider: use spectrum-tokens (8b1e72c)
• thumbnail: use core tokens (e298035)

Note: Version bump only for package @spectrum-web-components/styles

• fast forward changes in #2905 (3a30b27)
• styles: add basic color-scheme support (1ccf110)

• avatar: use core tokens (6937e68)
• button: accept update Spectrum Tokens (d6d6db1)
• button: using core-tokens for button (a4a6d42)
• color-handle: use core tokens (e0c1468)
• color-loupe: use core tokens (149165c)
• field-group: use core tokens (7433e59)
• illustrated-message: use core tokens (5f34473)
• link: use core tokens (510173b)
• picker: use new tokens (7d65b69)
• progress-bar: use core tokens (540552e)
• styles: bump to latest tokens (077434a)
• styles: update typography to leverage Core Tokens (2f86560)

• fast forward changes in #2905 (3a30b27)

• color-handle: use core tokens (e0c1468)
• color-loupe: use core tokens (149165c)
• illustrated-message: use core tokens (5f34473)
• styles: bump to latest tokens (077434a)
• styles: update typography to leverage Core Tokens (2f86560)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• avatar: use core tokens (6937e68)
• button: using core-tokens for button (a4a6d42)
• picker: use new tokens (7d65b69)
• progress-bar: use core tokens (540552e)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• styles: add basic color-scheme support (1ccf110)

• field-group: use core tokens (7433e59)

• link: use core tokens (510173b)

Note: Version bump only for package @spectrum-web-components/styles

• field-label: use core tokens (8db7ac4)
• progress-circle: use core tokens (587ac63)

• action-group: use core tokens (73f3b51)

• switch: use core tokens (8011ead)

Note: Version bump only for package @spectrum-web-components/styles

• add t-shirt sizing to the Radio pattern (fc49343)

Note: Version bump only for package @spectrum-web-components/styles

• include the ":root" selector in tokens CSS for use in the docs site (a51e465)

• support Spectrum Token consumption and update Action Button to use them (743ab16)

• theme: filter css variables (1761f3a)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• add support for Spectrum Express (12bfe99)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• leverage latest Spectrum button API (9caf2f6)

Note: Version bump only for package @spectrum-web-components/styles

• use CSS Custom Property name supplied by Spectrum for dividers (e6977c3)

• support --spectrum-global-dimension-dividers token (59fda81)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• adopt DNA@7 base Spectrum CSS (e08cafd)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• export CSS with appropriate scoping (3cf9f40)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• styles: update exports listing (535113d)

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

Note: Version bump only for package @spectrum-web-components/styles

• styles: move @spectrum-web-components/base from devDependencies to dependencies (246411c)

• use latest exports specification (a7ecf4b)

• update to latest spectrum-css packages (a5ca19f)

• styles: ensure ",map" file inclusion in the published package (54a2b13)
• final prerelease review of canary builds (1fc032f)
• missing dependency (bb411b5)
• styles: process CSS in package for use directly in a browser (cf52924)
• update latest Spectrum CSS beta releases (d8d3acc)
• use latest @spectrum-css/* versions (c35eb86)

• action-button: add action button pattern (03ac00a)
• styles: update spectrum css input (88314bb)
• styles: vend CSS literal versions of the typography system (6406c96)

• final prerelease review of canary builds (1fc032f)
• styles: process CSS in package for use directly in a browser (cf52924)
• update latest Spectrum CSS beta releases (d8d3acc)
• use latest @spectrum-css/* versions (c35eb86)

• action-button: add action button pattern (03ac00a)
• styles: update spectrum css input (88314bb)
• styles: vend CSS literal versions of the typography system (6406c96)

Note: Version bump only for package @spectrum-web-components/styles

• leverage "exports" field in package.json (321abd7)

Note: Version bump only for package @spectrum-web-components/styles

• use "sideEffects" listing in package.json (7271614)

• link: correct white space in template/docs site (a48bd06)

• add "darkest" theme styles (fe38025)

Note: Version bump only for package @spectrum-web-components/styles

• code review feedback (441bbb7)
• font.css not auto-generated from spectrum-css (2621a8a), closes #308
• swap the order here so the variables are defined first (01d8724)

• include "type" in package.json, generate custom-elements.json (1a8d716)

• styles: add typography coverage (e8ab4dd)

• use @adobe/spectrum-css@2.15.1 (3918888)

• styles: process, deliver, document the "large" scale (89d4911)

Note: Version bump only for package @spectrum-web-components/styles