From c7f59d5165d64088ba17709404cfb8e74fb8b2a4 Mon Sep 17 00:00:00 2001 From: Zhihao Cui <5257855+origami-z@users.noreply.github.com> Date: Thu, 16 May 2024 10:34:11 +0100 Subject: [PATCH] Theme next heading font switch (#3396) --- .changeset/theme-next-heading-font-core.md | 11 +++++++++++ .changeset/theme-next-heading-font-theme.md | 7 +++++++ .storybook/preview.tsx | 10 ++++++++++ docs/decorators/withTheme.tsx | 5 ++++- .../core/src/salt-provider/SaltProvider.tsx | 19 ++++++++++++++++++- packages/core/src/theme/HeadingFont.ts | 3 +++ packages/core/src/theme/index.ts | 1 + packages/theme/css/foundations/typography.css | 1 + packages/theme/css/palette/text-next.css | 7 +++++++ packages/theme/css/theme-next.css | 1 + 10 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 .changeset/theme-next-heading-font-core.md create mode 100644 .changeset/theme-next-heading-font-theme.md create mode 100644 packages/core/src/theme/HeadingFont.ts create mode 100644 packages/theme/css/palette/text-next.css diff --git a/.changeset/theme-next-heading-font-core.md b/.changeset/theme-next-heading-font-core.md new file mode 100644 index 00000000000..33d5fbd8611 --- /dev/null +++ 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 + +``` + +``` + +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 new file mode 100644 index 00000000000..43e4ac5cf76 --- /dev/null +++ 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 index 6bed8c4c3cf..b6ac53ac536 100644 --- 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 index 58b2beabd14..5559a0ba4c8 100644 --- 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} > @@ -112,6 +114,7 @@ export const withTheme: Decorator = (StoryFn, context) => { key={`${mode}-${styleInjection}`} enableStyleInjection={styleInjection === "enable"} corner={corner} + headingFont={headingFont} > diff --git a/packages/core/src/salt-provider/SaltProvider.tsx b/packages/core/src/salt-provider/SaltProvider.tsx index ca2e3b641c7..9307ed4d61c 100644 --- 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,6 +34,7 @@ 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; @@ -40,6 +42,7 @@ export interface ThemeContextProps { /** Only available when using SaltProviderNext. */ themeNext: boolean; UNSTABLE_corner: UNSTABLE_Corner; + UNSTABLE_headingFont: UNSTABLE_HeadingFont; } export const DensityContext = createContext(DEFAULT_DENSITY); @@ -49,6 +52,7 @@ export const ThemeContext = createContext({ 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 new file mode 100644 index 00000000000..ca37cc49ec3 --- /dev/null +++ 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 index 4513b063bd4..bb1c5f267b6 100644 --- 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/theme/css/foundations/typography.css b/packages/theme/css/foundations/typography.css index cb1cd92f6ea..d49ed3b13ee 100644 --- 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 new file mode 100644 index 00000000000..d9af79d984a --- /dev/null +++ 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 index c388e1b8fd3..bf13d6301fb 100644 --- a/packages/theme/css/theme-next.css +++ b/packages/theme/css/theme-next.css @@ -25,3 +25,4 @@ @import url(characteristics/status-next.css); @import url(characteristics/target-next.css); @import url(characteristics/track-next.css); +@import url(palette/text-next.css);