styles

Deprecation Warning

Color 'lightest' and 'darkest' are deprecated. Spectrum Vars token files (all-*.css, theme-*.css, scale-*.css, core-global.css) are deprecated in favor of Spectrum Core tokens. These deprecations will be removed in a future release. See the Spectrum Core tokens migration guide for help migrating.

NPM 1.10.0

Overview

Changelog

Overview

Spectrum Web Components are a LitElement-powered web component library implementing Adobe's Spectrum design system. This package defines the CSS custom properties that implement design tokens from Spectrum Tokens. Spectrum Web Components consume these properties in their styles. These include colors, spacing, typography, and sizing values like --spectrum-gray-100, --spectrum-component-height-200, and --spectrum-font-size-100. In this package, you will find the CSS custom properties that Spectrum Web Components reference in their stylesheets, with values that vary across different system variants, color options, and scales.

Relationship to `<sp-theme>`

The <sp-theme> element is built on top of this styles package. It consumes the CSS custom properties provided here and wraps them in a Web Component that manages theme switching, directionality, and other runtime behaviors.

For most applications, we recommend using <sp-theme> rather than directly importing these CSS files. The theme element provides a more flexible and maintainable way to manage systems, colors, and scales using attributes like system="spectrum", color="dark", and scale="medium" (e.g., <sp-theme system="spectrum" color="dark" scale="medium">).

Use this styles package directly when you need:

Fine-grained control over which CSS files are loaded
To integrate Spectrum styles into non-web component contexts
To build custom components outside the <sp-theme> wrapper
Direct access to unthemed design tokens for advanced use cases

See the @spectrum-web-components/theme documentation for more information about using the theme element.

Usage

yarn add @spectrum-web-components/styles

Design tokens

This package provides design token CSS custom properties for three Adobe design system variants (referred to as "systems").

Color options: Each system has different available color options, but in the future, each will have only dark and light available.

Scales: Each system has two scale sizes available: medium (default) and large. The medium scale is designed for desktop environments with slightly smaller components and spacing, while the large scale is optimized for mobile and touch devices with larger touch targets and spacing.

Available systems:

Spectrum (system: spectrum) - The original Spectrum design system
- Colors: dark, light, and deprecated darkest and lightest
- Scales: medium, large
Express (system: express) - The Adobe Express design system
- Colors: dark, light
- Scales: medium, large
Spectrum 2 (system: spectrum-two) - The next generation Spectrum design system
- Colors: dark, light
- Scales: medium, large

Spectrum 2 tokens

Spectrum 2 uses standalone token files. Pick one color option and one scale option:

/* pick a color option */
@import '@spectrum-web-components/styles/tokens-v2/light-vars.css';
/* pick a scale option */
@import '@spectrum-web-components/styles/tokens-v2/medium-vars.css';
/* import global custom properties last */
@import '@spectrum-web-components/styles/tokens-v2/global-vars.css';

Spectrum tokens

Spectrum uses a base + override pattern. Import base tokens first, then system-specific overrides:

/* import base tokens */
@import '@spectrum-web-components/styles/tokens/light-vars.css';
@import '@spectrum-web-components/styles/tokens/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/global-vars.css';

/* import spectrum-specific overrides */
@import '@spectrum-web-components/styles/tokens/spectrum/light-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/global-vars.css';

Express tokens

Express also uses a base + override pattern (same as Spectrum above, but with express/ paths):

/* import base tokens */
@import '@spectrum-web-components/styles/tokens/light-vars.css';
@import '@spectrum-web-components/styles/tokens/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/global-vars.css';

/* import express-specific overrides */
@import '@spectrum-web-components/styles/tokens/express/light-vars.css';
@import '@spectrum-web-components/styles/tokens/express/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/express/global-vars.css';

Tokens usage

Which tokens files you import will depend on which tokens you want to use.

Spectrum 2 tokens (tokens-v2)

Generally speaking, light-vars and dark-vars files contain raw color custom property definitions (such as --spectrum-red-500), as well as semantic custom property definitions that change depending on which color option you use. For instance, in Spectrum 2 tokens, --spectrum-neutral-subdued-background-color-default uses different values per theme. It resolves to --spectrum-gray-700 for light and --spectrum-gray-500 for dark.

For color, global-vars files contain semantic custom property definitions that stay consistent regardless of color option. For instance, --spectrum-neutral-background-color-default is always --spectrum-gray-800, but --spectrum-gray-800 is defined differently depending on whether dark or light custom properties have been imported. Component-specific custom properties are split across these files. Some are in global-vars (e.g., --spectrum-swatch-border-color), while others are in light-vars/dark-vars (e.g., --spectrum-assetcard-border-color-selected).

Similarly, medium-vars and large-vars files contain custom property definitions for raw spacings and sizes that differ between the two scales, such as --spectrum-font-size-200 and --spectrum-component-height-100. They also contain component-specific custom property definitions that differ between scales, for instance --spectrum-meter-width. The global-vars file defines custom properties related to sizing or spacing that are consistent regardless of scale (e.g., --spectrum-corner-radius-100), or uses custom properties defined in medium-vars/large-vars (e.g., --spectrum-meter-default-width: var(--spectrum-meter-width);).

