Skip to content

Commit 808e784

Browse files
lsagetlethiaslsagetlethias
committed
handle dsfr dark theme during sb loading
1 parent 4c162f3 commit 808e784

5 files changed

Lines changed: 83 additions & 18 deletions

File tree

‎.storybook/DocsContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ startReactDsfr({
1818
"useLang": () => "fr"
1919
});
2020

21-
export const DocsContainer = ({ children, ...rest }: PropsWithChildren<DocsContainerProps>) => {
21+
export const DocsContainer = ({ children, context }: PropsWithChildren<DocsContainerProps>) => {
2222
const isStorybookUiDark = useDarkMode();
2323
const { setIsDark } = useIsDark();
2424

@@ -52,7 +52,7 @@ export const DocsContainer = ({ children, ...rest }: PropsWithChildren<DocsConta
5252
}
5353
5454
`}</style>
55-
<BaseContainer {...rest} theme={isStorybookUiDark ? darkTheme : lightTheme}>
55+
<BaseContainer context={context} theme={isStorybookUiDark ? darkTheme : lightTheme}>
5656
<MuiDsfrThemeProvider>
5757
<Unstyled>{children}</Unstyled>
5858
</MuiDsfrThemeProvider>

‎.storybook/customTheme.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ const fontBase = '"Marianne", arial, sans-serif';
77
const fontCode = "monospace";
88

99
export const darkTheme = create({
10-
"base": "dark",
11-
"appBg": "#1E1E1E",
12-
"appContentBg": "#161616",
13-
"barBg": "#161616",
14-
"colorSecondary": "#8585F6",
15-
"textColor": "#FFFFFF",
10+
base: "dark",
11+
appBg: "#1E1E1E",
12+
appContentBg: "#161616",
13+
barBg: "#161616",
14+
colorSecondary: "#8585F6",
15+
textColor: "#FFFFFF",
1616
brandImage,
1717
brandTitle,
1818
brandUrl,
@@ -21,12 +21,12 @@ export const darkTheme = create({
2121
});
2222

2323
export const lightTheme = create({
24-
"base": "light",
25-
"appBg": "#F6F6F6",
26-
"appContentBg": "#FFFFFF",
27-
"barBg": "#FFFFFF",
28-
"colorSecondary": "#000091",
29-
"textColor": "#212121",
24+
base: "light",
25+
appBg: "#F6F6F6",
26+
appContentBg: "#FFFFFF",
27+
barBg: "#FFFFFF",
28+
colorSecondary: "#000091",
29+
textColor: "#212121",
3030
brandImage,
3131
brandTitle,
3232
brandUrl,

‎.storybook/manager-head.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,24 @@
3333
[data-parent-id^="hidden"] {
3434
display: none !important;
3535
}
36+
37+
/* full manager loader (circle) */
38+
body.dark div[aria-label^="Content is loading..."] {
39+
border-color: rgb(133, 133, 246) rgba(130, 130, 243, 0.29) rgba(130, 130, 243, 0.29) !important;
40+
mix-blend-mode: normal !important;
41+
}
42+
43+
body:not(.dark) div[aria-label^="Content is loading..."] {
44+
border-color: rgb(0, 0, 145) rgba(0, 0, 142, 0.29) rgba(0, 0, 142, 0.29) !important;
45+
mix-blend-mode: normal !important;
46+
}
47+
48+
/* full manager page loader (dsfr vars not available) */
49+
body.dark section[aria-labelledby="main-preview-heading"] div:has(+ #storybook-preview-wrapper) {
50+
background-color: #161616 !important;
51+
}
52+
53+
body:not(.dark) section[aria-labelledby="main-preview-heading"] div:has(+ #storybook-preview-wrapper) {
54+
background-color: #ffffff !important;
55+
}
3656
</style>

‎.storybook/preview-head.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<style>
2+
/* Override Storybook default grey colors with DSFR grey colors */
3+
.sb-preparing-story,
4+
.sb-preparing-docs {
5+
background-color: var(--background-default-grey) !important;
6+
}
7+
8+
.sb-loader {
9+
border-color: var(--border-default-grey);
10+
border-top-color: var(--border-default-grey);
11+
}
12+
13+
.sb-previewBlock {
14+
background: var(--background-default-grey);
15+
border: 1px solid var(--border-default-grey);
16+
box-shadow: var(--border-default-grey) 0 1px 3px 0;
17+
}
18+
19+
.sb-previewBlock_header {
20+
box-shadow: var(--border-default-grey) 0 -1px 0 0 inset;
21+
}
22+
23+
.sb-previewBlock_icon {
24+
background: var(--background-alt-grey);
25+
}
26+
27+
.sb-argstableBlock th span,
28+
.sb-argstableBlock td span {
29+
background-color: var(--background-default-grey);
30+
}
31+
32+
.sb-argstableBlock-body td {
33+
box-shadow:
34+
var(--border-contrast-grey) 0 1px 3px 1px,
35+
var(--border-default-grey) 0 0 0 1px;
36+
}
37+
38+
.sb-argstableBlock-body tr:not(:first-child) {
39+
border-top: 1px solid var(--border-default-grey);
40+
}
41+
42+
.sb-argstableBlock-body td {
43+
background: var(--background-default-grey);
44+
}
45+
46+
.sb-argstableBlock-body button {
47+
background-color: var(--background-alt-grey);
48+
}
49+
</style>

‎.storybook/preview.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { darkTheme, lightTheme } from "./customTheme";
22
import { DocsContainer } from "./DocsContainer";
33
import { Preview } from "@storybook/react-vite";
44

5-
console.log("COUCOU from preview.tsx");
6-
75
const preview: Preview = {
86
tags: ["autodocs"],
97
parameters: {
@@ -14,9 +12,7 @@ const preview: Preview = {
1412
date: /Date$/
1513
}
1614
},
17-
backgrounds: { disabled: true },
1815
darkMode: {
19-
stylePreview: true,
2016
light: lightTheme,
2117
dark: darkTheme
2218
},

0 commit comments

Comments
 (0)