From 83039460cf45fe5506df379d39fb67e27868bc9a Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 19 Aug 2019 17:16:40 -0700 Subject: [PATCH 01/10] docs(typography): first pass at adding letterspacing variables Signed-off-by: Machiko Yasuda --- package/src/theme/defaultTheme.js | 49 +++++-- styleguide/src/sections/Typography.md | 184 ++++++-------------------- 2 files changed, 84 insertions(+), 149 deletions(-) diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js index e8f20a38..eeaf2604 100644 --- a/package/src/theme/defaultTheme.js +++ b/package/src/theme/defaultTheme.js @@ -26,7 +26,28 @@ export const fontWeightSemiBold = 600; export const fontWeightBold = 700; // Typography - Letter-spacing -export const captionLetterSpacing = 0.28; +const captionLetterSpacing = 0.28; +// const captionBoldLetterSpacing = 0.28; +const body2LetterSpacing = 0.28; +// const body2BoldLetterSpacing = 0.28; +const body1LetterSpacing = 0.3; +const body1BoldLetterSpacing = 0.3; +const subtitle2LetterSpacing = 0.24; +// const subtitle2BoldLetterSpacing = 0.24; +const subtitle1LetterSpacing = 0.26; +// const subtitle1BoldLetterSpacing = 0.26; +const h6LetterSpacing = 0.24; +// const h6BoldLetterSpacing = 0.24; +const h5LetterSpacing = 0.5; +// const h5BoldLetterSpacing = 0.5; +const h4LetterSpacing = 0.5; +// const h4BoldLetterSpacing = 0.5; +const h3LetterSpacing = 0.42; +// const h3BoldLetterSpacing = 0.42; +const h2LetterSpacing = 0.35; +// const h2BoldLetterSpacing = 0.35; +const h1LetterSpacing = 0.42; +// const h1BoldLetterSpacing = 0.42; // Icons export const smallFontIconSize = 17; @@ -66,51 +87,59 @@ export const rawMuiTheme = { useNextVariants: true, button: { fontSize: defaultFontSize, - letterSpacing: 0.3, - fontWeight: fontWeightSemiBold + fontWeight: fontWeightSemiBold, + letterSpacing: body1BoldLetterSpacing }, 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, 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, @@ -118,11 +147,13 @@ export const rawMuiTheme = { }, subtitle1: { fontSize: defaultFontSize * 0.875, - lineHeight: 1.5 + letterSpacing: subtitle1LetterSpacing, + lineHeight: 1.71 }, subtitle2: { fontSize: defaultFontSize * 0.75, - lineHeight: 1.5 + letterSpacing: subtitle2LetterSpacing, + lineHeight: 1.46 } }, shadows: [ @@ -194,7 +225,7 @@ export const rawMuiTheme = { } }, MuiDialogContentText: { - color: "inherit" + color: colors.coolGrey500 } }, // Override defined theme properties diff --git a/styleguide/src/sections/Typography.md b/styleguide/src/sections/Typography.md index c2ab429e..678382f2 100644 --- a/styleguide/src/sections/Typography.md +++ b/styleguide/src/sections/Typography.md @@ -1,141 +1,45 @@ -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 - -
Title Text
-
Heading Text
-
Subheading Text
-
Body Text
-
Label Text
-
Caption Text
- -##### 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 | Connecting the world through commerce | -| 0.875rem | 14px | Connecting the world through commerce | -| 1rem | 16px | Connecting the world through commerce | -| 1.125rem | 18px | Connecting the world through commerce | -| 1.25rem | 20px | Connecting the world through commerce | -| 1.5rem | 24px | Connecting the world through commerce | -| 1.75rem | 28px | Connecting the world through commerce | -| 2rem | 32px | Connecting the world through commerce | -| 2.25rem | 36px | Connecting the world through commerce | -| 2.625rem | 42px | Connecting the world through commerce | - -#### 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 | Bold 700 | SemiBold 600 | -| ---------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| Title | Regular 400 | Bold 700 | | -| Heading | Regular 400 | Bold 700 | | -| Subheading | Regular 400 | Bold 700 | | -| Body | Regular 400 | Bold 700 | SemiBold 600 | -| Label | Regular 400 | Bold 700 | | -| Caption | Regular 400 | Bold 700 | | - -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). - -
Title Text
-
Heading Text
-
Subheading Text
-
-**Usage**

-Use the Title style for top-level admin panel titles.

-**Specs**

-Weight - Regular
-Size - 1.5rem
-Line height - 1.25
-Character spacing - .03em -
- -
-**Usage**

-Use the Heading style for card titles.

