@box/blueprint-web-assets 5.4.0 → 5.4.2

package/dist/tokens/mixins-modern.scss

@@ -1,5 +1,29 @@
+/**
+ * Lato → Inter Typeface Migration [UXF-959]
+ *
+ * This file contains three types of typography mixins:
+ *   1. `bp-lato-*`   - typography variants for Lato (default)
+ *   2. `bp-inter-*`  - typography variants for Inter
+ *   3. `bp-*`        - font-agnostic typography variants
+ *
+ * Consumers should only use the generic `bp-*` mixins. The font-specific
+ * `bp-lato-*` and `bp-inter-*` mixins are transitional implementation details
+ * and are expected to be removed once Inter becomes the single typeface.
+ *
+ * The generic `bp-*` mixins only render Inter when the document body contains
+ * the `is-inter-font` class name. The consuming application is responsible
+ * for adding the class when the `box_inter_font` feature flag is enabled.
+ *
+ * See https://git.dev.box.net/Box/EndUserApp/blob/a0b83d2e1f66aef4f09619cae1a9f909468599b7/src/components/core/application/components/InterFontApplication.ts
+ *
+ * NOTE: Inter styles are currently hard-coded and must be replaced with CSS
+ * variables when the tokens are exported from Figma (LXP-839).
+ */
+
 $bp-lato-font-family: var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto,
     'Helvetica Neue', sans-serif;
+$bp-inter-font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto,
+    'Helvetica Neue', sans-serif;
 
 @mixin bp-lato-title-mondo {
     font-weight: var(--bp-font-weight-black);
@@ -202,11 +226,6 @@ $bp-lato-font-family: var(--bp-font-font-family), -apple-system, BlinkMacSystemF
     letter-spacing: var(--bp-font-letter-spacing-01);
 }
 
-// TODO LXP-839 Use CSS variables once tokens are exported from Figma.
-
-$bp-inter-font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto,
-    'Helvetica Neue', sans-serif;
-
 @mixin bp-inter-title-mondo {
     font-weight: 550;
     font-size: 2rem; // 32px
@@ -452,3 +471,179 @@ $bp-inter-font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'San Fr
     text-transform: none;
     text-decoration: none;
 }
+
+@mixin bp-title-mondo {
+    @include bp-lato-title-mondo;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-title-mondo;
+    }
+}
+
+@mixin bp-title-xlarge {
+    @include bp-lato-title-xlarge;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-title-xlarge;
+    }
+}
+
+@mixin bp-title-large {
+    @include bp-lato-title-large;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-title-large;
+    }
+}
+
+@mixin bp-title-medium {
+    @include bp-lato-title-medium;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-title-medium;
+    }
+}
+
+@mixin bp-title-small {
+    @include bp-lato-title-small;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-title-small;
+    }
+}
+
+@mixin bp-subtitle {
+    @include bp-lato-subtitle;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-subtitle;
+    }
+}
+
+@mixin bp-body-large-bold {
+    @include bp-lato-body-large-bold;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-body-large-bold;
+    }
+}
+
+@mixin bp-body-large {
+    @include bp-lato-body-large;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-body-large;
+    }
+}
+
+@mixin bp-body-default-bold {
+    @include bp-lato-body-default-bold;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-body-default-bold;
+    }
+}
+
+@mixin bp-body-default-semibold {
+    @include bp-lato-body-default-semibold;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-body-default-semibold;
+    }
+}
+
+@mixin bp-body-default {
+    @include bp-lato-body-default;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-body-default;
+    }
+}
+
+@mixin bp-body-small-semibold {
+    @include bp-lato-body-small-semibold;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-body-small-semibold;
+    }
+}
+
+@mixin bp-body-small {
+    @include bp-lato-body-small;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-body-small;
+    }
+}
+
+@mixin bp-caption-bold {
+    @include bp-lato-caption-bold;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-caption-bold;
+    }
+}
+
+@mixin bp-caption-default {
+    @include bp-lato-caption-default;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-caption-default;
+    }
+}
+
+@mixin bp-label-bold {
+    @include bp-lato-label-bold;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-label-bold;
+    }
+}
+
+@mixin bp-label-default {
+    @include bp-lato-label-default;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-label-default;
+    }
+}
+
+@mixin bp-link-default {
+    @include bp-lato-link-default;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-link-default;
+    }
+}
+
+@mixin bp-notification-default {
+    @include bp-lato-notification-default;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-notification-default;
+    }
+}
+
+@mixin bp-metric-large {
+    @include bp-lato-metric-large;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-metric-large;
+    }
+}
+
+@mixin bp-metric-medium {
+    @include bp-lato-metric-medium;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-metric-medium;
+    }
+}
+
+@mixin bp-metric-small {
+    @include bp-lato-metric-small;
+
+    @at-root :global(:where(body.is-inter-font)) & {
+        @include bp-inter-metric-small;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "5.4.0",
+    "version": "5.4.2",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-storybook": "nx run blueprint-web-assets:build-storybook",
@@ -155,7 +155,7 @@
         }
     },
     "devDependencies": {
-        "@box/storybook-utils": "^1.1.19",
+        "@box/storybook-utils": "^1.1.21",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",