Merge pull request #70 from reactioncommerce/feat-50-theme-type

docs(typography): add letterspacing variables and add it to all the default typography types

package/src/components/Select/__snapshots__/Select.test.js.snap

@@ -28,7 +28,7 @@ exports[`basic snapshot test 1`] = `
                 Select options
               </p>
               <div
-                class="css-1tna5xz"
+                class="css-1lq0l2i"
               >
                 <div
                   class=""

package/src/theme/defaultTheme.js

@@ -27,6 +27,17 @@ export const fontWeightBold = 700;
 
 // Typography - Letter-spacing
 export const captionLetterSpacing = 0.28;
+export const body2LetterSpacing = 0.28;
+export const body1LetterSpacing = 0.3;
+export const body1BoldLetterSpacing = 0.3;
+export const subtitle2LetterSpacing = 0.24;
+export const subtitle1LetterSpacing = 0.26;
+export const h6LetterSpacing = 0.24;
+export const h5LetterSpacing = 0.5;
+export const h4LetterSpacing = 0.5;
+export const h3LetterSpacing = 0.42;
+export const h2LetterSpacing = 0.35;
+export const h1LetterSpacing = 0.42;
 
 // Icons
 export const smallFontIconSize = 17;
@@ -46,6 +57,7 @@ export const rawMuiTheme = {
     },
     divider: colors.black10,
     text: {
+      primary: colors.coolGrey500,
       secondary: colors.black60,
       secondaryActive: colors.white,
       active: "#8acef2"
@@ -66,63 +78,76 @@ export const rawMuiTheme = {
     useNextVariants: true,
     button: {
       fontSize: defaultFontSize,
-      letterSpacing: 0.3,
-      fontWeight: fontWeightSemiBold
+      fontWeight: fontWeightSemiBold,
+      letterSpacing: body1BoldLetterSpacing,
+      lineHeight: 1.5,
+      textTransform: "capitalize"
     },
     h1: {
       color: colors.coolGrey500,
       fontSize: defaultFontSize * 1.5,
+      letterSpacing: h1LetterSpacing,
       lineHeight: 1.25
     },
     h2: {
       color: colors.coolGrey500,
       fontSize: defaultFontSize * 1.25,
-      lineHeight: 1.25
+      letterSpacing: h2LetterSpacing,
+      lineHeight: 1.5
     },
     h3: {
       color: colors.coolGrey500,
       fontSize: defaultFontSize * 1.125,
+      letterSpacing: h3LetterSpacing,
       lineHeight: 1.25
     },
     h4: {
       color: colors.coolGrey500,
       fontSize: defaultFontSize,
-      fontWeight: fontWeightSemiBold,
+      letterSpacing: h4LetterSpacing,
       lineHeight: 1.25
     },
     h5: {
       color: colors.coolGrey500,
       fontSize: defaultFontSize * 0.875,
-      fontWeight: fontWeightSemiBold,
+      letterSpacing: h5LetterSpacing,
       lineHeight: 1.25
     },
     h6: {
       color: colors.coolGrey500,
       fontSize: defaultFontSize * 0.75,
-      fontWeight: fontWeightSemiBold,
-      lineHeight: 1.25
+      letterSpacing: h6LetterSpacing,
+      lineHeight: 1.46
     },
     body1: {
-      color: colors.black70,
+      color: colors.coolGrey500,
       fontSize: defaultFontSize,
+      letterSpacing: body1LetterSpacing,
       lineHeight: 1.5
     },
     body2: {
       color: colors.coolGrey500,
       fontSize: defaultFontSize * 0.875,
-      lineHeight: 1.5
+      letterSpacing: body2LetterSpacing,
+      lineHeight: 1.25
     },
     caption: {
-      color: colors.black30,
-      letterSpacing: captionLetterSpacing
+      color: colors.coolGrey500,
+      fontSize: defaultFontSize * 0.875,
+      letterSpacing: captionLetterSpacing,
+      lineHeight: 1.25
     },
     subtitle1: {
+      color: colors.coolGrey500,
       fontSize: defaultFontSize * 0.875,
-      lineHeight: 1.5
+      letterSpacing: subtitle1LetterSpacing,
+      lineHeight: 1.71
     },
     subtitle2: {
+      color: colors.coolGrey500,
       fontSize: defaultFontSize * 0.75,
-      lineHeight: 1.5
+      letterSpacing: subtitle2LetterSpacing,
+      lineHeight: 1.46
     }
   },
   shadows: [
@@ -195,6 +220,11 @@ export const rawMuiTheme = {
     },
     MuiDialogContentText: {
       color: "inherit"
+    },
+    MuiListItemText: {
+      primaryTypographyProps: {
+        variant: "body1"
+      }
     }
   },
   // Override defined theme properties
@@ -360,20 +390,20 @@ export const rawMuiTheme = {
         width: drawerWidth
       },
       paperAnchorLeft: {
-        borderRight: "none",
+        border: "none",
         backgroundColor: colors.darkBlue500,
         color: colors.black15
       },
       paperAnchorDockedLeft: {
-        borderRight: "none"
+        border: "none"
       },
       paperAnchorRight: {
-        borderLeft: "none",
+        border: "none",
         backgroundColor: colors.black02,
         width: detailDrawerWidth
       },
       paperAnchorDockedRight: {
-        borderRight: "none"
+        border: "none"
       }
     },
     MuiFab: {

styleguide/src/sections/Typography.md

@@ -1,141 +1,82 @@
-The Catalyst uses a small set of typographic styles, which map to key elements and functions in the user interface.
-
-#### Base styles
-
-- Title
-- Heading
-- Sub-heading
-- Body
-- Label
-- Caption
-
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 1.5rem; letter-spacing: 0.03em; color: rgb(80, 85, 88);line-height: 1.25;margin-bottom: 20px;margin-right: 10px;">Title Text</div>
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 1rem; letter-spacing: 0.03em; color: rgb(80, 85, 88);line-height: 1.25;margin-right: 10px;">Heading Text</div>
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 1.125rem; letter-spacing: 0.03em; color: rgb(80, 85, 88);line-height: 1.25; vertical-align: top;">Subheading Text</div>
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 1.125rem; letter-spacing: 0.03em; color: rgb(52, 52, 52);line-height: 1.5;margin-right: 10px;">Body Text</div>
-<div style="width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 0.875rem; letter-spacing: 0.02em; color: rgb(80, 85, 88);line-height: 1.25;margin-right: 10px;">Label Text</div>
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 0.875rem; letter-spacing: 0.02em; color: rgb(179, 179, 179);line-height: 1.25;">Caption Text</div>
-
-##### Choosing a type style
-
-Type styles are generally named for their usage within the UI. The Body text style is the most generic, and is used throughout the UI in various capacities.
-
-#### Type scale
-
-This type scale defines the font sizes that can be used by the default Catalyst theme. Type generally does not exceed 1.5rem/24px.
-
-| rem      | px   | Actual size                                                                                                  |
-| -------- | ---- | ------------------------------------------------------------------------------------------------------------ |
-| 0.75rem  | 12px | <span style="font-family: Source Sans Pro; font-size: 0.75rem">Connecting the world through commerce</span>  |
-| 0.875rem | 14px | <span style="font-family: Source Sans Pro; font-size: 0.875rem">Connecting the world through commerce</span> |
-| 1rem     | 16px | <span style="font-family: Source Sans Pro; font-size: 1rem">Connecting the world through commerce</span>     |
-| 1.125rem | 18px | <span style="font-family: Source Sans Pro; font-size: 1.125rem">Connecting the world through commerce</span> |
-| 1.25rem  | 20px | <span style="font-family: Source Sans Pro; font-size: 1.25rem">Connecting the world through commerce</span>  |
-| 1.5rem   | 24px | <span style="font-family: Source Sans Pro; font-size: 1.5rem">Connecting the world through commerce</span>   |
-| 1.75rem  | 28px | <span style="font-family: Source Sans Pro; font-size: 1.75rem">Connecting the world through commerce</span>  |
-| 2rem     | 32px | <span style="font-family: Source Sans Pro; font-size: 2rem">Connecting the world through commerce</span>     |
-| 2.25rem  | 36px | <span style="font-family: Source Sans Pro; font-size: 2.25rem">Connecting the world through commerce</span>  |
-| 2.625rem | 42px | <span style="font-family: Source Sans Pro; font-size: 2.625em">Connecting the world through commerce</span>  |
-
-#### Type treatments
-
-##### Font weight
-
-The default Catalyst theme uses [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) font in Regular and Bold weights, which can be used to create content hierarchy.
-
-|            | Regular 400                                                                                                            | <span style="font-family: Source Sans Pro; font-weight: 700;">Bold 700</span>                                                         | <span style="font-family: Source Sans Pro; font-weight: 600;">SemiBold 600</span>                                                         |
-| ---------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| Title      | <span style="font-size: 24px; letter-spacing: 0.4px; color: #505558; font-family: Source Sans Pro;">Regular 400</span> | <span style="font-family: Source Sans Pro; font-weight: 700; font-size: 24px; letter-spacing: 0.4px; color: #505558;">Bold 700</span> |                                                                                                                                           |
-| Heading    | <span style="font-size: 16px; letter-spacing: 0.4px; color: #505558; font-family: Source Sans Pro;">Regular 400</span> | <span style="font-family: Source Sans Pro; font-weight: 700; font-size: 16px; letter-spacing: 0.4px; color: #505558;">Bold 700</span> |                                                                                                                                           |
-| Subheading | <span style="font-size: 18px; letter-spacing: 0.4px; color: #505558; font-family: Source Sans Pro;">Regular 400</span> | <span style="font-family: Source Sans Pro; font-weight: 700; font-size: 18px; letter-spacing: 0.4px; color: #505558;">Bold 700</span> |                                                                                                                                           |
-| Body       | <span style="font-size: 16px; letter-spacing: 0.3px; color: #343434; font-family: Source Sans Pro;">Regular 400</span> | <span style="font-family: Source Sans Pro; font-weight: 700; font-size: 16px; letter-spacing: 0.3px; color: #343434;">Bold 700</span> | <span style="font-family: Source Sans Pro; font-weight: 600; font-size: 16px; letter-spacing: 0.3px; color: #343434;">SemiBold 600</span> |
-| Label      | <span style="font-size: 14px; letter-spacing: 0.3px; color: #505558; font-family: Source Sans Pro;">Regular 400</span> | <span style="font-family: Source Sans Pro; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; color: #505558;">Bold 700</span> |                                                                                                                                           |
-| Caption    | <span style="font-size: 14px; letter-spacing: 0.3px; color: #b3b3b3; font-family: Source Sans Pro;">Regular 400</span> | <span style="font-family: Source Sans Pro; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; color: #b3b3b3">Bold 700</span>  |                                                                                                                                           |
-
-Generally used for emphasis, the bold weight shouldn’t be applied to anything longer than short text strings.
-
-##### Line height
-
-Leading, or line-height, is an important factor in the legibility of copy. The default Catalyst theme uses two line heights for text:
-
-- 1.5 for body copy
-- 1.25 for labels, captions, headings, subheadings and titles.
-
-| Line height             | Ratio  |
-| ----------------------- | ------ |
-| Body text               | 1:1.5  |
-| Headers, titles, labels | 1:1.25 |
-
-Body copy benefits from more spacing between lines for improved legibility, while the other styles rarely run for multiple lines and don’t require as much leading.
-
-#### Type styles specs and usage
-
-Here are the typography specs for the default Catalyst theme at a glance. For information about using a custom theme to override these defaults, refer to [Theming Components](./#!/Theming%20Components).
-
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 1.5rem; letter-spacing: 0.03em; color: rgb(80, 85, 88);line-height: 1.25;margin-bottom: 20px;margin-right: 10px;">Title Text</div>
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 1rem; letter-spacing: 0.03em; color: rgb(80, 85, 88);line-height: 1.25;margin-right: 10px;">Heading Text</div>
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 1.125rem; letter-spacing: 0.03em; color: rgb(80, 85, 88);line-height: 1.25; vertical-align: top;">Subheading Text</div>
-<div style="padding-right: 25px; box-sizing: border-box; width: 30%; vertical-align: top; font-family: PostGrotesk-Regular; display: inline-block; margin-right: 10px; margin-bottom: 20px;">
-**Usage**<br><br>
-Use the Title style for top-level admin panel titles.<br><br>
-**Specs**<br><br>
-Weight - Regular<br>
-Size - 1.5rem<br>
-Line height - 1.25<br>
-Character spacing - .03em
+### Overview
+
+All Catalyst components and text use default styles as specified in the Typography component and theme. See the [Material-UI docs for Typography](https://material-ui.com/api/typography/) for more details.
+
+### Types
+
+Use these default types by specifying the correct `variant` from below:
+
+#### Headers
+
+Use headers in the Primary App Bar, the titles of Cards, Inline Alerts, the Confirm Dialog and more. Header text by default is not bolded. Use `fontWeightSemiBold` to add emphasis.
+
+```jsx
+import Typography from "@material-ui/core/Typography";
+import { typography } from '@material-ui/system';
+<div style={{border: "1px solid black", padding: "30px"}}>
+  <Typography variant="h1" gutterBottom>
+  h1. Connecting the world through commerce
+  </Typography>
+  <Typography variant="h2" gutterBottom>
+  h2. Connecting the world through commerce
+  </Typography>
+  <Typography variant="h3" gutterBottom>
+  h3. Connecting the world through commerce
+  </Typography>
+  <Typography variant="h4" gutterBottom>
+  h4. Connecting the world through commerce
+  </Typography>
+  <Typography variant="h5" gutterBottom>
+  h5. Connecting the world through commerce
+  </Typography>
+  <Typography variant="h6" gutterBottom>
+  h6. Connecting the world through commerce
+  </Typography>
 </div>
