@ornikar/bumper 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

package/src/system/content/typography/Typography.features.stories.tsx

@@ -83,7 +83,7 @@ export const LabelVariants: Story = {
 export const ContentCapsVariants: Story = {
   render: () => (
     <VStack gap="$space.16">
-      <Typography.Text variant="content-caps-3xl">CONTENT CAPS 3XL</Typography.Text>
+      <Typography.Text variant="content-caps-3xl">content caps 3xl</Typography.Text>
       <Typography.Text variant="content-caps-2xl">CONTENT CAPS 2XL</Typography.Text>
       <Typography.Text variant="content-caps-xl">CONTENT CAPS XL</Typography.Text>
       <Typography.Text variant="content-caps-l">CONTENT CAPS L</Typography.Text>

package/src/system/content/typography/Typography.tsx

@@ -1,13 +1,9 @@
 import type { ColorTokens, GetProps, GetThemeValueForKey, TamaguiComponent } from '@tamagui/core';
 import { Text, styled } from '@tamagui/core';
 import { type Except } from 'type-fest';
-import type {
-  BodyFontVariants,
-  ContentCapsVariants,
-  FontVariants,
-  HeadingFontVariants,
-  LabelFontVariants,
-} from '../../core/tokens/fonts';
+import type { BodyFontVariants, HeadingFontVariants, LabelFontVariants } from '../../core/tokens/GTStandardFont';
+import { CONTENT_CAPS_VARIANTS, type ContentCapsVariants } from '../../core/tokens/GTStandardNarrowFont';
+import type { FontVariants } from '../../core/tokens/fonts';
 import type { TamaguiMediaProps } from '../../types';
 import { getVariantAndWeightValues } from './utils/getVariantAndWeightValues';
 import {
@@ -30,8 +26,11 @@ const InternalTypography = styled(Text, {
   variants: {
     variant: (variant: FontVariants | undefined) => {
       if (!variant) return {};
+      const isContentCapsVariant = (CONTENT_CAPS_VARIANTS as readonly string[]).includes(variant);
 
       return {
+        fontFamily: isContentCapsVariant ? '$GTStandardNarrow' : '$GTStandard',
+        textTransform: isContentCapsVariant ? 'uppercase' : undefined,
         fontSize: `$${variant}`,
         lineHeight: `$${variant}`,
         letterSpacing: `$${variant}`,

package/src/system/content/typography/__snapshots__/Typography.features.stories.tsx.snap

@@ -201,23 +201,25 @@ exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
     <Text
       style={
         {
-          "fontFamily": "GTStandardBold",
+          "fontFamily": "GTStandardNarrowBold",
           "fontSize": 40,
           "letterSpacing": 0,
           "lineHeight": 40,
+          "textTransform": "uppercase",
         }
       }
       suppressHighlighting={true}
     >
-      CONTENT CAPS 3XL
+      content caps 3xl
     </Text>
     <Text
       style={
         {
-          "fontFamily": "GTStandardBold",
+          "fontFamily": "GTStandardNarrowBold",
           "fontSize": 32,
           "letterSpacing": 0,
           "lineHeight": 40,
+          "textTransform": "uppercase",
         }
       }
       suppressHighlighting={true}
@@ -227,10 +229,11 @@ exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
     <Text
       style={
         {
-          "fontFamily": "GTStandardBold",
+          "fontFamily": "GTStandardNarrowBold",
           "fontSize": 24,
           "letterSpacing": 0,
           "lineHeight": 28,
+          "textTransform": "uppercase",
         }
       }
       suppressHighlighting={true}
@@ -240,10 +243,11 @@ exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
     <Text
       style={
         {
-          "fontFamily": "GTStandardBold",
+          "fontFamily": "GTStandardNarrowBold",
           "fontSize": 18,
           "letterSpacing": 0,
           "lineHeight": 20,
+          "textTransform": "uppercase",
         }
       }
       suppressHighlighting={true}
@@ -253,10 +257,11 @@ exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
     <Text
       style={
         {
-          "fontFamily": "GTStandardBold",
+          "fontFamily": "GTStandardNarrowBold",
           "fontSize": 16,
           "letterSpacing": 0,
           "lineHeight": 18,
+          "textTransform": "uppercase",
         }
       }
       suppressHighlighting={true}
@@ -266,10 +271,11 @@ exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
     <Text
       style={
         {
-          "fontFamily": "GTStandardBold",
+          "fontFamily": "GTStandardNarrowBold",
           "fontSize": 14,
           "letterSpacing": 0,
           "lineHeight": 16,
+          "textTransform": "uppercase",
         }
       }
       suppressHighlighting={true}
@@ -279,10 +285,11 @@ exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
     <Text
       style={
         {
-          "fontFamily": "GTStandardBold",
+          "fontFamily": "GTStandardNarrowBold",
           "fontSize": 12,
           "letterSpacing": 0,
           "lineHeight": 14,
+          "textTransform": "uppercase",
         }
       }
       suppressHighlighting={true}

package/src/system/content/typography/__snapshots_web__/Typography.features.stories.tsx.snap

@@ -137,43 +137,43 @@ exports[`Bumper/Content/Typography/Features ContentCapsVariants 1`] = `
             class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020313"
           >
             <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1048365027 _lh-f-lineHeigh1404119176 _ls-f-letterSpa1744401475 _fw-f-weight-bo3448"
+              class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont1048365027 _lh-f-lineHeigh1404119176 _ls-f-letterSpa1744401475 _fw-f-weight-bo3448"
               data-disable-theme="true"
             >
-              CONTENT CAPS 3XL
+              content caps 3xl
             </span>
             <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1048365988 _lh-f-lineHeigh1404118215 _ls-f-letterSpa1744402436 _fw-f-weight-bo3448"
+              class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont1048365988 _lh-f-lineHeigh1404118215 _ls-f-letterSpa1744402436 _fw-f-weight-bo3448"
               data-disable-theme="true"
             >
               CONTENT CAPS 2XL
             </span>
             <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109886 _lh-f-lineHeigh599485619 _ls-f-letterSpa1883393758 _fw-f-weight-bo3448"
+              class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont1213109886 _lh-f-lineHeigh599485619 _ls-f-letterSpa1883393758 _fw-f-weight-bo3448"
               data-disable-theme="true"
             >
               CONTENT CAPS XL
             </span>
             <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321890 _lh-f-lineHeigh1366135091 _ls-f-letterSpa199301954 _fw-f-weight-bo3448"
+              class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont593321890 _lh-f-lineHeigh1366135091 _ls-f-letterSpa199301954 _fw-f-weight-bo3448"
               data-disable-theme="true"
             >
               CONTENT CAPS L
             </span>
             <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448"
+              class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448"
               data-disable-theme="true"
             >
               CONTENT CAPS M
             </span>
             <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321897 _lh-f-lineHeigh1366135084 _ls-f-letterSpa199301961 _fw-f-weight-bo3448"
+              class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont593321897 _lh-f-lineHeigh1366135084 _ls-f-letterSpa199301961 _fw-f-weight-bo3448"
               data-disable-theme="true"
             >
               CONTENT CAPS S
             </span>
             <span
-              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448"
+              class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448"
               data-disable-theme="true"
             >
               CONTENT CAPS XS

package/src/system/content/typography/utils/getVariantAndWeightValues.test.tsx

@@ -1,4 +1,5 @@
-import { BODY_VARIANTS, CONTENT_CAPS_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../core/tokens/fonts';
+import { BODY_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../core/tokens/GTStandardFont';
+import { CONTENT_CAPS_VARIANTS } from '../../../core/tokens/GTStandardNarrowFont';
 import { getVariantAndWeightValues } from './getVariantAndWeightValues';
 
 describe('getVariantAndWeightValues', () => {

package/src/system/content/typography/utils/getVariantAndWeightValues.tsx

@@ -1,5 +1,6 @@
+import { BODY_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../core/tokens/GTStandardFont';
+import { CONTENT_CAPS_VARIANTS } from '../../../core/tokens/GTStandardNarrowFont';
 import type { FontVariants } from '../../../core/tokens/fonts';
-import { BODY_VARIANTS, CONTENT_CAPS_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../core/tokens/fonts';
 import type { InternalTypographyProps, TypographyTextProps } from '../Typography';
 import type { TypographyVariantContextValue, TypographyWeightContextValue } from './typographyContext';
 

package/src/system/core/tokens/GTStandardFont.ts

@@ -0,0 +1,90 @@
+export const HEADING_VARIANTS = [
+  'heading-2xl',
+  'heading-xl',
+  'heading-l',
+  'heading-m',
+  'heading-s',
+  'heading-xs',
+  'heading-2xs',
+] as const;
+export const BODY_VARIANTS = ['body-xl', 'body-l', 'body-m', 'body-s', 'body-xs'] as const;
+export const LABEL_VARIANTS = ['label-xl', 'label-l', 'label-m', 'label-s'] as const;
+
+export type GTStandardVariants =
+  | (typeof HEADING_VARIANTS)[number]
+  | (typeof BODY_VARIANTS)[number]
+  | (typeof LABEL_VARIANTS)[number];
+export type BodyFontVariants = (typeof BODY_VARIANTS)[number];
+export type LabelFontVariants = (typeof LABEL_VARIANTS)[number];
+export type HeadingFontVariants = (typeof HEADING_VARIANTS)[number];
+
+export type GTStandardFontWeight = '500' | '600' | '700';
+
+export const GTStandardFaces: Record<GTStandardFontWeight, Record<string, string>> = {
+  500: { normal: 'GTStandardRegular' },
+  600: { normal: 'GTStandardSemibold' },
+  700: { normal: 'GTStandardBold' },
+};
+
+export const GTStandardSizes: Record<GTStandardVariants, number> = {
+  'heading-2xl': 56,
+  'heading-xl': 48,
+  'heading-l': 38,
+  'heading-m': 28,
+  'heading-s': 24,
+  'heading-xs': 20,
+  'heading-2xs': 20,
+  'body-xl': 24,
+  'body-l': 18,
+  'body-m': 16,
+  'body-s': 14,
+  'body-xs': 12,
+  'label-xl': 18,
+  'label-l': 16,
+  'label-m': 14,
+  'label-s': 12,
+};
+
+export const GTStandardLineHeights: Record<GTStandardVariants, number> = {
+  'heading-2xl': 64,
+  'heading-xl': 56,
+  'heading-l': 44,
+  'heading-m': 32,
+  'heading-s': 28,
+  'heading-xs': 24,
+  'heading-2xs': 20,
+  'body-xl': 32,
+  'body-l': 26,
+  'body-m': 24,
+  'body-s': 20,
+  'body-xs': 16,
+  'label-xl': 26,
+  'label-l': 20,
+  'label-m': 18,
+  'label-s': 14,
+};
+
+export const GTStandardLetterSpacings: Record<GTStandardVariants, number> = {
+  'heading-2xl': 0,
+  'heading-xl': 0,
+  'heading-l': 0,
+  'heading-m': 0,
+  'heading-s': 0,
+  'heading-xs': 0,
+  'heading-2xs': 0,
+  'body-xl': 0.3,
+  'body-l': 0.3,
+  'body-m': 0.3,
+  'body-s': 0.3,
+  'body-xs': 0.3,
+  'label-xl': 0,
+  'label-l': 0,
+  'label-m': 0,
+  'label-s': 0,
+};
+
+export const GTStandardWeights: Record<string, GTStandardFontWeight> = {
+  bold: '700',
+  semibold: '600',
+  regular: '500',
+};

package/src/system/core/tokens/GTStandardNarrowFont.ts

@@ -0,0 +1,51 @@
+export const CONTENT_CAPS_VARIANTS = [
+  'content-caps-3xl',
+  'content-caps-2xl',
+  'content-caps-xl',
+  'content-caps-l',
+  'content-caps-m',
+  'content-caps-s',
+  'content-caps-xs',
+] as const;
+
+export type ContentCapsVariants = (typeof CONTENT_CAPS_VARIANTS)[number];
+
+export type GTStandardNarrowFontWeight = '700';
+
+export const GTStandardNarrowFaces: Record<GTStandardNarrowFontWeight, Record<string, string>> = {
+  700: { normal: 'GTStandardNarrowBold' },
+};
+
+export const GTStandardNarrowSizes: Record<ContentCapsVariants, number> = {
+  'content-caps-3xl': 40,
+  'content-caps-2xl': 32,
+  'content-caps-xl': 24,
+  'content-caps-l': 18,
+  'content-caps-m': 16,
+  'content-caps-s': 14,
+  'content-caps-xs': 12,
+};
+
+export const GTStandardNarrowLineHeights: Record<ContentCapsVariants, number> = {
+  'content-caps-3xl': 40,
+  'content-caps-2xl': 40,
+  'content-caps-xl': 28,
+  'content-caps-l': 20,
+  'content-caps-m': 18,
+  'content-caps-s': 16,
+  'content-caps-xs': 14,
+};
+
+export const GTStandardNarrowLetterSpacings: Record<ContentCapsVariants, number> = {
+  'content-caps-3xl': 0,
+  'content-caps-2xl': 0,
+  'content-caps-xl': 0,
+  'content-caps-l': 0,
+  'content-caps-m': 0,
+  'content-caps-s': 0,
+  'content-caps-xs': 0,
+};
+
+export const GTStandardNarrowWeights: Record<string, GTStandardNarrowFontWeight> = {
+  bold: '700',
+};

package/src/system/core/tokens/__snapshots__/fonts.stories.tsx.snap

@@ -1204,10 +1204,11 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
         <Text
           style={
             {
-              "fontFamily": "GTStandardBold",
+              "fontFamily": "GTStandardNarrowBold",
               "fontSize": 40,
               "letterSpacing": 0,
               "lineHeight": 40,
+              "textTransform": "uppercase",
             }
           }
           suppressHighlighting={true}
@@ -1273,10 +1274,11 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
         <Text
           style={
             {
-              "fontFamily": "GTStandardBold",
+              "fontFamily": "GTStandardNarrowBold",
               "fontSize": 32,
               "letterSpacing": 0,
               "lineHeight": 40,
+              "textTransform": "uppercase",
             }
           }
           suppressHighlighting={true}
@@ -1342,10 +1344,11 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
         <Text
           style={
             {
-              "fontFamily": "GTStandardBold",
+              "fontFamily": "GTStandardNarrowBold",
               "fontSize": 24,
               "letterSpacing": 0,
               "lineHeight": 28,
+              "textTransform": "uppercase",
             }
           }
           suppressHighlighting={true}
@@ -1411,10 +1414,11 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
         <Text
           style={
             {
-              "fontFamily": "GTStandardBold",
+              "fontFamily": "GTStandardNarrowBold",
               "fontSize": 18,
               "letterSpacing": 0,
               "lineHeight": 20,
+              "textTransform": "uppercase",
             }
           }
           suppressHighlighting={true}
@@ -1480,10 +1484,11 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
         <Text
           style={
             {
-              "fontFamily": "GTStandardBold",
+              "fontFamily": "GTStandardNarrowBold",
               "fontSize": 16,
               "letterSpacing": 0,
               "lineHeight": 18,
+              "textTransform": "uppercase",
             }
           }
           suppressHighlighting={true}
@@ -1549,10 +1554,11 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
         <Text
           style={
             {
-              "fontFamily": "GTStandardBold",
+              "fontFamily": "GTStandardNarrowBold",
               "fontSize": 14,
               "letterSpacing": 0,
               "lineHeight": 16,
+              "textTransform": "uppercase",
             }
           }
           suppressHighlighting={true}
@@ -1618,10 +1624,11 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
         <Text
           style={
             {
-              "fontFamily": "GTStandardBold",
+              "fontFamily": "GTStandardNarrowBold",
               "fontSize": 12,
               "letterSpacing": 0,
               "lineHeight": 14,
+              "textTransform": "uppercase",
             }
           }
           suppressHighlighting={true}

package/src/system/core/tokens/__snapshots_web__/fonts.stories.tsx.snap

@@ -533,7 +533,7 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
                   </span>
                 </div>
                 <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1048365027 _lh-f-lineHeigh1404119176 _ls-f-letterSpa1744401475 _fw-f-weight-bo3448"
+                  class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont1048365027 _lh-f-lineHeigh1404119176 _ls-f-letterSpa1744401475 _fw-f-weight-bo3448"
                   data-disable-theme="true"
                 >
                   The quick brown fox
@@ -563,7 +563,7 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
                   </span>
                 </div>
                 <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1048365988 _lh-f-lineHeigh1404118215 _ls-f-letterSpa1744402436 _fw-f-weight-bo3448"
+                  class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont1048365988 _lh-f-lineHeigh1404118215 _ls-f-letterSpa1744402436 _fw-f-weight-bo3448"
                   data-disable-theme="true"
                 >
                   The quick brown fox
@@ -593,7 +593,7 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
                   </span>
                 </div>
                 <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109886 _lh-f-lineHeigh599485619 _ls-f-letterSpa1883393758 _fw-f-weight-bo3448"
+                  class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont1213109886 _lh-f-lineHeigh599485619 _ls-f-letterSpa1883393758 _fw-f-weight-bo3448"
                   data-disable-theme="true"
                 >
                   The quick brown fox
@@ -623,7 +623,7 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
                   </span>
                 </div>
                 <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321890 _lh-f-lineHeigh1366135091 _ls-f-letterSpa199301954 _fw-f-weight-bo3448"
+                  class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont593321890 _lh-f-lineHeigh1366135091 _ls-f-letterSpa199301954 _fw-f-weight-bo3448"
                   data-disable-theme="true"
                 >
                   The quick brown fox
@@ -653,7 +653,7 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
                   </span>
                 </div>
                 <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448"
+                  class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448"
                   data-disable-theme="true"
                 >
                   The quick brown fox
@@ -683,7 +683,7 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
                   </span>
                 </div>
                 <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321897 _lh-f-lineHeigh1366135084 _ls-f-letterSpa199301961 _fw-f-weight-bo3448"
+                  class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont593321897 _lh-f-lineHeigh1366135084 _ls-f-letterSpa199301961 _fw-f-weight-bo3448"
                   data-disable-theme="true"
                 >
                   The quick brown fox
@@ -713,7 +713,7 @@ exports[`Bumper/Core/Tokens Fonts 1`] = `
                   </span>
                 </div>
                 <span
-                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448"
+                  class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _tt-uppercase _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448"
                   data-disable-theme="true"
                 >
                   The quick brown fox

package/src/system/core/tokens/fonts.stories.tsx

@@ -2,7 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from '../../content/typography';
 import { HStack, VStack } from '../primitives/Stack';
 import { View } from '../primitives/View';
-import { VARIANTS, lineHeight, size } from './fonts';
+import { GTStandardLineHeights, GTStandardSizes } from './GTStandardFont';
+import { GTStandardNarrowLineHeights, GTStandardNarrowSizes } from './GTStandardNarrowFont';
+import { VARIANTS } from './fonts';
+
+const allSizes = { ...GTStandardSizes, ...GTStandardNarrowSizes };
+const allLineHeights = { ...GTStandardLineHeights, ...GTStandardNarrowLineHeights };
 
 const meta: Meta = {
   title: 'Bumper/Core/Tokens',
@@ -27,7 +32,7 @@ export const Fonts: Story = {
             </View>
             <View width={80}>
               <Typography.Text variant="body-xs" color="$content.base.mid">
-                {size[variant]}px / {lineHeight[variant]}px
+                {allSizes[variant]}px / {allLineHeights[variant]}px
               </Typography.Text>
             </View>
             <Typography.Text variant={variant}>The quick brown fox</Typography.Text>

package/src/system/core/tokens/fonts.ts

@@ -1,119 +1,6 @@
-export const HEADING_VARIANTS = [
-  'heading-2xl',
-  'heading-xl',
-  'heading-l',
-  'heading-m',
-  'heading-s',
-  'heading-xs',
-  'heading-2xs',
-] as const;
-export const BODY_VARIANTS = ['body-xl', 'body-l', 'body-m', 'body-s', 'body-xs'] as const;
-export const LABEL_VARIANTS = ['label-xl', 'label-l', 'label-m', 'label-s'] as const;
-export const CONTENT_CAPS_VARIANTS = [
-  'content-caps-3xl',
-  'content-caps-2xl',
-  'content-caps-xl',
-  'content-caps-l',
-  'content-caps-m',
-  'content-caps-s',
-  'content-caps-xs',
-] as const;
+import { BODY_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from './GTStandardFont';
+import { CONTENT_CAPS_VARIANTS } from './GTStandardNarrowFont';
+
 export const VARIANTS = [...HEADING_VARIANTS, ...BODY_VARIANTS, ...LABEL_VARIANTS, ...CONTENT_CAPS_VARIANTS] as const;
 
 export type FontVariants = (typeof VARIANTS)[number];
-export type BodyFontVariants = (typeof BODY_VARIANTS)[number];
-export type LabelFontVariants = (typeof LABEL_VARIANTS)[number];
-export type HeadingFontVariants = (typeof HEADING_VARIANTS)[number];
-export type ContentCapsVariants = (typeof CONTENT_CAPS_VARIANTS)[number];
-
-export type GTStandardFontWeight = '500' | '600' | '700';
-
-export const GTStandardFaces: Record<GTStandardFontWeight, Record<string, string>> = {
-  500: { normal: 'GTStandardRegular' },
-  600: { normal: 'GTStandardSemibold' },
-  700: { normal: 'GTStandardBold' },
-};
-
-export const size: Record<FontVariants, number> = {
-  'heading-2xl': 56,
-  'heading-xl': 48,
-  'heading-l': 38,
-  'heading-m': 28,
-  'heading-s': 24,
-  'heading-xs': 20,
-  'heading-2xs': 20,
-  'body-xl': 24,
-  'body-l': 18,
-  'body-m': 16,
-  'body-s': 14,
-  'body-xs': 12,
-  'label-xl': 18,
-  'label-l': 16,
-  'label-m': 14,
-  'label-s': 12,
-  'content-caps-3xl': 40,
-  'content-caps-2xl': 32,
-  'content-caps-xl': 24,
-  'content-caps-l': 18,
-  'content-caps-m': 16,
-  'content-caps-s': 14,
-  'content-caps-xs': 12,
-};
-
-export const lineHeight: Record<FontVariants, number> = {
-  'heading-2xl': 64,
-  'heading-xl': 56,
-  'heading-l': 44,
-  'heading-m': 32,
-  'heading-s': 28,
-  'heading-xs': 24,
-  'heading-2xs': 20,
-  'body-xl': 32,
-  'body-l': 26,
-  'body-m': 24,
-  'body-s': 20,
-  'body-xs': 16,
-  'label-xl': 26,
-  'label-l': 20,
-  'label-m': 18,
-  'label-s': 14,
-  'content-caps-3xl': 40,
-  'content-caps-2xl': 40,
-  'content-caps-xl': 28,
-  'content-caps-l': 20,
-  'content-caps-m': 18,
-  'content-caps-s': 16,
-  'content-caps-xs': 14,
-};
-
-export const letterSpacing: Record<FontVariants, number> = {
-  'heading-2xl': 0,
-  'heading-xl': 0,
-  'heading-l': 0,
-  'heading-m': 0,
-  'heading-s': 0,
-  'heading-xs': 0,
-  'heading-2xs': 0,
-  'body-xl': 0.3,
-  'body-l': 0.3,
-  'body-m': 0.3,
-  'body-s': 0.3,
-  'body-xs': 0.3,
-  'label-xl': 0,
-  'label-l': 0,
-  'label-m': 0,
-  'label-s': 0,
-  'content-caps-3xl': 0,
-  'content-caps-2xl': 0,
-  'content-caps-xl': 0,
-  'content-caps-l': 0,
-  'content-caps-m': 0,
-  'content-caps-s': 0,
-  'content-caps-xs': 0,
-};
-
-export const weight: Record<string, GTStandardFontWeight> = {
-  bold: '700',
-  semibold: '600',
-  regular: '500',
-};