diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 72c4ba9dd5..a1afef6516 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -7,11 +7,13 @@ - diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 836c832085..00e08bce3e 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -3,9 +3,6 @@ - diff --git a/.storybook/theme.js b/.storybook/theme.js index 696aa85763..885eb169aa 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -46,7 +46,7 @@ export default create({ appBg: '#ffffff', // Typography - fontBase: '"Sana Sans LCG 05 VF", sans-serif', + fontBase: '"Roboto", sans-serif', fontCode: '"Roboto Mono", "Courier New", monospace', // Text colors diff --git a/.storybook/updated-type.css b/.storybook/updated-type.css index fd279b399b..83c5fe0634 100644 --- a/.storybook/updated-type.css +++ b/.storybook/updated-type.css @@ -1,3 +1,40 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url(/Roboto-Light.ttf) format('truetype'); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto Regular'), local('Roboto-Regular'), + url(/Roboto-Regular.ttf) format('truetype'); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(/Roboto-Medium.ttf) format('truetype'); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url(/Roboto-Bold.ttf) format('truetype'); +} + +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + src: local('Roboto Mono'), local('RobotoMono-Regular'), + url(/RobotoMono-Regular.ttf) format('truetype'); +} + @font-face { font-family: 'Sana Sans LCG 05 VF'; font-style: normal; @@ -18,8 +55,6 @@ url(/SanaSansLCG05-Variable.ttf) format('truetype'); } -/* canvas theme: reset font-family since always carries data-theme="sana-canvas", - which causes --cnvs-base-font-family-50 to be inherited as Sana Sans by all children */ -[data-theme='canvas'] { - --cnvs-sys-font-family-default: 'Roboto', sans-serif; +[data-theme='sana-canvas'] { + --cnvs-sys-font-family-default: 'Sana Sans LCG 05 VF', sans-serif; } diff --git a/modules/react/fonts/lib/fonts.ts b/modules/react/fonts/lib/fonts.ts index df64f68d3d..066f4ec001 100644 --- a/modules/react/fonts/lib/fonts.ts +++ b/modules/react/fonts/lib/fonts.ts @@ -7,7 +7,7 @@ export const fonts: CSSObject[] = [ '@font-face': { fontFamily: 'Sana Sans LCG 05 VF', fontStyle: 'normal', - fontWeight: [100, 700], + fontWeight: '100 700' as any, src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`, }, }, @@ -15,7 +15,7 @@ export const fonts: CSSObject[] = [ '@font-face': { fontFamily: 'Sana Sans LCG 05 VF', fontStyle: 'italic', - fontWeight: [100, 700], + fontWeight: '100 700' as any, src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`, }, }, diff --git a/utils/storybook/CanvasProviderDecorator.tsx b/utils/storybook/CanvasProviderDecorator.tsx index a0816700d5..e90a9326d8 100644 --- a/utils/storybook/CanvasProviderDecorator.tsx +++ b/utils/storybook/CanvasProviderDecorator.tsx @@ -21,7 +21,7 @@ export default makeDecorator({ canvas: parameters.theme || defaultCanvasTheme, }; const tokenTheme = context.globals?.theme; - const dataTheme = tokenTheme === 'sana' ? 'sana-canvas' : 'canvas'; + const dataTheme = tokenTheme === 'sana' ? 'sana-canvas' : undefined; return ( {storyFn(context) as React.ReactNode}