@instructure/ui-text 10.9.1-snapshot-4 → 10.10.0

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.9.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-snapshot-4) (2024-12-18)
+# [10.10.0](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.10.0) (2024-12-18)
 
-**Note:** Version bump only for package @instructure/ui-text
+
+### Features
+
+* **many:** add new Typography tokens and update text and heading ([a09fa0f](https://github.com/instructure/instructure-ui/commit/a09fa0f9ee3b92e8b20415e1d57f5f465526936c))
 
 
 

package/es/Text/__examples__/Text.examples.js

@@ -23,12 +23,12 @@
  */
 
 export default {
-  sectionProp: 'weight',
+  sectionProp: 'variant',
   maxExamplesPerPage: 50,
   maxExamples: 1000,
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
-      children: props.size && ['x-small', 'small', 'medium', 'large'].includes(props.size) ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco' : 'Lorem ipsum dolor sit amet, consectetur'
+      children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
     };
   },
   getExampleProps: props => {
@@ -38,12 +38,18 @@ export default {
       maxWidth: '25rem'
     };
   },
+  propValues: {
+    weight: [void 0],
+    lineHeight: [void 0],
+    size: [void 0],
+    fontStyle: [void 0]
+  },
   filter: props => {
     return (
       // Only generate a 1 variation for non-'primary' color
-      props.color !== 'primary' && (props.fontStyle !== 'normal' || props.letterSpacing !== 'normal' || props.lineHeight !== 'default' || props.size !== 'medium' || props.transform !== 'none' || props.weight !== 'normal' || props.wrap !== 'normal') ||
+      props.color !== 'primary' && (props.letterSpacing !== 'normal' || props.transform !== 'none' || props.wrap !== 'normal') ||
       // Only generate a 1 variation for non-'medium' size
-      props.size !== 'medium' && (props.fontStyle !== 'normal' || props.letterSpacing !== 'normal' || props.lineHeight !== 'default' || props.transform !== 'none' || props.weight !== 'normal' || props.wrap !== 'normal')
+      props.size !== 'medium' && (props.letterSpacing !== 'normal' || props.transform !== 'none' || props.wrap !== 'normal')
     );
   }
 };

package/es/Text/index.js

@@ -37,13 +37,29 @@ category: components
 ---
 **/
 let Text = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Text = class Text extends Component {
+  checkProps() {
+    const _this$props = this.props,
+      variant = _this$props.variant,
+      size = _this$props.size,
+      lineHeight = _this$props.lineHeight,
+      weight = _this$props.weight,
+      fontStyle = _this$props.fontStyle;
+    if (variant) {
+      if (size) {}
+      if (lineHeight) {}
+      if (weight) {}
+      if (fontStyle) {}
+    }
+  }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.checkProps();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.checkProps();
   }
   render() {
     var _this$props$styles;

package/es/Text/props.js

@@ -30,11 +30,12 @@ const propTypes = {
   elementRef: PropTypes.func,
   fontStyle: PropTypes.oneOf(['italic', 'normal']),
   letterSpacing: PropTypes.oneOf(['normal', 'condensed', 'expanded']),
-  lineHeight: PropTypes.oneOf(['default', 'fit', 'condensed', 'double']),
-  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
+  lineHeight: PropTypes.oneOf(['default', 'fit', 'condensed', 'double', 'lineHeight100', 'lineHeight125', 'lineHeight150']),
+  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'descriptionPage', 'descriptionSection', 'content', 'contentSmall', 'legend']),
   transform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
-  weight: PropTypes.oneOf(['normal', 'light', 'bold']),
+  variant: PropTypes.oneOf(['descriptionPage', 'descriptionSection', 'content', 'contentImportant', 'contentQuote', 'contentSmall', 'legend']),
+  weight: PropTypes.oneOf(['normal', 'light', 'bold', 'weightRegular', 'weightImportant']),
   wrap: PropTypes.oneOf(['normal', 'break-word'])
 };
-const allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'weight', 'wrap'];
+const allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'variant', 'weight', 'wrap'];
 export { propTypes, allowedProps };

package/es/Text/styles.js

