Skip to content

Commit

Permalink
feat(odyssey-react-mui): add component themes, update palette + type
Browse files Browse the repository at this point in the history
edburyenegren-okta committed Jun 9, 2022
1 parent e3cf80f commit c4fd294
Showing 4 changed files with 105 additions and 28 deletions.
49 changes: 49 additions & 0 deletions packages/odyssey-react-mui/src/themes/odyssey/components.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*!
* Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
*
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*
* See the License for the specific language governing permissions and limitations under the License.
*/

import type { ThemeOptions } from "@mui/material";

export const components: ThemeOptions["components"] = {
MuiCssBaseline: {
styleOverrides: {
boxSizing: "border-box",
},
},
MuiFormLabel: {
styleOverrides: {
root: {
color: "#1d1d21",
lineHeight: "1.42857143",
fontSize: "1rem",
fontWeight: 600,
},
},
},
MuiInputBase: {
styleOverrides: {
root: {
lineHeight: "1.14285714",
},
input: {
boxSizing: "border-box",
height: "auto",
},
},
},
MuiTypography: {
styleOverrides: {
paragraph: {
marginBottom: "1.14285714rem",
},
},
},
};
8 changes: 4 additions & 4 deletions packages/odyssey-react-mui/src/themes/odyssey/palette.ts
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ export const palette: ThemeOptions["palette"] = {
},
primary: {
light: "#a7b5ec",
main: "#ff4400",
main: "#1662dd",
dark: "#00297a",
contrastText: "#ffffff",
},
@@ -43,9 +43,9 @@ export const palette: ThemeOptions["palette"] = {
contrastText: "#1d1d21",
},
info: {
light: "#80C7CA",
main: "#2D8C9E",
dark: "#004650",
light: "#a7b5ec",
main: "#1662dd",
dark: "#00297a",
contrastText: "#ffffff",
},
success: {
9 changes: 8 additions & 1 deletion packages/odyssey-react-mui/src/themes/odyssey/theme.ts
Original file line number Diff line number Diff line change
@@ -16,5 +16,12 @@ import { palette } from "./palette";
import { shape } from "./shape";
import { spacing } from "./spacing";
import { typography } from "./typography";
import { components } from "./components";

export const theme = createTheme({ palette, shape, spacing, typography });
export const theme = createTheme({
palette,
shape,
spacing,
typography,
components,
});
67 changes: 44 additions & 23 deletions packages/odyssey-react-mui/src/themes/odyssey/typography.ts
Original file line number Diff line number Diff line change
@@ -24,82 +24,103 @@ export const typography: ThemeOptions["typography"] = {
h1: {
fontFamily:
"'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
fontWeight: "600",
fontWeight: 600,
fontSize: "2.571rem",
lineHeight: "1.25",
letterSpacing: "initial",
marginBottom: "0.57142857rem",
},
h2: {
fontFamily:
"'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
fontWeight: "600",
fontWeight: 600,
fontSize: "2.286rem",
lineHeight: "1.28571429",
letterSpacing: "initial",
marginBottom: "0.57142857rem",
},
h3: {
fontFamily:
"'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
fontWeight: "600",
fontWeight: 600,
fontSize: "2rem",
lineHeight: "1.28",
letterSpacing: "initial",
marginBottom: "0.57142857rem",
},
h4: {
fontFamily:
"'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
fontWeight: "600",
fontWeight: 600,
fontSize: "1.571rem",
lineHeight: "1.27272727",
letterSpacing: "initial",
marginBottom: "0.57142857rem",
},
h5: {
fontFamily:
"'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
fontWeight: "600",
fontWeight: 600,
fontSize: "1.286rem",
lineHeight: "1.333333333",
letterSpacing: "initial",
marginBottom: "0.57142857rem",
},
h6: {
fontFamily:
"'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
fontWeight: "600",
fontWeight: 600,
fontSize: "1.143rem",
lineHeight: "1.25",
letterSpacing: "initial",
marginBottom: "0.57142857rem",
},
//subtitle1: undefined,
//subtitle2: undefined,
body1: {
subtitle1: undefined,
subtitle2: undefined,
body: {
fontFamily:
"'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
fontWeight: "400",
fontWeight: 400,
fontSize: "1rem",
lineHeight: "1.42857143",
letterSpacing: "initial",
},
//body2: undefined,
//button: undefined,
body1: undefined,
body2: undefined,
button: undefined,
caption: {
fontFamily:
"'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
fontWeight: "400",
fontWeight: 400,
fontSize: "0.875rem",
lineHeight: "1.42857143",
letterSpacing: "initial",
},
//overline: undefined,
overline: undefined,
};

// Update the Typography's variant prop options
// Unsure where we want to store this
//declare module "@mui/material/Typography" {
//interface TypographyPropsVariantOverrides {
//subtitle1: false;
//subtitle2: false;
//body2: false;
//button: false;
//overline: false;
//}
//}
declare module "@mui/material/styles" {
interface TypographyVariants {
body: React.CSSProperties;
}

// allow configuration using `createTheme`
interface TypographyVariantsOptions {
body?: React.CSSProperties;
}
}

// Update the Typography's variant prop options
declare module "@mui/material/Typography" {
interface TypographyPropsVariantOverrides {
body1: false;
body2: false;
body: true;
button: false;
overline: false;
subtitle1: false;
subtitle2: false;
}
}

0 comments on commit c4fd294

Please sign in to comment.