From eac2ce24a75863d9771c082bedf82861d128b62e Mon Sep 17 00:00:00 2001 From: Noel Chou Date: Wed, 27 Nov 2024 17:53:18 -0600 Subject: [PATCH 1/4] MUI theming colors --- .../language-chooser-react-mui/README.md | 6 +- .../src/CustomizeLanguageButton.tsx | 24 ++- .../src/CustomizeLanguageDialog.tsx | 8 +- .../src/FormFieldLabel.tsx | 13 +- .../src/LanguageCard.tsx | 13 +- .../src/LanguageChooser.tsx | 111 +++++++----- .../src/OptionCard.tsx | 22 ++- .../src/ScriptCard.tsx | 10 +- .../language-chooser-react-mui/src/colors.ts | 7 - .../src/demos/DialogDemo.stories.tsx | 13 ++ .../src/demos/DialogDemo.tsx | 159 ++++++++++-------- .../src/demos/LanguageChooserDialog.tsx | 117 ++++++------- 12 files changed, 290 insertions(+), 213 deletions(-) delete mode 100644 components/language-chooser/react/language-chooser-react-mui/src/colors.ts diff --git a/components/language-chooser/react/language-chooser-react-mui/README.md b/components/language-chooser/react/language-chooser-react-mui/README.md index df4cd3e..01892b7 100644 --- a/components/language-chooser/react/language-chooser-react-mui/README.md +++ b/components/language-chooser/react/language-chooser-react-mui/README.md @@ -19,10 +19,12 @@ Install with npm: npm i @ethnolib/language-chooser-react-mui ``` -### Sizing +### Sizing and Colors The LanguageChooser will grow to fit the size of its parent. Height and width should be set on the parent. An explicit size should be set on its parent. Our recommended size is 1084x586 (to fit on a low-end notebook with windows task bar) but it will work in a variety of sizes. +The Language Chooser will adopt the primary color of the [MUI theme](https://mui.com/material-ui/customization/theming/) and by default derive the card colors from the primary color. This can be overriden with the `languageCardBackgroundColorOverride` and `scriptCardBackgroundColorOverride` props. + ### Props - `searchResultModifier: ( @@ -42,6 +44,8 @@ The LanguageChooser will grow to fit the size of its parent. Height and width sh - `onSelectionChange?: (orthographyInfo: IOrthography | undefined, languageTag: string | undefined) => void` - Whenever the user makes or unselects a complete language selection, this function will be called with the selected language information or undefined, respectively. - `rightPanelComponent?: React.ReactNode` - A slot for a component to go in the space on the upper right side of the language chooser. See the Storybook Dialog Demo -> Additional Right Panel Component for an example. - `actionButtons?: React.ReactNode` - A slot for dialog action buttons, e.g. Ok and Cancel. See the [LanguageChooserDialog.tsx](./src/demos/LanguageChooserDialog.tsx) example. +- `languageCardBackgroundColorOverride?: string` - The language chooser will adopt the primary color of the MUI theme. By default, it will make the language card backgrounds be the primary color but 70% lighter. If provided, this prop will override this background color behavior. See the Storybook Dialog Demo -> withCardBackgroundColorOverrides for an example. +- `scriptCardBackgroundColorOverride?: string` - The language chooser will adopt the primary color of the MUI theme. By default, it will make the script card backgrounds be the primary color but 88% lighter. If provided, this prop will override this background color behavior. See the Storybook Dialog Demo -> withCardBackgroundColorOverrides for an example. ### Demos diff --git a/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx b/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx index 8cb11d2..d6dc273 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx @@ -1,9 +1,14 @@ /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; -import { Button, ButtonProps, Tooltip, Typography } from "@mui/material"; +import { + Button, + ButtonProps, + Tooltip, + Typography, + useTheme, +} from "@mui/material"; import EditIcon from "@mui/icons-material/Edit"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; -import { COLORS } from "./colors"; export const CustomizeLanguageButton: React.FunctionComponent< { @@ -15,16 +20,17 @@ export const CustomizeLanguageButton: React.FunctionComponent< forUnlistedLanguage: showAsUnlistedLanguage, ...buttonProps }) => { + const theme = useTheme(); return ( - + + + Language Display Name:{" "} + {selectedValue?.customDetails?.displayName} +
+ Language Code: {selectedValue?.language?.languageSubtag} +
+ Script: {selectedValue?.script?.name} +
+ Region: {selectedValue?.customDetails?.region?.name} +
+ Dialect: {selectedValue?.customDetails?.dialect} +
+ Language tag: {languageTag} + + +
+ + - - ) : undefined - } - /> + : undefined + } + {...languageChooserDialogProps} + /> + - + ); }; diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/LanguageChooserDialog.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/LanguageChooserDialog.tsx index fa6f894..23b828a 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/demos/LanguageChooserDialog.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/LanguageChooserDialog.tsx @@ -1,15 +1,17 @@ /** @jsxImportSource @emotion/react */ -import { css, ThemeProvider } from "@emotion/react"; +import { css } from "@emotion/react"; -import { AppBar, Button, Dialog, Toolbar, Typography } from "@mui/material"; +import { + AppBar, + Button, + Dialog, + Toolbar, + Typography, + useTheme, +} from "@mui/material"; -import { COLORS } from "../colors"; import "../styles.css"; -import { - ILanguageChooserProps, - LanguageChooser, - languageChooserMuiTheme, -} from "../LanguageChooser"; +import { ILanguageChooserProps, LanguageChooser } from "../LanguageChooser"; import { IOrthography, parseLangtagFromLangChooser, @@ -49,6 +51,7 @@ export const LanguageChooserDialog: React.FunctionComponent< setPendingSelection(orthographyInfo || ({} as IOrthography)); setPendingLanguageTag(languageTag || ""); } + const theme = useTheme(); const dialogActionButtons = (
- +
-
- - - - Choose Language - - - - -
-
- + Choose Language + + + + +
+ ); }; From bdaab35049ade81ae28097fa5f1bd54492a49340 Mon Sep 17 00:00:00 2001 From: Noel Chou Date: Sat, 7 Dec 2024 14:11:02 -0500 Subject: [PATCH 2/4] storybook improvements --- .../src/LanguageChooser.tsx | 1 - .../src/demos/DialogDemo.stories.tsx | 14 +- .../src/demos/DummyRightPanelComponent.tsx | 3 +- .../src/demos/PageDemo.tsx | 278 ++++++------------ .../src/demos/ThemeDemo.stories.tsx | 11 + .../src/demos/ThemeDemo.tsx | 149 ++++++++++ 6 files changed, 261 insertions(+), 195 deletions(-) create mode 100644 components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.stories.tsx create mode 100644 components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx diff --git a/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx b/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx index 6e62444..5a04833 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx @@ -215,7 +215,6 @@ export const LanguageChooser: React.FunctionComponent = ( ...originalTheme.palette, primary: { ...originalTheme.palette.primary, - main: primaryMainColor, // mui palettes have a "light" also, but for the card backgrounds we want very light colors, lighter than "light" usually is lighter: props.languageCardBackgroundColorOverride || diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.stories.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.stories.tsx index 51a30b3..67dd90c 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.stories.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.stories.tsx @@ -50,13 +50,6 @@ export const AdditionalRightPanelComponent: Story = { }, }; -export const InASmallDialog: Story = { - args: { - dialogHeight: "350px", - dialogWidth: "650px", - }, -}; - export const withMuiThemePrimaryColor: Story = { args: { primaryColor: "#1d94a4", @@ -69,3 +62,10 @@ export const withCardBackgroundColorOverrides: Story = { scriptCardBackgroundColorOverride: "#ebe9b2", }, }; + +export const InTooSmallDialog: Story = { + args: { + dialogHeight: "350px", + dialogWidth: "650px", + }, +}; diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx index 75ef2e7..5dbbc16 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx @@ -19,7 +19,8 @@ export const DummyRightPanelComponent: React.FunctionComponent = () => { `} > - Space here to add another component. For example, a font picker. + This language chooser component allows you to add other components you + might need in this area. For example, a font picker. Font: { const [languageTag, setLanguageTag] = React.useState(""); + const [height, setHeight] = React.useState(500); + const [width, setWidth] = React.useState(900); + const mainSectionHeight = `${height}px`; + const languageChooserWidth = `${width}px`; return (
- - - + This demonstrates the Language Chooser in a non-dialog context. It + should be responsive to size changes. + +
+
- Settings - - - - + Adjust Height: + setHeight(value as number)} + /> +
+
+ Adjust Width: + setWidth(value as number)} + /> +
+
+
-
- Font: - -
- Roboto Mono -
- - -
- Serif -
- - -
- Sans-serif -
- -
-
+ >
- - Language: - { />
- Color: - - - - } - label="Red" - disabled={true} - /> - } - label="Blue" - disabled={true} - /> - } - label="Green" - disabled={true} - /> - - - - This is just a goofy page to demonstrate the language chooser in a - non-dialog context. - + {loremIpsum}
- Selected Font: Roboto Mono - Selected Language Tag: {languageTag}{" "} + Selected Language Tag: {languageTag} - Selected Color: red
); }; + +const loremIpsum = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et est sed magna venenatis ultrices consectetur faucibus risus. Nullam aliquet varius leo eget bibendum. Pellentesque vestibulum magna vitae commodo faucibus. Maecenas metus tortor, lobortis eget fringilla nec, ultricies in orci. Phasellus convallis iaculis turpis. Aliquam lobortis congue vehicula. Pellentesque molestie eleifend feugiat. Etiam lectus risus, suscipit non quam sit amet, condimentum convallis tortor. Suspendisse sodales auctor condimentum. Sed sed ullamcorper tortor, non placerat diam. Donec vitae orci ac odio ultricies rhoncus et et elit. Fusce semper dolor id lectus lobortis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus commodo enim in facilisis malesuada. Ut non euismod dui. Morbi sapien odio, sodales vitae auctor ac, lobortis ut felis. Nulla ornare diam id vestibulum tincidunt. Curabitur vel ex ipsum. Aenean vel porttitor metus. Praesent vehicula sit amet libero ut ultrices. Ut viverra eros id luctus viverra. Aliquam volutpat, dui in fermentum cursus, nisl lectus euismod justo, sed posuere ligula odio a purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget suscipit tortor. Suspendisse imperdiet dui nisi, eget cursus ipsum varius at. Mauris elit erat, sodales eu ligula quis, blandit tempus nulla. Aenean vestibulum congue pharetra. Sed risus tortor, blandit nec ultricies non, vestibulum quis tortor. Donec in gravida ante. Vivamus luctus velit non consequat sodales. Vestibulum eget nisi velit. Etiam venenatis scelerisque dolor non mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus quis interdum enim. Donec feugiat risus nec tempor iaculis. Morbi sollicitudin venenatis ullamcorper. Praesent massa arcu, venenatis ut tincidunt vel, feugiat eget augue. Nunc pellentesque justo dolor, ut hendrerit ipsum vulputate eu. Sed sed ipsum ut ligula maximus fermentum eget pretium leo. Aliquam feugiat ante eget lectus semper, in vulputate quam aliquet. Phasellus ac turpis sed ipsum gravida dapibus. Praesent vehicula magna lectus, vitae efficitur libero feugiat accumsan. Nunc bibendum, lacus quis mollis elementum, odio mi ultricies nisl, nec pretium nunc erat id mauris. Sed volutpat purus arcu, sed tincidunt quam interdum congue. Curabitur laoreet malesuada risus, at dictum justo aliquet sed. Etiam venenatis sem quis diam mollis rutrum. Mauris est ligula, dictum sed ultrices in, suscipit et nisl. Nunc massa est, consequat eu fringilla in, venenatis elementum libero. Proin maximus condimentum sodales. Integer tempus velit non arcu consequat, eget finibus lectus pellentesque. Donec tempus ornare elementum. Nullam eget diam vel eros tincidunt sodales vel non diam. Etiam leo felis, tincidunt in tincidunt "; diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.stories.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.stories.tsx new file mode 100644 index 0000000..bc8a856 --- /dev/null +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.stories.tsx @@ -0,0 +1,11 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { ThemeDemo } from "./ThemeDemo"; + +const meta: Meta = { + component: ThemeDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = {}; diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx new file mode 100644 index 0000000..7751503 --- /dev/null +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx @@ -0,0 +1,149 @@ +/** @jsxImportSource @emotion/react */ +import { css } from "@emotion/react"; +import { LanguageChooser } from "../LanguageChooser"; +import React from "react"; +import { + Button, + createTheme, + FormControl, + FormControlLabel, + lighten, + darken, + Radio, + RadioGroup, + ThemeProvider, + Typography, +} from "@mui/material"; +import { defaultSearchResultModifier } from "@ethnolib/find-language"; + +const PrimaryColorChoices = ["#1d94a4", "#512f6b", "#3b1e04", "#800303"]; + +export const ThemeDemo: React.FunctionComponent = () => { + const [primaryColor, setPrimaryColor] = React.useState( + PrimaryColorChoices[0] + ); + const theme = createTheme(); + if (primaryColor) { + theme.palette.primary.main = primaryColor; + theme.palette.primary.light = lighten(primaryColor, 0.2); + theme.palette.primary.dark = darken(primaryColor, 0.2); + } + const dialogActionButtons = ( +
+ + +
+ ); + + return ( + +
+ + This demonstrates the Language Chooser in different MUI theme + contexts. + +
+
+
+ + Change theme primary color: + + + setPrimaryColor(e.target.value)} + > + {PrimaryColorChoices.map((color) => ( + } + label={color} + key={color} + css={css` + color: ${color}; + font-weight: bold; + `} + /> + ))} + + +
+
+ +
+
+ + ); +}; From e98523af44ca6392eac46f863fcf5853e4eb42cb Mon Sep 17 00:00:00 2001 From: Noel Chou Date: Mon, 9 Dec 2024 17:41:34 -0500 Subject: [PATCH 3/4] Allow custom "lighter" and "lightest" for card colors --- .../react/language-chooser-react-mui/README.md | 6 +++--- .../language-chooser-react-mui/src/LanguageChooser.tsx | 6 ++++-- .../language-chooser-react-mui/src/demos/DialogDemo.tsx | 2 -- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/language-chooser/react/language-chooser-react-mui/README.md b/components/language-chooser/react/language-chooser-react-mui/README.md index 01892b7..c1d9e96 100644 --- a/components/language-chooser/react/language-chooser-react-mui/README.md +++ b/components/language-chooser/react/language-chooser-react-mui/README.md @@ -23,7 +23,7 @@ npm i @ethnolib/language-chooser-react-mui The LanguageChooser will grow to fit the size of its parent. Height and width should be set on the parent. An explicit size should be set on its parent. Our recommended size is 1084x586 (to fit on a low-end notebook with windows task bar) but it will work in a variety of sizes. -The Language Chooser will adopt the primary color of the [MUI theme](https://mui.com/material-ui/customization/theming/) and by default derive the card colors from the primary color. This can be overriden with the `languageCardBackgroundColorOverride` and `scriptCardBackgroundColorOverride` props. +The Language Chooser will adopt the primary color of the [MUI theme](https://mui.com/material-ui/customization/theming/) and by default derive the card colors from the primary color. This can be overriden with the `languageCardBackgroundColorOverride` and `scriptCardBackgroundColorOverride` props, or by `setting theme.palette.primary.lighter` (used for the language card color) and `theme.palette.primary.lightest` (used for the script card color) in your MUI theme. ### Props @@ -44,8 +44,8 @@ The Language Chooser will adopt the primary color of the [MUI theme](https://mui - `onSelectionChange?: (orthographyInfo: IOrthography | undefined, languageTag: string | undefined) => void` - Whenever the user makes or unselects a complete language selection, this function will be called with the selected language information or undefined, respectively. - `rightPanelComponent?: React.ReactNode` - A slot for a component to go in the space on the upper right side of the language chooser. See the Storybook Dialog Demo -> Additional Right Panel Component for an example. - `actionButtons?: React.ReactNode` - A slot for dialog action buttons, e.g. Ok and Cancel. See the [LanguageChooserDialog.tsx](./src/demos/LanguageChooserDialog.tsx) example. -- `languageCardBackgroundColorOverride?: string` - The language chooser will adopt the primary color of the MUI theme. By default, it will make the language card backgrounds be the primary color but 70% lighter. If provided, this prop will override this background color behavior. See the Storybook Dialog Demo -> withCardBackgroundColorOverrides for an example. -- `scriptCardBackgroundColorOverride?: string` - The language chooser will adopt the primary color of the MUI theme. By default, it will make the script card backgrounds be the primary color but 88% lighter. If provided, this prop will override this background color behavior. See the Storybook Dialog Demo -> withCardBackgroundColorOverrides for an example. +- `languageCardBackgroundColorOverride?: string` - The language chooser will adopt the primary color of the MUI theme. By default, it will make the language card backgrounds be the primary color but 70% lighter (or use theme.palette.primary.lighter if it is set). If provided, this prop will override this background color behavior. See the Storybook Dialog Demo -> withCardBackgroundColorOverrides for an example. +- `scriptCardBackgroundColorOverride?: string` - The language chooser will adopt the primary color of the MUI theme. By default, it will make the script card backgrounds be the primary color but 88% lighter (or use theme.palette.primary.lightest if it is set). If provided, this prop will override this background color behavior. See the Storybook Dialog Demo -> withCardBackgroundColorOverrides for an example. ### Demos diff --git a/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx b/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx index 5a04833..77c7760 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx @@ -103,8 +103,8 @@ export interface ILanguageChooserProps { ) => void; rightPanelComponent?: React.ReactNode; actionButtons?: React.ReactNode; - languageCardBackgroundColorOverride?: string; // if not provided, will use lighten(primaryColor, 0.7) - scriptCardBackgroundColorOverride?: string; // if not provided, will use lighten(primaryColor, 0.88) + languageCardBackgroundColorOverride?: string; // if not provided, will use theme.palette.primary.lighter if present or fall back to lighten(primaryColor, 0.7) + scriptCardBackgroundColorOverride?: string; // if not provided, will use theme.palette.primary.lightest if present or fall back to lighten(primaryColor, 0.88) } export const LanguageChooser: React.FunctionComponent = ( @@ -218,9 +218,11 @@ export const LanguageChooser: React.FunctionComponent = ( // mui palettes have a "light" also, but for the card backgrounds we want very light colors, lighter than "light" usually is lighter: props.languageCardBackgroundColorOverride || + originalTheme.palette.primary.lighter || lighten(primaryMainColor, 0.7), lightest: props.scriptCardBackgroundColorOverride || + originalTheme.palette.primary.lightest || lighten(primaryMainColor, 0.88), }, }, diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.tsx index bddb005..c85f6b5 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.tsx @@ -1,12 +1,10 @@ /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; import { defaultSearchResultModifier } from "@ethnolib/find-language"; -import { Button, Card, Typography } from "@mui/material"; import { Button, Card, createTheme, - Dialog, ThemeProvider, Typography, } from "@mui/material"; From 77c0934ff01c1a6b4c3a56f390b60a2ad239f754 Mon Sep 17 00:00:00 2001 From: Noel Chou Date: Mon, 9 Dec 2024 18:27:47 -0500 Subject: [PATCH 4/4] consolidate redundant demos --- .../src/demos/DialogDemo.stories.tsx | 13 ------------- .../src/demos/ThemeDemo.tsx | 17 +++++++++++++++++ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.stories.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.stories.tsx index 67dd90c..763c9bc 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.stories.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/DialogDemo.stories.tsx @@ -50,19 +50,6 @@ export const AdditionalRightPanelComponent: Story = { }, }; -export const withMuiThemePrimaryColor: Story = { - args: { - primaryColor: "#1d94a4", - }, -}; - -export const withCardBackgroundColorOverrides: Story = { - args: { - languageCardBackgroundColorOverride: "#d2ebb2", - scriptCardBackgroundColorOverride: "#ebe9b2", - }, -}; - export const InTooSmallDialog: Story = { args: { dialogHeight: "350px", diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx index 7751503..9560170 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx @@ -13,6 +13,7 @@ import { RadioGroup, ThemeProvider, Typography, + Checkbox, } from "@mui/material"; import { defaultSearchResultModifier } from "@ethnolib/find-language"; @@ -22,6 +23,7 @@ export const ThemeDemo: React.FunctionComponent = () => { const [primaryColor, setPrimaryColor] = React.useState( PrimaryColorChoices[0] ); + const [colorOverrides, setColorOverrides] = React.useState(false); const theme = createTheme(); if (primaryColor) { theme.palette.primary.main = primaryColor; @@ -127,6 +129,17 @@ export const ThemeDemo: React.FunctionComponent = () => { ))} + {/* Add a checkbox to override the colors */} + setColorOverrides(e.target.checked)} + color="primary" + /> + } + label="Override theme colors" + />
{ initialSelectionLanguageTag={"uz-cyrl"} searchResultModifier={defaultSearchResultModifier} actionButtons={dialogActionButtons} + {...(colorOverrides && { + languageCardBackgroundColorOverride: "#d2ebb2", + scriptCardBackgroundColorOverride: "#ebe9b2", + })} />