Skip to content

docs: Update Storybook default theme #4021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sheelah wants to merge 7 commits into
base: prerelease/major
Choose a base branch
from
+49 −54
Open

docs: Update Storybook default theme #4021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dfd9413
chore: Default Storybook to Roboto + not Sana Canvas theme
sheelah Jun 24, 2026
d317aaf
chore: Only set data-theme when Sana theme is selected
sheelah Jun 24, 2026
a44e096
docs: Hide theme toggle control in docs view
sheelah Jun 24, 2026
13396d0
ci: Test GH actions
sheelah Jun 25, 2026
4d38ac3
chore: Update fontWeight to a string value
sheelah Jun 25, 2026
7327423
ci: Test GH actions
sheelah Jun 25, 2026
104ae21
Merge branch 'prerelease/major' into update-storybook-default-theme
sheelah Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions .storybook/manager-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@
</script>

<link rel="stylesheet" href="/updated-type.css" />
<script>
document.documentElement.setAttribute('data-theme', 'sana-canvas');
</script>
<style>
body {
font-family: var(--cnvs-sys-font-family-default);
font-family: 'Roboto', sans-serif;
}

/* Hide the theme toggle button in docs view as it cannot toggle individual stories' themes */

@sheelah sheelah Jun 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit of a hack but does hide the theme toggle in docs view. We could also just leave this out if preferred.

#root > div:not(:has([id^='storybook-panel'])) button[title*='Token theme'] {
display: none !important;
}
</style>
42 changes: 0 additions & 42 deletions .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
</script>

<link rel="stylesheet" href="/updated-type.css" />
<script>
document.documentElement.setAttribute('data-theme', 'sana-canvas');
</script>

<style type="text/css">
html,
Expand Down Expand Up @@ -47,42 +44,3 @@
<link rel="preload" href="Roboto-Bold.ttf" as="font" type="font/ttf" crossorigin />
<link rel="preload" href="RobotoMono-Regular.ttf" as="font" type="font/ttf" crossorigin />

<!-- Font faces -->
<style>
@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');
}
</style>
2 changes: 1 addition & 1 deletion .storybook/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
43 changes: 39 additions & 4 deletions .storybook/updated-type.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -18,8 +55,6 @@
url(/SanaSansLCG05-Variable.ttf) format('truetype');
}

/* canvas theme: reset font-family since <html> 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;
}
4 changes: 2 additions & 2 deletions modules/react/fonts/lib/fonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ 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')`,
},
},
{
'@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')`,
},
},
Expand Down
2 changes: 1 addition & 1 deletion utils/storybook/CanvasProviderDecorator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<CanvasProvider theme={theme} className={storyStyles} data-theme={dataTheme}>
{storyFn(context) as React.ReactNode}
Expand Down
Loading