storybook-addon-md 0.6.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 +36 -0
- package/README.md +1 -1
- package/STYLING.md +91 -61
- package/dist/styles.css +37 -18
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
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
|
+
|
|
3
39
|
## 0.6.0
|
|
4
40
|
|
|
5
41
|
### 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,72 +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-accent-color: #0969da;
|
|
9
10
|
--sbmd-border-color: #d1d9e0;
|
|
11
|
+
--sbmd-radius: 0.375rem;
|
|
10
12
|
--sbmd-block-spacing: 1.25rem;
|
|
11
|
-
--sbmd-
|
|
13
|
+
--sbmd-link-decoration: underline 0.0625rem;
|
|
12
14
|
--sbmd-table-cell-padding: 0.75rem 1rem;
|
|
13
|
-
--sbmd-tag-radius: 0.375rem;
|
|
14
15
|
}
|
|
15
16
|
```
|
|
16
17
|
|
|
17
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.
|
|
18
19
|
|
|
19
|
-
Variables accept normal CSS values for the property
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
| `--sbmd-
|
|
28
|
-
| `--sbmd-
|
|
29
|
-
| `--sbmd-
|
|
30
|
-
| `--sbmd-
|
|
31
|
-
| `--sbmd-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
|
36
|
-
|
|
|
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-
|
|
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 |
|
|
69
90
|
|
|
70
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.
|
|
71
92
|
|
|
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.
|
|
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.
|
|
73
94
|
|
|
74
|
-
Properties without a variable use ordinary CSS.
|
|
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.
|
|
75
96
|
|
|
76
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.
|
|
77
98
|
|
|
@@ -88,13 +109,14 @@ Set `stylesheet: '.storybook/markdown.css'` in the addon options, then define yo
|
|
|
88
109
|
--sbmd-font-size: 1rem;
|
|
89
110
|
--sbmd-monospace-font-family: 'JetBrains Mono', monospace;
|
|
90
111
|
--sbmd-line-height: 1.8;
|
|
91
|
-
--sbmd-
|
|
92
|
-
--sbmd-
|
|
93
|
-
--sbmd-
|
|
112
|
+
--sbmd-accent-color: #0969da;
|
|
113
|
+
--sbmd-radius: 0.375rem;
|
|
114
|
+
--sbmd-page-max-width: 60rem;
|
|
115
|
+
--sbmd-page-margin: 0 auto;
|
|
94
116
|
}
|
|
95
117
|
```
|
|
96
118
|
|
|
97
|
-
|
|
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.
|
|
98
120
|
|
|
99
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`.
|
|
100
122
|
|
|
@@ -130,12 +152,20 @@ Map the accent colors to your design tokens, and adjust the shared box and label
|
|
|
130
152
|
}
|
|
131
153
|
```
|
|
132
154
|
|
|
133
|
-
|
|
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:
|
|
134
165
|
|
|
135
166
|
```css
|
|
136
167
|
.storybook-addon-md-callout[data-callout='caution'] {
|
|
137
|
-
background: light-dark(#ffebe9, #2d1214);
|
|
138
|
-
border-radius: 0.375rem;
|
|
168
|
+
--sbmd-callout-background: light-dark(#ffebe9, #2d1214);
|
|
139
169
|
}
|
|
140
170
|
```
|
|
141
171
|
|
package/dist/styles.css
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
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
|
+
max-width: var(--sbmd-page-max-width, none);
|
|
5
|
+
margin: var(--sbmd-page-margin, 0);
|
|
6
|
+
padding: var(--sbmd-page-padding, 0);
|
|
7
|
+
background: var(--sbmd-page-background, transparent);
|
|
4
8
|
}
|
|
5
9
|
|
|
6
10
|
.sbdocs-content .storybook-addon-md :is(p, li, td, th, blockquote) {
|
|
@@ -65,11 +69,16 @@
|
|
|
65
69
|
}
|
|
66
70
|
|
|
67
71
|
.sbdocs-content .storybook-addon-md a {
|
|
68
|
-
color: var(--sbmd-link-color, var(--sbmd-native-link-color));
|
|
72
|
+
color: var(--sbmd-link-color, var(--sbmd-accent-color, var(--sbmd-native-link-color)));
|
|
69
73
|
text-decoration: var(--sbmd-link-decoration, none);
|
|
74
|
+
text-underline-offset: var(--sbmd-link-underline-offset, auto);
|
|
70
75
|
overflow-wrap: anywhere;
|
|
71
76
|
}
|
|
72
77
|
|
|
78
|
+
.sbdocs-content .storybook-addon-md a:hover {
|
|
79
|
+
text-decoration: var(--sbmd-link-hover-decoration, var(--sbmd-link-decoration, none));
|
|
80
|
+
}
|
|
81
|
+
|
|
73
82
|
.sbdocs-content .storybook-addon-md blockquote {
|
|
74
83
|
margin: var(--sbmd-block-spacing, 1rem) 0;
|
|
75
84
|
padding: var(--sbmd-quote-padding, 0 0.9375rem);
|
|
@@ -77,45 +86,42 @@
|
|
|
77
86
|
--sbmd-quote-border,
|
|
78
87
|
0.25rem solid var(--sbmd-border-color, var(--sbmd-native-border-color))
|
|
79
88
|
);
|
|
89
|
+
border-radius: var(--sbmd-radius, 0);
|
|
90
|
+
background: var(--sbmd-quote-background, transparent);
|
|
80
91
|
}
|
|
81
92
|
|
|
82
93
|
.sbdocs-content .storybook-addon-md-callout {
|
|
83
94
|
margin: var(--sbmd-block-spacing, 1rem) 0;
|
|
84
95
|
padding: var(--sbmd-callout-padding, 0.5rem 1rem);
|
|
85
|
-
border-inline-start: var(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
);
|
|
89
|
-
border-inline-start-color: var(--sbmd-native-callout-color);
|
|
96
|
+
border-inline-start: var(--sbmd-callout-border, 0.25rem solid var(--sbmd-callout-accent));
|
|
97
|
+
border-radius: var(--sbmd-radius, 0);
|
|
98
|
+
background: var(--sbmd-callout-background, transparent);
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
.sbdocs-content .storybook-addon-md-callout[data-callout='note'] {
|
|
93
|
-
--sbmd-
|
|
94
|
-
--sbmd-callout-note-color,
|
|
95
|
-
var(--sbmd-native-callout-note-color)
|
|
96
|
-
);
|
|
102
|
+
--sbmd-callout-accent: var(--sbmd-callout-note-color, var(--sbmd-native-callout-note-color));
|
|
97
103
|
}
|
|
98
104
|
|
|
99
105
|
.sbdocs-content .storybook-addon-md-callout[data-callout='tip'] {
|
|
100
|
-
--sbmd-
|
|
106
|
+
--sbmd-callout-accent: var(--sbmd-callout-tip-color, var(--sbmd-native-callout-tip-color));
|
|
101
107
|
}
|
|
102
108
|
|
|
103
109
|
.sbdocs-content .storybook-addon-md-callout[data-callout='important'] {
|
|
104
|
-
--sbmd-
|
|
110
|
+
--sbmd-callout-accent: var(
|
|
105
111
|
--sbmd-callout-important-color,
|
|
106
112
|
var(--sbmd-native-callout-important-color)
|
|
107
113
|
);
|
|
108
114
|
}
|
|
109
115
|
|
|
110
116
|
.sbdocs-content .storybook-addon-md-callout[data-callout='warning'] {
|
|
111
|
-
--sbmd-
|
|
117
|
+
--sbmd-callout-accent: var(
|
|
112
118
|
--sbmd-callout-warning-color,
|
|
113
119
|
var(--sbmd-native-callout-warning-color)
|
|
114
120
|
);
|
|
115
121
|
}
|
|
116
122
|
|
|
117
123
|
.sbdocs-content .storybook-addon-md-callout[data-callout='caution'] {
|
|
118
|
-
--sbmd-
|
|
124
|
+
--sbmd-callout-accent: var(
|
|
119
125
|
--sbmd-callout-caution-color,
|
|
120
126
|
var(--sbmd-native-callout-caution-color)
|
|
121
127
|
);
|
|
@@ -123,7 +129,7 @@
|
|
|
123
129
|
|
|
124
130
|
.sbdocs-content .storybook-addon-md .storybook-addon-md-callout-label {
|
|
125
131
|
margin: 0 0 0.25rem;
|
|
126
|
-
color: var(--sbmd-
|
|
132
|
+
color: var(--sbmd-callout-accent);
|
|
127
133
|
font-weight: var(--sbmd-callout-label-weight, 600);
|
|
128
134
|
}
|
|
129
135
|
|
|
@@ -143,7 +149,7 @@
|
|
|
143
149
|
.sbdocs-content .storybook-addon-md :not(pre) > code {
|
|
144
150
|
padding: var(--sbmd-inline-code-padding, 0.1875rem 0.3125rem);
|
|
145
151
|
border: 0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
146
|
-
border-radius: var(--sbmd-code-radius, 0.1875rem);
|
|
152
|
+
border-radius: var(--sbmd-code-radius, var(--sbmd-radius, 0.1875rem));
|
|
147
153
|
background: var(--sbmd-inline-code-background, var(--sbmd-native-code-background));
|
|
148
154
|
color: inherit;
|
|
149
155
|
font-size: var(--sbmd-inline-code-size, 0.9em);
|
|
@@ -153,7 +159,7 @@
|
|
|
153
159
|
|
|
154
160
|
.sbdocs-content .storybook-addon-md pre {
|
|
155
161
|
padding: var(--sbmd-code-padding, 1.25rem);
|
|
156
|
-
border-radius: var(--sbmd-code-radius, 0.1875rem);
|
|
162
|
+
border-radius: var(--sbmd-code-radius, var(--sbmd-radius, 0.1875rem));
|
|
157
163
|
overflow-x: auto;
|
|
158
164
|
}
|
|
159
165
|
|
|
@@ -174,10 +180,17 @@
|
|
|
174
180
|
|
|
175
181
|
.sbdocs-content .storybook-addon-md :is(th, td) {
|
|
176
182
|
padding: var(--sbmd-table-cell-padding, 0.375rem 0.8125rem);
|
|
177
|
-
border:
|
|
183
|
+
border: var(
|
|
184
|
+
--sbmd-table-border,
|
|
185
|
+
0.0625rem solid var(--sbmd-border-color, var(--sbmd-native-border-color))
|
|
186
|
+
);
|
|
178
187
|
text-align: start;
|
|
179
188
|
}
|
|
180
189
|
|
|
190
|
+
.sbdocs-content .storybook-addon-md th {
|
|
191
|
+
background: var(--sbmd-table-heading-background, transparent);
|
|
192
|
+
}
|
|
193
|
+
|
|
181
194
|
.sbdocs-content .storybook-addon-md tr {
|
|
182
195
|
background: transparent;
|
|
183
196
|
}
|
|
@@ -190,6 +203,8 @@
|
|
|
190
203
|
display: block;
|
|
191
204
|
max-width: 100%;
|
|
192
205
|
height: auto;
|
|
206
|
+
border: var(--sbmd-image-border, 0);
|
|
207
|
+
border-radius: var(--sbmd-radius, 0);
|
|
193
208
|
}
|
|
194
209
|
|
|
195
210
|
.sbdocs-content .storybook-addon-md hr {
|
|
@@ -200,6 +215,10 @@
|
|
|
200
215
|
background: var(--sbmd-border-color, var(--sbmd-native-border-color));
|
|
201
216
|
}
|
|
202
217
|
|
|
218
|
+
.sbdocs-content .storybook-addon-md input[type='checkbox'] {
|
|
219
|
+
accent-color: var(--sbmd-accent-color, auto);
|
|
220
|
+
}
|
|
221
|
+
|
|
203
222
|
.sbdocs-content .storybook-addon-md-tags {
|
|
204
223
|
display: flex;
|
|
205
224
|
flex-wrap: wrap;
|