Theme next heading font switch

jpmorganchase · May 14, 2024 · 149083e · 149083e
1 parent 3fa8b97
commit 149083e
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 2 deletions.
diff --git a/.changeset/theme-next-heading-font-core.md b/.changeset/theme-next-heading-font-core.md
@@ -0,0 +1,11 @@
+---
+"@salt-ds/core": minor
+---
+
+Added a new `headingFont` prop to `UNSTABLE_SaltProviderNext` with `"Open Sans"` or `"Amplitude"` option. To try it out, use
+
+```
+<UNSTABLE_SaltProviderNext headingFont="Amplitude">
+```
+
+Refer to [documentation](https://storybook.saltdesignsystem.com/?path=/docs/experimental-theme-next--docs) for more information.
diff --git a/.changeset/theme-next-heading-font-theme.md b/.changeset/theme-next-heading-font-theme.md
@@ -0,0 +1,7 @@
+---
+"@salt-ds/theme": minor
+---
+
+Supports heading font switch when using `UNSTABLE_SaltProviderNext`.
+
+Refer to [documentation](https://storybook.saltdesignsystem.com/?path=/docs/experimental-theme-next--docs) for more information.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -138,6 +138,16 @@ export const globalTypes: GlobalTypes = {
       title: "Corner",
     },
   },
