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

components/vf-heading/CHANGELOG.md

+### 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

components/vf-heading/README.md

@@ -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.

components/vf-heading/vf-heading.config.yml

@@ -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

components/vf-text/CHANGELOG.md

+### 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

components/vf-text/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.

components/vf-text/vf-text.config.yml

@@ -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