From d3e935548784b7885843d413cf18190d362850e4 Mon Sep 17 00:00:00 2001 From: Bernhard Schmidt Date: Fri, 15 Nov 2019 13:03:05 -0800 Subject: [PATCH 01/24] feat: adding t-shirt sizes typography (SDS-2513) --- README.md | 8 + components/typography/index.css | 261 +++++++++++ .../metadata/typography-international.yml | 438 +++++++++++++++++- components/typography/metadata/typography.yml | 216 ++++++++- components/typography/skin.css | 150 ++++++ tools/component-builder/css/processors.js | 308 +++++++++--- yarn.lock | 8 +- 7 files changed, 1299 insertions(+), 90 deletions(-) diff --git a/README.md b/README.md index bb92c623078..badb81fc5bf 100644 --- a/README.md +++ b/README.md @@ -136,6 +136,8 @@ When this file is imported, if in updated version of `@spectrum-css/vars` change In most cases, this file will not be required, so you can safely ignore it. If you see unexpected visual changes creeping into components that you have not updated, `dist/vars.css` may correct them. +___ + ## Contributing Check out the [contributing guidelines](.github/CONTRIBUTING.md) for quick start information, and head over to the [component documentation](components/README.md) and [bundle documentation](bundles/README.md) for more information. @@ -222,6 +224,9 @@ The following tasks are available: - `gulp packageLint` - Lint the `package.json` file for each component in the monorepo - `gulp readmeLint` - Generate a generic `README.md` file for each component in the monorepo + +___ + ## Testing Visual regression testing is implemented by [BackstopJS](https://github.com/garris/BackstopJS). In order to avoid browser rendering inconsistent issue on different environments, the test needs to run inside of docker container. @@ -256,6 +261,9 @@ Both `backstop:test` and `backstop:docker:test` accept arguments to customize yo - `npm run backstop:docker:test themes=lightest,light scales=medium,large radio` - Run test for `radio` and its dependents components with color stop as `lightest` and `light` and scale as `medium` and `large`. It means that a single scenario will run 4 times. - `npm run backstop:docker:test themes=lightest,light,dark,darkest scales=medium,large` - Run test for all the components with all the color and scale combinations. It means that a single scenario will be run 8 times. +___ + + ## Releasing ### Releasing individual components diff --git a/components/typography/index.css b/components/typography/index.css index bc33ab6efb7..d4ad8cb7376 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -13,6 +13,267 @@ governing permissions and limitations under the License. @import '../commons/index.css'; @import 'font.css'; +/** + * Spectrum CSS Typography V3 (numeric) & V4 (t-shirt) + * + * Adds typography sizing and margins to be processed by + * mixins that are auto-generated in tools/component-builder/css/processor.js + * + */ + + +/* t-shirt size-based typography */ +/* Headings t-shirt sizes */ +@mixin typographyTShirtSizes .spectrum-HeadingXXXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXL {} +@mixin typographyTShirtSizes .spectrum-HeadingL {} +@mixin typographyTShirtSizes .spectrum-HeadingM {} +@mixin typographyTShirtSizes .spectrum-HeadingS {} +@mixin typographyTShirtSizes .spectrum-HeadingXS {} +@mixin typographyTShirtSizes .spectrum-HeadingXXS {} + +/* Headings are currently missing light and heavy for sizes M to XXS in DNA */ +@mixin typographyTShirtSizes .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXL--heavy, heading-heavy-XL {} +@mixin typographyTShirtSizes .spectrum-HeadingL--heavy, heading-heavy-L {} + +@mixin typographyTShirtSizes .spectrum-HeadingXXXL--light, heading-light-XXXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXXL--light, heading-light-XXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXL--light, heading-light-XL {} +@mixin typographyTShirtSizes .spectrum-HeadingL--light, heading-light-L {} + +/* Headings standard, heavy, light, t-shirt sizes */ +@mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading, heading-XXXL{} +@mixin typographyTShirtSizes .spectrum-HeadingXXL--heading, heading-XXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXL--heading, heading-XL {} +@mixin typographyTShirtSizes .spectrum-HeadingL--heading, heading-L {} + +@mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading.spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXXL--heading.spectrum-HeadingXXL--heavy, heading-heavy-XXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXL--heading.spectrum-HeadingXL--heavy, heading-heavy-XL {} +@mixin typographyTShirtSizes .spectrum-HeadingL--heading.spectrum-HeadingL--heavy, heading-heavy-XL {} + +@mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading.spectrum-HeadingXXXL--light, heading-light-XXXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXXL--heading.spectrum-HeadingXXL--light, heading-light-XXL {} +@mixin typographyTShirtSizes .spectrum-HeadingXL--heading.spectrum-HeadingXL--light, heading-light-XL {} +@mixin typographyTShirtSizes .spectrum-HeadingL--heading.spectrum-HeadingL--light, heading-light-L {} + +/* Body t-shirt sizes */ +@mixin typographyTShirtSizes .spectrum-BodyXXXL {} +@mixin typographyTShirtSizes .spectrum-BodyXXL {} +@mixin typographyTShirtSizes .spectrum-BodyXL {} +@mixin typographyTShirtSizes .spectrum-BodyL {} +@mixin typographyTShirtSizes .spectrum-BodyM {} +@mixin typographyTShirtSizes .spectrum-BodyS {} +@mixin typographyTShirtSizes .spectrum-BodyXS {} + +/* Detail / former subheadings t-shirt sizes */ +@mixin typographyTShirtSizes .spectrum-DetailXL {} +@mixin typographyTShirtSizes .spectrum-DetailL {} +@mixin typographyTShirtSizes .spectrum-DetailM {} +@mixin typographyTShirtSizes .spectrum-DetailS {} + +/* @TODO does not exists for strong or heavy for Details. Will be added in the future */ +/* +@mixin typographyTShirtSizes .spectrum-DetailXL--strong, detail-strong-XL { background-color: orange;} +@mixin typographyTShirtSizes .spectrum-DetailL--strong, detail-strong-L {} +@mixin typographyTShirtSizes .spectrum-DetailM--strong, detail-strong-M {} +@mixin typographyTShirtSizes .spectrum-DetailS--heavy, detail-heavy-S {} */ + +@mixin typographyTShirtSizes .spectrum-DetailXL--light, detail-light-XL {} +@mixin typographyTShirtSizes .spectrum-DetailL--light, detail-light-L {} +@mixin typographyTShirtSizes .spectrum-DetailM--light, detail-light-M {} +@mixin typographyTShirtSizes .spectrum-DetailS--light, detail-light-S {} + + +/* Code t-shirt sizes */ +@mixin typographyTShirtSizes .spectrum-CodeXL, code-XL, true { + font-family: var(--spectrum-code-xl-text-font-family); +} +@mixin typographyTShirtSizes .spectrum-CodeL, code-L, true { + font-family: var(--spectrum-code-l-text-font-family); +} +@mixin typographyTShirtSizes .spectrum-CodeM, code-M, true { + font-family: var(--spectrum-code-m-text-font-family); +} +@mixin typographyTShirtSizes .spectrum-CodeS, code-S, true { + font-family: var(--spectrum-code-s-text-font-family); +} +@mixin typographyTShirtSizes .spectrum-CodeXS, code-XS, true { + font-family: var(--spectrum-code-xs-text-font-family); +} + + +.spectrum-Typography { + @mixin typographyTShirtMargins .spectrum-HeadingXXXL {} + @mixin typographyTShirtMargins .spectrum-HeadingXXL {} + @mixin typographyTShirtMargins .spectrum-HeadingXL {} + @mixin typographyTShirtMargins .spectrum-HeadingL {} + @mixin typographyTShirtMargins .spectrum-HeadingM {} + @mixin typographyTShirtMargins .spectrum-HeadingS {} + @mixin typographyTShirtMargins .spectrum-HeadingXS {} + @mixin typographyTShirtMargins .spectrum-HeadingXXS {} + + @mixin typographyTShirtMargins .spectrum-BodyXXXL {} + @mixin typographyTShirtMargins .spectrum-BodyXXL {} + @mixin typographyTShirtMargins .spectrum-BodyXL {} + @mixin typographyTShirtMargins .spectrum-BodyL {} + @mixin typographyTShirtMargins .spectrum-BodyM {} + @mixin typographyTShirtMargins .spectrum-BodyS {} + @mixin typographyTShirtMargins .spectrum-BodyXS {} +} + + +/* T-Shirt sizes for .spectrum-Article */ +.spectrum-Article { + font-family: var(--spectrum-body-xl-text-font-family); + @mixin typographyTShirtSizes .spectrum-HeadingXXXL, heading-serif-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL, heading-serif-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL, heading-serif-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL, heading-serif-L {} + @mixin typographyTShirtSizes .spectrum-HeadingM, heading-serif-M {} + @mixin typographyTShirtSizes .spectrum-HeadingS, heading-serif-S {} + @mixin typographyTShirtSizes .spectrum-HeadingXS, heading-serif-XS {} + @mixin typographyTShirtSizes .spectrum-HeadingXXS, heading-serif-XXS {} + + @mixin typographyTShirtSizes .spectrum-BodyXXXL, body-serif-XXXL {} + @mixin typographyTShirtSizes .spectrum-BodyXXL, body-serif-XXL {} + @mixin typographyTShirtSizes .spectrum-BodyXL, body-serif-XL {} + @mixin typographyTShirtSizes .spectrum-BodyL, body-serif-L {} + @mixin typographyTShirtSizes .spectrum-BodyM, body-serif-M {} + @mixin typographyTShirtSizes .spectrum-BodyS, body-serif-S {} + @mixin typographyTShirtSizes .spectrum-BodyXS, body-serif-XS {} + @mixin typographyTShirtSizes .spectrum-BodyXXS, body-serif-XS {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--light, heading-light-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--light, heading-light-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--light, heading-light-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--light, heading-light-L {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--heavy, heading-heavy-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--heavy, heading-heavy-L {} + + /* These don't exist */ + /* @mixin typographyTShirtSizes .spectrum-HeadingM--light, heading-light-M {} */ + /*@mixin typographyTShirtSizes .spectrum-HeadingS--light, heading-light-S {} + @mixin typographyTShirtSizes .spectrum-HeadingXS--light, heading-light-XS {} + @mixin typographyTShirtSizes .spectrum-HeadingXXS--light, heading-light-XXS {} */ + + + @mixin typographyTShirtSizes .spectrum-DetailXL--serif, detail-serif-XL {} + @mixin typographyTShirtSizes .spectrum-DetailL--serif, detail-serif-L {} + @mixin typographyTShirtSizes .spectrum-DetailM--serif, detail-serif-M {} + @mixin typographyTShirtSizes .spectrum-DetailS--serif, detail-serif-S {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--serif, heading-serif-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--serif, heading-serif-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--serif, heading-serif-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--serif, heading-serif-L {} + @mixin typographyTShirtSizes .spectrum-HeadingM--serif, heading-serif-M {} + @mixin typographyTShirtSizes .spectrum-HeadingS--serif, heading-serif-S {} + @mixin typographyTShirtSizes .spectrum-HeadingXS--serif, heading-serif-XS {} + @mixin typographyTShirtSizes .spectrum-HeadingXXS--serif, heading-serif-XXS {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL-serif.spectrum-HeadingXXXL--heavy, heading-serif-heavy-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL-serif.spectrum-HeadingXXL--heavy, heading-serif-heavy-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL-serif.spectrum-HeadingXL--heavy, heading-serif-heavy-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL-serif.spectrum-HeadingL--heavy, heading-serif-heavy-L {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL-serif.spectrum-HeadingXXXL--light, heading-serif-light-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL-serif.spectrum-HeadingXXL--light, heading-serif-light-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL-serif.spectrum-HeadingXL--light, heading-serif-light-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL-serif.spectrum-HeadingL--light, heading-serif-light-L {} + /* @TODO should this be added ?*/ + /* @mixin typographyTShirtSizes .spectrum-HeadingXL--serif.spectrum-HeadingXL--light, heading-serif-light-XL {} */ +} + +/* International support */ +.spectrum { + &:lang(ja), + &:lang(ko), + &:lang(zh) { + @mixin typographyTShirtSizes .spectrum-HeadingXXXL, heading-han-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL, heading-han-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL, heading-han-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL, heading-han-L {} + @mixin typographyTShirtSizes .spectrum-HeadingM, heading-han-M {} + @mixin typographyTShirtSizes .spectrum-HeadingS, heading-han-S {} + @mixin typographyTShirtSizes .spectrum-HeadingXS, heading-han-XS {} + @mixin typographyTShirtSizes .spectrum-HeadingXXS, heading-han-XXS {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heavy, heading-han-heavy-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--heavy, heading-han-heavy-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--heavy, heading-han-heavy-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--heavy, heading-han-heavy-L {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--light, heading-han-light-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--light, heading-han-light-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--light, heading-han-light-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--light, heading-han-light-L {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading, heading-han-XXXL{} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--heading, heading-han-XXL{} + @mixin typographyTShirtSizes .spectrum-HeadingXL--heading, heading-han-XL{} + @mixin typographyTShirtSizes .spectrum-HeadingL--heading, heading-han-L{} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading.spectrum-HeadingXXXL--heavy, heading-han-heavy-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--heading.spectrum-HeadingXXL--heavy, heading-han-heavy-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--heading.spectrum-HeadingXL--heavy, heading-han-heavy-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--heading.spectrum-HeadingL--heavy, heading-han-heavy-XL {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading.spectrum-HeadingXXXL--light, heading-han-light-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--heading.spectrum-HeadingXXL--light, heading-han-light-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--heading.spectrum-HeadingXL--light, heading-han-light-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--heading.spectrum-HeadingL--light, heading-han-light-L {} + + @mixin typographyTShirtSizes .spectrum-BodyXXXL, body-han-XXXL {} + @mixin typographyTShirtSizes .spectrum-BodyXXL, body-han-XXL {} + @mixin typographyTShirtSizes .spectrum-BodyXL, body-han-XL {} + @mixin typographyTShirtSizes .spectrum-BodyL, body-han-L {} + @mixin typographyTShirtSizes .spectrum-BodyM, body-han-M {} + @mixin typographyTShirtSizes .spectrum-BodyS, body-han-S {} + @mixin typographyTShirtSizes .spectrum-BodyXS, body-han-XS {} + + @mixin typographyTShirtSizes .spectrum-DetailXL, detail-han-xl {} + @mixin typographyTShirtSizes .spectrum-DetailL, detail-han-l {} + @mixin typographyTShirtSizes .spectrum-DetailM, detail-han-m {} + @mixin typographyTShirtSizes .spectrum-DetailS, detail-han-s {} + + @mixin typographyTShirtSizes .spectrum-DetailXL--light, detail-han-light-XL {} + @mixin typographyTShirtSizes .spectrum-DetailL--light, detail-han-light-L {} + @mixin typographyTShirtSizes .spectrum-DetailM--light, detail-han-light-M {} + @mixin typographyTShirtSizes .spectrum-DetailS--light, detail-han-light-S {} + + + @mixin typographyTShirtSizes .spectrum-CodeXL, code-han-XL, true { + font-family: var(--spectrum-code-han-xl-text-font-family); + } + + @mixin typographyTShirtSizes .spectrum-CodeL, code-han-L, true { + font-family: var(--spectrum-code-han-l-text-font-family); + } + + @mixin typographyTShirtSizes .spectrum-CodeM, code-han-M, true { + font-family: var(--spectrum-code-han-m-text-font-family); + } + + @mixin typographyTShirtSizes .spectrum-CodeS, code-han-S, true { + font-family: var(--spectrum-code-han-s-text-font-family); + } + @mixin typographyTShirtSizes .spectrum-CodeXS, code-han-XS, true { + font-family: var(--spectrum-code-han-xs-text-font-family); + } + } +} + + +/** +* Legacy numeric-based typography (depreciated) +*/ @mixin typography .spectrum-Body1 {} @mixin typography .spectrum-Body2 {} @mixin typography .spectrum-Body3 {} diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml index 861b694f329..6e3bc27f95b 100644 --- a/components/typography/metadata/typography-international.yml +++ b/components/typography/metadata/typography-international.yml @@ -7,48 +7,144 @@ examples: markup: |
-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ - id: heading-1 name: Heading status: Verified description: Headings for typography. markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+

HeadingM HeadingM Emphasis HeadingM Strong.

+

HeadingS HeadingS Emphasis HeadingS Strong.

+

HeadingXS HeadingXS Emphasis HeadingXS Strong.

+

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+
+ +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+

HeadingM HeadingM Emphasis HeadingM Strong.

+

HeadingS HeadingS Emphasis HeadingS Strong.

+

HeadingXS HeadingXS Emphasis HeadingXS Strong.

+

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+
+ +
+

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+

見出しXL 見出しXL 重点 見出しXL 強い強調.

+

見出しL 見出しL 重点 見出しL 強い強調.

+

見出しM 見出しM 重点 見出しM 強い強調.

+

見出しS 見出しS 重点 見出しS 強い強調.

+

見出しXS 見出しXS 重点 見出しXS 強い強調.

+

見出しXXS 見出しXXS 重点 見出しXXS 強い強調.

+
+ +
+

XXXLالقسم XXXLالقسم تشديد XXXLالقسم تأكيد قو.

+

XXLالقسم XXLالقسم تشديد XXLالقسم تأكيد قو.

+

XLالقسم XLالقسم تشديد XLالقسم تأكيد قو.

+

Lالقسم Lالقسم تشديد Lالقسم تأكيد قو.

+

Mالقسم Mالقسم تشديد Mالقسم تأكيد قو.

+

Sالقسم Sالقسم تشديد Sالقسم تأكيد قو.

+

XSالقسم XSالقسم تشديد XSالقسم تأكيد قو.

+

XSSالقسم XSSالقسم تشديد XXSالقسم تأكيد قو.

+
+ +
+

XXXLדגש כותרת XXXLמאמר XXXLחזק.

+

XXLדגש כותרת XXLמאמר XXLחזק.

+

XLדגש כותרת XLמאמר XLחזק.

+

Lדגש כותרת Lמאמר Lחזק.

+

Mדגש כותרת Mמאמר Mחזק.

+

Sדגש כותרת Sמאמר Sחזק.

+

XSדגש כותרת XSמאמר XSחזק.

+

XXSדגש כותרת XXSמאמר XXSחזק.

+
+

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -93,6 +189,41 @@ examples: status: Verified description: Strong headings for typography. markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL heavy.

+
+ +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

Article HeadingXL Emphasis Strong.

+

Article HeadingL Emphasis heavy.

+
+ +
+

見出しXXXL 見出し XXXL >見出しXXXL 強い強調.

+

見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

+

見出しXL 見出しXL 重点 見出しXL強い強調.

+

見出しL 見出しL 重点 見出しL強い強調.

+
+ +
+

القسمXXXL القسم XXXL تشديد القسم 2XXXL تأكيد قو.

+

القسمXXL القسم 1XXL تشديد Emphasis القسم XXL تأكيد قو.

+

القسمXLالقسم 1XL تشديد القسم XL تأكيد قو.

+

القسمL القسم L تشديد القسم L تأكيد قو.

+
+ +
+

XXXLדגש כותרת XXXLמאמר XXXLחזק.

+

XXLדגש כותרת XXLמאמר XXLחזק.

+

XLדגש כותרת XLמאמר XLחזק.

+

Lדגש כותרת Lמאמר Lחזק.

+
+

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -117,11 +248,47 @@ examples:

דגש כותרת מאמר חזק.

דגש כותרת מאמר חזק.

+ - id: heading-1 name: Heading (Quiet) status: Verified description: Quiet headings for typography. markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+
+ +
+

Article HeadingXXXL Emphasis Strong.

+

Article HeadingXXL Emphasis Strong.

+

Article HeadingXL Emphasis Strong.

+

Article HeadingL Emphasis Strong.

+
+ +
+

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+

見出しXL 見出しXL 重点 見出しXL 強い強調.

+

見出しL 見出しL 重点 見出しL 強い強調.

+
+ +
+

XXXLالقسم القسم XXXL تشديد XXXLالقسم تأكيد قو.

+

XXLالقسم القسم XXL تشديد XXLالقسم تأكيد قو.

+

XLالقسم القسم XL تشديد XLالقسم تأكيد قو.

+

Lالقسم القسم L تشديد Lالقسم تأكيد قو.

+
+ +
+

XXXLדגש כותרת XXXLמאמר XXXLחזק.

+

XXLדגש כותרת XXLמאמר XXLחזק.

+

XLדגש כותרת XLמאמר XLחזק.

+

Lדגש כותרת Lמאמר Lחזק.

+
+

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -151,6 +318,42 @@ examples: status: Verified description: Display headings for typography. markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+
+
+

Article HeadingXXXL Emphasis Strong.

+

Article HeadingXXL Emphasis Strong.

+

Article HeadingXL Emphasis Strong.

+

Article HeadingL Emphasis Strong.

+
+ +
+

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+

見出しXL 見出しXL 重点 見出しXL 強い強調.

+

見出しL 見出しL 重点 見出しL 強い強調.

+
+ +
+

XXXLالقسم القسم XXXL تشديد القسم 2XXXL تأكيد قو.

+

XXLالقسم القسم XXL تشديد القسم 2XXL تأكيد قو.

+

XLالقسم القسم XL تشديد القسم XL تأكيد قو.

+

Lالقسم القسم 1L تشديد القسم L تأكيد قو.

+
+ +
+

XXXLדגש כותרת XXXLמאמר XXXLחזק.

+

XXLדגש כותרת XXLמאמר XXLחזק.

+

XLדגש כותרת XLמאמר XLחזק.

+

Lדגש כותרת Lמאמר Lחזק.

+
+ +

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -180,6 +383,34 @@ examples: status: Verified description: Strong display headings for typography. markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+ +
+

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+

見出しXL 見出しXL 重点 見出しXL 強い強調.

+

見出しL 見出しL 重点 見出しL 強い強調.

+
+ +
+

XXXLالقسم القسم XXXL تشديد القسم XXXL تأكيد قو.

+

XXLالقسم القسم XXL تشديد القسم XXL تأكيد قو.

+

القسم XL تشديد القسم XL تأكيد قو.

+

Lالقسم القسم L تشديد القسم L تأكيد قو.

+
+ +
+

XXXLדגש כותרת XXXLמאמר XXXLחזק.

+

XXLדגש כותרת XXLמאמר XXLחזק.

+

XLדגש כותרת XLמאמר XLחזק.

+

Lדגש כותרת Lמאמר Lחזק.

+
+

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -204,6 +435,41 @@ examples: status: Verified description: Quiet display headings for typography. markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+
+
+

Article HeadingXXXL Emphasis Strong.

+

Article HeadingXXL Emphasis Strong.

+

Article HeadingXL Emphasis Strong.

+

Article HeadingL Emphasis Strong.

+
+ +
+

見出しXXXL 見出し見出しXXXL 重点 見出し見出しXXXL 強い強調.

+

見出しXXL 見出し見出しXXL 重点 見出し見出しXXL 強い強調.

+

見出しXL 見出し見出しXL 重点 見出し見出しXL 強い強調.

+

見出しL 見出し見出しL 重点 見出し見出しL 強い強調.

+
+ +
+

XXXLالقسم القسم XXXL تشديد القسم XXXL تأكيد قو.

+

XXLالقسم القسم XXL تشديد القسم XXL تأكيد قو.

+

XLالقسم القسم XL تشديد القسم XL تأكيد قو.

+

Lالقسم القسم L تشديد القسم L تأكيد قو.

+
+ +
+

XXXLדגש כותרת XXXLמאמר XXXLחזק.

+

XXLדגש כותרת XXLמאמר XXLחזק.

+

XLדגש כותרת XLמאמר XLחזק.

+

Lדגש כותרת Lמאמר Lחזק.

+
+

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -233,6 +499,56 @@ examples: status: Verified description: Default body text sizes. markup: | +
+

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

+

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

+

BodyXL Text BodyXL Emphasis BodyXL Strong.

+

BodyL text BodyL Emphasis BodyL Strong.

+

BodyM Text BodyM Emphasis BodyM Strong.

+

BodyS Text BodyS Emphasis BodyS Strong.

+

BodyXS Text BodyXS Emphasis BodyXS Strong.

+
+ +
+

Article BodyXXXL Text Article BodyXXXL Emphasis Article BodyXXXL Strong.

+

Article BodyXXL Text Article BodyXXL Emphasis Article BodyXXL Strong.

+

Article BodyXL Text Article BodyXL Emphasis Article BodyXL Strong.

+

Article BodyL text Article BodyL Emphasis Article BodyL Strong.

+

Article BodyM Text Article BodyM Emphasis Article BodyM Strong.

+

Article BodyS Text Article BodyS Emphasis Article BodyS Strong.

+

Article BodyXS Text Article BodyXS Emphasis Article BodyXS Strong.

+
+ +
+

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+

見出しXL 見出しXL 重点 見出しXL 強い強調.

+

見出しL 見出しL 重点 見出しL 強い強調.

+

見出しM 見出しM 重点 見出しM 強い強調.

+

見出しS 見出しS 重点 見出しS 強い強調.

+

見出しXS 見出しXS 重点 見出しXS 強い強調.

+
+ +
+

القسم XXXL القسم XXXL تشديد القسم XXXL تأكيد قو.

+

القسم XXL القسم XXL تشديد القسم XXL تأكيد قو.

+

القسم XL القسم XL تشديد القسم XL تأكيد قو.

+

القسم L القسم L تشديد القسم L تأكيد قو.

+

القسم M القسم M تشديد القسم M تأكيد قو.

+

القسم S القسم S تشديد القسم S تأكيد قو.

+

القسم XS القسم XS تشديد القسم XS تأكيد قو.

+
+ +
+

XXXLטקסט גוף הדגשות XXXLגוף חזק XXXLגוף חזק.

+

XXLטקסט גוף הדגשות XXLגוף חזק XXLגוף חזק.

+

XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

+

Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

+

Mטקסט גוף הדגשות Mגוף חזק Mגוף חזק.

+

Sטקסט גוף הדגשות Sגוף חזק Sגוף חזק.

+

XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

+
+

Body1 Text Body1 Emphasis Body1 Strong.

Body2 text Body2 Emphasis Body2 Strong.

@@ -272,11 +588,72 @@ examples:

טקסט גוף הדגשות גוף חזק גוף חזק.

טקסט גוף הדגשות גוף חזק גוף חזק.

+ + - id: detail-1 + status: Verified + name: Detail + description: Subheadings for typography. + markup: | +
+

DetailXL DetailXL Emphasis DetailXL Strong.

+

DetailL DetailL Emphasis DetailL Strong.

+

DetailL DetailM Emphasis DetailM Strong.

+

DetailL DetailS Emphasis DetailS Strong.

+
+ +
+

DetailXL DetailXL Emphasis DetailXL Strong.

+

DetailL DetailL Emphasis DetailL Strong.

+

DetailL DetailM Emphasis DetailM Strong.

+

DetailL DetailS Emphasis DetailS Strong.

+
+ + +
+

見出しXL 見出しXL 見出しXL.

+

見出しL 見出しL 見出しL.

+

見出しM 見出しM 見出しM.

+

見出しS 見出しS 見出しS.

+
+ +
+

القسم XL القسم XL تشديد القسم XL تأكيد قو.

+

L L تشديد L تأكيد قو.

+

القسم M القسم M تشديد القسم M تأكيد قو.

+

القسم S القسم S تشديد القسم S تأكيد قو.

+
+ +
+

XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

+

Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

+

Mالقسم טקסט גוף הדגשות Mגוף חזק Mגוף חזק.

+

Sالقسم טקסט גוף הדגשות Sגוף חזק Sגוף חזק.

+
+ - id: heading-1 name: Han status: Verified description: Typographic pairings for Adobe Clean Han. markup: | +
+

見出しXXXL

+

見出しとよく対になる本文。

+

見出しXXL

+

見出しとよく対になる本文。

+

見出しXL

+

見出しとよく対になる本文。

+

見出しL

+

見出しとよく対になる本文。

+

見出しM

+

見出しとよく対になる本文。

+

+

見出しとよく対になる本文。

+

見出しXS
+

見出しとよく対になる本文。

+
見出しXXS
+

見出しとよく対になる本文。

+
+

見出し1

見出しとよく対になる本文。

@@ -315,10 +692,23 @@ examples:

Body copy that pairs with heading 5

- id: heading-1 + name: Typography - Code status: Verified description: Typographic styles for computer code. markup: | +
+ 暗号 XL Text Strong + 暗号 L Text Strong + 暗号 M Text Strong + 暗号 S Text Strong + 暗号 XS Text Strong + 
暗号 M Text Wrapped in:
+        pre tags for
+        goodness
+ multiline +
+ Code1 Text Strong Code2 Text Strong Code3 Text Strong diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml index 64ceb3d5cde..aa005abbdd6 100644 --- a/components/typography/metadata/typography.yml +++ b/components/typography/metadata/typography.yml @@ -1,5 +1,5 @@ name: Typography -description: 'English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples.' +description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples." SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ examples: - id: heading-1 @@ -9,48 +9,111 @@ examples: markup: |
+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ - id: heading-1 name: Heading status: Verified description: Headings for typography. markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+

HeadingM HeadingM Emphasis HeadingM Strong.

+

HeadingS HeadingS Emphasis HeadingS Strong.

+

HeadingXS HeadingXS Emphasis HeadingXS Strong.

+

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+
+ +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+

HeadingM HeadingM Emphasis HeadingM Strong.

+

HeadingS HeadingS Emphasis HeadingS Strong.

+

HeadingXS HeadingXS Emphasis HeadingXS Strong.

+

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+
+

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -72,6 +135,18 @@ examples: status: Verified description: Strong headings for typography. markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL heavy.

+
+
+
+

Article HeadingXL Emphasis Strong.

+

Article HeadingL Emphasis heavy.

+
+

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -82,10 +157,24 @@ examples:

Article Heading2 Emphasis Strong.

- id: heading-1 - name: Heading (Quiet) + name: Heading (Light) status: Verified - description: Quiet headings for typography. + description: Light headings for typography. markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+
+
+
+

Article HeadingXXXL Emphasis Strong.

+

Article HeadingXXL Emphasis Strong.

+

Article HeadingXL Emphasis Strong.

+

Article HeadingL Emphasis Strong.

+
+

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -100,6 +189,20 @@ examples: status: Verified description: Display headings for typography. markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+
+
+

Article HeadingXXXL Emphasis Strong.

+

Article HeadingXXL Emphasis Strong.

+

Article HeadingXL Emphasis Strong.

+

Article HeadingL Emphasis Strong.

+
+

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -110,19 +213,38 @@ examples:

Article Heading2 Emphasis Strong.

- id: heading-1 - name: Display (Strong) + name: Display (Heavy) status: Verified - description: Strong display headings for typography. + description: Heavy display headings for typography. markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

- id: heading-1 - name: Display (Quiet) + name: Display (Light) status: Verified - description: Quiet display headings for typography. + description: Light display headings for typography. markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+
+
+

Article HeadingXXXL Emphasis Strong.

+

Article HeadingXXL Emphasis Strong.

+

Article HeadingXL Emphasis Strong.

+

Article HeadingL Emphasis Strong.

+

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -137,6 +259,15 @@ examples: status: Verified description: Default body text sizes. markup: | +
+

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

+

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

+

BodyXL Text BodyXL Emphasis BodyXL Strong.

+

BodyL text BodyL Emphasis BodyL Strong.

+

BodyM Text BodyM Emphasis BodyM Strong.

+

BodyS Text BodyS Emphasis BodyS Strong.

+

BodyXS Text BodyXS Emphasis BodyXS Strong.

+

Body1 Text Body1 Emphasis Body1 Strong.

Body2 text Body2 Emphasis Body2 Strong.

@@ -146,6 +277,15 @@ examples:

Detail Text Detail Emphasis Detail Strong.


+
+

Article BodyXXXL Text Article BodyXXXL Emphasis Article BodyXXXL Strong.

+

Article BodyXXL Text Article BodyXXL Emphasis Article BodyXXL Strong.

+

Article BodyXL Text Article BodyXL Emphasis Article BodyXL Strong.

+

Article BodyL text Article BodyL Emphasis Article BodyL Strong.

+

Article BodyM Text Article BodyM Emphasis Article BodyM Strong.

+

Article BodyS Text Article BodyS Emphasis Article BodyS Strong.

+

Article BodyXS Text Article BodyXS Emphasis Article BodyXS Strong.

+

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

@@ -154,11 +294,62 @@ examples:

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

Detail Text Detail Emphasis Detail Strong.

+ - id: detail-1 + status: Verified + name: Detail + description: Subheadings for typography. + markup: | +
+

DetailXL DetailXL Emphasis DetailXL Strong.

+

DetailL DetailL Emphasis DetailL Strong.

+

DetailL DetailM Emphasis DetailM Strong.

+

DetailL DetailS Emphasis DetailS Strong.

+
+ +
+

DetailXL DetailXL Emphasis DetailXL Strong.

+

DetailL DetailL Emphasis DetailL Strong.

+

DetailL DetailM Emphasis DetailM Strong.

+

DetailL DetailS Emphasis DetailS Strong.

+
+ + - id: heading-1 name: Article status: Verified description: Typography elements paired to display clear content hierarchies in long form articles. markup: | +
+

Heading XXXL

+

Body copy that pairs with heading XXXL

+

Heading XXL

+

Body copy that pairs with heading XXL

+

Heading XL

+

Body copy that pairs with heading XL

+

Heading L

+

Body copy that pairs with heading L

+

Heading M

+

Body copy that pairs with heading M

+

Heading S

+

Body copy that pairs with heading S

+
Heading XS
+

Body copy that pairs with heading XS

+
Heading XXS
+

Body copy that pairs with heading XXS

+

Heading 1

Body copy that pairs with heading 1

@@ -180,6 +371,17 @@ examples: status: Verified description: Typographic styles for computer code. markup: | + CodeXL Text Strong + CodeL Text Strong + CodeM Text Strong + CodeS Text Strong + CodeXS Text Strong + 
CodeM Text Wrapped in:
+      pre tags for
+      multiline
+      goodness
+ + Code1 Text Strong Code2 Text Strong Code3 Text Strong diff --git a/components/typography/skin.css b/components/typography/skin.css index fefb1293872..e478486d9d3 100644 --- a/components/typography/skin.css +++ b/components/typography/skin.css @@ -10,6 +10,156 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +/** + * Spectrum CSS Typography V3 (numeric) & V4 (t-shirt) + * + * Adds typography colors to be processed by + * mixins that are auto-generated in tools/component-builder/css/processor.js + * + */ + + +/* t-shirt size-based typography */ +@mixin typographyTShirtColor .spectrum-BodyXXXL {} +@mixin typographyTShirtColor .spectrum-BodyXXL {} +@mixin typographyTShirtColor .spectrum-BodyXL {} +@mixin typographyTShirtColor .spectrum-BodyL {} +@mixin typographyTShirtColor .spectrum-BodyM {} +@mixin typographyTShirtColor .spectrum-BodyS {} +@mixin typographyTShirtColor .spectrum-BodyXS {} + +@mixin typographyTShirtColor .spectrum-HeadingXXXL {} +@mixin typographyTShirtColor .spectrum-HeadingXXL {} +@mixin typographyTShirtColor .spectrum-HeadingXL {} +@mixin typographyTShirtColor .spectrum-HeadingL {} +@mixin typographyTShirtColor .spectrum-HeadingM {} +@mixin typographyTShirtColor .spectrum-HeadingS {} +@mixin typographyTShirtColor .spectrum-HeadingXS {} +@mixin typographyTShirtColor .spectrum-HeadingXXS {} + +@mixin typographyTShirtColor .spectrum-HeadingXXXL--light, heading-light-XXXL {} +@mixin typographyTShirtColor .spectrum-HeadingXXL--light, heading-light-XXL {} +@mixin typographyTShirtColor .spectrum-HeadingXL--light, heading-light-XL {} +@mixin typographyTShirtColor .spectrum-HeadingL--light, heading-light-L {} + +@mixin typographyTShirtColor .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} +@mixin typographyTShirtColor .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} +@mixin typographyTShirtColor .spectrum-HeadingXL--heavy, heading-heavy-XL {} +@mixin typographyTShirtColor .spectrum-HeadingL--heavy, heading-heavy-L {} + +@mixin typographyTShirtColor .spectrum-HeadingXXXL--heading, heading-XXXL {} +@mixin typographyTShirtColor .spectrum-HeadingXXL--heading, heading-XXL {} +@mixin typographyTShirtColor .spectrum-HeadingXL--heading, heading-XL {} +@mixin typographyTShirtColor .spectrum-HeadingL--heading, heading-L {} + +@mixin typographyTShirtColor .spectrum-DetailXL {} +@mixin typographyTShirtColor .spectrum-DetailL {} +@mixin typographyTShirtColor .spectrum-DetailM {} +@mixin typographyTShirtColor .spectrum-DetailS {} + +@mixin typographyTShirtColor .spectrum-CodeXL, code-XL {} +@mixin typographyTShirtColor .spectrum-CodeL, code-L {} +@mixin typographyTShirtColor .spectrum-CodeM, code-M {} +@mixin typographyTShirtColor .spectrum-CodeS, code-S {} +@mixin typographyTShirtColor .spectrum-CodeXS, code-XS {} + +.spectrum-Article { + @mixin typographyColor .spectrum-HeadingXXXL, heading-serif-XXXL {} + @mixin typographyColor .spectrum-HeadingXXL, heading-serif-XXL {} + @mixin typographyColor .spectrum-HeadingXL, heading-serif-XL {} + @mixin typographyColor .spectrum-HeadingL, heading-serif-L {} + @mixin typographyColor .spectrum-HeadingM, heading-serif-M {} + @mixin typographyColor .spectrum-HeadingS, heading-serif-S {} + @mixin typographyColor .spectrum-HeadingXS, heading-serif-XS {} + @mixin typographyColor .spectrum-HeadingXXS, heading-serif-XXS {} + + @mixin typographyColor .spectrum-BodyXXXL, body-serif-XXXL {} + @mixin typographyColor .spectrum-BodyXXL, body-serif-XXL {} + @mixin typographyColor .spectrum-BodyXL, body-serif-XL {} + @mixin typographyColor .spectrum-BodyL, body-serif-L {} + @mixin typographyColor .spectrum-BodyM, body-serif-M {} + @mixin typographyColor .spectrum-BodyS, body-serif-S {} + @mixin typographyColor .spectrum-BodyXS, body-serif-XS {} + @mixin typographyColor .spectrum-BodyXXS, body-serif-XS {} + + @mixin typographyColor .spectrum-HeadingXXXL--light, heading-light-XXXL {} + @mixin typographyColor .spectrum-HeadingXXL--light, heading-light-XXL {} + @mixin typographyColor .spectrum-HeadingXL--light, heading-light-XL {} + @mixin typographyColor .spectrum-HeadingL--light, heading-light-L {} + + @mixin typographyColor .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} + @mixin typographyColor .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} + @mixin typographyColor .spectrum-HeadingXL--heavy, heading-heavy-XL {} + @mixin typographyColor .spectrum-HeadingL--heavy, heading-heavy-L {} + + @mixin typographyColor .spectrum-HeadingXXXL--serif, heading-serif-XXXL {} + @mixin typographyColor .spectrum-HeadingXXL--serif, heading-serif-XXL {} + @mixin typographyColor .spectrum-HeadingXL--serif, heading-serif-XL {} + @mixin typographyColor .spectrum-HeadingL--serif, heading-serif-L {} + @mixin typographyColor .spectrum-HeadingM--serif, heading-serif-M {} + @mixin typographyColor .spectrum-HeadingS--serif, heading-serif-S {} + @mixin typographyColor .spectrum-HeadingXS--serif, heading-serif-XS {} + @mixin typographyColor .spectrum-HeadingXXS--serif, heading-serif-XXS {} + + @mixin typographyColor .spectrum-DetailXL--serif, detail-serif-xl {} + @mixin typographyColor .spectrum-DetailL--serif, detail-serif-l {} + @mixin typographyColor .spectrum-DetailM--serif, detail-serif-m {} + @mixin typographyColor .spectrum-DetailS--serif, detail-serif-s {} +} + +.spectrum { + &:lang(ja), + &:lang(ko), + &:lang(zh) { + @mixin typographyTShirtColor .spectrum-BodyXXXL, body-han-XXXL {} + @mixin typographyTShirtColor .spectrum-BodyXXL, body-han-XXL {} + @mixin typographyTShirtColor .spectrum-BodyXL, body-han-XL {} + @mixin typographyTShirtColor .spectrum-BodyL, body-han-L {} + @mixin typographyTShirtColor .spectrum-BodyM, body-han-M {} + @mixin typographyTShirtColor .spectrum-BodyS, body-han-S {} + @mixin typographyTShirtColor .spectrum-BodyXS, body-han-XS {} + + @mixin typographyTShirtColor .spectrum-HeadingXXXL {} + @mixin typographyTShirtColor .spectrum-HeadingXXL {} + @mixin typographyTShirtColor .spectrum-HeadingXL {} + @mixin typographyTShirtColor .spectrum-HeadingL {} + @mixin typographyTShirtColor .spectrum-HeadingM {} + @mixin typographyTShirtColor .spectrum-HeadingS {} + @mixin typographyTShirtColor .spectrum-HeadingXS {} + @mixin typographyTShirtColor .spectrum-HeadingXXS {} + + @mixin typographyTShirtColor .spectrum-HeadingXXXL--light, heading-light-XXXL {} + @mixin typographyTShirtColor .spectrum-HeadingXXL--light, heading-light-XXL {} + @mixin typographyTShirtColor .spectrum-HeadingXL--light, heading-light-XL {} + @mixin typographyTShirtColor .spectrum-HeadingL--light, heading-light-L {} + + @mixin typographyTShirtColor .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} + @mixin typographyTShirtColor .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} + @mixin typographyTShirtColor .spectrum-HeadingXL--heavy, heading-heavy-XL {} + @mixin typographyTShirtColor .spectrum-HeadingL--heavy, heading-heavy-L {} + + @mixin typographyTShirtColor .spectrum-HeadingXXXL--heading, heading-XXXL {} + @mixin typographyTShirtColor .spectrum-HeadingXXL--heading, heading-XXL {} + @mixin typographyTShirtColor .spectrum-HeadingXL--heading, heading-XL {} + @mixin typographyTShirtColor .spectrum-HeadingL--heading, heading-L {} + + @mixin typographyTShirtColor .spectrum-DetailXL {} + @mixin typographyTShirtColor .spectrum-DetailL {} + @mixin typographyTShirtColor .spectrum-DetailM {} + @mixin typographyTShirtColor .spectrum-DetailS {} + + @mixin typographyTShirtColor .spectrum-CodeXL, code-XL {} + @mixin typographyTShirtColor .spectrum-CodeL, code-L {} + @mixin typographyTShirtColor .spectrum-CodeM, code-M {} + @mixin typographyTShirtColor .spectrum-CodeS, code-S {} + @mixin typographyTShirtColor .spectrum-CodeXS, code-XS {} + } +} + + +/** +* Legacy numeric-based typography (depreciated) +*/ @mixin typographyColor .spectrum-Body1 {} @mixin typographyColor .spectrum-Body2 {} @mixin typographyColor .spectrum-Body3 {} diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js index 2920a3add26..c3140c0e65a 100644 --- a/tools/component-builder/css/processors.js +++ b/tools/component-builder/css/processors.js @@ -10,75 +10,273 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +/** + * Spectrum CSS PostCSS Processor + * + * Generates Sass Mixins by automatic classnames with DNA tokens. + * Provides support for v4 (t-shirt based) typography + * and the legacy v3 (numeric based) typography. + * + * processes output also with task like: + * SVG scaling, stripping of comments, post-css-focus-ring + * and auto-prefixing for specific browsers. + * + * Structured in: + * - typographyTShirtSizes (v4) + * - typography (v3) + * + * - typographyTShirtMargins (v4) + * - typographyMargins (v3) + * + * - typographyTShirtColor(v4) + * - typographyColor(v3) + * + * Shared functions for v4 are: + * - getTShirtTokenName + * - getTypographySizes + * + * Shared functions for v3 & v4: + * - buildProperties + * - getTypographyMargins + * + * Lastly all the post-processing. + * + */ const postcssReal = require('postcss'); +/** + * Helper: get a Spectrum CSS T-shirt class name + * + * @param {string} name DNA token name + * @returns {string} Spectrum CSS t-shirt sized token name + */ +function getTShirtTokenName(name) { + tokenName = name.replace(/\.?([A-Z]{,1}$ |[0-9])/g, + function (x, y) { + return '-' + y + }) + .replace(/([A-Z]{1,})/g, + function (x, y) { + return '-' + y + }) + .replace(/^-/, ''); + tokenName = tokenName.replace('.spectrum--', ''); + tokenName = tokenName.toLowerCase(); + return tokenName; +} + +/** + * Helper: get typography sizes + * Shared with t-shirt and numeric sizes + * + * @param {string} name class name + * @param {string} tokenName token name + * @param {string} textTransformIgnore ignore text transforms + * @param {boolean} [showIndicatorBorder=false] shows a blue border around the items. Useful for debugging. + * @returns {string} CSS output + */ +function getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder=false) { + var output = ''; + var propMap = { + 'font-size': 'text-size', + 'font-weight': 'text-font-weight', + 'line-height': 'text-line-height', + 'font-style': 'text-font-style', + 'letter-spacing': 'text-letter-spacing', + 'text-transform': 'text-transform', + }; + +/** + * Build typography properties for a DNA token + * + * @param {string} tokenString name of the token + * @returns {string} CSS rule for provided selector selector + */ +function buildProperties(tokenString) { + var ruleString = ''; + Object.keys(propMap).forEach((key) => { + if (!textTransformIgnore || key != 'text-transform') { + ruleString += ` ${key}: var(--spectrum-${tokenString}-${propMap[key]});\n`; + } + }); + ruleString += ' margin-top: 0;\n margin-bottom: 0;\n'; + return ruleString.toLowerCase(); + } + + var indicatorBorder = (showIndicatorBorder === true) ? 'border: solid 1px blue;' : ''; + + // Add classnames as an alternative for and for typography items with a classname. + // -emphasis & -strong will be added to the last provided classname or to provided ID. + // Example classname: "em, .spectrum-Heading2--quiet-emphasis" + emStrongClassName = (name.indexOf('.') !== -1) ? '.' + name.split('.').pop() : name; + + output = `${name} { + ${indicatorBorder} + ${buildProperties(tokenName)} + em, ${emStrongClassName}-emphasis { + ${buildProperties(`${tokenName}-emphasis`)} + } + strong, ${emStrongClassName}-strong { + ${buildProperties(`${tokenName}-strong`)} + } + }`; + return output; +} + +/** + * Helper: get typography margins + * Shared with t-shirt and numeric sizes + * + * @param {*} name class name + * @param {*} tokenName token name + * @returns {string} CSS output + */ +function getTypographyMargins(name, tokenName) { + var output = `${name} { + margin-top: var(--spectrum-${tokenName}-margin-top); + margin-bottom: var(--spectrum-${tokenName}-margin-bottom); + }`; + return output +} + +/** + * Helper: get typography colors + * + * @param {*} name class name + * @param {*} tokenName token name + * @param {boolean} [showIndicatorBackground=false] + * @returns {string} CSS output + */ +function getTypographyColor(name, tokenName, showIndicatorBackground=false) { + var indicatorBackground = (showIndicatorBackground === true) ? 'background-color: orange;' : ''; + var output = `${name} { + ${indicatorBackground} + color: var(--spectrum-${tokenName.toLowerCase()}-text-color); + }`; + return output; +} + +/** + * Add CSS nodes that are going to be processed with postcss + * + * @param {string} mixin name of the mixin + * @param {string} css css injected in the mixing + */ +function addNodesToCSS(mixin, css) { + var nodes = postcssReal.parse(css); + nodes.nodes[0].append(mixin.nodes); + mixin.replaceWith(nodes); +} + +/** + * Add postcss mixins + * + * @param {boolean} [keepVars=false] keeps DNA variables + * @param {boolean} [notNested=true] nest or don't nest + * @param {boolean} [secondNotNested=true] catch stray + * @param {boolean} [diff=false] perform a diff + */ function getProcessors(keepVars = false, notNested = true, secondNotNested = true, diff = false) { return [ require('postcss-import'), require('postcss-mixins')({ mixins: { - typography: function(mixin, name, tokenName, textTransformIgnore) { - if(!tokenName) { - tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, ''); + + /** + * Generate typography t-shirt sizes + * + * @param {*} mixin mixin name + * @param {*} name class name + * @param {*} tokenName name of token + * @param {*} textTransformIgnore ignore text transform + */ + typographyTShirtSizes: function (mixin, name, tokenName, textTransformIgnore) { + if (!tokenName) { + var tokenName = getTShirtTokenName(name); + } + + var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = true); + addNodesToCSS(mixin, output); + }, + + /** + * generate typography numeric sizes + * @param {*} mixin mixin name + * @param {*} name class name + * @param {*} tokenName name of token + * @param {*} textTransformIgnore ignore text transform + */ + typography: function (mixin, name, tokenName, textTransformIgnore) { + if (!tokenName) { + tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x, y) { return '-' + y.toLowerCase(); }).replace(/^-/, ''); tokenName = tokenName.replace('.spectrum--', ''); } - var output = ''; - var propMap = { - 'font-size': 'text-size', - 'font-weight': 'text-font-weight', - 'line-height': 'text-line-height', - 'font-style': 'text-font-style', - 'letter-spacing': 'text-letter-spacing', - 'text-transform': 'text-transform', - }; - function buildProperties (tokeString) { - var ruleString = ''; - Object.keys(propMap).forEach((key) => { - if(!textTransformIgnore || key != 'text-transform') { - ruleString += ` ${key}: var(--spectrum-${tokeString}-${propMap[key]});\n`; - } - }); - ruleString += ' margin-top: 0;\n margin-bottom: 0;\n'; - return ruleString; + + var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = false); + addNodesToCSS(mixin, output); + }, + + /** + * Generate typography margins for t-shirt sizes + * + * @param {*} mixin mixin name + * @param {*} name class name + * @param {*} tokenName name of token + */ + typographyTShirtMargins: function (mixin, name, tokenName) { + if (!tokenName) { + var tokenName = getTShirtTokenName(name); } - output = `${name} { - ${buildProperties(tokenName)} - em { - ${buildProperties(`${tokenName}-emphasis`)} - } - strong { - ${buildProperties(`${tokenName}-strong`)} - } - }`; - var nodes = postcssReal.parse(output); - nodes.nodes[0].append(mixin.nodes); - mixin.replaceWith(nodes); + var output = getTypographyMargins(name, tokenName); + addNodesToCSS(mixin, output); }, - typographyColor: function(mixin, name, tokenName) { - if(!tokenName) { - tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, ''); + + /** + * Generate typography margins for numeric sizes + * + * @param {*} mixin mixin name + * @param {*} name class name + * @param {*} tokenName name of token + */ + typographyMargins: function (mixin, name, tokenName) { + if (!tokenName) { + tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x, y) { return '-' + y.toLowerCase(); }).replace(/^-/, ''); tokenName = tokenName.replace('.spectrum--', ''); } - var output = `${name} { - color: var(--spectrum-${tokenName}-text-color); - }`; - var nodes = postcssReal.parse(output); - nodes.nodes[0].append(mixin.nodes); - mixin.replaceWith(nodes); + var output = getTypographyMargins(name, tokenName); + addNodesToCSS(mixin, output); }, - typographyMargins: function(mixin, name, tokenName) { - if(!tokenName) { - tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, ''); - tokenName = tokenName.replace('.spectrum--', ''); + + /** + * generate typography colors for t-shirt sizes + * + * @param {*} mixin mixin name + * @param {*} name class name + * @param {*} tokenName name of token + */ + typographyTShirtColor: function (mixin, name, tokenName) { + if (!tokenName) { + var tokenName = getTShirtTokenName(name); } - var output = `${name} { - margin-top: var(--spectrum-${tokenName}-margin-top); - margin-bottom: var(--spectrum-${tokenName}-margin-bottom); - }`; - var nodes = postcssReal.parse(output); - nodes.nodes[0].append(mixin.nodes); - mixin.replaceWith(nodes); + var output = getTypographyColor(name, tokenName, showIndicatorBackground = true); + addNodesToCSS(mixin, output); }, + + /** + * generate typography colors for numeric sizes + * + * @param {*} mixin mixin name + * @param {*} name class name + * @param {*} tokenName name of token + */ + typographyColor: function (mixin, name, tokenName) { + if (!tokenName) { + tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x, y) { return '-' + y.toLowerCase(); }).replace(/^-/, ''); + tokenName = tokenName.replace('.spectrum--', ''); + } + var output = getTypographyColor(name, tokenName, false); + addNodesToCSS(mixin, output); + } } }), require('postcss-nested'), @@ -95,10 +293,10 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru require('postcss-svg'), require('postcss-functions')({ functions: { - noscale: function(value) { + noscale: function (value) { return value.toString().toUpperCase(); }, - percent: function(value) { + percent: function (value) { return parseInt(value, 10) / 100; } } diff --git a/yarn.lock b/yarn.lock index ef30ae9dc27..598a5ad5108 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1042,10 +1042,10 @@ chalk "^1.x" chalk-cli "^4.x" -"@spectrum/spectrum-dna@5.23.0": - version "5.23.0" - resolved "https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-release/@spectrum/spectrum-dna/-/@spectrum/spectrum-dna-5.23.0.tgz#c93a8e202e22ba66da27a791f80ffead765f8529" - integrity sha1-yTqOIC4iumbaJ6eR+A/+rXZfhSk= +"@spectrum/spectrum-dna@^5.22.0": + version "5.22.0" + resolved "https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-release/@spectrum/spectrum-dna/-/@spectrum/spectrum-dna-5.22.0.tgz#1066568760a931027afd196521b16ee804b2c08c" + integrity sha1-EGZWh2CpMQJ6/RllIbFu6ASywIw= dependencies: "@spectrum/kulcon" "^1.x" bluebird "^3.x" From 71354df882e93d070babe12bcf56cc2a4ff6210b Mon Sep 17 00:00:00 2001 From: Bernhard Schmidt Date: Mon, 25 Nov 2019 14:42:58 +0900 Subject: [PATCH 02/24] fix: feedback from Nate (SDS-2513) --- components/typography/index.css | 32 +++++++++++------------ tools/component-builder/css/processors.js | 2 +- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/components/typography/index.css b/components/typography/index.css index d4ad8cb7376..7792053ffe7 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -128,7 +128,7 @@ governing permissions and limitations under the License. /* T-Shirt sizes for .spectrum-Article */ .spectrum-Article { - font-family: var(--spectrum-body-xl-text-font-family); + font-family: var(--spectrum-body-serif-xl-text-font-family); @mixin typographyTShirtSizes .spectrum-HeadingXXXL, heading-serif-XXXL {} @mixin typographyTShirtSizes .spectrum-HeadingXXL, heading-serif-XXL {} @mixin typographyTShirtSizes .spectrum-HeadingXL, heading-serif-XL {} @@ -147,21 +147,21 @@ governing permissions and limitations under the License. @mixin typographyTShirtSizes .spectrum-BodyXS, body-serif-XS {} @mixin typographyTShirtSizes .spectrum-BodyXXS, body-serif-XS {} - @mixin typographyTShirtSizes .spectrum-HeadingXXXL--light, heading-light-XXXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXXL--light, heading-light-XXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXL--light, heading-light-XL {} - @mixin typographyTShirtSizes .spectrum-HeadingL--light, heading-light-L {} - - @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXL--heavy, heading-heavy-XL {} - @mixin typographyTShirtSizes .spectrum-HeadingL--heavy, heading-heavy-L {} - - /* These don't exist */ - /* @mixin typographyTShirtSizes .spectrum-HeadingM--light, heading-light-M {} */ - /*@mixin typographyTShirtSizes .spectrum-HeadingS--light, heading-light-S {} - @mixin typographyTShirtSizes .spectrum-HeadingXS--light, heading-light-XS {} - @mixin typographyTShirtSizes .spectrum-HeadingXXS--light, heading-light-XXS {} */ + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--light, heading-serif-light-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--light, heading-serif-light-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--light, heading-serif-light-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--light, heading-serif-light-L {} + + @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heavy, heading-serif-heavy-XXXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXXL--heavy, heading-serif-heavy-XXL {} + @mixin typographyTShirtSizes .spectrum-HeadingXL--heavy, heading-serif-heavy-XL {} + @mixin typographyTShirtSizes .spectrum-HeadingL--heavy, heading-serif-heavy-L {} + + /* These don't exist, ticket is: https://jira.corp.adobe.com/browse/SDS-4454 */ + /* @mixin typographyTShirtSizes .spectrum-HeadingM--light, heading-serif-light-M {} */ + /*@mixin typographyTShirtSizes .spectrum-HeadingS--light, heading-serif-light-S {} + @mixin typographyTShirtSizes .spectrum-HeadingXS--light, heading-serif-light-XS {} + @mixin typographyTShirtSizes .spectrum-HeadingXXS--light, heading-serif-light-XXS {} */ @mixin typographyTShirtSizes .spectrum-DetailXL--serif, detail-serif-XL {} diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js index c3140c0e65a..7be24ad51b2 100644 --- a/tools/component-builder/css/processors.js +++ b/tools/component-builder/css/processors.js @@ -160,7 +160,7 @@ function getTypographyColor(name, tokenName, showIndicatorBackground=false) { * Add CSS nodes that are going to be processed with postcss * * @param {string} mixin name of the mixin - * @param {string} css css injected in the mixing + * @param {string} css css injected in the mixin */ function addNodesToCSS(mixin, css) { var nodes = postcssReal.parse(css); From e5d4c90149885b7a9d07f0b9bf1997d4ffe5a4a6 Mon Sep 17 00:00:00 2001 From: Bernhard Schmidt Date: Tue, 3 Dec 2019 14:24:43 -0800 Subject: [PATCH 03/24] fix: addressing font-family feedback (SDS-2513) --- components/commons/fonts.css | 16 +++++----- components/typography/metadata/typography.yml | 32 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/components/commons/fonts.css b/components/commons/fonts.css index 61c2507ad13..35ac2c239d5 100644 --- a/components/commons/fonts.css +++ b/components/commons/fonts.css @@ -28,14 +28,14 @@ governing permissions and limitations under the License. */ --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-han: 'adobe-clean-han-japanese', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-he: 'adobe-hebrew', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun', 'Heiti SC Light', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-zh: var(--spectrum-font-family-zhhans); - --spectrum-font-family-zhhant: 'adobe-clean-han-traditional', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic', 'Apple Gothic', var(--spectrum-font-fallbacks-sans); - --spectrum-font-family-ja: 'adobe-clean-han-japanese', 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4 Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', var(--spectrum-font-fallbacks-sans); + --spectrum-font-family-ar: var(--spectrum-font-family-ar); + --spectrum-font-family-he: var(--spectrum-font-family-he); + --spectrum-font-family-zh: var(--spectrum-font-family-zh); + --spectrum-font-family-zhhans: var(--spectrum-font-family-zhhans); + --spectrum-font-family-ko: var(--spectrum-font-family-ko); + --spectrum-font-family-ja: var(--spectrum-font-family-ja); + --spectrum-font-family-han: var(--spectrum-font-family-zh); + --spectrum-font-family-zhhant: var(--spectrum-font-family-zh); --spectrum-text-size: var(--spectrum-alias-font-size-default); --spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium); --spectrum-text-size-text-label: var(--spectrum-label-text-size); diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml index aa005abbdd6..57f3231f74d 100644 --- a/components/typography/metadata/typography.yml +++ b/components/typography/metadata/typography.yml @@ -300,32 +300,32 @@ examples: description: Subheadings for typography. markup: |
-

DetailXL DetailXL Emphasis DetailXL Strong.

-

DetailL DetailL Emphasis DetailL Strong.

-

DetailL DetailM Emphasis DetailM Strong.

-

DetailL DetailS Emphasis DetailS Strong.

+

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+

DetailL DetailL Emphasis DetailL Light DetailL Strong.

+

DetailM DetailM Emphasis DetailM Light DetailM Strong.

+

DetailS DetailS Emphasis DetailS Light DetailS Strong.

-

DetailXL DetailXL Emphasis DetailXL Strong.

-

DetailL DetailL Emphasis DetailL Strong.

-

DetailL DetailM Emphasis DetailM Strong.

-

DetailL DetailS Emphasis DetailS Strong.

+

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+

DetailL DetailL Emphasis DetailL Light DetailL Strong.

+

DetailM DetailM Emphasis DetailM Light DetailM Strong.

+

DetailS DetailS Emphasis DetailS Light DetailS Strong.

- id: heading-1 name: Article From df1e7479300e93a3c324fb19038f3f6b80c37e21 Mon Sep 17 00:00:00 2001 From: Bernhard Schmidt Date: Thu, 5 Dec 2019 15:06:04 -0800 Subject: [PATCH 04/24] fix: adding em to code (SDS-2513) --- components/typography/metadata/typography.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml index 57f3231f74d..8f2b6324dd2 100644 --- a/components/typography/metadata/typography.yml +++ b/components/typography/metadata/typography.yml @@ -371,11 +371,11 @@ examples: status: Verified description: Typographic styles for computer code. markup: | - CodeXL Text Strong - CodeL Text Strong - CodeM Text Strong - CodeS Text Strong - CodeXS Text Strong + CodeXL Text Strong Emphasis + CodeL Text Strong Emphasis + CodeM Text Strong Emphasis + CodeS Text Strong Emphasis + CodeXS Text Strong Emphasis 
CodeM Text Wrapped in:
       pre tags for
       multiline

From faa62274e8d537508db4ae31623c3f633dd8ae1d Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Thu, 12 Dec 2019 19:19:04 -0800
Subject: [PATCH 05/24] fix: split typography & international updates
 (SDS-2513)

---
 components/commons/fonts.css                  |  16 +-
 components/typography/index.css               |  72 +-
 .../typography/metadata/typograph-detail.yml  |  22 +
 .../typography/metadata/typography-body.yml   | 101 +++
 .../typography/metadata/typography-code.yml   |  18 +
 .../metadata/typography-deprecated.yml        |   2 +-
 .../metadata/typography-heading.yml           | 164 ++++
 .../typography-international-depreciated.yml  | 720 ++++++++++++++++++
 .../metadata/typography-international.yml     | 430 ++---------
 .../typography/metadata/typography-temp.yml   | 377 +++++++++
 components/typography/metadata/typography.yml | 205 +----
 components/typography/skin.css                |  60 +-
 yarn.lock                                     |   8 +-
 13 files changed, 1500 insertions(+), 695 deletions(-)
 create mode 100644 components/typography/metadata/typograph-detail.yml
 create mode 100644 components/typography/metadata/typography-body.yml
 create mode 100644 components/typography/metadata/typography-code.yml
 create mode 100644 components/typography/metadata/typography-heading.yml
 create mode 100644 components/typography/metadata/typography-international-depreciated.yml
 create mode 100644 components/typography/metadata/typography-temp.yml

diff --git a/components/commons/fonts.css b/components/commons/fonts.css
index 35ac2c239d5..1a82a0c63bc 100644
--- a/components/commons/fonts.css
+++ b/components/commons/fonts.css
@@ -28,14 +28,14 @@ governing permissions and limitations under the License.
   */
 
   --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-ar: var(--spectrum-font-family-ar);
-  --spectrum-font-family-he:  var(--spectrum-font-family-he);
-  --spectrum-font-family-zh: var(--spectrum-font-family-zh);
-  --spectrum-font-family-zhhans: var(--spectrum-font-family-zhhans);
-  --spectrum-font-family-ko: var(--spectrum-font-family-ko);
-  --spectrum-font-family-ja: var(--spectrum-font-family-ja);
-  --spectrum-font-family-han: var(--spectrum-font-family-zh);
-  --spectrum-font-family-zhhant: var(--spectrum-font-family-zh);
+  --spectrum-font-family-ar: var(--spectrum-alias-font-family-ar);
+  --spectrum-font-family-he:  var(--spectrum-alias-font-family-he);
+  --spectrum-font-family-zh: var(--spectrum-alias-font-family-zh);
+  --spectrum-font-family-zhhans: var(--spectrum-alias-font-family-zhhans);
+  --spectrum-font-family-ko: var(--spectrum-alias-font-family-ko);
+  --spectrum-font-family-ja: var(--spectrum-alias-font-family-ja);
+  --spectrum-font-family-han: var(--spectrum-alias-font-family-zh);
+  --spectrum-font-family-zhhant: var(--spectrum-alias-font-family-zh);
   --spectrum-text-size: var(--spectrum-alias-font-size-default);
   --spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium);
   --spectrum-text-size-text-label: var(--spectrum-label-text-size);
diff --git a/components/typography/index.css b/components/typography/index.css
index 7792053ffe7..f1f00768264 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -24,6 +24,13 @@ governing permissions and limitations under the License.
 
 /* t-shirt size-based typography */
 /* Headings t-shirt sizes */
+
+/* Swaps out the font-family to serif from sans-serif */
+.spectrum-Typography--serif {
+  background-color: pink !important;
+  font-family: var(--spectrum-body-serif-xl-text-font-family);
+}
+
 @mixin typographyTShirtSizes .spectrum-HeadingXXXL {}
 @mixin typographyTShirtSizes .spectrum-HeadingXXL {}
 @mixin typographyTShirtSizes .spectrum-HeadingXL {}
@@ -126,71 +133,6 @@ governing permissions and limitations under the License.
 }
 
 
-/* T-Shirt sizes for .spectrum-Article */
-.spectrum-Article {
-  font-family: var(--spectrum-body-serif-xl-text-font-family);
-  @mixin typographyTShirtSizes .spectrum-HeadingXXXL, heading-serif-XXXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXL, heading-serif-XXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXL, heading-serif-XL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingL, heading-serif-L {}
-  @mixin typographyTShirtSizes .spectrum-HeadingM, heading-serif-M {}
-  @mixin typographyTShirtSizes .spectrum-HeadingS, heading-serif-S {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXS, heading-serif-XS {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXS, heading-serif-XXS {}
-
-  @mixin typographyTShirtSizes .spectrum-BodyXXXL, body-serif-XXXL {}
-  @mixin typographyTShirtSizes .spectrum-BodyXXL, body-serif-XXL {}
-  @mixin typographyTShirtSizes .spectrum-BodyXL, body-serif-XL {}
-  @mixin typographyTShirtSizes .spectrum-BodyL, body-serif-L {}
-  @mixin typographyTShirtSizes .spectrum-BodyM, body-serif-M {}
-  @mixin typographyTShirtSizes .spectrum-BodyS, body-serif-S {}
-  @mixin typographyTShirtSizes .spectrum-BodyXS, body-serif-XS {}
-  @mixin typographyTShirtSizes .spectrum-BodyXXS, body-serif-XS {}
-
-  @mixin typographyTShirtSizes .spectrum-HeadingXXXL--light, heading-serif-light-XXXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXL--light, heading-serif-light-XXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXL--light, heading-serif-light-XL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingL--light, heading-serif-light-L {}
-
-  @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heavy, heading-serif-heavy-XXXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXL--heavy, heading-serif-heavy-XXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXL--heavy, heading-serif-heavy-XL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingL--heavy, heading-serif-heavy-L {}
-
-  /* These don't exist, ticket is: https://jira.corp.adobe.com/browse/SDS-4454 */
-  /* @mixin typographyTShirtSizes .spectrum-HeadingM--light, heading-serif-light-M {} */
-  /*@mixin typographyTShirtSizes .spectrum-HeadingS--light, heading-serif-light-S {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXS--light, heading-serif-light-XS {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXS--light, heading-serif-light-XXS {} */
-
-
-  @mixin typographyTShirtSizes .spectrum-DetailXL--serif, detail-serif-XL {}
-  @mixin typographyTShirtSizes .spectrum-DetailL--serif, detail-serif-L {}
-  @mixin typographyTShirtSizes .spectrum-DetailM--serif, detail-serif-M {}
-  @mixin typographyTShirtSizes .spectrum-DetailS--serif, detail-serif-S {}
-
-  @mixin typographyTShirtSizes .spectrum-HeadingXXXL--serif, heading-serif-XXXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXL--serif, heading-serif-XXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXL--serif, heading-serif-XL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingL--serif, heading-serif-L {}
-  @mixin typographyTShirtSizes .spectrum-HeadingM--serif, heading-serif-M {}
-  @mixin typographyTShirtSizes .spectrum-HeadingS--serif, heading-serif-S {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXS--serif, heading-serif-XS {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXS--serif, heading-serif-XXS {}
-
-  @mixin typographyTShirtSizes .spectrum-HeadingXXXL-serif.spectrum-HeadingXXXL--heavy, heading-serif-heavy-XXXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXL-serif.spectrum-HeadingXXL--heavy, heading-serif-heavy-XXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXL-serif.spectrum-HeadingXL--heavy, heading-serif-heavy-XL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingL-serif.spectrum-HeadingL--heavy, heading-serif-heavy-L {}
-
-  @mixin typographyTShirtSizes .spectrum-HeadingXXXL-serif.spectrum-HeadingXXXL--light, heading-serif-light-XXXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXXL-serif.spectrum-HeadingXXL--light, heading-serif-light-XXL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingXL-serif.spectrum-HeadingXL--light, heading-serif-light-XL {}
-  @mixin typographyTShirtSizes .spectrum-HeadingL-serif.spectrum-HeadingL--light, heading-serif-light-L {}
-  /* @TODO should this be added ?*/
-  /* @mixin typographyTShirtSizes .spectrum-HeadingXL--serif.spectrum-HeadingXL--light, heading-serif-light-XL {} */
-}
-
 /* International support */
 .spectrum {
   &:lang(ja),
diff --git a/components/typography/metadata/typograph-detail.yml b/components/typography/metadata/typograph-detail.yml
new file mode 100644
index 00000000000..618b1941961
--- /dev/null
+++ b/components/typography/metadata/typograph-detail.yml
@@ -0,0 +1,22 @@
+name: Typography Detail
+description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples."
+SpectrumSiteSlug: https://spectrum.adobe.com/page/detail/
+examples:
+  - id: detail-1
+    status: Verified
+    name: Detail
+    description: Subheadings for typography.
+    markup: |
+      

+        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

+        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

+        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

+
+        

+
+        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

+        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

+        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

+      

diff --git a/components/typography/metadata/typography-body.yml b/components/typography/metadata/typography-body.yml
new file mode 100644
index 00000000000..ccbbb38f2fc
--- /dev/null
+++ b/components/typography/metadata/typography-body.yml
@@ -0,0 +1,101 @@
+name: Typography Body
+description: "Spectrum Typography Body."
+SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/body/
+examples:
+  - id: body-1
+    name: Body
+    status: Verified
+    description: Default body text sizes.
+    markup: |
+      

+        
BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

+        
BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

+        
BodyXL Text BodyXL Emphasis BodyXL Strong.

+        
BodyL text BodyL Emphasis BodyL Strong.

+        
BodyM Text BodyM Emphasis BodyM Strong.

+        
BodyS Text BodyS Emphasis BodyS Strong.

+        
BodyXS Text BodyXS Emphasis BodyXS Strong.

+      

+
+      

+
+      

+        
BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

+        
BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.

+        
BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.

+        
BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.

+        
BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.

+        
BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

+        
BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

+      

+
+  - id: heading-1
+    name: Serif
+    status: Verified
+    description: Typography elements paired to display clear content hierarchies in long form articles.
+    markup: |
+      

+        
Heading XXXL

+        
Body copy that pairs with heading XXXL

+        
Heading XXL

+        
Body copy that pairs with heading XXL

+        
Heading XL

+        
Body copy that pairs with heading XL

+        
Heading L

+        
Body copy that pairs with heading L

+        
Heading M

+        
Body copy that pairs with heading M

+        
Heading S

+        
Body copy that pairs with heading S

+        
Heading XS

+        
Body copy that pairs with heading XS

+        
Heading XXS

+        
Body copy that pairs with heading XXS

+      

+
+  - id: heading-body-1
+    name: Standard
+    status: Verified
+    description: Typography elements paired to display clear content hierarchies.
+    markup: |
+      

+        

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        

+      

diff --git a/components/typography/metadata/typography-code.yml b/components/typography/metadata/typography-code.yml
new file mode 100644
index 00000000000..c2d0743e431
--- /dev/null
+++ b/components/typography/metadata/typography-code.yml
@@ -0,0 +1,18 @@
+name: Typography Code
+description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples."
+SpectrumSiteSlug: https://spectrum.adobe.com/page/code/
+examples:
+  - id: code-1
+    name: Typography - Code
+    status: Verified
+    description: Typographic styles for computer code.
+    markup: |
+      CodeXL Text Strong Emphasis
+      CodeL Text Strong Emphasis
+      CodeM Text Strong Emphasis
+      CodeS Text Strong Emphasis
+      CodeXS Text Strong Emphasis
+      
CodeM Text Wrapped in:
+      pre tags for
+      multiline
+      goodness

diff --git a/components/typography/metadata/typography-deprecated.yml b/components/typography/metadata/typography-deprecated.yml
index 84f9e7cf4a4..b8d84c533b8 100644
--- a/components/typography/metadata/typography-deprecated.yml
+++ b/components/typography/metadata/typography-deprecated.yml
@@ -1,5 +1,5 @@
 id: heading-display
-name: Typography (Deprecated)
+name: Typography (Deprecated II)
 status: Deprecated
 details: These styles can be replicated using new Typography classes
 description: Legacy typography elements.
diff --git a/components/typography/metadata/typography-heading.yml b/components/typography/metadata/typography-heading.yml
new file mode 100644
index 00000000000..59a693752f3
--- /dev/null
+++ b/components/typography/metadata/typography-heading.yml
@@ -0,0 +1,164 @@
+name: Typography Heading
+description: "Spectrum Typography Headings."
+SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/heading/
+examples:
+  - id: heading-1
+    name: Standard
+    status: Verified
+    description: Typography elements paired to display clear content hierarchies.
+    markup: |
+      

+        

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        

+      

+
+  - id: heading-1
+    name: Heading
+    status: Verified
+    description: Headings for typography.
+    markup: |
+      

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL Strong.

+        
HeadingM HeadingM Emphasis HeadingM Strong.

+        
HeadingS HeadingS Emphasis HeadingS Strong.

+        
HeadingXS HeadingXS Emphasis HeadingXS Strong.

+        
HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+        

+        
HeadingXXXL Serif HeadingXXXL Serif Emphasis HeadingXXXL Serif Strong.

+        
HeadingXXL Serif HeadingXXL Serif Emphasis HeadingXXL Serif Strong.

+        
HeadingXL Serif HeadingXL Serif Emphasis HeadingXL Serif Strong.

+        
HeadingL Serif HeadingL Serif Emphasis HeadingL Serif Strong.

+        
HeadingM Serif HeadingM Serif Emphasis HeadingM Serif Strong.

+        
HeadingS Serif HeadingS Serif Emphasis HeadingS Serif Strong.

+        
HeadingXS Serif HeadingXS Serif Emphasis HeadingXS Serif Strong.

+        
HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

+      

+
+  - id: heading-1
+    name: Heading (Strong)
+    status: Verified
+    description: Strong headings for typography.
+    markup: |
+      

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL heavy.

+        

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis heavy.

+      

+
+  - id: heading-1
+    name: Heading (Light)
+    status: Verified
+    description: Light headings for typography.
+    markup: |
+      

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL Strong.

+        

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

+      

+
+  - id: heading-1
+    name: Display
+    status: Verified
+    description: Display headings for typography.
+    markup: |
+      

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

+        

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

+      

+
+  - id: heading-1
+    name: Display (Heavy)
+    status: Verified
+    description: Heavy display headings for typography.
+    markup: |
+      

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

+        

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

+      

+
+  - id: heading-1
+    name: Display (Light)
+    status: Verified
+    description: Light display headings for typography.
+    markup: |
+      

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

+        

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

+      

diff --git a/components/typography/metadata/typography-international-depreciated.yml b/components/typography/metadata/typography-international-depreciated.yml
new file mode 100644
index 00000000000..b023e0c22d1
--- /dev/null
+++ b/components/typography/metadata/typography-international-depreciated.yml
@@ -0,0 +1,720 @@
+name: Typography (Int., Depreciated I)
+examples:
+  - id: heading-1
+    name: Typography
+    status: Verified
+    description: Typography elements paired to display clear content hierarchies.
+    markup: |
+      

+        

+          
Aliquet Mauris Eu

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+          
Aliquet Mauris Eu

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+          
Aliquet Mauris Eu

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Aliquet Mauris Eu

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Aliquet Mauris Eu

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Aliquet Mauris Eu

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+          
Lorem Ipsum Dolor

+          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        

+      

+
+  - id: heading-1
+    name: Heading
+    status: Verified
+    description: Headings for typography.
+    markup: |
+      

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL Strong.

+        
HeadingM HeadingM Emphasis HeadingM Strong.

+        
HeadingS HeadingS Emphasis HeadingS Strong.

+        
HeadingXS HeadingXS Emphasis HeadingXS Strong.

+        
HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+      

+
+      

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL Strong.

+        
HeadingM HeadingM Emphasis HeadingM Strong.

+        
HeadingS HeadingS Emphasis HeadingS Strong.

+        
HeadingXS HeadingXS Emphasis HeadingXS Strong.

+        
HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+      

+
+      

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

+        
見出しM 見出しM 重点 見出しM 強い強調.

+        
見出しS 見出しS 重点 見出しS 強い強調.

+        
見出しXS 見出しXS 重点 見出しXS 強い強調.

+        
見出しXXS 見出しXXS 重点 見出しXXS 強い強調.

+      

+
+      

+        
XXXLالقسم XXXLالقسم  تشديد XXXLالقسم  تأكيد قو.

+        
XXLالقسم XXLالقسم  تشديد XXLالقسم  تأكيد قو.

+        
XLالقسم XLالقسم  تشديد XLالقسم  تأكيد قو.

+        
Lالقسم Lالقسم  تشديد Lالقسم  تأكيد قو.

+        
Mالقسم Mالقسم  تشديد Mالقسم  تأكيد قو.

+        
Sالقسم Sالقسم  تشديد Sالقسم  تأكيد قو.

+        
XSالقسم XSالقسم  تشديد XSالقسم  تأكيد قو.

+        
XSSالقسم XSSالقسم  تشديد XXSالقسم  تأكيد قو.

+      

+
+      

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

+        
Mדגש כותרת Mמאמר Mחזק.

+        
Sדגש כותרת Sמאמר Sחזק.

+        
XSדגש כותרת XSמאמר XSחזק.

+        
XXSדגש כותרת XXSמאמר XXSחזק.

+      

+
+      

+        
Heading1 Heading1 Emphasis Heading1 Strong.

+        
Heading2 Heading2 Emphasis Heading2 Strong.

+        
Heading3 Heading3 Emphasis Heading3 Strong.

+        
Heading4 Heading4 Emphasis Heading4 Strong.

+        
Heading5 Heading5 Emphasis Heading5 Strong.

+      

+
+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+        
Article Heading3 Emphasis Strong.

+        
Article Heading4 Emphasis Strong.

+        
Article Heading5 Emphasis Strong.

+      

+
+      

+        
見出し1 見出し1 重点 見出し1 強い強調.

+        
見出し2 見出し2 重点 見出し2 強い強調.

+        
見出し3 見出し3 重点 見出し3 強い強調.

+        
見出し4 見出し4 重点 見出し4 強い強調.

+        
見出し5 見出し5 重点 見出し5 強い強調.

+      

+
+      

+        
القسم القسم  تشديد القسم  تأكيد قو.

+        
القسم القسم 1  تشديد القسم 2 تأكيد قو.

+        
القسم 3 القسم 3 تشديد القسم 3 تأكيد قو.

+        
القسم 4 القسم 4 تشديد القسم 4 تأكيد قو.

+        
القسم 5 القسم 5 تشديد القسم 5 تأكيد قو.

+      

+
+      

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+      

+  - id: heading-1
+    name: Heading (Strong)
+    status: Verified
+    description: Strong headings for typography.
+    markup: |
+      

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL heavy.

+      

+
+      

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
Article HeadingXL Emphasis Strong.

+        
Article HeadingL Emphasis heavy.

+      

+
+      

+        
見出しXXXL 見出し XXXL  >見出しXXXL 強い強調.

+        
見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL  重点 見出しXL強い強調.

+        
見出しL 見出しL  重点 見出しL強い強調.

+      

+
+      

+        
القسمXXXL القسم XXXL  تشديد القسم 2XXXL تأكيد قو.

+        
القسمXXL القسم 1XXL  تشديد Emphasis القسم XXL تأكيد قو.

+        
القسمXLالقسم 1XL  تشديد القسم XL تأكيد قو.

+        
القسمL القسم L  تشديد القسم L تأكيد قو.

+      

+
+      

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

+      

+
+      

+        
Heading1 Heading1 Emphasis Heading1 Strong.

+        
Heading2 Heading2 Emphasis Heading2 Strong.

+      

+
+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+      

+
+      

+        
見出し1 見出し1 重点 見出し1 強い強調.

+        
見出し2 見出し2  重点 見出し2 強い強調.

+      

+
+      

+        
القسم القسم  تشديد القسم  تأكيد قو.

+        
القسم القسم 1  تشديد القسم 2 تأكيد قو.

+      

+
+      

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+      

+
+  - id: heading-1
+    name: Heading (Quiet)
+    status: Verified
+    description: Quiet headings for typography.
+    markup: |
+      

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL Strong.

+      

+
+      

+        
Article HeadingXXXL Emphasis Strong.

+        
Article HeadingXXL Emphasis Strong.

+        
Article HeadingXL Emphasis Strong.

+        
Article HeadingL Emphasis Strong.

+      

+
+      

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

+      

+
+      

+        
XXXLالقسم القسم XXXL  تشديد XXXLالقسم  تأكيد قو.

+        
XXLالقسم القسم XXL  تشديد XXLالقسم  تأكيد قو.

+        
XLالقسم القسم XL  تشديد XLالقسم  تأكيد قو.

+        
Lالقسم القسم L  تشديد Lالقسم  تأكيد قو.

+      

+
+      

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

+      

+
+      

+        
Heading1 Heading1 Emphasis Heading1 Strong.

+        
Heading2 Heading2 Emphasis Heading2 Strong.

+      

+
+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+      

+
+      

+        
見出し1 見出し1 重点 見出し1 強い強調.

+        
見出し2 見出し2  重点 見出し2 強い強調.

+      

+
+      

+        
القسم القسم  تشديد القسم  تأكيد قو.

+        
القسم القسم 1  تشديد القسم 2 تأكيد قو.

+      

+
+      

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+      

+  - id: heading-1
+    name: Display
+    status: Verified
+    description: Display headings for typography.
+    markup: |
+      

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

+      

+      

+      

+        
Article HeadingXXXL Emphasis Strong.

+        
Article HeadingXXL Emphasis Strong.

+        
Article HeadingXL Emphasis Strong.

+        
Article HeadingL Emphasis Strong.

+      

+
+      

+        
見出しXXXL 見出しXXXL  重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL  重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL  重点 見出しXL 強い強調.

+        
見出しL 見出しL  重点 見出しL 強い強調.

+      

+
+      

+        
XXXLالقسم القسم XXXL  تشديد القسم 2XXXL تأكيد قو.

+        
XXLالقسم القسم XXL  تشديد القسم 2XXL تأكيد قو.

+        
XLالقسم القسم XL  تشديد القسم XL تأكيد قو.

+        
Lالقسم القسم 1L  تشديد القسم L تأكيد قو.

+      

+
+      

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

+      

+
+
+      

+        
Heading1 Emphasis Strong.

+        
Heading2 Emphasis Strong.

+      

+
+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+      

+
+      

+        
見出し1 見出し1 重点 見出し1 強い強調.

+        
見出し2 見出し2  重点 見出し2 強い強調.

+      

+
+      

+        
القسم القسم  تشديد القسم  تأكيد قو.

+        
القسم القسم 1  تشديد القسم 2 تأكيد قو.

+      

+
+      

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+      

+  - id: heading-1
+    name: Display (Strong)
+    status: Verified
+    description: Strong display headings for typography.
+    markup: |
+      

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

+      

+
+      

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

+      

+
+      

+        
XXXLالقسم القسم XXXL تشديد القسم XXXL تأكيد قو.

+        
XXLالقسم القسم XXL تشديد القسم XXL تأكيد قو.

+        
القسم XL تشديد القسم XL تأكيد قو.

+        
Lالقسم القسم L تشديد القسم L تأكيد قو.

+      

+
+      

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

+      

+
+      

+        
Heading1 Emphasis Strong.

+        
Heading2 Emphasis Strong.

+      

+
+      

+        
見出し1 見出し1 重点 見出し1 強い強調.

+        
見出し2 見出し2  重点 見出し2 強い強調.

+      

+
+      

+        
القسم القسم  تشديد القسم  تأكيد قو.

+        
القسم القسم 1  تشديد القسم 2 تأكيد قو.

+      

+
+      

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+      

+  - id: heading-1
+    name: Display (Quiet)
+    status: Verified
+    description: Quiet display headings for typography.
+    markup: |
+      

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

+      

+      

+      

+        
Article HeadingXXXL Emphasis Strong.

+        
Article HeadingXXL Emphasis Strong.

+        
Article HeadingXL Emphasis Strong.

+        
Article HeadingL Emphasis Strong.

+      

+
+      

+        
見出しXXXL 見出し見出しXXXL  重点 見出し見出しXXXL 強い強調.

+        
見出しXXL 見出し見出しXXL  重点 見出し見出しXXL 強い強調.

+        
見出しXL 見出し見出しXL  重点 見出し見出しXL 強い強調.

+        
見出しL 見出し見出しL  重点 見出し見出しL 強い強調.

+      

+
+      

+        
XXXLالقسم القسم XXXL  تشديد القسم XXXL تأكيد قو.

+        
XXLالقسم القسم XXL  تشديد القسم XXL تأكيد قو.

+        
XLالقسم القسم XL  تشديد القسم XL تأكيد قو.

+        
Lالقسم القسم L  تشديد القسم L تأكيد قو.

+      

+
+      

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

+      

+
+      

+        
Heading1 Emphasis Strong.

+        
Heading2 Emphasis Strong.

+      

+
+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+      

+
+      

+        
見出し1 見出し1 重点 見出し1 強い強調.

+        
見出し2 見出し2  重点 見出し2 強い強調.

+      

+
+      

+        
القسم القسم  تشديد القسم  تأكيد قو.

+        
القسم القسم 1  تشديد القسم 2 تأكيد قو.

+      

+
+      

+        
דגש כותרת מאמר חזק.

+        
דגש כותרת מאמר חזק.

+      

+  - id: heading-1
+    name: Body
+    status: Verified
+    description: Default body text sizes.
+    markup: |
+      

+        
BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

+        
BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

+        
BodyXL Text BodyXL Emphasis BodyXL Strong.

+        
BodyL text BodyL Emphasis BodyL Strong.

+        
BodyM Text BodyM Emphasis BodyM Strong.

+        
BodyS Text BodyS Emphasis BodyS Strong.

+        
BodyXS Text BodyXS Emphasis BodyXS Strong.

+      

+
+      

+        
Article BodyXXXL Text Article BodyXXXL Emphasis Article BodyXXXL Strong.

+        
Article BodyXXL Text Article BodyXXL Emphasis Article BodyXXL Strong.

+        
Article BodyXL Text Article BodyXL Emphasis Article BodyXL Strong.

+        
Article BodyL text Article BodyL Emphasis Article BodyL Strong.

+        
Article BodyM Text Article BodyM Emphasis Article BodyM Strong.

+        
Article BodyS Text Article BodyS Emphasis Article BodyS Strong.

+        
Article BodyXS Text Article BodyXS Emphasis Article BodyXS Strong.

+      

+
+      

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

+        
見出しM 見出しM 重点 見出しM 強い強調.

+        
見出しS 見出しS 重点 見出しS 強い強調.

+        
見出しXS 見出しXS 重点 見出しXS 強い強調.

+      

+
+      

+        
القسم XXXL القسم XXXL تشديد القسم XXXL تأكيد قو.

+        
القسم XXL القسم XXL تشديد القسم XXL تأكيد قو.

+        
القسم XL القسم XL تشديد القسم XL تأكيد قو.

+        
القسم L القسم L تشديد القسم L تأكيد قو.

+        
القسم M القسم M تشديد القسم M تأكيد قو.

+        
القسم S القسم S تشديد القسم S تأكيد قو.

+        
القسم XS القسم XS تشديد القسم XS تأكيد قو.

+      

+
+      

+        
XXXLטקסט גוף הדגשות XXXLגוף חזק XXXLגוף חזק.

+        
XXLטקסט גוף הדגשות XXLגוף חזק XXLגוף חזק.

+        
XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

+        
Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

+        
Mטקסט גוף הדגשות Mגוף חזק Mגוף חזק.

+        
Sטקסט גוף הדגשות Sגוף חזק Sגוף חזק.

+        
XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

+      

+
+      

+        
Body1 Text Body1 Emphasis Body1 Strong.

+        
Body2 text Body2 Emphasis Body2 Strong.

+        
Body3 Text Body3 Emphasis Body3 Strong.

+        
Body4 Text Body4 Emphasis Body4 Strong.

+        
Body5 Text Body5 Emphasis Body5 Strong.

+      

+
+      

+        
Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

+        
Article Body2 text Article Body2 Emphasis Article Body2 Strong.

+        
Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

+        
Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

+        
Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

+      

+
+      

+        
見出し1 見出し1 重点 見出し1 強い強調.

+        
見出し2 見出し2  重点 見出し2 強い強調.

+        
見出し3 見出し3 重点 見出し3 強い強調.

+        
見出し4 見出し4 重点 見出し4 強い強調.

+        
見出し5 見出し5 重点 見出し5 強い強調.

+      

+
+      

+        
القسم القسم  تشديد القسم  تأكيد قو.

+        
القسم القسم 1  تشديد القسم 2 تأكيد قو.

+        
القسم 3 القسم 3 تشديد القسم 3 تأكيد قو.

+        
القسم 4 القسم 4 تشديد القسم 4 تأكيد قو.

+        
القسم 5 القسم 5 تشديد القسم 5 تأكيد قو.

+      

+
+      

+        
טקסט גוף הדגשות גוף חזק גוף חזק.

+        
טקסט גוף הדגשות גוף חזק גוף חזק.

+        
טקסט גוף הדגשות גוף חזק גוף חזק.

+        
טקסט גוף הדגשות גוף חזק גוף חזק.

+        
טקסט גוף הדגשות גוף חזק גוף חזק.

+      

+
+  - id: detail-1
+    status: Verified
+    name: Detail
+    description: Subheadings for typography.
+    markup: |
+      

+        
DetailXL DetailXL Emphasis DetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Strong.

+        
DetailL DetailM Emphasis DetailM Strong.

+        
DetailL DetailS Emphasis DetailS Strong.

+      

+
+      

+        
DetailXL DetailXL Emphasis DetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Strong.

+        
DetailL DetailM Emphasis DetailM Strong.

+        
DetailL DetailS Emphasis DetailS Strong.

+      

+
+
+      

+        
見出しXL  見出しXL 見出しXL.

+        
見出しL  見出しL 見出しL.

+        
見出しM  見出しM 見出しM.

+        
見出しS  見出しS 見出しS.

+      

+
+      

+        
القسم XL القسم XL تشديد القسم XL تأكيد قو.

+        
L L تشديد L تأكيد قو.

+        
القسم M  القسم M تشديد القسم M تأكيد قو.

+        
القسم S القسم S تشديد القسم S تأكيد قو.

+      

+
+      

+        
XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

+        
Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

+        
Mالقسم טקסט גוף הדגשות Mגוף חזק Mגוף חזק.

+        
Sالقسم טקסט גוף הדגשות Sגוף חזק Sגוף חזק.

+      

+
+  - id: heading-1
+    name: Han
+    status: Verified
+    description: Typographic pairings for Adobe Clean Han.
+    markup: |
+      

+        
見出しXXXL

+        
見出しとよく対になる本文。

+        
見出しXXL

+        
見出しとよく対になる本文。

+        
見出しXL

+        
見出しとよく対になる本文。

+        
見出しL

+        
見出しとよく対になる本文。

+        
見出しM

+        
見出しとよく対になる本文。

+        

+        
見出しとよく対になる本文。

+        
見出しXS

+        
見出しとよく対になる本文。

+        
見出しXXS

+        
見出しとよく対になる本文。

+      

+
+      

+        
見出し1

+        
見出しとよく対になる本文。

+
+        
見出し2

+        
見出しとよく対になる本文。

+
+        
見出し13

+        
見出しとよく対になる本文。

+
+        
見出し14

+        
見出しとよく対になる本文。

+
+        
見出し15

+        
見出しとよく対になる本文。

+      

+  - id: heading-1
+    name: Article
+    status: Verified
+    description: Typography elements paired to display clear content hierarchies in long form articles.
+    markup: |
+      

+        
Heading 1

+        
Body copy that pairs with heading 1

+
+        
Heading 2

+        
Body copy that pairs with heading 2

+
+        
Heading 3

+        
Body copy that pairs with heading 3

+
+        
Heading 4

+        
Body copy that pairs with heading 4

+
+        
Heading 5

+        
Body copy that pairs with heading 5

+      

+  - id: heading-1
+
+    name: Typography - Code
+    status: Verified
+    description: Typographic styles for computer code.
+    markup: |
+      

+        暗号 XL Text Strong
+        暗号 L Text Strong
+        暗号 M Text Strong
+        暗号 S Text Strong
+        暗号 XS Text Strong
+        
暗号 M Text Wrapped in:
+        pre tags for
+        goodness

+        multiline
+      

+
+      Code1 Text Strong
+      Code2 Text Strong
+      Code3 Text Strong
+      Code4 Text Strong
+      Code5 Text Strong
+      
Code3 Text Wrapped in:
+      pre tags for
+      multiline
+      goodness

diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml
index 6e3bc27f95b..36a3cdd1bba 100644
--- a/components/typography/metadata/typography-international.yml
+++ b/components/typography/metadata/typography-international.yml
@@ -17,71 +17,33 @@ examples:
           
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

           
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Aliquet Mauris Eu

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
           
Aliquet Mauris Eu

           
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

           
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Aliquet Mauris Eu

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
           
Lorem Ipsum Dolor

           
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

           
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
           
Lorem Ipsum Dolor

           
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

           
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
           
Lorem Ipsum Dolor

           
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

           
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
           
Lorem Ipsum Dolor

           
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

           
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
           
Lorem Ipsum Dolor

           
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

           
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
           
Lorem Ipsum Dolor

           
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

           
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -99,17 +61,15 @@ examples:

HeadingS HeadingS Emphasis HeadingS Strong.

HeadingXS HeadingXS Emphasis HeadingXS Strong.

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

-
- -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-

HeadingM HeadingM Emphasis HeadingM Strong.

-

HeadingS HeadingS Emphasis HeadingS Strong.

-

HeadingXS HeadingXS Emphasis HeadingXS Strong.

-

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+
+

HeadingXXXL SerifHeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL SerifHeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL SerifHeadingXL Emphasis HeadingXL Strong.

+

HeadingL SerifHeadingL Emphasis HeadingL Strong.

+

HeadingM SerifHeadingM Emphasis HeadingM Strong.

+

HeadingS SerifHeadingS Emphasis HeadingS Strong.

+

HeadingXS SerifHeadingXS Emphasis HeadingXS Strong.

+

HeadingXXS SerifHeadingXXS Emphasis HeadingXXS Strong.

@@ -145,45 +105,6 @@ examples:

XXSדגש כותרת XXSמאמר XXSחזק.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-

Heading3 Heading3 Emphasis Heading3 Strong.

-

Heading4 Heading4 Emphasis Heading4 Strong.

-

Heading5 Heading5 Emphasis Heading5 Strong.

-
- -
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-

Article Heading3 Emphasis Strong.

-

Article Heading4 Emphasis Strong.

-

Article Heading5 Emphasis Strong.

-
- -
-

見出し1 見出し1 重点 見出し1 強い強調.

-

見出し2 見出し2 重点 見出し2 強い強調.

-

見出し3 見出し3 重点 見出し3 強い強調.

-

見出し4 見出し4 重点 見出し4 強い強調.

-

見出し5 見出し5 重点 見出し5 強い強調.

-
- -
-

القسم القسم تشديد القسم تأكيد قو.

-

القسم القسم 1 تشديد القسم 2 تأكيد قو.

-

القسم 3 القسم 3 تشديد القسم 3 تأكيد قو.

-

القسم 4 القسم 4 تشديد القسم 4 تأكيد قو.

-

القسم 5 القسم 5 تشديد القسم 5 تأكيد قو.

-
- -
-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-
- id: heading-1 name: Heading (Strong) status: Verified @@ -194,13 +115,11 @@ examples:

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

HeadingXL HeadingXL Emphasis HeadingXL Strong.

HeadingL HeadingL Emphasis HeadingL heavy.

-
- -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis heavy.

+
+

HeadingXXXL Serif HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL Serif HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis heavy.

@@ -224,31 +143,6 @@ examples:

Lדגש כותרת Lמאמר Lחזק.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-
- -
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- -
-

見出し1 見出し1 重点 見出し1 強い強調.

-

見出し2 見出し2 重点 見出し2 強い強調.

-
- -
-

القسم القسم تشديد القسم تأكيد قو.

-

القسم القسم 1 تشديد القسم 2 تأكيد قو.

-
- -
-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-
- - id: heading-1 name: Heading (Quiet) status: Verified @@ -259,13 +153,11 @@ examples:

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

HeadingXL HeadingXL Emphasis HeadingXL Strong.

HeadingL HeadingL Emphasis HeadingL Strong.

-
- -
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

@@ -289,30 +181,6 @@ examples:

Lדגש כותרת Lמאמר Lחזק.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-
- -
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- -
-

見出し1 見出し1 重点 見出し1 強い強調.

-

見出し2 見出し2 重点 見出し2 強い強調.

-
- -
-

القسم القسم تشديد القسم تأكيد قو.

-

القسم القسم 1 تشديد القسم 2 تأكيد قو.

-
- -
-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-
- id: heading-1 name: Display status: Verified @@ -323,13 +191,11 @@ examples:

HeadingXXL Emphasis Strong.

HeadingXL Emphasis Strong.

HeadingL Emphasis Strong.

-
-
-
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

@@ -353,31 +219,6 @@ examples:

Lדגש כותרת Lמאמר Lחזק.

- -
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
- -
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- -
-

見出し1 見出し1 重点 見出し1 強い強調.

-

見出し2 見出し2 重点 見出し2 強い強調.

-
- -
-

القسم القسم تشديد القسم تأكيد قو.

-

القسم القسم 1 تشديد القسم 2 تأكيد قو.

-
- -
-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-
- id: heading-1 name: Display (Strong) status: Verified @@ -411,25 +252,6 @@ examples:

Lדגש כותרת Lמאמר Lחזק.

-
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
- -
-

見出し1 見出し1 重点 見出し1 強い強調.

-

見出し2 見出し2 重点 見出し2 強い強調.

-
- -
-

القسم القسم تشديد القسم تأكيد قو.

-

القسم القسم 1 تشديد القسم 2 تأكيد قو.

-
- -
-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-
- id: heading-1 name: Display (Quiet) status: Verified @@ -440,13 +262,11 @@ examples:

HeadingXXL Emphasis Strong.

HeadingXL Emphasis Strong.

HeadingL Emphasis Strong.

-
-
-
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

@@ -470,30 +290,6 @@ examples:

Lדגש כותרת Lמאמר Lחזק.

-
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
- -
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- -
-

見出し1 見出し1 重点 見出し1 強い強調.

-

見出し2 見出し2 重点 見出し2 強い強調.

-
- -
-

القسم القسم تشديد القسم تأكيد قو.

-

القسم القسم 1 تشديد القسم 2 تأكيد قو.

-
- -
-

דגש כותרת מאמר חזק.

-

דגש כותרת מאמר חזק.

-
- id: heading-1 name: Body status: Verified @@ -507,16 +303,14 @@ examples:

BodyM Text BodyM Emphasis BodyM Strong.

BodyS Text BodyS Emphasis BodyS Strong.

BodyXS Text BodyXS Emphasis BodyXS Strong.

-
- -
-

Article BodyXXXL Text Article BodyXXXL Emphasis Article BodyXXXL Strong.

-

Article BodyXXL Text Article BodyXXL Emphasis Article BodyXXL Strong.

-

Article BodyXL Text Article BodyXL Emphasis Article BodyXL Strong.

-

Article BodyL text Article BodyL Emphasis Article BodyL Strong.

-

Article BodyM Text Article BodyM Emphasis Article BodyM Strong.

-

Article BodyS Text Article BodyS Emphasis Article BodyS Strong.

-

Article BodyXS Text Article BodyXS Emphasis Article BodyXS Strong.

+
+

BodyXXXL Text Serif BodyXXXL Emphasis BodyXXXL Strong.

+

BodyXXL Text Serif BodyXXL Emphasis BodyXXL Strong.

+

BodyXL Text Serif BodyXL Emphasis BodyXL Strong.

+

BodyL text Serif BodyL Emphasis BodyL Strong.

+

BodyM Text Serif BodyM Emphasis BodyM Strong.

+

BodyS Text Serif BodyS Emphasis BodyS Strong.

+

BodyXS Text Serif BodyXS Emphasis BodyXS Strong.

@@ -549,46 +343,6 @@ examples:

XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

-
-

Body1 Text Body1 Emphasis Body1 Strong.

-

Body2 text Body2 Emphasis Body2 Strong.

-

Body3 Text Body3 Emphasis Body3 Strong.

-

Body4 Text Body4 Emphasis Body4 Strong.

-

Body5 Text Body5 Emphasis Body5 Strong.

-
- -
-

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

-

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

-

Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

-

Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

-

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

-
- -
-

見出し1 見出し1 重点 見出し1 強い強調.

-

見出し2 見出し2 重点 見出し2 強い強調.

-

見出し3 見出し3 重点 見出し3 強い強調.

-

見出し4 見出し4 重点 見出し4 強い強調.

-

見出し5 見出し5 重点 見出し5 強い強調.

-
- -
-

القسم القسم تشديد القسم تأكيد قو.

-

القسم القسم 1 تشديد القسم 2 تأكيد قو.

-

القسم 3 القسم 3 تشديد القسم 3 تأكيد قو.

-

القسم 4 القسم 4 تشديد القسم 4 تأكيد قو.

-

القسم 5 القسم 5 تشديد القسم 5 تأكيد قو.

-
- -
-

טקסט גוף הדגשות גוף חזק גוף חזק.

-

טקסט גוף הדגשות גוף חזק גוף חזק.

-

טקסט גוף הדגשות גוף חזק גוף חזק.

-

טקסט גוף הדגשות גוף חזק גוף חזק.

-

טקסט גוף הדגשות גוף חזק גוף חזק.

-
- - id: detail-1 status: Verified name: Detail @@ -599,16 +353,13 @@ examples:

DetailL DetailL Emphasis DetailL Strong.

DetailL DetailM Emphasis DetailM Strong.

DetailL DetailS Emphasis DetailS Strong.

+
+

DetailXL DetailXL Emphasis DetailXL Strong.

+

DetailL DetailL Emphasis DetailL Strong.

+

DetailL DetailM Emphasis DetailM Strong.

+

DetailL DetailS Emphasis DetailS Strong.

-
-

DetailXL DetailXL Emphasis DetailXL Strong.

-

DetailL DetailL Emphasis DetailL Strong.

-

DetailL DetailM Emphasis DetailM Strong.

-

DetailL DetailS Emphasis DetailS Strong.

-
- -

見出しXL 見出しXL 見出しXL.

見出しL 見出しL 見出しL.

@@ -635,86 +386,37 @@ examples: status: Verified description: Typographic pairings for Adobe Clean Han. markup: | -
-

見出しXXXL

-

見出しとよく対になる本文。

-

見出しXXL

-

見出しとよく対になる本文。

-

見出しXL

-

見出しとよく対になる本文。

-

見出しL

-

見出しとよく対になる本文。

-

見出しM

-

見出しとよく対になる本文。

+
+

見出しXXXL

+

見出しとよく対になる本文。

+

見出しXXL

+

見出しとよく対になる本文。

+

見出しXL

+

見出しとよく対になる本文。

+

見出しL

+

見出しとよく対になる本文。

+

見出しM

+

見出しとよく対になる本文。

-

見出しとよく対になる本文。

-

見出しXS
-

見出しとよく対になる本文。

-
見出しXXS
-

見出しとよく対になる本文。

-
- -
-

見出し1

-

見出しとよく対になる本文。

- -

見出し2

-

見出しとよく対になる本文。

- -

見出し13

-

見出しとよく対になる本文。

- -

見出し14

-

見出しとよく対になる本文。

- -
見出し15
-

見出しとよく対になる本文。

+

見出しとよく対になる本文。

+
見出しXS
+

見出しとよく対になる本文。

+
見出しXXS
+

見出しとよく対になる本文。

- - id: heading-1 - name: Article - status: Verified - description: Typography elements paired to display clear content hierarchies in long form articles. - markup: | -
-

Heading 1

-

Body copy that pairs with heading 1

- -

Heading 2

-

Body copy that pairs with heading 2

- -

Heading 3

-

Body copy that pairs with heading 3

- -

Heading 4

-

Body copy that pairs with heading 4

- -
Heading 5
-

Body copy that pairs with heading 5

-
- - id: heading-1 + - id: code-1 name: Typography - Code status: Verified description: Typographic styles for computer code. markup: |
- 暗号 XL Text Strong - 暗号 L Text Strong - 暗号 M Text Strong - 暗号 S Text Strong - 暗号 XS Text Strong - 
暗号 M Text Wrapped in:
+        暗号 XL Code Strong
+        暗号 L Code Strong
+        暗号 M Code Strong
+        暗号 S Code Strong
+        暗号 XS Code Strong
+        
暗号 M Code Wrapped in:
         pre tags for
         goodness

-        multiline
-
- - Code1 Text Strong - Code2 Text Strong - Code3 Text Strong - Code4 Text Strong - Code5 Text Strong - 
Code3 Text Wrapped in:
-      pre tags for
-      multiline
-      goodness
+
\ No newline at end of file diff --git a/components/typography/metadata/typography-temp.yml b/components/typography/metadata/typography-temp.yml new file mode 100644 index 00000000000..7fb75bfc800 --- /dev/null +++ b/components/typography/metadata/typography-temp.yml @@ -0,0 +1,377 @@ +name: Typography (TEMP REMOVE) +description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples." +SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ +examples: + - id: heading-1 + name: Standard + status: Verified + description: Typography elements paired to display clear content hierarchies. + markup: | +
+
+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+ + - id: heading-1 + name: Heading + status: Verified + description: Headings for typography. + markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+

HeadingM HeadingM Emphasis HeadingM Strong.

+

HeadingS HeadingS Emphasis HeadingS Strong.

+

HeadingXS HeadingXS Emphasis HeadingXS Strong.

+

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+
+

HeadingXXXL Serif HeadingXXXL Serif Emphasis HeadingXXXL Serif Strong.

+

HeadingXXL Serif HeadingXXL Serif Emphasis HeadingXXL Serif Strong.

+

HeadingXL Serif HeadingXL Serif Emphasis HeadingXL Serif Strong.

+

HeadingL Serif HeadingL Serif Emphasis HeadingL Serif Strong.

+

HeadingM Serif HeadingM Serif Emphasis HeadingM Serif Strong.

+

HeadingS Serif HeadingS Serif Emphasis HeadingS Serif Strong.

+

HeadingXS Serif HeadingXS Serif Emphasis HeadingXS Serif Strong.

+

HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

+
+ +
+

Heading1 Heading1 Emphasis Heading1 Strong.

+

Heading2 Heading2 Emphasis Heading2 Strong.

+

Heading3 Heading3 Emphasis Heading3 Strong.

+

Heading4 Heading4 Emphasis Heading4 Strong.

+

Heading5 Heading5 Emphasis Heading5 Strong.

+

Subheading Subheading Emphasis Subheading Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+

Article Heading3 Emphasis Strong.

+

Article Heading4 Emphasis Strong.

+

Article Heading5 Emphasis Strong.

+
+ - id: heading-1 + name: Heading (Strong) + status: Verified + description: Strong headings for typography. + markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL heavy.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis heavy.

+
+ +
+

Heading1 Heading1 Emphasis Heading1 Strong.

+

Heading2 Heading2 Emphasis Heading2 Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Heading (Light) + status: Verified + description: Light headings for typography. + markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
+ +
+

Heading1 Heading1 Emphasis Heading1 Strong.

+

Heading2 Heading2 Emphasis Heading2 Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Display + status: Verified + description: Display headings for typography. + markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
+ +
+

Heading1 Emphasis Strong.

+

Heading2 Emphasis Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Display (Heavy) + status: Verified + description: Heavy display headings for typography. + markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
+
+

Heading1 Emphasis Strong.

+

Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Display (Light) + status: Verified + description: Light display headings for typography. + markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
+
+

Heading1 Emphasis Strong.

+

Heading2 Emphasis Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Body + status: Verified + description: Default body text sizes. + markup: | +
+

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

+

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

+

BodyXL Text BodyXL Emphasis BodyXL Strong.

+

BodyL text BodyL Emphasis BodyL Strong.

+

BodyM Text BodyM Emphasis BodyM Strong.

+

BodyS Text BodyS Emphasis BodyS Strong.

+

BodyXS Text BodyXS Emphasis BodyXS Strong.

+
+
+

Body1 Text Body1 Emphasis Body1 Strong.

+

Body2 text Body2 Emphasis Body2 Strong.

+

Body3 Text Body3 Emphasis Body3 Strong.

+

Body4 Text Body4 Emphasis Body4 Strong.

+

Body5 Text Body5 Emphasis Body5 Strong.

+

Detail Text Detail Emphasis Detail Strong.

+
+
+
+

BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

+

BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.

+

BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.

+

BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.

+

BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.

+

BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

+

BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

+
+
+

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

+

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

+

Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

+

Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

+

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

+

Detail Text Detail Emphasis Detail Strong.

+
+ - id: detail-1 + status: Verified + name: Detail + description: Subheadings for typography. + markup: | +
+

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+

DetailL DetailL Emphasis DetailL Light DetailL Strong.

+

DetailM DetailM Emphasis DetailM Light DetailM Strong.

+

DetailS DetailS Emphasis DetailS Light DetailS Strong.

+
+

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+

DetailL DetailL Emphasis DetailL Light DetailL Strong.

+

DetailM DetailM Emphasis DetailM Light DetailM Strong.

+

DetailS DetailS Emphasis DetailS Light DetailS Strong.

+
+ - id: heading-1 + name: Article + status: Verified + description: Typography elements paired to display clear content hierarchies in long form articles. + markup: | +
+

Heading XXXL

+

Body copy that pairs with heading XXXL

+

Heading XXL

+

Body copy that pairs with heading XXL

+

Heading XL

+

Body copy that pairs with heading XL

+

Heading L

+

Body copy that pairs with heading L

+

Heading M

+

Body copy that pairs with heading M

+

Heading S

+

Body copy that pairs with heading S

+
Heading XS
+

Body copy that pairs with heading XS

+
Heading XXS
+

Body copy that pairs with heading XXS

+
+ +
+ +
+

Heading 1

+

Body copy that pairs with heading 1

+ +

Heading 2

+

Body copy that pairs with heading 2

+ +

Heading 3

+

Body copy that pairs with heading 3

+ +

Heading 4

+

Body copy that pairs with heading 4

+ +
Heading 5
+

Body copy that pairs with heading 5

+
+ + - id: code-1 + name: Typography - Code + status: Verified + description: Typographic styles for computer code. + markup: | + CodeXL Text Strong Emphasis + CodeL Text Strong Emphasis + CodeM Text Strong Emphasis + CodeS Text Strong Emphasis + CodeXS Text Strong Emphasis + 
CodeM Text Wrapped in:
+      pre tags for
+      multiline
+      goodness
+ +
+ Code1 Text Strong + Code2 Text Strong + Code3 Text Strong + Code4 Text Strong + Code5 Text Strong + 
Code3 Text Wrapped in:
+      pre tags for
+      multiline
+      goodness
diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml index 8f2b6324dd2..905b772e984 100644 --- a/components/typography/metadata/typography.yml +++ b/components/typography/metadata/typography.yml @@ -1,4 +1,4 @@ -name: Typography +name: Typography (Depreciated I) description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples." SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ examples: @@ -9,70 +9,30 @@ examples: markup: |
-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

@@ -92,28 +52,6 @@ examples: status: Verified description: Headings for typography. markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-

HeadingM HeadingM Emphasis HeadingM Strong.

-

HeadingS HeadingS Emphasis HeadingS Strong.

-

HeadingXS HeadingXS Emphasis HeadingXS Strong.

-

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

-
- -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-

HeadingM HeadingM Emphasis HeadingM Strong.

-

HeadingS HeadingS Emphasis HeadingS Strong.

-

HeadingXS HeadingXS Emphasis HeadingXS Strong.

-

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -135,18 +73,6 @@ examples: status: Verified description: Strong headings for typography. markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL heavy.

-
-
-
-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis heavy.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -161,20 +87,6 @@ examples: status: Verified description: Light headings for typography. markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-
-
-
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -189,20 +101,6 @@ examples: status: Verified description: Display headings for typography. markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-
-
-
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

-
-

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -217,12 +115,6 @@ examples: status: Verified description: Heavy display headings for typography. markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -232,19 +124,6 @@ examples: status: Verified description: Light display headings for typography. markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-
-
-
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

-

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -259,15 +138,6 @@ examples: status: Verified description: Default body text sizes. markup: | -
-

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

-

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

-

BodyXL Text BodyXL Emphasis BodyXL Strong.

-

BodyL text BodyL Emphasis BodyL Strong.

-

BodyM Text BodyM Emphasis BodyM Strong.

-

BodyS Text BodyS Emphasis BodyS Strong.

-

BodyXS Text BodyXS Emphasis BodyXS Strong.

-

Body1 Text Body1 Emphasis Body1 Strong.

Body2 text Body2 Emphasis Body2 Strong.

@@ -277,15 +147,6 @@ examples:

Detail Text Detail Emphasis Detail Strong.


-
-

Article BodyXXXL Text Article BodyXXXL Emphasis Article BodyXXXL Strong.

-

Article BodyXXL Text Article BodyXXL Emphasis Article BodyXXL Strong.

-

Article BodyXL Text Article BodyXL Emphasis Article BodyXL Strong.

-

Article BodyL text Article BodyL Emphasis Article BodyL Strong.

-

Article BodyM Text Article BodyM Emphasis Article BodyM Strong.

-

Article BodyS Text Article BodyS Emphasis Article BodyS Strong.

-

Article BodyXS Text Article BodyXS Emphasis Article BodyXS Strong.

-

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

@@ -294,62 +155,12 @@ examples:

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

Detail Text Detail Emphasis Detail Strong.

- - id: detail-1 - status: Verified - name: Detail - description: Subheadings for typography. - markup: | -
-

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-

DetailL DetailL Emphasis DetailL Light DetailL Strong.

-

DetailM DetailM Emphasis DetailM Light DetailM Strong.

-

DetailS DetailS Emphasis DetailS Light DetailS Strong.

-
-
-

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-

DetailL DetailL Emphasis DetailL Light DetailL Strong.

-

DetailM DetailM Emphasis DetailM Light DetailM Strong.

-

DetailS DetailS Emphasis DetailS Light DetailS Strong.

-
- - - id: heading-1 name: Article status: Verified description: Typography elements paired to display clear content hierarchies in long form articles. markup: | -
-

Heading XXXL

-

Body copy that pairs with heading XXXL

-

Heading XXL

-

Body copy that pairs with heading XXL

-

Heading XL

-

Body copy that pairs with heading XL

-

Heading L

-

Body copy that pairs with heading L

-

Heading M

-

Body copy that pairs with heading M

-

Heading S

-

Body copy that pairs with heading S

-
Heading XS
-

Body copy that pairs with heading XS

-
Heading XXS
-

Body copy that pairs with heading XXS

-

Heading 1

Body copy that pairs with heading 1

@@ -366,22 +177,12 @@ examples:
Heading 5

Body copy that pairs with heading 5

- - id: heading-1 + + - id: code-1 name: Typography - Code status: Verified description: Typographic styles for computer code. markup: | - CodeXL Text Strong Emphasis - CodeL Text Strong Emphasis - CodeM Text Strong Emphasis - CodeS Text Strong Emphasis - CodeXS Text Strong Emphasis - 
CodeM Text Wrapped in:
-      pre tags for
-      multiline
-      goodness
- - Code1 Text Strong Code2 Text Strong Code3 Text Strong diff --git a/components/typography/skin.css b/components/typography/skin.css index e478486d9d3..e49650188cd 100644 --- a/components/typography/skin.css +++ b/components/typography/skin.css @@ -20,13 +20,6 @@ governing permissions and limitations under the License. /* t-shirt size-based typography */ -@mixin typographyTShirtColor .spectrum-BodyXXXL {} -@mixin typographyTShirtColor .spectrum-BodyXXL {} -@mixin typographyTShirtColor .spectrum-BodyXL {} -@mixin typographyTShirtColor .spectrum-BodyL {} -@mixin typographyTShirtColor .spectrum-BodyM {} -@mixin typographyTShirtColor .spectrum-BodyS {} -@mixin typographyTShirtColor .spectrum-BodyXS {} @mixin typographyTShirtColor .spectrum-HeadingXXXL {} @mixin typographyTShirtColor .spectrum-HeadingXXL {} @@ -52,6 +45,15 @@ governing permissions and limitations under the License. @mixin typographyTShirtColor .spectrum-HeadingXL--heading, heading-XL {} @mixin typographyTShirtColor .spectrum-HeadingL--heading, heading-L {} +@mixin typographyTShirtColor .spectrum-BodyXXXL {} +@mixin typographyTShirtColor .spectrum-BodyXXL {} +@mixin typographyTShirtColor .spectrum-BodyXL {} +@mixin typographyTShirtColor .spectrum-BodyL {} +@mixin typographyTShirtColor .spectrum-BodyM {} +@mixin typographyTShirtColor .spectrum-BodyS {} +@mixin typographyTShirtColor .spectrum-BodyXS {} + + @mixin typographyTShirtColor .spectrum-DetailXL {} @mixin typographyTShirtColor .spectrum-DetailL {} @mixin typographyTShirtColor .spectrum-DetailM {} @@ -63,50 +65,6 @@ governing permissions and limitations under the License. @mixin typographyTShirtColor .spectrum-CodeS, code-S {} @mixin typographyTShirtColor .spectrum-CodeXS, code-XS {} -.spectrum-Article { - @mixin typographyColor .spectrum-HeadingXXXL, heading-serif-XXXL {} - @mixin typographyColor .spectrum-HeadingXXL, heading-serif-XXL {} - @mixin typographyColor .spectrum-HeadingXL, heading-serif-XL {} - @mixin typographyColor .spectrum-HeadingL, heading-serif-L {} - @mixin typographyColor .spectrum-HeadingM, heading-serif-M {} - @mixin typographyColor .spectrum-HeadingS, heading-serif-S {} - @mixin typographyColor .spectrum-HeadingXS, heading-serif-XS {} - @mixin typographyColor .spectrum-HeadingXXS, heading-serif-XXS {} - - @mixin typographyColor .spectrum-BodyXXXL, body-serif-XXXL {} - @mixin typographyColor .spectrum-BodyXXL, body-serif-XXL {} - @mixin typographyColor .spectrum-BodyXL, body-serif-XL {} - @mixin typographyColor .spectrum-BodyL, body-serif-L {} - @mixin typographyColor .spectrum-BodyM, body-serif-M {} - @mixin typographyColor .spectrum-BodyS, body-serif-S {} - @mixin typographyColor .spectrum-BodyXS, body-serif-XS {} - @mixin typographyColor .spectrum-BodyXXS, body-serif-XS {} - - @mixin typographyColor .spectrum-HeadingXXXL--light, heading-light-XXXL {} - @mixin typographyColor .spectrum-HeadingXXL--light, heading-light-XXL {} - @mixin typographyColor .spectrum-HeadingXL--light, heading-light-XL {} - @mixin typographyColor .spectrum-HeadingL--light, heading-light-L {} - - @mixin typographyColor .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} - @mixin typographyColor .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} - @mixin typographyColor .spectrum-HeadingXL--heavy, heading-heavy-XL {} - @mixin typographyColor .spectrum-HeadingL--heavy, heading-heavy-L {} - - @mixin typographyColor .spectrum-HeadingXXXL--serif, heading-serif-XXXL {} - @mixin typographyColor .spectrum-HeadingXXL--serif, heading-serif-XXL {} - @mixin typographyColor .spectrum-HeadingXL--serif, heading-serif-XL {} - @mixin typographyColor .spectrum-HeadingL--serif, heading-serif-L {} - @mixin typographyColor .spectrum-HeadingM--serif, heading-serif-M {} - @mixin typographyColor .spectrum-HeadingS--serif, heading-serif-S {} - @mixin typographyColor .spectrum-HeadingXS--serif, heading-serif-XS {} - @mixin typographyColor .spectrum-HeadingXXS--serif, heading-serif-XXS {} - - @mixin typographyColor .spectrum-DetailXL--serif, detail-serif-xl {} - @mixin typographyColor .spectrum-DetailL--serif, detail-serif-l {} - @mixin typographyColor .spectrum-DetailM--serif, detail-serif-m {} - @mixin typographyColor .spectrum-DetailS--serif, detail-serif-s {} -} - .spectrum { &:lang(ja), &:lang(ko), diff --git a/yarn.lock b/yarn.lock index 598a5ad5108..b0bcc8deab5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1042,10 +1042,10 @@ chalk "^1.x" chalk-cli "^4.x" -"@spectrum/spectrum-dna@^5.22.0": - version "5.22.0" - resolved "https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-release/@spectrum/spectrum-dna/-/@spectrum/spectrum-dna-5.22.0.tgz#1066568760a931027afd196521b16ee804b2c08c" - integrity sha1-EGZWh2CpMQJ6/RllIbFu6ASywIw= +"@spectrum/spectrum-dna@^5.23.0": + version "5.23.0" + resolved "https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-release/@spectrum/spectrum-dna/-/@spectrum/spectrum-dna-5.23.0.tgz#c93a8e202e22ba66da27a791f80ffead765f8529" + integrity sha1-yTqOIC4iumbaJ6eR+A/+rXZfhSk= dependencies: "@spectrum/kulcon" "^1.x" bluebird "^3.x" From 77a054bbc3db0b49028ddb932024626e9147daf2 Mon Sep 17 00:00:00 2001 From: Bernhard Schmidt Date: Thu, 12 Dec 2019 19:59:59 -0800 Subject: [PATCH 06/24] fix: removing background testing colors and temp files (SDS-2513) --- components/typography/index.css | 1 - .../typography-international-depreciated.yml | 438 +----------------- .../typography/metadata/typography-temp.yml | 377 --------------- components/typography/metadata/typography.yml | 27 +- tools/component-builder/css/processors.js | 4 +- 5 files changed, 38 insertions(+), 809 deletions(-) delete mode 100644 components/typography/metadata/typography-temp.yml diff --git a/components/typography/index.css b/components/typography/index.css index f1f00768264..d703dc45699 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -27,7 +27,6 @@ governing permissions and limitations under the License. /* Swaps out the font-family to serif from sans-serif */ .spectrum-Typography--serif { - background-color: pink !important; font-family: var(--spectrum-body-serif-xl-text-font-family); } diff --git a/components/typography/metadata/typography-international-depreciated.yml b/components/typography/metadata/typography-international-depreciated.yml index b023e0c22d1..d949d27d42c 100644 --- a/components/typography/metadata/typography-international-depreciated.yml +++ b/components/typography/metadata/typography-international-depreciated.yml @@ -7,144 +7,48 @@ examples: markup: |
-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - id: heading-1 name: Heading status: Verified description: Headings for typography. markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-

HeadingM HeadingM Emphasis HeadingM Strong.

-

HeadingS HeadingS Emphasis HeadingS Strong.

-

HeadingXS HeadingXS Emphasis HeadingXS Strong.

-

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

-
- -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-

HeadingM HeadingM Emphasis HeadingM Strong.

-

HeadingS HeadingS Emphasis HeadingS Strong.

-

HeadingXS HeadingXS Emphasis HeadingXS Strong.

-

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

-
- -
-

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-

見出しXL 見出しXL 重点 見出しXL 強い強調.

-

見出しL 見出しL 重点 見出しL 強い強調.

-

見出しM 見出しM 重点 見出しM 強い強調.

-

見出しS 見出しS 重点 見出しS 強い強調.

-

見出しXS 見出しXS 重点 見出しXS 強い強調.

-

見出しXXS 見出しXXS 重点 見出しXXS 強い強調.

-
- -
-

XXXLالقسم XXXLالقسم تشديد XXXLالقسم تأكيد قو.

-

XXLالقسم XXLالقسم تشديد XXLالقسم تأكيد قو.

-

XLالقسم XLالقسم تشديد XLالقسم تأكيد قو.

-

Lالقسم Lالقسم تشديد Lالقسم تأكيد قو.

-

Mالقسم Mالقسم تشديد Mالقسم تأكيد قو.

-

Sالقسم Sالقسم تشديد Sالقسم تأكيد قو.

-

XSالقسم XSالقسم تشديد XSالقسم تأكيد قو.

-

XSSالقسم XSSالقسم تشديد XXSالقسم تأكيد قو.

-
- -
-

XXXLדגש כותרת XXXLמאמר XXXLחזק.

-

XXLדגש כותרת XXLמאמר XXLחזק.

-

XLדגש כותרת XLמאמר XLחזק.

-

Lדגש כותרת Lמאמר Lחזק.

-

Mדגש כותרת Mמאמר Mחזק.

-

Sדגש כותרת Sמאמר Sחזק.

-

XSדגש כותרת XSמאמר XSחזק.

-

XXSדגש כותרת XXSמאמר XXSחזק.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -189,41 +93,6 @@ examples: status: Verified description: Strong headings for typography. markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL heavy.

-
- -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis heavy.

-
- -
-

見出しXXXL 見出し XXXL >見出しXXXL 強い強調.

-

見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

-

見出しXL 見出しXL 重点 見出しXL強い強調.

-

見出しL 見出しL 重点 見出しL強い強調.

-
- -
-

القسمXXXL القسم XXXL تشديد القسم 2XXXL تأكيد قو.

-

القسمXXL القسم 1XXL تشديد Emphasis القسم XXL تأكيد قو.

-

القسمXLالقسم 1XL تشديد القسم XL تأكيد قو.

-

القسمL القسم L تشديد القسم L تأكيد قو.

-
- -
-

XXXLדגש כותרת XXXLמאמר XXXLחזק.

-

XXLדגש כותרת XXLמאמר XXLחזק.

-

XLדגש כותרת XLמאמר XLחזק.

-

Lדגש כותרת Lמאמר Lחזק.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -248,47 +117,11 @@ examples:

דגש כותרת מאמר חזק.

דגש כותרת מאמר חזק.

- - id: heading-1 name: Heading (Quiet) status: Verified description: Quiet headings for typography. markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-
- -
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

-
- -
-

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-

見出しXL 見出しXL 重点 見出しXL 強い強調.

-

見出しL 見出しL 重点 見出しL 強い強調.

-
- -
-

XXXLالقسم القسم XXXL تشديد XXXLالقسم تأكيد قو.

-

XXLالقسم القسم XXL تشديد XXLالقسم تأكيد قو.

-

XLالقسم القسم XL تشديد XLالقسم تأكيد قو.

-

Lالقسم القسم L تشديد Lالقسم تأكيد قو.

-
- -
-

XXXLדגש כותרת XXXLמאמר XXXLחזק.

-

XXLדגש כותרת XXLמאמר XXLחזק.

-

XLדגש כותרת XLמאמר XLחזק.

-

Lדגש כותרת Lמאמר Lחזק.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

Heading2 Heading2 Emphasis Heading2 Strong.

@@ -318,42 +151,6 @@ examples: status: Verified description: Display headings for typography. markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-
-
-
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

-
- -
-

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-

見出しXL 見出しXL 重点 見出しXL 強い強調.

-

見出しL 見出しL 重点 見出しL 強い強調.

-
- -
-

XXXLالقسم القسم XXXL تشديد القسم 2XXXL تأكيد قو.

-

XXLالقسم القسم XXL تشديد القسم 2XXL تأكيد قو.

-

XLالقسم القسم XL تشديد القسم XL تأكيد قو.

-

Lالقسم القسم 1L تشديد القسم L تأكيد قو.

-
- -
-

XXXLדגש כותרת XXXLמאמר XXXLחזק.

-

XXLדגש כותרת XXLמאמר XXLחזק.

-

XLדגש כותרת XLמאמר XLחזק.

-

Lדגש כותרת Lמאמר Lחזק.

-
- -

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -383,34 +180,6 @@ examples: status: Verified description: Strong display headings for typography. markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-
- -
-

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-

見出しXL 見出しXL 重点 見出しXL 強い強調.

-

見出しL 見出しL 重点 見出しL 強い強調.

-
- -
-

XXXLالقسم القسم XXXL تشديد القسم XXXL تأكيد قو.

-

XXLالقسم القسم XXL تشديد القسم XXL تأكيد قو.

-

القسم XL تشديد القسم XL تأكيد قو.

-

Lالقسم القسم L تشديد القسم L تأكيد قو.

-
- -
-

XXXLדגש כותרת XXXLמאמר XXXLחזק.

-

XXLדגש כותרת XXLמאמר XXLחזק.

-

XLדגש כותרת XLמאמר XLחזק.

-

Lדגש כותרת Lמאמר Lחזק.

-
-

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -435,41 +204,6 @@ examples: status: Verified description: Quiet display headings for typography. markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-
-
-
-

Article HeadingXXXL Emphasis Strong.

-

Article HeadingXXL Emphasis Strong.

-

Article HeadingXL Emphasis Strong.

-

Article HeadingL Emphasis Strong.

-
- -
-

見出しXXXL 見出し見出しXXXL 重点 見出し見出しXXXL 強い強調.

-

見出しXXL 見出し見出しXXL 重点 見出し見出しXXL 強い強調.

-

見出しXL 見出し見出しXL 重点 見出し見出しXL 強い強調.

-

見出しL 見出し見出しL 重点 見出し見出しL 強い強調.

-
- -
-

XXXLالقسم القسم XXXL تشديد القسم XXXL تأكيد قو.

-

XXLالقسم القسم XXL تشديد القسم XXL تأكيد قو.

-

XLالقسم القسم XL تشديد القسم XL تأكيد قو.

-

Lالقسم القسم L تشديد القسم L تأكيد قو.

-
- -
-

XXXLדגש כותרת XXXLמאמר XXXLחזק.

-

XXLדגש כותרת XXLמאמר XXLחזק.

-

XLדגש כותרת XLמאמר XLחזק.

-

Lדגש כותרת Lמאמר Lחזק.

-
-

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

@@ -499,56 +233,6 @@ examples: status: Verified description: Default body text sizes. markup: | -
-

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

-

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

-

BodyXL Text BodyXL Emphasis BodyXL Strong.

-

BodyL text BodyL Emphasis BodyL Strong.

-

BodyM Text BodyM Emphasis BodyM Strong.

-

BodyS Text BodyS Emphasis BodyS Strong.

-

BodyXS Text BodyXS Emphasis BodyXS Strong.

-
- -
-

Article BodyXXXL Text Article BodyXXXL Emphasis Article BodyXXXL Strong.

-

Article BodyXXL Text Article BodyXXL Emphasis Article BodyXXL Strong.

-

Article BodyXL Text Article BodyXL Emphasis Article BodyXL Strong.

-

Article BodyL text Article BodyL Emphasis Article BodyL Strong.

-

Article BodyM Text Article BodyM Emphasis Article BodyM Strong.

-

Article BodyS Text Article BodyS Emphasis Article BodyS Strong.

-

Article BodyXS Text Article BodyXS Emphasis Article BodyXS Strong.

-
- -
-

見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-

見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-

見出しXL 見出しXL 重点 見出しXL 強い強調.

-

見出しL 見出しL 重点 見出しL 強い強調.

-

見出しM 見出しM 重点 見出しM 強い強調.

-

見出しS 見出しS 重点 見出しS 強い強調.

-

見出しXS 見出しXS 重点 見出しXS 強い強調.

-
- -
-

القسم XXXL القسم XXXL تشديد القسم XXXL تأكيد قو.

-

القسم XXL القسم XXL تشديد القسم XXL تأكيد قو.

-

القسم XL القسم XL تشديد القسم XL تأكيد قو.

-

القسم L القسم L تشديد القسم L تأكيد قو.

-

القسم M القسم M تشديد القسم M تأكيد قو.

-

القسم S القسم S تشديد القسم S تأكيد قو.

-

القسم XS القسم XS تشديد القسم XS تأكيد قو.

-
- -
-

XXXLטקסט גוף הדגשות XXXLגוף חזק XXXLגוף חזק.

-

XXLטקסט גוף הדגשות XXLגוף חזק XXLגוף חזק.

-

XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

-

Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

-

Mטקסט גוף הדגשות Mגוף חזק Mגוף חזק.

-

Sטקסט גוף הדגשות Sגוף חזק Sגוף חזק.

-

XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

-
-

Body1 Text Body1 Emphasis Body1 Strong.

Body2 text Body2 Emphasis Body2 Strong.

@@ -588,72 +272,11 @@ examples:

טקסט גוף הדגשות גוף חזק גוף חזק.

טקסט גוף הדגשות גוף חזק גוף חזק.

- - - id: detail-1 - status: Verified - name: Detail - description: Subheadings for typography. - markup: | -
-

DetailXL DetailXL Emphasis DetailXL Strong.

-

DetailL DetailL Emphasis DetailL Strong.

-

DetailL DetailM Emphasis DetailM Strong.

-

DetailL DetailS Emphasis DetailS Strong.

-
- -
-

DetailXL DetailXL Emphasis DetailXL Strong.

-

DetailL DetailL Emphasis DetailL Strong.

-

DetailL DetailM Emphasis DetailM Strong.

-

DetailL DetailS Emphasis DetailS Strong.

-
- - -
-

見出しXL 見出しXL 見出しXL.

-

見出しL 見出しL 見出しL.

-

見出しM 見出しM 見出しM.

-

見出しS 見出しS 見出しS.

-
- -
-

القسم XL القسم XL تشديد القسم XL تأكيد قو.

-

L L تشديد L تأكيد قو.

-

القسم M القسم M تشديد القسم M تأكيد قو.

-

القسم S القسم S تشديد القسم S تأكيد قو.

-
- -
-

XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

-

Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

-

Mالقسم טקסט גוף הדגשות Mגוף חזק Mגוף חזק.

-

Sالقسم טקסט גוף הדגשות Sגוף חזק Sגוף חזק.

-
- - id: heading-1 name: Han status: Verified description: Typographic pairings for Adobe Clean Han. markup: | -
-

見出しXXXL

-

見出しとよく対になる本文。

-

見出しXXL

-

見出しとよく対になる本文。

-

見出しXL

-

見出しとよく対になる本文。

-

見出しL

-

見出しとよく対になる本文。

-

見出しM

-

見出しとよく対になる本文。

-

-

見出しとよく対になる本文。

-

見出しXS
-

見出しとよく対になる本文。

-
見出しXXS
-

見出しとよく対になる本文。

-
-

見出し1

見出しとよく対になる本文。

@@ -692,23 +315,10 @@ examples:

Body copy that pairs with heading 5

- id: heading-1 - name: Typography - Code status: Verified description: Typographic styles for computer code. markup: | -
- 暗号 XL Text Strong - 暗号 L Text Strong - 暗号 M Text Strong - 暗号 S Text Strong - 暗号 XS Text Strong - 
暗号 M Text Wrapped in:
-        pre tags for
-        goodness
- multiline -
- Code1 Text Strong Code2 Text Strong Code3 Text Strong diff --git a/components/typography/metadata/typography-temp.yml b/components/typography/metadata/typography-temp.yml deleted file mode 100644 index 7fb75bfc800..00000000000 --- a/components/typography/metadata/typography-temp.yml +++ /dev/null @@ -1,377 +0,0 @@ -name: Typography (TEMP REMOVE) -description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples." -SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ -examples: - - id: heading-1 - name: Standard - status: Verified - description: Typography elements paired to display clear content hierarchies. - markup: | -
-
-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
- - - id: heading-1 - name: Heading - status: Verified - description: Headings for typography. - markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-

HeadingM HeadingM Emphasis HeadingM Strong.

-

HeadingS HeadingS Emphasis HeadingS Strong.

-

HeadingXS HeadingXS Emphasis HeadingXS Strong.

-

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

-
-

HeadingXXXL Serif HeadingXXXL Serif Emphasis HeadingXXXL Serif Strong.

-

HeadingXXL Serif HeadingXXL Serif Emphasis HeadingXXL Serif Strong.

-

HeadingXL Serif HeadingXL Serif Emphasis HeadingXL Serif Strong.

-

HeadingL Serif HeadingL Serif Emphasis HeadingL Serif Strong.

-

HeadingM Serif HeadingM Serif Emphasis HeadingM Serif Strong.

-

HeadingS Serif HeadingS Serif Emphasis HeadingS Serif Strong.

-

HeadingXS Serif HeadingXS Serif Emphasis HeadingXS Serif Strong.

-

HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

-
- -
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-

Heading3 Heading3 Emphasis Heading3 Strong.

-

Heading4 Heading4 Emphasis Heading4 Strong.

-

Heading5 Heading5 Emphasis Heading5 Strong.

-

Subheading Subheading Emphasis Subheading Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-

Article Heading3 Emphasis Strong.

-

Article Heading4 Emphasis Strong.

-

Article Heading5 Emphasis Strong.

-
- - id: heading-1 - name: Heading (Strong) - status: Verified - description: Strong headings for typography. - markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL heavy.

-
-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis heavy.

-
- -
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- - id: heading-1 - name: Heading (Light) - status: Verified - description: Light headings for typography. - markup: | -
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-
-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis Strong.

-
- -
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- - id: heading-1 - name: Display - status: Verified - description: Display headings for typography. - markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-
-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis Strong.

-
- -
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- - id: heading-1 - name: Display (Heavy) - status: Verified - description: Heavy display headings for typography. - markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-
-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis Strong.

-
-
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
- - id: heading-1 - name: Display (Light) - status: Verified - description: Light display headings for typography. - markup: | -
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

-
-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis Strong.

-
-
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- - id: heading-1 - name: Body - status: Verified - description: Default body text sizes. - markup: | -
-

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

-

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

-

BodyXL Text BodyXL Emphasis BodyXL Strong.

-

BodyL text BodyL Emphasis BodyL Strong.

-

BodyM Text BodyM Emphasis BodyM Strong.

-

BodyS Text BodyS Emphasis BodyS Strong.

-

BodyXS Text BodyXS Emphasis BodyXS Strong.

-
-
-

Body1 Text Body1 Emphasis Body1 Strong.

-

Body2 text Body2 Emphasis Body2 Strong.

-

Body3 Text Body3 Emphasis Body3 Strong.

-

Body4 Text Body4 Emphasis Body4 Strong.

-

Body5 Text Body5 Emphasis Body5 Strong.

-

Detail Text Detail Emphasis Detail Strong.

-
-
-
-

BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

-

BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.

-

BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.

-

BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.

-

BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.

-

BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

-

BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

-
-
-

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

-

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

-

Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

-

Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

-

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

-

Detail Text Detail Emphasis Detail Strong.

-
- - id: detail-1 - status: Verified - name: Detail - description: Subheadings for typography. - markup: | -
-

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-

DetailL DetailL Emphasis DetailL Light DetailL Strong.

-

DetailM DetailM Emphasis DetailM Light DetailM Strong.

-

DetailS DetailS Emphasis DetailS Light DetailS Strong.

-
-

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-

DetailL DetailL Emphasis DetailL Light DetailL Strong.

-

DetailM DetailM Emphasis DetailM Light DetailM Strong.

-

DetailS DetailS Emphasis DetailS Light DetailS Strong.

-
- - id: heading-1 - name: Article - status: Verified - description: Typography elements paired to display clear content hierarchies in long form articles. - markup: | -
-

Heading XXXL

-

Body copy that pairs with heading XXXL

-

Heading XXL

-

Body copy that pairs with heading XXL

-

Heading XL

-

Body copy that pairs with heading XL

-

Heading L

-

Body copy that pairs with heading L

-

Heading M

-

Body copy that pairs with heading M

-

Heading S

-

Body copy that pairs with heading S

-
Heading XS
-

Body copy that pairs with heading XS

-
Heading XXS
-

Body copy that pairs with heading XXS

-
- -
- -
-

Heading 1

-

Body copy that pairs with heading 1

- -

Heading 2

-

Body copy that pairs with heading 2

- -

Heading 3

-

Body copy that pairs with heading 3

- -

Heading 4

-

Body copy that pairs with heading 4

- -
Heading 5
-

Body copy that pairs with heading 5

-
- - - id: code-1 - name: Typography - Code - status: Verified - description: Typographic styles for computer code. - markup: | - CodeXL Text Strong Emphasis - CodeL Text Strong Emphasis - CodeM Text Strong Emphasis - CodeS Text Strong Emphasis - CodeXS Text Strong Emphasis - 
CodeM Text Wrapped in:
-      pre tags for
-      multiline
-      goodness
- -
- Code1 Text Strong - Code2 Text Strong - Code3 Text Strong - Code4 Text Strong - Code5 Text Strong - 
Code3 Text Wrapped in:
-      pre tags for
-      multiline
-      goodness
diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml index 905b772e984..a03f1b7f1a8 100644 --- a/components/typography/metadata/typography.yml +++ b/components/typography/metadata/typography.yml @@ -1,5 +1,5 @@ name: Typography (Depreciated I) -description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples." +description: 'English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples.' SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ examples: - id: heading-1 @@ -21,32 +21,31 @@ examples:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - id: heading-1 name: Heading status: Verified @@ -83,9 +82,9 @@ examples:

Article Heading2 Emphasis Strong.

- id: heading-1 - name: Heading (Light) + name: Heading (Quiet) status: Verified - description: Light headings for typography. + description: Quiet headings for typography. markup: |

Heading1 Heading1 Emphasis Heading1 Strong.

@@ -111,18 +110,18 @@ examples:

Article Heading2 Emphasis Strong.

- id: heading-1 - name: Display (Heavy) + name: Display (Strong) status: Verified - description: Heavy display headings for typography. + description: Strong display headings for typography. markup: |

Heading1 Emphasis Strong.

Heading2 Emphasis Strong.

- id: heading-1 - name: Display (Light) + name: Display (Quiet) status: Verified - description: Light display headings for typography. + description: Quiet display headings for typography. markup: |

Heading1 Emphasis Strong.

@@ -155,7 +154,6 @@ examples:

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

Detail Text Detail Emphasis Detail Strong.

- - id: heading-1 name: Article status: Verified @@ -177,8 +175,7 @@ examples:
Heading 5

Body copy that pairs with heading 5

- - - id: code-1 + - id: heading-1 name: Typography - Code status: Verified description: Typographic styles for computer code. diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js index 7be24ad51b2..5c49d4dcb9d 100644 --- a/tools/component-builder/css/processors.js +++ b/tools/component-builder/css/processors.js @@ -195,7 +195,7 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru var tokenName = getTShirtTokenName(name); } - var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = true); + var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = false); addNodesToCSS(mixin, output); }, @@ -258,7 +258,7 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru if (!tokenName) { var tokenName = getTShirtTokenName(name); } - var output = getTypographyColor(name, tokenName, showIndicatorBackground = true); + var output = getTypographyColor(name, tokenName, showIndicatorBackground = false); addNodesToCSS(mixin, output); }, From 4be7e19338d664e649bfe405d1f5d0a40fa35d63 Mon Sep 17 00:00:00 2001 From: Bernhard Schmidt Date: Mon, 16 Dec 2019 18:16:19 +0100 Subject: [PATCH 07/24] fix: changing naming convention (SDS-2513) --- components/typography/index.css | 392 ++++++++++-------- .../typography/metadata/typography-temp.yml | 339 +++++++++++++++ components/typography/skin.css | 170 ++++---- tools/component-builder/css/processors.js | 24 +- 4 files changed, 649 insertions(+), 276 deletions(-) create mode 100644 components/typography/metadata/typography-temp.yml diff --git a/components/typography/index.css b/components/typography/index.css index d703dc45699..d4cad84637a 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -13,6 +13,59 @@ governing permissions and limitations under the License. @import '../commons/index.css'; @import 'font.css'; +/* + Legacy Spectrum V2, fallbacks: + + The &.spectrum makes it so users can do
and still get the right font sizes + Without this, they would have to do
, which makes no sense +*/ +&.spectrum, +&.spectrum-Body, +.spectrum, +.spectrum-Body { + font-size: var(--spectrum-body-4-text-size); + font-weight: var(--spectrum-body-4-text-font-weight); + line-height: var(--spectrum-body-4-text-line-height); + font-style: var(--spectrum-body-4-text-font-style); +} + +.spectrum-Body--italic { + font-style: var(--spectrum-body-4-emphasis-text-font-style); +} + +.spectrum-Body--large { + @extend .spectrum-Body2; +} + +.spectrum-Body--small { + @extend .spectrum-Body5; +} + +.spectrum-Body--secondary { + @extend .spectrum-Body4; +} + +.spectrum-Heading--display { + @extend .spectrum-Heading2--display.spectrum-Heading2--quiet; +} + +.spectrum-Heading--pageTitle { + @extend .spectrum-Heading2--quiet; +} + +.spectrum-Heading--subtitle1 { + @extend .spectrum-Heading4; +} + +.spectrum-Heading--subtitle2 { + @extend .spectrum-Heading6; +} + +.spectrum-Heading--subtitle3 { + @extend .spectrum-Subheading; +} + + /** * Spectrum CSS Typography V3 (numeric) & V4 (t-shirt) * @@ -22,113 +75,143 @@ governing permissions and limitations under the License. */ + /* t-shirt size-based typography */ + /* Headings t-shirt sizes */ +.spectrum-Heading { + font-family: var(--spectrum-heading-xl-text-font-family); +} -/* Swaps out the font-family to serif from sans-serif */ -.spectrum-Typography--serif { +.spectrum-Heading--serif { font-family: var(--spectrum-body-serif-xl-text-font-family); } -@mixin typographyTShirtSizes .spectrum-HeadingXXXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXL {} -@mixin typographyTShirtSizes .spectrum-HeadingL {} -@mixin typographyTShirtSizes .spectrum-HeadingM {} -@mixin typographyTShirtSizes .spectrum-HeadingS {} -@mixin typographyTShirtSizes .spectrum-HeadingXS {} -@mixin typographyTShirtSizes .spectrum-HeadingXXS {} -/* Headings are currently missing light and heavy for sizes M to XXS in DNA */ -@mixin typographyTShirtSizes .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXL--heavy, heading-heavy-XL {} -@mixin typographyTShirtSizes .spectrum-HeadingL--heavy, heading-heavy-L {} +@mixin typographyTShirtSizes .spectrum-Heading--XXXL {} +@mixin typographyTShirtSizes .spectrum-Heading--XXL {} +@mixin typographyTShirtSizes .spectrum-Heading--XL {} +@mixin typographyTShirtSizes .spectrum-Heading--L {} +@mixin typographyTShirtSizes .spectrum-Heading--M {} +@mixin typographyTShirtSizes .spectrum-Heading--S {} +@mixin typographyTShirtSizes .spectrum-Heading--XS {} +@mixin typographyTShirtSizes .spectrum-Heading--XXS {} -@mixin typographyTShirtSizes .spectrum-HeadingXXXL--light, heading-light-XXXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXXL--light, heading-light-XXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXL--light, heading-light-XL {} -@mixin typographyTShirtSizes .spectrum-HeadingL--light, heading-light-L {} +/* Headings are currently missing light and heavy for sizes M to XXS in DNA */ +@mixin typographyTShirtSizes .spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XXL--heavy, heading-heavy-XXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XL--heavy, heading-heavy-XL {} +@mixin typographyTShirtSizes .spectrum-Heading-L--heavy, heading-heavy-L {} +@mixin typographyTShirtSizes .spectrum-Heading-XXXL--light, heading-light-XXXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XXL--light, heading-light-XXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XL--light, heading-light-XL {} +@mixin typographyTShirtSizes .spectrum-Heading-L--light, heading-light-L {} /* Headings standard, heavy, light, t-shirt sizes */ -@mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading, heading-XXXL{} -@mixin typographyTShirtSizes .spectrum-HeadingXXL--heading, heading-XXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXL--heading, heading-XL {} -@mixin typographyTShirtSizes .spectrum-HeadingL--heading, heading-L {} +@mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading, heading-XXXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XXL--heading, heading-XXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XL--heading, heading-XL {} +@mixin typographyTShirtSizes .spectrum-Heading-L--heading, heading-L {} + +@mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading.spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XXL--heading.spectrum-Heading-XXL--heavy, heading-heavy-XXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XL--heading.spectrum-Heading-XL--heavy, heading-heavy-XL {} +@mixin typographyTShirtSizes .spectrum-Heading-L--heading.spectrum-Heading-L--heavy, heading-heavy-XL {} -@mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading.spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXXL--heading.spectrum-HeadingXXL--heavy, heading-heavy-XXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXL--heading.spectrum-HeadingXL--heavy, heading-heavy-XL {} -@mixin typographyTShirtSizes .spectrum-HeadingL--heading.spectrum-HeadingL--heavy, heading-heavy-XL {} +@mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading.spectrum-Heading-XXXL--light, heading-light-XXXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XXL--heading.spectrum-Heading-XXL--light, heading-light-XXL {} +@mixin typographyTShirtSizes .spectrum-Heading-XL--heading.spectrum-Heading-XL--light, heading-light-XL {} +@mixin typographyTShirtSizes .spectrum-Heading-L--heading.spectrum-Heading-L--light, heading-light-L {} -@mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading.spectrum-HeadingXXXL--light, heading-light-XXXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXXL--heading.spectrum-HeadingXXL--light, heading-light-XXL {} -@mixin typographyTShirtSizes .spectrum-HeadingXL--heading.spectrum-HeadingXL--light, heading-light-XL {} -@mixin typographyTShirtSizes .spectrum-HeadingL--heading.spectrum-HeadingL--light, heading-light-L {} /* Body t-shirt sizes */ -@mixin typographyTShirtSizes .spectrum-BodyXXXL {} -@mixin typographyTShirtSizes .spectrum-BodyXXL {} -@mixin typographyTShirtSizes .spectrum-BodyXL {} -@mixin typographyTShirtSizes .spectrum-BodyL {} -@mixin typographyTShirtSizes .spectrum-BodyM {} -@mixin typographyTShirtSizes .spectrum-BodyS {} -@mixin typographyTShirtSizes .spectrum-BodyXS {} +@mixin typographyTShirtSizes .spectrum-Body--XXXL { background-color: red !important;} +@mixin typographyTShirtSizes .spectrum-Body--XXL {} +@mixin typographyTShirtSizes .spectrum-Body--XL {} +@mixin typographyTShirtSizes .spectrum-Body--L {} +@mixin typographyTShirtSizes .spectrum-Body--M {} +@mixin typographyTShirtSizes .spectrum-Body--S {} +@mixin typographyTShirtSizes .spectrum-Body--XS {} + +.spectrum-Body { + font-family: var(--spectrum-body-xl-text-font-family); +} + +.spectrum-Body--serif { + font-family: var(--spectrum-body-serif-xl-text-font-family); +} + /* Detail / former subheadings t-shirt sizes */ -@mixin typographyTShirtSizes .spectrum-DetailXL {} -@mixin typographyTShirtSizes .spectrum-DetailL {} -@mixin typographyTShirtSizes .spectrum-DetailM {} -@mixin typographyTShirtSizes .spectrum-DetailS {} +.spectrum-Detail { + font-family: var(--spectrum-heading-xl-text-font-family); +} + +.spectrum-Detail--serif { + font-family: var(--spectrum-body-serif-xl-text-font-family); +} + +@mixin typographyTShirtSizes .spectrum-Detail--XL {} +@mixin typographyTShirtSizes .spectrum-Detail--L {} +@mixin typographyTShirtSizes .spectrum-Detail--M {} +@mixin typographyTShirtSizes .spectrum-Detail--S {} /* @TODO does not exists for strong or heavy for Details. Will be added in the future */ /* -@mixin typographyTShirtSizes .spectrum-DetailXL--strong, detail-strong-XL { background-color: orange;} -@mixin typographyTShirtSizes .spectrum-DetailL--strong, detail-strong-L {} -@mixin typographyTShirtSizes .spectrum-DetailM--strong, detail-strong-M {} -@mixin typographyTShirtSizes .spectrum-DetailS--heavy, detail-heavy-S {} */ +@mixin typographyTShirtSizes .spectrum-Detail-XL--strong, detail-strong-XL { background-color: orange;} +@mixin typographyTShirtSizes .spectrum-Detail-L--strong, detail-strong-L {} +@mixin typographyTShirtSizes .spectrum-Detail-M--strong, detail-strong-M {} +@mixin typographyTShirtSizes .spectrum-Detail-S--heavy, detail-heavy-S {} */ -@mixin typographyTShirtSizes .spectrum-DetailXL--light, detail-light-XL {} -@mixin typographyTShirtSizes .spectrum-DetailL--light, detail-light-L {} -@mixin typographyTShirtSizes .spectrum-DetailM--light, detail-light-M {} -@mixin typographyTShirtSizes .spectrum-DetailS--light, detail-light-S {} +@mixin typographyTShirtSizes .spectrum-Detail-XL--light, detail-light-XL {} +@mixin typographyTShirtSizes .spectrum-Detail-L--light, detail-light-L {} +@mixin typographyTShirtSizes .spectrum-Detail-M--light, detail-light-M {} +@mixin typographyTShirtSizes .spectrum-Detail-S--light, detail-light-S {} /* Code t-shirt sizes */ -@mixin typographyTShirtSizes .spectrum-CodeXL, code-XL, true { +.spectrum-Code { + font-family: var(--spectrum-heading-xl-text-font-family); +} + +.spectrum-Code--serif { + font-family: var(--spectrum-body-serif-xl-text-font-family); +} + +@mixin typographyTShirtSizes .spectrum-Code--XL, code-XL, true { font-family: var(--spectrum-code-xl-text-font-family); } -@mixin typographyTShirtSizes .spectrum-CodeL, code-L, true { +@mixin typographyTShirtSizes .spectrum-Code--L, code-L, true { font-family: var(--spectrum-code-l-text-font-family); } -@mixin typographyTShirtSizes .spectrum-CodeM, code-M, true { +@mixin typographyTShirtSizes .spectrum-Code--M, code-M, true { font-family: var(--spectrum-code-m-text-font-family); } -@mixin typographyTShirtSizes .spectrum-CodeS, code-S, true { +@mixin typographyTShirtSizes .spectrum-Code--S, code-S, true { font-family: var(--spectrum-code-s-text-font-family); } -@mixin typographyTShirtSizes .spectrum-CodeXS, code-XS, true { +@mixin typographyTShirtSizes .spectrum-Code--XS, code-XS, true { font-family: var(--spectrum-code-xs-text-font-family); } - +/* Margins for headings and body */ .spectrum-Typography { - @mixin typographyTShirtMargins .spectrum-HeadingXXXL {} - @mixin typographyTShirtMargins .spectrum-HeadingXXL {} - @mixin typographyTShirtMargins .spectrum-HeadingXL {} - @mixin typographyTShirtMargins .spectrum-HeadingL {} - @mixin typographyTShirtMargins .spectrum-HeadingM {} - @mixin typographyTShirtMargins .spectrum-HeadingS {} - @mixin typographyTShirtMargins .spectrum-HeadingXS {} - @mixin typographyTShirtMargins .spectrum-HeadingXXS {} - - @mixin typographyTShirtMargins .spectrum-BodyXXXL {} - @mixin typographyTShirtMargins .spectrum-BodyXXL {} - @mixin typographyTShirtMargins .spectrum-BodyXL {} - @mixin typographyTShirtMargins .spectrum-BodyL {} - @mixin typographyTShirtMargins .spectrum-BodyM {} - @mixin typographyTShirtMargins .spectrum-BodyS {} - @mixin typographyTShirtMargins .spectrum-BodyXS {} + @mixin typographyTShirtMargins .spectrum-Heading--XXXL {} + @mixin typographyTShirtMargins .spectrum-Heading--XXL {} + @mixin typographyTShirtMargins .spectrum-Heading--XL {} + @mixin typographyTShirtMargins .spectrum-Heading--L {} + @mixin typographyTShirtMargins .spectrum-Heading--M {} + @mixin typographyTShirtMargins .spectrum-Heading--S {} + @mixin typographyTShirtMargins .spectrum-Heading--XS {} + @mixin typographyTShirtMargins .spectrum-Heading--XXS {} + + @mixin typographyTShirtMargins .spectrum-Body--XXXL {} + @mixin typographyTShirtMargins .spectrum-Body--XXL {} + @mixin typographyTShirtMargins .spectrum-Body--XL {} + @mixin typographyTShirtMargins .spectrum-Body--L {} + @mixin typographyTShirtMargins .spectrum-Body--M {} + @mixin typographyTShirtMargins .spectrum-Body--S {} + @mixin typographyTShirtMargins .spectrum-Body--XS {} } @@ -137,75 +220,75 @@ governing permissions and limitations under the License. &:lang(ja), &:lang(ko), &:lang(zh) { - @mixin typographyTShirtSizes .spectrum-HeadingXXXL, heading-han-XXXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXXL, heading-han-XXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXL, heading-han-XL {} - @mixin typographyTShirtSizes .spectrum-HeadingL, heading-han-L {} - @mixin typographyTShirtSizes .spectrum-HeadingM, heading-han-M {} - @mixin typographyTShirtSizes .spectrum-HeadingS, heading-han-S {} - @mixin typographyTShirtSizes .spectrum-HeadingXS, heading-han-XS {} - @mixin typographyTShirtSizes .spectrum-HeadingXXS, heading-han-XXS {} - - @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heavy, heading-han-heavy-XXXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXXL--heavy, heading-han-heavy-XXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXL--heavy, heading-han-heavy-XL {} - @mixin typographyTShirtSizes .spectrum-HeadingL--heavy, heading-han-heavy-L {} - - @mixin typographyTShirtSizes .spectrum-HeadingXXXL--light, heading-han-light-XXXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXXL--light, heading-han-light-XXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXL--light, heading-han-light-XL {} - @mixin typographyTShirtSizes .spectrum-HeadingL--light, heading-han-light-L {} - - @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading, heading-han-XXXL{} - @mixin typographyTShirtSizes .spectrum-HeadingXXL--heading, heading-han-XXL{} - @mixin typographyTShirtSizes .spectrum-HeadingXL--heading, heading-han-XL{} - @mixin typographyTShirtSizes .spectrum-HeadingL--heading, heading-han-L{} - - @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading.spectrum-HeadingXXXL--heavy, heading-han-heavy-XXXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXXL--heading.spectrum-HeadingXXL--heavy, heading-han-heavy-XXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXL--heading.spectrum-HeadingXL--heavy, heading-han-heavy-XL {} - @mixin typographyTShirtSizes .spectrum-HeadingL--heading.spectrum-HeadingL--heavy, heading-han-heavy-XL {} - - @mixin typographyTShirtSizes .spectrum-HeadingXXXL--heading.spectrum-HeadingXXXL--light, heading-han-light-XXXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXXL--heading.spectrum-HeadingXXL--light, heading-han-light-XXL {} - @mixin typographyTShirtSizes .spectrum-HeadingXL--heading.spectrum-HeadingXL--light, heading-han-light-XL {} - @mixin typographyTShirtSizes .spectrum-HeadingL--heading.spectrum-HeadingL--light, heading-han-light-L {} - - @mixin typographyTShirtSizes .spectrum-BodyXXXL, body-han-XXXL {} - @mixin typographyTShirtSizes .spectrum-BodyXXL, body-han-XXL {} - @mixin typographyTShirtSizes .spectrum-BodyXL, body-han-XL {} - @mixin typographyTShirtSizes .spectrum-BodyL, body-han-L {} - @mixin typographyTShirtSizes .spectrum-BodyM, body-han-M {} - @mixin typographyTShirtSizes .spectrum-BodyS, body-han-S {} - @mixin typographyTShirtSizes .spectrum-BodyXS, body-han-XS {} - - @mixin typographyTShirtSizes .spectrum-DetailXL, detail-han-xl {} - @mixin typographyTShirtSizes .spectrum-DetailL, detail-han-l {} - @mixin typographyTShirtSizes .spectrum-DetailM, detail-han-m {} - @mixin typographyTShirtSizes .spectrum-DetailS, detail-han-s {} - - @mixin typographyTShirtSizes .spectrum-DetailXL--light, detail-han-light-XL {} - @mixin typographyTShirtSizes .spectrum-DetailL--light, detail-han-light-L {} - @mixin typographyTShirtSizes .spectrum-DetailM--light, detail-han-light-M {} - @mixin typographyTShirtSizes .spectrum-DetailS--light, detail-han-light-S {} - - - @mixin typographyTShirtSizes .spectrum-CodeXL, code-han-XL, true { + @mixin typographyTShirtSizes .spectrum-Heading--XXXL, heading-han-XXXL {} + @mixin typographyTShirtSizes .spectrum-Heading--XXL, heading-han-XXL {} + @mixin typographyTShirtSizes .spectrum-Heading--XL, heading-han-XL {} + @mixin typographyTShirtSizes .spectrum-Heading--L, heading-han-L {} + @mixin typographyTShirtSizes .spectrum-Heading--M, heading-han-M {} + @mixin typographyTShirtSizes .spectrum-Heading--S, heading-han-S {} + @mixin typographyTShirtSizes .spectrum-Heading--XS, heading-han-XS {} + @mixin typographyTShirtSizes .spectrum-Heading--XXS, heading-han-XXS {} + + @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heavy, heading-han-heavy-XXXL {} + @mixin typographyTShirtSizes .spectrum-Heading-XXL--heavy, heading-han-heavy-XXL {} + @mixin typographyTShirtSizes .spectrum-Heading-XL--heavy, heading-han-heavy-XL {} + @mixin typographyTShirtSizes .spectrum-Heading-L--heavy, heading-han-heavy-L {} + + @mixin typographyTShirtSizes .spectrum-Heading-XXXL--light, heading-han-light-XXXL {} + @mixin typographyTShirtSizes .spectrum-Heading-XXL--light, heading-han-light-XXL {} + @mixin typographyTShirtSizes .spectrum-Heading-XL--light, heading-han-light-XL {} + @mixin typographyTShirtSizes .spectrum-Heading-L--light, heading-han-light-L {} + + @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading, heading-han-XXXL{} + @mixin typographyTShirtSizes .spectrum-Heading-XXL--heading, heading-han-XXL{} + @mixin typographyTShirtSizes .spectrum-Heading-XL--heading, heading-han-XL{} + @mixin typographyTShirtSizes .spectrum-Heading-L--heading, heading-han-L{} + + @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading.spectrum-Heading-XXXL--heavy, heading-han-heavy-XXXL {} + @mixin typographyTShirtSizes .spectrum-Heading-XXL--heading.spectrum-Heading-XXL--heavy, heading-han-heavy-XXL {} + @mixin typographyTShirtSizes .spectrum-Heading-XL--heading.spectrum-Heading-XL--heavy, heading-han-heavy-XL {} + @mixin typographyTShirtSizes .spectrum-Heading-L--heading.spectrum-Heading-L--heavy, heading-han-heavy-XL {} + + @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading.spectrum-Heading-XXXL--light, heading-han-light-XXXL {} + @mixin typographyTShirtSizes .spectrum-Heading-XXL--heading.spectrum-Heading-XXL--light, heading-han-light-XXL {} + @mixin typographyTShirtSizes .spectrum-Heading-XL--heading.spectrum-Heading-XL--light, heading-han-light-XL {} + @mixin typographyTShirtSizes .spectrum-Heading-L--heading.spectrum-Heading-L--light, heading-han-light-L {} + + @mixin typographyTShirtSizes .spectrum-Body--XXXL, body-han-XXXL {} + @mixin typographyTShirtSizes .spectrum-Body--XXL, body-han-XXL {} + @mixin typographyTShirtSizes .spectrum-Body--XL, body-han-XL {} + @mixin typographyTShirtSizes .spectrum-Body--L, body-han-L {} + @mixin typographyTShirtSizes .spectrum-Body--M, body-han-M {} + @mixin typographyTShirtSizes .spectrum-Body--S, body-han-S {} + @mixin typographyTShirtSizes .spectrum-Body--XS, body-han-XS {} + + @mixin typographyTShirtSizes .spectrum-Detail--XL, detail-han-xl {} + @mixin typographyTShirtSizes .spectrum-Detail--L, detail-han-l {} + @mixin typographyTShirtSizes .spectrum-Detail--M, detail-han-m {} + @mixin typographyTShirtSizes .spectrum-Detail--S, detail-han-s {} + + @mixin typographyTShirtSizes .spectrum-Detail-XL--light, detail-han-light-XL {} + @mixin typographyTShirtSizes .spectrum-Detail-L--light, detail-han-light-L {} + @mixin typographyTShirtSizes .spectrum-Detail-M--light, detail-han-light-M {} + @mixin typographyTShirtSizes .spectrum-Detail-S--light, detail-han-light-S {} + + + @mixin typographyTShirtSizes .spectrum-Code--XL, code-han-XL, true { font-family: var(--spectrum-code-han-xl-text-font-family); } - @mixin typographyTShirtSizes .spectrum-CodeL, code-han-L, true { + @mixin typographyTShirtSizes .spectrum-Code--L, code-han-L, true { font-family: var(--spectrum-code-han-l-text-font-family); } - @mixin typographyTShirtSizes .spectrum-CodeM, code-han-M, true { + @mixin typographyTShirtSizes .spectrum-Code--M, code-han-M, true { font-family: var(--spectrum-code-han-m-text-font-family); } - @mixin typographyTShirtSizes .spectrum-CodeS, code-han-S, true { + @mixin typographyTShirtSizes .spectrum-Code--S, code-han-S, true { font-family: var(--spectrum-code-han-s-text-font-family); } - @mixin typographyTShirtSizes .spectrum-CodeXS, code-han-XS, true { + @mixin typographyTShirtSizes .spectrum-Code--XS, code-han-XS, true { font-family: var(--spectrum-code-han-xs-text-font-family); } } @@ -332,52 +415,3 @@ governing permissions and limitations under the License. font-family: var(--spectrum-body-code-5-text-font-family); } -/* - The &.spectrum makes it so users can do
and still get the right font sizes - Without this, they would have to do
, which makes no sense -*/ -&.spectrum, -&.spectrum-Body, -.spectrum, -.spectrum-Body { - font-size: var(--spectrum-body-4-text-size); - font-weight: var(--spectrum-body-4-text-font-weight); - line-height: var(--spectrum-body-4-text-line-height); - font-style: var(--spectrum-body-4-text-font-style); -} - -.spectrum-Body--italic { - font-style: var(--spectrum-body-4-emphasis-text-font-style); -} - -.spectrum-Body--large { - @extend .spectrum-Body2; -} - -.spectrum-Body--small { - @extend .spectrum-Body5; -} - -.spectrum-Body--secondary { - @extend .spectrum-Body4; -} - -.spectrum-Heading--display { - @extend .spectrum-Heading2--display.spectrum-Heading2--quiet; -} - -.spectrum-Heading--pageTitle { - @extend .spectrum-Heading2--quiet; -} - -.spectrum-Heading--subtitle1 { - @extend .spectrum-Heading4; -} - -.spectrum-Heading--subtitle2 { - @extend .spectrum-Heading6; -} - -.spectrum-Heading--subtitle3 { - @extend .spectrum-Subheading; -} diff --git a/components/typography/metadata/typography-temp.yml b/components/typography/metadata/typography-temp.yml new file mode 100644 index 00000000000..23a54b9e504 --- /dev/null +++ b/components/typography/metadata/typography-temp.yml @@ -0,0 +1,339 @@ +name: Typography (TEMP REMOVE) +description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples." +SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ + + + +examples: + - id: heading-1 + name: Standard + status: Verified + description: Typography elements paired to display clear content hierarchies. + markup: | +
+
+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ + - id: heading-1 + name: Heading + status: Verified + description: Headings for typography. + markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+

HeadingM HeadingM Emphasis HeadingM Strong.

+

HeadingS HeadingS Emphasis HeadingS Strong.

+

HeadingXS HeadingXS Emphasis HeadingXS Strong.

+

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+
+

HeadingXXXL Serif HeadingXXXL Serif Emphasis HeadingXXXL Serif Strong.

+

HeadingXXL Serif HeadingXXL Serif Emphasis HeadingXXL Serif Strong.

+

HeadingXL Serif HeadingXL Serif Emphasis HeadingXL Serif Strong.

+

HeadingL Serif HeadingL Serif Emphasis HeadingL Serif Strong.

+

HeadingM Serif HeadingM Serif Emphasis HeadingM Serif Strong.

+

HeadingS Serif HeadingS Serif Emphasis HeadingS Serif Strong.

+

HeadingXS Serif HeadingXS Serif Emphasis HeadingXS Serif Strong.

+

HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

+
+ +
+

Heading1 Heading1 Emphasis Heading1 Strong.

+

Heading2 Heading2 Emphasis Heading2 Strong.

+

Heading3 Heading3 Emphasis Heading3 Strong.

+

Heading4 Heading4 Emphasis Heading4 Strong.

+

Heading5 Heading5 Emphasis Heading5 Strong.

+

Subheading Subheading Emphasis Subheading Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+

Article Heading3 Emphasis Strong.

+

Article Heading4 Emphasis Strong.

+

Article Heading5 Emphasis Strong.

+
+ + - id: heading-1 + name: Heading (Strong) + status: Verified + description: Strong headings for typography. + markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL heavy.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis heavy.

+
+ +
+

Heading1 Heading1 Emphasis Heading1 Strong.

+

Heading2 Heading2 Emphasis Heading2 Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Heading (Light) + status: Verified + description: Light headings for typography. + markup: | +
+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
+ +
+

Heading1 Heading1 Emphasis Heading1 Strong.

+

Heading2 Heading2 Emphasis Heading2 Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Display + status: Verified + description: Display headings for typography. + markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
+ +
+

Heading1 Emphasis Strong.

+

Heading2 Emphasis Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Display (Heavy) + status: Verified + description: Heavy display headings for typography. + markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
+
+

Heading1 Emphasis Strong.

+

Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Display (Light) + status: Verified + description: Light display headings for typography. + markup: | +
+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.

+
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
+
+

Heading1 Emphasis Strong.

+

Heading2 Emphasis Strong.

+
+
+
+

Article Heading1 Emphasis Strong.

+

Article Heading2 Emphasis Strong.

+
+ - id: heading-1 + name: Body + status: Verified + description: Default body text sizes. + markup: | +
+

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

+

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

+

BodyXL Text BodyXL Emphasis BodyXL Strong.

+

BodyL text BodyL Emphasis BodyL Strong.

+

BodyM Text BodyM Emphasis BodyM Strong.

+

BodyS Text BodyS Emphasis BodyS Strong.

+

BodyXS Text BodyXS Emphasis BodyXS Strong.

+
+
+

Body1 Text Body1 Emphasis Body1 Strong.

+

Body2 text Body2 Emphasis Body2 Strong.

+

Body3 Text Body3 Emphasis Body3 Strong.

+

Body4 Text Body4 Emphasis Body4 Strong.

+

Body5 Text Body5 Emphasis Body5 Strong.

+

Detail Text Detail Emphasis Detail Strong.

+
+
+
+

BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

+

BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.

+

BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.

+

BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.

+

BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.

+

BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

+

BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

+
+
+

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

+

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

+

Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

+

Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

+

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

+

Detail Text Detail Emphasis Detail Strong.

+
+ - id: detail-1 + status: Verified + name: Detail + description: Subheadings for typography. + markup: | +
+

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+

DetailL DetailL Emphasis DetailL Light DetailL Strong.

+

DetailM DetailM Emphasis DetailM Light DetailM Strong.

+

DetailS DetailS Emphasis DetailS Light DetailS Strong.

+
+

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+

DetailL DetailL Emphasis DetailL Light DetailL Strong.

+

DetailM DetailM Emphasis DetailM Light DetailM Strong.

+

DetailS DetailS Emphasis DetailS Light DetailS Strong.

+
+ - id: heading-1 + name: Article + status: Verified + description: Typography elements paired to display clear content hierarchies in long form articles. + markup: | +
+

Heading XXXL

+

Body copy that pairs with heading XXXL

+

Heading XXL

+

Body copy that pairs with heading XXL

+

Heading XL

+

Body copy that pairs with heading XL

+

Heading L

+

Body copy that pairs with heading L

+

Heading M

+

Body copy that pairs with heading M

+

Heading S

+

Body copy that pairs with heading S

+
Heading XS
+

Body copy that pairs with heading XS

+
Heading XXS
+

Body copy that pairs with heading XXS

+
+ +
+ +
+

Heading 1

+

Body copy that pairs with heading 1

+ +

Heading 2

+

Body copy that pairs with heading 2

+ +

Heading 3

+

Body copy that pairs with heading 3

+ +

Heading 4

+

Body copy that pairs with heading 4

+ +
Heading 5
+

Body copy that pairs with heading 5

+
+ + - id: code-1 + name: Typography - Code + status: Verified + description: Typographic styles for computer code. + markup: | + CodeXL Text Strong Emphasis + CodeL Text Strong Emphasis + CodeM Text Strong Emphasis + CodeS Text Strong Emphasis + CodeXS Text Strong Emphasis + 
CodeM Text Wrapped in:
+      pre tags for
+      multiline
+      goodness
+ +
+ Code1 Text Strong + Code2 Text Strong + Code3 Text Strong + Code4 Text Strong + Code5 Text Strong + 
Code3 Text Wrapped in:
+      pre tags for
+      multiline
+      goodness
\ No newline at end of file diff --git a/components/typography/skin.css b/components/typography/skin.css index e49650188cd..287622be789 100644 --- a/components/typography/skin.css +++ b/components/typography/skin.css @@ -21,96 +21,96 @@ governing permissions and limitations under the License. /* t-shirt size-based typography */ -@mixin typographyTShirtColor .spectrum-HeadingXXXL {} -@mixin typographyTShirtColor .spectrum-HeadingXXL {} -@mixin typographyTShirtColor .spectrum-HeadingXL {} -@mixin typographyTShirtColor .spectrum-HeadingL {} -@mixin typographyTShirtColor .spectrum-HeadingM {} -@mixin typographyTShirtColor .spectrum-HeadingS {} -@mixin typographyTShirtColor .spectrum-HeadingXS {} -@mixin typographyTShirtColor .spectrum-HeadingXXS {} - -@mixin typographyTShirtColor .spectrum-HeadingXXXL--light, heading-light-XXXL {} -@mixin typographyTShirtColor .spectrum-HeadingXXL--light, heading-light-XXL {} -@mixin typographyTShirtColor .spectrum-HeadingXL--light, heading-light-XL {} -@mixin typographyTShirtColor .spectrum-HeadingL--light, heading-light-L {} - -@mixin typographyTShirtColor .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} -@mixin typographyTShirtColor .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} -@mixin typographyTShirtColor .spectrum-HeadingXL--heavy, heading-heavy-XL {} -@mixin typographyTShirtColor .spectrum-HeadingL--heavy, heading-heavy-L {} - -@mixin typographyTShirtColor .spectrum-HeadingXXXL--heading, heading-XXXL {} -@mixin typographyTShirtColor .spectrum-HeadingXXL--heading, heading-XXL {} -@mixin typographyTShirtColor .spectrum-HeadingXL--heading, heading-XL {} -@mixin typographyTShirtColor .spectrum-HeadingL--heading, heading-L {} - -@mixin typographyTShirtColor .spectrum-BodyXXXL {} -@mixin typographyTShirtColor .spectrum-BodyXXL {} -@mixin typographyTShirtColor .spectrum-BodyXL {} -@mixin typographyTShirtColor .spectrum-BodyL {} -@mixin typographyTShirtColor .spectrum-BodyM {} -@mixin typographyTShirtColor .spectrum-BodyS {} -@mixin typographyTShirtColor .spectrum-BodyXS {} - - -@mixin typographyTShirtColor .spectrum-DetailXL {} -@mixin typographyTShirtColor .spectrum-DetailL {} -@mixin typographyTShirtColor .spectrum-DetailM {} -@mixin typographyTShirtColor .spectrum-DetailS {} - -@mixin typographyTShirtColor .spectrum-CodeXL, code-XL {} -@mixin typographyTShirtColor .spectrum-CodeL, code-L {} -@mixin typographyTShirtColor .spectrum-CodeM, code-M {} -@mixin typographyTShirtColor .spectrum-CodeS, code-S {} -@mixin typographyTShirtColor .spectrum-CodeXS, code-XS {} +@mixin typographyTShirtColor .spectrum-Heading--XXXL {} +@mixin typographyTShirtColor .spectrum-Heading--XXL {} +@mixin typographyTShirtColor .spectrum-Heading--XL {} +@mixin typographyTShirtColor .spectrum-Heading--L {} +@mixin typographyTShirtColor .spectrum-Heading--M {} +@mixin typographyTShirtColor .spectrum-Heading--S {} +@mixin typographyTShirtColor .spectrum-Heading--XS {} +@mixin typographyTShirtColor .spectrum-Heading--XXS {} + +@mixin typographyTShirtColor .spectrum-Heading-XXXL--light, heading-light-XXXL {} +@mixin typographyTShirtColor .spectrum-Heading-XXL--light, heading-light-XXL {} +@mixin typographyTShirtColor .spectrum-Heading-XL--light, heading-light-XL {} +@mixin typographyTShirtColor .spectrum-Heading-L--light, heading-light-L {} + +@mixin typographyTShirtColor .spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {} +@mixin typographyTShirtColor .spectrum-Heading-XXL--heavy, heading-heavy-XXL {} +@mixin typographyTShirtColor .spectrum-Heading-XL--heavy, heading-heavy-XL {} +@mixin typographyTShirtColor .spectrum-Heading-L--heavy, heading-heavy-L {} + +@mixin typographyTShirtColor .spectrum-Heading-XXXL--heading, heading-XXXL {} +@mixin typographyTShirtColor .spectrum-Heading-XXL--heading, heading-XXL {} +@mixin typographyTShirtColor .spectrum-Heading-XL--heading, heading-XL {} +@mixin typographyTShirtColor .spectrum-Heading-L--heading, heading-L {} + +@mixin typographyTShirtColor .spectrum-Body--XXXL {} +@mixin typographyTShirtColor .spectrum-Body--XXL {} +@mixin typographyTShirtColor .spectrum-Body--XL {} +@mixin typographyTShirtColor .spectrum-Body--L {} +@mixin typographyTShirtColor .spectrum-Body--M {} +@mixin typographyTShirtColor .spectrum-Body--S {} +@mixin typographyTShirtColor .spectrum-Body--XS {} + + +@mixin typographyTShirtColor .spectrum-Detail--XL {} +@mixin typographyTShirtColor .spectrum-Detail--L {} +@mixin typographyTShirtColor .spectrum-Detail--M {} +@mixin typographyTShirtColor .spectrum-Detail--S {} + +@mixin typographyTShirtColor .spectrum-Code--XL, code-XL {} +@mixin typographyTShirtColor .spectrum-Code--L, code-L {} +@mixin typographyTShirtColor .spectrum-Code--M, code-M {} +@mixin typographyTShirtColor .spectrum-Code--S, code-S {} +@mixin typographyTShirtColor .spectrum-Code--XS, code-XS {} .spectrum { &:lang(ja), &:lang(ko), &:lang(zh) { - @mixin typographyTShirtColor .spectrum-BodyXXXL, body-han-XXXL {} - @mixin typographyTShirtColor .spectrum-BodyXXL, body-han-XXL {} - @mixin typographyTShirtColor .spectrum-BodyXL, body-han-XL {} - @mixin typographyTShirtColor .spectrum-BodyL, body-han-L {} - @mixin typographyTShirtColor .spectrum-BodyM, body-han-M {} - @mixin typographyTShirtColor .spectrum-BodyS, body-han-S {} - @mixin typographyTShirtColor .spectrum-BodyXS, body-han-XS {} - - @mixin typographyTShirtColor .spectrum-HeadingXXXL {} - @mixin typographyTShirtColor .spectrum-HeadingXXL {} - @mixin typographyTShirtColor .spectrum-HeadingXL {} - @mixin typographyTShirtColor .spectrum-HeadingL {} - @mixin typographyTShirtColor .spectrum-HeadingM {} - @mixin typographyTShirtColor .spectrum-HeadingS {} - @mixin typographyTShirtColor .spectrum-HeadingXS {} - @mixin typographyTShirtColor .spectrum-HeadingXXS {} - - @mixin typographyTShirtColor .spectrum-HeadingXXXL--light, heading-light-XXXL {} - @mixin typographyTShirtColor .spectrum-HeadingXXL--light, heading-light-XXL {} - @mixin typographyTShirtColor .spectrum-HeadingXL--light, heading-light-XL {} - @mixin typographyTShirtColor .spectrum-HeadingL--light, heading-light-L {} - - @mixin typographyTShirtColor .spectrum-HeadingXXXL--heavy, heading-heavy-XXXL {} - @mixin typographyTShirtColor .spectrum-HeadingXXL--heavy, heading-heavy-XXL {} - @mixin typographyTShirtColor .spectrum-HeadingXL--heavy, heading-heavy-XL {} - @mixin typographyTShirtColor .spectrum-HeadingL--heavy, heading-heavy-L {} - - @mixin typographyTShirtColor .spectrum-HeadingXXXL--heading, heading-XXXL {} - @mixin typographyTShirtColor .spectrum-HeadingXXL--heading, heading-XXL {} - @mixin typographyTShirtColor .spectrum-HeadingXL--heading, heading-XL {} - @mixin typographyTShirtColor .spectrum-HeadingL--heading, heading-L {} - - @mixin typographyTShirtColor .spectrum-DetailXL {} - @mixin typographyTShirtColor .spectrum-DetailL {} - @mixin typographyTShirtColor .spectrum-DetailM {} - @mixin typographyTShirtColor .spectrum-DetailS {} - - @mixin typographyTShirtColor .spectrum-CodeXL, code-XL {} - @mixin typographyTShirtColor .spectrum-CodeL, code-L {} - @mixin typographyTShirtColor .spectrum-CodeM, code-M {} - @mixin typographyTShirtColor .spectrum-CodeS, code-S {} - @mixin typographyTShirtColor .spectrum-CodeXS, code-XS {} + @mixin typographyTShirtColor .spectrum-Body--XXXL, body-han-XXXL {} + @mixin typographyTShirtColor .spectrum-Body--XXL, body-han-XXL {} + @mixin typographyTShirtColor .spectrum-Body--XL, body-han-XL {} + @mixin typographyTShirtColor .spectrum-Body--L, body-han-L {} + @mixin typographyTShirtColor .spectrum-Body--M, body-han-M {} + @mixin typographyTShirtColor .spectrum-Body--S, body-han-S {} + @mixin typographyTShirtColor .spectrum-Body--XS, body-han-XS {} + + @mixin typographyTShirtColor .spectrum-Heading--XXXL {} + @mixin typographyTShirtColor .spectrum-Heading--XXL {} + @mixin typographyTShirtColor .spectrum-Heading--XL {} + @mixin typographyTShirtColor .spectrum-Heading--L {} + @mixin typographyTShirtColor .spectrum-Heading--M {} + @mixin typographyTShirtColor .spectrum-Heading--S {} + @mixin typographyTShirtColor .spectrum-Heading--XS {} + @mixin typographyTShirtColor .spectrum-Heading--XXS {} + + @mixin typographyTShirtColor .spectrum-Heading-XXXL--light, heading-light-XXXL {} + @mixin typographyTShirtColor .spectrum-Heading-XXL--light, heading-light-XXL {} + @mixin typographyTShirtColor .spectrum-Heading-XL--light, heading-light-XL {} + @mixin typographyTShirtColor .spectrum-Heading-L--light, heading-light-L {} + + @mixin typographyTShirtColor .spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {} + @mixin typographyTShirtColor .spectrum-Heading-XXL--heavy, heading-heavy-XXL {} + @mixin typographyTShirtColor .spectrum-Heading-XL--heavy, heading-heavy-XL {} + @mixin typographyTShirtColor .spectrum-Heading-L--heavy, heading-heavy-L {} + + @mixin typographyTShirtColor .spectrum-Heading-XXXL--heading, heading-XXXL {} + @mixin typographyTShirtColor .spectrum-Heading-XXL--heading, heading-XXL {} + @mixin typographyTShirtColor .spectrum-Heading-XL--heading, heading-XL {} + @mixin typographyTShirtColor .spectrum-Heading-L--heading, heading-L {} + + @mixin typographyTShirtColor .spectrum-Detail--XL {} + @mixin typographyTShirtColor .spectrum-Detail--L {} + @mixin typographyTShirtColor .spectrum-Detail--M {} + @mixin typographyTShirtColor .spectrum-Detail--S {} + + @mixin typographyTShirtColor .spectrum-Code--XL, code-XL {} + @mixin typographyTShirtColor .spectrum-Code--L, code-L {} + @mixin typographyTShirtColor .spectrum-Code--M, code-M {} + @mixin typographyTShirtColor .spectrum-Code--S, code-S {} + @mixin typographyTShirtColor .spectrum-Code--XS, code-XS {} } } diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js index 5c49d4dcb9d..40362129448 100644 --- a/tools/component-builder/css/processors.js +++ b/tools/component-builder/css/processors.js @@ -60,7 +60,7 @@ function getTShirtTokenName(name) { return '-' + y }) .replace(/^-/, ''); - tokenName = tokenName.replace('.spectrum--', ''); + tokenName = tokenName.replace('.spectrum--', '').replace('--', ''); tokenName = tokenName.toLowerCase(); return tokenName; } @@ -75,7 +75,7 @@ function getTShirtTokenName(name) { * @param {boolean} [showIndicatorBorder=false] shows a blue border around the items. Useful for debugging. * @returns {string} CSS output */ -function getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder=false) { +function getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = false) { var output = ''; var propMap = { 'font-size': 'text-size', @@ -86,13 +86,13 @@ function getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorB 'text-transform': 'text-transform', }; -/** - * Build typography properties for a DNA token - * - * @param {string} tokenString name of the token - * @returns {string} CSS rule for provided selector selector - */ -function buildProperties(tokenString) { + /** + * Build typography properties for a DNA token + * + * @param {string} tokenString name of the token + * @returns {string} CSS rule for provided selector selector + */ + function buildProperties(tokenString) { var ruleString = ''; Object.keys(propMap).forEach((key) => { if (!textTransformIgnore || key != 'text-transform') { @@ -147,7 +147,7 @@ function getTypographyMargins(name, tokenName) { * @param {boolean} [showIndicatorBackground=false] * @returns {string} CSS output */ -function getTypographyColor(name, tokenName, showIndicatorBackground=false) { +function getTypographyColor(name, tokenName, showIndicatorBackground = false) { var indicatorBackground = (showIndicatorBackground === true) ? 'background-color: orange;' : ''; var output = `${name} { ${indicatorBackground} @@ -195,7 +195,7 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru var tokenName = getTShirtTokenName(name); } - var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = false); + var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = true); addNodesToCSS(mixin, output); }, @@ -258,7 +258,7 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru if (!tokenName) { var tokenName = getTShirtTokenName(name); } - var output = getTypographyColor(name, tokenName, showIndicatorBackground = false); + var output = getTypographyColor(name, tokenName, showIndicatorBackground = true); addNodesToCSS(mixin, output); }, From c971901b4850ddc853b09200519bcf72c9ef5e50 Mon Sep 17 00:00:00 2001 From: Bernhard Schmidt Date: Mon, 16 Dec 2019 18:31:36 +0100 Subject: [PATCH 08/24] fix: updating documentation for typography classnames (SDS-2513) --- components/typography/index.css | 2 +- .../typography/metadata/typograph-detail.yml | 20 +- .../typography/metadata/typography-body.yml | 114 +++++------ .../typography/metadata/typography-code.yml | 14 +- .../metadata/typography-heading.yml | 178 +++++++++--------- .../typography/metadata/typography-temp.yml | 134 +------------ 6 files changed, 149 insertions(+), 313 deletions(-) diff --git a/components/typography/index.css b/components/typography/index.css index d4cad84637a..baf565c5701 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -125,7 +125,7 @@ governing permissions and limitations under the License. /* Body t-shirt sizes */ -@mixin typographyTShirtSizes .spectrum-Body--XXXL { background-color: red !important;} +@mixin typographyTShirtSizes .spectrum-Body--XXXL { } @mixin typographyTShirtSizes .spectrum-Body--XXL {} @mixin typographyTShirtSizes .spectrum-Body--XL {} @mixin typographyTShirtSizes .spectrum-Body--L {} diff --git a/components/typography/metadata/typograph-detail.yml b/components/typography/metadata/typograph-detail.yml index 618b1941961..a83ae16ff91 100644 --- a/components/typography/metadata/typograph-detail.yml +++ b/components/typography/metadata/typograph-detail.yml @@ -8,15 +8,13 @@ examples: description: Subheadings for typography. markup: |
-

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-

DetailL DetailL Emphasis DetailL Light DetailL Strong.

-

DetailM DetailM Emphasis DetailM Light DetailM Strong.

-

DetailS DetailS Emphasis DetailS Light DetailS Strong.

- +

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+

DetailL DetailL Emphasis DetailL Light DetailL Strong.

+

DetailM DetailM Emphasis DetailM Light DetailM Strong.

+

DetailS DetailS Emphasis DetailS Light DetailS Strong.


- -

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-

DetailL DetailL Emphasis DetailL Light DetailL Strong.

-

DetailM DetailM Emphasis DetailM Light DetailM Strong.

-

DetailS DetailS Emphasis DetailS Light DetailS Strong.

-
+

DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+

DetailL DetailL Emphasis DetailL Light DetailL Strong.

+

DetailM DetailM Emphasis DetailM Light DetailM Strong.

+

DetailS DetailS Emphasis DetailS Light DetailS Strong.

+
\ No newline at end of file diff --git a/components/typography/metadata/typography-body.yml b/components/typography/metadata/typography-body.yml index ccbbb38f2fc..8244324e9d9 100644 --- a/components/typography/metadata/typography-body.yml +++ b/components/typography/metadata/typography-body.yml @@ -8,49 +8,23 @@ examples: description: Default body text sizes. markup: |
-

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

-

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

-

BodyXL Text BodyXL Emphasis BodyXL Strong.

-

BodyL text BodyL Emphasis BodyL Strong.

-

BodyM Text BodyM Emphasis BodyM Strong.

-

BodyS Text BodyS Emphasis BodyS Strong.

-

BodyXS Text BodyXS Emphasis BodyXS Strong.

+

BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

+

BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

+

BodyXL Text BodyXL Emphasis BodyXL Strong.

+

BodyL text BodyL Emphasis BodyL Strong.

+

BodyM Text BodyM Emphasis BodyM Strong.

+

BodyS Text BodyS Emphasis BodyS Strong.

+

BodyXS Text BodyXS Emphasis BodyXS Strong.

-
- -
-

BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

-

BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.

-

BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.

-

BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.

-

BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.

-

BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

-

BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

-
- - - id: heading-1 - name: Serif - status: Verified - description: Typography elements paired to display clear content hierarchies in long form articles. - markup: |
-

Heading XXXL

-

Body copy that pairs with heading XXXL

-

Heading XXL

-

Body copy that pairs with heading XXL

-

Heading XL

-

Body copy that pairs with heading XL

-

Heading L

-

Body copy that pairs with heading L

-

Heading M

-

Body copy that pairs with heading M

-

Heading S

-

Body copy that pairs with heading S

-
Heading XS
-

Body copy that pairs with heading XS

-
Heading XXS
-

Body copy that pairs with heading XXS

+

BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

+

BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.

+

BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.

+

BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.

+

BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.

+

BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

+

BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

- id: heading-body-1 @@ -60,42 +34,38 @@ examples: markup: |
-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
\ No newline at end of file diff --git a/components/typography/metadata/typography-code.yml b/components/typography/metadata/typography-code.yml index c2d0743e431..ac777112c05 100644 --- a/components/typography/metadata/typography-code.yml +++ b/components/typography/metadata/typography-code.yml @@ -7,12 +7,12 @@ examples: status: Verified description: Typographic styles for computer code. markup: | - CodeXL Text Strong Emphasis - CodeL Text Strong Emphasis - CodeM Text Strong Emphasis - CodeS Text Strong Emphasis - CodeXS Text Strong Emphasis - 
CodeM Text Wrapped in:
+      CodeXL Text Strong Emphasis
+      CodeL Text Strong Emphasis
+      CodeM Text Strong Emphasis
+      CodeS Text Strong Emphasis
+      CodeXS Text Strong Emphasis
+      
CodeM Text Wrapped in:
       pre tags for
       multiline
-      goodness

+      goodness
\ No newline at end of file diff --git a/components/typography/metadata/typography-heading.yml b/components/typography/metadata/typography-heading.yml index 59a693752f3..7537b9ec871 100644 --- a/components/typography/metadata/typography-heading.yml +++ b/components/typography/metadata/typography-heading.yml @@ -2,55 +2,47 @@ name: Typography Heading description: "Spectrum Typography Headings." SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/heading/ examples: - - id: heading-1 + - id: heading-body-1 name: Standard status: Verified description: Typography elements paired to display clear content hierarchies. markup: |
-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Aliquet Mauris Eu

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aliquet Mauris Eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem Ipsum Dolor

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
+

Lorem Ipsum Dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+

Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- id: heading-1 @@ -59,23 +51,23 @@ examples: description: Headings for typography. markup: |
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

-

HeadingM HeadingM Emphasis HeadingM Strong.

-

HeadingS HeadingS Emphasis HeadingS Strong.

-

HeadingXS HeadingXS Emphasis HeadingXS Strong.

-

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+

HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.

+

HeadingM HeadingM Emphasis HeadingM Strong.

+

HeadingS HeadingS Emphasis HeadingS Strong.

+

HeadingXS HeadingXS Emphasis HeadingXS Strong.

+

HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.


-

HeadingXXXL Serif HeadingXXXL Serif Emphasis HeadingXXXL Serif Strong.

-

HeadingXXL Serif HeadingXXL Serif Emphasis HeadingXXL Serif Strong.

-

HeadingXL Serif HeadingXL Serif Emphasis HeadingXL Serif Strong.

-

HeadingL Serif HeadingL Serif Emphasis HeadingL Serif Strong.

-

HeadingM Serif HeadingM Serif Emphasis HeadingM Serif Strong.

-

HeadingS Serif HeadingS Serif Emphasis HeadingS Serif Strong.

-

HeadingXS Serif HeadingXS Serif Emphasis HeadingXS Serif Strong.

-

HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

+

HeadingXXXL Serif HeadingXXXL Serif Emphasis HeadingXXXL Serif Strong.

+

HeadingXXL Serif HeadingXXL Serif Emphasis HeadingXXL Serif Strong.

+

HeadingXL Serif HeadingXL Serif Emphasis HeadingXL Serif Strong.

+

HeadingL Serif HeadingL Serif Emphasis HeadingL Serif Strong.

+

HeadingM Serif HeadingM Serif Emphasis HeadingM Serif Strong.

+

HeadingS Serif HeadingS Serif Emphasis HeadingS Serif Strong.

+

HeadingXS Serif HeadingXS Serif Emphasis HeadingXS Serif Strong.

+

HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

- id: heading-1 @@ -84,15 +76,15 @@ examples: description: Strong headings for typography. markup: |
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL heavy.

+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL heavy.


-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis heavy.

+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis heavy.

- id: heading-1 @@ -101,15 +93,15 @@ examples: description: Light headings for typography. markup: |
-

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-

HeadingXL HeadingXL Emphasis HeadingXL Strong.

-

HeadingL HeadingL Emphasis HeadingL Strong.

+

HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+

HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+

HeadingXL HeadingXL Emphasis HeadingXL Strong.

+

HeadingL HeadingL Emphasis HeadingL Strong.


-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis Strong.

+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

- id: heading-1 @@ -118,15 +110,15 @@ examples: description: Display headings for typography. markup: |
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.


-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis Strong.

+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

- id: heading-1 @@ -135,15 +127,15 @@ examples: description: Heavy display headings for typography. markup: |
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.


-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis Strong.

+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

- id: heading-1 @@ -152,13 +144,13 @@ examples: description: Light display headings for typography. markup: |
-

HeadingXXXL Emphasis Strong.

-

HeadingXXL Emphasis Strong.

-

HeadingXL Emphasis Strong.

-

HeadingL Emphasis Strong.

+

HeadingXXXL Emphasis Strong.

+

HeadingXXL Emphasis Strong.

+

HeadingXL Emphasis Strong.

+

HeadingL Emphasis Strong.


-

HeadingXXXL Serif Emphasis Strong.

-

HeadingXXL Serif Emphasis Strong.

-

HeadingXL Serif Emphasis Strong.

-

HeadingL Serif Emphasis Strong.

-
+

HeadingXXXL Serif Emphasis Strong.

+

HeadingXXL Serif Emphasis Strong.

+

HeadingXL Serif Emphasis Strong.

+

HeadingL Serif Emphasis Strong.

+
\ No newline at end of file diff --git a/components/typography/metadata/typography-temp.yml b/components/typography/metadata/typography-temp.yml index 23a54b9e504..a899b2caa17 100644 --- a/components/typography/metadata/typography-temp.yml +++ b/components/typography/metadata/typography-temp.yml @@ -5,7 +5,7 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ examples: - - id: heading-1 + - id: heading-body-1 name: Standard status: Verified description: Typography elements paired to display clear content hierarchies. @@ -73,23 +73,6 @@ examples:

HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-

Heading3 Heading3 Emphasis Heading3 Strong.

-

Heading4 Heading4 Emphasis Heading4 Strong.

-

Heading5 Heading5 Emphasis Heading5 Strong.

-

Subheading Subheading Emphasis Subheading Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-

Article Heading3 Emphasis Strong.

-

Article Heading4 Emphasis Strong.

-

Article Heading5 Emphasis Strong.

-
- - id: heading-1 name: Heading (Strong) status: Verified @@ -107,15 +90,6 @@ examples:

HeadingL Serif Emphasis heavy.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- id: heading-1 name: Heading (Light) status: Verified @@ -133,15 +107,6 @@ examples:

HeadingL Serif Emphasis Strong.

-
-

Heading1 Heading1 Emphasis Heading1 Strong.

-

Heading2 Heading2 Emphasis Heading2 Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- id: heading-1 name: Display status: Verified @@ -159,15 +124,6 @@ examples:

HeadingL Serif Emphasis Strong.

-
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- id: heading-1 name: Display (Heavy) status: Verified @@ -184,10 +140,7 @@ examples:

HeadingXL Serif Emphasis Strong.

HeadingL Serif Emphasis Strong.

-
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
+ - id: heading-1 name: Display (Light) status: Verified @@ -204,16 +157,8 @@ examples:

HeadingXL Serif Emphasis Strong.

HeadingL Serif Emphasis Strong.

-
-

Heading1 Emphasis Strong.

-

Heading2 Emphasis Strong.

-
-
-
-

Article Heading1 Emphasis Strong.

-

Article Heading2 Emphasis Strong.

-
- - id: heading-1 + + - id: body-1 name: Body status: Verified description: Default body text sizes. @@ -227,14 +172,6 @@ examples:

BodyS Text BodyS Emphasis BodyS Strong.

BodyXS Text BodyXS Emphasis BodyXS Strong.

-
-

Body1 Text Body1 Emphasis Body1 Strong.

-

Body2 text Body2 Emphasis Body2 Strong.

-

Body3 Text Body3 Emphasis Body3 Strong.

-

Body4 Text Body4 Emphasis Body4 Strong.

-

Body5 Text Body5 Emphasis Body5 Strong.

-

Detail Text Detail Emphasis Detail Strong.

-

BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

@@ -245,14 +182,6 @@ examples:

BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

-
-

Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

-

Article Body2 text Article Body2 Emphasis Article Body2 Strong.

-

Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

-

Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

-

Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

-

Detail Text Detail Emphasis Detail Strong.

-
- id: detail-1 status: Verified name: Detail @@ -269,48 +198,6 @@ examples:

DetailM DetailM Emphasis DetailM Light DetailM Strong.

DetailS DetailS Emphasis DetailS Light DetailS Strong.

- - id: heading-1 - name: Article - status: Verified - description: Typography elements paired to display clear content hierarchies in long form articles. - markup: | -
-

Heading XXXL

-

Body copy that pairs with heading XXXL

-

Heading XXL

-

Body copy that pairs with heading XXL

-

Heading XL

-

Body copy that pairs with heading XL

-

Heading L

-

Body copy that pairs with heading L

-

Heading M

-

Body copy that pairs with heading M

-

Heading S

-

Body copy that pairs with heading S

-
Heading XS
-

Body copy that pairs with heading XS

-
Heading XXS
-

Body copy that pairs with heading XXS

-
- -
- -
-

Heading 1

-

Body copy that pairs with heading 1

- -

Heading 2

-

Body copy that pairs with heading 2

- -

Heading 3

-

Body copy that pairs with heading 3

- -

Heading 4

-

Body copy that pairs with heading 4

- -
Heading 5
-

Body copy that pairs with heading 5

-
- id: code-1 name: Typography - Code @@ -322,18 +209,7 @@ examples: CodeM Text Strong Emphasis CodeS Text Strong Emphasis CodeXS Text Strong Emphasis - 
CodeM Text Wrapped in:
-      pre tags for
-      multiline
-      goodness
- -
- Code1 Text Strong - Code2 Text Strong - Code3 Text Strong - Code4 Text Strong - Code5 Text Strong - 
Code3 Text Wrapped in:
+      
CodeM Text Wrapped in:
       pre tags for
       multiline
       goodness

\ No newline at end of file

From 6a217eab4982a77f82099a4b686a0057f602da1b Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Mon, 16 Dec 2019 18:44:01 +0100
Subject: [PATCH 09/24] fix: removing log-colors and fixing docs (SDS-2513)

---
 components/typography/index.css               | 260 +++++++++---------
 .../typography/metadata/typograph-detail.yml  |  16 +-
 .../typography/metadata/typography-temp.yml   |  16 +-
 tools/component-builder/css/processors.js     |   4 +-
 4 files changed, 153 insertions(+), 143 deletions(-)

diff --git a/components/typography/index.css b/components/typography/index.css
index baf565c5701..3d1f515e274 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -13,8 +13,17 @@ governing permissions and limitations under the License.
 @import '../commons/index.css';
 @import 'font.css';
 
-/*
-  Legacy Spectrum V2, fallbacks:
+/**
+ Support for Typography
+
+ Ordered by numeric, legacy (v3) and t-shirt sized (v4) versions.
+ V4 is added last to prevent fallbacks to v3.
+**/
+
+
+
+/**
+  Legacy Spectrum V3, fallbacks:
 
   The &.spectrum makes it so users can do 
 and still get the right font sizes
   Without this, they would have to do 
, which makes no sense
@@ -66,6 +75,129 @@ governing permissions and limitations under the License.
 }
 
 
+/**
+* Legacy numeric-based typography (depreciated)
+*/
+@mixin typography .spectrum-Body1 {}
+@mixin typography .spectrum-Body2 {}
+@mixin typography .spectrum-Body3 {}
+@mixin typography .spectrum-Body4 {}
+@mixin typography .spectrum-Body5 {}
+@mixin typography .spectrum-Heading1 {}
+@mixin typography .spectrum-Heading2 {}
+@mixin typography .spectrum-Heading3 {}
+@mixin typography .spectrum-Heading4 {}
+@mixin typography .spectrum-Heading5 {}
+@mixin typography .spectrum-Heading6 {}
+@mixin typography .spectrum-Subheading {}
+@mixin typography .spectrum-Detail {}
+@mixin typography .spectrum-Heading1--quiet, heading-quiet-1 {}
+@mixin typography .spectrum-Heading2--quiet, heading-quiet-2 {}
+@mixin typography .spectrum-Heading1--strong, heading-strong-1 {}
+@mixin typography .spectrum-Heading2--strong, heading-strong-2 {}
+@mixin typography .spectrum-Heading1--display, display-1 {}
+@mixin typography .spectrum-Heading2--display, display-2 {}
+@mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}
+@mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}
+@mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}
+@mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}
+
+.spectrum-Typography {
+  @mixin typographyMargins .spectrum-Body1 {}
+  @mixin typographyMargins .spectrum-Body2 {}
+  @mixin typographyMargins .spectrum-Body3 {}
+  @mixin typographyMargins .spectrum-Body4 {}
+  @mixin typographyMargins .spectrum-Body5 {}
+  @mixin typographyMargins .spectrum-Heading1 {}
+  @mixin typographyMargins .spectrum-Heading2 {}
+  @mixin typographyMargins .spectrum-Heading3 {}
+  @mixin typographyMargins .spectrum-Heading4 {}
+  @mixin typographyMargins .spectrum-Heading5 {}
+  @mixin typographyMargins .spectrum-Heading6 {}
+  @mixin typographyMargins .spectrum-Subheading {}
+  @mixin typographyMargins .spectrum-Detail {}
+  @mixin typographyMargins .spectrum-Heading1--quiet, heading-quiet-1 {}
+  @mixin typographyMargins .spectrum-Heading2--quiet, heading-quiet-2 {}
+  @mixin typographyMargins .spectrum-Heading1--strong, heading-strong-1 {}
+  @mixin typographyMargins .spectrum-Heading2--strong, heading-strong-2 {}
+  @mixin typographyMargins .spectrum-Heading1--display, display-1 {}
+  @mixin typographyMargins .spectrum-Heading2--display, display-2 {}
+  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}
+  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}
+  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}
+  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}
+}
+
+.spectrum-Article {
+  font-family: var(--spectrum-body-article-1-text-font-family);
+  @mixin typography .spectrum-Body1, body-article-1 {}
+  @mixin typography .spectrum-Body2, body-article-2 {}
+  @mixin typography .spectrum-Body3, body-article-3 {}
+  @mixin typography .spectrum-Body4, body-article-4 {}
+  @mixin typography .spectrum-Body5, body-article-5 {}
+  @mixin typography .spectrum-Heading1, heading-article-1 {}
+  @mixin typography .spectrum-Heading2, heading-article-2 {}
+  @mixin typography .spectrum-Heading3, heading-article-3 {}
+  @mixin typography .spectrum-Heading4, heading-article-4 {}
+  @mixin typography .spectrum-Heading5, heading-article-5 {}
+  @mixin typography .spectrum-Heading6, heading-article-6 {}
+  @mixin typography .spectrum-Subheading, subheading-article {}
+  @mixin typography .spectrum-Detail, detail-article {}
+  @mixin typography .spectrum-Heading1--quiet, heading-quiet-article-1 {}
+  @mixin typography .spectrum-Heading2--quiet, heading-quiet-article-2 {}
+  @mixin typography .spectrum-Heading1--display, display-article-1 {}
+  @mixin typography .spectrum-Heading2--display, display-article-2 {}
+  @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-article-1 {}
+  @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-article-2 {}
+}
+.spectrum {
+  &:lang(ja),
+  &:lang(ko),
+  &:lang(zh) {
+    @mixin typography .spectrum-Body1, body-han-1 {}
+    @mixin typography .spectrum-Body2, body-han-2 {}
+    @mixin typography .spectrum-Body3, body-han-3 {}
+    @mixin typography .spectrum-Body4, body-han-4 {}
+    @mixin typography .spectrum-Body5, body-han-5 {}
+    @mixin typography .spectrum-Heading1, heading-han-1 {}
+    @mixin typography .spectrum-Heading2, heading-han-2 {}
+    @mixin typography .spectrum-Heading3, heading-han-3 {}
+    @mixin typography .spectrum-Heading4, heading-han-4 {}
+    @mixin typography .spectrum-Heading5, heading-han-5 {}
+    @mixin typography .spectrum-Heading6, heading-han-6 {}
+    @mixin typography .spectrum-Subheading, subheading-han {}
+    @mixin typography .spectrum-Detail, detail-han {}
+    @mixin typography .spectrum-Heading1--quiet, heading-quiet-han-1 {}
+    @mixin typography .spectrum-Heading2--quiet, heading-quiet-han-2 {}
+    @mixin typography .spectrum-Heading1--strong, heading-strong-han-1 {}
+    @mixin typography .spectrum-Heading2--strong, heading-strong-han-2 {}
+    @mixin typography .spectrum-Heading1--display, display-han-1 {}
+    @mixin typography .spectrum-Heading2--display, display-han-2 {}
+    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-han-1 {}
+    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-han-2 {}
+    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-han-1 {}
+    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-han-2 {}
+  }
+}
+@mixin typography .spectrum-Code1, body-code-1, true {
+  font-family: var(--spectrum-body-code-1-text-font-family);
+}
+@mixin typography .spectrum-Code2, body-code-2, true {
+  font-family: var(--spectrum-body-code-2-text-font-family);
+}
+@mixin typography .spectrum-Code3, body-code-3, true {
+  font-family: var(--spectrum-body-code-3-text-font-family);
+}
+@mixin typography .spectrum-Code4, body-code-4, true {
+  font-family: var(--spectrum-body-code-4-text-font-family);
+}
+@mixin typography .spectrum-Code5, body-code-5, true {
+  font-family: var(--spectrum-body-code-5-text-font-family);
+}
+
+
+
+
 /**
  * Spectrum CSS Typography V3 (numeric) & V4 (t-shirt)
  *
@@ -151,7 +283,7 @@ governing permissions and limitations under the License.
   font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
-@mixin typographyTShirtSizes .spectrum-Detail--XL {}
+@mixin typographyTShirtSizes .spectrum-Detail--XL { }
 @mixin typographyTShirtSizes .spectrum-Detail--L {}
 @mixin typographyTShirtSizes .spectrum-Detail--M {}
 @mixin typographyTShirtSizes .spectrum-Detail--S {}
@@ -293,125 +425,3 @@ governing permissions and limitations under the License.
     }
   }
 }
-
-
-/**
-* Legacy numeric-based typography (depreciated)
-*/
-@mixin typography .spectrum-Body1 {}
-@mixin typography .spectrum-Body2 {}
-@mixin typography .spectrum-Body3 {}
-@mixin typography .spectrum-Body4 {}
-@mixin typography .spectrum-Body5 {}
-@mixin typography .spectrum-Heading1 {}
-@mixin typography .spectrum-Heading2 {}
-@mixin typography .spectrum-Heading3 {}
-@mixin typography .spectrum-Heading4 {}
-@mixin typography .spectrum-Heading5 {}
-@mixin typography .spectrum-Heading6 {}
-@mixin typography .spectrum-Subheading {}
-@mixin typography .spectrum-Detail {}
-@mixin typography .spectrum-Heading1--quiet, heading-quiet-1 {}
-@mixin typography .spectrum-Heading2--quiet, heading-quiet-2 {}
-@mixin typography .spectrum-Heading1--strong, heading-strong-1 {}
-@mixin typography .spectrum-Heading2--strong, heading-strong-2 {}
-@mixin typography .spectrum-Heading1--display, display-1 {}
-@mixin typography .spectrum-Heading2--display, display-2 {}
-@mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}
-@mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}
-@mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}
-@mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}
-
-.spectrum-Typography {
-  @mixin typographyMargins .spectrum-Body1 {}
-  @mixin typographyMargins .spectrum-Body2 {}
-  @mixin typographyMargins .spectrum-Body3 {}
-  @mixin typographyMargins .spectrum-Body4 {}
-  @mixin typographyMargins .spectrum-Body5 {}
-  @mixin typographyMargins .spectrum-Heading1 {}
-  @mixin typographyMargins .spectrum-Heading2 {}
-  @mixin typographyMargins .spectrum-Heading3 {}
-  @mixin typographyMargins .spectrum-Heading4 {}
-  @mixin typographyMargins .spectrum-Heading5 {}
-  @mixin typographyMargins .spectrum-Heading6 {}
-  @mixin typographyMargins .spectrum-Subheading {}
-  @mixin typographyMargins .spectrum-Detail {}
-  @mixin typographyMargins .spectrum-Heading1--quiet, heading-quiet-1 {}
-  @mixin typographyMargins .spectrum-Heading2--quiet, heading-quiet-2 {}
-  @mixin typographyMargins .spectrum-Heading1--strong, heading-strong-1 {}
-  @mixin typographyMargins .spectrum-Heading2--strong, heading-strong-2 {}
-  @mixin typographyMargins .spectrum-Heading1--display, display-1 {}
-  @mixin typographyMargins .spectrum-Heading2--display, display-2 {}
-  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}
-  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}
-  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}
-  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}
-}
-
-.spectrum-Article {
-  font-family: var(--spectrum-body-article-1-text-font-family);
-  @mixin typography .spectrum-Body1, body-article-1 {}
-  @mixin typography .spectrum-Body2, body-article-2 {}
-  @mixin typography .spectrum-Body3, body-article-3 {}
-  @mixin typography .spectrum-Body4, body-article-4 {}
-  @mixin typography .spectrum-Body5, body-article-5 {}
-  @mixin typography .spectrum-Heading1, heading-article-1 {}
-  @mixin typography .spectrum-Heading2, heading-article-2 {}
-  @mixin typography .spectrum-Heading3, heading-article-3 {}
-  @mixin typography .spectrum-Heading4, heading-article-4 {}
-  @mixin typography .spectrum-Heading5, heading-article-5 {}
-  @mixin typography .spectrum-Heading6, heading-article-6 {}
-  @mixin typography .spectrum-Subheading, subheading-article {}
-  @mixin typography .spectrum-Detail, detail-article {}
-  @mixin typography .spectrum-Heading1--quiet, heading-quiet-article-1 {}
-  @mixin typography .spectrum-Heading2--quiet, heading-quiet-article-2 {}
-  @mixin typography .spectrum-Heading1--display, display-article-1 {}
-  @mixin typography .spectrum-Heading2--display, display-article-2 {}
-  @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-article-1 {}
-  @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-article-2 {}
-}
-.spectrum {
-  &:lang(ja),
-  &:lang(ko),
-  &:lang(zh) {
-    @mixin typography .spectrum-Body1, body-han-1 {}
-    @mixin typography .spectrum-Body2, body-han-2 {}
-    @mixin typography .spectrum-Body3, body-han-3 {}
-    @mixin typography .spectrum-Body4, body-han-4 {}
-    @mixin typography .spectrum-Body5, body-han-5 {}
-    @mixin typography .spectrum-Heading1, heading-han-1 {}
-    @mixin typography .spectrum-Heading2, heading-han-2 {}
-    @mixin typography .spectrum-Heading3, heading-han-3 {}
-    @mixin typography .spectrum-Heading4, heading-han-4 {}
-    @mixin typography .spectrum-Heading5, heading-han-5 {}
-    @mixin typography .spectrum-Heading6, heading-han-6 {}
-    @mixin typography .spectrum-Subheading, subheading-han {}
-    @mixin typography .spectrum-Detail, detail-han {}
-    @mixin typography .spectrum-Heading1--quiet, heading-quiet-han-1 {}
-    @mixin typography .spectrum-Heading2--quiet, heading-quiet-han-2 {}
-    @mixin typography .spectrum-Heading1--strong, heading-strong-han-1 {}
-    @mixin typography .spectrum-Heading2--strong, heading-strong-han-2 {}
-    @mixin typography .spectrum-Heading1--display, display-han-1 {}
-    @mixin typography .spectrum-Heading2--display, display-han-2 {}
-    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-han-1 {}
-    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-han-2 {}
-    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-han-1 {}
-    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-han-2 {}
-  }
-}
-@mixin typography .spectrum-Code1, body-code-1, true {
-  font-family: var(--spectrum-body-code-1-text-font-family);
-}
-@mixin typography .spectrum-Code2, body-code-2, true {
-  font-family: var(--spectrum-body-code-2-text-font-family);
-}
-@mixin typography .spectrum-Code3, body-code-3, true {
-  font-family: var(--spectrum-body-code-3-text-font-family);
-}
-@mixin typography .spectrum-Code4, body-code-4, true {
-  font-family: var(--spectrum-body-code-4-text-font-family);
-}
-@mixin typography .spectrum-Code5, body-code-5, true {
-  font-family: var(--spectrum-body-code-5-text-font-family);
-}
-
diff --git a/components/typography/metadata/typograph-detail.yml b/components/typography/metadata/typograph-detail.yml
index a83ae16ff91..74878d23568 100644
--- a/components/typography/metadata/typograph-detail.yml
+++ b/components/typography/metadata/typograph-detail.yml
@@ -8,13 +8,13 @@ examples:
     description: Subheadings for typography.
     markup: |
       

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

-        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

-        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

+        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

+        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

+        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

         

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

-        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

-        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

+        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

+        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

+        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

       

\ No newline at end of file
diff --git a/components/typography/metadata/typography-temp.yml b/components/typography/metadata/typography-temp.yml
index a899b2caa17..91dc01b96e4 100644
--- a/components/typography/metadata/typography-temp.yml
+++ b/components/typography/metadata/typography-temp.yml
@@ -188,15 +188,15 @@ examples:
     description: Subheadings for typography.
     markup: |
       

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

-        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

-        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

+        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

+        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

+        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

         

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

-        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

-        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

+        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

+        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

+        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

       

 
   - id: code-1
diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js
index 40362129448..3a1719cffba 100644
--- a/tools/component-builder/css/processors.js
+++ b/tools/component-builder/css/processors.js
@@ -195,7 +195,7 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru
             var tokenName = getTShirtTokenName(name);
           }
 
-          var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = true);
+          var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = false);
           addNodesToCSS(mixin, output);
         },
 
@@ -258,7 +258,7 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru
           if (!tokenName) {
             var tokenName = getTShirtTokenName(name);
           }
-          var output = getTypographyColor(name, tokenName, showIndicatorBackground = true);
+          var output = getTypographyColor(name, tokenName, showIndicatorBackground = false);
           addNodesToCSS(mixin, output);
         },
 

From ac758fc615907cb32f7b07000bc9bdf8d324cc81 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Mon, 16 Dec 2019 18:45:24 +0100
Subject: [PATCH 10/24] fix: removing temp typography page (SDS-2513)

---
 .../typography/metadata/typography-temp.yml   | 215 ------------------
 1 file changed, 215 deletions(-)
 delete mode 100644 components/typography/metadata/typography-temp.yml

diff --git a/components/typography/metadata/typography-temp.yml b/components/typography/metadata/typography-temp.yml
deleted file mode 100644
index 91dc01b96e4..00000000000
--- a/components/typography/metadata/typography-temp.yml
+++ /dev/null
@@ -1,215 +0,0 @@
-name: Typography (TEMP REMOVE)
-description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples."
-SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/
-
-
-
-examples:
-  - id: heading-body-1
-    name: Standard
-    status: Verified
-    description: Typography elements paired to display clear content hierarchies.
-    markup: |
-      

-        

-        
Aliquet Mauris Eu

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-        
Aliquet Mauris Eu

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Aliquet Mauris Eu

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Aliquet Mauris Eu

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-      

-
-  - id: heading-1
-    name: Heading
-    status: Verified
-    description: Headings for typography.
-    markup: |
-      

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL Strong.

-        
HeadingM HeadingM Emphasis HeadingM Strong.

-        
HeadingS HeadingS Emphasis HeadingS Strong.

-        
HeadingXS HeadingXS Emphasis HeadingXS Strong.

-        
HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

-        

-        
HeadingXXXL Serif HeadingXXXL Serif Emphasis HeadingXXXL Serif Strong.

-        
HeadingXXL Serif HeadingXXL Serif Emphasis HeadingXXL Serif Strong.

-        
HeadingXL Serif HeadingXL Serif Emphasis HeadingXL Serif Strong.

-        
HeadingL Serif HeadingL Serif Emphasis HeadingL Serif Strong.

-        
HeadingM Serif HeadingM Serif Emphasis HeadingM Serif Strong.

-        
HeadingS Serif HeadingS Serif Emphasis HeadingS Serif Strong.

-        
HeadingXS Serif HeadingXS Serif Emphasis HeadingXS Serif Strong.

-        
HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

-      

-
-  - id: heading-1
-    name: Heading (Strong)
-    status: Verified
-    description: Strong headings for typography.
-    markup: |
-      

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL heavy.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis heavy.

-      

-
-  - id: heading-1
-    name: Heading (Light)
-    status: Verified
-    description: Light headings for typography.
-    markup: |
-      

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

-
-  - id: heading-1
-    name: Display
-    status: Verified
-    description: Display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

-
-  - id: heading-1
-    name: Display (Heavy)
-    status: Verified
-    description: Heavy display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

-
-  - id: heading-1
-    name: Display (Light)
-    status: Verified
-    description: Light display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

-
-  - id: body-1
-    name: Body
-    status: Verified
-    description: Default body text sizes.
-    markup: |
-      

-        
BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

-        
BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

-        
BodyXL Text BodyXL Emphasis BodyXL Strong.

-        
BodyL text BodyL Emphasis BodyL Strong.

-        
BodyM Text BodyM Emphasis BodyM Strong.

-        
BodyS Text BodyS Emphasis BodyS Strong.

-        
BodyXS Text BodyXS Emphasis BodyXS Strong.

-      

-      

-      

-        
BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

-        
BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.

-        
BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.

-        
BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.

-        
BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.

-        
BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

-        
BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

-      

-  - id: detail-1
-    status: Verified
-    name: Detail
-    description: Subheadings for typography.
-    markup: |
-      

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

-        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

-        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

-        

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

-        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

-        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

-      

-
-  - id: code-1
-    name: Typography - Code
-    status: Verified
-    description: Typographic styles for computer code.
-    markup: |
-      CodeXL Text Strong Emphasis
-      CodeL Text Strong Emphasis
-      CodeM Text Strong Emphasis
-      CodeS Text Strong Emphasis
-      CodeXS Text Strong Emphasis
-      
CodeM Text Wrapped in:
-      pre tags for
-      multiline
-      goodness

\ No newline at end of file

From 191a010d8f31d4f91450523c307f5b36ebaa9182 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Mon, 16 Dec 2019 18:49:19 +0100
Subject: [PATCH 11/24] docs: removing line seperators (SDS-2513)

---
 README.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/README.md b/README.md
index badb81fc5bf..9ab52f15b96 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,6 @@ When this file is imported, if in updated version of `@spectrum-css/vars` change
 
 In most cases, this file will not be required, so you can safely ignore it. If you see unexpected visual changes creeping into components that you have not updated, `dist/vars.css` may correct them.
 
-___
 
 ## Contributing
 
@@ -225,7 +224,6 @@ The following tasks are available:
 - `gulp readmeLint` - Generate a generic `README.md` file for each component in the monorepo
 
 
-___
 
 ## Testing
 

From 6657a4b55c37ffbc3530e7348d56233690d4cad9 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Tue, 17 Dec 2019 17:28:57 +0100
Subject: [PATCH 12/24] feat: adding SUIT rules (SDS-2513)

---
 components/typography/index.css           | 60 ++++++++++++++++++++++-
 tools/component-builder/css/processors.js |  6 +--
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/components/typography/index.css b/components/typography/index.css
index 3d1f515e274..7417485b366 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -211,15 +211,55 @@ governing permissions and limitations under the License.
 /* t-shirt size-based typography */
 
 /* Headings t-shirt sizes */
+/* Standard SUIT rules for Heading: regular, serif, heavy, light */
 .spectrum-Heading {
   font-family: var(--spectrum-heading-xl-text-font-family);
+  font-weight: var(--spectrum-heading-xl-text-font-weight);
+
+  em, .spectrum-Heading--emphasis {
+    font-style: var(--spectrum-heading-xl-emphasis-text-font-style);
+    font-weight: var(--spectrum-heading-xl-emphasis-text-font-weight);
+  }
+
+  strong, .spectrum-Heading--strong {
+    font-style: var(--spectrum-heading-xl-strong-text-font-style);
+    font-weight: var(--spectrum-heading-xl-strong-text-font-weight);
+  }
 }
 
 .spectrum-Heading--serif {
   font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
+.spectrum-Heading--heavy {
+  font-weight: var(--spectrum-heading-xl-text-font-weight);
+
+  em, .spectrum-Heading--emphasis {
+    font-style: var(--spectrum-heading-heavy-xl-emphasis-text-font-style);
+    font-weight: var(--spectrum-heading-heavy-xl-emphasis-text-font-weight);
+  }
 
+  strong, .spectrum-Heading--strong {
+    font-style: var(--spectrum-heading-heavy-xl-strong-text-font-style);
+    font-weight: var(--spectrum-heading-heavy-xl-strong-text-font-weight);
+  }
+}
+
+.spectrum-Heading--light {
+  font-weight: var(--spectrum-heading-xl-text-font-weight);
+
+  em, .spectrum-Heading--emphasis {
+    font-style: var(--spectrum-heading-light-xl-emphasis-text-font-style);
+    font-weight: var(--spectrum-heading-light-xl-emphasis-text-font-weight);
+  }
+
+  strong, .spectrum-Heading--strong {
+    font-style: var(--spectrum-heading-light-xl-strong-text-font-style);
+    font-weight: var(--spectrum-heading-light-xl-strong-text-font-weight);
+  }
+}
+
+/* Discrete rules for Heading: regular, heavy, light */
 @mixin typographyTShirtSizes .spectrum-Heading--XXXL {}
 @mixin typographyTShirtSizes .spectrum-Heading--XXL {}
 @mixin typographyTShirtSizes .spectrum-Heading--XL {}
@@ -229,7 +269,7 @@ governing permissions and limitations under the License.
 @mixin typographyTShirtSizes .spectrum-Heading--XS {}
 @mixin typographyTShirtSizes .spectrum-Heading--XXS {}
 
-/* Headings are currently missing light and heavy for sizes M to XXS in DNA */
+  /* Headings are currently missing light and heavy for sizes M to XXS in DNA */
 @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {}
 @mixin typographyTShirtSizes .spectrum-Heading-XXL--heavy, heading-heavy-XXL {}
 @mixin typographyTShirtSizes .spectrum-Heading-XL--heavy, heading-heavy-XL {}
@@ -239,7 +279,7 @@ governing permissions and limitations under the License.
 @mixin typographyTShirtSizes .spectrum-Heading-XL--light, heading-light-XL {}
 @mixin typographyTShirtSizes .spectrum-Heading-L--light, heading-light-L {}
 
-/* Headings standard, heavy, light, t-shirt sizes */
+  /* Headings standard, heavy, light, t-shirt sizes */
 @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading, heading-XXXL {}
 @mixin typographyTShirtSizes .spectrum-Heading-XXL--heading, heading-XXL {}
 @mixin typographyTShirtSizes .spectrum-Heading-XL--heading, heading-XL {}
@@ -275,6 +315,7 @@ governing permissions and limitations under the License.
 
 
 /* Detail / former subheadings t-shirt sizes */
+/* Standard SUIT rules for Detail: regular, serif, light */
 .spectrum-Detail {
   font-family: var(--spectrum-heading-xl-text-font-family);
 }
@@ -283,6 +324,21 @@ governing permissions and limitations under the License.
   font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
+.spectrum-Detail--light {
+  font-weight: var(--spectrum-heading-xl-text-font-weight);
+
+  em, .spectrum-Detail--emphasis {
+    font-style: var(--spectrum-detail-light-xl-emphasis-text-font-style);
+    font-weight: var(--spectrum-detail-light-xl-emphasis-text-font-weight);
+  }
+
+  strong, .spectrum-Detail--strong {
+    font-style: var(--spectrum-detail-light-xl-strong-text-font-style);
+    font-weight: var(--spectrum-detail-light-xl-strong-text-font-weight);
+  }
+}
+
+/* Discrete rules for Detail: regular, light */
 @mixin typographyTShirtSizes .spectrum-Detail--XL { }
 @mixin typographyTShirtSizes .spectrum-Detail--L {}
 @mixin typographyTShirtSizes .spectrum-Detail--M {}
diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js
index 3a1719cffba..93d3da99a26 100644
--- a/tools/component-builder/css/processors.js
+++ b/tools/component-builder/css/processors.js
@@ -113,10 +113,10 @@ function getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorB
   output = `${name} {
   ${indicatorBorder}
   ${buildProperties(tokenName)}
-    em, ${emStrongClassName}-emphasis {
-      ${buildProperties(`${tokenName}-emphasis`)}
+    em, ${emStrongClassName}--emphasis {
+      ${buildProperties(`${tokenName}--emphasis`)}
     }
-    strong, ${emStrongClassName}-strong {
+    strong, ${emStrongClassName}--strong {
       ${buildProperties(`${tokenName}-strong`)}
     }
   }`;

From 190243af47ca2104a23d512cc0ddb948550d0e0f Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Thu, 19 Dec 2019 17:18:28 +0100
Subject: [PATCH 13/24] fix: removing more selectors (SDS-2513)

---
 components/typography/index.css               | 145 ++++++++----------
 .../typography/metadata/typograph-detail.yml  |  16 +-
 .../metadata/typography-heading.yml           |  85 ++--------
 tools/component-builder/css/processors.js     |   2 +-
 4 files changed, 92 insertions(+), 156 deletions(-)

diff --git a/components/typography/index.css b/components/typography/index.css
index 7417485b366..62f2ffaccf8 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -211,6 +211,17 @@ governing permissions and limitations under the License.
 /* t-shirt size-based typography */
 
 /* Headings t-shirt sizes */
+
+/* Discrete rules for Heading: regular, heavy, light */
+@mixin typographyTShirtSizes .spectrum-Heading--XXXL {}
+@mixin typographyTShirtSizes .spectrum-Heading--XXL {}
+@mixin typographyTShirtSizes .spectrum-Heading--XL {}
+@mixin typographyTShirtSizes .spectrum-Heading--L {}
+@mixin typographyTShirtSizes .spectrum-Heading--M {}
+@mixin typographyTShirtSizes .spectrum-Heading--S {}
+@mixin typographyTShirtSizes .spectrum-Heading--XS {}
+@mixin typographyTShirtSizes .spectrum-Heading--XXS {}
+
 /* Standard SUIT rules for Heading: regular, serif, heavy, light */
 .spectrum-Heading {
   font-family: var(--spectrum-heading-xl-text-font-family);
@@ -227,12 +238,14 @@ governing permissions and limitations under the License.
   }
 }
 
+
 .spectrum-Heading--serif {
   font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
+
 .spectrum-Heading--heavy {
-  font-weight: var(--spectrum-heading-xl-text-font-weight);
+  font-weight: var(--spectrum-heading-heavy-xl-text-font-weight);
 
   em, .spectrum-Heading--emphasis {
     font-style: var(--spectrum-heading-heavy-xl-emphasis-text-font-style);
@@ -245,8 +258,9 @@ governing permissions and limitations under the License.
   }
 }
 
+
 .spectrum-Heading--light {
-  font-weight: var(--spectrum-heading-xl-text-font-weight);
+  font-weight: var(--spectrum-heading-light-xl-emphasis-text-font-weight);
 
   em, .spectrum-Heading--emphasis {
     font-style: var(--spectrum-heading-light-xl-emphasis-text-font-style);
@@ -259,42 +273,6 @@ governing permissions and limitations under the License.
   }
 }
 
-/* Discrete rules for Heading: regular, heavy, light */
-@mixin typographyTShirtSizes .spectrum-Heading--XXXL {}
-@mixin typographyTShirtSizes .spectrum-Heading--XXL {}
-@mixin typographyTShirtSizes .spectrum-Heading--XL {}
-@mixin typographyTShirtSizes .spectrum-Heading--L {}
-@mixin typographyTShirtSizes .spectrum-Heading--M {}
-@mixin typographyTShirtSizes .spectrum-Heading--S {}
-@mixin typographyTShirtSizes .spectrum-Heading--XS {}
-@mixin typographyTShirtSizes .spectrum-Heading--XXS {}
-
-  /* Headings are currently missing light and heavy for sizes M to XXS in DNA */
-@mixin typographyTShirtSizes .spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XXL--heavy, heading-heavy-XXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XL--heavy, heading-heavy-XL {}
-@mixin typographyTShirtSizes .spectrum-Heading-L--heavy, heading-heavy-L {}
-@mixin typographyTShirtSizes .spectrum-Heading-XXXL--light, heading-light-XXXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XXL--light, heading-light-XXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XL--light, heading-light-XL {}
-@mixin typographyTShirtSizes .spectrum-Heading-L--light, heading-light-L {}
-
-  /* Headings standard, heavy, light, t-shirt sizes */
-@mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading, heading-XXXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XXL--heading, heading-XXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XL--heading, heading-XL {}
-@mixin typographyTShirtSizes .spectrum-Heading-L--heading, heading-L {}
-
-@mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading.spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XXL--heading.spectrum-Heading-XXL--heavy, heading-heavy-XXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XL--heading.spectrum-Heading-XL--heavy, heading-heavy-XL {}
-@mixin typographyTShirtSizes .spectrum-Heading-L--heading.spectrum-Heading-L--heavy, heading-heavy-XL {}
-
-@mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading.spectrum-Heading-XXXL--light, heading-light-XXXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XXL--heading.spectrum-Heading-XXL--light, heading-light-XXL {}
-@mixin typographyTShirtSizes .spectrum-Heading-XL--heading.spectrum-Heading-XL--light, heading-light-XL {}
-@mixin typographyTShirtSizes .spectrum-Heading-L--heading.spectrum-Heading-L--light, heading-light-L {}
-
 
 /* Body t-shirt sizes */
 @mixin typographyTShirtSizes .spectrum-Body--XXXL { }
@@ -318,25 +296,18 @@ governing permissions and limitations under the License.
 /* Standard SUIT rules for Detail: regular, serif, light */
 .spectrum-Detail {
   font-family: var(--spectrum-heading-xl-text-font-family);
+
+  .spectrum-Detail--light {
+    font-style: var(--spectrum-detail-light-xl-text-font-style);
+    font-weight: var(--spectrum-detail-light-xl-text-font-weight);
+  }
 }
 
+
 .spectrum-Detail--serif {
   font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
-.spectrum-Detail--light {
-  font-weight: var(--spectrum-heading-xl-text-font-weight);
-
-  em, .spectrum-Detail--emphasis {
-    font-style: var(--spectrum-detail-light-xl-emphasis-text-font-style);
-    font-weight: var(--spectrum-detail-light-xl-emphasis-text-font-weight);
-  }
-
-  strong, .spectrum-Detail--strong {
-    font-style: var(--spectrum-detail-light-xl-strong-text-font-style);
-    font-weight: var(--spectrum-detail-light-xl-strong-text-font-weight);
-  }
-}
 
 /* Discrete rules for Detail: regular, light */
 @mixin typographyTShirtSizes .spectrum-Detail--XL { }
@@ -351,10 +322,6 @@ governing permissions and limitations under the License.
 @mixin typographyTShirtSizes .spectrum-Detail-M--strong, detail-strong-M {}
 @mixin typographyTShirtSizes .spectrum-Detail-S--heavy, detail-heavy-S {} */
 
-@mixin typographyTShirtSizes .spectrum-Detail-XL--light, detail-light-XL {}
-@mixin typographyTShirtSizes .spectrum-Detail-L--light, detail-light-L {}
-@mixin typographyTShirtSizes .spectrum-Detail-M--light, detail-light-M {}
-@mixin typographyTShirtSizes .spectrum-Detail-S--light, detail-light-S {}
 
 
 /* Code t-shirt sizes */
@@ -362,10 +329,12 @@ governing permissions and limitations under the License.
   font-family: var(--spectrum-heading-xl-text-font-family);
 }
 
+
 .spectrum-Code--serif {
   font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
+
 @mixin typographyTShirtSizes .spectrum-Code--XL, code-XL, true {
   font-family: var(--spectrum-code-xl-text-font-family);
 }
@@ -417,30 +386,36 @@ governing permissions and limitations under the License.
     @mixin typographyTShirtSizes .spectrum-Heading--XS, heading-han-XS {}
     @mixin typographyTShirtSizes .spectrum-Heading--XXS, heading-han-XXS {}
 
-    @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heavy, heading-han-heavy-XXXL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-XXL--heavy, heading-han-heavy-XXL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-XL--heavy, heading-han-heavy-XL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-L--heavy, heading-han-heavy-L {}
 
-    @mixin typographyTShirtSizes .spectrum-Heading-XXXL--light, heading-han-light-XXXL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-XXL--light, heading-han-light-XXL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-XL--light, heading-han-light-XL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-L--light, heading-han-light-L {}
+    .spectrum-Heading--heavy {
+      font-weight: var(--spectrum-heading-han-xl-text-font-weight);
 
-    @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading, heading-han-XXXL{}
-    @mixin typographyTShirtSizes .spectrum-Heading-XXL--heading, heading-han-XXL{}
-    @mixin typographyTShirtSizes .spectrum-Heading-XL--heading, heading-han-XL{}
-    @mixin typographyTShirtSizes .spectrum-Heading-L--heading, heading-han-L{}
+      em, .spectrum-Heading--emphasis {
+        font-style: var(--spectrum-heading-han-heavy-xl-emphasis-text-font-style);
+        font-weight: var(--spectrum-heading-han-heavy-xl-emphasis-text-font-weight);
+      }
 
-    @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading.spectrum-Heading-XXXL--heavy, heading-han-heavy-XXXL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-XXL--heading.spectrum-Heading-XXL--heavy, heading-han-heavy-XXL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-XL--heading.spectrum-Heading-XL--heavy, heading-han-heavy-XL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-L--heading.spectrum-Heading-L--heavy, heading-han-heavy-XL {}
+      strong, .spectrum-Heading--strong {
+        font-style: var(--spectrum-heading-heavy-xl-strong-text-font-style);
+        font-weight: var(--spectrum-heading-heavy-xl-strong-text-font-weight);
+      }
+    }
+
+
+    .spectrum-Heading--light {
+      font-weight: var(--spectrum-heading-han-xl-text-font-weight);
+
+      em, .spectrum-Heading--emphasis {
+        font-style: var(--spectrum-heading-han-light-xl-emphasis-text-font-style);
+        font-weight: var(--spectrum-heading-han-light-xl-emphasis-text-font-weight);
+      }
+
+      strong, .spectrum-Heading--strong {
+        font-style: var(--spectrum-heading-han-light-xl-strong-text-font-style);
+        font-weight: var(--spectrum-heading-han-light-xl-strong-text-font-weight);
+      }
+    }
 
-    @mixin typographyTShirtSizes .spectrum-Heading-XXXL--heading.spectrum-Heading-XXXL--light, heading-han-light-XXXL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-XXL--heading.spectrum-Heading-XXL--light, heading-han-light-XXL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-XL--heading.spectrum-Heading-XL--light, heading-han-light-XL {}
-    @mixin typographyTShirtSizes .spectrum-Heading-L--heading.spectrum-Heading-L--light, heading-han-light-L {}
 
     @mixin typographyTShirtSizes .spectrum-Body--XXXL, body-han-XXXL {}
     @mixin typographyTShirtSizes .spectrum-Body--XXL, body-han-XXL {}
@@ -455,10 +430,22 @@ governing permissions and limitations under the License.
     @mixin typographyTShirtSizes .spectrum-Detail--M, detail-han-m {}
     @mixin typographyTShirtSizes .spectrum-Detail--S, detail-han-s {}
 
-    @mixin typographyTShirtSizes .spectrum-Detail-XL--light, detail-han-light-XL {}
-    @mixin typographyTShirtSizes .spectrum-Detail-L--light, detail-han-light-L {}
-    @mixin typographyTShirtSizes .spectrum-Detail-M--light, detail-han-light-M {}
-    @mixin typographyTShirtSizes .spectrum-Detail-S--light, detail-han-light-S {}
+
+    .spectrum-Detail--light {
+      font-weight: var(--spectrum-detail-han-xl-text-font-weight);
+
+
+      em, .spectrum-Detail--emphasis {
+        font-style: var(--spectrum-detail-han-light-xl-emphasis-text-font-style);
+        font-weight: var(--spectrum-detail-han-light-xl-emphasis-text-font-weight);
+      }
+
+      strong, .spectrum-Detail--strong {
+        font-style: var(--spectrum-detail-han-light-xl-strong-text-font-style);
+        font-weight: var(--spectrum-detail-han-light-xl-strong-text-font-weight);
+      }
+    }
+
 
 
     @mixin typographyTShirtSizes .spectrum-Code--XL, code-han-XL, true {
diff --git a/components/typography/metadata/typograph-detail.yml b/components/typography/metadata/typograph-detail.yml
index 74878d23568..6eda56af0cf 100644
--- a/components/typography/metadata/typograph-detail.yml
+++ b/components/typography/metadata/typograph-detail.yml
@@ -8,13 +8,13 @@ examples:
     description: Subheadings for typography.
     markup: |
       

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

-        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

-        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

+        
DetailXL DetailXL Emphasis DetailXL Light DetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

+        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

+        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

         

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

-        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

-        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

+        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Light DetailL Strong.

+        
DetailM DetailM Emphasis DetailM Light DetailM Strong.

+        
DetailS DetailS Emphasis DetailS Light DetailS Strong.

       

\ No newline at end of file
diff --git a/components/typography/metadata/typography-heading.yml b/components/typography/metadata/typography-heading.yml
index 7537b9ec871..c51ad589def 100644
--- a/components/typography/metadata/typography-heading.yml
+++ b/components/typography/metadata/typography-heading.yml
@@ -71,20 +71,20 @@ examples:
       

 
   - id: heading-1
-    name: Heading (Strong)
+    name: Heading (Heavy)
     status: Verified
     description: Strong headings for typography.
     markup: |
       

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL heavy.

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL heavy.

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis heavy.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis heavy.

       

 
   - id: heading-1
@@ -93,64 +93,13 @@ examples:
     description: Light headings for typography.
     markup: |
       

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL Strong.

+        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

+        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

+        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

+        
HeadingL HeadingL Emphasis HeadingL Strong.

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

       

-
-  - id: heading-1
-    name: Display
-    status: Verified
-    description: Display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

-
-  - id: heading-1
-    name: Display (Heavy)
-    status: Verified
-    description: Heavy display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

-
-  - id: heading-1
-    name: Display (Light)
-    status: Verified
-    description: Light display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

\ No newline at end of file
diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js
index 93d3da99a26..79fb9a280aa 100644
--- a/tools/component-builder/css/processors.js
+++ b/tools/component-builder/css/processors.js
@@ -114,7 +114,7 @@ function getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorB
   ${indicatorBorder}
   ${buildProperties(tokenName)}
     em, ${emStrongClassName}--emphasis {
-      ${buildProperties(`${tokenName}--emphasis`)}
+      ${buildProperties(`${tokenName}-emphasis`)}
     }
     strong, ${emStrongClassName}--strong {
       ${buildProperties(`${tokenName}-strong`)}

From 06ab81f3ee7de6ce266e2867a8776c5f8ad13590 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Tue, 7 Jan 2020 11:34:54 -0800
Subject: [PATCH 14/24] fix: suggested simplifications for em, strong children
 (SDS-2513)

---
 components/typography/index.css               | 49 +++++++++++++------
 .../typography/metadata/typograph-detail.yml  |  2 +-
 .../typography/metadata/typography-code.yml   | 10 ++--
 .../metadata/typography-international.yml     | 10 ++--
 tools/component-builder/css/processors.js     | 29 ++++++++---
 5 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/components/typography/index.css b/components/typography/index.css
index 62f2ffaccf8..a427d3d1758 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -227,13 +227,11 @@ governing permissions and limitations under the License.
   font-family: var(--spectrum-heading-xl-text-font-family);
   font-weight: var(--spectrum-heading-xl-text-font-weight);
 
-  em, .spectrum-Heading--emphasis {
+  em, .spectrum-Heading-emphasis {
     font-style: var(--spectrum-heading-xl-emphasis-text-font-style);
-    font-weight: var(--spectrum-heading-xl-emphasis-text-font-weight);
   }
 
-  strong, .spectrum-Heading--strong {
-    font-style: var(--spectrum-heading-xl-strong-text-font-style);
+  strong, .spectrum-Heading-strong {
     font-weight: var(--spectrum-heading-xl-strong-text-font-weight);
   }
 }
@@ -247,28 +245,25 @@ governing permissions and limitations under the License.
 .spectrum-Heading--heavy {
   font-weight: var(--spectrum-heading-heavy-xl-text-font-weight);
 
-  em, .spectrum-Heading--emphasis {
+  em, .spectrum-Heading-emphasis {
     font-style: var(--spectrum-heading-heavy-xl-emphasis-text-font-style);
-    font-weight: var(--spectrum-heading-heavy-xl-emphasis-text-font-weight);
   }
 
-  strong, .spectrum-Heading--strong {
-    font-style: var(--spectrum-heading-heavy-xl-strong-text-font-style);
+  strong, .spectrum-Heading-strong {
     font-weight: var(--spectrum-heading-heavy-xl-strong-text-font-weight);
   }
 }
 
 
+
 .spectrum-Heading--light {
   font-weight: var(--spectrum-heading-light-xl-emphasis-text-font-weight);
 
-  em, .spectrum-Heading--emphasis {
+  em, .spectrum-Heading-emphasis {
     font-style: var(--spectrum-heading-light-xl-emphasis-text-font-style);
-    font-weight: var(--spectrum-heading-light-xl-emphasis-text-font-weight);
   }
 
-  strong, .spectrum-Heading--strong {
-    font-style: var(--spectrum-heading-light-xl-strong-text-font-style);
+  strong, .spectrum-Heading-strong {
     font-weight: var(--spectrum-heading-light-xl-strong-text-font-weight);
   }
 }
@@ -285,6 +280,14 @@ governing permissions and limitations under the License.
 
 .spectrum-Body {
   font-family: var(--spectrum-body-xl-text-font-family);
+
+  strong, .spectrum-Body-strong {
+    font-weight: var(--spectrum-body-xl-strong-text-font-weight);
+  }
+
+  em, .spectrum-Body-emphasis {
+    font-style: var(--spectrum-body-xl-emphasis-text-font-style);
+  }
 }
 
 .spectrum-Body--serif {
@@ -297,12 +300,20 @@ governing permissions and limitations under the License.
 .spectrum-Detail {
   font-family: var(--spectrum-heading-xl-text-font-family);
 
-  .spectrum-Detail--light {
-    font-style: var(--spectrum-detail-light-xl-text-font-style);
-    font-weight: var(--spectrum-detail-light-xl-text-font-weight);
+  strong, .spectrum-Detail-strong {
+    font-weight: var(--spectrum-detail-xl-strong-text-font-weight);
+  }
+
+  em, .spectrum-Detail-emphasis {
+    font-style: var(--spectrum-detail-xl-emphasis-text-font-style);
   }
 }
 
+.spectrum-Detail--light {
+  font-style: var(--spectrum-detail-light-xl-text-font-style);
+  font-weight: var(--spectrum-detail-light-xl-text-font-weight);
+}
+
 
 .spectrum-Detail--serif {
   font-family: var(--spectrum-body-serif-xl-text-font-family);
@@ -327,6 +338,14 @@ governing permissions and limitations under the License.
 /* Code t-shirt sizes */
 .spectrum-Code {
   font-family: var(--spectrum-heading-xl-text-font-family);
+
+  strong, .spectrum-Code-strong {
+    font-weight: var(--spectrum-code-xl-strong-text-font-weight);
+  }
+
+  em, .spectrum-Code-emphasis {
+    font-style: var(--spectrum-code-xl-emphasis-text-font-style);
+  }
 }
 
 
diff --git a/components/typography/metadata/typograph-detail.yml b/components/typography/metadata/typograph-detail.yml
index 6eda56af0cf..d06a1e4ba8e 100644
--- a/components/typography/metadata/typograph-detail.yml
+++ b/components/typography/metadata/typograph-detail.yml
@@ -13,7 +13,7 @@ examples:
         
DetailM DetailM Emphasis DetailM Light DetailM Strong.

         
DetailS DetailS Emphasis DetailS Light DetailS Strong.

         

-        
DetailXL DetailXL Emphasis DetailXL LightDetailXL Strong.

+        
DetailXL DetailXL Emphasis DetailXL Light DetailXL Strong.

         
DetailL DetailL Emphasis DetailL Light DetailL Strong.

         
DetailM DetailM Emphasis DetailM Light DetailM Strong.

         
DetailS DetailS Emphasis DetailS Light DetailS Strong.

diff --git a/components/typography/metadata/typography-code.yml b/components/typography/metadata/typography-code.yml
index ac777112c05..ff4f21efedb 100644
--- a/components/typography/metadata/typography-code.yml
+++ b/components/typography/metadata/typography-code.yml
@@ -7,11 +7,11 @@ examples:
     status: Verified
     description: Typographic styles for computer code.
     markup: |
-      CodeXL Text Strong Emphasis
-      CodeL Text Strong Emphasis
-      CodeM Text Strong Emphasis
-      CodeS Text Strong Emphasis
-      CodeXS Text Strong Emphasis
+      CodeXL Text Strong Emphasis 
+      CodeL Text Strong Emphasis 
+      CodeM Text Strong Emphasis 
+      CodeS Text Strong Emphasis 
+      CodeXS Text Strong Emphasis 
       
CodeM Text Wrapped in:
       pre tags for
       multiline
diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml
index 36a3cdd1bba..c97bab2364f 100644
--- a/components/typography/metadata/typography-international.yml
+++ b/components/typography/metadata/typography-international.yml
@@ -411,11 +411,11 @@ examples:
     description: Typographic styles for computer code.
     markup: |
       

-        暗号 XL Code Strong
-        暗号 L Code Strong
-        暗号 M Code Strong
-        暗号 S Code Strong
-        暗号 XS Code Strong
+        暗号 XL Code Strong 
+        暗号 L Code Strong 
+        暗号 M Code Strong 
+        暗号 S Code Strong 
+        暗号 XS Code Strong 
         
暗号 M Code Wrapped in:
         pre tags for
         goodness

diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js
index 79fb9a280aa..82173c5fee3 100644
--- a/tools/component-builder/css/processors.js
+++ b/tools/component-builder/css/processors.js
@@ -72,10 +72,11 @@ function getTShirtTokenName(name) {
  * @param {string} name class name
  * @param {string} tokenName token name
  * @param {string} textTransformIgnore ignore text transforms
+ * @param {string} [addStrongAndEmphasisChildren=false] add legacy support for strong, em children
  * @param {boolean} [showIndicatorBorder=false] shows a blue border around the items. Useful for debugging.
  * @returns {string} CSS output
  */
-function getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = false) {
+function getTypographySizes(name, tokenName, textTransformIgnore, addStrongAndEmphasisChildren = false, showIndicatorBorder = false) {
   var output = '';
   var propMap = {
     'font-size': 'text-size',
@@ -110,15 +111,22 @@ function getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorB
   // Example classname:  "em, .spectrum-Heading2--quiet-emphasis"
   emStrongClassName = (name.indexOf('.') !== -1) ? '.' + name.split('.').pop() : name;
 
-  output = `${name} {
-  ${indicatorBorder}
-  ${buildProperties(tokenName)}
-    em, ${emStrongClassName}--emphasis {
+  // Fallback to add  and  overwrites if addStrongAndEmphasisChildren is set to true.
+  // This is only used for the pre-t-shirt sized typography.
+  var strongAndEmphasisChildren = (addStrongAndEmphasisChildren === true) ? `
+    em {
       ${buildProperties(`${tokenName}-emphasis`)}
     }
-    strong, ${emStrongClassName}--strong {
+    strong {
       ${buildProperties(`${tokenName}-strong`)}
     }
+  `: '';
+
+  output = `${name} {
+  ${indicatorBorder}
+
+  ${buildProperties(tokenName)}
+    ${strongAndEmphasisChildren}
   }`;
   return output;
 }
@@ -195,7 +203,12 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru
             var tokenName = getTShirtTokenName(name);
           }
 
-          var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = false);
+          // overwrite-support for the Typography-V3  &  selectors
+          // sharing the same classname ".spectrum-Detail". This will be added like
+          // ".spectrum-Detail--XL em {}"
+          addStrongAndEmphasisChildren = (name.includes('.spectrum-Detail')) ? true : false;
+
+          var output = getTypographySizes(name, tokenName, textTransformIgnore, addStrongAndEmphasisChildren, showIndicatorBorder = false);
           addNodesToCSS(mixin, output);
         },
 
@@ -212,7 +225,7 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru
             tokenName = tokenName.replace('.spectrum--', '');
           }
 
-          var output = getTypographySizes(name, tokenName, textTransformIgnore, showIndicatorBorder = false);
+          var output = getTypographySizes(name, tokenName, textTransformIgnore, addStrongAndEmphasisChildren = false, showIndicatorBorder = false);
           addNodesToCSS(mixin, output);
         },
 

From 6ee1adb524a97dabe47521e62812b7d671bc7501 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Wed, 8 Jan 2020 17:57:24 -0800
Subject: [PATCH 15/24] fix: temp swapping out of typekit

---
 components/commons/fonts.css |  2 +-
 site/resources/js/typekit.js | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/commons/fonts.css b/components/commons/fonts.css
index 1a82a0c63bc..bd5430d15f6 100644
--- a/components/commons/fonts.css
+++ b/components/commons/fonts.css
@@ -27,7 +27,7 @@ governing permissions and limitations under the License.
   --spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base);
   */
 
-  --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-base: var(--spectrum-global-font-family-base);
   --spectrum-font-family-ar: var(--spectrum-alias-font-family-ar);
   --spectrum-font-family-he:  var(--spectrum-alias-font-family-he);
   --spectrum-font-family-zh: var(--spectrum-alias-font-family-zh);
diff --git a/site/resources/js/typekit.js b/site/resources/js/typekit.js
index 2b573618b63..c935c2fc8b6 100644
--- a/site/resources/js/typekit.js
+++ b/site/resources/js/typekit.js
@@ -15,11 +15,16 @@ window.addEventListener('DOMContentLoaded', function() {
 
   var config = {
     /* REPEAT AFTER ME:
-     I WILL NOT REUSE THE TYPEKIT ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT
-     I WILL NOT REUSE THE TYPEKIT ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT
-     I WILL NOT REUSE THE TYPEKIT ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT
+     I WILL NOT REUSE THE ADOBE FONTS ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT / PRODUCTION
+     I WILL NOT REUSE THE ADOBE FONTS ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT / PRODUCTION
+     I WILL NOT REUSE THE ADOBE FONTS ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT / PRODUCTION
      See https://wiki.corp.adobe.com/display/devrel/Using+Typekit+at+Adobe to get set up right. */
-    kitId: document.querySelector('[lang]:not([lang="en-US"])') !== null ? 'pbi5ojv' : 'ruf7eed',
+     // On pageload, determine to current pages language setting.
+     // If it is US-language or unset use the 1st Adobe font web project id (smaller size),
+     // otherwise use the 2nd kit with all the language settings (larger size)
+     // kitId: document.querySelector('[lang]:not([lang="en-US"])') !== null ? 'pbi5ojv' : 'ruf7eed',
+    // kitId: document.querySelector('[lang]:not([lang="en-US"])') === null ? 'fwc4hzy' : 'pbi5ojv',
+    kitId: 'fwc4hzy',
     scriptTimeout: 3000,
     active: function() {
       var loader = document.getElementById('loader');

From 3813c600bf30f9bea881aaa494b970cf89bddc6e Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Thu, 9 Jan 2020 16:46:53 -0800
Subject: [PATCH 16/24] fix: swapping out the Typekit Ids

---
 site/resources/js/typekit.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/site/resources/js/typekit.js b/site/resources/js/typekit.js
index c935c2fc8b6..1f21a6dbc43 100644
--- a/site/resources/js/typekit.js
+++ b/site/resources/js/typekit.js
@@ -23,8 +23,7 @@ window.addEventListener('DOMContentLoaded', function() {
      // If it is US-language or unset use the 1st Adobe font web project id (smaller size),
      // otherwise use the 2nd kit with all the language settings (larger size)
      // kitId: document.querySelector('[lang]:not([lang="en-US"])') !== null ? 'pbi5ojv' : 'ruf7eed',
-    // kitId: document.querySelector('[lang]:not([lang="en-US"])') === null ? 'fwc4hzy' : 'pbi5ojv',
-    kitId: 'fwc4hzy',
+    kitId: document.querySelector('[lang]:not([lang="en-US"])') === null ? 'mge7bvf' : 'rok6rmo',
     scriptTimeout: 3000,
     active: function() {
       var loader = document.getElementById('loader');

From b066e606619b11b20a0d2431e8a7bcfd1c272dfc Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Thu, 9 Jan 2020 19:01:21 -0800
Subject: [PATCH 17/24] fix: updating international page

---
 .../metadata/typography-heading.yml           | 120 ++---
 .../metadata/typography-international.yml     | 487 +++++++-----------
 2 files changed, 247 insertions(+), 360 deletions(-)

diff --git a/components/typography/metadata/typography-heading.yml b/components/typography/metadata/typography-heading.yml
index c51ad589def..24ca6478fc0 100644
--- a/components/typography/metadata/typography-heading.yml
+++ b/components/typography/metadata/typography-heading.yml
@@ -2,6 +2,65 @@ name: Typography Heading
 description: "Spectrum Typography Headings."
 SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/heading/
 examples:
+  - id: heading-1
+    name: Heading
+    status: Verified
+    description: Headings for typography.
+    markup: |
+      

+        
HeadingXXXL HeadingXXXL Emphasis Strong.

+        
HeadingXXL HeadingXXL Emphasis Strong.

+        
HeadingXL HeadingXL Emphasis Strong.

+        
HeadingL HeadingL Emphasis Strong.

+        
HeadingM HeadingM Emphasis Strong.

+        
HeadingS HeadingS Emphasis Strong.

+        
HeadingXS HeadingXS Emphasis Strong.

+        
HeadingXXS HeadingXXS Emphasis Strong.

+        

+        
HeadingXXXL Serif Serif Emphasis Serif Strong.

+        
HeadingXXL Serif Serif Emphasis Serif Strong.

+        
HeadingXL Serif Serif Emphasis Serif Strong.

+        
HeadingL Serif Serif Emphasis Serif Strong.

+        
HeadingM Serif Serif Emphasis Serif Strong.

+        
HeadingS Serif Serif Emphasis Serif Strong.

+        
HeadingXS Serif Serif Emphasis Serif Strong.

+        
HeadingXXS Serif Serif Emphasis Serif Strong.

+      

+
+  - id: heading-1
+    name: Heading (Heavy)
+    status: Verified
+    description: Strong headings for typography.
+    markup: |
+      

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis strong.

+        

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis strong.

+      

+
+  - id: heading-1
+    name: Heading (Light)
+    status: Verified
+    description: Light headings for typography.
+    markup: |
+      

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

+        

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

+      

+
   - id: heading-body-1
     name: Standard
     status: Verified
@@ -43,63 +102,4 @@ examples:
         
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-      

-
-  - id: heading-1
-    name: Heading
-    status: Verified
-    description: Headings for typography.
-    markup: |
-      

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL Strong.

-        
HeadingM HeadingM Emphasis HeadingM Strong.

-        
HeadingS HeadingS Emphasis HeadingS Strong.

-        
HeadingXS HeadingXS Emphasis HeadingXS Strong.

-        
HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

-        

-        
HeadingXXXL Serif HeadingXXXL Serif Emphasis HeadingXXXL Serif Strong.

-        
HeadingXXL Serif HeadingXXL Serif Emphasis HeadingXXL Serif Strong.

-        
HeadingXL Serif HeadingXL Serif Emphasis HeadingXL Serif Strong.

-        
HeadingL Serif HeadingL Serif Emphasis HeadingL Serif Strong.

-        
HeadingM Serif HeadingM Serif Emphasis HeadingM Serif Strong.

-        
HeadingS Serif HeadingS Serif Emphasis HeadingS Serif Strong.

-        
HeadingXS Serif HeadingXS Serif Emphasis HeadingXS Serif Strong.

-        
HeadingXXS Serif HeadingXXS Serif Emphasis HeadingXXS Serif Strong.

-      

-
-  - id: heading-1
-    name: Heading (Heavy)
-    status: Verified
-    description: Strong headings for typography.
-    markup: |
-      

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL heavy.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis heavy.

-      

-
-  - id: heading-1
-    name: Heading (Light)
-    status: Verified
-    description: Light headings for typography.
-    markup: |
-      

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

+      

\ No newline at end of file
diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml
index c97bab2364f..df99dd41e80 100644
--- a/components/typography/metadata/typography-international.yml
+++ b/components/typography/metadata/typography-international.yml
@@ -7,44 +7,40 @@ examples:
     markup: |
       

         

-          
Aliquet Mauris Eu

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-          
Aliquet Mauris Eu

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-          
Aliquet Mauris Eu

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Aliquet Mauris Eu

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-          
Lorem Ipsum Dolor

-          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-          
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-        

+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

       

 
   - id: heading-1
@@ -53,241 +49,132 @@ examples:
     description: Headings for typography.
     markup: |
       

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL Strong.

-        
HeadingM HeadingM Emphasis HeadingM Strong.

-        
HeadingS HeadingS Emphasis HeadingS Strong.

-        
HeadingXS HeadingXS Emphasis HeadingXS Strong.

-        
HeadingXXS HeadingXXS Emphasis HeadingXXS Strong.

+        
HeadingXXXL HeadingXXXL Emphasis Strong.

+        
HeadingXXL HeadingXXL Emphasis Strong.

+        
HeadingXL HeadingXL Emphasis Strong.

+        
HeadingL HeadingL Emphasis Strong.

+        
HeadingM HeadingM Emphasis Strong.

+        
HeadingS HeadingS Emphasis Strong.

+        
HeadingXS HeadingXS Emphasis Strong.

+        
HeadingXXS HeadingXXS Emphasis Strong.

         

-        
HeadingXXXL SerifHeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL SerifHeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL SerifHeadingXL Emphasis HeadingXL Strong.

-        
HeadingL SerifHeadingL Emphasis HeadingL Strong.

-        
HeadingM SerifHeadingM Emphasis HeadingM Strong.

-        
HeadingS SerifHeadingS Emphasis HeadingS Strong.

-        
HeadingXS SerifHeadingXS Emphasis HeadingXS Strong.

-        
HeadingXXS SerifHeadingXXS Emphasis HeadingXXS Strong.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

+        
HeadingM Serif Emphasis Strong.

+        
HeadingS Serif Emphasis Strong.

+        
HeadingXS Serif Emphasis Strong.

+        
HeadingXXS Serif Emphasis Strong.

       

 
       

-        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL 重点 見出しXL 強い強調.

-        
見出しL 見出しL 重点 見出しL 強い強調.

-        
見出しM 見出しM 重点 見出しM 強い強調.

-        
見出しS 見出しS 重点 見出しS 強い強調.

-        
見出しXS 見出しXS 重点 見出しXS 強い強調.

-        
見出しXXS 見出しXXS 重点 見出しXXS 強い強調.

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

+        
見出しM 見出しM 重点 見出しM 強い強調.

+        
見出しS 見出しS 重点 見出しS 強い強調.

+        
見出しXS 見出しXS 重点 見出しXS 強い強調.

+        
見出しXXS 見出しXXS 重点 見出しXXS 強い強調.

       

 
       

-        
XXXLالقسم XXXLالقسم  تشديد XXXLالقسم  تأكيد قو.

-        
XXLالقسم XXLالقسم  تشديد XXLالقسم  تأكيد قو.

-        
XLالقسم XLالقسم  تشديد XLالقسم  تأكيد قو.

-        
Lالقسم Lالقسم  تشديد Lالقسم  تأكيد قو.

-        
Mالقسم Mالقسم  تشديد Mالقسم  تأكيد قو.

-        
Sالقسم Sالقسم  تشديد Sالقسم  تأكيد قو.

-        
XSالقسم XSالقسم  تشديد XSالقسم  تأكيد قو.

-        
XSSالقسم XSSالقسم  تشديد XXSالقسم  تأكيد قو.

+        
XXXLالقسم XXXLالقسم  تشديد XXXLالقسم  تأكيد قو.

+        
XXLالقسم XXLالقسم  تشديد XXLالقسم  تأكيد قو.

+        
XLالقسم XLالقسم  تشديد XLالقسم  تأكيد قو.

+        
Lالقسم Lالقسم  تشديد Lالقسم  تأكيد قو.

+        
Mالقسم Mالقسم  تشديد Mالقسم  تأكيد قو.

+        
Sالقسم Sالقسم  تشديد Sالقسم  تأكيد قو.

+        
XSالقسم XSالقسم  تشديد XSالقسم  تأكيد قو.

+        
XSSالقسم XSSالقسم  تشديد XXSالقسم  تأكيد قو.

       

 
       

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

-        
Mדגש כותרת Mמאמר Mחזק.

-        
Sדגש כותרת Sמאמר Sחזק.

-        
XSדגש כותרת XSמאמר XSחזק.

-        
XXSדגש כותרת XXSמאמר XXSחזק.

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

+        
Mדגש כותרת Mמאמר Mחזק.

+        
Sדגש כותרת Sמאמר Sחזק.

+        
XSדגש כותרת XSמאמר XSחזק.

+        
XXSדגש כותרת XXSמאמר XXSחזק.

       

 
   - id: heading-1
-    name: Heading (Strong)
+    name: Heading (Heavy)
     status: Verified
     description: Strong headings for typography.
     markup: |
       

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL heavy.

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis heavy.

         

-        
HeadingXXXL Serif HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL Serif HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif  Emphasis heavy.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif  Emphasis heavy.

       

 
       

-        
見出しXXXL 見出し XXXL  >見出しXXXL 強い強調.

-        
見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL  重点 見出しXL強い強調.

-        
見出しL 見出しL  重点 見出しL強い強調.

+        
見出しXXXL 見出し XXXL  >見出しXXXL 強い強調.

+        
見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL  重点 見出しXL強い強調.

+        
見出しL 見出しL  重点 見出しL強い強調.

       

 
       

-        
القسمXXXL القسم XXXL  تشديد القسم 2XXXL تأكيد قو.

-        
القسمXXL القسم 1XXL  تشديد Emphasis القسم XXL تأكيد قو.

-        
القسمXLالقسم 1XL  تشديد القسم XL تأكيد قو.

-        
القسمL القسم L  تشديد القسم L تأكيد قو.

+        
القسمXXXL القسم XXXL  تشديد القسم 2XXXL تأكيد قو.

+        
القسمXXL القسم 1XXL  تشديد Emphasis القسم XXL تأكيد قو.

+        
القسمXLالقسم 1XL  تشديد القسم XL تأكيد قو.

+        
القسمL القسم L  تشديد القسم L تأكيد قو.

       

 
       

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

       

 
   - id: heading-1
-    name: Heading (Quiet)
+    name: Heading (Light)
     status: Verified
-    description: Quiet headings for typography.
+    description: Light headings for typography.
     markup: |
       

-        
HeadingXXXL HeadingXXXL Emphasis HeadingXXXL Strong.

-        
HeadingXXL HeadingXXL Emphasis HeadingXXL Strong.

-        
HeadingXL HeadingXL Emphasis HeadingXL Strong.

-        
HeadingL HeadingL Emphasis HeadingL Strong.

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

       

 
       

-        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL 重点 見出しXL 強い強調.

-        
見出しL 見出しL 重点 見出しL 強い強調.

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

       

 
       

-        
XXXLالقسم القسم XXXL  تشديد XXXLالقسم  تأكيد قو.

-        
XXLالقسم القسم XXL  تشديد XXLالقسم  تأكيد قو.

-        
XLالقسم القسم XL  تشديد XLالقسم  تأكيد قو.

-        
Lالقسم القسم L  تشديد Lالقسم  تأكيد قو.

+        
XXXLالقسم القسم XXXL  تشديد XXXLالقسم  تأكيد قو.

+        
XXLالقسم القسم XXL  تشديد XXLالقسم  تأكيد قو.

+        
XLالقسم القسم XL  تشديد XLالقسم  تأكيد قو.

+        
Lالقسم القسم L  تشديد Lالقسم  تأكيد قو.

       

 
       

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

-      

-
-  - id: heading-1
-    name: Display
-    status: Verified
-    description: Display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

-
-      

-        
見出しXXXL 見出しXXXL  重点 見出しXXXL 強い強調.

-        
見出しXXL 見出しXXL  重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL  重点 見出しXL 強い強調.

-        
見出しL 見出しL  重点 見出しL 強い強調.

-      

-
-      

-        
XXXLالقسم القسم XXXL  تشديد القسم 2XXXL تأكيد قو.

-        
XXLالقسم القسم XXL  تشديد القسم 2XXL تأكيد قو.

-        
XLالقسم القسم XL  تشديد القسم XL تأكيد قو.

-        
Lالقسم القسم 1L  تشديد القسم L تأكيد قو.

-      

-
-      

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

-      

-
-  - id: heading-1
-    name: Display (Strong)
-    status: Verified
-    description: Strong display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-      

-
-      

-        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL 重点 見出しXL 強い強調.

-        
見出しL 見出しL 重点 見出しL 強い強調.

-      

-
-      

-        
XXXLالقسم القسم XXXL تشديد القسم XXXL تأكيد قو.

-        
XXLالقسم القسم XXL تشديد القسم XXL تأكيد قو.

-        
القسم XL تشديد القسم XL تأكيد قو.

-        
Lالقسم القسم L تشديد القسم L تأكيد قو.

-      

-
-      

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

-      

-
-  - id: heading-1
-    name: Display (Quiet)
-    status: Verified
-    description: Quiet display headings for typography.
-    markup: |
-      

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

-        

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-      

-
-      

-        
見出しXXXL 見出し見出しXXXL  重点 見出し見出しXXXL 強い強調.

-        
見出しXXL 見出し見出しXXL  重点 見出し見出しXXL 強い強調.

-        
見出しXL 見出し見出しXL  重点 見出し見出しXL 強い強調.

-        
見出しL 見出し見出しL  重点 見出し見出しL 強い強調.

-      

-
-      

-        
XXXLالقسم القسم XXXL  تشديد القسم XXXL تأكيد قو.

-        
XXLالقسم القسم XXL  تشديد القسم XXL تأكيد قو.

-        
XLالقسم القسم XL  تشديد القسم XL تأكيد قو.

-        
Lالقسم القسم L  تشديد القسم L تأكيد قو.

-      

-
-      

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

       

 
   - id: heading-1
@@ -296,51 +183,51 @@ examples:
     description: Default body text sizes.
     markup: |
       

-        
BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

-        
BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

-        
BodyXL Text BodyXL Emphasis BodyXL Strong.

-        
BodyL text BodyL Emphasis BodyL Strong.

-        
BodyM Text BodyM Emphasis BodyM Strong.

-        
BodyS Text BodyS Emphasis BodyS Strong.

-        
BodyXS Text BodyXS Emphasis BodyXS Strong.

+        
BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

+        
BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

+        
BodyXL Text BodyXL Emphasis BodyXL Strong.

+        
BodyL text BodyL Emphasis BodyL Strong.

+        
BodyM Text BodyM Emphasis BodyM Strong.

+        
BodyS Text BodyS Emphasis BodyS Strong.

+        
BodyXS Text BodyXS Emphasis BodyXS Strong.

         

-        
BodyXXXL Text Serif BodyXXXL Emphasis BodyXXXL Strong.

-        
BodyXXL Text Serif BodyXXL Emphasis BodyXXL Strong.

-        
BodyXL Text Serif BodyXL Emphasis BodyXL Strong.

-        
BodyL text Serif BodyL Emphasis BodyL Strong.

-        
BodyM Text Serif BodyM Emphasis BodyM Strong.

-        
BodyS Text Serif BodyS Emphasis BodyS Strong.

-        
BodyXS Text Serif BodyXS Emphasis BodyXS Strong.

+        
BodyXXXL Text Serif BodyXXXL Emphasis BodyXXXL Strong.

+        
BodyXXL Text Serif BodyXXL Emphasis BodyXXL Strong.

+        
BodyXL Text Serif BodyXL Emphasis BodyXL Strong.

+        
BodyL text Serif BodyL Emphasis BodyL Strong.

+        
BodyM Text Serif BodyM Emphasis BodyM Strong.

+        
BodyS Text Serif BodyS Emphasis BodyS Strong.

+        
BodyXS Text Serif BodyXS Emphasis BodyXS Strong.

       

 
       

-        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL 重点 見出しXL 強い強調.

-        
見出しL 見出しL 重点 見出しL 強い強調.

-        
見出しM 見出しM 重点 見出しM 強い強調.

-        
見出しS 見出しS 重点 見出しS 強い強調.

-        
見出しXS 見出しXS 重点 見出しXS 強い強調.

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

+        
見出しM 見出しM 重点 見出しM 強い強調.

+        
見出しS 見出しS 重点 見出しS 強い強調.

+        
見出しXS 見出しXS 重点 見出しXS 強い強調.

       

 
       

-        
القسم XXXL القسم XXXL تشديد القسم XXXL تأكيد قو.

-        
القسم XXL القسم XXL تشديد القسم XXL تأكيد قو.

-        
القسم XL القسم XL تشديد القسم XL تأكيد قو.

-        
القسم L القسم L تشديد القسم L تأكيد قو.

-        
القسم M القسم M تشديد القسم M تأكيد قو.

-        
القسم S القسم S تشديد القسم S تأكيد قو.

-        
القسم XS القسم XS تشديد القسم XS تأكيد قو.

+        
القسم XXXL القسم XXXL تشديد القسم XXXL تأكيد قو.

+        
القسم XXL القسم XXL تشديد القسم XXL تأكيد قو.

+        
القسم XL القسم XL تشديد القسم XL تأكيد قو.

+        
القسم L القسم L تشديد القسم L تأكيد قو.

+        
القسم M القسم M تشديد القسم M تأكيد قو.

+        
القسم S القسم S تشديد القسم S تأكيد قو.

+        
القسم XS القسم XS تشديد القسم XS تأكيد قو.

       

 
       

-        
XXXLטקסט גוף הדגשות XXXLגוף חזק XXXLגוף חזק.

-        
XXLטקסט גוף הדגשות XXLגוף חזק XXLגוף חזק.

-        
XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

-        
Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

-        
Mטקסט גוף הדגשות Mגוף חזק Mגוף חזק.

-        
Sטקסט גוף הדגשות Sגוף חזק Sגוף חזק.

-        
XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

+        
XXXLטקסט גוף הדגשות XXXLגוף חזק XXXLגוף חזק.

+        
XXLטקסט גוף הדגשות XXLגוף חזק XXLגוף חזק.

+        
XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

+        
Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

+        
Mטקסט גוף הדגשות Mגוף חזק Mגוף חזק.

+        
Sטקסט גוף הדגשות Sגוף חזק Sגוף חזק.

+        
XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

       

 
   - id: detail-1
@@ -349,36 +236,36 @@ examples:
     description: Subheadings for typography.
     markup: |
       

-        
DetailXL DetailXL Emphasis DetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Strong.

-        
DetailL DetailM Emphasis DetailM Strong.

-        
DetailL DetailS Emphasis DetailS Strong.

+        
DetailXL DetailXL Emphasis DetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Strong.

+        
DetailL DetailM Emphasis DetailM Strong.

+        
DetailL DetailS Emphasis DetailS Strong.

         

-        
DetailXL DetailXL Emphasis DetailXL Strong.

-        
DetailL DetailL Emphasis DetailL Strong.

-        
DetailL DetailM Emphasis DetailM Strong.

-        
DetailL DetailS Emphasis DetailS Strong.

+        
DetailXL DetailXL Emphasis DetailXL Strong.

+        
DetailL DetailL Emphasis DetailL Strong.

+        
DetailL DetailM Emphasis DetailM Strong.

+        
DetailL DetailS Emphasis DetailS Strong.

       

 
       

-        
見出しXL  見出しXL 見出しXL.

-        
見出しL  見出しL 見出しL.

-        
見出しM  見出しM 見出しM.

-        
見出しS  見出しS 見出しS.

+        
見出しXL  見出しXL 見出しXL.

+        
見出しL  見出しL 見出しL.

+        
見出しM  見出しM 見出しM.

+        
見出しS  見出しS 見出しS.

       

 
       

-        
القسم XL القسم XL تشديد القسم XL تأكيد قو.

-        
L L تشديد L تأكيد قو.

-        
القسم M  القسم M تشديد القسم M تأكيد قو.

-        
القسم S القسم S تشديد القسم S تأكيد قو.

+        
القسم XL القسم XL تشديد القسم XL تأكيد قو.

+        
L L تشديد L تأكيد قو.

+        
القسم M  القسم M تشديد القسم M تأكيد قو.

+        
القسم S القسم S تشديد القسم S تأكيد قو.

       

 
       

-        
XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

-        
Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

-        
Mالقسم טקסט גוף הדגשות Mגוף חזק Mגוף חזק.

-        
Sالقسم טקסט גוף הדגשות Sגוף חזק Sגוף חזק.

+        
XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

+        
Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

+        
Mالقسم טקסט גוף הדגשות Mגוף חזק Mגוף חזק.

+        
Sالقسم טקסט גוף הדגשות Sגוף חזק Sגוף חזק.

       

 
   - id: heading-1
@@ -387,22 +274,22 @@ examples:
     description: Typographic pairings for Adobe Clean Han.
     markup: |
       

-        
見出しXXXL

-        
見出しとよく対になる本文。

-        
見出しXXL

-        
見出しとよく対になる本文。

-        
見出しXL

-        
見出しとよく対になる本文。

-        
見出しL

-        
見出しとよく対になる本文。

-        
見出しM

-        
見出しとよく対になる本文。

-        

-        
見出しとよく対になる本文。

-        
見出しXS

-        
見出しとよく対になる本文。

-        
見出しXXS

-        
見出しとよく対になる本文。

+        
見出しXXXL

+        
見出しとよく対になる本文。

+        
見出しXXL

+        
見出しとよく対になる本文。

+        
見出しXL

+        
見出しとよく対になる本文。

+        
見出しL

+        
見出しとよく対になる本文。

+        
見出しM

+        
見出しとよく対になる本文。

+        
見出しS

+        
見出しとよく対になる本文。

+        
見出しXS

+        
見出しとよく対になる本文。

+        
見出しXXS

+        
見出しとよく対になる本文。

       

 
   - id: code-1
@@ -411,12 +298,12 @@ examples:
     description: Typographic styles for computer code.
     markup: |
       

-        暗号 XL Code Strong 
-        暗号 L Code Strong 
-        暗号 M Code Strong 
-        暗号 S Code Strong 
-        暗号 XS Code Strong 
-        
暗号 M Code Wrapped in:
+        暗号 XL Code Strong 
+        暗号 L Code Strong 
+        暗号 M Code Strong 
+        暗号 S Code Strong 
+        暗号 XS Code Strong 
+        
暗号 M Code Wrapped in:
         pre tags for
         goodness

       

\ No newline at end of file

From 1ce21d2fc9a5653b536e43a22141b07c4797c5b9 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Thu, 9 Jan 2020 19:29:19 -0800
Subject: [PATCH 18/24] fix: typo on international page

---
 .../metadata/typography-international.yml     | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml
index df99dd41e80..01eafa54769 100644
--- a/components/typography/metadata/typography-international.yml
+++ b/components/typography/metadata/typography-international.yml
@@ -145,36 +145,36 @@ examples:
     description: Light headings for typography.
     markup: |
       

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
HeadingL Emphasis Strong.

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
HeadingL Serif Emphasis Strong.

       

 
       

-        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL 重点 見出しXL 強い強調.

-        
見出しL 見出しL 重点 見出しL 強い強調.

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

       

 
       

-        
XXXLالقسم القسم XXXL  تشديد XXXLالقسم  تأكيد قو.

-        
XXLالقسم القسم XXL  تشديد XXLالقسم  تأكيد قو.

-        
XLالقسم القسم XL  تشديد XLالقسم  تأكيد قو.

-        
Lالقسم القسم L  تشديد Lالقسم  تأكيد قو.

+        
XXXLالقسم القسم XXXL  تشديد XXXLالقسم  تأكيد قو.

+        
XXLالقسم القسم XXL  تشديد XXLالقسم  تأكيد قو.

+        
XLالقسم القسم XL  تشديد XLالقسم  تأكيد قو.

+        
Lالقسم القسم L  تشديد Lالقسم  تأكيد قو.

       

 
       

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

       

 
   - id: heading-1

From 7b8f9c693a09e4a5c6e156b22fcce5b3fcaced5b Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Fri, 10 Jan 2020 14:37:37 -0800
Subject: [PATCH 19/24] fix: typekit changes

---
 site/resources/js/typekit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/resources/js/typekit.js b/site/resources/js/typekit.js
index 1f21a6dbc43..db2c831d473 100644
--- a/site/resources/js/typekit.js
+++ b/site/resources/js/typekit.js
@@ -23,6 +23,7 @@ window.addEventListener('DOMContentLoaded', function() {
      // If it is US-language or unset use the 1st Adobe font web project id (smaller size),
      // otherwise use the 2nd kit with all the language settings (larger size)
      // kitId: document.querySelector('[lang]:not([lang="en-US"])') !== null ? 'pbi5ojv' : 'ruf7eed',
+
     kitId: document.querySelector('[lang]:not([lang="en-US"])') === null ? 'mge7bvf' : 'rok6rmo',
     scriptTimeout: 3000,
     active: function() {

From 1bb1efefcd2fc09aa4b97fb0c14689ce3814dfd6 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Fri, 10 Jan 2020 15:01:23 -0800
Subject: [PATCH 20/24] fix: fixing dropzone typeface

---
 components/dropzone/metadata/dropzone.yml                     | 4 ++--
 components/illustratedmessage/metadata/illustratedmessage.yml | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/dropzone/metadata/dropzone.yml b/components/dropzone/metadata/dropzone.yml
index e0d460cec4a..adcd6530c04 100644
--- a/components/dropzone/metadata/dropzone.yml
+++ b/components/dropzone/metadata/dropzone.yml
@@ -7,7 +7,7 @@ examples:
       

         

           
-          
Drag and Drop Your File

+          
Drag and Drop Your File

           
Select a File from your computer
 or Search Adobe Stock

         

       

@@ -17,7 +17,7 @@ examples:
       

         

           
-          
Drag and Drop Your File

+          
Drag and Drop Your File

           
Select a File from your computer
 or Search Adobe Stock

         

       

diff --git a/components/illustratedmessage/metadata/illustratedmessage.yml b/components/illustratedmessage/metadata/illustratedmessage.yml
index d56811ab5cf..d28272711d2 100644
--- a/components/illustratedmessage/metadata/illustratedmessage.yml
+++ b/components/illustratedmessage/metadata/illustratedmessage.yml
@@ -16,6 +16,6 @@ examples:
     markup: |
       

         
-        
Drag and Drop Your File

+        
Drag and Drop Your File

         
Select a File from your computer
 or Search Adobe Stock

       


From 12c235a55ae09df233464a3d636e8b9b4d1b1b45 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Fri, 10 Jan 2020 16:32:43 -0800
Subject: [PATCH 21/24] fix: updating correct weights

---
 components/commons/fonts.css | 2 +-
 site/resources/js/typekit.js | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/commons/fonts.css b/components/commons/fonts.css
index bd5430d15f6..7290de994c0 100644
--- a/components/commons/fonts.css
+++ b/components/commons/fonts.css
@@ -27,7 +27,7 @@ governing permissions and limitations under the License.
   --spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base);
   */
 
-  --spectrum-font-family-base: var(--spectrum-global-font-family-base);
+  --spectrum-font-family-base: var(--spectrum-alias-body-text-font-family);
   --spectrum-font-family-ar: var(--spectrum-alias-font-family-ar);
   --spectrum-font-family-he:  var(--spectrum-alias-font-family-he);
   --spectrum-font-family-zh: var(--spectrum-alias-font-family-zh);
diff --git a/site/resources/js/typekit.js b/site/resources/js/typekit.js
index db2c831d473..7e471d95087 100644
--- a/site/resources/js/typekit.js
+++ b/site/resources/js/typekit.js
@@ -22,8 +22,7 @@ window.addEventListener('DOMContentLoaded', function() {
      // On pageload, determine to current pages language setting.
      // If it is US-language or unset use the 1st Adobe font web project id (smaller size),
      // otherwise use the 2nd kit with all the language settings (larger size)
-     // kitId: document.querySelector('[lang]:not([lang="en-US"])') !== null ? 'pbi5ojv' : 'ruf7eed',
-
+    // kitId: document.querySelector('[lang]:not([lang="en-US"])') !== null ? 'pbi5ojv' : 'ruf7eed',
     kitId: document.querySelector('[lang]:not([lang="en-US"])') === null ? 'mge7bvf' : 'rok6rmo',
     scriptTimeout: 3000,
     active: function() {

From 42b0b5a389151c405de57cac2e7fd017ff600ff4 Mon Sep 17 00:00:00 2001
From: Bernhard Schmidt 
Date: Fri, 10 Jan 2020 17:18:44 -0800
Subject: [PATCH 22/24] fix: updating 404 heading

---
 components/illustratedmessage/metadata/illustratedmessage.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/illustratedmessage/metadata/illustratedmessage.yml b/components/illustratedmessage/metadata/illustratedmessage.yml
index d28272711d2..6392203b607 100644
--- a/components/illustratedmessage/metadata/illustratedmessage.yml
+++ b/components/illustratedmessage/metadata/illustratedmessage.yml
@@ -7,7 +7,7 @@ examples:
     markup: |
       

         Asset 1
-        
Error 404: Page Not Found

+        
Error 404: Page Not Found

         
This page isn't available. Try checking the URL or visit a different page.

       

   - id: illustratedmessage-default

From 56acd4b28779f360b2e2cc3934f368fe4238ebc1 Mon Sep 17 00:00:00 2001
From: Larry Davis 
Date: Wed, 5 Feb 2020 16:44:12 -0800
Subject: [PATCH 23/24] docs: fix status and spelling errors

---
 .../typography-international-depreciated.yml       | 14 ++------------
 components/typography/metadata/typography.yml      | 13 ++-----------
 2 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/components/typography/metadata/typography-international-depreciated.yml b/components/typography/metadata/typography-international-depreciated.yml
index d949d27d42c..acfb10af6f8 100644
--- a/components/typography/metadata/typography-international-depreciated.yml
+++ b/components/typography/metadata/typography-international-depreciated.yml
@@ -1,8 +1,8 @@
-name: Typography (Int., Depreciated I)
+name: Typography (Int., Deprecated I)
+status: Deprecated
 examples:
   - id: heading-1
     name: Typography
-    status: Verified
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       

@@ -46,7 +46,6 @@ examples:
       

   - id: heading-1
     name: Heading
-    status: Verified
     description: Headings for typography.
     markup: |
       

@@ -90,7 +89,6 @@ examples:
       

   - id: heading-1
     name: Heading (Strong)
-    status: Verified
     description: Strong headings for typography.
     markup: |
       

@@ -119,7 +117,6 @@ examples:
       

   - id: heading-1
     name: Heading (Quiet)
-    status: Verified
     description: Quiet headings for typography.
     markup: |
       

@@ -148,7 +145,6 @@ examples:
       

   - id: heading-1
     name: Display
-    status: Verified
     description: Display headings for typography.
     markup: |
       

@@ -177,7 +173,6 @@ examples:
       

   - id: heading-1
     name: Display (Strong)
-    status: Verified
     description: Strong display headings for typography.
     markup: |
       

@@ -201,7 +196,6 @@ examples:
       

   - id: heading-1
     name: Display (Quiet)
-    status: Verified
     description: Quiet display headings for typography.
     markup: |
       

@@ -230,7 +224,6 @@ examples:
       

   - id: heading-1
     name: Body
-    status: Verified
     description: Default body text sizes.
     markup: |
       

@@ -274,7 +267,6 @@ examples:
       

   - id: heading-1
     name: Han
-    status: Verified
     description: Typographic pairings for Adobe Clean Han.
     markup: |
       

@@ -295,7 +287,6 @@ examples:
       

   - id: heading-1
     name: Article
-    status: Verified
     description: Typography elements paired to display clear content hierarchies in long form articles.
     markup: |
       

@@ -316,7 +307,6 @@ examples:
       

   - id: heading-1
     name: Typography - Code
-    status: Verified
     description: Typographic styles for computer code.
     markup: |
       Code1 Text Strong
diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml
index a03f1b7f1a8..f6c6fc2a342 100644
--- a/components/typography/metadata/typography.yml
+++ b/components/typography/metadata/typography.yml
@@ -1,10 +1,10 @@
-name: Typography (Depreciated I)
+name: Typography (Deprecated I)
 description: 'English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples.'
+status: Deprecated
 SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/
 examples:
   - id: heading-1
     name: Standard
-    status: Verified
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       

@@ -48,7 +48,6 @@ examples:
       

   - id: heading-1
     name: Heading
-    status: Verified
     description: Headings for typography.
     markup: |
       

@@ -69,7 +68,6 @@ examples:
       

   - id: heading-1
     name: Heading (Strong)
-    status: Verified
     description: Strong headings for typography.
     markup: |
       

@@ -83,7 +81,6 @@ examples:
       

   - id: heading-1
     name: Heading (Quiet)
-    status: Verified
     description: Quiet headings for typography.
     markup: |
       

@@ -97,7 +94,6 @@ examples:
       

   - id: heading-1
     name: Display
-    status: Verified
     description: Display headings for typography.
     markup: |
       

@@ -111,7 +107,6 @@ examples:
       

   - id: heading-1
     name: Display (Strong)
-    status: Verified
     description: Strong display headings for typography.
     markup: |
       

@@ -120,7 +115,6 @@ examples:
       

   - id: heading-1
     name: Display (Quiet)
-    status: Verified
     description: Quiet display headings for typography.
     markup: |
       

@@ -134,7 +128,6 @@ examples:
       

   - id: heading-1
     name: Body
-    status: Verified
     description: Default body text sizes.
     markup: |
       

@@ -156,7 +149,6 @@ examples:
       

   - id: heading-1
     name: Article
-    status: Verified
     description: Typography elements paired to display clear content hierarchies in long form articles.
     markup: |
       

@@ -177,7 +169,6 @@ examples:
       

   - id: heading-1
     name: Typography - Code
-    status: Verified
     description: Typographic styles for computer code.
     markup: |
       Code1 Text Strong

From f871b74e3f75e5d4c3875b4e1ad0f3dfb5d1b499 Mon Sep 17 00:00:00 2001
From: Larry Davis 
Date: Thu, 6 Feb 2020 16:59:01 -0800
Subject: [PATCH 24/24] Typography metadata fixes and deprecation bits (#523)

* docs: support hiding examples, disabling fastLoad

* docs: support changing Variants heading, enable Spectrum cards

* docs: correct Typography example status, markup errors, and 
 usage

* add Typography landing page
* also, hide old Typography (but link to it from the main page)

* docs: remove Tool from menu, fix ButtonGroup Spectrum link

* also, add link to Tool in ActionButton description

* docs: correct Heading component description

* docs: use the descriptions from the Spectrum site

* docs: correct spelling mistake
---
 components/button/metadata/actionbutton.yml   |   1 +
 components/button/metadata/tool.yml           |   3 +-
 .../buttongroup/metadata/buttongroup.yml      |   2 +-
 components/site/index.css                     |   2 +-
 .../typography/metadata/typography-body.yml   |  22 +-
 .../typography/metadata/typography-code.yml   |   8 +-
 .../metadata/typography-deprecated.yml        | 192 ++++++++++++++--
 ...graph-detail.yml => typography-detail.yml} |   6 +-
 .../metadata/typography-heading.yml           |  80 ++++---
 ...> typography-international-deprecated.yml} |   5 +-
 .../metadata/typography-international.yml     | 186 ++++++++--------
 .../typography/metadata/typography-legacy.yml |  19 ++
 components/typography/metadata/typography.yml | 209 +++---------------
 site/includes/nav.pug                         |   8 +-
 site/templates/siteComponent.pug              |   6 +-
 tools/bundle-builder/docs/index.js            |   2 +
 16 files changed, 398 insertions(+), 353 deletions(-)
 rename components/typography/metadata/{typograph-detail.yml => typography-detail.yml} (89%)
 rename components/typography/metadata/{typography-international-depreciated.yml => typography-international-deprecated.yml} (99%)
 create mode 100644 components/typography/metadata/typography-legacy.yml

diff --git a/components/button/metadata/actionbutton.yml b/components/button/metadata/actionbutton.yml
index c34221ec932..7b6b4fee37d 100644
--- a/components/button/metadata/actionbutton.yml
+++ b/components/button/metadata/actionbutton.yml
@@ -191,6 +191,7 @@ examples:
       
   - id: actionbutton-quiet
     name: Quiet
+    description: The Quiet Action Button should be used where you previously used the [deprecated Tool component](tool.html).
     markup: |
       

 
-  - id: heading-body-1
+  - id: heading-m
     name: Standard
     status: Verified
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       

-        

         
Aliquet Mauris Eu

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

@@ -49,23 +49,19 @@ examples:
         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

       

\ No newline at end of file
diff --git a/components/typography/metadata/typography-code.yml b/components/typography/metadata/typography-code.yml
index ff4f21efedb..1b59bc74b09 100644
--- a/components/typography/metadata/typography-code.yml
+++ b/components/typography/metadata/typography-code.yml
@@ -1,8 +1,9 @@
 name: Typography Code
-description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples."
+id: code-m
+description: Code is a typography component used for text that represents code.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/code/
 examples:
-  - id: code-1
+  - id: code-m
     name: Typography - Code
     status: Verified
     description: Typographic styles for computer code.
@@ -12,7 +13,8 @@ examples:
       CodeM Text Strong Emphasis 
       CodeS Text Strong Emphasis 
       CodeXS Text Strong Emphasis 
-      
CodeM Text Wrapped in:
+      
CodeM text
+      wrapped in
       pre tags for
       multiline
       goodness

\ No newline at end of file
diff --git a/components/typography/metadata/typography-deprecated.yml b/components/typography/metadata/typography-deprecated.yml
index b8d84c533b8..93d4ca7f908 100644
--- a/components/typography/metadata/typography-deprecated.yml
+++ b/components/typography/metadata/typography-deprecated.yml
@@ -1,19 +1,181 @@
-id: heading-display
-name: Typography (Deprecated II)
+name: Typography (Deprecated)
+description: Deprecated typography components. The [new Typography components](typography.html) should be used instead.
 status: Deprecated
-details: These styles can be replicated using new Typography classes
-description: Legacy typography elements.
+hide: true
 examples:
-  - id: heading-display
+  - id: heading-1
     name: Standard
+    description: Typography elements paired to display clear content hierarchies.
     markup: |
-      
Display (h1)

-      
Page Title (h2)

-      
Subtitle 1 (h2)

-      
Subtitle 2 (h3)

-      
Subtitle 3 (h4)

-      
Small Body Text

-      
Default Body Text

-      
Secondary Body Text

-      
 Body Text Italic

-      
Large Body Text

+      

+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Aliquet Mauris Eu

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+        
Lorem Ipsum Dolor

+        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

+        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+        

+      

+  - id: heading-1
+    name: Heading
+    description: Headings for typography.
+    markup: |
+      

+        
Heading1 Heading1 Emphasis Heading1 Strong.

+        
Heading2 Heading2 Emphasis Heading2 Strong.

+        
Heading3 Heading3 Emphasis Heading3 Strong.

+        
Heading4 Heading4 Emphasis Heading4 Strong.

+        
Heading5 Heading5 Emphasis Heading5 Strong.

+        
Subheading Subheading Emphasis Subheading Strong.

+      

+      

+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+        
Article Heading3 Emphasis Strong.

+        
Article Heading4 Emphasis Strong.

+        
Article Heading5 Emphasis Strong.

+      

+  - id: heading-1
+    name: Heading (Strong)
+    description: Strong headings for typography.
+    markup: |
+      

+        
Heading1 Heading1 Emphasis Heading1 Strong.

+        
Heading2 Heading2 Emphasis Heading2 Strong.

+      

+      

+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+      

+  - id: heading-1
+    name: Heading (Quiet)
+    description: Quiet headings for typography.
+    markup: |
+      

+        
Heading1 Heading1 Emphasis Heading1 Strong.

+        
Heading2 Heading2 Emphasis Heading2 Strong.

+      

+      

+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+      

+  - id: heading-1
+    name: Display
+    description: Display headings for typography.
+    markup: |
+      

+        
Heading1 Emphasis Strong.

+        
Heading2 Emphasis Strong.

+      

+      

+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+      

+  - id: heading-1
+    name: Display (Strong)
+    description: Strong display headings for typography.
+    markup: |
+      

+        
Heading1 Emphasis Strong.

+        
Heading2 Emphasis Strong.

+      

+  - id: heading-1
+    name: Display (Quiet)
+    description: Quiet display headings for typography.
+    markup: |
+      

+        
Heading1 Emphasis Strong.

+        
Heading2 Emphasis Strong.

+      

+      

+      

+        
Article Heading1 Emphasis Strong.

+        
Article Heading2 Emphasis Strong.

+      

+  - id: heading-1
+    name: Body
+    description: Default body text sizes.
+    markup: |
+      

+        
Body1 Text Body1 Emphasis Body1 Strong.

+        
Body2 text Body2 Emphasis Body2 Strong.

+        
Body3 Text Body3 Emphasis Body3 Strong.

+        
Body4 Text Body4 Emphasis Body4 Strong.

+        
Body5 Text Body5 Emphasis Body5 Strong.

+        
Detail Text Detail Emphasis Detail Strong.

+      

+      

+      

+        
Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

+        
Article Body2 text Article Body2 Emphasis Article Body2 Strong.

+        
Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

+        
Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

+        
Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

+        
Detail Text Detail Emphasis Detail Strong.

+      

+  - id: heading-1
+    name: Article
+    description: Typography elements paired to display clear content hierarchies in long form articles.
+    markup: |
+      

+        
Heading 1

+        
Body copy that pairs with heading 1

+
+        
Heading 2

+        
Body copy that pairs with heading 2

+
+        
Heading 3

+        
Body copy that pairs with heading 3

+
+        
Heading 4

+        
Body copy that pairs with heading 4

+
+        
Heading 5

+        
Body copy that pairs with heading 5

+      

+  - id: heading-1
+    name: Typography - Code
+    description: Typographic styles for computer code.
+    markup: |
+      Code1 Text Strong
+      Code2 Text Strong
+      Code3 Text Strong
+      Code4 Text Strong
+      Code5 Text Strong
+      
Code3 Text Wrapped in:
+      pre tags for
+      multiline
+      goodness

diff --git a/components/typography/metadata/typograph-detail.yml b/components/typography/metadata/typography-detail.yml
similarity index 89%
rename from components/typography/metadata/typograph-detail.yml
rename to components/typography/metadata/typography-detail.yml
index d06a1e4ba8e..3ac1ba0b125 100644
--- a/components/typography/metadata/typograph-detail.yml
+++ b/components/typography/metadata/typography-detail.yml
@@ -1,11 +1,11 @@
 name: Typography Detail
-description: "English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples."
+dnaStatus: Verified
+description: Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/detail/
 examples:
-  - id: detail-1
+  - id: detail-m
     status: Verified
     name: Detail
-    description: Subheadings for typography.
     markup: |
       

         
DetailXL DetailXL Emphasis DetailXL Light DetailXL Strong.

diff --git a/components/typography/metadata/typography-heading.yml b/components/typography/metadata/typography-heading.yml
index 24ca6478fc0..1d1ae50153e 100644
--- a/components/typography/metadata/typography-heading.yml
+++ b/components/typography/metadata/typography-heading.yml
@@ -1,73 +1,73 @@
 name: Typography Heading
-description: "Spectrum Typography Headings."
-SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/heading/
+id: heading-m
+description: Heading is a typography component used to create various levels of hierarchies between text.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/heading/
 examples:
-  - id: heading-1
+  - id: heading-m
     name: Heading
     status: Verified
     description: Headings for typography.
     markup: |
       

-        
HeadingXXXL HeadingXXXL Emphasis Strong.

-        
HeadingXXL HeadingXXL Emphasis Strong.

-        
HeadingXL HeadingXL Emphasis Strong.

-        
HeadingL HeadingL Emphasis Strong.

-        
HeadingM HeadingM Emphasis Strong.

-        
HeadingS HeadingS Emphasis Strong.

-        
HeadingXS HeadingXS Emphasis Strong.

-        
HeadingXXS HeadingXXS Emphasis Strong.

+        
HeadingXXXL HeadingXXXL Emphasis Strong.

+        
HeadingXXL HeadingXXL Emphasis Strong.

+        
HeadingXL HeadingXL Emphasis Strong.

+        
HeadingL HeadingL Emphasis Strong.

+        
HeadingM HeadingM Emphasis Strong.

+        
HeadingS HeadingS Emphasis Strong.

+        
HeadingXS HeadingXS Emphasis Strong.

+        
HeadingXXS HeadingXXS Emphasis Strong.

         

-        
HeadingXXXL Serif Serif Emphasis Serif Strong.

-        
HeadingXXL Serif Serif Emphasis Serif Strong.

-        
HeadingXL Serif Serif Emphasis Serif Strong.

+        
HeadingXXXL Serif Serif Emphasis Serif Strong.

+        
HeadingXXL Serif Serif Emphasis Serif Strong.

+        
HeadingXL Serif Serif Emphasis Serif Strong.

         
HeadingL Serif Serif Emphasis Serif Strong.

-        
HeadingM Serif Serif Emphasis Serif Strong.

-        
HeadingS Serif Serif Emphasis Serif Strong.

-        
HeadingXS Serif Serif Emphasis Serif Strong.

-        
HeadingXXS Serif Serif Emphasis Serif Strong.

+        
HeadingM Serif Serif Emphasis Serif Strong.

+        
HeadingS Serif Serif Emphasis Serif Strong.

+        
HeadingXS Serif Serif Emphasis Serif Strong.

+        
HeadingXXS Serif Serif Emphasis Serif Strong.

       

 
-  - id: heading-1
+  - id: heading-heavy-m
     name: Heading (Heavy)
     status: Verified
     description: Strong headings for typography.
     markup: |
       

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

         
HeadingL Emphasis strong.

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

         
HeadingL Serif Emphasis strong.

       

 
-  - id: heading-1
+  - id: heading-light-m
     name: Heading (Light)
     status: Verified
     description: Light headings for typography.
     markup: |
       

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

         
HeadingL Emphasis Strong.

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

         
HeadingL Serif Emphasis Strong.

       

 
-  - id: heading-body-1
+  - id: heading-m
     name: Standard
     status: Verified
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       

-        

         
Aliquet Mauris Eu

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

@@ -83,23 +83,19 @@ examples:
         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

       

\ No newline at end of file
diff --git a/components/typography/metadata/typography-international-depreciated.yml b/components/typography/metadata/typography-international-deprecated.yml
similarity index 99%
rename from components/typography/metadata/typography-international-depreciated.yml
rename to components/typography/metadata/typography-international-deprecated.yml
index acfb10af6f8..5808ce938c7 100644
--- a/components/typography/metadata/typography-international-depreciated.yml
+++ b/components/typography/metadata/typography-international-deprecated.yml
@@ -1,12 +1,12 @@
-name: Typography (Int., Deprecated I)
+name: Typography (Internationalized, Deprecated)
 status: Deprecated
+hide: true
 examples:
   - id: heading-1
     name: Typography
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       

-        

         
Aliquet Mauris Eu

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

@@ -42,7 +42,6 @@ examples:
         
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-        

       

   - id: heading-1
     name: Heading
diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml
index 01eafa54769..0ccaa9be47f 100644
--- a/components/typography/metadata/typography-international.yml
+++ b/components/typography/metadata/typography-international.yml
@@ -1,12 +1,16 @@
 name: Typography (Internationalized)
+fastLoad: false
+description: Internationalized typography examples. Note that, for these examples to work correctly, your Typekit needs to include the appropriate Han fonts.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/
+status: Verified
+id: heading-han-m
 examples:
-  - id: heading-1
+  - id: heading-m
     name: Typography
     status: Verified
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       

-        

         
Aliquet Mauris Eu

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

@@ -22,152 +26,148 @@ examples:
         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
-        
Lorem Ipsum Dolor

+        
Lorem Ipsum Dolor

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

         
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

       

 
-  - id: heading-1
+  - id: heading-m
     name: Heading
     status: Verified
     description: Headings for typography.
     markup: |
       

-        
HeadingXXXL HeadingXXXL Emphasis Strong.

-        
HeadingXXL HeadingXXL Emphasis Strong.

-        
HeadingXL HeadingXL Emphasis Strong.

-        
HeadingL HeadingL Emphasis Strong.

-        
HeadingM HeadingM Emphasis Strong.

-        
HeadingS HeadingS Emphasis Strong.

-        
HeadingXS HeadingXS Emphasis Strong.

-        
HeadingXXS HeadingXXS Emphasis Strong.

+        
HeadingXXXL HeadingXXXL Emphasis Strong.

+        
HeadingXXL HeadingXXL Emphasis Strong.

+        
HeadingXL HeadingXL Emphasis Strong.

+        
HeadingL HeadingL Emphasis Strong.

+        
HeadingM HeadingM Emphasis Strong.

+        
HeadingS HeadingS Emphasis Strong.

+        
HeadingXS HeadingXS Emphasis Strong.

+        
HeadingXXS HeadingXXS Emphasis Strong.

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

-        
HeadingM Serif Emphasis Strong.

-        
HeadingS Serif Emphasis Strong.

-        
HeadingXS Serif Emphasis Strong.

-        
HeadingXXS Serif Emphasis Strong.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
 spectrum-Heading--serif

+        
HeadingM Serif Emphasis Strong.

+        
HeadingS Serif Emphasis Strong.

+        
HeadingXS Serif Emphasis Strong.

+        
HeadingXXS Serif Emphasis Strong.

       

 
       

-        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL 重点 見出しXL 強い強調.

-        
見出しL 見出しL 重点 見出しL 強い強調.

-        
見出しM 見出しM 重点 見出しM 強い強調.

-        
見出しS 見出しS 重点 見出しS 強い強調.

-        
見出しXS 見出しXS 重点 見出しXS 強い強調.

-        
見出しXXS 見出しXXS 重点 見出しXXS 強い強調.

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
見出しL 見出しL 重点 見出しL 強い強調.

+        
見出しM 見出しM 重点 見出しM 強い強調.

+        
見出しS 見出しS 重点 見出しS 強い強調.

+        
見出しXS 見出しXS 重点 見出しXS 強い強調.

+        
見出しXXS 見出しXXS 重点 見出しXXS 強い強調.

       

 
       

-        
XXXLالقسم XXXLالقسم  تشديد XXXLالقسم  تأكيد قو.

-        
XXLالقسم XXLالقسم  تشديد XXLالقسم  تأكيد قو.

-        
XLالقسم XLالقسم  تشديد XLالقسم  تأكيد قو.

-        
Lالقسم Lالقسم  تشديد Lالقسم  تأكيد قو.

-        
Mالقسم Mالقسم  تشديد Mالقسم  تأكيد قو.

-        
Sالقسم Sالقسم  تشديد Sالقسم  تأكيد قو.

-        
XSالقسم XSالقسم  تشديد XSالقسم  تأكيد قو.

-        
XSSالقسم XSSالقسم  تشديد XXSالقسم  تأكيد قو.

+        
XXXLالقسم XXXLالقسم  تشديد XXXLالقسم  تأكيد قو.

+        
XXLالقسم XXLالقسم  تشديد XXLالقسم  تأكيد قو.

+        
XLالقسم XLالقسم  تشديد XLالقسم  تأكيد قو.

+        
Lالقسم Lالقسم  تشديد Lالقسم  تأكيد قو.

+        
Mالقسم Mالقسم  تشديد Mالقسم  تأكيد قو.

+        
Sالقسم Sالقسم  تشديد Sالقسم  تأكيد قو.

+        
XSالقسم XSالقسم  تشديد XSالقسم  تأكيد قو.

+        
XSSالقسم XSSالقسم  تشديد XXSالقسم  تأكيد قو.

       

 
       

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

-        
Mדגש כותרת Mמאמר Mחזק.

-        
Sדגש כותרת Sמאמר Sחזק.

-        
XSדגש כותרת XSמאמר XSחזק.

-        
XXSדגש כותרת XXSמאמר XXSחזק.

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
Lדגש כותרת Lמאמר Lחזק.

+        
Mדגש כותרת Mמאמר Mחזק.

+        
Sדגש כותרת Sמאמר Sחזק.

+        
XSדגש כותרת XSמאמר XSחזק.

+        
XXSדגש כותרת XXSמאמר XXSחזק.

       

 
-  - id: heading-1
+  - id: heading-heavy-m
     name: Heading (Heavy)
     status: Verified
     description: Strong headings for typography.
     markup: |
       

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis heavy.

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
 spectrum-Heading--heavy

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif  Emphasis heavy.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
 spectrum-Heading--heavy spectrum-Heading--serif

       

 
       

-        
見出しXXXL 見出し XXXL  >見出しXXXL 強い強調.

-        
見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL  重点 見出しXL強い強調.

-        
見出しL 見出しL  重点 見出しL強い強調.

+        
見出しXXXL 見出し XXXL  >見出しXXXL 強い強調.

+        
見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL  重点 見出しXL強い強調.

+        
 spectrum-Heading--heavy

       

 
       

-        
القسمXXXL القسم XXXL  تشديد القسم 2XXXL تأكيد قو.

-        
القسمXXL القسم 1XXL  تشديد Emphasis القسم XXL تأكيد قو.

-        
القسمXLالقسم 1XL  تشديد القسم XL تأكيد قو.

-        
القسمL القسم L  تشديد القسم L تأكيد قو.

+        
القسمXXXL القسم XXXL  تشديد القسم 2XXXL تأكيد قو.

+        
القسمXXL القسم 1XXL  تشديد Emphasis القسم XXL تأكيد قو.

+        
القسمXLالقسم 1XL  تشديد القسم XL تأكيد قو.

+        
 spectrum-Heading--heavy

       

 
       

-        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

-        
XXLדגש כותרת XXLמאמר XXLחזק.

-        
XLדגש כותרת XLמאמר XLחזק.

-        
Lדגש כותרת Lמאמר Lחזק.

+        
XXXLדגש כותרת XXXLמאמר XXXLחזק.

+        
XXLדגש כותרת XXLמאמר XXLחזק.

+        
XLדגש כותרת XLמאמר XLחזק.

+        
 spectrum-Heading--heavy

       

 
-  - id: heading-1
+  - id: heading-light-m
     name: Heading (Light)
     status: Verified
     description: Light headings for typography.
     markup: |
       

-        
HeadingXXXL Emphasis Strong.

-        
HeadingXXL Emphasis Strong.

-        
HeadingXL Emphasis Strong.

-        
HeadingL Emphasis Strong.

+        
HeadingXXXL Emphasis Strong.

+        
HeadingXXL Emphasis Strong.

+        
HeadingXL Emphasis Strong.

+        
 spectrum-Heading--light

         

-        
HeadingXXXL Serif Emphasis Strong.

-        
HeadingXXL Serif Emphasis Strong.

-        
HeadingXL Serif Emphasis Strong.

-        
HeadingL Serif Emphasis Strong.

+        
HeadingXXXL Serif Emphasis Strong.

+        
HeadingXXL Serif Emphasis Strong.

+        
HeadingXL Serif Emphasis Strong.

+        
 spectrum-Heading--light spectrum-Heading--serif

       

 
       

-        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

-        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

-        
見出しXL 見出しXL 重点 見出しXL 強い強調.

-        
見出しL 見出しL 重点 見出しL 強い強調.

+        
見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

+        
見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

+        
見出しXL 見出しXL 重点 見出しXL 強い強調.

+        
 spectrum-Heading--light

       

 
       

-        
XXXLالقسم القسم XXXL  تشديد XXXLالقسم  تأكيد قو.

-        
XXLالقسم القسم XXL  تشديد XXLالقسم  تأكيد قو.

-        
XLالقسم القسم XL  تشديد XLالقسم  تأكيد قو.

-        
Lالقسم القسم L  تشديد Lالقسم  تأكيد قو.

+        
XXXLالقسم القسم XXXL  تشديد XXXLالقسم  تأكيد قو.

+        
XXLالقسم القسم XXL  تشديد XXLالقسم  تأكيد قو.

+        
XLالقسم القسم XL  تشديد XLالقسم  تأكيد قو.

+        
 spectrum-Heading--light

       

 
       

@@ -177,7 +177,7 @@ examples:
         
Lדגש כותרת Lמאמר Lחזק.

       

 
-  - id: heading-1
+  - id: body-m
     name: Body
     status: Verified
     description: Default body text sizes.
@@ -230,7 +230,7 @@ examples:
         
XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

       

 
-  - id: detail-1
+  - id: detail-m
     status: Verified
     name: Detail
     description: Subheadings for typography.
@@ -268,7 +268,7 @@ examples:
         
Sالقسم טקסט גוף הדגשות Sגוף חזק Sגוף חזק.

       

 
-  - id: heading-1
+  - id: heading-han-m
     name: Han
     status: Verified
     description: Typographic pairings for Adobe Clean Han.
@@ -292,7 +292,7 @@ examples:
         
見出しとよく対になる本文。

       

 
-  - id: code-1
+  - id: code-m
     name: Typography - Code
     status: Verified
     description: Typographic styles for computer code.
diff --git a/components/typography/metadata/typography-legacy.yml b/components/typography/metadata/typography-legacy.yml
new file mode 100644
index 00000000000..69bfc634dc4
--- /dev/null
+++ b/components/typography/metadata/typography-legacy.yml
@@ -0,0 +1,19 @@
+name: Typography (Legacy)
+description: Legacy typography components. The [new Typography components](typography.html) should be used instead.
+id: heading-display
+status: Deprecated
+hide: true
+examples:
+  - id: heading-display
+    name: Standard
+    markup: |
+      
Display (h1)

+      
Page Title (h2)

+      
Subtitle 1 (h2)

+      
Subtitle 2 (h3)

+      
Subtitle 3 (h4)

+      
Small Body Text

+      
Default Body Text

+      
Secondary Body Text

+      
 Body Text Italic

+      
Large Body Text

diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml
index f6c6fc2a342..db00bb1d1b2 100644
--- a/components/typography/metadata/typography.yml
+++ b/components/typography/metadata/typography.yml
@@ -1,182 +1,45 @@
-name: Typography (Deprecated I)
-description: 'English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples.'
-status: Deprecated
+name: Typography
+dnaStatus: Verified
+description: |
+  Spectrum Typography is broken out into several separate components.
+
+  In addition, the previous deprecated Typogaphy implementations ([legacy](typography-legacy.html), [depreacted](typography-deprecated.html)) are still shipped, but their usage is discouraged.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/
+examplesHeading: Components
 examples:
-  - id: heading-1
-    name: Standard
-    description: Typography elements paired to display clear content hierarchies.
-    markup: |
-      

-        

-        
Aliquet Mauris Eu

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Aliquet Mauris Eu

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-        
Lorem Ipsum Dolor

-        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

-        
Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-        

-      

-  - id: heading-1
+  - id: heading-m
     name: Heading
-    description: Headings for typography.
-    markup: |
-      

-        
Heading1 Heading1 Emphasis Heading1 Strong.

-        
Heading2 Heading2 Emphasis Heading2 Strong.

-        
Heading3 Heading3 Emphasis Heading3 Strong.

-        
Heading4 Heading4 Emphasis Heading4 Strong.

-        
Heading5 Heading5 Emphasis Heading5 Strong.

-        
Subheading Subheading Emphasis Subheading Strong.

-      

-      

-      

-        
Article Heading1 Emphasis Strong.

-        
Article Heading2 Emphasis Strong.

-        
Article Heading3 Emphasis Strong.

-        
Article Heading4 Emphasis Strong.

-        
Article Heading5 Emphasis Strong.

-      

-  - id: heading-1
-    name: Heading (Strong)
-    description: Strong headings for typography.
-    markup: |
-      

-        
Heading1 Heading1 Emphasis Heading1 Strong.

-        
Heading2 Heading2 Emphasis Heading2 Strong.

-      

-      

-      

-        
Article Heading1 Emphasis Strong.

-        
Article Heading2 Emphasis Strong.

-      

-  - id: heading-1
-    name: Heading (Quiet)
-    description: Quiet headings for typography.
-    markup: |
-      

-        
Heading1 Heading1 Emphasis Heading1 Strong.

-        
Heading2 Heading2 Emphasis Heading2 Strong.

-      

-      

-      

-        
Article Heading1 Emphasis Strong.

-        
Article Heading2 Emphasis Strong.

-      

-  - id: heading-1
-    name: Display
-    description: Display headings for typography.
-    markup: |
-      

-        
Heading1 Emphasis Strong.

-        
Heading2 Emphasis Strong.

-      

-      

-      

-        
Article Heading1 Emphasis Strong.

-        
Article Heading2 Emphasis Strong.

-      

-  - id: heading-1
-    name: Display (Strong)
-    description: Strong display headings for typography.
-    markup: |
-      

-        
Heading1 Emphasis Strong.

-        
Heading2 Emphasis Strong.

-      

-  - id: heading-1
-    name: Display (Quiet)
-    description: Quiet display headings for typography.
+    status: Verified
+    description: |
+      Heading is used to create various levels of typographic hierarchies.
+
+      [View the Heading typography component](typography-heading.html)
     markup: |
-      

-        
Heading1 Emphasis Strong.

-        
Heading2 Emphasis Strong.

-      

-      

-      

-        
Article Heading1 Emphasis Strong.

-        
Article Heading2 Emphasis Strong.

-      

-  - id: heading-1
+      
Hello world.

+  - id: body-m
     name: Body
-    description: Default body text sizes.
-    markup: |
-      

-        
Body1 Text Body1 Emphasis Body1 Strong.

-        
Body2 text Body2 Emphasis Body2 Strong.

-        
Body3 Text Body3 Emphasis Body3 Strong.

-        
Body4 Text Body4 Emphasis Body4 Strong.

-        
Body5 Text Body5 Emphasis Body5 Strong.

-        
Detail Text Detail Emphasis Detail Strong.

-      

-      

-      

-        
Article Body1 Text Article Body1 Emphasis Article Body1 Strong.

-        
Article Body2 text Article Body2 Emphasis Article Body2 Strong.

-        
Article Body3 Text Article Body3 Emphasis Article Body3 Strong.

-        
Article Body4 Text Article Body4 Emphasis Article Body4 Strong.

-        
Article Body5 Text Article Body5 Emphasis Article Body5 Strong.

-        
Detail Text Detail Emphasis Detail Strong.

-      

-  - id: heading-1
-    name: Article
-    description: Typography elements paired to display clear content hierarchies in long form articles.
-    markup: |
-      

-        
Heading 1

-        
Body copy that pairs with heading 1

-
-        
Heading 2

-        
Body copy that pairs with heading 2

-
-        
Heading 3

-        
Body copy that pairs with heading 3

+    status: Verified
+    description: |
+      Body is primarily used for Spectrum components and for blocks of text.
 
-        
Heading 4

-        
Body copy that pairs with heading 4

+      [View the Body typography component](typography-body.html)
+    markup: |
+      
Spectrum is based on real-world situations.

+  - id: detail-m
+    status: Verified
+    name: Detail
+    description: |
+      Detail is used for disclosing extra information or smaller items in hierarchical relationships of text.
 
-        
Heading 5

-        
Body copy that pairs with heading 5

-      

-  - id: heading-1
+      [View the Detail typography component](typography-detail.html)
+    markup: |
+      
Our recommendations

+  - id: code-m
     name: Typography - Code
-    description: Typographic styles for computer code.
+    status: Verified
+    description: |
+      Code is used for text that represents code.
+
+      [View the Code typography component](typography-code.html)
     markup: |
-      Code1 Text Strong
-      Code2 Text Strong
-      Code3 Text Strong
-      Code4 Text Strong
-      Code5 Text Strong
-      
Code3 Text Wrapped in:
-      pre tags for
-      multiline
-      goodness

+      alert("Hello world");
diff --git a/site/includes/nav.pug b/site/includes/nav.pug
index df4bc28f977..02c23415443 100644
--- a/site/includes/nav.pug
+++ b/site/includes/nav.pug
@@ -9,8 +9,12 @@
         a.spectrum-SideNav-itemLink(href='#') Components
         ul.spectrum-SideNav.spectrum-SideNav--multiLevel
           each component in nav
-            li.spectrum-SideNav-item(class=pageURL === component.href ? 'is-selected' : '')
-              a.spectrum-SideNav-itemLink.js-fastLoad(href=component.href)= component.name
+            unless component.hide
+              li.spectrum-SideNav-item(class=pageURL === component.href ? 'is-selected' : '')
+                a(class={
+                  'spectrum-SideNav-itemLink': true,
+                  'js-fastLoad': component.fastLoad != false
+                }, href=component.href)= component.name
 
   //- nav.spectrum-Site-bottomNav
   //-   ul.spectrum-SideNav
diff --git a/site/templates/siteComponent.pug b/site/templates/siteComponent.pug
index 4fb9f42426d..7abbd3bba96 100644
--- a/site/templates/siteComponent.pug
+++ b/site/templates/siteComponent.pug
@@ -131,8 +131,8 @@ html(lang='en-US').spectrum.spectrum--light.spectrum--medium
                 tr!= util.markdown.toHTML(component.details)
 
             div.spectrum-CSSComponent-resources
-              //-
-                a.spectrum-Card.spectrum-Card--small.spectrum-Card--horizontal(href=`${spectrumURL || 'https://spectrum.corp.adobe.com/'+pkg.name.split('/').pop()}` target="_blank")
+              if component.SpectrumSiteSlug
+                a.spectrum-Card.spectrum-Card--small.spectrum-Card--horizontal(href=`${component.SpectrumSiteSlug}` target="_blank")
                   .spectrum-Card-preview.spectrum-CSSComponent-resource--adobe
                     svg(class="spectrum-Icon spectrum-Icon--sizeL" viewBox="0 0 36 36" focusable="false" aria-hidden="true" aria-label="AdobeLogo")
                       path(d="M22.175 4H34v28L22.175 4zm-8.336 0H2v28L13.839 4zm4.165 10.317l7.538 17.682h-4.939l-2.258-5.632h-5.517l5.176-12.05z")
@@ -180,7 +180,7 @@ html(lang='en-US').spectrum.spectrum--light.spectrum--medium
             if examples.length
               header.spectrum-CSSComponent-sectionHeading(id="variants")
                 h4.spectrum-Heading3
-                  a(href="#variants").spectrum-BigSubtleLink Variants
+                  a(href="#variants").spectrum-BigSubtleLink=`${component.examplesHeading ? component.examplesHeading : 'Variants'}`
                 hr.spectrum-Rule.spectrum-Rule--large
               each example in examples
                 include ../includes/example.pug
diff --git a/tools/bundle-builder/docs/index.js b/tools/bundle-builder/docs/index.js
index bcc915b1cce..8163cb505b8 100644
--- a/tools/bundle-builder/docs/index.js
+++ b/tools/bundle-builder/docs/index.js
@@ -249,6 +249,8 @@ function buildSite_getData() {
     nav.push({
       name: componentData.name,
       component: componentName,
+      hide: componentData.hide,
+      fastLoad: componentData.fastLoad,
       href: fileName,
       description: componentData.description
     });