-
-<div style="padding-right: 25px; box-sizing: border-box; width: 30%; vertical-align: top; font-family: PostGrotesk-Regular; display: inline-block; margin-right: 10px; margin-bottom: 20px;">
-**Usage**<br><br>
-Use the Heading style for card titles.<br><br>
-**Specs**<br><br>
-Weight - Regular<br>
-Size - 1rem<br>
-Line height - 1.25<br>
-Character spacing - .03em
+```
+
+#### Body text
+
+Body text is used in Tables and various Card content.
+
+```jsx
+import Typography from "@material-ui/core/Typography";
+<div style={{border: "1px solid black", padding: "30px"}}>
+  <Typography variant="body1" style={{paddingBottom: "20px"}} >
+  body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
+  unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
+  dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
+  </Typography>
+  <Typography variant="body2" gutterBottom>
+  body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
+  unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
+  dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
+  </Typography>
 </div>
+```
 
-<div style="padding-right: 25px; box-sizing: border-box; width: 30%; vertical-align: top; font-family: PostGrotesk-Regular; display: inline-block; margin-bottom: 20px;">
-**Usage**<br><br>
-Use the Subheading style to denote new sections within cards.<br><br>
-**Specs**<br><br>
-Weight - Regular<br>
-Size - 1.125rem<br>
-Line height - 1.25<br>
-Character spacing - .03em
-</div>
+#### Captions
 
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 1.125rem; letter-spacing: 0.03em; color: rgb(52, 52, 52);line-height: 1.5;margin-right: 10px;">Body Text</div>
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 0.875rem; letter-spacing: 0.02em; color: rgb(80, 85, 88);line-height: 1.25;margin-right: 10px;">Label Text</div>
-<div style="vertical-align: top; width: 30%; height: 120px; padding-top: 40px; border: 4px solid rgb(247, 247, 247); text-align: center; box-sizing: border-box; display: inline-block; font-size: 0.875rem; letter-spacing: 0.02em; color: rgb(179, 179, 179);line-height: 1.25;">Caption Text</div>
-<div style="padding-right: 25px; box-sizing: border-box; vertical-align: top; width: 30%; vertical-align: top; font-family: PostGrotesk-Regular; display: inline-block; margin-right: 10px; margin-top: 20px;">
-**Usage**<br><br>
-The Body text style is used widely throughout the UI. Any text that isn’t a title, heading, subheading, label or caption would generally use the Body style.
-<br><br>
-**Specs**<br><br>
-Weight - Regular<br>
-Size - 1rem<br>
-Line height - 1.5<br>
-Character spacing - .03em
-</div>
+Captions are used in Chips and help text under form fields, often in a lighter color.
 
-<div style="padding-right: 25px; box-sizing: border-box; width: 30%; vertical-align: top; font-family: PostGrotesk-Regular; display: inline-block; margin-right: 10px; margin-top: 20px;">
-**Usage**<br><br>
-Use labels with form field and input elements to signify the element’s function to the user.<br><br>
-**Specs**<br><br>
-Weight - Regular<br>
-Size - .875rem<br>
-Line height - 1.25<br>
-Character spacing - .02em
+```jsx
+import Typography from "@material-ui/core/Typography";
+<div style={{border: "1px solid black", padding: "30px"}}>
+  <Typography variant="caption" gutterBottom>
+    caption text
+  </Typography>
 </div>
+```
+
+#### Buttons
+
+Button text always uses font weight of semibold, unless it is a text-only button. Button text can be in dark colors, or white.
 
-<div style="padding-right: 25px; box-sizing: border-box; width: 30%; vertical-align: top; font-family: PostGrotesk-Regular; display: inline-block; margin-top: 20px;">
-**Usage**<br><br>
-Use the Caption style for help/hint text. It’s used with some form fields which require a description, and can also be used stand-alone within a card when necessary.
-<br><br>
-**Specs**<br><br>
-Weight - Regular<br>
-Size - .875rem<br>
-Line height - 1.25<br>
-Character spacing - .02em
+```jsx
+import Typography from "@material-ui/core/Typography";
+<div style={{border: "1px solid black", padding: "30px"}}>
+  <Typography variant="button" gutterBottom>
+    Button
+  </Typography>
 </div>
+```