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

• #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