diff --git a/packages/odyssey-design-tokens/src/border.json b/packages/odyssey-design-tokens/src/border.json
index 4a1a481f97..13180be472 100644
--- a/packages/odyssey-design-tokens/src/border.json
+++ b/packages/odyssey-design-tokens/src/border.json
@@ -15,7 +15,8 @@
}
},
"radius": {
- "main": { "value": "4px" },
+ "tight": { "value": "4px" },
+ "main": { "value": "6px" },
"outer": { "value": "12px" },
"round": { "value": "1.5em" }
},
diff --git a/packages/odyssey-react-mui/src/Fieldset.tsx b/packages/odyssey-react-mui/src/Fieldset.tsx
index fa8c93e09d..750d2049ef 100644
--- a/packages/odyssey-react-mui/src/Fieldset.tsx
+++ b/packages/odyssey-react-mui/src/Fieldset.tsx
@@ -70,7 +70,7 @@ FieldsetProps) => {
sx={{
maxWidth: (theme) => theme.mixins.maxWidth,
margin: (theme) => theme.spacing(0),
- marginBlockEnd: (theme) => theme.spacing(4),
+ marginBlockEnd: (theme) => theme.spacing(6),
padding: (theme) => theme.spacing(0),
border: "0",
@@ -82,7 +82,11 @@ FieldsetProps) => {
{legend}
- {description && {description}}
+ {description && (
+
+ {description}
+
+ )}
{alert}
{children}
diff --git a/packages/odyssey-react-mui/src/Form.tsx b/packages/odyssey-react-mui/src/Form.tsx
index 19c182f5d1..5fede9102c 100644
--- a/packages/odyssey-react-mui/src/Form.tsx
+++ b/packages/odyssey-react-mui/src/Form.tsx
@@ -117,7 +117,11 @@ const Form = ({
{title}
)}
- {description && {description}}
+ {description && (
+
+ {description}
+
+ )}
{alert}
{children}
{formActions && (
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 25bcf890f1..37b497f886 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -129,9 +129,9 @@ export const components = (
borderRadius: 0,
}),
...(ownerState.variant === "infobox" && {
- borderRadius: odysseyTokens.BorderRadiusOuter,
+ borderRadius: odysseyTokens.BorderRadiusMain,
"&:not(:last-child)": {
- marginBottom: odysseyTokens.Spacing4,
+ marginBottom: odysseyTokens.Spacing6,
},
}),
...(ownerState.variant === "toast" && {
@@ -500,7 +500,7 @@ export const components = (
root: ({ theme }) => ({
width: `${odysseyTokens.TypographyLineHeightUi}em`,
height: `${odysseyTokens.TypographyLineHeightUi}em`,
- borderRadius: theme.mixins.borderRadius,
+ borderRadius: odysseyTokens.BorderRadiusTight,
borderWidth: theme.mixins.borderWidth,
borderStyle: theme.mixins.borderStyle,
borderColor: theme.palette.grey[500],
@@ -1182,7 +1182,7 @@ export const components = (
maxWidth: odysseyTokens.TypographyLineLengthMax,
...(ownerState.margin === "normal" && {
marginTop: 0,
- marginBottom: theme.spacing(5),
+ marginBottom: theme.spacing(4),
"&:last-child": {
marginBottom: 0,
},
diff --git a/packages/odyssey-react-mui/src/theme/typography.ts b/packages/odyssey-react-mui/src/theme/typography.ts
index cf81448342..1e27d63323 100644
--- a/packages/odyssey-react-mui/src/theme/typography.ts
+++ b/packages/odyssey-react-mui/src/theme/typography.ts
@@ -79,7 +79,17 @@ export const typography = (
fontSize: odysseyTokens.TypographyScale0,
lineHeight: odysseyTokens.TypographyLineHeightBody,
},
- subtitle2: undefined,
+ subtitle2: {
+ color: odysseyTokens.HueNeutral700,
+ fontFamily: odysseyTokens.TypographyFamilyBody,
+ fontWeight: Number(odysseyTokens.TypographyWeightBody),
+ fontSize: odysseyTokens.TypographyScale1,
+ fontFeatureSettings: "'lnum', 'pnum'",
+ fontVariant: "normal",
+ lineHeight: odysseyTokens.TypographyLineHeightBody,
+ letterSpacing: "initial",
+ marginBlockEnd: odysseyTokens.Spacing5,
+ },
body1: {
color: odysseyTokens.TypographyColorBody,
fontFamily: odysseyTokens.TypographyFamilyBody,
@@ -103,8 +113,8 @@ export const typography = (
legend: {
padding: 0,
fontWeight: Number(odysseyTokens.TypographyWeightHeading),
- fontSize: odysseyTokens.TypographyScale2,
- lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+ fontSize: odysseyTokens.TypographySizeHeading5,
+ lineHeight: odysseyTokens.TypographyLineHeightHeading5,
marginBottom: odysseyTokens.Spacing2,
},
ui: {
diff --git a/packages/odyssey-react-mui/src/theme/typography.types.ts b/packages/odyssey-react-mui/src/theme/typography.types.ts
index 1b6fb7e420..dcb0043bd6 100644
--- a/packages/odyssey-react-mui/src/theme/typography.types.ts
+++ b/packages/odyssey-react-mui/src/theme/typography.types.ts
@@ -31,7 +31,7 @@ declare module "@mui/material/Typography" {
legend: true;
overline: true;
subtitle1: true; // Design may refer to this as "caption"
- subtitle2: false;
+ subtitle2: true;
ui: true;
default: true; // used by
monochrome: true; // used by
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.stories.tsx
index ce4337bcae..2241bdd8c7 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Form/Form.stories.tsx
@@ -13,11 +13,15 @@
import { Meta, StoryObj } from "@storybook/react";
import {
Button,
+ Checkbox,
+ CheckboxGroup,
Fieldset,
Form,
FormProps,
Infobox,
+ Link,
TextField,
+ Typography,
} from "@okta/odyssey-react-mui";
import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -168,10 +172,29 @@ export const KitchenSink: StoryObj = {
>