@spectrum-css/typography
Advanced tools
Comparing version
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 @@ |
{ | ||
"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" | ||
} | ||
] | ||
} |
215434
-23.95%8
-52.94%2889
-11.73%