+  headingFont: {
+    name: "Experimental heading font",
+    description: "Switch heading font to open sans / amplitude",
+    defaultValue: "Open Sans",
+    toolbar: {
+      icon: "beaker",
+      items: ["Open Sans", "Amplitude"],
+      title: "Heading font",
+    },
+  },
 };
 
 export const argTypes: ArgTypes = {

diff --git a/docs/decorators/withTheme.tsx b/docs/decorators/withTheme.tsx
@@ -65,7 +65,8 @@ function SetBackground({ viewMode, id }: { viewMode: string; id: string }) {
 }
 
 export const withTheme: Decorator = (StoryFn, context) => {
-  const { density, mode, styleInjection, themeNext, corner } = context.globals;
+  const { density, mode, styleInjection, themeNext, corner, headingFont } =
+    context.globals;
 
   const Provider =
     themeNext === "enable" ? UNSTABLE_SaltProviderNext : SaltProvider;
@@ -95,6 +96,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
             key={`${mode}-${styleInjection}`}
             enableStyleInjection={styleInjection === "enable"}
             corner={corner}
+            headingFont={headingFont}
           >
             <Panel>
               <StoryFn />
@@ -112,6 +114,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
       key={`${mode}-${styleInjection}`}
       enableStyleInjection={styleInjection === "enable"}
       corner={corner}
+      headingFont={headingFont}
     >
       <SetBackground viewMode={context.viewMode} id={context.id} />
       <StoryFn />

diff --git a/packages/core/src/salt-provider/SaltProvider.tsx b/packages/core/src/salt-provider/SaltProvider.tsx
@@ -25,6 +25,7 @@ import {
   StyleInjectionProvider,
 } from "@salt-ds/styles";
 import { UNSTABLE_Corner } from "../theme/Corner";
+import { UNSTABLE_HeadingFont } from "../theme/HeadingFont";
 
 export const DEFAULT_DENSITY = "medium";
 
@@ -33,13 +34,15 @@ const UNSTABLE_ADDITIONAL_THEME_NAME = "salt-theme-next";
 
 const DEFAULT_MODE = "light";
 const DEFAULT_CORNER: UNSTABLE_Corner = "sharp";
+const DEFAULT_HEADING_FONT: UNSTABLE_HeadingFont = "Open Sans";
 export interface ThemeContextProps {
   theme: ThemeName;
   mode: Mode;
   window?: WindowContextType;
   /** Only available when using SaltProviderNext. */
   themeNext: boolean;
   UNSTABLE_corner: UNSTABLE_Corner;
+  UNSTABLE_headingFont: UNSTABLE_HeadingFont;
 }
 
 export const DensityContext = createContext<Density>(DEFAULT_DENSITY);
@@ -49,6 +52,7 @@ export const ThemeContext = createContext<ThemeContextProps>({
   mode: DEFAULT_MODE,
   themeNext: false,
   UNSTABLE_corner: DEFAULT_CORNER,
+  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,
 });
 
 export const BreakpointContext =
@@ -83,6 +87,7 @@ const createThemedChildren = ({
   applyClassesTo,
   themeNext,
   corner,
+  headingFont,
 }: {
   children: ReactNode;
   themeName: ThemeName;
@@ -94,6 +99,7 @@ const createThemedChildren = ({
   const themeNames = getThemeNames(themeName, themeNext);
   const themeNextProps = {
     "data-corner": corner,
+    "data-heading-font": headingFont,
   };
   if (applyClassesTo === "root") {
     return children;
@@ -174,6 +180,7 @@ function InternalSaltProvider({
   breakpoints: breakpointsProp,
   themeNext,
   corner: cornerProp,
+  headingFont: headingFontProp,
 }: Omit<
   SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,
   "enableStyleInjection"
@@ -184,6 +191,7 @@ function InternalSaltProvider({
     mode: inheritedMode,
     window: inheritedWindow,
     UNSTABLE_corner: inheritedCorner,
+    UNSTABLE_headingFont: inheritedHeadingFont,
   } = useContext(ThemeContext);
 
   const isRootProvider = inheritedTheme === undefined || inheritedTheme === "";
@@ -193,6 +201,8 @@ function InternalSaltProvider({
   const mode = modeProp ?? inheritedMode;
   const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;
   const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;
+  const headingFont =
+    headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;
 
   const applyClassesTo =
     applyClassesToProp ?? (isRootProvider ? "root" : "scope");
@@ -211,8 +221,9 @@ function InternalSaltProvider({
       window: targetWindow,
       themeNext: Boolean(themeNext),
       UNSTABLE_corner: corner,
+      UNSTABLE_headingFont: headingFont,
     }),
-    [themeName, mode, targetWindow, themeNext, corner]
+    [themeName, mode, targetWindow, themeNext, corner, headingFont]
   );
 
   const themedChildren = createThemedChildren({
@@ -223,6 +234,7 @@ function InternalSaltProvider({
     applyClassesTo,
     themeNext,
     corner: corner,
+    headingFont,
   });
 
   useIsomorphicLayoutEffect(() => {
@@ -238,6 +250,8 @@ function InternalSaltProvider({
         targetWindow.document.documentElement.dataset.mode = mode;
         if (themeNext) {
           targetWindow.document.documentElement.dataset.corner = corner;
+          targetWindow.document.documentElement.dataset.headingFont =
+            headingFont;
         }
       } else {
         console.warn(
@@ -255,6 +269,7 @@ function InternalSaltProvider({
         targetWindow.document.documentElement.dataset.mode = undefined;
         if (themeNext) {
           delete targetWindow.document.documentElement.dataset.corner;
+          delete targetWindow.document.documentElement.dataset.headingFont;
         }
       }
     };
@@ -267,6 +282,7 @@ function InternalSaltProvider({
     inheritedWindow,
     themeNext,
     corner,
+    headingFont,
   ]);
 
   const matchedBreakpoints = useMatchedBreakpoints(breakpoints);
@@ -303,6 +319,7 @@ export function SaltProvider({
 
 interface UNSTABLE_SaltProviderNextAdditionalProps {
   corner?: UNSTABLE_Corner;
+  headingFont?: UNSTABLE_HeadingFont;
 }
 
 export type UNSTABLE_SaltProviderNextProps = SaltProviderProps &

diff --git a/packages/core/src/theme/HeadingFont.ts b/packages/core/src/theme/HeadingFont.ts
@@ -0,0 +1,3 @@
+export const UNSTABLE_HeadingFontValues = ["Open Sans", "Amplitude"] as const;
+
+export type UNSTABLE_HeadingFont = (typeof UNSTABLE_HeadingFontValues)[number];
diff --git a/packages/core/src/theme/index.ts b/packages/core/src/theme/index.ts
@@ -1,4 +1,5 @@
 export * from "./Density";
+export * from "./HeadingFont";
 export * from "./Theme";
 export * from "./Mode";
 export * from "./Corner";
diff --git a/packages/core/stories/salt-provider/salt-provider-next.mdx b/packages/core/stories/salt-provider/salt-provider-next.mdx
@@ -111,3 +111,23 @@ These components use `--salt-palette-corner-strongest` token
 
 - Avatar
 - Badge
+
+## Heading font switch
+
+A new `headingFont` prop is added to switch display and heading font family between Open Sans and Amplitude.
+
+```
+<UNSTABLE_SaltProviderNext headingFont="Amplitude">
+```
+
+You'll need to install Amplitude font to your application to make sure every user will see the font correctly, e.g.,
+
+```css
+@font-face {
+  font-family: "Amplitude";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url("PATH/TO/FONT.woff2") format("woff2");
+}
+```
diff --git a/packages/theme/css/foundations/typography.css b/packages/theme/css/foundations/typography.css
@@ -1,5 +1,6 @@
 .salt-theme {
   --salt-typography-fontFamily-openSans: "Open Sans";
+  --salt-typography-fontFamily-amplitude: "Amplitude";
   --salt-typography-fontFamily-ptMono: "PT Mono";
 
   --salt-typography-fontWeight-light: 300;

diff --git a/packages/theme/css/palette/text-next.css b/packages/theme/css/palette/text-next.css
@@ -0,0 +1,7 @@
+.salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
+  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
+}
+
+.salt-theme-next.salt-theme[data-heading-font="Amplitude"] {
+  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
+}
diff --git a/packages/theme/css/theme-next.css b/packages/theme/css/theme-next.css
@@ -1,2 +1,3 @@
 @import url(foundations/curve-next.css);
 @import url(palette/corner-next.css);
+@import url(palette/text-next.css);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export const UNSTABLE_HeadingFontValues = ["Open Sans", "Amplitude"] as const;

		export type UNSTABLE_HeadingFont = (typeof UNSTABLE_HeadingFontValues)[number];