Skip to content

Commit 0e37aba

Browse files
castastrophecastastrophe
committed
chore(storybook): add custom styling and upgrade static color
1 parent 74386e8 commit 0e37aba

File tree

62 files changed

+4410
-574
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+4410
-574
lines changed

‎storybook/DocumentationTemplate.mdx renamed to ‎.storybook/DocumentationTemplate.mdx

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1-
import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
1+
import {
2+
Meta,
3+
Title,
4+
Subtitle,
5+
Description,
6+
Primary,
7+
ArgTypes,
8+
Stories,
9+
} from '@storybook/blocks';
210

311
<Meta isTemplate />
412

513
<Title />
14+
<Subtitle />
15+
<Description />
616

717
# Default implementation
818

@@ -12,7 +22,7 @@ import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
1222

1323
The component accepts the following inputs (props):
1424

15-
<Controls />
25+
<ArgTypes />
1626

1727
---
1828

‎.storybook/assets/base.css

+243
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
/*!
2+
* Copyright 2024 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
14+
:root {
15+
--spectrum-font-family: var(--spectrum-sans-font-family-stack);
16+
--spectrum-font-style: var(--spectrum-default-font-style);
17+
--spectrum-font-size: var(--spectrum-font-size-100);
18+
--spectrum-gray-100: light-dark(rgb(248 248 248), rgb(34 34 34));
19+
--spectrum-gray-800: light-dark(rgb(34 34 34), rgb(255 255 255));
20+
21+
/* Gradient that changes with the color theme. */
22+
--spectrum-examples-gradient: linear-gradient(
23+
45deg,
24+
var(
25+
--spectrum-magenta-300,
26+
light-dark(rgb(255, 213, 227), rgb(93, 0, 34))
27+
),
28+
var(
29+
--spectrum-blue-300,
30+
light-dark(rgb(203, 226, 254), rgb(12, 33, 117))
31+
)
32+
);
33+
34+
/* Gradients that do not change with the color theme, for use in static color backgrounds. */
35+
--spectrum-examples-gradient-static-black: linear-gradient(
36+
45deg,
37+
rgb(255 241 246),
38+
rgb(238 245 255)
39+
);
40+
--spectrum-examples-gradient-static-white: linear-gradient(
41+
45deg,
42+
rgb(64 0 22),
43+
rgb(14 24 67)
44+
);
45+
}
46+
47+
body {
48+
--mod-story-decorator-background: var(
49+
--spectrum-gray-50,
50+
light-dark(white, rgb(27 27 27))
51+
);
52+
53+
color-scheme: light dark;
54+
margin: 0;
55+
font-family: var(--spectrum-font-family);
56+
font-size: var(--spectrum-font-size);
57+
font-style: var(--spectrum-font-style);
58+
background: var(--mod-story-decorator-background) !important;
59+
color: var(--spectrum-gray-800);
60+
-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
61+
}
62+
63+
body:has([static-color='black']) {
64+
--mod-story-decorator-background: var(
65+
--spectrum-examples-gradient-static-black
66+
);
67+
}
68+
69+
body:has([static-color='white']) {
70+
--mod-story-decorator-background: var(
71+
--spectrum-examples-gradient-static-white
72+
);
73+
}
74+
75+
body,
76+
body .docs-story {
77+
background: var(--mod-story-decorator-background) !important;
78+
}
79+
80+
/* Hide the SVG elements that only include references */
81+
svg:has(symbol):not(:has(use)) {
82+
display: none;
83+
}
84+
85+
/* --- DOCS STYLES --- */
86+
.docs-story > *:first-child {
87+
overflow: hidden;
88+
}
89+
90+
.sb-story {
91+
/* Prevent inline stories in the Docs from cutting off content (which is different than the regular
92+
story view), due to Storybook's inline style that sets overflow: auto */
93+
overflow: visible !important;
94+
}
95+
96+
main > div:not(.sb-bar) {
97+
--app-corner-radius: 16px;
98+
--border-width: calc(var(--app-corner-radius) / 2);
99+
100+
border-top-left-radius: var(--app-corner-radius);
101+
border: var(--border-width) solid var(--spectrum-gray-100) !important;
102+
border-right-width: 0 !important;
103+
border-bottom-width: 0 !important;
104+
margin-block-start: calc(var(--border-width) * -1);
105+
margin-inline-start: calc(var(--border-width) * -1);
106+
width: auto;
107+
}
108+
109+
.sidebar-header > div {
110+
margin-right: 0;
111+
}
112+
113+
.sidebar-header > div > a {
114+
display: inline-flex;
115+
gap: 8px;
116+
}
117+
118+
.sidebar-header > div > a > img {
119+
display: inline-block;
120+
block-size: 48px;
121+
inline-size: 54px;
122+
border-radius: 4px;
123+
overflow: hidden;
124+
}
125+
126+
.sidebar-header > div > a:after {
127+
flex-grow: 1;
128+
content: 'Spectrum Web Components';
129+
display: inline-block;
130+
width: 100px;
131+
font-size: 16px;
132+
font-weight: 700;
133+
color: var(--spectrum-gray-800);
134+
}
135+
136+
.docblock-argstable-body tr td {
137+
letter-spacing: unset;
138+
font-size: 11px;
139+
}
140+
141+
.docblock-argstable-body td > span:has(select),
142+
.docblock-argstable-body td textarea {
143+
max-inline-size: 192px !important;
144+
}
145+
146+
div[role='combobox'] {
147+
background-color: white !important;
148+
border-radius: 16px;
149+
}
150+
151+
.sidebar-subheading,
152+
button.sidebar-item {
153+
color: var(--spectrum-gray-800);
154+
font-size: 14px;
155+
font-weight: 700;
156+
}
157+
158+
button[data-action='collapse-root'] {
159+
font-family: var(--spectrum-sans-font-family-stack);
160+
font-style: var(--spectrum-detail-sans-serif-font-style);
161+
font-weight: var(--spectrum-detail-sans-serif-font-weight);
162+
font-size: var(--spectrum-detail-size-m);
163+
margin-block-start: 0;
164+
margin-block-end: 0;
165+
color: var(--spectrum-detail-color);
166+
line-height: var(--spectrum-detail-line-height);
167+
letter-spacing: var(--spectrum-detail-letter-spacing);
168+
text-transform: uppercase;
169+
}
170+
171+
.sidebar-item {
172+
padding-block: 4px;
173+
}
174+
175+
input,
176+
textarea,
177+
select {
178+
border-radius: 4px !important;
179+
}
180+
181+
input:focus,
182+
textarea:focus,
183+
select:focus,
184+
#storybook-explorer-searchfield:focus {
185+
border-color: rgb(2 101 220) !important;
186+
box-shadow: rgb(2 101 220) 0 0 0 1px inset !important;
187+
}
188+
189+
nav.sidebar-container,
190+
.sb-bar {
191+
color: var(--spectrum-gray-800) !important;
192+
background: var(--spectrum-gray-100) !important;
193+
}
194+
195+
.sbdocs.sbdocs-wrapper {
196+
background: transparent !important;
197+
}
198+
199+
.sbdocs.sbdocs-preview,
200+
main > .sb-bar {
201+
box-shadow: none !important;
202+
}
203+
204+
.docblock-argstable-body {
205+
filter: none !important;
206+
}
207+
208+
#root > div > div:has(.sidebar-container) {
209+
border-right-color: transparent !important;
210+
}
211+
212+
.docblock-argstable {
213+
color-scheme: light;
214+
}
215+
216+
.docblock-argstable-head th span {
217+
font-size: 14px;
218+
font-weight: var(--spectrum-table-header-font-weight, 700);
219+
color: var(--spectrum-gray-800);
220+
}
221+
222+
.docblock-argstable-body tr[title]:has(button) td {
223+
background-color: var(--spectrum-gray-100) !important;
224+
}
225+
226+
.docblock-argstable-body tr[title]:has(button) span {
227+
color: var(--spectrum-gray-800);
228+
text-transform: capitalize;
229+
font-weight: 400;
230+
font-size: 14px;
231+
}
232+
233+
#storybook-docs {
234+
color-scheme: light;
235+
236+
code {
237+
border-radius: 4px !important;
238+
font-size: inherit !important;
239+
border: 1px solid rgb(225 225 225);
240+
color: var(--spectrum-gray-800);
241+
background-color: var(--spectrum-gray-100);
242+
}
243+
}

