@spectrum-css/vars

The vars component contains all the variables that drive the presentation of a component.

CSS Usage

The files within the css/ folder are unprocessed Spectrum DNA output. These contain ALL variables with raw data for each. These should be used if variables are required at build time.

The files within the dist/css/ folder contain processed DNA output, with references to only the DNA variables that change between color stops and scales. These should be if CSS custom properties are being used in-browser.

Updating DNA tokens / variables from Spectrum DNA

Update the DNA version in package.json

"@spectrum/spectrum-dna": "^x.y.z",

In root directory:

yarn install
yarn add -W -O @spectrum/spectrum-dna

Run the DNA update script:

cd components/vars
npm run update

Commit the new files with git add .; git commit -m "feat: update DNA to x.y.z" with x.y.z being the DNA version number matching the update in package.json.

Potential error resolving solutions

Clean Lerna, remove node_modules and reinstall Yarn dependencies.

npx lerna clean
rm -rf node_modules/
rm .yarnrc
yarn install

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

9.0.8

🗓 2023-06-12 • 📝 Commits

🐛 Bug fixes

*restore files to pre-formatted state(491dbcb)

9.0.7

🗓 2023-06-01 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

9.0.6

🗓 2023-05-23 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

9.0.5

🗓 2023-04-26 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

9.0.4

🗓 2023-04-25 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

9.0.3

🗓 2023-04-25 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

9.0.2

🗓 2023-04-17 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

9.0.1

🗓 2023-04-14 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

9.0.0

🗓 2023-04-03 • 📝 Commits

