Unverified Commit e27bdf3b authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

Chore: Label heading, text components with design token sizes (#1733)

Non-breaking change that updates human-friendly name and readme.md with improved docs.

Closes #1661
parent 2a78bcbe
Pipeline #218481 passed with stages
in 8 minutes and 55 seconds
### 1.1.0
* Changes of name of variants to reflect connection to design tokens.
* https://github.com/visual-framework/vf-core/issues/1661
### 1.0.1
* changes any `set-` style functions to cleaner version
......
......@@ -4,6 +4,14 @@
## About
For basic heading formatting and sizes.
## Usage
The `vf-heading` component leverages [the design token typography sizes](https://stable.visual-framework.dev/design-tokens/typography/).
This component provides a utility-like functionality and you'll rarely need to directly use this component. When coding a component's Sass, it will typically be better to use the mixins (`@include set-type(text-heading--1);`) than these `vf-heading` classes.
## Install
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-heading` with this command.
......
......@@ -6,28 +6,28 @@ context:
variants:
- name: default
hidden: true
- name: display
- name: 1-display
context:
type: 1
heading: This heading size is extra large and inverted
style: invert
tags: h1
- name: extra-large
- name: 2-extra-large
context:
type: 2
heading: This heading size is extra large
tags: h1
- name: large
- name: 3-large
context:
type: 3
heading: This heading size is large
tags: h2
- name: regular
- name: 4-regular
context:
type: 4
heading: This heading size is regular
tags: h3
- name: small
- name: 5-small
context:
type: 5
heading: This heading size is small
......
### 1.1.0
* Changes of name of variants to reflect connection to design tokens.
* https://github.com/visual-framework/vf-core/issues/1661
### 1.0.1
* Add notes to README.md
......
......@@ -6,6 +6,12 @@
For basic text formatting and sizes.
## Usage
The `vf-text` component leverages [the design token typography sizes](https://stable.visual-framework.dev/design-tokens/typography/).
This component provides a utility-like functionality and you'll rarely need to directly use this component. When coding a component's Sass, it will typically be better to use the mixins (`@include set-type(text-body--6);`) than these `vf-text` classes.
## Install
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-text` with this command.
......
......@@ -6,23 +6,23 @@ context:
variants:
- name: default
hidden: true
- name: extra-large
- name: 1-extra-large
context:
text: This text is extra large
type: 1
- name: large
- name: 2-large
context:
text: This text is large
type: 2
- name: regular
- name: 3-regular
context:
text: This text is regular
type: 3
- name: small
- name: 4-small
context:
text: This text is small
type: 4
- name: extra-small
- name: 5-extra-small
context:
text: This text is extra small
type: 5
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment