rm old typography stuff and style Heading via theme

index.d.ts

@@ -243,89 +243,6 @@ interface Typography {
     mono: string
     ui: string
   }
-  headings: {
-    100: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      letterSpacing: string
-      lineHeight: string
-      marginTop: number
-      textTransform: string
-    }
-    200: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      lineHeight: string
-      marginTop: number
-    }
-    300: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      letterSpacing: string
-      lineHeight: string
-      marginTop: number
-    }
-    400: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      letterSpacing: string
-      lineHeight: string
-      marginTop: number
-    }
-    500: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      letterSpacing: string
-      lineHeight: string
-      marginTop: number
-    }
-    600: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      letterSpacing: string
-      lineHeight: string
-      marginTop: number
-    }
-    700: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      letterSpacing: string
-      lineHeight: string
-      marginTop: number
-    }
-    800: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      letterSpacing: string
-      lineHeight: string
-      marginTop: number
-    }
-    900: {
-      color: string
-      fontFamily: string
-      fontSize: string
-      fontWeight: number
-      letterSpacing: string
-      lineHeight: string
-      marginTop: number
-    }
-  }
   paragraph: {
     300: {
       fontSize: string
@@ -383,13 +300,6 @@ interface Typography {
 }
 
 export interface Theme {
-  colors: Colors
-  fills: Fills
-  overlayBackgroundColor: string
-  palette: Palette
-  scales: ColorScales
-  spinnerColor: string
-  typography: Typography
 }
 
 export const defaultTheme: Theme

src/alert/__tests__/__snapshots__/Alert.test.js.snap

@@ -26,7 +26,7 @@ exports[`<Alert /> appearance snapshot 1`] = `
         </svg>
       </div>
       <h4
-        className="ub-mt_0px ub-mb_0px ub-fnt-sze_14px ub-f-wght_500 ub-ln-ht_1 ub-ltr-spc_-0-05px ub-fnt-fam_b77syt ub-color_inherit ub-box-szg_border-box"
+        className="ub-mt_0px ub-mb_0px ub-color_inherit ub-fnt-fam_b77syt ub-f-wght_500 ub-fnt-sze_16px ub-ln-ht_1 ub-ltr-spc_-0-05px ub-box-szg_border-box"
       >
         Test title
       </h4>
@@ -61,7 +61,7 @@ exports[`<Alert /> basic snapshot 1`] = `
         </svg>
       </div>
       <h4
-        className="ub-mt_0px ub-mb_0px ub-fnt-sze_14px ub-f-wght_500 ub-ln-ht_1 ub-ltr-spc_-0-05px ub-fnt-fam_b77syt ub-color_inherit ub-box-szg_border-box"
+        className="ub-mt_0px ub-mb_0px ub-color_inherit ub-fnt-fam_b77syt ub-f-wght_500 ub-fnt-sze_16px ub-ln-ht_1 ub-ltr-spc_-0-05px ub-box-szg_border-box"
       >
         A simple general message
       </h4>
@@ -96,7 +96,7 @@ exports[`<Alert /> intent snapshot 1`] = `
         </svg>
       </div>
       <h4
-        className="ub-mt_0px ub-mb_0px ub-fnt-sze_14px ub-f-wght_500 ub-ln-ht_1 ub-ltr-spc_-0-05px ub-fnt-fam_b77syt ub-color_inherit ub-box-szg_border-box"
+        className="ub-mt_0px ub-mb_0px ub-color_inherit ub-fnt-fam_b77syt ub-f-wght_500 ub-fnt-sze_16px ub-ln-ht_1 ub-ltr-spc_-0-05px ub-box-szg_border-box"
       >
         Test title
       </h4>

src/themes/classic/components/heading.js

@@ -0,0 +1,82 @@
+const baseStyle = {
+  color: 'colors.dark',
+  fontFamily: 'fontFamilies.display',
+  fontWeight: 'fontWeights.semibold'
+}
+
+const appearances = {}
+
+const sizes = {
+  900: {
+    fontSize: 'fontSizes.7',
+    lineHeight: 'lineHeights.6',
+    letterSpacing: 'letterSpacings.tightest',
+    marginTop: 52
+  },
+  800: {
+    fontSize: 'fontSizes.6',
+    lineHeight: 'lineHeights.5',
+    letterSpacing: 'letterSpacings.tightest',
+    marginTop: 40
+  },
+  700: {
+    fontSize: 'fontSizes.5',
+    lineHeight: 'lineHeights.3',
+    letterSpacing: 'letterSpacings.tighter',
+    marginTop: 40
+  },
+  600: {
+    fontSize: 'fontSizes.4',
+    lineHeight: 'lineHeights.3',
+    letterSpacing: 'letterSpacings.tighter',
+    marginTop: 28
+  },
+  500: {
+    fontFamily: 'fontFamilies.ui',
+    fontSize: 'fontSizes.3',
+    letterSpacing: 'letterSpacings.tight',
+    lineHeight: 'lineHeights.2',
+    marginTop: 24
+  },
+  400: {
+    fontSize: 'fontSizes.3',
+    fontWeight: 'fontWeights.bold',
+    lineHeight: 'lineHeights.2',
+    letterSpacing: 'letterSpacings.tight',
+    marginTop: 16,
+    fontFamily: 'fontFamilies.ui'
+  },
+  300: {
+    fontSize: 'fontSizes.1',
+    fontWeight: 'fontWeights.bold',
+    lineHeight: 'lineHeights.0',
+    letterSpacing: 'letterSpacings.normal',
+    marginTop: 16,
+    fontFamily: 'fontFamilies.ui'
+  },
+  200: {
+    fontSize: 'fontSizes.1',
+    fontWeight: 'fontWeights.bold',
+    lineHeight: 'lineHeights.0',
+    letterSpacing: 'letterSpacings.normal',
+    marginTop: 16,
+    fontFamily: 'fontFamilies.ui',
+    color: 'colors.muted'
+  },
+  100: {
+    fontSize: 'fontSizes.0',
+    fontWeight: 'fontWeights.normal',
+    textTransform: 'uppercase',
+    lineHeight: 'lineHeights.0',
+    letterSpacing: 'letterSpacings.wide',
+    marginTop: 16,
+    fontFamily: 'fontFamilies.ui',
+    color: 'colors.muted'
+  }
+}
+
+export default {
+  baseStyle,
+  appearances,
+  sizes
+}

src/themes/classic/components/index.js

@@ -5,6 +5,7 @@ import Button from './button'
 import Card from './card'
 import Checkbox from './checkbox'
 import Code from './code'
+import Heading from './heading'
 import Icon from './icon'
 import InlineAlert from './inline-alert'
 import Input from './input'
@@ -25,6 +26,7 @@ export default {
   Card,
   Checkbox,
   Code,
+  Heading,
   Icon,
   InlineAlert,
   Input,

src/themes/classic/deprecated/component-specific/index.js

@@ -3,4 +3,3 @@ export { default as getRowClassName } from './getRowClassName'
 export { default as getMenuItemClassName } from './getMenuItemClassName'
 
 export { default as segmentedControl } from './segmentedControl'
-export { default as checkbox } from './checkbox'