storybook-addon-md 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +46 -0
- package/README.md +1 -1
- package/STYLING.md +56 -107
- package/dist/styles.css +83 -126
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,51 @@
|
|
|
1
1
|
# storybook-addon-md
|
|
2
2
|
|
|
3
|
+
## 0.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 589ccad: Consolidate the CSS variables into a smaller set built around shared tokens. Every remaining variable keeps its name and meaning.
|
|
8
|
+
|
|
9
|
+
**New shared tokens**
|
|
10
|
+
|
|
11
|
+
| Variable | Replaces |
|
|
12
|
+
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
13
|
+
| `--sbmd-border-color` | `--sbmd-h2-border`, `--sbmd-table-border`, `--sbmd-inline-code-border`, `--sbmd-rule-color`, and the color of the default quote border |
|
|
14
|
+
| `--sbmd-block-spacing` | `--sbmd-paragraph-spacing`, `--sbmd-quote-margin`, `--sbmd-callout-margin`, `--sbmd-table-margin`, `--sbmd-title-margin`, `--sbmd-tag-margin` |
|
|
15
|
+
| `--sbmd-heading-spacing` | `--sbmd-h2-margin`, `--sbmd-h3-margin`, `--sbmd-rule-margin` |
|
|
16
|
+
|
|
17
|
+
**Widened variables**
|
|
18
|
+
|
|
19
|
+
| Variable | Now also controls |
|
|
20
|
+
| --------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
21
|
+
| `--sbmd-h1-size` | The page title, replacing `--sbmd-title-size` |
|
|
22
|
+
| `--sbmd-code-radius` | Inline code, replacing `--sbmd-inline-code-radius` |
|
|
23
|
+
| `--sbmd-quote-border` | The width and style of callout borders, replacing `--sbmd-callout-border`. The accent color still applies. |
|
|
24
|
+
|
|
25
|
+
**Removed without replacement**
|
|
26
|
+
|
|
27
|
+
The addon no longer sets these properties, so ordinary CSS at any specificity applies. For example, `.storybook-addon-md img { border-radius: 0.5rem }`.
|
|
28
|
+
|
|
29
|
+
- Page: `--sbmd-background`, `--sbmd-max-width`, `--sbmd-page-padding`, `--sbmd-page-border`, `--sbmd-page-radius`. Style `.storybook-addon-md-page`.
|
|
30
|
+
- Images: `--sbmd-image-border`, `--sbmd-image-margin`, `--sbmd-image-radius`.
|
|
31
|
+
- Quotes and callouts: `--sbmd-quote-background`, `--sbmd-quote-radius`, `--sbmd-callout-background`, `--sbmd-callout-radius`.
|
|
32
|
+
- Links: `--sbmd-link-underline-offset`, `--sbmd-link-thickness`, `--sbmd-link-hover-thickness`, `--sbmd-link-focus-outline`, `--sbmd-link-focus-offset`, `--sbmd-link-radius`. Storybook's underline metrics and the browser focus ring apply.
|
|
33
|
+
- Lists and checkboxes: `--sbmd-list-marker-color`, `--sbmd-checkbox-color`, `--sbmd-checkbox-gap`.
|
|
34
|
+
- Headings: `--sbmd-title-letter-spacing`, `--sbmd-h2-letter-spacing`, `--sbmd-h3-letter-spacing`, `--sbmd-title-line-height`, `--sbmd-heading-line-height`.
|
|
35
|
+
- Code: `--sbmd-code-border`, `--sbmd-inline-code-color`.
|
|
36
|
+
- Tables: `--sbmd-table-background`, `--sbmd-table-heading-background`, `--sbmd-table-heading-weight`, `--sbmd-table-align`.
|
|
37
|
+
- Tags: `--sbmd-tag-gap`, `--sbmd-tag-font-weight`, `--sbmd-tag-line-height`.
|
|
38
|
+
- Callouts: `--sbmd-callout-color`, `--sbmd-callout-label-color`, `--sbmd-callout-label-size`, `--sbmd-callout-label-margin`.
|
|
39
|
+
|
|
40
|
+
For properties the addon still sets, such as the `h2` padding or the tag gap, match the addon's specificity: `.sbdocs-content .storybook-addon-md-tags { gap: 0.5rem }`.
|
|
41
|
+
|
|
42
|
+
**Migration**
|
|
43
|
+
|
|
44
|
+
1. Set `--sbmd-border-color`, `--sbmd-block-spacing`, and `--sbmd-heading-spacing` to the values you used for the replaced variables.
|
|
45
|
+
2. Rename `--sbmd-title-size` to `--sbmd-h1-size` and `--sbmd-inline-code-radius` to `--sbmd-code-radius`.
|
|
46
|
+
3. Move any per-type callout border, background, or radius to a `.storybook-addon-md-callout[data-callout='...']` rule.
|
|
47
|
+
4. Replace the remaining removed variables with CSS rules. The example stylesheet shows the pattern for links, images, and inline code.
|
|
48
|
+
|
|
3
49
|
## 0.5.0
|
|
4
50
|
|
|
5
51
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -255,7 +255,7 @@ Set `stylesheet: '.storybook/markdown.css'` to override the defaults:
|
|
|
255
255
|
}
|
|
256
256
|
```
|
|
257
257
|
|
|
258
|
-
Variables cover typography, spacing, links, code, tables,
|
|
258
|
+
Variables cover typography, spacing, borders, links, code, tables, chips, and callouts. Defaults follow Storybook’s Docs theme in light and dark mode.
|
|
259
259
|
|
|
260
260
|
See [Styling](STYLING.md) for all variables, status and callout colors, theme switching, and custom layouts or Markdown renderers. The [example stylesheet](https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/markdown.css) provides a complete GitHub-inspired theme.
|
|
261
261
|
|
package/STYLING.md
CHANGED
|
@@ -6,10 +6,9 @@ Set these variables on `.storybook-addon-md-page` in the file configured by `sty
|
|
|
6
6
|
.storybook-addon-md-page {
|
|
7
7
|
--sbmd-font-size: 1rem;
|
|
8
8
|
--sbmd-monospace-font-family: 'JetBrains Mono', monospace;
|
|
9
|
-
--sbmd-
|
|
10
|
-
--sbmd-
|
|
9
|
+
--sbmd-border-color: #d1d9e0;
|
|
10
|
+
--sbmd-block-spacing: 1.25rem;
|
|
11
11
|
--sbmd-quote-border: 0.1875rem solid currentColor;
|
|
12
|
-
--sbmd-quote-radius: 0.5rem;
|
|
13
12
|
--sbmd-table-cell-padding: 0.75rem 1rem;
|
|
14
13
|
--sbmd-tag-radius: 0.375rem;
|
|
15
14
|
}
|
|
@@ -17,111 +16,62 @@ Set these variables on `.storybook-addon-md-page` in the file configured by `sty
|
|
|
17
16
|
|
|
18
17
|
Default lengths use `rem`, preserving their original sizes at a 16px root font size and scaling with the document root font size. Set `--sbmd-monospace-font-family` to customize inline code and fenced code blocks; it defaults to Storybook’s monospace theme font.
|
|
19
18
|
|
|
20
|
-
Variables accept normal CSS values for the property listed below, including `clamp()`, `calc()`, and references to your own theme variables. Border variables accept full border shorthands.
|
|
19
|
+
Variables accept normal CSS values for the property listed below, including `clamp()`, `calc()`, and references to your own theme variables. Border variables accept full border shorthands.
|
|
20
|
+
|
|
21
|
+
Three shared tokens cover most of the page. `--sbmd-border-color` colors heading rules, table cells, inline code, horizontal rules, and the default quote border. `--sbmd-block-spacing` sets the vertical rhythm of paragraphs, lists, quotes, callouts, tables, the title, and the tag list. `--sbmd-heading-spacing` sets the space above headings and around horizontal rules.
|
|
21
22
|
|
|
22
23
|
Use your theme selector to override colors in dark mode. The [complete example](https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/markdown.css) maps the addon variables to Tailwind v4 theme variables. Its `light-dark()` colors follow the system preference.
|
|
23
24
|
|
|
24
|
-
| Variable
|
|
25
|
-
|
|
|
26
|
-
| `--sbmd-
|
|
27
|
-
| `--sbmd-
|
|
28
|
-
| `--sbmd-
|
|
29
|
-
| `--sbmd-
|
|
30
|
-
| `--sbmd-
|
|
31
|
-
| `--sbmd-
|
|
32
|
-
| `--sbmd-
|
|
33
|
-
| `--sbmd-
|
|
34
|
-
| `--sbmd-
|
|
35
|
-
| `--sbmd-
|
|
36
|
-
| `--sbmd-
|
|
37
|
-
| `--sbmd-
|
|
38
|
-
| `--sbmd-
|
|
39
|
-
| `--sbmd-
|
|
40
|
-
| `--sbmd-
|
|
41
|
-
| `--sbmd-
|
|
42
|
-
| `--sbmd-
|
|
43
|
-
| `--sbmd-
|
|
44
|
-
| `--sbmd-
|
|
45
|
-
| `--sbmd-
|
|
46
|
-
| `--sbmd-
|
|
47
|
-
| `--sbmd-
|
|
48
|
-
| `--sbmd-
|
|
49
|
-
| `--sbmd-
|
|
50
|
-
| `--sbmd-
|
|
51
|
-
| `--sbmd-
|
|
52
|
-
| `--sbmd-
|
|
53
|
-
| `--sbmd-
|
|
54
|
-
| `--sbmd-
|
|
55
|
-
| `--sbmd-
|
|
56
|
-
| `--sbmd-
|
|
57
|
-
| `--sbmd-
|
|
58
|
-
| `--sbmd-
|
|
59
|
-
| `--sbmd-
|
|
60
|
-
| `--sbmd-
|
|
61
|
-
| `--sbmd-
|
|
62
|
-
| `--sbmd-
|
|
63
|
-
| `--sbmd-
|
|
64
|
-
| `--sbmd-
|
|
65
|
-
| `--sbmd-
|
|
66
|
-
| `--sbmd-
|
|
67
|
-
| `--sbmd-
|
|
68
|
-
| `--sbmd-image-radius` | `border-radius` |
|
|
69
|
-
| `--sbmd-inline-code-background` | `background` |
|
|
70
|
-
| `--sbmd-inline-code-border` | `border` |
|
|
71
|
-
| `--sbmd-inline-code-color` | `color` |
|
|
72
|
-
| `--sbmd-inline-code-padding` | `padding` |
|
|
73
|
-
| `--sbmd-inline-code-radius` | `border-radius` |
|
|
74
|
-
| `--sbmd-inline-code-size` | `font-size` |
|
|
75
|
-
| `--sbmd-line-height` | `line-height` |
|
|
76
|
-
| `--sbmd-link-color` | `color` |
|
|
77
|
-
| `--sbmd-link-decoration` | `text-decoration` |
|
|
78
|
-
| `--sbmd-link-focus-offset` | `outline-offset` |
|
|
79
|
-
| `--sbmd-link-focus-outline` | `outline` |
|
|
80
|
-
| `--sbmd-link-hover-thickness` | `text-decoration-thickness` |
|
|
81
|
-
| `--sbmd-link-radius` | `border-radius` |
|
|
82
|
-
| `--sbmd-link-thickness` | `text-decoration-thickness` |
|
|
83
|
-
| `--sbmd-link-underline-offset` | `text-underline-offset` |
|
|
84
|
-
| `--sbmd-list-item-spacing` | `margin-top` |
|
|
85
|
-
| `--sbmd-list-marker-color` | `color` |
|
|
86
|
-
| `--sbmd-monospace-font-family` | `font-family` (Markdown code) |
|
|
87
|
-
| `--sbmd-max-width` | `max-width` |
|
|
88
|
-
| `--sbmd-page-border` | `border` |
|
|
89
|
-
| `--sbmd-page-padding` | `padding` |
|
|
90
|
-
| `--sbmd-page-radius` | `border-radius` |
|
|
91
|
-
| `--sbmd-paragraph-spacing` | `margin-block` |
|
|
92
|
-
| `--sbmd-quote-background` | `background` |
|
|
93
|
-
| `--sbmd-quote-border` | `border-inline-start` |
|
|
94
|
-
| `--sbmd-quote-margin` | `margin` |
|
|
95
|
-
| `--sbmd-quote-padding` | `padding` |
|
|
96
|
-
| `--sbmd-quote-radius` | `border-radius` |
|
|
97
|
-
| `--sbmd-rule-color` | `background` |
|
|
98
|
-
| `--sbmd-rule-height` | `height` |
|
|
99
|
-
| `--sbmd-rule-margin` | `margin-block` |
|
|
100
|
-
| `--sbmd-table-align` | `text-align` |
|
|
101
|
-
| `--sbmd-table-background` | `background` |
|
|
102
|
-
| `--sbmd-table-border` | `border` |
|
|
103
|
-
| `--sbmd-table-cell-padding` | `padding` |
|
|
104
|
-
| `--sbmd-table-heading-background` | `background` |
|
|
105
|
-
| `--sbmd-table-heading-weight` | `font-weight` |
|
|
106
|
-
| `--sbmd-table-margin` | `margin-block` |
|
|
107
|
-
| `--sbmd-table-stripe-background` | `background` |
|
|
108
|
-
| `--sbmd-tag-background` | `background` |
|
|
109
|
-
| `--sbmd-tag-border` | `border` |
|
|
110
|
-
| `--sbmd-tag-color` | `color` |
|
|
111
|
-
| `--sbmd-tag-font-size` | `font-size` |
|
|
112
|
-
| `--sbmd-tag-font-weight` | `font-weight` |
|
|
113
|
-
| `--sbmd-tag-gap` | `gap` |
|
|
114
|
-
| `--sbmd-tag-line-height` | `line-height` |
|
|
115
|
-
| `--sbmd-tag-padding` | `padding` |
|
|
116
|
-
| `--sbmd-tag-radius` | `border-radius` |
|
|
117
|
-
| `--sbmd-title-letter-spacing` | `letter-spacing` |
|
|
118
|
-
| `--sbmd-title-line-height` | `line-height` |
|
|
119
|
-
| `--sbmd-title-margin` | `margin-bottom` |
|
|
120
|
-
| `--sbmd-title-size` | `font-size` |
|
|
25
|
+
| Variable | Applies to |
|
|
26
|
+
| -------------------------------- | ------------------------------------------------- |
|
|
27
|
+
| `--sbmd-font-family` | Page and Markdown text |
|
|
28
|
+
| `--sbmd-font-size` | Markdown text |
|
|
29
|
+
| `--sbmd-line-height` | Markdown text |
|
|
30
|
+
| `--sbmd-color` | Page and Markdown text |
|
|
31
|
+
| `--sbmd-monospace-font-family` | Inline code and code blocks |
|
|
32
|
+
| `--sbmd-border-color` | Heading rules, tables, inline code, rules, quotes |
|
|
33
|
+
| `--sbmd-block-spacing` | Vertical margin of blocks, title, and tag list |
|
|
34
|
+
| `--sbmd-heading-spacing` | Space above headings and around rules |
|
|
35
|
+
| `--sbmd-heading-color` | Headings and title |
|
|
36
|
+
| `--sbmd-heading-font-family` | Headings and title |
|
|
37
|
+
| `--sbmd-heading-weight` | Headings and title |
|
|
38
|
+
| `--sbmd-h1-size` | Title and `h1` |
|
|
39
|
+
| `--sbmd-h2-size` | `h2` |
|
|
40
|
+
| `--sbmd-h3-size` | `h3` |
|
|
41
|
+
| `--sbmd-h4-size` | `h4` |
|
|
42
|
+
| `--sbmd-h5-size` | `h5` |
|
|
43
|
+
| `--sbmd-h6-size` | `h6` |
|
|
44
|
+
| `--sbmd-link-color` | Links |
|
|
45
|
+
| `--sbmd-link-decoration` | Link `text-decoration` |
|
|
46
|
+
| `--sbmd-list-item-spacing` | Space between list items |
|
|
47
|
+
| `--sbmd-quote-border` | Start border of quotes and callouts |
|
|
48
|
+
| `--sbmd-quote-padding` | Quote padding |
|
|
49
|
+
| `--sbmd-callout-padding` | Callout padding |
|
|
50
|
+
| `--sbmd-callout-label-weight` | Callout label weight |
|
|
51
|
+
| `--sbmd-callout-note-color` | Note accent color |
|
|
52
|
+
| `--sbmd-callout-tip-color` | Tip accent color |
|
|
53
|
+
| `--sbmd-callout-important-color` | Important accent color |
|
|
54
|
+
| `--sbmd-callout-warning-color` | Warning accent color |
|
|
55
|
+
| `--sbmd-callout-caution-color` | Caution accent color |
|
|
56
|
+
| `--sbmd-code-radius` | Inline code and code block radius |
|
|
57
|
+
| `--sbmd-code-padding` | Code block padding |
|
|
58
|
+
| `--sbmd-inline-code-padding` | Inline code padding |
|
|
59
|
+
| `--sbmd-inline-code-background` | Inline code background |
|
|
60
|
+
| `--sbmd-inline-code-size` | Inline code font size |
|
|
61
|
+
| `--sbmd-table-cell-padding` | Table cell padding |
|
|
62
|
+
| `--sbmd-table-stripe-background` | Even table row background |
|
|
63
|
+
| `--sbmd-tag-color` | Tag text |
|
|
64
|
+
| `--sbmd-tag-background` | Tag background |
|
|
65
|
+
| `--sbmd-tag-border` | Tag border |
|
|
66
|
+
| `--sbmd-tag-radius` | Tag radius |
|
|
67
|
+
| `--sbmd-tag-padding` | Tag padding |
|
|
68
|
+
| `--sbmd-tag-font-size` | Tag font size |
|
|
121
69
|
|
|
122
70
|
Status chips have `data-status` set to the original frontmatter value. Override `--sbmd-tag-*` on selectors such as `.storybook-addon-md-tag[data-status="stable" i]` to assign a status-specific appearance.
|
|
123
71
|
|
|
124
|
-
Callouts are `.storybook-addon-md-callout` elements with `data-callout` set to `note`, `tip`, `important`, `warning`, or `caution`, and a `.storybook-addon-md-callout-label` paragraph. Each type’s accent color sets the
|
|
72
|
+
Callouts are `.storybook-addon-md-callout` elements with `data-callout` set to `note`, `tip`, `important`, `warning`, or `caution`, and a `.storybook-addon-md-callout-label` paragraph. Each type’s accent color sets the border color and label color. Per-type accent variables default to Storybook theme colors chosen for the light or dark base. Callouts share `--sbmd-quote-border` for the border width and style.
|
|
73
|
+
|
|
74
|
+
Properties without a variable use ordinary CSS. The addon does not set backgrounds, radii, or borders on the page, quotes, callouts, or images, so selectors such as `.storybook-addon-md img` work at any specificity. Properties the addon does set, such as heading letter spacing or table alignment, need a selector that matches the addon’s specificity, for example `.sbdocs-content .storybook-addon-md h2`.
|
|
125
75
|
|
|
126
76
|
These styles target Markdown content and its title/chips. Story canvases, props controls, and syntax-highlighting colors still use Storybook’s theme. Custom renderers can use the shared styles when they produce matching HTML elements; custom layouts own any additional structure. Internal `--sbmd-native-*` variables carry Storybook theme values and are not customization hooks.
|
|
127
77
|
|
|
@@ -144,7 +94,7 @@ Set `stylesheet: '.storybook/markdown.css'` in the addon options, then define yo
|
|
|
144
94
|
}
|
|
145
95
|
```
|
|
146
96
|
|
|
147
|
-
Variables cover typography, spacing, links, code, tables,
|
|
97
|
+
Variables cover typography, spacing, borders, links, code, tables, callouts, and chips. They inherit from your theme container, and default text and link colors follow the active Docs theme. See the [reference](#css-variable-reference) for the complete list.
|
|
148
98
|
|
|
149
99
|
Use ordinary CSS for other properties. `.storybook-addon-md` wraps Markdown content, including custom renderer output; titles, props, and examples sit outside it. Other stable selectors are `.storybook-addon-md-page`, `.storybook-addon-md-title`, `.storybook-addon-md-tags`, and `.storybook-addon-md-tag`.
|
|
150
100
|
|
|
@@ -176,17 +126,16 @@ Map the accent colors to your design tokens, and adjust the shared box and label
|
|
|
176
126
|
--sbmd-callout-warning-color: light-dark(#9a6700, #d29922);
|
|
177
127
|
--sbmd-callout-caution-color: light-dark(#d1242f, #f85149);
|
|
178
128
|
--sbmd-callout-padding: 0.5rem 1rem;
|
|
179
|
-
--sbmd-callout-radius: 0.375rem;
|
|
180
129
|
--sbmd-callout-label-weight: 500;
|
|
181
130
|
}
|
|
182
131
|
```
|
|
183
132
|
|
|
184
|
-
Use `data-callout` for anything that differs per type beyond the accent color, such as a tinted background or a
|
|
133
|
+
Use `data-callout` for anything that differs per type beyond the accent color, such as a tinted background or a rounded corner:
|
|
185
134
|
|
|
186
135
|
```css
|
|
187
136
|
.storybook-addon-md-callout[data-callout='caution'] {
|
|
188
|
-
|
|
189
|
-
|
|
137
|
+
background: light-dark(#ffebe9, #2d1214);
|
|
138
|
+
border-radius: 0.375rem;
|
|
190
139
|
}
|
|
191
140
|
```
|
|
192
141
|
|
package/dist/styles.css
CHANGED
|
@@ -1,120 +1,92 @@
|
|
|
1
1
|
.storybook-addon-md-page {
|
|
2
2
|
font-family: var(--sbmd-font-family, var(--sbmd-native-font-family));
|
|
3
3
|
color: var(--sbmd-color, var(--sbmd-native-color));
|
|
4
|
-
background: var(--sbmd-background, transparent);
|
|
5
|
-
max-width: var(--sbmd-max-width, none);
|
|
6
|
-
padding: var(--sbmd-page-padding, 0);
|
|
7
|
-
border: var(--sbmd-page-border, 0);
|
|
8
|
-
border-radius: var(--sbmd-page-radius, 0);
|
|
9
4
|
}
|
|
5
|
+
|
|
10
6
|
.sbdocs-content .storybook-addon-md :is(p, li, td, th, blockquote) {
|
|
11
7
|
font-family: var(--sbmd-font-family, var(--sbmd-native-font-family));
|
|
12
8
|
font-size: var(--sbmd-font-size, 0.875rem);
|
|
13
9
|
line-height: var(--sbmd-line-height, 1.6);
|
|
14
10
|
color: var(--sbmd-color, var(--sbmd-native-color));
|
|
15
11
|
}
|
|
12
|
+
|
|
16
13
|
.sbdocs-content .storybook-addon-md :is(h1, h2, h3, h4, h5, h6),
|
|
17
14
|
.sbdocs-content .storybook-addon-md-title h1 {
|
|
18
15
|
color: var(--sbmd-heading-color, inherit);
|
|
19
16
|
font-family: var(--sbmd-heading-font-family, inherit);
|
|
20
|
-
line-height:
|
|
17
|
+
line-height: 1.25;
|
|
21
18
|
font-weight: var(--sbmd-heading-weight, 700);
|
|
22
19
|
}
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
|
|
21
|
+
.sbdocs-content .storybook-addon-md-title h1 {
|
|
22
|
+
font-size: var(--sbmd-h1-size, 2rem);
|
|
23
|
+
margin-bottom: var(--sbmd-block-spacing, 1rem);
|
|
25
24
|
}
|
|
26
|
-
|
|
27
|
-
.sbdocs-content .storybook-addon-md
|
|
28
|
-
|
|
25
|
+
|
|
26
|
+
.sbdocs-content .storybook-addon-md :is(h2, h3, h4, h5, h6) {
|
|
27
|
+
margin-top: var(--sbmd-heading-spacing, 1.5rem);
|
|
29
28
|
}
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
|
|
30
|
+
.sbdocs-content .storybook-addon-md h2 {
|
|
31
|
+
padding-bottom: 0.4375rem;
|
|
32
|
+
border-bottom: 0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
32
33
|
}
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
|
|
35
|
+
.sbdocs-content .storybook-addon-md h1 {
|
|
36
|
+
font-size: var(--sbmd-h1-size, 2rem);
|
|
35
37
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
gap: var(--sbmd-tag-gap, 0.375rem);
|
|
40
|
-
list-style: none;
|
|
41
|
-
padding: 0;
|
|
42
|
-
margin: 0 0 var(--sbmd-tag-margin, 1.25rem);
|
|
38
|
+
|
|
39
|
+
.sbdocs-content .storybook-addon-md h2 {
|
|
40
|
+
font-size: var(--sbmd-h2-size, 1.5rem);
|
|
43
41
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
background: var(--sbmd-tag-background, transparent);
|
|
48
|
-
border: var(--sbmd-tag-border, 0.0625rem solid currentColor);
|
|
49
|
-
border-radius: var(--sbmd-tag-radius, 62.4375rem);
|
|
50
|
-
padding: var(--sbmd-tag-padding, 0.125rem 0.5rem);
|
|
51
|
-
font-size: var(--sbmd-tag-font-size, 0.75rem);
|
|
52
|
-
font-weight: var(--sbmd-tag-font-weight, 500);
|
|
53
|
-
line-height: var(--sbmd-tag-line-height, 1.5);
|
|
42
|
+
|
|
43
|
+
.sbdocs-content .storybook-addon-md h3 {
|
|
44
|
+
font-size: var(--sbmd-h3-size, 1.25rem);
|
|
54
45
|
}
|
|
55
46
|
|
|
56
|
-
.sbdocs-content .storybook-addon-md
|
|
57
|
-
font-size: var(--sbmd-
|
|
58
|
-
line-height: var(--sbmd-title-line-height, 1.2);
|
|
59
|
-
letter-spacing: var(--sbmd-title-letter-spacing, normal);
|
|
60
|
-
margin-bottom: var(--sbmd-title-margin, 1rem);
|
|
47
|
+
.sbdocs-content .storybook-addon-md h4 {
|
|
48
|
+
font-size: var(--sbmd-h4-size, 1rem);
|
|
61
49
|
}
|
|
62
50
|
|
|
63
|
-
.sbdocs-content .storybook-addon-md
|
|
64
|
-
|
|
65
|
-
padding-bottom: var(--sbmd-h2-padding, 0.4375rem);
|
|
66
|
-
border-bottom: var(--sbmd-h2-border, 0.0625rem solid var(--sbmd-native-border-color));
|
|
67
|
-
letter-spacing: var(--sbmd-h2-letter-spacing, normal);
|
|
51
|
+
.sbdocs-content .storybook-addon-md h5 {
|
|
52
|
+
font-size: var(--sbmd-h5-size, 0.875rem);
|
|
68
53
|
}
|
|
69
54
|
|
|
70
|
-
.sbdocs-content .storybook-addon-md
|
|
71
|
-
|
|
72
|
-
letter-spacing: var(--sbmd-h3-letter-spacing, normal);
|
|
55
|
+
.sbdocs-content .storybook-addon-md h6 {
|
|
56
|
+
font-size: var(--sbmd-h6-size, 0.875rem);
|
|
73
57
|
}
|
|
74
58
|
|
|
75
59
|
.sbdocs-content .storybook-addon-md :is(p, ul, ol) {
|
|
76
|
-
margin-block: var(--sbmd-
|
|
60
|
+
margin-block: var(--sbmd-block-spacing, 1rem);
|
|
77
61
|
}
|
|
78
62
|
|
|
79
63
|
.sbdocs-content .storybook-addon-md li + li {
|
|
80
64
|
margin-top: var(--sbmd-list-item-spacing, 0.25rem);
|
|
81
65
|
}
|
|
82
66
|
|
|
83
|
-
.sbdocs-content .storybook-addon-md li::marker {
|
|
84
|
-
color: var(--sbmd-list-marker-color, inherit);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
67
|
.sbdocs-content .storybook-addon-md a {
|
|
68
|
+
color: var(--sbmd-link-color, var(--sbmd-native-link-color));
|
|
88
69
|
text-decoration: var(--sbmd-link-decoration, none);
|
|
89
|
-
text-underline-offset: var(--sbmd-link-underline-offset, auto);
|
|
90
|
-
text-decoration-thickness: var(--sbmd-link-thickness, auto);
|
|
91
70
|
overflow-wrap: anywhere;
|
|
92
71
|
}
|
|
93
72
|
|
|
94
|
-
.sbdocs-content .storybook-addon-md a:hover {
|
|
95
|
-
text-decoration-thickness: var(--sbmd-link-hover-thickness, auto);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.sbdocs-content .storybook-addon-md a:focus-visible {
|
|
99
|
-
outline: var(--sbmd-link-focus-outline, 0.125rem solid var(--sbmd-native-link-color));
|
|
100
|
-
outline-offset: var(--sbmd-link-focus-offset, 0.125rem);
|
|
101
|
-
border-radius: var(--sbmd-link-radius, 0);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
73
|
.sbdocs-content .storybook-addon-md blockquote {
|
|
105
|
-
margin: var(--sbmd-
|
|
74
|
+
margin: var(--sbmd-block-spacing, 1rem) 0;
|
|
106
75
|
padding: var(--sbmd-quote-padding, 0 0.9375rem);
|
|
107
|
-
border-inline-start: var(
|
|
108
|
-
|
|
109
|
-
|
|
76
|
+
border-inline-start: var(
|
|
77
|
+
--sbmd-quote-border,
|
|
78
|
+
0.25rem solid var(--sbmd-border-color, var(--sbmd-native-border-color))
|
|
79
|
+
);
|
|
110
80
|
}
|
|
111
81
|
|
|
112
82
|
.sbdocs-content .storybook-addon-md-callout {
|
|
113
|
-
margin: var(--sbmd-
|
|
83
|
+
margin: var(--sbmd-block-spacing, 1rem) 0;
|
|
114
84
|
padding: var(--sbmd-callout-padding, 0.5rem 1rem);
|
|
115
|
-
border-inline-start: var(
|
|
116
|
-
|
|
117
|
-
|
|
85
|
+
border-inline-start: var(
|
|
86
|
+
--sbmd-quote-border,
|
|
87
|
+
0.25rem solid var(--sbmd-border-color, var(--sbmd-native-border-color))
|
|
88
|
+
);
|
|
89
|
+
border-inline-start-color: var(--sbmd-native-callout-color);
|
|
118
90
|
}
|
|
119
91
|
|
|
120
92
|
.sbdocs-content .storybook-addon-md-callout[data-callout='note'] {
|
|
@@ -149,14 +121,9 @@
|
|
|
149
121
|
);
|
|
150
122
|
}
|
|
151
123
|
|
|
152
|
-
.sbdocs-content .storybook-addon-md-callout :is(p, li, td, th) {
|
|
153
|
-
color: var(--sbmd-callout-color, var(--sbmd-color, var(--sbmd-native-color)));
|
|
154
|
-
}
|
|
155
|
-
|
|
156
124
|
.sbdocs-content .storybook-addon-md .storybook-addon-md-callout-label {
|
|
157
|
-
margin: 0 0
|
|
158
|
-
color: var(--sbmd-
|
|
159
|
-
font-size: var(--sbmd-callout-label-size, var(--sbmd-font-size, 0.875rem));
|
|
125
|
+
margin: 0 0 0.25rem;
|
|
126
|
+
color: var(--sbmd-native-callout-color);
|
|
160
127
|
font-weight: var(--sbmd-callout-label-weight, 600);
|
|
161
128
|
}
|
|
162
129
|
|
|
@@ -168,12 +135,17 @@
|
|
|
168
135
|
margin-bottom: 0;
|
|
169
136
|
}
|
|
170
137
|
|
|
138
|
+
.sbdocs-content .storybook-addon-md :is(pre, code),
|
|
139
|
+
.sbdocs-content .storybook-addon-md pre.prismjs > div {
|
|
140
|
+
font-family: var(--sbmd-monospace-font-family, var(--sbmd-native-monospace-font-family));
|
|
141
|
+
}
|
|
142
|
+
|
|
171
143
|
.sbdocs-content .storybook-addon-md :not(pre) > code {
|
|
172
144
|
padding: var(--sbmd-inline-code-padding, 0.1875rem 0.3125rem);
|
|
173
|
-
border: var(--sbmd-
|
|
174
|
-
border-radius: var(--sbmd-
|
|
145
|
+
border: 0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
146
|
+
border-radius: var(--sbmd-code-radius, 0.1875rem);
|
|
175
147
|
background: var(--sbmd-inline-code-background, var(--sbmd-native-code-background));
|
|
176
|
-
color:
|
|
148
|
+
color: inherit;
|
|
177
149
|
font-size: var(--sbmd-inline-code-size, 0.9em);
|
|
178
150
|
overflow-wrap: anywhere;
|
|
179
151
|
white-space: break-spaces;
|
|
@@ -181,31 +153,33 @@
|
|
|
181
153
|
|
|
182
154
|
.sbdocs-content .storybook-addon-md pre {
|
|
183
155
|
padding: var(--sbmd-code-padding, 1.25rem);
|
|
184
|
-
border: var(--sbmd-code-
|
|
156
|
+
border-radius: var(--sbmd-code-radius, 0.1875rem);
|
|
185
157
|
overflow-x: auto;
|
|
186
158
|
}
|
|
187
159
|
|
|
160
|
+
.sbdocs-content .storybook-addon-md > pre,
|
|
161
|
+
.sbdocs-content .storybook-addon-md-callout > pre {
|
|
162
|
+
padding: 0;
|
|
163
|
+
border: 0;
|
|
164
|
+
white-space: normal;
|
|
165
|
+
}
|
|
166
|
+
|
|
188
167
|
.sbdocs-content .storybook-addon-md table {
|
|
189
168
|
display: block;
|
|
190
169
|
max-width: 100%;
|
|
191
170
|
overflow-x: auto;
|
|
192
171
|
border-collapse: collapse;
|
|
193
|
-
margin-block: var(--sbmd-
|
|
172
|
+
margin-block: var(--sbmd-block-spacing, 1rem);
|
|
194
173
|
}
|
|
195
174
|
|
|
196
175
|
.sbdocs-content .storybook-addon-md :is(th, td) {
|
|
197
176
|
padding: var(--sbmd-table-cell-padding, 0.375rem 0.8125rem);
|
|
198
|
-
border: var(--sbmd-
|
|
199
|
-
text-align:
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.sbdocs-content .storybook-addon-md th {
|
|
203
|
-
background: var(--sbmd-table-heading-background, transparent);
|
|
204
|
-
font-weight: var(--sbmd-table-heading-weight, 700);
|
|
177
|
+
border: 0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
178
|
+
text-align: start;
|
|
205
179
|
}
|
|
206
180
|
|
|
207
181
|
.sbdocs-content .storybook-addon-md tr {
|
|
208
|
-
background:
|
|
182
|
+
background: transparent;
|
|
209
183
|
}
|
|
210
184
|
|
|
211
185
|
.sbdocs-content .storybook-addon-md tr:nth-of-type(even) {
|
|
@@ -216,50 +190,33 @@
|
|
|
216
190
|
display: block;
|
|
217
191
|
max-width: 100%;
|
|
218
192
|
height: auto;
|
|
219
|
-
margin-block: var(--sbmd-image-margin, 0);
|
|
220
|
-
border: var(--sbmd-image-border, 0);
|
|
221
193
|
}
|
|
222
194
|
|
|
223
195
|
.sbdocs-content .storybook-addon-md hr {
|
|
224
|
-
height:
|
|
196
|
+
height: 0.0625rem;
|
|
225
197
|
padding: 0;
|
|
226
|
-
margin-block: var(--sbmd-
|
|
198
|
+
margin-block: var(--sbmd-heading-spacing, 1.5rem);
|
|
227
199
|
border: 0;
|
|
228
|
-
background: var(--sbmd-
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.sbdocs-content .storybook-addon-md input[type='checkbox'] {
|
|
232
|
-
accent-color: var(--sbmd-checkbox-color, auto);
|
|
233
|
-
margin-inline-end: var(--sbmd-checkbox-gap, 0.25rem);
|
|
200
|
+
background: var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
234
201
|
}
|
|
235
202
|
|
|
236
|
-
.sbdocs-content .storybook-addon-md
|
|
237
|
-
|
|
203
|
+
.sbdocs-content .storybook-addon-md-tags {
|
|
204
|
+
display: flex;
|
|
205
|
+
flex-wrap: wrap;
|
|
206
|
+
gap: 0.375rem;
|
|
207
|
+
list-style: none;
|
|
238
208
|
padding: 0;
|
|
239
|
-
|
|
240
|
-
white-space: normal;
|
|
209
|
+
margin: 0 0 var(--sbmd-block-spacing, 1rem);
|
|
241
210
|
}
|
|
242
211
|
|
|
243
|
-
.sbdocs-content .storybook-addon-md
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
.sbdocs-content .storybook-addon-md h4 {
|
|
256
|
-
font-size: var(--sbmd-h4-size, 1rem);
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
.sbdocs-content .storybook-addon-md h5 {
|
|
260
|
-
font-size: var(--sbmd-h5-size, 0.875rem);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.sbdocs-content .storybook-addon-md h6 {
|
|
264
|
-
font-size: var(--sbmd-h6-size, 0.875rem);
|
|
212
|
+
.sbdocs-content .storybook-addon-md-tag {
|
|
213
|
+
margin: 0;
|
|
214
|
+
color: var(--sbmd-tag-color, inherit);
|
|
215
|
+
background: var(--sbmd-tag-background, transparent);
|
|
216
|
+
border: var(--sbmd-tag-border, 0.0625rem solid currentColor);
|
|
217
|
+
border-radius: var(--sbmd-tag-radius, 62.4375rem);
|
|
218
|
+
padding: var(--sbmd-tag-padding, 0.125rem 0.5rem);
|
|
219
|
+
font-size: var(--sbmd-tag-font-size, 0.75rem);
|
|
220
|
+
font-weight: 500;
|
|
221
|
+
line-height: 1.5;
|
|
265
222
|
}
|