‎storybook/main.js renamed to ‎.storybook/main.js

+44-7
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,66 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
import { merge } from 'webpack-merge';
14+
import remarkGfm from 'remark-gfm';
1415

1516
/** @type { import('@storybook/web-components-webpack5').StorybookConfig } */
1617
export default {
1718
stories: [
18-
'../packages/*/stories/*.stories.js',
19-
'../tools/*/stories/*.stories.js',
19+
{
20+
directory: '../packages',
21+
files: '*/stories/*.stories.js',
22+
titlePrefix: 'Components',
23+
},
24+
{
25+
directory: '../tools',
26+
files: '*/stories/*.stories.js',
27+
titlePrefix: 'Tools',
28+
},
2029
],
2130
addons: [
31+
// '@storybook/addon-webpack5-compiler-babel',
2232
'@storybook/addon-links',
23-
'@storybook/addon-essentials',
33+
'@storybook/addon-controls',
34+
'@storybook/addon-toolbars',
35+
'@storybook/addon-measure',
36+
'@storybook/addon-viewport',
37+
'@storybook/addon-outline',
38+
{
39+
name: '@storybook/addon-docs',
40+
options: {
41+
// Enables JSX support in MDX for projects that aren't configured to handle the format.
42+
configureJSX: true,
43+
// Support markdown in MDX files
44+
transcludeMarkdown: true,
45+
mdxPluginOptions: {
46+
mdxCompileOptions: {
47+
remarkPlugins: [remarkGfm],
48+
},
49+
},
50+
},
51+
},
52+
'@storybook/addon-actions',
53+
// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y
2454
'@storybook/addon-a11y',
25-
// Conditionally add the addon-designs addon temporarily
55+
// https://storybook.js.org/addons/@etchteam/storybook-addon-status
56+
'@etchteam/storybook-addon-status',
57+
// https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
58+
'@storybook/addon-interactions',
59+
// https://docs.chromatic.com/docs/visual-tests-addon/
60+
'@chromatic-com/storybook',
61+
// addon-designs in development mode only
2662
// https://storybook.js.org/addons/@storybook/addon-designs/
2763
...(process.env.NODE_ENV === 'development'
2864
? ['@storybook/addon-designs']
2965
: []),
30-
// https://geometricpanda.github.io/storybook-addon-badges/
31-
'@geometricpanda/storybook-addon-badges',
3266
],
67+
core: {
68+
disableTelemetry: true,
69+
disableWhatsNewNotifications: true,
70+
},
3371
framework: {
3472
name: '@storybook/web-components-webpack5',
3573
options: {
36-
// builder: '@web/storybook-builder',
3774
fsCache: true,
3875
lazyCompilation: true,
3976
},

‎.storybook/manager.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
Copyright 2022 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
import { create } from '@storybook/theming';
14+
import { addons } from '@storybook/manager-api';
15+
16+
import './assets/base.css';
17+
18+
addons.setConfig({
19+
theme: create({
20+
base: 'light',
21+
brandTitle: 'Spectrum Web Components',
22+
brandUrl: 'https://opensource.adobe.com/spectrum-web-components',
23+
brandImage:
24+
'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjEuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMCAyNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAgMjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkEwRjAwO30KPC9zdHlsZT4KPGc+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE5LDAgMzAsMCAzMCwyNiAJIi8+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjExLjEsMCAwLDAgMCwyNiAJIi8+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE1LDkuNiAyMi4xLDI2IDE3LjUsMjYgMTUuNCwyMC44IDEwLjIsMjAuOCAJIi8+CjwvZz4KPC9zdmc+Cg==',
25+
}),
26+
sidebar: {
27+
showRoots: true,
28+
},
29+
});

0 commit comments

Comments
 (0)