feat: add fontVariant to typography bag (#396)

Author: quantizor

packages/system/src/styles/typography.ts

@@ -82,6 +82,13 @@ export const fontSize = style<FontSizeProps>({
   themeGet: getFontSize,
 })
 
+export interface FontVariantProps<T extends ITheme = Theme> {
+  fontVariant?: SystemProp<CSS.Property.FontVariant, T>
+}
+export const fontVariant = style<FontVariantProps>({
+  prop: 'fontVariant',
+})
+
 export interface LineHeightProps<T extends ITheme = Theme> {
   lineHeight?: SystemProp<LineHeight<T> | CSS.Property.LineHeight, T>
 }
@@ -197,6 +204,7 @@ interface AllProps<T extends ITheme = Theme>
   extends FontFamilyProps<T>,
     FontSizeProps<T>,
     FontStyleProps<T>,
+    FontVariantProps<T>,
     LineHeightProps<T>,
     FontWeightProps<T>,
     TextAlignProps<T>,
@@ -215,6 +223,7 @@ const all = compose<AllProps>(
   fontFamily,
   fontSize,
   fontStyle,
+  fontVariant,
   lineHeight,
   fontWeight,
   textAlign,

website/pages/docs/typography/font-variant.mdx

@@ -0,0 +1,63 @@
+---
+section: Typography
+title: Font Variant
+slug: /docs/font-variant/
+---
+
+# Font Variant
+
+Utilities for controlling optional features of a given font family. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) for more information.
+
+<carbon-ad />
+
+| React props             | CSS Properties             |
+| ----------------------- | -------------------------- |
+| `fontVariant={variant}` | `font-variant: {variant};` |
+
+## Usage
+
+Control the font variant of an element using the `fontVariant={variant}` utility.
+
+```jsx preview color=violet
+<>
+  <template preview>
+    <>
+      {['normal', 'common-ligatures', 'small-caps'].map((variant) => (
+        <x.dl
+          key={size}
+          display="flex"
+          alignItems="baseline"
+          color="violet-600"
+          overflow="hidden"
+        >
+          <x.dt
+            w={16}
+            flexShrink={0}
+            fontSize="sm"
+            opacity={0.8}
+            fontFamily="mono"
+          >
+            {size}
+          </x.dt>
+          <x.dd fontVariant={variant} fontWeight="medium">
+            Computers have lots of memory but no imagination.
+          </x.dd>
+        </x.dl>
+      ))}
+    </>
+  </template>
+  <x.p fontVariant="normal">Computers have lots ...</x.p>
+  <x.p fontVariant="common-ligatures">Computers have lots ...</x.p>
+  <x.p fontVariant="small-caps">Computers have lots ...</x.p>
+</>
+```
+
+## Responsive
+
+To control the font variant at a specific breakpoint, use responsive object notation. For example, adding the property `fontVariant={{ md: "small-caps" }}` to an element would apply the `fontVariant="small-caps"` utility at medium screen sizes and above.
+
+```jsx
+<x.p fontVariant={{ xs: 'auto', md: 'small-caps' }}>{/* ... */}</x.p>
+```
+
+For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.