storybook-addon-md 0.5.0 → 0.7.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 +82 -0
- package/README.md +1 -1
- package/STYLING.md +93 -114
- package/dist/styles.css +95 -119
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,87 @@
|
|
|
1
1
|
# storybook-addon-md
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 91cc4a7: Add back focused styling hooks for the page, links, quotes, callouts, tables, and images, built on two new shared tokens.
|
|
8
|
+
|
|
9
|
+
**New shared tokens**
|
|
10
|
+
|
|
11
|
+
- `--sbmd-accent-color` colors links and task-list checkboxes. `--sbmd-link-color` now defaults to it.
|
|
12
|
+
- `--sbmd-radius` rounds quotes, callouts, images, and code. It is unset by default, so code keeps its `0.1875rem` radius and other elements stay square until you set it.
|
|
13
|
+
|
|
14
|
+
**New element variables**
|
|
15
|
+
|
|
16
|
+
| Area | Variables |
|
|
17
|
+
| -------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
18
|
+
| Page | `--sbmd-page-max-width`, `--sbmd-page-margin`, `--sbmd-page-padding`, `--sbmd-page-background` |
|
|
19
|
+
| Links | `--sbmd-link-hover-decoration`, `--sbmd-link-underline-offset`. `--sbmd-link-decoration` accepts shorthands like `underline 1px` |
|
|
20
|
+
| Quotes | `--sbmd-quote-background` |
|
|
21
|
+
| Callouts | `--sbmd-callout-accent`, `--sbmd-callout-border`, `--sbmd-callout-background` |
|
|
22
|
+
| Tables | `--sbmd-table-border`, `--sbmd-table-heading-background` |
|
|
23
|
+
| Images | `--sbmd-image-border` |
|
|
24
|
+
|
|
25
|
+
**Callout accents**
|
|
26
|
+
|
|
27
|
+
Each callout now exposes its resolved color as `--sbmd-callout-accent`. Reference it from a `.storybook-addon-md-callout` rule to derive tinted backgrounds or borders for every type at once:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
.storybook-addon-md-callout {
|
|
31
|
+
--sbmd-callout-background: color-mix(in srgb, var(--sbmd-callout-accent) 8%, transparent);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**Behavior change**
|
|
36
|
+
|
|
37
|
+
`--sbmd-quote-border` no longer applies to callouts. Set `--sbmd-callout-border` instead; its default is `0.25rem solid var(--sbmd-callout-accent)`.
|
|
38
|
+
|
|
39
|
+
## 0.6.0
|
|
40
|
+
|
|
41
|
+
### Minor Changes
|
|
42
|
+
|
|
43
|
+
- 589ccad: Consolidate the CSS variables into a smaller set built around shared tokens. Every remaining variable keeps its name and meaning.
|
|
44
|
+
|
|
45
|
+
**New shared tokens**
|
|
46
|
+
|
|
47
|
+
| Variable | Replaces |
|
|
48
|
+
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
49
|
+
| `--sbmd-border-color` | `--sbmd-h2-border`, `--sbmd-table-border`, `--sbmd-inline-code-border`, `--sbmd-rule-color`, and the color of the default quote border |
|
|
50
|
+
| `--sbmd-block-spacing` | `--sbmd-paragraph-spacing`, `--sbmd-quote-margin`, `--sbmd-callout-margin`, `--sbmd-table-margin`, `--sbmd-title-margin`, `--sbmd-tag-margin` |
|
|
51
|
+
| `--sbmd-heading-spacing` | `--sbmd-h2-margin`, `--sbmd-h3-margin`, `--sbmd-rule-margin` |
|
|
52
|
+
|
|
53
|
+
**Widened variables**
|
|
54
|
+
|
|
55
|
+
| Variable | Now also controls |
|
|
56
|
+
| --------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
57
|
+
| `--sbmd-h1-size` | The page title, replacing `--sbmd-title-size` |
|
|
58
|
+
| `--sbmd-code-radius` | Inline code, replacing `--sbmd-inline-code-radius` |
|
|
59
|
+
| `--sbmd-quote-border` | The width and style of callout borders, replacing `--sbmd-callout-border`. The accent color still applies. |
|
|
60
|
+
|
|
61
|
+
**Removed without replacement**
|
|
62
|
+
|
|
63
|
+
The addon no longer sets these properties, so ordinary CSS at any specificity applies. For example, `.storybook-addon-md img { border-radius: 0.5rem }`.
|
|
64
|
+
|
|
65
|
+
- Page: `--sbmd-background`, `--sbmd-max-width`, `--sbmd-page-padding`, `--sbmd-page-border`, `--sbmd-page-radius`. Style `.storybook-addon-md-page`.
|
|
66
|
+
- Images: `--sbmd-image-border`, `--sbmd-image-margin`, `--sbmd-image-radius`.
|
|
67
|
+
- Quotes and callouts: `--sbmd-quote-background`, `--sbmd-quote-radius`, `--sbmd-callout-background`, `--sbmd-callout-radius`.
|
|
68
|
+
- 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.
|
|
69
|
+
- Lists and checkboxes: `--sbmd-list-marker-color`, `--sbmd-checkbox-color`, `--sbmd-checkbox-gap`.
|
|
70
|
+
- Headings: `--sbmd-title-letter-spacing`, `--sbmd-h2-letter-spacing`, `--sbmd-h3-letter-spacing`, `--sbmd-title-line-height`, `--sbmd-heading-line-height`.
|
|
71
|
+
- Code: `--sbmd-code-border`, `--sbmd-inline-code-color`.
|
|
72
|
+
- Tables: `--sbmd-table-background`, `--sbmd-table-heading-background`, `--sbmd-table-heading-weight`, `--sbmd-table-align`.
|
|
73
|
+
- Tags: `--sbmd-tag-gap`, `--sbmd-tag-font-weight`, `--sbmd-tag-line-height`.
|
|
74
|
+
- Callouts: `--sbmd-callout-color`, `--sbmd-callout-label-color`, `--sbmd-callout-label-size`, `--sbmd-callout-label-margin`.
|
|
75
|
+
|
|
76
|
+
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 }`.
|
|
77
|
+
|
|
78
|
+
**Migration**
|
|
79
|
+
|
|
80
|
+
1. Set `--sbmd-border-color`, `--sbmd-block-spacing`, and `--sbmd-heading-spacing` to the values you used for the replaced variables.
|
|
81
|
+
2. Rename `--sbmd-title-size` to `--sbmd-h1-size` and `--sbmd-inline-code-radius` to `--sbmd-code-radius`.
|
|
82
|
+
3. Move any per-type callout border, background, or radius to a `.storybook-addon-md-callout[data-callout='...']` rule.
|
|
83
|
+
4. Replace the remaining removed variables with CSS rules. The example stylesheet shows the pattern for links, images, and inline code.
|
|
84
|
+
|
|
3
85
|
## 0.5.0
|
|
4
86
|
|
|
5
87
|
### 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
|
-
|
|
258
|
+
Shared tokens cover accent, border, radius, and spacing. Element variables cover the page layout, typography, links, quotes, callouts, code, tables, images, and chips. 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,122 +6,93 @@ 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-
|
|
11
|
-
--sbmd-
|
|
12
|
-
--sbmd-
|
|
9
|
+
--sbmd-accent-color: #0969da;
|
|
10
|
+
--sbmd-border-color: #d1d9e0;
|
|
11
|
+
--sbmd-radius: 0.375rem;
|
|
12
|
+
--sbmd-block-spacing: 1.25rem;
|
|
13
|
+
--sbmd-link-decoration: underline 0.0625rem;
|
|
13
14
|
--sbmd-table-cell-padding: 0.75rem 1rem;
|
|
14
|
-
--sbmd-tag-radius: 0.375rem;
|
|
15
15
|
}
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
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
19
|
|
|
20
|
-
Variables accept normal CSS values for the property
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
| `--sbmd-
|
|
29
|
-
| `--sbmd-
|
|
30
|
-
| `--sbmd-
|
|
31
|
-
| `--sbmd-
|
|
32
|
-
| `--sbmd-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
| `--sbmd-
|
|
39
|
-
| `--sbmd-
|
|
40
|
-
| `--sbmd-
|
|
41
|
-
| `--sbmd-
|
|
42
|
-
| `--sbmd-
|
|
43
|
-
| `--sbmd-
|
|
44
|
-
| `--sbmd-
|
|
45
|
-
| `--sbmd-
|
|
46
|
-
| `--sbmd-
|
|
47
|
-
| `--sbmd-color`
|
|
48
|
-
| `--sbmd-font-family`
|
|
49
|
-
| `--sbmd-
|
|
50
|
-
| `--sbmd-h1-size` | `
|
|
51
|
-
| `--sbmd-h2-
|
|
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-
|
|
69
|
-
| `--sbmd-
|
|
70
|
-
| `--sbmd-
|
|
71
|
-
| `--sbmd-
|
|
72
|
-
| `--sbmd-
|
|
73
|
-
| `--sbmd-
|
|
74
|
-
| `--sbmd-
|
|
75
|
-
| `--sbmd-
|
|
76
|
-
| `--sbmd-
|
|
77
|
-
| `--sbmd-
|
|
78
|
-
| `--sbmd-
|
|
79
|
-
| `--sbmd-
|
|
80
|
-
| `--sbmd-
|
|
81
|
-
| `--sbmd-
|
|
82
|
-
| `--sbmd-
|
|
83
|
-
| `--sbmd-
|
|
84
|
-
| `--sbmd-
|
|
85
|
-
| `--sbmd-
|
|
86
|
-
| `--sbmd-
|
|
87
|
-
| `--sbmd-
|
|
88
|
-
| `--sbmd-
|
|
89
|
-
| `--sbmd-
|
|
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` |
|
|
20
|
+
Variables accept normal CSS values for the property they map to, including `clamp()`, `calc()`, and references to your own theme variables. Border variables accept full border shorthands, and decoration variables accept full `text-decoration` shorthands such as `underline 2px`.
|
|
21
|
+
|
|
22
|
+
## Shared tokens
|
|
23
|
+
|
|
24
|
+
Five tokens cover most of the page. Element variables fall back to them, so set the token first and reach for an element variable only where one element should differ.
|
|
25
|
+
|
|
26
|
+
| Token | Default | Used by |
|
|
27
|
+
| ------------------------ | ---------------------- | ------------------------------------------------------------------------ |
|
|
28
|
+
| `--sbmd-accent-color` | Storybook link color | Links and task-list checkboxes |
|
|
29
|
+
| `--sbmd-border-color` | Storybook border color | Heading rules, table cells, inline code, horizontal rules, quote borders |
|
|
30
|
+
| `--sbmd-radius` | Unset | Quotes, callouts, images, and code; code alone defaults to `0.1875rem` |
|
|
31
|
+
| `--sbmd-block-spacing` | `1rem` | Paragraphs, lists, quotes, callouts, tables, the title, and the tag list |
|
|
32
|
+
| `--sbmd-heading-spacing` | `1.5rem` | Space above headings and around horizontal rules |
|
|
33
|
+
|
|
34
|
+
## Element variables
|
|
35
|
+
|
|
36
|
+
| Variable | Applies to |
|
|
37
|
+
| --------------------------------- | --------------------------------------------- |
|
|
38
|
+
| `--sbmd-font-family` | Page and Markdown text |
|
|
39
|
+
| `--sbmd-font-size` | Markdown text |
|
|
40
|
+
| `--sbmd-line-height` | Markdown text |
|
|
41
|
+
| `--sbmd-color` | Page and Markdown text |
|
|
42
|
+
| `--sbmd-monospace-font-family` | Inline code and code blocks |
|
|
43
|
+
| `--sbmd-page-max-width` | Page `max-width` |
|
|
44
|
+
| `--sbmd-page-margin` | Page `margin`, for example `0 auto` to center |
|
|
45
|
+
| `--sbmd-page-padding` | Page `padding` |
|
|
46
|
+
| `--sbmd-page-background` | Page `background` |
|
|
47
|
+
| `--sbmd-heading-color` | Headings and title |
|
|
48
|
+
| `--sbmd-heading-font-family` | Headings and title |
|
|
49
|
+
| `--sbmd-heading-weight` | Headings and title |
|
|
50
|
+
| `--sbmd-h1-size` | Title and `h1` |
|
|
51
|
+
| `--sbmd-h2-size` | `h2` |
|
|
52
|
+
| `--sbmd-h3-size` | `h3` |
|
|
53
|
+
| `--sbmd-h4-size` | `h4` |
|
|
54
|
+
| `--sbmd-h5-size` | `h5` |
|
|
55
|
+
| `--sbmd-h6-size` | `h6` |
|
|
56
|
+
| `--sbmd-link-color` | Link color, defaults to the accent |
|
|
57
|
+
| `--sbmd-link-decoration` | Link `text-decoration` |
|
|
58
|
+
| `--sbmd-link-hover-decoration` | Link `text-decoration` on hover |
|
|
59
|
+
| `--sbmd-link-underline-offset` | Link `text-underline-offset` |
|
|
60
|
+
| `--sbmd-list-item-spacing` | Space between list items |
|
|
61
|
+
| `--sbmd-quote-border` | Quote start border |
|
|
62
|
+
| `--sbmd-quote-padding` | Quote padding |
|
|
63
|
+
| `--sbmd-quote-background` | Quote background |
|
|
64
|
+
| `--sbmd-callout-accent` | Resolved accent of the current callout |
|
|
65
|
+
| `--sbmd-callout-border` | Callout start border |
|
|
66
|
+
| `--sbmd-callout-padding` | Callout padding |
|
|
67
|
+
| `--sbmd-callout-background` | Callout background |
|
|
68
|
+
| `--sbmd-callout-label-weight` | Callout label weight |
|
|
69
|
+
| `--sbmd-callout-note-color` | Note accent color |
|
|
70
|
+
| `--sbmd-callout-tip-color` | Tip accent color |
|
|
71
|
+
| `--sbmd-callout-important-color` | Important accent color |
|
|
72
|
+
| `--sbmd-callout-warning-color` | Warning accent color |
|
|
73
|
+
| `--sbmd-callout-caution-color` | Caution accent color |
|
|
74
|
+
| `--sbmd-code-radius` | Inline code and code block radius |
|
|
75
|
+
| `--sbmd-code-padding` | Code block padding |
|
|
76
|
+
| `--sbmd-inline-code-padding` | Inline code padding |
|
|
77
|
+
| `--sbmd-inline-code-background` | Inline code background |
|
|
78
|
+
| `--sbmd-inline-code-size` | Inline code font size |
|
|
79
|
+
| `--sbmd-table-border` | Table cell borders |
|
|
80
|
+
| `--sbmd-table-cell-padding` | Table cell padding |
|
|
81
|
+
| `--sbmd-table-heading-background` | Table header cell background |
|
|
82
|
+
| `--sbmd-table-stripe-background` | Even table row background |
|
|
83
|
+
| `--sbmd-image-border` | Image border |
|
|
84
|
+
| `--sbmd-tag-color` | Tag text |
|
|
85
|
+
| `--sbmd-tag-background` | Tag background |
|
|
86
|
+
| `--sbmd-tag-border` | Tag border |
|
|
87
|
+
| `--sbmd-tag-radius` | Tag radius |
|
|
88
|
+
| `--sbmd-tag-padding` | Tag padding |
|
|
89
|
+
| `--sbmd-tag-font-size` | Tag font size |
|
|
121
90
|
|
|
122
91
|
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
92
|
|
|
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.
|
|
93
|
+
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. The addon sets `--sbmd-callout-accent` on each callout from its type’s accent variable, and uses it for the default border and the label color. Per-type accent variables default to Storybook theme colors chosen for the light or dark base.
|
|
94
|
+
|
|
95
|
+
Properties without a variable use ordinary CSS. Match the addon’s specificity for properties it sets, for example `.sbdocs-content .storybook-addon-md h2` for heading letter spacing or `.sbdocs-content .storybook-addon-md-tags` for the tag gap.
|
|
125
96
|
|
|
126
97
|
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
98
|
|
|
@@ -138,13 +109,14 @@ Set `stylesheet: '.storybook/markdown.css'` in the addon options, then define yo
|
|
|
138
109
|
--sbmd-font-size: 1rem;
|
|
139
110
|
--sbmd-monospace-font-family: 'JetBrains Mono', monospace;
|
|
140
111
|
--sbmd-line-height: 1.8;
|
|
141
|
-
--sbmd-
|
|
142
|
-
--sbmd-
|
|
143
|
-
--sbmd-
|
|
112
|
+
--sbmd-accent-color: #0969da;
|
|
113
|
+
--sbmd-radius: 0.375rem;
|
|
114
|
+
--sbmd-page-max-width: 60rem;
|
|
115
|
+
--sbmd-page-margin: 0 auto;
|
|
144
116
|
}
|
|
145
117
|
```
|
|
146
118
|
|
|
147
|
-
|
|
119
|
+
Shared tokens cover accent, borders, radius, and spacing. Element variables cover the page layout, typography, links, quotes, callouts, code, tables, images, 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
120
|
|
|
149
121
|
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
122
|
|
|
@@ -176,17 +148,24 @@ Map the accent colors to your design tokens, and adjust the shared box and label
|
|
|
176
148
|
--sbmd-callout-warning-color: light-dark(#9a6700, #d29922);
|
|
177
149
|
--sbmd-callout-caution-color: light-dark(#d1242f, #f85149);
|
|
178
150
|
--sbmd-callout-padding: 0.5rem 1rem;
|
|
179
|
-
--sbmd-callout-radius: 0.375rem;
|
|
180
151
|
--sbmd-callout-label-weight: 500;
|
|
181
152
|
}
|
|
182
153
|
```
|
|
183
154
|
|
|
184
|
-
|
|
155
|
+
`--sbmd-callout-accent` resolves to the current callout’s color. Values that reference it must be set on the callout selector so they resolve per type. This tints every callout with its own accent:
|
|
156
|
+
|
|
157
|
+
```css
|
|
158
|
+
.storybook-addon-md-callout {
|
|
159
|
+
--sbmd-callout-background: color-mix(in srgb, var(--sbmd-callout-accent) 8%, transparent);
|
|
160
|
+
--sbmd-callout-border: 0.375rem solid var(--sbmd-callout-accent);
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
Use `data-callout` for anything specific to one type:
|
|
185
165
|
|
|
186
166
|
```css
|
|
187
167
|
.storybook-addon-md-callout[data-callout='caution'] {
|
|
188
168
|
--sbmd-callout-background: light-dark(#ffebe9, #2d1214);
|
|
189
|
-
--sbmd-callout-border: 0.375rem solid var(--sbmd-callout-caution-color);
|
|
190
169
|
}
|
|
191
170
|
```
|
|
192
171
|
|
package/dist/styles.css
CHANGED
|
@@ -1,162 +1,135 @@
|
|
|
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
|
-
|
|
5
|
-
|
|
4
|
+
max-width: var(--sbmd-page-max-width, none);
|
|
5
|
+
margin: var(--sbmd-page-margin, 0);
|
|
6
6
|
padding: var(--sbmd-page-padding, 0);
|
|
7
|
-
|
|
8
|
-
border-radius: var(--sbmd-page-radius, 0);
|
|
7
|
+
background: var(--sbmd-page-background, transparent);
|
|
9
8
|
}
|
|
9
|
+
|
|
10
10
|
.sbdocs-content .storybook-addon-md :is(p, li, td, th, blockquote) {
|
|
11
11
|
font-family: var(--sbmd-font-family, var(--sbmd-native-font-family));
|
|
12
12
|
font-size: var(--sbmd-font-size, 0.875rem);
|
|
13
13
|
line-height: var(--sbmd-line-height, 1.6);
|
|
14
14
|
color: var(--sbmd-color, var(--sbmd-native-color));
|
|
15
15
|
}
|
|
16
|
+
|
|
16
17
|
.sbdocs-content .storybook-addon-md :is(h1, h2, h3, h4, h5, h6),
|
|
17
18
|
.sbdocs-content .storybook-addon-md-title h1 {
|
|
18
19
|
color: var(--sbmd-heading-color, inherit);
|
|
19
20
|
font-family: var(--sbmd-heading-font-family, inherit);
|
|
20
|
-
line-height:
|
|
21
|
+
line-height: 1.25;
|
|
21
22
|
font-weight: var(--sbmd-heading-weight, 700);
|
|
22
23
|
}
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
|
|
25
|
+
.sbdocs-content .storybook-addon-md-title h1 {
|
|
26
|
+
font-size: var(--sbmd-h1-size, 2rem);
|
|
27
|
+
margin-bottom: var(--sbmd-block-spacing, 1rem);
|
|
25
28
|
}
|
|
26
|
-
|
|
27
|
-
.sbdocs-content .storybook-addon-md
|
|
28
|
-
|
|
29
|
+
|
|
30
|
+
.sbdocs-content .storybook-addon-md :is(h2, h3, h4, h5, h6) {
|
|
31
|
+
margin-top: var(--sbmd-heading-spacing, 1.5rem);
|
|
29
32
|
}
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
|
|
34
|
+
.sbdocs-content .storybook-addon-md h2 {
|
|
35
|
+
padding-bottom: 0.4375rem;
|
|
36
|
+
border-bottom: 0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
32
37
|
}
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
|
|
39
|
+
.sbdocs-content .storybook-addon-md h1 {
|
|
40
|
+
font-size: var(--sbmd-h1-size, 2rem);
|
|
35
41
|
}
|
|
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);
|
|
42
|
+
|
|
43
|
+
.sbdocs-content .storybook-addon-md h2 {
|
|
44
|
+
font-size: var(--sbmd-h2-size, 1.5rem);
|
|
43
45
|
}
|
|
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);
|
|
46
|
+
|
|
47
|
+
.sbdocs-content .storybook-addon-md h3 {
|
|
48
|
+
font-size: var(--sbmd-h3-size, 1.25rem);
|
|
54
49
|
}
|
|
55
50
|
|
|
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);
|
|
51
|
+
.sbdocs-content .storybook-addon-md h4 {
|
|
52
|
+
font-size: var(--sbmd-h4-size, 1rem);
|
|
61
53
|
}
|
|
62
54
|
|
|
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);
|
|
55
|
+
.sbdocs-content .storybook-addon-md h5 {
|
|
56
|
+
font-size: var(--sbmd-h5-size, 0.875rem);
|
|
68
57
|
}
|
|
69
58
|
|
|
70
|
-
.sbdocs-content .storybook-addon-md
|
|
71
|
-
|
|
72
|
-
letter-spacing: var(--sbmd-h3-letter-spacing, normal);
|
|
59
|
+
.sbdocs-content .storybook-addon-md h6 {
|
|
60
|
+
font-size: var(--sbmd-h6-size, 0.875rem);
|
|
73
61
|
}
|
|
74
62
|
|
|
75
63
|
.sbdocs-content .storybook-addon-md :is(p, ul, ol) {
|
|
76
|
-
margin-block: var(--sbmd-
|
|
64
|
+
margin-block: var(--sbmd-block-spacing, 1rem);
|
|
77
65
|
}
|
|
78
66
|
|
|
79
67
|
.sbdocs-content .storybook-addon-md li + li {
|
|
80
68
|
margin-top: var(--sbmd-list-item-spacing, 0.25rem);
|
|
81
69
|
}
|
|
82
70
|
|
|
83
|
-
.sbdocs-content .storybook-addon-md li::marker {
|
|
84
|
-
color: var(--sbmd-list-marker-color, inherit);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
71
|
.sbdocs-content .storybook-addon-md a {
|
|
72
|
+
color: var(--sbmd-link-color, var(--sbmd-accent-color, var(--sbmd-native-link-color)));
|
|
88
73
|
text-decoration: var(--sbmd-link-decoration, none);
|
|
89
74
|
text-underline-offset: var(--sbmd-link-underline-offset, auto);
|
|
90
|
-
text-decoration-thickness: var(--sbmd-link-thickness, auto);
|
|
91
75
|
overflow-wrap: anywhere;
|
|
92
76
|
}
|
|
93
77
|
|
|
94
78
|
.sbdocs-content .storybook-addon-md a:hover {
|
|
95
|
-
text-decoration
|
|
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);
|
|
79
|
+
text-decoration: var(--sbmd-link-hover-decoration, var(--sbmd-link-decoration, none));
|
|
102
80
|
}
|
|
103
81
|
|
|
104
82
|
.sbdocs-content .storybook-addon-md blockquote {
|
|
105
|
-
margin: var(--sbmd-
|
|
83
|
+
margin: var(--sbmd-block-spacing, 1rem) 0;
|
|
106
84
|
padding: var(--sbmd-quote-padding, 0 0.9375rem);
|
|
107
|
-
border-inline-start: var(
|
|
108
|
-
|
|
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-radius: var(--sbmd-radius, 0);
|
|
109
90
|
background: var(--sbmd-quote-background, transparent);
|
|
110
91
|
}
|
|
111
92
|
|
|
112
93
|
.sbdocs-content .storybook-addon-md-callout {
|
|
113
|
-
margin: var(--sbmd-
|
|
94
|
+
margin: var(--sbmd-block-spacing, 1rem) 0;
|
|
114
95
|
padding: var(--sbmd-callout-padding, 0.5rem 1rem);
|
|
115
|
-
border-inline-start: var(--sbmd-callout-border, 0.25rem solid var(--sbmd-
|
|
116
|
-
border-radius: var(--sbmd-
|
|
96
|
+
border-inline-start: var(--sbmd-callout-border, 0.25rem solid var(--sbmd-callout-accent));
|
|
97
|
+
border-radius: var(--sbmd-radius, 0);
|
|
117
98
|
background: var(--sbmd-callout-background, transparent);
|
|
118
99
|
}
|
|
119
100
|
|
|
120
101
|
.sbdocs-content .storybook-addon-md-callout[data-callout='note'] {
|
|
121
|
-
--sbmd-
|
|
122
|
-
--sbmd-callout-note-color,
|
|
123
|
-
var(--sbmd-native-callout-note-color)
|
|
124
|
-
);
|
|
102
|
+
--sbmd-callout-accent: var(--sbmd-callout-note-color, var(--sbmd-native-callout-note-color));
|
|
125
103
|
}
|
|
126
104
|
|
|
127
105
|
.sbdocs-content .storybook-addon-md-callout[data-callout='tip'] {
|
|
128
|
-
--sbmd-
|
|
106
|
+
--sbmd-callout-accent: var(--sbmd-callout-tip-color, var(--sbmd-native-callout-tip-color));
|
|
129
107
|
}
|
|
130
108
|
|
|
131
109
|
.sbdocs-content .storybook-addon-md-callout[data-callout='important'] {
|
|
132
|
-
--sbmd-
|
|
110
|
+
--sbmd-callout-accent: var(
|
|
133
111
|
--sbmd-callout-important-color,
|
|
134
112
|
var(--sbmd-native-callout-important-color)
|
|
135
113
|
);
|
|
136
114
|
}
|
|
137
115
|
|
|
138
116
|
.sbdocs-content .storybook-addon-md-callout[data-callout='warning'] {
|
|
139
|
-
--sbmd-
|
|
117
|
+
--sbmd-callout-accent: var(
|
|
140
118
|
--sbmd-callout-warning-color,
|
|
141
119
|
var(--sbmd-native-callout-warning-color)
|
|
142
120
|
);
|
|
143
121
|
}
|
|
144
122
|
|
|
145
123
|
.sbdocs-content .storybook-addon-md-callout[data-callout='caution'] {
|
|
146
|
-
--sbmd-
|
|
124
|
+
--sbmd-callout-accent: var(
|
|
147
125
|
--sbmd-callout-caution-color,
|
|
148
126
|
var(--sbmd-native-callout-caution-color)
|
|
149
127
|
);
|
|
150
128
|
}
|
|
151
129
|
|
|
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
130
|
.sbdocs-content .storybook-addon-md .storybook-addon-md-callout-label {
|
|
157
|
-
margin: 0 0
|
|
158
|
-
color: var(--sbmd-callout-
|
|
159
|
-
font-size: var(--sbmd-callout-label-size, var(--sbmd-font-size, 0.875rem));
|
|
131
|
+
margin: 0 0 0.25rem;
|
|
132
|
+
color: var(--sbmd-callout-accent);
|
|
160
133
|
font-weight: var(--sbmd-callout-label-weight, 600);
|
|
161
134
|
}
|
|
162
135
|
|
|
@@ -168,12 +141,17 @@
|
|
|
168
141
|
margin-bottom: 0;
|
|
169
142
|
}
|
|
170
143
|
|
|
144
|
+
.sbdocs-content .storybook-addon-md :is(pre, code),
|
|
145
|
+
.sbdocs-content .storybook-addon-md pre.prismjs > div {
|
|
146
|
+
font-family: var(--sbmd-monospace-font-family, var(--sbmd-native-monospace-font-family));
|
|
147
|
+
}
|
|
148
|
+
|
|
171
149
|
.sbdocs-content .storybook-addon-md :not(pre) > code {
|
|
172
150
|
padding: var(--sbmd-inline-code-padding, 0.1875rem 0.3125rem);
|
|
173
|
-
border: var(--sbmd-
|
|
174
|
-
border-radius: var(--sbmd-
|
|
151
|
+
border: 0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
152
|
+
border-radius: var(--sbmd-code-radius, var(--sbmd-radius, 0.1875rem));
|
|
175
153
|
background: var(--sbmd-inline-code-background, var(--sbmd-native-code-background));
|
|
176
|
-
color:
|
|
154
|
+
color: inherit;
|
|
177
155
|
font-size: var(--sbmd-inline-code-size, 0.9em);
|
|
178
156
|
overflow-wrap: anywhere;
|
|
179
157
|
white-space: break-spaces;
|
|
@@ -181,31 +159,40 @@
|
|
|
181
159
|
|
|
182
160
|
.sbdocs-content .storybook-addon-md pre {
|
|
183
161
|
padding: var(--sbmd-code-padding, 1.25rem);
|
|
184
|
-
border: var(--sbmd-code-
|
|
162
|
+
border-radius: var(--sbmd-code-radius, var(--sbmd-radius, 0.1875rem));
|
|
185
163
|
overflow-x: auto;
|
|
186
164
|
}
|
|
187
165
|
|
|
166
|
+
.sbdocs-content .storybook-addon-md > pre,
|
|
167
|
+
.sbdocs-content .storybook-addon-md-callout > pre {
|
|
168
|
+
padding: 0;
|
|
169
|
+
border: 0;
|
|
170
|
+
white-space: normal;
|
|
171
|
+
}
|
|
172
|
+
|
|
188
173
|
.sbdocs-content .storybook-addon-md table {
|
|
189
174
|
display: block;
|
|
190
175
|
max-width: 100%;
|
|
191
176
|
overflow-x: auto;
|
|
192
177
|
border-collapse: collapse;
|
|
193
|
-
margin-block: var(--sbmd-
|
|
178
|
+
margin-block: var(--sbmd-block-spacing, 1rem);
|
|
194
179
|
}
|
|
195
180
|
|
|
196
181
|
.sbdocs-content .storybook-addon-md :is(th, td) {
|
|
197
182
|
padding: var(--sbmd-table-cell-padding, 0.375rem 0.8125rem);
|
|
198
|
-
border: var(
|
|
199
|
-
|
|
183
|
+
border: var(
|
|
184
|
+
--sbmd-table-border,
|
|
185
|
+
0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color))
|
|
186
|
+
);
|
|
187
|
+
text-align: start;
|
|
200
188
|
}
|
|
201
189
|
|
|
202
190
|
.sbdocs-content .storybook-addon-md th {
|
|
203
191
|
background: var(--sbmd-table-heading-background, transparent);
|
|
204
|
-
font-weight: var(--sbmd-table-heading-weight, 700);
|
|
205
192
|
}
|
|
206
193
|
|
|
207
194
|
.sbdocs-content .storybook-addon-md tr {
|
|
208
|
-
background:
|
|
195
|
+
background: transparent;
|
|
209
196
|
}
|
|
210
197
|
|
|
211
198
|
.sbdocs-content .storybook-addon-md tr:nth-of-type(even) {
|
|
@@ -216,50 +203,39 @@
|
|
|
216
203
|
display: block;
|
|
217
204
|
max-width: 100%;
|
|
218
205
|
height: auto;
|
|
219
|
-
margin-block: var(--sbmd-image-margin, 0);
|
|
220
206
|
border: var(--sbmd-image-border, 0);
|
|
207
|
+
border-radius: var(--sbmd-radius, 0);
|
|
221
208
|
}
|
|
222
209
|
|
|
223
210
|
.sbdocs-content .storybook-addon-md hr {
|
|
224
|
-
height:
|
|
211
|
+
height: 0.0625rem;
|
|
225
212
|
padding: 0;
|
|
226
|
-
margin-block: var(--sbmd-
|
|
213
|
+
margin-block: var(--sbmd-heading-spacing, 1.5rem);
|
|
227
214
|
border: 0;
|
|
228
|
-
background: var(--sbmd-
|
|
215
|
+
background: var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
229
216
|
}
|
|
230
217
|
|
|
231
218
|
.sbdocs-content .storybook-addon-md input[type='checkbox'] {
|
|
232
|
-
accent-color: var(--sbmd-
|
|
233
|
-
margin-inline-end: var(--sbmd-checkbox-gap, 0.25rem);
|
|
219
|
+
accent-color: var(--sbmd-accent-color, auto);
|
|
234
220
|
}
|
|
235
221
|
|
|
236
|
-
.sbdocs-content .storybook-addon-md
|
|
237
|
-
|
|
222
|
+
.sbdocs-content .storybook-addon-md-tags {
|
|
223
|
+
display: flex;
|
|
224
|
+
flex-wrap: wrap;
|
|
225
|
+
gap: 0.375rem;
|
|
226
|
+
list-style: none;
|
|
238
227
|
padding: 0;
|
|
239
|
-
|
|
240
|
-
white-space: normal;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.sbdocs-content .storybook-addon-md h1 {
|
|
244
|
-
font-size: var(--sbmd-h1-size, 2rem);
|
|
228
|
+
margin: 0 0 var(--sbmd-block-spacing, 1rem);
|
|
245
229
|
}
|
|
246
230
|
|
|
247
|
-
.sbdocs-content .storybook-addon-md
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
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);
|
|
231
|
+
.sbdocs-content .storybook-addon-md-tag {
|
|
232
|
+
margin: 0;
|
|
233
|
+
color: var(--sbmd-tag-color, inherit);
|
|
234
|
+
background: var(--sbmd-tag-background, transparent);
|
|
235
|
+
border: var(--sbmd-tag-border, 0.0625rem solid currentColor);
|
|
236
|
+
border-radius: var(--sbmd-tag-radius, 62.4375rem);
|
|
237
|
+
padding: var(--sbmd-tag-padding, 0.125rem 0.5rem);
|
|
238
|
+
font-size: var(--sbmd-tag-font-size, 0.75rem);
|
|
239
|
+
font-weight: 500;
|
|
240
|
+
line-height: 1.5;
|
|
265
241
|
}
|