Skip to content

Commit 8c94988

Browse files
masoudmansonmasoudmanson
authored
feat(storybook): update visual styles of storybook (#293)
* feat(storybook): update visual styles of storybook * feat(storybook): fix highlight color
1 parent 518c745 commit 8c94988

File tree

6 files changed

+215
-4
lines changed

6 files changed

+215
-4
lines changed

‎.storybook/logo.png

8.65 KB
Loading

‎.storybook/manager-head.html

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<meta property="og:description" content="SDS design system by CZI" />
2+
<meta property="og:title" content="Vibe Design System" />
3+
<link
4+
rel="icon"
5+
type="image/png"
6+
href="https://user-images.githubusercontent.com/927990/204130290-897628ee-e89a-4911-89df-0956c9edf940.png"
7+
sizes="48x48"
8+
/>
9+
<link rel="preconnect" href="https://fonts.gstatic.com" />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<title>SDS Design System</title>
15+
<style>
16+
body {
17+
font-family: "Open Sans", sans-serif !important;
18+
font-size: 14px;
19+
}
20+
21+
div[role="main"] {
22+
top: 0 !important;
23+
}
24+
25+
div[role="main"] > div {
26+
box-shadow: none !important;
27+
}
28+
29+
div[role="main"] .os-host {
30+
border-bottom: solid 1px #e6e6e6;
31+
border-top: solid 1px #e6e6e6;
32+
}
33+
34+
.react-draggable {
35+
border-right: solid 1px #e6e6e6;
36+
}
37+
38+
#storybook-explorer-menu svg {
39+
color: #555;
40+
margin-top: 4px;
41+
}
42+
43+
#storybook-explorer-menu button:focus,
44+
#storybook-explorer-menu a[data-selected]:hover {
45+
background-color: #f7f7f7;
46+
}
47+
48+
#storybook-explorer-menu a[data-selected="true"],
49+
#storybook-explorer-menu a[data-selected="true"]:hover {
50+
background-color: #eee;
51+
color: #000;
52+
font-weight: 600;
53+
}
54+
55+
#storybook-explorer-menu a[data-selected="true"] svg {
56+
color: #3867fa;
57+
}
58+
59+
.os-content button:hover {
60+
background-color: #f7f7f7;
61+
}
62+
63+
.os-content button:hover svg {
64+
color: black;
65+
}
66+
67+
#storybook-explorer-menu .sidebar-subheading > button {
68+
font-size: 12px !important;
69+
font-weight: 600 !important;
70+
text-transform: uppercase !important;
71+
color: #000 !important;
72+
letter-spacing: 0 !important;
73+
}
74+
75+
#storybook-explorer-menu .sidebar-subheading > button:hover,
76+
#storybook-explorer-menu .sidebar-subheading > button:active,
77+
#storybook-explorer-menu .sidebar-subheading > button:focus {
78+
background-color: transparent !important;
79+
}
80+
81+
#storybook-explorer-menu button.sidebar-item {
82+
font-size: 14px;
83+
padding: 5px 3px 5px 2px;
84+
}
85+
86+
#storybook-explorer-menu a.sidebar-item {
87+
font-size: 14px;
88+
padding: 5px 3px 5px 34px;
89+
}
90+
91+
#storybook-explorer-menu .sidebar-item > span,
92+
#storybook-explorer-menu .sidebar-subheading > button > span {
93+
display: inline-block;
94+
position: relative;
95+
border-style: solid;
96+
height: 5px !important;
97+
width: 5px !important;
98+
left: 0 !important;
99+
top: 0 !important;
100+
transform: rotate(45deg);
101+
vertical-align: middle;
102+
border-top: solid 1px !important;
103+
border-bottom: none !important;
104+
border-left: none !important;
105+
border-right: solid 1px;
106+
margin-left: 8px;
107+
margin-right: 6px;
108+
}
109+
110+
#storybook-explorer-menu .sidebar-item > span {
111+
margin-top: 7px;
112+
}
113+
114+
#storybook-explorer-menu .sidebar-subheading > button > span {
115+
margin-top: 5px;
116+
}
117+
118+
#storybook-explorer-menu .sidebar-item[aria-expanded="true"] > span,
119+
#storybook-explorer-menu
120+
.sidebar-subheading[aria-expanded="true"]
121+
> button
122+
> span {
123+
transform: rotate(135deg);
124+
}
125+
</style>
126+
127+
<script>
128+
//workaround to increase the left panel width just enough to show even the longer story names
129+
//based on https://github.com/storybookjs/storybook/issues/9682#issuecomment-983356523
130+
const DEFAULT_MINIMUM_LEFT_PANEL_WIDTH = 260; // original default is 230
131+
let storybookConfig = JSON.parse(localStorage.getItem("storybook-layout"));
132+
133+
// we only resize the left panel if it is set to a value lower than DEFAULT_MINIMUM_LEFT_PANEL_WIDTH
134+
if (
135+
typeof storybookConfig === "object" &&
136+
storybookConfig !== null &&
137+
storybookConfig.resizerNav.x < DEFAULT_MINIMUM_LEFT_PANEL_WIDTH
138+
) {
139+
storybookConfig.resizerNav.x = DEFAULT_MINIMUM_LEFT_PANEL_WIDTH;
140+
localStorage.setItem("storybook-layout", JSON.stringify(storybookConfig));
141+
document.location.reload();
142+
} else if (storybookConfig === null) {
143+
storybookConfig = {
144+
resizerNav: { x: DEFAULT_MINIMUM_LEFT_PANEL_WIDTH, y: 0 },
145+
};
146+
localStorage.setItem("storybook-layout", JSON.stringify(storybookConfig));
147+
document.location.reload();
148+
}
149+
150+
document.addEventListener("DOMContentLoaded", function () {
151+
let bookmarkHollowIcon = document.getElementById(
152+
"icon--bookmarkhollow"
153+
).firstChild;
154+
bookmarkHollowIcon.setAttribute(
155+
"d",
156+
"M 943.548 481.063 C 950.438 497.039 954 514.416 954 532.001 C 954 549.586 950.438 566.962 943.548 582.939 C 936.665 598.915 926.615 613.113 914.108 624.557 L 631.498 883.042 C 621.145 892.507 607.959 897.714 594.323 897.714 L 127.121 897.714 C 111.971 897.714 97.443 891.292 86.731 879.86 C 76.018 868.428 70 852.929 70 836.764 L 70 227.238 C 70 211.073 76.018 195.57 86.731 184.139 C 97.443 172.708 111.971 166.286 127.121 166.286 L 594.323 166.286 C 607.959 166.287 621.145 171.491 631.498 180.96 L 914.108 439.445 C 926.615 450.89 936.665 465.086 943.548 481.063 Z M 822.288 567.27 C 826.554 563.364 830.277 558.245 832.926 552.098 C 835.573 545.945 837.017 539.075 837.017 532.001 C 837.017 524.927 835.573 518.056 832.926 511.904 C 830.277 505.756 826.554 500.638 822.288 496.732 L 568.454 264.567 L 166.984 264.567 L 166.984 799.434 L 568.454 799.434 L 822.288 567.27 Z"
157+
);
158+
bookmarkHollowIcon.setAttribute("fill-rule", "evenodd");
159+
});
160+
</script>