@@ -40,7 +40,52 @@ const generateStyle = (componentTheme, props) => {
     transform = props.transform,
     lineHeight = props.lineHeight,
     letterSpacing = props.letterSpacing,
-    color = props.color;
+    color = props.color,
+    variant = props.variant;
+  const variants = {
+    descriptionPage: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.descriptionPage,
+      lineHeight: componentTheme.lineHeight150
+    },
+    descriptionSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.descriptionSection,
+      lineHeight: componentTheme.lineHeight150
+    },
+    content: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentImportant: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentQuote: {
+      fontStyle: 'italic',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentSmall: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.contentSmall,
+      lineHeight: componentTheme.lineHeight150
+    },
+    legend: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.legend,
+      lineHeight: componentTheme.lineHeight150
+    }
+  };
   const colorVariants = {
     primary: {
       color: componentTheme.primaryColor
@@ -81,6 +126,12 @@ const generateStyle = (componentTheme, props) => {
     },
     bold: {
       fontWeight: componentTheme.fontWeightBold
+    },
+    weightRegular: {
+      fontWeight: componentTheme.weightRegular
+    },
+    weightImportant: {
+      fontWeight: componentTheme.weightImportant
     }
   };
   const fontSizeVariants = {
@@ -89,7 +140,12 @@ const generateStyle = (componentTheme, props) => {
     medium: componentTheme.fontSizeMedium,
     large: componentTheme.fontSizeLarge,
     'x-large': componentTheme.fontSizeXLarge,
-    'xx-large': componentTheme.fontSizeXXLarge
+    'xx-large': componentTheme.fontSizeXXLarge,
+    descriptionPage: componentTheme.descriptionPage,
+    descriptionSection: componentTheme.descriptionSection,
+    content: componentTheme.content,
+    contentSmall: componentTheme.contentSmall,
+    legend: componentTheme.legend
   };
   const lineHeightVariants = {
     default: {
@@ -103,6 +159,15 @@ const generateStyle = (componentTheme, props) => {
     },
     double: {
       lineHeight: componentTheme.lineHeightDouble
+    },
+    lineHeight100: {
+      lineHeight: componentTheme.lineHeight100
+    },
+    lineHeight125: {
+      lineHeight: componentTheme.lineHeight125
+    },
+    lineHeight150: {
+      lineHeight: componentTheme.lineHeight150
     }
   };
   const letterSpacingVariants = {
@@ -110,22 +175,30 @@ const generateStyle = (componentTheme, props) => {
     condensed: componentTheme.letterSpacingCondensed,
     expanded: componentTheme.letterSpacingExpanded
   };
+  const calcTextStyles = () => {
+    if (variant) {
+      return variants[variant];
+    }
+    return {
+      ...(weight ? weightStyle[weight] : {}),
+      ...(fontStyle ? {
+        fontStyle: fontStyle
+      } : {}),
+      fontSize: fontSizeVariants[size],
+      ...(lineHeight ? lineHeightVariants[lineHeight] : {})
+    };
+  };
   const baseStyles = {
     '&:focus': {
       outline: 'none'
     },
     ...(color ? colorVariants[color] : {}),
     ...(wrap === 'break-word' ? wrapStyle : {}),
-    ...(weight ? weightStyle[weight] : {}),
-    ...(fontStyle ? {
-      fontStyle: fontStyle
-    } : {}),
-    fontSize: fontSizeVariants[size],
-    ...(lineHeight ? lineHeightVariants[lineHeight] : {}),
     letterSpacing: letterSpacingVariants[letterSpacing],
     ...(transform ? {
       textTransform: transform
-    } : {})
+    } : {}),
+    ...calcTextStyles()
   };
   const inputStyles = {
     ...baseStyles,

package/lib/Text/__examples__/Text.examples.js

@@ -28,12 +28,12 @@ exports.default = void 0;
  * SOFTWARE.
  */
 var _default = exports.default = {
-  sectionProp: 'weight',
+  sectionProp: 'variant',
   maxExamplesPerPage: 50,
   maxExamples: 1000,
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
-      children: props.size && ['x-small', 'small', 'medium', 'large'].includes(props.size) ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco' : 'Lorem ipsum dolor sit amet, consectetur'
+      children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
     };
   },
   getExampleProps: props => {
@@ -43,12 +43,18 @@ var _default = exports.default = {
       maxWidth: '25rem'
     };
   },
+  propValues: {
+    weight: [void 0],
+    lineHeight: [void 0],
+    size: [void 0],
+    fontStyle: [void 0]
+  },
   filter: props => {
     return (
       // Only generate a 1 variation for non-'primary' color
-      props.color !== 'primary' && (props.fontStyle !== 'normal' || props.letterSpacing !== 'normal' || props.lineHeight !== 'default' || props.size !== 'medium' || props.transform !== 'none' || props.weight !== 'normal' || props.wrap !== 'normal') ||
+      props.color !== 'primary' && (props.letterSpacing !== 'normal' || props.transform !== 'none' || props.wrap !== 'normal') ||
       // Only generate a 1 variation for non-'medium' size
-      props.size !== 'medium' && (props.fontStyle !== 'normal' || props.letterSpacing !== 'normal' || props.lineHeight !== 'default' || props.transform !== 'none' || props.weight !== 'normal' || props.wrap !== 'normal')
+      props.size !== 'medium' && (props.letterSpacing !== 'normal' || props.transform !== 'none' || props.wrap !== 'normal')
     );
   }
 };

package/lib/Text/index.js

@@ -43,13 +43,29 @@ category: components
 ---
 **/
 let Text = exports.Text = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Text = class Text extends _react.Component {
+  checkProps() {
+    const _this$props = this.props,
+      variant = _this$props.variant,
+      size = _this$props.size,
+      lineHeight = _this$props.lineHeight,
+      weight = _this$props.weight,
+      fontStyle = _this$props.fontStyle;
+    if (variant) {
+      if (size) {}
+      if (lineHeight) {}
+      if (weight) {}
+      if (fontStyle) {}
+    }
+  }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.checkProps();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.checkProps();
   }
   render() {
     var _this$props$styles;

package/lib/Text/props.js

@@ -37,10 +37,11 @@ const propTypes = exports.propTypes = {
   elementRef: _propTypes.default.func,
   fontStyle: _propTypes.default.oneOf(['italic', 'normal']),
   letterSpacing: _propTypes.default.oneOf(['normal', 'condensed', 'expanded']),
-  lineHeight: _propTypes.default.oneOf(['default', 'fit', 'condensed', 'double']),
-  size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
+  lineHeight: _propTypes.default.oneOf(['default', 'fit', 'condensed', 'double', 'lineHeight100', 'lineHeight125', 'lineHeight150']),
+  size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'descriptionPage', 'descriptionSection', 'content', 'contentSmall', 'legend']),
   transform: _propTypes.default.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
-  weight: _propTypes.default.oneOf(['normal', 'light', 'bold']),
+  variant: _propTypes.default.oneOf(['descriptionPage', 'descriptionSection', 'content', 'contentImportant', 'contentQuote', 'contentSmall', 'legend']),
+  weight: _propTypes.default.oneOf(['normal', 'light', 'bold', 'weightRegular', 'weightImportant']),
   wrap: _propTypes.default.oneOf(['normal', 'break-word'])
 };
