Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@spectrum-css/typography

adobe11.3kApache-2.08.2.0

The Spectrum CSS typography component

design-system, spectrum, spectrum-css, adobe, adobe-spectrum, component, css

readme

changelog

Change log

8.2.0

Minor Changes

📝 #4218 2df53f8 Thanks @castastrophe!

Ensure accurate exports are present for each component. Specifically, adding themes/* assets where present and removingindex-*.css exports where those assets do not exist.

8.1.0

Minor Changes

📝 205182b Thanks @castastrophe!

New feature

Minified and gzipped outputs available for all compiled CSS assets.

Patch Changes

📝 #3541 1a3245c Thanks @castastrophe!

Dependency alignment across the project.

8.0.1

Patch Changes

📝 #3534 68e0057 Thanks @castastrophe!

Fixes a bug in the content of the dist/index-theme.css file.

Expected index-theme.css to include the component selectors with component-level custom properties mapped to the --system prefixed ones in order to allow a component to support various contexts.

Expected output example for the index-theme.css:

.spectrum-ActionButton {
  --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover);

8.0.0

Major Changes

📝 #2786 6c19fcf Thanks @pfulton!

🛑 Breaking change

This major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These do NOT reflect a fully migrated S2 component. This approach allows consumers to swap the appearance of their components between S1, Express, and S2 by leveraging a "system" layer that remaps the necessary component-level tokens to the appropriate token dataset.

For these components to appear S2, you must load the assets with the @spectrum-css/tokens at v16 or higher.

For S1 or Express, load assets with the @spectrum-css/tokens at v14.x or v15.x.

If you are looking to implement a fully S2 design, please explore the next tag releases instead of using this foundations release. This release is used in Spectrum Web Components 1.x.

Deprecations

The metadata folder containing the mods.md and metadata.json assets has been removed from source. To find information about the components including what selectors, modifiers, and passthroughs are used, please see the dist/metadata.json asset shipped with every component containing CSS.

The index-vars.css asset has been removed in this release as it was previously deprecated and is no longer maintained. Please use the index.css or index-base.css

File usage

If you are rendering components and need only the S2 Foundations styles, you can make use of the index.css asset which contains all the base styles plus the system mappings for S2 Foundations.

If you are using this version to publish only an S1 or Express component, you can use the index-base.css plus the desired themes/(spectrum|express).css file.

To render a component that can be easily swapped between the S2 Foundations, S1, or Express contexts, load index-base.css with the index-theme.css file and leverage the appropriate context classes (.spectrum--legacy for S1 and .spectrum--express for Express).

Patch Changes

7.0.1

Patch Changes

📝 #3522 7a47c22 Thanks @castastrophe!

7.0.0

Major Changes

📝 #3502 562396e Thanks @castastrophe!

  • Remove empty theme references to reduce complexity for components that don't need to define any mappings. This involves removing the source themes directories with the empty spectrum.css and express.com files as well as removing the following empty or unnecessary exports:
    • index-base.css
    • index-theme.css
    • themes/spectrum.css
    • themes/express.css

Patch Changes

6.2.0

Minor Changes

📝 #3369 9c49505 Thanks @castastrophe!

  • Remove the storybook assets from the shipped output for components

6.1.3

Patch Changes

📝 #3107 83d5a17 Thanks @castastrophe!

  • Incorporate glob export for the dist directory in all component packages as well as glob markdown exports (to include both CHANGELOG and READMEs).

    Sort keys in the package.json assets.

6.1.2

Patch Changes

📝 #3045 5d6e03f Thanks @castastrophe!

  • Improve changeset suggestions by using exports instead of files in component packages

6.1.1

Patch Changes

📝 #2677 d83200c Thanks @castastrophe!

  • Leveral local workspace versioning to prevent misalignment

6.1.0

Minor Changes

📝 #2616 7f45ea9 Thanks @castastrophe!

Build optmizations to support minification

Output for all component CSS files is now being run through a lightweight optimizer (cssnano) which significantly reduces unnecessary whitespace. These changes reduce file size but should not have any impact on the rendering of the component. By removing unnecessary whitespace from var functions, we are making it easier to effectively minify our provided CSS assets.

Patch Changes

  • Updated peerDependencies [7f45ea9]:
    • @spectrum-css/tokens@>=14

6.0.0

🗓 2024-04-18 • 📝 Commits

  • feat!: postcss config build and script; remove gulp (#2466)(b0f337b), closes#2466

🛑 BREAKING CHANGE

  • Removes component-builder & component-builder-simple for script leveraging postcss
  • Imports added to index.css and themes/express.css

5.1.5

🗓 2024-03-07 • 📝 Commits

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

5.1.4

🗓 2024-02-26 • 📝 Commits

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

5.1.3

🗓 2024-02-16 • 📝 Commits

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

5.1.2

🗓 2024-02-15 • 📝 Commits

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

5.1.1

🗓 2024-02-06 • 📝 Commits

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

5.1.0

🗓 2024-01-16 • 📝 Commits

✨ Features

  • remove theme files without content(1eadd4f)

5.0.50

🗓 2023-12-12 • 📝 Commits

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

5.0.49

🗓 2023-12-04 • 📝 Commits

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

5.0.48

🗓 2023 • 📝 Commits

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

5.0.47

🗓 2023-11-13 • 📝 Commits

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

5.0.46

🗓 2023-11-09 • 📝 Commits

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

5.0.45

🗓 2023-10-13 • 📝 Commits

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

5.0.44

🗓 2023-09-26 • 📝 Commits

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

5.0.43

🗓 2023-09-18 • 📝 Commits

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

5.0.42

🗓 2023-09-14 • 📝 Commits

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

5.0.41

🗓 2023-09-13 • 📝 Commits

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

5.0.40

🗓 2023-09-07 • 📝 Commits

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

5.0.39

🗓 2023 • 📝 Commits

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

5.0.38

🗓 2023-08-31 • 📝 Commits

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

5.0.37

🗓 2023-08-29 • 📝 Commits

🔙 Reverts

5.0.36

🗓 2023-08-22 • 📝 Commits

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

5.0.35

🗓 2023-08-22 • 📝 Commits

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

5.0.34

🗓 2023-08-18 • 📝 Commits

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

5.0.33

🗓 2023-08-16 • 📝 Commits

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

5.0.32

🗓 2023-08-10 • 📝 Commits

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

5.0.31

🗓 2023-08-07 • 📝 Commits

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

5.0.30

🗓 2023 • 📝 Commits

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

5.0.29

🗓 2023-07-24 • 📝 Commits

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

5.0.28

🗓 2023-07-17 • 📝 Commits

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

5.0.27

🗓 2023-07-14 • 📝 Commits

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

5.0.26

🗓 2023-07-11 • 📝 Commits

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

5.0.25

🗓 2023-06-29 • 📝 Commits

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

5.0.24

🗓 2023-06-21 • 📝 Commits

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

5.0.23

🗓 2023-06-15 • 📝 Commits

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

5.0.22

🗓 2023-06-12 • 📝 Commits

🐛 Bug fixes

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

5.0.21

🗓 2023-06-02 • 📝 Commits

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

5.0.20

🗓 2023-06-01 • 📝 Commits

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

5.0.19

🗓 2023 • 📝 Commits

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

5.0.18

🗓 2023-05-22 • 📝 Commits

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

5.0.17

🗓 2023-05-18 • 📝 Commits

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

5.0.16

🗓 2023-05-17 • 📝 Commits

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

5.0.15

🗓 2023-05-11 • 📝 Commits

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

5.0.14

🗓 2023-05-10 • 📝 Commits

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

5.0.13

🗓 2023-05-10 • 📝 Commits

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

5.0.12

🗓 2023-05-08 • 📝 Commits

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

5.0.11

🗓 2023-05-04 • 📝 Commits

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

5.0.10

🗓 2023-05-02 • 📝 Commits

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

5.0.9

🗓 2023-04-26 • 📝 Commits

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

5.0.8

🗓 2023-04-25 • 📝 Commits

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

5.0.7

🗓 2023-04-25 • 📝 Commits

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

5.0.6

🗓 2023-04-25 • 📝 Commits

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

5.0.5

🗓 2023-04-25 • 📝 Commits

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

5.0.4

🗓 2023-04-24 • 📝 Commits

🐛 Bug fixes

  • typography: reset margins (2e300ab)

5.0.3

🗓 2023-04-21 • 📝 Commits

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

5.0.2

🗓 2023-04-20 • 📝 Commits

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

5.0.1

🗓 2023-04-17 • 📝 Commits

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

5.0.0

🗓 2023-04-17 • 📝 Commits

  • refactor(typography)!: use core tokens (#1557) (f7fb606), closes #1557

🛑 BREAKING CHANGE

  • migrates the Typography component to use @adobe/spectrum-tokens

Additionally:

  • update heading tokens
  • add body tokens
  • add core tokens
  • add detail tokens
  • add cjk heading tokens
  • add themes files
  • heading t-shirt sizes
  • move spectrum-Body color to index.css
  • remove skin.css
  • update heading tokens
    • sans-serif-heading-light
    • serif-heading-light
    • heading
    • heading-heavy

4.0.31

🗓 2023-04-14 • 📝 Commits

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

4.0.30

🗓 2023-04-03 • 📝 Commits

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

4.0.29

🗓 2023-03-13 • 📝 Commits

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

4.0.28

🗓 2023-02-21 • 📝 Commits

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

4.0.27

🗓 2023-02-06 • 📝 Commits

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

4.0.26

🗓 2023-02-01 • 📝 Commits

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

4.0.25

🗓 2023-01-27 • 📝 Commits

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

4.0.24

🗓 2023-01-25 • 📝 Commits

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

4.0.23

🗓 2023-01-18 • 📝 Commits

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

4.0.22

🗓 2023-01-13 • 📝 Commits

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

4.0.21

🗓 2022-11-11 • 📝 Commits

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

4.0.20

🗓 2022-06-16 • 📝 Commits

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

4.0.19

🗓 2022-06-07 • 📝 Commits

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

4.0.18

🗓 2022-04-28 • 📝 Commits

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

4.0.17

🗓 2022-04-08 • 📝 Commits

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

4.0.16

🗓 2022-03-22 • 📝 Commits

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

4.0.15

🗓 2022-03-17 • 📝 Commits

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

4.0.14

🗓 2022-03-07 • 📝 Commits

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

4.0.13

🗓 2022-03-07 • 📝 Commits

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

4.0.12

🗓 2022-02-23 • 📝 Commits

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

4.0.11

🗓 2022-02-16 • 📝 Commits

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

4.0.10

🗓 2022-01-26 • 📝 Commits

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

4.0.9

🗓 2022-01-05 • 📝 Commits

🐛 Bug fixes

  • update peer dependencies (97810cf)

4.0.8

🗓 2022-01-05 • 📝 Commits

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

4.0.7

🗓 2021-12-10 • 📝 Commits

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

4.0.6

🗓 2021-12-06 • 📝 Commits

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

4.0.5

🗓 2021-11-16 • 📝 Commits

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

4.0.4

🗓 2021-11-10 • 📝 Commits

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

4.0.3

🗓 2021-11-09 • 📝 Commits

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

4.0.2

🗓 2021-11-08 • 📝 Commits

🐛 Bug fixes

  • updating version number on vars (f535b49)

4.0.1

🗓 2021-10-25 • 📝 Commits

🐛 Bug fixes

  • updating version number on vars (f535b49)

4.0.0

🗓 2021-09-29 • 📝 Commits

🐛 Bug fixes

  • updating version number on vars (f535b49)

3.0.2

🗓 2021-04-15 • 📝 Commits

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

3.0.1

🗓 2021-03-10 • 📝 Commits

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

3.0.0

🗓 2021-02-02 • 📝 Commits

🛑 BREAKING CHANGE

  • all typography sizing classes now have --sizeinstead of --, see migration guides below

Migrating from deprecated Typography

See the table below to reference what will need to change when migrating to the new Typography API. Cells with a dash indicate the typography style did not exist in the previous API.

Note that all instances of typography now require the component class in addition to the modifier class. For example, to get a large Heading, you will need the .spectrum-Heading--sizeL modifier class as well as the .spectrum-Heading component class.

Heading
Deprecated Classname New Classname
~.spectrum-Heading1--display~ .spectrum-Heading.spectrum-Heading--sizeXXXL
~.spectrum-Heading1--display.spectrum-Heading1--quiet~ .spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--light
~.spectrum-Heading1--display.spectrum-Heading1--strong~ .spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--heavy
~.spectrum-Heading2--display~ .spectrum-Heading.spectrum-Heading--sizeXXL
~.spectrum-Heading2--display.spectrum-Heading2--quiet~ .spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--light
~.spectrum-Heading2--display.spectrum-Heading2--strong~ .spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--heavy
~.spectrum-Heading1~ .spectrum-Heading.spectrum-Heading--sizeXL
~.spectrum-Heading1--quiet~ .spectrum-Heading.spectrum-Heading--sizeXL.spectrum-Heading--light
~.spectrum-Heading1--strong~ .spectrum-Heading.spectrum-Heading--sizeXL.spectrum-Heading--heavy
~.spectrum-Heading2~ .spectrum-Heading.spectrum-Heading--sizeL
~.spectrum-Heading1--quiet~ .spectrum-Heading.spectrum-Heading--sizeL.spectrum-Heading--light
~.spectrum-Heading2--strong~ .spectrum-Heading.spectrum-Heading--sizeL.spectrum-Heading--heavy
~.spectrum-Heading3~ .spectrum-Heading.spectrum-Heading--sizeM
~.spectrum-Heading4~ .spectrum-Heading.spectrum-Heading--sizeS
~.spectrum-Heading5~ .spectrum-Heading.spectrum-Heading--sizeXS
~.spectrum-Heading6~ .spectrum-Heading.spectrum-Heading--sizeXXS
Body
Deprecated Classname New Classname
- .spectrum-Body.spectrum-Body--sizeXXXL
- .spectrum-Body.spectrum-Body--sizeXXL
~.spectrum-Body1~ .spectrum-Body.spectrum-Body--sizeXL
~.spectrum-Body2~ .spectrum-Body.spectrum-Body--sizeL
~.spectrum-Body3~ .spectrum-Body.spectrum-Body--sizeM
~.spectrum-Body4~ .spectrum-Body.spectrum-Body--sizeS
~.spectrum-Body5~ .spectrum-Body.spectrum-Body--sizeXS
Detail
Deprecated Classname New Classname
- .spectrum-Detail--sizeXL
- .spectrum-Detail--sizeXL.spectrum-Detail--light
- .spectrum-Detail--sizeL
- .spectrum-Detail--sizeL.spectrum-Detail--light
- .spectrum-Detail--sizeM
- .spectrum-Detail--sizeM.spectrum-Detail--light
~.spectrum-Subheading~ .spectrum-Detail--sizeS
~.spectrum-Detail~ .spectrum-Detail--sizeS.spectrum-Detail--light
Code
Deprecated Classname New Classname
~.spectrum-Code-1~ .spectrum-Code--sizeXL
~.spectrum-Code-2~ .spectrum-Code--sizeL
~.spectrum-Code-3~ .spectrum-Code--sizeM
~.spectrum-Code-4~ .spectrum-Code--sizeS
~.spectrum-Code-5~ .spectrum-Code--sizeXS

Updating sizing syntax

To be more consistent with other t-shirt sizing syntax, the Typography components now use the word size in the class name syntax.

Heading
Deprecated Classname New Classname
.spectrum-Heading.spectrum-Heading--XXXL .spectrum-Heading.spectrum-Heading--sizeXXXL
.spectrum-Heading.spectrum-Heading--XXL .spectrum-Heading.spectrum-Heading--sizeXXL
.spectrum-Heading.spectrum-Heading--XL .spectrum-Heading.spectrum-Heading--sizeXL
.spectrum-Heading.spectrum-Heading--L .spectrum-Heading.spectrum-Heading--sizeL
.spectrum-Heading.spectrum-Heading--M .spectrum-Heading.spectrum-Heading--sizeM
.spectrum-Heading.spectrum-Heading--S .spectrum-Heading.spectrum-Heading--sizeS
.spectrum-Heading.spectrum-Heading--XS .spectrum-Heading.spectrum-Heading--sizeXS
.spectrum-Heading.spectrum-Heading--XXS .spectrum-Heading.spectrum-Heading--sizeXXS
Body
Deprecated Classname New Classname
.spectrum-Body.spectrum-Body--XXXL .spectrum-Body.spectrum-Body--sizeXXXL
.spectrum-Body.spectrum-Body--XXL .spectrum-Body.spectrum-Body--sizeXXL
.spectrum-Body.spectrum-Body--XL .spectrum-Body.spectrum-Body--sizeXL
.spectrum-Body.spectrum-Body--L .spectrum-Body.spectrum-Body--sizeL
.spectrum-Body.spectrum-Body--M .spectrum-Body.spectrum-Body--sizeM
.spectrum-Body.spectrum-Body--S .spectrum-Body.spectrum-Body--sizeS
.spectrum-Body.spectrum-Body--XS .spectrum-Body.spectrum-Body--sizeXS
.spectrum-Body.spectrum-Body--XXS .spectrum-Body.spectrum-Body--sizeXXS
Detail
Deprecated Classname New Classname
.spectrum-Detail.spectrum-Detail--XL .spectrum-Detail.spectrum-Detail--sizeXL
.spectrum-Detail.spectrum-Detail--L .spectrum-Detail.spectrum-Detail--sizeL
.spectrum-Detail.spectrum-Detail--M .spectrum-Detail.spectrum-Detail--sizeM
.spectrum-Detail.spectrum-Detail--S .spectrum-Detail.spectrum-Detail--sizeS
Code
Deprecated Classname New Classname
.spectrum-Detail.spectrum-Code--XL .spectrum-Detail.spectrum-Code--sizeXL
.spectrum-Detail.spectrum-Code--L .spectrum-Detail.spectrum-Code--sizeL
.spectrum-Detail.spectrum-Code--M .spectrum-Detail.spectrum-Code--sizeM
.spectrum-Detail.spectrum-Code--S .spectrum-Detail.spectrum-Code--sizeS
.spectrum-Detail.spectrum-Code--XS .spectrum-Detail.spectrum-Code--sizeXS

2.1.3

🗓 2020-05-14 • 📝 Commits

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

2.1.2

🗓 2020-03-12 • 📝 Commits

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

2.1.1

🗓 2020-03-06 • 📝 Commits

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

2.1.0

🗓 2020-02-10 • 📝 Commits

✨ Features

2.0.3

🗓 2019-12-14 • 📝 Commits

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

2.0.2

🗓 2019-11-08 • 📝 Commits

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

2.0.1

🗓 2019-11-07 • 📝 Commits

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

2.0.0

🗓 2019-10-08

✨ Features