styles

NPM

0.44.0
Examples Changelog

0.44.0 (2024-07-15) #

Features #

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

0.43.0 (2024-06-11) #

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

0.42.5 (2024-05-24) #

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

0.42.4 (2024-05-14) #

Bug Fixes #

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

0.42.3 (2024-05-01) #

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

0.42.2 (2024-04-03) #

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

0.42.1 (2024-04-02) #

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

0.42.0 (2024-03-19) #

Bug Fixes #

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

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

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

0.41.1 (2024-02-22) #

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

0.41.0 (2024-02-13) #

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

0.40.5 (2024-02-05) #

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

0.40.4 (2024-01-29) #

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

0.40.3 (2024-01-11) #

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

0.40.2 (2023-12-18) #

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

0.40.1 (2023-12-05) #

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

0.40.0 (2023-11-16) #

Bug Fixes #

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

0.39.4 (2023-11-02) #

Bug Fixes #

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

0.39.3 (2023-10-18) #

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

0.39.2 (2023-10-13) #

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

0.39.1 (2023-10-06) #

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

0.39.0 (2023-09-25) #

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

0.38.0 (2023-09-05) #

Bug Fixes #

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

0.37.0 (2023-08-18) #

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

0.36.0 (2023-08-18) #

Features #

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

0.35.0 (2023-07-31) #

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

0.34.0 (2023-07-11) #

Features #

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

0.33.2 (2023-06-14) #

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

0.33.0 (2023-06-08) #

Features #

  • search: use core tokens (c62a7cd)

0.32.0 (2023-06-01) #

Bug Fixes #

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

Features #

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

0.31.0 (2023-05-17) #

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

0.30.0 (2023-05-03) #

Bug Fixes #

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

Features #

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

0.24.0 (2023-04-24) #

Bug Fixes #

  • fast forward changes in #2905 (3a30b27)

Features #

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

0.23.3 (2023-04-05) #

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

0.23.2 (2023-03-22) #

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

0.23.1 (2023-03-08) #

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

0.23.0 (2023-02-08) #

Features #

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

0.22.2 (2023-01-23) #

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

0.22.1 (2023-01-09) #

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

0.22.0 (2022-12-08) #

Bug Fixes #

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

Features #

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

0.21.0 (2022-11-21) #

Features #

  • link: use core tokens (510173b)

0.20.1 (2022-11-14) #

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

0.20.0 (2022-10-28) #

Features #

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

0.19.0 (2022-10-17) #

Features #

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

0.18.0 (2022-10-10) #

Features #

  • switch: use core tokens (8011ead)

0.17.1 (2022-09-14) #

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

0.17.0 (2022-08-24) #

Features #

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

0.16.0 (2022-08-09) #

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

0.15.1 (2022-08-04) #

Bug Fixes #

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

0.15.0 (2022-07-18) #

Features #

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

0.14.0 (2022-06-29) #

Features #

  • theme: filter css variables (1761f3a)

0.13.2 (2022-06-07) #

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

0.13.1 (2022-05-12) #

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

0.13.0 (2022-04-21) #

Features #

  • add support for Spectrum Express (12bfe99)

0.12.2 (2022-03-30) #

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

0.12.1 (2022-03-08) #

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

0.12.0 (2022-03-04) #

Features #

  • leverage latest Spectrum button API (9caf2f6)

0.11.4 (2022-02-22) #

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

0.11.3 (2022-01-26) #

Bug Fixes #

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

0.11.2 (2022-01-07) #

Bug Fixes #

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

0.11.1 (2021-12-13) #

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

0.11.0 (2021-11-08) #

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

0.10.1 (2021-11-08) #

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

0.10.0 (2021-11-02) #

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.9.11 (2021-09-20) #

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

0.9.10 (2021-07-22) #

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

0.9.9 (2021-07-01) #

Bug Fixes #

  • export CSS with appropriate scoping (3cf9f40)

0.9.8 (2021-06-16) #

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

0.9.7 (2021-06-07) #

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

0.9.6 (2021-05-12) #

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

0.9.5 (2021-04-15) #

Bug Fixes #

  • styles: update exports listing (535113d)

0.9.4 (2021-04-09) #

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

0.9.3 (2021-03-29) #

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

0.9.2 (2021-03-22) #

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

0.9.1 (2021-03-05) #

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

0.9.0 (2021-03-04) #

Bug Fixes #

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

Features #

  • use latest exports specification (a7ecf4b)

0.8.1 (2021-02-11) #

Bug Fixes #

  • update to latest spectrum-css packages (a5ca19f)

0.8.0 (2021-01-21) #

Bug Fixes #

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

Features #

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

0.7.0 (2021-01-13) #

Bug Fixes #

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

Features #

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

0.6.1 (2020-08-31) #

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

0.6.0 (2020-07-17) #

Features #

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

0.5.3 (2020-06-08) #

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

0.5.2 (2020-04-16) #

Performance Improvements #

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

0.5.1 (2020-04-07) #

Bug Fixes #

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

0.5.0 (2020-03-11) #

Features #

  • add "darkest" theme styles (fe38025)

0.4.3 (2020-01-06) #

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

0.4.2 (2019-12-02) #

Bug Fixes #

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

0.4.1 (2019-11-27) #

Bug Fixes #

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

0.4.0 (2019-11-19) #

Features #

  • styles: add typography coverage (e8ab4dd)

0.3.0 (2019-11-19) #

Features #

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

0.2.0 (2019-10-14) #

Features #

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

0.1.3 (2019-10-03) #

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

Description #

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.

Usage #

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/styles

Theme packages #

@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.

Color sets #

Darkest #

@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.

Dark #

@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.

Light #

@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.

Lightest #

@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.

Scale #

Medium #

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

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

Large #

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

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

Typography #

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

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