Here's one example of tokens usage in a non-web-component context, showing how custom properties from each file work together:

/* import appropriate tokens files */
@import '@spectrum-web-components/styles/tokens-v2/light-vars.css';
@import '@spectrum-web-components/styles/tokens-v2/medium-vars.css';
@import '@spectrum-web-components/styles/tokens-v2/global-vars.css';

.my-component {
    /* defined in global-vars.css */
    border-radius: var(--spectrum-corner-radius-medium-size-small);
    border-width: var(--spectrum-border-width-100);
    color: var(
        --spectrum-neutral-content-color-default
    ); /* uses --spectrum-gray-800, which is defined differently depending whether light or dark vars are loaded */

    /* defined in light-vars.css, defined differently in dark-vars.css */
    background-color: var(--spectrum-gray-100);
    border-color: var(--spectrum-gray-800);

    /* defined in medium-vars.css, defined differently in large-vars.css */
    padding-inline: var(--spectrum-component-edge-to-text-75);
    padding-block: var(--spectrum-component-top-to-text-75);
    min-block-size: var(--spectrum-component-height-75);

    border-style: solid;
}

Tokens (base + system overrides pattern)

These tokens are generally similar to the Spectrum 2 tokens, but use a base layer plus system-specific overrides that must both be imported.

/* import base tokens files */
@import '@spectrum-web-components/styles/tokens/light-vars.css';
@import '@spectrum-web-components/styles/tokens/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/global-vars.css';

/* import express-specific tokens files (replace express/ with spectrum/ for Spectrum system) */
@import '@spectrum-web-components/styles/tokens/express/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/express/global-vars.css';

.my-component {
    /* defined in express medium-vars.css */
    border-radius: var(--spectrum-corner-radius-100);

    /* defined in express global-vars.css */
    border-width: var(--spectrum-border-width-100);

    /* defined in base global-vars.css */
    color: var(
        --spectrum-neutral-subdued-content-color-default
    ); /* uses --spectrum-gray-700, which is defined differently depending whether light or dark vars are loaded */

    /* defined in base light-vars.css, defined differently in dark-vars.css */
    background-color: var(--spectrum-gray-50);
    border-color: var(--spectrum-gray-700);

    /* defined in base medium-vars.css, defined differently in large-vars.css */
    padding-inline: var(--spectrum-component-edge-to-text-75);
    padding-block: var(--spectrum-component-top-to-text-75);
    min-block-size: var(--spectrum-component-height-75);

    border-style: solid;
}

Typography

The Spectrum Typography system provides a complete set of text styles. The typography system is shared across all design systems (Spectrum, Express, and Spectrum 2).

What's included

Typography wrapper (.spectrum-Typography) - Wrap your content with this class to apply proper spacing, margins, and base font settings to typography elements
Heading styles (.spectrum-Heading) - Multiple sizes from XXS to XXXL with weight variants (light, regular, heavy) and serif options
Body styles (.spectrum-Body) - Multiple sizes from XS to XXXL with serif options for body copy and longer text
Detail styles (.spectrum-Detail) - Uppercase labels and metadata text in sizes S through XL with light weight option
Code styles (.spectrum-Code) - Monospace inline code snippets in sizes XS through XL
Language support - Automatic font family selection for Arabic (:lang(ar)), Hebrew (:lang(he)), and CJK languages (Chinese, Japanese, Korean)
Emphasis and strong - Proper italic and bold styling for <em> and <strong> elements within each typography class
High contrast mode support - Ensures text remains readable when Windows High Contrast Mode is enabled

CSS imports

For stylesheet use, the recommended approach is to import the complete typography system, with tokens. This ensures that all required files are included.

@import '@spectrum-web-components/styles/tokens-v2/dark-vars.css'; /* import color tokens */
@import '@spectrum-web-components/styles/tokens-v2/large-vars.css'; /* import scale tokens */
@import '@spectrum-web-components/styles/tokens-v2/global-vars.css'; /* import global tokens */
@import '@spectrum-web-components/styles/typography.css';

TypeScript/JavaScript imports for Lit components

For use in Lit-based components, you can import typography styles as JavaScript modules.

Available JavaScript exports include:

typography.js - Complete typography system with all styles (heading, body, detail, code)
body.js - Body text styles only (includes base + lang + body)
heading.js - Heading styles only (includes base + lang + heading)
detail.js - Detail/label styles only (includes base + lang + detail)
code.js - Code styles only (includes base + lang + code)

Each individual export (body.js, heading.js, etc.) includes the necessary base and language support styles, so you don't need to import them separately. Import typography.js for the complete system, or import individual exports to reduce bundle size.

Import the complete system or individual components depending on your needs:

Import everything

To import the full typography system:

// tokens also need to be imported to define CSS custom properties
import typographyStyles from '@spectrum-web-components/styles/typography.js';