-const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'weight', 'wrap'];
+const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'variant', 'weight', 'wrap'];

package/lib/Text/styles.js

@@ -46,7 +46,52 @@ const generateStyle = (componentTheme, props) => {
     transform = props.transform,
     lineHeight = props.lineHeight,
     letterSpacing = props.letterSpacing,
-    color = props.color;
+    color = props.color,
+    variant = props.variant;
+  const variants = {
+    descriptionPage: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.descriptionPage,
+      lineHeight: componentTheme.lineHeight150
+    },
+    descriptionSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.descriptionSection,
+      lineHeight: componentTheme.lineHeight150
+    },
+    content: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentImportant: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentQuote: {
+      fontStyle: 'italic',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentSmall: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.contentSmall,
+      lineHeight: componentTheme.lineHeight150
+    },
+    legend: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.legend,
+      lineHeight: componentTheme.lineHeight150
+    }
+  };
   const colorVariants = {
     primary: {
       color: componentTheme.primaryColor
@@ -87,6 +132,12 @@ const generateStyle = (componentTheme, props) => {
     },
     bold: {
       fontWeight: componentTheme.fontWeightBold
+    },
+    weightRegular: {
+      fontWeight: componentTheme.weightRegular
+    },
+    weightImportant: {
+      fontWeight: componentTheme.weightImportant
     }
   };
   const fontSizeVariants = {
@@ -95,7 +146,12 @@ const generateStyle = (componentTheme, props) => {
     medium: componentTheme.fontSizeMedium,
     large: componentTheme.fontSizeLarge,
     'x-large': componentTheme.fontSizeXLarge,
-    'xx-large': componentTheme.fontSizeXXLarge
+    'xx-large': componentTheme.fontSizeXXLarge,
+    descriptionPage: componentTheme.descriptionPage,
+    descriptionSection: componentTheme.descriptionSection,
+    content: componentTheme.content,
+    contentSmall: componentTheme.contentSmall,
+    legend: componentTheme.legend
   };
   const lineHeightVariants = {
     default: {
@@ -109,6 +165,15 @@ const generateStyle = (componentTheme, props) => {
     },
     double: {
       lineHeight: componentTheme.lineHeightDouble
+    },
+    lineHeight100: {
+      lineHeight: componentTheme.lineHeight100
+    },
+    lineHeight125: {
+      lineHeight: componentTheme.lineHeight125
+    },
+    lineHeight150: {
+      lineHeight: componentTheme.lineHeight150
     }
   };
   const letterSpacingVariants = {
@@ -116,22 +181,30 @@ const generateStyle = (componentTheme, props) => {
     condensed: componentTheme.letterSpacingCondensed,
     expanded: componentTheme.letterSpacingExpanded
   };
+  const calcTextStyles = () => {
+    if (variant) {
+      return variants[variant];
+    }
+    return {
+      ...(weight ? weightStyle[weight] : {}),
+      ...(fontStyle ? {
+        fontStyle: fontStyle
+      } : {}),
+      fontSize: fontSizeVariants[size],
+      ...(lineHeight ? lineHeightVariants[lineHeight] : {})
+    };
+  };
   const baseStyles = {
     '&:focus': {
       outline: 'none'
     },
     ...(color ? colorVariants[color] : {}),
     ...(wrap === 'break-word' ? wrapStyle : {}),
-    ...(weight ? weightStyle[weight] : {}),
-    ...(fontStyle ? {
-      fontStyle: fontStyle
-    } : {}),
-    fontSize: fontSizeVariants[size],
-    ...(lineHeight ? lineHeightVariants[lineHeight] : {}),
     letterSpacing: letterSpacingVariants[letterSpacing],
     ...(transform ? {
       textTransform: transform
-    } : {})
+    } : {}),
+    ...calcTextStyles()
   };
   const inputStyles = {
     ...baseStyles,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text",
-  "version": "10.9.1-snapshot-4",
+  "version": "10.10.0",
   "description": "A component for styling textual content",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,18 +24,18 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.9.1-snapshot-4",
-    "@instructure/emotion": "10.9.1-snapshot-4",
-    "@instructure/shared-types": "10.9.1-snapshot-4",
-    "@instructure/ui-color-utils": "10.9.1-snapshot-4",
-    "@instructure/ui-react-utils": "10.9.1-snapshot-4",
+    "@instructure/console": "10.10.0",
+    "@instructure/emotion": "10.10.0",
+    "@instructure/shared-types": "10.10.0",
+    "@instructure/ui-color-utils": "10.10.0",
+    "@instructure/ui-react-utils": "10.10.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.9.1-snapshot-4",
-    "@instructure/ui-babel-preset": "10.9.1-snapshot-4",
-    "@instructure/ui-test-utils": "10.9.1-snapshot-4",
-    "@instructure/ui-themes": "10.9.1-snapshot-4",
+    "@instructure/ui-axe-check": "10.10.0",
+    "@instructure/ui-babel-preset": "10.10.0",
+    "@instructure/ui-test-utils": "10.10.0",
+    "@instructure/ui-themes": "10.10.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1"
   },

package/src/Text/README.md

@@ -4,6 +4,28 @@ describes: Text
 
 A component for styling textual content
 
+## Variant
+
+Variant takes care of - almost - all use-cases when it comes to texts on pages. Their name reflects the places they meant to be used. It sets `size`, `weight`, `fontStyle` and `lineHeight`
+We recommend using `variants` instead of the aforementioned props.
+
+NOTE: when `variant` is set, `size`, `weight`, `fontStyle` and `lineHeight` props are ignored
+
+```js
+---
+type: example
+---
+<div>
+  <Text variant="descriptionPage"> descriptionPage </Text><br/>
+  <Text variant="descriptionSection"> descriptionSection </Text><br/>
+  <Text variant="content"> content </Text><br/>
+  <Text variant="contentImportant"> contentImportant </Text><br/>
+  <Text variant="contentQuote"> contentQuote </Text><br/>
+  <Text variant="contentSmall"> contentSmall </Text><br/>
+  <Text variant="legend"> legend </Text><br/>
+</div>
+```
+
 ### Font sizes
 
 ```js
@@ -11,12 +33,11 @@ A component for styling textual content
 type: example
 ---
 <div>
-  <Text size="x-small">I&#39;m extra small</Text><br/>
-  <Text size="small">I&#39;m small</Text><br/>
-  <Text>I&#39;m medium</Text><br/>
-  <Text size="large">I&#39;m large</Text><br/>
-  <Text size="x-large">I&#39;m extra large</Text><br/>
-  <Text size="xx-large">I&#39;m extra extra large</Text>
+  <Text size='descriptionPage'>descriptionPage</Text><br/>
+  <Text size='descriptionSection'>descriptionSection</Text><br/>
+  <Text size='content'>content</Text><br/>
+  <Text size='contentSmall'>contentSmall</Text><br/>
+  <Text size='legend'>legend</Text>
 </div>
 ```
 
@@ -27,9 +48,8 @@ type: example
 type: example
 ---
 <div>
-  <Text weight="light">I&#39;m light text</Text><br/>
-  <Text>I&#39;m normal text</Text><br/>
-  <Text weight="bold">I&#39;m bold text</Text>
+  <Text weight="weightRegular">weightRegular</Text><br/>
+  <Text weight="weightImportant">weightImportant</Text>
 </div>
 ```
 
@@ -52,16 +72,14 @@ type: example
 type: example
 ---
 <div>
-  <Text lineHeight="fit">
+  <br/><br/>
+  <Text lineHeight="lineHeight100">
     <p>{lorem.paragraph()}</p>
   </Text>
-  <Text>
+  <Text lineHeight="lineHeight125">
     <p>{lorem.paragraph()}</p>
   </Text>
-  <Text lineHeight="condensed">
-    <p>{lorem.paragraph()}</p>
-  </Text>
-  <Text lineHeight="double">
+  <Text lineHeight="lineHeight150">
     <p>{lorem.paragraph()}</p>
   </Text>
 </div>
@@ -158,3 +176,29 @@ type: example
   This<sup>is</sup> some<sub>text</sub>.
 </Text>
 ```
+
+### DEPRECATED legacy values
+
+Multiple values from `size`, `weight` and `lineHeight` are deprecated, but still supported for backward compatibility reasons. Please only use the above listed, semantic values.
+
+Deprecated `size` values:
+
+- x-small
+- small
+- medium
+- large
+- x-large
+- xx-large
+
+Deprecated `weight` values:
+
+- normal
+- light
+- bold
+
+Deprecated `lineHeight` values:
+
+- default
+- fit
+- condensed
+- double

package/src/Text/__examples__/Text.examples.ts

@@ -26,16 +26,13 @@ import type { StoryConfig } from '@instructure/ui-test-utils'
 import type { TextProps } from '../props'
 
 export default {
-  sectionProp: 'weight',
+  sectionProp: 'variant',
   maxExamplesPerPage: 50,
   maxExamples: 1000,
-  getComponentProps: (props) => {
+  getComponentProps: () => {
     return {
       children:
-        props.size &&
-        ['x-small', 'small', 'medium', 'large'].includes(props.size)
-          ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
-          : 'Lorem ipsum dolor sit amet, consectetur'
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
     }
   },
   getExampleProps: (props) => {
@@ -46,24 +43,23 @@ export default {
       maxWidth: '25rem'
     }
   },
+  propValues: {
+    weight: [undefined],
+    lineHeight: [undefined],
+    size: [undefined],
+    fontStyle: [undefined]
+  },
   filter: (props) => {
     return (
       // Only generate a 1 variation for non-'primary' color
       (props.color !== 'primary' &&
-        (props.fontStyle !== 'normal' ||
-          props.letterSpacing !== 'normal' ||
-          props.lineHeight !== 'default' ||
-          props.size !== 'medium' ||
+        (props.letterSpacing !== 'normal' ||
           props.transform !== 'none' ||
-          props.weight !== 'normal' ||
           props.wrap !== 'normal')) ||
       // Only generate a 1 variation for non-'medium' size
       (props.size !== 'medium' &&
-        (props.fontStyle !== 'normal' ||
-          props.letterSpacing !== 'normal' ||
-          props.lineHeight !== 'default' ||
+        (props.letterSpacing !== 'normal' ||
           props.transform !== 'none' ||
-          props.weight !== 'normal' ||
           props.wrap !== 'normal'))
     )
   }