• fix(tokens)!: rgb transform to split out rgb values from css attributes (#1590) (b714db4), closes #1590

🛑 BREAKING CHANGES

• transforms color tokens to split out their rgb values

Co-authored-by: castastrophe castastrophe@users.noreply.github.com

8.0.5

🗓 2023-03-13 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

8.0.4

🗓 2023-02-21 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

8.0.3

🗓 2023-01-25 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

8.0.2

🗓 2023-01-18 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

8.0.1

🗓 2023-01-13 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

8.0.0

🗓 2022-04-28 • 📝 Commits

• feat!: update tokens with new colors, switch to deprecated token pkgs (7282091)

🛑 BREAKING CHANGES

• this PR introduces a substantial change to the color palette

7.3.0

🗓 2022-04-08 • 📝 Commits

✨ Features

• create -rgb suffixed variables for all rgb() values (b2ccdf3)

7.2.0

🗓 2022-03-22 • 📝 Commits

✨ Features

• split-out and Expressify Asset Card (61a4e96)
• update spectrum-tokens (891ad14)
• update spectrum-tokens, use new token packages (10c4a13)

🐛 Bug fixes

• more design review updates (b4bfa90)

7.1.1

🗓 2022-03-17 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

7.1.0

🗓 2022-03-07 • 📝 Commits

✨ Features

• fixup other Express Slider color an size changes (2fa1ce5)

🐛 Bug fixes

• updated based on design review (be41d62)

7.0.1

🗓 2022-03-07 • 📝 Commits

🐛 Bug fixes

• correct loupe outer (fd9f01c)

7.0.0

🗓 2022-02-23 • 📝 Commits

✨ Features

• ability to add custom variables for Express/Spectrum (50a4e04)
• combine Express and Spectrum SVGs, toggle visibility with vars (84f4b8b)
• update ColorLoupe and ColorSlider for Express (490c00a)
• use --spectrum-picked-color for everything (62e6469)

🐛 Bug fixes

• correct checkerboard background color (dc6c297)
• correct checkerboard color, stroke around edges of loupe (c327261)
• give the Spectrum loupe a stroke (486b079)

🛑 BREAKING CHANGES

• You must define --spectrum-picked-color instead of setting background-color

6.1.1

🗓 2022-02-16 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

6.1.0

🗓 2022-01-26 • 📝 Commits

✨ Features

• tabs: regenerate vars (28302af)
• update to latest vars release & regenerate custom props (a2af534)

🐛 Bug fixes

• tabs: bump versions to get latest vars (2bc69e9)

6.0.0

🗓 2022-01-05 • 📝 Commits

✨ Features

• temporary update of DNA variables ahead of release (47ce20c)
• update vars using local branch for testing and development (b0ceb6b)

chore

• update @adobe/spectrum-tokens and @adobe/spectrum-express-tokens (da06f9a)

🛑 BREAKING CHANGES

• changes to button token api for static and style variants. Removal of over background.

5.0.0

🗓 2022-01-05 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

5.0.0-beta.0

🗓 2021-12-14 • 📝 Commits

✨ Features

• temporary update of DNA variables ahead of release (9f2a310)
• update vars using local branch for testing and development (5938f77)

chore

• update @adobe/spectrum-tokens and @adobe/spectrum-express-tokens (df3a179)

🛑 BREAKING CHANGES

• changes to button token api for static and style variants. Removal of over background.

4.3.1

🗓 2021-12-06 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

4.3.0

🗓 2021-11-16 • 📝 Commits

✨ Features

• spectrum-tokens@8.4.0, spectrum-express-tokens@1.0.0-beta.13 (bb059fb)
• spectrum-tokens@8.5.0, spectrum-express-tokens@1.0.0-beta.14 (910c43a)

4.2.0

🗓 2021-11-10 • 📝 Commits

✨ Features

• thumbnail: use different color for checkerboard background (0331f62)

4.1.1

🗓 2021-11-09 • 📝 Commits

🐛 Bug fixes

• update DNA versions (c85446e)
• update DNA versions for checkbox, radio, switch (dcdcb7f)

4.1.0

🗓 2021-11-08 • 📝 Commits

✨ Features

• make ClearButton build again, unblock CCX (#1304) (ae9399a)

4.0.2

🗓 2021-10-25 • 📝 Commits

🐛 Bug fixes

• fixed picker quiet popover offset-x tokens (36c7551)
• update to spectrum-tokens 7.0.1 (b88d6ce)
• wip adding aliases back into linked DSS data (e1d6667)

4.0.1

🗓 2021-10-14 • 📝 Commits

🐛 Bug fixes

• fixed picker quiet popover offset-x tokens (36c7551)
• update to spectrum-tokens 7.0.1(b88d6ce)

4.0.0

🗓 2021-09-29 • 📝 Commits

🐛 Bug fixes

• adjusted tokens for treeview from DSS (6d9168a)
• resolve failing test by applying t-shirt size to actionbar example (1d55f90)
• update spectrum-tokens to 7.0.0-beta.27 (fffd834)
• updating latest spectrum-tokens (d35b957)
• updating version number on vars (f535b49)
• use updated tokens & resolve treeview build errors (c892536)

🛑 BREAKING CHANGES

• t-shirt sizes added.

3.1.0-alpha.3

🗓 2021-08-16 • 📝 Commits

🐛 Bug fixes

• added padding to unselected listitem back (f167013)

3.1.0-alpha.2

🗓 2021-06-17 • 📝 Commits

🐛 Bug fixes

• drop # from placeholder varnames, replace with _ (aa167bb)
• update checkbox disable background (0dfb656)
• updated to @adobe/spectrum-tokens@7.0.0-beta.18 (e604447)
• updated to @adobe/spectrum-tokens@7.0.0-beta.20 (74eaad1)
• updated to @adobe/spectrum-tokens@7.0.0-beta.21 (083ff44)

3.1.0-alpha.1

🗓 2021-05-12 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

3.1.0-alpha.0

🗓 2021-04-27 • 📝 Commits

✨ Features

• updated to latest spectrum-tokens version (0d7cc73)

🐛 Bug fixes

• updating min-width on card (f15db2a)

3.0.2

🗓 2021-04-15 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

3.0.1

🗓 2021-03-10 • 📝 Commits

🐛 Bug fixes

• #1123: placeholder text color alias for search, textarea, textfield (011ca54), closes #1123

3.0.0

🗓 2021-02-02 • 📝 Commits

✨ Features

• update to Spectrum Tokens 6.0.6 (bdc87b0)

3.0.0-beta.2

🗓 2020-12-04 • 📝 Commits

✨ Features

• update to Spectrum Tokens 6.0.0-beta.28 (e78216a)
• updated spectrum tokens to 6.0.0-beta.18.9 (83c393f)
• upgrade to @adobe/spectrum-tokens@6.0.0-beta.18.10 (8b327b2)
• upgrade to @adobe/spectrum-tokens@6.0.0-beta.18.11 (1442b61)
• upgrade to @adobe/spectrum-tokens@6.0.0-beta.18.12 (6b915ae)
• upgrade to @adobe/spectrum-tokens@6.0.0-beta.20.2 (9f11d44)
• upgrade to @adobe/spectrum-tokens@6.0.0-beta.26 (56423cd)
• upgrade to @adobe/spectrum-tokens@6.0.0-beta.27 (551eb7e)

🐛 Bug fixes

• correct a few more broken backticks (13fb792)
• vars: remove errant backtick in custom property names (3620398)
• correct DNA update (e585195)
• temporary patch DNA (4950589)

🛑 BREAKING CHANGES

• some tokens removed, some changed, life goes on

3.0.0-beta.1

🗓 2020-09-23 • 📝 Commits

🐛 Bug fixes

• fix the issues caused by component rename (#778) (e1d180c)
• resolving conflicts with main (8cafffa)
• updating tokens beta with breaking changes (9043417)
• wip fix more components (b74dbb8)

2.3.0

🗓 2020-05-14 • 📝 Commits

✨ Features

• switch from dna to spectrum-tokens (#657) (31a6fc5)

🐛 Bug fixes

• ignore invalid array-like variables, fixes #728 (27bd8d8)

2.2.0

🗓 2020-03-06 • 📝 Commits

✨ Features

• halo focus ring, closes #112, closes #573 (#603) (d87e9a5), closes #619

2.1.0

🗓 2020-02-10 • 📝 Commits

✨ Features

• upping DNA to 5.23.0 (5371449)

2.0.3

🗓 2019-12-14 • 📝 Commits

Note: Version bump only for package @spectrum-css/vars

2.0.2

🗓 2019-11-08 • 📝 Commits

🐛 Bug fixes

• do not convert non-opacity percent values to floats, fixes #395 (4b003ec)

2.0.1

🗓 2019-11-07 • 📝 Commits

🐛 Bug fixes

• preprocess percentage values and convert them to floats, fixes #340 (a77ac11)

2.0.0

🗓 2019-10-08

✨ Features

• generate indexes for globals/components, copy components (6eddf6c)
• move to individually versioned packages with Lerna (#265) (cb7fd4b), closes #231 #214 #229 #240 #239 #161 #242 #246 #219 #235 #189 #248 #232 #248 #218 #237 #255 #256 #258 #257 #259
• update DNA to 5.21 (#316) (373ea6c)
• use linked DNA data for CSS variable generation (0233a53)