diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 6059ce2863264418fef05776bca5094f891bacb9..4c400237e332c2a4e7c88eb8506e549775e03e8a 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,13 +2,15 @@ import { Button as NextButton } from "@nextui-org/react";
import Icon, { IconName } from "./Icon.tsx";
import Typography from "./Typography.tsx";
import { bgColor, Color } from "./utils/colors.ts";
+import { disabledCursor } from "./utils/classes.ts";
export type ButtonProps = {
label?: string | null;
color?: Color;
- disabled?: boolean;
icon?: IconName | null;
iconClass?: string;
+ isDisabled?: boolean;
+ type?: "button" | "submit";
onClick?: () => void;
};
@@ -18,32 +20,40 @@ export type ButtonProps = {
* @param label: string
* @param color: Color string
* @param icon: null | IconName
- * @param enabled: boolean
+ * @param disabled: boolean
*/
const Button = ({
label = null,
color = "primary",
icon = null,
iconClass,
- disabled = false,
+ isDisabled = false,
+ type = "button",
onClick = () => {},
}: ButtonProps) => {
if (!label && !icon) throw Error("Button cannot be empty");
const px = () => {
- if (icon && label) return "px-[8px]";
- else if (icon) return "px-[9px]";
- else if (label) return "px-[10px]";
+ if (icon && label) return "px-[8px] ";
+ else if (icon) return "px-[9px] ";
+ else if (label) return "px-[10px] ";
+ };
+ const bgClass = (isDisabled: boolean) => {
+ if (!isDisabled) return bgColor(color) + " ";
+ return "bg-lightGrey ";
};
- const bgClass = disabled
- ? "bg-lightGrey cursor-not-allowed opacity-100"
- : bgColor(color);
return (
<NextButton
startContent={icon && <Icon name={icon} customClass={iconClass} />}
- className={`${px()} ${bgClass} pointer-events-auto h-[32px] min-w-fit py-[5px] text-baseWhite rounded-[4px] flex`}
- isDisabled={disabled}
+ className={
+ px() +
+ bgClass(isDisabled) +
+ disabledCursor(isDisabled) +
+ " h-[32px] min-w-fit max-w-fit py-[5px] text-baseWhite rounded-[4px] flex focus:!outline-0"
+ }
+ isDisabled={isDisabled}
+ type={type}
onClick={onClick}
>
{label && (
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 8bcb537c917342557316e98f9e237d358b7468ef..4128933494bb8968736f6738c0eb397e5ba515b8 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,16 +1,27 @@
import { Checkbox as NextCheckbox } from "@nextui-org/react";
import { Dispatch, SetStateAction } from "react";
import Icon from "./Icon.tsx";
+import { disabledBg, disabledCursor } from "./utils/classes.ts";
type CheckboxProps = {
+ isDisabled?: boolean;
+ isRequired?: boolean;
isSelected: boolean;
- setIsSelected: Dispatch<SetStateAction<boolean>>;
+ setIsSelected?: Dispatch<SetStateAction<boolean>>;
label?: string;
};
-const Checkbox = ({ isSelected, setIsSelected, label }: CheckboxProps) => {
+const Checkbox = ({
+ isDisabled = false,
+ isRequired = false,
+ isSelected,
+ setIsSelected,
+ label,
+}: CheckboxProps) => {
return (
<NextCheckbox
+ isRequired={isRequired}
+ isDisabled={isDisabled}
isSelected={isSelected}
onValueChange={setIsSelected}
icon={isSelected ? <Icon name="checkmark" color="body" /> : <></>}
@@ -19,8 +30,11 @@ const Checkbox = ({ isSelected, setIsSelected, label }: CheckboxProps) => {
color="default"
disableAnimation
classNames={{
+ base: disabledCursor(isDisabled),
wrapper:
- "w-[24px] h-[24px] border-[1px] border-grey rounded-[4px] dark:bg-mediumGrey dark:border-mediumGrey",
+ "w-[24px] h-[24px] rounded-[4px] " +
+ "border-[1px] border-grey dark:border-none " +
+ disabledBg(isDisabled),
}}
>
{label}
diff --git a/src/components/DateInput.tsx b/src/components/DateInput.tsx
index a10a0b4c71be4479c88e374e6e0ec7dffbd28dc9..67764dc660f9c092e212d0319b0b6a77c7a93e0b 100644
--- a/src/components/DateInput.tsx
+++ b/src/components/DateInput.tsx
@@ -8,22 +8,33 @@ import Typography from "./Typography.tsx";
import { textColor } from "./utils/colors.ts";
type DateInputProps = {
- label?: string;
+ isRequired?: boolean;
+ label: string;
value?: Date;
onValueChange: Dispatch<SetStateAction<Date | undefined>>;
+ isInvalid?: boolean;
+ errorMessage?: string;
};
-const DateInput = ({ label, value, onValueChange }: DateInputProps) => {
+const DateInput = ({
+ isRequired = false,
+ label,
+ value,
+ onValueChange,
+ isInvalid = false,
+ errorMessage = "",
+}: DateInputProps) => {
const dateFormat = "dd/MM/yyyy";
type inputProps = {
+ isRequired: boolean;
value?: string;
onClick?: () => void;
};
const CustomInput = forwardRef(
(
- { value, onClick }: inputProps,
+ { isRequired, value, onClick }: inputProps,
// @ts-expect-error the "ref" prop is needed to avoid console errors.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ref
@@ -31,6 +42,7 @@ const DateInput = ({ label, value, onValueChange }: DateInputProps) => {
return (
<div onClick={onClick}>
<BaseInput
+ isRequired={isRequired}
label={label}
endContent={
<Icon
@@ -41,6 +53,8 @@ const DateInput = ({ label, value, onValueChange }: DateInputProps) => {
placeholder="DD/MM/YYYY"
value={value}
onValueChange={() => {}}
+ isInvalid={isInvalid}
+ errorMessage={errorMessage}
/>
</div>
);
@@ -77,11 +91,11 @@ const DateInput = ({ label, value, onValueChange }: DateInputProps) => {
return (
<DatePicker
dateFormat={dateFormat}
- openToDate={new Date()}
+ openToDate={value || new Date()}
selected={value}
onSelect={(date) => onValueChange(date)}
onChange={(date) => !!date && onValueChange(date)}
- customInput={<CustomInput />}
+ customInput={<CustomInput isRequired={isRequired} />}
showPopperArrow={false}
calendarStartDay={1}
formatWeekDay={(day) => <div>{day.charAt(0)}</div>}
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 23abf4d22366fbfa7cc64498f728e0079079c19c..b2ed37b6b3a1ba16385112d4083e4a3e15913011 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -4,6 +4,7 @@ import { baseInputClassNames } from "./utils/baseComponents.tsx";
import Icon from "./Icon.tsx";
type DropdownProps = {
+ isRequired?: boolean;
label?: string;
valueOptions: { value: string; label: string }[];
value?: string;
@@ -11,6 +12,7 @@ type DropdownProps = {
};
const Dropdown = ({
+ isRequired = false,
label,
valueOptions,
value,
@@ -18,6 +20,7 @@ const Dropdown = ({
}: DropdownProps) => {
return (
<Autocomplete
+ isRequired={isRequired}
label={label}
selectedKey={value}
onSelectionChange={(key) => onValueChange(key as string)}
@@ -25,8 +28,11 @@ const Dropdown = ({
placeholder=" " // so the label stays outside
disableAnimation
disableSelectorIconRotation
- variant="bordered"
- inputProps={{ classNames: baseInputClassNames }} // use the same props as BaseInput
+ inputProps={{
+ classNames: baseInputClassNames(false),
+ variant: "bordered",
+ isRequired: isRequired,
+ }} // use the same props as BaseInput
selectorIcon={<Icon name="dropdown" />}
isClearable={false} // so the "cross" button does not show
classNames={{
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
index 3600f6ae2aa5445e8271263a345034b5c1ffa180..ad9faedf63d9e2845bd4f86455188ded274b3413 100644
--- a/src/components/Radio.tsx
+++ b/src/components/Radio.tsx
@@ -1,36 +1,41 @@
import { RadioGroup, Radio as NextRadio } from "@nextui-org/react";
import { Dispatch, SetStateAction } from "react";
+import { disabledBg, disabledCursor } from "./utils/classes.ts";
type RadioProps = {
- size?: "small" | "big";
+ isRequired?: boolean;
label?: string;
- valueOptions: { value: string; label: string }[];
+ valueOptions: { value: string; label: string; isDisabled?: boolean }[];
value?: string;
- onValueChange: Dispatch<SetStateAction<string | undefined>>;
+ onValueChange?: Dispatch<SetStateAction<string | undefined>>;
};
const Radio = ({
- size = "small",
+ isRequired = false,
label,
valueOptions,
value,
onValueChange,
}: RadioProps) => {
- const sizeClass = {
- small: { wrapper: "w-[16px] h-[16px]", control: "w-[10px] h-[10px]" },
- big: { wrapper: "w-[24px] h-[24px]", control: "w-[14px] h-[14px]" },
- };
-
return (
- <RadioGroup label={label} value={value} onValueChange={onValueChange}>
+ <RadioGroup
+ isRequired={isRequired}
+ label={label}
+ value={value}
+ onValueChange={onValueChange}
+ >
{valueOptions.map((option) => (
<NextRadio
+ isDisabled={option.isDisabled || false}
key={option.value}
value={option.value}
disableAnimation
classNames={{
- wrapper: `${sizeClass[size].wrapper} bg-lightGrey group-data-[selected=true]:border-none`,
- control: sizeClass[size].control,
+ base: disabledCursor(option.isDisabled || false),
+ wrapper:
+ "w-[16px] h-[16px] border-[1px] !border-grey dark:border-none " +
+ disabledBg(option.isDisabled || false),
+ control: "w-[10px] h-[10px]",
}}
>
{option.label}
diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index 97166e4cf7c66831a0059accbc903a4b71237694..10c7b1274e0e273c24be9a4ceaaa36bde23e5082 100644
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -2,16 +2,19 @@ import { Dispatch, ReactNode, SetStateAction } from "react";
import { BaseInput } from "./utils/baseComponents.tsx";
type TextInputProps = {
+ isRequired?: boolean;
label?: string;
endContent?: ReactNode; // such as units (as text element e.g. <span>)
isClearable?: boolean;
value: string;
- onValueChange: Dispatch<SetStateAction<string>>;
+ onValueChange?: Dispatch<SetStateAction<string>>;
isInvalid?: boolean;
errorMessage?: string;
+ isDisabled?: boolean;
};
const TextInput = ({
+ isRequired = false,
label = "",
endContent,
isClearable = false,
@@ -19,9 +22,11 @@ const TextInput = ({
onValueChange,
isInvalid = false,
errorMessage = "",
+ isDisabled = false,
}: TextInputProps) => {
return (
<BaseInput
+ isRequired={isRequired}
label={label}
endContent={endContent}
placeholder=" "
@@ -30,6 +35,7 @@ const TextInput = ({
onValueChange={onValueChange}
isInvalid={isInvalid}
errorMessage={errorMessage}
+ isDisabled={isDisabled}
/>
);
};
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
index 9bcbfba1e2389b8666affad8b3275bc702fadb8f..ab7d3c0d49f14e68eb47cff2eacd74c62a239638 100644
--- a/src/components/Toggle.tsx
+++ b/src/components/Toggle.tsx
@@ -1,22 +1,32 @@
import { Dispatch, SetStateAction } from "react";
import { Switch } from "@nextui-org/react";
+import { disabledCursor } from "./utils/classes.ts";
type ToggleProps = {
+ isDisabled?: boolean;
isSelected: boolean;
- setIsSelected: Dispatch<SetStateAction<boolean>>;
+ setIsSelected?: Dispatch<SetStateAction<boolean>>;
label?: string;
};
-const Toggle = ({ isSelected, setIsSelected, label }: ToggleProps) => {
+const Toggle = ({
+ isDisabled = false,
+ isSelected,
+ setIsSelected,
+ label,
+}: ToggleProps) => {
const selectedClass = isSelected
? "group-data-[selected=true]:ml-[11px] bg-primary"
: "bg-grey";
return (
<Switch
+ isDisabled={isDisabled}
+ // Does not support "isRequired": https://github.com/nextui-org/nextui/issues/1610
isSelected={isSelected}
onValueChange={setIsSelected}
color="secondary"
classNames={{
+ base: disabledCursor(isDisabled),
thumb: `h-[14px] w-[14px] ${selectedClass}`,
wrapper:
"h-[8px] w-[25px] p-0 overflow-visible bg-lightGrey dark:bg-mediumGrey",
diff --git a/src/components/utils/baseComponents.tsx b/src/components/utils/baseComponents.tsx
index 5e2403b08f670e9aa06254ac9f7ad66c0fe1693e..0baa9f1235109b57ad573fc07b57afae61b5a21b 100644
--- a/src/components/utils/baseComponents.tsx
+++ b/src/components/utils/baseComponents.tsx
@@ -1,5 +1,7 @@
import { Input } from "@nextui-org/react";
import { Dispatch, ReactNode, SetStateAction } from "react";
+import { InputSlots } from "@nextui-org/theme";
+import { disabledBg, disabledCursor } from "./classes.ts";
type BaseInputProps = {
// basic info
@@ -7,26 +9,46 @@ type BaseInputProps = {
endContent: ReactNode; // such as units or icon
// value and validation
placeholder: string;
- isClearable: boolean;
- value: string;
- onValueChange: Dispatch<SetStateAction<string>>;
+ isClearable?: boolean;
+ value?: string;
+ onValueChange?: Dispatch<SetStateAction<string>>;
isInvalid: boolean;
errorMessage: string;
+ // interaction
+ isRequired?: boolean;
+ isDisabled?: boolean;
};
-// No we cannot do "[&>svg]:" + className because Tailwind does not support dynamic class names
-const clearButtonSvgClass =
- "[&>svg]:w-[42px] [&>svg]:h-[42px] [&>svg]:mt-[-6px] [&>svg]:ml-[-5px]";
-
-export const baseInputClassNames = {
- label: "!text-foreground-body",
- mainWrapper: "text-grey dark:text-mediumGrey",
- inputWrapper: "bg-baseWhite dark:bg-mediumGrey rounded-[4px] px-2",
- input: "!text-foreground-body bg-default",
- clearButton:
- clearButtonSvgClass +
- " " +
- "bg-mediumGrey text-baseWhite dark:bg-baseWhite dark:text-mediumGrey w-[30px] h-[30px] p-0 !opacity-100",
+type baseInputClassNamesObj = { [key in InputSlots]: string };
+
+export const baseInputClassNames = (isDisabled: boolean) => {
+ // No we cannot do "[&>svg]:" + className because Tailwind does not support dynamic class names
+ const clearButtonSvgClass =
+ "[&>svg]:w-[42px] [&>svg]:h-[42px] [&>svg]:mt-[-6px] [&>svg]:ml-[-5px]";
+
+ const baseClass = {
+ base: disabledCursor(isDisabled),
+ label: "!text-foreground-body",
+ input: "!text-foreground-body bg-default",
+ inputWrapper: "px-2 rounded-[4px] " + disabledBg(isDisabled),
+ };
+
+ const defaultClass = {
+ ...baseClass,
+ mainWrapper:
+ "text-grey dark:text-mediumGrey hover:text-baseBlack focus-within:!text-primary", // this is the border color (use text-*)
+ clearButton:
+ clearButtonSvgClass +
+ " " +
+ "bg-mediumGrey text-baseWhite dark:bg-baseWhite dark:text-mediumGrey w-[30px] h-[30px] p-0 !opacity-100",
+ } as baseInputClassNamesObj;
+
+ const disabledClass = {
+ ...baseClass,
+ mainWrapper: "text-mediumGrey dark:text-darkModeBlue",
+ } as baseInputClassNamesObj;
+
+ return isDisabled ? disabledClass : defaultClass;
};
export const BaseInput = ({
@@ -38,6 +60,8 @@ export const BaseInput = ({
onValueChange,
isInvalid,
errorMessage,
+ isRequired = false,
+ isDisabled = false,
}: BaseInputProps) => {
return (
<Input
@@ -50,10 +74,12 @@ export const BaseInput = ({
onValueChange={onValueChange}
isInvalid={isInvalid}
errorMessage={errorMessage}
+ isRequired={isRequired}
+ isDisabled={isDisabled}
// appearance
labelPlacement="outside"
variant="bordered"
- classNames={baseInputClassNames}
+ classNames={baseInputClassNames(isDisabled)}
/>
);
};
diff --git a/src/components/utils/classes.ts b/src/components/utils/classes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ab8b54562f54ee7adce8ab53fcde921c3aa0db7
--- /dev/null
+++ b/src/components/utils/classes.ts
@@ -0,0 +1,9 @@
+export const disabledCursor = (isDisabled: boolean) => {
+ if (!isDisabled) return "";
+ return "pointer-events-auto cursor-not-allowed opacity-50";
+};
+
+export const disabledBg = (isDisabled: boolean) => {
+ if (!isDisabled) return "bg-baseWhite dark:bg-mediumGrey";
+ return "bg-lightGrey dark:bg-darkModeBlue";
+};
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.tsx
similarity index 51%
rename from src/stories/Button.stories.ts
rename to src/stories/Button.stories.tsx
index 9b6d1263c4cd973fb01fe8c2e2d2130748b8abfe..dff794e922f918c28a7dd1801345ffaa4af682f1 100644
--- a/src/stories/Button.stories.ts
+++ b/src/stories/Button.stories.tsx
@@ -1,7 +1,10 @@
import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
import Button from "src/components/Button.tsx";
import { iconNameOptions } from "src/components/Icon.tsx";
import { colorOptions } from "src/components/utils/colors.ts";
+import Typography from "src/components/Typography.tsx";
+import TextInput from "src/components/TextInput.tsx";
/** Use buttons as triggers for actions that are used in forms, toolbars, dialog footers and as stand-alone action triggers. Try to avoid the usage of buttons for navigation. The main difference between actions and navigation is that Actions are operations performed on objects, while Navigation refers to elements on the screen or view that take you to another context in the application. */
const meta = {
@@ -36,6 +39,32 @@ export const IconButton: StoryObj = {
export const DisabledButton: StoryObj = {
args: {
label: "You can't click me!",
- disabled: true,
+ isDisabled: true,
},
};
+
+/** In order for the Button to listen for Enter keypress, mostly used for submitting forms. Provide `type="submit"` to the Button component, and wrap it in a `<form>` element. For the native form element, you might also want to use an `onSubmit` with `preventDefault` and `stopPropagation` so the page does not reload. But there are also form libraries that take care of that. */
+export const SubmitButton = () => {
+ const [value, setValue] = useState("");
+ const [count, setCount] = useState(0);
+ return (
+ <form
+ onSubmit={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ className="max-w-md flex flex-col gap-2"
+ >
+ <TextInput value={value} onValueChange={setValue} />
+ <Button
+ label="Submit"
+ type="submit"
+ onClick={() => setCount(count + 1)}
+ />
+ <Typography
+ text={`You have submitted ${count} times!`}
+ variant="paragraph"
+ />
+ </form>
+ );
+};
diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
index d1d7016effc66486493ad4de60a5914b9db808d1..a2d46a7ff9b9e2acce1eb6b1731362f3f609ff74 100644
--- a/src/stories/Checkbox.stories.tsx
+++ b/src/stories/Checkbox.stories.tsx
@@ -19,3 +19,20 @@ export const SimpleCheckbox = () => {
/>
);
};
+
+export const DisabledCheckbox = () => {
+ return (
+ <div className="flex flex-col gap-4">
+ <Checkbox
+ isDisabled={true}
+ isSelected={true}
+ label="I am always right!"
+ />
+ <Checkbox
+ isDisabled={true}
+ isSelected={false}
+ label="I am always wrong :("
+ />
+ </div>
+ );
+};
diff --git a/src/stories/Radio.stories.tsx b/src/stories/Radio.stories.tsx
index c16fa181a0cf7c7fd280bf42e9c124d004b9549d..3bbc1eaf8ebfc525f17135ff7569e23c632d67d2 100644
--- a/src/stories/Radio.stories.tsx
+++ b/src/stories/Radio.stories.tsx
@@ -10,21 +10,19 @@ const meta = {
export default meta;
-const valueOptions = [
- { value: "vanilla", label: "Vanilla" },
- { value: "mocha", label: "Mocha" },
- { value: "mint", label: "Mint" },
- { value: "raspberry", label: "Raspberry" },
- { value: "apple", label: "Apple" },
-];
-
-export const SmallRadio = () => {
+export const SimpleRadio = () => {
const [value, setValue] = useState<string>();
+ const valueOptions = [
+ { value: "vanilla", label: "Vanilla" },
+ { value: "mocha", label: "Mocha" },
+ { value: "mint", label: "Mint" },
+ { value: "raspberry", label: "Raspberry" },
+ ];
+
return (
<>
<Radio
- size="small"
label="What's your favourite ice cream?"
valueOptions={valueOptions}
onValueChange={setValue}
@@ -37,20 +35,18 @@ export const SmallRadio = () => {
);
};
-export const BigRadio = () => {
- const [value, setValue] = useState<string>();
+export const DisabledRadio = () => {
+ const valueOptions = [
+ { value: "mint", label: "Mint", isDisabled: true },
+ { value: "raspberry", label: "Raspberry", isDisabled: true },
+ ];
return (
<>
<Radio
- size="big"
- label="What's your favourite ice cream?"
+ label="Your favourite ice cream must be raspberry"
valueOptions={valueOptions}
- onValueChange={setValue}
- />
- <Typography
- text={`You selected: ${value || "nothing"}`}
- variant="paragraph"
+ value="raspberry"
/>
</>
);
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index d3ece2232f92fd24bf975dbe1f49f2aee23a4641..d949d8b171b8a1d81052a4136735ed7941901fa8 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -43,3 +43,13 @@ export const IsClearable = () => {
/>
);
};
+
+export const Disabled = () => {
+ return (
+ <TextInput
+ label="You can't change this!"
+ isDisabled={true}
+ value="*Evil laughter*"
+ />
+ );
+};
diff --git a/src/stories/Toggle.stories.tsx b/src/stories/Toggle.stories.tsx
index c71bd9cc87db0b6af7d9a002e12b77ee371ee2b1..1e21e1779314f9e8969168687146c27b96d24c28 100644
--- a/src/stories/Toggle.stories.tsx
+++ b/src/stories/Toggle.stories.tsx
@@ -19,3 +19,12 @@ export const SimpleToggle = () => {
/>
);
};
+
+export const DisabledToggle = () => {
+ return (
+ <div className="flex flex-col gap-4">
+ <Toggle isDisabled={true} isSelected={true} label="I'm always right!" />
+ <Toggle isDisabled={true} isSelected={false} label="I'm always left!" />
+ </div>
+ );
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index dc91dc347c4e40c93cd4fd7a8c23b83b11407ee1..fb61e45644763fe6994166019a011a5d8efff565 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -61,7 +61,7 @@ export default {
},
dark: {
colors: {
- background: palette.darkModeBlue,
+ background: palette.darkBlue,
foreground: {
heading: palette.baseWhite,
heading2: palette.lightBlue,