@ornikar/bumper 2.6.0 → 2.7.0

package/src/components/typography/__snapshots_web__/Typography.stories.tsx.snap

@@ -163,7 +163,6 @@ exports[`bumper/Typography/Typography Typography 1`] = `
                     </span>
                   </span>
                 </span>
-                 
               </span>
             </div>
             <div
@@ -295,6 +294,26 @@ exports[`bumper/Typography/Typography Typography 1`] = `
                   </span>
                 </div>
               </div>
+              <div
+                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _marginBottom-t-space-spa1366020313"
+              >
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347208 _lineHeight-f-lineHeigh1544154447 _letterSpacing-f-letterSpa1195674554 _fontWeight-f-weight-se1074390495"
+                  data-disable-theme="true"
+                >
+                  heading 2xs - semibold
+                </span>
+                <div
+                  class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _borderTopLeftRadius-t-radius-ra1673638410 _borderTopRightRadius-t-radius-ra1673638410 _borderBottomRightRadius-t-radius-ra1673638410 _borderBottomLeftRadius-t-radius-ra1673638410 _backgroundColor-bg--base--m757972454 _marginTop-t-space-spa94482162"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head1944327746 _lineHeight-f-lineHeigh2126319479 _letterSpacing-f-letterSpa2008047564 _fontWeight-f-weight-se1074390495"
+                    data-disable-theme="true"
+                  >
+                    The quick brown fox jumps over the lazy dog
+                  </span>
+                </div>
+              </div>
             </div>
             <div
               class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingLeft-t-space-spa94482162"
