feat: add labs theme

packages/odyssey-react-labs/src/index.ts

@@ -16,3 +16,5 @@ export type {
   DatePickerProps,
   LocalizationProviderProps,
 } from "@mui/x-date-pickers";
+
+export * from "./theme";

packages/odyssey-react-labs/src/theme/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,33 @@
+/*!
+ * 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 {
+  ComponentsProps,
+  ComponentsOverrides,
+  ComponentsVariants,
+  Theme,
+} from "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Components {
+    MuiPickersDay?: {
+      defaultProps?: ComponentsProps["MuiStepContent"];
+      styleOverrides?: ComponentsOverrides<Theme>["MuiStepContent"];
+      variants?: ComponentsVariants["MuiStepContent"];
+    };
+    PrivatePickersYear?: {
+      defaultProps?: ComponentsProps["MuiStepContent"];
+      styleOverrides?: ComponentsOverrides<Theme>["MuiStepContent"];
+      variants?: ComponentsVariants["MuiStepContent"];
+    };
+  }
+}

packages/odyssey-react-labs/src/theme/components/DatePicker/datePickerTheme.ts

@@ -0,0 +1,40 @@
+/*!
+ * 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/styles";
+
+export const datePickerTheme: ThemeOptions["components"] = {
+  MuiPickersDay: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        "&:focus, &:hover": {
+          backgroundColor: theme.palette.primary.main,
+        },
+        " &.Mui-selected:focus, &.Mui-selected:hover": {
+          backgroundColor: theme.palette.primary.main,
+        },
+      }),
+    },
+  },
+  PrivatePickersYear: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        "& > button:focus, & > button:hover": {
+          backgroundColor: theme.palette.primary.main,
+        },
+        " & > button.Mui-selected:focus, & > button.Mui-selected:hover": {
+          backgroundColor: theme.palette.primary.main,
+        },
+      }),
+    },
+  },
+};

packages/odyssey-react-labs/src/theme/components/index.ts

@@ -0,0 +1,19 @@
+/*!
+ * 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/styles";
+
+import { datePickerTheme } from "./DatePicker/datePickerTheme";
+
+export const components: ThemeOptions["components"] = {
+  ...datePickerTheme,
+};

packages/odyssey-react-labs/src/theme/index.ts

@@ -0,0 +1,13 @@
+/*!
+ * 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.
+ */
+
+export { theme as labsTheme } from "./theme";

packages/odyssey-react-labs/src/theme/theme.ts

@@ -0,0 +1,19 @@
+/*!
+ * 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/styles";
+
+import { components } from "./components";
+
+export const theme: ThemeOptions = {
+  components,
+};

packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx

@@ -12,15 +12,19 @@
 
 import React from "react";
 import type { Story } from "@storybook/react";
-import { InputBase, InputBaseProps } from "@okta/odyssey-react-mui";
+import {
+  InputBase,
+  InputBaseProps,
+  OdysseyThemeProvider,
+} from "@okta/odyssey-react-mui";
 import {
   AdapterDateFns,
   DatePicker,
   DatePickerProps,
   LocalizationProvider,
 } from "@okta/odyssey-react-labs";
-import { MuiThemeDecorator } from "../../../../.storybook/components/MuiThemeDecorator";
 
+import { labsTheme } from "../../../../../odyssey-react-labs/src";
 import DatePickerMdx from "./DatePicker.mdx";
 
 export default {
@@ -61,21 +65,22 @@ export default {
       defaultValue: null,
     },
   },
-  decorators: [MuiThemeDecorator],
 };
 
 const Template: Story<DatePickerProps<unknown, unknown>> = (props) => {
-  const [value, setValue] = React.useState<unknown | null>(null);
+  const [value, setValue] = React.useState<unknown>(Date.now());
   const datePickerProps = {
     ...props,
     value,
     onChange: (newValue: unknown) => setValue(newValue),
   };
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <DatePicker {...datePickerProps} />
-    </LocalizationProvider>
+    <OdysseyThemeProvider customTheme={labsTheme}>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <DatePicker {...datePickerProps} />
+      </LocalizationProvider>
+    </OdysseyThemeProvider>
   );
 };