@utilitywarehouse/hearth-react-native 0.20.0 → 0.22.0

package/src/components/Grid/Grid.docs.mdx

@@ -2,6 +2,7 @@ import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/bl
 import { BodyText, Box, Center, Grid } from '../..';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Grid.stories';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 <Meta title="Primitives / Grid" />
 
@@ -26,17 +27,17 @@ The Grid component helps you create responsive grid layouts with configurable co
 <UsageWrap>
   <Center>
     <Grid columns={2} spacing="md" width={300}>
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
@@ -44,20 +45,21 @@ The Grid component helps you create responsive grid layouts with configurable co
 
 ```jsx
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid columns={2} spacing="md" width={300}>
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );
@@ -79,17 +81,17 @@ The Grid component supports responsive column layouts based on screen size break
       spacing="md"
       width="100%"
     >
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
@@ -97,6 +99,7 @@ The Grid component supports responsive column layouts based on screen size break
 
 ```jsx
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid
@@ -109,17 +112,17 @@ const MyComponent = () => (
     spacing="md"
     width="100%"
   >
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );
@@ -132,38 +135,39 @@ You can specify different horizontal and vertical spacing:
 <UsageWrap>
   <Center>
     <Grid columns={2} columnGap={24} rowGap={16}>
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
 </UsageWrap>
 
 ```jsx
-import { Grid, Box } from '@utilitywarehouse/hearth-react-native';
+import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid columns={2} columnGap={24} rowGap={8}>
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );

package/src/components/Heading/Heading.props.ts

@@ -1,22 +1,8 @@
-import type { Ref } from 'react';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
+import type { CommonTextProps } from '../../types';
 
-interface HeadingProps extends TextProps {
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  strikeThrough?: boolean;
-  underline?: boolean;
-  truncated?: boolean;
-  color?: ColorValue;
-  textTransform?: TextStyle['textTransform'];
-  textAlign?: TextStyle['textAlign'];
-  textAlignVertical?: TextStyle['textAlignVertical'];
-  textDecorationLine?: TextStyle['textDecorationLine'];
-  textDecorationStyle?: TextStyle['textDecorationStyle'];
-  textDecorationColor?: ColorValue;
-  userSelect?: TextStyle['userSelect'];
-  inverted?: boolean;
-  ref?: Ref<Text>;
+interface HeadingProps extends CommonTextProps {
+  /** Heading size variant. */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
 export default HeadingProps;

package/src/components/Heading/Heading.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { Heading } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { coloursAsArray } from '../../utils';
+import { textColorKeys } from '../../utils/coloursAsArray';
 import { Box } from '../Box';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -35,7 +36,7 @@ const meta = {
       description: 'Strike through the text.',
     },
     color: {
-      options: coloursAsArray(),
+      options: textColorKeys,
       control: 'select',
       description: 'Color of the text. Use the color name from the theme.',
     },

package/src/components/Heading/Heading.tsx

@@ -1,9 +1,7 @@
-import { useMemo } from 'react';
 import { Text, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import type { ColorValue } from '../../types';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 import type HeadingProps from './Heading.props';
 
 const Heading = ({
@@ -23,26 +21,19 @@ const Heading = ({
   inverted,
   ...props
 }: HeadingProps) => {
+  // Extract margin utility props from remaining props
+  const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
+
   styles.useVariants({
     size,
     underline,
     strikeThrough,
     inverted,
   });
-  const { color: themeColor, colorMode } = useTheme();
-  const colorValue: ColorValue = useMemo(
-    () => getFlattenedColorValue(color, themeColor),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]
-  );
-  const decorationColor = useMemo(
-    () => getFlattenedColorValue(textDecorationColor, themeColor),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]
-  );
+
   return (
     <Text
-      {...props}
+      {...remainingProps}
       {...(truncated
         ? {
             numberOfLines: 1,
@@ -51,16 +42,16 @@ const Heading = ({
         : {})}
       style={[
         styles.text,
+        utilityStyles,
         {
-          ...(colorValue ? { color: colorValue } : {}),
           ...(textTransform ? { textTransform } : {}),
           ...(textAlign ? { textAlign } : {}),
           ...(textAlignVertical ? { textAlignVertical } : {}),
-          ...(decorationColor && { textDecorationColor: decorationColor }),
           ...(textDecorationLine && { textDecorationLine }),
           ...(textDecorationStyle && { textDecorationStyle }),
           ...(userSelect && { userSelect }),
         },
+        styles.getColours(color, textDecorationColor),
         props.style,
       ]}
     >
@@ -147,6 +138,23 @@ const styles = StyleSheet.create(theme => ({
             lg: theme.typography.desktop.heading.xl.lineHeight,
           },
         },
+        '2xl': {
+          fontSize: {
+            base: theme.typography.mobile.heading['2xl'].fontSize,
+            md: theme.typography.tablet.heading['2xl'].fontSize,
+            lg: theme.typography.desktop.heading['2xl'].fontSize,
+          },
+          fontWeight: {
+            base: theme.typography.mobile.heading['2xl'].fontWeight,
+            md: theme.typography.tablet.heading['2xl'].fontWeight,
+            lg: theme.typography.desktop.heading['2xl'].fontWeight,
+          },
+          lineHeight: {
+            base: theme.typography.mobile.heading['2xl'].lineHeight,
+            md: theme.typography.tablet.heading['2xl'].lineHeight,
+            lg: theme.typography.desktop.heading['2xl'].lineHeight,
+          },
+        },
       },
       underline: {
         true: {
@@ -165,6 +173,20 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
+  getColours: (color?: string, textDecorationColor?: string) => ({
+    ...(color
+      ? {
+          color: resolveThemeValueWithFallback(
+            color,
+            theme.helpers.semanticColor.text,
+            theme.color
+          ),
+        }
+      : {}),
+    ...(textDecorationColor
+      ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+      : {}),
+  }),
 }));
 
 export default Heading;

package/src/components/Modal/Modal.tsx

@@ -254,7 +254,7 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          {!stickyFooter && !noButtons ? footer : null}
+          {(!stickyFooter || inNavModal) && !noButtons ? footer : null}
         </View>
       )}
     </>

package/src/components/Radio/Radio.docs.mdx

@@ -100,6 +100,7 @@ const MyComponent = () => {
 | `label`              | `string`                            | -           | The label to be displayed next to the radio.                                                         |
 | `helperText`         | `string`                            | -           | The helper text to be displayed below the radio.                                                     |
 | `helperIcon`         | `React.ComponentType`               | -           | The icon to be displayed next to the helper text.                                                    |
+| `badge`              | `ReactNode`                         | -           | The badge to be displayed below the helper text.                                                     |
 | `invalidText`        | `string`                            | -           | The invalid text to be displayed below the radio.                                                    |
 | `validText`          | `string`                            | -           | The valid text to be displayed below the radio.                                                      |
 | `showValidationIcon` | `boolean`                           | `true`      | Whether to show the validation icon.                                                                 |

package/src/components/Radio/Radio.props.ts

@@ -14,6 +14,7 @@ interface RadioWithChildrenProps extends RadioBaseProps {
   label?: never;
   helperText?: never;
   helperIcon?: never;
+  badge?: never;
   invalidText?: never;
   validText?: never;
   showValidationIcon?: never;
@@ -25,6 +26,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
   label?: string;
   helperText?: string;
   helperIcon?: ComponentType;
+  badge?: ReactNode;
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;

package/src/components/Radio/Radio.stories.tsx

@@ -5,6 +5,7 @@ import { Radio, RadioGroup, RadioImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
+import { Badge } from '../Badge';
 import { Flex } from '../Flex';
 import { FormField } from '../FormField';
 
@@ -136,6 +137,27 @@ export const WithImage: Story = {
   ),
 };
 
+export const WithBadge: Story = {
+  args: {
+    value: 'Option 1',
+    label: 'Label',
+    helperText: 'Helper text',
+  },
+  render: args => (
+    <RadioGroup>
+      <Radio
+        aria-label="Label 1"
+        onChange={(checked: boolean) => {
+          console.log(checked, '###');
+        }}
+        nativeID="Radio-1"
+        badge={<Badge>New</Badge>}
+        {...args}
+      />
+    </RadioGroup>
+  ),
+};
+
 export const Variants: Story = {
   parameters: {
     controls: { exclude: ['value', 'label', 'disabled'] },

package/src/components/Radio/Radio.tsx

@@ -36,6 +36,7 @@ const Radio = ({
   disabled,
   helperIcon,
   helperText,
+  badge,
   invalidText,
   validText,
   validationStatus: validation,
@@ -60,6 +61,7 @@ const Radio = ({
       <RadioTextContent>
         {!!label && <RadioLabel>{label}</RadioLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}
+        {badge ? badge : null}
         {validationStatus === 'invalid' && !!invalidText && (
           <Helper
             showIcon={showValidationIcon}

package/src/components/Radio/RadioTile.figma.tsx

@@ -9,6 +9,9 @@ figma.connect(
       helperText: figma.boolean('Helper text?', {
         true: figma.string('Helper text'),
       }),
+      badge: figma.boolean('Badge?', {
+        true: figma.children('Badge'),
+      }),
       label: figma.string('Label'),
       image: figma.boolean('Image?', {
         true: figma.instance('Radio Image'),
@@ -24,6 +27,7 @@ figma.connect(
       <RadioTile
         label={props.label}
         helperText={props.helperText}
+        badge={props.badge}
         image={props.image}
         checked={props.checked}
         disabled={props.indicator.disabled}

package/src/components/Toast/ToastItem.figma.tsx

@@ -1,13 +1,6 @@
 import figma from '@figma/code-connect';
 import ToastItem from './ToastItem';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
 
 figma.connect(ToastItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7072%3A913', {
   props: {
@@ -18,5 +11,5 @@ figma.connect(ToastItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?no
     // "icon24": figma.instance('Icon-24'),
     // "dismiss": figma.boolean('Dismiss?')
   },
-  example: props => <ToastItem toast={null} onClose={null} />,
+  example: props => <ToastItem  />,
 });

package/src/core/themes.ts

@@ -306,9 +306,18 @@ export const lightTheme = {
     white: '#ffffff',
     black: '#000000',
   } as const,
+
   components: components.light,
   ...shared,
-  helpers: lightHelpers,
+  helpers: {
+    ...lightHelpers /** Simplified semantic color tokens grouped by category */,
+    semanticColor: {
+      background: light.background,
+      border: light.border,
+      text: light.text,
+      icon: light.icon,
+    },
+  },
 } as const;
 
 const darkHelpers = {
@@ -364,7 +373,15 @@ export const darkTheme = {
   },
   components: components.dark,
   ...shared,
-  helpers: darkHelpers,
+  helpers: {
+    ...darkHelpers /** Simplified semantic color tokens grouped by category */,
+    semanticColor: {
+      background: dark.background,
+      border: dark.border,
+      text: dark.text,
+      icon: dark.icon,
+    },
+  },
 } as const;
 
 export const themes = {

package/src/hooks/useStyleProps.ts

@@ -1,6 +1,14 @@
 import { useMemo } from 'react';
 import { ViewStyle } from 'react-native';
-import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import {
+  propStyleMapping,
+  resolveThemeKey,
+  resolveThemeValueWithFallback,
+  semanticPropMapping,
+  themeStyleFallbackMapping,
+  themeStyleMapping,
+  viewStyleProps,
+} from '../utils';
 import useTheme from './useTheme';
 
 /**
@@ -28,8 +36,23 @@ export const useStyleProps = (props: Record<string, any>): StylePropsResult => {
     Object.entries(props).forEach(([propName, propValue]) => {
       if (propValue === undefined) return;
 
+      // Check for semantic prop mappings first (e.g., iconColor, color)
+      const semanticMapping = semanticPropMapping[propName];
+      if (semanticMapping) {
+        const { styleProp, themeKey } = semanticMapping;
+        const themeMapping = resolveThemeKey(theme, themeKey);
+        const fallbackKey = themeStyleFallbackMapping[themeKey];
+        const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
+
+        computedStyles[styleProp] = resolveThemeValueWithFallback(
+          propValue,
+          themeMapping,
+          fallbackMapping
+        );
+        return;
+      }
+
       let stylePropName: keyof ViewStyle | undefined;
-      let themeKey: keyof typeof theme | undefined;
 
       // Handle shorthand props
       if (propStyleMapping[propName]) {
@@ -42,10 +65,22 @@ export const useStyleProps = (props: Record<string, any>): StylePropsResult => {
 
       if (stylePropName) {
         // Resolve theme value if needed
-        themeKey = themeStyleMapping[stylePropName] as keyof typeof theme;
+        const themeKey = themeStyleMapping[stylePropName as string];
+
+        if (themeKey) {
+          const themeObj = resolveThemeKey(theme, themeKey);
+          const fallbackKey = themeStyleFallbackMapping[themeKey];
+          const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
 
-        if (themeKey && theme[themeKey]) {
-          computedStyles[stylePropName] = resolveThemeValue(propValue, theme[themeKey]);
+          if (themeObj) {
+            computedStyles[stylePropName] = resolveThemeValueWithFallback(
+              propValue,
+              themeObj,
+              fallbackMapping
+            );
+          } else {
+            computedStyles[stylePropName] = propValue;
+          }
         } else {
           computedStyles[stylePropName] = propValue;
         }

package/src/tokens/color.ts

@@ -232,6 +232,7 @@ export const yellow = {
 export const light = {
   background: {
     brand: '#7a42c8',
+    loading: '#f1efe4',
     primary: '#fcfbf2',
     secondary: '#ffffff',
   },
@@ -480,6 +481,7 @@ export const light = {
 export const dark = {
   background: {
     brand: '#7a42c8',
+    loading: '#30302c',
     primary: '#191917',
     secondary: '#232323',
   },

package/src/tokens/components/dark/modal.ts

@@ -9,8 +9,14 @@ export default {
   borderRadius: 16,
   content: {
     gap: 12,
+    mobile: {
+      paddingBottom: 16,
+    },
   },
   gap: 24,
+  handle: {
+    paddingBottom: 16,
+  },
   heading: {
     gap: 24,
   },

package/src/tokens/components/dark/navigation.ts

@@ -7,6 +7,7 @@ export default {
     borderRadiusNone: 0,
     borderRadiusRounded: 4,
   },
+  borderBottom: '#5c2ca9',
   borderRadius: 6,
   desktop: {
     height: 88,

package/src/tokens/components/light/modal.ts

@@ -9,8 +9,14 @@ export default {
   borderRadius: 16,
   content: {
     gap: 12,
+    mobile: {
+      paddingBottom: 16,
+    },
   },
   gap: 24,
+  handle: {
+    paddingBottom: 16,
+  },
   heading: {
     gap: 24,
   },

package/src/tokens/components/light/navigation.ts

@@ -7,6 +7,7 @@ export default {
     borderRadiusNone: 0,
     borderRadiusRounded: 4,
   },
+  borderBottom: '#5c2ca9',
   borderRadius: 6,
   desktop: {
     height: 88,

package/src/tokens/components/light/skeleton.ts

@@ -3,5 +3,5 @@
  */
 
 export default {
-  loadingColor: '#f7f6eb',
+  loadingColor: '#f1efe4',
 } as const;

package/src/tokens/font.ts

@@ -19,7 +19,9 @@ export default {
     '400': 30,
     '500': 36,
     '550': 40,
+    '575': 44,
     '600': 48,
+    '650': 54,
     '700': 60,
     '800': 72,
     '900': 96,

package/src/tokens/line-height.ts

@@ -15,7 +15,9 @@ export default {
   '800': 36,
   '900': 40,
   '950': 48,
+  '975': 52,
   '1000': 56,
+  '1050': 62,
   '1100': 72,
   '1200': 90,
 } as const;