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 = {
- - + + + + + +
= { description="This information will be used to track your passengers' whereabouts." alert={ - Your captain is a known space pirate. Your location has been - reported to Station Control. + + There is an issue with the fuel mixture ratios. Reconfigure the + fuel mixture and perform the safety checks again. + + + + Visit fueling console + } > - +