diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 0765789d1..7e6acef50 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -3,7 +3,7 @@ name: Chromatic -on: +on: pull_request: branches-ignore: - changeset-release/* diff --git a/.storybook/components/component-info/ComponentInfo.css b/.storybook/components/component-info/ComponentInfo.css index 611522bca..5775822d8 100644 --- a/.storybook/components/component-info/ComponentInfo.css +++ b/.storybook/components/component-info/ComponentInfo.css @@ -16,7 +16,7 @@ .o-ui-sb-component-info-title { display: inline-block !important; color: var(--o-ui-text-alias-secondary) !important; - font-variation-settings: "wght" 500 !important; + font-weight: 550 !important; font-size: var(--o-ui-fs-3) !important; font-style: normal !important; width: var(--o-ui-sz-11) !important; diff --git a/.storybook/components/preview/Preview.css b/.storybook/components/preview/Preview.css index 389014d36..ae45c334a 100644 --- a/.storybook/components/preview/Preview.css +++ b/.storybook/components/preview/Preview.css @@ -24,8 +24,7 @@ color: var(--o-ui-white); z-index: 1; font-size: 0.625rem; - font-weight: 400; - font-variation-settings: "wght" 500; + font-weight: 550; letter-spacing: 0.025em; text-transform: uppercase; } diff --git a/.storybook/preview.js b/.storybook/preview.js index d6661dfc9..33eb7b7d1 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -11,6 +11,8 @@ import { Themes } from "./styles/themes"; if (!isChromatic) { // Custom font makes chromatic inconsistent and cause "false positive". View https://www.chromatic.com/docs/resource-loading#loading-custom-fonts. import("@css/font/index.css"); +} else { + import("./styles/chromatic.css"); } export const parameters = { diff --git a/.storybook/styles/app.css b/.storybook/styles/app.css index 3c647dd1a..09ea35e04 100644 --- a/.storybook/styles/app.css +++ b/.storybook/styles/app.css @@ -1,6 +1,6 @@ html, body { - font-family: "TT Interphases Variable", Arial, Helvetica, serif !important; + font-family: "Inter", Arial, Helvetica, serif !important; -webkit-font-smoothing: antialiased; font-size: 16px; } diff --git a/.storybook/styles/chromatic.css b/.storybook/styles/chromatic.css new file mode 100644 index 000000000..c5fe03e5e --- /dev/null +++ b/.storybook/styles/chromatic.css @@ -0,0 +1,9 @@ +/* https://www.chromatic.com/docs/resource-loading/#solution-a-preload-fonts */ +/* Given that loading fonts and making sure that these loads before Chromatic takes a snapshot, and given that the proposed solutions */ +/* are currently not working. We needed a way to ensure that every snapshot uses the same font. The current approach is to force Arial for all Chromatic Snaphots */ +/* While not ideal this at least solves the issue at hand. */ +*, +*::before, +*::after { + font-family: Arial; +} diff --git a/.storybook/styles/docs.css b/.storybook/styles/docs.css index b55aafa2b..b486948f4 100644 --- a/.storybook/styles/docs.css +++ b/.storybook/styles/docs.css @@ -1,6 +1,6 @@ :root { /* Use this var only when the element is not affected by the font-family specified in Storybook docs theme */ - --orbiter-font-family: "TT Interphases Variable", Arial, Helvetica, sans-serif; + --orbiter-font-family: "Inter", Arial, Helvetica, sans-serif; } /* LAYOUT */ @@ -15,7 +15,7 @@ /* STORY */ .docs-story div + div > button { - font-variation-settings: "wght" 500; + font-weight: 550; font-size: var(--o-ui-fs-2); } @@ -32,8 +32,7 @@ } .docblock-argstable-head tr th { - font-variation-settings: "wght" 500 !important; - font-weight: 400; + font-weight: 550 !important; color: var(--o-ui-text-alias-primary) !important; } @@ -57,13 +56,11 @@ /* ARGS TABLE | BODY */ .docblock-argstable-body td > span { - font-variation-settings: "wght" 500 !important; - font-weight: 400; + font-weight: 550 !important; } .docblock-argstable-body td > label > span { - font-variation-settings: "wght" 500 !important; - font-weight: 400; + font-weight: 550 !important; } .docblock-argstable-body td label input[type=radio] { @@ -154,8 +151,7 @@ .sbdocs.sbdocs-h4, .sbdocs.sbdocs-h5, .sbdocs.sbdocs-h6 { - font-variation-settings: "wght" 500; - font-weight: 400; + font-weight: 550; /* fixing the default position relative on all titles in shared.tsx */ position: initial; } @@ -167,7 +163,7 @@ .sbdocs.sbdocs-h1, .sbdocs .sbdocs-title { - font-variation-settings: "wght" 500; + font-weight: 550; } .sbdocs.sbdocs-h2 { @@ -266,8 +262,7 @@ } .sbdocs.sbdocs-table tr th { - font-weight: 400; - font-variation-settings: "wght" 600; + font-weight: 600; font-size: var(--o-ui-fs-4); } @@ -303,7 +298,6 @@ .sbdocs.sbdocs-table b, .sbdocs.sbdocs-table strong { - font-variation-settings: "wght" 600; font-weight: 400; } @@ -354,7 +348,6 @@ /* ELEMENTS | STRONG */ .sbdocs strong { - font-variation-settings: "wght" 500; font-weight: 400; } diff --git a/.storybook/styles/themes.js b/.storybook/styles/themes.js index 1aa7e9d82..9c29c157f 100644 --- a/.storybook/styles/themes.js +++ b/.storybook/styles/themes.js @@ -9,7 +9,7 @@ export const Themes = { }), docs: create({ base: "light", - fontBase: "TT Interphases Variable, Arial, Helvetica, sans-serif", + fontBase: "Inter, Arial, Helvetica, sans-serif", textColor: "#04091A" }) }; diff --git a/packages/components/package.json b/packages/components/package.json index 8933443bd..7e4f2963a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -39,3 +39,4 @@ }, "gitHead": "f8b5019bdc53f68abe27e931387aeec7f0747d85" } + diff --git a/packages/components/src/accordion/src/Accordion.css b/packages/components/src/accordion/src/Accordion.css index 2b79ae366..c7e394c51 100644 --- a/packages/components/src/accordion/src/Accordion.css +++ b/packages/components/src/accordion/src/Accordion.css @@ -15,7 +15,7 @@ /* HEADER */ .o-ui-accordion .o-ui-accordion-header { margin-bottom: 0; - font-variation-settings: "wght" 500; + font-weight: 500; } /* HEADER BORDERLESS */ diff --git a/packages/components/src/accordion/src/AccordionHeader.tsx b/packages/components/src/accordion/src/AccordionHeader.tsx index 31737b1ee..0cd58dfd0 100644 --- a/packages/components/src/accordion/src/AccordionHeader.tsx +++ b/packages/components/src/accordion/src/AccordionHeader.tsx @@ -69,7 +69,7 @@ export function InnerAccordionHeader(props: InnerAccordionHeaderProps) { headingProps ?? {}, { className: "o-ui-accordion-header", - size: "2xs" + size: "xs" } )} > diff --git a/packages/components/src/button/src/Button.css b/packages/components/src/button/src/Button.css index 649628249..7f2d8a4d4 100644 --- a/packages/components/src/button/src/Button.css +++ b/packages/components/src/button/src/Button.css @@ -11,7 +11,7 @@ background-image: none; cursor: pointer; line-height: var(--o-ui-lh-1); - font-variation-settings: "wght" 500; + font-weight: 500; transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive); border: none; text-align: center; @@ -402,4 +402,4 @@ a.o-ui-button { .o-ui-button:hover.o-ui-button-primary .o-ui-button-counter, .o-ui-button-hover:not([disabled]).o-ui-button-primary .o-ui-button-counter { opacity: 1; -} \ No newline at end of file +} diff --git a/packages/components/src/card/src/Card.tsx b/packages/components/src/card/src/Card.tsx index 6c8fecf32..b590e4dc9 100644 --- a/packages/components/src/card/src/Card.tsx +++ b/packages/components/src/card/src/Card.tsx @@ -55,7 +55,8 @@ export function InnerCard({ }, content: { as: Text, - className: "o-ui-card-content" + className: "o-ui-card-content", + size: "sm" }, header: { className: "o-ui-card-header" @@ -63,7 +64,7 @@ export function InnerCard({ heading: { as: "span", className: "o-ui-card-heading", - size: "xs" + size: "sm" }, illustration: { className: "o-ui-card-illustration", @@ -73,7 +74,7 @@ export function InnerCard({ }), [orientationValue])); const headerMarkup = isString(header?.props?.children) - ? cloneElement(header, { children: <Text>{header?.props?.children}</Text> }) + ? cloneElement(header, { children: <Text size="sm">{header?.props?.children}</Text> }) : header; const imageMarkup = image && ( diff --git a/packages/components/src/counter/src/Counter.css b/packages/components/src/counter/src/Counter.css index 0036e5309..8822fa596 100644 --- a/packages/components/src/counter/src/Counter.css +++ b/packages/components/src/counter/src/Counter.css @@ -4,7 +4,7 @@ /* HIGHLIGHT */ .o-ui-counter-highlight { - font-variation-settings: "wght" 500; + font-weight: 500; } /* PUSHED */ diff --git a/packages/components/src/counter/src/Counter.tsx b/packages/components/src/counter/src/Counter.tsx index e5c8747dc..60df0157c 100644 --- a/packages/components/src/counter/src/Counter.tsx +++ b/packages/components/src/counter/src/Counter.tsx @@ -30,7 +30,7 @@ export interface InnerCounterProps extends SlotProps, InternalProps, StyledCompo /** * A counter can vary in size. */ - size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "inherit">; + size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inherit">; /** * The style to use. */ diff --git a/packages/components/src/dialog/src/Dialog.tsx b/packages/components/src/dialog/src/Dialog.tsx index abaadfeec..c18ee8f73 100644 --- a/packages/components/src/dialog/src/Dialog.tsx +++ b/packages/components/src/dialog/src/Dialog.tsx @@ -227,7 +227,8 @@ export function InnerDialog({ content: { as: Text, className: "o-ui-dialog-content", - id: `${dialogId}-content` + id: `${dialogId}-content`, + size: "sm" }, footer: { as: "footer", @@ -241,7 +242,7 @@ export function InnerDialog({ as: "h3", className: "o-ui-dialog-heading", id: `${dialogId}-heading`, - size: "sm" + size: "lg" }, illustration: { className: "o-ui-dialog-illustration", diff --git a/packages/components/src/divider/src/Divider.tsx b/packages/components/src/divider/src/Divider.tsx index 49f5ff126..6950c8fcd 100644 --- a/packages/components/src/divider/src/Divider.tsx +++ b/packages/components/src/divider/src/Divider.tsx @@ -27,7 +27,7 @@ export function InnerDivider({ const orientationValue = useResponsiveValue(orientation); const labelMarkup = children && ( - <Text className="o-ui-divider-label"> + <Text className="o-ui-divider-label" size="sm"> {children} </Text> ); diff --git a/packages/components/src/field/src/FieldMessage.tsx b/packages/components/src/field/src/FieldMessage.tsx index f92a110ce..f90ed9c86 100644 --- a/packages/components/src/field/src/FieldMessage.tsx +++ b/packages/components/src/field/src/FieldMessage.tsx @@ -57,7 +57,8 @@ export const FieldMessage = forwardRef<any, InnerFieldMessageProps>(({ variant, fluidValue && "fluid" ), - ref + ref, + size: "sm" as const } )} > diff --git a/packages/components/src/form/src/Form.css b/packages/components/src/form/src/Form.css index 8651bcacd..0eef90ad9 100644 --- a/packages/components/src/form/src/Form.css +++ b/packages/components/src/form/src/Form.css @@ -17,8 +17,7 @@ .o-ui-fieldset-label { display: inline-block; font-size: var(--o-ui-fs-4); - font-weight: 400; - font-variation-settings: "wght" 600; + font-weight: 600; color: var(--o-ui-text-alias-primary); margin-bottom: var(--o-ui-sp-3); } diff --git a/packages/components/src/illustrated-message/src/IllustratedMessage.tsx b/packages/components/src/illustrated-message/src/IllustratedMessage.tsx index 49e16f29c..e2403935f 100644 --- a/packages/components/src/illustrated-message/src/IllustratedMessage.tsx +++ b/packages/components/src/illustrated-message/src/IllustratedMessage.tsx @@ -38,7 +38,7 @@ export function InnerIllustratedMessage({ heading: { as: "h3", className: "o-ui-illustrated-message-heading", - size: "sm" + size: "md" }, image: { className: "o-ui-illustrated-message-image" diff --git a/packages/components/src/input-group/src/InputGroupContext.tsx b/packages/components/src/input-group/src/InputGroupContext.tsx index 203097169..5d75fe50d 100644 --- a/packages/components/src/input-group/src/InputGroupContext.tsx +++ b/packages/components/src/input-group/src/InputGroupContext.tsx @@ -87,7 +87,7 @@ export function useInputGroupButtonAddonProps(): [UseInputGroupButtonAddonPropsR const [{ disabled }, isInInputGroup] = useInputGroupContext(); const props = isInInputGroup && { - className: "o-ui-input-group-addon o-ui-input-group-button-addon", + className: "o-ui-input-group-addon o-ui-input-group-button-addon", disabled }; diff --git a/packages/components/src/listbox/src/Listbox.css b/packages/components/src/listbox/src/Listbox.css index a9ece7d83..8967ac6c0 100644 --- a/packages/components/src/listbox/src/Listbox.css +++ b/packages/components/src/listbox/src/Listbox.css @@ -151,7 +151,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc /* SECTION */ .o-ui-listbox-section { display: flex; - font-variation-settings: "wght" 500; + font-weight: 500; padding-left: var(--o-ui-sp-3); cursor: default; line-height: var(--o-ui-lh-1); diff --git a/packages/components/src/listbox/src/ListboxOption.tsx b/packages/components/src/listbox/src/ListboxOption.tsx index fb0e89e9c..be5c1ec1a 100644 --- a/packages/components/src/listbox/src/ListboxOption.tsx +++ b/packages/components/src/listbox/src/ListboxOption.tsx @@ -127,7 +127,8 @@ export function InnerListboxOption({ }, text: { className: "o-ui-listbox-option-label", - id: `${id}-label` + id: `${id}-label`, + size: "sm" } }), [id])); diff --git a/packages/components/src/lozenge/src/Lozenge.css b/packages/components/src/lozenge/src/Lozenge.css index 9f7a7ebd6..52043d501 100644 --- a/packages/components/src/lozenge/src/Lozenge.css +++ b/packages/components/src/lozenge/src/Lozenge.css @@ -5,7 +5,7 @@ color: var(--o-ui-text-alias-primary); padding: 0 var(--o-ui-sp-2); border-radius: var(--o-ui-br-2); - font-variation-settings: "wght" 600; + font-weight: 600; min-height: var(--o-ui-sz-3); line-height: var(--o-ui-sz-3); width: max-content; diff --git a/packages/components/src/menu/src/Menu.css b/packages/components/src/menu/src/Menu.css index 70b483d29..e13b1ec97 100644 --- a/packages/components/src/menu/src/Menu.css +++ b/packages/components/src/menu/src/Menu.css @@ -156,8 +156,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol .o-ui-menu-section-title { cursor: default; display: flex; - font-weight: 400; - font-variation-settings: "wght" 500; + font-weight: 500; padding-left: var(--o-ui-sp-3); height: var(--o-ui-menu-item-height); line-height: var(--o-ui-lh-1); diff --git a/packages/components/src/message/src/Message.tsx b/packages/components/src/message/src/Message.tsx index 410baab1f..44e48b92b 100644 --- a/packages/components/src/message/src/Message.tsx +++ b/packages/components/src/message/src/Message.tsx @@ -21,8 +21,7 @@ const MessageContent = forwardRef<any, TextProps>(({ <StyleProvider value={{ heading: { - className: "o-ui-message-title", - size: "2xs" + className: "o-ui-message-title" }, "html-a": { color: "inherit" diff --git a/packages/components/src/popover/src/Popover.tsx b/packages/components/src/popover/src/Popover.tsx index 622acf628..d3e43fd27 100644 --- a/packages/components/src/popover/src/Popover.tsx +++ b/packages/components/src/popover/src/Popover.tsx @@ -128,7 +128,8 @@ export function InnerPopover({ }, content: { as: Text, - className: "o-ui-popover-content" + className: "o-ui-popover-content", + size: "sm" }, footer: { as: "footer", @@ -137,7 +138,7 @@ export function InnerPopover({ heading: { as: "h3", id: `${popoverId}-heading`, - size: "sm" + size: "md" } }), [popoverId])); diff --git a/packages/components/src/shared/src/size.ts b/packages/components/src/shared/src/size.ts index 24720d2d1..7f1476209 100644 --- a/packages/components/src/shared/src/size.ts +++ b/packages/components/src/shared/src/size.ts @@ -1,4 +1,4 @@ -export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "inherit"; +export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "inherit"; export function normalizeSize<T extends Size>(size?: T) { return size || "md"; diff --git a/packages/components/src/tag/src/Tag.tsx b/packages/components/src/tag/src/Tag.tsx index f6796aac7..44fffd8c5 100644 --- a/packages/components/src/tag/src/Tag.tsx +++ b/packages/components/src/tag/src/Tag.tsx @@ -38,8 +38,8 @@ export interface InnerTagProps extends InternalProps, InteractionProps, StyledCo /* eslint-disable sort-keys, sort-keys-fix/sort-keys-fix */ const textSize = createSizeAdapter({ - "sm": "md", - "md": "md" + "sm": "sm", + "md": "sm" }); /* eslint-enable sort-keys, sort-keys-fix/sort-keys-fix */ diff --git a/packages/components/src/tile/src/useTile.tsx b/packages/components/src/tile/src/useTile.tsx index 3bf27d932..378bd5f6b 100644 --- a/packages/components/src/tile/src/useTile.tsx +++ b/packages/components/src/tile/src/useTile.tsx @@ -31,7 +31,7 @@ export function useTile({ heading: { as: "span", className: "o-ui-tile-heading", - size: "xs" + size: "sm" }, illustration: { className: "o-ui-tile-illustration", diff --git a/packages/components/src/typography/docs/Heading.stories.mdx b/packages/components/src/typography/docs/Heading.stories.mdx index 5f12101b3..1954e3e09 100644 --- a/packages/components/src/typography/docs/Heading.stories.mdx +++ b/packages/components/src/typography/docs/Heading.stories.mdx @@ -53,7 +53,7 @@ You can alter the size of an heading component by specifying a `size` prop. <Story name="size"> <> <Heading>Houston, Tranquillity Base here. The Eagle has landed.</Heading> - <H2 size="sm">Houston, Tranquillity Base here. The Eagle has landed.</H2> + <H2 size="xs">Houston, Tranquillity Base here. The Eagle has landed.</H2> </> </Story> </Preview> diff --git a/packages/components/src/typography/src/Heading.css b/packages/components/src/typography/src/Heading.css index 4f98c9e63..c0093bd87 100644 --- a/packages/components/src/typography/src/Heading.css +++ b/packages/components/src/typography/src/Heading.css @@ -1,44 +1,62 @@ :where(.o-ui-heading) { margin: 0; font-size: inherit; - font-weight: 400; - font-variation-settings: "wght" 600; overflow-wrap: break-word; } /* SIZE */ -:where(.o-ui-heading-2xs) { - font-size: var(--o-ui-fs-4); - line-height: var(--o-ui-lh-3); - margin-bottom: calc(var(--o-ui-fs-4) * .5); -} - :where(.o-ui-heading-xs) { - font-size: var(--o-ui-fs-5); - line-height: var(--o-ui-lh-4); + font-size: var(--hop-heading-xs-font-size); + font-family: var(--hop-heading-xs-font-family); + font-weight: var(--hop-heading-xs-font-weight); + line-height: var(--hop-heading-xs-line-height); margin-bottom: calc(var(--o-ui-fs-5) * .5); } :where(.o-ui-heading-sm) { - font-size: var(--o-ui-fs-6); - line-height: var(--o-ui-lh-5); + font-size: var(--hop-heading-sm-font-size); + font-family: var(--hop-heading-sm-font-family); + font-weight: var(--hop-heading-sm-font-weight); + line-height: var(--hop-heading-sm-line-height); margin-bottom: calc(var(--o-ui-fs-6) * .5); } :where(.o-ui-heading-md) { - font-size: var(--o-ui-fs-7); - line-height: var(--o-ui-lh-5); + font-size: var(--hop-heading-md-font-size); + font-family: var(--hop-heading-md-font-family); + font-weight: var(--hop-heading-md-font-weight); + line-height: var(--hop-heading-md-line-height); margin-bottom: calc(var(--o-ui-fs-7) * .5); } :where(.o-ui-heading-lg) { - font-size: var(--o-ui-fs-8); - line-height: var(--o-ui-lh-6); + font-size: var(--hop-heading-lg-font-size); + font-family: var(--hop-heading-lg-font-family); + font-weight: var(--hop-heading-lg-font-weight); + line-height: var(--hop-heading-lg-line-height); margin-bottom: calc(var(--o-ui-fs-8) * .5); } :where(.o-ui-heading-xl) { - font-size: var(--o-ui-fs-9); - line-height: var(--o-ui-lh-2); + font-size: var(--hop-heading-xl-font-size); + font-family: var(--hop-heading-xl-font-family); + font-weight: var(--hop-heading-xl-font-weight); + line-height: var(--hop-heading-xl-line-height); margin-bottom: calc(var(--o-ui-fs-9) * .5); } + +:where(.o-ui-heading-2xl) { + font-size: var(--hop-heading-2xl-font-size); + font-family: var(--hop-heading-2xl-font-family); + font-weight: var(--hop-heading-2xl-font-weight); + line-height: var(--hop-heading-2xl-line-height); + margin-bottom: calc(var(--o-ui-fs-4) * .5); +} + +:where(.o-ui-heading-3xl) { + font-size: var(--hop-heading-3xl-font-size); + font-family: var(--hop-heading-3xl-font-family); + font-weight: var(--hop-heading-3xl-font-weight); + line-height: var(--hop-heading-3xl-line-height); + margin-bottom: calc(var(--o-ui-fs-4) * .5); +} diff --git a/packages/components/src/typography/src/Heading.tsx b/packages/components/src/typography/src/Heading.tsx index 6cfad8b65..647291329 100644 --- a/packages/components/src/typography/src/Heading.tsx +++ b/packages/components/src/typography/src/Heading.tsx @@ -11,7 +11,7 @@ export type AbstractHeadingProps<T extends ElementType> = SlotProps & InternalPr /** * An heading can vary in size. */ - size?: ResponsiveProp<"2xs" | "xs" | "sm" | "md" | "lg" | "xl">; + size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl">; }; const DefaultElement = "div"; diff --git a/packages/components/src/typography/src/Paragraph.css b/packages/components/src/typography/src/Paragraph.css index 521a2888a..a8a26f857 100644 --- a/packages/components/src/typography/src/Paragraph.css +++ b/packages/components/src/typography/src/Paragraph.css @@ -1,5 +1,5 @@ .o-ui-p { - font-variation-settings: "wght" 400; + font-weight: 400; overflow-wrap: break-word; margin: 0; } diff --git a/packages/components/src/typography/src/Text.css b/packages/components/src/typography/src/Text.css index dcac402a6..bbc6332c2 100644 --- a/packages/components/src/typography/src/Text.css +++ b/packages/components/src/typography/src/Text.css @@ -1,47 +1,44 @@ /* SIZE */ :where(.o-ui-text-xs) { - font-size: var(--o-ui-fs-1); - line-height: var(--o-ui-lh-2); + font-size: var(--hop-body-xs-font-size); + font-family: var(--hop-body-xs-font-family); + font-weight: var(--hop-body-xs-font-weight); + line-height: var(--hop-body-xs-line-height); } :where(.o-ui-text-sm) { - font-size: var(--o-ui-fs-2); - line-height: var(--o-ui-lh-4); + font-size: var(--hop-body-sm-font-size); + font-family: var(--hop-body-sm-font-family); + font-weight: var(--hop-body-sm-font-weight); + line-height: var(--hop-body-sm-line-height); } :where(.o-ui-text-md) { - font-size: var(--o-ui-fs-3); - line-height: var(--o-ui-lh-5); + font-size: var(--hop-body-md-font-size); + font-family: var(--hop-body-md-font-family); + font-weight: var(--hop-body-md-font-weight); + line-height: var(--hop-body-md-line-height); } :where(.o-ui-text-lg) { - font-size: var(--o-ui-fs-4); - line-height: var(--o-ui-lh-6); + font-size: var(--hop-body-lg-font-size); + font-family: var(--hop-body-lg-font-family); + font-weight: var(--hop-body-lg-font-weight); + line-height: var(--hop-body-lg-line-height); } :where(.o-ui-text-xl) { - font-size: var(--o-ui-fs-5); - line-height: var(--o-ui-lh-4); + font-size: var(--hop-body-xl-font-size); + font-family: var(--hop-body-xl-font-family); + font-weight: var(--hop-body-xl-font-weight); + line-height: var(--hop-body-xl-line-height); } :where(.o-ui-text-2xl) { - font-size: var(--o-ui-fs-6); - line-height: var(--o-ui-lh-5); -} - -:where(.o-ui-text-3xl) { - font-size: var(--o-ui-fs-7); - line-height: var(--o-ui-lh-5); -} - -:where(.o-ui-text-4xl) { - font-size: var(--o-ui-fs-8); - line-height: var(--o-ui-lh-3); -} - -:where(.o-ui-text-5xl) { - font-size: var(--o-ui-fs-9); - line-height: var(--o-ui-lh-2); + font-size: var(--hop-body-2xl-font-size); + font-family: var(--hop-body-2xl-font-family); + font-weight: var(--hop-body-2xl-font-weight); + line-height: var(--hop-body-2xl-line-height); } :where(.o-ui-text-inherit-size) { diff --git a/packages/components/src/typography/src/Text.tsx b/packages/components/src/typography/src/Text.tsx index 66222d14d..b7ec49bce 100644 --- a/packages/components/src/typography/src/Text.tsx +++ b/packages/components/src/typography/src/Text.tsx @@ -9,7 +9,7 @@ export interface InnerTextProps extends SlotProps, InternalProps, StyledComponen /** * A text can vary in size. */ - size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "inherit">; + size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inherit">; } export function InnerText(props: InnerTextProps) { diff --git a/packages/components/src/typography/tests/chromatic/Heading.stories.tsx b/packages/components/src/typography/tests/chromatic/Heading.stories.tsx index 7991d3fa5..2aded4447 100644 --- a/packages/components/src/typography/tests/chromatic/Heading.stories.tsx +++ b/packages/components/src/typography/tests/chromatic/Heading.stories.tsx @@ -12,6 +12,8 @@ export const Size: HeadingStory = { storyName: "size", render: () => ( <> + <Heading size="3xl">I see Earth!<br /> It is so beautiful!</Heading> + <Heading size="2xl">I see Earth!<br /> It is so beautiful!</Heading> <Heading size="xl">I see Earth!<br /> It is so beautiful!</Heading> <Heading size="lg">I see Earth!<br /> It is so beautiful!</Heading> <Heading>I see Earth!<br /> It is so beautiful!</Heading> @@ -36,6 +38,8 @@ export const HeadingH1: HeadingStory = { storyName: "h1", render: () => ( <> + <H1 size="3xl">I see Earth!<br /> It is so beautiful!</H1> + <H1 size="2xl">I see Earth!<br /> It is so beautiful!</H1> <H1 size="xl">I see Earth!<br /> It is so beautiful!</H1> <H1 size="lg">I see Earth!<br /> It is so beautiful!</H1> <H1>I see Earth!<br /> It is so beautiful!</H1> @@ -49,6 +53,8 @@ export const HeadingH2: HeadingStory = { storyName: "h2", render: () => ( <> + <H2 size="3xl">I see Earth!<br /> It is so beautiful!</H2> + <H2 size="2xl">I see Earth!<br /> It is so beautiful!</H2> <H2 size="xl">I see Earth!<br /> It is so beautiful!</H2> <H2 size="lg">I see Earth!<br /> It is so beautiful!</H2> <H2>I see Earth!<br /> It is so beautiful!</H2> @@ -62,6 +68,8 @@ export const HeadingH3: HeadingStory = { storyName: "h3", render: () => ( <> + <H3 size="3xl">I see Earth!<br /> It is so beautiful!</H3> + <H3 size="2xl">I see Earth!<br /> It is so beautiful!</H3> <H3 size="xl">I see Earth!<br /> It is so beautiful!</H3> <H3 size="lg">I see Earth!<br /> It is so beautiful!</H3> <H3>I see Earth!<br /> It is so beautiful!</H3> @@ -75,6 +83,8 @@ export const HeadingH4: HeadingStory = { storyName: "h4", render: () => ( <> + <H4 size="3xl">I see Earth!<br /> It is so beautiful!</H4> + <H4 size="2xl">I see Earth!<br /> It is so beautiful!</H4> <H4 size="xl">I see Earth!<br /> It is so beautiful!</H4> <H4 size="lg">I see Earth!<br /> It is so beautiful!</H4> <H4>I see Earth!<br /> It is so beautiful!</H4> @@ -88,6 +98,8 @@ export const HeadingH5: HeadingStory = { storyName: "h5", render: () => ( <> + <H5 size="3xl">I see Earth!<br /> It is so beautiful!</H5> + <H5 size="2xl">I see Earth!<br /> It is so beautiful!</H5> <H5 size="xl">I see Earth!<br /> It is so beautiful!</H5> <H5 size="lg">I see Earth!<br /> It is so beautiful!</H5> <H5>I see Earth!<br /> It is so beautiful!</H5> @@ -101,6 +113,8 @@ export const HeadingH6: HeadingStory = { storyName: "h6", render: () => ( <> + <H6 size="3xl">I see Earth!<br /> It is so beautiful!</H6> + <H6 size="2xl">I see Earth!<br /> It is so beautiful!</H6> <H6 size="xl">I see Earth!<br /> It is so beautiful!</H6> <H6 size="lg">I see Earth!<br /> It is so beautiful!</H6> <H6>I see Earth!<br /> It is so beautiful!</H6> diff --git a/packages/components/src/typography/tests/chromatic/Text.stories.tsx b/packages/components/src/typography/tests/chromatic/Text.stories.tsx index 951add435..a4fbe9984 100644 --- a/packages/components/src/typography/tests/chromatic/Text.stories.tsx +++ b/packages/components/src/typography/tests/chromatic/Text.stories.tsx @@ -14,9 +14,6 @@ export const Default: TextStory = { storyName: "default", render: () => ( <Stack gap="0"> - <Text size="5xl">There are no passengers on spaceship earth.</Text> - <Text size="4xl">There are no passengers on spaceship earth.</Text> - <Text size="3xl">There are no passengers on spaceship earth.</Text> <Text size="2xl">There are no passengers on spaceship earth.</Text> <Text size="xl">There are no passengers on spaceship earth.</Text> <Text size="lg">There are no passengers on spaceship earth.</Text> diff --git a/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.otf b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.otf new file mode 100644 index 000000000..8f0445633 Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.otf differ diff --git a/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff new file mode 100644 index 000000000..0010c1aef Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff differ diff --git a/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff2 b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff2 new file mode 100644 index 000000000..94956a9c4 Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff2 differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.otf b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.otf new file mode 100644 index 000000000..bf932ef01 Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.otf differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff new file mode 100644 index 000000000..77ffa804a Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff2 b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff2 new file mode 100644 index 000000000..74d8056b6 Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff2 differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.otf b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.otf new file mode 100644 index 000000000..b287ad2cf Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.otf differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff new file mode 100644 index 000000000..baba91eb4 Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff2 b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff2 new file mode 100644 index 000000000..a8eb04c1d Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff2 differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.otf b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.otf new file mode 100644 index 000000000..0efaf72ce Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.otf differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff new file mode 100644 index 000000000..5759443d4 Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff differ diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff2 b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff2 new file mode 100644 index 000000000..90b7add1b Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff2 differ diff --git a/packages/css/src/font/assets/inter/Inter-Bold.otf b/packages/css/src/font/assets/inter/Inter-Bold.otf new file mode 100644 index 000000000..ed9019a5a Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-Bold.otf differ diff --git a/packages/css/src/font/assets/inter/Inter-BoldItalic.otf b/packages/css/src/font/assets/inter/Inter-BoldItalic.otf new file mode 100644 index 000000000..be8a3d3c9 Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-BoldItalic.otf differ diff --git a/packages/css/src/font/assets/inter/Inter-Medium.otf b/packages/css/src/font/assets/inter/Inter-Medium.otf new file mode 100644 index 000000000..01b0b4ae6 Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-Medium.otf differ diff --git a/packages/css/src/font/assets/inter/Inter-MediumItalic.otf b/packages/css/src/font/assets/inter/Inter-MediumItalic.otf new file mode 100644 index 000000000..abd98779d Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-MediumItalic.otf differ diff --git a/packages/css/src/font/assets/inter/Inter-Regular.otf b/packages/css/src/font/assets/inter/Inter-Regular.otf new file mode 100644 index 000000000..e94fa4541 Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-Regular.otf differ diff --git a/packages/css/src/font/assets/inter/Inter-SemiBold.otf b/packages/css/src/font/assets/inter/Inter-SemiBold.otf new file mode 100644 index 000000000..23294024c Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-SemiBold.otf differ diff --git a/packages/css/src/font/assets/inter/Inter-SemiBoldItalic.otf b/packages/css/src/font/assets/inter/Inter-SemiBoldItalic.otf new file mode 100644 index 000000000..2137d6533 Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-SemiBoldItalic.otf differ diff --git a/packages/css/src/font/index.css b/packages/css/src/font/index.css index 2fc0e7ed3..6e20a8391 100644 --- a/packages/css/src/font/index.css +++ b/packages/css/src/font/index.css @@ -1,14 +1,75 @@ -/* FONT */ @font-face { - src: url("https://assets.sharegate.com/shared/brand/fonts/interphases/TT-Interphases-Var-Roman.woff2") format("woff2-variations"); - font-family: "TT Interphases Variable"; + font-family: "Inter"; font-style: normal; - font-display: swap; + font-weight: 410; + src: url("./assets/inter/Inter-Regular.otf") format("opentype"); + font-display: fallback; } @font-face { - src: url("https://assets.sharegate.com/shared/brand/fonts/interphases/TT-Interphases-Var-Italic.woff2") format("woff2-variations"); - font-family: "TT Interphases Variable"; - font-style: italic; - font-display: swap; + font-family: "Inter"; + font-style: normal; + font-weight: 505; + src: url("./assets/inter/Inter-Medium.otf") format("opentype"); + font-display: fallback; +} + +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 590; + src: url("./assets/inter/Inter-SemiBold.otf") format("opentype"); + font-display: fallback; +} + +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 690; + src: url("./assets/inter/Inter-Bold.otf") format("opentype"); + font-display: fallback; +} + +@font-face { + font-family: "ABC Favorit Mono"; + font-style: normal; + font-weight: 400; + src: + url("./assets/abc-favorit-mono/ABCFavoritMono-Regular.otf") format("opentype"), + url("./assets/abc-favorit-mono/ABCFavoritMono-Regular.woff") format("woff"), + url("./assets/abc-favorit-mono/ABCFavoritMono-Regular.woff2") format("woff2"); + font-display: fallback; +} + +@font-face { + font-family: "ABC Favorit"; + font-style: normal; + font-weight: 410; + src: + url("./assets/abc-favorit/ABCFavorit-Regular.otf") format("opentype"), + url("./assets/abc-favorit/ABCFavorit-Regular.woff") format("woff"), + url("./assets/abc-favorit/ABCFavorit-Regular.woff2") format("woff2"); + font-display: fallback; +} + +@font-face { + font-family: "ABC Favorit"; + font-style: normal; + font-weight: 580; + src: + url("./assets/abc-favorit/ABCFavorit-Medium.otf") format("opentype"), + url("./assets/abc-favorit/ABCFavorit-Medium.woff") format("woff"), + url("./assets/abc-favorit/ABCFavorit-Medium.woff2") format("woff2"); + font-display: fallback; +} + +@font-face { + font-family: "ABC Favorit"; + font-style: normal; + font-weight: 680; + src: + url("./assets/abc-favorit/ABCFavorit-Bold.otf") format("opentype"), + url("./assets/abc-favorit/ABCFavorit-Bold.woff") format("woff"), + url("./assets/abc-favorit/ABCFavorit-Bold.woff2") format("woff2"); + font-display: fallback; } diff --git a/packages/css/src/normalize.css b/packages/css/src/normalize.css index 67719faa4..193158821 100644 --- a/packages/css/src/normalize.css +++ b/packages/css/src/normalize.css @@ -1,5 +1,5 @@ body { - font-family: "TT Interphases Variable", Arial, Helvetica, sans-serif; + font-family: "Inter", Arial, Helvetica, sans-serif; font-size: 16px; margin: 0; padding: 0;