static styles = [typographyStyles];

Import only what you need

For smaller bundle sizes, import individual components:

// tokens also need to be imported to define CSS custom properties
import headingStyles from '@spectrum-web-components/styles/heading.js';

static styles = [headingStyles];

Spectrum Vars tokens (deprecated)

This package includes some deprecated files that use the older Spectrum Vars token naming convention, including combined theme files (e.g., all-medium-dark.css) and individual theme/scale files (e.g., theme-light.css, scale-medium.css).

Recommended alternatives:

Use <sp-theme> for automatic theme management (recommended)
Import Spectrum Core tokens directly for granular control (see "Design tokens" section above)
See the Spectrum Core tokens migration guide for help migrating from Spectrum Vars to Spectrum Core tokens

Migrating to Spectrum 2

If you're migrating to Spectrum 2, see the Spectrum 2 migration guide for detailed instructions.

Patch Changes

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

1.9.1

Patch Changes

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

1.9.0

Patch Changes

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

1.8.0

Patch Changes

#5529 77bdef6 Thanks @castastrophe! - Bring the CJK font alias token fix from CSS #3883 4e3a120.

The --spectrum-cjk-font token was incorrectly mapped to the code font-family stack instead of --spectrum-cjk-font-family-stack. Thanks @byteakp!
#5320 15be17d Thanks @renovate! - Clear button styles have been updated to the latest Spectrum CSS version of the clear button. This update includes a major reduction in the number of custom property abstractions needed to support the multiple theming layers (as seen in the styles package).

This update spans the following additional packages:
- @spectrum-web-components/button
- @spectrum-web-components/styles
As the updated styles now offer additional styling options, we have added the following API to the clear button component that exists in the button package:
- quiet - when set to true, the button will be rendered as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
- disabled - when set to true, the button will be rendered as a disabled button.
- static-color - currently this only supports the white context color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used variant="overBackground" attribute which is deprecated.
Deprecation
Section titled Deprecation
The variant="overBackground" attribute is deprecated; please use the new static-color="white" attribute instead. When this property is used in the component, a deprecation warning will be shown in the console when in debug mode. The variant attribute will be removed in a future release.
Updated dependencies []:
- @spectrum-web-components/base@1.8.0

1.7.0

Patch Changes

#5295 1126cf2 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.7.0

1.6.0

Patch Changes

#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

1.5.0

Patch Changes

#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

1.4.0

Patch Changes

#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

1.3.0

Patch Changes

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.

1.2.0 (2025-02-27)

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

1.1.2 (2025-02-12)

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

1.1.1 (2025-01-29)

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

1.1.0 (2025-01-29)

Bug Fixes

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

Features

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

1.0.3 (2024-12-09)

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

1.0.1 (2024-11-11)

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

1.0.0 (2024-10-31)

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

0.49.0 (2024-10-15)

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

0.48.1 (2024-10-01)

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

0.48.0 (2024-09-17)

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

0.47.2 (2024-09-03)

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

0.47.1 (2024-08-27)

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

0.47.0 (2024-08-20)

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

0.46.0 (2024-08-08)

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

0.45.0 (2024-07-30)

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

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

Spectrum Web Components

styles

Overview

Relationship to <sp-theme>

Usage

Design tokens

Spectrum 2 tokens

Spectrum tokens

Express tokens

Tokens usage

Typography

What's included

CSS imports

TypeScript/JavaScript imports for Lit components

Spectrum Vars tokens (deprecated)

Migrating to Spectrum 2

Changelog

Patch Changes

1.9.1

Patch Changes

1.9.0

Patch Changes

1.8.0

Patch Changes

Deprecation

1.7.0

Patch Changes

1.6.0

Patch Changes

Infield Button

6.1.2

6.1.1

6.1.0

Number Field

7.1.3

7.1.2

7.1.1

7.1.0

Textfield

8.1.1

8.1.0

Search

8.1.2

8.1.1

8.1.0

1.5.0

Patch Changes

1.4.0

Patch Changes

1.3.0

Patch Changes

1.2.0 (2025-02-27)

1.1.2 (2025-02-12)

1.1.1 (2025-01-29)

1.1.0 (2025-01-29)

Bug Fixes

Features

1.0.3 (2024-12-09)

1.0.1 (2024-11-11)

1.0.0 (2024-10-31)

0.49.0 (2024-10-15)

0.48.1 (2024-10-01)

0.48.0 (2024-09-17)

0.47.2 (2024-09-03)

0.47.1 (2024-08-27)

0.47.0 (2024-08-20)

0.46.0 (2024-08-08)

0.45.0 (2024-07-30)

0.44.0 (2024-07-15)

Features

0.43.0 (2024-06-11)

0.42.5 (2024-05-24)

0.42.4 (2024-05-14)

Bug Fixes

0.42.3 (2024-05-01)

0.42.2 (2024-04-03)

0.42.1 (2024-04-02)

0.42.0 (2024-03-19)

Bug Fixes

Features

Spectrum
Web Components

Relationship to `<sp-theme>`