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"). These tokens are organized by system, as well as color option and scale. There is also a set of global tokens for each system that do not vary with color option or scale.

Global tokens

Global token files (global-vars.css) define design values that remain constant across color options and scales, as well as semantic tokens that reference color- or scale-specific values:

Fixed constants - Values that never change regardless of color or scale:
- Opacity values (e.g., --spectrum-opacity-disabled: 0.3)
- Font families (Adobe Clean, for instance)
- Font weights (300, 400, 500, 700, 800, 900)
- Line heights and font styles
- Transparent white and black color definitions
- Base spacing scale (--spectrum-spacing-50 through --spectrum-spacing-1000)
- Semantically-named component constants (e.g., --spectrum-swatch-border-color, --spectrum-button-minimum-width-multiplier)
Semantic color aliases - Named by purpose, referencing values that change depending on the color option:
- --spectrum-disabled-background-color (in tokens-v2, references --spectrum-gray-100, which has different values for light and dark)
- --spectrum-focus-indicator-color
- --spectrum-neutral-content-color-default
Semantic component tokens - Named by purpose, referencing scale-specific values:
- --spectrum-breadcrumbs-height: var(--spectrum-component-height-300) (where component-height-300 is 48px in medium, 60px in large)
- --spectrum-meter-default-width: var(--spectrum-meter-width) (where meter-width is 192px in medium, 240px in large)

Color options

Each system makes a dark and light color option available. Currently, the Spectrum system also offers darkest and lightest color options, but these will be deprecated in the future.

Color option files (light-vars.css and dark-vars.css) contain raw color definitions that differ between themes, as well as semantic color mappings that reference different colors based on the selected theme:

Raw color definitions - Color scale values that differ between light and dark themes:
- --spectrum-gray-50 is white (255, 255, 255) in light theme, but dark gray (29, 29, 29) in dark theme
- --spectrum-gray-900 is black (0, 0, 0) in light theme, but white (255, 255, 255) in dark theme
- Full color scales for gray, blue, red, orange, yellow, green, and other semantic color families
Semantic color mappings - Named by purpose, referencing different raw colors based on theme:
- --spectrum-background-base-color references --spectrum-gray-200 in light, but --spectrum-gray-50 in dark
- --spectrum-neutral-subdued-background-color-default references --spectrum-gray-600 in light, but --spectrum-gray-400 in dark
- Component-specific colors like --spectrum-neutral-visual-color, background colors, and visual indicators

Scales

Each system has two scale sizes available: medium (default) and large. The medium scale is designed for desktop environments, while large is optimized for mobile and touch devices with larger touch targets. Scale files (medium-vars.css and large-vars.css) contain raw size and spacing definitions that differ between scales, as well as component-specific sizing values:

Raw size and spacing definitions - Values that differ between medium and large scales:
- --spectrum-font-size-200 is 16px in medium, but 19px in large
- --spectrum-component-height-100 is 32px in medium, but 40px in large
- Icon sizes, spacing values, and other dimensional tokens that scale up for larger/touch interfaces
Component-specific sizing - Tokens for component dimensions that vary by scale:
- --spectrum-meter-width is 192px in medium, but 240px in large
- --spectrum-breadcrumbs-height-multiline is 72px in medium, but 84px in large
- Component-specific measurements like button heights, field widths, and icon positioning

Token imports

Here are some examples of CSS token imports for each of the three systems:

Spectrum 2 tokens (tokens-v2)

Spectrum 2 uses standalone token files (in contrast to Spectrum and Express's base + override pattern). Pick one color option and one scale option:

/* pick a color option from: */
@import '@spectrum-web-components/styles/tokens-v2/light-vars.css';
@import '@spectrum-web-components/styles/tokens-v2/dark-vars.css';

/* pick a scale option from: */
@import '@spectrum-web-components/styles/tokens-v2/medium-vars.css';
@import '@spectrum-web-components/styles/tokens-v2/large-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 a color option from base tokens: */
@import '@spectrum-web-components/styles/tokens/light-vars.css';
@import '@spectrum-web-components/styles/tokens/lightest-vars.css';
@import '@spectrum-web-components/styles/tokens/dark-vars.css';
@import '@spectrum-web-components/styles/tokens/darkest-vars.css';

/* import a scale option from base tokens: */
@import '@spectrum-web-components/styles/tokens/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/large-vars.css';

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

/* import a color option from spectrum-specific overrides: */
@import '@spectrum-web-components/styles/tokens/spectrum/light-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/lightest-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/dark-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css';

/* import a scale option from spectrum-specific overrides: */
@import '@spectrum-web-components/styles/tokens/spectrum/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/spectrum/large-vars.css';

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

Express tokens

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

/* import a color option from base tokens: */
@import '@spectrum-web-components/styles/tokens/light-vars.css';
@import '@spectrum-web-components/styles/tokens/lightest-vars.css';
@import '@spectrum-web-components/styles/tokens/dark-vars.css';
@import '@spectrum-web-components/styles/tokens/darkest-vars.css';

/* import a scale option from base tokens: */
@import '@spectrum-web-components/styles/tokens/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/large-vars.css';

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

/* import a color option from spectrum-specific overrides: */
@import '@spectrum-web-components/styles/tokens/express/light-vars.css';
@import '@spectrum-web-components/styles/tokens/express/lightest-vars.css';
@import '@spectrum-web-components/styles/tokens/express/dark-vars.css';
@import '@spectrum-web-components/styles/tokens/express/darkest-vars.css';

/* import a scale option from spectrum-specific overrides: */
@import '@spectrum-web-components/styles/tokens/express/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/express/large-vars.css';

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

Token usage example

Which tokens files you import will depend on which tokens you want to use. Here's one example of tokens usage in a non-web-component context, showing how custom properties from each file work together. This will vary slightly depending on which system's tokens are being used.

Spectrum 2 tokens (tokens-v2)

/* 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

Global tokens

Color options

Scales

Token imports

Token usage example

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

Spectrum
Web Components

Relationship to `<sp-theme>`