@@ -596,6 +615,214 @@ exports[`bumper/Typography/Typography Typography 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingLeft-t-space-spa94482162"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-spa94482162 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347201 _lineHeight-f-lineHeigh1544154440 _letterSpacing-f-letterSpa1195674547 _fontWeight-f-weight-se1074390495"
+                data-disable-theme="true"
+              >
+                Content Caps
+              </span>
+              <div
+                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _marginBottom-t-space-spa1366020313"
+              >
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347208 _lineHeight-f-lineHeigh1544154447 _letterSpacing-f-letterSpa1195674554 _fontWeight-f-weight-se1074390495"
+                  data-disable-theme="true"
+                >
+                  content caps 3xl - bold
+                </span>
+                <div
+                  class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _borderTopLeftRadius-t-radius-ra1673638410 _borderTopRightRadius-t-radius-ra1673638410 _borderBottomRightRadius-t-radius-ra1673638410 _borderBottomLeftRadius-t-radius-ra1673638410 _backgroundColor-bg--base--m757972454 _marginTop-t-space-spa94482162"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-cont1048365027 _lineHeight-f-lineHeigh1404119176 _letterSpacing-f-letterSpa1744401475 _fontWeight-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    The quick brown fox jumps over the lazy dog
+                  </span>
+                </div>
+              </div>
+              <div
+                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _marginBottom-t-space-spa1366020313"
+              >
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347208 _lineHeight-f-lineHeigh1544154447 _letterSpacing-f-letterSpa1195674554 _fontWeight-f-weight-se1074390495"
+                  data-disable-theme="true"
+                >
+                  content caps 2xl - bold
+                </span>
+                <div
+                  class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _borderTopLeftRadius-t-radius-ra1673638410 _borderTopRightRadius-t-radius-ra1673638410 _borderBottomRightRadius-t-radius-ra1673638410 _borderBottomLeftRadius-t-radius-ra1673638410 _backgroundColor-bg--base--m757972454 _marginTop-t-space-spa94482162"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-cont1048365988 _lineHeight-f-lineHeigh1404118215 _letterSpacing-f-letterSpa1744402436 _fontWeight-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    The quick brown fox jumps over the lazy dog
+                  </span>
+                </div>
+              </div>
+              <div
+                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _marginBottom-t-space-spa1366020313"
+              >
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347208 _lineHeight-f-lineHeigh1544154447 _letterSpacing-f-letterSpa1195674554 _fontWeight-f-weight-se1074390495"
+                  data-disable-theme="true"
+                >
+                  content caps xl - bold
+                </span>
+                <div
+                  class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _borderTopLeftRadius-t-radius-ra1673638410 _borderTopRightRadius-t-radius-ra1673638410 _borderBottomRightRadius-t-radius-ra1673638410 _borderBottomLeftRadius-t-radius-ra1673638410 _backgroundColor-bg--base--m757972454 _marginTop-t-space-spa94482162"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-cont1213109886 _lineHeight-f-lineHeigh599485619 _letterSpacing-f-letterSpa1883393758 _fontWeight-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    The quick brown fox jumps over the lazy dog
+                  </span>
+                </div>
+              </div>
+              <div
+                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _marginBottom-t-space-spa1366020313"
+              >
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347208 _lineHeight-f-lineHeigh1544154447 _letterSpacing-f-letterSpa1195674554 _fontWeight-f-weight-se1074390495"
+                  data-disable-theme="true"
+                >
+                  content caps l - bold
+                </span>
+                <div
+                  class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _borderTopLeftRadius-t-radius-ra1673638410 _borderTopRightRadius-t-radius-ra1673638410 _borderBottomRightRadius-t-radius-ra1673638410 _borderBottomLeftRadius-t-radius-ra1673638410 _backgroundColor-bg--base--m757972454 _marginTop-t-space-spa94482162"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-cont593321890 _lineHeight-f-lineHeigh1366135091 _letterSpacing-f-letterSpa199301954 _fontWeight-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    The quick brown fox jumps over the lazy dog
+                  </span>
+                </div>
+              </div>
+              <div
+                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _marginBottom-t-space-spa1366020313"
+              >
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347208 _lineHeight-f-lineHeigh1544154447 _letterSpacing-f-letterSpa1195674554 _fontWeight-f-weight-se1074390495"
+                  data-disable-theme="true"
+                >
+                  content caps m - bold
+                </span>
+                <div
+                  class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _borderTopLeftRadius-t-radius-ra1673638410 _borderTopRightRadius-t-radius-ra1673638410 _borderBottomRightRadius-t-radius-ra1673638410 _borderBottomLeftRadius-t-radius-ra1673638410 _backgroundColor-bg--base--m757972454 _marginTop-t-space-spa94482162"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-cont593321891 _lineHeight-f-lineHeigh1366135090 _letterSpacing-f-letterSpa199301955 _fontWeight-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    The quick brown fox jumps over the lazy dog
+                  </span>
+                </div>
+              </div>
+              <div
+                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _marginBottom-t-space-spa1366020313"
+              >
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347208 _lineHeight-f-lineHeigh1544154447 _letterSpacing-f-letterSpa1195674554 _fontWeight-f-weight-se1074390495"
+                  data-disable-theme="true"
+                >
+                  content caps s - bold
+                </span>
+                <div
+                  class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _borderTopLeftRadius-t-radius-ra1673638410 _borderTopRightRadius-t-radius-ra1673638410 _borderBottomRightRadius-t-radius-ra1673638410 _borderBottomLeftRadius-t-radius-ra1673638410 _backgroundColor-bg--base--m757972454 _marginTop-t-space-spa94482162"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-cont593321897 _lineHeight-f-lineHeigh1366135084 _letterSpacing-f-letterSpa199301961 _fontWeight-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    The quick brown fox jumps over the lazy dog
+                  </span>
+                </div>
+              </div>
+              <div
+                class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _marginBottom-t-space-spa1366020313"
+              >
+                <span
+                  class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347208 _lineHeight-f-lineHeigh1544154447 _letterSpacing-f-letterSpa1195674554 _fontWeight-f-weight-se1074390495"
+                  data-disable-theme="true"
+                >
+                  content caps xs - bold
+                </span>
+                <div
+                  class="_display-flex _alignItems-stretch _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482166 _paddingLeft-t-space-spa94482166 _borderTopLeftRadius-t-radius-ra1673638410 _borderTopRightRadius-t-radius-ra1673638410 _borderBottomRightRadius-t-radius-ra1673638410 _borderBottomLeftRadius-t-radius-ra1673638410 _backgroundColor-bg--base--m757972454 _marginTop-t-space-spa94482162"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _fontSize-f-size-cont1213109893 _lineHeight-f-lineHeigh599485626 _letterSpacing-f-letterSpa1883393765 _fontWeight-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    The quick brown fox jumps over the lazy dog
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div
+              class="is_VStack _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _paddingTop-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingLeft-t-space-spa94482162"
+            >
+              <span
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-t-space-spa94482162 _marginLeft-0px _fontFamily-f-family _fontSize-f-size-head100347201 _lineHeight-f-lineHeigh1544154440 _letterSpacing-f-letterSpa1195674547 _fontWeight-f-weight-se1074390495"
+                data-disable-theme="true"
+              >
+                Accessibility
+              </span>
+              <span
+                aria-level="1"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+                role="heading"
+              >
+                role: heading aria-level: 1
+              </span>
+              <span
+                aria-level="2"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+                role="heading"
+              >
+                role: heading aria-level: 2
+              </span>
+              <span
+                aria-level="3"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+                role="heading"
+              >
+                role: heading aria-level: 3
+              </span>
+              <span
+                aria-level="4"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+                role="heading"
+              >
+                role: heading aria-level: 4
+              </span>
+              <span
+                aria-level="5"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+                role="heading"
+              >
+                role: heading aria-level: 5
+              </span>
+              <span
+                aria-level="6"
+                class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
+                data-disable-theme="true"
+                role="heading"
+              >
+                role: heading aria-level: 6
+              </span>
+            </div>
           </div>
         </span>
       </span>

package/src/components/typography/utils/{getTypeAndWeightValues.test.tsx → getVariantAndWeightValues.test.tsx}

@@ -1,5 +1,5 @@
-import { BODY_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../tokens/fonts';
-import { getVariantAndWeightValues } from './getTypeAndWeightValues';
+import { BODY_VARIANTS, CONTENT_CAPS_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../tokens/fonts';
+import { getVariantAndWeightValues } from './getVariantAndWeightValues';
 
 describe('getVariantAndWeightValues', () => {
   describe('when variant is a body size', () => {
@@ -78,6 +78,29 @@ describe('getVariantAndWeightValues', () => {
     });
   });
 
+  describe('when variant is a content caps size', () => {
+    it.each(CONTENT_CAPS_VARIANTS.map((size) => [size, undefined, null, null, { weight: 'bold', variant: size }]))(
+      'should return weight "bold" for label variant "%s"',
+      (variant, weight, ancestorWeight, ancestorVariant, expected) => {
+        expect(getVariantAndWeightValues(weight, variant, ancestorWeight, ancestorVariant)).toEqual(expected);
+      },
+    );
+
+    it('should ignore weight prop for label sizes and always return bold', () => {
+      expect(getVariantAndWeightValues('regular', 'content-caps-m', null, null)).toEqual({
+        weight: 'bold',
+        variant: 'content-caps-m',
+      });
+    });
+
+    it('should ignore ancestor weight for label sizes and always return bold', () => {
+      expect(getVariantAndWeightValues(undefined, 'content-caps-m', 'bold', null)).toEqual({
+        weight: 'bold',
+        variant: 'content-caps-m',
+      });
+    });
+  });
+
   describe('when variant comes from ancestor', () => {
     it('should use ancestor variant when variant prop is undefined', () => {
       expect(getVariantAndWeightValues(undefined, undefined, null, 'body-m')).toEqual({
@@ -113,6 +136,13 @@ describe('getVariantAndWeightValues', () => {
         variant: 'body-m',
       });
     });
+
+    it('should use ancestor weight when ancestor variant is a content caps size', () => {
+      expect(getVariantAndWeightValues(undefined, undefined, 'bold', 'content-caps-m')).toEqual({
+        weight: 'bold',
+        variant: 'content-caps-m',
+      });
+    });
   });
 
   describe('when no variant is provided', () => {

package/src/components/typography/utils/{getTypeAndWeightValues.tsx → getVariantAndWeightValues.tsx}

@@ -1,11 +1,11 @@
 import type { FontVariants } from '../../../tokens/fonts';
-import { BODY_VARIANTS } from '../../../tokens/fonts';
+import { BODY_VARIANTS, CONTENT_CAPS_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../tokens/fonts';
 import type {
   InternalTypographyProps,
   TypographyTextProps,
   TypographyVariantContextValue,
   TypographyWeightContextValue,
-} from '../Typograhy';
+} from '../Typography';
 
 interface VariantAndWeightValues {
   weight: InternalTypographyProps['weight'] | undefined;
@@ -25,7 +25,18 @@ export function getVariantAndWeightValues(
       const computedWeight = weightProp || typographyWeightAncestorValue || undefined;
       return { weight: computedWeight, variant: computedVariant };
     }
-    return { weight: 'semibold', variant: computedVariant };
+    // Content Caps variant have fixed weights so we override any provided weight
+    if ((CONTENT_CAPS_VARIANTS as readonly string[]).includes(computedVariant)) {
+      return { weight: 'bold', variant: computedVariant };
+    }
+    // Heading variants have fixed weights so we override any provided weight
+    if ((HEADING_VARIANTS as readonly string[]).includes(computedVariant)) {
+      return { weight: 'semibold', variant: computedVariant };
+    }
+    // Label variants have fixed weights so we override any provided weight
+    if ((LABEL_VARIANTS as readonly string[]).includes(computedVariant)) {
+      return { weight: 'semibold', variant: computedVariant };
+    }
   }
 
   return { weight: weightProp, variant: undefined };

package/src/index.ts

@@ -12,8 +12,8 @@ export type { ViewProps } from './components/primitives/View';
 export { View } from './components/primitives/View';
 
 // Typography
-export type { TypographyTextProps } from './components/typography/Typograhy';
-export { Typography } from './components/typography/Typograhy';
+export type { TypographyTextProps } from './components/typography/Typography';
+export { Typography } from './components/typography/Typography';
 
 // Breakpoints
 export { useBreakpointValue } from './components/breakpoints/hooks/useBreakpointValue';

package/src/story-components/StoryTitle.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@tamagui/core';
-import { Typography } from '../components/typography/Typograhy';
+import { Typography } from '../components/typography/Typography';
 
 export const StoryTitle = styled(Typography.Text, {
   variants: {

package/src/themes/__snapshots__/light.stories.tsx.snap

@@ -29,7 +29,7 @@ exports[`bumper/Theme Light 1`] = `
           "fontFamily": "GTStandardSemibold",
           "fontSize": 38,
           "letterSpacing": 0,
-          "lineHeight": 48,
+          "lineHeight": 44,
           "marginBottom": 4,
         }
       }

