Merge branch 'master' into feature/style_system

# Conflicts:
#	docs/materials/motion/MotionPreview.tsx
#	packages/icons/docs/icons.stories.mdx

.github/workflows/chromatic.yml

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

.gitignore

@@ -12,3 +12,4 @@ storybook-static
 .eslintcache
 .stylelintcache
 build-storybook.log
+.idea

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