feat(typography): support Inter font on v25.5.0

.storybook/preview-head.html

@@ -26,3 +26,17 @@
     type="font/woff2"
     crossorigin="anonymous"
 />
+<link
+    rel="preload"
+    href="https://cdn01.boxcdn.net/fonts/1.1.1/inter/InterVariable.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin="anonymous"
+/>
+<link
+    rel="preload"
+    href="https://cdn01.boxcdn.net/fonts/1.1.1/inter/InterVariable-Italic.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin="anonymous"
+/>

package.json

@@ -75,7 +75,7 @@
         "lint:css": "stylelint \"src/**/*.scss\"",
         "prebuild:es": "npm-run-all copy:styles ts:defs copy:flow",
         "release": "yarn release:beta",
-        "release:beta": "DIST=beta BRANCH=master scripts/release.sh",
+        "release:beta": "DIST=beta BRANCH=v25.6.0-beta.1 scripts/release.sh",
         "release:hotfix": "DIST=latest HOTFIX=true scripts/release.sh",
         "release:latest": "DIST=latest BRANCH=master scripts/release.sh",
         "release:next": "DIST=next BRANCH=next scripts/release.sh",

scripts/cut_release.sh

@@ -250,11 +250,8 @@ push_new_release() {
     # Check untracked files
     check_untracked_files || return 1
 
-    # Run the release
-    if ! HUSKY_SKIP_HOOKS=1 BRANCH=$BRANCH DIST=$DIST yarn semantic-release --no-ci; then
-        printf "${red}Failed semantic release!${end}"
-        return 1
-    fi
+    npm version 25.6.0-beta.1 --no-git-tag-version
+    yarn prettier --write --parser=json package.json
 
     # Get the latest version from uncommitted package.json
     VERSION=$(source ./scripts/version.sh)

src/components/category-selector/CategorySelector.scss

@@ -17,7 +17,7 @@
         height: 8 * $bdl-grid-unit;
         padding: 2 * $bdl-grid-unit 4 * $bdl-grid-unit;
         font-weight: bold;
-        font-size: $bdl-fontSize;
+        font-size: $bdl-fontSize--legacy;
         line-height: 4 * $bdl-grid-unit;
         white-space: nowrap;
         text-align: center;

src/components/dropdown-menu/DropdownMenu.scss

@@ -13,7 +13,7 @@
 // menu needs to manually inherit few of the body styles to look correct.
 .dropdown-menu-element {
     @include box-sizing;
-    @include bdl-commonTypography-dejaBlue;
+    @include bdl-commonTypography;
 
     z-index: $menu-z-index;
     margin-top: 5px;

src/components/form-elements/draft-js-mention-selector/DraftTimestamp.scss

@@ -2,7 +2,7 @@
 
 .bcs-CommentTimestamp-entity {
     color: var(--box-blue-110, #0057c0);
-    font-size: $bdl-fontSize--dejaBlue;
+    font-size: $bdl-fontSize;
     line-height: $bdl-line-height;
     border-radius: $bdl-border-radius-size;
     background-color: $bdl-box-blue-10;

src/components/label-pill/LabelPill.scss

@@ -14,7 +14,7 @@
 
 .bdl-LabelPill--sizeLarge {
     padding: $bdl-grid-unit;
-    font-size: $bdl-fontSize;
+    font-size: $bdl-fontSize--legacy;
     line-height: $bdl-line-height;
     border-radius: $bdl-line-height;
 }

src/components/pill-selector-dropdown/RoundPill.scss

@@ -21,7 +21,7 @@
     margin: 0 $bdl-grid-unit * 2 !important;
     padding-top: 1px; // offset for aligning "average" string that doesn't have descender chars
     overflow: hidden;
-    line-height: $bdl-fontSize + $bdl-grid-unit; // for vertical centering using flex;
+    line-height: $bdl-fontSize--legacy + $bdl-grid-unit; // for vertical centering using flex;
     white-space: nowrap;
     text-overflow: ellipsis;
 }

src/components/tooltip/Tooltip.scss

@@ -13,7 +13,7 @@ $tooltip-offset: 4px; /* amount of space between target and tooltip arrow */
     max-width: 200px;
     padding: $bdl-grid-unit * 2 $horizontal-offset;
     color: $white;
-    font-size: $bdl-fontSize;
+    font-size: $bdl-fontSize--legacy;
     line-height: 1.4;
     word-wrap: break-word;
     background-color: $bdl-gray-80;

src/elements/common/_variables.scss

@@ -1,7 +1,6 @@
 @import '../../styles/variables';
 @import '../../styles/inputs';
 
-$font: lato, 'Helvetica Neue', helvetica, arial, sans-serif;
 $minimumWidth: 300px;
 $sidebarHeaderHeight: 60px;
 $sidebarSubHeaderHeight: 56px;
@@ -13,23 +12,15 @@ $sidebarActivityFeedSpacingVertical: 20px;
 $sidebarActivityFeedSelectedItemSpacing: 10px;
 $sidebarTabResponsiveSize: 48px;
 
-@mixin rendering {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizelegibility;
-}
-
 @mixin reset {
-    @include rendering;
+    @include bdl-fonts;
 
     /* stylelint-disable declaration-no-important */
     box-sizing: border-box !important;
-    font-size: 13px;
     /* stylelint-enable declaration-no-important */
-    font-family: $font;
 
     * {
-        @include rendering;
+        @include font-aliasing;
 
         /* stylelint-disable declaration-no-important */
         box-sizing: border-box !important;
@@ -47,9 +38,9 @@ $sidebarTabResponsiveSize: 48px;
 }
 
 @mixin placeholder {
+    @include bdl-fonts;
+
     color: $bdl-gray-65;
-    font-weight: normal;
-    font-family: $font;
 
     // Firefox sets opacity for placeholder to less than 100%
     // See https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#opaque_text

src/elements/common/fonts.scss

@@ -19,3 +19,17 @@
         url('https://cdn01.boxcdn.net/fonts/1.0.17/lato/Lato-Bold.woff2') format('woff2'),
         url('https://cdn01.boxcdn.net/fonts/1.0.17/lato/Lato-Bold.woff') format('woff');
 }
+
+@font-face {
+    font-weight: 450 600;
+    font-family: 'Inter Variable';
+    font-style: normal;
+    src: url('https://cdn01.boxcdn.net/fonts/1.1.1/inter/InterVariable.woff2') format('woff2');
+}
+
+@font-face {
+    font-weight: 450 600;
+    font-family: 'Inter Variable';
+    font-style: italic;
+    src: url('https://cdn01.boxcdn.net/fonts/1.1.1/inter/InterVariable-Italic.woff2') format('woff2');
+}

src/elements/common/item/ItemName.scss

@@ -3,6 +3,7 @@
 .be-item-label {
     display: block;
     width: 100%;
+    padding: 0;
     overflow: hidden;
     color: var(--gray-black);
     white-space: nowrap;

src/elements/common/item/NameCell.scss

@@ -2,7 +2,8 @@
 
 .be-item-name {
     overflow: hidden;
-    line-height: 15px;
+    font-size: $bdl-fontSize--legacy;
+    line-height: 16px;
     white-space: normal;
     text-align: left;
     text-overflow: ellipsis;

src/elements/content-open-with/ContentOpenWith.scss

@@ -1,7 +1,7 @@
 @import '../common/variables';
 
 .be.bcow {
-    font-family: $font;
+    @include font-family;
 
     .btn {
         padding: 3px 13px 3px 10px;

src/elements/content-sidebar/activity-feed/comment/BaseComment.scss

@@ -3,7 +3,7 @@
 $repliesPaddingLeft: 40px;
 
 .bcs-BaseComment {
-    font-size: $bdl-fontSize--dejaBlue;
+    font-size: $bdl-fontSize;
 
     .bcs-CommentForm-input {
         background-color: $white;

src/elements/content-sidebar/activity-feed/comment/components/BaseCommentInfo.scss

@@ -5,7 +5,7 @@
     align-items: 'bottom';
     justify-content: flex-start;
     padding: 2;
-    font-size: $bdl-fontSize--dejaBlue;
+    font-size: $bdl-fontSize;
 
     .bdl-Media-figure {
         line-height: 0;

src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.scss

@@ -18,7 +18,7 @@
 
     button {
         color: var(--box-blue-110, #0057c0);
-        font-size: $bdl-fontSize--dejaBlue;
+        font-size: $bdl-fontSize;
         line-height: $bdl-line-height;
         border-radius: $bdl-border-radius-size;
         background-color: $bdl-box-blue-10;

src/elements/content-uploader/IconName.scss

@@ -21,7 +21,7 @@
     align-items: flex-start;
     justify-content: center;
     overflow: hidden;
-    line-height: 15px;
+    font-size: $bdl-fontSize--legacy;
     text-align: left;
 }
 

src/features/collapsible-sidebar/CollapsibleSidebar.scss

@@ -29,7 +29,7 @@ $left-sidebar-z-index: 40 !default;
     max-height: 100%;
     padding: 0;
     color: $white;
-    font-size: $bdl-fontSize--dejaBlue;
+    font-size: $bdl-fontSize;
     letter-spacing: 0.3px;
     background: $bdl-box-blue;
     backface-visibility: hidden;

src/features/content-explorer/content-explorer/ContentExplorer.scss

@@ -152,7 +152,7 @@
             left: 0;
             margin-top: 5px;
             color: $bdl-box-blue;
-            font-size: $bdl-fontSize--dejaBlue;
+            font-size: $bdl-fontSize;
             line-height: $bdl-line-height;
         }
 

src/features/content-insights/ContentAnalyticsErrorState.scss

@@ -12,6 +12,6 @@
 .ContentAnalyticsErrorState-text--permission {
     width: 100%;
     margin-top: $bdl-grid-unit * 5;
-    font-size: $bdl-fontSize--dejaBlue;
+    font-size: $bdl-fontSize;
     text-align: center;
 }

src/features/content-insights/_mixins.scss

@@ -3,5 +3,5 @@
 @mixin ContentInsightsHeaderText {
     color: $bdl-gray-65;
     font-weight: bold;
-    font-size: $bdl-fontSize-minimum;
+    font-size: $bdl-fontSize--minimum;
 }

src/features/sandbox-banner/SandboxBanner.scss

@@ -24,7 +24,7 @@ $sandboxbanner-max-width: 584px;
     width: 100%;
     overflow: hidden;
     color: $white;
-    font-size: $bdl-fontSize;
+    font-size: $bdl-fontSize--legacy;
     white-space: nowrap;
     text-overflow: ellipsis;
 }

src/styles/common/_buttons.scss

@@ -17,7 +17,7 @@
     padding: $bdl-btn-padding-vertical $bdl-btn-padding-horizontal;
     color: $bdl-gray-80;
     font-weight: bold;
-    font-size: $bdl-fontSize;
+    font-size: $bdl-fontSize--legacy;
     line-height: $bdl-btn-height - 2 * $bdl-btn-border-width - 2 * $bdl-btn-padding-vertical;
     letter-spacing: 0.035em;
     white-space: nowrap;

src/styles/common/_typography.scss

@@ -19,8 +19,9 @@ body {
     @include common-typography;
 }
 
-body.is-deja-blue {
-    @include bdl-commonTypography-dejaBlue;
+body.is-deja-blue,
+body.is-inter-font {
+    @include bdl-commonTypography;
 }
 
 p {

src/styles/constants/_typography.scss

@@ -1,14 +1,6 @@
 $bdl-line-height: 20px;
 
 // Font sizes
-$bdl-fontSize: 13px;
-$bdl-fontSize-minimum: 11px;
-$bdl-fontSize--dejaBlue: 14px;
-
-// "--dejaBlue" size will become default at some point
-// Migration Steps:
-// 1. New or restyled code should use --dejaBlue variable
-// 2. Find any hardcoded font sizes and change to use variables
-// 3. Once most components are DJB styled, change bdl-fontSize to 14px
-// 4. Fix any issues with components due to change of base variable
-// 5. Replace all references to $bdl-fontSize--dejaBlue with $bdl-fontSize and delete --dejaBlue
+$bdl-fontSize: 14px;
+$bdl-fontSize--legacy: 13px;
+$bdl-fontSize--minimum: 11px;

src/styles/mixins/_buttons.scss

@@ -18,6 +18,6 @@
  */
 @mixin bdl-Button--large {
     padding: 0 $bdl-btn-padding-horizontal;
-    font-size: $bdl-fontSize--dejaBlue;
+    font-size: $bdl-fontSize;
     line-height: $bdl-btn-height-large - 2 * $bdl-btn-border-width;
 }

src/styles/mixins/_typography.scss

@@ -3,6 +3,13 @@
 
 @mixin font-family {
     font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    @at-root {
+        &:where(body.is-inter-font),
+        :where(body.is-inter-font) & {
+            font-family: 'Inter Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        }
+    }
 }
 
 @mixin font-aliasing {
@@ -16,15 +23,22 @@
     @include font-aliasing;
 
     font-weight: normal;
-    font-size: $bdl-fontSize;
+    font-size: $bdl-fontSize--legacy;
 }
 
-@mixin bdl-fonts-dejaBlue {
+@mixin bdl-fonts {
     @include font-family;
     @include font-aliasing;
 
     font-weight: normal;
-    font-size: $bdl-fontSize--dejaBlue;
+    font-size: $bdl-fontSize;
+
+    @at-root {
+        &:where(body.is-inter-font),
+        :where(body.is-inter-font) & {
+            font-weight: 450;
+        }
+    }
 }
 
 @mixin common-typography {
@@ -35,12 +49,20 @@
     letter-spacing: 0.3px;
 }
 
-@mixin bdl-commonTypography-dejaBlue {
-    @include bdl-fonts-dejaBlue;
+@mixin bdl-commonTypography {
+    @include bdl-fonts;
 
     color: $bdl-gray;
     line-height: $bdl-line-height;
     letter-spacing: 0.3px;
+
+    @at-root {
+        &:where(body.is-inter-font),
+        :where(body.is-inter-font) & {
+            line-height: 22px;
+            letter-spacing: 0.1px;
+        }
+    }
 }
 
 @mixin bdl-targetIE11 {

src/styles/variables.js

@@ -79,9 +79,9 @@ export const bdlWatermelonRed10 = "#fdebee"; // bdl-watermelon-red-10
 export const bdlWatermelonRed05 = "#fef5f6"; // bdl-watermelon-red-05
 export const bdlWatermelonRed02 = "#fffbfc"; // bdl-watermelon-red-02
 export const bdlLineHeight = "20px"; // bdl-line-height
-export const bdlFontSize = "13px"; // bdl-fontSize
-export const bdlFontSizeMinimum = "11px"; // bdl-fontSize-minimum
-export const bdlFontSizeDejaBlue = "14px"; // bdl-fontSize--dejaBlue
+export const bdlFontSize = "14px"; // bdl-fontSize
+export const bdlFontSizeLegacy = "13px"; // bdl-fontSize--legacy
+export const bdlFontSizeMinimum = "11px"; // bdl-fontSize--minimum
 export const avatarColors = ["#0061d5","#003c84","#6f6f6f","#222","#4826c2","#9f3fed"]; // avatar-colors
 export const modalDialogZIndex = "160"; // modal-dialog-z-index
 export const menuZIndex = "170"; // menu-z-index

src/styles/variables.json

@@ -76,9 +76,9 @@
     "bdl-watermelon-red-05": "#fef5f6",
     "bdl-watermelon-red-02": "#fffbfc",
     "bdl-line-height": "20px",
-    "bdl-fontSize": "13px",
-    "bdl-fontSize-minimum": "11px",
-    "bdl-fontSize--dejaBlue": "14px",
+    "bdl-fontSize": "14px",
+    "bdl-fontSize--legacy": "13px",
+    "bdl-fontSize--minimum": "11px",
     "avatar-colors": ["#0061d5", "#003c84", "#6f6f6f", "#222", "#4826c2", "#9f3fed"],
     "modal-dialog-z-index": "160",
     "menu-z-index": "170",