@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

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.

Changelog

0.39.0 (2023-09-25)

Bug Fixes

• action-menu: stack a "label-only" slot on top of the others to allow no icon menu buttons (6b5817d)
• alert-dialog: add Alert Dialog package (#3501) (1062847)
• base: add re-export of lit/directive.js (#3616) (d2e237f)
• base: introduce static version property for component class (#3582) (e7e2b76)
• color-handle,color-loupe,swatch,thumbnail: use the Opacity Checkerboard package (47e1fc4)
• menu: allow Menu elements to be controlled (74ed7fb)
• menu: manage deeply slotted menu items and initial focus (7f9ad69)
• opacity checkerboard inclusion order (#3651) (4f417dc)
• overlay: allow "receives-focus" to target the root of an overlay (#3658) (0db1025)
• overlay: ensure position when closing overlays over the top-layer (55fab0d)
• overlay: reduce circular dependencies (25eeb71)
• picker,split-button: include "tooltip" slot in the main button (699b8af)
• shared: scope querySelector to direct children, like slots are (515eaee)
• slider: add t-shirt sizing (24dac78)

Features

• color-slider: migrate to core tokens (#3507) (96d0d40)
• meter: add "variant" (coalescing various boolean attributes) and remove "over-background" attributes (#3514) (40e5f8a)
• table: migrate to core tokens (#3441) (b866bab)
• underlay: use core tokens (9c555ab)