‎.storybook/manager.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// .storybook/manager.js
2+
3+
import { addons } from "@storybook/addons";
4+
import sdsTheme from "./sds-theme";
5+
6+
addons.setConfig({
7+
theme: sdsTheme,
8+
});

‎.storybook/sds-theme.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// .storybook/YourTheme.js
2+
3+
import { create } from "@storybook/theming";
4+
import logo from "./logo.png";
5+
6+
export default create({
7+
base: "light",
8+
9+
colorPrimary: "black",
10+
colorSecondary: "silver",
11+
12+
// UI
13+
appBg: "white",
14+
appContentBg: "white",
15+
appBorderColor: "white",
16+
appBorderRadius: 0,
17+
18+
// Typography
19+
fontBase: '"Open Sans", sans-serif',
20+
fontCode: "monospace",
21+
22+
// Text colors
23+
textColor: "black",
24+
textInverseColor: "rgba(255,255,255,0.9)",
25+
26+
// Toolbar default and active colors
27+
barTextColor: "silver",
28+
barSelectedColor: "black",
29+
barBg: "white",
30+
31+
// Form colors
32+
inputBg: "white",
33+
inputBorder: "silver",
34+
inputTextColor: "black",
35+
inputBorderRadius: 4,
36+
37+
brandTitle: "Science Design System",
38+
brandUrl:
39+
"https://zeroheight.com/009eaf17b/v/latest/p/349f6a-science-design-system",
40+
brandImage: logo,
41+
brandTarget: "_blank",
42+
});

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,14 @@
2525
"@storybook/addon-essentials": "^6.5.9",
2626
"@storybook/addon-interactions": "^6.5.9",
2727
"@storybook/addon-links": "^6.5.9",
28+
"@storybook/addons": "^6.5.13",
2829
"@storybook/builder-webpack4": "^6.5.9",
2930
"@storybook/manager-webpack4": "^6.5.9",
3031
"@storybook/react": "^6.5.9",
3132
"@storybook/test-runner": "^0.9.0",
3233
"@storybook/testing-library": "^0.0.13",
3334
"@storybook/testing-react": "^1.2.4",
34-
"@storybook/theming": "^6.5.9",
35+
"@storybook/theming": "^6.5.13",
3536
"@svgr/rollup": "^5.5.0",
3637
"@svgr/webpack": "^5.5.0",
3738
"@testing-library/react": "^12.1.2",

‎yarn.lock

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3451,7 +3451,7 @@
34513451
global "^4.4.0"
34523452
regenerator-runtime "^0.13.7"
34533453

3454-
"@storybook/addons@6.5.13":
3454+
"@storybook/addons@6.5.13", "@storybook/addons@^6.5.13":
34553455
version "6.5.13"
34563456
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73"
34573457
integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA==
@@ -4411,7 +4411,7 @@
44114411
resolve-from "^5.0.0"
44124412
ts-dedent "^2.0.0"
44134413

4414-
"@storybook/theming@6.5.13":
4414+
"@storybook/theming@6.5.13", "@storybook/theming@^6.5.13":
44154415
version "6.5.13"
44164416
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083"
44174417
integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g==
@@ -4421,7 +4421,7 @@
44214421
memoizerific "^1.11.3"
44224422
regenerator-runtime "^0.13.7"
44234423

4424-
"@storybook/theming@6.5.9", "@storybook/theming@^6.5.9":
4424+
"@storybook/theming@6.5.9":
44254425
version "6.5.9"
44264426
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.9.tgz#13f60a3a3cd73ceb5caf9f188e1627e79f1891aa"
44274427
integrity sha512-KM0AMP5jMQPAdaO8tlbFCYqx9uYM/hZXGSVUhznhLYu7bhNAIK7ZVmXxyE/z/khM++8eUHzRoZGiO/cwCkg9Xw==

0 commit comments

Comments
 (0)