package/src/themes/light.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 import type { GetThemeValueForKey } from '@tamagui/core';
 import { VStack } from '../components/primitives/Stack';
 import { View } from '../components/primitives/View';
-import { Typography } from '../components/typography/Typograhy';
+import { Typography } from '../components/typography/Typography';
 import { StorySection } from '../story-components/StorySection';
 import { light } from './light';
 

package/src/tokens/fonts.ts

@@ -7,15 +7,26 @@ export const HEADING_VARIANTS = [
   '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 VARIANTS = [...HEADING_VARIANTS, ...BODY_VARIANTS, ...LABEL_VARIANTS] 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;
+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';
 
@@ -29,9 +40,10 @@ const size: Record<FontVariants, number> = {
   'heading-2xl': 56,
   'heading-xl': 48,
   'heading-l': 38,
-  'heading-m': 24,
-  'heading-s': 20,
-  'heading-xs': 16,
+  'heading-m': 28,
+  'heading-s': 24,
+  'heading-xs': 20,
+  'heading-2xs': 20,
   'body-xl': 24,
   'body-l': 18,
   'body-m': 16,
@@ -41,24 +53,39 @@ const size: Record<FontVariants, number> = {
   '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,
 };
 
 const lineHeight: Record<FontVariants, number> = {
   'heading-2xl': 64,
   'heading-xl': 56,
-  'heading-l': 48,
+  'heading-l': 44,
   'heading-m': 32,
-  'heading-s': 20,
-  'heading-xs': 18,
+  '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': 24,
-  'label-m': 20,
-  'label-s': 16,
+  '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,
 };
 
 const letterSpacing: Record<FontVariants, number> = {
@@ -68,6 +95,7 @@ const letterSpacing: Record<FontVariants, number> = {
   'heading-m': 0,
   'heading-s': 0,
   'heading-xs': 0,
+  'heading-2xs': 0,
   'body-xl': 0.3,
   'body-l': 0.3,
   'body-m': 0.3,
@@ -77,6 +105,13 @@ const letterSpacing: Record<FontVariants, number> = {
   '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,
 };
 
 const weight: Record<string, GTStandardFontWeight> = {

package/src/tokens/palettes/__snapshots__/deepPurpleColorPalette.stories.tsx.snap

@@ -29,7 +29,7 @@ exports[`bumper/Core Tokens Deep Purple Palette 1`] = `
           "fontFamily": "GTStandardSemibold",
           "fontSize": 38,
           "letterSpacing": 0,
-          "lineHeight": 48,
+          "lineHeight": 44,
           "marginBottom": 4,
         }
       }

package/src/tokens/palettes/deepPurpleColorPalette.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import type { GetThemeValueForKey } from '@tamagui/core';
 import { View } from '../../components/primitives/View';
-import { Typography } from '../../components/typography/Typograhy';
+import { Typography } from '../../components/typography/Typography';
 import { StorySection } from '../../story-components/StorySection';
 import { deepPurpleColorPalette } from './deepPurpleColorPalette';
 

package/dist/definitions/components/typography/Typograhy.d.ts

@@ -1,40 +0,0 @@
-import type { GetProps } from '@tamagui/core';
-import { type Except } from 'type-fest';
-import type { BodyFontVariants, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../tokens/fonts';
-export type TypographyVariantContextValue = FontVariants | null;
-export type TypographyWeightContextValue = 'regular' | 'bold' | null;
-export type TypograhyColorContextValue = TypograhyColorProps | null;
-declare const InternalTypography: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").RNTamaguiTextNonStyleProps, import("@tamagui/core").TextStylePropsBase, {
-    variant?: "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | undefined;
-    weight?: "bold" | "semibold" | "regular" | undefined;
-}, import("@tamagui/core").StaticConfigPublic>;
-export type InternalTypographyProps = GetProps<typeof InternalTypography>;
-type ContainsOneString<T extends string> = `${string}${T}${string}`;
-type TypograhyColorProps = ContainsOneString<'$content.'>;
-type TypographyExcludedFontStyleProps = 'fontFamily' | 'fontSize' | 'lineHeight' | 'fontStyle' | 'fontVariant' | 'fontWeight';
-type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps | 'color'> & {
-    color?: TypograhyColorProps;
-};
-export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
-    variant?: BodyFontVariants;
-    weight?: Exclude<InternalTypographyProps['weight'], 'semibold'>;
-}
-export interface HeadingLabelProps extends TypographyPropsWithoutFontStyleProps {
-    variant: HeadingFontVariants | LabelFontVariants;
-    weight?: never;
-}
-export type TypographyTextProps = BodyProps | HeadingLabelProps;
-export declare const Typography: {
-    Text: import("@tamagui/core").TamaguiComponent<(Omit<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiTextNonStyleProps, import("@tamagui/core").TextStylePropsBase, {
-        variant?: "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | undefined;
-        weight?: "bold" | "semibold" | "regular" | undefined;
-    }>, keyof BodyProps> & BodyProps) | (Omit<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiTextNonStyleProps, import("@tamagui/core").TextStylePropsBase, {
-        variant?: "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | undefined;
-        weight?: "bold" | "semibold" | "regular" | undefined;
-    }>, keyof HeadingLabelProps> & HeadingLabelProps), import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").RNTamaguiTextNonStyleProps & TypographyTextProps, import("@tamagui/core").TextStylePropsBase, {
-        variant?: "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | undefined;
-        weight?: "bold" | "semibold" | "regular" | undefined;
-    }, import("@tamagui/core").StaticConfigPublic>;
-};
-export {};
-//# sourceMappingURL=Typograhy.d.ts.map

package/dist/definitions/components/typography/Typograhy.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Typograhy.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Typograhy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAuB,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGjH,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG,IAAI,CAAC;AAChE,MAAM,MAAM,4BAA4B,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC;AACrE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG,IAAI,CAAC;AAMpE,QAAA,MAAM,kBAAkB;;;8CAgCtB,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAG1E,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,GAAG,MAAM,EAAE,CAAC;AACpE,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAG1D,KAAK,gCAAgC,GACjC,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,YAAY,CAAC;AACjB,KAAK,oCAAoC,GAAG,MAAM,CAChD,uBAAuB,EACvB,gCAAgC,GAAG,OAAO,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,oCAAoC;IACrE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;CACjE;AACD,MAAM,WAAW,iBAAkB,SAAQ,oCAAoC;IAC7E,OAAO,EAAE,mBAAmB,GAAG,iBAAiB,CAAC;IACjD,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AACD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,iBAAiB,CAAC;AAiDhE,eAAO,MAAM,UAAU;;;;;;;;;;;CAEtB,CAAC"}

package/dist/definitions/components/typography/utils/getTypeAndWeightValues.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getTypeAndWeightValues.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/utils/getTypeAndWeightValues.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,KAAK,EACV,uBAAuB,EACvB,mBAAmB,EACnB,6BAA6B,EAC7B,4BAA4B,EAC7B,MAAM,cAAc,CAAC;AAEtB,UAAU,sBAAsB;IAC9B,MAAM,EAAE,uBAAuB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACtD,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAED,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,mBAAmB,CAAC,QAAQ,CAAC,EACzC,WAAW,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAC3C,6BAA6B,EAAE,4BAA4B,EAC3D,8BAA8B,EAAE,6BAA6B,GAC5D,sBAAsB,CAYxB"}