You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@spectrum-css/typography

Package Overview
Dependencies
Maintainers
4
Versions
153
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-css/typography - npm Package Compare versions

Comparing version

6.1.3
to
6.2.0

119

CHANGELOG.md
# Change Log
## 6.2.0
### Minor Changes
- [#3369](https://github.com/adobe/spectrum-css/pull/3369) [`9c49505`](https://github.com/adobe/spectrum-css/commit/9c4950517bf0f8ca7b2e373f4323c97d068d0ceb) Thanks [@castastrophe](https://github.com/castastrophe)! - Remove the storybook assets from the shipped output for components
## 6.1.3

@@ -932,4 +938,115 @@

- all typography sizing classes now have --size* instead of --*, see migration guides
- all typography sizing classes now have --size* instead 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` |
<a name="2.1.4-beta.0"></a>

@@ -936,0 +1053,0 @@

16

package.json
{
"name": "@spectrum-css/typography",
"version": "6.1.3",
"version": "6.2.0",
"description": "The Spectrum CSS typography component",

@@ -24,4 +24,3 @@ "license": "Apache-2.0",

"./metadata/*": "./metadata/*",
"./package.json": "./package.json",
"./stories/*": "./stories/*"
"./package.json": "./package.json"
},

@@ -33,7 +32,6 @@ "main": "dist/index.css",

"package.json",
"stories/*",
"metadata/*"
],
"peerDependencies": {
"@spectrum-css/tokens": ">=14"
"@spectrum-css/tokens": ">=14.5.0"
},

@@ -51,3 +49,9 @@ "devDependencies": {

"access": "public"
}
},
"spectrum": [
{
"guidelines": "https://spectrum.adobe.com/page/typography",
"rootClass": "spectrum-Typography"
}
]
}
metadata/typography-body.yml
metadata/typography-code.yml
metadata/typography-detail.yml
metadata/typography-heading.yml
metadata/typography-international.yml
metadata/typography.yml
stories/template.js
stories/typography.stories.js
stories/typography.test.js