From 0484be7023327c7a01d8086da03810edcaefecac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Fri, 23 Feb 2024 15:32:22 +0100 Subject: [PATCH] feat: migrate to new typescale (#755) --- .storybook/components/FontWeights.tsx | 34 +++ .storybook/components/Typography.tsx | 36 ++++ .storybook/components/index.tsx | 6 +- src/components/Avatar/Store/Store.tsx | 8 +- src/components/Avatar/User/User.tsx | 8 +- src/components/BaseInput/BaseInput.css.ts | 22 +- src/components/BaseInput/HelperText.tsx | 5 +- .../LoadingListItem/LoadingListItem.tsx | 4 +- src/components/BaseSelect/helpers.ts | 4 +- src/components/Button/Button.css.ts | 12 +- src/components/Checkbox/Checkbox.stories.tsx | 4 +- src/components/Chip/Chip.stories.tsx | 8 +- .../DropdownButton/DropdownButton.css.ts | 14 +- src/components/Input/Input.stories.tsx | 6 +- src/components/Input/Input.tsx | 5 +- .../Multiselect/Common/Multiselect.css.ts | 10 +- .../Dynamic/DynamicMultiselect.tsx | 7 +- .../Multiselect/Static/Multiselect.tsx | 7 +- src/components/RadioGroup/Group.css.ts | 6 +- .../RadioGroup/RadioGroup.stories.tsx | 4 +- src/components/Select/Select.tsx | 12 +- src/components/Text/Text.css.ts | 196 ------------------ src/components/Text/Text.stories.tsx | 53 +---- src/components/Text/Text.tsx | 35 ++-- src/components/Text/helpers.ts | 14 ++ src/components/Text/index.ts | 1 + src/components/Textarea/Textarea.tsx | 5 +- src/components/Toggle/Toggle.stories.tsx | 8 +- src/components/Tooltip/ContentHeading.tsx | 2 +- src/components/Tooltip/Tooltip.css.ts | 2 +- src/theme/contract.css.ts | 132 ++++-------- src/theme/docs/Typography-8.mdx | 18 ++ src/theme/sprinkles.css.ts | 2 +- src/theme/themes/common.ts | 134 ++++-------- 34 files changed, 285 insertions(+), 539 deletions(-) create mode 100644 .storybook/components/FontWeights.tsx create mode 100644 .storybook/components/Typography.tsx create mode 100644 src/components/Text/helpers.ts create mode 100644 src/theme/docs/Typography-8.mdx diff --git a/.storybook/components/FontWeights.tsx b/.storybook/components/FontWeights.tsx new file mode 100644 index 00000000..2808c3a8 --- /dev/null +++ b/.storybook/components/FontWeights.tsx @@ -0,0 +1,34 @@ +import { Unstyled } from "@storybook/blocks"; +import { Box, Text } from "~/components"; +import { useTheme } from "~/theme"; + +export const FontWeightsPresentation = () => { + const { themeValues: vars } = useTheme(); + + return ( + + + {Object.entries(vars.fontWeight) + .sort(([_aKey, aValue], [_bKey, bValue]) => + aValue.localeCompare(bValue, undefined, { numeric: true }) + ) + .map(([key, value]) => { + return ( + + + + {key} + + + Some text + + ); + })} + + + ); +}; diff --git a/.storybook/components/Typography.tsx b/.storybook/components/Typography.tsx new file mode 100644 index 00000000..17e333aa --- /dev/null +++ b/.storybook/components/Typography.tsx @@ -0,0 +1,36 @@ +import { Unstyled } from "@storybook/blocks"; +import { Box, Text } from "~/components"; +import { useTheme } from "~/theme"; + +export const TypographyPresentation = () => { + const { themeValues: vars } = useTheme(); + + return ( + + + {Object.entries(vars.fontSize) + .sort(([_aKey, aValue], [_bKey, bValue]) => + aValue.localeCompare(bValue, undefined, { numeric: true }) + ) + .map(([key, value]) => { + return ( + + + + size: {key} + + + + Some text + + + ); + })} + + + ); +}; diff --git a/.storybook/components/index.tsx b/.storybook/components/index.tsx index 31c5e7c4..d0d10e31 100644 --- a/.storybook/components/index.tsx +++ b/.storybook/components/index.tsx @@ -1,5 +1,7 @@ +export { BorderRadiusPresentation } from "./BorderRadius"; export { ColorPresentation } from "./Colors"; -export { SpacingsPresentation } from "./Spacings"; +export { FontWeightsPresentation } from "./FontWeights"; export { IconsPresentation } from "./Icons"; -export { BorderRadiusPresentation } from "./BorderRadius"; export { ShadowPresentation } from "./Shadow"; +export { SpacingsPresentation } from "./Spacings"; +export { TypographyPresentation } from "./Typography"; diff --git a/src/components/Avatar/Store/Store.tsx b/src/components/Avatar/Store/Store.tsx index dc666e4c..f26ad9b7 100644 --- a/src/components/Avatar/Store/Store.tsx +++ b/src/components/Avatar/Store/Store.tsx @@ -2,7 +2,7 @@ import { DataAttributes } from "~/components/types"; import { classNames } from "~/utils"; import { Box, PropsWithBox } from "../../Box"; -import { Text } from "../../Text"; +import { convertSizeToScale, Text } from "../../Text"; import { storeAvatar, StoreAvatarVariants } from "./Store.css"; @@ -37,7 +37,11 @@ export const Store = (props: StoreAvatarProps) => { data-macaw-ui-component="Avatar.Store" {...rest} > - + {initials} diff --git a/src/components/Avatar/User/User.tsx b/src/components/Avatar/User/User.tsx index fc92d3c5..abdfb93e 100644 --- a/src/components/Avatar/User/User.tsx +++ b/src/components/Avatar/User/User.tsx @@ -2,7 +2,7 @@ import { DataAttributes } from "~/components/types"; import { classNames } from "~/utils"; import { Box, PropsWithBox } from "../../Box"; -import { Text } from "../../Text"; +import { convertSizeToScale, Text } from "../../Text"; import { userAvatar, UserAvatarVariants } from "./User.css"; @@ -37,7 +37,11 @@ export const User = (props: UserAvatarProps) => { data-macaw-ui-component="Avatar.User" {...rest} > - + {initials} diff --git a/src/components/BaseInput/BaseInput.css.ts b/src/components/BaseInput/BaseInput.css.ts index 4714bd48..80e5c093 100644 --- a/src/components/BaseInput/BaseInput.css.ts +++ b/src/components/BaseInput/BaseInput.css.ts @@ -144,13 +144,13 @@ export const spanRecipe = recipe({ variants: { size: { small: sprinkles({ - typeSize: "bodySmall", + typeSize: 1, }), medium: sprinkles({ - typeSize: "bodyMedium", + typeSize: 2, }), large: sprinkles({ - typeSize: "bodyLarge", + typeSize: 3, }), }, disabled: { @@ -179,8 +179,8 @@ export const inputRecipe = recipe({ sprinkles({ width: "100%", backgroundColor: "transparent", - fontSize: "bodyLarge", - lineHeight: "bodyLarge", + fontSize: 3, + lineHeight: 3, borderWidth: 0, outlineStyle: "none", padding: 0, @@ -225,16 +225,16 @@ export const inputRecipe = recipe({ variants: { size: { small: sprinkles({ - fontSize: "bodySmall", - lineHeight: "captionMedium", + fontSize: 1, + lineHeight: 1, }), medium: sprinkles({ - fontSize: "bodyMedium", - lineHeight: "bodySmall", + fontSize: 2, + lineHeight: 2, }), large: sprinkles({ - fontSize: "bodyLarge", - lineHeight: "bodyLarge", + fontSize: 3, + lineHeight: 3, }), }, error: { diff --git a/src/components/BaseInput/HelperText.tsx b/src/components/BaseInput/HelperText.tsx index 5a9562d4..ecc5d22e 100644 --- a/src/components/BaseInput/HelperText.tsx +++ b/src/components/BaseInput/HelperText.tsx @@ -1,5 +1,5 @@ import { ReactNode } from "react"; -import { Box, Text } from ".."; +import { Box, Text, convertSizeToScale } from ".."; import { helperTextRecipe } from "./BaseInput.css"; type HelperTextProps = { @@ -12,8 +12,7 @@ export const HelperText = ({ size, error, children }: HelperTextProps) => { return ( {children} diff --git a/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx b/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx index 3a8d4791..35399374 100644 --- a/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx +++ b/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx @@ -1,5 +1,5 @@ import { ReactNode } from "react"; -import { List, Spinner, Text } from "~/components"; +import { List, Spinner, Text, convertSizeToScale } from "~/components"; import { listItemStyle } from "../BaseSelect.css"; @@ -18,7 +18,7 @@ export const LoadingListItem = ({ gap={1.5} color="default2" > - + {children} diff --git a/src/components/BaseSelect/helpers.ts b/src/components/BaseSelect/helpers.ts index 219eee2e..cbe95a8f 100644 --- a/src/components/BaseSelect/helpers.ts +++ b/src/components/BaseSelect/helpers.ts @@ -37,8 +37,8 @@ export const getListTextSize = ( switch (size) { case "small": case "medium": - return "medium"; + return 2; case "large": - return "large"; + return 3; } }; diff --git a/src/components/Button/Button.css.ts b/src/components/Button/Button.css.ts index d38a6fdd..7ff9c8e3 100644 --- a/src/components/Button/Button.css.ts +++ b/src/components/Button/Button.css.ts @@ -117,7 +117,7 @@ export const button = recipe({ width: 6, borderRadius: 2, padding: 0.5, - typeSize: "buttonSmall", + typeSize: 1, gap: 1, }), }, @@ -131,7 +131,7 @@ export const button = recipe({ width: 8, borderRadius: 3, padding: 1, - typeSize: "buttonMedium", + typeSize: 2, gap: 1, }), }, @@ -145,7 +145,7 @@ export const button = recipe({ width: 10, borderRadius: 3, padding: 2, - typeSize: "buttonLarge", + typeSize: 3, gap: 2, }), }, @@ -159,7 +159,7 @@ export const button = recipe({ borderRadius: 2, paddingX: 2, paddingY: 0, - typeSize: "buttonSmall", + typeSize: 1, gap: 1, }), }, @@ -173,7 +173,7 @@ export const button = recipe({ borderRadius: 3, paddingX: 3, paddingY: 1, - typeSize: "buttonMedium", + typeSize: 2, gap: 1, }), }, @@ -187,7 +187,7 @@ export const button = recipe({ borderRadius: 3, paddingX: 4, paddingY: 2, - typeSize: "buttonLarge", + typeSize: 3, gap: 2, }), }, diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index 61f839e9..d8da0764 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -14,7 +14,7 @@ type Story = StoryObj; export const Primary: Story = { args: { children: [ - Option 1, // eslint-disable-line react/jsx-key + Option 1, // eslint-disable-line react/jsx-key ], }, }; @@ -32,7 +32,7 @@ export const Disabled: Story = { disabled: true, children: [ // eslint-disable-next-line react/jsx-key - + Option 1 , ], diff --git a/src/components/Chip/Chip.stories.tsx b/src/components/Chip/Chip.stories.tsx index 172648fd..1fc951c5 100644 --- a/src/components/Chip/Chip.stories.tsx +++ b/src/components/Chip/Chip.stories.tsx @@ -21,7 +21,7 @@ export const Primary: Story = { {/* Neutral */} - + Example @@ -32,7 +32,7 @@ export const Primary: Story = { backgroundColor="critical1" borderColor="critical1" > - + Example @@ -43,13 +43,13 @@ export const Primary: Story = { backgroundColor="success1" borderColor="success1" > - + Example {/* Blue */} - + Example diff --git a/src/components/DropdownButton/DropdownButton.css.ts b/src/components/DropdownButton/DropdownButton.css.ts index 735adcdf..ee66f296 100644 --- a/src/components/DropdownButton/DropdownButton.css.ts +++ b/src/components/DropdownButton/DropdownButton.css.ts @@ -53,9 +53,9 @@ export const dropdownButton = recipe({ borderRadius: 2, paddingX: 2, paddingY: 1, - typeSize: "buttonSmall", - fontWeight: "bodyMedium", - lineHeight: "captionMedium", + typeSize: 1, + fontWeight: "medium", + lineHeight: 2, gap: 3, }), medium: sprinkles({ @@ -63,8 +63,8 @@ export const dropdownButton = recipe({ borderRadius: 3, paddingX: 2, paddingY: 1.5, - typeSize: "buttonMedium", - fontWeight: "bodyMedium", + typeSize: 2, + fontWeight: "medium", gap: 1, }), large: sprinkles({ @@ -72,8 +72,8 @@ export const dropdownButton = recipe({ borderRadius: 3, paddingX: 3, paddingY: 2, - typeSize: "buttonLarge", - fontWeight: "bodyMedium", + typeSize: 3, + fontWeight: "medium", gap: 2, }), }, diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx index 95959174..3af18770 100644 --- a/src/components/Input/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -133,7 +133,7 @@ const InputNumberTemplate: Story = { type="number" value={value} onChange={(e) => setValue(e.target.value)} - endAdornment={USD} + endAdornment={USD} /> ); @@ -156,7 +156,7 @@ export const Number: Story = { type="number" value={value} onChange={(e) => setValue(e.target.value)} - endAdornment={USD} + endAdornment={USD} />`, }, }, @@ -180,7 +180,7 @@ export const NumberWithLabel: Story = { type="number" value={value} onChange={(e) => setValue(e.target.value)} - endAdornment={USD} + endAdornment={USD} />`, }, }, diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 6ea21361..612f5372 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -2,7 +2,7 @@ import { FocusEvent, InputHTMLAttributes, ReactNode, forwardRef } from "react"; import { classNames } from "~/utils"; -import { Box, PropsWithBox, Text } from ".."; +import { Box, PropsWithBox, Text, convertSizeToScale } from ".."; import { InputVariants, helperTextRecipe, inputRecipe } from "../BaseInput"; import { InputWrapper, useStateEvents } from "./InputWrapper"; @@ -112,8 +112,7 @@ export const Input = forwardRef( {helperText && ( {helperText} diff --git a/src/components/Multiselect/Common/Multiselect.css.ts b/src/components/Multiselect/Common/Multiselect.css.ts index cc60edd2..a8052eaa 100644 --- a/src/components/Multiselect/Common/Multiselect.css.ts +++ b/src/components/Multiselect/Common/Multiselect.css.ts @@ -26,8 +26,8 @@ export const multiselectInputRecipe = recipe({ sprinkles({ width: "100%", backgroundColor: "transparent", - fontSize: "bodyLarge", - lineHeight: "bodyLarge", + fontSize: 3, + lineHeight: 3, borderWidth: 0, outlineStyle: "none", padding: 0, @@ -56,13 +56,13 @@ export const multiselectInputRecipe = recipe({ variants: { size: { small: sprinkles({ - typeSize: "captionSmall", + typeSize: 1, }), medium: sprinkles({ - typeSize: "captionMedium", + typeSize: 2, }), large: sprinkles({ - typeSize: "captionMedium", + typeSize: 2, }), }, error: { diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx index 2b5f821d..5f54452b 100644 --- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx +++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx @@ -153,14 +153,11 @@ const DynamicMultiselectInner = ( index: idx, })} > - - {item.label} - + {item.label} {!disabled && ( { event.stopPropagation(); event.preventDefault(); diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx index 9764103f..3a976ad0 100644 --- a/src/components/Multiselect/Static/Multiselect.tsx +++ b/src/components/Multiselect/Static/Multiselect.tsx @@ -142,14 +142,11 @@ const MultiselectInner = ( index: idx, })} > - - {item.label} - + {item.label} {!disabled && ( { event.stopPropagation(); event.preventDefault(); diff --git a/src/components/RadioGroup/Group.css.ts b/src/components/RadioGroup/Group.css.ts index 65adb59d..9e8ca78e 100644 --- a/src/components/RadioGroup/Group.css.ts +++ b/src/components/RadioGroup/Group.css.ts @@ -17,13 +17,13 @@ export const groupLabelRecipe = recipe({ variants: { size: { small: sprinkles({ - typeSize: "captionSmall", + typeSize: 1, }), medium: sprinkles({ - typeSize: "captionMedium", + typeSize: 2, }), large: sprinkles({ - typeSize: "captionLarge", + typeSize: 3, }), }, disabled: { diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx index e22dd376..e8ec9d68 100644 --- a/src/components/RadioGroup/RadioGroup.stories.tsx +++ b/src/components/RadioGroup/RadioGroup.stories.tsx @@ -18,10 +18,10 @@ const meta: Meta = { render: (args) => ( - Unchecked + Unchecked - Checked + Checked ), diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 283b2751..739afbe3 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -9,7 +9,14 @@ import { import { useFloating } from "~/hooks/useFloating"; import { isString } from "~/utils"; -import { Box, List, PropsWithBox, Text, TextProps } from ".."; +import { + Box, + List, + PropsWithBox, + Text, + TextProps, + convertSizeToScale, +} from ".."; import { HelperText, InputVariants } from "../BaseInput"; import { NoOptions, @@ -141,8 +148,7 @@ const SelectInner = ( textOverflow="ellipsis" > diff --git a/src/components/Text/Text.css.ts b/src/components/Text/Text.css.ts index 5a9c5484..9f347e1a 100644 --- a/src/components/Text/Text.css.ts +++ b/src/components/Text/Text.css.ts @@ -4,22 +4,6 @@ import { sprinkles } from "~/theme"; export const text = recipe({ variants: { - variant: { - hero: {}, - title: {}, - heading: {}, - bodyStrong: {}, - bodyEmp: {}, - body: {}, - button: {}, - caption: {}, - }, - size: { - small: {}, - medium: {}, - large: {}, - inherit: {}, - }, ellipsis: { multiline: sprinkles({ overflow: "hidden", textOverflow: "ellipsis" }), true: sprinkles({ @@ -31,187 +15,7 @@ export const text = recipe({ }, }, - compoundVariants: [ - { - variants: { - variant: "hero", - size: "large", - }, - style: sprinkles({ typeSize: "heroLarge" }), - }, - { - variants: { - variant: "hero", - size: "medium", - }, - style: sprinkles({ typeSize: "heroMedium" }), - }, - { - variants: { - variant: "hero", - size: "small", - }, - style: sprinkles({ typeSize: "heroSmall" }), - }, - - { - variants: { - variant: "title", - size: "large", - }, - style: sprinkles({ typeSize: "titleLarge" }), - }, - { - variants: { - variant: "title", - size: "medium", - }, - style: sprinkles({ typeSize: "titleMedium" }), - }, - { - variants: { - variant: "title", - size: "small", - }, - style: sprinkles({ typeSize: "titleSmall" }), - }, - - { - variants: { - variant: "heading", - size: "large", - }, - style: sprinkles({ typeSize: "headingLarge" }), - }, - { - variants: { - variant: "heading", - size: "medium", - }, - style: sprinkles({ typeSize: "headingMedium" }), - }, - { - variants: { - variant: "heading", - size: "small", - }, - style: sprinkles({ typeSize: "headingSmall" }), - }, - - { - variants: { - variant: "bodyStrong", - size: "large", - }, - style: sprinkles({ typeSize: "bodyStrongLarge" }), - }, - { - variants: { - variant: "bodyStrong", - size: "medium", - }, - style: sprinkles({ typeSize: "bodyStrongMedium" }), - }, - { - variants: { - variant: "bodyStrong", - size: "small", - }, - style: sprinkles({ typeSize: "bodyStrongSmall" }), - }, - - { - variants: { - variant: "bodyEmp", - size: "large", - }, - style: sprinkles({ typeSize: "bodyEmpLarge" }), - }, - { - variants: { - variant: "bodyEmp", - size: "medium", - }, - style: sprinkles({ typeSize: "bodyEmpMedium" }), - }, - { - variants: { - variant: "bodyEmp", - size: "small", - }, - style: sprinkles({ typeSize: "bodyEmpSmall" }), - }, - - { - variants: { - variant: "body", - size: "large", - }, - style: sprinkles({ typeSize: "bodyLarge" }), - }, - { - variants: { - variant: "body", - size: "medium", - }, - style: sprinkles({ typeSize: "bodyMedium" }), - }, - { - variants: { - variant: "body", - size: "small", - }, - style: sprinkles({ typeSize: "bodySmall" }), - }, - - { - variants: { - variant: "button", - size: "large", - }, - style: sprinkles({ typeSize: "buttonLarge" }), - }, - { - variants: { - variant: "button", - size: "medium", - }, - style: sprinkles({ typeSize: "buttonMedium" }), - }, - { - variants: { - variant: "button", - size: "small", - }, - style: sprinkles({ typeSize: "buttonSmall" }), - }, - - { - variants: { - variant: "caption", - size: "large", - }, - style: sprinkles({ typeSize: "captionLarge" }), - }, - { - variants: { - variant: "caption", - size: "medium", - }, - style: sprinkles({ typeSize: "captionMedium" }), - }, - { - variants: { - variant: "caption", - size: "small", - }, - style: sprinkles({ typeSize: "captionSmall" }), - }, - ], - defaultVariants: { - variant: "body", - size: "medium", ellipsis: false, }, }); diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx index 8f8e0cd4..530b7b73 100644 --- a/src/components/Text/Text.stories.tsx +++ b/src/components/Text/Text.stories.tsx @@ -10,58 +10,9 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Hero: Story = { +export const Default: Story = { args: { - variant: "hero", + size: 4, children: "Some text", }, }; - -export const Title: Story = { - args: { - ...Hero.args, - variant: "title", - }, -}; - -export const Heading: Story = { - args: { - ...Hero.args, - variant: "heading", - }, -}; - -export const BodyStrong: Story = { - args: { - ...Hero.args, - variant: "bodyStrong", - }, -}; - -export const BodyEmp: Story = { - args: { - ...Hero.args, - variant: "bodyEmp", - }, -}; - -export const Body: Story = { - args: { - ...Hero.args, - variant: "body", - }, -}; - -export const Button: Story = { - args: { - ...Hero.args, - variant: "button", - }, -}; - -export const Caption: Story = { - args: { - ...Hero.args, - variant: "caption", - }, -}; diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index e37a0c33..8097048e 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -10,6 +10,7 @@ export type TextProps = PropsWithBox<{ children: ReactNode; as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "a" | "strong"; className?: string; + size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11; }> & TextVariants; @@ -18,29 +19,29 @@ export const Text = forwardRef( { children, as = "span", - variant, - size, + size = 4, ellipsis, color = "default1", className, + fontWeight = "regular", ...rest }, ref - ) => { - return ( - - {children} - - ); - } + ) => ( + + {children} + + ) ); Text.displayName = "Text"; diff --git a/src/components/Text/helpers.ts b/src/components/Text/helpers.ts new file mode 100644 index 00000000..a3b28ecf --- /dev/null +++ b/src/components/Text/helpers.ts @@ -0,0 +1,14 @@ +export const convertSizeToScale = ( + size: "small" | "medium" | "large" | undefined +) => { + switch (size) { + case "small": + return 1; + case "medium": + return 2; + case "large": + return 3; + default: + return 2; + } +}; diff --git a/src/components/Text/index.ts b/src/components/Text/index.ts index 22e10b67..b8096124 100644 --- a/src/components/Text/index.ts +++ b/src/components/Text/index.ts @@ -1 +1,2 @@ export * from "./Text"; +export * from "./helpers"; diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx index ef769c81..4d3eeefa 100644 --- a/src/components/Textarea/Textarea.tsx +++ b/src/components/Textarea/Textarea.tsx @@ -10,7 +10,7 @@ import { import { classNames } from "~/utils"; import { useAutoHeightTextarea } from "~/hooks/useAutoHeightTextarea"; -import { Box, PropsWithBox, Text } from "../.."; +import { Box, PropsWithBox, Text, convertSizeToScale } from "../.."; import { InputVariants, helperTextRecipe, inputRecipe } from "../BaseInput"; import { TextareaWrapper, useStateEvents } from "./TextareaWrapper"; @@ -112,8 +112,7 @@ export const Textarea = forwardRef( {helperText && ( {helperText} diff --git a/src/components/Toggle/Toggle.stories.tsx b/src/components/Toggle/Toggle.stories.tsx index cdc2b349..a1f549ac 100644 --- a/src/components/Toggle/Toggle.stories.tsx +++ b/src/components/Toggle/Toggle.stories.tsx @@ -15,7 +15,7 @@ export const Primary: Story = { args: { children: [ // eslint-disable-next-line react/jsx-key - Option 1, + Option 1, ], }, }; @@ -25,7 +25,7 @@ export const DefaultPressed: Story = { defaultPressed: true, children: [ // eslint-disable-next-line react/jsx-key - Option 1, + Option 1, ], }, }; @@ -35,7 +35,7 @@ export const Disabled: Story = { disabled: true, children: [ // eslint-disable-next-line react/jsx-key - Option 1, + Option 1, ], }, }; @@ -46,7 +46,7 @@ export const DisabledAndPressed: Story = { pressed: true, children: [ // eslint-disable-next-line react/jsx-key - Option 1, + Option 1, ], }, }; diff --git a/src/components/Tooltip/ContentHeading.tsx b/src/components/Tooltip/ContentHeading.tsx index 60db2b2b..598b108c 100644 --- a/src/components/Tooltip/ContentHeading.tsx +++ b/src/components/Tooltip/ContentHeading.tsx @@ -9,7 +9,7 @@ export const ContentHeading = ({ children }: TooltipContentHeadingProps) => { return ( + +# Typography + + + +
+
+ +# Font weights + + diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts index 6538d995..ea711231 100644 --- a/src/theme/sprinkles.css.ts +++ b/src/theme/sprinkles.css.ts @@ -180,7 +180,7 @@ const responsiveProperties = defineProperties({ marginX: ["marginLeft", "marginRight"], marginY: ["marginTop", "marginBottom"], placeItems: ["alignItems", "justifyContent"], - typeSize: ["fontSize", "lineHeight", "fontWeight", "letterSpacing"], + typeSize: ["fontSize", "lineHeight", "letterSpacing"], borderWidth: [ "borderTopWidth", "borderBottomWidth", diff --git a/src/theme/themes/common.ts b/src/theme/themes/common.ts index 6de285db..0c972434 100644 --- a/src/theme/themes/common.ts +++ b/src/theme/themes/common.ts @@ -31,30 +31,17 @@ export const spacing = { }; export const fontSize = { - heroLarge: "34px", - heroMedium: "28px", - heroSmall: "24px", - titleLarge: "22px", - titleMedium: "20px", - titleSmall: "18px", - headingLarge: "18px", - headingMedium: "16px", - headingSmall: "14px", - bodyStrongLarge: "16px", - bodyStrongMedium: "14px", - bodyStrongSmall: "13px", - bodyEmpLarge: "16px", - bodyEmpMedium: "14px", - bodyEmpSmall: "13px", - bodyLarge: "16px", - bodyMedium: "14px", - bodySmall: "13px", - buttonLarge: "16px", - buttonMedium: "14px", - buttonSmall: "13px", - captionLarge: "13px", - captionMedium: "12px", - captionSmall: "11px", + 1: "11px", + 2: "12px", + 3: "13px", + 4: "14px", + 5: "16px", + 6: "18px", + 7: "20px", + 8: "22px", + 9: "24px", + 10: "28px", + 11: "34px", }; export const borderRadius = { @@ -70,85 +57,38 @@ export const borderRadius = { }; export const lineHeight = { - 1: `1`, - heroLarge: "40px", - heroMedium: "36px", - heroSmall: "30px", - titleLarge: "28px", - titleMedium: "26px", - titleSmall: "24px", - headingLarge: "24px", - headingMedium: "22px", - headingSmall: "18px", - bodyStrongLarge: "24px", - bodyStrongMedium: "22px", - bodyStrongSmall: "20px", - bodyEmpLarge: "24px", - bodyEmpMedium: "22px", - bodyEmpSmall: "20px", - bodyLarge: "24px", - bodyMedium: "22px", - bodySmall: "20px", - buttonLarge: "24px", - buttonMedium: "22px", - buttonSmall: "20px", - captionLarge: "20px", - captionMedium: "18px", - captionSmall: "16px", + 1: "16px", + 2: "18px", + 3: "20px", + 4: "20px", + 5: "22px", + 6: "24px", + 7: "26px", + 8: "28px", + 9: "30px", + 10: "36px", + 11: "40px", }; export const fontWeight = { - heroLarge: "580", - heroMedium: "580", - heroSmall: "500", - titleLarge: "380", - titleMedium: "380", - titleSmall: "380", - headingLarge: "600", - headingMedium: "600", - headingSmall: "600", - bodyStrongLarge: "600", - bodyStrongMedium: "600", - bodyStrongSmall: "600", - bodyEmpLarge: "500", - bodyEmpMedium: "500", - bodyEmpSmall: "500", - bodyLarge: "440", - bodyMedium: "440", - bodySmall: "440", - buttonLarge: "580", - buttonMedium: "580", - buttonSmall: "580", - captionLarge: "380", - captionMedium: "440", - captionSmall: "480", + light: "300", + regular: "400", + medium: "500", + bold: "700", }; export const letterSpacing = { - heroLarge: "-0.01em", - heroMedium: "-0.01em", - heroSmall: "-0.01em", - titleLarge: "normal", - titleMedium: "normal", - titleSmall: "normal", - headingLarge: "normal", - headingMedium: "normal", - headingSmall: "0.01em", - bodyStrongLarge: "0.01em", - bodyStrongMedium: "0.01em", - bodyStrongSmall: "0.015em", - bodyEmpLarge: "0.01em", - bodyEmpMedium: "0.01em", - bodyEmpSmall: "0.015em", - bodyLarge: "0.01em", - bodyMedium: "0.01em", - bodySmall: "0.015em", - buttonLarge: "0.02em", - buttonMedium: "0.02em", - buttonSmall: "0.025em", - captionLarge: "0.01em", - captionMedium: "0.015em", - captionSmall: "0.025em", + 1: "0.025em", + 2: "0.015em", + 3: "0.015em", + 4: "0.01em", + 5: "0em", + 6: "0em", + 7: "0em", + 8: "0em", + 9: "-0.01em", + 10: "-0.01em", + 11: "-0.01em", }; export const borderWidth = {