-**Specs**

-Weight - Regular
-Size - 1rem
-Line height - 1.25
-Character spacing - .03em -
- -
-**Usage**

-Use the Subheading style to denote new sections within cards.

-**Specs**

-Weight - Regular
-Size - 1.125rem
-Line height - 1.25
-Character spacing - .03em -
- -
Body Text
-
Label Text
-
Caption Text
-
-**Usage**

-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. -

-**Specs**

-Weight - Regular
-Size - 1rem
-Line height - 1.5
-Character spacing - .03em -
- -
-**Usage**

-Use labels with form field and input elements to signify the element’s function to the user.

-**Specs**

-Weight - Regular
-Size - .875rem
-Line height - 1.25
-Character spacing - .02em -
- -
-**Usage**

-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. -

-**Specs**

-Weight - Regular
-Size - .875rem
-Line height - 1.25
-Character spacing - .02em +```jsx noeditor +import Typography from "@material-ui/core/Typography"; +
+ + h1. Connecting the world through commerce + + + h2. Connecting the world through commerce + + + h3. Connecting the world through commerce + + + h4. Connecting the world through commerce + + + h5. Connecting the world through commerce + + + h6. Connecting the world through commerce + + + subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + + + subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + + + 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. + + + 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. + + + button text + + + caption text +
+``` \ No newline at end of file From 338ae89c1c5f9d46953e4af43bf0034e145ad71b Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 19 Aug 2019 20:13:29 -0700 Subject: [PATCH 02/10] chore: try inherit again Signed-off-by: Machiko Yasuda --- package/src/theme/defaultTheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js index eeaf2604..4f883ef2 100644 --- a/package/src/theme/defaultTheme.js +++ b/package/src/theme/defaultTheme.js @@ -225,7 +225,7 @@ export const rawMuiTheme = { } }, MuiDialogContentText: { - color: colors.coolGrey500 + color: "inherit" } }, // Override defined theme properties From 2b761769f49e79cabef9066d723f241a52bbfaa5 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 19 Aug 2019 20:54:03 -0700 Subject: [PATCH 03/10] docs(typography): space out examples Signed-off-by: Machiko Yasuda --- package/src/theme/defaultTheme.js | 4 +- styleguide/src/sections/Typography.md | 72 +++++++++++++++++++++++---- 2 files changed, 65 insertions(+), 11 deletions(-) diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js index 4f883ef2..61b43dbd 100644 --- a/package/src/theme/defaultTheme.js +++ b/package/src/theme/defaultTheme.js @@ -88,7 +88,9 @@ export const rawMuiTheme = { button: { fontSize: defaultFontSize, fontWeight: fontWeightSemiBold, - letterSpacing: body1BoldLetterSpacing + letterSpacing: body1BoldLetterSpacing, + lineHeight: 1.5, + textTransform: "capitalize" }, h1: { color: colors.coolGrey500, diff --git a/styleguide/src/sections/Typography.md b/styleguide/src/sections/Typography.md index 678382f2..7c1be62c 100644 --- a/styleguide/src/sections/Typography.md +++ b/styleguide/src/sections/Typography.md @@ -1,6 +1,10 @@ +#### Headers + +Use headers in the titles of Cards, sections, blah blah. Headers can have be used with font weight bold. + ```jsx noeditor import Typography from "@material-ui/core/Typography"; -
+
h1. Connecting the world through commerce @@ -19,27 +23,75 @@ import Typography from "@material-ui/core/Typography"; h6. Connecting the world through commerce - - subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur - - - subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur - +
+``` + +#### Body text + +Use body text in the content of Cards, blah blah blah. Body text 1 is used in blah, while 2 is used in blah blah. + +```jsx noeditor +import Typography from "@material-ui/core/Typography"; +
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. +
+``` + +```jsx noeditor +import Typography from "@material-ui/core/Typography"; +
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. - - button text +
+``` + +#### Subtitles + +Use subtitles as blah blah blah. + +```jsx noeditor +import Typography from "@material-ui/core/Typography"; +
+ + subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur +
+``` + +```jsx noeditor +import Typography from "@material-ui/core/Typography"; +
+ + subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + +
+``` + +#### Captions + +```jsx noeditor +import Typography from "@material-ui/core/Typography"; +
- caption text + caption text + +
+``` + +#### Buttons + +```jsx noeditor +import Typography from "@material-ui/core/Typography"; +
+ + Button
``` \ No newline at end of file From a74b82552247df15431808482506c073f447df98 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Tue, 20 Aug 2019 12:54:34 -0700 Subject: [PATCH 04/10] fix(typography): remove semibold fontweight varaiables Signed-off-by: Machiko Yasuda --- package/src/theme/defaultTheme.js | 24 ++++------- styleguide/src/sections/Typography.md | 59 ++++++++++----------------- 2 files changed, 30 insertions(+), 53 deletions(-) diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js index 61b43dbd..a5b38f25 100644 --- a/package/src/theme/defaultTheme.js +++ b/package/src/theme/defaultTheme.js @@ -27,27 +27,17 @@ export const fontWeightBold = 700; // Typography - Letter-spacing const captionLetterSpacing = 0.28; -// const captionBoldLetterSpacing = 0.28; const body2LetterSpacing = 0.28; -// const body2BoldLetterSpacing = 0.28; const body1LetterSpacing = 0.3; const body1BoldLetterSpacing = 0.3; const subtitle2LetterSpacing = 0.24; -// const subtitle2BoldLetterSpacing = 0.24; const subtitle1LetterSpacing = 0.26; -// const subtitle1BoldLetterSpacing = 0.26; const h6LetterSpacing = 0.24; -// const h6BoldLetterSpacing = 0.24; const h5LetterSpacing = 0.5; -// const h5BoldLetterSpacing = 0.5; const h4LetterSpacing = 0.5; -// const h4BoldLetterSpacing = 0.5; const h3LetterSpacing = 0.42; -// const h3BoldLetterSpacing = 0.42; const h2LetterSpacing = 0.35; -// const h2BoldLetterSpacing = 0.35; const h1LetterSpacing = 0.42; -// const h1BoldLetterSpacing = 0.42; // Icons export const smallFontIconSize = 17; @@ -67,6 +57,7 @@ export const rawMuiTheme = { }, divider: colors.black10, text: { + primary: colors.coolGrey500, secondary: colors.black60, secondaryActive: colors.white, active: "#8acef2" @@ -113,26 +104,23 @@ export const rawMuiTheme = { 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, letterSpacing: h6LetterSpacing, lineHeight: 1.46 }, body1: { - color: colors.black70, + color: colors.coolGrey500, fontSize: defaultFontSize, letterSpacing: body1LetterSpacing, lineHeight: 1.5 @@ -144,15 +132,19 @@ export const rawMuiTheme = { 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, letterSpacing: subtitle1LetterSpacing, lineHeight: 1.71 }, subtitle2: { + color: colors.coolGrey500, fontSize: defaultFontSize * 0.75, letterSpacing: subtitle2LetterSpacing, lineHeight: 1.46 diff --git a/styleguide/src/sections/Typography.md b/styleguide/src/sections/Typography.md index 7c1be62c..35b017d9 100644 --- a/styleguide/src/sections/Typography.md +++ b/styleguide/src/sections/Typography.md @@ -1,11 +1,20 @@ +### 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 titles of Cards, sections, blah blah. Headers can have be used with font weight bold. +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 noeditor +```jsx import Typography from "@material-ui/core/Typography"; +import { typography } from '@material-ui/system';
- + h1. Connecting the world through commerce @@ -28,22 +37,16 @@ import Typography from "@material-ui/core/Typography"; #### Body text -Use body text in the content of Cards, blah blah blah. Body text 1 is used in blah, while 2 is used in blah blah. +Body text is used in Tables and various Card content. -```jsx noeditor +```jsx import Typography from "@material-ui/core/Typography";
- + 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. -
-``` - -```jsx noeditor -import Typography from "@material-ui/core/Typography"; -
body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam @@ -52,33 +55,13 @@ import Typography from "@material-ui/core/Typography";
``` -#### Subtitles +#### Captions -Use subtitles as blah blah blah. +Captions are used in Chips and help text under form fields, often in a lighter color. -```jsx noeditor +```jsx import Typography from "@material-ui/core/Typography";
- - subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur - -
-``` - -```jsx noeditor -import Typography from "@material-ui/core/Typography"; -
- - subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur - -
-``` - -#### Captions - -```jsx noeditor -import Typography from "@material-ui/core/Typography"; -
caption text @@ -87,9 +70,11 @@ import Typography from "@material-ui/core/Typography"; #### Buttons -```jsx noeditor +Button text always uses font weight of semibold, unless it is a text-only button. Button text can be in dark colors, or white. + +```jsx import Typography from "@material-ui/core/Typography"; -
+
Button From a704c1816591f7b5cbbdba55b846d9aa14b13e2b Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Wed, 21 Aug 2019 17:27:43 -0700 Subject: [PATCH 05/10] test(select): update snapshot Signed-off-by: Machiko Yasuda --- package/src/components/Select/__snapshots__/Select.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/components/Select/__snapshots__/Select.test.js.snap b/package/src/components/Select/__snapshots__/Select.test.js.snap index 8e6743f1..0fe7dbb1 100644 --- a/package/src/components/Select/__snapshots__/Select.test.js.snap +++ b/package/src/components/Select/__snapshots__/Select.test.js.snap @@ -28,7 +28,7 @@ exports[`basic snapshot test 1`] = ` Select options

Date: Thu, 22 Aug 2019 10:52:29 -0700 Subject: [PATCH 06/10] refactor(theme): export letterspacing variables Signed-off-by: Machiko Yasuda --- package/src/theme/defaultTheme.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js index a5b38f25..6478d0a1 100644 --- a/package/src/theme/defaultTheme.js +++ b/package/src/theme/defaultTheme.js @@ -26,18 +26,18 @@ export const fontWeightSemiBold = 600; export const fontWeightBold = 700; // Typography - Letter-spacing -const captionLetterSpacing = 0.28; -const body2LetterSpacing = 0.28; -const body1LetterSpacing = 0.3; -const body1BoldLetterSpacing = 0.3; -const subtitle2LetterSpacing = 0.24; -const subtitle1LetterSpacing = 0.26; -const h6LetterSpacing = 0.24; -const h5LetterSpacing = 0.5; -const h4LetterSpacing = 0.5; -const h3LetterSpacing = 0.42; -const h2LetterSpacing = 0.35; -const h1LetterSpacing = 0.42; +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; From 2fb5e6c88cd1d4358bdd319aa41e4fd591595bc1 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 22 Aug 2019 11:03:55 -0700 Subject: [PATCH 07/10] fix(splitbutton): add body1 typography to splitbutton Signed-off-by: Machiko Yasuda --- package/src/components/SplitButton/SplitButton.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package/src/components/SplitButton/SplitButton.js b/package/src/components/SplitButton/SplitButton.js index 1b7c84c6..56a12a2b 100644 --- a/package/src/components/SplitButton/SplitButton.js +++ b/package/src/components/SplitButton/SplitButton.js @@ -119,6 +119,9 @@ const SplitButton = React.forwardRef(function SplitButton(props, ref) { From e30e6321feda9dd8512a1a7e24040c020b1d95e4 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 22 Aug 2019 11:28:12 -0700 Subject: [PATCH 08/10] fix(sidebar): sidebar in admin should not have border on mobile/tablet Signed-off-by: Machiko Yasuda --- package/src/theme/defaultTheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js index 6478d0a1..781dbc4e 100644 --- a/package/src/theme/defaultTheme.js +++ b/package/src/theme/defaultTheme.js @@ -397,7 +397,7 @@ export const rawMuiTheme = { width: detailDrawerWidth }, paperAnchorDockedRight: { - borderRight: "none" + border: "none" } }, MuiFab: { From cf7dab80e10ea7b287b5be7d8401cb385ba85599 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 22 Aug 2019 11:44:46 -0700 Subject: [PATCH 09/10] refactor(listitemtext): set body1 as type for all listitemtext Signed-off-by: Machiko Yasuda --- package/src/components/SplitButton/SplitButton.js | 3 --- package/src/theme/defaultTheme.js | 5 +++++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package/src/components/SplitButton/SplitButton.js b/package/src/components/SplitButton/SplitButton.js index 56a12a2b..1b7c84c6 100644 --- a/package/src/components/SplitButton/SplitButton.js +++ b/package/src/components/SplitButton/SplitButton.js @@ -119,9 +119,6 @@ const SplitButton = React.forwardRef(function SplitButton(props, ref) { diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js index 781dbc4e..a802e320 100644 --- a/package/src/theme/defaultTheme.js +++ b/package/src/theme/defaultTheme.js @@ -220,6 +220,11 @@ export const rawMuiTheme = { }, MuiDialogContentText: { color: "inherit" + }, + MuiListItemText: { + primaryTypographyProps: { + variant: "body1" + } } }, // Override defined theme properties From 8aabab7ab1e2abd740ddcacbba2a7e21eef3b31c Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 22 Aug 2019 13:20:44 -0700 Subject: [PATCH 10/10] fix(sidebar): remove border on mobile/tablet Signed-off-by: Machiko Yasuda --- package/src/theme/defaultTheme.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js index a802e320..2ebf539f 100644 --- a/package/src/theme/defaultTheme.js +++ b/package/src/theme/defaultTheme.js @@ -389,15 +389,15 @@ 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 },