Skip to content

Commit bee70fb

Browse files
castastrophecastastrophe
authored
feat(storybook,tokens): remove @adobe/spectrum-token dep, export json (#3528)
1 parent 3c6d686 commit bee70fb

18 files changed

+438
-281
lines changed

‎.changeset/dry-falcons-exist.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/preview": patch
3+
---
4+
5+
Update fetchToken to use the exported JSON from @spectrum-css/tokens instead of @adobe/spectrum-tokens

‎.storybook/blocks/ColorPalette.jsx

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,42 +11,57 @@ import {
1111
} from "./Swatches.jsx";
1212
import { ThemeContainer } from "./ThemeContainer.jsx";
1313
import { Body, Heading } from "./Typography.jsx";
14-
import { fetchToken } from "./utilities.js";
14+
import { fetchToken, fetchTokenSet, sortAlphaNumerically } from "./utilities.js";
15+
16+
import styles from "@spectrum-css/bundle/dist/index.module.css";
1517

1618
/**
1719
* A single color row your styleguide showing title, subtitle and one or more colors, used
1820
* as a child of `ColorPalette`.
1921
*/
20-
export const ColorItem = ({ title, color, size = 60, values = [], ...props }) => {
22+
export const ColorItem = ({ title, color, size = 60, values = [], noCheckerboard = false, skipTitle = false, ...props }) => {
2123
if (!color) return;
22-
if (!values.length) return (
23-
<>
24-
{title && <SwatchGroupLabel className="swatch-group-label">
25-
<Heading size="s">{title ?? capitalize(color)}</Heading>
26-
</SwatchGroupLabel>}
27-
<Body>No values provided for color {color}</Body>
28-
</>
29-
);
24+
25+
// Attempt to fetch values from the token data
26+
if (!values.length) {
27+
const sets = fetchTokenSet(new RegExp(`^${color}-\\d+$`));
28+
values = Object.keys(sets)?.sort(sortAlphaNumerically).map((key) => key.replace(`${color}-`, ""));
29+
}
30+
31+
if (!values.length) {
32+
return (
33+
<>
34+
{!skipTitle && <SwatchGroupLabel className="swatch-group-label">
35+
<Heading size="s">{title ?? capitalize(color)}</Heading>
36+
</SwatchGroupLabel>}
37+
<Body>No values provided for color {color}</Body>
38+
</>
39+
);
40+
}
3041

3142
return (
3243
<>
33-
{title && <SwatchGroupLabel className="swatch-group-label">
44+
{!skipTitle && <SwatchGroupLabel className="swatch-group-label">
3445
<Heading size="s">{title ?? capitalize(color)}</Heading>
3546
</SwatchGroupLabel>}
36-
<SwatchGroup className="swatch-group" {...props}>
37-
<SwatchColors className="swatch-colors" size={60}>
47+
<SwatchGroup className={styles._spectrum_swatchgroup} {...props}>
48+
<SwatchColors className="swatch-colors" size={size}>
3849
{values.map((value) => {
3950
const resolved = fetchToken(`${color}-${value}`, value ?? color);
4051
return (
41-
<SwatchSet className="swatch-set" key={`${color}-${value}`}>
52+
<SwatchSet
53+
className="swatch-set"
54+
key={`${color}-${value}`}
55+
style={{ "--mod-swatch-size": `${size}px` }}
56+
>
4257
<Body className="swatch-label" size="s">
4358
{value}
4459
</Body>
4560
<Swatch
46-
className="swatch"
4761
title={`--spectrum-${color}-${value} / ${resolved}`}
48-
background={resolved}
62+
color={resolved}
4963
size={size}
64+
noCheckerboard={noCheckerboard}
5065
onClick={() => navigator.clipboard.writeText(`--spectrum-${color}-${value}`)}
5166
/>
5267
</SwatchSet>

‎.storybook/blocks/Layouts.jsx

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { styled } from "@storybook/theming";
2+
import React from "react";
3+
import styles from "@spectrum-css/bundle/dist/index.module.css";
24

35
export const Container = styled.section`
46
color: var(--spectrum-neutral-content-color-default);
@@ -8,7 +10,7 @@ export const Container = styled.section`
810
padding-block: 60px;
911
flex-direction: column;
1012
align-items: flex-start;
11-
gap: 60px;
13+
gap: ${props => props.gap ?? "60px"};
1214
border-radius: 16px;
1315
`;
1416

@@ -91,7 +93,40 @@ export const Summary = styled.summary`
9193
}
9294
`;
9395

94-
export const Table = styled.table`
95-
--mod-table-cursor-row-default: auto;
96-
padding-block: 10px;
97-
`;
96+
export const Table = ({ headers = [], rows = [], size = "l", compact = false, spacious = false, ...props }) => {
97+
return (
98+
<table
99+
className={[
100+
"sb-unstyled",
101+
styles._spectrum_table,
102+
styles[`_spectrum_table__size${size}`],
103+
compact ? styles._spectrum_table__compact : null,
104+
spacious ? styles._spectrum_table__spacious : null
105+
].filter(Boolean).join(" ")}
106+
{...props}
107+
>
108+
{headers.length > 0 ? (
109+
<thead className={styles._spectrum_table_head}>
110+
<tr>
111+
{headers.map((heading, idx) => (
112+
<th key={idx} className={styles._spectrum_table_headcell}>
113+
{heading}
114+
</th>
115+
))}
116+
</tr>
117+
</thead>
118+
) : null}
119+
<tbody className={styles._spectrum_table_body}>
120+
{rows.map((columns, idx) => (
121+
<tr key={idx} className={styles._spectrum_table_row}>
122+
{columns.map((col, i) => (
123+
<td key={i} className={styles._spectrum_table_cell}>
124+
{col}
125+
</td>
126+
))}
127+
</tr>
128+
))}
129+
</tbody>
130+
</table>
131+
);
132+
};

‎.storybook/blocks/PropertiesTable.jsx

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import React, { useContext } from 'react';
44
import { Table } from "./Layouts.jsx";
55
import { ThemeContainer } from "./ThemeContainer.jsx";
66
import { Body, Code, LinkableHeading } from "./Typography.jsx";
7-
8-
import styles from "@spectrum-css/table?inline";
7+
import styles from "@spectrum-css/bundle/dist/index.module.css";
98

109
/**
1110
* Displays the modifiable custom properties for a component based on the metadata provided in the story.
@@ -38,25 +37,14 @@ export const PropertiesTable = () => {
3837
These are empty CSS custom property hooks available in this component
3938
that enable one-off customizations specific to a product implementation.
4039
</Body>
41-
{styles && <style>{styles}</style>}
42-
<Table className="docblock-properties-table sb-unstyled spectrum-Table spectrum-Table--sizeL spectrum-Table--compact">
43-
<thead className="spectrum-Table-head">
44-
<tr>
45-
<th className="spectrum-Table-headCell">Property</th>
46-
</tr>
47-
</thead>
48-
<tbody className="spectrum-Table-body">
49-
{metadata?.modifiers.map((propertyName) => (
50-
<tr key={propertyName} className="spectrum-Table-row">
51-
<td className="spectrum-Table-cell">
52-
<Code backgroundColor={"transparent"} size="s">
53-
{propertyName}
54-
</Code>
55-
</td>
56-
</tr>
57-
))}
58-
</tbody>
59-
</Table>
40+
<Table
41+
headers={["Property"]}
42+
rows={metadata?.modifiers.map((propertyName) => [
43+
<Code backgroundColor={"transparent"} size="s">
44+
{propertyName}
45+
</Code>
46+
])}
47+
/>
6048
</ThemeContainer>
6149
);
6250
};

‎.storybook/blocks/Swatches.jsx

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { styled } from "@storybook/theming";
2+
import React from "react";
3+
4+
import styles from "@spectrum-css/bundle/dist/index.module.css";
25

36
export const SwatchGroupLabel = styled.div`
47
display: flex;
@@ -20,32 +23,27 @@ export const SwatchSet = styled.div`
2023
color: ${props => `var(--spectrum-neutral-subdued-content-color-default, ${props.theme.defaultText})`};
2124
`;
2225

23-
export const Swatch = styled.div`
24-
position: relative;
25-
inline-size: var(--swatch-size, ${props => props.size ?? 32}px);
26-
block-size: var(--swatch-size, ${props => props.size ?? 32}px);
27-
outline: none;
28-
user-select: none;
29-
30-
&::before {
31-
position: absolute;
32-
inset: 0;
33-
inline-size: 100%;
34-
block-size: 100%;
35-
content: "";
36-
opacity: 1;
37-
38-
border: 1px solid rgba(0, 0, 0, 51%);
39-
40-
border-radius: ${props => `${props.theme.appBorderRadius}px` ?? `var(--spectrum-corner-radius-100, 4px)`};
41-
${props => props.background && `background: ${props.background};`}
42-
}
43-
44-
.spectrum--dark &::before,
45-
.spectrum--darkest &::before {
46-
border-color: rgba(255, 255, 255, 51%);
47-
}
48-
`;
26+
export const Swatch = ({ size = "l", isDisabled = false, noCheckerboard = false, color, children }) => {
27+
return (
28+
<div
29+
className={[
30+
styles._spectrum_swatch,
31+
styles[`_spectrum_swatch__size${size}`],
32+
isDisabled ? styles._is_disabled : null,
33+
].filter(Boolean).join(" ")}
34+
disabled={isDisabled}
35+
tabIndex="0"
36+
style={{
37+
"--spectrum-picked-color": color,
38+
}}
39+
>
40+
<div className={[
41+
styles._spectrum_swatch_fill,
42+
!noCheckerboard ? styles._spectrum_opacitycheckerboard : null,
43+
].filter(Boolean).join(" ")}>{children}</div>
44+
</div>
45+
);
46+
};
4947

5048
export const SwatchColors = styled.div`
5149
display: inline-flex;

‎.storybook/blocks/ThemeContainer.jsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,38 @@ import { ThemeProvider } from "@storybook/theming";
33
import React, { useContext } from "react";
44
import { Container } from "./Layouts.jsx";
55

6-
import tokenStyles from "@spectrum-css/tokens/dist/css/index.css?raw";
6+
import styles from "@spectrum-css/bundle/dist/index.module.css";
77

88
/**
99
* A container that wraps the children in a themed context
1010
* inherited from the storybook global context. This is used
1111
* to create a ThemeProvider that can be used to style components
1212
* with the correct color and scale.
1313
*/
14-
export const ThemeContainer = ({ color, scale, children, ...props }) => {
15-
const context = DocsContext && useContext(DocsContext);
16-
const globals = context?.store?.userGlobals?.globals ?? {};
14+
export const ThemeContainer = ({ color, scale, context, children, ...props }) => {
15+
const docContext = DocsContext && useContext(DocsContext);
16+
const globals = docContext?.store?.userGlobals?.globals ?? {};
1717

1818
// Fetch the current global color theme from the context store
1919
const theme = {
2020
...globals,
2121
color: color ?? globals.color ?? "light",
2222
scale: scale ?? globals.scale ?? "medium",
23+
context: context ?? globals.context ?? "spectrum",
2324
};
2425

26+
const classNames = [
27+
styles._spectrum,
28+
theme.context !== "spectrum" ? styles[`_spectrum__${theme.context}`] : null,
29+
styles[`_spectrum__${theme.color}`],
30+
styles[`_spectrum__${theme.scale}`],
31+
styles._spectrum_typography,
32+
...(props && props.className ? props.className.split(" ") : []),
33+
].filter(Boolean);
34+
2535
return (
2636
<ThemeProvider theme={theme}>
27-
<style>{tokenStyles}</style>
28-
<Container {...props} className={`spectrum spectrum--${theme.color} spectrum--${theme.scale}`}>
37+
<Container className={classNames.join(" ")} {...props}>
2938
{children}
3039
</Container>
3140
</ThemeProvider>

‎.storybook/blocks/Typography.jsx

Lines changed: 32 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,40 @@
11
import { styled } from "@storybook/theming";
2-
import { fetchToken } from "./utilities.js";
2+
import React from "react";
33

4-
export const Heading = styled.h3`
5-
font-family: ${({ theme }) => theme.typography.fontFamily};
6-
font-weight: ${({ theme }) => theme.typography.weight.bold};
7-
color: inherit;
8-
font-size: ${({ size }) => fetchToken(`font-size-${size === "xs" ? 200 : size === "s" ? 300 : size === "l" ? 700 : size === "xl" ? 900 : 500}`, 22)};
9-
-webkit-font-smoothing: antialiased;
10-
margin: 0;
4+
import styles from "@spectrum-css/bundle/dist/index.module.css";
115

12-
> strong {
13-
font-weight: 900;
14-
}
15-
16-
> em {
17-
font-style: ${() => fetchToken(
18-
"heading-sans-serif-emphasized-font-style",
19-
"italic",
20-
)};
21-
}
22-
`;
6+
export const Heading = ({ size = "m", weight, strong, emphasis, serif = false, children }) => {
7+
const className = [
8+
styles._spectrum_heading,
9+
styles[`_spectrum_heading__size${size}`],
10+
weight ? styles[`_spectrum_heading__${weight}`] : null,
11+
serif ? styles[`_spectrum_heading__serif`] : null,
12+
strong ? styles[`_spectrum_heading_strong`] : null,
13+
emphasis ? styles[`_spectrum_heading_emphasized`] : null,
14+
].filter(Boolean);
15+
return <h3 className={className.join(" ")}>{children}</h3>;
16+
};
2317

24-
export const Body = styled.div(
25-
({ theme, size = "m", scale = "desktop", ...props }) => {
26-
const fontSize =
27-
size === "s" ? 100 : size === "l" ? 300 : size === "xl" ? 400 : 200;
28-
return {
29-
fontFamily: theme.typography.fontFamily,
30-
fontWeight: "normal",
31-
color: "inherit",
32-
fontSize: fetchToken(`font-size-${fontSize}`, 16),
33-
"> strong": {
34-
fontWeight: 900, // @todo: this uses "black" which isn't valid CSS
35-
},
36-
"> em": {
37-
fontStyle: fetchToken(
38-
"body-sans-serif-emphasized-font-style",
39-
"italic",
40-
),
41-
},
42-
...props,
43-
};
44-
},
45-
);
18+
export const Body = ({ size = "m", strong, emphasis, serif = false, children }) => {
19+
const className = [
20+
styles._spectrum_body,
21+
styles[`_spectrum_body__size${size}`],
22+
serif ? styles[`_spectrum_body__serif`] : null,
23+
strong ? styles[`_spectrum_body_strong`] : null,
24+
emphasis ? styles[`_spectrum_body_emphasized`] : null,
25+
].filter(Boolean);
26+
return <p className={className.join(" ")}>{children}</p>;
27+
};
4628

47-
export const Code = styled.div(
48-
({ theme, size = "m", scale = "desktop", ...props }) => {
49-
return {
50-
fontFamily: theme.typography.fonts.mono,
51-
fontStyle: fetchToken("code-font-style", "normal"),
52-
fontWeight: fetchToken("code-font-weight", "400"),
53-
color: fetchToken("code-color", "inherit"),
54-
fontSize: fetchToken(`code-size-${size}`, 22),
55-
backgroundColor: props => props.backgroundColor ?? fetchToken("gray-200"),
56-
padding: "0.125em 0.25em",
57-
borderRadius: "0.125em",
58-
...props,
59-
};
60-
},
61-
);
29+
export const Code = ({ size = "m", strong, emphasis, children }) => {
30+
const className = [
31+
styles._spectrum_code,
32+
styles[`_spectrum_code__size${size}`],
33+
strong ? styles[`_spectrum_code_strong`] : null,
34+
emphasis ? styles[`_spectrum_code_emphasized`] : null,
35+
].filter(Boolean);
36+
return <code className={className.join(" ")}>{children}</code>;
37+
};
6238

6339
export const LinkableHeading = styled(Heading)`
6440
margin: 20px 0 8px;

0 commit comments

Comments
 (0)