coachmark,overlay: adjust imports of overlay and coachmark (#4455) (39706da)
duplicate code to empty global-vars before generating (#4507) (83215b6)
menu: enable numpad arrow and Enter keys (#4492) (012c411)
number-field: select full value when using Tab to enter a field with a unit (#4340) (a9d5cef)
number-field: updated number field to respect all locales (#4508) (cc6e928)
overlay: ensure hint Overlays within shadow roots open as expected (#4443) (7dd64b9)
overlay: ensure that passing "open" to the directive manages a single strategy (#4474) (15d6ac7)
overlay: persist "host" in directive rendered Overlay content (#4475) (5d189c2)
swatch: sync aria-label with changes in label, color, and mixed state (#4519) (50aef31)

Features

combobox: add pending state (#4462) (2d0c388)
contextual-help: add contextual help pattern (#4285) (a259aa3)

Readme

Source

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.

Keywords

FAQs

What is @spectrum-web-components/styles?

Is @spectrum-web-components/styles popular?

Is @spectrum-web-components/styles well maintained?

Last updated on 11 Jun 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@spectrum-web-components/styles

Bug Fixes