Feature/typography

.github/workflows/chromatic.yml

@@ -3,7 +3,7 @@
 
 name: Chromatic
 
-on:  
+on:
     pull_request:
         branches-ignore:
           - changeset-release/*

.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;

.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;
 }

.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 = {

.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;
 }

.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;
+}

.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;
 }
 

.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"
     })
 };

packages/components/package.json

@@ -39,3 +39,4 @@
     },
     "gitHead": "f8b5019bdc53f68abe27e931387aeec7f0747d85"
 }
+

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 */

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"
                 }
             )}
         >

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;
-}
+}

packages/components/src/card/src/Card.tsx

@@ -55,15 +55,16 @@ export function InnerCard({
         },
         content: {
             as: Text,
-            className: "o-ui-card-content"
+            className: "o-ui-card-content",
+            size: "sm"
         },
         header: {
             className: "o-ui-card-header"
         },
         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 && (

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 */

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.
      */

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",

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>
     );

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
                 }
             )}
         >

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);
 }

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"

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
     };
 

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);

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]));
 

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;

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);

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"

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]));
 

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";

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 */
 

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",