storybook-addon-md 0.4.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +59 -5
  2. package/README.md +34 -4
  3. package/STYLING.md +83 -87
  4. package/dist/runtime.js +41 -2
  5. package/dist/styles.css +129 -112
  6. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,10 +1,64 @@
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
+
49
+ ## 0.5.0
50
+
51
+ ### Minor Changes
52
+
53
+ - 76c1a71: Render GitHub-style alerts (`> [!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, and `[!CAUTION]`) as labelled callouts in Docs. Ordinary blockquotes and unrecognized markers are unchanged, Markdown and relative assets inside callouts keep working, and manifests keep the original source.
54
+
55
+ Style callouts with the new `--sbmd-callout-*` variables, including per-type accent colors, or target `.storybook-addon-md-callout[data-callout]`. Custom `MarkdownRenderer` implementations receive the original blockquote syntax and must render callouts themselves. See the [callout syntax](https://github.com/ruijdacd/storybook-addon-md#callouts) and [styling reference](https://github.com/ruijdacd/storybook-addon-md/blob/main/STYLING.md#callouts).
56
+
3
57
  ## 0.4.0
4
58
 
5
59
  ### Minor Changes
6
60
 
7
- - df081eb: Respect `docs.defaultName`, use leading H1s as standalone titles, and add `tagFields` and the `storybook-addon-md/node` parsing API. Markdown pages retain props, examples, and original manifest source.
61
+ - 8bf5398: Respect `docs.defaultName`, use leading H1s as standalone titles, and add `tagFields` and the `storybook-addon-md/node` parsing API. Markdown pages retain props, examples, and original manifest source.
8
62
 
9
63
  Migration: update attached links from `--markdown` to `--docs` (or the configured name), enable Autodocs in preview-level tags, and render the supplied `heading` in custom layouts. MCP component IDs are unchanged.
10
64
 
@@ -12,19 +66,19 @@
12
66
 
13
67
  ### Minor Changes
14
68
 
15
- - 209fe53: Add opt-in documentation manifests with original Markdown, frontmatter summaries, and live updates for standalone and attached docs. Enable `manifests: true` to use [Storybook 10.6.0 manifests](https://storybook.js.org/docs/ai/manifests) and [@storybook/addon-mcp](https://storybook.js.org/docs/ai/mcp/overview) without a custom preset.
69
+ - 2052cb5: Add opt-in documentation manifests with original Markdown, frontmatter summaries, and live updates for standalone and attached docs. Enable `manifests: true` to use [Storybook 10.6.0 manifests](https://storybook.js.org/docs/ai/manifests) and [@storybook/addon-mcp](https://storybook.js.org/docs/ai/mcp/overview) without a custom preset.
16
70
 
17
71
  See the [setup guide](https://github.com/ruijdacd/storybook-addon-md#documentation-manifests-and-mcp) and [examples with and without MCP](https://github.com/ruijdacd/storybook-addon-md#examples-and-contributing).
18
72
 
19
73
  ### Patch Changes
20
74
 
21
- - a94853e: Use rem values for default Markdown styles so they scale with the root font size. Add `--sbmd-monospace-font-family` to customize inline code and code blocks, with Storybook’s monospace theme font as the default. See the [CSS variable reference](https://github.com/ruijdacd/storybook-addon-md/blob/main/STYLING.md).
75
+ - d3c7300: Use rem values for default Markdown styles so they scale with the root font size. Add `--sbmd-monospace-font-family` to customize inline code and code blocks, with Storybook’s monospace theme font as the default. See the [CSS variable reference](https://github.com/ruijdacd/storybook-addon-md/blob/main/STYLING.md).
22
76
 
23
77
  ## 0.2.0
24
78
 
25
79
  ### Minor Changes
26
80
 
27
- - 58f8a64: Remove the `exclude` option. Move exclusions into `patterns` with a leading `!`:
81
+ - dc93b21: Remove the `exclude` option. Move exclusions into `patterns` with a leading `!`:
28
82
 
29
83
  ```ts
30
84
  patterns: ['docs/**/*.md', '!docs/private/**'];
@@ -34,7 +88,7 @@
34
88
 
35
89
  ### Patch Changes
36
90
 
37
- - 58f8a64: Upgrade Chokidar to v5 and replace fast-glob with tinyglobby. Keep explicit glob matching, negative-pattern exclusions, and live Markdown updates.
91
+ - dc93b21: Upgrade Chokidar to v5 and replace fast-glob with tinyglobby. Keep explicit glob matching, negative-pattern exclusions, and live Markdown updates.
38
92
 
39
93
  ## 0.1.0
40
94
 
package/README.md CHANGED
@@ -1,7 +1,12 @@
1
1
  # Storybook Markdown
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/storybook-addon-md)](https://www.npmjs.com/package/storybook-addon-md)
4
+ [![CI](https://github.com/ruijdacd/storybook-addon-md/actions/workflows/ci.yml/badge.svg)](https://github.com/ruijdacd/storybook-addon-md/actions/workflows/ci.yml)
5
+
3
6
  Write ordinary `.md` files and browse them inside Storybook. Attach documentation to component stories or create standalone pages, with no JSX, imports, or MDX wrappers to maintain.
4
7
 
8
+ [Try the live example](https://storybook-addon-md.netlify.app/?path=/docs/guides-introduction--docs).
9
+
5
10
  - Discover Markdown automatically, including live additions, edits, and deletions.
6
11
  - Show component docs alongside existing examples and generated props.
7
12
  - Bundle relative images and downloads in static builds.
@@ -9,8 +14,10 @@ Write ordinary `.md` files and browse them inside Storybook. Attach documentatio
9
14
 
10
15
  ## Install
11
16
 
17
+ We recommend [ni](https://github.com/antfu-collective/ni#readme) to install dependencies with your project's package manager. Install it first with `npm install -g @antfu/ni`, then run:
18
+
12
19
  ```sh
13
- nub add -D storybook-addon-md @storybook/addon-docs@10.6.0
20
+ ni -D storybook-addon-md @storybook/addon-docs@10.6.0
14
21
  ```
15
22
 
16
23
  Tested with **Storybook 10.6.0**, **React Vite 10.6.0**, **Vite 7.3.6**, and **React 19.2.4**. Requires Node 22.13+. Other builders and renderers are not tested.
@@ -103,6 +110,29 @@ Without a title, `docs/Introduction.md` appears at `Documentation/docs/Introduct
103
110
 
104
111
  A leading Markdown H1 supplies the visible title, including inline formatting. Otherwise the final segment of `title` is shown. Both `# Heading` and Setext H1 syntax work; a later H1 is ordinary content. Sidebar placement and IDs always use the configured or inferred sidebar title. The original file and manifest content remain unchanged.
105
112
 
113
+ ### Callouts
114
+
115
+ GitHub-style alerts render as labelled callouts:
116
+
117
+ ```md
118
+ > [!NOTE]
119
+ > Additional context.
120
+
121
+ > [!TIP]
122
+ > Recommended approach.
123
+
124
+ > [!IMPORTANT]
125
+ > Information readers need to succeed.
126
+
127
+ > [!WARNING]
128
+ > Something that requires care.
129
+
130
+ > [!CAUTION]
131
+ > A risk or destructive consequence.
132
+ ```
133
+
134
+ The marker must be the first line of a blockquote, on its own, and is case-insensitive. Callouts keep ordinary Markdown, including paragraphs, emphasis, links, lists, and code blocks, and relative links and images inside them resolve as usual. Blockquotes without a marker, unrecognized markers, and markers followed by text on the same line render as ordinary blockquotes. Custom titles and collapsible callouts are not supported. Source files and manifests keep the original syntax.
135
+
106
136
  ### Frontmatter
107
137
 
108
138
  YAML frontmatter is optional. Use lowercase field names.
@@ -225,9 +255,9 @@ Set `stylesheet: '.storybook/markdown.css'` to override the defaults:
225
255
  }
226
256
  ```
227
257
 
228
- Variables cover typography, spacing, links, code, tables, images, and chips. Defaults follow Storybook’s Docs theme in light and dark mode.
258
+ Variables cover typography, spacing, borders, links, code, tables, chips, and callouts. Defaults follow Storybook’s Docs theme in light and dark mode.
229
259
 
230
- See [Styling](STYLING.md) for all variables, status 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.
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.
231
261
 
232
262
  ## Links and limitations
233
263
 
@@ -254,6 +284,6 @@ Choose either example. They share stories, Markdown, and styling, with separate
254
284
 
255
285
  The MCP example enables `manifests: true` and `@storybook/addon-mcp`. Connect your MCP client to `http://localhost:6007/mcp`. Static builds write to `storybook-static/` and `storybook-static-mcp/`, respectively. MCP is a development dependency for the example only; normal addon usage does not require it.
256
286
 
257
- Browse **Guides → Introduction**, **Components → Button**, and **Components → Toggle** for standalone, attached, and shared docs with system light/dark styling.
287
+ Browse **Guides → Introduction**, **Guides → Callouts**, **Components → Button**, and **Components → Toggle** for standalone, attached, and shared docs with system light/dark styling.
258
288
 
259
289
  See [Contributing](CONTRIBUTING.md) for tests and releases, or [open an issue](https://github.com/ruijdacd/storybook-addon-md/issues).
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-h2-size: 1.625rem;
10
- --sbmd-paragraph-spacing: 1.25rem;
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,95 +16,63 @@ 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. Heading margins set space above the heading; title margin sets space below it. Paragraph spacing also applies to lists. Tag margin sets space below the chip list.
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 | CSS property |
25
- | --------------------------------- | ----------------------------- |
26
- | `--sbmd-background` | `background` |
27
- | `--sbmd-checkbox-color` | `accent-color` |
28
- | `--sbmd-checkbox-gap` | `margin-inline-end` |
29
- | `--sbmd-code-border` | `border` |
30
- | `--sbmd-code-padding` | `padding` |
31
- | `--sbmd-code-radius` | `border-radius` |
32
- | `--sbmd-color` | `color` |
33
- | `--sbmd-font-family` | `font-family` |
34
- | `--sbmd-font-size` | `font-size` |
35
- | `--sbmd-h1-size` | `font-size` |
36
- | `--sbmd-h2-border` | `border-bottom` |
37
- | `--sbmd-h2-letter-spacing` | `letter-spacing` |
38
- | `--sbmd-h2-margin` | `margin-top` |
39
- | `--sbmd-h2-padding` | `padding-bottom` |
40
- | `--sbmd-h2-size` | `font-size` |
41
- | `--sbmd-h3-letter-spacing` | `letter-spacing` |
42
- | `--sbmd-h3-margin` | `margin-top` |
43
- | `--sbmd-h3-size` | `font-size` |
44
- | `--sbmd-h4-size` | `font-size` |
45
- | `--sbmd-h5-size` | `font-size` |
46
- | `--sbmd-h6-size` | `font-size` |
47
- | `--sbmd-heading-color` | `color` |
48
- | `--sbmd-heading-font-family` | `font-family` |
49
- | `--sbmd-heading-line-height` | `line-height` |
50
- | `--sbmd-heading-weight` | `font-weight` |
51
- | `--sbmd-image-border` | `border` |
52
- | `--sbmd-image-margin` | `margin-block` |
53
- | `--sbmd-image-radius` | `border-radius` |
54
- | `--sbmd-inline-code-background` | `background` |
55
- | `--sbmd-inline-code-border` | `border` |
56
- | `--sbmd-inline-code-color` | `color` |
57
- | `--sbmd-inline-code-padding` | `padding` |
58
- | `--sbmd-inline-code-radius` | `border-radius` |
59
- | `--sbmd-inline-code-size` | `font-size` |
60
- | `--sbmd-line-height` | `line-height` |
61
- | `--sbmd-link-color` | `color` |
62
- | `--sbmd-link-decoration` | `text-decoration` |
63
- | `--sbmd-link-focus-offset` | `outline-offset` |
64
- | `--sbmd-link-focus-outline` | `outline` |
65
- | `--sbmd-link-hover-thickness` | `text-decoration-thickness` |
66
- | `--sbmd-link-radius` | `border-radius` |
67
- | `--sbmd-link-thickness` | `text-decoration-thickness` |
68
- | `--sbmd-link-underline-offset` | `text-underline-offset` |
69
- | `--sbmd-list-item-spacing` | `margin-top` |
70
- | `--sbmd-list-marker-color` | `color` |
71
- | `--sbmd-monospace-font-family` | `font-family` (Markdown code) |
72
- | `--sbmd-max-width` | `max-width` |
73
- | `--sbmd-page-border` | `border` |
74
- | `--sbmd-page-padding` | `padding` |
75
- | `--sbmd-page-radius` | `border-radius` |
76
- | `--sbmd-paragraph-spacing` | `margin-block` |
77
- | `--sbmd-quote-background` | `background` |
78
- | `--sbmd-quote-border` | `border-inline-start` |
79
- | `--sbmd-quote-margin` | `margin` |
80
- | `--sbmd-quote-padding` | `padding` |
81
- | `--sbmd-quote-radius` | `border-radius` |
82
- | `--sbmd-rule-color` | `background` |
83
- | `--sbmd-rule-height` | `height` |
84
- | `--sbmd-rule-margin` | `margin-block` |
85
- | `--sbmd-table-align` | `text-align` |
86
- | `--sbmd-table-background` | `background` |
87
- | `--sbmd-table-border` | `border` |
88
- | `--sbmd-table-cell-padding` | `padding` |
89
- | `--sbmd-table-heading-background` | `background` |
90
- | `--sbmd-table-heading-weight` | `font-weight` |
91
- | `--sbmd-table-margin` | `margin-block` |
92
- | `--sbmd-table-stripe-background` | `background` |
93
- | `--sbmd-tag-background` | `background` |
94
- | `--sbmd-tag-border` | `border` |
95
- | `--sbmd-tag-color` | `color` |
96
- | `--sbmd-tag-font-size` | `font-size` |
97
- | `--sbmd-tag-font-weight` | `font-weight` |
98
- | `--sbmd-tag-gap` | `gap` |
99
- | `--sbmd-tag-line-height` | `line-height` |
100
- | `--sbmd-tag-padding` | `padding` |
101
- | `--sbmd-tag-radius` | `border-radius` |
102
- | `--sbmd-title-letter-spacing` | `letter-spacing` |
103
- | `--sbmd-title-line-height` | `line-height` |
104
- | `--sbmd-title-margin` | `margin-bottom` |
105
- | `--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 |
106
69
 
107
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.
108
71
 
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`.
75
+
109
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.
110
77
 
111
78
  ## Customization
@@ -127,7 +94,7 @@ Set `stylesheet: '.storybook/markdown.css'` in the addon options, then define yo
127
94
  }
128
95
  ```
129
96
 
130
- Variables cover typography, spacing, links, code, tables, images, and chips. They inherit from your theme container, and default text and link colors follow the active Docs theme. See [Variables](#variables) for the complete list.
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.
131
98
 
132
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`.
133
100
 
@@ -147,6 +114,33 @@ Status chips share the tag variables. Use `data-status` to map values to your th
147
114
 
148
115
  The `i` flag matches both `Stable` and `stable`. The addon accepts any status; your stylesheet decides its colors. Set `color-scheme: light dark` on the theme container when using `light-dark()`.
149
116
 
117
+ ### Callouts
118
+
119
+ Map the accent colors to your design tokens, and adjust the shared box and label styles:
120
+
121
+ ```css
122
+ .storybook-addon-md-page {
123
+ --sbmd-callout-note-color: light-dark(#0969da, #4493f8);
124
+ --sbmd-callout-tip-color: light-dark(#1a7f37, #3fb950);
125
+ --sbmd-callout-important-color: light-dark(#8250df, #ab7df8);
126
+ --sbmd-callout-warning-color: light-dark(#9a6700, #d29922);
127
+ --sbmd-callout-caution-color: light-dark(#d1242f, #f85149);
128
+ --sbmd-callout-padding: 0.5rem 1rem;
129
+ --sbmd-callout-label-weight: 500;
130
+ }
131
+ ```
132
+
133
+ Use `data-callout` for anything that differs per type beyond the accent color, such as a tinted background or a rounded corner:
134
+
135
+ ```css
136
+ .storybook-addon-md-callout[data-callout='caution'] {
137
+ background: light-dark(#ffebe9, #2d1214);
138
+ border-radius: 0.375rem;
139
+ }
140
+ ```
141
+
142
+ The label is visible text, so callouts remain distinguishable without color. The markup is static: no `role="alert"` or live region is used.
143
+
150
144
  ### Light and Dark Themes
151
145
 
152
146
  Use Storybook’s standard Docs theme configuration for a fixed theme:
@@ -180,6 +174,8 @@ export function MarkdownRenderer(document: MarkdownDocument) {
180
174
 
181
175
  `MarkdownRenderer` receives `{ markdown, metadata, source, heading? }`: processed Markdown with resolved asset URLs, preserved frontmatter, and the source path relative to the project folder.
182
176
 
177
+ Callouts are rendered by `DefaultMarkdownRenderer`. A custom `MarkdownRenderer` receives them as ordinary blockquotes whose first line is the `[!NOTE]` marker, serialized as `\[!NOTE]` so that renderers treat the brackets as text. Render callouts yourself or delegate to `DefaultMarkdownRenderer`. Custom layouts are unaffected because callouts are part of `children`.
178
+
183
179
  `Layout` receives `{ documents, title, attached, children, examples, heading, tagFields }`. A standalone leading H1 is extracted in the default pipeline and supplied as the rendered `heading` node; render it instead of your fallback title. The remaining Markdown is supplied through `children`, while source files and manifests stay intact. `tagFields` lists configured metadata fields for tag display. Render `children` and `examples` to keep documentation and native example/props blocks. `examples` is `null` for standalone pages. `title` contains the standalone sidebar title and is empty for attached pages; `DefaultLayout` uses Storybook’s `Title` block for those.
184
180
 
185
181
  Customization paths are relative to the project folder and must stay inside it. Missing files produce source-specific errors. Styling and presentation are independent options.
package/dist/runtime.js CHANGED
@@ -1,7 +1,39 @@
1
+ import { Children, cloneElement, isValidElement } from "react";
1
2
  import { useTheme } from "storybook/theming";
2
3
  import { CodeOrSourceMdx, Controls, HeadersMdx, Markdown, Primary, Stories, Title } from "@storybook/addon-docs/blocks";
3
4
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
4
5
  //#region src/runtime.tsx
6
+ const calloutLabels = {
7
+ note: "Note",
8
+ tip: "Tip",
9
+ important: "Important",
10
+ warning: "Warning",
11
+ caution: "Caution"
12
+ };
13
+ function Blockquote({ children, ...props }) {
14
+ const [first, ...rest] = Children.toArray(children);
15
+ const paragraph = isValidElement(first) && first.type === "p" ? first : void 0;
16
+ const items = Children.toArray(paragraph?.props.children);
17
+ const split = items.findIndex((item) => typeof item !== "string");
18
+ const leading = items.slice(0, split === -1 ? items.length : split).join("");
19
+ const marker = /^\[!(note|tip|important|warning|caution)\](\n|$)/i.exec(leading);
20
+ if (!paragraph || !marker || !marker[2] && split !== -1) return /* @__PURE__ */ jsx("blockquote", {
21
+ ...props,
22
+ children
23
+ });
24
+ const type = marker[1].toLowerCase();
25
+ const remainder = leading.slice(marker[0].length);
26
+ const trailing = split === -1 ? [] : items.slice(split);
27
+ const content = remainder || trailing.length ? [cloneElement(paragraph, void 0, ...remainder ? [remainder] : [], ...trailing), ...rest] : rest;
28
+ return /* @__PURE__ */ jsxs("div", {
29
+ className: "storybook-addon-md-callout",
30
+ "data-callout": type,
31
+ children: [/* @__PURE__ */ jsx("p", {
32
+ className: "storybook-addon-md-callout-label",
33
+ children: calloutLabels[type]
34
+ }), content]
35
+ });
36
+ }
5
37
  function DefaultMarkdownRenderer({ markdown }) {
6
38
  return /* @__PURE__ */ jsx(Markdown, {
7
39
  options: {
@@ -9,7 +41,8 @@ function DefaultMarkdownRenderer({ markdown }) {
9
41
  overrides: {
10
42
  code: CodeOrSourceMdx,
11
43
  ...HeadersMdx,
12
- a: "a"
44
+ a: "a",
45
+ blockquote: Blockquote
13
46
  }
14
47
  },
15
48
  children: markdown
@@ -44,13 +77,19 @@ function DefaultLayout({ documents, title, attached, children, examples, heading
44
77
  }
45
78
  function Documentation({ documents, title, attached = false, presentation = {}, tagFields = [] }) {
46
79
  const theme = useTheme();
80
+ const dark = theme.base === "dark";
47
81
  const defaults = {
48
82
  "--sbmd-native-color": theme.color.defaultText,
49
83
  "--sbmd-native-link-color": theme.color.secondary,
50
84
  "--sbmd-native-font-family": theme.typography.fonts.base,
51
85
  "--sbmd-native-monospace-font-family": theme.typography.fonts.mono,
52
86
  "--sbmd-native-border-color": theme.appBorderColor,
53
- "--sbmd-native-code-background": theme.background.content
87
+ "--sbmd-native-code-background": theme.background.content,
88
+ "--sbmd-native-callout-note-color": theme.color.secondary,
89
+ "--sbmd-native-callout-tip-color": dark ? theme.color.positive : theme.color.positiveText,
90
+ "--sbmd-native-callout-important-color": dark ? `color-mix(in srgb, ${theme.color.purple}, white 45%)` : theme.color.purple,
91
+ "--sbmd-native-callout-warning-color": dark ? theme.color.warning : theme.color.warningText,
92
+ "--sbmd-native-callout-caution-color": dark ? theme.color.negative : theme.color.negativeText
54
93
  };
55
94
  const Layout = presentation.Layout ?? DefaultLayout;
56
95
  const Renderer = presentation.MarkdownRenderer ?? DefaultMarkdownRenderer;
package/dist/styles.css CHANGED
@@ -1,120 +1,151 @@
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: var(--sbmd-heading-line-height, 1.25);
17
+ line-height: 1.25;
21
18
  font-weight: var(--sbmd-heading-weight, 700);
22
19
  }
23
- .sbdocs-content .storybook-addon-md a {
24
- color: var(--sbmd-link-color, var(--sbmd-native-link-color));
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
- .sbdocs-content .storybook-addon-md :is(pre, code),
27
- .sbdocs-content .storybook-addon-md pre.prismjs > div {
28
- font-family: var(--sbmd-monospace-font-family, var(--sbmd-native-monospace-font-family));
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
- .sbdocs-content .storybook-addon-md pre {
31
- border-radius: var(--sbmd-code-radius, 0.1875rem);
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
- .sbdocs-content .storybook-addon-md img {
34
- border-radius: var(--sbmd-image-radius, 0);
34
+
35
+ .sbdocs-content .storybook-addon-md h1 {
36
+ font-size: var(--sbmd-h1-size, 2rem);
35
37
  }
36
- .sbdocs-content .storybook-addon-md-tags {
37
- display: flex;
38
- flex-wrap: wrap;
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
- .sbdocs-content .storybook-addon-md-tag {
45
- margin: 0;
46
- color: var(--sbmd-tag-color, inherit);
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-title h1 {
57
- font-size: var(--sbmd-title-size, 2rem);
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 h2 {
64
- margin-top: var(--sbmd-h2-margin, 1.5rem);
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 h3 {
71
- margin-top: var(--sbmd-h3-margin, 1.5rem);
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-paragraph-spacing, 1rem);
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);
73
+ .sbdocs-content .storybook-addon-md blockquote {
74
+ margin: var(--sbmd-block-spacing, 1rem) 0;
75
+ padding: var(--sbmd-quote-padding, 0 0.9375rem);
76
+ border-inline-start: var(
77
+ --sbmd-quote-border,
78
+ 0.25rem solid var(--sbmd-border-color, var(--sbmd-native-border-color))
79
+ );
96
80
  }
97
81
 
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);
82
+ .sbdocs-content .storybook-addon-md-callout {
83
+ margin: var(--sbmd-block-spacing, 1rem) 0;
84
+ padding: var(--sbmd-callout-padding, 0.5rem 1rem);
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);
102
90
  }
103
91
 
104
- .sbdocs-content .storybook-addon-md blockquote {
105
- margin: var(--sbmd-quote-margin, 1rem 0);
106
- padding: var(--sbmd-quote-padding, 0 0.9375rem);
107
- border-inline-start: var(--sbmd-quote-border, 0.25rem solid var(--sbmd-native-border-color));
108
- border-radius: var(--sbmd-quote-radius, 0);
109
- background: var(--sbmd-quote-background, transparent);
92
+ .sbdocs-content .storybook-addon-md-callout[data-callout='note'] {
93
+ --sbmd-native-callout-color: var(
94
+ --sbmd-callout-note-color,
95
+ var(--sbmd-native-callout-note-color)
96
+ );
97
+ }
98
+
99
+ .sbdocs-content .storybook-addon-md-callout[data-callout='tip'] {
100
+ --sbmd-native-callout-color: var(--sbmd-callout-tip-color, var(--sbmd-native-callout-tip-color));
101
+ }
102
+
103
+ .sbdocs-content .storybook-addon-md-callout[data-callout='important'] {
104
+ --sbmd-native-callout-color: var(
105
+ --sbmd-callout-important-color,
106
+ var(--sbmd-native-callout-important-color)
107
+ );
108
+ }
109
+
110
+ .sbdocs-content .storybook-addon-md-callout[data-callout='warning'] {
111
+ --sbmd-native-callout-color: var(
112
+ --sbmd-callout-warning-color,
113
+ var(--sbmd-native-callout-warning-color)
114
+ );
115
+ }
116
+
117
+ .sbdocs-content .storybook-addon-md-callout[data-callout='caution'] {
118
+ --sbmd-native-callout-color: var(
119
+ --sbmd-callout-caution-color,
120
+ var(--sbmd-native-callout-caution-color)
121
+ );
122
+ }
123
+
124
+ .sbdocs-content .storybook-addon-md .storybook-addon-md-callout-label {
125
+ margin: 0 0 0.25rem;
126
+ color: var(--sbmd-native-callout-color);
127
+ font-weight: var(--sbmd-callout-label-weight, 600);
128
+ }
129
+
130
+ .sbdocs-content .storybook-addon-md-callout > .storybook-addon-md-callout-label + * {
131
+ margin-top: 0;
132
+ }
133
+
134
+ .sbdocs-content .storybook-addon-md-callout > :last-child {
135
+ margin-bottom: 0;
136
+ }
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));
110
141
  }
111
142
 
112
143
  .sbdocs-content .storybook-addon-md :not(pre) > code {
113
144
  padding: var(--sbmd-inline-code-padding, 0.1875rem 0.3125rem);
114
- border: var(--sbmd-inline-code-border, 0.0625rem solid var(--sbmd-native-border-color));
115
- border-radius: var(--sbmd-inline-code-radius, 0.1875rem);
145
+ border: 0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color));
146
+ border-radius: var(--sbmd-code-radius, 0.1875rem);
116
147
  background: var(--sbmd-inline-code-background, var(--sbmd-native-code-background));
117
- color: var(--sbmd-inline-code-color, inherit);
148
+ color: inherit;
118
149
  font-size: var(--sbmd-inline-code-size, 0.9em);
119
150
  overflow-wrap: anywhere;
120
151
  white-space: break-spaces;
@@ -122,31 +153,33 @@
122
153
 
123
154
  .sbdocs-content .storybook-addon-md pre {
124
155
  padding: var(--sbmd-code-padding, 1.25rem);
125
- border: var(--sbmd-code-border, 0);
156
+ border-radius: var(--sbmd-code-radius, 0.1875rem);
126
157
  overflow-x: auto;
127
158
  }
128
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
+
129
167
  .sbdocs-content .storybook-addon-md table {
130
168
  display: block;
131
169
  max-width: 100%;
132
170
  overflow-x: auto;
133
171
  border-collapse: collapse;
134
- margin-block: var(--sbmd-table-margin, 1rem);
172
+ margin-block: var(--sbmd-block-spacing, 1rem);
135
173
  }
136
174
 
137
175
  .sbdocs-content .storybook-addon-md :is(th, td) {
138
176
  padding: var(--sbmd-table-cell-padding, 0.375rem 0.8125rem);
139
- border: var(--sbmd-table-border, 0.0625rem solid var(--sbmd-native-border-color));
140
- text-align: var(--sbmd-table-align, start);
141
- }
142
-
143
- .sbdocs-content .storybook-addon-md th {
144
- background: var(--sbmd-table-heading-background, transparent);
145
- 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;
146
179
  }
147
180
 
148
181
  .sbdocs-content .storybook-addon-md tr {
149
- background: var(--sbmd-table-background, transparent);
182
+ background: transparent;
150
183
  }
151
184
 
152
185
  .sbdocs-content .storybook-addon-md tr:nth-of-type(even) {
@@ -157,49 +190,33 @@
157
190
  display: block;
158
191
  max-width: 100%;
159
192
  height: auto;
160
- margin-block: var(--sbmd-image-margin, 0);
161
- border: var(--sbmd-image-border, 0);
162
193
  }
163
194
 
164
195
  .sbdocs-content .storybook-addon-md hr {
165
- height: var(--sbmd-rule-height, 0.0625rem);
196
+ height: 0.0625rem;
166
197
  padding: 0;
167
- margin-block: var(--sbmd-rule-margin, 1.5rem);
198
+ margin-block: var(--sbmd-heading-spacing, 1.5rem);
168
199
  border: 0;
169
- background: var(--sbmd-rule-color, var(--sbmd-native-border-color));
200
+ background: var(--sbmd-border-color, var(--sbmd-native-border-color));
170
201
  }
171
202
 
172
- .sbdocs-content .storybook-addon-md input[type='checkbox'] {
173
- accent-color: var(--sbmd-checkbox-color, auto);
174
- margin-inline-end: var(--sbmd-checkbox-gap, 0.25rem);
175
- }
176
-
177
- .sbdocs-content .storybook-addon-md > pre {
203
+ .sbdocs-content .storybook-addon-md-tags {
204
+ display: flex;
205
+ flex-wrap: wrap;
206
+ gap: 0.375rem;
207
+ list-style: none;
178
208
  padding: 0;
179
- border: 0;
180
- white-space: normal;
209
+ margin: 0 0 var(--sbmd-block-spacing, 1rem);
181
210
  }
182
211
 
183
- .sbdocs-content .storybook-addon-md h1 {
184
- font-size: var(--sbmd-h1-size, 2rem);
185
- }
186
-
187
- .sbdocs-content .storybook-addon-md h2 {
188
- font-size: var(--sbmd-h2-size, 1.5rem);
189
- }
190
-
191
- .sbdocs-content .storybook-addon-md h3 {
192
- font-size: var(--sbmd-h3-size, 1.25rem);
193
- }
194
-
195
- .sbdocs-content .storybook-addon-md h4 {
196
- font-size: var(--sbmd-h4-size, 1rem);
197
- }
198
-
199
- .sbdocs-content .storybook-addon-md h5 {
200
- font-size: var(--sbmd-h5-size, 0.875rem);
201
- }
202
-
203
- .sbdocs-content .storybook-addon-md h6 {
204
- 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;
205
222
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "storybook-addon-md",
3
- "version": "0.4.0",
3
+ "version": "0.6.0",
4
4
  "description": "Discover ordinary Markdown and render it in Storybook Docs.",
5
5
  "keywords": [
6
6
  "docs",
@@ -14,6 +14,7 @@
14
14
  "url": "https://github.com/ruijdacd/storybook-addon-md/issues"
15
15
  },
16
16
  "license": "MIT",
17
+ "author": "Rui Duarte (https://github.com/ruijdacd)",
17
18
  "repository": {
18
19
  "type": "git",
19
20
  "url": "git+https://github.com/ruijdacd/storybook-addon-md.git"